Spaces:

broadfield
/

huggingbot-v2

Running

Add HF theme utility classes (:root token-based) replacing Tailwind orange
1776487 verified about 2 months ago
29 kB
/* ============================================================
   HuggingBot v2 — style.css  (HF Yellow theme · token-driven)
   ------------------------------------------------------------
   Every color lives in the :root block. Change tokens to
   re-theme the entire app. Includes a hardened desktop layout:
   the ScratchPad sidebar is a full-height right column and can
   NEVER drop below the input bar.
   ============================================================ */

:root{
  --hf-yellow:#FFD21E;          /* HF brand yellow (primary) */
  --hf-yellow-bright:#FEDC1F;   /* HF yellow-400 (hover/bright) */
  --hf-yellow-ink:#1a1200;      /* dark text on yellow */

  --bg-app:#030712;             /* page background */
  --bg-sb-l:#111827;            /* left sidebar */
  --bg-sb-r:#0f172a;            /* right sidebar (ScratchPad) */
  --bg-um:#FFD21E;              /* user bubble → HF yellow */
  --bg-ai:#1f2937;              /* assistant bubble */
  --bg-tool:#111827;            /* tool result cards */
  --bg-card:#0f172a;            /* streaming / tool-call cards */
  --bg-card-hd:#1e293b;         /* card headers */
  --bg-input:#111827;           /* inputs */
  --bg-hover:#374151;           /* generic hover surface */
  --bg-active:#3a2f00;          /* active pill (yellow-tinted) */

  --border:#374151;
  --border-strong:#4b5563;
  --border-focus:#FFD21E;
  --border-soft:#1e293b;
  --border-amber:#7a6200;       /* deep yellow border */

  --t-hi:#f3f4f6; --t-mid:#d1d5db; --t-dim:#9ca3af;
  --t-faint:#6b7280; --t-ghost:#4b5563; --t-yellow:#1a1200;

  --accent:#FFD21E;
  --accent-hover:#FEDC1F;
  --accent-soft:#3a2f00;
  --accent-border:#7a6200;
  --accent-text:#FFD21E;
  --accent-text-bright:#FEDC1F;
  --accent-tint:rgba(255,210,30,.14);

  --ok:#059669; --ok-hover:#047857; --ok-bg:#064e3b; --ok-bg2:#065f46; --ok-text:#6ee7b7;
  --danger:#ef4444; --danger-text:#f87171; --danger-bg:#7f1d1d;

  --r-sm:6px; --r-md:10px; --r-lg:12px; --r-xl:18px; --r-pill:9999px;
}

/* ================= messages ================= */
#messages{contain:content;isolation:isolate;overflow-anchor:auto}
#messages .assistant-msg,#messages .user-msg,.stream-body{contain:content;overflow-wrap:break-word;word-break:break-word;hyphens:auto}
#messages *{max-width:100%;box-sizing:border-box}
#messages img{max-width:100%;height:auto;border-radius:8px}
#messages table{max-width:100%;overflow-x:auto;display:block}
#messages .prose pre{max-width:100%}
#messages *[style*="position:fixed"],#messages *[style*="position: fixed"]{position:relative!important}
#messages *[style*="z-index"]{z-index:auto!important}
#messages *{scroll-behavior:auto!important}
#messages .prose pre,#messages .tc-body{overflow-x:auto;max-width:100%}
.stream-body{overflow-wrap:break-word;word-break:break-word}
.sp-code-content{contain:content}

/* ================= base ================= */
*{-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;padding:0}
body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg-app);color:var(--t-hi);-webkit-font-smoothing:antialiased;overflow-x:hidden}
input,textarea,select{font-size:16px!important}

/* ================= bubbles ================= */
.user-msg{background:var(--bg-um);border-radius:18px 18px 4px 18px;color:var(--t-yellow)}
.assistant-msg{background:var(--bg-ai);border-radius:18px 18px 18px 4px}
.tool-result-msg{background:var(--bg-tool);border:1px solid var(--border);border-radius:var(--r-lg);padding:10px 16px;font-size:.82rem;color:var(--t-mid);line-height:1.5}

