/* styles.css */
/* PATCHED 2026-08-20 23:58 MDT -- NEW FILE. Codebuilder's own stylesheet. NOT a trimmed copy of
   ChessClerk's 2,222 lines -- this is the layout chain and nothing else, written out from the
   parts of it that are load-bearing. Everything that was about a chessboard, a nav row, captured
   pieces, an eval bar, a motif list, a lines library or a phone view is not here because none of
   those elements exist in Codebuilder's index.html.
   Older stamps: HISTORY.md */
/* any revision to this file requires a new time stamp on the line above */

/* ═══ WHAT THIS FILE IS RESPONSIBLE FOR, AND WHAT IT IS NOT ═══
   Two panels: the clerk on the left, the workstation on the right. That is the whole layout.

   Almost everything you SEE is styled elsewhere and deliberately not duplicated here:
     folders/ai/ai.css     the chat itself -- .ai-panel, .ai-msgs, .ai-msg, the input row, code
                           blocks, file chips, and the inside of #clerk-code-panel.
     folders/ai/contents.js  injects .contents-layout and .contents-sidebar at runtime.
     folders/ai/sections.js  injects the .cf- rail classes at runtime in its styles() function.
   Adding rules for any of those here would give you two sources for one appearance, and the
   runtime-injected ones land AFTER this file, so this file would silently lose. */

* { box-sizing: border-box; }

/* NO :root --board. ChessClerk derives that one number from the viewport and measures ten
   things off it. There is no board here and nothing to measure. */

html, body {
    margin: 0;
    font-family: Georgia, serif;
    background: #4a240f;
    color: #fff0d6;
    height: 100%;
    height: 100dvh;      /* mobile browsers: exclude the URL bar, same fallback pattern as #app */
    width: 100%;
    overflow: hidden;    /* the page itself never scrolls or bounces -- */
    position: fixed;     /* -- position:fixed is what actually stops iOS Safari's rubber-band
                            drag-to-scroll; overflow:hidden alone does not fully kill it. */
    top: 0;
    left: 0;
}

/* ═══ THE SIZING CHAIN ═══
   #app -> #panel-row -> #panel3-col -> #panel3 -> .fork-layout -> #ai-root -> .ai-msgs

   EVERY LINK IS LOAD-BEARING AND THE FAILURE IS ALWAYS THE SAME ONE. .ai-msgs{flex:1} means
   nothing unless every wrapper above it is a flex box with a REAL height and min-height:0. Break
   any single link and the column grows to fit a long conversation instead of scrolling inside a
   fixed boundary -- the fixed body then clips it, and the top of the chat becomes unreachable
   because no scroll container ever got a boundary to scroll within.

   min-height:0 and min-width:0 are on nearly everything on purpose. A flex item's default
   min-size is auto, meaning "never shrink below your content", which is exactly the wrong
   default for a container whose whole job is to bound a scrolling child. */

#app {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 0;
    height: 100vh;
    height: 100dvh;          /* mobile browsers: exclude URL bar */
}

#panel-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    min-width: 0;
    height: 100%;
    min-height: 0;
}

#panel3-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: auto;
    min-width: 0;
    height: 100%;
    overflow: hidden;
}

#panel3 {
    flex: 1;
    width: auto;
    height: 100%;            /* NOT auto -- auto sizes to content (a long chat) and drags the
                                whole column taller than the screen. */
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    overflow: hidden;        /* children scroll internally; an outer scrollbar would be useless */
    padding: 12px;
    border: 3px solid #5a3e2b;
    position: relative;
    isolation: isolate;
    background: #4a240f;
}

/* THE ROW THAT HOLDS BOTH PANELS. panelview.js appends #clerk-code-panel into this element as a
   SIBLING of #ai-root -- that is why the workstation and the chat sit side by side without
   either one being nested in the other. */
.fork-layout {
    flex: 1;                 /* basis 0 -- content never decides width */
    display: flex;
    flex-direction: row;
    min-width: 0;
}

