/* NetShow ACT Core UI - Unified Responsive Stylesheet */

/* ============================== 1) Reset ============================== */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{min-height:100vh;}
img,svg,video,canvas,iframe{display:block;max-width:100%;}
button,input,textarea,select{font:inherit;color:inherit;}
button{background:none;border:0;padding:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--act-accent);outline-offset:2px;}

/* ========================== 2) Theme Tokens ========================== */
:root{
  --act-bg:#0a0f1a;
  --act-surface:#111827;
  --act-text:#e5e7eb;
  --act-accent:#3b82f6;
  --act-border:#1f2937;
  --act-msg-user:#1d4ed8;
  --act-msg-bot:#1f2937;
  --act-input-bg:#0f172a;

  --act-muted:#9ca3af;
  --act-text-strong:#f8fafc;
  --act-success:#10b981;
  --act-warning:#f59e0b;
  --act-danger:#ef4444;
  --act-info:#38bdf8;

  --act-surface-2:#0f172a;
  --act-surface-3:#1b2535;
  --act-overlay:rgb(5 8 15 / 72%);

  --act-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --act-fs-xs:.75rem;
  --act-fs-sm:.875rem;
  --act-fs-md:1rem;
  --act-fs-lg:1.125rem;
  --act-fs-xl:1.25rem;

  --act-fw-regular:400;
  --act-fw-medium:500;
  --act-fw-semibold:600;
  --act-fw-bold:700;

  --act-space-0:0;
  --act-space-1:.25rem;
  --act-space-2:.5rem;
  --act-space-3:.75rem;
  --act-space-4:1rem;
  --act-space-5:1.25rem;
  --act-space-6:1.5rem;
  --act-space-7:1.75rem;
  --act-space-8:2rem;
  --act-space-9:2.5rem;
  --act-space-10:3rem;

  --act-radius-btn:8px;
  --act-radius-card:12px;
  --act-radius-bubble:12px;
  --act-radius-pill:999px;
  --act-radius-round:50%;

  --act-shadow-xs:0 1px 2px rgb(0 0 0 / 18%);
  --act-shadow-sm:0 4px 10px rgb(0 0 0 / 20%);
  --act-shadow-md:0 8px 24px rgb(0 0 0 / 26%);
  --act-shadow-lg:0 12px 36px rgb(0 0 0 / 32%);
  --act-shadow-glow:0 0 0 1px rgb(59 130 246 / 24%),0 0 20px rgb(59 130 246 / 28%);

  --act-ease:cubic-bezier(.2,0,0,1);
  --act-ease-soft:cubic-bezier(.3,.05,.15,1);
  --act-fast:140ms;
  --act-med:240ms;
  --act-slow:420ms;

  --act-touch:44px;
  --act-avatar-size:44px;
  --act-header-h:64px;
  --act-input-h:68px;
  --act-nav-h:72px;
  --act-max-chat:100%;
  --act-iframe-min:320px;
  --act-iframe-max:58vw;

  --act-z-base:1;
  --act-z-sticky:20;
  --act-z-nav:30;
  --act-z-menu:40;
  --act-z-toast:50;
  --act-z-modal:60;
}

/* ========================== 3) Theme Variants ========================== */
[data-theme="light"]{
  --act-bg:#ffffff;
  --act-surface:#f9fafb;
  --act-text:#111827;
  --act-accent:#2563eb;
  --act-border:#e5e7eb;
  --act-msg-user:#2563eb;
  --act-msg-bot:#f3f4f6;
  --act-input-bg:#ffffff;

  --act-muted:#6b7280;
  --act-text-strong:#0b1220;
  --act-success:#059669;
  --act-warning:#d97706;
  --act-danger:#dc2626;
  --act-info:#0284c7;

  --act-surface-2:#ffffff;
  --act-surface-3:#f3f4f6;
  --act-overlay:rgb(15 23 42 / 40%);

  --act-shadow-xs:0 1px 2px rgb(15 23 42 / 8%);
  --act-shadow-sm:0 4px 10px rgb(15 23 42 / 9%);
  --act-shadow-md:0 10px 24px rgb(15 23 42 / 12%);
  --act-shadow-lg:0 18px 36px rgb(15 23 42 / 14%);
  --act-shadow-glow:0 0 0 1px rgb(37 99 235 / 20%),0 0 18px rgb(37 99 235 / 18%);
}

@media (prefers-color-scheme: light){
  [data-theme="auto"],:root:not([data-theme]){
    --act-bg:#ffffff;
    --act-surface:#f9fafb;
    --act-text:#111827;
    --act-accent:#2563eb;
    --act-border:#e5e7eb;
    --act-msg-user:#2563eb;
    --act-msg-bot:#f3f4f6;
    --act-input-bg:#ffffff;
    --act-muted:#6b7280;
    --act-text-strong:#0b1220;
    --act-surface-2:#ffffff;
    --act-surface-3:#f3f4f6;
    --act-overlay:rgb(15 23 42 / 40%);
  }
}

