/** (PREGNORF ✅) DMX Contact — base.css (Authoritative UNICHAT + Page UI)
 * File: dmx-contact-ai/base.css
 * Version: 6.5.0
 * Scope: `.dmx-contact` only. All #dmx-unichat styles live here (not in theme).
 * Fixes:
 *  - Zero phantom whitespace on first render via .state-empty
 *  - Force-visible mic/send buttons (in case Gutenberg/theme hides them)
 *  - Reliable multiline composer (84–220px)
 */

/* --------------------------------
   TOKENS (local fallbacks)
--------------------------------- */
.dmx-contact{
  --ink:#0b1220; --ink-strong:#0f172a; --muted:#5b6577;
  --paper:#ffffff; --soft:#f7f8fb; --soft-2:#f8fafc;
  --line:#e7e9ee; --brand:#e0002a;
  --ok:#16a34a; --warn:#f59e0b; --bad:#dc2626;
  --radius:14px; --radius-lg:18px;
  --shadow-sm:0 2px 8px rgba(17,24,39,.06);
  --shadow-md:0 6px 18px rgba(17,24,39,.08);
  --ring:rgba(224,0,42,.22);
  --page-max:1100px; --page-pad:clamp(12px,3vw,16px);
  --section-pad:clamp(20px,4vw,40px); --section-gap:clamp(16px,3vw,28px);
  --gap:16px;
}

/* --------------------------------
   UTILS
--------------------------------- */
.dmx-contact .wrap{max-width:var(--page-max);margin:0 auto;padding-inline:var(--page-pad)}
.dmx-contact .hidden{display:none!important}
.dmx-contact .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Optional toast */
.dmx-contact #dmx-toast{
  position:fixed;left:50%;bottom:18px;transform:translate(-50%,10px);
  opacity:0;transition:opacity .12s ease,transform .12s ease;
  background:#111827;color:#fff;border-radius:10px;padding:8px 12px;font-size:12px;box-shadow:0 10px 25px rgba(0,0,0,.15);
  z-index:99999
}
.dmx-contact #dmx-toast.show{opacity:1;transform:translate(-50%,0)}

/* --------------------------------
   PAGE RHYTHM
--------------------------------- */
.dmx-contact{padding-block:var(--section-pad);color:var(--ink)}
.dmx-contact > section + section{margin-top:var(--section-gap)}

/* --------------------------------
   HERO (light)
--------------------------------- */
.dmx-contact #dmx-contact-hero{padding:36px 0;background:#fff;color:var(--ink)}
.dmx-contact #dmx-contact-hero .dmx-eyebrow{display:inline-block;font-weight:600;color:var(--muted);margin-bottom:6px}
.dmx-contact #dmx-contact-hero .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.dmx-contact #dmx-contact-hero h1{margin:0;font-size:clamp(28px,3.4vw,40px);line-height:1.1}
.dmx-contact #dmx-contact-hero .open{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:6px 10px;font-weight:600}
.dmx-contact #dmx-contact-hero .open .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)}
.dmx-contact #dmx-contact-hero .open.quiet .dot{background:var(--warn)}
.dmx-contact #dmx-contact-hero p{color:var(--muted);margin:10px 0 16px;max-width:68ch}
.dmx-contact #dmx-contact-hero .rail{display:flex;gap:10px;flex-wrap:wrap}
.dmx-contact #dmx-contact-hero .btn{border:1px solid var(--line);padding:10px 14px;border-radius:12px;color:var(--ink);text-decoration:none;background:#fff;font-weight:700;box-shadow:var(--shadow-sm)}
.dmx-contact #dmx-contact-hero .btn:hover{box-shadow:var(--shadow-md)}
.dmx-contact #dmx-contact-hero .btn-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.dmx-contact #dmx-contact-hero .btn-wa{border-color:#25D366;color:#0b8f54}

/* ===================================================================
   UNIFIED CHAT — AUTHORITATIVE (ONLY HERE, NOT IN THEME)
=================================================================== */

/* Section shell */
.dmx-contact #dmx-unichat{padding:8px 0 26px;background:#fff;color:var(--ink)}