/* ================= prose / code ================= */
.prose{max-width:none}
.prose pre{background:var(--bg-tool);padding:1rem;border-radius:8px;overflow-x:auto;border:1px solid var(--border);position:relative}
.prose pre:hover .copy-btn{opacity:1}
.prose code{font-size:.9em;background:var(--bg-hover);padding:2px 4px;border-radius:4px}
.prose pre code{background:transparent;padding:0}
.copy-btn{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .2s;background:var(--bg-hover);border:1px solid var(--border-strong);color:var(--t-dim);border-radius:var(--r-sm);padding:4px 8px;font-size:.7rem;cursor:pointer;z-index:5}
.copy-btn:hover{background:var(--border-strong);color:white}
.msg-ts{font-size:.65rem;opacity:.5;margin-top:4px;cursor:default}

/* ================= animations ================= */
.msg-appear{animation:fadeSlideIn .3s ease-out}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.8)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}

/* ================= chips / badges ================= */
.token-badge{background:var(--bg-hover);color:var(--t-dim);border-radius:var(--r-pill);padding:2px 8px;font-size:.65rem}
.kbd{display:inline-block;padding:2px 6px;font-size:.7rem;background:var(--bg-hover);border:1px solid var(--border-strong);border-radius:4px}

/* ================= streaming / step ================= */
.step-entry{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--accent-soft);border:1px solid var(--accent-border);border-radius:8px;font-size:.75rem;color:var(--accent-text-bright);animation:fadeSlideIn .3s ease-out;margin-bottom:2px}
.step-entry.completed{border-color:var(--accent);background:var(--accent-tint)}
.step-entry .step-icon{font-size:0.65rem;width:14px;text-align:center;color:var(--accent-text)}
.streaming-card{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--bg-card)}
.streaming-card .stream-header{display:flex;align-items:center;gap:8px;padding:6px 12px;background:var(--bg-card-hd);border-bottom:1px solid var(--border-soft)}
.streaming-card .stream-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-text-bright);animation:pulse-dot 1.2s ease-in-out infinite}
.streaming-card .stream-body{padding:10px 14px;font-size:.85rem;color:var(--t-hi);line-height:1.6;min-height:20px}

/* ================= tool calls ================= */
.tool-call-group{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--bg-card)}
.tc-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--bg-card-hd);cursor:pointer;user-select:none;transition:background .12s;border-bottom:1px solid var(--border-soft)}
.tc-header:hover{background:var(--bg-hover)}
.tc-name-badge{font-size:.65rem;background:var(--bg-hover);color:var(--accent-text);border-radius:4px;padding:2px 6px;white-space:nowrap}
.tc-status-badge{font-size:.6rem;background:var(--accent-soft);color:var(--accent-text);border-radius:var(--r-pill);padding:1px 8px}
.tc-arrow{font-size:.6rem;color:var(--t-faint);transition:transform .2s}
.tc-body{padding:10px 14px;font-size:.77rem;color:var(--t-mid);line-height:1.5;max-height:300px;overflow-y:auto;border-top:1px solid var(--border-soft);background:var(--bg-card)}
.tc-body pre{background:var(--bg-card);border:1px solid var(--border-soft);border-radius:var(--r-sm);padding:8px;font-size:.7rem;color:var(--t-hi);overflow-x:auto;margin:0}
.tc-body .tc-label{font-size:.7rem;color:var(--t-faint);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}

