/* ==========================================================================
   Lina widget — self-contained. Scoped under .lina-root so it can be dropped
   onto any client site without colliding with the host stylesheet.
   ========================================================================== */

.lina-root {
  --l-navy-900: #060d17;
  --l-navy-800: #0b1826;
  --l-navy-700: #112336;
  --l-navy-600: #17304a;
  --l-line:     rgba(140, 178, 205, 0.18);
  --l-line-str: rgba(140, 178, 205, 0.32);
  --l-ink:      #eef4f9;
  --l-ink-soft: #c3d2de;
  --l-ink-mute: #93a7b8;
  --l-teal:      #3fd8c4;
  --l-teal-deep: #17a892;
  /* Per-vertical accent. Defaults to the house teal; widget.js stamps
     data-vertical on this element and the rules below re-point it. */
  --l-accent:      var(--l-teal);
  --l-accent-deep: var(--l-teal-deep);
  /* The launcher mark is Lina's own colour, not the per-vertical accent:
     a warm gold that sits next to the rose-gold portrait. */
  --l-mark:        #f3c455;
  --l-radius: 18px;
  --l-ease: cubic-bezier(.22, .61, .36, 1);

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--l-ink-soft);
}

.lina-root *,
.lina-root *::before,
.lina-root *::after { box-sizing: border-box; }

.lina-root :focus-visible {
  outline: 2px solid var(--l-accent);
  outline-offset: 2px;
}

/* Per-vertical accents. Anything painted with --l-accent tints with them. */
.lina-root[data-vertical="stay"]      { --l-accent: #3fd8c4; --l-accent-deep: #17a892; }
.lina-root[data-vertical="chauffeur"] { --l-accent: #8fb6ff; --l-accent-deep: #3f6fd8; }
.lina-root[data-vertical="tours"]     { --l-accent: #ffc76b; --l-accent-deep: #d99321; }

/* ------------------------------------------------------------- launcher */

.lina-launcher {
  pointer-events: auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  padding: 9px 20px 9px 14px;
  border-radius: 999px;
  border: 1px solid var(--l-line-str);
  background: linear-gradient(180deg, rgba(17, 35, 54, .98), rgba(8, 18, 30, .98));
  color: var(--l-ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, .85);
  transition: transform .2s var(--l-ease), box-shadow .2s var(--l-ease),
              border-color .2s var(--l-ease), opacity .16s var(--l-ease);
}

/* hover lift (ported) */
.lina-launcher:hover {
  transform: translateY(-2px);
  border-color: var(--l-accent);
  border-color: color-mix(in srgb, var(--l-accent) 55%, transparent);
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .9);
}

.lina-launcher-text { line-height: 1; }

/* --- animated mark: a line draws itself into a chat bubble, three dots
       tick in staggered, then the line runs off. Ported from the D&L
       reference launcher (.dl-ai-line / .dl-ai-dots / @keyframes dlAiDot),
       renamed into the lina- namespace and re-coloured from --l-accent. */

.lina-launcher-mark {
  width: 46px;
  height: 28px;
  display: block;
  flex: none;
  color: var(--l-mark);
}

.lina-launcher-line {
  stroke-dasharray: 100;
  animation: lina-mark-draw 6.5s ease-in-out infinite;
}

.lina-launcher-dots circle { opacity: 0; }
.lina-launcher-dots circle:nth-child(1) { animation: lina-mark-dot 6.5s infinite; }
.lina-launcher-dots circle:nth-child(2) { animation: lina-mark-dot 6.5s .25s infinite; }
.lina-launcher-dots circle:nth-child(3) { animation: lina-mark-dot 6.5s .5s infinite; }

@keyframes lina-mark-draw {
  0%   { stroke-dashoffset: 100; }
  30%  { stroke-dashoffset: 0; }
  72%  { stroke-dashoffset: 0; }
  95%  { stroke-dashoffset: -100; }
  100% { stroke-dashoffset: -100; }
}

@keyframes lina-mark-dot {
  0%, 32%   { opacity: 0; }
  40%, 64%  { opacity: 1; }
  70%, 100% { opacity: 0; }
}

/* open/close: the pill scales down and fades out instead of vanishing.
   Taken out of flow so the panel keeps its own layout. */
.lina-root.is-open .lina-launcher {
  position: absolute;
  right: 0;
  bottom: 0;
  transform: scale(.9);
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------------------- panel */

.lina-panel {
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  width: min(400px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 80px));
  border-radius: var(--l-radius);
  border: 1px solid var(--l-line-str);
  background: var(--l-navy-900);
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgba(63, 216, 196, .10), transparent 62%);
  box-shadow: 0 34px 70px -28px rgba(0, 0, 0, .95);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transform-origin: 100% 100%;
  transition: opacity .2s var(--l-ease), transform .2s var(--l-ease);
}

.lina-panel.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* --------------------------------------------------------------- header */

.lina-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 14px 14px 18px;
  border-bottom: 1px solid var(--l-line);
  background: rgba(11, 24, 38, .7);
}

