/* =========================================
   CHESS CLERK PRO — STYLESHEET
   =========================================
   1.  Reset & Base
   2.  App Structure
   3.  Board Layout
   4.  Coordinates
   5.  Board Flip
   6.  Piece Render
   7.  Target Highlights
   8.  Check Flash
   9.  Promotion Box
   10. Panel 2 (SAN / Move List)
   11. Panel 3 (Main Content)
   12. Panel 3 Sub-Row
   13. Panel 4 (Motif Lists)
   14. Nav Buttons
   15. SAN Row Controls
   16. Captured Pieces
   17. Engine Options Popup
   18. Chess 960 Popup
   19. Explorer Panel
   20. Internet Panel
   21. File Explorer
   22. Coach Panel
   23. Library Entries
   24. Motif List Entries
   25. Panel 3 States
   26. Wiki / Chess Diagrams
   27. Generic Popup Template
   28. Play vs Line Animation
   29. AI Fullscreen State
   30. Three-Mode Layout (mode-dual / mode-quad-ai / mode-quad-solo)
========================================= */

/* NOTE: a stray, UNSCOPED duplicate of section 29's rules used to live
   right here, with !important and no class gate — meaning #board-column,
   #panel2, #list-panel, and #nav-keys were permanently display:none and
   #panel3-col was permanently fullscreen, on every device, unconditionally.
   That's very likely the entire "board wasn't rendering" bug. Removed —
   section 29 (further down, properly scoped to #panel3-col.ai-expanded)
   already covers this correctly. See section 30 for the real mode-based
   version of this same hide/show logic. */



/* =========================================
   1. RESET & BASE
========================================= */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    top: 0 !important;
    font-family: Georgia, serif;
    background: #4a240f;
    color: #fff0d6;
    height: 100%;
}

:focus { outline: none; }

.goog-te-banner-frame { display: none !important; }
.skiptranslate        { display: none !important; }


/* =========================================
   2. APP STRUCTURE
========================================= */

#app {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 0;
    padding: 25px 0.75in 25px 150px;
    height: auto;
}

#board-column {
    width: 640px;
    flex: 0 0 640px;
    position: relative;
}

#panel-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: auto;
}


/* =========================================
   3. BOARD LAYOUT
========================================= */

#board-container {
    width: 640px;
    position: relative;
    transform-origin: center center;
}

#board {
    display: grid;
    width: 640px;
    height: 640px;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(8, 1fr);
    border: 12px solid #5a3e2b;
}

.square {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}

.light { background-color: #e0c7a1; }
.dark  { background-color: #7a3d1a; }


/* =========================================
   4. COORDINATES
========================================= */

#rank-coords {
    position: absolute;
    left: -32px;
    top: -40px;
    width: 35px;
    height: 640px;
}

#file-coords {
    position: absolute;
    bottom: -45px;
    left: 0;
    height: 40px;
    width: 640px;
}

.coord-rank {
    position: absolute;
    width: 40px;
    height: 80px;
    text-align: center;
    line-height: 80px;
}

.coord-file {
    position: absolute;
    height: 40px;
    width: 80px;
    text-align: center;
}

.coord-rank,
.coord-file {
    font-size: 20px;
    font-weight: 600;
    color: #c9a227;
    font-family: Georgia, serif;
    text-transform: lowercase;
}

.rank1 { top: 595px; } .rank2 { top: 515px; } .rank3 { top: 435px; }
.rank4 { top: 355px; } .rank5 { top: 275px; } .rank6 { top: 195px; }
.rank7 { top: 115px; } .rank8 { top: 35px;  }

.fileA { left: 0px;   } .fileB { left: 80px;  } .fileC { left: 160px; }
.fileD { left: 240px; } .fileE { left: 320px; } .fileF { left: 400px; }
.fileG { left: 480px; } .fileH { left: 560px; }

body:not(.coords-on) #rank-coords,
body:not(.coords-on) #file-coords { display: none; }


/* =========================================
   5. BOARD FLIP
========================================= */

#board.flipped                             { transform: rotate(180deg); }
#board.flipped .square                     { transform: rotate(180deg); }
#board.flipped ~ #file-coords             { transform: rotate(180deg); }
#board.flipped ~ #file-coords .coord-file { transform: rotate(180deg); }

#board-container.flipped-rank #rank-coords {
    transform: rotate(180deg) translateY(-80px) translateX(5px);
}
#board-container.flipped-rank #rank-coords .coord-rank {
    transform: rotate(180deg);
}


/* =========================================
   6. PIECE RENDER
========================================= */

