/* ==========================================================================
   LegalHub Chat — Theme (scoped)
   Drop this in: public/css/wp-override.css  OR load as a new stylesheet after app-inline.css
   Everything is scoped to .laci-scope so it won't bleed into the site.
   ========================================================================== */

.laci-scope{
  /* THEME TOKENS ----------------------------------------------------------- */
  --lh-bg:            #f6f8ff;        /* page gradient start */
  --lh-bg-2:          #eef2ff;        /* page gradient end   */
  --lh-surface:       #ffffff;        /* white surfaces      */
  --lh-surface-2:     #fafbff;        /* soft surface tint   */
  --lh-border:        #e6e9f2;        /* card & input border */
  --lh-soft-border:   #edf0f7;        /* hairline separators */
  --lh-text:          #0f172a;        /* main text (slate-900) */
  --lh-text-2:        #334155;        /* secondary text */
  --lh-muted:         #6b7280;        /* muted text */
  --lh-muted-2:       #94a3b8;        /* extra muted */
  --lh-brand:         #5b52ff;        /* primary purple */
  --lh-brand-ink:     #3c37c9;        /* darker purple for hover */
  --lh-success:       #10b981;        /* green */
  --lh-verified:      #6d6efb;        /* verification pill outline/fill */
  --lh-shadow:        0 10px 30px rgba(17, 24, 39, 0.05);
  --lh-radius-lg:     18px;
  --lh-radius-md:     12px;
  --lh-radius-sm:     10px;

  /* Layout tokens */
  --lh-widget-radius: 20px;
  --lh-send-h:        44px;
  --lh-pill-h:        24px;
  --lh-gap:           16px;

  position: static !important;
  height: 100% !important;   /* fill container */
  width: 100% !important;
  inset: auto !important;
  color: var(--lh-text);
}

/* Background for the chat region */
.laci-scope .chat-container{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  min-height: 0 !important;
  border-radius: var(--lh-widget-radius);
  background: linear-gradient(180deg, var(--lh-bg) 0%, var(--lh-bg-2) 100%);
  box-shadow: var(--lh-shadow);
  overflow: hidden;
}

/* ------------------------------ Header ---------------------------------- */
.laci-scope .chat-container > header{
  background: var(--lh-surface);
  border-bottom: 1px solid var(--lh-soft-border);
  padding: 18px 20px;
  flex: 0 0 auto !important;
}

.laci-scope .chat-container > header .title,
.laci-scope .chat-container > header h1,
.laci-scope .chat-container > header h2{
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--lh-text);
}

.laci-scope .chat-container > header .subtitle{
  font-size: 13px;
  line-height: 1.35;
  color: var(--lh-muted);
  margin-top: 4px;
}

/* Status pills ("Online", "Verified") */
.laci-scope .lh-pills{ display:flex; align-items:center; gap:8px; }

.laci-scope .lh-pill{
  height: var(--lh-pill-h);
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  background: #eef6ff;
  color: #1e293b;
  border: 1px solid var(--lh-border);
}

.laci-scope .lh-pill--online{
  background: #e8fff7;
  color: #065f46;
  border-color: #b7f5dd;
}
.laci-scope .lh-pill--online .dot{
  width: 8px; height: 8px; border-radius:50%;
  background: var(--lh-success);
  box-shadow: 0 0 0 3px rgba(16,185,129,.18);
}

.laci-scope .lh-pill--verified{
  background: rgba(109,110,251,.10);
  color: var(--lh-verified);
  border: 1px solid rgba(109,110,251,.35);
}
.laci-scope .lh-pill--verified .check{
  width: 14px; height: 14px; display:inline-block;
  border-radius: 50%;
  background: var(--lh-verified);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M6.173 12.027L2.4 8.253 3.814 6.84l2.36 2.36 5.97-5.97L13.56 4.64z"/></svg>') center/12px 12px no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" viewBox="0 0 16 16"><path d="M6.173 12.027L2.4 8.253 3.814 6.84l2.36 2.36 5.97-5.97L13.56 4.64z"/></svg>') center/12px 12px no-repeat;
  background-clip: content-box;
}

