/* Free.ai Sheets editor (templates/tools/sheets/editor.html). Text uses
 * --brand-ink, fills use --primary (templates/CLAUDE.md: two greens). */
.sheets-root { --sheets-border: #e5e7eb; --sheets-panel: #ffffff; --sheets-muted: #4b5563; background: var(--sheets-panel); }
html.dark .sheets-root { --sheets-border: #2a2a2a; --sheets-panel: #111111; --sheets-muted: #b5b5b5; }

.sheets-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--sheets-border); }
.sheets-brand { font-weight: 700; color: var(--brand-ink, #15803D); white-space: nowrap; }
.sheets-title { max-width: 280px; min-width: 140px; flex: 1 1 180px; }
.sheets-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sheets-status { color: var(--sheets-muted); min-height: 1.2em; }
.sheets-status a { color: var(--brand-ink, #15803D); }

.sheets-main { display: flex; min-height: 560px; height: calc(100vh - 140px); }
.sheets-app { flex: 1 1 auto; min-width: 0; position: relative; }
.sheets-loading { padding: 24px; color: var(--sheets-muted); }

.sheets-ai { flex: 0 0 340px; display: flex; flex-direction: column; border-left: 1px solid var(--sheets-border); background: var(--sheets-panel); min-height: 0; }
.sheets-ai-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--sheets-border); }
.sheets-ai-log { flex: 1 1 auto; overflow-y: auto; padding: 12px; font-size: .9rem; }
.sheets-ai-form { padding: 10px 12px; border-top: 1px solid var(--sheets-border); }
.sheets-ai-form .text-muted, .sheets-ai-log .text-muted { color: var(--sheets-muted) !important; }

.sheets-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sheets-chip { border: 1px solid var(--sheets-border); background: transparent; color: inherit; border-radius: 14px; padding: 4px 10px; font-size: .8rem; text-align: left; }
.sheets-chip:hover { border-color: var(--brand-ink, #15803D); color: var(--brand-ink, #15803D); }

.sheets-msg { margin: 8px 0; padding: 8px 10px; border-radius: 8px; white-space: pre-wrap; word-break: break-word; }
.sheets-msg-user { background: rgba(21, 128, 61, .08); }
.sheets-msg-ai { border: 1px solid var(--sheets-border); }
.sheets-msg-err { border: 1px solid #b91c1c; color: #b91c1c; }
html.dark .sheets-msg-err { border-color: #f87171; color: #fca5a5; }
.sheets-msg ul { margin: 4px 0 0; padding-left: 1.1em; font-size: .82rem; color: var(--sheets-muted); }

/* WCAG 2.5.8 target size on Univer's smallest controls: the zoom slider
 * thumb (14px) grows a transparent hit area, the drawn circle stays 14px;
 * the narrow menu button gets a 24px minimum width. */
#sheets-app button[role="slider"] { box-sizing: content-box; padding: 5px; background-clip: content-box; }
#sheets-app button.univer-w-4 { min-width: 24px; }
/* On a phone the sheet-tab strip scrolls UNDER the add/all-sheets buttons,
 * which left "All sheets" 10px wide to a pointer. Keep them on top. */
#sheets-app [data-u-comp="sheet-bar-append-button"] { position: relative; z-index: 2; background-color: var(--sheets-panel); }

/* Phone and small tablet: the panel drops below the grid, toggled by the AI
 * button (kept reachable at every width, templates/CLAUDE.md 2026-08-12). */
@media (max-width: 991.98px) {
    .sheets-main { flex-direction: column; height: auto; }
    .sheets-app { height: 70vh; min-height: 420px; }
    .sheets-ai { flex: 0 0 auto; border-left: 0; border-top: 1px solid var(--sheets-border); max-height: 70vh; display: none; }
    .sheets-ai.is-open { display: flex; }
    .sheets-title { max-width: none; }
}