/* Free.ai Coder — ONE palette for the whole coder surface.
 *
 * WHY THE SELECTORS CARRY `#coder-app`
 * ====================================
 * The coder is an APP SURFACE: it is dark in BOTH themes. Two site-wide rules
 * that are correct everywhere else reach into it and win on specificity, and
 * between them they were painting most of this page:
 *
 *   styles.css  html.dark p, html.dark span, html.dark div, …{color:inherit}
 *               -- (0,2,1), beats every `.coder-x{color:…}` at (0,1,0). In dark
 *               mode EVERY muted colour in this file was dead: the file tree,
 *               the input hint, the dropzone and the editor placeholder all
 *               rendered #f0f0f0. Nothing was muted, which is what "washed out"
 *               looked like. Measured on production 2026-09-17.
 *   a11y.css    html.dark a:not(.btn):not(.navbar-brand){color:var(--brand-ink)}
 *               -- (0,2,2). The session rail is built from <a> elements, so all
 *               six entries rendered bright green on near-black; in LIGHT mode
 *               the same rule handed them the light theme's ink #166534 on this
 *               dark panel: **2.43:1**, along with the logo, the account link
 *               and the token counter.
 *
 * That second one is the trap templates/CLAUDE.md already names for `footer`:
 * "light theme" is not the same question as "light surface". The fix is the
 * same shape -- the surface redefines --brand-ink for everything inside it --
 * plus an id on the wrapper so this file's own colours outrank a class-level
 * theme sweep instead of losing to one silently.
 *
 * TOKENS
 * ======
 * Every colour below is either one of the site's own dark-theme tokens or a
 * measured derivative. Nothing here invents a palette: before this pass the
 * page mixed GitHub-dark (#0d1117/#161b22/#8b949e), Catppuccin Mocha
 * (#1e1e2e/#313244/#cdd6f4/#a6adc8/#6c7086) and Tailwind (#ef4444/#3b82f6) with
 * three different greens.
 *
 * Ink and fill are two different greens ON PURPOSE (templates/CLAUDE.md,
 * 2026-09-17): --coder-accent paints TEXT and icons, --coder-accent-fill paints
 * BACKGROUNDS. Swapping them fixes one and breaks the other.
 */
:root {
    /* neutrals — the site's html.dark values, verbatim */
    --coder-bg:            #0a0a0a;   /* = --bg-body   */
    --coder-panel:         #141414;   /* = --bg-card   */
    --coder-surface:       #1a1a1a;   /* = --bg-input  */
    --coder-hover:         #222222;   /* = --primary-bg-hover */
    --coder-border:        #333333;   /* = --border; separators, decorative */
    /* Control boundaries are non-text UI and want 3:1. #333 is 1.46:1 on the
     * panel, which is a line you cannot see; this is 4.1:1 on the background
     * and 3.8:1 on the panel. */
    --coder-border-strong: #6b7280;
    --coder-text:          #f0f0f0;   /* = --text-dark  ; 17.4:1 on --coder-bg */
    --coder-text-muted:    #b0b0b0;   /* = --text-muted ;  9.1:1 on --coder-bg */
    --coder-text-dim:      #9ca3af;   /*                    7.8:1 on --coder-bg */

    /* green */
    --coder-accent:        #16A34A;   /* INK  = --brand-ink (dark) ; 6.0:1 on bg */
    --coder-accent-fill:   #15803D;   /* FILL = --primary          ; white 5.0:1 */
    --coder-accent-hover:  #166534;   /* = --primary-hover         ; white 7.1:1 */
    --coder-accent-soft:   rgba(22,163,74,.12);
    --coder-accent-line:   rgba(22,163,74,.45);

    /* status — one value each, used by CSS and by the three coder JS modules */
    --coder-success:       #4ADE80;   /* = --primary-light ; 10.6:1 on panel */
    --coder-warning:       #f59e0b;   /*                     8.6:1 on panel */
    --coder-danger:        #f87171;   /*                     6.7:1 on panel */
    --coder-info:          #93c5fd;   /*                    10.2:1 on panel */

    /* syntax, for the chat code blocks and the Monaco theme alike */
    --coder-syntax-kw:     #c4b5fd;
    --coder-syntax-str:    #4ADE80;
    --coder-syntax-num:    #fbbf24;
    --coder-syntax-fn:     #93c5fd;
    --coder-syntax-com:    #9ca3af;

    /* diffs */
    --coder-diff-add:      rgba(74,222,128,.14);
    --coder-diff-del:      rgba(248,113,113,.14);
    --coder-diff-add-text: #4ADE80;
    --coder-diff-del-text: #f87171;

    --coder-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
}

/* The surface owns its green ink in both themes, exactly as `footer` does in
 * a11y.css. Without this, every anchor inside the coder takes the LIGHT
 * theme's #166534 on a near-black panel in light mode. */
#coder-app,
#coder-diff-overlay { --brand-ink: #16A34A; --focus-ring: #22C55E; }

/* Full-page layout */
#coder-app.coder-wrap {
    display: flex;
    height: calc(100vh - 56px);
    overflow: hidden;
    background: var(--coder-bg);
    color: var(--coder-text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Anything inside the app that does not state a colour takes the surface ink,
 * not the site body's. (1,0,1) beats `html.dark div{color:inherit}` at (0,2,1),
 * so this is the rule that makes every `color:` below reachable at all. */
#coder-app p, #coder-app span, #coder-app div, #coder-app li,
#coder-app td, #coder-app th, #coder-app label, #coder-app small,
#coder-app h1, #coder-app h2, #coder-app h3, #coder-app pre, #coder-app code {
    color: inherit;
}
#coder-app a:not(.btn) { color: var(--coder-accent); }
/* The site theme forces #777 on every placeholder with !important. */
#coder-app input::placeholder,
#coder-app textarea::placeholder { color: var(--coder-text-muted) !important; opacity: 1; }

