/* Dalil — Fintech AI Advisory's chat assistant.
   Deliberately its own design system: own font stack, own spacing scale, own component
   names (all prefixed `dalil-`). Keeps the brand red/ink as anchors because it is still
   this firm's product, but nothing here is inherited from the main site's stylesheets. */

:root {
  --dalil-red: #D81E2C;
  --dalil-ink: #14171C;
  --dalil-ink-soft: #5C6675;
  --dalil-paper: #FFFFFF;
  --dalil-bg-soft: #F6F7F9;
  --dalil-border: #E3E6EA;
  --dalil-radius: 16px;
  --dalil-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --dalil-font-ar: "Segoe UI", Tahoma, Arial, sans-serif;
  --dalil-shadow: 0 12px 32px rgba(20, 23, 28, 0.18);
}

/* PHYSICAL right/bottom, deliberately — not inset-inline-end. Logical properties made the
   whole widget hop to the opposite corner of the screen the moment anything set dir="rtl"
   on it, which is not a mirroring decision anyone asked for. The launcher lives bottom-
   right on every page in both languages; text direction inside is handled per element. */
.dalil-root {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  font-family: var(--dalil-font);
  direction: ltr;
}
.dalil-root[dir="rtl"] { direction: rtl; font-family: var(--dalil-font-ar); }

/* Real bug, found from actual use: the panel is a <section>, the header a <header>, the
   quota text a <button>/<textarea>/<form>/<ul> — every one of those is a bare HTML tag
   the HOST page's own CSS might style (the real site's style.css sets
   `section { padding-block: clamp(3.5rem, 7vw, 6rem) }` for its own content sections,
   with no idea a floating chat widget also uses a <section> — that's exactly what
   produced the blank gaps above the header and below the privacy line). A tag selector
   is always lower specificity than a single class, so this reset — one class, applied
   to every element inside `.dalil-root` — wins regardless of source order, and makes the
   widget genuinely immune to whatever tag-level styles the page it's embedded on happens
   to define, on this page or any other. */
.dalil-root * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  color: inherit;
  list-style: none;
  text-decoration: none;
  background: none;
  line-height: normal;
}

/* Launcher — a labelled pill, not a bare icon: the point is that it reads as a button
   to click, not a logo to look at. */
.dalil-launcher {
  height: 52px;
  border-radius: 999px;
  background: var(--dalil-ink);
  border: none;
  box-shadow: var(--dalil-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline-start: 8px;
  padding-inline-end: 18px;
  transition: transform .15s ease;
}
.dalil-launcher:hover { transform: translateY(-2px); }
.dalil-launcher[hidden] { display: none; }
.dalil-launcher-icon { width: 36px; height: 36px; flex: none; display: block; }
.dalil-launcher-label {
  color: var(--dalil-paper);
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
}

/* Panel — a proper sidebar, not a small floating box. Two sizes on desktop (compact /
   expanded, toggled from the header); a true full-screen takeover on mobile, below. */
.dalil-panel {
  position: absolute;
  bottom: 66px;
  right: 0; /* physical — see .dalil-root; the panel opens from the same fixed corner */
  width: min(420px, calc(100vw - 32px));
  /* plain vh miscalculates on mobile/narrow browsers when the address-bar chrome
     shows or hides, leaving dead blank space above or below the panel — dvh (dynamic
     viewport height) is the current fix; the vh line stays as a fallback for browsers
     that don't know dvh yet (an unsupported unit invalidates the whole line, so the
     dvh version simply never applies there and the vh one is what's used). */
  height: min(720px, calc(100vh - 48px));
  height: min(720px, calc(100dvh - 48px));
  background: var(--dalil-paper);
  border-radius: var(--dalil-radius);
  box-shadow: var(--dalil-shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--dalil-border);
  transition: width .18s ease, height .18s ease;
}
.dalil-panel[hidden] { display: none; }
.dalil-panel.dalil-resizing { transition: none; } /* no lag while actively dragging */
.dalil-panel--expanded {
  width: min(520px, calc(100vw - 32px));
  height: calc(100vh - 32px);
  height: calc(100dvh - 32px);
  bottom: 16px;
}

/* Drag-to-resize handle — sits at the panel's free corner (the opposite corner from
   where it's anchored to the screen edge), since that's the only corner that can move
   without the panel drifting off its anchor point. */
.dalil-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  cursor: nwse-resize;
  touch-action: none;
  z-index: 2;
}
.dalil-resize-handle::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 6px;
  width: 9px;
  height: 9px;
  border-top: 2px solid rgba(255,255,255,.35);
  border-left: 2px solid rgba(255,255,255,.35);
  border-radius: 3px 0 0 0;
}
@media (max-width: 640px) { .dalil-resize-handle { display: none; } }

