:root{--ind:#211A35;--ras:#CE2460;--gold:#DDB447;--ivo:#FAF7F2;--line:#E7E3EE;--mute:#6E6880;--head:"Bricolage Grotesque",system-ui,sans-serif;--body:"Figtree",system-ui,sans-serif;--mono:"DM Mono",ui-monospace,monospace;--side:272px}
html[data-accent=saffron]{--ras:#B4501C}html[data-accent=peacock]{--ras:#0A6C78}html[data-accent=indigo]{--ras:#4E3FC4}
*{box-sizing:border-box}
html,body{height:100%}
body.c{margin:0;display:flex;background:var(--ivo);color:var(--ind);font:400 16px/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden}
.c-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font:inherit;color:inherit}
/* sidebar */
.c-side{width:var(--side);flex:none;height:100dvh;background:var(--ind);color:#fff;display:flex;flex-direction:column;padding:16px 12px;gap:8px}
.c-side-top{display:flex;align-items:center;justify-content:space-between;padding:4px 6px 10px}
.c-brand img{display:block}
.c-new{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font-weight:600;cursor:pointer;text-align:left}
.c-new:hover{background:rgba(255,255,255,.12)}
.c-side-h{font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45);margin:14px 8px 4px}
.c-hist{list-style:none;margin:0;padding:0;overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:2px}
.c-hist button{width:100%;text-align:left;padding:10px 12px;border-radius:10px;border:0;background:none;color:rgba(255,255,255,.82);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}
.c-hist button:hover,.c-hist button[aria-current=true]{background:rgba(255,255,255,.1);color:#fff}
.c-side-foot{font-size:12px;color:rgba(255,255,255,.5);padding:10px 8px 0;border-top:1px solid rgba(255,255,255,.1)}
.c-side-foot p{margin:0 0 6px}.c-side-foot a{color:var(--gold);font-weight:600;text-decoration:none}
.c-close{display:none}
/* main */
.c-main{flex:1;min-width:0;height:100dvh;display:flex;flex-direction:column}
.c-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px}
.c-icon{width:40px;height:40px;border-radius:12px;border:1px solid var(--line);background:#fff;cursor:pointer;display:grid;place-items:center;font-size:18px;flex:none}
.c-close{border-color:rgba(255,255,255,.2);background:none;color:#fff}
.c-open{visibility:hidden;position:relative}
.c-open i{position:absolute;left:11px;width:16px;height:1.6px;background:var(--ind);border-radius:2px}.c-open i:first-child{top:15px}.c-open i:last-child{top:23px}
.c-voice[aria-pressed=true]{background:var(--ind);color:#fff;border-color:var(--ind)}
.c-model{display:flex;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--line)}
.c-model button{border:0;background:none;padding:8px 16px;border-radius:999px;font-weight:600;font-size:14px;cursor:pointer;color:var(--mute)}
.c-model button[aria-pressed=true]{background:var(--ind);color:#fff}
.c-scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:0 18px}
.c-welcome{max-width:760px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px 0 40px}
.c-welcome[hidden]{display:none}
.c-orb{width:150px;height:150px;border-radius:50%;background:#fff;border:1px solid var(--line);display:grid;place-items:center;overflow:hidden;margin-bottom:22px}
.c-orb canvas{width:150px;height:150px}
.c-welcome h1{font:700 clamp(34px,5vw,56px)/1.05 var(--head);letter-spacing:-.035em;margin:0}
.c-welcome h1 span{color:var(--ras)}
.c-welcome>p{color:var(--mute);font-size:18px;margin:10px 0 28px}
.c-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%}
.c-cards button{display:flex;flex-direction:column;gap:2px;text-align:left;padding:16px;border-radius:18px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:border-color .2s,transform .2s}
.c-cards button:hover{border-color:var(--ras);transform:translateY(-2px)}
.c-cards b{font:700 16px/1.25 var(--head)}.c-cards span{font-size:13px;color:var(--mute)}
.c-log{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:22px;padding:8px 0 24px}
.c-msg{display:flex;gap:12px;align-items:flex-start}
.c-msg.u{justify-content:flex-end}
.c-msg.u .c-txt{background:var(--ind);color:#fff;border-radius:20px 20px 6px 20px;padding:12px 16px;max-width:85%;white-space:pre-wrap;overflow-wrap:anywhere}
.c-av{width:30px;height:30px;border-radius:50%;background:var(--ras);flex:none;margin-top:2px;position:relative}
.c-av::after{content:"";position:absolute;inset:9px;border-radius:50%;background:#fff}
.c-msg.b.live .c-av{animation:c-pulse 1.1s ease-in-out infinite}
@keyframes c-pulse{50%{transform:scale(.82)}}
.c-msg.b .c-body{min-width:0;flex:1}
.c-msg.b .c-txt{overflow-wrap:anywhere}
.c-txt p{margin:0 0 10px}.c-txt p:last-child{margin-bottom:0}
.c-txt h3{font:700 19px/1.25 var(--head);margin:14px 0 6px}
.c-txt ul,.c-txt ol{margin:0 0 10px;padding-left:22px}.c-txt li{margin:3px 0}
.c-txt code{font:14px var(--mono);background:#EFEBF5;padding:1px 6px;border-radius:6px}
.c-txt pre{background:var(--ind);color:#F3F0FA;padding:14px;border-radius:14px;overflow-x:auto;font:13.5px/1.5 var(--mono);margin:0 0 10px}
.c-txt pre code{background:none;padding:0;color:inherit}
.c-txt table{border-collapse:collapse;margin:0 0 10px;font-size:14px;display:block;overflow-x:auto}
.c-txt th,.c-txt td{border:1px solid var(--line);padding:6px 10px;text-align:left}.c-txt th{background:#F3F0F7}
.c-txt strong{font-weight:700}
.c-acts{display:flex;gap:6px;margin-top:8px}
.c-acts button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:5px 11px;font-size:12.5px;cursor:pointer;color:var(--mute)}
.c-acts button:hover{color:var(--ind);border-color:var(--ind)}
.c-dots{display:inline-flex;gap:4px;padding:8px 0}.c-dots i{width:7px;height:7px;border-radius:50%;background:var(--ras);animation:c-dot 1s infinite}
.c-dots i:nth-child(2){animation-delay:.15s}.c-dots i:nth-child(3){animation-delay:.3s}
@keyframes c-dot{50%{transform:translateY(-5px);opacity:.4}}
.c-err{color:#B3261E}
/* composer */
.c-composer{max-width:780px;width:calc(100% - 36px);margin:0 auto;display:flex;align-items:flex-end;gap:8px;padding:8px 8px 8px 16px;border-radius:24px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 30px rgba(33,26,53,.07)}
.c-composer textarea{flex:1;min-width:0;border:0;outline:0;resize:none;font:inherit;padding:10px 0;max-height:200px;background:none;color:var(--ind)}
.c-mic{border:0;background:none}.c-mic.on{background:var(--ras);color:#fff}
.c-send{width:40px;height:40px;border-radius:50%;border:0;background:var(--ras);color:#fff;font-size:20px;font-weight:700;cursor:pointer;flex:none}
.c-send.stop{background:var(--ind)}
.c-send:disabled{opacity:.4;cursor:default}
.c-fine{max-width:780px;margin:8px auto 12px;padding:0 18px;text-align:center;font-size:12px;color:var(--mute)}
.c-fine a{color:var(--ras)}
@media (max-width:860px){
  .c-side{position:fixed;inset:0 auto 0 0;z-index:20;transform:translateX(-100%);transition:transform .3s ease;width:min(86vw,320px)}
  .c-side.open{transform:none;box-shadow:0 0 0 100vmax rgba(20,15,34,.45)}
  .c-close{display:grid}.c-open{visibility:visible}
  .c-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-bar{padding:10px 12px}.c-scroll{padding:0 12px}.c-composer{width:calc(100% - 20px)}
}
@media (max-width:420px){.c-cards button:nth-child(n+5){display:none}.c-model button{padding:8px 12px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* dark mode, Grok-style */
html.dark body.c{background:#0F0B1A;color:#ECE8F5}
html.dark .c-bar .c-icon,html.dark .c-model,html.dark .c-composer,html.dark .c-cards button,html.dark .c-acts button,html.dark .c-orb{background:#1B1530;border-color:#2E2645;color:#ECE8F5}
html.dark .c-open i{background:#ECE8F5}
html.dark .c-model button{color:#A9A2BD}html.dark .c-model button[aria-pressed=true]{background:#ECE8F5;color:#0F0B1A}
html.dark .c-welcome>p,html.dark .c-cards span,html.dark .c-fine{color:#A9A2BD}
html.dark .c-composer textarea{color:#ECE8F5}
html.dark .c-msg.u .c-txt{background:#2E2645}
html.dark .c-txt code{background:#2E2645}html.dark .c-txt th{background:#221B38}html.dark .c-txt th,html.dark .c-txt td{border-color:#2E2645}
html.dark .c-side{background:#08060F}
html.dark .c-voice[aria-pressed=true],html.dark .c-dark[aria-pressed=true]{background:#ECE8F5;color:#0F0B1A}

/* ---------- v2: accounts, search, attachments, menus ---------- */
.c-find{margin:6px 0 0;padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:14px}
.c-find::placeholder{color:rgba(255,255,255,.45)}
.c-hist li{display:flex;align-items:center}.c-hist li button{flex:1;min-width:0}
.c-me{position:relative;border-top:1px solid rgba(255,255,255,.1);padding-top:10px}
.c-me-btn{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;padding:8px;border-radius:12px;border:0;background:none;color:#fff;cursor:pointer}
.c-me-btn:hover{background:rgba(255,255,255,.08)}
.c-me-av{grid-row:span 2;width:36px;height:36px;border-radius:50%;background:var(--ras);display:grid;place-items:center;font:700 15px var(--head);font-style:normal}
.c-me-btn span{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-me-btn em{font-style:normal;font-size:12px;color:rgba(255,255,255,.5);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:#2A2240;border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:6px;display:flex;flex-direction:column;box-shadow:0 20px 40px rgba(0,0,0,.35);z-index:5}
.c-menu[hidden]{display:none}
.c-menu button,.c-menu a{display:block;text-align:left;padding:10px 12px;border-radius:10px;border:0;background:none;color:#fff;font-size:14px;cursor:pointer;text-decoration:none}
.c-menu button:hover,.c-menu a:hover{background:rgba(255,255,255,.1)}
.c-bar-r{display:flex;gap:8px;align-items:center}
.c-signin{height:40px;padding:0 16px;border-radius:999px;border:0;background:var(--ind);color:#fff;font-weight:600;cursor:pointer}
.c-signin[hidden]{display:none}
.c-composer{flex-direction:column;align-items:stretch;padding:8px 8px 8px 8px}
.c-row{display:flex;align-items:flex-end;gap:6px}
.c-clip{border:0;background:#F3F0F7;font-size:20px}
.c-att{display:flex;gap:8px;padding:4px 4px 8px}
.c-att[hidden]{display:none}
.c-chip{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 6px;border-radius:12px;background:#F3F0F7;font-size:13px;max-width:100%}
.c-chip img{width:44px;height:44px;object-fit:cover;border-radius:8px}
.c-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.c-chip button{border:0;background:none;cursor:pointer;font-size:16px;color:var(--mute)}
.c-msg.u .c-pic{display:block;max-width:260px;max-height:260px;border-radius:14px;margin:0 0 6px auto;object-fit:cover}
.c-msg.u .c-file{display:block;font-size:12px;opacity:.8;margin-bottom:4px}
/* modals */
.c-modal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;background:rgba(20,15,34,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);padding:16px}
.c-modal[hidden]{display:none}
.c-sheet{position:relative;width:min(420px,100%);max-height:calc(100dvh - 32px);overflow-y:auto;background:#fff;color:var(--ind);border-radius:24px;padding:28px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.c-x{position:absolute;top:14px;right:14px;border:0;background:#F3F0F7}
.c-sheet h2{font:700 28px/1.1 var(--head);letter-spacing:-.02em;margin:16px 0 6px}
.c-auth-sub{color:var(--mute);margin:0 0 16px;font-size:15px}
.c-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:#F3F0F7;margin-bottom:16px}
.c-tabs button{border:0;background:none;padding:9px;border-radius:999px;font-weight:600;cursor:pointer;color:var(--mute)}
.c-tabs button[aria-selected=true]{background:#fff;color:var(--ind);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.c-af{display:grid;gap:12px}
.c-af label,.c-pl{display:grid;gap:6px;font-size:14px;font-weight:600}
.c-af label[hidden]{display:none}
.c-af input,.c-pl textarea{font:inherit;font-weight:400;padding:12px 14px;border:1px solid var(--line);border-radius:12px;width:100%;color:var(--ind);background:#fff}
.c-af input:focus,.c-pl textarea:focus{outline:2px solid var(--ras);outline-offset:1px;border-color:transparent}
.c-af small{font-weight:400;color:var(--mute);font-size:12px}
.c-go{height:46px;border-radius:999px;border:0;background:var(--ras);color:#fff;font-weight:700;font-size:16px;cursor:pointer;margin-top:4px;width:100%}
.c-go:disabled{opacity:.6}
.c-amsg{margin:0;min-height:20px;font-size:14px;color:var(--mute)}.c-amsg.bad{color:#B3261E}.c-amsg.ok{color:#1F7A4D}
.c-alinks{display:flex;justify-content:space-between;margin:0}
.c-alinks button{border:0;background:none;color:var(--ras);font-weight:600;font-size:13px;cursor:pointer;padding:0}
.c-alinks button[hidden]{display:none}
.c-afine{font-size:12px;color:var(--mute);margin:14px 0 0}
html.dark .c-sheet{background:#1B1530;color:#ECE8F5}html.dark .c-tabs,html.dark .c-x,html.dark .c-clip,html.dark .c-chip{background:#2E2645;color:#ECE8F5}
html.dark .c-tabs button[aria-selected=true]{background:#0F0B1A;color:#ECE8F5}
html.dark .c-af input,html.dark .c-pl textarea{background:#0F0B1A;border-color:#2E2645;color:#ECE8F5}
html.dark .c-signin{background:#ECE8F5;color:#0F0B1A}
@media (max-width:860px){.c-signin{padding:0 12px;font-size:14px}.c-bar-r .c-icon{width:36px;height:36px}}
@media (max-width:400px){#c-dark{display:none}}

.c-google{width:100%;height:46px;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ind);font-weight:600;font-size:15px;cursor:pointer;margin-bottom:4px}
.c-google[hidden],.c-or[hidden]{display:none}
.c-google:hover{border-color:var(--ind)}
.c-or{display:flex;align-items:center;gap:10px;color:var(--mute);font-size:12px;margin:10px 0}.c-or::before,.c-or::after{content:"";flex:1;height:1px;background:var(--line)}
html.dark .c-google{background:#0F0B1A;border-color:#2E2645;color:#ECE8F5}

/* v3: today's chat-app look. Centred composer on a new chat, soft user bubbles, clean answers */
body.c.empty .c-main{justify-content:center}
body.c.empty .c-scroll{flex:none;overflow:visible}
body.c.empty .c-welcome{min-height:0;padding:0 0 22px}
body.c.empty .c-composer{order:2}
body.c.empty .c-fine{order:3}
.c-main{position:relative}
body.c.empty .c-bar{position:absolute;top:0;left:0;right:0}
.c-msg.u .c-txt{background:#EEEAF3;color:var(--ind);border-radius:22px;padding:11px 16px}
html.dark .c-msg.u .c-txt{background:#2A2340;color:#ECE8F5}
.c-av{width:26px;height:26px;background:var(--ind);margin-top:1px}
.c-av::after{inset:8px;background:var(--ras)}
html.dark .c-av{background:#ECE8F5}
.c-txt{font-size:16.5px;line-height:1.65}
.c-composer{border-radius:28px;box-shadow:0 2px 6px rgba(33,26,53,.05),0 12px 40px rgba(33,26,53,.08)}
.c-composer textarea{font-size:16.5px}
@media (max-width:860px){body.c.empty .c-main{justify-content:flex-end}body.c.empty .c-scroll{flex:1;overflow-y:auto}body.c.empty .c-welcome{min-height:100%}}

/* v4: talk mode, install, code copy, edit */
.c-talk{height:40px;display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;cursor:pointer;color:var(--ind)}
.c-talk i{width:10px;height:10px;border-radius:50%;background:var(--ras);box-shadow:0 0 0 0 rgba(206,36,96,.5);animation:c-ring 2s infinite}
@keyframes c-ring{70%{box-shadow:0 0 0 8px rgba(206,36,96,0)}100%{box-shadow:0 0 0 0 rgba(206,36,96,0)}}
html.dark .c-talk{background:#1B1530;border-color:#2E2645;color:#ECE8F5}
.c-install{margin:6px 0;padding:10px 12px;border-radius:12px;border:1px dashed rgba(255,255,255,.3);background:none;color:var(--gold);font-weight:600;cursor:pointer;text-align:left}
.c-install[hidden]{display:none}
.c-vmode{position:fixed;inset:0;z-index:60;background:#0F0B1A;color:#ECE8F5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:24px}
.c-vmode[hidden]{display:none}
#c-vorb{width:min(78vw,380px);height:min(78vw,380px);cursor:pointer}
.c-vstate{font:700 clamp(22px,4vw,30px)/1.2 var(--head);margin:8px 0 0;text-align:center}
.c-vheard{min-height:48px;max-width:640px;text-align:center;color:#A9A2BD;margin:0;font-size:16px}
.c-vbtns{display:flex;gap:10px;margin-top:10px}
.c-vbtns button{height:48px;padding:0 22px;border-radius:999px;border:1px solid #2E2645;background:#1B1530;color:#ECE8F5;font-weight:600;cursor:pointer}
.c-vbtns .c-vend{background:var(--ras);border-color:var(--ras)}
.c-txt pre{position:relative}
.c-cp{position:absolute;top:8px;right:8px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;border-radius:8px;padding:3px 9px;font-size:12px;cursor:pointer}
.c-msg.u{flex-direction:column;align-items:flex-end}
.c-uacts{display:flex;gap:6px;margin-top:4px;opacity:0;transition:opacity .2s}
.c-msg.u:hover .c-uacts,.c-msg.u:focus-within .c-uacts{opacity:1}
.c-uacts button{border:0;background:none;color:var(--mute);font-size:12.5px;cursor:pointer;padding:2px 6px}
@media (hover:none){.c-uacts{opacity:1}}
@media (max-width:520px){.c-talk{padding:0 11px;font-size:14px}#c-speak{display:none}}

.c-tool{display:inline-flex;align-items:center;gap:8px;margin:4px 0;padding:6px 12px;border-radius:999px;background:#F3F0F7;color:var(--mute);font-size:13px}
.c-tool i{width:8px;height:8px;border-radius:50%;background:var(--ras);animation:c-dot 1s infinite}
html.dark .c-tool{background:#2E2645;color:#A9A2BD}
.c-dl{right:70px}

/* Berri Bots in chat */
.c-agents-btn{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:14px;border:1px solid rgba(221,180,71,.45);background:rgba(221,180,71,.1);color:#fff;font-weight:600;cursor:pointer;text-align:left;margin-top:6px}
.c-agents-btn span{color:var(--gold)}.c-agents-btn em{margin-left:auto;font-style:normal;font-size:12px;color:rgba(255,255,255,.55)}
.c-sheet-wide{width:min(760px,100%)}
.c-agent-find{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:14px}
.c-agent-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;max-height:56dvh;overflow-y:auto}
.c-agent-grid button{width:100%;height:100%;text-align:left;padding:14px;border-radius:14px;border:1px solid var(--line);background:#fff;cursor:pointer;display:flex;flex-direction:column;gap:3px;color:var(--ind);border-top:4px solid var(--c,#211A35)}
.c-agent-grid button:hover{border-color:var(--c,#211A35);transform:translateY(-1px)}
.c-agent-grid b{font:800 19px/1.1 var(--head)}.c-agent-grid span{font-size:12.5px;color:var(--mute)}
.c-botchip{display:flex;align-items:center;gap:8px;padding:2px 6px 8px;font-size:13px;color:var(--mute)}
.c-botchip[hidden]{display:none}
.c-botchip b{color:var(--ind)}.c-botchip button{border:0;background:#F3F0F7;border-radius:999px;padding:3px 9px;cursor:pointer;color:var(--mute);font-size:12px}
html.dark .c-agent-grid button,html.dark .c-agent-find{background:#0F0B1A;border-color:#2E2645;color:#ECE8F5}html.dark .c-botchip b{color:#ECE8F5}html.dark .c-botchip button{background:#2E2645;color:#ECE8F5}
@media (max-width:640px){.c-agent-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.c-shared{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-radius:16px;background:#F3F0F7;font-size:14px;color:var(--mute)}
.c-shared button{border:0;border-radius:999px;background:var(--ras);color:#fff;font-weight:600;padding:8px 14px;cursor:pointer}
html.dark .c-shared{background:#1B1530}