/* ===== TOP BAR ===== */
#coder-app .coder-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wraps rather than clips. At 1280 with the right panel open the centre
     * column is 630px and the nine controls need ~780px, so SOMETHING has to
     * give: before this the wordmark broke onto two lines and spilled out of a
     * fixed 48px bar (visible in the owner's screenshot). An overflow-x
     * carousel was the other candidate and is worse -- with the actions
     * right-aligned it scrolled New/Terminal/Play off the left edge with no
     * visible scrollbar, i.e. it hid controls to save a line. */
    flex-wrap: wrap;
    row-gap: 6px;
    min-height: 48px;
    padding: 6px 16px;
    background: var(--coder-panel);
    border-bottom: 1px solid var(--coder-border);
    z-index: 10;
}
/* The wordmark is a LOGOTYPE, so it keeps the bright brand green and is exempt
 * from SC 1.4.3 (a11y.css `.brand-mark`). */
#coder-app .coder-topbar .logo {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--coder-text);
    text-decoration: none;
    letter-spacing: -0.5px;
}
#coder-app .coder-topbar .logo span { color: #16A34A; }
/* The brand block keeps its natural width at every viewport: the wordmark
 * wrapped onto two lines and spilled out of the 48px bar wherever the right
 * panel was open. A layout bug rather than a colour one, but it is the first
 * thing in the owner's screenshot.
 *
 * No min-width:0 here. It fights `flex: 0 0 auto`: the block shrinks below
 * its content, the nowrap wordmark overflows to the right, and the actions
 * carousel paints on top of it -- axe measured the /coder/ logo's free
 * target as 4px x 24px at 390px, in both themes. */
#coder-app .coder-topbar > div:first-child { flex: 0 0 auto; }
#coder-app .coder-topbar .logo { white-space: nowrap; }
#coder-app .coder-topbar-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    row-gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
}
#coder-app .coder-topbar-actions > * { flex: 0 0 auto; }
/* A label that breaks mid-phrase inside a 4px-padded pill reads as damage.
 * "Deploy - from $9/mo" was three lines tall. */
#coder-app .btn-coder { white-space: nowrap; }
#coder-app .btn-coder {
    padding: 4px 12px;
    font-size: .78rem;
    border-radius: 6px;
    border: 1px solid var(--coder-border-strong);
    background: transparent;
    color: var(--coder-text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
#coder-app .btn-coder:hover {
    background: var(--coder-hover);
    border-color: var(--coder-text-dim);
    color: var(--coder-text);
}
#coder-app .btn-coder i { color: inherit; }
#coder-app .btn-coder.accent {
    background: var(--coder-accent-fill);
    color: #fff;
    border-color: var(--coder-accent-fill);
}
#coder-app .btn-coder.accent:hover {
    background: var(--coder-accent-hover);
    border-color: var(--coder-accent-hover);
    color: #fff;
}
/* The Play button: a green OUTLINE, so the ink is the ink green and not the
 * fill green (#15803D as text on this surface is 3.83:1 and fails). */
#coder-app .btn-coder.success {
    color: var(--coder-accent);
    border-color: var(--coder-accent-line);
}
#coder-app .btn-coder.success:hover {
    background: var(--coder-accent-soft);
    border-color: var(--coder-accent);
    color: var(--coder-accent);
}

/* Token meter in the top bar */
#coder-app .coder-usage {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: .7rem;
    cursor: pointer;
    color: var(--coder-text-muted);
}
#coder-app .coder-usage .coder-usage-track {
    width: 60px;
    height: 6px;
    background: var(--coder-border);
    border-radius: 3px;
    overflow: hidden;
}
#coder-app .coder-usage .coder-usage-fill {
    height: 100%;
    width: 100%;
    background: var(--coder-accent-fill);
    border-radius: 3px;
    transition: width .3s;
}
#coder-app .coder-usage .coder-usage-icon { color: var(--coder-accent); }
#coder-app .coder-usage .coder-usage-caret { font-size: .55rem; color: var(--coder-text-dim); }

/* ===== LEFT SIDEBAR — File Tree ===== */
#coder-app .coder-sidebar {
    width: 250px;
    min-width: 250px;
    background: var(--coder-panel);
    border-right: 1px solid var(--coder-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width .2s, min-width .2s;
}
#coder-app .coder-sidebar.collapsed {
    width: 0;
    min-width: 0;
    border-right: none;
}
#coder-app .coder-sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--coder-border);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--coder-text-muted);
}
#coder-app .coder-sidebar-header button {
    background: none;
    border: none;
    color: var(--coder-text-muted);
    cursor: pointer;
    padding: 2px;
    font-size: .9rem;
}
#coder-app .coder-sidebar-header button:hover { color: var(--coder-text); }

#coder-app .coder-file-tree {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    scrollbar-width: thin;
    scrollbar-color: var(--coder-border-strong) transparent;
}
#coder-app .coder-file-tree::-webkit-scrollbar { width: 6px; }
#coder-app .coder-file-tree::-webkit-scrollbar-thumb { background: var(--coder-border-strong); border-radius: 3px; }

#coder-app .coder-tree-item {
    display: flex;
    align-items: center;
    padding: 3px 12px;
    cursor: pointer;
    font-size: .8rem;
    color: var(--coder-text);
    transition: background .1s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}
#coder-app .coder-tree-item:hover { background: var(--coder-hover); }
#coder-app .coder-tree-item.active { background: var(--coder-accent-soft); color: var(--coder-accent); }
#coder-app .coder-tree-item .icon { width: 16px; margin-right: 6px; text-align: center; font-size: .75rem; color: var(--coder-text-dim); }
/* Language marks are non-text UI at 3:1. The originals came from GitHub's
 * linguist palette and four of them (#3572A5 python 2.1:1, #563d7c css 1.6:1,
 * #e34c26 html 2.9:1, #3178c6 ts 2.6:1) were under that on this background. */
#coder-app .coder-tree-item .icon.folder   { color: #fbbf24; }
#coder-app .coder-tree-item .icon.file-py  { color: #7dd3fc; }
#coder-app .coder-tree-item .icon.file-js  { color: #fde047; }
#coder-app .coder-tree-item .icon.file-ts  { color: #93c5fd; }
#coder-app .coder-tree-item .icon.file-html { color: #fda4a0; }
#coder-app .coder-tree-item .icon.file-css { color: #c4b5fd; }
#coder-app .coder-tree-item .icon.file-json { color: #fde047; }
#coder-app .coder-tree-item .children { display: none; }
#coder-app .coder-tree-item.open > .children { display: block; }

