/* ---------- Tokens ---------- */
:root{
  --accent: #2F6F6B;
  --accent-strong: #24534F;
  --accent-tint: #E4EFEE;
  --danger: #B3543F;
}

[data-theme="light"]{
  --bg: #FAFAF8;
  --bg-raised: #FFFFFF;
  --bg-sunken: #F1F0EC;
  --border: #E4E2DB;
  --text: #232320;
  --text-dim: #6F6D63;
  --text-faint: #9C9A8E;
  --bubble-user: #EEF3F2;
  --shadow: 0 12px 32px rgba(30,28,20,0.10);
  --scrim: rgba(20,18,12,0.35);
}

[data-theme="dark"]{
  --bg: #17181A;
  --bg-raised: #1F2123;
  --bg-sunken: #101112;
  --border: #2C2E30;
  --text: #EDECE8;
  --text-dim: #A6A49B;
  --text-faint: #706E67;
  --bubble-user: #23302E;
  --shadow: 0 12px 32px rgba(0,0,0,0.45);
  --scrim: rgba(0,0,0,0.55);
  --accent-tint: #1B2B29;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1,h2{ font-family: "Inter Tight", "Inter", sans-serif; }
button{ font-family: inherit; }
textarea, input{ font-family: inherit; }

svg{ width:18px; height:18px; display:block; }

/* ---------- Layout ---------- */
.app{ display:flex; height:100vh; overflow:hidden; }

.sidebar{
  width: 268px;
  flex-shrink:0;
  background: var(--bg-sunken);
  border-right: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding: 14px 12px;
  transition: margin-left .2s ease;
}
.sidebar.collapsed{ margin-left: -268px; }

.sidebar-top{ display:flex; align-items:center; justify-content:space-between; padding: 4px 4px 14px; }
.brand{ display:flex; align-items:center; gap:9px; background:none; border:none; cursor:pointer; padding:2px; color:var(--text); }
.brand-mark{ width:20px; height:20px; border-radius:6px; background: var(--accent); display:inline-block; }
.brand-name{ font-weight:600; font-size:15px; letter-spacing:.01em; }
#closeSidebarBtn{ display:none; }

.new-chat-btn{
  display:flex; align-items:center; gap:8px;
  width:100%; padding:9px 12px; margin-bottom:16px;
  border-radius:9px; border:1px solid var(--border);
  background: var(--bg-raised); color: var(--text);
  font-size:13.5px; font-weight:500; cursor:pointer;
}
.new-chat-btn:hover{ border-color: var(--accent); }

.history-label{ font-size:11.5px; font-weight:600; color: var(--text-faint); text-transform:uppercase; letter-spacing:.06em; padding: 4px 8px 6px; }
.history-list{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.history-item{
  padding:8px 10px; border-radius:8px; font-size:13.5px; color: var(--text-dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; border:none; background:none; text-align:left; width:100%;
}
.history-item:hover{ background: var(--bg-raised); color: var(--text); }
.history-item.active{ background: var(--accent-tint); color: var(--accent-strong); font-weight:500; }
.history-empty{ font-size:12.5px; color: var(--text-faint); padding: 6px 10px; }

.sidebar-bottom{ border-top:1px solid var(--border); padding-top:10px; margin-top:8px; display:flex; flex-direction:column; gap:4px; }
.incognito-row{ display:flex; align-items:center; justify-content:space-between; padding:7px 8px; }
.switch-row{ display:flex; align-items:center; gap:8px; font-size:13.5px; color: var(--text); }
.switch-icon{ color: var(--text-dim); display:flex; }
.switch-icon svg{ width:16px; height:16px; }

.ghost-btn{
  display:flex; align-items:center; gap:8px; width:100%;
  padding:8px 8px; border:none; background:none; color: var(--text-dim);
  font-size:13.5px; border-radius:8px; cursor:pointer;
}
.ghost-btn:hover{ background: var(--bg-raised); color: var(--text); }

/* ---------- Main / topbar ---------- */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar{
  display:flex; align-items:center; gap:10px;
  padding: 12px 20px; border-bottom:1px solid var(--border);
  flex-shrink:0;
}
#openSidebarBtn{ display:none; }
.topbar-title{ flex:1; font-size:14px; font-weight:600; display:flex; align-items:center; gap:8px; color: var(--text); }
.incognito-pill{
  font-size:11px; font-weight:600; color: var(--accent-strong); background: var(--accent-tint);
  padding: 3px 8px; border-radius:999px; letter-spacing:.02em;
}
.topbar-actions{ display:flex; gap:4px; }

.icon-btn{
  width:34px; height:34px; border-radius:8px; border:none; background:none;
  display:flex; align-items:center; justify-content:center; color: var(--text-dim); cursor:pointer;
}
.icon-btn:hover{ background: var(--bg-sunken); color: var(--text); }

/* ---------- Chat area ---------- */
.chat-scroll{ flex:1; overflow-y:auto; }
.empty-state{
  max-width:560px; margin: 9vh auto 0; text-align:center; padding: 0 24px;
}
.empty-mark{ width:40px; height:40px; border-radius:11px; background: var(--accent); margin: 0 auto 18px; }
.empty-state h1{ font-size: 26px; font-weight:600; margin: 0 0 10px; letter-spacing:-.01em; }
.empty-state p{ color: var(--text-dim); font-size:14.5px; line-height:1.6; margin:0; }
.link-btn{ background:none; border:none; color: var(--accent); font-weight:600; cursor:pointer; padding:0; font-size:inherit; font-family:inherit; text-decoration:underline; }

.messages{ max-width:720px; margin:0 auto; padding: 22px 24px 12px; display:flex; flex-direction:column; gap:22px; }

.msg{ display:flex; flex-direction:column; gap:6px; max-width:100%; }
.msg-role{ font-size:12px; font-weight:600; color: var(--text-faint); }
.msg.user{ align-items:flex-end; }
.msg.user .msg-role{ display:none; }
.msg-bubble{ font-size:15px; line-height:1.65; white-space:pre-wrap; word-wrap:break-word; }
.msg.user .msg-bubble{
  background: var(--bubble-user); padding:10px 14px; border-radius:14px 14px 3px 14px; max-width: 78%;
}
.msg.assistant .msg-bubble{ color: var(--text); }
.msg.assistant .msg-bubble p{ margin: 0 0 12px; }
.msg.assistant .msg-bubble p:last-child{ margin-bottom:0; }
.msg.assistant .msg-bubble code{ background: var(--bg-sunken); padding: 1px 5px; border-radius:5px; font-size:13px; }
.msg.assistant .msg-bubble pre{ background: var(--bg-sunken); padding:12px 14px; border-radius:10px; overflow-x:auto; }
.msg.assistant .msg-bubble pre code{ background:none; padding:0; }
.msg.error .msg-bubble{ color: var(--danger); }

.typing-dots{ display:flex; gap:4px; padding:4px 0; }
.typing-dots span{ width:6px; height:6px; border-radius:50%; background: var(--text-faint); animation: blink 1.2s infinite ease-in-out; }
.typing-dots span:nth-child(2){ animation-delay:.15s; }
.typing-dots span:nth-child(3){ animation-delay:.3s; }
@keyframes blink{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } }

/* ---------- Composer ---------- */
.composer-wrap{ padding: 10px 24px 18px; flex-shrink:0; }
.composer{
  max-width:720px; margin:0 auto; display:flex; align-items:flex-end; gap:8px;
  background: var(--bg-raised); border:1px solid var(--border); border-radius:16px;
  padding: 9px 9px 9px 16px; box-shadow: var(--shadow);
}
.composer textarea{
  flex:1; border:none; background:none; resize:none; outline:none;
  color: var(--text); font-size:15px; line-height:1.5; max-height:180px; padding:6px 0;
}
.composer textarea::placeholder{ color: var(--text-faint); }
.send-btn{
  width:34px; height:34px; border-radius:10px; border:none; background: var(--accent); color:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}
.send-btn:disabled{ background: var(--border); color: var(--text-faint); cursor:not-allowed; }
.composer-hint{ text-align:center; font-size:11.5px; color: var(--text-faint); margin-top:9px; }

/* ---------- Modal ---------- */
.modal-backdrop{
  position:fixed; inset:0; background: var(--scrim); display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:50;
}
.modal-backdrop[hidden]{ display:none !important; }
.modal{
  width:100%; max-width:480px; max-height:88vh; overflow-y:auto;
  background: var(--bg-raised); border-radius:16px; border:1px solid var(--border); box-shadow: var(--shadow);
}
.modal-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--border); position:sticky; top:0; background: var(--bg-raised); z-index:2; }
.modal-header h2{ font-size:16px; margin:0; }
.modal-body{ padding: 18px; display:flex; flex-direction:column; gap:20px; }
.field label{ font-size:13.5px; font-weight:600; }
.field-label-row{ display:flex; align-items:center; justify-content:space-between; }
.field-badge{ font-size:11px; color: var(--text-faint); background: var(--bg-sunken); padding:2px 8px; border-radius:999px; }
.field input, .field textarea{
  width:100%; margin-top:8px; border:1px solid var(--border); border-radius:10px; background: var(--bg);
  color: var(--text); padding:9px 11px; font-size:14px; outline:none; resize:vertical;
}
.field input:focus, .field textarea:focus{ border-color: var(--accent); }
.field-hint{ font-size:12px; color: var(--text-faint); margin:7px 0 0; line-height:1.5; }
.field-hint code{ background: var(--bg-sunken); padding:1px 4px; border-radius:4px; }
.field-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.input-with-btn{ display:flex; gap:8px; align-items:center; }
.input-with-btn input{ margin-top:0; }
.text-btn{ border:none; background:none; color: var(--accent); font-weight:600; font-size:12.5px; cursor:pointer; white-space:nowrap; padding:6px 2px; margin-top:8px; }
.text-btn.danger{ color: var(--danger); margin-top:0; }

