.composer { border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); box-shadow: 0 6px 20px rgb(15 23 42 / 7%); }
.composer:focus-within { border-color: #93c5fd; box-shadow: 0 0 0 3px rgb(37 99 235 / 9%); }
.composer textarea { width: 100%; padding: 15px 15px 8px; resize: none; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 14px; line-height: 1.6; }
.composer-large textarea { min-height: 108px; }
.active-tools { padding: 0 11px 10px; display: flex; gap: 6px; overflow-x: auto; }
.tool-chip { min-height: 30px; padding: 0 9px; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: var(--surface-subtle); font-size: 10px; font-weight: 700; }
.tool-chip .icon { width: 14px; height: 14px; }
.tool-chip.is-active { color: var(--primary); border-color: #bfdbfe; background: var(--primary-soft); }
.composer-footer { min-height: 48px; padding: 7px 9px; display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--border); }
.composer-footer span { min-width: 0; flex: 1; color: var(--muted); font-size: 9px; }
.analysis-scope-card { width: 100%; min-height: 54px; margin: 0 0 10px; padding: 9px 11px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--border); border-radius: 10px; text-align: left; background: var(--surface); }
.analysis-scope-card:hover { border-color: #93c5fd; background: var(--primary-soft); }
.analysis-scope-card span { min-width: 0; flex: 1; }
.analysis-scope-card small, .analysis-scope-card strong { display: block; }
.analysis-scope-card small { color: var(--muted); font-size: 9px; }
.analysis-scope-card strong { margin-top: 4px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.analysis-scope-card em { color: var(--primary); font-size: 9px; font-style: normal; font-weight: 700; }
.analysis-scope-card .icon { width: 14px; color: var(--muted); }
.send-button { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--primary); }
.send-button .icon { width: 18px; }
.voice-input-button { position: relative; color: var(--muted); }
.voice-input-button.is-recording { color: var(--danger); background: #fef2f2; animation: voice-pulse 1.1s ease-in-out infinite; }
.voice-input-button.is-recording::after { position: absolute; top: 5px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--danger); content: ""; }
@keyframes voice-pulse { 50% { box-shadow: 0 0 0 5px rgb(185 28 28 / 10%); } }
.attachment-preview { margin: 0 11px 10px; padding: 9px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-subtle); }
.attachment-preview > span:nth-child(2) { min-width: 0; flex: 1; }
.attachment-preview strong, .attachment-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-preview strong { font-size: 11px; }
.attachment-preview small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.attachment-preview > button { font-size: 18px; }
.file-icon, .resource-icon { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 8px; color: var(--primary); background: var(--primary-soft); }
.file-icon .icon, .resource-icon .icon { width: 17px; }

.suggestion-list { display: grid; gap: 7px; }
.suggestion-list button { min-height: 46px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 9px; text-align: left; background: var(--surface); font-size: 12px; }
.suggestion-list button .icon { width: 15px; margin-left: auto; color: var(--muted); }

.conversation-list { display: grid; gap: 4px; }
.conversation-list > button, .simple-list-row { position: relative; width: 100%; min-height: 62px; padding: 10px; display: flex; align-items: center; gap: 9px; border-radius: 9px; text-align: left; }
.conversation-list > button:hover { background: var(--surface); }
.conversation-list > button > span, .simple-list-row > span { min-width: 0; flex: 1; }
.conversation-list strong, .conversation-list small, .simple-list-row strong, .simple-list-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conversation-list strong, .simple-list-row strong { font-size: 12px; }
.conversation-list small, .simple-list-row small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.conversation-list time { color: var(--muted); font-size: 9px; }
.conversation-list b { position: absolute; right: 8px; bottom: 3px; color: var(--primary); font-size: 8px; }