#coder-app .coder-sidebar-actions {
    padding: 8px 12px;
    border-top: 1px solid var(--coder-border);
    display: flex;
    gap: 6px;
}
#coder-app .coder-sidebar-actions button {
    flex: 1;
    padding: 5px 8px;
    font-size: .72rem;
    border-radius: 5px;
    border: 1px solid var(--coder-border-strong);
    background: transparent;
    color: var(--coder-text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
#coder-app .coder-sidebar-actions button:hover {
    background: var(--coder-hover);
    border-color: var(--coder-text-dim);
    color: var(--coder-text);
}

/* Drop zone */
#coder-app .coder-dropzone {
    margin: 8px 12px;
    padding: 16px;
    border: 2px dashed var(--coder-border-strong);
    border-radius: 8px;
    text-align: center;
    font-size: .75rem;
    color: var(--coder-text-muted);
    transition: border-color .2s, background .2s, color .2s;
    cursor: pointer;
}
#coder-app .coder-dropzone.dragover {
    border-color: var(--coder-accent);
    background: var(--coder-accent-soft);
    color: var(--coder-accent);
}

/* GitHub clone input */
#coder-app .coder-clone-input {
    display: flex;
    gap: 4px;
    padding: 8px 12px;
}
#coder-app .coder-clone-input input {
    flex: 1;
    min-width: 0;
    padding: 4px 8px;
    font-size: .75rem;
    border-radius: 5px;
    border: 1px solid var(--coder-border-strong);
    background: var(--coder-surface);
    color: var(--coder-text);
}
#coder-app .coder-clone-input input:focus { border-color: var(--coder-accent); }
#coder-app .coder-clone-input button {
    padding: 4px 10px;
    font-size: .72rem;
    border-radius: 5px;
    border: 1px solid var(--coder-accent-fill);
    background: var(--coder-accent-fill);
    color: #fff;
    cursor: pointer;
}
#coder-app .coder-clone-input button:hover { background: var(--coder-accent-hover); border-color: var(--coder-accent-hover); }

/* ===== MAIN CENTER AREA ===== */
#coder-app .coder-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Model selector bar */
#coder-app .coder-model-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-bottom: 1px solid var(--coder-border);
    background: var(--coder-panel);
    font-size: .8rem;
    color: var(--coder-text-muted);
}
#coder-app .coder-model-bar select {
    padding: 4px 28px 4px 10px;
    font-size: .78rem;
    border-radius: 6px;
    border: 1px solid var(--coder-border-strong);
    background-color: var(--coder-surface);
    color: var(--coder-text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23b0b0b0'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
#coder-app .coder-model-bar select:focus { border-color: var(--coder-accent); }
#coder-app .coder-model-bar .model-cost {
    color: var(--coder-text-muted);
    font-size: .72rem;
}
#coder-app .coder-model-bar .safe-mode {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    color: var(--coder-text-muted);
}
#coder-app .coder-model-bar .safe-mode input[type="checkbox"] {
    accent-color: var(--coder-accent-fill);
}
/* The model picker button is a Bootstrap .btn-outline-secondary, which the
 * site theme paints for a LIGHT surface (#565e64 on this panel is 2.62:1). */
#coder-app #coder-picker-btn {
    background: var(--coder-surface);
    color: var(--coder-text);
    border-color: var(--coder-border-strong);
}
#coder-app #coder-picker-btn:hover {
    background: var(--coder-hover);
    color: var(--coder-text);
    border-color: var(--coder-text-dim);
}
#coder-app #coder-picker-btn i { color: var(--coder-text-muted); }
#coder-app #coder-picker-dd {
    background: var(--coder-panel);
    border: 1px solid var(--coder-border-strong);
    color: var(--coder-text);
}
#coder-app #coder-picker-dd .form-control {
    background: var(--coder-surface);
    color: var(--coder-text);
    border-color: var(--coder-border-strong);
}
#coder-app .cdl-group {
    background: var(--coder-bg);
    color: var(--coder-text-muted);
    font-size: .65rem;
}
#coder-app .cdl-group.paid { color: var(--coder-warning); }
#coder-app .cdl-opt { cursor: pointer; transition: background .1s; color: var(--coder-text); }
#coder-app .cdl-opt:hover { background: var(--coder-hover); }
#coder-app .cdl-opt.active { background: var(--coder-accent-soft); font-weight: 600; }
#coder-app .cdl-free { color: var(--coder-success); }
#coder-app .cdl-paid { color: var(--coder-warning); }

/* ===== CHAT PANEL ===== */
#coder-app .coder-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--coder-border-strong) transparent;
}
#coder-app .coder-chat::-webkit-scrollbar { width: 6px; }
#coder-app .coder-chat::-webkit-scrollbar-thumb { background: var(--coder-border-strong); border-radius: 3px; }

#coder-app .coder-msg {
    margin-bottom: 16px;
    display: flex;
    gap: 10px;
    animation: msgFadeIn .3s ease;
}
@keyframes msgFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
#coder-app .coder-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    flex-shrink: 0;
}
#coder-app .coder-msg.user .coder-msg-avatar {
    background: #1d4ed8;
    color: #fff;
}
#coder-app .coder-msg.assistant .coder-msg-avatar {
    background: var(--coder-accent-fill);
    color: #fff;
}
#coder-app .coder-msg-body {
    flex: 1;
    min-width: 0;
}
#coder-app .coder-msg-body p { margin: 0 0 8px; line-height: 1.6; font-size: .88rem; }
#coder-app .coder-msg-body p:last-child { margin-bottom: 0; }

