/* ==========================================================================
   UBM — chat.css
   The site assistant: corner launcher + conversation panel.

   Linked from partials/chat.php (not from head.php), so it loads after
   rtl.css and its few physical-axis corrections win cleanly.

   The whole widget runs in the deep world — partials/chat.php sets
   data-world="deep" on the root, so every semantic token (--surface,
   --text, --line, --gold, --accent) is already inverted and the shared
   primitives (.input, .btn--gold, .field, .eyebrow) need no overrides.

   Layout is entirely logical: the panel opens from inset-inline-end, so in
   Arabic it lives in the opposite corner with no extra rules.
   ========================================================================== */

/* Without JS the launcher cannot do anything, so it is not offered. */
.no-js .chat-widget { display: none; }

/* --------------------------------------------------------------------------
   1. ROOT
   -------------------------------------------------------------------------- */
.chat-widget {
  --chat-inline: 23.5rem;
  --chat-block: min(36rem, calc(100dvh - var(--header-h) - var(--sp-6)));
  --chat-edge: clamp(1rem, .45rem + 1.4vw, 1.75rem);
  --chat-disc: 2.75rem;

  /* Ambient loops. Transitions use the shared --d-* tokens; these three are
     the only continuous animations in the widget, declared once here. */
  --chat-loop-orbit: 18s;
  --chat-loop-ping:  2.4s;
  --chat-loop-dots:  1.2s;

  position: fixed;
  inset-block-end: var(--chat-edge);
  inset-inline-end: var(--chat-edge);
  z-index: var(--z-chat);

  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* cross axis of a column flexbox = inline-end */

  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--text);
}

/* --------------------------------------------------------------------------
   2. LAUNCHER
   Disc + orbit ring on mobile; disc + label pill from 48rem up.
   -------------------------------------------------------------------------- */
.chat-launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: .375rem;
  background: var(--c-ink-900);
  border: var(--bw) solid var(--line-gold);
  border-radius: var(--r-pill);
  box-shadow: var(--sh-lg);
  color: var(--c-paper-100);
  transition: transform var(--d-base) var(--e-out),
              box-shadow var(--d-base) var(--e-out),
              border-color var(--d-base) var(--e-out);
}
.chat-launcher:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: var(--sh-glow-gold);
}
.chat-launcher:active { transform: translateY(0); }

.chat-launcher__disc {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--chat-disc);
  block-size: var(--chat-disc);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, var(--c-ink-700), var(--c-ink-900) 72%);
  flex: none;
}

.chat-launcher__orbit {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  color: var(--line-gold);
  animation: chat-orbit var(--chat-loop-orbit) var(--e-linear) infinite;
}
@keyframes chat-orbit { to { transform: rotate(360deg); } }

.chat-launcher__mark { inline-size: 1.35rem; block-size: 1.35rem; }

.chat-launcher__label {
  padding-inline-end: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
}
/* Clipped, not removed: the label is the button's accessible name, and the
   disc-only launcher must still announce itself. */
@media (max-width: 47.99rem) {
  .chat-launcher__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Unread reply — a single signal dot, no badge count, no bounce. */
.chat-launcher__dot {
  position: absolute;
  inset-block-start: -1px;
  inset-inline-end: -1px;
  inline-size: .55rem;
  block-size: .55rem;
  border-radius: 50%;
  background: var(--c-signal-400);
  box-shadow: 0 0 0 2px var(--c-ink-900);
}
.chat-launcher__dot::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1px solid var(--c-signal-400);
  opacity: 0;
  animation: chat-ping var(--chat-loop-ping) var(--e-out) infinite;
}
@keyframes chat-ping {
  0%   { opacity: .7; transform: scale(.6); }
  70%  { opacity: 0;  transform: scale(1.5); }
  100% { opacity: 0;  transform: scale(1.5); }
}

/* On a phone the panel is the whole screen, so the launcher steps aside. */
@media (max-width: 47.99rem) {
  .chat-widget[data-open="true"] .chat-launcher { display: none; }
}

/* --------------------------------------------------------------------------
   3. PANEL
   Rows: head · (gate | log) · rail · composer · foot.
   Whichever of gate/log is visible lands on the 1fr track — hidden siblings
   are out of flow, so one track list serves both states.
   -------------------------------------------------------------------------- */
.chat-panel {
  position: absolute;
  inset-block-end: calc(100% + var(--sp-3));
  inset-inline-end: 0;

  inline-size: min(var(--chat-inline), calc(100vw - 2 * var(--chat-edge)));
  block-size: var(--chat-block);

  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;

  background: var(--surface);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  isolation: isolate;

  opacity: 0;
  transform: translateY(10px) scale(.985);
  transform-origin: bottom center;
  transition: opacity var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}
.chat-panel[hidden] { display: none; }

