/* DGxOne • chat-ui.css (v1.6 — skin-only layer)
   Purpose:
   - Keep the v1.x glossy look WITHOUT overriding layout from chat.css v2.6
   - No position/size geometry (chat.css owns that)
   - Strong click-through guards; safe z-index coordination with overrides.css v1.5+
   - Works with main.js ≥ v28.3, ai-config.js ≥ v4.0
*/

/* ===== Theming (scoped tokens so we don't override site/global) ===== */
:root{
  /* chat-only tokens */
  --chat-glass: rgba(30,36,52,.55);
  --chat-glass-strong: rgba(18,22,33,.88);
  --chat-panel: rgba(18,22,33,.72);
  --chat-line: rgba(255,255,255,.08);
  --chat-muted: #9aa3b2;
  --chat-text: #e8ecf3;
  --chat-green: #57f28c;
  --chat-blue: #8ec5ff;
  --chat-purple: #b19dff;
  --chat-danger: #ff6b6b;
  --chat-chip: rgba(255,255,255,.06);
  --chat-chip-hover: rgba(255,255,255,.12);
  --chat-me: linear-gradient(180deg,#2a9df4,#6ea8ff);
  --chat-ai: linear-gradient(180deg,#222a3f,#1a2134);
  --chat-tool: rgba(130,140,255,.12);
  --chat-shadow: 0 10px 30px rgba(0,0,0,.35);
  --chat-radius-xl: 18px;
  --chat-radius-lg: 14px;
  --chat-radius-md: 12px;
  --chat-blur: 14px;
}
@media (prefers-color-scheme: light){
  :root{
    --chat-panel: rgba(255,255,255,.76);
    --chat-glass: rgba(255,255,255,.70);
    --chat-glass-strong: rgba(255,255,255,.90);
    --chat-line: rgba(0,0,0,.08);
    --chat-text: #121622;
    --chat-muted: #516078;
    --chat-tool: rgba(70,80,220,.10);
  }
}

/* ===== Hard visibility guards (duplicate-safe with chat.css) ===== */
.chat-panel:not(.open){ display:none !important; }
.chat-open .chat-bubble{ display:none !important; }

/* ===== Launcher (visuals only; geometry owned by chat.css) ===== */
.chat-bubble{
  background: var(--chat-glass);
  color: var(--chat-text);
  border: 1px solid var(--chat-line);
  backdrop-filter: blur(var(--chat-blur));
  box-shadow: var(--chat-shadow);
  transition: transform .12s, background .2s, box-shadow .25s;
  font-size: 24px;
}
.chat-bubble:hover{
  transform: scale(1.03);
  background: var(--chat-glass-strong);
}

/* ===== Panel shell (no width/pos; just skin) ===== */
.chat-panel{
  background: var(--chat-panel);
  border: 1px solid var(--chat-line);
  border-radius: var(--chat-radius-xl);
  box-shadow: var(--chat-shadow);
  backdrop-filter: blur(var(--chat-blur));
  isolation: isolate;
}
@supports (-webkit-touch-callout:none){
  .chat-panel{ -webkit-transform: translateZ(0); transform: translateZ(0); }
}

/* ===== Header ===== */
.chat-head{
  background: linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0));
  border-bottom: 1px solid var(--chat-line);
  cursor: grab; user-select: none;
  padding-right: calc(14px + env(safe-area-inset-right,0px));
}
.chat-panel.dragging .chat-head{ cursor:grabbing; }

.chat-title{ display:flex; align-items:center; gap:8px; font-weight:600; }
.chat-title strong{ letter-spacing:.2px; }