/* Code blocks in chat */
#coder-app .coder-msg-body pre {
    background: var(--coder-bg);
    border: 1px solid var(--coder-border);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
    overflow-x: auto;
    font-family: var(--coder-mono);
    font-size: .82rem;
    line-height: 1.55;
    position: relative;
    color: var(--coder-text);
}
#coder-app .coder-code-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 12px;
    background: var(--coder-surface);
    border-radius: 8px 8px 0 0;
    margin: -12px -16px 8px;
    font-size: .7rem;
    color: var(--coder-text-muted);
}
#coder-app .coder-msg-body pre .copy-code-btn {
    padding: 2px 8px;
    font-size: .68rem;
    border-radius: 4px;
    border: 1px solid var(--coder-border-strong);
    background: var(--coder-panel);
    color: var(--coder-text-muted);
    cursor: pointer;
    transition: color .15s, background .15s;
}
#coder-app .coder-msg-body pre .copy-code-btn:hover { color: var(--coder-text); background: var(--coder-hover); }

#coder-app .coder-msg-body code {
    font-family: var(--coder-mono);
    font-size: .82rem;
}
#coder-app .coder-msg-body p > code {
    background: var(--coder-surface);
    color: var(--coder-text);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .8rem;
}
/* Syntax, shared with the Monaco theme through the same tokens. */
#coder-app .tok-kw  { color: var(--coder-syntax-kw); }
#coder-app .tok-str { color: var(--coder-syntax-str); }
#coder-app .tok-num { color: var(--coder-syntax-num); }
#coder-app .tok-fn  { color: var(--coder-syntax-fn); }
#coder-app .tok-com { color: var(--coder-syntax-com); font-style: italic; }

/* Thinking indicator */
#coder-app .coder-thinking {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    color: var(--coder-text-muted);
    font-size: .82rem;
    animation: thinkPulse 1.5s ease-in-out infinite;
}
@keyframes thinkPulse {
    0%, 100% { opacity: .5; }
    50% { opacity: 1; }
}
#coder-app .coder-thinking .dots span {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--coder-accent);
    margin: 0 2px;
    animation: dotBounce .6s ease infinite;
}
#coder-app .coder-thinking .dots span:nth-child(2) { animation-delay: .2s; }
#coder-app .coder-thinking .dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dotBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

#coder-app .coder-step-progress {
    font-size: .72rem;
    color: var(--coder-text-muted);
    padding: 2px 16px 8px 54px;
}

/* ===== INPUT AREA ===== */
#coder-app .coder-input-area {
    padding: 12px 16px;
    border-top: 1px solid var(--coder-border);
    background: var(--coder-panel);
}
/* Composer mirrors the /chat layout (chat.html #chat-form > .d-flex):
   a 24px rounded pill that WRAPS — the textarea sits full-width on its own
   top row, and the buttons wrap to a toolbar row beneath it (attach pinned
   left, send pinned right). Same dimensions as chat (16px text, 84px min,
   260px max). HTML order is attach,textarea,send; flex `order` puts the
   textarea on top regardless. */
#coder-app .coder-input-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    align-items: stretch;
    background: var(--coder-surface);
    border: 1px solid var(--coder-border-strong);
    border-radius: 24px;
    padding: 8px 10px 6px 10px;
    transition: border-color .15s, box-shadow .15s;
}
#coder-app .coder-input-row:focus-within {
    border-color: var(--coder-accent);
    box-shadow: 0 0 0 3px var(--coder-accent-soft);
}
#coder-app .coder-input-row textarea {
    order: 1;
    flex: 1 1 100%;
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    font-family: inherit;
    border: none;
    background: transparent;
    color: var(--coder-text);
    resize: none;
    box-shadow: none;
    line-height: 1.5;
    max-height: 260px;
    min-height: 84px;
}
/* :focus, not :focus-visible — a11y.css restores the keyboard ring at
 * matching specificity and this must not take it away again. */
#coder-app .coder-input-row textarea:focus { box-shadow: none; }

#coder-app .coder-input-actions {
    display: flex;
    gap: 6px;
}
/* Toolbar row (wrapped below the textarea), mirroring /chat:
   attach (+) pinned left, then voice + send pushed to the right. */
#coder-app .coder-send-btn {
    order: 4;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: var(--coder-accent-fill);
    color: #fff;
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    transition: background .15s;
}
#coder-app .coder-send-btn:hover { background: var(--coder-accent-hover); }
#coder-app .coder-send-btn:disabled { opacity: .4; cursor: not-allowed; }

#coder-app .coder-attach-btn {
    order: 2;                 /* bottom-left of the toolbar row */
    margin-right: auto;       /* pushes the mic+send group to the far right
                                 (robust even if the mic is hidden) */
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--coder-text-muted);
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    transition: background .15s, color .15s;
}
#coder-app .coder-attach-btn:hover { background: var(--coder-hover); color: var(--coder-text); }

/* Voice-dictation mic — sits just left of send on the right side. */
#coder-app .coder-voice-btn {
    order: 3;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--coder-text-muted);
    font-size: 1.05rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    margin-right: 2px;
    transition: background .15s, color .15s;
}
#coder-app .coder-voice-btn:hover { background: var(--coder-hover); color: var(--coder-text); }
#coder-app .coder-voice-btn.listening {
    color: #fff;
    background: #b91c1c;
    animation: coder-mic-pulse 1.2s ease-in-out infinite;
}
#coder-app .coder-voice-btn.transcribing { opacity: .5; pointer-events: none; }
@keyframes coder-mic-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.5); }
    50% { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}

#coder-app .coder-input-hint {
    font-size: .68rem;
    color: var(--coder-text-muted);
    margin-top: 4px;
    text-align: center;
}
#coder-app .coder-input-hint a { color: var(--coder-accent); }

/* ===== RIGHT PANEL ===== */
#coder-app .coder-right-panel {
    width: 400px;
    min-width: 400px;
    background: var(--coder-panel);
    border-left: 1px solid var(--coder-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: width .2s, min-width .2s;
}
#coder-app .coder-right-panel.collapsed {
    width: 0;
    min-width: 0;
    border-left: none;
}