.dalil-head {
  background: var(--dalil-ink);
  color: var(--dalil-paper);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.dalil-head-avatar { width: 34px; height: 34px; flex: none; }
.dalil-head-text { flex: 1; min-width: 0; }
.dalil-head-name { font-weight: 700; font-size: 14.5px; line-height: 1.2; }
.dalil-head-sub { font-size: 11.5px; color: #c7cad0; line-height: 1.3; }
.dalil-head-actions { display: flex; align-items: center; gap: 6px; }
.dalil-lang-btn, .dalil-close-btn, .dalil-expand-btn {
  background: transparent;
  border: 1px solid rgba(255,255,255,.25);
  color: var(--dalil-paper);
  border-radius: 8px;
  font-size: 11.5px;
  padding: 5px 9px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
}
.dalil-lang-btn:hover, .dalil-close-btn:hover, .dalil-expand-btn:hover { background: rgba(255,255,255,.12); }
.dalil-expand-btn svg { width: 13px; height: 13px; }

.dalil-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--dalil-bg-soft);
}

.dalil-msg { max-width: 86%; display: flex; flex-direction: column; gap: 4px; }
.dalil-msg--user { align-self: flex-end; align-items: flex-end; }
.dalil-msg--bot { align-self: flex-start; align-items: flex-start; }
.dalil-root[dir="rtl"] .dalil-msg--user { align-self: flex-start; align-items: flex-start; }
.dalil-root[dir="rtl"] .dalil-msg--bot { align-self: flex-end; align-items: flex-end; }

.dalil-bubble {
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 13.5px;
  line-height: 1.48;
}
.dalil-bubble p { margin: 0 0 8px; }
.dalil-bubble p:last-child { margin-bottom: 0; }
/* The global reset above zeroes list-style on every element (needed to block the host
   page's own tag-level styles) — restore it here, but as a small red square marker
   echoing the brand mark's own squares, rather than a plain round bullet. Distinctive
   on purpose, not just "fixed back to default." */
.dalil-bubble ul { margin: 0 0 8px; padding-inline-start: 0; list-style: none; }
.dalil-bubble ul:last-child { margin-bottom: 0; }
.dalil-bubble li {
  position: relative;
  margin: 4px 0;
  padding-inline-start: 1.2em;
}
.dalil-bubble li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: var(--dalil-red);
  border-radius: 1px;
}
.dalil-bubble strong { font-weight: 700; color: var(--dalil-ink); }
.dalil-bubble a { color: var(--dalil-red); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dalil-msg--user .dalil-bubble a { color: inherit; text-decoration-color: rgba(255,255,255,.5); }
.dalil-msg--user .dalil-bubble { background: var(--dalil-ink); color: var(--dalil-paper); border-bottom-right-radius: 4px; }
.dalil-root[dir="rtl"] .dalil-msg--user .dalil-bubble { border-bottom-right-radius: 14px; border-bottom-left-radius: 4px; }
.dalil-msg--bot .dalil-bubble { background: var(--dalil-paper); color: var(--dalil-ink); border: 1px solid var(--dalil-border); border-bottom-left-radius: 4px; }
.dalil-root[dir="rtl"] .dalil-msg--bot .dalil-bubble { border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }

.dalil-typing { display: flex; gap: 4px; padding: 12px 13px; }
.dalil-typing span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--dalil-red);
  animation: dalil-typing-bounce 1.1s infinite ease-in-out;
}
.dalil-typing span:nth-child(2) { animation-delay: .15s; }
.dalil-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes dalil-typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.dalil-quota {
  font-size: 11px;
  color: var(--dalil-ink-soft);
  text-align: center;
  padding: 2px 0;
}

/* Terms gate — shown in place of the chat on first use, on this device only. */
.dalil-terms {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px;
  background: var(--dalil-bg-soft);
  display: flex;
  flex-direction: column;
}
/* An explicit `display` beats the browser's built-in [hidden] rule, so every element the
   terms gate hides needs its own override — otherwise the chat input stays visible
   underneath the terms, which is exactly what happened first time. */