#ai-root {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* ═══ THE WORKSTATION ═══
   The file explorer for whatever product is open. Built by folders/ai/panelview.js, driven by
   folders/codebuilder/cbpanel.js and cbwindow.js, and relocated by folders/coreui/portal.js.

   IT IS CLOSED UNTIL IT IS OPEN. The .open class is what gives it a width -- without the class
   it has none and takes no space, which is how the chat gets the full panel when there is no
   file being looked at. */
#clerk-code-panel {
    width: 0;
    flex-shrink: 0;
    overflow: hidden;
}

#clerk-code-panel.open {
    width: min(720px, 100vw);
    /* NO min-width. A hard minimum on a viewport narrower than that minimum does not make the
       panel wide, it makes the PAGE scroll -- and html is overflow:hidden, so it just clips
       instead. min() shrinks properly on a narrow screen. */
    flex-shrink: 0;
    display: flex;           /* a flex column bounded by the row's height -- required for the
                                body's flex:1 below to mean anything */
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* SELECTOR DELIBERATELY OVER-QUALIFIED. folders/ai/ai.js injects its own
   "#clerk-code-panel-body { flex:1; overflow:auto }" at RUNTIME, which is after this file loads,
   and overflow:auto (shorthand, both axes) beats overflow-x:hidden at equal specificity.
   id + class + id wins regardless of source order. Do not simplify this to
   #clerk-code-panel-body -- it will start losing and the horizontal scrollbar will come back. */
#clerk-code-panel.open #clerk-code-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    /* No visible scrollbar, ever -- content still wheel/touch-scrolls on short screens, the bar
       just never paints. */
    scrollbar-width: none;
}

#clerk-code-panel.open #clerk-code-panel-body::-webkit-scrollbar {
    display: none;
}

/* ═══ THE OVERFLOW GUARD ═══
   A long unbroken string -- a file path, a minified line, a stack trace -- is one element with a
   min-content width wider than the panel. Default min-width:auto lets it win, and the panel grows
   to fit it, shoving the workstation off the right edge. This is what stops that, and it has to
   name every wrapper in the chain because any one of them left out is the one that gives. */
.fork-layout > *,
#ai-root,
.ai-panel,
.ai-input-area,
.ai-input-row,
.ai-input {
    min-width: 0;
    max-width: 100%;
}

/* The input row keeps its height; only the message list gives way. Without this a growing
   textarea and a long conversation compete, and the input is what loses -- you end up typing
   into a two-pixel slot. */
.ai-input-area,
.ai-input-row {
    flex-shrink: 0;
}

/* ═══ SIGN-IN OVERLAY ═══
   Carried over because index.html's overlay markup reuses ChessClerk's class names, and those
   classes lived in the chess960 popup section of the old stylesheet -- which is not coming
   across. Without these the overlay renders as unstyled text on a dark wash. */
.c960-title {
    font: 20px Georgia, serif;
    color: #e8c88a;
    margin-bottom: 12px;
}

#chess960-box {
    background: #45210e;
    border: 3px solid #5a3e2b;
    border-radius: 6px;
    padding: 22px;
    color: #fff0d6;
}

.c960-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.c960-start,
.c960-cancel {
    font: 14px Georgia, serif;
    padding: 8px 16px;
    border-radius: 5px;
    cursor: pointer;
    border: 1px solid #5a3a12;
}

.c960-start  { background: #2e1a10; color: #e8c88a; }
.c960-cancel { background: transparent; color: #8a7355; border-color: #3a2410; }

.c960-start:hover  { background: #46280f; color: #ffe9c0; }
.c960-cancel:hover { color: #e8c88a; }




:root{
  --sc-bg:#171717; --sc-edge:#2e2e2e; --sc-title:#fff; --sc-body:#a1a1a1;
  --sc-accent:#2563eb; --sc-pill:#262626; --sc-radius:16px; --sc-font:Inter,system-ui,sans-serif;
}