:root {
  --bg: #f6f6f3; --panel: #fff; --sidebar: #eeefeb; --sidebar-hover: rgba(255,255,255,.72);
  --text: #20211f; --muted: #70736c; --line: #dedfd9; --accent: #1d1f1c; --user: #ecece7;
  --green: #37845d; --amber: #bd7b24; --shadow: 0 20px 60px rgba(24,27,22,.16);
  --content-width: 900px; --sidebar-width: 300px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { overflow: hidden; background: var(--bg); color: var(--text); font: 16px Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans SC",sans-serif; }
button, input, textarea, select { color: inherit; font: inherit; }
.app-shell { min-height: 100dvh; }
.sidebar { position: fixed; z-index: 10; inset: 0 auto 0 0; display: flex; width: var(--sidebar-width); height: 100dvh; min-height: 0; flex-direction: column; padding: 14px 12px 12px; border-right: 1px solid var(--line); background: var(--sidebar); }
.main-panel { display: grid; height: 100dvh; min-width: 0; margin-left: var(--sidebar-width); grid-template-rows: 68px minmax(0,1fr) auto; background: var(--panel); }
.brand-row { display: flex; height: 52px; align-items: center; gap: 11px; padding: 5px 7px; }
.brand-row > div:nth-child(3) { display: flex; flex-direction: column; line-height: 1.15; }
.brand-row small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.brand-mark, .empty-logo, .avatar { display: grid; place-items: center; background: #191a18; color: #fff; font-family: Georgia,serif; font-weight: 700; }
.brand-mark { width: 36px; height: 36px; border-radius: 11px; }
.new-chat { margin-left: auto; }
.icon-btn { display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-size: 20px; }
.icon-btn:hover { background: rgba(0,0,0,.07); }
.search-box { display: flex; height: 42px; align-items: center; gap: 8px; margin: 8px 3px 10px; padding: 0 12px; border: 1px solid transparent; border-radius: 12px; background: rgba(255,255,255,.65); }
.search-box:focus-within { border-color: #c8cac3; background: #fff; }
.search-box input { width: 100%; border: 0; outline: 0; background: transparent; }
.thread-list { min-height: 0; flex: 1; overflow: auto; scrollbar-width: thin; }
.thread-group { padding: 17px 10px 7px; color: var(--muted); font-size: 11px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; }
.thread-item { display: block; width: 100%; margin: 2px 0; padding: 11px 10px; border: 0; border-radius: 11px; background: transparent; cursor: pointer; text-align: left; }
.thread-item:hover, .thread-item.active { background: var(--sidebar-hover); }
.thread-item strong, .thread-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-item strong { font-size: 14px; font-weight: 570; }
.thread-item small { margin-top: 5px; color: var(--muted); font-size: 11px; }
.skeleton-list { padding: 21px 10px; color: var(--muted); font-size: 13px; }
.usage-card { display: grid; align-items: center; grid-template-columns: auto 1fr auto; gap: 11px; padding: 15px 8px 7px; border: 0; border-top: 1px solid var(--line); background: transparent; cursor: pointer; text-align: left; }
.usage-card strong, .usage-card small { display: block; }
.usage-card small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.usage-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green); }
.usage-dot.loading { background: var(--amber); animation: pulse-opacity 1.3s infinite; }
.topbar { display: flex; align-items: center; gap: 13px; padding: 0 22px; border-bottom: 1px solid var(--line); background: color-mix(in srgb,var(--panel) 92%,transparent); backdrop-filter: blur(14px); }
.title-wrap { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.title-wrap strong, .title-wrap small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title-wrap strong { font-size: 15px; }
.title-wrap small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.controls { display: flex; align-items: center; gap: 7px; }
.controls select { max-width: 174px; padding: 8px 29px 8px 11px; border: 1px solid var(--line); border-radius: 10px; outline: 0; background: var(--panel); font-size: 13px; }
.conversation { min-height: 0; overflow: auto; padding: 38px max(30px,calc((100% - var(--content-width))/2)) 34px; scroll-behavior: smooth; scrollbar-width: thin; }
.empty-state { display: grid; height: 100%; place-content: center; padding-bottom: 8vh; color: var(--muted); text-align: center; }
.empty-logo { width: 56px; height: 56px; margin: auto; border-radius: 15px; font-size: 24px; }
.empty-state h1 { margin: 19px 0 8px; color: var(--text); font-size: 27px; }
.empty-state p { margin: 0; font-size: 15px; }
.message { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 14px; margin: 0 0 34px; }
.avatar { width: 32px; height: 32px; border-radius: 10px; font-size: 13px; }
.message.user { grid-template-columns: minmax(0,1fr); }
.message.user .bubble { max-width: min(80%,720px); justify-self: end; padding: 11px 16px; border-radius: 19px; background: var(--user); }
.role-label { margin: 1px 0 8px; font-size: 14px; font-weight: 680; }
.markdown { overflow-wrap: anywhere; font-size: 16px; line-height: 1.76; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown p { margin: 0 0 1em; }
.markdown h1, .markdown h2, .markdown h3 { line-height: 1.32; }
.markdown pre { position: relative; overflow: auto; margin: 18px 0; padding: 19px 17px 17px; border: 1px solid #30322f; border-radius: 13px; background: #1e201d; color: #f1f2ed; font-size: 14px; line-height: 1.62; }
.markdown code { font-family: "SFMono-Regular",Consolas,monospace; font-size: .92em; }
.markdown :not(pre) > code { padding: 2px 5px; border-radius: 5px; background: #edede8; }
.copy-code { position: absolute; z-index: 2; top: 8px; right: 8px; padding: 5px 9px; border: 1px solid #555851; border-radius: 7px; opacity: 0; background: #30322e; color: #eee; cursor: pointer; font-size: 11px; transition: opacity .15s; }
.markdown pre:hover .copy-code, .copy-code:focus { opacity: 1; }
.markdown table { display: block; overflow: auto; border-collapse: collapse; }
.markdown th, .markdown td { padding: 8px 11px; border: 1px solid var(--line); }
.message.reasoning, .message.tool { display: block; margin: -12px 0 25px 48px; }
.detail-item { border: 1px solid var(--line); border-radius: 11px; background: #fafaf8; color: var(--muted); font-size: 13px; }
.detail-item summary { padding: 10px 13px; cursor: pointer; }
.detail-body { max-height: 340px; overflow: auto; padding: 0 13px 13px; white-space: pre-wrap; }
.thinking { display: inline-flex; gap: 5px; padding: 12px 2px; }
.thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: pulse-opacity 1.2s infinite; }
.thinking i:nth-child(2) { animation-delay: .2s; } .thinking i:nth-child(3) { animation-delay: .4s; }
@keyframes pulse-opacity { 0%,60%,100% { opacity: .25; } 30% { opacity: 1; } }
.composer-wrap { padding: 16px max(24px,calc((100% - var(--content-width))/2)) 22px; background: var(--panel); }
.composer { display: flex; align-items: flex-end; gap: 10px; padding: 11px 11px 11px 17px; border: 1px solid #cfd1ca; border-radius: 19px; background: var(--panel); box-shadow: 0 8px 32px rgba(30,32,29,.09); }
.composer:focus-within { border-color: #969b91; }
.composer textarea { min-height: 27px; max-height: 190px; flex: 1; resize: none; border: 0; outline: 0; background: transparent; line-height: 1.55; }
.composer button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; font-size: 19px; }
.composer button:disabled { opacity: .24; cursor: default; }
dialog { width: min(580px,calc(100% - 28px)); padding: 0; border: 0; border-radius: 19px; background: var(--panel); color: var(--text); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(15,16,15,.4); backdrop-filter: blur(3px); }
.dialog-head { display: flex; min-height: 68px; align-items: center; padding: 15px 22px; border-bottom: 1px solid var(--line); }
.dialog-head > div { flex: 1; }
.dialog-head h2 { margin: 0; font-size: 20px; }
.usage-content, .approval-content { min-height: 160px; padding: 23px 24px 25px; font-size: 14px; }
.usage-content h3 { margin: 0 0 16px; font-size: 15px; }
.limit-row { margin-bottom: 23px; }
.limit-title { display: flex; justify-content: space-between; margin-bottom: 9px; font-size: 14px; }
.bar { height: 10px; overflow: hidden; border-radius: 8px; background: #e5e7e1; }
.bar span { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.limit-row small, .reset-card { color: var(--muted); font-size: 13px; }
.limit-row small { display: block; margin-top: 8px; }
.reset-card { padding: 15px; border-radius: 12px; background: var(--sidebar); line-height: 1.55; }
.approval-content p { line-height: 1.55; }
.approval-content pre { max-height: 280px; overflow: auto; padding: 14px; border-radius: 11px; background: #1e201d; color: #f1f2ed; white-space: pre-wrap; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.primary-button, .secondary-button { padding: 8px 13px; border-radius: 9px; cursor: pointer; }
.primary-button { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.secondary-button { border: 1px solid var(--line); background: var(--panel); }
.toast { position: fixed; z-index: 30; bottom: 25px; left: 50%; padding: 11px 15px; border-radius: 10px; opacity: 0; background: #252623; color: #fff; pointer-events: none; transform: translate(-50%,20px); transition: .2s; font-size: 13px; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.mobile-only { display: none; }
@media (max-width: 880px) { .controls #approvalSelect { display: none; } }
@media (max-width: 760px) {
  :root { --sidebar-width: min(88vw,330px); }
  .sidebar { box-shadow: var(--shadow); transform: translateX(-105%); transition: transform .22s; }
  .sidebar.open { transform: none; }
  .main-panel { height: 100dvh; margin-left: 0; }
  .mobile-only { display: grid; place-items: center; }
  .brand-row .mobile-only { order: 4; }
  .topbar { padding: 0 10px; }
  .controls select { max-width: 120px; }
  .controls #effortSelect { display: none; }
  .conversation { padding: 27px 16px; }
  .message.user .bubble { max-width: 92%; }
  .composer-wrap { padding: 12px 10px 14px; }
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#181916; --panel:#20211e; --sidebar:#191a18; --sidebar-hover:#292b27; --text:#eceee8; --muted:#a3a79e; --line:#393b36; --user:#333530; --accent:#eceee8; }
  .brand-mark, .empty-logo, .avatar { background:#eceee8; color:#20211f; }
  .icon-btn:hover { background:rgba(255,255,255,.08); }
  .search-box { background:#252622; }
  .search-box:focus-within { border-color:#55594f; background:#292b27; }
  .composer { border-color:#4b4e46; background:#272824; }
  .composer button, .primary-button { color:#20211f; }
  .detail-item { background:#252622; }
  .markdown :not(pre) > code { background:#30322d; }
  .bar { background:#373933; }
}