/* Screenshot theme shared with the React workspace's semantic palette. */
:root {
  --account-canvas: oklch(0.978 0.009 295);
  --account-surface: oklch(1 0 0);
  --account-soft: oklch(0.981 0.006 295);
  --account-selected: oklch(0.951 0.012 295);
  --account-chrome: oklch(1 0 0);
  --account-nav-active: oklch(0.19 0 0);
  --account-nav-active-ink: oklch(1 0 0);
  --account-nav-child-ink: oklch(0.38 0 0);
  --account-nav-child-muted: oklch(0.49 0 0);
  --account-nav-child-divider: oklch(0.88 0 0);
  --account-chrome-border: oklch(0.905 0.014 290);
  --account-ink: oklch(0.21 0.028 263);
  --account-action: oklch(0.19 0.028 263);
  --account-accent: oklch(0.42 0.18 305);
  --account-border: oklch(0.887 0.012 275);
  --account-chat-user: oklch(0.93 0.005 285);
  --account-chat-muted: oklch(0.54 0.015 275);
  --account-chat-tool: oklch(0.92 0.015 180);
  --account-chat-glow-start: oklch(0.8 0.12 355);
  --account-chat-glow-end: oklch(0.64 0.2 280);
  --account-chat-shadow: 0 0 4px 2px color-mix(in oklab, var(--account-chat-glow-end) 35%, transparent);
}
body { background: var(--account-canvas) !important; color: var(--account-ink); }
[style*="background:#EEF2F8"], [style*="background:#E9F0F7"],
[style*="background:#F4F3EE"], [style*="background: rgb(238, 242, 248)"],
[style*="background: rgb(233, 240, 247)"], [style*="background: rgb(244, 243, 238)"] { background: var(--account-canvas) !important; }
[style*="background:#F1F5F9"], [style*="background:#FAFBFC"],
[style*="background: rgb(241, 245, 249)"], [style*="background: rgb(250, 251, 252)"] { background: var(--account-soft) !important; }
nav [style*="background:#EFF5FF"], nav [style*="background:#EAF2FF"],
nav [style*="background:#E8F1FF"], nav [style*="background:#F1F5F9"],
nav [style*="background: rgb(239, 245, 255)"], nav [style*="background: rgb(234, 242, 255)"],
nav [style*="background: rgb(232, 241, 255)"], nav [style*="background: rgb(241, 245, 249)"] {
  background: var(--account-selected) !important;
  color: var(--account-ink) !important;
}
button[style*="background:#0077FF"], button[style*="background:linear-gradient(90deg,#092CEF"],
button[style*="background: rgb(0, 119, 255)"], button[style*="background: rgb(26, 26, 26)"],
button[style*="background: linear-gradient(90deg, rgb(9, 44, 239)"] {
  background: var(--account-action) !important;
  color: var(--account-surface) !important;
}
a, [style*="color:#0077FF"], [style*="color: rgb(0, 119, 255)"] { color: var(--account-accent) !important; }
a:hover { color: var(--account-ink) !important; }
:focus-visible { outline-color: var(--account-accent) !important; }/* Side assistant chat drawer matches the main page canvas. */
aside[aria-label="Network Solutions Assistant"],
aside[aria-label="Network Solutions Assistant"] [data-convo] {
  background: var(--account-canvas) !important;
  border-left-color: var(--account-border) !important;
}
aside[aria-label="Network Solutions Assistant"] [style*="border-bottom:1px solid #F1F5F9"],
aside[aria-label="Network Solutions Assistant"] [style*="border-top:1px solid #F1F5F9"] {
  border-color: var(--account-border) !important;
}
.account-chat-header { display:flex; justify-content:flex-end; gap:8px; padding:16px; }
aside[aria-label="Network Solutions Assistant"] [data-convo] > :first-child { margin-top:auto; }
.account-chat-icon { display:grid; place-items:center; width:28px; height:28px; flex:none; border:0; border-radius:50%; background:transparent; color:var(--account-chat-muted); cursor:pointer; font-size:19px; }
.account-chat-icon:hover { background:var(--account-selected); }
.account-chat-user { align-self:flex-end; max-width:86%; background:var(--account-chat-user); color:var(--account-ink); padding:10px 14px; border-radius:12px; font-size:14px; line-height:1.5; }
.account-chat-response { display:flex; flex-direction:column; gap:12px; color:var(--account-ink); padding:4px 0; }
.account-chat-response > p { color:var(--account-ink) !important; font-size:14px !important; }
.account-chat-actions { display:flex; align-items:center; gap:6px; margin-top:4px; }
.account-chat-actions .account-chat-icon:first-child { margin-left:auto; }
.account-chat-footer { flex:none; padding:14px 20px 22px; }
.account-chat-prompt { padding:2px; border-radius:18px; background:linear-gradient(115deg,var(--account-chat-glow-start),var(--account-chat-glow-end)); box-shadow:var(--account-chat-shadow); }
.account-chat-prompt-inner { padding:12px; border-radius:16px; background:var(--account-surface); }
.account-chat-textarea { width:100%; min-height:64px; resize:none; border:0; outline:none; background:transparent; color:var(--account-ink); font:inherit; font-size:14px; line-height:1.5; box-sizing:border-box; }
.account-chat-textarea:focus-visible { outline:none; }
.account-chat-tools { display:flex; align-items:center; gap:8px; position:relative; }
.account-chat-skills summary { list-style:none; cursor:pointer; padding:4px 7px; border-radius:4px; background:var(--account-chat-tool); color:var(--account-ink); font-size:12px; }
.account-chat-skills summary::-webkit-details-marker { display:none; }
.account-chat-suggestions { position:absolute; bottom:38px; left:0; right:0; z-index:3; padding:8px; display:flex; flex-direction:column; gap:5px; background:var(--account-surface); border:1px solid var(--account-border); border-radius:8px; }
.account-chat-suggestions button { text-align:left; background:transparent; color:var(--account-ink); border:0; padding:8px; font-size:13px; cursor:pointer; }
.account-chat-agent { margin-left:auto; border:1px solid var(--account-border); background:var(--account-surface); color:var(--account-ink); border-radius:999px; font-size:12px; padding:5px 8px; max-width:140px; }
.account-chat-skill-chip { display:flex; width:fit-content; max-width:100%; align-items:center; gap:6px; margin:0 0 8px; padding:4px 8px; border-radius:4px; background:var(--account-chat-tool); color:var(--account-ink); font-size:12px; font-weight:500; }
.account-chat-skill-chip-bolt { flex:none; font-size:12px; line-height:1; }
.account-chat-skill-chip-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-chat-skill-chip-x { flex:none; border:0; background:transparent; color:var(--account-chat-muted); cursor:pointer; font-size:14px; line-height:1; padding:0 2px; border-radius:4px; }
.account-chat-skill-chip-x:hover { background:color-mix(in oklab, var(--account-ink) 10%, transparent); color:var(--account-ink); }
.account-chat-skill-wrap { position:relative; min-width:0; }
.account-chat-skill-btn { border:0; border-radius:4px; background:var(--account-chat-tool); color:var(--account-ink); font:inherit; font-size:12px; padding:5px 9px; cursor:pointer; white-space:nowrap; }
.account-chat-skill-pop { position:absolute; bottom:calc(100% + 10px); left:0; width:250px; max-width:70vw; z-index:5; background:var(--account-surface); border:1px solid var(--account-border); border-radius:10px; box-shadow:0 16px 40px rgba(16,24,40,.18); overflow:hidden; }
.account-chat-skill-pop-head { padding:8px 10px 6px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--account-chat-muted); border-bottom:1px solid var(--account-border); }
.account-chat-skill-pop-list { max-height:240px; overflow-y:auto; padding:4px; display:flex; flex-direction:column; gap:2px; }
.account-chat-skill-opt { text-align:left; border:0; background:transparent; color:var(--account-ink); font:inherit; font-size:13px; padding:8px; border-radius:6px; cursor:pointer; }
.account-chat-skill-opt:hover { background:var(--account-selected); }
.account-chat-skill-opt[aria-selected="true"] { background:var(--account-selected); font-weight:600; }
.account-chat-agent { min-width:0; cursor:pointer; }
.account-chat-send { border:0; border-radius:50%; width:30px; height:30px; flex:none; background:var(--account-nav-active); color:var(--account-nav-active-ink); font-size:20px; cursor:pointer; }
.account-chat-send:disabled { opacity:.35; cursor:default; }
.account-chat-disclaimer { text-align:center; color:var(--account-chat-muted); margin-top:12px; font-size:12px; line-height:1.5; }

