/* v41 琉璃控制舱：原生沉浸式透明系统栏，Web 绘制安全区底色。 */
:root {
  color-scheme: dark;
  --bg: #040711;
  --system-top-bg: #071723;
  --system-bottom-bg: #040711;
  --glass: rgba(16, 24, 42, .58);
  --glass-strong: rgba(18, 28, 50, .78);
  --glass-soft: rgba(255, 255, 255, .055);
  --line: rgba(179, 209, 255, .16);
  --line-strong: rgba(159, 226, 219, .32);
  --text: #f4f8ff;
  --muted: #9fb0c8;
  --muted-2: #72829b;
  --accent: #7df0ce;
  --accent-2: #51c8ff;
  --violet: #a78bfa;
  --danger: #ff7f9d;
  --warning: #ffd166;
  --shadow: 0 24px 80px rgba(0, 0, 0, .42);
  --inner-light: inset 0 1px 0 rgba(255, 255, 255, .11);
  --radius-xl: 24px;
  --radius-lg: 18px;
  --radius-md: 14px;
}

* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; height: 100%; overflow: hidden; background: var(--bg); }
body {
  margin: 0;
  overflow-x: hidden;
  height: 100vh;
  height: var(--app-height, 100dvh);
  color: var(--text);
  font-family: "Noto Sans SC", "Microsoft YaHei UI", system-ui, sans-serif;
  background:
    radial-gradient(circle at 18% -12%, rgba(95, 216, 255, .26), transparent 34%),
    radial-gradient(circle at 82% 4%, rgba(125, 240, 206, .18), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(167, 139, 250, .14), transparent 34%),
    linear-gradient(135deg, #030510 0%, #07111f 46%, #050812 100%);
}

body > header::before,
body > .conversation-safe-bottom {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  pointer-events: none;
}

body > header::before {
  top: 0;
  height: max(0px, env(safe-area-inset-top));
  background: linear-gradient(180deg, var(--system-top-bg), rgba(7, 23, 35, .88));
  z-index: -1;
}

body > .conversation-safe-bottom {
  bottom: 0;
  height: max(0px, env(safe-area-inset-bottom));
  background: var(--system-bottom-bg);
  z-index: 1;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background:
    linear-gradient(115deg, transparent 0 28%, rgba(255,255,255,.055) 29%, transparent 31% 100%),
    linear-gradient(72deg, transparent 0 64%, rgba(125,240,206,.04) 65%, transparent 67% 100%);
  opacity: .78;
}

body::after {
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255,255,255,.055), transparent 26%),
    radial-gradient(ellipse at 78% 62%, rgba(81,200,255,.045), transparent 32%),
    radial-gradient(ellipse at 38% 92%, rgba(125,240,206,.035), transparent 30%);
  filter: blur(18px);
  opacity: .7;
}

button, input, textarea { font: inherit; }
button {
  border: 1px solid rgba(125, 240, 206, .38);
  border-radius: 999px;
  padding: 10px 16px;
  color: #061b1a;
  background:
    linear-gradient(180deg, rgba(160, 255, 226, .98), rgba(91, 218, 188, .92));
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(54, 230, 190, .2), var(--inner-light);
  transition: transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}
button:active { transform: translateY(1px) scale(.99); }
button:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
button.ghost {
  color: #d6e4f7;
  background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  border: 1px solid rgba(194, 220, 255, .18);
  box-shadow: var(--inner-light);
}
button.ghost:hover { border-color: rgba(125, 240, 206, .36); background: rgba(125, 240, 206, .09); }
button.danger {
  color: #ffd9e2;
  background: rgba(255, 127, 157, .08);
  border: 1px solid rgba(255, 127, 157, .34);
  box-shadow: var(--inner-light);
}