.square.light.wp, .square.dark.wp { background-image: url("pieces/wp.svg"); }
.square.light.wn, .square.dark.wn { background-image: url("pieces/wn.svg"); }
.square.light.wb, .square.dark.wb { background-image: url("pieces/wb.svg"); }
.square.light.wr, .square.dark.wr { background-image: url("pieces/wr.svg"); }
.square.light.wq, .square.dark.wq { background-image: url("pieces/wq.svg"); }
.square.light.wk, .square.dark.wk { background-image: url("pieces/wk.svg"); }
.square.light.bp, .square.dark.bp { background-image: url("pieces/bp.svg"); }
.square.light.bn, .square.dark.bn { background-image: url("pieces/bn.svg"); }
.square.light.bb, .square.dark.bb { background-image: url("pieces/bb.svg"); }
.square.light.br, .square.dark.br { background-image: url("pieces/br.svg"); }
.square.light.bq, .square.dark.bq { background-image: url("pieces/bq.svg"); }
.square.light.bk, .square.dark.bk { background-image: url("pieces/bk.svg"); }

.drag-ghost {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
}


/* =========================================
   7. TARGET HIGHLIGHTS
========================================= */

.square.target-blue {
    box-shadow: inset 0 0 0 3px rgba(80, 140, 255, 0.95);
    border-radius: 6px;
}

.square.target-turquoise {
    box-shadow:
        inset 0 0 0 3px rgba(64, 224, 208, 0.95),
        inset 0 0 6px rgba(64, 224, 208, 0.4);
    border-radius: 6px;
}

.blue-active      { background: #4da6ff !important; color: #000 !important; border-color: #4da6ff !important; }
.turquoise-active { background: #40E0D0 !important; color: #000 !important; border-color: #40E0D0 !important; }
.gold-active      { background: #c9a227 !important; color: #111 !important; border-color: #c9a227 !important; }


/* =========================================
   8. CHECK / ILLEGAL FLASH
========================================= */

@keyframes outline-flash {
    0%   { box-shadow: none; }
    50%  { box-shadow: inset 0 0 0 3px #ff7a00, inset 0 0 10px rgba(255,122,0,0.7); }
    100% { box-shadow: none; }
}

.square.flash-orange { animation: outline-flash 0.15s linear 12; }


/* =========================================
   9. PROMOTION BOX
========================================= */

#promotion-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    gap: 12px;
    background: #3a2818;
    border: 2px solid #c9a227;
    border-radius: 10px;
    width: fit-content;
    min-width: 340px;
    z-index: 9999;
}

#promotion-box img {
    width: 72px;
    height: 72px;
    cursor: pointer;
    padding: 8px;
    border: 1px solid #5a3e2b;
    border-radius: 4px;
    transition: background 0.15s;
}

#promotion-box img.promo-black { background: #e6cfa3; }
#promotion-box img.promo-white { background: #6a4a2d; }


/* =========================================
   10. PANEL 2 (SAN / MOVE LIST)
========================================= */

#panel2 {
    width: 2in;
    height: 640px;
    flex: 0 0 2in;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    box-sizing: border-box;
    background: #45210e;
    border: 3px solid #5a3e2b;
    padding: 0;
}

#move-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 12px 42px 12px;
    scrollbar-width: thin;
    scrollbar-color: #6b4a2f #3b2a1d;
}

#move-content { padding: 0; }

.move-number {
    color: #c9a227;
    min-width: 24px;
    font-size: 17px;
    flex-shrink: 0;
}

.move-text {
    font-size: 17px;
    cursor: pointer;
    padding: 1px 3px;
    border-radius: 4px;
}

.move-line {
    padding: 3px 0;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.move-text.cursor-active {
    background: #c9a227;
    color: #2a1d14;
    border-radius: 4px;
    padding: 1px 4px;
}


/* =========================================
   11. PANEL 3 (MAIN CONTENT)
========================================= */

#panel3-col {
    display: flex;
    flex-direction: column;
    width: 640px;
    overflow: hidden;
}

#panel3 {
    width: 640px;
    flex: 0 0 640px;
    height: 640px;
    box-sizing: border-box;
    overflow-y: scroll;
    padding: 12px;
    border: 3px solid #5a3e2b;
    position: relative;
    isolation: isolate;
    background: #4a240f;
    scrollbar-width: thin;
    scrollbar-color: #6b4a2f #3b2a1d;
}

#panel3::after { content: ""; display: block; height: 8px; }

#panel3::-webkit-scrollbar       { width: 10px; }
#panel3::-webkit-scrollbar-track { background: #3b2a1d; border-left: 1px solid #2a1d14; }
#panel3::-webkit-scrollbar-thumb { background: #6b4a2f; border-radius: 6px; }
#panel3::-webkit-scrollbar-thumb:hover { background: #8a5a3a; }

/* =========================================
   30. THREE-MODE LAYOUT
   mode-dual / mode-quad-ai / mode-quad-solo
   (body classes set by mobile.js / mode-switcher.js)

   mode-quad-ai needs NO rules here — it's the natural default layout
   this file already produces once the stray block from the top of
   this file is gone: board-column, panel2, panel3-col, and list-panel
   all visible side by side, exactly as originally built.
========================================= */

/* mode-dual: hide the four-column supporting elements; panel3-col
   takes over the freed-up space instead of staying pinned to its
   fixed 640px width from section 11. */