#coder-app .coder-right-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--coder-border);
}
#coder-app .coder-right-tab {
    flex: 1;
    padding: 8px;
    text-align: center;
    font-size: .76rem;
    font-weight: 600;
    color: var(--coder-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: color .15s, border-color .15s;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
#coder-app .coder-right-tab:hover { color: var(--coder-text); }
#coder-app .coder-right-tab.active {
    color: var(--coder-accent);
    border-bottom-color: var(--coder-accent);
}

#coder-app .coder-right-content {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--coder-border-strong) transparent;
}

/* Diff viewer */
#coder-app .coder-diff-file {
    border-bottom: 1px solid var(--coder-border);
}
#coder-app .coder-diff-file-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--coder-accent-soft);
    color: var(--coder-text);
    font-size: .78rem;
    font-weight: 600;
    font-family: var(--coder-mono);
}
#coder-app .coder-diff-file-header .actions {
    display: flex;
    gap: 4px;
}
#coder-app .coder-diff-file-header .actions button {
    padding: 2px 10px;
    font-size: .7rem;
    border-radius: 4px;
    border: 1px solid var(--coder-border-strong);
    background: transparent;
    color: var(--coder-text-muted);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
#coder-app .coder-diff-file-header .actions .review {
    background: var(--coder-surface);
    color: var(--coder-text);
    margin-right: 4px;
}
#coder-app .coder-diff-file-header .actions .approve:hover {
    background: var(--coder-diff-add);
    border-color: var(--coder-diff-add-text);
    color: var(--coder-diff-add-text);
}
#coder-app .coder-diff-file-header .actions .reject:hover {
    background: var(--coder-diff-del);
    border-color: var(--coder-diff-del-text);
    color: var(--coder-diff-del-text);
}

#coder-app .coder-diff-lines {
    font-family: var(--coder-mono);
    font-size: .78rem;
    line-height: 1.6;
    overflow-x: auto;
}
#coder-app .coder-diff-line {
    display: flex;
    padding: 0 12px;
    min-height: 22px;
}
#coder-app .coder-diff-line .line-num {
    width: 40px;
    text-align: right;
    padding-right: 12px;
    color: var(--coder-text-dim);
    user-select: none;
    flex-shrink: 0;
    font-size: .72rem;
}
#coder-app .coder-diff-line .line-content {
    flex: 1;
    white-space: pre;
    min-width: 0;
}
#coder-app .coder-diff-line.add { background: var(--coder-diff-add); }
#coder-app .coder-diff-line.add .line-content { color: var(--coder-diff-add-text); }
#coder-app .coder-diff-line.del { background: var(--coder-diff-del); }
#coder-app .coder-diff-line.del .line-content { color: var(--coder-diff-del-text); }
#coder-app .coder-diff-line.ctx .line-content { color: var(--coder-text-muted); }

/* Terminal */
#coder-app .coder-terminal-wrap {
    flex: 1;
    padding: 0;
    background: var(--coder-bg);
    display: none;
}
#coder-app .coder-terminal-wrap.active { display: flex; flex-direction: column; }
#coder-app .coder-terminal-container {
    flex: 1;
    padding: 8px;
    font-family: var(--coder-mono);
    font-size: .8rem;
    color: var(--coder-text);
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
#coder-app .term-cmd  { color: var(--coder-accent); font-family: var(--coder-mono); }
#coder-app .term-info { color: var(--coder-info); font-weight: 600; }
#coder-app .term-err  { color: var(--coder-danger); }
#coder-app .term-note {
    background: var(--coder-surface);
    color: var(--coder-info);
    padding: 4px 8px;
    border-radius: 4px;
    margin-top: 4px;
    font-size: .7rem;
}

/* Output tab */
#coder-app .coder-output-wrap {
    flex: 1;
    padding: 12px;
    display: none;
    overflow-y: auto;
}
#coder-app .coder-output-wrap.active { display: block; }
#coder-app .coder-output-wrap pre {
    font-family: var(--coder-mono);
    font-size: .8rem;
    color: var(--coder-text);
    white-space: pre-wrap;
    margin: 0;
}

/* Changes tab */
#coder-app .coder-changes-wrap {
    flex: 1;
    display: none;
    overflow-y: auto;
}
#coder-app .coder-changes-wrap.active { display: block; }
#coder-app .coder-empty-note {
    padding: 20px;
    text-align: center;
    color: var(--coder-text-muted);
    font-size: .82rem;
}

/* ===== BOTTOM TERMINAL (resizable) ===== */
#coder-app .coder-bottom-terminal {
    height: 200px;
    min-height: 100px;
    max-height: 50vh;
    background: var(--coder-bg);
    border-top: 1px solid var(--coder-border);
    display: none;
    flex-direction: column;
    position: relative;
}
#coder-app .coder-bottom-terminal.open { display: flex; }
#coder-app .coder-bottom-terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 12px;
    background: var(--coder-panel);
    border-bottom: 1px solid var(--coder-border);
    font-size: .75rem;
    font-weight: 600;
    color: var(--coder-text-muted);
}
#coder-app .coder-bottom-terminal-header button {
    background: none;
    border: none;
    color: var(--coder-text-muted);
    cursor: pointer;
    font-size: .85rem;
}
#coder-app .coder-bottom-terminal-header button:hover { color: var(--coder-text); }
#coder-app .coder-bottom-terminal-content {
    flex: 1;
    padding: 8px 12px;
    font-family: var(--coder-mono);
    font-size: .8rem;
    color: var(--coder-text);
    overflow-y: auto;
    white-space: pre-wrap;
}
#coder-app .coder-term-input-row {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    border-top: 1px solid var(--coder-border);
}
#coder-app .coder-term-input-row input {
    flex: 1;
    min-width: 0;
    background: var(--coder-surface);
    color: var(--coder-text);
    border: 1px solid var(--coder-border-strong);
    border-radius: 4px;
    padding: 4px 8px;
    font-family: var(--coder-mono);
    font-size: .8rem;
}
#coder-app .coder-term-input-row input:focus { border-color: var(--coder-accent); }
#coder-app .coder-resize-handle {
    position: absolute;
    top: -3px;
    left: 0;
    right: 0;
    height: 6px;
    cursor: ns-resize;
    z-index: 5;
}
#coder-app .coder-resize-handle:hover { background: var(--coder-accent); opacity: .3; }