.tab-row { margin-bottom: 14px; display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab-row button { padding: 9px 11px; color: var(--muted); border-bottom: 2px solid transparent; font-size: 11px; font-weight: 700; }
.tab-row button.is-active { color: var(--primary); border-color: var(--primary); }
.card-grid { display: grid; gap: 10px; }
.resource-card { width: 100%; min-height: 76px; padding: 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: var(--radius); text-align: left; background: var(--surface); }
.resource-card > span:nth-child(2) { min-width: 0; flex: 1; }
.resource-card small, .resource-card strong, .resource-card em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-card small { color: var(--muted); font-size: 9px; }
.resource-card strong { margin-top: 4px; font-size: 12px; }
.resource-card em { margin-top: 4px; color: var(--text); font-size: 9px; font-style: normal; }
.resource-card b { color: var(--success); font-size: 9px; }
.resource-card .warning-text { color: var(--warning); }
.task-card { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.task-card header { display: flex; align-items: center; gap: 9px; }
.task-card header > div { min-width: 0; flex: 1; }
.task-card strong, .task-card small { display: block; }
.task-card strong { font-size: 12px; }
.task-card small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.task-card header > button { color: var(--primary); font-size: 10px; font-weight: 700; }
.task-card p { margin: 12px 0; color: var(--text); font-size: 11px; line-height: 1.5; }
.task-card footer { padding-top: 10px; display: flex; gap: 12px; border-top: 1px solid var(--border); color: var(--muted); font-size: 9px; }
.task-card footer span { flex: 1; }
.task-card footer button { color: var(--text); font-size: 9px; font-weight: 700; }

.generic-intro { padding: 15px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
.generic-intro h2 { margin: 0 0 8px; font-size: 17px; }
.generic-intro p { margin: 0; color: var(--text); font-size: 12px; line-height: 1.65; }
.generic-status { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.generic-status span { padding: 5px 8px; border-radius: 6px; color: var(--text); background: var(--surface-subtle); font-size: 9px; }
.generic-actions { margin-top: 14px; display: grid; gap: 8px; }
.generic-actions button, .setting-row { width: 100%; min-height: 58px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 9px; text-align: left; background: var(--surface); }
.generic-actions button span, .setting-row span { min-width: 0; flex: 1; }
.generic-actions strong, .generic-actions small, .setting-row strong, .setting-row small { display: block; }
.generic-actions strong, .setting-row strong { font-size: 12px; }
.generic-actions small, .setting-row small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.generic-actions .icon, .setting-row .icon { width: 16px; color: var(--muted); }
.workspace-groups { margin-top: 18px; display: grid; gap: 20px; }
.workspace-group > h2 { margin: 0 0 9px; color: var(--muted); font-size: 11px; }
.workspace-group .resource-icon { font-size: 11px; font-weight: 700; }
.account-menu { margin-top: 12px; display: grid; border-top: 1px solid var(--border); }
.account-menu > button { min-height: 54px; padding: 8px 4px; display: flex; align-items: center; gap: 9px; border-bottom: 1px solid var(--border); text-align: left; }
.account-menu > button > span:nth-child(2) { min-width: 0; flex: 1; }
.account-menu strong, .account-menu small { display: block; }
.account-menu strong { flex: 1; font-size: 12px; }
.account-menu small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.account-menu em { color: var(--muted); font-size: 8px; font-style: normal; }
.account-menu .icon { width: 15px; color: var(--muted); }
.account-menu-icon { width: 30px; height: 30px; flex: 0 0 auto !important; display: grid !important; place-items: center; border-radius: 7px; color: var(--text); background: var(--surface-subtle); font-size: 10px; font-weight: 700; }

.analysis-progress { padding: 14px; border: 1px solid #bfdbfe; border-radius: var(--radius); background: var(--primary-soft); }
.analysis-progress header { display: flex; align-items: center; gap: 8px; }
.analysis-progress header strong { flex: 1; font-size: 12px; }
.analysis-progress header em { color: var(--muted); font-size: 10px; font-style: normal; }
.analysis-progress p { color: var(--text); font-size: 11px; }
.analysis-progress .secondary-button { min-height: 34px; font-size: 10px; }
.progress-track { height: 4px; margin-top: 12px; overflow: hidden; border-radius: 2px; background: #dbeafe; }
.progress-track i { display: block; width: 25%; height: 100%; background: var(--primary); transition: width .25s ease; }
.process-row, .source-row { width: 100%; padding: 10px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; border-bottom: 1px solid var(--border); }
.process-row > span, .source-row > span { display: flex; align-items: center; gap: 7px; }
.process-row strong, .process-row small { display: block; }
.process-row strong { font-size: 11px; }
.process-row small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.process-row > .icon, .source-row .icon { width: 15px; color: var(--muted); }
.source-row { margin-top: 4px; font-size: 10px; }
.answer-summary { padding: 18px 0 14px; }
.answer-summary h2 { margin: 0 0 9px; font-size: 19px; line-height: 1.45; letter-spacing: -.02em; }
.answer-summary > p:last-child { margin: 0; color: var(--text); font-size: 12px; line-height: 1.75; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.metric-grid > div { padding: 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); }
.metric-grid small, .metric-grid strong, .metric-grid em { display: block; }
.metric-grid small { color: var(--muted); font-size: 9px; }
.metric-grid strong { margin: 6px 0; font-size: 14px; }
.metric-grid em { color: var(--success); font-size: 9px; font-style: normal; font-weight: 700; }
.metric-grid em.negative { color: var(--danger); }
.chart-card { width: 100%; margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius); text-align: left; background: var(--surface); }
.chart-card header { display: flex; justify-content: space-between; }
.chart-card strong, .chart-card small { display: block; }
.chart-card strong { font-size: 11px; }
.chart-card small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.bar-chart { height: 100px; padding: 12px 8px 0; display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--border); }
.bar-chart i { flex: 1; border-radius: 3px 3px 0 0; background: #93c5fd; }
.large-chart { height: 250px; gap: 14px; }
.answer-actions { padding: 11px 0; display: flex; gap: 7px; }
.answer-actions button { min-height: 32px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 7px; color: var(--text); background: var(--surface); font-size: 9px; }
.answer-actions .icon { width: 14px; }
.hil-card { padding: 14px; border: 1px solid #fed7aa; border-radius: var(--radius); background: #fffaf5; }
.hil-card h2 { margin: 0 0 6px; font-size: 16px; }
.hil-card > p:not(.kicker) { color: var(--text); font-size: 11px; line-height: 1.55; }
.hil-card > div { display: flex; gap: 7px; flex-wrap: wrap; }
.chat-composer { margin: 9px 12px max(9px, env(safe-area-inset-bottom)); padding: 4px; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; }
.chat-composer textarea { min-height: 38px; padding: 9px; }

.option-list, .tool-list { margin-top: 12px; display: grid; gap: 6px; }
.option-helper { margin: 10px 0 0; color: var(--muted); font-size: 9px; line-height: 1.5; }
.option-list > button, .tool-list > button { width: 100%; min-height: 58px; padding: 10px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); border-radius: 9px; text-align: left; background: var(--surface); }
.option-list > button > span:nth-child(1), .tool-list > button > span:nth-child(2) { min-width: 0; flex: 1; }
.option-list strong, .option-list small, .tool-list strong, .tool-list small { display: block; }
.option-list strong, .tool-list strong { font-size: 12px; }
.option-list small, .tool-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.option-list .is-selected { border-color: #93c5fd; background: var(--primary-soft); }
.option-list .icon, .tool-list > button > .icon { width: 16px; color: var(--primary); }
.feature-sheet-body, #featureSheetBody { color: var(--text); font-size: 12px; line-height: 1.65; }
#featureSheetBody ul { padding-left: 18px; }
.logout-button { width: 100%; min-height: 42px; margin-top: 14px; border: 1px solid #fecaca; border-radius: 9px; color: var(--danger); background: #fff; font-weight: 700; }