/* Alex Business Copilot first-run overview: visual introduction before existing chat.
   Does not modify the authenticated API, chat state, files or billing rules. */

/* Gate only the two Alex surfaces, not their parents or unrelated panels. */
html body .app-shell [data-panel="copilot"].gc-alex-intro-mode #gcCopilotShell{
 display:none!important;
}
html body .app-shell [data-panel="copilot"].gc-alex-chat-open #gcAlexOverview{
 display:none!important;
}
html body .app-shell [data-panel="copilot"].gc-alex-intro-mode #gcAlexOverview{
 display:block!important;
}
html body .app-shell [data-panel="copilot"].gc-alex-chat-open #gcCopilotShell:not([hidden]){
 display:flex!important;
}
.gc-alex-overview{
 width:100%;max-width:1120px;margin:0 auto;
 color:var(--text-primary,#171b2c);
}
.gc-alex-intro-hero{
 position:relative;isolation:isolate;overflow:hidden;
 padding:clamp(22px,4vw,44px);
 background:linear-gradient(121deg,#141a36 0%,#1d2852 58%,#342660 100%);
 border:1px solid rgba(158,155,244,.25);border-radius:23px;
 box-shadow:0 18px 45px rgba(16,26,72,.16);color:#f8faff;
}
.gc-alex-intro-hero:before{content:"";position:absolute;z-index:-1;right:-108px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(133,100,255,.32),transparent 67%);pointer-events:none}
.gc-alex-intro-brand{display:flex;align-items:center;gap:15px;margin-bottom:24px}
.gc-alex-intro-avatar{display:grid;place-items:center;flex:0 0 58px;width:58px;height:58px;border-radius:18px;background:linear-gradient(137deg,#6678ff,#8051e9);border:1px solid rgba(255,255,255,.27);box-shadow:0 9px 28px rgba(33,21,102,.25)}
.gc-alex-intro-avatar svg{width:30px;height:30px;stroke-width:1.9}
.gc-alex-intro-brand strong{display:block;font-size:1.16rem;font-weight:850;letter-spacing:-.025em;line-height:1.25;color:#fff}
.gc-alex-intro-brand small{display:block;margin-top:5px;color:#ccd5fa;font-weight:600;font-size:.76rem}
.gc-alex-intro-eyebrow{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid rgba(165,178,255,.31);border-radius:999px;background:rgba(255,255,255,.07);color:#dce5ff;font-size:.68rem;font-weight:800;letter-spacing:.04em}
.gc-alex-intro-hero h2{font-size:clamp(1.65rem,3.3vw,2.45rem);font-weight:880;letter-spacing:-.045em;line-height:1.18;margin:17px 0 12px;max-width:690px;color:#fff}
.gc-alex-intro-hero>p{font-size:clamp(.83rem,1.25vw,.98rem);line-height:1.75;color:#d9dff6;max-width:650px;margin:0}
.gc-alex-intro-mini{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.gc-alex-intro-mini span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:10px;background:rgba(255,255,255,.09);color:#e6e9ff;font-size:.72rem;font-weight:650;border:1px solid rgba(201,201,255,.12)}
.gc-alex-intro-mini svg{width:15px;height:15px;stroke-width:2}
.gc-alex-intro-section-head{margin:28px 0 15px}
.gc-alex-intro-section-head h3{font-size:1.17rem;letter-spacing:-.025em;margin:0 0 5px;font-weight:820;color:var(--text-primary)}
.gc-alex-intro-section-head p{font-size:.79rem;line-height:1.6;color:var(--text-secondary);margin:0}
.gc-alex-intro-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}
.gc-alex-intro-cap{display:flex;align-items:flex-start;gap:14px;min-height:121px;background:var(--bg-surface);border:1px solid var(--border-light);border-radius:17px;padding:21px;box-shadow:0 4px 16px rgba(12,22,57,.035)}
.gc-alex-intro-cap>span{flex:0 0 43px;width:43px;height:43px;display:grid;place-items:center;border-radius:13px;background:color-mix(in srgb,var(--primary) 12%,var(--bg-surface));color:var(--primary)}
.gc-alex-intro-cap>span svg{height:23px;width:23px;stroke-width:1.8}
.gc-alex-intro-cap:nth-child(2)>span{color:#7c3aed;background:rgba(124,58,237,.11)}
.gc-alex-intro-cap:nth-child(3)>span{color:#0d9488;background:rgba(13,148,136,.1)}
.gc-alex-intro-cap:nth-child(4)>span{color:#db7820;background:rgba(219,120,32,.10)}
.gc-alex-intro-cap b{display:block;font-size:.93rem;color:var(--text-primary);margin:0 0 5px;line-height:1.35}
.gc-alex-intro-cap p{margin:0;color:var(--text-secondary);font-size:.76rem;line-height:1.65}
.gc-alex-intro-action{
 margin:23px 0 9px;padding:22px;border-radius:18px;
 background:linear-gradient(118deg,color-mix(in srgb,var(--bg-surface) 94%,#6172f6 6%),color-mix(in srgb,var(--bg-surface) 92%,#8b5cf6 8%));
 border:1px solid color-mix(in srgb,var(--border-light) 72%,#8882dc 28%);
 display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap
}
.gc-alex-intro-action b{display:block;font-size:.95rem;line-height:1.35;color:var(--text-primary)}
.gc-alex-intro-action p{color:var(--text-secondary);font-size:.76rem;line-height:1.65;margin:5px 0 0;max-width:540px}
#gcAlexStartChat{
 display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;
 padding:13px 18px;border:0;border-radius:13px;cursor:pointer;
 color:#fff;background:linear-gradient(125deg,#6949e8,#2864e9);
 box-shadow:0 7px 21px rgba(71,79,224,.20);font-size:.79rem;font-weight:800;transition:filter .16s,transform .16s
}
#gcAlexStartChat:hover{filter:brightness(1.08);transform:translateY(-1px)}
#gcAlexStartChat:focus-visible{outline:3px solid #a69aff;outline-offset:3px}
#gcAlexStartChat svg{width:17px;height:17px}
.gc-alex-intro-note{display:flex;align-items:flex-start;gap:8px;color:var(--text-secondary);font-size:.7rem;line-height:1.6;margin:11px 1px 18px}
.gc-alex-intro-note svg{flex:0 0 16px;width:16px;height:16px;stroke-width:1.8;margin-top:2px}
@media(max-width:680px){
 .gc-alex-intro-hero{border-radius:17px;padding:21px 18px}
 .gc-alex-intro-brand{margin-bottom:20px;gap:11px}
 .gc-alex-intro-avatar{flex-basis:50px;width:50px;height:50px;border-radius:15px}
 .gc-alex-intro-avatar svg{height:25px;width:25px}
 .gc-alex-intro-hero h2{font-size:1.66rem}
 .gc-alex-intro-mini{margin-top:20px;gap:7px}
 .gc-alex-intro-mini span{font-size:.67rem;padding:7px 8px}
 .gc-alex-intro-grid{grid-template-columns:1fr;gap:10px}
 .gc-alex-intro-cap{min-height:0;padding:16px;border-radius:14px}
 .gc-alex-intro-section-head{margin:24px 0 12px}
 .gc-alex-intro-action{display:block;padding:17px;margin-top:18px}
 #gcAlexStartChat{margin-top:16px;width:100%;min-height:52px;font-size:.78rem;text-align:center}
}
@media(prefers-reduced-motion:reduce){#gcAlexStartChat{transition:none}}


/* 2026-10-17 | Alex executive polish + isolated mobile touch scrolling.
   Scoped exclusively to the Alex intro; existing chat/layout remains intact. */
html body .app-shell #gcCopilotPage.gc-alex-intro-mode {
  min-width:0!important;
}
html body .app-shell #gcAlexOverview {
  box-sizing:border-box;
  min-width:0;
  padding:2px 2px 15px;
}
html body .app-shell #gcAlexOverview .gc-alex-intro-hero {
  position:relative;
  isolation:isolate;
  min-height:284px;
  box-sizing:border-box;
  padding:clamp(26px,4.5vw,52px);
  border:1px solid rgba(178,157,255,.27);
  border-radius:25px;
  background:
    radial-gradient(ellipse 45% 95% at 94% 28%,rgba(137,87,255,.30),transparent 75%),
    radial-gradient(ellipse 55% 85% at 85% 100%,rgba(246,91,156,.18),transparent 78%),
    linear-gradient(124deg,#10162d 0%,#1b2144 59%,#29214b 100%);
  box-shadow:0 22px 58px rgba(12,16,42,.19),inset 0 1px 0 rgba(255,255,255,.09);
}
html body .app-shell #gcAlexOverview .gc-alex-intro-hero::after {
  content:"";position:absolute;pointer-events:none;z-index:-1;
  width:min(32vw,310px);height:min(32vw,310px);right:4%;top:8%;
  border:1px solid rgba(210,192,255,.13);border-radius:50%;
  box-shadow:0 0 0 24px rgba(203,182,255,.025),0 0 0 50px rgba(203,182,255,.016),
    inset 0 0 70px rgba(131,87,255,.045);
  background:radial-gradient(circle at 48% 46%,rgba(183,145,255,.08),transparent 66%);
}
html body .app-shell #gcAlexOverview .gc-alex-intro-brand{gap:15px;margin-bottom:26px}
html body .app-shell #gcAlexOverview .gc-alex-intro-avatar{
  width:62px;height:62px;flex-basis:62px;border-radius:20px;
  background:linear-gradient(145deg,#8b78ff,#5e53db 75%);
  box-shadow:0 12px 35px rgba(100,79,230,.36),inset 0 1px 1px rgba(255,255,255,.34);
}
html body .app-shell #gcAlexOverview .gc-alex-intro-brand strong{font-size:1.26rem;letter-spacing:-.04em}
html body .app-shell #gcAlexOverview .gc-alex-intro-brand small{font-size:.79rem;letter-spacing:.005em;color:#c8cff5}
html body .app-shell #gcAlexOverview .gc-alex-intro-eyebrow{
  border-color:rgba(215,195,255,.21);background:rgba(175,144,255,.13);color:#e5d7ff;
  font-size:.7rem;letter-spacing:.055em;padding:8px 13px;
}
html body .app-shell #gcAlexOverview .gc-alex-intro-hero h2{
  max-width:650px;font-size:clamp(1.85rem,3.5vw,2.9rem);line-height:1.13;
  letter-spacing:-.055em;font-weight:850;margin:20px 0 15px;
  text-wrap:balance;
}
html body .app-shell #gcAlexOverview .gc-alex-intro-hero>p{
  font-size:clamp(.85rem,1.1vw,.97rem);line-height:1.8;max-width:590px;color:#cfd6f3;
}
html body .app-shell #gcAlexOverview .gc-alex-intro-mini{margin-top:30px;gap:9px}
html body .app-shell #gcAlexOverview .gc-alex-intro-mini span{
  border:1px solid rgba(218,217,255,.14);background:rgba(244,240,255,.07);
  border-radius:999px;padding:9px 13px;font-size:.71rem;backdrop-filter:blur(9px);
}
html body .app-shell #gcAlexOverview .gc-alex-intro-section-head{margin:34px 0 18px}
html body .app-shell #gcAlexOverview .gc-alex-intro-section-head h3{
  font-size:1.31rem;line-height:1.3;letter-spacing:-.035em;font-weight:850;
}
html body .app-shell #gcAlexOverview .gc-alex-intro-section-head p{font-size:.81rem}
html body .app-shell #gcAlexOverview .gc-alex-intro-grid{gap:15px}
html body .app-shell #gcAlexOverview .gc-alex-intro-cap{
  position:relative;overflow:hidden;min-width:0;
  padding:23px;min-height:132px;border-radius:19px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--bg-surface) 98%,#b8b7ed 2%),var(--bg-surface));
  border:1px solid color-mix(in srgb,var(--border-light) 87%,#bdb5ed 13%);
  box-shadow:0 8px 24px rgba(23,28,66,.045),inset 0 1px 0 rgba(255,255,255,.035);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
html body .app-shell #gcAlexOverview .gc-alex-intro-cap::before{
  content:"";position:absolute;left:0;top:19px;bottom:19px;width:3px;
  border-radius:0 5px 5px 0;
  background:linear-gradient(#9178ff,#bb90fc);opacity:.7;
}
html body .app-shell #gcAlexOverview .gc-alex-intro-cap:nth-child(2)::before{background:linear-gradient(#9d78ef,#d09df4)}
html body .app-shell #gcAlexOverview .gc-alex-intro-cap:nth-child(3)::before{background:linear-gradient(#0dbda4,#8fe6cc)}
html body .app-shell #gcAlexOverview .gc-alex-intro-cap:nth-child(4)::before{background:linear-gradient(#ee964d,#f6c284)}
html body .app-shell #gcAlexOverview .gc-alex-intro-cap>span{
  flex-basis:48px;width:48px;height:48px;border-radius:15px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
html body .app-shell #gcAlexOverview .gc-alex-intro-cap b{font-size:.98rem;font-weight:800;letter-spacing:-.02em}
html body .app-shell #gcAlexOverview .gc-alex-intro-cap p{font-size:.8rem;line-height:1.72}
@media(hover:hover) and (pointer:fine){
 html body .app-shell #gcAlexOverview .gc-alex-intro-cap:hover{
   transform:translateY(-3px);border-color:color-mix(in srgb,var(--border-light) 58%,#9280ee 42%);
   box-shadow:0 18px 38px rgba(24,22,72,.105);
 }
}
html body .app-shell #gcAlexOverview .gc-alex-intro-action{
  margin:25px 0 10px;padding:25px 26px;gap:20px;border-radius:20px;
  background:linear-gradient(115deg,color-mix(in srgb,var(--bg-surface) 93%,#a28bf7 7%),
    color-mix(in srgb,var(--bg-surface) 89%,#f7a0c1 11%));
  border:1px solid color-mix(in srgb,var(--border-light) 72%,#c1a3e9 28%);
  box-shadow:0 8px 25px rgba(40,32,90,.035);
}
html body .app-shell #gcAlexOverview .gc-alex-intro-action b{font-size:1.01rem;letter-spacing:-.025em}
html body .app-shell #gcAlexOverview .gc-alex-intro-action p{font-size:.8rem}
html body .app-shell #gcAlexOverview #gcAlexStartChat{
  min-height:54px;border-radius:14px;padding:15px 21px;flex-shrink:0;
  font-size:.81rem;letter-spacing:-.01em;
  background:linear-gradient(110deg,#df3f99,#f5666c 58%,#fb834f)!important;
  box-shadow:0 12px 26px rgba(226,70,133,.25),inset 0 1px 0 rgba(255,255,255,.23);
}
html body .app-shell #gcAlexOverview #gcAlexStartChat:hover{
  filter:brightness(1.06);transform:translateY(-2px)
}
html body .app-shell #gcAlexOverview .gc-alex-intro-note{font-size:.73rem;line-height:1.7;margin:13px 4px 22px}
@media(max-width:820px){
  /* Native document/dashboard scrolling: no nested viewport-height panel.
     Mobile viewport clipping previously hid cards and left a false empty footer. */
  html body .app-shell #gcCopilotPage.gc-alex-intro-mode.active{
    box-sizing:border-box!important;
    display:block!important;
    height:auto!important;min-height:0!important;max-height:none!important;
    overflow:visible!important;
    overscroll-behavior-y:auto!important;
    touch-action:pan-y!important;
    scroll-padding-bottom:0!important;
    padding-bottom:0!important;
  }
  html body .app-shell #gcCopilotPage.gc-alex-intro-mode.active #gcAlexOverview{
    display:block!important;height:auto!important;min-height:0!important;
    max-height:none!important;overflow:visible!important;
    padding-bottom:18px!important;
    touch-action:pan-y!important;
  }
  /* Keep dashboard controls visible as the Alex document flows under them.
     Restrict overrides to active Alex instead of changing other screens. */
  html body .app-shell:has(#gcCopilotPage.gc-alex-intro-mode.active) .gc-premium-topbar{
    position:sticky!important;top:0!important;
    z-index:1150!important;
    isolation:isolate;
    background:var(--gc-card,var(--bg-surface))!important;
  }
  html body .app-shell:has(#gcCopilotPage.gc-alex-intro-mode.active) .mobile-bottom-nav{
    display:flex!important;
    position:fixed!important;
    z-index:1200!important;
    bottom:calc(6px + env(safe-area-inset-bottom,0px))!important;
    visibility:visible!important;
    opacity:1!important;
  }
  html body .app-shell #gcAlexOverview .gc-alex-intro-hero{
    min-height:0;padding:26px 21px;border-radius:20px;
  }
  html body .app-shell #gcAlexOverview .gc-alex-intro-hero::after{
    width:160px;height:160px;right:-55px;top:65px;opacity:.58;
  }
  html body .app-shell #gcAlexOverview .gc-alex-intro-hero h2{
    font-size:clamp(1.67rem,6vw,2.2rem);line-height:1.17;
  }
  html body .app-shell #gcAlexOverview .gc-alex-intro-grid{grid-template-columns:1fr;gap:12px}
  html body .app-shell #gcAlexOverview .gc-alex-intro-cap{min-height:0;padding:18px}
  html body .app-shell #gcAlexOverview .gc-alex-intro-action{padding:19px;display:block}
  html body .app-shell #gcAlexOverview #gcAlexStartChat{
    width:100%;margin-top:17px;min-height:56px;font-size:.8rem;white-space:normal;
  }
}
@media(max-width:390px){
  html body .app-shell #gcAlexOverview .gc-alex-intro-hero{padding:21px 17px}
  html body .app-shell #gcAlexOverview .gc-alex-intro-brand{gap:11px;margin-bottom:19px}
  html body .app-shell #gcAlexOverview .gc-alex-intro-avatar{width:49px;height:49px;flex-basis:49px;border-radius:16px}
  html body .app-shell #gcAlexOverview .gc-alex-intro-brand strong{font-size:1.08rem}
  html body .app-shell #gcAlexOverview .gc-alex-intro-brand small{font-size:.7rem}
  html body .app-shell #gcAlexOverview .gc-alex-intro-mini{gap:7px;margin-top:19px}
  html body .app-shell #gcAlexOverview .gc-alex-intro-mini span{padding:7px 9px;font-size:.65rem}
  html body .app-shell #gcAlexOverview .gc-alex-intro-section-head{margin:25px 0 13px}
  html body .app-shell #gcAlexOverview .gc-alex-intro-cap{padding:16px}
}
@media(prefers-reduced-motion:reduce){
 html body .app-shell #gcAlexOverview .gc-alex-intro-cap,
 html body .app-shell #gcAlexOverview #gcAlexStartChat{transition:none!important;transform:none!important}
}


/* Alex intro has a high-specificity nav override. Keep its five-item grid,
   not a flex row of five full-width grid-era buttons. */
@media(max-width:600px){
  html body .app-shell:has(#gcCopilotPage.gc-alex-intro-mode.active) .mobile-bottom-nav:not([hidden]){
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-template-rows:minmax(0,1fr)!important;
    align-items:stretch!important;
    gap:3px!important;
  }
  html body .app-shell:has(#gcCopilotPage.gc-alex-intro-mode.active) .mobile-bottom-nav>.mobile-nav-item{
    min-width:0!important;width:100%!important;max-width:100%!important;
    grid-column:auto!important;
  }
}