/* ======================== 4) Root + Utility Layer ======================= */
.act,.act-shell{font-family:var(--act-font);color:var(--act-text);}
.act-shell{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:100dvh;
  background:radial-gradient(circle at 20% -10%,rgb(59 130 246 / 12%),transparent 36%),var(--act-bg);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.act-shell,.act-shell *{
  scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--act-border),transparent 10%) transparent;
}
.act-shell *::-webkit-scrollbar{width:10px;height:10px;}
.act-shell *::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--act-border),transparent 6%);border-radius:999px;}
.act-shell *::-webkit-scrollbar-track{background:transparent;}
.act-hidden{display:none !important;}
.act-muted{color:var(--act-muted) !important;}
.act-link{color:var(--act-accent);text-decoration:none;}
.act-link:hover{text-decoration:underline;}
.act-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;}

/* ============================ 5) Shell Layout ============================ */
.act-panel{
  position:relative;
  width:100%;
  min-width:0;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:transparent;
}
.act-panel--chat{flex:1 1 auto;max-width:100%;}
.act-panel--iframe{display:none;border-left:1px solid var(--act-border);background:var(--act-surface);}
.act-panel--aux{display:none;border-left:1px solid var(--act-border);background:color-mix(in srgb,var(--act-surface),var(--act-bg) 40%);}
.act-iframe{width:100%;height:100%;border:0;border-radius:0;background:#fff;}

.act-splitter{
  display:none;
  width:10px;
  min-width:10px;
  background:linear-gradient(to right,transparent,color-mix(in srgb,var(--act-border),transparent 40%),transparent);
  cursor:col-resize;
  touch-action:none;
  position:relative;
}
.act-splitter::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:3px;
  height:80px;
  transform:translate(-50%,-50%);
  border-radius:var(--act-radius-pill);
  background:color-mix(in srgb,var(--act-accent),var(--act-border) 68%);
  opacity:.7;
}

/* ========================= 6) Agent Header Block ======================== */
.act-agent{
  position:sticky;
  top:0;
  z-index:var(--act-z-sticky);
  min-height:var(--act-header-h);
  display:flex;
  align-items:center;
  gap:var(--act-space-3);
  padding:var(--act-space-3) var(--act-space-4);
  background:color-mix(in srgb,var(--act-surface),transparent 8%);
  border-bottom:1px solid var(--act-border);
  backdrop-filter:saturate(1.1) blur(14px);
}
.act-agent-meta{min-width:0;display:flex;flex-direction:column;gap:2px;}
.act-agent-name{
  margin:0;
  font-size:var(--act-fs-md);
  font-weight:var(--act-fw-semibold);
  line-height:1.2;
  color:var(--act-text-strong);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.act-agent-status{display:inline-flex;align-items:center;gap:var(--act-space-2);font-size:var(--act-fs-sm);color:var(--act-muted);}
.act-status-dot{width:8px;height:8px;border-radius:50%;background:var(--act-success);box-shadow:0 0 0 4px color-mix(in srgb,var(--act-success),transparent 78%);}
.act-status-dot.is-offline{background:var(--act-muted);box-shadow:none;}
.act-status-dot.is-busy{background:var(--act-warning);box-shadow:0 0 0 4px color-mix(in srgb,var(--act-warning),transparent 78%);}

.act-avatar{
  position:relative;
  width:var(--act-avatar-size);
  height:var(--act-avatar-size);
  min-width:var(--act-avatar-size);
  border-radius:50%;
  border:2px solid color-mix(in srgb,var(--act-accent),transparent 36%);
  box-shadow:var(--act-shadow-xs);
  overflow:hidden;
  background:linear-gradient(145deg,color-mix(in srgb,var(--act-accent),#fff 30%),color-mix(in srgb,var(--act-accent),#111 38%));
  transition:transform var(--act-fast) var(--act-ease),box-shadow var(--act-fast) var(--act-ease);
}
.act-avatar img{width:100%;height:100%;object-fit:cover;}
.act-avatar:hover{transform:translateY(-1px) scale(1.015);box-shadow:var(--act-shadow-glow);}
.act-avatar.is-speaking{animation:act-avatar-pulse 1.3s var(--act-ease-soft) infinite;}
.act-avatar.is-speaking::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--act-accent),transparent 45%);
  animation:act-avatar-ring 1.3s var(--act-ease) infinite;
}