.chat-widget[data-open="true"] .chat-panel {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   4. PANEL HEAD — mark, name, live pip, minimise, close
   -------------------------------------------------------------------------- */
.chat-head {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-3);
  padding-block: var(--sp-4);
  padding-inline: var(--sp-5) var(--sp-4);
  background: linear-gradient(to bottom, var(--c-ink-850), var(--c-ink-900));
  border-block-end: var(--bw) solid var(--line);
}
/* Gold hairline: the brand's punctuation, one 56px stroke under the head. */
.chat-head::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: var(--sp-5);
  inline-size: 56px;
  block-size: 2px;
  background: linear-gradient(to right, var(--gold), transparent);
}
[dir="rtl"] .chat-head::after {
  background: linear-gradient(to left, var(--gold), transparent);
}

.chat-head__mark {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: 50%;
  background: var(--c-ink-800);
  border: var(--bw) solid var(--line);
}
.chat-mark { inline-size: 1.1rem; block-size: 1.1rem; }
.chat-mark__gold  { fill: var(--gold); }
.chat-mark__quiet { fill: currentColor; opacity: .55; }

.chat-head__id { display: grid; gap: 2px; min-inline-size: 0; }
.chat-head__name {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--tr-heading);
  color: var(--text-strong);
}
.chat-head__role {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.chat-head__pip {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: var(--c-success);
  flex: none;
}
.chat-widget[data-state="sending"] .chat-head__pip { background: var(--gold); }
.chat-widget[data-state="offline"] .chat-head__pip { background: var(--c-silver-700); }

.chat-icon-btn {
  display: grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: var(--r-sm);
  color: var(--text-muted);
  transition: color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out);
}
.chat-icon-btn svg { inline-size: 1rem; block-size: 1rem; }
.chat-icon-btn:hover { color: var(--text-strong); background: var(--c-ink-800); }

/* --------------------------------------------------------------------------
   5. IDENTITY GATE
   -------------------------------------------------------------------------- */
.chat-gate {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding-block: var(--sp-5) var(--sp-6);
  padding-inline: var(--sp-5);
  overflow-y: auto;
}
.chat-gate[hidden] { display: none; }

.chat-gate__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--text-strong);
}
.chat-gate__lead {
  font-size: var(--fs-xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.chat-gate__form {
  display: grid;
  gap: var(--sp-4);
  margin-block-start: var(--sp-3);
}
.chat-gate__note {
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.chat-gate .field__error[hidden] { display: none; }

/* --------------------------------------------------------------------------
   6. TRANSCRIPT
   -------------------------------------------------------------------------- */
.chat-log {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
  padding: var(--sp-5);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--c-silver-500) 38%, transparent) transparent;
}
.chat-log[hidden] { display: none; }
.chat-log:focus-visible { outline-offset: -3px; }

.chat-msg {
  display: grid;
  gap: var(--sp-2);
  max-inline-size: 92%;
}
.chat-msg--visitor { justify-self: end; justify-items: end; }

.chat-msg__who {
  font-size: var(--fs-3xs);
  font-weight: 600;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
[lang="ar"] .chat-msg__who { text-transform: none; }

.chat-msg__body {
  padding: .72rem .9rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--surface-raised);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Assistant: anchored to the reading edge by a gold rule, no bubble tail. */
.chat-msg--assistant .chat-msg__body {
  border-inline-start: 2px solid var(--line-gold);
  border-start-start-radius: var(--r-xs);
}

/* A real UBM colleague replying from the admin inbox — cyan means "live". */
.chat-msg--agent .chat-msg__body {
  border-inline-start: 2px solid var(--accent);
  border-start-start-radius: var(--r-xs);
}
.chat-msg--agent .chat-msg__who { color: var(--c-signal-300); }

/* Visitor: a warmer fill, still navy underneath. */
.chat-msg--visitor .chat-msg__body {
  color: var(--c-paper-050);
  background: color-mix(in srgb, var(--c-gold-500) 14%, var(--c-ink-800));
  border-color: var(--line-gold);
  border-start-end-radius: var(--r-xs);
}

/* System note — a handoff, a closure. Centred between two hairlines. */
.chat-msg--note {
  max-inline-size: 100%;
  justify-items: center;
  text-align: center;
}
.chat-msg--note .chat-msg__body {
  padding: 0;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  background: none;
  border: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.chat-msg--note .chat-msg__body::before,
.chat-msg--note .chat-msg__body::after {
  content: "";
  inline-size: var(--sp-6);
  block-size: 1px;
  background: var(--line);
  flex: none;
}

/* A turn that never left the browser. */
.chat-msg--failed .chat-msg__body {
  border-color: color-mix(in srgb, var(--c-danger) 55%, transparent);
  opacity: .75;
}
.chat-msg__retry {
  justify-self: end;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--c-signal-300);
  text-decoration: underline;
  text-underline-offset: .2em;
}
.chat-msg__retry:hover { color: var(--c-signal-400); }

.chat-msg--pending { opacity: .6; }

/* --------------------------------------------------------------------------
   7. STATUS RAIL — typing indicator and banners
   -------------------------------------------------------------------------- */
.chat-rail { display: grid; gap: var(--sp-2); }
.chat-rail[hidden] { display: none; }

.chat-typing {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding-inline: var(--sp-5);
  padding-block-end: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.chat-typing[hidden] { display: none; }

.chat-typing__dots { display: inline-flex; gap: 4px; }
.chat-typing__dots i {
  inline-size: 5px;
  block-size: 5px;
  border-radius: 50%;
  background: var(--gold);
  animation: chat-blink var(--chat-loop-dots) var(--e-in-out) infinite;
}
.chat-typing__dots i:nth-child(2) { animation-delay: calc(var(--chat-loop-dots) * .13); }
.chat-typing__dots i:nth-child(3) { animation-delay: calc(var(--chat-loop-dots) * .26); }
@keyframes chat-blink {
  0%, 75%, 100% { opacity: .28; transform: translateY(0); }
  35%           { opacity: 1;   transform: translateY(-2px); }
}

.chat-banner {
  margin-inline: var(--sp-5);
  margin-block-end: var(--sp-3);
  padding: .55rem .75rem;
  font-size: var(--fs-2xs);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--c-ink-850);
  border: var(--bw) solid var(--line);
  border-inline-start: 2px solid var(--c-warning);
  border-radius: var(--r-xs);
}
.chat-banner[hidden] { display: none; }
.chat-banner[data-type="error"] { border-inline-start-color: var(--c-danger); }
.chat-banner[data-type="ok"]    { border-inline-start-color: var(--c-success); }
.chat-banner[data-type="info"]  { border-inline-start-color: var(--accent); }

/* --------------------------------------------------------------------------
   8. COMPOSER
   -------------------------------------------------------------------------- */
.chat-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-ink-850);
  border-block-start: var(--bw) solid var(--line);
}
.chat-composer[hidden] { display: none; }