/* Avatar "LH" rounded square */
.laci-scope .lh-avatar{
  --lh-size: 36px;
  --lh-radius: 10px;
  width: var(--lh-size);
  height: var(--lh-size);
  min-width: var(--lh-size);
  min-height: var(--lh-size);
  border-radius: var(--lh-radius);
  background: var(--lh-brand);
  color: #fff;
  display:flex; align-items:center; justify-content:center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 6px 18px rgba(91,82,255,.25);
  flex: 0 0 var(--lh-size);
}



/* ------------------------------ Chat List ------------------------------- */
.laci-scope #chatWrap{
  flex: 1 1 auto !important;
  min-height: 400 !important;
  max-height: 400px !Important;
  overflow-y: auto !important;
  padding: 18px 20px;
  scroll-behavior: smooth;
}

/* Helper chip above first message */
.laci-scope .lh-chip{
  background: #eef2ff;
  color: #4f46e5;
  border: 1px solid #e3e7ff;
  border-radius: 999px;
  font-size: 12px;
  padding: 6px 12px;
  display:inline-flex; align-items:center; gap:6px;
  margin: 8px auto 18px;
}

/* Message bubble — bot/user (base) */
.laci-scope .bubble{
  background: var(--lh-surface);
  border: 1px solid var(--lh-border);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(2, 6, 23, .06);
  color: var(--lh-text-2);
  max-width: 680px;
}

/* left tail */
.laci-scope .bubble-tail-left{
  position: relative;
}
.laci-scope .bubble-tail-left:after{
  content:"";
  position:absolute; left:-8px; bottom:18px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--lh-surface);
  border-left:1px solid var(--lh-border);
  border-bottom:1px solid var(--lh-border);
}

/* Timestamp */
.laci-scope .lh-time{
  font-size: 11px; line-height:1.25; color: var(--lh-muted-2);
  margin-top: 6px;
}

/* Typing dots (fallback) */
.laci-scope .typing-dot{
  display:inline-block; width:8px; height:8px; border-radius:9999px;
  background:#94a3b8; opacity:.45; vertical-align:middle;
  animation: laci-typing 1.1s ease-in-out infinite;
}
.laci-scope .typing-dot:nth-child(2){ animation-delay:.15s }
.laci-scope .typing-dot:nth-child(3){ animation-delay:.30s }
@keyframes laci-typing{
  0%,80%,100%{ transform: translateY(0); opacity:.45 }
  40%{ transform: translateY(-2px); opacity:1 }
}

/* ------------------------------ Composer/Footer ------------------------ */
.laci-scope .chat-container > footer{
  background: var(--lh-surface);
  border-top: 1px solid var(--lh-soft-border);
  padding: 16px 20px 18px;
  flex: 0 0 auto !important;
}

/* input shell */
.laci-scope .composer{
  display:flex; align-items:center; gap:10px;
  background: var(--lh-surface);
  border: 1px solid var(--lh-border);
  border-radius: 999px;
  padding: 6px 10px 6px 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

.laci-scope .composer textarea,
.laci-scope .composer input[type="text"]{
  width:100%; resize:none; border:0; outline:0; background:transparent;
  font-size: 15px; line-height: 1.4; color: var(--lh-text);
}

/* Send button */
.laci-scope #sendBtn{
  height: calc(var(--lh-send-h) - 6px);
  min-width: 84px;
  padding: 0 18px;
  border-radius: 12px;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #fff;
  background: var(--lh-brand);
  font-weight: 700;
  letter-spacing: .2px;
  transition: transform .05s ease, background .2s ease;
}
.laci-scope #sendBtn:hover{
  background: var(--lh-brand-ink);
}
.laci-scope #sendBtn:active{
  transform: translateY(1px);
}
.laci-scope #sendBtn:focus,
.laci-scope #sendBtn:focus-visible{
  box-shadow: 0 0 0 3px rgba(91,82,255,.25) !important;
}