/* 2-col layout */
.dmx-contact #dmx-unichat .layout{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--gap);align-items:start
}
@media (max-width:980px){
  .dmx-contact #dmx-unichat .layout{grid-template-columns:1fr}
  .dmx-contact #dmx-unichat aside.side{order:2}
}

/* Frame */
.dmx-contact #dmx-unichat .frame{
  border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm);
  --wp--style--block-gap:0; padding:0 !important;
}

/* Topbar */
.dmx-contact #dmx-unichat .topbar{display:flex;justify-content:flex-end;gap:6px;padding:8px;border-bottom:1px solid var(--line)}
.dmx-contact #dmx-unichat .ibtn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:6px 9px;cursor:pointer}

/* Stream */
.dmx-contact #dmx-unichat .stream{
  max-height:56vh;overflow:auto;padding:10px 12px !important;background:#fff;
  --wp--style--block-gap:0 !important;
}
@media (max-width:560px){.dmx-contact #dmx-unichat .stream{max-height:62vh}}
.dmx-contact #dmx-unichat .banner{font-size:12px;color:var(--muted);margin:0 0 6px}
.dmx-contact #dmx-unichat .banner:empty{display:none!important}

.dmx-contact #dmx-unichat .stream>.msg:first-of-type{margin-top:0 !important}
.dmx-contact #dmx-unichat .stream>.msg:last-of-type{margin-bottom:0 !important}
.dmx-contact #dmx-unichat .stream>.msg.welcome{margin-block:0 !important}
.dmx-contact #dmx-unichat .msg{display:flex;margin-block:8px}

/* Bubbles */
.dmx-contact #dmx-unichat .msg .bubble{
  padding:12px 14px;border-radius:var(--radius);max-width:85%;
  border:1px solid var(--line);box-shadow:0 1px 0 rgba(17,24,39,.03);
  word-wrap:break-word;white-space:pre-wrap;background:var(--soft-2);color:var(--ink)
}
.dmx-contact #dmx-unichat .msg.assistant .bubble{
  background:transparent!important;border-color:transparent!important;box-shadow:none!important;
  padding-left:0!important;padding-right:0!important;color:var(--ink)!important
}
.dmx-contact #dmx-unichat .msg.user .bubble{
  background:#f3f4f6!important;color:#0b1220!important;margin-left:auto;border-color:#e5e7eb!important
}
.dmx-contact #dmx-unichat .msg .bubble>:first-child{margin-top:0!important}
.dmx-contact #dmx-unichat .msg .bubble>:last-child{margin-bottom:0!important}

/* Welcome chips (compact) */
.dmx-contact #dmx-unichat .welcome .intro{margin:0 0 8px 0;line-height:1.35}
.dmx-contact #dmx-unichat .welcome .chips{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.dmx-contact #dmx-unichat .chip{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:6px 10px;cursor:pointer;font-weight:600}
.dmx-contact #dmx-unichat .chip:hover{box-shadow:var(--shadow-sm)}

/* Composer */
.dmx-contact #dmx-unichat .composer{
  position:relative!important;display:block;border-top:1px solid var(--line);padding:10px 12px!important;background:#fff
}
.dmx-contact #dmx-unichat textarea{
  width:100%;
  min-height:84px; max-height:220px; resize:vertical;
  border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:#fff;color:var(--ink);
  line-height:1.45; padding-right:68px !important;
}
.dmx-contact #dmx-unichat textarea:focus{outline:2px solid var(--ring);outline-offset:2px}

