/* OSpace HQ: the one frame every page sits in. Kunal, 21 Sep 2026: "not all pages are accessible at all
   times, the navigation changes a lot... we should come up with a universal navigation and structure.
   Perhaps a hamburger menu for projects... Call Donna should be on every page, maybe a floating blob
   on the bottom right, which opens a small chat window with voice chat, like a call."

   shell.js builds it: the same top bar and the same menu on every page, and Donna's call button on
   every page except the front page, where her orb already is that button. A page shown inside
   Donna's window (a frame) gets none of it: html.embed. */
:root { --sh-bg:#0a0c12; --sh-panel:#11141c; --sh-panel2:#191d28; --sh-line:rgba(120,140,180,.2); --sh-text:#e6e9f0;
        --sh-muted:#8e9ab0; --sh-gold:#e8c15a; --sh-blue:#46c4ff; --sh-violet:#c870ff;
        --sh-font:'Archivo', system-ui, sans-serif; --sh-pixel:'Press Start 2P', monospace; }

/* ---- the top bar ------------------------------------------------------------------------------ */
header.sh { display:flex; align-items:center; gap:4px; padding:0 14px 0 8px; height:48px; position:sticky; top:0; z-index:40;
  background:rgba(13,16,24,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--sh-line); overflow:visible; }
.sh-burger { flex:none; width:38px; height:38px; border-radius:11px; border:1px solid transparent; background:none; cursor:pointer;
  display:grid; place-items:center; padding:0; }