/* Footer small print */
.laci-scope .footer-meta{
  display:flex; justify-content:space-between; gap:14px;
  margin-top: 10px;
  color: #4b5563;
  font-size: 12px; line-height: 1.35;
}
.laci-scope .footer-legal{
  color: #4b5563;
  font-size: 12px; line-height: 1.45;
  margin-top: 10px;
  text-align: justify;
}
.laci-scope .footer-legal a{ color:#374151; text-decoration:underline; }

/* ------------------------------ Utilities / Fixes ---------------------- */

/* Keep elements inside widget from being pinned to viewport */
.laci-scope .fixed,
.laci-scope [style*="position:fixed"]{ position: static !important; }

/* Neutralize any h-[100vh] style from original */
.laci-scope .h-screen,
.laci-scope [class*="h-[100vh"],
.laci-scope [class*="h-[92vh"]{ height: 100% !important; }

/* Scrollbar (webkit) */
.laci-scope #chatWrap::-webkit-scrollbar{ width: 10px }
.laci-scope #chatWrap::-webkit-scrollbar-track{ background: transparent }
.laci-scope #chatWrap::-webkit-scrollbar-thumb{
  background: #dfe3f3; border-radius: 999px; border: 3px solid transparent; background-clip: padding-box;
}

/* Ensure pills & header layout don't wrap awkwardly */


/* Optional: card edges rounding visible on white backgrounds */
.laci-scope .chat-container{ border: 1px solid var(--lh-border); }
/* === Footer: smaller + dark gray + extra bottom space === */
.laci-scope .chat-container > footer{
  padding-bottom: 28px !important;                /* (2) spacing below */
}
.laci-scope .footer-meta,
.laci-scope .footer-legal{
  font-size: 12px !important;                     /* (1) small */
  line-height: 1.45 !important;
  color: #4b5563 !important;                      /* dark gray, not black */
}
.laci-scope .footer-legal{ margin-top: 10px !important; }

/* === Header: tighten title → subtitle gap === */
.laci-scope .chat-container > header h1,
.laci-scope .chat-container > header h2,
.laci-scope .chat-container > header .title{
  margin: 0 !important;
}
.laci-scope .chat-container > header .subtitle{
  margin-top: 2px !important;                     /* (3) less space */
  color: #6b7280 !important;
}

/* === Pills: smaller sizing for both; specific colors per type === */
.laci-scope .lh-pill{                              /* base pill size (4) */
  height: 20px !important;
  font-size: 11px !important;
  padding: 0 8px !important;
  gap: 6px !important;
}

/* Online pill — green (5) */
.laci-scope .lh-pill--online,
.laci-scope .lh-pill.online,
.laci-scope .lh-pills .online{
  background: #e8fff7 !important;
  color: #065f46 !important;
  border-color: #b7f5dd !important;
}

/* Verified pill — smaller too */
.laci-scope .lh-pill--verified,
.laci-scope .lh-pill.verified,
.laci-scope .lh-pills .verified{
  background: rgba(109,110,251,.10) !important;
  color: #6d6efb !important;
  border-color: rgba(109,110,251,.35) !important;
}

