:root {
  --bg: #f2f4f6;
  --surface: #ffffff;
  --surface-2: #f7f9fa;
  --ink: #102028;
  --muted: #64727e;
  --line: #dce2e6;
  --soft: #eaf7f2;
  --green: #0b936d;
  --green-2: #087456;
  --green-3: #c9ecdf;
  --navy: #101820;
  --red: #c94141;
  --amber: #a46508;
  --blue: #376fab;
  --shadow: 0 12px 35px #10202812;
  --topbar: 64px;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100%; background: var(--bg); color: var(--ink); font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { border: 0; border-radius: 11px; padding: .7rem .95rem; background: var(--green); color: #fff; font-weight: 750; cursor: pointer; }
button:disabled { opacity: .42; cursor: not-allowed; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #55b99b66; outline-offset: 2px; }
input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); padding: .72rem; outline: none; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px #0b936d17; }
label { display: grid; gap: .32rem; color: var(--muted); font-size: .82rem; font-weight: 680; }
h1, h2, h3, p { overflow-wrap: anywhere; }
hr { margin: 1.4rem 0; border: 0; border-top: 1px solid var(--line); }
[hidden] { display: none !important; }

.ghost { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.danger { color: var(--red); }
.icon { display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px; padding: 0; font-size: 20px; }
#agents-shortcut { position: relative; }
#agents-shortcut .count { position: absolute; top: 1px; right: 0; }
.round { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; padding: 0; font-size: 21px; }
.small-button { padding: .48rem .72rem; font-size: .82rem; }
.eyebrow { margin: 0; color: var(--green-2); font-size: .67rem; font-weight: 850; letter-spacing: .12em; }
.muted { color: var(--muted); }
.small-text { font-size: .78rem; }
.error { min-height: 1.2rem; margin: .25rem 0; color: var(--red); font-size: .84rem; }
.stack { display: grid; gap: .75rem; }
.brand-mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: linear-gradient(145deg, #182a35, #0b936d); color: #fff; font-size: 25px; font-weight: 850; box-shadow: 0 8px 20px #0b936d30; }
.small-mark { width: 35px; height: 35px; border-radius: 10px; font-size: 17px; }

.login-view { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(circle at 50% 18%, #1d4c40, #101820 55%); }
.login-card { width: min(420px, 100%); padding: 2rem; border-radius: 24px; background: #fff; box-shadow: 0 30px 80px #0005; }
.login-card .brand-mark { margin-bottom: 1.2rem; }
.login-card h1 { margin: .2rem 0; font-size: 2rem; }

.app { min-height: 100vh; }
.topbar { position: sticky; z-index: 30; top: 0; height: var(--topbar); display: flex; align-items: center; gap: .62rem; padding: 0 max(12px, env(safe-area-inset-left)); padding-right: max(12px, env(safe-area-inset-right)); background: var(--navy); color: #fff; box-shadow: 0 2px 12px #0002; }
.topbar .ghost { border-color: #ffffff1f; background: transparent; color: #fff; }
.top-apk-button { flex: 0 0 auto; padding: .5rem .68rem; border: 1px solid #62d8b455; border-radius: 10px; background: #123d32; color: #8ce7cb; font-size: .76rem; font-weight: 850; text-decoration: none; white-space: nowrap; }
.top-apk-button:focus-visible { outline: 3px solid #55b99b88; outline-offset: 2px; }
.brand { display: flex; align-items: center; gap: .62rem; min-width: 0; flex: 1; }
.brand > div { display: grid; min-width: 0; }
.brand small { max-width: 45vw; overflow: hidden; color: #aab5be; font-size: .7rem; text-overflow: ellipsis; white-space: nowrap; }
.stream-state { display: flex; align-items: center; gap: .28rem; color: #b9c3ca; font-size: .72rem; }
.connection { color: #53d6ad; font-size: 10px; }
.connection.connecting { color: #f2bd60; }
.connection.offline { color: #ee7676; }

.drawer { position: fixed; z-index: 50; inset: 0 0 0 auto; width: min(410px, 94vw); display: flex; flex-direction: column; padding: max(16px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom)); background: var(--navy); color: #fff; transform: translateX(103%); transition: transform .24s ease; box-shadow: -20px 0 50px #0005; }
.drawer.open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: 5px 4px 10px; }
.drawer h2 { margin: .12rem 0; font-size: 1.15rem; }
.drawer .eyebrow { color: #70dabc; }
.drawer-close { border: 0; background: #ffffff0d; color: #fff; }
.drawer-project { display: grid; gap: .48rem; padding: .72rem; border: 1px solid #ffffff12; border-radius: 13px; background: #ffffff08; }
.drawer-project label { color: #b8c3cb; }
.drawer-action { width: 100%; border-color: #ffffff17; background: transparent; color: #dfe7ec; }
.drawer-form { margin: .25rem 0; padding: .7rem; border-radius: 12px; background: #ffffff0a; }
.drawer-section-label { margin: .8rem .2rem 0; color: #aebac2; font-size: .7rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.server-monitor { display: grid; gap: .52rem; margin-bottom: .7rem; padding: .72rem; border: 1px solid #64d7b433; border-radius: 13px; background: linear-gradient(145deg, #123029, #12232b); }
.server-monitor-head, .traffic-row, .server-monitor-meta { display: flex; align-items: center; justify-content: space-between; gap: .55rem; }
.server-monitor-head span, .server-monitor-meta { color: #99aab4; font-size: .67rem; }
.metric-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) 52px; align-items: center; gap: .5rem; font-size: .72rem; }
.metric-row > strong { text-align: right; white-space: nowrap; }
.metric-track { width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 999px; background: #ffffff14; appearance: none; }
.metric-track::-webkit-progress-bar { border-radius: inherit; background: #ffffff14; }
.metric-track::-webkit-progress-value { border-radius: inherit; background: linear-gradient(90deg, #39ba92, #78e2c0); transition: width .55s ease; }
.metric-track::-moz-progress-bar { border-radius: inherit; background: linear-gradient(90deg, #39ba92, #78e2c0); }
.traffic-row { padding-top: .12rem; color: #cbd7dd; font-size: .72rem; }
.traffic-row strong { color: #83e2c5; }
.session-tools { display: flex; gap: .48rem; margin-top: .8rem; }
.search-field { position: relative; display: block; flex: 1; }
.search-field span { position: absolute; top: .58rem; left: .72rem; color: #6c7984; font-size: 1.15rem; }
.search-field input { padding-left: 2rem; }
.session-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; }
.segmented { display: flex; gap: .25rem; padding: .25rem; border-radius: 11px; background: #e8ecef; }
.drawer .segmented { margin-top: .55rem; background: #ffffff0a; }
.segmented button { flex: 1; padding: .43rem .6rem; background: transparent; color: var(--muted); font-size: .76rem; }
.drawer .segmented button { color: #9eabb5; }
.segmented button.active { background: #fff; color: var(--green-2); box-shadow: 0 2px 8px #0000000d; }
.drawer .segmented button.active { background: #ffffff14; color: #78dfbe; }
.chat-list { display: grid; gap: .28rem; overflow: auto; margin-top: .48rem; padding-right: 2px; }
.chat-row { position: relative; display: flex; align-items: stretch; }
.chat-item { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: .6rem; width: 100%; padding: .66rem 2.55rem .66rem .66rem; border: 1px solid transparent; background: transparent; color: #fff; text-align: left; }
.chat-close { position: absolute; z-index: 2; top: 50%; right: .42rem; width: 30px; height: 30px; padding: 0; border-color: transparent; border-radius: 50%; background: transparent; color: #aeb9c1; font-size: 1.25rem; line-height: 1; }
.chat-close:hover { border-color: #ff8e8e55; background: #ff6b6b19; color: #ffabab; }
.chat-close:disabled { opacity: .25; }
.new-project-choice { display: flex; align-items: center; gap: .5rem; color: #dbe4e9; font-size: .8rem; }
.new-project-choice input { width: auto; }
.session-project-fields { display: grid; gap: .45rem; }
.chat-item.depth-1 { width: calc(100% - 12px); margin-left: 12px; }
.chat-item.depth-2 { width: calc(100% - 24px); margin-left: 24px; }
.chat-item.depth-3 { width: calc(100% - 36px); margin-left: 36px; }
.chat-item.depth-4 { width: calc(100% - 48px); margin-left: 48px; }
.chat-item:hover, .chat-item.active { border-color: #ffffff17; background: #ffffff0e; }
.chat-item.unread::after { position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: #62d8b4; content: ""; }
.chat-item > .chat-body { min-width: 0; display: grid; }
.chat-item strong, .chat-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-item small { color: #9ba8b2; font-size: .7rem; font-weight: 450; }
.chat-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #1b3540; color: #67d7b4; }
.chat-item.busy .chat-icon { background: #0f664f; color: #a9f5dd; animation: livePulse 1s ease-in-out infinite; }
.chat-item.attention .chat-icon { background: #4c3820; color: #f4c879; }
.chat-item.failed .chat-icon { background: #482a2d; color: #f39a9a; }
.pin { color: #83a69b; font-size: .72rem; }
.drawer-empty { padding: 1rem; color: #9ba8b2; text-align: center; }
.load-more { width: 100%; margin: .45rem 0; }
.drawer .load-more { border-color: #ffffff16; background: #ffffff08; color: #dce5ea; }
.drawer-foot { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: auto; padding-top: .75rem; }
.drawer-foot button { flex: 1 1 42%; padding: .48rem; border-color: #ffffff16; background: #ffffff08; color: #dbe4e9; font-size: .77rem; }
.drawer-foot .danger { color: #ff9d9d; }
.drawer-security { margin-top: .55rem; padding-top: .55rem; border-top: 1px solid #ffffff12; }
.drawer-security label { color: #c5d0d7; }
.drawer-security input { margin-top: .25rem; }
.shade { position: fixed; z-index: 40; inset: 0; width: 100%; height: 100%; border-radius: 0; background: #10182080; }
.edge-handle { position: fixed; z-index: 35; top: 42%; width: 27px; min-height: 96px; padding: .55rem .2rem; border: 1px solid #ffffff2b; border-radius: 0 9px 9px 0; background: #101820e8; color: #8de4c9; box-shadow: 0 8px 24px #0004; font-size: .58rem; letter-spacing: .08em; text-orientation: mixed; writing-mode: vertical-rl; }
.agents-handle { left: 0; transform: rotate(180deg); }
.sessions-handle { right: 0; border-radius: 9px 0 0 9px; }

.agent-drawer { position: fixed; z-index: 52; inset: 0 auto 0 0; width: min(820px, 96vw); overflow: auto; padding: max(16px, env(safe-area-inset-top)) 14px max(16px, env(safe-area-inset-bottom)); background: #f3f6f7; color: var(--ink); transform: translateX(-103%); transition: transform .24s ease; box-shadow: 20px 0 50px #0005; }
.agent-drawer.open { transform: none; }
.agent-drawer-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .7rem; }
.agent-drawer-head h2 { margin: .05rem 0; }
.agent-drawer-head small { display: block; max-width: 68vw; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.agent-drawer-head .icon { background: #fff; }
.agent-drawer .agents-panel { padding: .9rem; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: var(--shadow); }
.agent-drawer .agent-detail { padding: .8rem; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.agent-drawer .agent-tree { max-height: calc(100vh - 260px); overflow: auto; }

.main { width: min(1440px, 100%); margin: auto; padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom)); }
.project-card, .panel, .chat-tab { border: 1px solid var(--line); border-radius: 17px; background: var(--surface); box-shadow: var(--shadow); }
.project-card { padding: .9rem 1rem; }
.project-line, .panel-head, .chat-title, .job-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.project-line h1 { margin: .08rem 0; font-size: 1.15rem; }
#project-picker { margin-top: .65rem; }
.project-notes { display: grid; gap: .45rem; margin-top: .65rem; padding: .7rem; border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2); }
.project-notes textarea { resize: vertical; }
.project-note-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .4rem; }
.project-note-actions > span { flex: 1; }
.scope-note { margin: .72rem 0 .35rem; padding: .62rem .75rem; border-radius: 9px; background: var(--soft); color: #296956; font-size: .8rem; }
.project-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem; }
.empty { padding: 12vh 1rem; color: var(--muted); text-align: center; }
.empty .hero { width: 70px; height: 70px; margin: auto; font-size: 34px; }
.empty h2 { color: var(--ink); }

.tabs { position: sticky; z-index: 20; top: var(--topbar); display: flex; gap: .3rem; overflow-x: auto; margin: .7rem 0; padding: .32rem; border: 1px solid var(--line); border-radius: 13px; background: #fff; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { position: relative; flex: 1 0 auto; min-width: 92px; padding: .56rem .48rem; background: transparent; color: var(--muted); white-space: nowrap; }
.tabs button.active { background: var(--soft); color: var(--green-2); }
.count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: .18rem; padding: 0 .3rem; border-radius: 9px; background: var(--red); color: #fff; font-size: .67rem; }
.tab { display: none; }
.tab.active { display: block; }

.chat-tab { display: none; min-height: calc(100vh - 218px); overflow: hidden; }
.chat-tab.active { display: flex; flex-direction: column; }
.chat-title { padding: .88rem 1rem; border-bottom: 1px solid var(--line); }
.chat-title { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.new-session-button { flex: 0 0 auto; padding: .45rem .7rem; }
.chat-title-main { min-width: 0; }
.chat-title h2 { margin: 0; overflow: hidden; font-size: 1.03rem; text-overflow: ellipsis; white-space: nowrap; }
.history-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .48rem .8rem; border-bottom: 1px solid var(--line); background: #f8faf9; color: var(--muted); }
.history-toolbar > div { min-width: 0; display: grid; }
.history-toolbar strong { color: var(--ink); font-size: .76rem; }
.history-toolbar span { font-size: .67rem; }
.history-toolbar button { flex: 0 0 auto; padding: .35rem .55rem; font-size: .7rem; }
.active-agents-strip { display: flex; gap: .42rem; overflow-x: auto; padding: .5rem .8rem; border-bottom: 1px solid var(--line); background: #f3f8fb; }
.active-agent-card { min-width: 145px; display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: .4rem; padding: .4rem .52rem; border: 1px solid #b9d5e7; background: #fff; color: var(--ink); text-align: left; }
.active-agent-card.attention { border-color: #e8c982; background: #fffaf0; }
.active-agent-card > span:first-child { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #e7f1fb; color: var(--blue); }
.active-agent-card > span:last-child { min-width: 0; display: grid; }
.active-agent-card strong, .active-agent-card small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.active-agent-card strong { font-size: .72rem; }
.active-agent-card small { color: var(--muted); font-size: .65rem; }
.session-subline { display: flex; flex-wrap: wrap; align-items: center; gap: .42rem; font-size: .73rem; }
.badges { display: inline-flex; flex-wrap: wrap; gap: .25rem; }
.badge { display: inline-flex; align-items: center; padding: .12rem .42rem; border-radius: 999px; background: #edf0f2; color: #53616c; font-size: .66rem; font-weight: 750; }
.badge.active, .badge.succeeded { background: #e4f7f0; color: #147356; }
.badge.attention, .badge.waiting_input, .badge.recoverable { background: #fff2d9; color: #8b5908; }
.badge.failed, .badge.cancelled { background: #ffebeb; color: #a93b3b; }
.load-older { align-self: center; margin: .55rem 0 0; padding: .42rem .72rem; font-size: .75rem; }
.messages { flex: 1; display: flex; flex-direction: column; gap: .9rem; min-height: 38vh; max-height: calc(100vh - 415px); overflow: auto; padding: 1rem; scroll-behavior: smooth; }
.message { max-width: min(88%, 820px); }
.message.user { align-self: flex-end; padding: .75rem .92rem; border-radius: 16px 16px 4px 16px; background: #163f35; color: #fff; }
.message.assistant { align-self: flex-start; }
.message.system { align-self: center; max-width: 95%; padding: .55rem .75rem; border-radius: 9px; background: #f0f3f5; color: var(--muted); font-size: .8rem; }
.message-meta { display: flex; gap: .45rem; margin-bottom: .25rem; color: #71808b; font-size: .67rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.message.user .message-meta { color: #a8dfcf; }
.message-content { white-space: pre-wrap; overflow-wrap: anywhere; }
.message-link { color: #096c9f; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.message-apk-button { display: table; margin: .55rem 0; padding: .68rem .82rem; border: 1px solid #78cdb2; border-radius: 11px; background: #e7f8f1; color: var(--green-2); font-weight: 850; text-decoration: none; }
.message-media { display: block; width: auto; max-width: min(100%, 720px); max-height: 520px; margin: .55rem 0; border: 1px solid var(--line); border-radius: 12px; background: #0e171d; object-fit: contain; }
.message-image { cursor: zoom-in; }
.message time { font-weight: 500; letter-spacing: 0; text-transform: none; }
.question-stack { display: grid; gap: .48rem; padding: 0 .85rem; }
.question-card { padding: .72rem; border: 1px solid #efcc82; border-radius: 12px; background: #fff8e9; }
.question-card h3 { margin: 0 0 .22rem; color: #79500e; font-size: .82rem; letter-spacing: 0; text-transform: none; }
.question-card p { margin: .2rem 0 .55rem; }
.question-options { display: flex; flex-wrap: wrap; gap: .36rem; }
.question-options button { padding: .43rem .62rem; background: #9b6713; font-size: .76rem; }
.question-answer { display: grid; grid-template-columns: 1fr auto; gap: .4rem; margin-top: .5rem; }
.job-card { margin: 0 .85rem .55rem; padding: .68rem; border: 1px solid #b9e7d8; border-radius: 12px; background: #f0fbf7; }
.job-head { justify-content: flex-start; color: #176d56; }
.job-head strong { min-width: 0; flex: 1; font-size: .82rem; overflow-wrap: anywhere; }
.job-duration { color: var(--muted); font-size: .7rem; }
.spinner { width: 15px; height: 15px; flex: 0 0 auto; border: 2px solid #a9daca; border-top-color: var(--green); border-radius: 50%; animation: spin .8s linear infinite; }
.job-card.succeeded .spinner, .job-card.failed .spinner, .job-card.cancelled .spinner, .job-card.interrupted .spinner, .job-card.recoverable .spinner, .job-card.waiting_input .spinner { animation: none; }
.job-card.failed, .job-card.cancelled { border-color: #efcaca; background: #fff5f5; }
.job-card.waiting_input, .job-card.interrupted, .job-card.recoverable { border-color: #efd292; background: #fff9ed; }
.stop, .resume { padding: .34rem .56rem; border: 1px solid #efc4c4; background: #fff; color: var(--red); font-size: .73rem; }
.resume { border-color: #b6dccc; color: var(--green-2); }
.live-answer { max-height: 180px; margin: .55rem 0; overflow: auto; white-space: pre-wrap; }
.job-card details { font-size: .76rem; color: var(--muted); }
.actions { display: grid; gap: .25rem; max-height: 150px; margin-top: .4rem; overflow: auto; }
.action-row { display: grid; grid-template-columns: auto 1fr; gap: .45rem; padding: .26rem 0; border-top: 1px solid #dbeae5; }
.composer-shell { border-top: 1px solid var(--line); background: #fff; }
.mode-row { display: flex; flex-wrap: wrap; gap: .5rem; padding: .48rem .7rem 0; }
.mode-row label { display: flex; align-items: center; gap: .35rem; font-size: .72rem; }
.mode-row select { width: auto; min-width: 115px; padding: .35rem .55rem; }
.composer { display: grid; grid-template-columns: 1fr auto auto auto; align-items: end; gap: .42rem; padding: .65rem .7rem .3rem; }
.composer textarea { min-height: 44px; max-height: 180px; resize: none; }
.attach { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.image-preview { display: flex; gap: .5rem; overflow-x: auto; padding: 0 .7rem; }
.image-preview:empty { display: none; }
.image-chip { position: relative; flex: 0 0 auto; width: 74px; height: 74px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--soft); }
.image-chip img { width: 100%; height: 100%; object-fit: cover; }
.image-chip button { position: absolute; top: 3px; right: 3px; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: rgba(16,24,32,.82); color: #fff; }
.mic { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.mic.recording { border-color: #e65d5d; background: #fff0f0; animation: pulse 1.2s infinite; }
.send { width: 44px; height: 44px; padding: 0; border-radius: 50%; font-size: 18px; }
.composer-meta { display: flex; justify-content: space-between; min-height: 1.25rem; padding: 0 .8rem; color: var(--muted); font-size: .7rem; }
.composer-shell > .error { margin: 0; padding: 0 .8rem .35rem; }

.panel { min-width: 0; padding: 1rem; }
.panel h2 { margin: .12rem 0; font-size: 1.04rem; }
.soft-empty, .capability-note { margin: .8rem 0; padding: .8rem; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: .84rem; text-align: center; }
.capability-note.available { background: var(--soft); color: #266854; text-align: left; }
.activity-list { display: grid; gap: .55rem; margin: .9rem 0; padding: 0; list-style: none; }
.activity-item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: .6rem; padding: .65rem; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.activity-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #eef3f4; color: #526773; font-weight: 850; }
.activity-item.error .activity-icon { background: #ffebeb; color: var(--red); }
.activity-item.question .activity-icon, .activity-item.approval .activity-icon { background: #fff1d4; color: var(--amber); }
.activity-item.agent .activity-icon { background: #e7f1fb; color: var(--blue); }
.activity-item.file .activity-icon, .activity-item.diff .activity-icon { background: var(--soft); color: var(--green-2); }
.activity-body { min-width: 0; }
.activity-body strong { display: block; font-size: .82rem; }
.activity-body p { margin: .16rem 0 0; color: var(--muted); font-size: .77rem; white-space: pre-wrap; }
.activity-item time { color: var(--muted); font-size: .67rem; white-space: nowrap; }

.agent-filters { max-width: 430px; margin: .75rem 0; }
.agents-layout { display: grid; grid-template-columns: minmax(240px, .75fr) minmax(0, 1.3fr); gap: .75rem; }
.agent-tree { display: grid; align-content: start; gap: .35rem; }
.agent-node { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: .55rem; align-items: center; width: 100%; padding: .6rem; border: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; }
.agent-node.depth-1 { width: calc(100% - 14px); margin-left: 14px; }
.agent-node.depth-2 { width: calc(100% - 28px); margin-left: 28px; }
.agent-node.depth-3 { width: calc(100% - 42px); margin-left: 42px; }
.agent-node.depth-4, .agent-node.depth-5, .agent-node.depth-6, .agent-node.depth-7, .agent-node.depth-8 { width: calc(100% - 56px); margin-left: 56px; }
.agent-node.active { border-color: #9ddbc6; background: #f3fbf8; }
.agent-node.active .agent-avatar, .active-agent-card.active > span:first-child { animation: livePulse 1s ease-in-out infinite; }
.agent-node.attention { border-color: #e8c982; }
.agent-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e9f1f5; color: #426577; }
.agent-node-body { min-width: 0; display: grid; }
.agent-node-body strong, .agent-node-body small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent-node-body small { color: var(--muted); font-size: .69rem; }
.agent-detail { min-height: 180px; margin: 0; text-align: left; }
.agent-detail h3 { margin: 0; color: var(--ink); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.agent-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: .7rem 0; }
.agent-meta div { padding: .45rem; border-radius: 8px; background: #fff; }
.agent-meta small { display: block; color: var(--muted); }
.agent-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; }
.agent-actions button { padding: .45rem .62rem; font-size: .75rem; }
.agent-log { max-height: 240px; overflow: auto; }

.tool-grid { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.8fr); gap: .75rem; }
.entry-form { display: grid; grid-template-columns: 90px 1fr auto; gap: .4rem; margin: .8rem 0; }
.file-list { display: grid; max-height: 60vh; overflow: auto; }
.file-row { display: flex; gap: .6rem; width: 100%; padding: .54rem; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; }
.file-row:hover { background: #f0f5f4; }
.file-row span { color: var(--green); }
.editor { display: flex; flex-direction: column; }
.editor > textarea { min-height: 60vh; flex: 1; margin-top: 1rem; resize: vertical; background: #10171d; color: #e6edf3; font: 13px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.git-grid { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: .7rem; }
h3 { color: var(--muted); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
pre { min-height: 42px; padding: .78rem; border: 1px solid var(--line); border-radius: 9px; background: #111a21; color: #dce6ec; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; }
.diff, .build-log { max-height: 54vh; overflow: auto; }
.apk-panel code { color: var(--green-2); }
.build-status { margin: 1rem 0; padding: .68rem; border-radius: 9px; background: #fff3d9; color: #795600; }
.build-status.succeeded { background: #e8f8f2; color: #176d56; }
.build-status.failed, .build-status.cancelled { background: #fff0f0; color: var(--red); }
.artifacts { display: grid; gap: .45rem; }
.download { display: block; margin-top: .55rem; padding: .75rem; border: 1px solid #9dd8c5; border-radius: 10px; background: #eaf8f3; color: var(--green-2); font-weight: 750; text-decoration: none; }
.toast { position: fixed; z-index: 80; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(92%, 440px); padding: .78rem 1rem; border-radius: 11px; background: var(--navy); color: #fff; box-shadow: 0 12px 40px #0005; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { transform: scale(1.05); } }
@keyframes livePulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 #55dab477; } 50% { opacity: .4; box-shadow: 0 0 0 7px #55dab400; } }

@media (min-width: 1050px) {
  .drawer { width: 410px; }
}

@media (max-width: 800px) {
  .main { padding: .62rem; }
  .project-card { border-radius: 13px; }
  .project-card:not(.expanded) { padding: .68rem .75rem; }
  .tool-grid, .git-grid, .agents-layout { grid-template-columns: 1fr; }
  .editor > textarea { min-height: 55vh; }
  .messages { max-height: none; min-height: 44vh; }
  .chat-tab { min-height: calc(100vh - 206px); }
  .tabs { margin: .55rem 0; }
  .scope-note { font-size: .75rem; }
  .agents-layout .agent-detail { min-height: 130px; }
  .agent-drawer .agents-layout { grid-template-columns: 1fr; }
  .agent-drawer .agent-tree { max-height: 34vh; }
}

@media (max-width: 520px) {
  .stream-state #connection-label { display: none; }
  .topbar { gap: .4rem; }
  .topbar .icon { width: 38px; height: 38px; }
  .brand small { max-width: 130px; }
  .top-apk-button { padding: .43rem .52rem; font-size: .7rem; }
  .history-toolbar span { display: none; }
  .project-meta { display: none; }
  .scope-note { margin-bottom: 0; }
  .tabs button { min-width: 82px; font-size: .76rem; }
  .composer { grid-template-columns: 1fr auto; }
  .composer textarea { grid-column: 1 / -1; }
  .composer .mic, .composer .send { grid-row: 2; }
  .composer .mic { justify-self: end; }
  .entry-form { grid-template-columns: 1fr 1fr; }
  .entry-form button { grid-column: 1 / -1; }
  .job-head { flex-wrap: wrap; }
  .job-head strong { flex-basis: calc(100% - 28px); }
  .question-answer { grid-template-columns: 1fr; }
  .agent-meta { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}