/* ================= downloads ================= */
.download-card{display:flex;align-items:center;gap:12px;background:var(--bg-tool);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 16px;margin:8px 0;animation:fadeSlideIn .3s ease-out;transition:all .15s}
.download-card:hover{border-color:var(--accent);background:#1a2030}
.download-icon{width:40px;height:40px;border-radius:var(--r-md);background:var(--accent-soft);border:1px solid var(--accent-border);display:flex;align-items:center;justify-content:center;color:var(--accent-text);font-size:1.1rem;flex-shrink:0}
.download-info{flex:1;min-width:0}
.download-filename{font-size:.85rem;font-weight:500;color:var(--t-hi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.download-desc{font-size:.7rem;color:var(--t-dim);margin-top:2px}
.download-bt{display:inline-flex;align-items:center;gap:6px;background:var(--ok);color:white;border:none;border-radius:8px;padding:8px 14px;font-size:.75rem;font-weight:500;cursor:pointer;text-decoration:none;transition:all .15s;flex-shrink:0}
.download-bt:hover{background:var(--ok-hover);transform:scale(1.04)}
.download-bt:active{transform:scale(.97)}
.downloads-header{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent-text);margin:12px 0 4px 0;display:flex;align-items:center;gap:6px;font-weight:500}

/* ================= model search ================= */
.model-search-wrap{position:relative}
.model-dropdown{position:absolute;bottom:100%;left:0;right:0;background:var(--bg-ai);border:1px solid var(--border-strong);border-radius:var(--r-lg);max-height:240px;overflow-y:auto;z-index:100;display:none;margin-bottom:4px}
.model-dropdown.show{display:block}
.model-dropdown-item{padding:8px 14px;font-size:.8rem;cursor:pointer;border-bottom:1px solid var(--border);transition:background .1s}
.model-dropdown-item:last-child{border:none}
.model-dropdown-item:hover,.model-dropdown-item.active{background:var(--bg-hover);color:var(--accent-text)}
.model-dropdown-item .model-provider{font-size:.65rem;color:var(--t-faint)}
.model-dropdown-item .model-context{font-size:.65rem;color:var(--t-dim);float:right}

/* ================= scroll fab ================= */
.scroll-fab{position:absolute;bottom:100px;right:16px;width:44px;height:44px;border-radius:50%;background:var(--accent-border);border:1px solid var(--accent);color:var(--accent-text);display:none;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;z-index:10;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.scroll-fab:hover,.scroll-fab:active{background:var(--accent-hover);color:var(--t-yellow);transform:scale(1.1)}
.scroll-fab.show{display:flex}

/* ================= empty state ================= */
.empty-state .suggestion{background:var(--bg-ai);border:1px solid var(--border);border-radius:var(--r-lg);padding:10px 16px;cursor:pointer;transition:all .15s;font-size:.85rem}
.empty-state .suggestion:hover,.empty-state .suggestion:active{background:var(--bg-hover);border-color:var(--accent);color:var(--accent-text)}

/* ================= cost badge ================= */
.cost-badge{font-size:.65rem;color:var(--t-dim);background:var(--bg-hover);border-radius:4px;padding:1px 6px}

/* ================= module toggles ================= */
.module-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:var(--bg-tool);border:1px solid var(--border);margin-bottom:4px;transition:all .15s}
.module-item:hover{border-color:var(--border-strong)}
.module-item .mod-name{flex:1;font-size:.75rem;color:var(--t-mid)}
.module-item .mod-status{font-size:.55rem;text-transform:uppercase;letter-spacing:.05em}
.module-item .mod-toggle{width:28px;height:16px;border-radius:8px;background:var(--bg-hover);cursor:pointer;position:relative;transition:background .2s;flex-shrink:0}
.module-item .mod-toggle.on{background:var(--accent)}
.module-item .mod-toggle::after{content:"";position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:white;transition:transform .2s}
.module-item .mod-toggle.on::after{transform:translateX(12px)}
.module-accordion-header{cursor:pointer;user-select:none}
.module-accordion-header:hover{color:var(--accent-text)}
.accordion-arrow{transition:transform .3s ease;display:inline-block}
.accordion-arrow.open{transform:rotate(180deg)}
.module-accordion-body{overflow:hidden;transition:max-height .35s ease,opacity .25s ease;max-height:0;opacity:0}
.module-accordion-body.open{opacity:1;max-height:20vh;overflow-y:auto}

/* ================= modal ================= */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.6);z-index:200;display:none;align-items:center;justify-content:center;padding:16px}
.modal-overlay.show{display:flex}
.modal-box{background:var(--bg-ai);border:1px solid var(--border);border-radius:20px;padding:24px;width:420px;max-width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 25px 50px rgba(0,0,0,.5)}
.modal-box h2{font-size:1.1rem;font-weight:600;margin-bottom:16px;color:var(--t-hi)}
.modal-close{float:right;cursor:pointer;color:var(--t-dim);font-size:1.2rem}
.modal-close:hover{color:var(--t-hi)}
.modal-box label{display:block;font-size:.85rem;margin-bottom:4px;margin-top:12px;color:var(--t-mid)}
.modal-box input,.modal-box textarea,.modal-box select{width:100%;background:var(--bg-input);border:1px solid var(--border-strong);border-radius:var(--r-md);padding:10px 14px;font-size:16px;color:var(--t-hi);outline:none}
.modal-box input:focus,.modal-box textarea:focus,.modal-box select:focus{border-color:var(--accent)}
.modal-box textarea{resize:vertical;font-family:inherit}
.modal-box .btn{width:100%;background:var(--accent);border:none;border-radius:var(--r-md);padding:10px;font-size:.85rem;color:var(--t-yellow);cursor:pointer;margin-top:12px;font-weight:500}
.modal-box .btn:hover{background:var(--accent-hover)}
.modal-box .btn-secondary{background:var(--bg-hover);color:var(--t-hi)}
.modal-box .btn-secondary:hover{background:var(--border-strong)}
.settings-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.settings-row input[type="range"]{flex:1;accent-color:var(--accent);height:6px;border-radius:3px;background:var(--bg-hover);max-width:200px}
.settings-row .range-value{font-size:.85rem;color:var(--accent-text);min-width:30px;text-align:center;font-weight:500}
.settings-row .checkbox-label{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--t-dim);cursor:pointer}
.settings-row .checkbox-label input{width:auto;accent-color:var(--accent)}