header {
  height: 78px;
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: max(14px, env(safe-area-inset-top)) 22px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8, 13, 25, .82), rgba(8, 13, 25, .52));
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .22), var(--inner-light);
}
h1 { margin: 2px 0 0; font-size: 20px; letter-spacing: -.02em; }
.eyebrow { font-size: 10px; letter-spacing: .22em; color: var(--accent); text-shadow: 0 0 18px rgba(125, 240, 206, .38); }
.status-wrap { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 13px; }
#device-status { flex: 0 0 auto; }
.device-select {
  max-width: 220px;
  color: #dff6ff;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border: 1px solid rgba(194, 220, 255, .18);
  border-radius: 999px;
  padding: 8px 30px 8px 12px;
  box-shadow: var(--inner-light);
}
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--danger); box-shadow: 0 0 16px currentColor; }
.dot.online { background: var(--accent); }

main {
  display: grid;
  grid-template-columns: 320px minmax(0,1fr);
  height: calc(100vh - 78px);
  height: calc(var(--app-height, 100dvh) - 78px);
  min-height: 0;
  overflow: hidden;
}

aside {
  margin: 12px 0 12px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  overflow: auto;
  background: linear-gradient(180deg, rgba(13, 21, 38, .62), rgba(10, 16, 30, .44));
  backdrop-filter: blur(24px) saturate(145%);
  -webkit-backdrop-filter: blur(24px) saturate(145%);
  box-shadow: var(--shadow), var(--inner-light);
}
.scrim { display: none; }
.mobile-only { display: none; }
.toolbar {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  background: rgba(12, 20, 36, .78);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 3;
}
.toolbar strong { letter-spacing: .02em; }
.task-search-wrap {
  position: sticky;
  top: 57px;
  z-index: 3;
  padding: 10px 12px;
  background: rgba(10, 18, 32, .82);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.task-search-wrap input { min-height: 40px; padding: 9px 14px; border-radius: 999px; font-size: 13px; }
.recent-section { border-bottom: 1px solid var(--line); background: rgba(125, 240, 206, .045); }
.section-label { padding: 10px 14px 4px; color: var(--accent); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.project-section { border-bottom: 1px solid rgba(179, 209, 255, .1); }
.project-group {
  position: sticky;
  top: 108px;
  z-index: 2;
  width: calc(100% - 16px);
  margin: 8px;
  display: grid;
  grid-template-columns: 18px minmax(0,1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 9px 12px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  border: 1px solid rgba(190, 215, 255, .14);
  border-radius: 16px;
  text-align: left;
  box-shadow: var(--inner-light);
}
.project-chevron {
  width: 14px;
  height: 14px;
  background: var(--accent);
  clip-path: polygon(20% 10%, 80% 50%, 20% 90%, 20% 70%, 52% 50%, 20% 30%);
  transform: rotate(90deg);
  transition: transform .16s ease, background .16s ease;
  filter: drop-shadow(0 0 8px rgba(125, 240, 206, .36));
}
.project-section.collapsed .project-chevron { transform: rotate(0deg); }
.project-copy { min-width: 0; }
.project-name { display: block; font-size: 12px; font-weight: 900; color: #bffcef; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-path { display: block; margin-top: 3px; font-size: 10px; font-weight: 500; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-count { min-width: 42px; padding: 4px 7px; border: 1px solid rgba(125,240,206,.2); border-radius: 999px; color: #d8fff7; background: rgba(125,240,206,.08); font-size: 11px; text-align: center; }
.project-tasks { display: block; padding: 0 8px 8px; }
.project-section.collapsed .project-tasks { display: none; }
.task {
  width: 100%;
  text-align: left;
  border-radius: 15px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  padding: 13px 12px;
  box-shadow: none;
}
.task.compact { min-height: 58px; padding: 11px 12px; background: rgba(255,255,255,.025); }
.task.active {
  background: linear-gradient(120deg, rgba(125,240,206,.18), rgba(81,200,255,.09) 54%, rgba(167,139,250,.08));
  border-color: rgba(125,240,206,.36);
  box-shadow: inset 3px 0 0 rgba(125,240,206,.8), 0 10px 30px rgba(0,0,0,.18), var(--inner-light);
}
.task-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.task-meta { margin-top: 7px; color: var(--muted); font-size: 11px; display: flex; justify-content: space-between; gap: 8px; }

.conversation {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.threadbar {
  min-width: 0;
  margin: 12px 12px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(16, 25, 44, .7), rgba(10, 17, 31, .5));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  box-shadow: 0 14px 38px rgba(0,0,0,.2), var(--inner-light);
}
.thread-meta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-state {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid rgba(194, 220, 255, .16);
  border-radius: 999px;
  color: #d9e5f6;
  background: rgba(255,255,255,.06);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: var(--inner-light);
}
.state-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 14px currentColor; }
.thread-state.working { color: var(--accent); background: rgba(125,240,206,.12); border-color: rgba(125,240,206,.32); }
.thread-state.working .state-dot { animation: pulse-state 1.15s ease-in-out infinite; }
.thread-state.done { color: #b3ffe9; background: rgba(16,185,129,.11); border-color: rgba(125,240,206,.28); }
.thread-state.approval { color: var(--warning); background: rgba(255,209,102,.12); border-color: rgba(255,209,102,.34); }
.thread-state.error { color: var(--danger); background: rgba(255,127,157,.13); border-color: rgba(255,127,157,.34); }
.thread-state.loading { color: #9bdcff; background: rgba(81,200,255,.1); border-color: rgba(81,200,255,.28); }
@keyframes pulse-state {
  0%, 100% { transform: scale(1); opacity: .72; }
  50% { transform: scale(1.5); opacity: 1; }
}

.messages {
  min-height: 0;
  overflow-y: auto;
  overflow-anchor: none;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 22px max(18px, calc((100% - 860px)/2)) 20px;
}
.messages::-webkit-scrollbar,
aside::-webkit-scrollbar { width: 10px; }
.messages::-webkit-scrollbar-thumb,
aside::-webkit-scrollbar-thumb { background: rgba(180, 210, 255, .18); border: 3px solid transparent; border-radius: 999px; background-clip: content-box; }
.history-loader {
  display: flex;
  justify-content: center;
  padding: 6px 0 14px;
}
.history-loader-button {
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid rgba(159, 218, 255, .24);
  border-radius: 999px;
  color: #c9e6ff;
  background: linear-gradient(135deg, rgba(255,255,255,.1), rgba(122,204,255,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(5,12,30,.22);
  font-size: 13px;
}
.history-loader-button:disabled {
  opacity: .66;
}
.bubble {
  max-width: 86%;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: 20px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.58;
  border: 1px solid rgba(194, 220, 255, .12);
  box-shadow: 0 14px 36px rgba(0,0,0,.22), var(--inner-light);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
.bubble.user {
  margin-left: auto;
  color: #eafffb;
  background: linear-gradient(135deg, rgba(33, 105, 130, .66), rgba(45, 82, 132, .42));
  border-color: rgba(125,240,206,.22);
}
.bubble.assistant {
  background: linear-gradient(145deg, rgba(25, 34, 58, .76), rgba(12, 19, 35, .58));
  border-color: rgba(178, 205, 255, .15);
}
.bubble.tool {
  max-width: 100%;
  color: #d2dded;
  background: rgba(5, 10, 20, .66);
  border: 1px solid rgba(81, 200, 255, .16);
  border-radius: 14px;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025);
}
.label { display: block; color: var(--muted); font-size: 10px; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .13em; }
.bubble-content { display: block; white-space: normal; }
.bubble-content > :first-child { margin-top: 0; }
.bubble-content > :last-child { margin-bottom: 0; }
.bubble-content p { margin: .48em 0; white-space: pre-wrap; }
.bubble-content .md-heading {
  margin: .92em 0 .42em;
  color: #f7fbff;
  font-weight: 900;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.bubble-content h1 { font-size: 1.35em; }
.bubble-content h2 { font-size: 1.22em; }
.bubble-content h3, .bubble-content h4 { font-size: 1.08em; }
.bubble-content ul,
.bubble-content ol { margin: .56em 0 .68em; padding-inline-start: 1.35em; }
.bubble-content li { margin: .24em 0; padding-inline-start: .12em; }
.bubble-content blockquote {
  margin: .72em 0;
  padding: .72em .9em;
  color: #dce8f8;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(194,220,255,.12);
  border-radius: 14px;
  white-space: pre-wrap;
}
.bubble-content hr { border: 0; border-top: 1px solid rgba(194,220,255,.16); margin: 1em 0; }
.bubble-content a { color: #8be7ff; text-decoration: none; border-bottom: 1px solid rgba(139,231,255,.42); }
.bubble-content a:active { color: var(--accent); }
.bubble-content .local-file-ref {
  display: inline-flex;
  align-items: center;
  max-width: min(100%, 26rem);
  min-height: 0;
  margin: 0 .08em;
  padding: .12em .48em;
  overflow: hidden;
  border: 1px solid rgba(125,240,206,.2);
  border-radius: 8px;
  color: #c9fff2;
  background: rgba(2, 7, 16, .46);
  box-shadow: none;
  font: inherit;
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .92em;
  line-height: 1.35;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: baseline;
}
.bubble-content .local-file-ref::before { content: "↗"; margin-right: .34em; opacity: .62; }
.bubble-content .local-file-ref:active { color: var(--accent); border-color: rgba(125,240,206,.5); }
.bubble-content code {
  padding: .12em .38em;
  border: 1px solid rgba(125,240,206,.18);
  border-radius: 7px;
  color: #c9fff2;
  background: rgba(2, 7, 16, .48);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: .92em;
}
.md-code {
  margin: .78em 0;
  overflow: hidden;
  border: 1px solid rgba(81,200,255,.18);
  border-radius: 16px;
  background: rgba(3, 8, 18, .72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.md-codebar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 38px;
  padding: 6px 7px 6px 12px;
  color: #a9c4dc;
  border-bottom: 1px solid rgba(194,220,255,.1);
  background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.025));
  font-size: 12px;
  font-weight: 800;
}
.md-code-actions { display: inline-flex; gap: 6px; }
.md-code .ghost {
  min-height: 28px;
  padding: 4px 9px;
  font-size: 12px;
}
.md-code pre {
  margin: 0;
  max-height: 52vh;
  overflow: auto;
  padding: 12px;
  white-space: pre;
  line-height: 1.48;
}
.md-code.collapsed pre { max-height: 168px; mask-image: linear-gradient(black 0 74%, transparent 100%); }
.md-code pre code {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #d7e7ff;
  background: transparent;
  font-size: 12px;
}
.md-table-wrap {
  margin: .8em 0;
  overflow-x: auto;
  border: 1px solid rgba(194,220,255,.14);
  border-radius: 15px;
  background: rgba(3, 8, 18, .46);
}
.md-table-wrap table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 13px; }
.md-table-wrap th,
.md-table-wrap td { padding: 9px 10px; border-bottom: 1px solid rgba(194,220,255,.1); text-align: left; vertical-align: top; }
.md-table-wrap th { color: #dffcf5; background: rgba(125,240,206,.07); font-weight: 900; }
.md-table-wrap tr:last-child td { border-bottom: 0; }
.bubble-images { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 160px)); gap: 9px; margin-top: 10px; white-space: normal; }
.bubble-image-card {
  display: grid;
  grid-template-rows: minmax(118px, 1fr) auto;
  width: 100%;
  min-height: 154px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  color: var(--text);
  text-decoration: none;
  touch-action: manipulation;
  cursor: zoom-in;
  background: rgba(7, 13, 25, .7);
  border: 1px solid rgba(194,220,255,.16);
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0,0,0,.28), var(--inner-light);
}
.bubble-image-card img { width: 100%; height: 136px; display: block; object-fit: cover; background: #07101d; }
.bubble-image-card.missing { place-items: center stretch; cursor: pointer; }
.image-placeholder { display: grid; place-items: center; height: 136px; color: #a8bad2; background: linear-gradient(135deg, rgba(21,32,54,.88), rgba(8,14,26,.88)); font-weight: 900; }
.bubble-image-meta { display: block; min-width: 0; padding: 8px 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d3deee; font-size: 12px; border-top: 1px solid rgba(194,220,255,.12); }
.image-lightbox { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px; place-items: center; padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); background: rgba(1,3,8,.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.image-lightbox img { max-width: 100%; max-height: 82vh; border-radius: 18px; object-fit: contain; box-shadow: 0 24px 80px rgba(0,0,0,.55); }
.image-lightbox-caption { max-width: min(92vw, 720px); padding: 8px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e6f1ff; background: rgba(15,23,42,.72); border: 1px solid rgba(194,220,255,.18); border-radius: 999px; font-size: 12px; }
.expand-inline { display: inline-flex; min-height: 36px; margin-top: 12px; padding: 7px 12px; align-items: center; color: var(--accent); background: rgba(125,240,206,.1); border: 1px solid rgba(125,240,206,.25); border-radius: 999px; font-size: 13px; }

.composer {
  position: relative;
  z-index: 2;
  width: auto;
  min-width: 0;
  max-width: calc(100% - 24px);
  overflow: hidden;
  margin: 0 12px 12px;
  padding: 13px max(16px, calc((100% - 900px)/2));
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(17, 26, 46, .78), rgba(9, 15, 28, .7));
  backdrop-filter: blur(26px) saturate(150%);
  -webkit-backdrop-filter: blur(26px) saturate(150%);
  box-shadow: 0 -18px 50px rgba(0,0,0,.28), var(--inner-light);
}
textarea, input {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  color: var(--text);
  background: rgba(4, 10, 20, .62);
  border: 1px solid rgba(194,220,255,.14);
  border-radius: 14px;
  padding: 12px;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
textarea::placeholder, input::placeholder { color: rgba(191, 204, 224, .58); }
textarea { min-height: 48px; max-height: 144px; resize: none; overflow-y: auto; line-height: 1.45; }
textarea:focus, input:focus { border-color: rgba(125,240,206,.55); box-shadow: 0 0 0 3px rgba(125,240,206,.1), inset 0 1px 0 rgba(255,255,255,.05); }
.quickbar { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; overflow-x: auto; scrollbar-width: none; }
.quickbar::-webkit-scrollbar { display: none; }
.quickbar button { flex: 0 0 auto; min-height: 36px; padding: 7px 13px; border-radius: 999px; font-size: 13px; }
.attachments { display: flex; gap: 8px; margin: 0 0 9px; overflow-x: auto; }
.attachment-chip {
  display: inline-grid;
  grid-template-columns: 34px minmax(72px, 1fr) 28px;
  align-items: center;
  gap: 7px;
  max-width: 210px;
  padding: 5px;
  color: var(--text);
  background: rgba(5, 10, 20, .62);
  border: 1px solid rgba(194,220,255,.16);
  border-radius: 14px;
}
.attachment-thumb { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #05201c; background: linear-gradient(135deg, var(--accent), #9fe7ff); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.attachment-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: #d2deef; }
.attachment-chip button { min-width: 26px; min-height: 26px; padding: 0; border-radius: 50%; color: var(--muted); background: rgba(255,255,255,.05); border: 1px solid rgba(194,220,255,.14); }
.send-settings {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr);
  gap: 8px;
  margin: 0 0 8px;
  max-width: 430px;
  min-width: 0;
}
.composer-actions { display: grid; grid-template-columns: minmax(0, 1fr) 72px 86px; align-items: center; gap: 9px; margin-top: 9px; min-width: 0; max-width: 100%; }
.composer-actions button { width: 100%; min-width: 0; padding-inline: 10px; }
.composer-actions #send { width: 100%; min-width: 0; }
.composer-state { min-width: 0; margin-right: 0; color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.model-note { flex: 0 0 auto; color: var(--muted-2); font-size: 11px; }
.model-picker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 18px;
  align-items: center;
  gap: 7px;
  min-width: 0;
  min-height: 44px;
  padding: 4px 9px 4px 11px;
  color: var(--muted-2);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.03));
  border: 1px solid rgba(194, 220, 255, .16);
  border-radius: 14px;
  box-shadow: var(--inner-light);
  text-align: left;
  transition: border-color .16s ease-out, background-color .16s ease-out, transform .16s ease-out;
}
.model-picker:hover, .model-picker:focus-visible, .model-picker[aria-expanded="true"] { border-color: rgba(125,240,206,.56); background: rgba(125,240,206,.07); }
.model-picker-key { color: var(--muted-2); font-size: 11px; white-space: nowrap; }
.model-picker-value { min-width: 0; overflow: hidden; color: #e8fbff; font-size: 12px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.model-picker > svg { width: 18px; height: 18px; color: #98a9c3; transition: transform .18s ease-out; }
.model-picker > svg path, .setting-sheet-close svg path, .setting-option-mark svg path { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.model-picker[aria-expanded="true"] > svg { transform: rotate(180deg); }
.setting-sheet { position: fixed; inset: 0; z-index: 80; display: grid; align-items: end; }
.setting-sheet-scrim { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(1, 6, 16, .68); box-shadow: none; backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); }
.setting-sheet-panel { position: relative; width: min(100%, 520px); max-height: min(78vh, 650px); margin: 0 auto; padding: 10px 14px max(18px, env(safe-area-inset-bottom)); overflow: hidden; color: var(--text); background: linear-gradient(155deg, rgba(20, 34, 55, .98), rgba(7, 15, 29, .99)); border: 1px solid rgba(194,220,255,.2); border-bottom: 0; border-radius: 26px 26px 0 0; box-shadow: 0 -18px 54px rgba(0,0,0,.38), var(--inner-light); animation: setting-sheet-in .2s cubic-bezier(.2,.85,.25,1); }
.setting-sheet-handle { width: 38px; height: 4px; margin: 0 auto 12px; border-radius: 999px; background: rgba(210,230,255,.28); }
.setting-sheet-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 0 4px 12px; }
.setting-sheet-header h2 { margin: 0; font-size: 18px; line-height: 1.3; letter-spacing: -.02em; }
.setting-sheet-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.setting-sheet-close { display: grid; place-items: center; width: 36px; min-width: 36px; height: 36px; padding: 0; color: var(--muted); background: rgba(255,255,255,.055); border: 1px solid rgba(194,220,255,.14); border-radius: 50%; box-shadow: none; }
.setting-sheet-close svg { width: 18px; height: 18px; }
.setting-sheet-options { display: grid; gap: 7px; max-height: calc(min(78vh, 650px) - 98px); overflow: auto; overscroll-behavior: contain; }
.setting-option { display: grid; grid-template-columns: minmax(0, 1fr) 28px; align-items: center; gap: 12px; width: 100%; min-height: 62px; padding: 10px 12px 10px 14px; text-align: left; color: var(--text); background: rgba(255,255,255,.035); border: 1px solid rgba(194,220,255,.1); border-radius: 16px; box-shadow: none; }
.setting-option:hover, .setting-option:focus-visible { border-color: rgba(125,240,206,.36); background: rgba(125,240,206,.065); }
.setting-option.selected { border-color: rgba(125,240,206,.48); background: linear-gradient(135deg, rgba(125,240,206,.13), rgba(110,170,255,.07)); }
.setting-option-copy { display: grid; gap: 3px; min-width: 0; }
.setting-option-copy strong { color: #f4fbff; font-size: 14px; font-weight: 760; }
.setting-option-copy small { overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.setting-option-mark { display: grid; place-items: center; width: 28px; height: 28px; color: transparent; background: rgba(255,255,255,.045); border: 1px solid rgba(194,220,255,.12); border-radius: 50%; }
.setting-option-mark svg { width: 17px; height: 17px; }
.setting-option.selected .setting-option-mark { color: #06221d; background: var(--accent); border-color: transparent; box-shadow: 0 6px 16px rgba(79,225,188,.2); }
@keyframes setting-sheet-in { from { transform: translateY(18px); opacity: .72; } to { transform: translateY(0); opacity: 1; } }
.approval { margin: 0 16px 12px; padding: 14px; border: 1px solid rgba(255,209,102,.35); background: linear-gradient(145deg, rgba(74, 57, 24, .72), rgba(14, 23, 42, .82)); border-radius: 18px; box-shadow: var(--inner-light), 0 18px 42px rgba(0,0,0,.24); }
.approval strong { display: block; color: #fff3c4; font-size: 15px; margin-bottom: 4px; }
.approval-meta { color: var(--muted); font-size: 11px; margin-bottom: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.approval pre { white-space: pre-wrap; max-height: 170px; overflow: auto; font-size: 12px; line-height: 1.55; color: var(--text); background: rgba(5, 10, 23, .42); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 10px; }
.approval-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.jump-latest {
  position: absolute;
  right: max(18px, calc((100% - 900px)/2));
  bottom: calc(var(--composer-offset, 100px) + 12px);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 68px;
  min-height: 44px;
  padding: 8px 13px;
  color: #eaf5ff;
  background: rgba(24, 37, 64, .78);
  border: 1px solid rgba(194,220,255,.22);
  border-radius: 999px;
  box-shadow: 0 14px 38px rgba(0,0,0,.38), var(--inner-light);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.jump-latest svg { width: 17px; height: 17px; }
.jump-latest:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.overlay { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(2, 5, 13, .76); backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%); }
.login-card { width: min(420px,100%); padding: 28px; background: linear-gradient(145deg, rgba(20, 31, 55, .78), rgba(9, 15, 29, .66)); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow), var(--inner-light); }
.login-card p { color: var(--muted); }
.login-card button { width: 100%; margin-top: 12px; }
.error { color: var(--danger); min-height: 20px; margin-top: 8px; }
.empty { color: var(--muted); text-align: center; padding: 24px; }
.empty.large { padding-top: 20vh; }
.toast { position: fixed; right: 18px; bottom: 18px; max-width: 360px; color: #eaf4ff; background: rgba(24,37,64,.86); padding: 12px 16px; border: 1px solid rgba(194,220,255,.18); border-radius: 16px; box-shadow: 0 16px 42px rgba(0,0,0,.42), var(--inner-light); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hidden { display: none !important; }

@media (max-width: 760px) {
  header {
    height: calc(58px + env(safe-area-inset-top));
    padding: calc(7px + env(safe-area-inset-top)) 12px 7px;
    gap: 10px;
  }
  header > div:first-child { flex: 0 0 auto; min-width: 126px; }
  header h1 { font-size: 16px; }
  .eyebrow { font-size: 9px; letter-spacing: .16em; }
  .status-wrap { flex: 1 1 auto; min-width: 0; max-width: none; justify-content: flex-end; gap: 7px; font-size: 12px; }
  #device-status { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .device-select { flex: 1 1 auto; min-width: 104px; max-width: min(46vw, 190px); padding: 7px 25px 7px 10px; font-size: 12px; font-weight: 800; }
  #logout { display: none; }
  main {
    height: calc(100vh - 58px - env(safe-area-inset-top));
    height: calc(var(--app-height, 100dvh) - 58px - env(safe-area-inset-top));
    display: block;
    position: relative;
  }
  aside {
    position: fixed;
    top: calc(58px + env(safe-area-inset-top));
    left: 0;
    bottom: 0;
    z-index: 9;
    width: min(88vw, 380px);
    margin: 0;
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    background: linear-gradient(180deg, rgba(13, 21, 38, .82), rgba(8, 13, 25, .72));
    transform: translateX(-105%);
    transition: transform .18s ease-out;
    box-shadow: 24px 0 70px rgba(0,0,0,.45), var(--inner-light);
    touch-action: pan-y;
    will-change: transform;
  }
  body.tasks-open aside { transform: translateX(var(--drawer-drag-x, 0)); }
  body.tasks-open aside.dragging { transition: none; }
  body.tasks-open aside::after { content: ""; position: fixed; top: 50%; right: 7px; width: 30px; height: 4px; border-radius: 999px; background: rgba(194,220,255,.34); transform: rotate(90deg); pointer-events: none; }
  .scrim { position: fixed; inset: calc(58px + env(safe-area-inset-top)) 0 0; z-index: 8; display: block; background: rgba(0,0,0,.5); border: 0; padding: 0; border-radius: 0; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
  .mobile-only { display: inline-flex; }
  .toolbar { top: 0; padding: 10px 12px; }
  .toolbar .ghost { min-height: 40px; padding: 8px 12px; }
  .task-search-wrap { top: 53px; padding: 8px 10px; }
  .task-search-wrap input { min-height: 38px; font-size: 16px; }
  .section-label { padding: 9px 12px 4px; }
  .project-group { top: 101px; min-height: 50px; padding: 8px 12px; }
  .project-name { font-size: 12px; }
  .project-path { display: block; max-width: 100%; }
  .task { padding: 12px; min-height: 62px; }
  .task.compact { min-height: 54px; padding: 10px 12px; }
  .task-title { font-size: 15px; }
  .task-meta { font-size: 12px; }
  .conversation { height: 100%; grid-template-rows: auto minmax(0,1fr) auto auto; }
  .threadbar { height: 48px; margin: 8px 8px 0; padding: 6px 8px; border-radius: 18px; }
  #task-toggle { min-width: 58px; min-height: 38px; padding: 8px 12px; color: var(--text); background: rgba(255,255,255,.08); }
  .thread-meta { font-size: 14px; }
  .thread-state { min-height: 34px; padding: 6px 9px; font-size: 12px; }
  .messages { padding: 12px 10px 14px; }
  .bubble { max-width: 96%; margin-bottom: 12px; padding: 12px 13px; border-radius: 18px; font-size: 15px; line-height: 1.58; }
  .bubble.tool { font-size: 12px; }
  .label { font-size: 9px; margin-bottom: 4px; }
  .bubble-content ul, .bubble-content ol { padding-inline-start: 1.18em; }
  .md-codebar { align-items: flex-start; flex-direction: column; gap: 6px; }
  .md-code-actions { width: 100%; }
  .md-code .ghost { flex: 1 1 0; justify-content: center; }
  .md-code pre { max-height: 48vh; padding: 10px; }
  .md-code.collapsed pre { max-height: 138px; }
  .md-table-wrap table { min-width: 360px; font-size: 12px; }
  .bubble-images { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .bubble-image-card { min-height: 128px; border-radius: 13px; }
  .bubble-image-card img, .image-placeholder { height: 106px; }
  .bubble-image-meta { padding: 7px 8px; font-size: 11px; }
  .composer { margin: 0 8px 8px; max-width: calc(100% - 16px); padding: 8px 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); border-radius: 20px; }
  .quickbar { margin-bottom: 7px; gap: 7px; }
  .quickbar button { min-height: 34px; padding: 6px 11px; font-size: 13px; }
  .attachments { margin-bottom: 7px; }
  .attachment-chip { grid-template-columns: 32px minmax(56px, 1fr) 26px; max-width: 178px; }
  .attachment-thumb { width: 32px; height: 32px; border-radius: 8px; }
  .send-settings { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; margin-bottom: 7px; max-width: none; min-width: 0; }
  .send-settings .model-picker { min-height: 44px; }
  .send-settings .model-picker-key { font-size: 11px; }
  .send-settings .model-picker-value { font-size: 12px; }
  textarea { min-height: 46px; max-height: 104px; border-radius: 16px; font-size: 16px; }
  .composer-actions { grid-template-columns: minmax(0, 1fr) 64px 74px; gap: 7px; margin-top: 8px; }
  .composer-actions button { min-width: 0; min-height: 44px; border-radius: 16px; padding-inline: 8px; }
  .composer-actions #send { width: 100%; }
  .composer-state { min-width: 0; font-size: 12px; }
  .model-note { display: none; }
  .jump-latest { right: 12px; min-width: 74px; bottom: calc(var(--composer-offset, 108px) + 10px); }
  .toast { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-width: none; }
}