/* ── Conscious UX chat widget ──────────────────────────────────────────
   Self-contained. Scoped under #cs-chat.
*/

/* Screen-reader only — used to keep the Connect Figma button accessible
   while showing icon-only chrome in the header. */
.cs-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}

/* Compact subtitle in the header — no more 5-line wrap */
#cs-chat-head .cs-sub{
  font-size:10px !important;letter-spacing:.16em !important;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:240px;
}
@media (max-width:520px){
  #cs-chat-head .cs-sub{max-width:140px}
}

/* Hide the chatbot whenever a video modal or the full-screen watch overlay is
   open — both need the whole viewport for the film and its metadata. */
#modal-overlay.open ~ #cs-chat-launcher,
#modal-overlay.open ~ #cs-chat-panel,
#watch-overlay.open ~ #cs-chat-launcher,
#watch-overlay.open ~ #cs-chat-panel{ display:none !important; }

/* Launcher — floating bottom-right button */
#cs-chat-launcher{
  position:fixed; right:24px; bottom:24px; z-index:9000;
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(10,10,10,.85); backdrop-filter:blur(10px);
  border:1px solid rgba(136,179,158,.4);
  color:#f0ede8; font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:12px 18px; border-radius:999px; cursor:pointer;
  box-shadow:0 12px 36px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4) inset;
  transition:transform .25s ease, border-color .25s, background .25s, box-shadow .25s;
}
#cs-chat-launcher:hover{
  border-color:#88b39e; background:rgba(20,20,20,.92);
  transform:translateY(-1px);
  box-shadow:0 18px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(136,179,158,.3) inset;
}
#cs-chat-launcher .cs-dot{
  width:8px; height:8px; border-radius:50%; background:#88b39e;
  box-shadow:0 0 0 4px rgba(136,179,158,.18);
  animation:csPulse 2.6s ease-in-out infinite;
}
@keyframes csPulse{
  0%,100%{opacity:.6; transform:scale(1)}
  50%{opacity:1; transform:scale(1.1)}
}
@media(max-width:640px){
  #cs-chat-launcher{right:16px; bottom:16px; padding:11px 16px; font-size:10px}
}

/* ── Topbar chat button (mobile only) ──────────────────────────────────────
   Compact icon-only button injected next to the hamburger so the chat is
   reachable from the nav, not from a floating pill that covers content. */
#cs-topbar-chat{
  display:none;
  width:44px; height:44px; flex-shrink:0; padding:0;
  /* Push the chat+hamburger pair to the right edge of the topbar. */
  margin-left:auto;
  background:transparent;
  border:1px solid rgba(240,237,232,.25);
  border-radius:4px;
  cursor:pointer;
  align-items:center; justify-content:center;
  position:relative; z-index:201;
  transition:background .15s, border-color .15s;
}
#cs-topbar-chat:hover,
#cs-topbar-chat:focus-visible{
  border-color:#88b39e;
  background:rgba(136,179,158,.08);
}
#cs-topbar-chat .cs-dot{
  width:10px; height:10px; border-radius:50%;
  background:#88b39e;
  box-shadow:0 0 0 4px rgba(136,179,158,.18);
  animation:csPulse 2.6s ease-in-out infinite;
}

/* Light theme — match the hamburger's light-mode treatment (dark stroke,
   visible outline) so chat affordance reads on the lilac topbar bg. */
[data-theme="light"] #cs-topbar-chat{
  border-color:rgba(0,0,0,.18);
}
[data-theme="light"] #cs-topbar-chat:hover,
[data-theme="light"] #cs-topbar-chat:focus-visible{
  border-color:#2d5a47;
  background:rgba(45,90,71,.08);
}
[data-theme="light"] #cs-topbar-chat .cs-dot{
  background:#2d5a47;
  box-shadow:0 0 0 4px rgba(45,90,71,.18);
}

@media (max-width:720px){
  #cs-topbar-chat{display:inline-flex}
  /* Force the layout order: chat left, hamburger right (in the corner).
     Using flex `order` here means we don't depend on which script
     (chat-widget.js vs the _theme.html mobile-nav inline) inserts its
     element first into the topbar — the visual order is stable.
     Sit the pair tight against each other (6px) and let the container's
     own gap step aside — the topbar-right wrapper on welcome has its
     own `gap:10px` which, combined with the prior `margin-left:8px`,
     pushed chat ~18px away from the hamburger. */
  #cs-topbar-chat{order:1; margin-right:6px}
  .cs-mobile-toggle{order:2; margin-left:0}
  /* Floating launcher hides on phones — the topbar button replaces it so
     the bottom-right corner stays clear of UI. */
  #cs-chat-launcher{display:none !important}
}
/* On welcome the chat + hamburger live inside .topbar-right, which has
   its own flex `gap` (18px desktop → 10px mobile). The gap stacks with
   the margin-right pin above and pushes the pair apart. Override on
   small mobiles so the chat/hamburger sit at a fixed 6px regardless of
   what the per-page wrapper does. */
@media (max-width:640px){
  .topbar-right{gap:0 !important}
}