/* ================= left sidebar ================= */
.left-sidebar{display:flex;flex-direction:column;flex-shrink:0;width:20rem;background:var(--bg-sb-l);border-right:1px solid var(--border)}
.left-sidebar-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:49;display:none}
.left-sidebar-overlay.show{display:block}
.hamburger-btn{display:none;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--r-md);background:var(--bg-ai);border:1px solid var(--border);color:var(--t-mid);cursor:pointer;transition:background .15s;flex-shrink:0}
.hamburger-btn:hover,.hamburger-btn:active{background:var(--bg-hover);color:var(--accent-text)}

/* ================= right sidebar (ScratchPad) ================= */
#rightSidebar{display:flex;flex-direction:column;flex-shrink:0;width:22rem;background:var(--bg-sb-r);border-left:1px solid var(--border);transition:width .25s ease,min-width .25s ease;overflow:hidden;position:relative}
#rightSidebar.collapsed{width:0!important;min-width:0!important;border-left:none}
#rightSidebar .rs-header{display:flex;align-items:center;gap:6px;padding:8px 12px;background:var(--bg-card-hd);border-bottom:1px solid var(--border-soft);flex-shrink:0;min-height:40px}
#rightSidebar .rs-header .rs-title{font-size:.75rem;color:var(--t-dim);font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:6px}
#rightSidebar .rs-header .rs-title i{color:var(--accent-text)}
#rightSidebar .rs-header .rs-spacer{flex:1}
#rightSidebar .rs-header .rs-btn{font-size:.6rem;background:var(--bg-hover);border:none;color:var(--t-dim);padding:3px 8px;border-radius:5px;cursor:pointer;transition:all .12s;white-space:nowrap;display:flex;align-items:center;gap:4px}
#rightSidebar .rs-header .rs-btn:hover{background:var(--border-strong);color:var(--t-hi)}
#rightSidebar .rs-header .rs-btn.active{background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--accent-border)}
#rightSidebar .rs-header .rs-close-btn{font-size:.7rem;color:var(--t-faint);cursor:pointer;padding:2px 5px;border-radius:4px;transition:all .12s}
#rightSidebar .rs-header .rs-close-btn:hover{color:var(--danger);background:var(--bg-hover)}
#rightSidebar .rs-tab-bar{display:flex;align-items:center;gap:2px;padding:4px 8px;background:var(--bg-sb-r);border-bottom:1px solid var(--border-soft);flex-shrink:0;overflow-x:auto;min-height:32px}
#rightSidebar .rs-tab-bar::-webkit-scrollbar{height:3px}
#rightSidebar .rs-tab-bar::-webkit-scrollbar-thumb{background:var(--bg-hover);border-radius:3px}
#rightSidebar .rs-tab{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px 6px 0 0;font-size:.68rem;color:var(--t-dim);cursor:pointer;transition:all .12s;white-space:nowrap;border:1px solid transparent;border-bottom:none;background:transparent;flex-shrink:0;max-width:160px}
#rightSidebar .rs-tab:hover{color:var(--t-mid);background:var(--bg-card-hd)}
#rightSidebar .rs-tab.active{color:var(--accent-text);background:var(--bg-sb-r);border-color:var(--border);border-bottom:1px solid var(--bg-sb-r);margin-bottom:-1px}
#rightSidebar .rs-tab .rs-tab-icon{font-size:.55rem;color:var(--accent-text);flex-shrink:0}
#rightSidebar .rs-tab .rs-tab-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#rightSidebar .rs-tab .rs-tab-ver{font-size:.5rem;background:var(--bg-hover);color:var(--accent-text);border-radius:3px;padding:1px 4px;margin-left:2px;cursor:pointer}
#rightSidebar .rs-tab .rs-tab-ver:hover{background:var(--border-strong)}
#rightSidebar .rs-tab .rs-tab-close{font-size:.45rem;padding:1px 2px;border-radius:2px;margin-left:2px;color:var(--t-ghost);flex-shrink:0}
#rightSidebar .rs-tab .rs-tab-close:hover{color:var(--danger-text);background:var(--bg-hover)}
#rightSidebar .rs-tab-bar .rs-add-tab{font-size:.6rem;padding:3px 6px;border-radius:4px;cursor:pointer;color:var(--t-ghost);transition:all .12s;flex-shrink:0}
#rightSidebar .rs-tab-bar .rs-add-tab:hover{color:var(--accent-text);background:var(--bg-card-hd)}
#rightSidebar .rs-body{flex:1;overflow:hidden;position:relative;min-height:0;display:flex;flex-direction:column}
#rightSidebar .rs-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--t-ghost);font-size:.72rem;gap:8px;padding:20px;text-align:center}
#rightSidebar .rs-empty i{font-size:1.5rem;color:var(--bg-hover)}
#rightSidebar .rs-empty .rs-empty-btn{font-size:.6rem;background:var(--bg-hover);border:none;color:var(--t-dim);padding:5px 12px;border-radius:var(--r-sm);cursor:pointer;margin-top:4px;transition:all .12s}
#rightSidebar .rs-empty .rs-empty-btn:hover{background:var(--border-strong);color:var(--t-hi)}
#rightSidebar .rs-preview{display:none;height:100%;overflow:hidden;background:var(--bg-sb-r);flex-direction:column}
#rightSidebar .rs-preview.active{display:flex}
#rightSidebar .rs-preview-header{display:flex;align-items:center;justify-content:space-between;padding:4px 12px;background:var(--bg-card-hd);border-bottom:1px solid var(--border-soft);flex-shrink:0;min-height:32px}
#rightSidebar .rs-preview-header .rs-file-info{font-size:.6rem;color:var(--t-dim);display:flex;align-items:center;gap:8px}
#rightSidebar .rs-preview-header .rs-file-info .rs-line-count{color:var(--t-ghost)}
#rightSidebar .rs-preview-header .rs-actions{display:flex;gap:3px}
#rightSidebar .rs-preview-header .rs-actions button{background:var(--bg-hover);border:none;color:var(--t-dim);padding:2px 6px;border-radius:3px;font-size:.55rem;cursor:pointer;transition:all .1s}
#rightSidebar .rs-preview-header .rs-actions button:hover{background:var(--border-strong);color:var(--t-hi)}
#rightSidebar .rs-preview-header .rs-actions button.rs-del{color:var(--danger-text)}
#rightSidebar .rs-preview-header .rs-actions button.rs-del:hover{background:var(--danger-bg);color:var(--danger-text)}
#rightSidebar .rs-preview-body{flex:1;overflow:auto;position:relative}
#rightSidebar .rs-preview-body pre{display:flex;margin:0;padding:0;font-size:.7rem;line-height:1.5;min-height:100%}
#rightSidebar .rs-preview-body pre .rs-line-nums{display:flex;flex-direction:column;padding:6px 6px 6px 10px;background:var(--bg-sb-r);color:var(--t-ghost);text-align:right;user-select:none;border-right:1px solid var(--border-soft);min-width:36px;flex-shrink:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.5;font-size:.7rem}
#rightSidebar .rs-preview-body pre .rs-line-nums span{display:block}
#rightSidebar .rs-preview-body pre .rs-code-content{padding:6px 12px;overflow-x:auto;white-space:pre;tab-size:2;color:var(--t-hi);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.5;font-size:.7rem;flex:1}
.rs-version-dropdown,.rs-version-dropown{display:none;position:absolute;top:100%;left:0;background:var(--bg-ai);border:1px solid var(--border);border-radius:8px;min-width:200px;max-height:150px;overflow-y:auto;z-index:100;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.rs-version-dropdown.show,.rs-version-dropown.show{display:block}
.rs-version-item{padding:5px 10px;font-size:.6rem;cursor:pointer;border-bottom:1px solid var(--border);color:var(--t-mid);transition:background .1s}
.rs-version-item:hover{background:var(--bg-hover);color:var(--accent-text)}
.rs-version-item:last-child{border:none}
#rightSidebarToggle{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:6px;cursor:pointer;font-size:.65rem;color:var(--t-dim);transition:all .12s;background:var(--bg-ai);border:1px solid var(--border)}
#rightSidebarToggle:hover{background:var(--bg-hover);color:var(--accent-text);border-color:var(--border-strong)}
#rightSidebarToggle .rs-toggle-icon{transition:transform .25s ease;font-size:.5rem}
#rightSidebarToggle.open .rs-toggle-icon{transform:rotate(180deg)}

/* ================= layout ================= */
.app-layout{display:flex;height:100vh;width:100vw;overflow:hidden}
.main-zone{flex:1;display:flex;flex-direction:column;min-width:0;position:relative}

@media(max-width:1023px){
#rightSidebar{position:fixed;top:0;right:0;height:100vh;z-index:50;border-left:1px solid var(--border);transform:translateX(100%);transition:transform .3s ease;width:85vw;max-width:400px}
#rightSidebar.open{transform:translateX(0)}
#rightSidebar.collapsed{transform:translateX(100%);width:85vw!important}
.rs-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.5);z-index:49;display:none}
.rs-backdrop.show{display:block}
}