/* ======================== 7) Navigation + Mobile FAB ======================= */
.act-nav{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:var(--act-z-nav);
  height:var(--act-nav-h);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:stretch;
  border-top:1px solid var(--act-border);
  background:color-mix(in srgb,var(--act-surface),transparent 4%);
  backdrop-filter:saturate(1.1) blur(14px);
}
.act-nav-item{
  min-height:var(--act-touch);
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-size:11px;
  font-weight:var(--act-fw-medium);
  color:var(--act-muted);
  transition:color var(--act-fast) var(--act-ease),background-color var(--act-fast) var(--act-ease);
}
.act-nav-item .act-nav-icon{font-size:18px;line-height:1;}
.act-nav-item:hover{color:var(--act-text-strong);background:color-mix(in srgb,var(--act-surface-3),transparent 65%);}
.act-nav-item.is-active{color:var(--act-accent);}
.act-nav-item.is-active .act-nav-icon{transform:translateY(-1px);}

.act-fab-stack{
  position:fixed;
  right:var(--act-space-4);
  bottom:calc(var(--act-nav-h) + var(--act-space-4));
  z-index:calc(var(--act-z-nav) + 1);
  display:inline-flex;
  flex-direction:column;
  gap:var(--act-space-2);
}
.act-fab{
  width:48px;
  height:48px;
  min-height:var(--act-touch);
  border-radius:50%;
  background:var(--act-accent);
  color:#fff;
  box-shadow:var(--act-shadow-md);
  display:grid;
  place-items:center;
  transition:transform var(--act-fast) var(--act-ease),box-shadow var(--act-fast) var(--act-ease);
}
.act-fab:hover{transform:translateY(-1px) scale(1.02);box-shadow:var(--act-shadow-lg);}

/* ============================ 8) Slide Menu ============================ */
.act-menu-backdrop{
  position:fixed;
  inset:0;
  z-index:var(--act-z-menu);
  background:var(--act-overlay);
  backdrop-filter:blur(4px);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--act-med) var(--act-ease);
}
.act-menu{
  position:fixed;
  top:0;
  left:0;
  z-index:calc(var(--act-z-menu) + 1);
  width:min(86vw,340px);
  height:100dvh;
  padding:var(--act-space-6) var(--act-space-4);
  background:color-mix(in srgb,var(--act-surface),transparent 4%);
  border-right:1px solid var(--act-border);
  box-shadow:var(--act-shadow-lg);
  backdrop-filter:saturate(1.15) blur(16px);
  transform:translateX(-104%);
  transition:transform var(--act-med) var(--act-ease);
  overflow-y:auto;
}
.act-menu.is-open{transform:translateX(0);}
.act-menu.is-open + .act-menu-backdrop,.act-menu-backdrop.is-open{opacity:1;pointer-events:auto;}
.act-menu-header{margin-bottom:var(--act-space-4);}
.act-menu-title{margin:0;font-size:var(--act-fs-lg);font-weight:var(--act-fw-semibold);}
.act-menu-list{display:flex;flex-direction:column;gap:var(--act-space-2);}
.act-menu-item{
  min-height:var(--act-touch);
  display:flex;
  align-items:center;
  gap:var(--act-space-3);
  padding:var(--act-space-3);
  border-radius:var(--act-radius-btn);
  color:var(--act-text);
  transition:background-color var(--act-fast) var(--act-ease),color var(--act-fast) var(--act-ease);
}
.act-menu-item .emoji{width:22px;text-align:center;font-size:17px;}
.act-menu-item:hover,.act-menu-item.is-active{background:color-mix(in srgb,var(--act-accent),transparent 84%);color:var(--act-text-strong);}

/* ========================= 9) Message Stream Area ======================== */
.act-messages{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:var(--act-space-4);
  padding-bottom:calc(var(--act-input-h) + var(--act-nav-h) + var(--act-space-4));
  display:flex;
  flex-direction:column;
  gap:var(--act-space-3);
  scroll-behavior:smooth;
}
.act-day-separator{
  align-self:center;
  padding:4px 10px;
  border-radius:var(--act-radius-pill);
  font-size:var(--act-fs-xs);
  color:var(--act-muted);
  background:color-mix(in srgb,var(--act-surface),transparent 28%);
  border:1px solid color-mix(in srgb,var(--act-border),transparent 25%);
}

/* ============================= 10) Bubbles ============================= */
.act-row{display:flex;width:100%;}
.act-row--user{justify-content:flex-end;}
.act-row--bot{justify-content:flex-start;}