/* Panel */
#cs-chat-panel{
  position:fixed; right:24px; bottom:24px; z-index:9001;
  width:min(420px, calc(100vw - 32px));
  /* dvh (not vh) so the panel never grows past the *visible* viewport — vh
     counts the area behind a mobile/Safari dynamic toolbar, which pushes a
     bottom-anchored panel's top (and its header) off the top of the screen. */
  height:min(640px, calc(100dvh - 48px));
  max-height:calc(100dvh - 48px);
  background:#0a0a0a; color:#f0ede8;
  border:1px solid rgba(255,255,255,.08); border-radius:14px;
  display:none; flex-direction:column; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.4) inset;
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  opacity:0; transform:translateY(12px);
  transition:opacity .25s ease, transform .25s ease;
}
#cs-chat-panel.cs-open{display:flex; opacity:1; transform:translateY(0)}
@media(max-width:640px){
  #cs-chat-panel{
    top:0; right:0; bottom:0; left:0; width:auto;
    height:100vh; height:100dvh;            /* iOS Safari URL-bar fix */
    /* The base rule caps height at calc(100dvh - 48px). Without resetting it
       here the mobile panel sits 48px short of the top — i.e. not full screen.
       Reset so it truly fills the viewport. */
    max-height:none;
    border:none; border-radius:0;
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  /* The panel already covers the full viewport on mobile, so the
     fullscreen / minimize toggle is redundant and just steals room from
     the other header actions. */
  #cs-chat-fullscreen{display:none !important}
  #cs-chat-launcher{
    right:max(14px, env(safe-area-inset-right, 0));
    bottom:max(14px, env(safe-area-inset-bottom, 0));
    padding:11px 16px;
  }
}

/* Header */
#cs-chat-head{
  display:flex; align-items:center; gap:12px;
  padding:18px 18px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(136,179,158,.05), transparent);
  flex-shrink:0;
}
#cs-chat-head .cs-avatar{
  width:40px; height:40px; border-radius:50%;
  background:#0a0a0a url('/static/rikki-bot.png') center 22% / cover no-repeat;
  flex-shrink:0; position:relative;
  box-shadow:0 0 0 1px rgba(136,179,158,.35), 0 0 0 3px rgba(136,179,158,.1), 0 4px 14px rgba(0,0,0,.4);
}
#cs-chat-head .cs-avatar::after{
  content:''; position:absolute; right:-2px; bottom:-2px;
  width:10px; height:10px; border-radius:50%;
  background:#88b39e; border:2px solid #0a0a0a;
  box-shadow:0 0 0 3px rgba(136,179,158,.18);
  animation:csPulse 2.6s ease-in-out infinite;
}
#cs-chat-head .cs-id{display:flex; flex-direction:column; flex:1; min-width:0}
#cs-chat-head .cs-name{
  font-family:'Space Grotesk',system-ui,sans-serif; font-weight:400;
  font-size:15px; color:#fff; letter-spacing:-.005em; line-height:1.1;
}
#cs-chat-head .cs-ai-tag{
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:9.5px; letter-spacing:.18em; color:#88b39e;
  margin-left:2px; vertical-align:1px;
}
#cs-chat-head .cs-sub{
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(240,237,232,.42); margin-top:3px;
}
#cs-chat-head .cs-actions{display:flex; gap:6px}
#cs-chat-head button{
  background:transparent; border:1px solid rgba(255,255,255,.1); border-radius:6px;
  color:rgba(240,237,232,.55); width:44px; height:44px;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:color .15s, border-color .15s, background .15s;
}
#cs-chat-head button:hover{color:#fff; border-color:#88b39e; background:rgba(136,179,158,.08)}
#cs-chat-head button svg{width:13px; height:13px; stroke-width:1.8}

/* Messages */
#cs-chat-body{
  flex:1 1 0; min-height:0; overflow-y:auto; padding:18px;
  display:flex; flex-direction:column; gap:14px;
  scrollbar-width:thin; scrollbar-color:#222 transparent;
}
#cs-chat-body::-webkit-scrollbar{width:5px}
#cs-chat-body::-webkit-scrollbar-thumb{background:#222; border-radius:3px}
#cs-chat-body::-webkit-scrollbar-thumb:hover{background:#333}

