/* --------------------------------------------------------------------------
   Fin's answers in a support case thread (support.html only)

   The support console lives in the shared Fin dock (assets/fin-guide.js and its
   rules in infin8-effects.css). This file only changes how the thread shows who
   is speaking, so it is linked from support.html alone.

   A message from Fin, the Infin8 assistant (author "assistant": his instant
   knowledge-base answer and any assistant reply), carries his idle frame as a
   small avatar and a tinted card. A reply from a person at Infin8 Apps keeps a
   plain rule and no avatar, so the two are never confused.

   A small decorative sparkle identifies assistant messages; the visible
   label names the speaker and the current 3D character remains alongside.
   -------------------------------------------------------------------------- */

.support-page .fin-support-line.is-assistant {
  position: relative;
  min-height: 60px;
  padding: 8px 11px 10px 53px;
  border: 1px solid rgba(57, 215, 238, 0.32);
  border-radius: 14px 14px 14px 4px;
  background: linear-gradient(135deg, rgba(57, 215, 238, 0.1), rgba(139, 92, 246, 0.09));
}

/* Title and the single shared Finny support console form one hero row. The
   text column can shrink safely; the full-width assistant takes priority. */
.support-page .support-intro { width: 100%; max-width: none; }
.support-page .support-intro .page-hero-layout {
  grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr);
  align-items: start;
  gap: clamp(16px, 2.4vw, 32px);
}
.support-page .support-intro .page-hero-copy,
.support-page .support-intro #fin-support-desk { min-width: 0; }
.support-page .support-intro h1 {
  margin-top: 12px;
  font-size: clamp(2rem, 3.25vw, 3.15rem);
  line-height: 1.02;
  overflow-wrap: anywhere;
}
.support-page .support-intro .lead { max-width: 42ch; }

.support-page .fin-support-line.is-assistant::before {
  content: "✦";
  position: absolute;
  top: 8px;
  left: 10px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(95, 231, 255, .4);
  border-radius: 50%;
  color: #a4f3ff;
  background: rgba(30, 109, 153, .25);
  pointer-events: none;
}

.support-page .fin-support-line.is-assistant .fin-support-who {
  color: #7ff0ff;
}

/* A person from Infin8 Apps: a plain cyan rule, no avatar and no card. */
.support-page .fin-support-line.is-operator {
  padding-left: 11px;
  border-left: 2px solid rgba(57, 215, 238, 0.6);
}

/* Actions inside Fin's answer ("That fixed it", the knowledge links) keep the
   dock's own button style; they only need room from the text above them. */
.support-page .fin-support-line.is-assistant .fin-guide-actions {
  margin-top: 6px;
}

/* Ask Fin keeps a short, readable conversation in the same dock. The log is
   bounded so voice controls and the composer remain in reach on small screens. */