.act-bubble{
  position:relative;
  max-width:min(88%,680px);
  border-radius:var(--act-radius-bubble);
  padding:var(--act-space-3) var(--act-space-4);
  line-height:1.45;
  font-size:var(--act-fs-sm);
  letter-spacing:.01em;
  box-shadow:var(--act-shadow-xs);
  border:1px solid transparent;
  word-break:break-word;
  overflow-wrap:anywhere;
  opacity:0;
  transform:translateY(10px);
  animation:act-bubble-in var(--act-med) var(--act-ease-soft) forwards;
}
.act-bubble[data-stagger="1"]{animation-delay:40ms;}
.act-bubble[data-stagger="2"]{animation-delay:80ms;}
.act-bubble[data-stagger="3"]{animation-delay:120ms;}
.act-bubble[data-stagger="4"]{animation-delay:160ms;}
.act-bubble[data-stagger="5"]{animation-delay:200ms;}

.act-row--user .act-bubble{
  color:#eff6ff;
  background:linear-gradient(160deg,color-mix(in srgb,var(--act-msg-user),#fff 6%),var(--act-msg-user));
  border-color:color-mix(in srgb,var(--act-msg-user),#fff 22%);
  border-bottom-right-radius:4px;
}
.act-row--bot .act-bubble{
  color:var(--act-text);
  background:var(--act-msg-bot);
  border-color:color-mix(in srgb,var(--act-border),transparent 24%);
  border-bottom-left-radius:4px;
}
.act-bubble p{margin:0;}
.act-bubble p + p{margin-top:var(--act-space-2);}
.act-bubble time{display:inline-block;margin-top:var(--act-space-2);font-size:var(--act-fs-xs);opacity:.72;}

.act-bubble-image{
  max-width:min(86vw,420px);
  border-radius:var(--act-radius-card);
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--act-border),transparent 20%);
  background:color-mix(in srgb,var(--act-surface),transparent 6%);
  box-shadow:var(--act-shadow-sm);
}
.act-bubble-image img,.act-bubble-image video{width:100%;height:auto;object-fit:cover;}
.act-bubble-image figcaption{padding:var(--act-space-2) var(--act-space-3);font-size:var(--act-fs-xs);color:var(--act-muted);border-top:1px solid var(--act-border);}

/* ========================= 11) Typing Indicator ========================= */
.act-typing{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:var(--act-space-1);
  min-height:34px;
  padding:var(--act-space-2) var(--act-space-3);
  border-radius:var(--act-radius-pill);
  background:color-mix(in srgb,var(--act-msg-bot),var(--act-surface) 20%);
  border:1px solid color-mix(in srgb,var(--act-border),transparent 16%);
}
.act-typing-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:color-mix(in srgb,var(--act-text),transparent 38%);
  animation:act-dot-bounce 1.2s var(--act-ease-soft) infinite;
}
.act-typing-dot:nth-child(2){animation-delay:120ms;}
.act-typing-dot:nth-child(3){animation-delay:240ms;}

/* =========================== 12) Input Area ============================ */
.act-input-wrap{
  position:fixed;
  left:0;
  right:0;
  bottom:var(--act-nav-h);
  z-index:var(--act-z-sticky);
  padding:var(--act-space-3) var(--act-space-3) calc(env(safe-area-inset-bottom) + var(--act-space-2));
  background:linear-gradient(to top,color-mix(in srgb,var(--act-bg),transparent 2%),transparent);
}
.act-input-bar{
  min-height:var(--act-input-h);
  display:grid;
  grid-template-columns:auto 1fr auto auto;
  align-items:center;
  gap:var(--act-space-2);
  padding:var(--act-space-2);
  border-radius:14px;
  border:1px solid var(--act-border);
  background:color-mix(in srgb,var(--act-input-bg),transparent 6%);
  box-shadow:var(--act-shadow-md);
  backdrop-filter:blur(10px);
}
.act-input{
  width:100%;
  min-height:var(--act-touch);
  max-height:140px;
  border:0;
  resize:none;
  outline:none;
  padding:10px 12px;
  border-radius:var(--act-radius-btn);
  background:color-mix(in srgb,var(--act-surface),transparent 8%);
  color:var(--act-text);
  font-size:var(--act-fs-sm);
  line-height:1.35;
}
.act-input::placeholder{color:color-mix(in srgb,var(--act-muted),transparent 12%);}

.act-btn{
  min-width:var(--act-touch);
  min-height:var(--act-touch);
  border-radius:var(--act-radius-btn);
  border:1px solid transparent;
  display:grid;
  place-items:center;
  transition:transform var(--act-fast) var(--act-ease),background-color var(--act-fast) var(--act-ease),border-color var(--act-fast) var(--act-ease),box-shadow var(--act-fast) var(--act-ease);
}
.act-btn:hover{transform:translateY(-1px);}
.act-btn:active{transform:translateY(0);}

