/* ── Reset & Tokens ───────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=JetBrains+Mono:wght@400;500&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:       #0f110f;
  --surface:  #181a18;
  --surface2: #1f221f;
  --border:   #2a2e2a;
  --text:     #e0e4dd;
  --text2:    #8a8f87;
  --accent:   #7ee787;
  --accent2:  #3fb950;
  --danger:   #f47067;
  --radius:   10px;
  --font:     'DM Sans', system-ui, sans-serif;
  --mono:     'JetBrains Mono', monospace;
}

html,body{
  height:100%;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ── Modal ────────────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;z-index:100;
  display:flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(12px);
  animation:fadeIn .35s ease;
}
.modal-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:40px 36px;
  width:min(360px, 90vw);
  text-align:center;
  animation:slideUp .4s ease;
}
.modal-icon{font-size:42px;margin-bottom:12px}
.modal-card h2{font-size:20px;font-weight:600;margin-bottom:6px}
.modal-card p{color:var(--text2);font-size:13.5px;margin-bottom:22px}
.modal-card input{
  width:100%;padding:11px 14px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);font-family:var(--font);font-size:14px;
  outline:none;transition:border .2s;
}
.modal-card input:focus{border-color:var(--accent)}
.modal-card button{
  margin-top:14px;width:100%;padding:11px;
  background:var(--accent2);
  color:#fff;font-weight:600;font-size:14px;font-family:var(--font);
  border:none;border-radius:var(--radius);
  cursor:pointer;transition:background .2s;
}
.modal-card button:hover{background:var(--accent)}

/* ── App Shell ────────────────────────────────────────────── */
.app{display:flex;flex-direction:column;height:100vh;height:100dvh}
.hidden{display:none!important}

.app-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:56px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.brand{display:flex;align-items:center;gap:10px}
.brand-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
}
.brand-name{font-weight:700;font-size:16px;letter-spacing:-.3px}
.header-meta{display:flex;align-items:center;gap:14px}
.user-badge{
  font-size:12.5px;font-weight:500;
  background:var(--surface2);
  border:1px solid var(--border);
  padding:4px 12px;border-radius:20px;
  color:var(--accent);
}
.icon-btn{
  background:none;border:none;color:var(--text2);cursor:pointer;
  padding:6px;border-radius:6px;display:flex;transition:color .2s, background .2s;
}
.icon-btn:hover{color:var(--accent);background:var(--surface2)}

/* ── Content Layout ───────────────────────────────────────── */
.content-area{
  flex:1;display:flex;overflow:hidden;
}

/* ── Chat Panel (left) ────────────────────────────────────── */
.chat-panel{
  flex:1;display:flex;flex-direction:column;
  min-width:0;position:relative;
}
.messages-list{
  flex:1;overflow-y:auto;padding:20px 24px;
  display:flex;flex-direction:column;gap:6px;
}

/* Message bubbles */
.msg{
  max-width:72%;padding:10px 14px;
  border-radius:14px;
  font-size:14px;
  animation:popIn .25s ease;
  word-wrap:break-word;
}
.msg.self{
  align-self:flex-end;
  background:var(--accent2);
  color:#fff;
  border-bottom-right-radius:4px;
}
.msg.other{
  align-self:flex-start;
  background:var(--surface2);
  border:1px solid var(--border);
  border-bottom-left-radius:4px;
}
.msg .msg-author{
  font-size:11px;font-weight:600;
  margin-bottom:2px;
  opacity:.7;
}
.msg.self .msg-author{color:rgba(255,255,255,.7)}
.msg.other .msg-author{color:var(--accent)}
.msg .msg-time{
  font-size:10px;margin-top:4px;
  opacity:.45;font-family:var(--mono);
}

/* System messages */
.system-msg{
  text-align:center;font-size:12px;
  color:var(--text2);padding:6px 0;
}

/* Input bar */
.chat-input-bar{
  display:flex;gap:10px;
  padding:14px 24px;
  background:var(--surface);
  border-top:1px solid var(--border);
}
.chat-input-bar input{
  flex:1;padding:11px 16px;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--text);font-family:var(--font);font-size:14px;
  outline:none;transition:border .2s;
}
.chat-input-bar input:focus{border-color:var(--accent)}
.send-btn{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent2);border:none;border-radius:var(--radius);
  color:#fff;cursor:pointer;transition:background .2s;flex-shrink:0;
  touch-action:manipulation;
}
.send-btn:hover{background:var(--accent)}
button,.icon-btn{touch-action:manipulation}

