/* ═════════════════════════════════════════════════════════════════════════
   HELIX WEB v3 — warm paper & warm black, one orange (the Helix logo).
   Loaded after helix-web.css. Tokens first, then each surface.
   The ringed planet sits behind the chat at low opacity and never takes
   clicks; it dims further once a conversation is on screen.
   ═════════════════════════════════════════════════════════════════════════ */

:root{
  --font-display:'Newsreader','Playfair Display',Georgia,serif;
  --hx-orange:#f0692b;
  --r-card:16px;
}
[data-theme="light"]{
  --bg:#f6f1ea;--surface:#fffdf9;--surface2:#f1eae0;--surface3:#e9e0d3;
  --border:#e6ddd0;--border-strong:#d7cbba;
  --text:#1b1815;--text2:#5f564c;--text3:#8f8478;--text-inverse:#fffdf9;
  --accent:#e85d22;--accent-hover:#d4501a;--accent-soft:rgba(232,93,34,.09);--accent-text:#fff;
  --ink:#1b1815;--ink-text:#fffdf9;--ink-hover:#000;
  --code-bg:#f1eae0;--sidebar-bg:#f3ece2;--hover-bg:#ede4d8;--active-bg:#f6e3d6;
  --text-primary:#1b1815;--text-secondary:#5f564c;--text-muted:#8f8478;--border-subtle:#e6ddd0;
  --msg-user:#efe6da;
  --shadow-sm:0 1px 2px rgba(60,40,20,.05);--shadow-md:0 10px 30px rgba(60,40,20,.07);--shadow-lg:0 30px 70px rgba(60,40,20,.12);
  --hx-space-o:.30;--hx-card:#fffdf9cc;--hx-grain:.33;
}
[data-theme="dark"]{
  --bg:#0d0c0b;--surface:#141210;--surface2:#1a1714;--surface3:#221e1a;
  --border:#2a2520;--border-strong:#3a332c;
  --text:#f2ede6;--text2:#b4aca2;--text3:#7f776e;--text-inverse:#0d0c0b;
  --accent:#f0692b;--accent-hover:#ff7a3d;--accent-soft:rgba(240,105,43,.13);--accent-text:#fff;
  --ink:#f2ede6;--ink-text:#0d0c0b;--ink-hover:#fff;
  --code-bg:#100f0d;--sidebar-bg:#100f0d;--hover-bg:#1c1915;--active-bg:#2a1c13;
  --text-primary:#f2ede6;--text-secondary:#b4aca2;--text-muted:#7f776e;--border-subtle:#2a2520;
  --msg-user:#1f1b17;
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);--shadow-md:0 10px 30px rgba(0,0,0,.4);--shadow-lg:0 30px 70px rgba(0,0,0,.55);
  --hx-space-o:.44;--hx-card:#161310d9;--hx-grain:.5;
}
::selection{background:var(--accent-soft)}