.cs-msg{display:flex; flex-direction:column; gap:6px; max-width:90%; animation:csIn .35s ease-out both}
@keyframes csIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}
.cs-msg .cs-role{
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:9px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(240,237,232,.38);
}
.cs-msg .cs-bubble{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:300; font-size:15px; line-height:1.55;
  color:#f0ede8; white-space:pre-wrap; word-wrap:break-word;
}
.cs-msg.cs-user{align-self:flex-end; align-items:flex-end}
.cs-msg.cs-user .cs-bubble{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07);
  border-radius:14px 14px 4px 14px;
  padding:11px 15px;
  font-family:'DM Sans',system-ui,sans-serif; font-size:14px; font-weight:400;
}
.cs-msg.cs-asst .cs-role{color:#88b39e}
.cs-msg.cs-asst .cs-bubble{
  padding:0; background:transparent;
}
.cs-msg.cs-asst .cs-bubble p{margin:0 0 .9em}
.cs-msg.cs-asst .cs-bubble p:last-child{margin-bottom:0}
.cs-msg.cs-asst .cs-bubble strong{color:#fff; font-weight:500}
.cs-msg.cs-asst .cs-bubble em{color:#b3d4be; font-style:italic}
.cs-msg.cs-asst .cs-bubble ul, .cs-msg.cs-asst .cs-bubble ol{margin:.4em 0 1em 1.1em; padding:0}
.cs-msg.cs-asst .cs-bubble li{margin-bottom:.4em}
.cs-msg.cs-asst .cs-bubble a{color:#88b39e; border-bottom:1px solid rgba(136,179,158,.35); text-decoration:none}
.cs-msg.cs-asst .cs-bubble a:hover{color:#b3d4be; border-bottom-color:#b3d4be}
.cs-msg.cs-asst .cs-bubble code{font-family:'DM Mono','SF Mono',Menlo,monospace; font-size:13px; background:rgba(255,255,255,.04); padding:1px 5px; border-radius:3px}

/* Rich video card — appears inline in chat responses when the bot cites a
   specific film. Click loads the film into watch mode on the gallery page. */
.cs-msg.cs-asst .cs-bubble a.cs-video-card{
  display:flex !important; align-items:center; gap:12px;
  margin:8px 0 10px; padding:8px 10px 8px 8px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:10px;
  text-decoration:none !important;
  color:inherit !important;
  transition:border-color .2s, background .2s, transform .15s;
}
.cs-msg.cs-asst .cs-bubble a.cs-video-card:hover{
  border-color:rgba(136,179,158,.5) !important;
  background:rgba(255,255,255,.07);
  transform:translateY(-1px);
}
.cs-video-card .cs-vc-thumb{
  width:96px; aspect-ratio:16/9; object-fit:cover;
  border-radius:5px; flex-shrink:0; background:#0a0a0a;
}
.cs-video-card .cs-vc-meta{
  display:flex; flex-direction:column; gap:4px; min-width:0; flex:1;
}
.cs-video-card .cs-vc-title{
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:500; font-size:14px; color:#f0ede8;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.cs-video-card .cs-vc-cta{
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:#88b39e;
}

/* Collection chip — appears inline when the bot links a whole collection. */
.cs-msg.cs-asst .cs-bubble a.cs-coll-chip{
  display:inline-flex; align-items:center; gap:5px;
  margin:0 2px; padding:2px 9px;
  background:rgba(136,179,158,.10);
  border:1px solid rgba(136,179,158,.35) !important;
  border-radius:999px;
  text-decoration:none !important;
  color:#b3d4be !important;
  font-size:13px;
}
.cs-msg.cs-asst .cs-bubble a.cs-coll-chip:hover{
  background:rgba(136,179,158,.20);
  border-color:#88b39e !important;
}

.cs-msg.cs-error .cs-bubble{color:#c0504a; font-style:italic}

/* Welcome state */
.cs-welcome{
  padding:8px 4px 0; display:flex; flex-direction:column; gap:16px;
}
.cs-welcome .cs-greeting{
  font-family:'Space Grotesk',system-ui,sans-serif; font-weight:300;
  font-size:18px; line-height:1.45; color:#f0ede8;
}
.cs-welcome .cs-greeting em{color:#b3d4be; font-style:italic}
.cs-welcome .cs-hint{
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(240,237,232,.42); margin-top:4px;
}
.cs-prompts{display:flex; flex-direction:column; gap:6px}
.cs-prompt{
  text-align:left; background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.07); border-radius:8px;
  color:rgba(240,237,232,.75); padding:10px 14px;
  font-family:'DM Sans',system-ui,sans-serif; font-size:13px; font-weight:300;
  line-height:1.45; cursor:pointer;
  transition:color .15s, border-color .15s, background .15s, transform .15s;
}
.cs-prompt:hover{
  color:#fff; border-color:rgba(136,179,158,.45);
  background:rgba(136,179,158,.06); transform:translateX(2px);
}

/* ── Memory view ──────────────────────────────────────────────────────────
   Replaces the chat body when the visitor opens the Memory panel. Shows
   stats, past conversations, and extracted facts with per-row delete and
   a destructive "Forget everything" footer button. */
.cs-mem{display:flex; flex-direction:column; gap:18px; padding:4px 2px}
.cs-mem-head{margin:-4px -2px 0}
.cs-mem-back{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:none; padding:6px 4px; cursor:pointer;
  color:rgba(240,237,232,.55);
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
}
.cs-mem-back:hover{color:#fff}
.cs-mem-back svg{width:14px; height:14px}
.cs-mem-title{
  font-family:'Space Grotesk',system-ui,sans-serif; font-weight:400;
  font-size:18px; line-height:1.3; color:#f0ede8; margin:0;
}
.cs-mem-intro{
  font-family:'DM Sans',system-ui,sans-serif; font-weight:300;
  font-size:13px; line-height:1.55; color:rgba(240,237,232,.62); margin:0;
}
.cs-mem-intro a{color:#b3d4be; text-decoration:none; border-bottom:1px solid rgba(179,212,190,.35)}
.cs-mem-intro a:hover{border-bottom-color:#b3d4be}
.cs-mem-loading{
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(240,237,232,.45); padding:24px 0;
}
.cs-mem-stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(80px,1fr));
  gap:14px; padding:14px 0; border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cs-mem-stats > div{display:flex; flex-direction:column; gap:2px}
.cs-mem-stat-num{
  font-family:'Space Grotesk',system-ui,sans-serif; font-weight:300;
  font-size:22px; color:#b3d4be; line-height:1;
}
.cs-mem-stat-date{font-size:13px}
.cs-mem-stat-label{
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(240,237,232,.42);
}
.cs-mem-section{
  font-family:'DM Mono','SF Mono',Menlo,monospace; font-weight:400;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(240,237,232,.55); margin:14px 0 0;
}
.cs-mem-list{display:flex; flex-direction:column; gap:6px; margin-top:8px}
.cs-mem-row{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px; border-radius:8px;
  background:rgba(255,255,255,.025); border:1px solid rgba(255,255,255,.06);
}
.cs-mem-row-text{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.cs-mem-row-title{
  font-family:'DM Sans',system-ui,sans-serif; font-weight:400;
  font-size:13.5px; color:rgba(240,237,232,.92); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cs-mem-row-meta{
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:10px; letter-spacing:.06em; color:rgba(240,237,232,.42);
}
.cs-mem-row-fact{
  font-family:'DM Sans',system-ui,sans-serif; font-weight:300;
  font-size:13.5px; color:rgba(240,237,232,.88); line-height:1.5;
}
.cs-mem-del{
  flex-shrink:0; background:none; border:none; padding:6px;
  border-radius:4px; cursor:pointer;
  color:rgba(240,237,232,.4);
  transition:color .15s, background .15s;
}
.cs-mem-del:hover{color:#ff8a80; background:rgba(255,138,128,.08)}
.cs-mem-del svg{width:14px; height:14px}
.cs-mem-del:disabled{opacity:.4; cursor:wait}
.cs-mem-empty{
  font-family:'DM Sans',system-ui,sans-serif; font-weight:300;
  font-size:13px; line-height:1.55; color:rgba(240,237,232,.5);
  padding:14px 16px; border-radius:8px;
  background:rgba(255,255,255,.015); border:1px dashed rgba(255,255,255,.08);
}
.cs-mem-footer{padding-top:8px; margin-top:8px; border-top:1px solid rgba(255,255,255,.06)}
.cs-mem-forget{
  width:100%; padding:11px 18px; border-radius:6px;
  background:transparent; border:1px solid rgba(255,138,128,.35);
  color:#ff8a80; cursor:pointer;
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  transition:background .15s, border-color .15s, color .15s;
}
.cs-mem-forget:hover{background:rgba(255,138,128,.08); border-color:#ff8a80; color:#ff8a80}
.cs-mem-forget:disabled{opacity:.5; cursor:wait}

[data-theme="light"] .cs-mem-title{color:#0a0a0a}
[data-theme="light"] .cs-mem-intro{color:#3a3a3a}
[data-theme="light"] .cs-mem-intro a{color:#2d5a47; border-bottom-color:rgba(45,90,71,.35)}
[data-theme="light"] .cs-mem-stats{border-color:rgba(0,0,0,.08)}
[data-theme="light"] .cs-mem-stat-num{color:#2d5a47}
[data-theme="light"] .cs-mem-stat-label,
[data-theme="light"] .cs-mem-section,
[data-theme="light"] .cs-mem-row-meta,
[data-theme="light"] .cs-mem-back{color:#5e5e5e}
[data-theme="light"] .cs-mem-back:hover{color:#0a0a0a}
[data-theme="light"] .cs-mem-row,
[data-theme="light"] .cs-mem-empty{background:#fff; border-color:rgba(0,0,0,.08)}
[data-theme="light"] .cs-mem-empty{color:rgba(0,0,0,.55)}
[data-theme="light"] .cs-mem-row-title{color:#0a0a0a}
[data-theme="light"] .cs-mem-row-fact{color:#1f1f1f}
[data-theme="light"] .cs-mem-del{color:#5e5e5e}
[data-theme="light"] .cs-mem-del:hover{color:#c0392b; background:rgba(192,57,43,.06)}
[data-theme="light"] .cs-mem-forget{border-color:rgba(192,57,43,.35); color:#c0392b}
[data-theme="light"] .cs-mem-forget:hover{background:rgba(192,57,43,.06); border-color:#c0392b}
[data-theme="light"] .cs-mem-footer{border-top-color:rgba(0,0,0,.08)}

/* Typing indicator */
.cs-typing{display:inline-flex; align-items:center; gap:6px; padding:6px 0}
.cs-typing-label{
  font-family:'DM Sans',system-ui,sans-serif;
  font-size:13px; font-style:italic; font-weight:300;
  color:rgba(240,237,232,.6);
  letter-spacing:.01em;
  margin-right:2px;
}
.cs-typing-dot{width:6px; height:6px; border-radius:50%; background:#88b39e; opacity:.45; animation:csBounce 1.2s ease-in-out infinite}
.cs-typing-dot + .cs-typing-dot{animation-delay:.15s}
.cs-typing-dot + .cs-typing-dot + .cs-typing-dot{animation-delay:.3s}
@keyframes csBounce{0%,80%,100%{transform:translateY(0); opacity:.45} 40%{transform:translateY(-4px); opacity:1}}

/* Composer */
#cs-chat-foot{
  padding:14px 14px 16px;
  border-top:1px solid rgba(255,255,255,.06);
  background:rgba(0,0,0,.3);
  flex-shrink:0;
}

/* Attachment chips above the composer */
#cs-attach-row{display:none; flex-wrap:wrap; gap:6px; margin-bottom:8px}
#cs-attach-row.cs-visible{display:flex}
.cs-chip{
  display:inline-flex; align-items:center; gap:8px; max-width:240px;
  background:rgba(136,179,158,.08); border:1px solid rgba(136,179,158,.3);
  border-radius:8px; padding:5px 6px 5px 5px;
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:10px; letter-spacing:.06em; color:#b3d4be;
}
.cs-chip-thumb{width:26px; height:26px; object-fit:cover; border-radius:4px; display:block; flex-shrink:0}
.cs-chip-icon{width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; background:rgba(255,255,255,.05); border-radius:4px; color:#88b39e; flex-shrink:0}
.cs-chip-icon svg{width:14px; height:14px; stroke-width:1.6}
.cs-chip-name{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#f0ede8}
.cs-chip-name small{color:rgba(240,237,232,.5); margin-left:4px}
.cs-chip-x{
  background:transparent; border:none; cursor:pointer; padding:2px;
  color:rgba(240,237,232,.55); border-radius:4px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:color .15s, background .15s;
}
.cs-chip-x:hover{color:#fff; background:rgba(255,255,255,.08)}
.cs-chip-x svg{width:11px; height:11px}

#cs-chat-form{
  display:flex; align-items:flex-end; gap:6px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08); border-radius:10px;
  padding:8px 8px 8px 8px;
  transition:border-color .15s;
}
#cs-chat-form:focus-within{border-color:rgba(136,179,158,.45); background:rgba(136,179,158,.04)}

#cs-chat-attach{
  width:34px; height:34px; flex-shrink:0; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.08);
  border-radius:7px; color:rgba(240,237,232,.6);
  display:flex; align-items:center; justify-content:center;
  transition:color .15s, border-color .15s, background .15s, transform .12s;
}
#cs-chat-attach:hover{color:#88b39e; border-color:rgba(136,179,158,.45); background:rgba(136,179,158,.06)}
#cs-chat-attach:active{transform:scale(.96)}
#cs-chat-attach svg{width:15px; height:15px; stroke-width:1.8}

/* Voice input button — same chrome as #cs-chat-attach so the input row reads
   as one cluster of icon affordances. Listening state pulses a sage glow so
   the visitor knows it's hot without having to read a tooltip. */
#cs-chat-mic{
  width:34px; height:34px; flex-shrink:0; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.08);
  border-radius:7px; color:rgba(240,237,232,.6);
  display:flex; align-items:center; justify-content:center;
  transition:color .15s, border-color .15s, background .15s, transform .12s, box-shadow .2s;
}
#cs-chat-mic:hover{color:#88b39e; border-color:rgba(136,179,158,.45); background:rgba(136,179,158,.06)}
#cs-chat-mic:active{transform:scale(.96)}
#cs-chat-mic svg{width:15px; height:15px; stroke-width:1.8}
#cs-chat-mic.cs-mic-listening{
  color:#fff; border-color:#88b39e; background:rgba(136,179,158,.22);
  animation:cs-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes cs-mic-pulse{
  0%, 100% { box-shadow:0 0 0 0 rgba(136,179,158,.45); }
  50%      { box-shadow:0 0 0 6px rgba(136,179,158,0); }
}
@media (prefers-reduced-motion: reduce){
  #cs-chat-mic.cs-mic-listening{ animation:none; }
}
/* Hide the mic entirely on browsers without Web Speech API. The JS sets
   data-no-speech on the body when SR is unavailable so we don't show a
   button that produces a "not supported" toast on every click. */
body[data-no-speech] #cs-chat-mic{ display:none; }

#cs-chat-input{
  flex:1; min-width:0; background:transparent; border:0; outline:0;
  box-shadow:none; appearance:none; -webkit-appearance:none;
  color:#f0ede8; font-family:'DM Sans',system-ui,sans-serif;
  font-size:14px; font-weight:400; line-height:1.5; resize:none;
  max-height:140px; min-height:22px; padding:5px 0;
  scrollbar-width:thin;
}
/* 16px on mobile avoids iOS Safari's auto-zoom on focus, which breaks layout. */
@media (max-width:720px){#cs-chat-input{font-size:16px}}
#cs-chat-input::placeholder{color:rgba(240,237,232,.35); font-weight:300}
#cs-chat-send{
  width:34px; height:34px; flex-shrink:0; cursor:pointer;
  background:rgba(136,179,158,.18); border:1px solid rgba(136,179,158,.45);
  border-radius:7px; color:#b3d4be;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, color .15s, border-color .15s, transform .12s;
}
#cs-chat-send:hover:not(:disabled){background:#88b39e; color:#fff; border-color:#88b39e}
#cs-chat-send:active:not(:disabled){transform:scale(.96)}
#cs-chat-send:disabled{opacity:.35; cursor:not-allowed}
#cs-chat-send svg{width:15px; height:15px; stroke-width:2}
.cs-foot-note{
  font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(240,237,232,.32); text-align:center; margin-top:10px;
}
.cs-foot-note b{color:rgba(240,237,232,.55); font-weight:400}
/* The foot note describes desktop-only affordances (Enter, Shift+Enter,
   drag-and-drop). Hide on mobile where none of them apply. */
@media (max-width:720px){ .cs-foot-note{display:none} }

@media(prefers-reduced-motion:reduce){
  #cs-chat-panel, .cs-msg, .cs-typing-dot, #cs-chat-launcher .cs-dot{animation:none!important; transition:none!important}
}

/* ─── Light theme — flip every dark chat surface to the lilac palette ─── */
[data-theme="light"] #cs-chat-launcher{
  background:#c8d6cc; color:#0a0a0a;
  border-color:rgba(45,90,71,.4);
  box-shadow:0 12px 32px rgba(20,15,30,.12), 0 0 0 1px rgba(45,90,71,.05);
}
[data-theme="light"] #cs-chat-launcher:hover{
  background:#b9c9be; border-color:#2d5a47;
  box-shadow:0 18px 44px rgba(20,15,30,.18), 0 0 0 1px rgba(45,90,71,.2);
}
[data-theme="light"] #cs-chat-launcher .cs-dot{background:#2d5a47; box-shadow:0 0 0 4px rgba(45,90,71,.18)}

[data-theme="light"] #cs-chat-panel{
  background:#f5f1f8; color:#0a0a0a;
  border-color:#dad2e1;
  box-shadow:0 28px 64px rgba(20,15,30,.18), 0 0 0 1px #dad2e1;
}
[data-theme="light"] #cs-chat-head{
  background:#ece6f0;
  border-bottom-color:#dad2e1;
}
[data-theme="light"] #cs-chat-head .cs-name{color:#0a0a0a}
[data-theme="light"] #cs-chat-head .cs-ai-tag{color:#2d5a47}
[data-theme="light"] #cs-chat-head .cs-sub{color:#5e5e5e}
[data-theme="light"] #cs-chat-head button{
  border-color:#dad2e1; color:#3a3a3a; background:transparent;
}
[data-theme="light"] #cs-chat-head button:hover{
  color:#0a0a0a; border-color:#2d5a47; background:rgba(45,90,71,.08);
}

[data-theme="light"] #cs-chat-body{background:transparent}
[data-theme="light"] #cs-chat-body::-webkit-scrollbar-thumb{background:#cdc3d6}
[data-theme="light"] #cs-chat-body::-webkit-scrollbar-thumb:hover{background:#a89bb5}

[data-theme="light"] .cs-msg .cs-role{color:#5e5e5e}
[data-theme="light"] .cs-msg.cs-asst .cs-role{color:#2d5a47}
[data-theme="light"] .cs-msg.cs-asst .cs-bubble{color:#0a0a0a}
[data-theme="light"] .cs-msg.cs-asst .cs-bubble strong{color:#0a0a0a}
[data-theme="light"] .cs-msg.cs-asst .cs-bubble em{color:#1e4332}
[data-theme="light"] .cs-msg.cs-asst .cs-bubble a{
  color:#2d5a47; border-bottom-color:rgba(45,90,71,.3);
}
[data-theme="light"] .cs-msg.cs-asst .cs-bubble a:hover{
  color:#1e4332; border-bottom-color:#1e4332;
}
[data-theme="light"] .cs-msg.cs-asst .cs-bubble code{
  background:#ece6f0; color:#0a0a0a;
}
[data-theme="light"] .cs-msg.cs-user .cs-bubble{
  background:#ffffff; color:#0a0a0a;
  border-color:#dad2e1;
}
[data-theme="light"] .cs-msg.cs-error .cs-bubble{color:#a93939}

[data-theme="light"] .cs-welcome .cs-greeting{color:#0a0a0a}
[data-theme="light"] .cs-welcome .cs-greeting em{color:#1e4332}
[data-theme="light"] .cs-welcome .cs-hint{color:#5e5e5e}
[data-theme="light"] .cs-starter{
  background:#ffffff; color:#0a0a0a; border-color:#dad2e1;
}
[data-theme="light"] .cs-starter:hover{background:#ece6f0; border-color:#2d5a47; color:#0a0a0a}
[data-theme="light"] .cs-prompt{
  background:#ffffff; color:#0a0a0a; border-color:#dad2e1;
}
[data-theme="light"] .cs-prompt:hover{
  background:#ece6f0; color:#0a0a0a;
  border-color:#2d5a47;
}

[data-theme="light"] #cs-chat-foot{
  background:#f5f1f8; border-top-color:#dad2e1;
}
[data-theme="light"] #cs-chat-form{
  background:#ffffff; border-color:#dad2e1;
}
[data-theme="light"] #cs-chat-form:focus-within{
  border-color:rgba(45,90,71,.5); background:rgba(45,90,71,.04);
}
[data-theme="light"] #cs-chat-input{color:#0a0a0a; background:transparent}
[data-theme="light"] #cs-chat-input::placeholder{color:#5e5e5e}
[data-theme="light"] #cs-chat-attach,
[data-theme="light"] #cs-chat-mic,
[data-theme="light"] #cs-chat-send{color:#3a3a3a; border-color:rgba(0,0,0,.08)}
[data-theme="light"] #cs-chat-attach:hover,
[data-theme="light"] #cs-chat-mic:hover,
[data-theme="light"] #cs-chat-send:hover{color:#2d5a47; background:rgba(45,90,71,.08); border-color:rgba(45,90,71,.3)}
[data-theme="light"] #cs-chat-mic.cs-mic-listening{
  color:#2d5a47; background:rgba(45,90,71,.18); border-color:#2d5a47;
}
[data-theme="light"] .cs-foot-note{color:#5e5e5e}
[data-theme="light"] .cs-foot-note b{color:#0a0a0a}

[data-theme="light"] .cs-chip{background:#ece6f0; border-color:#dad2e1; color:#0a0a0a}
[data-theme="light"] .cs-chip-x{color:#5e5e5e}
[data-theme="light"] .cs-chip-x:hover{color:#a93939}

[data-theme="light"] .cs-typing-dot{background:#5e5e5e}
[data-theme="light"] .cs-typing-label{color:rgba(0,0,0,.55)}

/* Inline video cards + collection chips inside the bubble */
[data-theme="light"] .cs-msg.cs-asst .cs-bubble a.cs-video-card{
  background:#ffffff !important; border-color:#dad2e1 !important; color:#0a0a0a !important;
}
[data-theme="light"] .cs-msg.cs-asst .cs-bubble a.cs-video-card:hover{
  background:rgba(45,90,71,.05); border-color:#2d5a47 !important;
}
[data-theme="light"] .cs-video-card .cs-vc-title{color:#0a0a0a}
[data-theme="light"] .cs-video-card .cs-vc-cta{color:#2d5a47}
[data-theme="light"] .cs-video-card .cs-vc-thumb{background:#e9ebed}

[data-theme="light"] .cs-msg.cs-asst .cs-bubble a.cs-coll-chip{
  background:rgba(45,90,71,.10); border-color:rgba(45,90,71,.4) !important; color:#1e4332 !important;
}
[data-theme="light"] .cs-msg.cs-asst .cs-bubble a.cs-coll-chip:hover{
  background:rgba(45,90,71,.18); border-color:#2d5a47 !important;
}

/* ── Design preview block (sandboxed HTML/CSS canvas rendered in chat) ──── */
.cs-design{
  margin-top:10px;padding:0;border:1px solid #2a2a2a;border-radius:8px;
  background:#0e0e0e;overflow:hidden;max-width:100%;
}
.cs-design-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid #1a1a1a;background:#0a0a0a;
}
.cs-design-eyebrow{
  font-family:'DM Mono','SF Mono',Menlo,monospace;font-size:9.5px;
  letter-spacing:.22em;text-transform:uppercase;color:#6b9e7a;
}
.cs-design-title{
  font-family:'Space Grotesk',system-ui,sans-serif;font-size:13px;
  font-weight:400;color:#f0ede8;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cs-design-actions{display:flex;gap:6px;flex-shrink:0}
.cs-design-btn{
  font-family:'DM Mono','SF Mono',Menlo,monospace;font-size:9.5px;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(240,237,232,.7);
  background:transparent;border:1px solid #2a2a2a;border-radius:3px;
  padding:5px 9px;cursor:pointer;transition:color .15s,border-color .15s,background .15s;
}
.cs-design-btn:hover:not(:disabled){color:#88b39e;border-color:#88b39e;background:rgba(136,179,158,.06)}
.cs-design-btn:disabled{opacity:.55;cursor:default}
.cs-design-frame{
  display:block;width:100%;max-width:100%;border:none;background:#fff;
}

/* Light-mode preview wrapper */
[data-theme="light"] .cs-design{background:#fff;border-color:#dad2e1}
[data-theme="light"] .cs-design-head{background:#f5f1f8;border-bottom-color:#dad2e1}
[data-theme="light"] .cs-design-title{color:#0a0a0a}
[data-theme="light"] .cs-design-btn{color:#5e5e5e;border-color:#dad2e1}
[data-theme="light"] .cs-design-btn:hover:not(:disabled){color:#2d5a47;border-color:#2d5a47;background:rgba(45,90,71,.06)}

/* ── Full-screen design view (websites / apps / mockups) ─────────────────── */
body.cs-design-fs-open{overflow:hidden}
.cs-design-fs{
  position:fixed;inset:0;z-index:9500;display:flex;flex-direction:column;
  background:rgba(10,10,10,.92);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
}
.cs-design-fs-bar{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 18px;background:#0a0a0a;border-bottom:1px solid #1f1f1f;
}
.cs-design-fs-title{
  font-family:'Space Grotesk',system-ui,sans-serif;font-size:14px;font-weight:400;color:#f0ede8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cs-design-fs-close{
  flex:0 0 auto;width:32px;height:32px;display:flex;align-items:center;justify-content:center;
  font-size:22px;line-height:1;color:rgba(240,237,232,.75);
  background:transparent;border:1px solid #2a2a2a;border-radius:6px;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
}
.cs-design-fs-close:hover{color:#88b39e;border-color:#88b39e;background:rgba(136,179,158,.06)}
.cs-design-fs-frame{flex:1 1 auto;width:100%;border:none;background:#fff}

/* ── Connect Figma button in chat header (icon-only, matches sibling chrome) */
#cs-chat-figma{
  background:transparent;border:1px solid rgba(240,237,232,.18);
  color:rgba(240,237,232,.7);
  width:34px;height:34px;border-radius:3px;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:color .15s,border-color .15s,background .15s;
}
#cs-chat-figma:hover,#cs-chat-figma:focus-visible{
  color:#fff;border-color:rgba(136,179,158,.55);background:rgba(136,179,158,.08);outline:none;
}
#cs-chat-figma svg{width:14px;height:14px;flex-shrink:0}
#cs-chat-figma.cs-figma-connected{
  color:#88b39e;border-color:rgba(136,179,158,.55);background:rgba(136,179,158,.06);
}
[data-theme="light"] #cs-chat-figma{color:#5e5e5e;border-color:#dad2e1}
[data-theme="light"] #cs-chat-figma:hover,
[data-theme="light"] #cs-chat-figma:focus-visible{color:#2d5a47;border-color:#2d5a47;background:rgba(45,90,71,.06)}
[data-theme="light"] #cs-chat-figma.cs-figma-connected{color:#2d5a47;border-color:#2d5a47;background:rgba(45,90,71,.08)}

/* ── Fullscreen toggle for the chat panel ─────────────────────── */
#cs-chat-panel.cs-fullscreen{
  inset:0 !important;width:100vw !important;height:100vh !important;
  max-width:100% !important;max-height:100% !important;
  bottom:0 !important;right:0 !important;
  border-radius:0 !important;
}
#cs-chat-panel.cs-fullscreen #cs-chat-body{
  max-width:880px;margin-left:auto;margin-right:auto;width:100%;
}
#cs-chat-panel.cs-fullscreen #cs-chat-foot{
  max-width:880px;margin-left:auto;margin-right:auto;width:100%;
}
#cs-chat-panel.cs-fullscreen #cs-chat-head{
  padding-left:24px;padding-right:24px;
}
#cs-chat-fullscreen{
  background:transparent;border:1px solid rgba(240,237,232,.18);
  color:rgba(240,237,232,.7);width:34px;height:34px;border-radius:3px;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s;
}
#cs-chat-fullscreen:hover,#cs-chat-fullscreen:focus-visible{
  color:#fff;border-color:rgba(136,179,158,.55);background:rgba(136,179,158,.08);outline:none;
}
/* Don't highlight the minimize button just because fullscreen is active — */
/* keep it visually identical to its siblings.                              */
[data-theme="light"] #cs-chat-fullscreen{color:#5e5e5e;border-color:#dad2e1}
[data-theme="light"] #cs-chat-fullscreen:hover,
[data-theme="light"] #cs-chat-fullscreen:focus-visible{color:#2d5a47;border-color:#2d5a47;background:rgba(45,90,71,.06)}

/* ── Action buttons: inline labels in fullscreen, hover tooltips compact ──── */
/* Hide the inline label by default (compact mode) */
.cs-actions .cs-btn-label{
  display:none;font-family:'DM Mono','SF Mono',Menlo,monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  margin-left:8px;
}
.cs-actions .cs-btn-label-on{display:none}

/* In fullscreen mode, show inline labels next to each icon */
#cs-chat-panel.cs-fullscreen #cs-chat-head{padding:16px 24px}
#cs-chat-panel.cs-fullscreen #cs-chat-head .cs-actions{gap:8px;flex-wrap:nowrap}
#cs-chat-panel.cs-fullscreen #cs-chat-head button{
  width:auto !important;height:38px !important;padding:0 14px !important;
  display:inline-flex !important;align-items:center;gap:8px;
  white-space:nowrap;
}
#cs-chat-panel.cs-fullscreen #cs-chat-head .cs-btn-label{
  display:inline-block;
}
#cs-chat-panel.cs-fullscreen .cs-actions #cs-chat-fullscreen .cs-btn-label-on{display:none}
#cs-chat-panel.cs-fullscreen .cs-actions #cs-chat-fullscreen[aria-pressed="true"] .cs-btn-label-on{display:inline-block}
#cs-chat-panel.cs-fullscreen .cs-actions #cs-chat-fullscreen[aria-pressed="true"] .cs-btn-label-off{display:none}
/* Below 900px in fullscreen, collapse labels back to icon-only with tooltips */
@media (max-width:900px){
  #cs-chat-panel.cs-fullscreen #cs-chat-head button{
    width:38px !important;padding:0 !important;justify-content:center;
  }
  #cs-chat-panel.cs-fullscreen #cs-chat-head .cs-btn-label{display:none !important}
}

/* Action-button tooltips are rendered by the body-portal JS in _theme.html
   (.cs-tip), which escapes overflow:hidden ancestors. The old CSS ::after
   tooltip lived here too, so both stacked into a double tip. Removed; the
   data-tip-on swap and fullscreen suppression now live in that JS portal. */
.cs-actions button[data-tip]{position:relative}

/* ── Figma button: clear connected state ────────────────────────────── */
.cs-figma-icon-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center}
.cs-figma-dot{
  position:absolute;top:-3px;right:-4px;
  width:8px;height:8px;border-radius:50%;
  background:transparent;border:0;opacity:0;
  transition:opacity .2s,background .2s,box-shadow .2s;
  pointer-events:none;
}
#cs-chat-figma.cs-figma-connected{
  background:rgba(136,179,158,.18) !important;
  border-color:#88b39e !important;
  color:#b3d4be !important;
}
#cs-chat-figma.cs-figma-connected .cs-figma-dot{
  opacity:1;background:#4caf74;
  box-shadow:0 0 0 2px #0a0a0a,0 0 8px rgba(76,175,116,.6);
  animation:csPulse 2.6s ease-in-out infinite;
}
[data-theme="light"] #cs-chat-figma.cs-figma-connected{
  background:rgba(45,90,71,.12) !important;border-color:#2d5a47 !important;color:#1e4332 !important;
}
[data-theme="light"] #cs-chat-figma.cs-figma-connected .cs-figma-dot{
  box-shadow:0 0 0 2px var(--bg,#f5f1f8),0 0 8px rgba(76,175,116,.55);
}