/* === Online indicator dot in header: force green (6) */
.laci-scope .lh-online-dot,
.laci-scope .chat-container > header .online-dot,
.laci-scope .chat-container > header .status-dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: #10b981 !important;                 /* green fill */
  box-shadow:
    0 0 0 2px #fff,                               /* white ring against avatar */
    0 0 0 6px rgba(16,185,129,.18);               /* soft glow */
}
/* ==== FIXES FOR THE EXACT MARKUP YOU POSTED (scoped) ================== */
.laci-scope .chat-container{ background: linear-gradient(180deg,#f6f8ff 0%,#eef2ff 100%); }

/* 1) Footer text: smaller + dark gray  |  2) Extra space below footer text */
.laci-scope .chat-container > footer{
  background:#fff; border-top:1px solid #e8eaf3;
  padding-bottom:28px !important;   /* extra bottom spacing */
}
.laci-scope .chat-container > footer,
.laci-scope .chat-container > footer *{
  font-size:12px !important;        /* small */
  line-height:1.45 !important;
  color:#4b5563 !important;          /* dark gray */
}

/* 3) Header: reduce gap between title and subtitle */
.laci-scope .chat-container > header p.text-slate-500{
  margin-top:2px !important;         /* tighter than mt-0.5 */
}

/* 4) Pills: smaller size; 5) Online pill green; 4/5/6 together */
.laci-scope .chat-container > header .flex.items-center.flex-wrap > span{
  height:20px !important;
  font-size:11px !important;
  padding:0 8px !important;
  border-radius:999px !important;
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #e6e9f2;
}

/* Online pill (the emerald one) — force green palette */
.laci-scope .chat-container > header .bg-emerald-50.text-emerald-700.border-emerald-100{
  background:#e8fff7 !important;
  color:#065f46 !important;
  border-color:#b7f5dd !important;
}

/* Verified pill (indigo) — small too */
.laci-scope .chat-container > header .bg-indigo-50.text-indigo-700.border-indigo-100{
  background:rgba(109,110,251,.10) !important;
  color:#6d6efb !important;
  border-color:rgba(109,110,251,.35) !important;
}

/* 6) Online status dot (inside the small white badge on avatar) — force green */
.laci-scope .chat-container > header .relative .grid .rounded-full.bg-emerald-500{
  background:#10b981 !important;
  width:8px !important; height:8px !important;   /* fallback if Tailwind is off */
  border-radius:999px !important;
}

/* === Utility fallbacks (in case Tailwind is not loaded) =============== */
.laci-scope .w-2{width:.5rem!important} .laci-scope .h-2{height:.5rem!important}
.laci-scope .w-3{width:.75rem!important} .laci-scope .h-3{height:.75rem!important}
.laci-scope .w-4{width:1rem!important} .laci-scope .h-4{height:1rem!important}
.laci-scope .rounded-xl{border-radius:12px!important}
.laci-scope .rounded-2xl{border-radius:16px!important}
.laci-scope .rounded-full{border-radius:9999px!important}

/* Pills look better with tight fonts */
.laci-scope .chat-container > header .flex.items-center.flex-wrap > span{ font-weight:600 !important; }

/* Keep #chatWrap as the only scrollable area */
.laci-scope #chatWrap{ flex:1 1 auto!important; min-height:0!important; overflow-y:auto!important }
/* ========== 1) Timestamp too big → make it small & muted ========== */
/* Preferred hook (if present) */
.laci-scope #chatWrap .lh-time{
  font-size: 10px !important;
  line-height: 1.25 !important;
  color: #64748b !important;
  margin-top: 4px;
}

/* Robust fallbacks for your current dynamic markup */
.laci-scope #chatWrap .text-\[10px\]{ font-size:10px !important; line-height:1.25 !important; }

/* If the time is rendered as the last muted line in a bubble */
.laci-scope #chatWrap .bubble .text-slate-500:last-child{
  font-size: 11px !important;
  line-height: 1.25 !important;
  color: #64748b !important;
}

/* ========== 2) Dynamic LH avatar should match other LH badges ========== */
/* Header LH */
.laci-scope .chat-container > header .w-9.h-9.rounded-xl.bg-indigo-600.flex.items-center.justify-center,
.laci-scope .chat-container > header .w-10.h-10.rounded-xl.bg-indigo-600.flex.items-center.justify-center,
.laci-scope .chat-container > header .w-11.h-11.rounded-xl.bg-indigo-600.flex.items-center.justify-center{
  --lh-size: 36px; --lh-radius: 10px;
  width: var(--lh-size) !important; height: var(--lh-size) !important;
  min-width: var(--lh-size) !important; min-height: var(--lh-size) !important;
  border-radius: var(--lh-radius) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-weight:700 !important; font-size:14px !important; letter-spacing:.02em;
  color:#fff !important; box-shadow: 0 6px 18px rgba(91,82,255,.25);
}