.advanced{ border:1px solid var(--border); border-radius:12px; padding: 2px 14px; background: var(--bg-sunken); }
.advanced summary{ cursor:pointer; font-size:13px; font-weight:600; color: var(--text-dim); padding: 11px 0; list-style:none; }
.advanced summary::-webkit-details-marker{ display:none; }
.advanced summary::before{ content:"›"; display:inline-block; margin-right:7px; transition: transform .15s; font-size:16px; }
.advanced[open] summary::before{ transform: rotate(90deg); }
.advanced[open] summary{ border-bottom:1px solid var(--border); }
.advanced .field{ padding: 16px 0; }
.advanced .field:not(:last-child){ border-bottom:1px solid var(--border); }

.modal-footer{ display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:14px 18px; border-top:1px solid var(--border); position:sticky; bottom:0; background: var(--bg-raised); z-index:2; }
.save-note{ font-size:12.5px; color: var(--accent-strong); margin-right:auto; opacity:0; transition:opacity .2s; }
.save-note.show{ opacity:1; }
.primary-btn{ background: var(--accent); color:#fff; border:none; padding:9px 18px; border-radius:9px; font-weight:600; font-size:13.5px; cursor:pointer; }
.primary-btn:hover{ background: var(--accent-strong); }

/* ---------- Toggle switch ---------- */
.toggle{
  width:38px; height:22px; border-radius:999px; background: var(--border); border:none; position:relative; cursor:pointer; flex-shrink:0;
  transition: background .15s;
}
.toggle .toggle-knob{
  position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff;
  transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.toggle[aria-checked="true"]{ background: var(--accent); }
.toggle[aria-checked="true"] .toggle-knob{ transform: translateX(16px); }

/* ---------- Responsive ---------- */
@media (max-width: 860px){
  .sidebar{ position:fixed; z-index:40; height:100%; box-shadow: var(--shadow); }
  .sidebar.collapsed{ margin-left:-268px; }
  #closeSidebarBtn{ display:flex; }
  #openSidebarBtn{ display:flex; }
  .messages{ padding: 18px 16px 12px; }
  .composer-wrap{ padding: 8px 14px 14px; }
}

/* ---------- Skills + provider ---------- */
.skills-list{ display:flex; flex-wrap:wrap; gap:6px; padding:2px 6px 10px; max-height:30vh; overflow-y:auto; }
.skill-chip{ border:1px solid var(--border); background:var(--bg-raised); color:var(--text-dim); border-radius:999px; padding:5px 10px; font-size:12.5px; cursor:pointer; }
.skill-chip:hover{ border-color:var(--accent); color:var(--text); }
.skill-chip.active{ background:var(--accent); border-color:var(--accent); color:#fff; }
.skill-chip.add{ border-style:dashed; }
select{ width:100%; margin-top:8px; border:1px solid var(--border); border-radius:10px; background:var(--bg); color:var(--text); padding:9px 11px; font-size:14px; }
.history-list{ min-height:60px; }

/* ---------- Extra responsive ---------- */
.app{ height:100vh; height:100dvh; }
@media (max-width: 860px){
  .sidebar{ width:min(84vw,300px); }
  .sidebar.collapsed{ margin-left:-110vw; }
  .msg.user .msg-bubble{ max-width:90%; }
  .topbar{ padding:10px 12px; }
}
@media (max-width: 480px){
  .empty-state h1{ font-size:21px; }
  .composer-hint{ font-size:10.5px; }
  .modal-backdrop{ padding:8px; }
  .composer textarea{ font-size:16px; } /* stops iPhone zoom */
}

/* ---------- Pro features ---------- */
.input-with-btn select{ margin-top:0; }
.history-row{ display:flex; align-items:center; border-radius:8px; }
.history-row:hover{ background:var(--bg-raised); }
.history-row .history-item{ flex:1; min-width:0; }
.history-row .history-item:hover{ background:none; }
.history-del{ border:none; background:none; color:var(--text-faint); cursor:pointer; font-size:16px; padding:4px 8px; opacity:0; }
.history-row:hover .history-del{ opacity:1; }
.history-del:hover{ color:var(--danger); }
.msg-actions{ display:flex; gap:10px; }
.copy-btn{ border:none; background:none; color:var(--text-faint); font-size:12px; cursor:pointer; padding:2px 0; }
.copy-btn:hover{ color:var(--accent); }
input[type=range]{ padding:0; accent-color:var(--accent); }
.msg-bubble strong{ font-weight:600; }
@media (hover:none){ .history-del{ opacity:1; } }