.dalil-terms[hidden],
.dalil-messages[hidden],
.dalil-inputrow[hidden] { display: none; }
.dalil-terms h3 { font-size: 15px; font-weight: 700; color: var(--dalil-ink); margin-bottom: 8px; }
.dalil-terms p { font-size: 12.8px; line-height: 1.55; color: var(--dalil-ink); margin-bottom: 12px; }
.dalil-terms ul { margin: 0 0 14px; padding-inline-start: 0; list-style: none; }
.dalil-terms li {
  position: relative;
  font-size: 12.2px;
  line-height: 1.5;
  color: var(--dalil-ink-soft);
  margin: 7px 0;
  padding-inline-start: 1.2em;
}
.dalil-terms li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: .5em;
  width: 5px; height: 5px;
  background: var(--dalil-red);
  border-radius: 1px;
}
.dalil-terms-link {
  font-size: 11.5px;
  color: var(--dalil-red);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  margin-bottom: 16px;
  display: inline-block;
}
.dalil-terms-actions { margin-top: auto; display: flex; gap: 8px; }
.dalil-terms-accept, .dalil-terms-decline {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  border-radius: 9px;
  padding: 10px 14px;
  cursor: pointer;
}
.dalil-terms-accept { flex: 1; background: var(--dalil-red); border: 1px solid var(--dalil-red); color: #fff; }
.dalil-terms-accept:hover { opacity: .92; }
.dalil-terms-decline { background: transparent; border: 1px solid var(--dalil-border); color: var(--dalil-ink-soft); }
.dalil-terms-decline:hover { background: var(--dalil-paper); }

/* Returning-visitor offer — visually distinct from a normal reply, so it reads as an
   invitation from the firm rather than something the assistant "said". */
.dalil-welcomeback {
  background: var(--dalil-ink);
  color: var(--dalil-paper);
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.5;
}
.dalil-welcomeback p { margin: 0 0 10px; }
.dalil-welcomeback a {
  display: inline-block;
  background: var(--dalil-red);
  color: #fff;
  font-weight: 600;
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 8px;
  text-decoration: none;
}
.dalil-welcomeback a:hover { opacity: .92; }

.dalil-clearbar { padding: 0 12px; }
.dalil-clearbar:empty { padding: 0; }
.dalil-clear-trigger {
  display: block;
  margin: 0 auto 6px;
  background: none;
  border: none;
  color: var(--dalil-ink-soft);
  font-size: 11px;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 2px 4px;
}
.dalil-clear-trigger:hover { color: var(--dalil-ink); }
.dalil-clear-confirm {
  background: #FBEAEC;
  border: 1px solid #F1C6CB;
  border-radius: 10px;
  padding: 9px 11px;
  margin-bottom: 8px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--dalil-ink);
}
.dalil-clear-actions { display: flex; gap: 8px; margin-top: 8px; justify-content: flex-end; }
.dalil-root[dir="rtl"] .dalil-clear-actions { justify-content: flex-start; }
.dalil-clear-cancel, .dalil-clear-yes {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 7px;
  padding: 5px 11px;
  cursor: pointer;
}
.dalil-clear-cancel { background: transparent; border: 1px solid var(--dalil-border); color: var(--dalil-ink); }
.dalil-clear-cancel:hover { background: var(--dalil-bg-soft); }
.dalil-clear-yes { background: var(--dalil-red); border: 1px solid var(--dalil-red); color: #fff; }
.dalil-clear-yes:hover { opacity: .9; }

.dalil-limit-card {
  background: var(--dalil-paper);
  border: 1px solid var(--dalil-border);
  border-radius: 12px;
  padding: 12px 13px;
  font-size: 13px;
  color: var(--dalil-ink);
}
.dalil-limit-card a { color: var(--dalil-red); font-weight: 600; text-decoration: none; }
.dalil-limit-card a:hover { text-decoration: underline; }

.dalil-inputrow {
  border-top: 1px solid var(--dalil-border);
  padding: 10px;
  display: flex;
  gap: 8px;
  background: var(--dalil-paper);
}
.dalil-input {
  flex: 1;
  border: 1px solid var(--dalil-border);
  border-radius: 10px;
  padding: 9px 11px;
  font-size: 13.5px;
  font-family: inherit;
  resize: none;
  max-height: 84px;
  outline: none;
}
.dalil-input:focus { border-color: var(--dalil-red); }
.dalil-send {
  background: var(--dalil-red);
  border: none;
  color: #fff;
  border-radius: 10px;
  width: 40px;
  flex: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dalil-send:disabled { opacity: .5; cursor: not-allowed; }
.dalil-send svg { width: 18px; height: 18px; }
.dalil-root[dir="rtl"] .dalil-send svg { transform: scaleX(-1); }

.dalil-privacy {
  font-size: 10px;
  color: var(--dalil-ink-soft);
  text-align: center;
  padding: 6px 12px 10px;
  background: var(--dalil-paper);
}

/* Mobile: the chat is not a floating box, it's the whole screen — same pattern every
   serious chat product uses once space is tight. Applies regardless of expand-toggle
   state; there's nothing left to expand into. */
@media (max-width: 640px) {
  .dalil-root { right: 12px; bottom: 12px; }
  .dalil-panel,
  .dalil-panel--expanded {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    /* iOS counts the area behind Safari's toolbars in 100%, so the input row ends up
       under the browser chrome. dvh tracks the ACTUALLY visible height and shrinks as
       the toolbars appear. Plain height above stays as the fallback for older browsers. */
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    bottom: auto;
  }
  /* 16px is not a design choice — it is the threshold below which iOS Safari zooms the
     whole page the moment a text field is focused, which pushes the send button off the
     right edge. Anything smaller reintroduces that bug. Desktop keeps 13.5px. */
  .dalil-input { font-size: 16px; }
  .dalil-expand-btn { display: none; }
}