.chat-status{
  width:9px; height:9px; border-radius:50%; display:inline-block;
  background:#74ffae; box-shadow:0 0 0 0 rgba(116,255,174,.6);
}
.chat-status.offline{ background:var(--chat-muted); box-shadow:none; }
@keyframes chat-pulse{ 0%{box-shadow:0 0 0 0 rgba(116,255,174,.55)} 70%{box-shadow:0 0 0 10px rgba(116,255,174,0)} 100%{box-shadow:0 0 0 0 rgba(116,255,174,0)} }
.chat-title .chat-status:not(.offline){ animation:chat-pulse 2.2s ease-out infinite; }

.chat-live{ color:var(--chat-purple); font-size:12px; margin-left:2px; }

/* Mode badge — show only when chat open (reinforced here; JS sets text) */
#byokBadge{ display:none !important; }
.chat-open #byokBadge.mode-badge{
  display:inline-flex !important;
  background: var(--chat-chip);
  border: 1px solid var(--chat-line);
  color: var(--chat-text);
  padding: .25rem .5rem;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

/* Header action chips */
.chat-actions{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.chip{
  appearance:none; border:1px solid var(--chat-line); cursor:pointer;
  padding:.45rem .65rem; border-radius:999px;
  background:var(--chat-chip); color:var(--chat-text);
  font-size:.85rem; line-height:1; transition:all .15s ease;
}
.chip:hover{ background:var(--chat-chip-hover); transform:translateY(-1px); }
.chip:active{ transform:translateY(0); }
.chip.danger{
  color:#fff; background:linear-gradient(180deg,#ff8a8a,#ff6b6b); border-color:transparent;
}

/* ===== Quick prompts (cosmetic only) ===== */
.chat-prompts{
  border-bottom: 1px solid var(--chat-line);
  background: transparent;
}
.chat-prompts .pill{
  padding:.35rem .7rem; border-radius:999px; border:1px solid var(--chat-line);
  background:var(--chat-chip); color:var(--chat-text); cursor:pointer; transition:all .15s ease;
  font-size:.85rem;
}
.chat-prompts .pill:hover{ background:var(--chat-chip-hover); transform:translateY(-1px); }

/* ===== Body (cosmetic only) ===== */
.chat-body{
  background: radial-gradient(1200px 600px at 80% -10%, rgba(145,170,255,.06), transparent);
  -webkit-overflow-scrolling: touch;
}

/* messages (honor chat.css layout; just skin) */
.msg .label{ color: var(--chat-muted); font-size:.78rem; margin-bottom:4px; }
.msg .bubble{
  border-radius: var(--chat-radius-lg);
  padding: .75rem .9rem;
  border: 1px solid var(--chat-line);
  backdrop-filter: blur(8px);
  animation: chat-pop .15s ease both;
}
@keyframes chat-pop{ from{ transform:translateY(4px); opacity:0 } to{ transform:translateY(0); opacity:1 } }

.msg.me .bubble, .msg.user .bubble{
  background: var(--chat-me);
  color: #07101f; font-weight: 500; border-color: transparent;
}
.msg.assistant .bubble{ background: var(--chat-ai); color: var(--chat-text); }
.msg.tool .bubble{
  background: var(--chat-tool); color: var(--chat-text);
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Typing dots */
.dots{ display:inline-flex; gap:6px; vertical-align:middle; }
.dots i{
  width:6px; height:6px; border-radius:50%; background:currentColor;
  opacity:.6; animation: chat-bounce 1.2s infinite ease-in-out;
}
.dots i:nth-child(2){ animation-delay:.15s; }
.dots i:nth-child(3){ animation-delay:.3s; }
@keyframes chat-bounce{ 0%,80%,100%{transform:scale(.6);opacity:.4} 40%{transform:scale(1);opacity:.9} }

/* ===== Attachments (cosmetic only) ===== */
.chat-attachments{
  border-top: 1px dashed var(--chat-line);
}
.chat-attachments img{
  border-radius: 12px; border: 1px solid var(--chat-line);
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}

/* ===== Composer (visuals only; geometry from chat.css) ===== */
.chat-input{
  background: var(--chat-glass-strong);
  border-top: 1px solid var(--chat-line);
  position: relative; z-index: 2147483210;  /* keep above stray overlays */
}
#chatAttach{ font-size:18px; width:38px; height:38px; display:grid; place-items:center; }
#chatText{
  background: rgba(255,255,255,.06);
  color: var(--chat-text);
  border: 1px solid var(--chat-line);
  border-radius: 12px;
  padding: .7rem .9rem;
  outline: none; resize: vertical; line-height: 1.25;
}
#chatText:focus{
  border-color: rgba(145,170,255,.35);
  box-shadow: 0 0 0 3px rgba(145,170,255,.15) inset;
}
#chatSend{
  padding: .6rem .9rem; border-radius: 12px;
  background: linear-gradient(180deg,#9fd3ff,#6ab7ff);
  border: none; color: #0b0f18; font-weight: 700; cursor: pointer;
  transition: transform .12s ease, filter .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(111,177,255,.35);
}
#chatSend:hover{ transform: translateY(-1px); filter: saturate(1.05); }
#chatSend:active{ transform: translateY(0); }