/* Home greeting above the ask box: personalised and softly animated. */
.hero-greet { display:flex; flex-direction:column; align-items:center; gap:12px; width:100%; }
.hero-greet-title { position:relative; z-index:0; margin:0; max-width:780px; font-family:'Poppins',sans-serif; font-size:clamp(26px,3.3vw,38px); font-weight:700; line-height:1.18; letter-spacing:-0.022em; text-align:center; text-wrap:balance; color:var(--account-ink); opacity:0; transform:translateY(9px); animation:hero-greet-rise .6s ease-out .1s forwards; }
.hero-greet-name { position:relative; display:inline-block; padding:0 2px 3px; background-image:linear-gradient(96deg,color-mix(in oklab, var(--account-chat-glow-start) 78%, #000),var(--account-accent) 46%,var(--account-action)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero-greet-name::after { content:""; position:absolute; left:2px; right:2px; bottom:-5px; height:4px; border-radius:99px; opacity:.6; background:linear-gradient(90deg,var(--account-chat-glow-start),var(--account-chat-glow-end)); transform:scaleX(0); transform-origin:left; animation:hero-greet-underline .8s cubic-bezier(.2,.8,.2,1) .55s forwards; }
.hero-greet-ask { font-weight:500; }
.hero-greet-hl { position:relative; margin-left:-7px; padding-left:7px; }
.hero-greet-hl::before { content:""; position:absolute; z-index:-1; left:-7px; right:-12px; bottom:6%; height:78%; border-radius:99px; background:linear-gradient(90deg,color-mix(in oklab, var(--account-accent) 27%, transparent),color-mix(in oklab, var(--account-chat-glow-start) 30%, transparent)); box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--account-accent) 12%, transparent); transform:scaleX(0); transform-origin:left; animation:hero-greet-swipe .7s cubic-bezier(.2,.8,.2,1) 1.05s forwards; }
@keyframes hero-greet-rise { to { opacity:1; transform:none; } }
@keyframes hero-greet-underline { to { transform:scaleX(1); } }
@keyframes hero-greet-swipe { to { transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-greet-title { opacity:1; transform:none; animation:none; }
  .hero-greet-name::after { transform:scaleX(1); animation:none; }
  .hero-greet-hl::before { transform:scaleX(1); animation:none; }
}

/* ===== Home page swag (matches Hi Flora hero) ===== */
.home-h2 { position:relative; display:inline-block; }
.home-h2::after { content:""; position:absolute; left:2px; right:2px; bottom:-4px; height:3px; border-radius:99px; opacity:.55; background:linear-gradient(90deg,var(--account-chat-glow-start),var(--account-chat-glow-end)); transform:scaleX(0); transform-origin:left; animation:hero-greet-underline .8s cubic-bezier(.2,.8,.2,1) .35s forwards; }

.home-card { transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease; animation:home-card-rise .55s cubic-bezier(.2,.8,.2,1) both; }
.home-card:hover { transform:translateY(-3px); box-shadow:0 14px 34px -14px rgba(18,32,58,.22), 0 0 0 1px color-mix(in oklab, var(--account-accent) 22%, transparent); }
@keyframes home-card-rise { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.home-stagger > *:nth-child(1) { animation-delay:.05s; }
.home-stagger > *:nth-child(2) { animation-delay:.13s; }
.home-stagger > *:nth-child(3) { animation-delay:.21s; }
.home-stagger > *:nth-child(4) { animation-delay:.29s; }
.home-stagger > *:nth-child(5) { animation-delay:.37s; }
.home-stagger > *:nth-child(6) { animation-delay:.45s; }

.home-chip { transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.home-chip:hover { transform:translateY(-2px); border-color:color-mix(in oklab, var(--account-accent) 35%, transparent) !important; box-shadow:0 6px 16px -6px color-mix(in oklab, var(--account-accent) 35%, transparent); }

.home-feature { position:relative; overflow:hidden; }
.home-feature::before { content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:conic-gradient(from 210deg,#DF44F3,#FFA245,#FF98B5,#092CEF,#20ABD2,#DF44F3); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:.35; pointer-events:none; }

.home-sk { position:relative; overflow:hidden; }
.home-sk::after { content:""; position:absolute; inset:0; background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.85) 50%,transparent 80%); transform:translateX(-100%); animation:home-sk-shimmer 2.6s ease-in-out infinite; }
@keyframes home-sk-shimmer { 55% { transform:translateX(100%); } 100% { transform:translateX(100%); } }

@media (prefers-reduced-motion: reduce) {
  .home-card { animation:none; }
  .home-card:hover { transform:none; }
  .home-h2::after { transform:scaleX(1); animation:none; }
  .home-sk::after { animation:none; }
}

/* ===== Left navigation upgrade ===== */
nav[aria-label="Main"] { scrollbar-width:none; transition:width .22s cubic-bezier(.2,.8,.2,1); }
nav[aria-label="Main"]::-webkit-scrollbar { display:none; }
.ns-nav-item { position:relative; cursor:pointer; transition:background .16s ease, color .16s ease, transform .16s ease; }
.ns-nav-item:not(.is-active):hover { background:var(--account-selected) !important; }
.ns-nav-item:not(.is-active):hover > span:first-child { transform:translateX(1px); }
.ns-nav-item > span:first-child { transition:transform .16s ease; }
.ns-nav-item.is-active::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:linear-gradient(180deg,var(--account-chat-glow-start),var(--account-chat-glow-end)); }
.ns-nav-item:focus-visible, .ns-nav-sub:focus-visible { outline:2px solid var(--account-accent); outline-offset:1px; }
.ns-nav-badge { margin-left:auto; min-width:20px; box-sizing:border-box; text-align:center; font-size:12px; font-weight:700; line-height:1.4; border-radius:999px; padding:1px 7px; background:var(--account-selected); color:var(--account-accent); }
.ns-nav-item.is-active .ns-nav-badge { background:color-mix(in oklab, var(--account-nav-active-ink) 18%, transparent); color:var(--account-nav-active-ink); }
.ns-nav-sub { cursor:pointer; transition:color .16s ease, padding-left .16s ease; }
.ns-nav-sub:hover { color:var(--account-ink) !important; padding-left:13px !important; }
.ns-nav-foot { margin-top:auto; padding-top:12px; border-top:1px solid var(--account-nav-child-divider); }
.ns-nav-collapse:hover { color:var(--account-ink) !important; }
.ns-nav-collapse-ico { display:grid; place-items:center; width:20px; font-size:16px; line-height:1; }
@media (prefers-reduced-motion: reduce) { nav[aria-label="Main"], .ns-nav-item, .ns-nav-sub { transition:none; } }