.act-cam-btn{color:var(--act-text);background:color-mix(in srgb,var(--act-surface),transparent 4%);border-color:color-mix(in srgb,var(--act-border),transparent 12%);}
.act-cam-btn.is-active{
  color:#fff;
  background:color-mix(in srgb,var(--act-accent),#111 22%);
  border-color:color-mix(in srgb,var(--act-accent),#fff 24%);
  animation:act-cam-pulse 1.25s var(--act-ease-soft) infinite;
}

.act-mic-btn{color:var(--act-text);background:color-mix(in srgb,var(--act-surface),transparent 2%);border-color:color-mix(in srgb,var(--act-border),transparent 14%);}
.act-mic-btn.is-idle{color:var(--act-text);}
.act-mic-btn.is-listening{
  color:#fff;
  background:color-mix(in srgb,var(--act-info),#111 30%);
  border-color:color-mix(in srgb,var(--act-info),#fff 16%);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--act-info),transparent 84%);
  animation:act-mic-listening 1s linear infinite;
}
.act-mic-btn.is-speaking{
  color:#fff;
  background:color-mix(in srgb,var(--act-success),#111 28%);
  border-color:color-mix(in srgb,var(--act-success),#fff 20%);
  animation:act-mic-speaking 1.3s var(--act-ease-soft) infinite;
}
.act-mic-btn.is-error{color:#fff;background:color-mix(in srgb,var(--act-danger),#111 12%);border-color:color-mix(in srgb,var(--act-danger),#fff 18%);}

.act-send-btn{
  color:#fff;
  background:linear-gradient(150deg,color-mix(in srgb,var(--act-accent),#fff 8%),var(--act-accent));
  border-color:color-mix(in srgb,var(--act-accent),#fff 28%);
  box-shadow:var(--act-shadow-sm);
}
.act-send-btn:hover{box-shadow:var(--act-shadow-md);}
.act-send-btn:disabled,.act-send-btn.is-disabled{
  color:color-mix(in srgb,var(--act-text),transparent 46%);
  background:color-mix(in srgb,var(--act-surface),transparent 8%);
  border-color:color-mix(in srgb,var(--act-border),transparent 8%);
  box-shadow:none;
  cursor:not-allowed;
  transform:none;
}

/* ======================== 13) Camera Preview UI ======================== */
.act-cam-preview{
  position:fixed;
  inset:0;
  z-index:var(--act-z-modal);
  display:none;
  place-items:center;
  background:rgb(2 6 15 / 78%);
  backdrop-filter:blur(6px);
  padding:var(--act-space-4);
}
.act-cam-preview.is-open{display:grid;}
.act-cam-preview-frame{
  position:relative;
  width:min(96vw,860px);
  aspect-ratio:3 / 4;
  max-height:84dvh;
  border-radius:18px;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--act-border),transparent 10%);
  background:#000;
  box-shadow:var(--act-shadow-lg);
}
.act-cam-preview video,.act-cam-preview canvas,.act-cam-preview img{width:100%;height:100%;object-fit:cover;}
.act-cam-guides{
  pointer-events:none;
  position:absolute;
  inset:0;
  background:
  linear-gradient(to right,transparent 33.333%,rgb(255 255 255 / 10%) 33.333%,rgb(255 255 255 / 10%) 34.333%,transparent 34.333%,transparent 66.666%,rgb(255 255 255 / 10%) 66.666%,rgb(255 255 255 / 10%) 67.666%,transparent 67.666%),
  linear-gradient(to bottom,transparent 33.333%,rgb(255 255 255 / 10%) 33.333%,rgb(255 255 255 / 10%) 34.333%,transparent 34.333%,transparent 66.666%,rgb(255 255 255 / 10%) 66.666%,rgb(255 255 255 / 10%) 67.666%,transparent 67.666%);
}
.act-cam-preview.is-capturing .act-cam-flash{animation:act-cam-flash 260ms ease-out;}
.act-cam-flash{pointer-events:none;position:absolute;inset:0;background:#fff;opacity:0;}
.act-cam-controls{position:absolute;left:0;right:0;bottom:var(--act-space-4);display:flex;justify-content:center;align-items:center;gap:var(--act-space-3);}
.act-cam-shutter{width:64px;height:64px;border-radius:50%;border:4px solid #fff;background:color-mix(in srgb,#fff,transparent 16%);box-shadow:var(--act-shadow-md);}

/* ========================= 14) Product Card UI ========================= */
.act-product-card{
  width:min(100%,620px);
  border-radius:var(--act-radius-card);
  border:1px solid color-mix(in srgb,var(--act-border),transparent 14%);
  background:color-mix(in srgb,var(--act-surface),transparent 4%);
  box-shadow:var(--act-shadow-sm);
  overflow:hidden;
}
.act-product-card-media{aspect-ratio:16 / 9;background:color-mix(in srgb,var(--act-surface-3),transparent 16%);}
.act-product-card-media img{width:100%;height:100%;object-fit:cover;}
.act-product-card-body{padding:var(--act-space-3) var(--act-space-4);display:grid;gap:var(--act-space-2);}
.act-product-title{margin:0;font-size:var(--act-fs-md);font-weight:var(--act-fw-semibold);color:var(--act-text-strong);}
.act-product-meta{margin:0;font-size:var(--act-fs-sm);color:var(--act-muted);}
.act-product-actions{display:flex;flex-wrap:wrap;gap:var(--act-space-2);margin-top:var(--act-space-1);}
.act-product-actions .act-btn{padding:0 var(--act-space-3);min-width:max-content;background:color-mix(in srgb,var(--act-accent),transparent 86%);border-color:color-mix(in srgb,var(--act-accent),transparent 54%);color:var(--act-text-strong);}

/* ============================== 15) Toasts ============================== */
.act-toast-wrap{
  position:fixed;
  top:calc(env(safe-area-inset-top) + var(--act-space-3));
  left:50%;
  transform:translateX(-50%);
  width:min(96vw,560px);
  z-index:var(--act-z-toast);
  display:grid;
  gap:var(--act-space-2);
  pointer-events:none;
}
.act-toast{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:var(--act-space-2);
  padding:var(--act-space-3) var(--act-space-4);
  border-radius:var(--act-radius-card);
  border:1px solid color-mix(in srgb,var(--act-border),transparent 14%);
  background:color-mix(in srgb,var(--act-surface),transparent 4%);
  color:var(--act-text);
  box-shadow:var(--act-shadow-md);
  backdrop-filter:blur(10px);
  animation:act-toast-in 320ms var(--act-ease-soft) both;
}
.act-toast.is-success{border-left:3px solid var(--act-success);}
.act-toast.is-warning{border-left:3px solid var(--act-warning);}
.act-toast.is-error{border-left:3px solid var(--act-danger);}
.act-toast.is-info{border-left:3px solid var(--act-info);}
.act-toast-title{margin:0;font-size:var(--act-fs-sm);font-weight:var(--act-fw-semibold);color:var(--act-text-strong);}
.act-toast-text{margin:2px 0 0;font-size:var(--act-fs-sm);color:var(--act-muted);}
.act-toast[data-autodismiss="true"]{animation:act-toast-in 320ms var(--act-ease-soft) both,act-toast-out 360ms var(--act-ease-soft) 4.8s forwards;}

/* ============================== 16) Modal ============================== */
.act-modal{position:fixed;inset:0;z-index:var(--act-z-modal);display:none;place-items:center;padding:var(--act-space-4);}
.act-modal.is-open{display:grid;}
.act-modal-backdrop{position:absolute;inset:0;background:var(--act-overlay);backdrop-filter:blur(5px);}
.act-modal-card{
  position:relative;
  width:min(92vw,560px);
  max-height:min(86dvh,920px);
  overflow:auto;
  border-radius:16px;
  border:1px solid color-mix(in srgb,var(--act-border),transparent 8%);
  background:color-mix(in srgb,var(--act-surface),transparent 2%);
  box-shadow:var(--act-shadow-lg);
  padding:var(--act-space-5);
  animation:act-modal-in var(--act-med) var(--act-ease-soft);
}
.act-modal-title{margin:0 0 var(--act-space-3);font-size:var(--act-fs-lg);font-weight:var(--act-fw-semibold);color:var(--act-text-strong);}
.act-modal-content{font-size:var(--act-fs-sm);color:var(--act-text);}
.act-modal-actions{margin-top:var(--act-space-4);display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--act-space-2);}

/* ============================ 17) Skeletons ============================ */
.act-skeleton{position:relative;overflow:hidden;background:color-mix(in srgb,var(--act-surface-3),transparent 20%);border-radius:var(--act-radius-btn);}
.act-skeleton::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg,transparent 0%,rgb(255 255 255 / 9%) 38%,rgb(255 255 255 / 18%) 50%,rgb(255 255 255 / 9%) 62%,transparent 100%);
  animation:act-skeleton-shimmer 1.25s ease-in-out infinite;
}
.act-skeleton-line{height:12px;margin-bottom:var(--act-space-2);}
.act-skeleton-line:last-child{margin-bottom:0;}

/* ============================ 18) Powered By ============================ */
.act-powered{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  align-self:center;
  margin:var(--act-space-3) auto calc(var(--act-nav-h) + var(--act-space-2));
  padding:6px 12px;
  border-radius:var(--act-radius-pill);
  border:1px solid color-mix(in srgb,var(--act-border),transparent 14%);
  background:color-mix(in srgb,var(--act-surface),transparent 10%);
  color:var(--act-muted);
  font-size:11px;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.act-powered strong{font-weight:var(--act-fw-semibold);color:color-mix(in srgb,var(--act-text),transparent 20%);}

/* =========================== 19) State Helpers ========================== */
.act-fade-enter{opacity:0;transform:translateY(8px);}
.act-fade-enter-active{opacity:1;transform:translateY(0);transition:opacity var(--act-med) var(--act-ease),transform var(--act-med) var(--act-ease);}
.act-ring{box-shadow:0 0 0 3px color-mix(in srgb,var(--act-accent),transparent 72%);}
.act-quiet{opacity:.72;}
.act-elevated{box-shadow:var(--act-shadow-md);}

/* ============================ 20) Animations ============================ */
@keyframes act-bubble-in{
  from{opacity:0;transform:translateY(10px) scale(.985);filter:saturate(.92);}
  to{opacity:1;transform:translateY(0) scale(1);filter:saturate(1);}
}
@keyframes act-dot-bounce{
  0%,80%,100%{transform:translateY(0);opacity:.35;}
  40%{transform:translateY(-4px);opacity:1;}
}
@keyframes act-cam-flash{
  0%{opacity:0;}
  20%{opacity:.95;}
  100%{opacity:0;}
}
@keyframes act-avatar-pulse{
  0%,100%{box-shadow:var(--act-shadow-xs);}
  50%{box-shadow:var(--act-shadow-glow);}
}
@keyframes act-avatar-ring{
  from{transform:scale(.94);opacity:.95;}
  to{transform:scale(1.08);opacity:0;}
}
@keyframes act-cam-pulse{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--act-accent),transparent 60%);}
  70%{box-shadow:0 0 0 10px color-mix(in srgb,var(--act-accent),transparent 92%);}
}
@keyframes act-mic-listening{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--act-info),transparent 66%);}
  100%{box-shadow:0 0 0 12px color-mix(in srgb,var(--act-info),transparent 96%);}
}
@keyframes act-mic-speaking{
  0%,100%{transform:scale(1);}
  25%{transform:scale(1.035);}
  60%{transform:scale(.988);}
}
@keyframes act-toast-in{
  from{opacity:0;transform:translateY(-12px) scale(.98);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes act-toast-out{
  from{opacity:1;transform:translateY(0) scale(1);}
  to{opacity:0;transform:translateY(-10px) scale(.98);}
}
@keyframes act-modal-in{
  from{opacity:0;transform:translateY(16px) scale(.985);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes act-skeleton-shimmer{100%{transform:translateX(100%);}}

/* ========================== 21) Breakpoint: 375 ========================= */
@media (min-width:375px){
  .act-agent{padding-left:var(--act-space-4);padding-right:var(--act-space-4);}
  .act-messages{padding-left:var(--act-space-4);padding-right:var(--act-space-4);}
  .act-bubble{max-width:min(84%,680px);}
  .act-input-wrap{padding-left:var(--act-space-4);padding-right:var(--act-space-4);}
}

/* ========================== 22) Breakpoint: 768 ========================= */
@media (min-width:768px){
  :root{
    --act-max-chat:640px;
    --act-header-h:68px;
  }
  .act-panel--chat{width:100%;max-width:100%;margin-inline:auto;}
  .act-agent,.act-messages,.act-input-wrap,.act-powered{
    width:min(100%,calc(var(--act-max-chat) + (var(--act-space-8) * 2)));
    margin-inline:auto;
  }
  .act-agent,.act-messages,.act-input-wrap{
    padding-left:var(--act-space-6);
    padding-right:var(--act-space-6);
  }
  .act-input-wrap{left:50%;right:auto;transform:translateX(-50%);}
  .act-nav{
    width:min(100%,760px);
    margin-inline:auto;
    border-left:1px solid var(--act-border);
    border-right:1px solid var(--act-border);
    border-top-left-radius:12px;
    border-top-right-radius:12px;
  }
  .act-fab-stack{right:max(var(--act-space-6),calc((100vw - 760px) / 2 + var(--act-space-3)));}
  .act-menu{width:min(72vw,360px);}
  .act-bubble{font-size:15px;}
}

/* ========================= 23) Breakpoint: 1024 ======================== */
@media (min-width:1024px){
  :root{--act-nav-h:0px;--act-input-h:72px;}
  .act-shell{flex-direction:row;align-items:stretch;}
  .act-panel--chat{flex:0 1 52%;max-width:52%;border-right:1px solid var(--act-border);}
  .act-panel--iframe{display:block;flex:1 1 48%;min-width:var(--act-iframe-min);max-width:var(--act-iframe-max);}
  .act-splitter{display:block;}

  .act-agent,.act-messages,.act-input-wrap,.act-powered{width:min(100%,920px);}
  .act-input-wrap{left:0;right:0;transform:none;bottom:0;padding-bottom:var(--act-space-3);}
  .act-messages{padding-bottom:calc(var(--act-input-h) + var(--act-space-6));}

  .act-nav{
    position:sticky;
    top:0;
    left:0;
    right:auto;
    width:92px;
    height:100dvh;
    grid-template-columns:1fr;
    grid-auto-rows:minmax(68px,auto);
    border-top:0;
    border-right:1px solid var(--act-border);
    border-radius:0;
    order:-1;
  }
  .act-nav-item{font-size:12px;gap:6px;}
  .act-nav-item .act-nav-icon{font-size:20px;}

  .act-fab-stack{bottom:var(--act-space-6);right:var(--act-space-6);}
  .act-menu{
    top:var(--act-space-3);
    left:calc(92px + var(--act-space-3));
    height:calc(100dvh - var(--act-space-6));
    border:1px solid var(--act-border);
    border-radius:14px;
  }
}

/* ========================= 24) Breakpoint: 1440 ======================== */
@media (min-width:1440px){
  :root{
    --act-max-chat:780px;
    --act-avatar-size:48px;
    --act-input-h:76px;
    --act-iframe-max:56vw;
  }
  .act-agent,.act-messages,.act-input-wrap,.act-powered{width:min(100%,calc(var(--act-max-chat) + 160px));}
  .act-agent{padding-top:var(--act-space-4);padding-bottom:var(--act-space-4);}
  .act-messages{gap:var(--act-space-4);padding-top:var(--act-space-6);padding-bottom:calc(var(--act-input-h) + var(--act-space-8));}
  .act-bubble{font-size:var(--act-fs-md);padding:var(--act-space-4) var(--act-space-5);max-width:min(80%,760px);}
  .act-product-card{width:min(100%,700px);}
  .act-input-bar{border-radius:16px;gap:var(--act-space-3);padding:var(--act-space-3);}
  .act-toast-wrap{width:min(92vw,640px);}
}

/* ========================= 25) Breakpoint: 2560 ======================== */
@media (min-width:2560px){
  :root{
    --act-max-chat:940px;
    --act-avatar-size:56px;
    --act-header-h:78px;
    --act-input-h:84px;
    --act-iframe-max:44vw;
  }
  .act-shell{padding-inline:var(--act-space-9);gap:var(--act-space-6);}
  .act-panel--chat{
    flex-basis:42%;
    max-width:42%;
    border-right:0;
    border-radius:18px;
    overflow:hidden;
    background:color-mix(in srgb,var(--act-surface),transparent 4%);
    border:1px solid color-mix(in srgb,var(--act-border),transparent 8%);
  }
  .act-panel--iframe{
    flex-basis:34%;
    max-width:34%;
    border-radius:18px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--act-border),transparent 8%);
  }
  .act-panel--aux{
    display:block;
    flex:1 1 24%;
    min-width:420px;
    border-radius:18px;
    overflow:hidden;
    border:1px solid color-mix(in srgb,var(--act-border),transparent 8%);
  }
  .act-splitter{width:14px;min-width:14px;}
  .act-agent,.act-messages,.act-input-wrap,.act-powered{width:min(100%,calc(var(--act-max-chat) + 220px));}
  .act-messages{padding-inline:var(--act-space-8);}
  .act-bubble{max-width:min(78%,860px);}
  .act-nav{width:104px;}
  .act-menu{left:calc(104px + var(--act-space-4));width:400px;}
  .act-toast-wrap{top:var(--act-space-6);}
}

/* ===================== 26) Accessibility + Preferences ==================== */
.act-btn,.act-nav-item,.act-menu-item,.act-product-actions .act-btn,.act-send-btn,.act-cam-btn,.act-mic-btn{-webkit-tap-highlight-color:transparent;}
.act-btn:focus-visible,.act-nav-item:focus-visible,.act-menu-item:focus-visible,.act-input:focus-visible{outline:2px solid color-mix(in srgb,var(--act-accent),#fff 12%);outline-offset:2px;}
.act-input:focus-visible{box-shadow:0 0 0 3px color-mix(in srgb,var(--act-accent),transparent 80%);}
[aria-disabled="true"]{pointer-events:none;opacity:.55;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;scroll-behavior:auto !important;}
  .act-avatar.is-speaking,.act-cam-btn.is-active,.act-mic-btn.is-listening,.act-mic-btn.is-speaking{animation:none !important;}
}