/* ===== Drawer (optional privacy pane) ===== */
.drawer{
  background: var(--chat-panel);
  border-left: 1px solid var(--chat-line);
  backdrop-filter: blur(var(--chat-blur));
}

/* ===== Scrollbars (polish) ===== */
.chat-body, .drawer__body, .chat-input textarea{
  scrollbar-width: thin;
  scrollbar-color: rgba(180,190,220,.35) transparent;
}
.chat-body::-webkit-scrollbar{ height:10px; width:10px; }
.chat-body::-webkit-scrollbar-thumb{ background: rgba(180,190,220,.3); border-radius: 999px; }

/* ===== Accessibility ===== */
@media (prefers-reduced-motion: reduce){
  .chat-bubble, .chat-panel, .chip, .msg .bubble, .chat-status{
    transition: none !important; animation: none !important;
  }
}

/* ===== Legacy compat / safety ===== */
.msg.user{ margin-left:auto; text-align:right; }  /* legacy */
.msg.user .bubble{ margin-left:auto; }

/* Identity widget must win stack (mirror of overrides.css; harmless duplicate) */
#netlify-identity-widget,
.netlify-identity-widget,
.netlify-identity-modal,
.netlify-identity-overlay,
.netlify-identity-ui,
.netlify-identity-iframe{ z-index:2147483600 !important; }

/* SVGs inherit color */
svg, svg *{ fill: currentColor !important; stroke: currentColor !important; }

/* =========================================================
   MOBILE GLASS BOOST — deeper blur/opacity under 720px
   ========================================================= */
@media (max-width: 720px){
  :root{
    --chat-blur: 18px;                  /* deepen glass effect */
    --chat-panel: rgba(12,16,26,.84);   /* more solid panel */
    --chat-glass: rgba(20,26,38,.70);   /* stronger launcher glass */
    --chat-glass-strong: rgba(16,20,30,.92);
  }

  .chat-bubble{
    box-shadow: 0 12px 34px rgba(0,0,0,.45);
    font-size: 22px;                    /* tiny downscale for tight screens */
  }

  .chat-panel{
    box-shadow: 0 18px 40px rgba(0,0,0,.5);
    backdrop-filter: blur(var(--chat-blur)) saturate(120%);
  }

  .chat-head{
    background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0));
    padding-right: calc(12px + env(safe-area-inset-right,0px));
  }

  .chat-prompts{
    background: transparent;
  }

  .msg .bubble{
    backdrop-filter: blur(10px);
  }

  .chat-input{
    background: var(--chat-glass-strong);
    backdrop-filter: blur(var(--chat-blur)) saturate(120%);
  }

  /* Slightly smaller chips to fit two rows neatly */
  .chip{ padding:.4rem .6rem; font-size:.82rem; }
  .chat-prompts .pill{ padding:.32rem .6rem; font-size:.82rem; }
}