:root {
  --paper: #f3eee7;
  --paper-deep: #e9e1d6;
  --ink: #272622;
  --muted: #77716a;
  --line: rgba(47, 43, 38, .12);
  --card: rgba(255,255,255,.48);
  --accent: #e3664f;
  --accent-soft: #f3b39f;
  --shadow: 0 18px 60px rgba(68, 51, 35, .10);
  --sidebar-width: 278px;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "DM Sans", sans-serif;
  color: var(--ink);
  background: var(--paper);
  overflow: hidden;
}
button, textarea, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }
.auth-screen { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 24px; background: rgba(2,8,5,.72); backdrop-filter: blur(8px); }
.auth-card { width: min(100%, 430px); border: 1px solid rgba(56,255,109,.28); border-radius: 4px; padding: 36px; background: rgba(3,12,7,.94); box-shadow: 0 24px 90px rgba(0,0,0,.58), 0 0 45px rgba(39,239,97,.08); color: #e4ffe9; position: relative; overflow: hidden; }
.auth-card:before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent,rgba(39,239,97,.025),transparent); }
.auth-brand { display:flex; align-items:center; gap:10px; margin-bottom:35px; color:#54ff80; font:700 17px/1 "JetBrains Mono",monospace; letter-spacing:.16em; }
.auth-card .brand-mark { transform: scale(.78); }
.auth-card .overline { color:#54ff80; margin-bottom:12px; }
.auth-card h2 { margin:0; color:#e9ffed; font:500 36px/1.05 "Space Grotesk",sans-serif; letter-spacing:-.04em; }
.auth-card h2 em { color:#54ff80; font-style:normal; }
.auth-copy { margin:13px 0 27px; color:#7ba786; font:13px/1.6 "JetBrains Mono",monospace; }
.auth-tabs { display:flex; border-bottom:1px solid rgba(56,255,109,.18); margin-bottom:21px; }
.auth-tab { flex:1; border:0; border-bottom:2px solid transparent; padding:10px; background:transparent; color:#66866d; cursor:pointer; font:600 11px "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.1em; }
.auth-tab.active { color:#54ff80; border-color:#54ff80; }
.auth-form { display:grid; gap:15px; }
.auth-form label { display:grid; gap:7px; color:#7ba786; font:600 10px "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.09em; }
.auth-form input { width:100%; border:1px solid rgba(56,255,109,.19); border-radius:2px; outline:0; padding:12px 13px; color:#e8ffec; background:#06120a; font:13px "JetBrains Mono",monospace; }
.auth-form input:focus { border-color:#41f871; box-shadow:0 0 0 3px rgba(39,239,97,.08); }
.auth-error { min-height:18px; margin:-2px 0 -3px; color:#ff7c79; font:11px/1.5 "JetBrains Mono",monospace; }
.auth-submit { border:1px solid #43fb74; padding:13px 15px; color:#021006; background:#43fb74; cursor:pointer; display:flex; justify-content:space-between; font:700 12px "JetBrains Mono",monospace; text-transform:uppercase; letter-spacing:.08em; }
.auth-submit:hover { background:#72ff96; box-shadow:0 0 25px rgba(39,239,97,.2); }
.auth-submit:disabled { opacity:.5; cursor:wait; }
.noise {
  pointer-events: none; position: fixed; inset: 0; z-index: 20; opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.app-shell { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-width); flex: 0 0 var(--sidebar-width); padding: 24px 18px 18px;
  border-right: 1px solid var(--line); background: rgba(237,230,220,.74); backdrop-filter: blur(20px);
  display: flex; flex-direction: column; position: relative; z-index: 10;
}
.brand-row { display: flex; align-items: center; justify-content: space-between; padding: 1px 6px 28px; }
.brand { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 11px; font: 500 25px/1 "Newsreader", serif; letter-spacing: -.02em; }
.brand-mark { width: 29px; height: 29px; display: grid; place-items: center; position: relative; }
.brand-mark i { display: block; position: absolute; width: 8px; height: 25px; border-radius: 999px; background: var(--accent); transform-origin: center; }
.brand-mark i:nth-child(1) { transform: rotate(0deg); opacity: .95; }
.brand-mark i:nth-child(2) { transform: rotate(60deg); opacity: .65; }
.brand-mark i:nth-child(3) { transform: rotate(120deg); opacity: .4; }
.new-thread {
  border: 1px solid var(--line); background: rgba(255,255,255,.4); border-radius: 12px; padding: 12px 12px 12px 15px;
  display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: .2s ease; font-size: 13px; font-weight: 600;
}
.new-thread:hover { background: rgba(255,255,255,.8); transform: translateY(-1px); }
kbd { border: 1px solid var(--line); border-radius: 6px; padding: 3px 6px; color: var(--muted); font: 10px "DM Sans"; box-shadow: 0 1px rgba(255,255,255,.8) inset; }
.thread-nav { margin-top: 27px; overflow: auto; }
.eyebrow { margin: 0 10px 9px; color: #989087; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.section-gap { margin-top: 27px; }
.thread { width: 100%; border: 0; background: transparent; padding: 10px 11px; border-radius: 9px; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; color: #6e6963; font-size: 12px; white-space: nowrap; overflow: hidden; }
.thread span:last-child { overflow: hidden; text-overflow: ellipsis; }
.thread:hover { background: rgba(255,255,255,.35); color: var(--ink); }
.thread.active { background: rgba(255,255,255,.62); color: var(--ink); font-weight: 500; box-shadow: 0 1px 0 rgba(255,255,255,.7) inset; }
.thread-dot { width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 50%; flex: 0 0 auto; }
.thread.active .thread-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px rgba(227,102,79,.12); }
.sidebar-bottom { margin-top: auto; }
.utility { width: 100%; border: 0; background: transparent; display: flex; gap: 10px; align-items: center; padding: 11px; color: #6d6760; cursor: pointer; font-size: 12px; }
.utility svg, .icon-button svg, .round-button svg, .send-button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.profile { border-top: 1px solid var(--line); margin-top: 8px; padding: 17px 7px 2px; display: flex; align-items: center; gap: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#dc826d,#9d5c6e); font-size: 10px; }
.profile div:nth-child(2) { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.profile small { color: #908980; font-size: 9px; }
.more { margin-left: auto; border: 0; background: none; color: #8f8880; cursor: pointer; letter-spacing: 1px; }
.main { min-width: 0; flex: 1; height: 100vh; position: relative; display: flex; flex-direction: column; background: radial-gradient(circle at 52% 32%, rgba(255,255,255,.64), transparent 38%), var(--paper); }
.topbar { height: 70px; flex: 0 0 70px; display: flex; align-items: center; padding: 0 28px; border-bottom: 1px solid transparent; }
.model-picker { margin: 0 auto; transform: translateX(20px); border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.33); padding: 8px 12px; display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 11px; font-weight: 600; }
.model-picker svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.status-dot { width: 6px; height: 6px; background: #86a879; border-radius: 50%; box-shadow: 0 0 0 3px rgba(134,168,121,.12); }
.status-dot.offline { background: #d17a67; box-shadow: 0 0 0 3px rgba(209,122,103,.14); }
.top-actions { margin-left: auto; }
.icon-button { border: 0; background: transparent; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: #665f58; }
.icon-button:hover { background: rgba(255,255,255,.5); }
.menu-button { visibility: hidden; }
.mobile-only { display: none; }
.chat { flex: 1; overflow-y: auto; padding: 0 32px 208px; scroll-behavior: smooth; }
.welcome { max-width: 780px; min-height: calc(100vh - 245px); margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 0; }
.orb-wrap { width: 92px; height: 92px; position: relative; display: grid; place-items: center; margin-bottom: 22px; }
.orb { width: 58px; height: 58px; border-radius: 50%; background: radial-gradient(circle at 34% 25%, #ffd9c4 0 9%, #ef967a 32%, #c04f5c 68%, #783e61 100%); box-shadow: 0 12px 35px rgba(181,73,80,.26), inset -9px -10px 16px rgba(87,42,78,.22); animation: breathe 4.5s ease-in-out infinite; }
.orb span { display: block; width: 34px; height: 12px; margin: 8px 0 0 10px; border-radius: 50%; transform: rotate(-25deg); background: rgba(255,244,227,.38); filter: blur(4px); }
.orbit { position: absolute; inset: 8px; border: 1px solid rgba(204,107,89,.22); border-radius: 50%; transform: rotate(22deg) scaleY(.42); }
.orbit-one:after { content:""; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); position:absolute; right: 7px; top: 10px; }
.orbit-two { inset: 0; transform: rotate(-30deg) scaleY(.55); opacity: .5; }
@keyframes breathe { 50% { transform: translateY(-4px) scale(1.035); box-shadow: 0 18px 46px rgba(181,73,80,.32), inset -9px -10px 16px rgba(87,42,78,.22); } }
.overline { margin: 0 0 15px; font-size: 9px; letter-spacing: .2em; color: #9c7469; font-weight: 600; }
h1 { font: 400 clamp(48px,5.4vw,72px)/.91 "Newsreader", serif; letter-spacing: -.045em; text-align: center; margin: 0; }
h1 em { color: var(--accent); font-weight: 400; }
.welcome-copy { max-width: 410px; margin: 24px auto 28px; text-align: center; font: 400 14px/1.6 "Newsreader", serif; color: #777069; }
.suggestions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 690px; }
.suggestion { border: 1px solid var(--line); background: var(--card); min-height: 76px; border-radius: 14px; padding: 13px; display: flex; gap: 11px; align-items: center; cursor: pointer; text-align: left; box-shadow: 0 7px 20px rgba(72,54,40,.025); transition: .2s ease; }
.suggestion:hover { transform: translateY(-3px); border-color: rgba(227,102,79,.28); background: rgba(255,255,255,.7); box-shadow: 0 12px 30px rgba(72,54,40,.075); }
.suggestion-icon { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; font-size: 13px; }
.coral { background: #f8d7cc; color: #bf5d4e; }.lilac { background: #e5d9ea; color: #816184; }.mint { background: #d8e8dc; color: #57775f; }
.suggestion > span:nth-child(2) { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.suggestion strong { font-size: 11px; }.suggestion small { color: #8a837c; font-size: 9px; white-space: nowrap; }
.suggestion b { margin-left: auto; color: #aaa098; font-size: 12px; font-weight: 400; }
.messages { max-width: 760px; margin: 30px auto 0; display: none; }
.messages.visible { display: block; }
.message { margin: 0 0 34px; animation: rise .35s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(8px); } }
.message.user { display: flex; justify-content: flex-end; }
.message.user .bubble { max-width: 76%; background: #ded2c4; border-radius: 17px 17px 4px 17px; padding: 13px 16px; font-size: 13px; line-height: 1.55; }
.message.user.has-images .bubble { background: transparent; padding: 0; max-width: min(76%, 560px); }
.message-text { background: #ded2c4; border-radius: 17px 17px 4px 17px; padding: 13px 16px; margin-left: auto; width: fit-content; max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.message-images { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 7px; justify-content: end; margin-bottom: 8px; }
.message-images.single { grid-template-columns: minmax(0, 330px); }
.message-images img { width: 100%; max-height: 280px; object-fit: cover; border-radius: 14px; display: block; border: 1px solid var(--line); background: var(--paper-deep); }
.message.assistant { display: grid; grid-template-columns: 30px 1fr; gap: 14px; }
.assistant-mark { width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 25%,#ffd4bd,#d9625b 55%,#77445e); box-shadow: 0 5px 15px rgba(174,80,76,.2); }
.message.assistant .bubble { font: 400 15px/1.7 "Newsreader", serif; max-width: 650px; padding-top: 2px; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.assistant .bubble strong { font-family: "DM Sans"; font-size: 12px; }
.message.assistant .error-bubble { color: #a4493d; }
.typing span { display:inline-block; width:5px; height:5px; border-radius:50%; background:#9e7770; margin: 8px 3px 0 0; animation: dot 1.1s infinite; }
.typing span:nth-child(2){animation-delay:.15s}.typing span:nth-child(3){animation-delay:.3s}@keyframes dot{50%{opacity:.3;transform:translateY(-3px)}}
.composer-zone { position: absolute; bottom: 0; left: 0; right: 0; padding: 35px 30px 15px; background: linear-gradient(transparent, var(--paper) 28%); }
.composer { max-width: 760px; margin: 0 auto; border: 1px solid rgba(63,55,47,.18); border-radius: 17px; background: rgba(255,255,255,.58); backdrop-filter: blur(18px); box-shadow: var(--shadow), 0 1px 0 rgba(255,255,255,.75) inset; padding: 15px 15px 11px; transition: .2s ease; }
.composer:focus-within { border-color: rgba(202,91,74,.42); box-shadow: 0 20px 60px rgba(68,51,35,.13), 0 0 0 3px rgba(227,102,79,.06); }
.composer.dragging { border-color: var(--accent); background: rgba(255,255,255,.78); transform: translateY(-2px); }
.attachment-preview { display: none; gap: 8px; overflow-x: auto; padding: 0 1px 10px; }
.attachment-preview.visible { display: flex; }
.attachment-card { position: relative; width: 68px; height: 68px; flex: 0 0 68px; border-radius: 11px; overflow: hidden; border: 1px solid var(--line); background: var(--paper-deep); }
.attachment-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.remove-attachment { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border: 0; border-radius: 50%; background: rgba(31,29,27,.78); color: white; display: grid; place-items: center; cursor: pointer; font-size: 13px; line-height: 1; }
textarea { display: block; width: 100%; resize: none; border: 0; outline: 0; background: transparent; min-height: 29px; max-height: 140px; color: var(--ink); font-size: 13px; line-height: 1.55; padding: 1px 3px 5px; }
textarea::placeholder { color: #9b948c; }
textarea:disabled { opacity: .72; cursor: wait; }
.composer-bottom { display: flex; justify-content: space-between; align-items: center; }
.composer-tools { display:flex; align-items:center; gap:7px; }
.round-button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: transparent; display: grid; place-items: center; cursor:pointer; }
.round-button svg { width: 14px; height: 14px; }
.mode-button { border: 0; background: transparent; color: #756d65; cursor: pointer; font-size: 10px; display: flex; gap: 5px; align-items: center; }
.mode-button span { color: var(--accent); }
.send-button { width: 34px; height: 34px; border: 0; border-radius: 50%; display: grid; place-items:center; color: #fff; background: var(--ink); cursor:pointer; transition:.2s ease; }
.send-button:hover { background: var(--accent); transform: scale(1.04); }
.send-button:disabled { opacity:.35; cursor:not-allowed; transform:none; }
.send-button svg { width: 16px; height:16px; }
.fine-print { text-align:center; color:#aaa199; font-size: 8px; margin: 9px 0 0; }
.toast { position: fixed; bottom: 25px; left: 50%; transform: translate(-50%, 20px); background: #2d2b28; color: #fff; border-radius: 999px; padding: 10px 16px; font-size: 11px; opacity: 0; pointer-events:none; transition:.25s; z-index:30; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.sidebar-scrim { display:none; }
body.night { --paper:#1f2223; --paper-deep:#17191a; --ink:#f0eae2; --muted:#aaa39a; --line:rgba(255,255,255,.1); --card:rgba(255,255,255,.04); --shadow:0 18px 60px rgba(0,0,0,.28); }
body.night .sidebar { background:rgba(24,26,27,.8); } body.night .thread.active, body.night .new-thread { background:rgba(255,255,255,.06); } body.night .message.user .bubble { background:#3b3935; }

@media (max-width: 850px) {
  .sidebar { position:fixed; inset:0 auto 0 0; transform:translateX(-105%); transition:.25s ease; box-shadow:20px 0 50px rgba(0,0,0,.12); }
  .sidebar.open { transform:translateX(0); }
  .sidebar-scrim { display:block; position:fixed; inset:0; z-index:9; background:rgba(31,27,23,.25); opacity:0; pointer-events:none; transition:.2s; }
  .sidebar.open + .sidebar-scrim { opacity:1; pointer-events:auto; }
  .menu-button { visibility:visible; }
  .mobile-only { display:grid; }
  .model-picker { transform:none; }
  .topbar { padding:0 15px; }
  .chat { padding-left:18px; padding-right:18px; }
  .suggestions { grid-template-columns:1fr; max-width:400px; }
  .suggestion { min-height:62px; }
  .welcome { padding-top:25px; justify-content:flex-start; }
  .orb-wrap { margin-top: 3vh; }
  h1 { font-size:52px; }
  .composer-zone { padding-left:14px; padding-right:14px; }
}
@media (max-height: 720px) and (min-width: 851px) { .orb-wrap { margin-bottom:12px; transform:scale(.82); } .welcome-copy{margin:16px auto 20px}.suggestion{min-height:65px} }

.admin-link,.billing-button{height:34px;border:1px solid rgba(39,239,97,.25);background:rgba(39,239,97,.06);color:var(--signal,#27ef61);padding:0 13px;display:inline-flex;align-items:center;text-decoration:none;font:10px 'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em}.billing-button{cursor:pointer}.billing-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:25px}.billing-modal[hidden]{display:none}.billing-scrim{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(12px)}.billing-card{position:relative;width:min(920px,100%);background:#050b07;border:1px solid rgba(39,239,97,.25);padding:42px;box-shadow:0 30px 120px #000}.billing-card h2{font:50px 'Space Grotesk',sans-serif;margin:8px 0 10px}.billing-card h2 em{color:#27ef61;font-style:normal}.billing-copy{color:#819087;font-size:12px}.billing-close{position:absolute;right:18px;top:14px;background:none;border:0;color:#fff;font-size:26px;cursor:pointer}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0}.price-card{border:1px solid rgba(39,239,97,.16);padding:22px;background:#020604}.price-card.current{border-color:#27ef61}.price-card>span{display:block;color:#27ef61;font:10px 'JetBrains Mono';text-transform:uppercase}.price-card strong{display:inline-block;font:34px 'Space Grotesk';margin:22px 4px 0 0}.price-card small,.price-card p{color:#829087;font:10px 'JetBrains Mono'}.price-card p{min-height:30px;margin:20px 0}.price-card button,.manage-billing{width:100%;padding:13px;border:1px solid #27ef61;background:#27ef61;color:#021006;font:9px 'JetBrains Mono';text-transform:uppercase;cursor:pointer}.price-card button:disabled{opacity:.45;cursor:not-allowed}.manage-billing{background:transparent;color:#27ef61;width:auto}@media(max-width:700px){.pricing-grid{grid-template-columns:1fr}.billing-card{padding:28px 18px;max-height:90vh;overflow:auto}.billing-card h2{font-size:36px}.admin-link{display:none}}