@media(max-width:767px){
.left-sidebar{position:fixed;top:0;left:0;height:100vh;z-index:50;border-right:1px solid var(--border);transform:translateX(-100%);transition:transform .3s ease}
.left-sidebar.open{transform:translateX(0)}.left-sidebar-overlay.show{display:block}.hamburger-btn{display:flex}.main-chat{margin-left:0}
.messages{padding:12px}.input-area{padding:8px 12px}.user-msg,.assistant-msg{max-width:92%!important;font-size:.92rem}
.user-msg,.assistant-msg{padding:10px 16px!important}.empty-state-suggestions{max-width:100%!important}.header-title{font-size:1.1rem}.header{padding:0 12px}
.scroll-fab{right:12px;bottom:80px;width:40px;height:40px}.modal-box{padding:20px;border-radius:16px;margin:8px}
.modal-box input,.modal-box textarea{font-size:16px}.msg-ts{font-size:.6rem}.step-entry{font-size:.7rem;padding:5px 10px}
.tc-header{padding:6px 10px}.tc-body{padding:8px 10px;font-size:.72rem}
.model-dropdown-item{font-size:.75rem;padding:10px 12px}.model-dropdown{max-height:200px}
.left-sidebar-header,.left-sidebar-actions{padding:12px}.left-sidebar-history,.left-sidebar-footer{padding:0 8px}.conv-item{padding:10px 12px!important}
textarea#userInput{font-size:16px;padding:12px 16px;min-height:48px}.send-btn,.cancel-btn{width:48px;height:48px;min-width:48px}.empty-state{padding:16px}
.empty-state h2{font-size:1rem}.empty-state p{font-size:.8rem}.cost-badge,.token-badge{font-size:.6rem}.kbd{font-size:.65rem;padding:2px 4px}.module-item .mod-name{font-size:.7rem}
}
@media(max-width:400px){
.user-msg,.assistant-msg{max-width:96%!important;font-size:.88rem}.user-msg,.assistant-msg{padding:8px 12px!important}
.messages{padding:8px}.input-area{padding:6px 8px}textarea#userInput{padding:10px 12px}
}
@media screen and (max-height:500px){.left-sidebar{overflow-y:auto}.modal-box{max-height:90vh}}

