/* Tutou chat-first Operate / Command shell. No media/data behavior lives here. */
:root { --ink:#242424; --muted:#696969; --bg:#f5f5f5; --line:#e7e7e7; --panel:#fff; --red:#ef4148; --red-dark:#c62d35; --chat-viewport:100dvh; --chat-top:0px; font-family:"PingFang SC","Microsoft YaHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
html, body { background:#fff; font-size:16px; }
body { height:var(--chat-viewport); }
button, input, textarea, select { font-family:inherit; }
button { cursor:pointer; }
button:disabled { cursor:default; }
:where(button,a,input,textarea,select,summary):focus-visible { outline:2px solid #c62d35; outline-offset:2px; }
.page-shell, body.rooms-enabled .page-shell.rooms-main { width:100%; height:var(--chat-viewport); min-height:0; margin:0; padding:0; padding-block-start:env(safe-area-inset-top); display:grid; grid-template-rows:56px minmax(0,1fr); background:#fff; position:relative; top:var(--chat-top); }
body.rooms-rail-open .page-shell.rooms-main { width:calc(100% - 252px); margin-inline-start:252px; }
.topbar { height:56px; padding:0 16px; gap:8px; border:0; display:flex; min-width:0; }
body.rooms-enabled .topbar { padding-inline-start:64px; }
body.rooms-rail-open .topbar { padding-inline-start:24px; }
.brand { flex:none; min-width:32px; min-height:44px; }
.brand img { width:28px; height:28px; border-radius:8px; box-shadow:none; }
.topbar-copy { flex:1; gap:0; min-width:0; }
.topbar-copy strong { font-size:17px; margin:0; white-space:nowrap; }
.topbar-copy small { display:none; }
.topbar-actions { gap:4px; margin:0; }
.nav-button, .account-pill, .start-button { min-height:44px; height:44px; border:0; background:transparent; border-radius:10px; padding:8px; }
.nav-button { min-width:44px; font-size:14px; max-width:130px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.account-pill, .account-pill.authorized { width:44px; min-width:44px; max-width:44px; padding:6px; background:transparent; border:0; }
.account-pill strong { display:none; }
.account-avatar { width:32px; height:32px; }
.nav-button:hover, .account-pill:hover, .start-button:hover { background:#f3f3f3; }
.start-button { display:flex; align-items:center; justify-content:center; width:44px; min-width:44px; padding:0; color:var(--ink); }
.start-button .button-label { display:none; }
.start-icon, .stop-icon, .start-button.active .stop-icon { width:28px; height:28px; border-radius:8px; background:transparent; color:inherit; box-shadow:none; }
.start-icon svg, .stop-icon svg { width:22px; height:22px; }
.start-button:hover .start-icon, .start-button:hover .stop-icon { transform:none; }
.start-button.active { color:#b12832; background:#fff0f1; }
.task-count { position:static; width:44px; height:44px; min-width:44px; flex:none; font-size:14px; background:#f5f5f5; border:0; border-radius:10px; }
.transcript-card { min-height:0; min-width:0; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; grid-template-columns:minmax(0,1fr); border:0; border-radius:0; background:#fff; overflow:hidden; }
.transcript-card > .transcript-head { grid-row:1; min-width:0; padding:0; border:0; background:transparent; display:block; }
body[data-state="idle"] .transcript-head { height:0; overflow:hidden; }
.presence-center { display:flex; justify-content:center; align-items:center; gap:8px; height:28px; }
.live-presence { gap:4px; }
.avatar-face { display:none; }
.level-bars { width:18px; height:18px; gap:2px; }
.level-bars i { width:2px; max-height:18px; background:#747474; }
.status-line { font-size:12px; max-width:70vw; min-height:0; color:var(--muted); }
.transcript-card > .history-toolbar { grid-row:2; background:#fff; }
.history-toolbar button { min-height:44px; font-size:13px; padding:8px 16px; }
.transcript-card > .transcript { grid-row:3; min-height:0; }
.transcript { padding:20px max(24px,calc((100% - 800px)/2)); gap:24px; background:#fff; scrollbar-gutter:stable; overflow-y:auto; overflow-x:hidden; }
.transcript:empty::before { font-size:18px; line-height:1.6; padding:24px; color:#696969; }
.caption { padding:0; max-width:100%; font-size:16px; line-height:1.7; border-radius:0; }
.caption.assistant { width:100%; border:0; border-radius:0; background:transparent; }
.caption.user { width:fit-content; max-width:85%; padding:10px 16px; border:0; border-radius:18px; background:#f3f3f3; color:var(--ink); }
.message-identity { font-size:12px; gap:7px; margin-bottom:6px; color:#676767; }
.message-identity img { width:22px; height:22px; }
.message-identity strong { color:#484848; max-width:200px; }
.message-identity time { width:auto; font-size:11px; margin-inline-start:auto; color:#727272; opacity:1; }
.message-retract { min-width:44px; min-height:44px; padding:8px 0; font-size:12px; color:#737373; text-decoration:none; }
.message-retract:hover { color:var(--ink); text-decoration:underline; }
.caption.user .message-identity { display:none; }
.composer { grid-row:4; width:min(800px,calc(100% - 48px)); justify-self:center; padding:8px; margin:4px 0 max(16px,env(safe-area-inset-bottom)); background:#f7f7f7; border:1px solid #e4e4e4; border-radius:22px; }
.composer:focus-within { border-color:#c9c9c9; }
.composer-row, .composer[data-input-mode="voice"] .composer-row { display:grid; grid-template-columns:44px 44px minmax(0,1fr) 44px 44px; grid-template-rows:auto 44px; gap:4px; align-items:center; }
.composer textarea { font-size:16px; line-height:1.5; min-height:44px; max-height:140px; padding:10px 12px; border:0; background:transparent; resize:none; }
#messageInput { grid-column:1/-1; grid-row:1; }
#attachButton { grid-column:1; grid-row:2; }
#inputModeToggle { grid-column:4; grid-row:2; }
#sendMessage { grid-column:5; grid-row:2; }
#voiceRecord { grid-column:3/5; grid-row:2; min-width:0; padding:4px; border:0; border-radius:10px; background:#ececec; font-size:15px; }
.composer[data-input-mode="voice"] #inputModeToggle { grid-column:5; }
.composer[data-input-mode="voice"] .composer-row { grid-template-rows:0 44px; row-gap:0; }
.icon-button, .send-button { width:44px; height:44px; border-radius:50%; }
.icon-button { background:transparent; color:#545454; }
.icon-button:hover { background:#eaeaea; }
.send-button { background:var(--red); color:#fff; font-size:25px; font-weight:500; }
.send-button:disabled { opacity:.45; }
.input-mode-toggle::before { content:""; display:block; margin:auto; width:22px; height:22px; background:currentColor; mask:center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='12' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6'/%3E%3C/svg%3E"); }
.input-mode-toggle[aria-pressed="true"]::before { content:""; mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='3'/%3E%3Cpath d='M6 9h1m4 0h1m4 0h1M6 12h1m4 0h1m4 0h1M7 16h10'/%3E%3C/svg%3E"); }
.attachment-tray { max-height:112px; overflow:auto; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); }
.attachment-chip { font-size:12px; padding-inline-end:44px; }
.voice-draft { margin:0 0 6px; padding:8px; border:0; border-bottom:1px solid #e4e4e4; border-radius:0; font-size:14px; }
.voice-draft p { font-size:13px; color:#626262; margin:0 0 4px; }
.voice-draft-actions { gap:6px; }
.voice-draft button { min-height:44px; padding:6px 8px; font-size:14px; line-height:1.4; border-radius:10px; }
.voice-draft label { display:block; font-size:13px; margin-top:4px; }
.voice-draft textarea { margin:4px 0; min-height:52px; max-height:80px; background:#fff; border:1px solid #ddd; border-radius:10px; }
.voice-draft audio { height:44px; margin:4px 0; }
.voice-send-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px; }
.voice-draft[data-status="preview"] #voiceStop { display:none; }

.agent-activity, .task-activity-list > details { border-color:#e5e5e5; border-radius:12px; }
.agent-activity summary, .task-activity-list > details summary { min-height:44px; }
.agent-activity summary strong { font-size:14px; }
.agent-activity summary small { font-size:12px; }
.media-grid { max-width:100%; width:min(430px,100%); }
.media-file { min-height:100px; }
.media-file strong { font-size:14px; }
.media-file small { font-size:12px; }
/* Dialogs are native top-layer surfaces. Existing toast mounts into the active modal. */
dialog::backdrop { background:#0006; backdrop-filter:none; }
.auth-dialog, .profile-dialog, .utility-dialog { width:min(560px,calc(100vw - 24px)); max-height:calc(var(--chat-viewport) - 24px); border-radius:18px; }
.dialog-card { max-height:calc(var(--chat-viewport) - 24px); padding:24px; gap:12px; border:0; border-radius:18px; box-shadow:none; scrollbar-gutter:stable; }
.dialog-card h2 { font-size:22px; padding-inline-end:44px; }
.dialog-card button { font-weight:500; border-radius:10px; }
.dialog-card label, .dialog-card p { line-height:1.5; }
.dialog-card input, .dialog-card textarea, .dialog-card select { font-size:16px; background:#fafafa; }
.dialog-close { position:sticky; top:0; z-index:2; justify-self:end; margin-bottom:-44px; width:44px; height:44px; flex:none; background:#f1f1f1; }
.dialog-brand { padding-inline-end:44px; }
.dialog-brand img { width:32px; height:32px; border-radius:8px; }
.profile-avatar-preview { width:64px; height:64px; box-shadow:none; }
.avatar-change-button { display:flex; align-items:center; min-height:44px; }
.profile-section { padding:16px 0 0; border:0; border-top:1px solid var(--line); border-radius:0; }
.profile-section legend { padding:0 8px 0 0; font-size:16px; }
.check-row { min-height:44px; }
#inboxList { gap:0; }
#inboxList article, #inboxList article[data-unread="true"] { border:0; border-bottom:1px solid var(--line); border-radius:0; padding:16px 0; }
#inboxList article[data-unread="true"] h3::before { content:""; display:inline-block; width:6px; height:6px; margin-inline-end:8px; border-radius:50%; background:var(--red); }
.toast { max-width:min(560px,calc(100vw - 24px)); font-size:15px; border-radius:12px; }
@media(max-width:767px) {
 body.rooms-enabled .page-shell.rooms-main { width:100%; margin-inline-start:0; }
 .topbar { padding-inline:8px; gap:4px; }
 body.rooms-enabled .topbar { padding-inline-start:56px; }
 .topbar-copy strong { font-size:16px; }
 .topbar-actions { gap:0; }
 .brand { min-width:28px; }
 .nav-button { font-size:13px; max-width:70px; }
 .transcript { padding:16px 16px; gap:20px; scrollbar-gutter:auto; }
 .caption.user { max-width:90%; padding:9px 14px; }
 .message-identity time { font-size:11px; }
 .composer { width:calc(100% - 24px); margin-bottom:max(12px,env(safe-area-inset-bottom)); padding:6px; border-radius:20px; }
 .dialog-card { padding:18px 16px; }
 .profile-actions { grid-template-columns:1fr; }
}
@media(max-width:359px) {
 .topbar .brand { display:none; }
 .topbar-copy strong { font-size:15px; }
 .transcript { padding-inline:14px; }
 .composer { width:calc(100% - 16px); }
 .composer-row, .composer[data-input-mode="voice"] .composer-row { column-gap:2px; }
}
@media(max-height:500px) {
 /* The held-recording surface also has to fit landscape/keyboard height. */
 .vg-sheet { padding:12px; height:var(--chat-viewport,100dvh); }
 .vg-card { width:min(680px,100%); padding:12px; border-radius:18px; display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:4px 8px; }
 .vg-brand, .vg-orb { display:none; }
 .vg-title { grid-column:1; grid-row:1; font-size:20px; margin:0; text-align:start; }
 .vg-timer { grid-column:2; grid-row:1; align-self:center; text-align:end; font-size:14px; }
 .vg-wave { grid-column:1/-1; grid-row:2; height:28px; margin:2px 0; }
 .vg-caption { grid-column:1/-1; grid-row:3; min-height:0; max-height:48px; margin:0; font-size:16px; line-height:1.5; }
 .vg-hint { grid-column:1/-1; grid-row:4; font-size:13px; line-height:1.4; margin:0; }
 .vg-keyboard { grid-column:1/-1; grid-row:5; font-size:12px; margin:0; }
 .vg-editor { grid-column:1/-1; grid-row:3; min-height:64px; max-height:80px; margin:4px 0; padding:8px; border-radius:10px; }
 .vg-preview { grid-column:1/-1; grid-row:6; height:44px; min-height:44px; margin:0; }
 .vg-targets { grid-column:1; grid-row:7; gap:8px; margin:4px 0; }
 .vg-actions { grid-column:2; grid-row:7; margin:4px 0; }
 .vg-sheet button { min-height:44px; padding:4px 8px; border-radius:10px; font-size:14px; }
 .vg-private { grid-column:1/-1; grid-row:8; margin:2px 0 0; font-size:12px; line-height:1.4; }
 .composer { margin-block:0 6px; padding:4px; }
 .composer textarea { max-height:60px; }
 .voice-draft { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:4px; padding:2px; margin-bottom:4px; }
 .voice-draft > p { grid-column:1; grid-row:1; align-self:center; }
 .voice-draft > .voice-draft-actions:not(.voice-send-actions) { grid-column:2; grid-row:1; justify-content:end; }
 .voice-draft audio { grid-row:2; grid-column:1; margin:0; min-width:0; }
 .voice-draft label { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
 .voice-draft textarea { grid-row:2; grid-column:2; height:44px; min-height:44px; margin:0; }
 .voice-draft .voice-send-actions { grid-column:1/-1; grid-row:3; }
 .voice-draft button { padding:4px 8px; }
 .transcript { padding-block:8px; gap:12px; }
}
@media(any-pointer:coarse), (max-width:767px) { input, textarea, select, [contenteditable="true"] { font-size:16px !important; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }

/* Quick controls: native handlers, one scrollable row above the composer. */
.transcript-card { grid-template-rows:auto auto minmax(0,1fr) auto auto; }
.transcript-card > .composer { grid-row:5; grid-column:1; }
.quick-controls { grid-row:4; justify-self:center; display:flex; align-items:center; gap:6px; width:min(800px,calc(100% - 48px)); min-width:0; padding:4px 2px 7px; margin:0; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:#e5bdc0 transparent; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
.quick-controls .composer-modes, .quick-controls .voice-stage, .quick-controls .voice-controls, .reply-chips { display:contents; }
.quick-controls .speech-status, .quick-controls .owner-badge, #replyMode { display:none; }
.quick-controls button, .quick-controls .locale-control { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:36px; height:36px; width:auto; margin:0; padding:0 11px; border:1px solid #ebe6e7; border-radius:12px; background:#f8f6f7; color:#70666b; font:500 12px/1.2 system-ui,sans-serif; white-space:nowrap; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.quick-controls svg { flex:none; width:16px; height:16px; }
.quick-controls .reply-chip[aria-pressed="true"] { background:#ffedf0; border-color:#f5b9c2; color:#c12e43; box-shadow:0 2px 6px #d6384b0c; }
.quick-controls .reply-chip[aria-pressed="true"]::after { content:""; width:5px; height:5px; background:currentColor; border-radius:50%; }
.quick-controls #outputAudioToggle[aria-pressed="false"], .quick-controls #microphoneToggle:not(:disabled)[aria-pressed="false"] { background:#edf7f3; border-color:#cce6da; color:#247554; }
.quick-controls #outputAudioToggle[aria-pressed="true"], .quick-controls #microphoneToggle[aria-pressed="true"] { background:#fff0e8; border-color:#f1d2bf; color:#a36339; }
.quick-controls button:disabled { opacity:.5; cursor:default; }
.quick-controls button:hover:not(:disabled) { border-color:#d98998; }
.quick-controls button:focus-visible, .quick-controls select:focus-visible { outline:2px solid #d74459; outline-offset:2px; }
.quick-controls .locale-control { background:#f3f0fa; border-color:#e5dcf4; color:#776095; }
.quick-controls .locale-control select { border:0; background:transparent; color:inherit; padding:0; margin:0; width:auto; min-height:32px; max-width:100px; font:inherit; font-size:12px !important; cursor:pointer; }
.quick-controls #clearDraft { background:transparent; border-color:transparent; }
.composer-row, .composer[data-input-mode="voice"] .composer-row { grid-template-columns:44px minmax(0,1fr) 44px 44px; }
#inputModeToggle { grid-column:3; }
#sendMessage { grid-column:4; }
#voiceRecord { grid-column:2/4; }
.composer[data-input-mode="voice"] #inputModeToggle { grid-column:4; }
@media(max-width:767px) { .quick-controls { width:calc(100% - 24px); } }
@media(max-width:359px) { .quick-controls { width:calc(100% - 16px); } }

.quick-controls .reply-control { display:flex; align-items:center; flex:none; min-width:0; }
.quick-controls #replyChoicesToggle { color:#bd344b; background:#fff0f3; border-color:#f1c9d1; }
.quick-controls .reply-chevron { width:12px; height:12px; transition:transform .18s; }
.quick-controls .reply-chips { display:block; flex:none; width:0; overflow:hidden; opacity:0; margin-inline-start:0; transition:width .2s ease,opacity .15s ease,margin-inline-start .2s ease; }
.quick-controls .reply-options-inner { display:flex; gap:6px; width:max-content; }
.quick-controls .reply-control[data-open="true"] .reply-chips { width:var(--reply-width); opacity:1; margin-inline-start:6px; }
.quick-controls .reply-control[data-open="true"] .reply-chevron { transform:rotate(180deg); }

/* Consistent header hit areas with room for active tasks and inbox badges. */
.topbar-actions { flex:none; gap:6px; }
.topbar-actions > button { flex:0 0 44px; }
#inboxButton { position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; height:44px; padding:0; overflow:visible; }
#inboxButton > svg { width:21px; height:21px; flex:none; }
.inbox-unread { position:absolute; top:1px; right:0; min-width:16px; height:16px; padding:0 3px; border:2px solid #fff; border-radius:10px; background:#dc3c51; color:#fff; font:700 9px/12px system-ui,sans-serif; text-align:center; }
#taskCountButton { font-variant-numeric:tabular-nums; background:#fff0f3; color:#ba3048; border:1px solid #f2d0d7; }
@media(max-width:767px) { .topbar-actions { gap:6px; } .topbar-copy { overflow:hidden; } }