/* chrismai.ai shared chrome v3 — glass top bar, one-line status bar, mobile tab bar. Used by every page (body.app = homepage shell, body.page = other pages). */
:root{
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --t-xs:12px;--t-sm:13px;--t-md:15px;--t-lg:17px;--t-xl:21px;
  --t-h2:clamp(30px,2.2vw + 14px,48px);--t-h1:clamp(44px,4.6vw + 12px,96px);
  --r-xl:28px;
  --glass:rgba(255,255,255,.66);--glass-line:rgba(255,255,255,.6);--glass-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px -12px rgba(20,16,40,.18);
  --ease-out:cubic-bezier(.2,.8,.2,1);--ease-spring:cubic-bezier(.34,1.56,.64,1);
  --brand:linear-gradient(135deg,#ff9f6b 0%,#8b7bff 52%,#3ad0b5 100%);
}
@media (prefers-color-scheme:dark){:root{--glass:rgba(30,30,34,.58);--glass-line:rgba(255,255,255,.1);--glass-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 12px 40px -12px rgba(0,0,0,.6)}}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
::selection{background:rgba(139,123,255,.28)}
:focus-visible{outline:2px solid #0071e3;outline-offset:2px}

/* Top bar */
.topbar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s4);height:60px;padding:0 var(--s5);background:var(--nav-bg);
  background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid var(--hair);position:relative;z-index:50}
.topbar .logo{justify-self:start;display:inline-flex;align-items:center;gap:9px;font-size:16px;font-weight:650;letter-spacing:-.01em;color:var(--ink);text-decoration:none!important}
.topbar .logo-dot{width:20px;height:20px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px rgba(139,123,255,.14),0 4px 12px -3px rgba(106,76,240,.55)}
.tabs{display:flex;gap:2px;padding:3px;border-radius:12px;background:rgba(118,118,128,.12);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.04)}
.tab{position:relative;padding:6px 15px;border-radius:9px;font-size:var(--t-sm);font-weight:500;color:var(--ink);opacity:.72;text-decoration:none!important;transition:background .25s var(--ease-out),opacity .2s,box-shadow .25s;white-space:nowrap}
.tab:hover{opacity:1}
.tab[aria-selected="true"],.tab[aria-current="page"]{opacity:1;background:var(--bg-elev);box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
@media (prefers-color-scheme:dark){.tab[aria-selected="true"],.tab[aria-current="page"]{background:#3a3a3c}}
.top-actions{justify-self:end;display:flex;align-items:center;gap:var(--s2)}
.chat-toggle{position:relative;display:inline-flex;align-items:center;gap:7px;border:0;cursor:pointer;font:inherit;font-size:var(--t-sm);font-weight:600;color:#fff;padding:8px 15px 8px 12px;border-radius:980px;background:var(--brand);background-size:160% 160%;background-position:0% 50%;
  box-shadow:0 6px 18px -8px rgba(106,76,240,.75),inset 0 1px 0 rgba(255,255,255,.35);transition:transform .2s var(--ease-spring),background-position .6s var(--ease-out),box-shadow .3s}
.chat-toggle:hover{background-position:100% 50%;box-shadow:0 10px 24px -8px rgba(106,76,240,.8),inset 0 1px 0 rgba(255,255,255,.35)}
.chat-toggle:active{transform:scale(.96)}
.chat-toggle.is-open{background:var(--ink);color:var(--bg)}
.signin-btn{font-size:var(--t-sm);font-weight:500;padding:7px 14px;border-radius:980px;color:var(--ink)!important;text-decoration:none!important;border:1px solid var(--hair);background:transparent;transition:background .2s}
.signin-btn:hover{background:rgba(118,118,128,.12)}

/* Status line */
.statusbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);min-height:32px;padding:0 var(--s5);font-size:var(--t-xs);color:var(--ink-2);border-top:1px solid var(--hair);background:var(--nav-bg);
  background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);white-space:nowrap;overflow:hidden}
.statusbar a{color:var(--ink);text-decoration:none}.statusbar a:hover{text-decoration:underline}
.statusbar .hint{margin:0}.statusbar kbd{font-size:11px}
.statusbar .clock{position:static;box-shadow:none;background:none;border:0;padding:0;color:var(--ink-2);font-size:var(--t-xs);-webkit-backdrop-filter:none;backdrop-filter:none;z-index:auto}
.statusbar .clock .build{color:var(--ink-2);border-right-color:var(--hair)}
.statusbar .clock #clock-time{color:var(--ink)}

/* One chat entry point everywhere */
.chat-bubble{display:none!important}
.chat-panel{top:68px;right:16px;bottom:auto;max-height:calc(100dvh - 120px);border-radius:22px;box-shadow:0 30px 80px -20px rgba(10,8,30,.45)}
body:not(:has(.statusbar)) .clock{display:none}
.tabbar{display:none}

/* Other pages (body.page): same header + status line, normal scrolling */
.page .topbar{position:sticky;top:0}
.page .statusbar{margin-top:var(--s7)}

@media (max-width:820px){
  .topbar{grid-template-columns:1fr auto;height:54px;padding:0 14px}
  .tabs{display:none}
  .chat-toggle span{display:none}.chat-toggle{padding:9px}
  .statusbar{padding:0 14px;font-size:11px}
  .statusbar .hint,.statusbar .clock .build,.statusbar .clock #clock-date{display:none}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;height:calc(58px + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);
    background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);border-top:1px solid var(--hair);z-index:60}
  .mtab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10.5px;font-weight:500;color:var(--ink-2);text-decoration:none!important;transition:color .2s,transform .2s var(--ease-spring)}
  .mtab:active{transform:scale(.92)}
  .mtab[aria-current]{color:var(--btn)}
  .chat-panel{top:60px;left:10px;right:10px;width:auto;bottom:calc(70px + env(safe-area-inset-bottom));max-height:none}
  .page{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
  .page .statusbar{margin-bottom:0}
}
@media (prefers-color-scheme:dark) and (max-width:820px){.mtab[aria-current]{color:#2997ff}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* ChatWithHuman Messenger active (set by cwh-bridge.js only after it loads): hide the built-in chat UI */
.cwh-on #chat-btn,.cwh-on #chat-panel,.cwh-on .chat-prompt{display:none!important}
.chat-toggle{position:relative}
.chat-toggle[data-unread]:not([data-unread=""])::after{content:"";position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#e11d48;border:2px solid var(--bg,#fff)}