/* Message LH (your “dynamic LH” code in bubbles) */
.laci-scope #chatWrap .w-8.h-8.rounded-xl.bg-indigo-600.flex.items-center.justify-center{
  --lh-size: 36px; --lh-radius: 10px;
  width: var(--lh-size) !important; height: var(--lh-size) !important;
  min-width: var(--lh-size) !important; min-height: var(--lh-size) !important;
  border-radius: var(--lh-radius) !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-weight:700 !important; font-size:14px !important; letter-spacing:.02em;
  color:#fff !important; box-shadow: 0 6px 18px rgba(91,82,255,.25);
}

/* ========== 3) Input text a little larger ========== */
.laci-scope #message.composer-input,
.laci-scope .composer-input{
  font-size: 16px !important;     /* up from 15px */
  line-height: 1.45 !important;
}

/* ========== 4) Send button text must be white (and stay white) ========== */
.laci-scope #sendBtn,
.laci-scope #sendBtn *{
  color: #ffffff !important;
}
@media (min-width: 640px){
  .laci-scope .lh-avatar{ --lh-size: 38px; font-size: 15px; }
  .laci-scope #chatWrap .sm\:text-\[11px\]{ font-size:11px !important; line-height:1.25 !important; }
  .laci-scope #chatWrap .lh-time{ font-size: 11px !important; }
}
@media (max-width: 420px){
  .laci-scope .lh-pills{ gap:6px }
  .laci-scope .lh-pill{ font-size:11px; height:22px; padding:0 8px }
  .laci-scope .composer textarea{ font-size:14px }
  .laci-scope #sendBtn{ min-width:78px }
}
/* === Mobile readability tweaks (<= 480px) ============================== */
/* ==================== Mobile readability (takes precedence) ==================== */
/* Trigger on phones & small tablets */
@media (max-width: 640px){

  /* Bubble text (covers your intro <p id="welcomeMessage"> and future messages) */
  .laci-scope .chat-container #chatWrap p,
  .laci-scope .chat-container #chatWrap .bubble,
  .laci-scope .chat-container #chatWrap .bubble-tail-left,
  .laci-scope .chat-container #chatWrap .assistant,
  .laci-scope .chat-container #chatWrap .user,
  .laci-scope .chat-container #chatWrap #messageList *:where(p){
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  /* Keep timestamps small */
  .laci-scope .chat-container #chatWrap .lh-time,
  .laci-scope .chat-container #chatWrap .text-\[10px\]{
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  /* Composer/input a bit bigger (prevents iOS zoom) */
  .laci-scope .chat-container footer textarea#message.composer-input{
    font-size: 17px !important;
    line-height: 1.5 !important;
    -webkit-text-size-adjust: 100%;
            text-size-adjust: 100%;
  }
  .laci-scope .chat-container footer textarea#message.composer-input::placeholder{
    font-size: 16px !important;
    opacity: .7;
  }

  /* Ensure Send label stays white and readable */
  .laci-scope .chat-container footer #sendBtn,
  .laci-scope .chat-container footer #sendBtn *{
    color: #fff !important;
  }
}

/* Optional: include 768px too if you test with wider “mobile” previews */
@media (max-width: 768px){
  .laci-scope .chat-container #chatWrap p,
  .laci-scope .chat-container #chatWrap .bubble,
  .laci-scope .chat-container #chatWrap .bubble-tail-left{
    font-size: 16px !important;
    line-height: 1.55 !important;
  }
}