/* Application shell: extend SITE_NAVIGATION, keep one responsive layout. */
:root { --sidebar-width:232px; --nav-item-radius:12px; --mobile-nav-height:68px; --mobile-bar: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom, 0px)); --mobile-top: 64px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app-shell { display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); min-height:100dvh; }
.site-sidebar { position:sticky; top:0; height:100dvh; padding:30px 16px 18px; border-right:1px solid var(--border); background:var(--surface); }
.brand { gap:11px; padding:0 10px; }
.brand-mark { border-radius:12px; }
#site-navigation { margin-top:44px; gap:5px; }
#site-navigation a { min-height:46px; padding:11px 14px; gap:12px; border:1px solid transparent; border-radius:var(--nav-item-radius); font-weight:500; }
#site-navigation a:focus-visible { outline-offset:-3px; }
#site-navigation a[aria-current] { color:var(--brand-action); background:color-mix(in srgb,var(--brand-primary) 8%,var(--surface)); border-color:color-mix(in srgb,var(--brand-primary) 12%,var(--surface)); font-weight:650; }
#site-navigation a:hover { color:var(--brand-action); background:color-mix(in srgb,var(--brand-primary) 5%,var(--surface)); }
#site-navigation a:active { background:color-mix(in srgb,var(--brand-primary) 14%,var(--surface)); }
.nav-symbol { flex:0 0 20px; }
.nav-mobile-label { display:none; }
.nav-label { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.product-page { flex:1; min-width:0; }
.product-page-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:24px; margin-bottom:28px; }
.product-page-heading p { color:var(--muted); margin-bottom:0; }
.product-page-actions { display:flex; flex-wrap:wrap; gap:8px; }
.product-page-messages { padding:12px 16px; border:1px solid var(--border); background:var(--soft); border-radius:12px; margin-bottom:20px; }
.product-page-messages p { margin:0; }
@media(max-width:760px) {
  .product-page-heading { flex-wrap:wrap; gap:16px; }
  .mobile-tabs #site-navigation .nav-label { display:none; }
  .mobile-tabs #site-navigation .nav-mobile-label { display:block; }
}
.sidebar-footer { padding:20px 10px 8px; border-top:1px solid var(--border); gap:10px; }
.sidebar-footer>div { min-width:0; }
.sidebar-footer strong { display:block; font-size:12px; color:#202735; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-footer strong:only-child { white-space:normal; }
.sidebar-footer span { display:block; line-height:1.7; font-size:11px; }
.sidebar-footer a { display:inline-flex; gap:10px; align-items:center; min-height:44px; color:var(--brand-action); font-weight:600; }
.sidebar-footer .account-avatar { display:grid; place-items:center; flex:0 0 34px; height:34px; border:1px solid var(--border); border-radius:50%; background:var(--soft); color:var(--brand-action); font-size:13px; font-weight:600; }
.sidebar-account { padding:8px 10px 0; }
.sidebar-account .account-actions { flex-wrap:wrap; }
.sidebar-account .button { min-height:40px; }
.workspace { position:relative; display:flex; flex-direction:column; min-width:0; min-height:100dvh; }
.site-header { height:64px; min-height:64px; padding:0 38px; background:transparent; }
.header-tagline { font-size:12px; font-weight:400; color:var(--muted); }
main { min-width:0; }
main[aria-busy=true] { opacity:1; visibility:hidden; }
.navigation-status { flex-shrink:0; }
.workspace:has(.assistant-page) { height:100dvh; min-height:0; overflow:hidden; background:var(--surface); }
.workspace:has(.assistant-page) .site-header, .workspace:has(.auth-page) .site-header { display:none; }
.assistant-page { display:flex; flex:1; height:auto; min-height:0; padding:0; overflow:hidden; }
.assistant-heading { flex-shrink:0; min-height:64px; padding:12px 24px; border-bottom:1px solid var(--border); }
.assistant-heading h1 { font-size:15px; }
.assistant-heading p { font-size:11px; }
.assistant-heading .brand-mark,.assistant-heading .brand-logo { width:32px; height:32px; }
.guest-notice { display:flex; flex-shrink:0; justify-content:space-between; align-items:center; gap:12px; padding:6px 24px; color:var(--muted); background:var(--soft); font-size:12px; }
.guest-notice a { flex-shrink:0; padding:8px 0; color:var(--brand-action); font-weight:600; }
.chat-frame { flex:1; min-height:0; border:0; border-radius:0; }
#chat-status { margin:0; padding:0 20px; min-height:0; }
#chat-status:not(:empty) { padding:8px 20px; border-top:1px solid var(--border); }
unicom-chat-with-sidebar { --unicom-border-radius:0; --unicom-sidebar-header-bg:var(--surface); --unicom-sidebar-header-text:var(--brand-action); --unicom-sidebar-bg:var(--surface); --unicom-content-max-width:900px; }
.skeleton { display:block; border-radius:8px; background:linear-gradient(100deg,var(--soft) 20%,var(--border) 48%,var(--soft) 76%); background-size:240% 100%; animation:skeleton-wave 1.8s ease-in-out infinite; }
@keyframes skeleton-wave { from {background-position:100% 0} to {background-position:-100% 0} }
.page-skeleton { position:absolute; inset:64px 0 0; z-index:3; padding:60px 44px; background:var(--surface); }
.workspace:has(.assistant-page) .page-skeleton,.workspace:has(.auth-page) .page-skeleton { top:0; }
.sk-kicker { width:130px; height:12px; margin-bottom:24px; }
.sk-title { width:min(430px,85%); height:46px; margin-bottom:22px; }
.sk-line { width:65%; height:14px; margin-bottom:18px; }
.sk-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px; }
.sk-cards i { height:200px; }
.chat-skeleton { position:absolute; inset:0; display:grid; grid-template-columns:260px minmax(0,1fr); z-index:3; background:var(--surface); }
.sk-chat-sidebar { padding:26px 20px; border-right:1px solid var(--border); }
.sk-chat-sidebar>i:not(.sk-line) { height:58px; margin:16px 0; }
.sk-chat-body { display:flex; flex-direction:column; gap:24px; padding:40px max(24px,7%); }
.sk-bubble { height:68px; width:70%; flex-shrink:0; border-radius:16px; }
.sk-reply { width:85%; height:120px; align-self:flex-end; }
.sk-composer { margin-top:auto; width:100%; height:58px; flex-shrink:0; border-radius:20px; }
.chat-load-error { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; text-align:center; gap:20px; color:var(--muted); }
.marketing-page { background:var(--surface); }
.marketing-hero { display:grid; grid-template-columns:1.05fr 1fr; gap:28px; padding:76px clamp(28px,5vw,76px) 66px; align-items:center; max-width:1500px; margin:auto; }
.hero-copy h1 { font-size:clamp(38px,4.5vw,66px); font-weight:600; line-height:1.05; letter-spacing:-.055em; max-width:620px; margin:0 0 26px; }
.hero-copy .eyebrow { display:flex; align-items:center; gap:9px; letter-spacing:.015em; font-size:11px; margin-bottom:28px; }
.eyebrow-dot { width:6px; height:6px; border-radius:50%; background:var(--brand-action); flex-shrink:0; }
.hero-description { max-width:440px; font-size:16px; color:var(--muted); line-height:1.8; margin-bottom:30px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.hero-actions .button { min-height:48px; border-radius:12px; padding:13px 20px; }
.hero-footnote { margin:16px 0 0; font-size:11px; color:var(--muted); }
.product-art { position:relative; min-height:350px; border-radius:28px; overflow:hidden; background:color-mix(in srgb,var(--brand-primary) 5%,var(--surface)); }
.art-grid { position:absolute; inset:0; opacity:.45; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:34px 34px; mask-image:radial-gradient(ellipse,#000,transparent 75%); }
.art-halo { position:absolute; width:260px; height:260px; border:1px solid color-mix(in srgb,var(--brand-primary) 16%,transparent); border-radius:50%; top:40px; right:-70px; }
.art-halo::after { content:''; position:absolute; inset:24px; border:inherit; border-radius:inherit; }
.preview-card { position:absolute; background:var(--surface); border:1px solid var(--border); border-radius:18px; box-shadow:0 18px 45px #2027350a; }
.preview-note { top:45px; left:12%; width:68%; padding:24px; transform:rotate(-5deg); }
.preview-label { font-size:13px; font-weight:600; }
.preview-lines { display:grid; gap:10px; padding:22px 0; }
.preview-lines i { display:block; height:6px; border-radius:5px; width:90%; background:var(--soft); }
.preview-lines i:nth-child(2) { width:75%; }.preview-lines i:nth-child(3) { width:55%; }
.preview-check { display:inline-block; padding:7px 10px; border-radius:8px; background:color-mix(in srgb,var(--brand-accent) 12%,var(--surface)); color:var(--brand-action); font-size:10px; }
.preview-chat { display:flex; gap:12px; align-items:center; bottom:55px; left:8%; right:7%; padding:20px; transform:rotate(3deg); }
.preview-chat strong { font-size:12px; font-weight:600; }.preview-chat p { font-size:10px; margin:6px 0 0; color:var(--muted); }
.preview-avatar { display:grid; place-items:center; flex-shrink:0; width:38px; height:38px; border-radius:12px; background:var(--brand-primary); color:var(--brand-primary-text); font-size:24px; }
.preview-chip { position:absolute; top:24px; right:14px; padding:10px 14px; font-size:10px; color:var(--brand-primary-text); background:var(--brand-primary); border-radius:9px; transform:rotate(5deg); }.preview-chip span { margin-left:12px; }
.marketing-features { padding:56px clamp(28px,5vw,76px); border-top:1px solid var(--border); display:grid; grid-template-columns:1fr 2.5fr; gap:40px; max-width:1500px; margin:auto; }
.section-intro h2 { font-size:30px; line-height:1.15; }.section-intro .eyebrow { font-size:9px; }
.feature-columns { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.feature-number { display:block; font-size:11px; color:var(--brand-action); margin-bottom:26px; }.feature-columns h3 { font-size:15px; }.feature-columns p { font-size:13px; color:var(--muted); margin:0; }
.marketing-closing { margin:16px clamp(28px,5vw,76px) 50px; padding:40px; display:flex; justify-content:space-between; align-items:center; gap:24px; border:1px solid var(--border); border-radius:22px; background:var(--soft); }
.marketing-closing h2 { font-size:28px; margin-bottom:12px; }.marketing-closing p:not(.eyebrow) { color:var(--muted); font-size:13px; margin:0; }.marketing-closing .button { flex-shrink:0; }
.marketing-footer { display:flex; gap:16px; justify-content:space-between; padding:24px clamp(28px,5vw,76px); border-top:1px solid var(--border); color:var(--muted); font-size:11px; }
.auth-page { padding:24px; flex:1; background:var(--surface); }
.auth-layout { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1fr); min-height:calc(100dvh - 48px); max-width:1400px; margin:auto; gap:24px; }
.auth-story { display:flex; flex-direction:column; position:relative; overflow:hidden; padding:36px; border-radius:24px; background:color-mix(in srgb,var(--brand-primary) 6%,var(--surface)); }
.auth-story .brand { padding:0; margin-bottom:70px; }.auth-story h2 { font-size:clamp(32px,3.5vw,48px); line-height:1.1; font-weight:600; letter-spacing:-.045em; margin-bottom:22px; }.auth-story>div>p:not(.eyebrow) { font-size:14px; color:var(--muted); max-width:300px; }.auth-story .product-art { flex:1; min-height:310px; background:none; margin:8px -20px; }.auth-story-note { margin-top:30px; color:var(--muted); font-size:11px; }
.auth-form-panel { display:flex; flex-direction:column; padding:20px clamp(16px,3vw,48px); }
.auth-back { font-size:12px; color:var(--muted); align-self:flex-start; padding:8px 0; }
.auth-card { width:100%; max-width:400px; margin:auto; padding:40px 0; border:0; border-radius:0; }
.auth-card h1 { font-size:clamp(30px,3.2vw,42px); line-height:1.08; font-weight:600; }.auth-card .lead { font-size:13px; margin-bottom:28px; }.auth-card .eyebrow { font-size:9px; letter-spacing:.12em; }
.auth-card form { gap:10px; }.auth-card label { display:block; font-size:12px; margin-bottom:7px; }.auth-card input:not([type=hidden]) { background:var(--surface); border-radius:10px; min-height:48px; padding:12px 14px; font-size:14px; margin-bottom:6px; }.auth-card input:hover { border-color:color-mix(in srgb,var(--brand-primary) 40%,var(--border)); }.auth-card form>.button { margin-top:12px; min-height:48px; justify-content:space-between; border-radius:10px; }
.field-help { font-size:11px; line-height:1.5; color:var(--muted); }.field-help ul { padding-left:16px; margin:4px 0 10px; }.form-error ul { padding-left:18px; }
.auth-alternative { font-size:12px; color:var(--muted); margin:24px 0 0; }.auth-alternative a { color:var(--brand-action); font-weight:600; }.auth-guest-link { display:inline-block; padding:14px 0; color:var(--brand-action); font-size:12px; }.auth-footer { color:var(--muted); font-size:10px; padding:12px 0; }
@media(prefers-reduced-motion:reduce) { .skeleton { animation:none; background:var(--soft); } }
@media(min-width:761px) and (max-width:1100px) { .app-shell { --sidebar-width:200px; grid-template-columns:var(--sidebar-width) minmax(0,1fr); }.marketing-hero { gap:20px; padding:50px 28px; }.marketing-hero .product-art { min-height:320px; }.marketing-features { grid-template-columns:1fr; }.auth-story { padding:24px; }.auth-story .brand { margin-bottom:40px; } }
@media(max-width:760px) {
  .app-shell { display:block; padding-bottom:var(--mobile-bar); }
  body.mobile-menu .app-shell { padding-bottom:0; }
  .site-sidebar { position:sticky; top:0; z-index:10; height:var(--mobile-top); min-height:0; display:flex; flex-direction:row; align-items:center; gap:12px; padding:10px 16px; border:0; border-bottom:1px solid var(--border); }
  .site-sidebar>.brand { padding:0; margin-right:auto; font-size:15px; min-width:0; }.brand>span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .sidebar-footer { display:none; }.sidebar-account { padding:0; }.sidebar-account .account-actions { flex-wrap:nowrap; gap:0; }.sidebar-account .button { font-size:11px; padding:8px 10px; min-height:40px; }
  .workspace { min-height:calc(100dvh - var(--mobile-top) - var(--mobile-bar)); }.site-header { height:48px; min-height:48px; padding:0 20px; font-size:12px; }.header-tagline { display:none; }
  .mobile-tabs .menu-toggle { display:none; }
  .mobile-tabs #site-navigation { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); position:fixed; inset:auto 0 0; height:var(--mobile-bar); min-height:0; padding:7px max(8px,env(safe-area-inset-right,0px)) calc(7px + env(safe-area-inset-bottom,0px)) max(8px,env(safe-area-inset-left,0px)); margin:0; gap:4px; background:var(--surface); border-top:1px solid var(--border); z-index:15; }
  .mobile-tabs #site-navigation a { flex-direction:column; justify-content:center; gap:4px; height:calc(var(--mobile-nav-height) - 15px); min-height:0; padding:5px 3px; font-size:10px; line-height:14px; border:0; border-radius:var(--nav-item-radius); min-width:0; }.mobile-tabs #site-navigation a>span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.mobile-tabs .nav-symbol { width:21px; height:21px; flex-basis:21px; }
  .mobile-menu .menu-toggle { display:inline-flex; min-height:40px; padding:8px 10px; gap:6px; font-size:11px; }
  .mobile-menu #site-navigation { position:absolute; top:calc(var(--mobile-top) - 1px); left:0; right:0; display:none; margin:0; padding:12px 16px; border-bottom:1px solid var(--border); background:var(--surface); max-height:calc(100dvh - var(--mobile-top)); overflow:auto; box-shadow:0 12px 20px #20273508; }
  .mobile-menu .menu-open #site-navigation { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .workspace:has(.assistant-page) { height:calc(100dvh - var(--mobile-top) - var(--mobile-bar)); }
  .mobile-menu .workspace:has(.assistant-page) { height:calc(100dvh - var(--mobile-top)); }
  .assistant-page { height:auto; min-height:0; padding:0; }.assistant-heading { min-height:54px; padding:9px 16px; }.assistant-heading h1 { font-size:14px; }.assistant-heading p { font-size:10px; }.assistant-heading .brand-mark,.assistant-heading .brand-logo { display:none; }.assistant-actions .button { min-height:36px; padding:7px 10px; }
  .guest-notice { padding:2px 16px; font-size:10px; gap:10px; }.guest-notice>span { max-width:180px; }.guest-notice a { padding:10px 0; }
  .chat-frame { border-radius:0; }.chat-skeleton { grid-template-columns:1fr; }.sk-chat-sidebar { display:none; }.sk-chat-body { padding:26px 20px; gap:20px; }.sk-bubble { height:48px; }.sk-reply { height:90px; }
  .page-skeleton { padding:40px 24px; top:48px; }.sk-cards { grid-template-columns:1fr; gap:14px; margin-top:30px; }.sk-cards i { height:110px; }
  .marketing-hero { grid-template-columns:1fr; padding:42px 24px 32px; gap:32px; }.hero-copy h1 { font-size:46px; max-width:420px; }.hero-copy .eyebrow { font-size:10px; margin-bottom:22px; }.hero-description { font-size:14px; margin-bottom:24px; }.hero-actions { gap:4px; }.hero-actions .button { padding:12px 16px; font-size:12px; }.hero-footnote { font-size:10px; }.marketing-hero .product-art { min-height:300px; }.preview-note { padding:20px; top:30px; }.preview-chat { bottom:30px; }.preview-chip { top:16px; font-size:9px; }
  .marketing-features { grid-template-columns:1fr; padding:34px 24px; gap:24px; }.section-intro h2 { font-size:28px; }.feature-columns { grid-template-columns:1fr; gap:24px; }.feature-columns article { padding-left:44px; position:relative; }.feature-number { position:absolute; left:0; top:4px; margin:0; }.feature-columns h3 { margin-bottom:8px; }
  .marketing-closing { flex-direction:column; align-items:flex-start; margin:8px 24px 32px; padding:26px; }.marketing-closing h2 { font-size:26px; }.marketing-footer { padding:24px; font-size:10px; flex-wrap:wrap; }
  .auth-page { padding:0; }.auth-layout { display:block; min-height:calc(100dvh - var(--mobile-top) - var(--mobile-bar)); }.auth-story { display:none; }.auth-form-panel { padding:22px 28px; min-height:inherit; }.auth-card { padding:34px 0; max-width:420px; }.auth-card h1 { font-size:36px; }.auth-card .lead { font-size:13px; }.auth-footer { padding:16px 0; }
}

/* Signals logo-aligned brand surfaces */
.brand-logo { background:#000; border-radius:8px; object-fit:contain; }
.site-sidebar { background:#080b0a; color:#fff; border-color:#253129; }
.site-sidebar .brand { color:#fff; }
.site-sidebar #site-navigation a { color:#bdcbc3; }
.site-sidebar #site-navigation a[aria-current], .site-sidebar #site-navigation a:hover { color:var(--brand-primary); background:#102b1d; border-color:#245b3e; }
.site-sidebar .sidebar-footer { color:#bdcbc3; border-color:#253129; }
.site-sidebar .sidebar-footer strong { color:#fff; }
.site-sidebar .sidebar-footer a { color:var(--brand-primary); }
.site-sidebar .sidebar-account .secondary { background:#151b18; color:#fff; border-color:#34453a; }
.marketing-hero [aria-label="Illustrative Signals, not real members"] .eyebrow { color:#a6c5b4; }
@media(max-width:760px) {
 .site-sidebar #site-navigation { background:#080b0a; }
 .site-sidebar .menu-toggle { color:#fff; }
}