.lina-ident { min-width: 0; flex: 1; }

.lina-title {
  margin: 0;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--l-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lina-status {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 3px 0 0;
  font-size: 11.5px;
  color: var(--l-ink-mute);
  /* One line, always. The avatar and two buttons leave roughly 250px here, so
     without this the status wraps and the header looks broken. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.lina-status > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
}

.lina-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--l-teal);
  flex: none;
  animation: lina-pulse 2.6s infinite;
}

@keyframes lina-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63, 216, 196, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(63, 216, 196, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 216, 196, 0); }
}

.lina-clear,
.lina-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid transparent;
  background: transparent;
  color: var(--l-ink-mute);
  cursor: pointer;
  transition: color .16s var(--l-ease), background-color .16s var(--l-ease),
              border-color .16s var(--l-ease);
}
.lina-clear:hover, .lina-close:hover {
  color: var(--l-ink);
  background: rgba(255, 255, 255, .06);
  border-color: var(--l-line);
}

/* ----------------------------------------------------------- message list */

.lina-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 6px;
  scrollbar-width: thin;
  scrollbar-color: rgba(140, 178, 205, .3) transparent;
}

.lina-list::-webkit-scrollbar { width: 8px; }
.lina-list::-webkit-scrollbar-thumb {
  background: rgba(140, 178, 205, .26);
  border-radius: 99px;
}

.lina-row {
  display: flex;
  margin-bottom: 12px;
}
.lina-row-guest { justify-content: flex-end; }
.lina-row-lina { justify-content: flex-start; }
.lina-row-notice { justify-content: center; }

.lina-bubble {
  max-width: 86%;
  padding: 11px 15px;
  border-radius: 16px;
  font-size: 14.8px;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  animation: lina-rise .22s var(--l-ease);
}

@keyframes lina-rise {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: none; }
}

.lina-bubble-lina {
  background: var(--l-navy-700);
  border: 1px solid var(--l-line);
  border-bottom-left-radius: 6px;
  color: var(--l-ink-soft);
}

.lina-bubble-guest {
  background: linear-gradient(180deg, #4ee2ce, var(--l-teal-deep));
  border-bottom-right-radius: 6px;
  color: #032019;
  font-weight: 500;
  white-space: pre-wrap;
}

.lina-bubble a {
  color: var(--l-teal);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lina-bubble-guest a { color: #032019; }

.lina-notice {
  max-width: 92%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 176, 132, .3);
  background: rgba(255, 176, 132, .08);
  color: #ffcda8;
  font-size: 13px;
  text-align: center;
}

/* ------------------------------------------------------- typing indicator */

.lina-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 14px 16px;
}

.lina-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--l-ink-mute);
  animation: lina-blink 1.25s infinite ease-in-out;
}
.lina-dot:nth-child(2) { animation-delay: .16s; }
.lina-dot:nth-child(3) { animation-delay: .32s; }

