/* =========================================================
   Legal AI Assistant — FULL CSS (drop-in replacement)
   Scope this to the page template container if needed.
   ========================================================= */

/* --- Container & layout --- */
.legal-ai-container { max-width: 1100px; margin: 0 auto; padding: 1rem; }
.ast-container .ai-page-wrap { width: 100%; max-width: 100%; flex: 0 0 100%; }

/* --- Hero --- */
.ai-hero {
  background: linear-gradient(180deg, #20516F 0%, #749AB6 100%);
  color: #fff;
  border-radius: 26px;
  padding: 0.6rem 1.5rem;
  margin: 0 0 1.25rem 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
.ai-hero * { color:#fff; }
.ai-hero a { color:#fff; text-decoration: underline; }
.ai-hero-inner { max-width: 900px; }
.ai-hero-title {
  margin: 0 0 .6rem 0;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: .2px;
}
.ai-hero-subtitle { margin: 0; font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.7; }

/* --- Card --- */
.legal-ai-form-wrapper {
  background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:1.25rem; box-shadow:0 4px 14px rgba(16,24,40,.06); position:relative;
}

/* --- Unified heading style (match “Additional options”) --- */
.form-label,
.ai-chip-title,
.ai-recent-title,
fieldset.areas-of-law legend,
.subheading {
  font-weight:600;
  color:#0f172a;
  letter-spacing:.2px;
  font-size: 1rem;
}
.ai-chip-title { margin: 8px 0 4px; color:#0f172a; }
.ai-recent-title { margin:0 0 4px; }

/* --- Query box --- */
#queryInput {
  width:100%; padding:.75rem; border:1px solid #d1d5db; border-radius:6px;
  resize:none; min-height:110px; line-height:1.5; font-size:15px;
}
#charCounter { color:#6b7280; font-size:.9rem; margin-top:4px; }

/* =========================================================
   Chips (popular & recent) — compact & text-hugging
   ========================================================= */

.ai-chips,
.ai-followups,
.ai-recent-list { margin:8px 0 6px; }

.ai-chips {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:10px;
}

/* Base chip — hugs text, no extra right space */
.ai-chip {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  max-width:100%;
  padding:6px 10px;
  gap:8px;
  border-radius:9999px;
  font-size:13.5px;
  font-weight:700;
  letter-spacing:0;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(16,24,40,.08);
  border:1px solid transparent;
  user-select:none;
  text-align:center;
  white-space:nowrap;
}

/* Clamp long labels to two lines only where needed */
.ai-chip .ai-chip-label {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  line-height:1.2;
}

/* Distinct practice-area colour tokens (chips) */
.chip--debt           { background:#0ea5e9; border-color:#0284c7; color:#fff; }
.chip--conveyancing   { background:#0d9488; border-color:#0f766e; color:#fff; }
.chip--property_mgmt  { background:#06b6d4; border-color:#0891b2; color:#fff; }
.chip--notarial       { background:#fbbf24; border-color:#f59e0b; color:#111827; }
.chip--corporate      { background:#4f46e5; border-color:#4338ca; color:#fff; }
.chip--litigation     { background:#f87171; border-color:#ef4444; color:#111827; }
.chip--family         { background:#a78bfa; border-color:#8b5cf6; color:#111827; }
.chip--trusts_estates { background:#34d399; border-color:#10b981; color:#111827; }
.chip--ip             { background:#f472b6; border-color:#ec4899; color:#111827; }
.chip--employment     { background:#22c55e; border-color:#16a34a; color:#111827; }
.chip--default        { background:#e5e7eb; border-color:#d1d5db; color:#111827; }

.ai-chip:hover  { filter:brightness(.97); transform:translateY(0); }
.ai-chip:active { transform:translateY(1px); }
.ai-chip:focus  { outline:2px solid rgba(59,130,246,.6); outline-offset:2px; }

/* =========================================================
   Recent box + “Clear”
   ========================================================= */
.ai-recent-box {
  background:#f9fafb; border:1px dashed #e5e7eb; border-radius:10px;
  padding:10px; margin-top:6px;
}

/* =========================================================
   Pills (selected areas) — ring + translucent fill, tight fit
   ========================================================= */

#selectedAreaPills,
#selectedAreas {  /* support either id (older/newer markup) */
  display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 6px;
}

/* NEW pill sizing — hugs text with zero trailing space */
.ai-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:auto;
  line-height:1;
  padding:4px 8px;          /* tighter, hugs text */
  border-radius:9999px;
  border:2px solid transparent;
  background:rgba(255,255,255,.6);
  color:#111827;
  font-size:13.5px;
  font-weight:700;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  white-space:nowrap;
  width:auto;               /* never stretch */
  max-width:100%;
}

/* The removable X button */
.ai-pill .ai-pill-x {
  background:transparent;
  border:0;
  padding:0;
  width:18px; height:18px;
  line-height:18px;
  border-radius:999px;
  color:inherit;
  opacity:.85;
  cursor:pointer;
}
.ai-pill .ai-pill-x:hover { opacity:1; }

/* Text node in pills */
.ai-pill .ai-pill-text { font-weight:700; white-space:nowrap; }

/* Distinct practice-area colour tokens (pills) — ring + translucent bg */
.pill--debt            { border-color:#0284c7; background:rgba(14,165,233,.12); }
.pill--conveyancing    { border-color:#0f766e; background:rgba(13,148,136,.12); }
.pill--property_mgmt   { border-color:#0891b2; background:rgba(6,182,212,.12); }
.pill--notarial        { border-color:#f59e0b; background:rgba(251,191,36,.16); }
.pill--corporate       { border-color:#4338ca; background:rgba(79,70,229,.12); color:#111827; }
.pill--litigation      { border-color:#ef4444; background:rgba(248,113,113,.16); }
.pill--family          { border-color:#8b5cf6; background:rgba(167,139,250,.16); }
.pill--trusts_estates  { border-color:#10b981; background:rgba(52,211,153,.16); }
.pill--ip              { border-color:#ec4899; background:rgba(244,114,182,.16); }
.pill--employment      { border-color:#16a34a; background:rgba(34,197,94,.16); }

/* =========================================================
   Areas of law (checkbox grid)
   ========================================================= */
fieldset.areas-of-law { border:0; padding:0; margin:0; }
fieldset.areas-of-law legend { margin: 1rem 0 .5rem; }
.areas-of-law-grid {
  display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px 24px; margin-top:.25rem;
}
@media (min-width:1024px){
  .areas-of-law-grid { grid-template-columns: repeat(3, minmax(0,1fr)); } /* optional 3 cols on large screens */
}
@media (max-width:640px){ .areas-of-law-grid { grid-template-columns: 1fr; } }
.areas-of-law-grid label { display:flex; align-items:center; gap:.5rem; line-height:1.3; cursor:pointer; color:#111827; }
.areas-of-law-grid input[type="checkbox"] { margin-top:2px; }

/* Separator & subsection */
.form-separator { border:0; border-top:2px solid #e5e7eb; margin:16px 0 12px; }
.subheading { margin:0 0 .5rem; }

/* Compact selects & row */
.form-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.form-row .inline-field { display:flex; align-items:center; gap:8px; }
#languageSelect { width:140px; min-width:140px; padding:.45rem; border:1px solid #d1d5db; border-radius:6px; }
#modelSelect    { width:180px; min-width:180px; padding:.45rem; border:1px solid #d1d5db; border-radius:6px; }

/* Sticky actions on mobile */
.form-actions { display:flex; align-items:center; gap:12px; margin-top:10px; }
@media (max-width:640px){
  .form-actions { position:sticky; bottom:0; background:#fff; padding:10px 0; border-top:1px solid #e5e7eb; }
}

/* Buttons */
.submit-button {
  background:#0073aa; color:#fff; padding:.6rem 1rem; border:0; border-radius:6px; cursor:pointer;
}
.submit-button:hover { background:#005f8a; }

/* Secondary chip-ish action buttons (e.g., Clear, New conversation) */
button.ai-chip.chip--default { width:auto; min-height:auto; border-radius:8px; }

/* =========================================================
   Turnstile block & status
   ========================================================= */
.turnstile-wrap { display:flex; align-items:center; gap:10px; }
#turnstileStatus, .ai-status { font-size:.9rem; color:#6b7280; }

/* =========================================================
   Chat / Response area
   ========================================================= */
.legal-ai-response { margin-top:1rem; }
.spinner, .success, .error { margin-top:.75rem; }
.error { color:#b91c1c; }
.success { color:#065f46; }

#chatThread { margin-top:10px; display:flex; flex-direction:column; gap:12px; }
.chat-msg {
  padding:12px 14px; border-radius:12px; max-width:90%;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
}
.chat-user { align-self:flex-end; background:#e6f3fb; border:1px solid #cbe7f7; }
.chat-bot  { align-self:flex-start; background:#fff; border:1px solid #e5e7eb; }

/* Collapsible long bot content */
.ai-collapsed { max-height:560px; overflow:hidden; position:relative; }
.ai-collapsed:after {
  content:""; position:absolute; left:0; right:0; bottom:0; height:80px;
  background:linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 65%);
}
.ai-showmore-btn {
  background:#0073aa; color:#fff; border:0; border-radius:8px; padding:8px 12px; cursor:pointer;
  margin-top:8px;
}

/* “Was this useful?” & Copy controls bar */
.ai-controls {
  display:flex; gap:10px; align-items:center; margin-top:10px; flex-wrap:wrap;
}
.ai-controls .ai-copy {
  background:#374151; color:#fff; border:0; border-radius:6px; padding:6px 10px; cursor:pointer;
}
.ai-controls .ai-yes  { background:#047857; color:#fff; border:0; border-radius:6px; padding:6px 10px; cursor:pointer; }
.ai-controls .ai-no   { background:#b91c1c; color:#fff; border:0; border-radius:6px; padding:6px 10px; cursor:pointer; }
.ai-controls .ai-copied { color:#047857; display:none; }

/* Token/latency meta line (bottom-right) */
.ai-meta {
  font-size: .85rem;
  color:#6b7280;
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
}
.ai-meta .dot { font-weight:700; }

/* Streaming-like “drafting …” */
.ai-typing {
  display:inline-block;
  min-width: 1ch;
  animation: aiDots 1.2s steps(3, end) infinite;
}
@keyframes aiDots {
  0% { content:"";   }
  33%{ content:".";  }
  66%{ content:".."; }
  100%{ content:"...";}
}

/* Redaction notice */
.ai-redact {
  background:#fffbeb; border:1px solid #fbbf24; color:#92400e;
  padding:8px 10px; border-radius:8px; display:flex; gap:8px; align-items:center; margin:8px 0;
}
.ai-redact button {
  background:#f59e0b; color:#fff; border:1px solid #d97706; border-radius:6px; padding:6px 10px; cursor:pointer;
}
.ai-redact .secondary { background:#fff; color:#92400e; border-color:#fbbf24; }
.hidden { display:none; }

/* Small utility to prevent horizontal overflow from long words/URLs */
.chat-bot { word-wrap: break-word; overflow-wrap: anywhere; }

/* ===== end ===== */