/*
Theme Name: HexWeb
Theme URI: https://hexweb.dev
Author: HexWeb
Author URI: https://hexweb.dev
Description: Custom dark hex-terminal themed WordPress theme for HexWeb.dev. Mouse-reactive hex grid background, central rotating liquid-metal hex-sphere hub with dynamic link lines to site sections. Manual on-page SEO (no SEO plugin dependency). All colors, fonts, and shared layout chrome live in this single stylesheet, referenced by every page template in the theme.
Version: 0.0.5
Requires at least: 6.5
Requires PHP: 7.4
Tested up to: 7.0
Text Domain: hexweb
*/

/* ==================================================================
   DESIGN SYSTEM + SHARED CHROME — color palette, fonts, header,
   footer, ambient hex-grid/scanline background, and the homepage's
   hex-sphere hub. Every template enqueues ONLY this stylesheet for
   its base styling, per Master Victor's request to keep style,
   palette, and fonts centralized rather than embedded per-page.
   ================================================================== */

  :root{
    --bg:#050706; --bg2:#0a1210; --ink:#eafff4;
    --teal:#8fe8c8; --teal-mid:#6fd3aa; --teal-line:#3fae86; --teal-dim:#4d7d6c; --teal-dark:#1f4a3c;
    --panel-line:#163a2e; --gold:#e6c13c; --gold-bright:#ffe98f;
    --mono:'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
    --display:'Space Grotesk', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--bg); color:var(--teal); font-family:var(--mono);
    line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  }
  a{color:inherit; text-decoration:none;}
  h1,h2,h3{font-family:var(--display); color:var(--ink); letter-spacing:-0.01em;}

  .skip-link{position:absolute; left:-999px; top:0; background:var(--teal); color:var(--bg); padding:8px 16px; z-index:200; font-weight:700;}
  .skip-link:focus{left:0;}

  @keyframes scanmove{0%{background-position:0 0}100%{background-position:0 100%}}
  @keyframes drift{
    0%{transform:translate(0,0)}
    25%{transform:translate(4px,-10px)}
    50%{transform:translate(-3px,-16px)}
    75%{transform:translate(-6px,-6px)}
    100%{transform:translate(0,0)}
  }
  @keyframes warpBurst{
    0%{transform:scale(.3);opacity:.9;filter:blur(0)}
    60%{opacity:.5}
    100%{transform:scale(2.6);opacity:0;filter:blur(2px)}
  }
  @keyframes warpFlash{0%{opacity:.35}100%{opacity:0}}

  /* ============ GLOBAL CHROME — present on every page, fixed to viewport ============ */
  .fx-grid{
    position:fixed; inset:0; z-index:0; pointer-events:none;
    background-image:linear-gradient(rgba(120,255,200,0.035) 1px,transparent 1px),
                      linear-gradient(90deg,rgba(120,255,200,0.035) 1px,transparent 1px);
    background-size:40px 40px;
  }
  .fx-scan{
    position:fixed; inset:0; z-index:1; pointer-events:none; mix-blend-mode:overlay;
    background-image:repeating-linear-gradient(rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.28) 3px,rgba(0,0,0,0) 4px);
    background-size:100% 4px; animation:scanmove 6s linear infinite;
  }
  #hexCanvas{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
  .warp-flash{position:fixed; inset:0; pointer-events:none; z-index:8; background:#dff5ea; opacity:0;}
  .warp-ring{position:fixed; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%; border:2px solid var(--teal); box-shadow:0 0 40px 10px rgba(143,232,200,.5); pointer-events:none; z-index:8; opacity:0;}

  /* ============ TOP STATUS BAR ============ */
  header{
    position:relative; z-index:10; display:flex; align-items:center; justify-content:space-between;
    padding:22px 6vw; border-bottom:1px solid var(--panel-line);
  }
  .logo{font-size:1.15rem; font-weight:700; letter-spacing:6px; color:var(--ink);}
  .logo .dim{color:var(--teal-dim); letter-spacing:2px;}
  .status-row{display:flex; gap:18px; font-size:.68rem; letter-spacing:1.5px; color:var(--teal-mid); text-transform:uppercase;}
  .status-row span::before{content:'● '; color:var(--teal-line);}
  .hdr-right{display:flex; align-items:center; gap:16px;}
  .clear-btn{
    border:1px solid var(--teal-dark); border-radius:2px; padding:6px 14px; font-size:.68rem;
    letter-spacing:2px; color:var(--teal-dim); text-transform:uppercase; transition:.2s;
  }
  .clear-btn:hover{border-color:var(--teal-mid); color:var(--gold-bright);}
  nav ul{list-style:none; display:flex; gap:30px; font-size:.78rem; letter-spacing:1px; text-transform:uppercase;}
  nav a{color:var(--teal-dim); transition:color .2s;}
  nav a:hover, nav a.active{color:var(--teal);}

  /* ============ MAIN DASHBOARD LAYOUT ============ */
  .dash{position:relative; z-index:2; display:flex; gap:44px; padding:36px 6vw 0; align-items:flex-start;}
  .sidebar{width:300px; flex-shrink:0;}
  .panel-head{
    font-size:.72rem; letter-spacing:2.5px; color:var(--teal-dim); text-transform:uppercase;
    border-bottom:1px solid var(--panel-line); padding-bottom:9px; margin-bottom:20px;
    display:flex; justify-content:space-between;
  }
  .panel-head span.tag{color:#33564a;}

  .vital{margin-bottom:24px;}
  .vital .vl{display:flex; justify-content:space-between; font-size:.66rem; letter-spacing:1px; color:var(--teal-dim); text-transform:uppercase;}
  .vital .vv{font-size:1.7rem; color:var(--ink); font-family:var(--display); font-weight:700; margin:2px 0 4px;}
  .vital svg{width:100%; height:26px;}
  .trend-up{color:var(--teal-mid);} .trend-down{color:#e67c7c;}

  .svc-item{display:flex; gap:10px; align-items:flex-start; margin-bottom:16px; cursor:pointer;}
  .svc-item .box{width:12px; height:12px; border:1px solid var(--teal-line); margin-top:3px; flex-shrink:0; transition:background .2s;}
  .svc-item:hover .box{background:rgba(143,232,200,.25);}
  .svc-item .txt{font-size:.78rem; line-height:1.55; color:var(--teal);}

  .doc-item{display:flex; justify-content:space-between; font-size:.75rem; color:var(--teal-mid); padding:6px 0; border-bottom:1px solid #10261f;}
  .doc-item span:last-child{color:#3a5c4f;}

  /* ============ CENTER: SPHERE HUB — fixed background layer, always present ============ */
  #sphereCanvas{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
  #sphereSvg{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; transition:opacity .5s ease;}
  body.past-hero #sphereSvg{opacity:0;}
  .vault-link{stroke:var(--gold); stroke-width:1; stroke-dasharray:3 3; opacity:.55;}
  .vault-anchor{fill:var(--gold-bright);}

  .hub{flex:1; position:relative; min-height:640px; display:flex; align-items:center; justify-content:flex-start;}

  .hub-copy{position:relative; z-index:3; text-align:left; max-width:440px; pointer-events:none;}
  .eyebrow{font-size:.7rem; letter-spacing:4px; color:var(--gold); text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; margin-bottom:22px;}
  .eyebrow::before{content:'●'; font-size:.55rem;}
  .hub-copy h1{font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.15; margin-bottom:18px;}
  .hub-copy h1 .accent{color:var(--teal);}
  .hub-copy p{font-family:var(--display); font-size:.95rem; color:var(--teal-dim); margin-bottom:0;}

  .hub-link{
    position:fixed; z-index:4; font-size:.68rem; letter-spacing:1px; text-transform:uppercase;
    color:var(--gold-bright); text-align:center; pointer-events:auto; transition:opacity .5s ease;
  }
  body.past-hero .hub-link{opacity:0; pointer-events:none;}
  .hub-link:hover{opacity:.7;}
  .hub-link b{display:block; font-size:1.1rem; color:var(--ink); font-family:var(--display); margin-top:2px;}
  .hub-tl{top:12vh; left:2vw;} .hub-tr{top:12vh; right:2vw;}
  .hub-bl{bottom:24vh; left:2vw;} .hub-br{bottom:24vh; right:2vw;}

  .primary-directive{position:absolute; bottom:2%; left:0; right:0; text-align:center; z-index:3;}
  .primary-directive .pd-label{font-size:.68rem; letter-spacing:3px; color:var(--teal-dim);}
  .primary-directive .pd-value{font-size:3.4rem; font-weight:700; color:var(--ink); margin-top:6px; font-family:var(--display);}
  .primary-directive .pd-value span{font-size:.9rem; color:var(--teal-dim); letter-spacing:2px;}
  .pd-bar{width:280px; height:2px; background:#173226; margin:10px auto 18px;}
  .pd-bar-fill{height:100%; width:0%; background:linear-gradient(90deg,#2a6b52,#8fe8c8); transition:width 1.4s ease;}
  .btn-primary{
    background:var(--teal); color:var(--bg); padding:14px 28px; border-radius:2px;
    font-weight:700; font-size:.8rem; letter-spacing:1px; text-transform:uppercase;
    border:none; cursor:pointer; font-family:var(--mono); transition:box-shadow .2s, transform .2s;
    pointer-events:auto;
  }
  .btn-primary:hover{box-shadow:0 0 0 6px rgba(143,232,200,.15); transform:translateY(-1px);}

  /* ============ FLOATING TRUST NOTES — hero-stage only ============ */
  .note{
    position:fixed; z-index:5; background:rgba(5,15,12,.85); border:1px solid #2a5c4a; padding:8px 14px;
    font-size:.66rem; letter-spacing:1px; color:var(--teal); animation:drift 5s ease-in-out infinite; cursor:pointer; width:180px;
    transition:opacity .5s ease;
  }
  body.past-hero .note{opacity:0; pointer-events:none;}
  .note .t{display:flex; justify-content:space-between; gap:16px; text-transform:uppercase;}
  .note .s{color:var(--teal-dim); margin-top:2px;}
  .n1{top:18vh; left:26vw;} .n2{top:18vh; right:26vw;} .n3{bottom:20vh; left:26vw;} .n4{bottom:20vh; right:26vw;}

  /* ============ BELOW-FOLD CONTENT SECTIONS (same chrome persists) ============ */
  main.below{position:relative; z-index:2;}
  section{padding:90px 6vw;}
  .section-panel-head{font-size:.72rem; letter-spacing:2.5px; color:var(--teal-dim); text-transform:uppercase; border-bottom:1px solid var(--panel-line); padding-bottom:10px; margin-bottom:32px; display:flex; justify-content:space-between;}
  .section-panel-head span.tag{color:#33564a;}

  .compare{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .compare > div{border:1px solid var(--panel-line); padding:30px;}
  .compare .us{border-color:var(--teal-dark); background:rgba(143,232,200,.03);}
  .compare h3{font-size:.9rem; letter-spacing:2px; text-transform:uppercase; margin-bottom:20px;}
  .compare .us h3{color:var(--teal);}
  .compare ul{list-style:none;}
  .compare li{padding:10px 0; border-bottom:1px solid var(--panel-line); font-size:.85rem; color:var(--teal-dim); font-family:var(--display);}
  .compare .us li{color:var(--ink);}
  .compare li:last-child{border-bottom:none;}

  .process{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
  .step{border-top:2px solid var(--panel-line); padding-top:20px;}
  .step .num{font-size:1.3rem; color:var(--gold); display:block; margin-bottom:10px;}
  .step h3{font-size:.95rem; margin-bottom:8px;}
  .step p{font-size:.8rem; color:var(--teal-dim); font-family:var(--display);}

  .cta-section{text-align:center; border:1px solid var(--panel-line); margin:0 6vw 100px; padding:80px 6vw; background:radial-gradient(ellipse at 50% 0%, rgba(143,232,200,.05), transparent 70%);}
  .cta-section h2{font-size:clamp(1.7rem,3.5vw,2.4rem); margin-bottom:16px;}
  .cta-section p{color:var(--teal-dim); font-family:var(--display); max-width:520px; margin:0 auto 32px;}

  footer{position:relative; z-index:2; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; padding:32px 6vw; border-top:1px solid var(--panel-line); font-size:.75rem; color:var(--teal-dim);}

  @media (max-width:1000px){
    .dash{flex-direction:column;}
    .sidebar{width:100%;}
    .hub{min-height:0; width:100%; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:56px 24px 64px; position:relative;}
    .hub-copy{text-align:center; max-width:100%; margin-bottom:36px;}
    .primary-directive{position:static; margin-top:8px;}
    .hub-link, .note{display:none;}
    #sphereSvg{display:none;}
    .compare{grid-template-columns:1fr;}
    .process{grid-template-columns:1fr 1fr;}
    .status-row{display:none;}
    nav ul{display:none;}
    section{padding:60px 6vw;}
  }

/* ==================================================================
   DEMO PAGE — page-specific layout additions.
   Selectors that would otherwise collide with front-page rules of
   the same name (section padding, .cta-section, .btn-primary) are
   scoped under body.demo-page (added via body_class() in the demo
   page template) so they can never leak into the homepage's styling.
   New, page-unique class names (.intro, .demo-frame*, .footnote,
   .sparklebay-demo*) are left unscoped since nothing else uses them.
   ================================================================== */

.intro{max-width:720px; margin-bottom:44px;}
.intro .eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--gold); animation:demoPulse 1.8s ease-in-out infinite;}
@keyframes demoPulse{0%,100%{opacity:1} 50%{opacity:.25}}
.intro h1{font-size:clamp(1.8rem,3.5vw,2.6rem); line-height:1.15; margin-bottom:18px;}
.intro h1 .accent{color:var(--teal);}
.intro p{font-family:var(--display); font-size:1rem; color:var(--teal-dim); line-height:1.65;}
.intro p b{color:var(--ink); font-weight:600;}

.demo-frame{
  border:1px solid var(--panel-line); border-radius:4px; padding:32px;
  background:rgba(143,232,200,.02);
}
.demo-frame-label{
  font-size:.68rem; letter-spacing:2px; color:var(--teal-dim); text-transform:uppercase;
  margin-bottom:20px; display:flex; align-items:center; gap:10px;
}
.demo-frame-label::before{content:'◆'; color:var(--gold);}

.footnote{
  margin-top:26px; font-size:.78rem; color:var(--teal-dim); font-family:var(--display);
  line-height:1.7; max-width:760px; border-top:1px solid var(--panel-line); padding-top:20px;
}

/* scoped overrides — demo page uses a slightly more compact section/CTA than the homepage */
body.demo-page section{padding:70px 6vw;}
body.demo-page .cta-section{padding:70px 6vw;}
body.demo-page .cta-section h2{font-size:clamp(1.5rem,3vw,2.1rem);}

@media (max-width:1000px){
  body.demo-page section{padding:48px 6vw;}
  .demo-frame{padding:16px;}
}

/* ==================================================================
   EMBEDDED DEMO WIDGET — deliberately kept as its own light,
   product-branded look (this is a mockup of a client's actual
   customer-facing chat, not the HexWeb site chrome), scoped
   under .sparklebay-demo so it can't leak into the theme styles
   ================================================================== */
.sparklebay-demo{
  --ink2:#14231F; --ocean:#0E5C63; --ocean-dark:#0A484E;
  --foam:#CDEAE3; --sand:#EFEAE0; --coral:#FF6F59; --slate:#5B6B67;
  --line2: rgba(20,35,31,0.10); --alert:#D6455D; --gold2:#E8B84A;
  background:var(--sand); color:var(--ink2); border-radius:16px; padding:24px;
  font-family:'IBM Plex Sans', sans-serif;
}
.sparklebay-demo *{box-sizing:border-box;}
.sparklebay-demo .stage{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; }
.sparklebay-demo .col-title{
  font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase;
  color: var(--slate); margin-bottom:10px; display:flex; align-items:center; gap:8px;
}
.sparklebay-demo .col-title .n{
  background: var(--ink2); color:#fff; width:18px; height:18px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:10px; font-family:'IBM Plex Sans';
}
.sparklebay-demo .phone-col{ flex: 0 0 auto; }
.sparklebay-demo .phone{ width: 320px; max-width: 86vw; background: var(--ink2); border-radius: 32px; padding: 9px; box-shadow: 0 30px 60px -20px rgba(20,35,31,0.35); }
.sparklebay-demo .screen{ background: #fff; border-radius: 24px; overflow:hidden; display:flex; flex-direction:column; height: 540px; }
.sparklebay-demo .chat-header{ background: var(--ocean); color:#fff; padding: 13px 15px; display:flex; align-items:center; gap: 10px; flex-shrink:0; }
.sparklebay-demo .avatar{ width:34px;height:34px;border-radius:50%; background: var(--foam); color: var(--ocean-dark); display:flex;align-items:center;justify-content:center; font-family:'Fraunces',serif; font-weight:600; font-size:14px; flex-shrink:0; }
.sparklebay-demo .chat-header .name{ font-weight:600; font-size:13.5px; }
.sparklebay-demo .chat-header .status{ font-size:10.5px; opacity:0.85; display:flex; align-items:center; gap:5px; }
.sparklebay-demo .chat-header .status .led{ width:6px;height:6px;border-radius:50%; background:#8CE99A; }
.sparklebay-demo .messages{ flex:1; overflow-y:auto; padding: 14px 11px; background: #F7F5F0; display:flex; flex-direction:column; gap:9px; }
.sparklebay-demo .bubble{ max-width: 80%; padding: 9px 12px; border-radius: 15px; font-size: 13px; line-height:1.42; white-space: pre-wrap; animation: sbRise 0.25s ease; }
@keyframes sbRise{ from{ opacity:0; transform: translateY(6px);} to{ opacity:1; transform: translateY(0);} }
.sparklebay-demo .bubble.bot{ background:#fff; color: var(--ink2); border: 1px solid var(--line2); border-bottom-left-radius: 4px; align-self:flex-start; }
.sparklebay-demo .bubble.user{ background: var(--ocean); color:#fff; border-bottom-right-radius: 4px; align-self:flex-end; }
.sparklebay-demo .typing{ align-self:flex-start; background:#fff; border:1px solid var(--line2); border-radius:15px; border-bottom-left-radius:4px; padding: 10px 13px; display:flex; gap:4px; }
.sparklebay-demo .typing span{ width:6px;height:6px;border-radius:50%; background: var(--slate); opacity:0.5; animation: sbBounce 1.1s infinite; }
.sparklebay-demo .typing span:nth-child(2){ animation-delay: 0.15s; }
.sparklebay-demo .typing span:nth-child(3){ animation-delay: 0.3s; }
@keyframes sbBounce{ 0%,60%,100%{ transform: translateY(0); opacity:0.5;} 30%{ transform: translateY(-4px); opacity:1;} }
.sparklebay-demo .quick-replies{ display:flex; gap:6px; padding: 0 11px 9px; flex-wrap:wrap; flex-shrink:0; background:#F7F5F0; }
.sparklebay-demo .chip{ font-size:11.5px; background:#fff; border: 1px solid var(--ocean); color: var(--ocean-dark); padding: 6px 10px; border-radius: 100px; cursor:pointer; transition: background 0.15s, color 0.15s; white-space:nowrap; }
.sparklebay-demo .chip:hover{ background: var(--ocean); color:#fff; }
.sparklebay-demo .input-row{ flex-shrink:0; display:flex; gap:8px; padding: 9px; background:#fff; border-top:1px solid var(--line2); }
.sparklebay-demo .input-row input{ flex:1; border: 1px solid var(--line2); background: var(--sand); border-radius: 100px; padding: 9px 13px; font-size: 13px; font-family:'IBM Plex Sans', sans-serif; outline:none; min-width:0; }
.sparklebay-demo .input-row input:focus{ border-color: var(--ocean); }
.sparklebay-demo .send-btn{ width: 36px;height:36px; border-radius:50%; background: var(--coral); border:none; color:#fff; cursor:pointer; display:flex;align-items:center;justify-content:center; flex-shrink:0; transition: transform 0.1s; }
.sparklebay-demo .send-btn:active{ transform: scale(0.92); }
.sparklebay-demo .send-btn:disabled{ opacity:0.45; cursor:default; }
.sparklebay-demo .console-col{ flex: 1 1 460px; min-width: 320px; }
.sparklebay-demo .console{ background:#fff; border:1px solid var(--line2); border-radius: 20px; height: 558px; display:flex; overflow:hidden; box-shadow: 0 20px 50px -30px rgba(20,35,31,0.25); }
.sparklebay-demo .thread-list{ width: 150px; flex-shrink:0; background: var(--sand); border-right:1px solid var(--line2); padding: 12px 8px; }
.sparklebay-demo .thread-list-title{ font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:0.08em; text-transform:uppercase; color: var(--slate); padding: 4px 6px 10px; }
.sparklebay-demo .thread-item{ background:#fff; border-radius:12px; padding: 10px 9px; cursor:default; border: 1.5px solid var(--ocean); position:relative; }
.sparklebay-demo .thread-item .tname{ font-size:12px; font-weight:600; margin-bottom:3px; }
.sparklebay-demo .thread-item .tprev{ font-size:10.5px; color: var(--slate); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sparklebay-demo .thread-tag{ position:absolute; top:-6px; right:-6px; font-size:9px; font-family:'IBM Plex Mono',monospace; padding:2px 6px; border-radius:100px; font-weight:500; }
.sparklebay-demo .thread-tag.auto{ background: var(--foam); color: var(--ocean-dark); }
.sparklebay-demo .thread-tag.needs{ background: var(--alert); color:#fff; animation: sbPulse 1.3s infinite; }
@keyframes sbPulse{ 0%,100%{opacity:1;} 50%{opacity:0.3;} }
.sparklebay-demo .console-main{ flex:1; display:flex; flex-direction:column; min-width:0; }
.sparklebay-demo .console-header{ padding: 13px 16px; border-bottom:1px solid var(--line2); display:flex; align-items:center; justify-content:space-between; gap:10px; flex-shrink:0; }
.sparklebay-demo .console-header .who{ display:flex; align-items:center; gap:9px; }
.sparklebay-demo .console-header .who .name{ font-weight:600; font-size:13.5px; }
.sparklebay-demo .console-header .who .meta{ font-size:10.5px; color: var(--slate); }
.sparklebay-demo .toggle-wrap{ display:flex; align-items:center; gap:8px; }
.sparklebay-demo .toggle-label{ font-family:'IBM Plex Mono', monospace; font-size:10px; color: var(--slate); text-align:right; line-height:1.3; }
.sparklebay-demo .toggle{ width:42px; height:24px; border-radius:100px; background: var(--foam); position:relative; cursor:pointer; border:none; flex-shrink:0; transition: background 0.2s; }
.sparklebay-demo .toggle.off{ background: var(--slate); }
.sparklebay-demo .toggle .knob{ position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background: var(--ocean); transition: transform 0.2s; }
.sparklebay-demo .toggle.off .knob{ transform: translateX(18px); background:#fff; }
.sparklebay-demo .alert-banner{
  background: var(--alert); color:#fff; font-size:12px; padding: 9px 16px;
  display:none; align-items:center; gap:8px; flex-shrink:0;
  font-family:'IBM Plex Mono', monospace;
}
.sparklebay-demo .alert-banner.show{ display:flex; }
.sparklebay-demo .transcript{ flex:1; overflow-y:auto; padding: 14px 16px; display:flex; flex-direction:column; gap:8px; background: #FBFAF7; }
.sparklebay-demo .trow{ display:flex; flex-direction:column; max-width:74%; animation: sbRise 0.2s ease; }
.sparklebay-demo .trow.customer{ align-self:flex-start; align-items:flex-start; }
.sparklebay-demo .trow.bot, .sparklebay-demo .trow.agent{ align-self:flex-end; align-items:flex-end; }
.sparklebay-demo .trow .lbl{ font-family:'IBM Plex Mono', monospace; font-size:9.5px; color: var(--slate); margin-bottom:3px; padding: 0 3px; }
.sparklebay-demo .trow .txt{ font-size:12.5px; line-height:1.4; padding: 8px 11px; border-radius:12px; white-space:pre-wrap; }
.sparklebay-demo .trow.customer .txt{ background:#fff; border:1px solid var(--line2); border-bottom-left-radius:3px; }
.sparklebay-demo .trow.bot .txt{ background: var(--foam); color: var(--ocean-dark); border-bottom-right-radius:3px; }
.sparklebay-demo .trow.agent .txt{ background: var(--coral); color:#fff; border-bottom-right-radius:3px; }
.sparklebay-demo .trow.system{ align-self:center; }
.sparklebay-demo .trow.system .txt{ background: transparent; color: var(--slate); font-family:'IBM Plex Mono', monospace; font-size:10.5px; padding:2px 0; }
.sparklebay-demo .console-input{ flex-shrink:0; display:flex; gap:8px; padding: 11px 14px; border-top:1px solid var(--line2); background:#fff; }
.sparklebay-demo .console-input input{ flex:1; border: 1px solid var(--line2); background: var(--sand); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; font-family:'IBM Plex Sans', sans-serif; outline:none; min-width:0; }
.sparklebay-demo .console-input input:focus{ border-color: var(--ocean); }
.sparklebay-demo .console-input input:disabled{ opacity:0.5; }
.sparklebay-demo .console-send{ background: var(--ink2); color:#fff; border:none; border-radius:10px; padding: 0 16px; font-size:12px; font-weight:600; cursor:pointer; font-family:'IBM Plex Sans'; flex-shrink:0; }
.sparklebay-demo .console-send:disabled{ opacity:0.4; cursor:default; }
.sparklebay-demo .console-hint{ font-size:10.5px; color: var(--slate); padding: 0 14px 10px; font-family:'IBM Plex Mono', monospace; }
@media (max-width: 860px){ .sparklebay-demo .phone{ width:100%; } .sparklebay-demo .console{ height:auto; flex-direction:column; } .sparklebay-demo .thread-list{ width:100%; display:flex; gap:8px; border-right:none; border-bottom:1px solid var(--line2); } .sparklebay-demo .transcript{ max-height:340px; } }