/* Studio presentation layer: existing roles, controls and responsive layout remain authoritative. */
:root { --sidebar: 248px; }
.studio-composer-toolbar { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-width: 0; }
.studio-composer-toolbar .quick-actions { flex: 1 1 300px; width: auto !important; max-width: 100% !important; flex-wrap: wrap !important; overflow: visible !important; align-items: center; gap: 4px !important; }
.studio-composer-toolbar .chat-file-actions { flex: 0 0 auto; width: auto !important; margin-left: auto !important; }
.studio-composer-toolbar .quick-actions.hidden { display: none !important; }
.studio-composer-toolbar .studio-icon-button { display: inline-flex; align-items: center; justify-content: center; width: 36px !important; height: 36px; min-height: 36px !important; padding: 0 !important; flex: 0 0 36px !important; border-radius: 10px !important; }
.studio-icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.studio-composer-toolbar .chat-model-picker { flex: 0 1 auto; min-width: 0; max-width: 100%; margin-left: 4px; padding-left: 8px; }
.studio-composer-toolbar .chat-model-picker > span { display: none; }
.studio-composer-toolbar .chat-model-picker select { min-width: 0; max-width: 210px; width: 100%; text-overflow: ellipsis; }
.sidebar { background: var(--shell) !important; border-right: 1px solid var(--border); }
.sidebar .nav-item { border-radius: 9px; padding: 9px 12px; font-size: 13px; }
.sidebar .nav-item.active { background: var(--hover) !important; color: var(--text) !important; box-shadow: inset 3px 0 var(--accent); }
.sidebar .new-chat { border-radius: 12px; min-height: 42px; }
.history-search { border-radius: 10px; }
.topbar { box-shadow: none !important; border-bottom: 1px solid var(--border-soft); }
.topbar .eyebrow { display: none; }
.empty-chat { max-width: 880px; margin-inline: auto; }
.empty-chat h1 { font-size: clamp(30px, 4vw, 46px); letter-spacing: -.045em; font-weight: 550; }
.empty-chat p { color: var(--muted); line-height: 1.6; }
.empty-orb { border-radius: 20px !important; box-shadow: none !important; }
.studio-starters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; text-align: left; }
.studio-starters button { display: flex; flex-direction: column; gap: 14px; padding: 20px; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 16px; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s; }
.studio-starters button:hover { border-color: var(--accent); transform: translateY(-2px); }
.studio-starters span { font-size: 10px; letter-spacing: .08em; color: var(--muted); }
.studio-starters strong { font-size: 14px; font-weight: 550; }
.studio-starters small { font-size: 12px; line-height: 1.5; color: var(--muted); }
.composer { border-radius: 22px !important; box-shadow: 0 4px 20px rgb(0 0 0 / .04) !important; }
.view-panel .view-head h1 { letter-spacing: -.035em; }
.studio-model-facts { color: var(--text) !important; font-variant-numeric: tabular-nums; }
#models-grid .view-card small { color: var(--muted); line-height: 1.6; }
#agent-research-form { max-width: 850px; border-radius: 20px; padding: 24px; }
#agent-research-query { min-height: 150px; line-height: 1.65; }
#agent-research-status { max-width: 850px; }
#agent-research-form[aria-busy="true"] { border-color: var(--accent); }
.studio-privacy { font-size: 12px; line-height: 1.65; color: var(--muted); margin-top: 24px; }
.studio-credit { color: var(--muted); font-size: 11px; }
.studio-palette { width: min(560px, calc(100vw - 32px)); margin: 15vh auto auto; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text); padding: 12px; box-shadow: 0 24px 90px rgb(0 0 0 / .2); }
.studio-palette::backdrop { background: rgb(0 0 0 / .28); backdrop-filter: blur(4px); }
.studio-palette-head { display: flex; gap: 8px; padding: 6px 4px 14px; border-bottom: 1px solid var(--border); }
.studio-palette input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--text); padding: 10px; font: inherit; }
.studio-palette button { background: transparent; color: var(--text); border: 0; border-radius: 8px; padding: 12px; cursor: pointer; text-align: left; }
.studio-command-list { display: grid; max-height: 50vh; overflow: auto; padding-top: 8px; }
.studio-command-list button:hover, .studio-command-list button:focus-visible { background: var(--hover); outline: 2px solid var(--accent); outline-offset: -2px; }
@media (max-width: 720px) { .studio-starters { grid-template-columns: 1fr; } .studio-starters button { padding: 14px; gap: 7px; } }
@media (prefers-reduced-motion: reduce) { .studio-starters button { transition: none; } }