/* ================= HF Yellow — baked overrides ================= */
.user-msg{background:var(--bg-um)!important;color:var(--t-yellow)!important;border-radius:18px 18px 4px 18px}
.step-entry{background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent-text-bright)}
.step-entry.completed{border-color:var(--accent);background:var(--accent-tint)}
.streaming-card .stream-dot{background:var(--accent-text-bright)}
.tc-name-badge{background:var(--bg-hover);color:var(--accent-text)}
.tc-status-badge{background:var(--accent-soft);color:var(--accent-text)}
.download-card:hover{border-color:var(--accent)}
.download-icon{background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent-text)}
.download-btn,.download-bt{background:var(--accent)!important;color:var(--t-yellow)!important}
.download-btn:hover,.download-bt:hover{background:var(--accent-hover)!important}
.downloads-header{color:var(--accent-text)}
.model-dropdown-item:hover,.model-dropdown-item.active{color:var(--accent-text)}
.scroll-fab{background:var(--accent-border);border:1px solid var(--accent);color:var(--accent-text)}
.scroll-fab:hover,.scroll-fab:active{background:var(--accent-hover);color:var(--t-yellow)}
.empty-state .suggestion:hover,.empty-state .suggestion:active{border-color:var(--accent);color:var(--accent-text)}
.module-item .mod-toggle.on{background:var(--accent)}
.module-accordion-header:hover{color:var(--accent-text)}
.modal-box input:focus,.modal-box textarea:focus,.modal-box select:focus{border-color:var(--accent)}
.modal-box .btn{background:var(--accent)!important;color:var(--t-yellow)!important}
.modal-box .btn:hover{background:var(--accent-hover)!important}
.settings-row input[type="range"]{accent-color:var(--accent)}
.settings-row .range-value{color:var(--accent-text)}
.settings-row .checkbox-label input{accent-color:var(--accent)}
.hamburger-btn:hover,.hamburger-btn:active{color:var(--accent-text)}
#rightSidebar .rs-header .rs-title i{color:var(--accent-text)}
#rightSidebar .rs-header .rs-btn.active{background:var(--accent-soft);color:var(--accent-text);border:1px solid var(--accent-border)}
#rightSidebar .rs-tab.active{color:var(--accent-text)}
#rightSidebar .rs-tab .rs-tab-icon{color:var(--accent-text)}
#rightSidebar .rs-tab .rs-tab-ver{background:var(--bg-hover);color:var(--accent-text)}
#rightSidebar .rs-tab-bar .rs-add-tab:hover{color:var(--accent-text);background:var(--bg-card-hd)}
.rs-version-item:hover{color:var(--accent-text)}
#rightSidebarToggle:hover{color:var(--accent-text);border-color:var(--accent)}