body.mode-dual #board-column,
body.mode-dual #right-column,
body.mode-dual #panel2,
body.mode-dual #list-panel,
body.mode-dual #nav-keys {
    display: none;
}
/* #app itself still occupies its own padding (25px / 0.75in / 150px)
   even with board-column and right-column both hidden — that's a real
   source of the left-side gutter seen in dual mode. Zero it out here. */
body.mode-dual #app {
    padding: 0;
}
body.mode-dual #panel3-col {
    width: auto;
    flex: 1;
    height: 100%;
}
body.mode-dual #panel3 {
    width: auto;
    flex: 1;
    height: 100%;
}
/* Full, CONSISTENT height chain, html/body all the way down to #panel3
   — every link set to a real height, none left at auto. #ai-root and
   forks.js's own "main" column already have height:100% set inline
   (ai.js/forks.js), and .ai-msgs already has flex:1;overflow-y:auto —
   this chain was always designed to self-scroll; it just never had a
   real height anywhere above it to resolve against. A previous attempt
   at this left #panel3 at height:auto while everything around it
   insisted on 100% — that ONE inconsistent link is the likely cause of
   the "no top" collapse, not this general approach. (html/body's
   height:100% lives at the top of this file, section 1.) */
body.mode-dual {
    overflow: hidden;
}
body.mode-dual #panel-row {
    height: 100%;
    align-items: stretch;
}
body.mode-dual .fork-layout {
    height: 100%;
}

/* Explicit instruction: this toolbar row (Clear/Tree/Explorer/Wiki/
   Notepad/Files/LINES/Sign In/Expand/AI/Upgrade) doesn't belong in
   dual view at all. mobile.js's own floating toggle button already
   covers what #ai-expand-btn did, so nothing is lost by hiding it. */
body.mode-dual #nav-row-tail {
    display: none;
}

/* Annotated move list — see annotations.js. Small, indented note
   under whichever ply it belongs to, distinct from the move text
   itself so it doesn't get confused with SAN. */
.move-annotation {
    font-size: 12px;
    font-style: italic;
    color: #b08a5a;
    padding: 2px 0 4px 20px;
    line-height: 1.3;
}
.move-annotation-black {
    padding-left: 60px;
}

/* dual-split (Z Fold open, or desktop-width mode-dual): AI + the
   on-demand code/board panel side by side, no fullscreen needed. */
body.mode-dual.dual-split #panel3 {
    display: flex;
    flex-direction: row;
}
body.mode-dual.dual-split .fork-layout {
    display: flex;
    flex-direction: row;
    flex: 1;
    min-width: 0;
}
body.mode-dual.dual-split #ai-root {
    flex: 1;
    min-width: 0;
}
body.mode-dual.dual-split #clerk-code-panel.open {
    width: 45%;
    flex-shrink: 0;
}

/* dual-toggle (phone, or Z Fold closed): one panel visible at a time.
   No extra rules needed here — mobile.js calls togglePanel3Expand()
   (from expand.js) to add/remove .ai-expanded on #panel3-col, and
   section 29 above already has the correct fullscreen rules for that
   state. This just relies on that existing mechanism rather than
   re-implementing it. */

/* mode-quad-solo: panel3-col STAYS visible (this is a change from
   hiding it outright) — its real AI content is hidden and a "Library —
   coming soon" placeholder shows in its place instead. This keeps the
   four-column skeleton intact rather than collapsing to three. */
body.mode-quad-solo #panel3 ,
body.mode-quad-solo #nav-row-tail,
body.mode-quad-solo #lib-sub-row {
    display: none;
}
body.mode-quad-solo #panel3-col::before {
    content: "Library — coming soon";
    display: flex;
    align-items: center;
    justify-content: center;
    width: 640px;
    height: 640px;
    box-sizing: border-box;
    border: 3px solid #5a3e2b;
    color: #8a6a4a;
    font-style: italic;
    font-size: 18px;
    background: #4a240f;
}

#nav-row-tail {
    display: flex;
    width: 640px;
    gap: 1mm;
    height: 32px;
    margin-top: 50 px;
}

#nav-row-tail .nav-btn {
    flex: 1;
    height: 32px;
    font-size: 15px;
    min-width: 0;
}


/* =========================================
   12. PANEL 3 SUB-ROW (LIB BUTTONS)
========================================= */

#lib-sub-row {
    display: none;
    justify-content: center;
    gap: 6px;
    padding: 4px 0;
    margin-top: 6px;
}

.lib-sub-btn {
    height: 32px;
    font-size: 13px;
    width: 80px;
}


.lib-entry.lib-book .lib-san {
    font-style: italic;
    opacity: 0.75;
}


/* =========================================
   13. PANEL 4 (MOTIF LISTS)
========================================= */

#list-panel {
    width: 2in;
    flex: 0 0 2in;
    height: 640px;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
    overflow-x: hidden;
    background: #45210e;
    border-top: 3px solid #5a3e2b;
    border-right: 3px solid #5a3e2b;
    border-bottom: 3px solid #5a3e2b;
    border-left: none;
    scrollbar-width: thin;
    scrollbar-color: #6b4a2f #3b2a1d;
}
#list-panel::-webkit-scrollbar       { width: 10px; }
#list-panel::-webkit-scrollbar-track { background: #3b2a1d; border-left: 1px solid #2a1d14; }
#list-panel::-webkit-scrollbar-thumb { background: #6b4a2f; border-radius: 6px; }
#list-panel::-webkit-scrollbar-thumb:hover { background: #8a5a3a; }
#list-panel::after { content: ""; display: block; height: 8px; }


