/* shell — domain styles; order is declared in index.html. */
.app-view { display: flex; width: 100vw; height: 100dvh; background: var(--bg); }
.sidebar { width: 292px; flex: 0 0 292px; display: flex; flex-direction: column; background: var(--zs-paper); color: var(--zs-ink); border-right: 1px solid rgba(26, 17, 11, .14); }
.sidebar-brand { display: flex; align-items: center; gap: 11px; padding: max(17px, env(safe-area-inset-top)) 16px 14px; background: color-mix(in srgb, var(--zs-card) 72%, transparent); }
.sidebar-brand-copy { min-width: 0; display: flex; flex-direction: column; }
.sidebar-brand-copy strong { font-size: 0.9375rem; letter-spacing: -.02em; }
.sidebar-brand-copy span { color: var(--zs-ink-soft); font-size: 0.6875rem; }
.mobile-close { display: none; margin-left: auto; }
.workspace-nav { display: flex; flex-direction: column; gap: 2px; margin: 2px 11px 0; padding: 5px 0 10px; border-bottom: 1px solid rgba(26, 17, 11, .14); }
.workspace-nav-item { position: relative; min-width: 0; min-height: 40px; display: flex; align-items: center; gap: 11px; padding: 0 13px; border: 0; border-radius: 6px; background: transparent; color: var(--zs-ink-soft); cursor: pointer; font-size: 0.8125rem; font-weight: 700; text-align: left; }
.workspace-nav-item svg { width: 18px; height: 18px; }
.workspace-nav-item:hover { color: var(--zs-ink); background: rgba(184, 134, 11, .08); }
.workspace-nav-item.active { background: rgba(184, 134, 11, .12); color: var(--zs-xun-deep); }
.workspace-nav-item.active::before { position: absolute; top: 8px; bottom: 8px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--zs-xun, #b8860b); content: ""; }
.sidebar-context { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.sidebar-context-panel { min-height: 0; flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 13px 11px 0; background: var(--zs-paper); }
.sidebar-context-panel.hidden { display: none !important; }
.sidebar-context-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 0 3px 10px; color: var(--zs-ink-soft); font-size: 0.6875rem; }
.sidebar-context-heading strong { color: var(--zs-ink); font-size: 0.75rem; }
.sidebar-context-heading span { font-size: 0.625rem; }
.sidebar-quick-link { width: 100%; min-height: 43px; display: flex; align-items: center; gap: 9px; padding: 0 10px; border: 1px solid rgba(26, 17, 11, .14); border-radius: 7px; background: var(--zs-card); color: var(--zs-ink); cursor: pointer; text-align: left; }
.sidebar-quick-link + .sidebar-quick-link { margin-top: 7px; }
.sidebar-quick-link svg:first-child { width: 17px; color: var(--primary); }
.sidebar-quick-link svg:last-child { width: 15px; margin-left: auto; color: var(--muted); }
.sidebar-quick-link:hover { border-color: var(--zs-xun); background: rgba(184, 134, 11, .1); }
.sidebar-room-list, .sidebar-reading-list { min-height: 0; overflow-y: auto; }
.sidebar-room-list .chat-room-card { min-height: 58px; padding: 8px 7px; border-radius: 7px; }
.sidebar-room-list .chat-room-card-copy { gap: 2px; }
.sidebar-room-list .chat-room-card strong { font-size: 0.75rem; }
.sidebar-room-list .chat-room-card small { max-width: 175px; font-size: 0.625rem; }
.sidebar-room-list .chat-room-card-meta { flex: 0 0 auto; }
.sidebar-unread-dot { width: 8px; min-width: 8px; height: 8px; padding: 0; border-radius: 50%; }
.sidebar-subheading { padding: 18px 3px 7px; color: var(--subtle); font-size: 0.625rem; font-weight: 750; }
.sidebar-room-search { margin: 0 0 9px; }
.sidebar-reading-action { margin-top: 7px; }
.sidebar-reading-action.active { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-hover); }
.sidebar-reading-card, .sidebar-reading-continue { width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 8px; border: 0; border-radius: 7px; background: transparent; color: var(--text); cursor: pointer; text-align: left; }
.sidebar-reading-card:hover, .sidebar-reading-continue:hover { background: var(--surface-soft); }
.sidebar-reading-card-copy, .sidebar-reading-continue-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sidebar-reading-card strong, .sidebar-reading-continue strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; }
.sidebar-reading-card small, .sidebar-reading-continue small { color: var(--muted); font-size: 0.625rem; }
.sidebar-reading-card svg, .sidebar-reading-continue svg { width: 16px; flex: 0 0 auto; color: var(--primary); }
.sidebar-reading-empty { margin: 7px 3px; color: var(--muted); font-size: 0.6875rem; line-height: 1.55; }
.agent-card-list { min-height: 0; max-height: 33dvh; display: grid; gap: 6px; overflow-y: auto; margin: 0 11px 9px; padding: 1px; }
.agent-card { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; text-align: left; }
.agent-card:hover { border-color: #aaa5ef; background: var(--surface-indigo); }
.agent-card.selected { border-color: var(--primary); box-shadow: inset 3px 0 var(--primary); background: var(--primary-soft); }
.agent-card-icon { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 7px; background: #e9e8ff; color: var(--primary); }
.agent-card-icon svg { width: 16px; height: 16px; }
.agent-card-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.agent-card-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.75rem; }
.agent-card-copy small { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--muted); font-size: 0.625rem; line-height: 1.35; }
.agent-card-recent { flex: 0 0 auto; color: var(--primary); font-size: 0.5625rem; writing-mode: vertical-rl; }
.feature-picker { min-height: 44px; margin: 4px 13px 9px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 0 11px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, .75); }
.feature-picker span { color: var(--muted); font-size: 0.6875rem; font-weight: 700; }
.feature-picker select { min-width: 0; width: 100%; border: 0; outline: 0; background: transparent; color: var(--text); cursor: pointer; font-size: 0.8125rem; font-weight: 650; }
.feature-picker:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67, 56, 202, .1); }
.new-chat-button { min-height: 46px; margin: 4px 13px 12px; padding: 0 14px; border: 1px solid #cbc8f5; border-radius: 11px; background: var(--primary-soft); color: var(--primary-hover); cursor: pointer; text-align: left; font-weight: 700; }
.new-chat-button:hover { background: #e5e3ff; }
.new-chat-button span { margin-right: 7px; font-size: 1.125rem; }
.conversation-search { height: 44px; margin: 0 13px 9px; display: flex; align-items: center; gap: 7px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, .75); color: var(--subtle); }
.conversation-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(67, 56, 202, .1); }
.conversation-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 0.8125rem; }
.conversation-section { min-height: 0; flex: 1; display: flex; flex-direction: column; padding: 0 8px; }
.section-label { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 5px; color: var(--muted); font-size: 0.6875rem; font-weight: 700; }
.offline-badge { padding: 2px 7px; border-radius: 99px; background: var(--warning-soft); color: var(--warning); font-size: 0.625rem; }
.conversation-list { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 9px; }
.conversation-group { margin-top: 7px; }
.conversation-group-title { margin: 0; padding: 6px 9px 4px; color: var(--subtle); font-size: 0.625rem; font-weight: 750; letter-spacing: .07em; }
.conversation-empty { margin: 32px 12px; color: var(--muted); text-align: center; font-size: 0.8125rem; }
.conversation-item { display: flex; align-items: center; min-height: 48px; border-radius: 9px; }
.conversation-item:hover, .conversation-item.active { background: #e7e9f1; }
.conversation-item.active { box-shadow: inset 3px 0 var(--primary); }
.conversation-open { min-width: 0; min-height: 48px; flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 7px 10px; border: 0; background: transparent; cursor: pointer; text-align: left; }
.conversation-open span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; }
.conversation-open small { color: var(--subtle); font-size: 0.625rem; }
.conversation-open .conversation-feature-badge { color: var(--primary); font-size: 0.5625rem; }
.conversation-rename { width: 38px; height: 30px; flex: 0 0 38px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; font-size: 0.625rem; }
.conversation-item:hover .conversation-rename, .conversation-rename:focus-visible { opacity: 1; }
.conversation-rename:hover { background: var(--primary-soft); color: var(--primary-hover); }
.conversation-delete { width: 38px; height: 38px; flex: 0 0 38px; margin-right: 4px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; opacity: 0; font-size: 1.1875rem; }
.conversation-item:hover .conversation-delete, .conversation-delete:focus-visible { opacity: 1; }
.conversation-delete:hover { background: var(--danger-soft); color: var(--danger); }
.sidebar-footer { position: relative; padding: 10px 11px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(26, 17, 11, .14); background: color-mix(in srgb, var(--zs-card) 72%, transparent); }
.user-button { width: 100%; min-height: 50px; display: flex; align-items: center; gap: 9px; padding: 6px 8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; text-align: left; }
.user-button:hover { background: rgba(184, 134, 11, .1); }
.user-avatar { width: 35px; height: 35px; flex: 0 0 35px; display: grid; place-items: center; border-radius: 10px; background: rgba(184, 134, 11, .14); color: var(--zs-xun-deep); font-weight: 750; }
.user-summary { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.user-summary strong, .user-summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-summary strong { font-size: 0.75rem; }
.user-summary small { color: var(--zs-ink-soft); font-size: 0.625rem; }
.user-menu, .export-menu { position: absolute; z-index: 20; padding: 6px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); box-shadow: 0 12px 32px rgba(16, 24, 40, .13); }
.user-menu { left: 12px; right: 12px; bottom: 72px; }
.user-menu button, .export-menu button { width: 100%; min-height: 44px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; cursor: pointer; text-align: left; font-size: 0.8125rem; }
.user-menu button:hover, .export-menu button:hover { background: var(--surface-soft); }
.user-menu .danger-menu-item { color: var(--danger); }