.chat-composer__input {
  min-block-size: 2.75rem;
  max-block-size: 8.5rem;
  padding: .62rem .75rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--text-strong);
  background: var(--c-ink-900);
  border: var(--bw) solid var(--line-strong);
  border-radius: var(--r-sm);
  resize: none;
  overflow-y: auto;
  scrollbar-width: thin;
  transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out);
}
.chat-composer__input::placeholder { color: var(--text-faint); }
.chat-composer__input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);
}

.chat-send {
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  color: var(--c-ink-900);
  background: var(--c-gold-400);
  border-radius: var(--r-sm);
  transition: background-color var(--d-fast) var(--e-out),
              opacity var(--d-fast) var(--e-out),
              transform var(--d-fast) var(--e-out);
}
.chat-send svg { inline-size: 1.05rem; block-size: 1.05rem; }
.chat-send:hover:not([disabled]) { background: var(--c-gold-300); transform: translateY(-1px); }
.chat-send[disabled] { opacity: .35; cursor: default; }

.chat-composer__hint {
  grid-column: 1 / -1;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
}
.chat-composer__hint[data-tone="warn"] { color: var(--c-gold-300); }
@media (max-width: 47.99rem) {
  /* On touch there is no Shift+Enter to explain. */
  .chat-composer__hint { display: none; }
}

/* --------------------------------------------------------------------------
   9. FOOT
   -------------------------------------------------------------------------- */
.chat-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-3) var(--sp-4);
  padding-inline: var(--sp-5);
  background: var(--c-ink-900);
  border-block-start: var(--bw) solid var(--line);
}
.chat-foot[hidden] { display: none; }
.chat-foot__note {
  flex: 1 1 12rem;
  font-size: var(--fs-3xs);
  line-height: 1.5;
  color: var(--text-muted);
}
.chat-foot__end {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: .2em;
  white-space: nowrap;
}
.chat-foot__end:hover { color: var(--text-strong); }

/* --------------------------------------------------------------------------
   10. PHONE — the panel becomes a full-height sheet
   -------------------------------------------------------------------------- */
@media (max-width: 47.99rem) {
  .chat-widget { --chat-edge: var(--sp-4); }

  .chat-panel {
    position: fixed;
    inset: 0;
    inline-size: 100%;
    block-size: 100dvh;
    max-block-size: none;
    border: 0;
    border-radius: 0;
    transform: translateY(2%);
    padding-block-end: env(safe-area-inset-bottom, 0px);
  }
  .chat-head { padding-block-start: max(var(--sp-4), env(safe-area-inset-top, 0px)); }
}

/* Short viewports (landscape phones): never let the panel exceed the screen. */
@media (max-height: 34rem) and (min-width: 48rem) {
  .chat-widget { --chat-block: calc(100dvh - 2 * var(--chat-edge) - var(--chat-disc) - var(--sp-3)); }
}

/* --------------------------------------------------------------------------
   11. REDUCED MOTION
   Token durations already collapse; the looping decorations need saying.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .chat-launcher__orbit,
  .chat-launcher__dot::after,
  .chat-typing__dots i { animation: none; }
  .chat-typing__dots i { opacity: .65; }
  .chat-panel { transform: none; }
  .chat-launcher:hover { transform: none; }
}