:root{color-scheme:dark}
  *{box-sizing:border-box}
  body{margin:0;height:100vh;height:100dvh;font-family:'Segoe UI',system-ui,sans-serif;background:#1b1a19;color:#e8e6e3;overflow:hidden}
  *{scrollbar-width:thin;scrollbar-color:#454443 transparent}
  ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-thumb{background:#454443;border-radius:4px} ::-webkit-scrollbar-track{background:transparent}
  input:focus,textarea:focus,select:focus{outline:none;border-color:#10a37f}
  button:active{transform:translateY(1px)}
  #gate{position:fixed;inset:0;background:#1b1a19;display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center}
  #gate input{background:#292827;color:#e8e6e3;border:1px solid #3d3c3b;border-radius:6px;padding:10px;font-size:16px;width:min(320px,90vw)}
  button{background:#10a37f;color:#fff;border:0;border-radius:6px;padding:8px 14px;font-size:14px;cursor:pointer}
  button:hover{filter:brightness(1.1)} button.ic{background:#3d3c3b;padding:6px 9px}
  #app{display:none;height:100vh;height:100dvh;grid-template-columns:290px 1fr;transition:grid-template-columns .18s ease}
  #app.rail-closed{grid-template-columns:0 1fr}
  #backdrop{display:none}
  /* rail */
  #rail{background:#252423;border-right:1px solid #3d3c3b;display:flex;flex-direction:column;min-height:0;min-width:0;overflow:hidden}
  #app.rail-closed #rail{border-right:0}
  .rhead{padding:12px 12px 8px;display:flex;align-items:center;gap:8px}
  .rhead b{font-size:18px;font-weight:700}
  #filter{margin:0 8px 8px;padding:8px 12px;background:#292827;border:1px solid #3d3c3b;border-radius:18px;color:#e8e6e3;font-size:13px}
  .catalog-tools{padding:0 8px 8px}
  #refreshChats{width:100%;text-align:left}
  #catalogStatus{font-size:11px;color:#a9a7a5;padding:5px 3px 0;line-height:1.4}
  button:disabled{opacity:.5;cursor:not-allowed;transform:none}
  #chatUnavailable{display:none;background:#3a2a12;color:#f5c518;padding:9px 14px;font-size:12.5px;line-height:1.45;border-bottom:1px solid #5c441d}
  #chatlist{flex:1;overflow:auto;min-height:0;padding-bottom:6px}
  .row{display:flex;gap:10px;align-items:center;padding:8px 12px;cursor:pointer;position:relative}
  .row:hover{background:#302f2e}
  .row.active{background:#3a3937}
  .row.active::before{content:'';position:absolute;left:0;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:#10a37f}
  .av{width:36px;height:36px;border-radius:50%;background:#4a4a7a;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;color:#fff;flex:0 0 auto;position:relative}
  .av .st{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;border:2px solid #252423;background:#6e6e6e}
  .av .st.working{background:#f5c518} .av .st.idle{background:#92c353}
  .meta{flex:1;min-width:0}
  .nm{display:flex;justify-content:space-between;gap:6px;font-size:14px}
  .nm .nmx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
  .row.unread .nm .nmx{font-weight:700}
  .nm .t{font-size:11px;color:#a9a7a5;flex:0 0 auto}
  .bl{font-size:12.5px;color:#a9a7a5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .row.unread .bl{color:#d0cfcd}
  .badge{background:#c4314b;color:#fff;border-radius:10px;font-size:11px;padding:0 6px;min-width:18px;text-align:center;flex:0 0 auto}
  .ren{opacity:0;font-size:12px;color:#a9a7a5;padding:0 3px} .row:hover .ren{opacity:.8}
  /* main */
  #main{display:flex;flex-direction:column;min-width:0;min-height:0}
  #mhead{padding:10px 14px;border-bottom:1px solid #3d3c3b;display:flex;align-items:center;gap:10px;background:#201f1e}
  #mtitle{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  #mhead .sub{font-size:11px;color:#a9a7a5}
  .metarow{display:flex;gap:6px;align-items:center;margin-top:4px;flex-wrap:wrap}
  .chip{font-size:11px;padding:2px 7px;border-radius:9px;background:#33322f;color:#c8c6c4;white-space:nowrap}
  .chip.model{background:#143a30;color:#8fe3c6;font-weight:600;border:1px solid #1d5c4a}
  #modelSel,#effortSel{font-size:11px;padding:2px 6px;max-width:170px}
  button.modelRefresh{background:#3d3c3b;color:#d7d5d3;padding:3px 7px;font-size:11px;line-height:1.2}
  .grp{display:flex;align-items:center;gap:6px;padding:9px 12px 3px;color:#a9a7a5;font-size:12px;font-weight:600;user-select:none}
  .grp .gp{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8fe3c6}
  .grp.sect{border-top:1px solid #34332f;margin-top:6px;padding-top:10px}
  .grp.sect .gp{color:#a9a7a5;letter-spacing:.3px}
  .grp.proj{cursor:pointer;padding:7px 12px 5px}
  .grp.proj:hover{background:#302f2e}
  .grp .chev{font-size:9px;width:9px;text-align:center;color:#8a8886}
  .grp button.newin{margin-left:auto;background:#2f3b37;color:#8fe3c6;border:0;border-radius:5px;padding:1px 7px;font-size:12px;cursor:pointer}
  .grp button.newin:hover{background:#3d4f49}
  .phint{padding:2px 12px 6px 30px;font-size:11px;color:#7c7a78;font-style:italic}
  .row.nested{padding-left:30px;background:linear-gradient(90deg,#232f2b 0 3px,transparent 3px)}
  .row.nested .av{width:28px;height:28px;font-size:12px}
  .chip:empty{display:none}
  button.ic.danger{background:#7a2320}
  button.ic.danger:hover{background:#a4262c}
  label.live{font-size:12px;color:#c8c6c4;display:flex;align-items:center;gap:4px;cursor:pointer}
  select{background:#292827;color:#e8e6e3;border:1px solid #3d3c3b;border-radius:6px;padding:4px;font-size:12px}
  #roBanner{display:none;background:#3a2a12;color:#f5c518;border-bottom:1px solid #5c441d;padding:8px 14px;font-size:12.5px;line-height:1.45}
  #roBanner.on{display:block}
  #roBanner .how{display:block;color:#d8c9a0;font-size:11.5px;margin-top:3px}
  #roBanner code{background:#2a1f0d;padding:1px 4px;border-radius:3px;font-size:11px}
  /* Same shape as the read-only banner, but red: this one means nothing works at all. */
  #appBanner{display:none;background:#3d1f1f;color:#ff9b9b;border-bottom:1px solid #6b2f2f;padding:8px 14px;font-size:12.5px;line-height:1.45}
  #appBanner.on{display:block}
  #appBanner .how{display:block;color:#e0bcbc;font-size:11.5px;margin-top:3px}
  #appBanner code{background:#2a1212;padding:1px 4px;border-radius:3px;font-size:11px}
  #compose.ro #box{opacity:.6}
  #msgs{flex:1;overflow:auto;padding:16px 16px 8px;display:flex;flex-direction:column;gap:4px;min-height:0}
  .mrow{display:flex;gap:8px;align-items:flex-end;align-self:flex-start;max-width:88%}
  .mav{width:28px;height:28px;border-radius:50%;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;background:#c96442}
  .mav.spacer{visibility:hidden}
  .b{max-width:82%;padding:8px 12px;border-radius:8px;white-space:pre-wrap;word-break:break-word;font-size:14px;line-height:1.45}
  /* A rebuilt-Markdown answer lays itself out with real blocks, so pre-wrap here would add a blank
     line after every one of them. Headings are demoted two levels: an h1 inside a chat bubble is
     absurd, and ChatGPT uses h1/h2 freely for what are really section labels. */
  .md{white-space:normal;min-width:0}
  /* The bubble is a flex item, and a flex item defaults to min-width:auto - it refuses to shrink
     below its content. A wide table inside would then push the bubble past the screen edge and get
     clipped, because #msgs cannot scroll it back. This lets the bubble shrink so the table's own
     wrapper does the scrolling. */
  .mrow>.b{min-width:0}
  .md>*:first-child{margin-top:0}
  .md>*:last-child{margin-bottom:0}
  .md p{margin:0 0 8px}
  .md h3,.md h4,.md h5,.md h6{margin:14px 0 6px;line-height:1.3;font-weight:600}
  .md h3{font-size:15.5px}
  .md h4{font-size:14.5px}
  .md h5,.md h6{font-size:13.5px;color:#d7d5d3}
  .md ul,.md ol{margin:0 0 8px;padding-left:22px}
  .md li{margin:2px 0}
  .md li>ul,.md li>ol{margin:2px 0}
  .md blockquote{margin:8px 0;padding:2px 0 2px 10px;border-left:3px solid #55534f;color:#c9c7c4}
  .md code{background:#2b2a28;padding:1px 4px;border-radius:3px;font-size:12.5px;
           font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
  .md pre{margin:8px 0;padding:9px 11px;background:#211f1d;border:1px solid #3a3835;border-radius:6px;
          overflow-x:auto}
  .md pre code{background:none;padding:0;font-size:12.5px;line-height:1.45}
  .md hr{border:0;border-top:1px solid #45433f;margin:12px 0}
  .md a{color:#8fb8ff}
  /* Tables are the main reason replies looked like a mess. They must scroll on their own rather
     than force the whole page sideways on a phone. */
  .md .tw{overflow-x:auto;margin:8px 0;-webkit-overflow-scrolling:touch;max-width:100%}
  /* width:max-content is the point of this rule. Without it the table auto-shrinks its columns to
     the bubble and a five-column worksheet becomes an unreadable 240px concertina; with it the
     table keeps its natural width and the WRAPPER scrolls instead. min-width keeps narrow tables
     from looking stranded. */
  .md table{border-collapse:collapse;font-size:12.5px;width:max-content;min-width:100%}
  .md th,.md td{border:1px solid #45433f;padding:5px 8px;text-align:left;vertical-align:top}
  .md th{background:#2f2d2b;font-weight:600;white-space:nowrap}
  .mrow .b{max-width:100%}
  .b .ts{font-size:10px;color:#8a8886;margin-top:4px;display:flex;gap:6px;align-items:center}
  .assistant{background:#2b2a29;border:1px solid #3a3938;border-radius:8px 8px 8px 3px}
  .fileb{display:flex;gap:9px;align-items:center}
  .fileb .fi{font-size:19px;line-height:1}
  .fileb .fn{font-weight:600;word-break:break-all;font-size:13.5px}
  .fileb a.fn{color:#fff;text-decoration:underline}
  .fileb .fs{font-size:11px;opacity:.8;margin-top:2px}
  .tick{font-weight:700;letter-spacing:-1px}
  .tick.sent,.tick.ok{color:#5bc07a} .tick.fail{color:#f85149} .tick.pending{color:#8a8886}
  #keybar{display:none;gap:6px;padding:8px 14px;border-bottom:1px solid #3d3c3b;background:#232236;flex-wrap:wrap;align-items:center}
  #keybar.on{display:flex}
  #keybar button{background:#3d3c3b;padding:7px 13px;font-family:ui-monospace,Consolas,monospace;font-size:13px}
  #keybar .kh{font-size:11px;color:#a9a7a5;width:100%}
  .you{align-self:flex-end;background:#10a37f;color:#fff;border-radius:8px 8px 3px 8px}
  .you .ts{color:#d6f0e7}
  .sys{align-self:center;font-size:11.5px;color:#bdbdbd;background:#2a2928;border-radius:10px;padding:3px 12px;margin:2px 0}
  .empty{color:#8a8886;text-align:center;margin:auto;font-size:13px}
  #compose{display:flex;gap:8px;padding:10px;border-top:1px solid #3d3c3b;background:#201f1e;align-items:flex-end}
  #box{flex:1;min-height:46px;max-height:45vh;height:60px;resize:vertical;background:#292827;color:#e8e6e3;border:1px solid #3d3c3b;border-radius:8px;padding:9px;font:inherit;font-size:14px}
  .conn{font-size:11px;padding:3px 8px;border-radius:10px;background:#3d3c3b;white-space:nowrap}
  .conn.ok{background:#12331d;color:#3fb950} .conn.bad{background:#3a1414;color:#f85149}
  .helpcard{background:#252423;border:1px solid #3d3c3b;border-radius:12px;padding:22px;width:min(520px,94vw);max-height:88vh;overflow:auto;box-shadow:0 18px 50px rgba(0,0,0,.55)}
  .helpcard .hh{font-size:20px;font-weight:700;margin-bottom:10px}
  .helpcard .hlove{background:#143a30;border:1px solid #1d5c4a;color:#a8ecd2;border-radius:9px;padding:12px 14px;font-size:14px;line-height:1.5;text-align:center;margin-bottom:14px}
  .helpcard .hsub{color:#c8c6c4;font-size:13.5px;margin-bottom:12px;line-height:1.5}
  .helpcard ol.hsteps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
  .helpcard ol.hsteps li{font-size:13.5px;line-height:1.55;color:#e8e6e3}
  .helpcard ol.hsteps b{color:#8fe3c6}
  .helpcard .hnote{margin-top:14px;background:#3a2a12;border:1px solid #5c441d;color:#f5c518;border-radius:8px;padding:10px 12px;font-size:12.5px;line-height:1.45}
  #toasts{position:fixed;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;z-index:50}
  .toast{background:#2b2a29;border:1px solid #3d3c3b;border-left:3px solid #10a37f;border-radius:6px;padding:9px 13px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.4);max-width:300px;cursor:pointer}
  .danger{background:#a4262c!important}
  @media (max-width:720px){
    #app{grid-template-columns:1fr!important}
    #rail{position:fixed;top:0;bottom:0;left:0;width:min(86vw,330px);z-index:40;transform:translateX(-100%);transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.55)}
    #app:not(.rail-closed) #rail{transform:none}
    #backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:35}
    #app:not(.rail-closed) #backdrop{display:block}
    #mhead{flex-wrap:wrap;row-gap:6px}
    #mhead>div{flex:1 1 66% !important;min-width:66% !important}
    #msub{display:none}
    .b{max-width:92%}
    #box{font-size:16px}
    #filter{font-size:16px}
    button.ic{padding:8px 11px}
    #toasts{top:auto;bottom:82px;left:12px;right:12px;align-items:center}
    .toast{max-width:94vw}
  }

/* ---- live "what is ChatGPT doing" strip ---------------------------------------------------- */
/* Sits directly above the transcript so it reads as part of the conversation, not chrome. */
#liveState{display:none;padding:7px 14px;font-size:12.5px;color:#8fe3c6;background:#16241f;
           border-bottom:1px solid #24463a;line-height:1.4}
#liveState.on{display:block}
#liveState::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;
                   background:#10a37f;margin-right:7px;vertical-align:middle;animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35;transform:scale(.82)}50%{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){#liveState::before{animation:none;opacity:.9}}

/* ---- diagnostics panel --------------------------------------------------------------------- */
#diagWrap{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:60;
          align-items:center;justify-content:center;padding:16px}
#diagWrap.on{display:flex}
#diagBox{background:#2b2a28;border:1px solid #45433f;border-radius:10px;width:min(760px,100%);
         max-height:82vh;display:flex;flex-direction:column;overflow:hidden}
#diagBox .dhead{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid #45433f}
#diagBox .dnote{padding:8px 12px;font-size:11.5px;color:#a9a7a5;border-bottom:1px solid #3a3835;line-height:1.45}
#diagList{overflow-y:auto;padding:6px 0}
.drow{padding:7px 12px;border-bottom:1px solid #343230;font-size:12.5px;display:flex;
      flex-wrap:wrap;gap:8px;align-items:baseline}
.drow .dwho{min-width:88px;font-weight:600;color:#8fb8ff}
.drow.b .dwho{color:#e0b872}
.drow .dwhat{flex:1;min-width:150px}
.drow .dmeta{color:#8a8886;font-size:11.5px;white-space:nowrap}
.drow .ddet{flex:1 1 100%;color:#a9a7a5;font-size:11.5px;word-break:break-word;
            font-family:ui-monospace,SFMono-Regular,Consolas,monospace}