/* =========================================
   14. NAV BUTTONS
========================================= */

#nav-keys {
    position: absolute;
    top: 720px;
    left: 150px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

#nav-row-board {
    display: flex;
    align-items: center;
    width: 640px;
    gap: 1mm;
}

#nav-row-board .nav-btn {
    flex: 1;
    height: 32px;
    font-size: 14px;
    min-width: 0;
}

#nav-row-board #engine-options {
    font-size: 32px;
    line-height: 1;
    padding: 0 0 10px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-btn {
    height: 32px;
    font-size: 14px;
    background: #8b3a1a;
    color: #fff0d6;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 0;
    position: relative;
}

.nav-btn:hover  { background: #7a3418; }
.nav-btn:active { background: #5a240f; }

.nav-btn::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    background: #2a1d14;
    color: #f5e6d3;
    font-size: 13px;
    font-family: Georgia, serif;
    text-align: center;
    padding: 3px 6px;
    border: 1px solid #5a3e2b;
    border-radius: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s;
    white-space: nowrap;
    z-index: 9999;
}

.nav-btn:hover::after { opacity: 1; }

#speed-down::after,
#speed-up::after { display: none; }


#nav-row-lichess {
    display: flex;
    align-items: center;
    width: 640px;
    gap: 1mm;
}

#nav-row-lichess .nav-btn {
    height: 32px;
    font-size: 14px;
    padding: 0 12px;
}



/* =========================================
   15. SAN ROW CONTROLS
========================================= */

#nav-row-san {
    display: flex;
    flex-direction: column;
    gap: 1mm;
    padding: 4px;
    border-top: 1px solid #5a3e2b;
    background: #45210e;
}

#san-row-top {
    display: flex;
    gap: 1mm;
    width: 100%;
}

#san-row-top .nav-btn {
    flex: 1;
    height: 32px;
    font-size: 14px;
    min-width: 0;
}

#san-row-speed {
    display: flex;
    align-items: center;
    gap: 1mm;
    width: 100%;
}

#san-row-speed .nav-btn {
    width: 32px;
    height: 28px;
    font-size: 16px;
}

#speed-display {
    flex: 1;
    text-align: center;
    font-size: 13px;
    color: #c9a227;
    font-family: Georgia, serif;
}


/* =========================================
   16. CAPTURED PIECES
========================================= */

#captured-left {
    position: absolute;
    left: -120px;
    top: 12px;
    width: 80px;
    height: 616px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
}

.captured-top,
.captured-bottom {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 80px;
    gap: 0;
    align-content: flex-start;
}

.captured-top    { align-self: flex-start; }
.captured-bottom { align-self: flex-end; }

.captured-piece {
    width: 40px;
    height: 40px;
    user-select: none;
    -webkit-user-drag: none;
    display: block;
    filter: drop-shadow(0px 0px 2px rgba(255,255,255,0.85));
}

.captured-score {
    font-size: 14px;
    font-weight: bold;
    color: #c9a227;
    font-family: Georgia, serif;
    text-align: left;
    min-height: 18px;
    width: 80px;
}

.score-top    { margin-bottom: 2px; }
.score-bottom { margin-top: auto; margin-bottom: 2px; }


/* =========================================
   17. ENGINE OPTIONS POPUP
========================================= */

#engine-options-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#engine-options-overlay.active { display: flex; }

#engine-options-box {
    background: #2a1d14;
    border: 2px solid #c9a227;
    border-radius: 10px;
    padding: 24px;
    width: 360px;
    color: #fff0d6;
    font-family: Georgia, serif;
}

.eo-title {
    font-size: 20px;
    color: #c9a227;
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
}

.eo-section-label {
    font-size: 12px;
    color: #8a6a4a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.eo-group {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.eo-btn {
    flex: 1;
    padding: 8px 6px;
    background: #3a2010;
    color: #fff0d6;
    border: 1px solid #5a3e2b;
    border-radius: 4px;
    cursor: pointer;
    font-family: Georgia, serif;
    font-size: 13px;
}

.eo-btn:hover { background: #5a3e2b; }

.eo-btn.eo-active {
    background: #c9a227;
    color: #2a1d14;
    border-color: #c9a227;
    font-weight: bold;
}

.eo-buttons { display: flex; gap: 8px; margin-top: 8px; }

.eo-go {
    flex: 2;
    background: #c9a227;
    color: #2a1d14;
    font-weight: bold;
    border-color: #c9a227;
}

.eo-go:hover:not(:disabled) { background: #e0b840; }
.eo-go:disabled { opacity: 0.4; cursor: default; }
.eo-cancel { flex: 1; }




#eo-color {
    display: flex;
}

#eo-color-label {
    display: block;
}