.chat-main { min-width: 0; flex: 1; position: relative; display: flex; flex-direction: column; background: var(--surface); }
.chat-header { height: 68px; flex: 0 0 68px; display: flex; align-items: center; gap: 14px; padding: max(0px, env(safe-area-inset-top)) 22px 0; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .96); }
.workspace-page-title { min-width: 0; overflow: hidden; color: var(--text); font-size: 0.875rem; text-overflow: ellipsis; white-space: nowrap; }
.header-brand { display: flex; align-items: center; gap: 8px; padding-right: 14px; border-right: 1px solid var(--line); }
.header-brand strong { font-size: 0.875rem; }
.chat-title { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.chat-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.875rem; }
.chat-title span { display: flex; align-items: center; gap: 5px; color: var(--success); font-size: 0.625rem; }
.chat-title span.offline { color: var(--warning); }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--success-soft); }
.chat-title span.offline .status-dot { box-shadow: 0 0 0 3px var(--warning-soft); }
.icon-button { width: 44px; height: 44px; flex: 0 0 44px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font-size: 1.25rem; }
.icon-button:hover { background: var(--surface-soft); }
.icon-button svg, .composer-icon-button svg { width: 20px; height: 20px; stroke-width: 1.8; }
.header-actions { display: flex; align-items: center; gap: 7px; }
.management-mode-button { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; padding: 0 11px; border: 1px solid #c9c5f5; border-radius: 8px; background: var(--primary-soft); color: var(--primary-hover); cursor: pointer; font-size: 0.75rem; font-weight: 700; }
.management-mode-button svg { width: 16px; height: 16px; }
.management-mode-button:hover { background: #e4e1ff; }
.speech-master[aria-pressed="true"] { background: var(--success-soft); color: var(--success); }
.mobile-menu { display: none; }
.secondary-button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); cursor: pointer; font-size: 0.75rem; font-weight: 650; }
.secondary-button:hover:not(:disabled) { background: var(--surface-soft); }
.export-wrap { position: relative; }
.export-menu { top: 47px; right: 0; width: 165px; }
.export-selection-modal { width: min(560px, 100%); max-height: min(82dvh, 760px); }
.export-selection-search { margin: 4px 0 10px; }
.referral-quota { margin: 10px 0 14px; color: var(--muted); font-size: 0.8125rem; }
.export-selection-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 10px; }
.export-selection-toolbar .checkbox-field { margin: 0; }
.export-selection-count { color: var(--muted); font-size: 0.75rem; white-space: nowrap; }
.export-selection-list { display: grid; gap: 6px; max-height: min(42dvh, 390px); overflow-y: auto; margin-bottom: 18px; padding: 2px; }
.export-selection-row { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-soft); cursor: pointer; }
.export-selection-row:hover { border-color: var(--line-strong); background: var(--surface); }
.export-selection-row input { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--primary); }
.export-selection-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.export-selection-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8125rem; }
.export-selection-copy small { color: var(--muted); font-size: 0.6875rem; }
.export-selection-empty { margin: 24px 0; color: var(--muted); text-align: center; font-size: 0.8125rem; }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 4px; }