/* Buttons (force-visible + positioned) */
.dmx-contact #dmx-unichat .composer #dmx-send,
.dmx-contact #dmx-unichat .composer #dmx-voice-toggle{
  position:absolute!important;top:50%;transform:translateY(-50%);
  width:28px;height:28px;padding:0!important;border:0!important;background:transparent!important;
  display:inline-flex !important; align-items:center; justify-content:center;
  cursor:pointer; z-index:2; opacity:1 !important; visibility:visible !important;
}
.dmx-contact #dmx-unichat .composer #dmx-send{right:14px;color:var(--brand,#e0002a)}
.dmx-contact #dmx-unichat .composer #dmx-voice-toggle{right:46px;color:var(--ink,#0b1220)}
.dmx-contact #dmx-unichat .composer #dmx-send::after{
  content:"⬆︎";font-size:22px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif
}
.dmx-contact #dmx-unichat .composer #dmx-voice-toggle::after{
  content:"🎤";font-size:20px;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",system-ui,sans-serif
}
.dmx-contact #dmx-unichat .hint{font-size:12px;color:var(--muted);padding:0 10px 10px}
@media (max-width:480px){
  .dmx-contact #dmx-unichat textarea{padding-right:64px!important}
  .dmx-contact #dmx-unichat .composer #dmx-voice-toggle{right:44px}
}

/* Empty/active state (tight welcome) */
.dmx-contact #dmx-unichat .stream{ min-height:240px; }
.dmx-contact #dmx-unichat .frame.state-empty .stream{
  min-height:0 !important; padding:0 !important; margin:0 !important;
}
.dmx-contact #dmx-unichat .frame.state-empty .msg.welcome{margin:0 !important}
.dmx-contact #dmx-unichat .frame.state-empty .msg.welcome .bubble{
  margin:0 !important;
  padding-left:6px !important; /* keep a subtle left gutter when transparent */
}

/* Sidebar */
.dmx-contact #dmx-unichat aside.side .card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px;box-shadow:var(--shadow-sm)}
.dmx-contact #dmx-unichat aside.side .card + .card{margin-top:var(--section-gap)}
.dmx-contact #dmx-unichat aside.side .pill{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:999px;padding:6px 10px;margin:0 6px 6px 0;background:#fff;color:var(--ink);font-weight:600}
.dmx-contact #dmx-unichat aside.side .map{aspect-ratio:16/10;border:1px solid var(--line);border-radius:10px;overflow:hidden}

/* Email card (below chat) */
.dmx-contact #dmx-email{margin-top:var(--section-gap)}
.dmx-contact #dmx-email .card{border:1px solid var(--line);border-radius:14px;background:#fff;padding:16px;box-shadow:var(--shadow-sm)}
.dmx-contact #dmx-email h3{margin:0 0 4px}
.dmx-contact #dmx-email .dmx-email-sub{color:var(--muted);margin-top:6px}
.dmx-contact #dmx-email .grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.dmx-contact #dmx-email .grid{grid-template-columns:1fr}}
.dmx-contact #dmx-email .field{display:flex;flex-direction:column;gap:6px}
.dmx-contact #dmx-email label{font-size:13px;color:var(--ink)}
.dmx-contact #dmx-email .input,.dmx-contact #dmx-email .text{
  width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:15px;color:var(--ink);background:#fff;transition:border-color .12s ease, box-shadow .12s ease
}
.dmx-contact #dmx-email .input:focus,.dmx-contact #dmx-email .text:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.dmx-contact #dmx-email .input:invalid,.dmx-contact #dmx-email .text:invalid{border-color:#fecaca}
.dmx-contact #dmx-email .text{min-height:160px;resize:vertical}
.dmx-contact #dmx-email .actions{display:flex;gap:10px;align-items:center;margin-top:10px}
.dmx-contact #dmx-email .btn{border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer;background:#fff}
.dmx-contact #dmx-email .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.dmx-contact #dmx-email .btn[disabled]{opacity:.6;cursor:not-allowed}
.dmx-contact #dmx-email .note{font-size:12px;color:var(--muted)}
.dmx-contact #dmx-flash .ok{margin:12px 0;padding:12px;border-radius:10px;border:1px solid #c6f6d5;background:#f0fff4;color:#166534}
.dmx-contact #dmx-flash .err{margin:12px 0;padding:12px;border-radius:10px;border:1px solid #fecaca;background:#fff1f2;color:#991b1b}