/* ── the room: grain, a few stars, the planet ──────────────────────────── */
.app-container{background:var(--bg)}
.main-content{position:relative;isolation:isolate;background:var(--bg)!important}
.main-content::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--hx-grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .45 0 0 0 0 .4 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.hx-space{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hx-space::before{content:"";position:absolute;inset:0;opacity:.6;
  background-image:radial-gradient(1.5px 1.5px at 14% 18%,var(--text3) 50%,transparent 52%),radial-gradient(1.2px 1.2px at 31% 9%,var(--text3) 50%,transparent 52%),
    radial-gradient(1.8px 1.8px at 58% 6%,var(--accent) 50%,transparent 52%),radial-gradient(1.2px 1.2px at 9% 62%,var(--text3) 50%,transparent 52%),
    radial-gradient(1.6px 1.6px at 86% 58%,var(--accent) 50%,transparent 52%),radial-gradient(1.1px 1.1px at 70% 84%,var(--text3) 50%,transparent 52%),
    radial-gradient(1.3px 1.3px at 42% 30%,var(--text3) 50%,transparent 52%)}
.hx-space::after{content:"";position:absolute;top:-150px;right:-560px;width:1000px;aspect-ratio:1600/593;
  background:url("../assets/brand/saturn.webp") center/contain no-repeat;opacity:var(--hx-space-o);transform:rotate(-14deg);transform-origin:70% 40%;
  -webkit-mask-image:radial-gradient(closest-side,#000 64%,transparent 100%);mask-image:radial-gradient(closest-side,#000 64%,transparent 100%);
  transition:opacity .6s ease;animation:hxDrift 26s ease-in-out infinite}
@keyframes hxDrift{0%,100%{transform:rotate(-14deg) translateY(0)}50%{transform:rotate(-12deg) translateY(12px)}}
/* once a conversation is on screen the planet steps back */
.main-content:has(.message) .hx-space::after{opacity:calc(var(--hx-space-o) * .35)}
@media (max-width:900px){.hx-space::after{right:-420px;top:-40px;width:760px;opacity:calc(var(--hx-space-o) * .6)}}
@media (prefers-reduced-motion:reduce){.hx-space::after{animation:none}}
.chat-area,.input-area,.top-bar,.chats-view,.projects-view{position:relative;z-index:1}

/* ── sidebar ───────────────────────────────────────────────────────────── */
.sidebar{background:var(--sidebar-bg)!important;border-right:1px solid var(--border)!important}
.sidebar-header{padding-top:18px!important;padding-bottom:10px!important}
.sidebar-brand{gap:12px!important}
.brand-icon{width:38px!important;height:38px!important;background:none!important;box-shadow:none!important;border-radius:0!important}
.brand-name{font-family:'Inter',sans-serif!important;font-weight:500!important;letter-spacing:.32em!important;text-transform:uppercase;font-size:19px!important;color:var(--text)!important}
.new-chat-btn{background:var(--ink)!important;color:var(--ink-text)!important;border-radius:12px!important;height:46px!important;justify-content:flex-start!important;gap:12px!important;
  padding:0 14px!important;font-weight:500!important;font-size:15px!important;box-shadow:var(--shadow-sm)!important}
[data-theme="dark"] .new-chat-btn{background:#1d1915!important;color:var(--text)!important;border:1px solid rgba(240,105,43,.35)!important}
.new-chat-btn .material-symbols-rounded{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff!important;display:grid;place-items:center;font-size:18px!important;font-variation-settings:'FILL' 0,'wght' 600}
.new-chat-btn .material-symbols-rounded::before{content:""}
.sidebar-nav-link{border-radius:10px!important;color:var(--text)!important;font-size:14.5px!important;position:relative}
.sidebar-nav-link svg{color:var(--text2)}
.sidebar-nav-link:hover{background:var(--hover-bg)!important}
.sidebar-nav-link.active,.sidebar-nav-link[aria-current="page"]{background:var(--active-bg)!important}
.sidebar-nav-link.active::before{content:"";position:absolute;left:-12px;top:8px;bottom:8px;width:3px;border-radius:3px;background:var(--accent)}
.sidebar-nav-link.active svg{color:var(--accent)}
.sidebar-nav-shortcut{border:1px solid var(--border-strong)!important;background:var(--surface)!important;color:var(--text2)!important;border-radius:6px!important}
#sidebarHelixBtn .sidebar-nav-shortcut{border-color:rgba(232,93,34,.45)!important;color:var(--accent)!important;background:transparent!important}
.sidebar-section-label,.hx-tools-label{font-size:12px!important;letter-spacing:0!important;text-transform:none!important;color:var(--text3)!important;font-weight:500!important}
.hx-tools{display:flex;flex-direction:column;gap:2px;padding:12px 0 10px;margin:8px 0 4px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.hx-tools-label{padding:0 12px 6px}
.hx-tool{display:flex;align-items:center;gap:12px;width:100%;padding:8px 12px;border:0;background:none;border-radius:10px;color:var(--text);font:inherit;font-size:14.5px;cursor:pointer;text-align:left;transition:background .15s}
.hx-tool:hover{background:var(--hover-bg)}
.hx-tool svg{width:18px;height:18px;flex:none;color:var(--text2)}
.hx-tool:hover svg{color:var(--accent)}
.chat-list-item{border-radius:10px!important;color:var(--text)!important}
.chat-list-item:hover{background:var(--hover-bg)!important}
.chat-list-item.active{background:var(--active-bg)!important}
.chat-list-item .chat-icon{font-variation-settings:'FILL' 0!important;color:var(--text2)!important}
/* upgrade card */
.upgrade-btn{display:flex!important;align-items:center!important;gap:12px!important;width:100%;padding:14px!important;border-radius:14px!important;text-align:left!important;
  background:var(--surface)!important;border:1px solid var(--border)!important;color:var(--text)!important;box-shadow:var(--shadow-sm)!important;height:auto!important}
[data-theme="dark"] .upgrade-btn{background:linear-gradient(135deg,#1f1813,#15110e)!important;border-color:rgba(240,105,43,.35)!important}
.upgrade-btn:hover{border-color:var(--accent)!important}
.hx-up-crown{width:30px;height:30px;flex:none;color:var(--accent)}
.hx-up-text{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.hx-up-text b{font-weight:600;font-size:14.5px}
.hx-up-text small{font-size:12px;color:var(--text2);line-height:1.35}
.hx-up-go{width:32px;height:32px;flex:none;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}
.sidebar-user-badge{background:transparent!important;border:0!important;color:var(--text2)!important;padding:0!important;font-size:12.5px!important;text-transform:none!important;letter-spacing:0!important;font-weight:400!important}
.sidebar-user-photo{width:40px!important;height:40px!important;border-radius:50%!important;object-fit:cover}

/* ── top bar ───────────────────────────────────────────────────────────── */
.top-bar{background:transparent!important;border-bottom:0!important;backdrop-filter:none!important}
.top-bar-title{font-family:var(--font-display)!important;font-weight:400!important;font-size:18px!important;opacity:0}
.hx-theme-btn{width:38px;height:38px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text2);display:grid;place-items:center;cursor:pointer;transition:all .15s}
.hx-theme-btn:hover{background:var(--hover-bg);color:var(--text)}
.hx-theme-btn .sun{display:none}
[data-theme="dark"] .hx-theme-btn .sun{display:block}[data-theme="dark"] .hx-theme-btn .moon{display:none}

/* ── welcome ───────────────────────────────────────────────────────────── */
.welcome-screen{gap:0!important}
.welcome-orb{width:112px!important;height:112px!important;background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;margin-bottom:22px!important;
  filter:drop-shadow(0 22px 40px rgba(232,93,34,.32));animation:hxFloat 7s ease-in-out infinite}
@keyframes hxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.welcome-title{font-family:'Newsreader','Playfair Display',Georgia,serif!important;font-weight:400!important;letter-spacing:-.025em!important;
  font-size:clamp(40px,5.4vw,66px)!important;line-height:1.02!important;color:var(--text)!important;margin:0 0 14px!important}
.welcome-title em{font-style:normal!important;color:var(--accent)!important;-webkit-text-fill-color:var(--accent)!important;background:none!important}
.welcome-subtitle{font-size:16.5px!important;color:var(--text2)!important;letter-spacing:.01em;margin:0 0 40px!important}
.suggestion-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:16px!important;max-width:960px!important;width:100%}
.suggestion-card{position:relative;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:14px!important;min-height:150px;padding:20px 20px 18px!important;
  border-radius:16px!important;border:1px solid var(--border)!important;background:var(--hx-card)!important;backdrop-filter:blur(6px);box-shadow:var(--shadow-sm)!important;
  transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s!important}
.suggestion-card:hover{transform:translateY(-3px);border-color:rgba(232,93,34,.5)!important;box-shadow:0 18px 40px -22px rgba(232,93,34,.55)!important}
.card-icon-wrap{width:auto!important;height:auto!important;background:none!important;border:0!important;padding:0!important}
.card-icon,.card-icon svg{width:26px!important;height:26px!important;color:var(--text)!important}
.card-text{display:flex!important;flex-direction:column!important;gap:6px!important;padding-right:40px}
.card-title{font-size:16px!important;font-weight:500!important;color:var(--text)!important}
.card-desc{font-size:13.5px!important;color:var(--text2)!important;line-height:1.45!important}
.hx-go{position:absolute;right:16px;bottom:16px;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--accent);color:var(--accent);display:grid;place-items:center;transition:all .2s}
.suggestion-card:hover .hx-go{background:var(--accent);color:#fff}

/* ── composer ──────────────────────────────────────────────────────────── */
.input-area{background:transparent!important;border-top:0!important}
.input-wrapper{background:var(--hx-card)!important;border:1px solid var(--border)!important;border-radius:22px!important;box-shadow:var(--shadow-md)!important;backdrop-filter:blur(8px)}
.input-wrapper:focus-within{border-color:rgba(232,93,34,.55)!important;box-shadow:0 0 0 4px var(--accent-soft),var(--shadow-md)!important}
.message-input{font-size:16px!important;color:var(--text)!important}
.message-input::placeholder{color:var(--text3)!important}
.input-plus-btn{width:40px!important;height:40px!important;border-radius:50%!important;border:1px solid var(--border)!important;background:var(--surface)!important}
.model-selector{border:1px solid var(--border)!important;background:var(--surface)!important;border-radius:12px!important;height:40px!important;padding:0 12px!important}
.model-dot{background:var(--accent)!important}
.mic-btn{width:40px!important;height:40px!important;border-radius:50%!important;border:1px solid var(--border)!important;background:var(--surface)!important}
.send-btn{width:46px!important;height:46px!important;border-radius:50%!important;background:var(--accent)!important;color:#fff!important;border:0!important;
  box-shadow:0 10px 24px -10px rgba(232,93,34,.8)!important}
.send-btn:hover{background:var(--accent-hover)!important}
.send-btn:disabled,.send-btn[disabled]{opacity:.55}
.send-btn svg,.send-btn .material-symbols-rounded{color:#fff!important;fill:none}
.input-disclaimer{color:var(--text3)!important}

/* ── messages ──────────────────────────────────────────────────────────── */
.message.user .message-content{background:var(--msg-user)!important;border:1px solid var(--border)!important;border-radius:18px 18px 6px 18px!important}
.message-content a{color:var(--accent)!important}
.message-content code:not(pre code){background:var(--surface2)!important;color:var(--text)!important}

/* ── small screens ─────────────────────────────────────────────────────── */
@media (max-width:1100px){.suggestion-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:620px!important}}
@media (max-width:560px){
  .suggestion-grid{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .suggestion-card{min-height:122px;padding:14px!important}
  .card-text{padding-right:0}
  .card-desc{display:none!important}
  .hx-go{width:26px;height:26px;right:12px;top:12px;bottom:auto}
  .welcome-orb{width:84px!important;height:84px!important}
  .welcome-subtitle{margin-bottom:26px!important;font-size:15px!important}
}

/* ── fixes after the first look ────────────────────────────────────────── */
.chat-area,.chats-view,.projects-view{background:transparent!important}
.welcome-screen{position:relative;width:min(980px,calc(100vw - 340px))!important;max-width:none!important;margin-left:calc(50% - min(490px,50vw - 170px))!important;margin-right:0!important}
.welcome-screen .welcome-orb{width:112px!important;height:112px!important;min-width:0!important}
.welcome-screen::before,.welcome-screen::after,.welcome-orb::before,.welcome-orb::after{display:none!important}
.send-btn,.send-btn:disabled{background:var(--accent)!important;color:#fff!important}
.send-btn:disabled{opacity:.5!important;box-shadow:none!important}
.send-btn:not(:disabled):hover{background:var(--accent-hover)!important}
@media (max-width:900px){.welcome-screen{width:calc(100vw - 32px)!important;margin-left:calc(50% - 50vw + 16px)!important}}