@keyframes lina-blink {
  0%, 80%, 100% { opacity: .28; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

/* ------------------------------------------------------------------ chips */

.lina-chips-wrap {
  position: relative;
  padding: 6px 0 10px;
}
.lina-chips-wrap[hidden] { display: none; }

.lina-chips {
  display: flex;
  gap: 8px;
  padding: 2px 16px 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.lina-chips::-webkit-scrollbar { display: none; }

.lina-chip {
  flex: 0 0 auto;
  max-width: 74%;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(63, 216, 196, .3);
  background: rgba(63, 216, 196, .08);
  color: var(--l-teal);
  font: inherit;
  font-size: 13.2px;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s var(--l-ease), border-color .16s var(--l-ease),
              transform .16s var(--l-ease);
}
.lina-chip:hover {
  background: rgba(63, 216, 196, .17);
  border-color: var(--l-teal);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------- composer */

.lina-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 12px 12px 8px;
  border-top: 1px solid var(--l-line);
  background: rgba(11, 24, 38, .72);
}

.lina-input {
  flex: 1 1 auto;
  min-width: 0;
  resize: none;
  max-height: 132px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid var(--l-line);
  background: rgba(6, 13, 23, .85);
  color: var(--l-ink);
  font: inherit;
  font-size: 14.8px;
  line-height: 1.45;
}
.lina-input::placeholder { color: #7d92a5; }
.lina-input:focus {
  border-color: rgba(63, 216, 196, .55);
  outline: none;
  box-shadow: 0 0 0 3px rgba(63, 216, 196, .14);
}
.lina-input:disabled { opacity: .6; }

.lina-send {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(180deg, #4ee2ce, var(--l-teal-deep));
  color: #032019;
  cursor: pointer;
  transition: transform .16s var(--l-ease), opacity .16s var(--l-ease);
}
.lina-send:hover:not(:disabled) { transform: translateY(-1px); }
.lina-send:disabled { opacity: .45; cursor: default; }

.lina-foot {
  margin: 0;
  padding: 0 16px 12px;
  font-size: 11.5px;
  color: #6f8496;
  text-align: center;
  background: rgba(11, 24, 38, .72);
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}

.lina-foot-note { line-height: 1.35; }

.lina-foot-by {
  font-size: 11px;
  color: #7d93a6;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .16s var(--l-ease), border-color .16s var(--l-ease);
}

.lina-foot-by:hover,
.lina-foot-by:focus-visible {
  color: var(--l-mark);
  border-bottom-color: var(--l-mark);
}

/* ----------------------------------------------------------- mobile layout */

@media (max-width: 560px) {
  .lina-root {
    right: 14px;
    bottom: 14px;
    left: 14px;
  }

  .lina-root.is-open {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .lina-panel {
    width: 100%;
    flex: 1 1 auto;
    height: 100%;
    max-height: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
  }


  .lina-bubble { max-width: 90%; }
}

/* [E8 K19] Header portrait. 38px, left of the tenant name, ring in the
   per-vertical accent. Never rendered on the launcher pill. If
   /static/lina-avatar.png is missing the img errors and JS removes the node,
   so the header falls back to exactly what it looked like before. */
.lina-root .lina-avatar {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 0 0 2px var(--l-accent), 0 2px 8px rgba(0, 0, 0, .35);
  transform-origin: 50% 85%;
  transition: transform 400ms cubic-bezier(.22, .61, .36, 1);
}

.lina-root .lina-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* [E8 K20] The blush: a warm rose glow over the lower half plus the faintest
   tilt. Added for a few seconds when a finished reply carries an emoji. */
.lina-root .lina-avatar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms cubic-bezier(.22, .61, .36, 1);
  background: radial-gradient(ellipse 80% 55% at 50% 88%,
              rgba(232, 160, 160, .35) 0%,
              rgba(232, 160, 160, .18) 45%,
              rgba(232, 160, 160, 0) 72%);
}

.lina-root .lina-avatar.lina-blush::after { opacity: 1; }
.lina-root .lina-avatar.lina-blush { transform: rotate(-3deg); }

@media (prefers-reduced-motion: reduce) {
  .lina-root *,
  .lina-root *::before,
  .lina-root *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Launcher mark stays a finished, static chat bubble: no line draw,
     no dot animation. (Ported from the reference reduced-motion block.) */
  .lina-launcher-line {
    animation: none !important;
    stroke-dashoffset: 0;
  }
  .lina-launcher-dots circle {
    animation: none !important;
    opacity: 1;
  }

  /* [E8 K20] Reduced motion keeps the glow, drops the tilt. */
  .lina-root .lina-avatar.lina-blush { transform: none; }
  .lina-root .lina-avatar::after { transition: none; }
}

/* ===================================================== [V1.1] voice call */

.lina-root[data-vertical="recruit"] { --l-accent: #b9a6ff; --l-accent-deep: #6f56d9; }

.lina-panel { position: relative; }

.lina-callbar {
  display: flex;
  justify-content: flex-start;
  padding: 8px 12px 0;
  background: rgba(11, 24, 38, .72);
  border-top: 1px solid var(--l-line);
}
.lina-callbar[hidden] { display: none; }
.lina-callbar + .lina-composer { border-top: none; }

.lina-callbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 11px;
  border-radius: 999px;
  border: 1px solid var(--l-accent);
  background: rgba(6, 13, 23, .6);
  color: var(--l-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .16s var(--l-ease), transform .16s var(--l-ease);
}
.lina-callbtn svg { color: var(--l-accent); flex: none; }
.lina-callbtn:hover:not(:disabled) { background: rgba(23, 48, 74, .9); transform: translateY(-1px); }
.lina-callbtn:disabled { opacity: .45; cursor: default; }

.lina-call {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  background: var(--l-navy-900);
  background-image:
    radial-gradient(90% 55% at 50% 30%, rgba(63, 216, 196, .16), transparent 70%);
  text-align: center;
}
.lina-call[hidden] { display: none; }

.lina-call-face {
  position: relative;
  width: 112px;
  height: 112px;
  margin-bottom: 14px;
  border-radius: 50%;
  border: 2px solid var(--l-accent);
  background: var(--l-navy-700);
  overflow: visible;
}
.lina-call-face img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.lina-call-face::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 2px solid var(--l-accent);
  animation: lina-call-pulse 1.8s var(--l-ease) infinite;
}
@keyframes lina-call-pulse {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(1.35); opacity: 0; }
}

.lina-call-name {
  margin: 0;
  font-size: 21px;
  font-weight: 600;
  color: var(--l-ink);
}
.lina-call-status {
  margin: 0 0 22px;
  font-size: 14.5px;
  color: var(--l-ink-soft);
  font-variant-numeric: tabular-nums;
}

.lina-call-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.lina-call-mute,
.lina-call-hang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 118px;
  min-height: 46px;
  padding: 10px 18px;
  border-radius: 999px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}
.lina-call-mute {
  border: 1px solid var(--l-line-str);
  background: rgba(17, 35, 54, .9);
  color: var(--l-ink);
}
.lina-call.is-muted .lina-call-mute {
  background: var(--l-ink);
  color: var(--l-navy-900);
}
.lina-call-hang {
  border: none;
  background: #e5484d;
  color: #fff;
}
.lina-call-hang svg { transform: rotate(135deg); }
.lina-call-hang:hover { background: #cf3a3f; }

/* Call transcript lines in the thread carry a small handset mark. */
.lina-bubble-call::before {
  content: "";
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 6px;
  vertical-align: -1px;
  background-color: currentColor;
  opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.2 2.8l1.9 3.3c.3.5.2 1.1-.2 1.5L6.6 8.8c.9 1.9 2.7 3.7 4.6 4.6l1.2-1.3c.4-.4 1-.5 1.5-.2l3.3 1.9c.5.3.7.9.5 1.4l-.7 1.9c-.3.7-1 1.2-1.8 1.1C8.9 17.8 2.2 11.1 1.8 4.8c-.1-.8.4-1.5 1.1-1.8l1.9-.7c.5-.2 1.1 0 1.4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.2 2.8l1.9 3.3c.3.5.2 1.1-.2 1.5L6.6 8.8c.9 1.9 2.7 3.7 4.6 4.6l1.2-1.3c.4-.4 1-.5 1.5-.2l3.3 1.9c.5.3.7.9.5 1.4l-.7 1.9c-.3.7-1 1.2-1.8 1.1C8.9 17.8 2.2 11.1 1.8 4.8c-.1-.8.4-1.5 1.1-1.8l1.9-.7c.5-.2 1.1 0 1.4.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
  .lina-call-face::after { animation: none; }
}