/* ================= HF theme utility classes (replace Tailwind orange) ================= */
.hf-text{color:var(--accent-text)}
.hf-text-bright{color:var(--accent-text-bright)}
.hf-bg{background:var(--accent)}
.hf-bg-hover{background:var(--accent-hover)}
.hf-focus-border:focus{border-color:var(--accent);outline:none}
.hf-accent{accent-color:var(--accent)}
.hf-hover-text{transition:color .15s}
.hf-hover-text:hover{color:var(--accent-text)}
.hf-btn-primary{background:var(--accent);color:var(--t-yellow);transition:background .15s}
.hf-btn-primary:hover{background:var(--accent-hover)}

/* ===== LAYOUT HARDENING — sidebar must NEVER drop below input =====
   #rightSidebar lives INSIDE .main-zone (after .input-area) in the
   flex column. On desktop we turn .main-zone into a CSS grid with a
   dedicated full-height "rs" column spanning all three rows. */
html,body{height:100%;margin:0;padding:0}
.app-layout{flex-wrap:nowrap;align-items:stretch;justify-content:flex-start}
@media(min-width:1024px){
.app-layout{width:100vw;max-width:100%;height:100vh;height:100dvh;min-height:0;overflow:hidden}
#leftSidebar{position:relative;flex:0 0 20rem;width:20rem;max-width:20rem;min-width:20rem;overflow-y:auto}
.main-zone{position:relative;flex:1 1 0%;min-width:0;width:auto;max-width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"hdr rs" "msg rs" "inp rs";overflow:hidden}
.main-zone .header{grid-area:hdr;flex:0 0 auto}
.main-zone #messages{grid-area:msg;min-height:0;height:auto;overflow-y:auto}
.main-zone .input-area{grid-area:inp;flex:0 0 auto}
.main-zone #scrollFab{position:absolute}
.main-zone #rightSidebar{grid-area:rs;position:relative;align-self:stretch;justify-self:end;width:22rem;height:auto;min-height:0;max-height:100%;overflow:hidden;transition:width .25s ease,min-width .25s ease}
.main-zone #rightSidebar.collapsed{width:0!important;min-width:0!important;max-width:0!important;border-left:none!important;overflow:hidden}
.main-zone #rightSidebar:not(.collapsed){border-left:1px solid var(--border)}
}