/* =========================================
   18. CHESS 960 POPUP
========================================= */

#chess960-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#chess960-overlay.active { display: flex; }

#chess960-box {
    background: #2a1d14;
    border: 2px solid #c9a227;
    border-radius: 10px;
    padding: 24px;
    width: 360px;
    color: #fff0d6;
    font-family: Georgia, serif;
}

.c960-title {
    font-size: 20px;
    color: #c9a227;
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
}

.c960-section {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.c960-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 6px;
    background: #3a2010;
    color: #fff0d6;
    border: 1px solid #5a3e2b;
    border-radius: 4px;
    cursor: pointer;
    font-family: Georgia, serif;
    font-size: 13px;
}

.c960-option:hover { background: #5a3e2b; }
.c960-option input { margin: 0; }

.c960-buttons {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.c960-buttons button {
    padding: 8px 6px;
    border: 1px solid #5a3e2b;
    border-radius: 4px;
    cursor: pointer;
    font-family: Georgia, serif;
    font-size: 13px;
}

.c960-start {
    flex: 2;
    background: #c9a227;
    color: #2a1d14;
    font-weight: bold;
    border-color: #c9a227;
}

.c960-start:hover  { background: #e0b840; }
.c960-cancel       { flex: 1; background: #3a2010; color: #fff0d6; }
.c960-cancel:hover { background: #5a3e2b; }


/* =========================================
   19. EXPLORER PANEL
========================================= */

.explorer-table {
    display: flex;
    flex-direction: column;
    color: #fff0d6;
    font-family: Georgia, serif;
    font-size: 14px;
}

.explorer-head,
.explorer-row {
    display: grid;
    grid-template-columns: 110px 110px 80px 80px 1fr;
    align-items: center;
    column-gap: 12px;
    padding: 8px 12px;
    box-sizing: border-box;
}

.explorer-head {
    font-weight: bold;
    color: #d4a64a;
    border-bottom: 1px solid #8b4a22;
    position: sticky;
    top: 0;
    background: #6b2f12;
    z-index: 2;
}

.explorer-row {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(212,166,74,0.15);
    color: #fff0d6;
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.explorer-row:hover,
.explorer-row:focus { background: #7a3d1a; outline: none; }

.explorer-col-move  { font-weight: bold; color: #d4a64a; }
.explorer-col-eval,
.explorer-col-games,
.explorer-col-last  { color: #f2dfc2; }
.explorer-col-bar   { min-width: 220px; }

.explorer-bar-wrap { width: 100%; }

.explorer-bar {
    display: flex;
    width: 100%;
    height: 18px;
    overflow: hidden;
    border-radius: 3px;
    background: #3a1a0c;
}

.explorer-bar-white,
.explorer-bar-draw,
.explorer-bar-black {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
}

.explorer-bar-white { background: #d4a64a; color: #2a1d14; }
.explorer-bar-draw  { background: #8a4a2a; color: #fff0d6; }
.explorer-bar-black { background: #3a1a0c; color: #fff0d6; }
.explorer-empty     { padding: 12px; color: #f2dfc2; }


/* =========================================
   20. INTERNET PANEL
========================================= */

.inet-hint           { font-size: 11px; color: #8a6a4a; margin-bottom: 12px; font-style: italic; }
.inet-category       { margin-bottom: 14px; }
.inet-category-label { font-size: 11px; font-weight: bold; color: #c9a227; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; }

.inet-tile-grid { display: flex; flex-wrap: wrap; gap: 6px; }

.inet-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 64px;
    background: #5a3e2b;
    border: 1px solid #6b4a33;
    border-radius: 6px;
    cursor: pointer;
    gap: 4px;
    padding: 6px 4px;
    transition: background 0.12s, border-color 0.12s;
}

.inet-tile:hover { background: #6b4a33; border-color: #c9a227; }

.inet-tile-icon  { font-size: 18px; line-height: 1; color: #f5e6d3; font-family: Georgia, serif; }
.inet-tile-label { font-size: 10px; color: #c9a227; text-align: center; font-family: Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 68px; }

.inet-bar { display: flex; gap: 6px; margin-top: 8px; padding-top: 10px; border-top: 1px solid #5a3e2b; }

.inet-input {
    flex: 1;
    background: #2a1d14;
    border: 1px solid #5a3e2b;
    color: #f5e6d3;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-family: Georgia, serif;
}

.inet-input:focus { border-color: #c9a227; }

.inet-go-btn {
    background: #5a3e2b;
    color: #f5e6d3;
    border: 1px solid #6b4a33;
    border-radius: 4px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 13px;
    font-family: Georgia, serif;
}

.inet-go-btn:hover { background: #6b4a33; border-color: #c9a227; }


/* =========================================
   21. FILE EXPLORER
========================================= */

.fe-toolbar { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }

.fe-btn {
    background: #5a3e2b;
    color: #f5e6d3;
    border: 1px solid #6b4a33;
    border-radius: 4px;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 12px;
    font-family: Georgia, serif;
}

.fe-btn:hover { background: #6b4a33; border-color: #c9a227; }

.fe-breadcrumb { font-size: 12px; color: #8a6a4a; margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.fe-bc-link    { color: #c9a227; cursor: pointer; }
.fe-bc-link:hover { text-decoration: underline; }
.fe-bc-current { color: #f5e6d3; }
.fe-bc-sep     { color: #5a3e2b; }

.fe-section-label { font-size: 11px; font-weight: bold; color: #c9a227; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; margin-top: 8px; }
.fe-tree-wrap     { margin-top: 4px; }
.fe-tree          { display: flex; flex-direction: column; gap: 1px; }

.fe-item {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    color: #f5e6d3;
    font-family: Georgia, serif;
}

.fe-item.fe-hover { background: rgba(255,255,255,0.06); }
.fe-item.fe-dir   { font-weight: bold; color: #c9a227; }
.fe-icon          { font-size: 14px; flex-shrink: 0; width: 18px; text-align: center; }
.fe-name          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fe-recent        { margin-bottom: 10px; }
.fe-empty         { font-size: 12px; color: #6b4a33; padding: 8px; font-style: italic; }
.fe-error         { font-size: 12px; color: #ff7a7a; padding: 8px; }
.fe-prompt        { font-size: 13px; color: #8a6a4a; line-height: 1.6; padding: 8px 0 14px; border-bottom: 1px solid #3b2a1e; margin-bottom: 12px; }


/* =========================================
   22. COACH PANEL
========================================= */

.coach-heading { font-size: 15px; font-weight: bold; color: #c9a227; margin-bottom: 6px; }
.coach-desc    { font-size: 12px; color: #8a6a4a; margin-bottom: 16px; line-height: 1.5; }
.coach-section { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
.coach-section-label { font-size: 12px; font-weight: bold; color: #c9a227; text-transform: uppercase; letter-spacing: 1px; }

.coach-input {
    background: #2a1d14;
    border: 1px solid #5a3e2b;
    color: #f5e6d3;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-family: Georgia, serif;
    width: 100%;
    box-sizing: border-box;
}

.coach-input:focus { border-color: #c9a227; }

.coach-btn {
    padding: 6px 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-family: Georgia, serif;
    align-self: flex-start;
}

.coach-btn-primary          { background: #c9a227; color: #2a1d14; font-weight: bold; }
.coach-btn-primary:hover    { background: #e0b840; }
.coach-btn-secondary        { background: #5a3e2b; color: #f5e6d3; border: 1px solid #6b4a33; }
.coach-btn-secondary:hover  { background: #6b4a33; }
.coach-btn-danger           { background: #8b2020; color: #f5e6d3; }
.coach-btn-danger:hover     { background: #a02828; }
.coach-btn:disabled         { opacity: 0.5; cursor: default; }

.coach-divider { border-top: 1px solid #3b2a1e; margin: 8px 0 16px; }

.coach-zoom {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #2a4a7a;
    border: 1px solid #3a5a8a;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: #f5e6d3;
    margin-top: 8px;
    width: fit-content;
}

.coach-zoom:hover { background: #3a5a8a; }

.coach-active { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 12px; text-align: center; }

.coach-active-code {
    font-size: 36px;
    font-weight: bold;
    letter-spacing: 6px;
    color: #40E0D0;
    font-family: monospace;
    background: #2a1d14;
    padding: 10px 20px;
    border-radius: 8px;
    border: 2px solid #40E0D0;
}

.coach-active-role { font-size: 13px; color: #c9a227; font-weight: bold; }
.coach-active-hint { font-size: 12px; color: #8a6a4a; }
.coach-error       { font-size: 12px; color: #ff7a7a; margin-top: 4px; }


/* =========================================
   23. LIBRARY ENTRIES
========================================= */

.lib-entry         { padding: 6px 8px; font-size: 14px; color: #f5e6d3; cursor: pointer; border-radius: 4px; margin-bottom: 2px; }
.lib-entry:hover   { background: rgba(255,255,255,0.05); }
.lib-selected      { background: #c9a227; color: #2a1d14; }
.lib-selected:hover { background: #e0b840; color: #2a1d14; }
.lib-has-note      { border-left: 2px solid #c9a227; padding-left: 6px; }
.lib-entry-text    { display: flex; align-items: center; gap: 6px; }
.lib-note-dot      { font-size: 8px; color: #c9a227; flex-shrink: 0; }

.lib-note-display {
    font-size: 12px;
    color: #8a6a4a;
    font-style: italic;
    margin-top: 3px;
    padding-left: 2px;
    line-height: 1.4;
}

.lib-note-editor {
    width: 100%;
    margin-top: 6px;
    background: #2a1d14;
    border: 1px solid #c9a227;
    color: #f5e6d3;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-family: Georgia, serif;
    resize: none;
    box-sizing: border-box;
}

.lib-note-editor:focus { border-color: #40E0D0; }


/* =========================================
   24. MOTIF LIST ENTRIES
========================================= */

#list-header {
    padding: 8px 8px 10px;
    font-size: 16px;
    font-weight: bold;
    color: #c9a227;
    border-bottom: 1px solid #5a3e2b;
    margin-bottom: 6px;
}

.list-entry         { padding: 6px 8px; font-size: 16px; color: #f5e6d3; cursor: pointer; }
.list-entry:hover   { background: rgba(255,255,255,0.05); }
.variation-entry.active { background: #c9a227; color: #2a1d14; }

.list-back          { color: #8a6a4a; font-size: 13px; padding: 6px 8px; cursor: pointer; border-bottom: 1px solid #5a3e2b; margin-bottom: 4px; }
.list-back:hover    { color: #c9a227; }

.list-section-label { padding: 8px 8px 4px; font-size: 11px; font-weight: bold; color: #c9a227; text-transform: uppercase; letter-spacing: 1px; cursor: default; }

.list-variation       { padding: 5px 8px; font-size: 14px; color: #f5e6d3; cursor: pointer; border-radius: 4px; }
.list-variation:hover { background: rgba(255,255,255,0.05); }

.list-active       { background: #c9a227; color: #2a1d14; }
.list-active:hover { background: #e0b840; }


/* =========================================
   25. PANEL 3 STATES
========================================= */

.p3-loading  { font-size: 13px; color: #8a6a4a; padding: 16px 12px; font-style: italic; }
.panel3-stub { padding: 24px; color: #8a6a4a; font-style: italic; font-family: Georgia, serif; }


/* =========================================
   26. WIKI / CHESS DIAGRAMS
========================================= */

.cc-chess-wrap {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    margin: 16px 0;
}

.cc-chess-wrap table {
    border-collapse: collapse;
    margin: 0 auto;
    table-layout: auto;
    width: auto;
    max-width: none;
    display: table;
}

.cc-chess-wrap tr               { display: table-row; }
.cc-chess-wrap td,
.cc-chess-wrap th               { display: table-cell !important; padding: 0 !important; margin: 0; vertical-align: middle !important; width: auto !important; height: auto !important; }
.cc-chess-wrap img              { display: block; max-width: none; width: auto; height: auto; }
.cc-chess-wrap *                { max-width: none !important; box-sizing: content-box !important; }


/* =========================================
   27. GENERIC POPUP TEMPLATE
========================================= */

#popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

#popup-overlay.active { display: flex; }

#popup-box {
    background: #2a1d14;
    border: 2px solid #c9a227;
    border-radius: 10px;
    padding: 24px;
    width: fit-content;
    max-width: 90vw;
    min-width: 280px;
    color: #fff0d6;
    font-family: Georgia, serif;
}

.popup-title {
    font-size: 20px;
    color: #c9a227;
    text-align: center;
    margin-bottom: 20px;
    font-weight: bold;
}

.popup-section-label {
    font-size: 12px;
    color: #8a6a4a;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.popup-group {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.popup-btn {
    flex: 1;
    padding: 8px 6px;
    background: #3a2010;
    color: #fff0d6;
    border: 1px solid #5a3e2b;
    border-radius: 4px;
    cursor: pointer;
    font-family: Georgia, serif;
    font-size: 13px;
}

.popup-btn:hover        { background: #5a3e2b; }
.popup-btn.popup-active { background: #c9a227; color: #2a1d14; border-color: #c9a227; font-weight: bold; }

.popup-buttons { display: flex; gap: 8px; margin-top: 8px; }

.popup-go {
    flex: 2;
    background: #c9a227;
    color: #2a1d14;
    font-weight: bold;
    border: 1px solid #c9a227;
}

.popup-go:hover:not(:disabled) { background: #e0b840; }
.popup-go:disabled              { opacity: 0.4; cursor: default; }

.popup-cancel       { flex: 1; background: #3a2010; color: #fff0d6; border: 1px solid #5a3e2b; }
.popup-cancel:hover { background: #5a3e2b; }


/* =========================================
   28. PLAY VS LINE ANIMATION
========================================= */

.target-turquoise {
    animation: pvl-turquoise-pulse 0.6s ease-in-out infinite;
}

.square.target-turquoise.pvl-hint {
    animation: pvl-turquoise-flash 0.15s linear 12;
}

@keyframes pvl-turquoise-flash {
    0%   { box-shadow: inset 0 0 0 3px rgba(64, 224, 208, 0.2), inset 0 0 2px rgba(64, 224, 208, 0.1); }
    50%  { box-shadow: inset 0 0 0 3px rgba(64, 224, 208, 0.95), inset 0 0 10px rgba(64, 224, 208, 0.8); }
    100% { box-shadow: inset 0 0 0 3px rgba(64, 224, 208, 0.2), inset 0 0 2px rgba(64, 224, 208, 0.1); }
}

/* =========================================
   28. PLAY VS LINE ANIMATION
========================================= */



.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
    scrollbar-color: #4a2810 transparent;
    position: relative;
}

.ai-msg-user {
    align-self: flex-start;
    background: #3d2010;
    border: 1px solid #5a3020;
    border-radius: 10px 10px 10px 2px;
    padding: 8px 12px;
    color: #f0d8b0;
    max-width: 80%;
}

.ai-msg-assistant {
    align-self: flex-start;
    background: #1e1208;
    border: 1px solid #3d2010;
    border-radius: 2px 10px 10px 10px;
    padding: 8px 12px;
    color: #f2dfc2;
    white-space: pre-wrap;
    max-width: 80%;
}

.ai-font-slider-rail {
    position: absolute;
    right: 4px;
    top: 12px;
    bottom: 12px;
    width: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ai-font-slider {
    writing-mode: vertical-lr;
    direction: rtl;
    -webkit-appearance: slider-vertical;
    appearance: slider-vertical;
    width: 18px;
    height: 80%;
    cursor: pointer;
    accent-color: #8a6a4a;
}

.ai-font-label {
    font-size: 9px;
    color: #5a3a20;
    font-family: Georgia, serif;
}








/* =========================================
   29. AI FULLSCREEN STATE
========================================= */

#panel3-col.ai-expanded {
    position: fixed;
    inset: 0;
    z-index: 9000;
    width: 100vw !important;
    height: 100vh !important;
    flex: none;
    display: flex;
    flex-direction: column;
}

#panel3-col.ai-expanded #panel3 {
    flex: 1;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: row;
}

#panel3-col.ai-expanded .fork-layout {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

#panel3-col.ai-expanded #clerk-code-panel.open {
    width: 45%;
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
}

#panel3-col.ai-expanded .ai-panel {
    width: 100%;
    height: 100%;
}

#panel3-col.ai-expanded #nav-row-tail {
    width: 100%;
}



#panel3-col.ai-expanded .fork-layout {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

#panel3-col.ai-expanded #ai-root {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}



/* =========================================
   30. LINES LIBRARY (panel 3 lines mode)
========================================= */

/* Tab bar */
#lines-tab-bar {
    display: flex;
    gap: 6px;
    padding: 8px 10px 6px;
    border-bottom: 1px solid #2a1a08;
    background: #1e1208;
    position: sticky;
    top: 0;
    z-index: 2;
}

.lines-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: Georgia, serif;
    font-style: italic;
    font-size: 12px;
    color: #6b4a2f;
    cursor: pointer;
    padding: 3px 8px;
    border-radius: 3px;
    user-select: none;
}

.lines-tab:hover { color: #a07828; }

.lines-tab-cb {
    appearance: none;
    width: 10px;
    height: 10px;
    border: 1px solid #5a3e2b;
    border-radius: 2px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
}

.lines-tab-cb:checked {
    background: #c9a227;
    border-color: #c9a227;
}

.lines-tab-cb:checked::after {
    content: "";
    position: absolute;
    left: 2px;
    top: 0px;
    width: 4px;
    height: 7px;
    border: 2px solid #1e1208;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}

/* Lines container */
#lines-container {
    padding: 8px 10px 24px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Individual line row */
.lines-row {
    padding: 5px 8px;
    border-radius: 3px;
    cursor: default;
    user-select: text;
    transition: background 0.1s;
}

.lines-row:hover {
    background: rgba(201, 162, 39, 0.07);
}

.lines-san {
    font-family: Georgia, serif;
    font-size: 14px;
    color: #a07828;
    line-height: 1.5;
    word-break: break-word;
}

.lines-note {
    font-family: Georgia, serif;
    font-size: 12px;
    font-style: italic;
    color: #5a3e2b;
    margin-top: 2px;
    padding-left: 4px;
}

/* Highlighted / selected */
.lines-selected .lines-san {
    color: #e0b840;
}

.lines-selected {
    background: rgba(201, 162, 39, 0.15);
    border-left: 2px solid #c9a227;
    padding-left: 6px;
}

/* Empty state */
.lines-empty {
    font-family: Georgia, serif;
    font-size: 13px;
    font-style: italic;
    color: #3a2810;
    padding: 24px 10px;
    text-align: center;
}

/* Import box */
#lines-import-box {
    position: sticky;
    bottom: 0;
    background: #1e1208;
    border-top: 1px solid #2a1a08;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 3;
}

.lines-import-ta {
    width: 100%;
    height: 90px;
    background: #150d04;
    border: 1px solid #3a2810;
    color: #c9a227;
    font-family: Georgia, serif;
    font-size: 13px;
    padding: 8px;
    border-radius: 4px;
    resize: vertical;
    box-sizing: border-box;
}

.lines-import-ta:focus {
    border-color: #c9a227;
    outline: none;
}

.lines-import-btn {
    align-self: flex-end;
    background: #c9a227;
    color: #1e1208;
    border: none;
    border-radius: 4px;
    padding: 6px 18px;
    font-family: Georgia, serif;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
}

.lines-import-btn:hover {
    background: #e0b840;
}

/* Floppy dot states */
.floppy-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: 2px;
    vertical-align: super;
    font-size: 0;
}

.floppy-dot.nofile  { background: transparent; }
.floppy-dot.dirty   { background: #ff7a40; }
.floppy-dot.saved   { background: #40d080; }


#panel3-col.ai-expanded #nav-row-tail {
    display: none;
}