.fin-chat-log {
  display: grid;
  gap: 8px;
  max-height: min(32vh, 220px);
  margin: 8px 0 0;
  padding: 2px 3px 2px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.fin-chat-log[hidden] { display: none; }
.fin-chat-turn { display: grid; gap: 5px; min-width: 0; }
.fin-chat-message {
  max-width: 94%;
  margin: 0;
  padding: 7px 10px;
  border: 1px solid rgba(139, 92, 246, .28);
  border-radius: 11px;
  color: #f4f0ff;
  font-size: .82rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.fin-chat-message.is-visitor { justify-self: end; background: rgba(57, 215, 238, .09); }
.fin-chat-message.is-fin { justify-self: start; background: rgba(139, 92, 246, .1); }
.fin-chat-turn.is-pending .fin-chat-message.is-fin { color: #cbd1dc; }
.fin-candidate-review{display:grid;gap:6px;margin:10px 0;padding:10px;border:1px solid rgba(95,220,255,.45);border-radius:10px;background:rgba(8,16,37,.7);color:#eaf7ff;font-size:12px}
.fin-candidate-review strong{color:#80e9ff;font-size:12px;line-height:1.4}
.fin-candidate-review input[type=file]{display:block;max-width:100%;width:100%;min-height:38px;color:#eaf7ff}
.fin-candidate-review p{margin:0;color:#d7e9ff;overflow-wrap:anywhere}
.fin-candidate-review input:focus-visible{outline:2px solid #71eeff;outline-offset:2px}
.fin-guide[data-fin-state="listening"] .fin-guide-mark .fin-mark-glow,
.fin-guide[data-fin-state="thinking"] .fin-guide-mark .fin-mark-glow { animation-duration: 1.2s; opacity: 1; }
.fin-guide[data-fin-state="speaking"] .fin-guide-mark .fin-mark-glow { animation-duration: 2.4s; }
.fin-guide[data-fin-state="error"] .fin-guide-mark .fin-mark-glow { background: radial-gradient(circle, rgba(255, 132, 151, .3), transparent 70%); }

.support-fin-note {
  margin: 14px 0 0;
  color: var(--muted-strong, #cbd1dc);
}

@media (forced-colors: active) {
  .support-page .fin-support-line.is-assistant {
    border-color: CanvasText;
  }
}

/* The live support chat is a real document section, not a fixed overlay. */
.support-page #fin-support-desk {
  display: grid;
  justify-items: stretch;
  width: 100%;
  margin: 0;
  min-width: 0;
}
.support-page #fin-support-desk .fin-guide {
  position: relative;
  inset: auto;
  width: 100%;
  max-width: 960px;
  z-index: 1;
  gap: clamp(8px, 1.5vw, 20px);
  align-items: center;
}
.support-page #fin-support-desk .fin-guide-mark {
  width: clamp(210px, 25vw, 310px);
  height: clamp(270px, 32vw, 390px);
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 52%, rgba(30, 133, 186, .13), rgba(67, 31, 143, .08) 48%, transparent 72%);
}
.support-page #fin-support-desk .fin-guide.has-console { width: 100%; max-width: 960px; }
.support-page #fin-support-desk .fin-guide-panel {
  flex: 1 1 420px;
  max-width: 100%;
  box-sizing: border-box;
  border-color: rgba(95, 231, 255, 0.38);
  box-shadow: 0 22px 55px rgba(7, 3, 29, 0.4);
}
.support-page #fin-support-desk .fin-guide-body,
.support-page #fin-support-desk .fin-support-line {
  min-width: 0;
  max-width: 100%;
}
.support-page #fin-support-desk .fin-support-line,
.support-page #fin-support-desk .fin-support-line p,
.support-page #fin-support-desk .fin-support-status {
  overflow-wrap: anywhere;
}
.support-page #fin-support-desk .fin-guide-actions { flex-wrap: wrap; }
.support-page #fin-support-desk .fin-support-composer textarea {
  min-width: 0;
  max-width: 100%;
  min-height: 92px;
  max-height: 35dvh;
}
.support-page #fin-support-desk :is(button, textarea, input):focus-visible {
  outline: 2px solid #5ee6ff;
  outline-offset: 2px;
}
.support-page #fin-support-desk .fin-guide-panel.is-console { min-height: 260px; min-width: 0; }
.support-page #fin-support-desk .fin-guide-panel::after { top: 26%; bottom: auto; }
.support-page #fin-support-desk .fin-guide-panel::before { top: calc(26% + 27px); bottom: auto; }
.support-page #fin-support-desk .fin-guide-scroll {
  min-width: 0;
  max-height: none;
  overflow: visible;
}
.support-page #fin-support-desk .fin-guide-panel {
  /* Keep the conversation, status and composer above decorated background. */
  isolation: isolate;
}
.support-page #fin-support-desk .fin-guide-panel[hidden] { display: none; }
/* One bounded message-history scrollbar: composer stays visible. */
.support-page #fin-support-desk .fin-support-log {
  min-height: 3rem;
  max-height: min(48dvh, 440px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.support-page #fin-support-desk .fin-guide-reopen {
  position: relative;
  inset: auto;
  margin: 0 auto;
}
@media (max-width: 620px) {
  .fin-chat-log { max-height: min(26dvh, 180px); }
  .support-page #fin-support-desk .fin-guide { flex-direction: column; align-items: stretch; gap: 8px; }
  .support-page #fin-support-desk .fin-guide-mark {
    align-self: center;
    width: clamp(150px, 46vw, 210px);
    height: clamp(190px, 58vw, 260px);
    border-radius: 20px;
  }
  /* Stacked, the row's flex-basis would become a fixed height and push the
     composer out of the balloon: size the panel by its content instead. */
  .support-page #fin-support-desk .fin-guide-panel {
    flex: 0 0 auto;
    width: 100%;
    padding: 14px;
    min-height: 0;
  }
  .support-page #fin-support-desk .fin-guide-scroll { width: 100%; }
  .support-page #fin-support-desk .fin-guide-head { flex-wrap: wrap; }
  .support-page #fin-support-desk .fin-support-composer textarea { font-size: 16px; }
  .support-page #fin-support-desk .fin-guide-action { min-height: 44px; }
  .support-page #fin-support-desk .fin-guide-panel::before,
  .support-page #fin-support-desk .fin-guide-panel::after { display: none; }
  .support-page #fin-support-desk .fin-support-log { max-height: min(45dvh, 340px); }
}

@media (max-width: 900px) {
  .support-page .support-intro .page-hero-layout {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 16px;
  }
  .support-page .support-intro .page-hero-copy { max-width: 48rem; }
}

@media (max-width: 380px) {
  .support-page #fin-support-desk .fin-guide-panel { padding: 11px; }
  .support-page #fin-support-desk .fin-guide-mark {
    width: clamp(140px, 44vw, 170px);
    height: clamp(180px, 56vw, 220px);
  }
  .support-page #fin-support-desk .fin-support-line.is-assistant { padding-left: 45px; }
  .support-page #fin-support-desk .fin-support-line.is-assistant::before {
    width: 25px;
    height: 25px;
    left: 8px;
  }
  .support-page #fin-support-desk .fin-support-log { max-height: min(40dvh, 280px); }
}
@media (prefers-reduced-motion: reduce) {
  .support-page #fin-support-desk .fin-guide-panel { scroll-behavior: auto; }
}

.support-page #fin-support-desk .fin-support-product{display:grid;gap:6px;margin-bottom:12px;min-width:0;}
.support-page #fin-support-desk .fin-support-product span{color:#a5edff;font-size:.78rem;font-weight:800;letter-spacing:.04em;}
.support-page #fin-support-desk .fin-support-product select{box-sizing:border-box;min-width:0;width:100%;min-height:44px;
 padding:9px 12px;border:1px solid #397fa4;border-radius:10px;background:#10243c;color:#ebf8ff;font:inherit;}
.support-page #fin-support-desk .fin-support-product select:focus-visible{outline:2px solid #6ce8ff;outline-offset:2px;}
.support-page #fin-support-desk .fin-support-quick-choices{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px;}
.support-page #fin-support-desk .fin-support-quick-choice{min-height:34px;padding:5px 9px;font-size:.78rem;}
@media (max-width: 620px) {
  .support-page #fin-support-desk .fin-support-quick-choice { min-height: 44px; }
}