/* ===== SESSION RAIL =====
 * Built from <a> elements by coder.js, which is why every one of them used to
 * take the site-wide anchor ink: six bright-green "New session" rows on
 * near-black in dark, and 2.43:1 in light. Only the CURRENT session is
 * accented now; the rest are muted text like any other list. */
#coder-app .coder-session-list {
    padding: 4px 8px;
    border-bottom: 1px solid var(--coder-border);
    max-height: 200px;
    overflow-y: auto;
}
#coder-app .coder-session-item,
#coder-app a.coder-session-item {
    display: flex;
    align-items: center;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: .75rem;
    color: var(--coder-text-muted);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
    transition: background .1s, color .1s;
}
#coder-app .coder-session-item:hover,
#coder-app a.coder-session-item:hover { background: var(--coder-hover); color: var(--coder-text); }
#coder-app .coder-session-item.active,
#coder-app a.coder-session-item.active {
    background: var(--coder-accent-soft);
    color: var(--coder-accent);
    box-shadow: inset 2px 0 0 var(--coder-accent);
}
#coder-app .coder-session-item .icon { margin-right: 6px; font-size: .7rem; }
#coder-app .coder-session-del { cursor: pointer; font-size: 1rem; padding: 0 4px; line-height: 1; color: var(--coder-text-dim); }
#coder-app .coder-session-del:hover { color: var(--coder-danger); }
#coder-app .coder-session-empty {
    text-align: center;
    padding: 8px;
    font-size: .7rem;
    color: var(--coder-text-muted);
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
    #coder-app .coder-sidebar { width: 0; min-width: 0; border-right: none; }
    #coder-app .coder-right-panel { width: 0; min-width: 0; border-left: none; }
}

@media (max-width: 768px) {
    #coder-app .coder-chat { padding: 8px; }
    #coder-app .coder-input-area { padding: 8px; }

    /* Topbar: 9 actions + token bar + email + signup never fit on a phone.
     * Strip text labels to icons, hide the chrome-style usage bar entirely,
     * and let whatever is left flow horizontally as a no-scrollbar carousel.
     * The logo also stops competing with the actions for width. */
    /* One line, a horizontal carousel. The desktop bar WRAPS instead, and the
     * two must not be mixed: wrapping inside a fixed 44px bar puts the second
     * row on top of the model bar. */
    #coder-app .coder-topbar { padding: 0 8px; height: 44px; min-height: 44px; gap: 8px; flex-wrap: nowrap; }
    #coder-app .coder-topbar .logo { font-size: 1rem; white-space: nowrap; }
    /* No min-width:0 here. It fights `flex: 0 0 auto`: the block shrinks below
 * its content, the nowrap wordmark overflows to the right, and the actions
 * carousel paints on top of it -- axe measured the /coder/ logo's free
 * target as 4px x 24px at 390px, in both themes. */
#coder-app .coder-topbar > div:first-child { flex: 0 0 auto; }
    /* `justify-content: flex-end` on a scroll container puts the overflow at
     * the START, where no browser lets you scroll to it: New, Terminal and the
     * panel toggle were laid out under the wordmark and unreachable on a phone
     * (axe saw it as the logo being 4px x 24px of free target). `flex-start`
     * plus auto-margin on the first child right-aligns the row when it fits and
     * keeps the overflow on the scrollable side when it does not. */
    #coder-app .coder-topbar-actions {
        gap: 4px;
        flex: 1 1 auto;
        flex-wrap: nowrap;
        row-gap: 0;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    #coder-app .coder-topbar-actions > :first-child { margin-left: auto; }
    #coder-app .coder-topbar-actions::-webkit-scrollbar { display: none; }
    #coder-app .coder-topbar-actions .btn-coder { padding: 4px 8px; font-size: 0; }
    #coder-app .coder-topbar-actions .btn-coder i { font-size: .95rem; margin: 0 !important; }
    /* Hide the inline token-usage progress bar — nav-style chrome that has
     * a copy in the dropdown account menu anyway. */
    #coder-app .coder-topbar-actions > .coder-usage { display: none !important; }
    /* Account link: keep the icon only, drop the truncated email. */
    #coder-app .coder-topbar-actions > a[href^="/account/"] { font-size: 0; padding: 4px 8px; }
    #coder-app .coder-topbar-actions > a[href^="/account/"] i { font-size: .95rem; margin: 0 !important; }

    /* Model bar: stack picker / cost / safe-mode without the auto-right push
     * fighting the wrap. Cost label stays adjacent to the picker; Safe mode
     * lands on its own row, left-aligned, instead of orphaned against the
     * right edge. */
    #coder-app .coder-model-bar { padding: 8px; flex-wrap: wrap; gap: 8px; font-size: .75rem; row-gap: 6px; }
    #coder-app .coder-model-bar .safe-mode { margin-left: 0; width: 100%; }

    /* Model picker dropdown — clamp to viewport so it doesn't overflow to
     * the right when opened from a button near the screen edge. */
    #coder-app #coder-picker-dd { width: calc(100vw - 16px) !important; max-width: 340px; }
}

/* ===== WELCOME SCREEN ===== */
#coder-app .coder-welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 300px;
    padding: 40px 20px;
    text-align: center;
}
#coder-app .coder-welcome h2 {
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--coder-text);
}
/* Logotype: keeps the bright brand green, same exemption as .brand-mark. */
#coder-app .coder-welcome h2 .brand-mark { color: #16A34A; }
#coder-app .coder-welcome p {
    color: var(--coder-text-muted);
    font-size: .92rem;
    max-width: 500px;
    margin-bottom: 24px;
}
#coder-app .coder-kbd-hint {
    font-size: .72rem;
    margin-top: 16px;
    color: var(--coder-text-muted);
}
#coder-app .coder-welcome-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    max-width: 480px;
    width: 100%;
}
#coder-app .coder-welcome-card {
    padding: 14px 16px;
    border: 1px solid var(--coder-border-strong);
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    background: transparent;
    color: var(--coder-text);
    font-family: inherit;
}
#coder-app .coder-welcome-card:hover {
    border-color: var(--coder-accent);
    background: var(--coder-accent-soft);
}
#coder-app .coder-welcome-card .wc-icon { font-size: 1.2rem; margin-bottom: 4px; }
#coder-app .coder-welcome-card .wc-title { font-size: .82rem; font-weight: 600; }
#coder-app .coder-welcome-card .wc-desc { font-size: .72rem; color: var(--coder-text-muted); margin-top: 2px; }