/* Inline email (inside chat) */
.dmx-contact #dmx-unichat .embed-form{display:block;max-width:720px;border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px;margin:6px 0 10px;box-shadow:var(--shadow-sm)}
.dmx-contact #dmx-unichat .embed-form h4{margin:0 0 6px;font-size:15px;color:var(--ink)}
.dmx-contact #dmx-unichat .embed-form .grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.dmx-contact #dmx-unichat .embed-form .full{grid-column:1/-1}
@media (max-width:640px){.dmx-contact #dmx-unichat .embed-form .grid{grid-template-columns:1fr}}
.dmx-contact #dmx-unichat .embed-form .field{display:flex;flex-direction:column;gap:6px}
.dmx-contact #dmx-unichat .embed-form label{font-size:12px;color:var(--ink)}
.dmx-contact #dmx-unichat .embed-form .input,.dmx-contact #dmx-unichat .embed-form .text{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:14px;color:var(--ink);background:#fff}
.dmx-contact #dmx-unichat .embed-form .text{min-height:120px;resize:vertical}
.dmx-contact #dmx-unichat .embed-form .actions{display:flex;gap:8px;align-items:center;margin-top:8px}
.dmx-contact #dmx-unichat .embed-form .btn{border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-weight:700}
.dmx-contact #dmx-unichat .embed-form .btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.dmx-contact #dmx-unichat .embed-form .note{font-size:11px;color:var(--muted)}
.dmx-contact #dmx-unichat .embed-flash .ok{margin:8px 0;padding:10px;border-radius:10px;border:1px solid #c6f6d5;background:#f0fff4;color:#166534}
.dmx-contact #dmx-unichat .embed-flash .err{margin:8px 0;padding:10px;border-radius:10px;border:1px solid #fecaca;background:#fff1f2;color:#991b1b}

/* Full-screen chat */
.dmx-contact #dmx-fullscreen::before,
.dmx-contact #dmx-fullscreen::after{content:none!important}
.dmx-contact #dmx-unichat .topbar .ibtn{color:var(--ink)!important}
.dmx-contact #dmx-fullscreen #dmx-fs-ico{display:inline-block;font-size:16px;line-height:1}
.dmx-contact.is-fullscreen #dmx-unichat .frame{
  position:fixed;inset:0;z-index:2147483646;width:100vw;height:100vh;border-radius:0;margin:0;background:#fff;display:flex;flex-direction:column;box-shadow:none
}
.dmx-contact.is-fullscreen #dmx-unichat .stream{flex:1;max-height:none;overflow:auto;padding:12px 16px 8px;background:#fff}
.dmx-contact.is-fullscreen #dmx-unichat .topbar{flex:0 0 auto;position:relative;z-index:1}
.dmx-contact.is-fullscreen #dmx-unichat .composer{flex:0 0 auto;position:relative;z-index:1;border-top:1px solid var(--line);background:#fff}
.dmx-noscroll{overflow:hidden!important;height:100%!important}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .dmx-contact *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Stream spacing polish */
.dmx-contact #dmx-unichat .stream p{margin:0 0 8px}
.dmx-contact #dmx-unichat .btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

/* Mic pulse when active (toggle .is-active on #dmx-voice-toggle) */
.dmx-contact #dmx-unichat .composer #dmx-voice-toggle.is-active{position:relative}
.dmx-contact #dmx-unichat .composer #dmx-voice-toggle.is-active::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(224,0,42,.35);
  animation:dmx-mic-pulse 1.6s ease-out infinite;
}
@keyframes dmx-mic-pulse{0%{box-shadow:0 0 0 0 rgba(224,0,42,.35)}70%{box-shadow:0 0 0 10px rgba(224,0,42,0)}100%{box-shadow:0 0 0 0 rgba(224,0,42,0)}}

/* Assistant gutter fix (subtle left padding for transparent assistant bubbles) */
.dmx-contact #dmx-unichat .msg.assistant{ padding-left:6px; }
.dmx-contact #dmx-unichat .msg.assistant .bubble{ padding-left:6px !important; }

/* Optional: nudge the very first/welcome message slightly for balance */
.dmx-contact #dmx-unichat .stream > .msg.welcome{ margin-left:2px; }