/* ── Scroll-to-bottom FAB ────────────────────────────────── */
.scroll-bottom-btn{
  position:absolute;bottom:80px;right:24px;z-index:10;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  background:var(--surface2);
  border:1px solid var(--border);
  border-radius:50%;
  color:var(--text2);
  cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:opacity .2s, transform .2s;
  touch-action:manipulation;
}
.scroll-bottom-btn:hover{color:var(--accent);background:var(--surface)}
.scroll-bottom-btn.hidden{opacity:0;pointer-events:none;transform:translateY(8px)}
.unread-badge{
  position:absolute;top:-6px;right:-6px;
  min-width:20px;height:20px;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent2);
  color:#fff;font-size:11px;font-weight:700;
  border-radius:10px;padding:0 5px;
  font-family:var(--font);
}
.unread-badge.hidden{display:none}

/* ── History Sidebar (right) ──────────────────────────────── */
.history-panel{
  width:340px;flex-shrink:0;
  background:var(--surface);
  border-left:1px solid var(--border);
  display:flex;flex-direction:column;
  transition:width .3s ease, opacity .3s ease;
  overflow:hidden;
}
.history-panel:not(.open){
  width:0;opacity:0;pointer-events:none;
}
.history-header{
  padding:18px 20px 12px;
  border-bottom:1px solid var(--border);
}
.history-header h3{
  font-size:14px;font-weight:700;letter-spacing:-.2px;
}
.history-subtitle{
  font-size:11px;color:var(--text2);
}
.history-list{
  flex:1;overflow-y:auto;padding:12px 16px;
  display:flex;flex-direction:column;gap:2px;
}

/* Individual log entry */
.log-entry{
  font-family:var(--mono);
  font-size:12px;
  line-height:1.6;
  padding:4px 8px;
  border-radius:6px;
  color:var(--text2);
  transition:background .15s;
}
.log-entry:hover{background:var(--surface2)}
.log-ts{color:var(--text2);opacity:.55}
.log-user{color:var(--accent);font-weight:500}
.log-msg{color:var(--text)}

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--text2)}

/* ── Animations ───────────────────────────────────────────── */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(24px);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes popIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}

/* ── History close button (hidden by default, shown on mobile) */
.history-close-btn{display:none}

/* ── Responsive ───────────────────────────────────────────── */

/* Tablet */
@media(max-width:900px){
  .history-panel.open{width:280px}
}

/* Small tablet */
@media(max-width:720px){
  .history-panel.open{width:260px}
  .app-header{padding:0 16px}
  .chat-input-bar{padding:12px 16px}
  .messages-list{padding:16px}
}

/* Mobile */
@media(max-width:540px){
  .history-panel{
    position:fixed;right:0;top:56px;bottom:0;z-index:50;
    width:100%!important;
  }
  .history-panel:not(.open){width:0!important}
  .history-close-btn{
    display:flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    background:none;border:none;color:var(--text2);cursor:pointer;
    border-radius:6px;transition:color .2s, background .2s;
    touch-action:manipulation;
  }
  .history-close-btn:hover{color:var(--accent);background:var(--surface2)}
  .history-header{
    display:flex;align-items:center;justify-content:space-between;
  }
  .modal-card{padding:28px 24px}
  .modal-icon{font-size:36px}
  .modal-card h2{font-size:18px}
  .msg{max-width:85%}
  .messages-list{padding:12px}
  .chat-input-bar{padding:10px 12px;gap:8px}
  .app-header{padding:0 12px}

  /* Hide thin scrollbar on touch — use native */
  ::-webkit-scrollbar{width:0;height:0}
}

/* Small phone */
@media(max-width:380px){
  .modal-card{padding:24px 18px}
  .modal-icon{font-size:32px}
  .modal-card h2{font-size:16px}
  .brand-name{font-size:14px}
  .msg{font-size:13px;max-width:88%}
  .chat-input-bar input{padding:10px 12px;font-size:13px}
}