/* ===== MISC ===== */
#coder-app .coder-badge {
    display: inline-block;
    padding: 1px 6px;
    font-size: .62rem;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
}
#coder-app .coder-badge.free { background: var(--coder-accent-soft); color: var(--coder-accent); }
#coder-app .coder-badge.pro { background: rgba(147,197,253,.14); color: var(--coder-info); }

#coder-app .coder-sessions {
    padding: 8px 0;
    border-bottom: 1px solid var(--coder-border);
}

/* Scrollbar for chat */
#coder-app .coder-chat,
#coder-app .coder-right-content,
#coder-app .coder-file-tree {
    scrollbar-width: thin;
    scrollbar-color: var(--coder-border-strong) transparent;
}

/* ===== MONACO EDITOR CHROME =====
 * Moved out of coder.html's inline <style>, where it carried a second palette
 * (Catppuccin Mocha: #1e1e2e / #181825 / #313244 / #a6adc8 / #cdd6f4) that had
 * nothing to do with the rest of the page and nothing to do with the site. */
#coder-app .coder-editor-tabs {
    display: flex;
    align-items: center;
    overflow-x: auto;
    background: var(--coder-surface);
    border-bottom: 1px solid var(--coder-border);
    min-height: 30px;
    scrollbar-width: thin;
}
#coder-app .coder-editor-tabs::-webkit-scrollbar { height: 4px; }
#coder-app .coder-editor-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: .75rem;
    color: var(--coder-text-muted);
    background: transparent;
    border: none;
    border-right: 1px solid var(--coder-border);
    cursor: pointer;
    white-space: nowrap;
    font-family: var(--coder-mono);
}
#coder-app .coder-editor-tab:hover { background: var(--coder-hover); color: var(--coder-text); }
#coder-app .coder-editor-tab.active {
    background: var(--coder-bg);
    color: var(--coder-text);
    border-bottom: 2px solid var(--coder-accent);
    padding-bottom: 3px;
}
#coder-app .coder-editor-tab.dirty::after { content: '\25CF'; color: var(--coder-warning); margin-left: 2px; }
#coder-app .coder-editor-tab-close {
    display: inline-flex;
    width: 14px;
    height: 14px;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    color: inherit;
    opacity: .7;
    margin-left: 2px;
    font-size: .7rem;
}
#coder-app .coder-editor-tab-close:hover { background: var(--coder-border); opacity: 1; }
#coder-app #coder-monaco-editor { height: calc(100% - 30px); width: 100%; }
#coder-app #coder-editor-empty { padding: 30px; text-align: center; color: var(--coder-text-muted); font-size: .85rem; }
#coder-app .coder-output-wrap.active #coder-editor-empty.d-none { display: none; }
#coder-app .coder-editor-save-indicator {
    padding: 2px 8px;
    font-size: .65rem;
    color: var(--coder-success);
    background: rgba(74,222,128,.12);
    border-radius: 3px;
    margin-left: auto;
    margin-right: 8px;
}

/* ===== SaaS scaffolder hero on the welcome screen ===== */
#coder-app .coder-saas-hero {
    width: 100%;
    max-width: 560px;
    margin: 0 auto 22px;
    padding: 18px 18px 14px;
    background: var(--coder-accent-soft);
    border: 1px solid var(--coder-accent-line);
    border-radius: 14px;
}
#coder-app .coder-saas-headline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 600;
    color: var(--coder-text);
    margin-bottom: 12px;
    text-align: center;
}
#coder-app .coder-saas-headline i { color: var(--coder-accent); font-size: 1.1rem; }
#coder-app .coder-saas-input-row { display: flex; gap: 8px; }
#coder-app .coder-saas-input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    font-size: .85rem;
    background: var(--coder-surface);
    color: var(--coder-text);
    border: 1px solid var(--coder-border-strong);
    border-radius: 8px;
    font-family: inherit;
}
#coder-app .coder-saas-input:focus {
    border-color: var(--coder-accent);
    box-shadow: 0 0 0 2px var(--coder-accent-soft);
}
#coder-app .coder-saas-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: .85rem;
    font-weight: 600;
    background: var(--coder-accent-fill);
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s;
}
#coder-app .coder-saas-btn:hover { background: var(--coder-accent-hover); }
#coder-app .coder-saas-btn:disabled { background: var(--coder-border); color: var(--coder-text-muted); cursor: not-allowed; }
#coder-app .coder-saas-examples {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 10px;
    font-size: .72rem;
}
#coder-app .coder-saas-examples-label { color: var(--coder-text-muted); margin-right: 2px; }
#coder-app .coder-saas-chip {
    padding: 4px 10px;
    font-size: .72rem;
    background: var(--coder-surface);
    color: var(--coder-text);
    border: 1px solid var(--coder-border-strong);
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background .12s, border-color .12s, color .12s;
}
#coder-app .coder-saas-chip:hover {
    background: var(--coder-accent-soft);
    color: var(--coder-accent);
    border-color: var(--coder-accent);
}
#coder-app .coder-saas-divider {
    position: relative;
    text-align: center;
    margin: 14px 0 -4px;
    font-size: .68rem;
    color: var(--coder-text-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
}
#coder-app .coder-saas-divider::before,
#coder-app .coder-saas-divider::after { content: ''; position: absolute; top: 50%; width: 30%; height: 1px; background: var(--coder-border); }
#coder-app .coder-saas-divider::before { left: 0; }
#coder-app .coder-saas-divider::after { right: 0; }
#coder-app .coder-saas-divider span { background: transparent; padding: 0 8px; }

