/* CopperForge live layer: only additions needed to wire the design to the OpenCode API. Tokens only. */
.shell__main { display: flex; flex-direction: column; min-height: 100dvh; }
.thread { flex: 1 1 auto; }
.chat-dock { position: sticky; bottom: 0; padding: var(--space-sm) var(--space-lg) var(--space-lg); background: var(--color-paper); }
.chat-dock .composer { width: min(46rem, 100%); margin-inline: auto; }
.model-select { appearance: none; -webkit-appearance: none; cursor: pointer; max-width: 16rem; text-overflow: ellipsis; }
.model-select option { background: var(--color-paper-2); color: var(--color-ink); }
.side-search { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-inner); color: var(--color-muted); }
.side-search svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: 0 0 auto; }
.side-search input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--color-ink); font: inherit; font-size: var(--text-sm); outline: none; }
.side-list a[aria-current="page"] { color: var(--color-accent); }
.side-list .busy::after { content: " ●"; color: var(--color-accent); }
.classic-link { display: block; margin-top: var(--space-xs); font-size: var(--text-xs); color: var(--color-muted); text-align: center; }
.status { font-size: var(--text-xs); color: var(--color-accent); font-family: var(--font-outlier); }
.msg__body { overflow-wrap: anywhere; }
.msg__body p { margin: 0 0 var(--space-xs); white-space: pre-wrap; }
.msg__body pre { white-space: pre; }
.msg__body code:not(pre code) { font-family: var(--font-outlier); font-size: 0.92em; background: var(--color-paper-2); padding: 0 0.3em; border-radius: 4px; }
.msg--error .msg__body { color: var(--color-error); }
details.think { color: var(--color-muted); font-size: var(--text-sm); }
details.think summary { cursor: pointer; }
details.think div { white-space: pre-wrap; margin-top: var(--space-2xs); }
.trace__row .run { color: var(--color-accent); }
.trace__row .err { color: var(--color-error); }
.trace__row .cmd { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.perm { width: min(46rem, 100%); margin: 0 auto var(--space-sm); padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-accent); border-radius: var(--radius-card); display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: center; font-size: var(--text-sm); }
.perm span { flex: 1 1 16rem; }
.notice { width: min(46rem, 100%); margin: var(--space-md) auto; padding: var(--space-sm) var(--space-md); border-radius: var(--radius-card); background: var(--color-paper-2); font-size: var(--text-sm); }
@media (max-width: 60rem) { .chat-dock { padding-inline: var(--space-sm); } .model-select { max-width: 9rem; } }
.login { position: fixed; inset: 0; display: grid; place-items: center; background: var(--color-paper); z-index: var(--z-tooltip); padding: var(--space-md); }
.login__card { width: min(22rem, 100%); display: grid; gap: var(--space-sm); padding: var(--space-lg); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.login__card input[type=password] { display: block; width: 100%; margin-top: var(--space-2xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-inner); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); font: inherit; }
.login__remember { display: flex; gap: var(--space-xs); align-items: center; font-size: var(--text-sm); }
#new-chat { text-decoration: none; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); margin-top: var(--space-xs); }
.foot-row .classic-link { margin: 0; }
/* phase A: chat actions, uploads, projects, preview panel */
.sess { display: flex; align-items: center; gap: var(--space-3xs); }
.sess a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sess__more { border: 0; background: none; color: var(--color-muted); cursor: pointer; padding: 0 var(--space-2xs); border-radius: var(--radius-inner); opacity: 0; font-size: var(--text-sm); }
.sess:hover .sess__more, .sess__more:focus-visible, .sess a[aria-current="page"] + .sess__more { opacity: 1; }
@media (hover: none) { .sess__more { opacity: 1; } }
.menu { position: absolute; z-index: var(--z-tooltip); min-width: 10rem; display: grid; padding: var(--space-3xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-inner); background: var(--color-paper-2); box-shadow: 0 8px 24px rgb(0 0 0 / 0.35); }
.menu button { text-align: left; border: 0; background: none; color: var(--color-ink); font: inherit; font-size: var(--text-sm); padding: var(--space-2xs) var(--space-sm); border-radius: var(--radius-inner); cursor: pointer; }
.menu button:hover { background: var(--color-paper); }
.menu .danger { color: var(--color-error); }
.files, .pending { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin-top: var(--space-xs); }
.pending { padding: 0 var(--space-sm); }
.file-chip { display: inline-flex; align-items: center; gap: var(--space-3xs); font-size: var(--text-xs); padding: var(--space-3xs) var(--space-xs); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); font-family: inherit; cursor: default; }
button.file-chip { cursor: pointer; }
button.file-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.file-chip button { border: 0; background: none; color: var(--color-muted); cursor: pointer; padding: 0; }
.msg__actions { display: flex; gap: var(--space-2xs); margin-top: var(--space-2xs); }
.msg__actions button { border: 0; background: none; color: var(--color-muted); font: inherit; font-size: var(--text-xs); cursor: pointer; padding: var(--space-3xs) var(--space-2xs); border-radius: var(--radius-inner); }
.msg__actions button:hover { color: var(--color-ink); background: var(--color-paper-2); }
.projects { width: min(56rem, 100%); margin: 0 auto; padding: var(--space-xl) var(--space-lg); display: grid; gap: var(--space-md); align-content: start; }
.projects__head { display: flex; align-items: center; gap: var(--space-sm); }
.projects__head h1 { font-size: var(--text-display-s, 2rem); margin: 0; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--space-sm); }
.proj-card { display: grid; gap: var(--space-3xs); padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); color: var(--color-ink); text-decoration: none; }
.proj-card:hover, .proj-card[aria-current="page"] { border-color: var(--color-accent); }
#proj-detail { display: grid; gap: var(--space-sm); }
#proj-detail[hidden] { display: none; }
.preview { position: fixed; top: 0; right: 0; bottom: 0; width: min(44rem, 100%); z-index: var(--z-modal); display: flex; flex-direction: column; background: var(--color-paper); border-left: var(--rule-hair) solid var(--color-rule); box-shadow: -12px 0 32px rgb(0 0 0 / 0.3); }
.preview[hidden] { display: none; }
.preview__bar { display: flex; align-items: center; gap: var(--space-xs); padding: var(--space-sm) var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.preview__bar strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.preview__body { flex: 1; overflow: auto; padding: var(--space-md); }
.preview__body img, .preview__body video { max-width: 100%; height: auto; display: block; margin: auto; border-radius: var(--radius-inner); }
.preview__body iframe { width: 100%; height: 100%; min-height: 70vh; border: 0; background: #fff; border-radius: var(--radius-inner); }
.preview__body pre { white-space: pre-wrap; font-family: var(--font-outlier); font-size: var(--text-sm); }
/* phase B: settings */
.settings { width: min(56rem, 100%); margin: 0 auto; padding: var(--space-xl) var(--space-lg); display: grid; gap: var(--space-md); align-content: start; }
.settings h1 { margin: 0; font-size: var(--text-display-s, 2rem); }
.settings section { display: grid; gap: var(--space-sm); }
.settings section[hidden] { display: none; }
.stabs { justify-self: start; flex-wrap: wrap; }
.set-head { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); flex-wrap: wrap; padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.set-row__btns { display: flex; gap: var(--space-2xs); }
details.set-row { display: block; }
details.set-row summary { cursor: pointer; list-style: none; }
.skill__body { white-space: pre-wrap; font-family: var(--font-outlier); font-size: var(--text-xs); max-height: 20rem; overflow: auto; color: var(--color-ink-2); }
.pill { display: inline-block; font-size: var(--text-xs); padding: 0 var(--space-xs); border-radius: var(--radius-pill); border: var(--rule-hair) solid var(--color-rule); }
.pill--ok { color: var(--color-accent); border-color: var(--color-accent); }
.pill--warn { color: var(--color-warning, #e0a040); border-color: currentColor; }
.pill--err { color: var(--color-error); border-color: currentColor; }
.pill--off { color: var(--color-muted); }
.card { padding: var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); background: var(--color-paper-2); }
.set-form-col { display: grid; gap: var(--space-xs); }
.set-form-col input, .set-form-col textarea, .set-form input { display: block; width: 100%; margin-top: var(--space-3xs); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-inner); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); font: inherit; }
.set-form { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.set-form input { flex: 1 1 18rem; margin: 0; }
.steps { margin: var(--space-xs) 0; padding-left: 1.2rem; display: grid; gap: var(--space-xs); font-size: var(--text-sm); }
.set-steps { font-size: var(--text-sm); }
.usage-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--space-sm); }
.usage-cards .card { display: grid; gap: var(--space-3xs); }
.usage-cards strong { font-size: 1.6rem; font-family: var(--font-display, inherit); }
.model-list { columns: 2 16rem; padding-left: 1.1rem; font-size: var(--text-sm); }
.model-list li { break-inside: avoid; margin-bottom: var(--space-3xs); }
.steps { display: block; list-style: decimal; }
.steps li { display: list-item; margin-bottom: var(--space-xs); max-width: none; }
.set-steps { display: block; }
.set-steps .steps, ol.steps { margin-block: var(--space-xs) 0; padding-block: 0; }
/* today: edit, mic */
.edit-note { width: min(46rem, 100%); margin: 0 auto var(--space-xs); padding: var(--space-2xs) var(--space-sm); border: var(--rule-hair) dashed var(--color-accent); border-radius: var(--radius-inner); font-size: var(--text-sm); display: flex; gap: var(--space-xs); align-items: center; flex-wrap: wrap; }
.edit-note[hidden] { display: none; }
[data-mic][aria-pressed="true"] { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.msg--user .msg__actions { opacity: 0; }
.msg--user:hover .msg__actions, .msg--user .msg__actions:focus-within { opacity: 1; }
@media (hover: none) { .msg--user .msg__actions { opacity: 1; } }
details.skill .set-row__btns { margin: var(--space-xs) 0; }
/* FireCraft AI branding */
.brand__logo { width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto; }
.brand__ai { color: var(--color-accent); }
.home__banner { width: min(46rem, 100%); height: auto; border-radius: var(--radius-card); border: var(--rule-hair) solid var(--color-rule); margin-bottom: var(--space-sm); }
.agent-av { padding: 0; object-fit: cover; border-radius: 50%; }
.login__logo { width: 140px; height: 140px; margin: 0 auto; border-radius: var(--radius-card); }
.login__card h2 { text-align: center; margin: 0; }
.brand { text-decoration: none; } .home h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); }
[data-files-link][hidden], [data-projects-link][hidden] { display: none !important; }
/* agent questions (forms) */
.qform { display: grid; gap: var(--space-xs); align-items: stretch; }
.qform__title { font-size: var(--text-sm); }
.qform__field { display: flex; flex-wrap: wrap; gap: var(--space-2xs); align-items: flex-start; }
.qform__q { flex: 1 1 100%; font-size: var(--text-sm); color: var(--color-ink-2); }
.qform__opt { display: grid; text-align: left; max-width: 100%; }
.qform__opt small { color: var(--color-muted); font-size: var(--text-xs); }
.qform__opt[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); }
.qform__custom { flex: 1 1 100%; padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-inner); border: var(--rule-hair) solid var(--color-rule); background: var(--color-paper); color: var(--color-ink); font: inherit; }
.qform__bar { display: flex; justify-content: flex-end; }