.sh-burger:hover { background:rgba(255,255,255,.06); border-color:var(--sh-line); }
.sh-burger i { display:block; width:17px; height:1.5px; background:#dfe5f2; border-radius:2px; box-shadow:0 5.5px 0 #dfe5f2, 0 -5.5px 0 #dfe5f2; }
header.sh .sh-brand { font-family:var(--sh-pixel); font-size:11px; color:var(--sh-gold); letter-spacing:1px; text-decoration:none; white-space:nowrap; flex:none; padding:0 12px 0 6px; }
.sh-links { display:flex; align-items:stretch; height:100%; margin-left:6px; min-width:0; overflow:hidden; }
.sh-links a { position:relative; display:flex; align-items:center; padding:0 12px; color:var(--sh-muted); text-decoration:none; font:500 13px var(--sh-font); white-space:nowrap; }
.sh-links a:hover { color:#fff; }
.sh-links a.on { color:#fff; }
.sh-links a.on::after { content:''; position:absolute; left:12px; right:12px; bottom:-1px; height:2px; border-radius:2px; background:var(--sh-gold); }
.sh-sp { flex:1; }
.sh-actions { display:flex; align-items:center; gap:8px; flex:none; }
@media (max-width: 860px) { .sh-links { display:none; } }

/* the front page has its own sky; there the menu button floats on it and the wordmark moves over */
.sh-burger.float { position:fixed; top:3px; left:6px; z-index:60; width:34px; height:26px; border-radius:8px; }
body:has(.sh-burger.float) #brand { left:40px; }

/* ---- the menu ------------------------------------------------------------------------------------ */
#sh-veil { position:fixed; inset:0; background:rgba(3,5,10,.55); opacity:0; pointer-events:none; transition:opacity .2s; z-index:70; }
#sh-veil.on { opacity:1; pointer-events:auto; }
#sh-menu { position:fixed; top:0; left:0; bottom:0; width:min(320px, 88vw); z-index:71; display:flex; flex-direction:column;
  background:linear-gradient(180deg, #121622, #0c0f17); border-right:1px solid var(--sh-line); box-shadow:30px 0 80px rgba(0,0,0,.5);
  transform:translateX(-102%); transition:transform .26s cubic-bezier(.2,.8,.2,1); font-family:var(--sh-font); color:var(--sh-text); }
#sh-menu.on { transform:none; }
#sh-menu .mh { display:flex; align-items:center; gap:6px; height:48px; padding:0 10px 0 8px; border-bottom:1px solid var(--sh-line); flex:none; }
#sh-menu .mh .sh-brand { font-family:var(--sh-pixel); font-size:11px; color:var(--sh-gold); letter-spacing:1px; text-decoration:none; padding-left:6px; }
#sh-menu .mb { overflow:auto; padding:10px 10px 18px; flex:1; scrollbar-width:thin; }
#sh-menu h4 { margin:16px 8px 6px; font:600 10.5px var(--sh-font); letter-spacing:.14em; text-transform:uppercase; color:#64708a; }
#sh-menu .row { display:flex; align-items:center; gap:10px; padding:8px 8px; border-radius:10px; color:var(--sh-text); text-decoration:none; font-size:14px; }
#sh-menu .row:hover { background:rgba(255,255,255,.05); }
#sh-menu .row.on { background:rgba(232,193,90,.09); box-shadow:inset 2px 0 0 var(--sh-gold); }
#sh-menu .row .dot { flex:none; width:7px; height:7px; border-radius:50%; background:var(--c, #55607a); box-shadow:0 0 10px var(--c, transparent); }
#sh-menu .row .nm { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sh-menu .row .st { color:var(--sh-muted); font-size:11.5px; flex:none; }
#sh-menu .row .bd { flex:none; font-size:11.5px; color:var(--sh-muted); text-decoration:none; border:1px solid var(--sh-line); border-radius:999px; padding:2px 9px; opacity:0; transition:opacity .15s; }
#sh-menu .row:hover .bd, #sh-menu .row .bd:focus { opacity:1; }
#sh-menu .row .bd:hover { color:var(--sh-gold); border-color:var(--sh-gold); }
#sh-menu .row .ic { flex:none; width:18px; text-align:center; color:var(--sh-muted); font-size:13px; }
@media (hover: none) { #sh-menu .row .bd { opacity:1; } }

/* ---- Donna, the call button ------------------------------------------------------------------- */
#dn-blob { position:fixed; right:22px; bottom:22px; width:66px; height:66px; border-radius:50%; border:0; padding:0; cursor:pointer; z-index:80;
  background:radial-gradient(circle at 50% 40%, rgba(40,52,84,.9), rgba(9,11,18,.96) 70%); box-shadow:0 10px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(140,170,255,.18), 0 0 26px rgba(90,150,255,.18);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s; }
#dn-blob:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 14px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(160,190,255,.35), 0 0 34px rgba(120,160,255,.32); }
#dn-blob canvas { width:100%; height:100%; display:block; border-radius:50%; pointer-events:none; }
#dn-blob .tip { position:absolute; right:76px; top:50%; transform:translateY(-50%); white-space:nowrap; background:var(--sh-panel2); border:1px solid var(--sh-line); color:var(--sh-text);
  font:500 12.5px var(--sh-font); padding:6px 11px; border-radius:999px; opacity:0; pointer-events:none; transition:opacity .15s; }
#dn-blob:hover .tip { opacity:1; }
#dn-blob .new { position:absolute; top:3px; right:3px; width:13px; height:13px; border-radius:50%; background:var(--sh-gold); border:2px solid #0a0c12; display:none; }
#dn-blob.unread .new { display:block; }
#dn-blob.open { transform:scale(.0); opacity:0; pointer-events:none; }

#dn { position:fixed; right:22px; bottom:22px; width:min(380px, calc(100vw - 24px)); height:min(560px, calc(100vh - 44px)); z-index:81; display:flex; flex-direction:column;
  border-radius:22px; overflow:hidden; font-family:var(--sh-font); color:var(--sh-text);
  background:linear-gradient(180deg, rgba(20,25,38,.97), rgba(10,12,19,.98)); border:1px solid rgba(140,170,255,.2);
  box-shadow:0 30px 90px rgba(0,0,0,.65), 0 0 60px rgba(90,130,255,.1);
  transform-origin:100% 100%; transform:scale(.6) translateY(20px); opacity:0; pointer-events:none; transition:transform .24s cubic-bezier(.2,.9,.25,1.05), opacity .18s; }
#dn.on { transform:none; opacity:1; pointer-events:auto; }
#dn .dh { display:flex; align-items:center; gap:11px; padding:12px 12px 12px 14px; border-bottom:1px solid var(--sh-line); flex:none; }
#dn .dh canvas { width:44px; height:44px; flex:none; border-radius:50%; }
#dn .dh .who { flex:1; min-width:0; }
#dn .dh .who b { display:block; font-size:15px; font-weight:600; }
#dn .dh .who span { display:block; font-size:12px; color:var(--sh-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#dn.calling .dh .who span { color:#7fe3b0; }
#dn .ib { width:32px; height:32px; border-radius:10px; border:1px solid transparent; background:none; color:var(--sh-muted); cursor:pointer; display:grid; place-items:center; padding:0; text-decoration:none; flex:none; }
#dn .ib:hover { color:#fff; background:rgba(255,255,255,.06); border-color:var(--sh-line); }
#dn .ib.on { color:var(--sh-gold); }
#dn .ib svg { width:16px; height:16px; }
#dn .dm { flex:1; overflow:auto; padding:14px 14px 6px; display:flex; flex-direction:column; gap:3px; scrollbar-width:thin; }
#dn .msg { max-width:86%; align-self:flex-start; margin-top:7px; }
#dn .msg.me { align-self:flex-end; }
#dn .msg .bub { background:rgba(255,255,255,.055); border:1px solid var(--sh-line); border-radius:15px 15px 15px 5px; padding:8px 12px; font-size:13.5px; line-height:1.5; overflow-wrap:anywhere; }
#dn .msg.me .bub { background:linear-gradient(135deg, rgba(70,150,255,.26), rgba(200,112,255,.2)); border-color:rgba(140,170,255,.3); border-radius:15px 15px 5px 15px; }
#dn .msg .bub a { color:var(--sh-gold); }
#dn .msg .tm { font-size:10.5px; color:#65708a; margin:3px 5px 0; }
#dn .msg.me .tm { text-align:right; }
#dn .msg.sys { align-self:center; max-width:100%; font-size:11.5px; color:#65708a; text-align:center; }
#dn .day { align-self:center; font-size:11px; color:#65708a; margin:10px 0 2px; }
#dn .hint { align-self:center; text-align:center; color:var(--sh-muted); font-size:13px; line-height:1.6; margin:auto 18px; }
#dn .think { align-self:flex-start; margin-top:8px; display:none; gap:4px; padding:10px 13px; background:rgba(255,255,255,.055); border:1px solid var(--sh-line); border-radius:15px 15px 15px 5px; }
#dn.thinking .think { display:flex; }
#dn .think i { width:6px; height:6px; border-radius:50%; background:var(--sh-muted); animation:dn-b 1.1s infinite; }
#dn .think i:nth-child(2) { animation-delay:.15s; } #dn .think i:nth-child(3) { animation-delay:.3s; }
@keyframes dn-b { 0%, 60%, 100% { transform:none; opacity:.4; } 30% { transform:translateY(-4px); opacity:1; } }
#dn .heard { flex:none; min-height:0; padding:0 16px; font-size:13px; color:#aebbd6; font-style:italic; max-height:0; overflow:hidden; transition:max-height .2s, padding .2s; }
#dn.calling .heard { max-height:64px; padding:6px 16px 2px; }
#dn .df { flex:none; display:flex; align-items:flex-end; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--sh-line); }
#dn .df textarea { flex:1; min-width:0; resize:none; background:rgba(255,255,255,.05); border:1px solid var(--sh-line); border-radius:14px; padding:10px 12px; color:var(--sh-text);
  font:400 13.5px/1.4 var(--sh-font); outline:none; max-height:96px; }