/* Agent activity rendering */
#coder-app .coder-agent-step {
    padding: 6px 10px;
    margin: 4px 0;
    background: var(--coder-accent-soft);
    border-left: 3px solid var(--coder-accent);
    border-radius: 4px;
    font-size: .78rem;
    color: var(--coder-text-muted);
    font-family: var(--coder-mono);
}
#coder-app .coder-agent-step.tool {
    color: var(--coder-info);
    border-left-color: var(--coder-info);
    background: rgba(147,197,253,.08);
}
#coder-app .coder-agent-step.tool-result {
    color: var(--coder-success);
    border-left-color: var(--coder-success);
    background: rgba(74,222,128,.08);
}
#coder-app .coder-agent-step.tool-result.err {
    color: var(--coder-danger);
    border-left-color: var(--coder-danger);
    background: rgba(248,113,113,.08);
}
#coder-app .coder-agent-step .ag-icon { margin-right: 6px; }
#coder-app .coder-agent-preview-cta {
    margin: 12px 0;
    padding: 14px 16px;
    background: var(--coder-accent-soft);
    border: 1px solid var(--coder-accent-line);
    border-radius: 10px;
    text-align: center;
}
#coder-app .coder-agent-preview-cta a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--coder-accent-fill);
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: .85rem;
}
#coder-app .coder-agent-preview-cta a:hover { background: var(--coder-accent-hover); color: #fff; }

/* Inline error/notice text inside the chat transcript. */
#coder-app .coder-error-text { color: var(--coder-danger); }
#coder-app .coder-link,
#coder-app .coder-error-text a { color: var(--coder-accent); }
#coder-app .coder-link-strong { color: var(--coder-accent); font-weight: 600; }
#coder-app .coder-limit-box {
    background: rgba(248,113,113,.10);
    border: 1px solid var(--coder-danger);
    border-radius: 8px;
    padding: 14px;
    color: var(--coder-text);
}

/* ===== MONACO DIFF OVERLAY (appended to <body>, not inside #coder-app) ===== */
#coder-diff-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.7);
    z-index: 1060;
    display: none;
    flex-direction: column;
    padding: 20px;
}
#coder-diff-overlay .coder-diff-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--coder-panel);
    border-radius: 6px 6px 0 0;
    color: var(--coder-text);
    font-family: var(--coder-mono);
    font-size: .85rem;
}
#coder-diff-overlay .coder-diff-bar span,
#coder-diff-overlay .coder-diff-bar i { color: inherit; }
#coder-diff-overlay #coder-diff-editor { flex: 1; background: var(--coder-bg); border-radius: 0 0 6px 6px; }
#coder-diff-overlay button { border: none; padding: 5px 14px; border-radius: 4px; font-size: .75rem; cursor: pointer; }
#coder-diff-overlay #coder-diff-accept { background: var(--coder-accent-fill); color: #fff; }
#coder-diff-overlay #coder-diff-accept:hover { background: var(--coder-accent-hover); }
#coder-diff-overlay #coder-diff-reject { background: var(--coder-surface); color: var(--coder-text); border: 1px solid var(--coder-border-strong); }
#coder-diff-overlay #coder-diff-reject:hover { background: var(--coder-hover); }
#coder-diff-overlay #coder-diff-close { background: transparent; color: var(--coder-text-muted); padding: 5px 8px; font-size: 1.1rem; }
#coder-diff-overlay #coder-diff-close:hover { color: var(--coder-text); }

/* --- SC 2.4.7 Focus Visible ----------------------------------------------
 * None of these controls is a Bootstrap .btn or .form-control, so a11y.css's
 * matching-specificity block does not name them and only its bare
 * `:focus-visible` rule at (0,1,0) applies. Anything here that sets a colour
 * at (1,1,0) outranks it, so the ring is stated once, explicitly, for the
 * whole surface. Five `outline:none` declarations were removed above rather
 * than overridden: they were written to stop a ring on a MOUSE click, which
 * :focus-visible already handles for free (templates/CLAUDE.md, 2026-09-17).
 * outline-offset is load-bearing -- a ring drawn ON the green Send button is
 * 1.8:1 against it; offset it sits on the panel at 8.3:1. */
#coder-app button:focus-visible,
#coder-app a:focus-visible,
#coder-app select:focus-visible,
#coder-app [tabindex]:focus-visible,
#coder-diff-overlay button:focus-visible {
    outline: 3px solid var(--focus-ring, #22C55E) !important;
    outline-offset: 2px !important;
}

/* TEXT INPUTS TAKE A BORDER, NOT A RING (owner, 2026-09-17, a11y.css). The
 * site pattern is a grey line at rest and a solid near-white one when focused;
 * these are the coder's own inputs, which that file does not name.
 *
 * ⚠ And the composer, which it DOES name, has to be re-stated here: a11y.css
 * writes `#202124` for light and `#e8eaed` only under `html.dark`. The coder
 * is dark in BOTH themes, so in light mode that is near-black on #1a1a1a --
 * **1.08:1**, a focus indicator you cannot see. Same trap as --brand-ink, one
 * property over: state the value for the SURFACE, not for the theme. */
#coder-app .coder-input-row:focus-within,
#coder-app .coder-clone-input input:focus,
#coder-app .coder-term-input-row input:focus,
#coder-app .coder-saas-input:focus,
#coder-app #coder-model-search:focus {
    border-color: var(--coder-text) !important;   /* 15.3:1 on --coder-surface */
    border-width: 2px !important;
    outline: none !important;
    box-shadow: none !important;
}
/* Borders grow from 1px to 2px on focus, so the padding gives the pixel back
 * and nothing reflows under the cursor. */
#coder-app .coder-input-row:focus-within { padding: 7px 9px 5px 9px; }
#coder-app .coder-clone-input input:focus,
#coder-app .coder-term-input-row input:focus { padding: 3px 7px; }
#coder-app .coder-saas-input:focus { padding: 9px 11px; }