#dn .df textarea:focus { border-color:rgba(140,170,255,.5); }
#dn .call { flex:none; width:42px; height:42px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; color:#07120c;
  background:linear-gradient(135deg, #58e0a0, #2fb87a); box-shadow:0 6px 18px rgba(63,210,138,.3); transition:transform .15s; }
#dn .call:hover { transform:scale(1.06); }
#dn .call svg { width:18px; height:18px; }
#dn.calling .call { background:linear-gradient(135deg, #ff7a7a, #e04e4e); color:#fff; box-shadow:0 6px 18px rgba(227,93,93,.35); }
#dn.calling .call svg { transform:rotate(135deg); }
#dn .send { flex:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--sh-line); background:rgba(255,255,255,.05); color:var(--sh-text); cursor:pointer; display:grid; place-items:center; }
#dn .send:hover { border-color:var(--sh-gold); color:var(--sh-gold); }
#dn .send svg { width:16px; height:16px; }
@media (max-width: 520px) { #dn { right:12px; bottom:12px; } #dn-blob { right:14px; bottom:14px; } }

/* ---- a page inside Donna's window: the page and nothing around it ------------------------------ */
html.embed header, html.embed #dn, html.embed #dn-blob, html.embed #sh-menu, html.embed #sh-veil { display:none !important; }