/* TIP customer chat widget.
   Inherits the site's existing tokens (--panel, --amber, --ink, --sans …) so it
   reads as part of the site rather than a bolted-on third-party bubble.
   Fallback values are supplied so the widget still renders if loaded on a page
   that has not defined the tokens. */

.tipchat {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 9999;
  font-family: var(--sans, ui-sans-serif, system-ui, sans-serif);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

/* ---------------------------------------------------------------- launcher */
.tipchat__launcher {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  background: linear-gradient(180deg, var(--amber-hi, #ffc76e), var(--amber, #f0a13a));
  color: #17130a;
  font: 600 14px/1 var(--sans, system-ui, sans-serif);
  cursor: pointer;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .85);
  transition: transform .18s var(--ease, cubic-bezier(.22, 1, .36, 1)), filter .18s;
}
.tipchat__launcher:hover { transform: translateY(-2px); filter: brightness(1.05); }
.tipchat__launcher:focus-visible { outline: 2px solid var(--amber-hi, #ffc76e); outline-offset: 3px; }
.tipchat.is-open .tipchat__launcher { display: none; }

/* ------------------------------------------------------------------- panel */
.tipchat__panel {
  width: min(380px, calc(100vw - 32px));
  height: min(560px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: var(--panel, #15171f);
  color: var(--ink, #edeef2);
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .9);
}
.tipchat__panel[hidden] { display: none; }

.tipchat__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line2, rgba(255, 255, 255, .055));
  background: var(--panel2, #1b1e28);
}
.tipchat__headtxt { flex: 1; min-width: 0; }
.tipchat__title { font: 600 15px/1.2 var(--disp, system-ui, sans-serif); }
.tipchat__sub { font-size: 11.5px; color: var(--muted, #8b8f9d); margin-top: 2px; }

.tipchat__lang,
.tipchat__close {
  background: transparent;
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  color: var(--ink2, #c7cad4);
  border-radius: 8px;
  cursor: pointer;
  font: 600 12px/1 var(--sans, system-ui, sans-serif);
  padding: 6px 9px;
}
.tipchat__close { font-size: 18px; line-height: .8; padding: 5px 9px; }
.tipchat__lang:hover, .tipchat__close:hover { border-color: var(--amber, #f0a13a); color: var(--ink, #edeef2); }
.tipchat__lang:focus-visible, .tipchat__close:focus-visible { outline: 2px solid var(--amber, #f0a13a); outline-offset: 2px; }

/* --------------------------------------------------------------------- log */
.tipchat__log {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scrollbar-width: thin;
}
.tipchat__msg { display: flex; }
.tipchat__msg--me { justify-content: flex-end; }
.tipchat__bubble {
  max-width: 85%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.tipchat__msg--bot .tipchat__bubble {
  background: var(--panel2, #1b1e28);
  border: 1px solid var(--line2, rgba(255, 255, 255, .055));
  border-bottom-left-radius: 5px;
}
.tipchat__msg--me .tipchat__bubble {
  background: var(--amber, #f0a13a);
  color: #17130a;
  border-bottom-right-radius: 5px;
}

.tipchat__bubble--typing { display: inline-flex; gap: 4px; align-items: center; padding: 13px; }
.tipchat__bubble--typing i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted, #8b8f9d);
  animation: tipchat-dot 1.1s infinite ease-in-out;
}
.tipchat__bubble--typing i:nth-child(2) { animation-delay: .15s; }
.tipchat__bubble--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tipchat-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }

.tipchat__notice {
  align-self: center;
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--muted, #8b8f9d);
  background: var(--panel2, #1b1e28);
  border: 1px solid var(--line2, rgba(255, 255, 255, .055));
  border-radius: 10px; padding: 7px 11px;
}
.tipchat__retry {
  background: transparent; border: 1px solid var(--amber, #f0a13a);
  color: var(--amber, #f0a13a); border-radius: 7px;
  padding: 3px 9px; font-size: 12px; cursor: pointer;
}

/* ------------------------------------------------------------ quick chips */
.tipchat__quick { display: flex; gap: 8px; padding: 0 14px 10px; flex-wrap: wrap; }
.tipchat__chip {
  background: transparent;
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  color: var(--ink2, #c7cad4);
  border-radius: 999px; padding: 7px 12px;
  font-size: 12.5px; cursor: pointer;
}
.tipchat__chip:hover { border-color: var(--amber, #f0a13a); color: var(--ink, #edeef2); }
.tipchat__chip:focus-visible { outline: 2px solid var(--amber, #f0a13a); outline-offset: 2px; }
.tipchat__quick.is-hot .tipchat__chip:first-child {
  border-color: var(--amber, #f0a13a); color: var(--amber-hi, #ffc76e);
}

/* -------------------------------------------------------------- composer */
.tipchat__form {
  display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--line2, rgba(255, 255, 255, .055));
  background: var(--panel2, #1b1e28);
}
.tipchat__input {
  flex: 1; resize: none; max-height: 120px;
  background: var(--bg2, #101219);
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  color: var(--ink, #edeef2);
  border-radius: 11px; padding: 10px 12px;
  font: 400 14px/1.45 var(--sans, system-ui, sans-serif);
}
.tipchat__input:focus { outline: none; border-color: var(--amber, #f0a13a); }
.tipchat__input:disabled { opacity: .55; }
.tipchat__send {
  background: var(--amber, #f0a13a); color: #17130a; border: 0;
  border-radius: 11px; padding: 0 16px;
  font: 600 13.5px/1 var(--sans, system-ui, sans-serif); cursor: pointer;
}
.tipchat__send:disabled { opacity: .5; cursor: default; }
.tipchat__send:focus-visible { outline: 2px solid var(--amber-hi, #ffc76e); outline-offset: 2px; }
.tipchat__send--block { width: 100%; padding: 10px 16px; margin-top: 6px; }

.tipchat__privacy {
  margin: 0; padding: 8px 14px 12px;
  font-size: 11px; line-height: 1.45;
  color: var(--faint, #5b5f6b);
  background: var(--panel2, #1b1e28);
}

/* ------------------------------------------------------------- mini form */
.tipchat__form-card {
  background: var(--panel2, #1b1e28);
  border: 1px solid var(--line2, rgba(255, 255, 255, .055));
  border-radius: 13px; padding: 12px;
}
.tipchat__form-title { font: 600 13.5px/1.2 var(--disp, system-ui, sans-serif); margin-bottom: 9px; }
.tipchat__field { display: block; margin-bottom: 8px; }
.tipchat__field span { display: block; font-size: 11.5px; color: var(--muted, #8b8f9d); margin-bottom: 4px; }
.tipchat__field input {
  width: 100%; box-sizing: border-box;
  background: var(--bg2, #101219);
  border: 1px solid var(--line, rgba(255, 255, 255, .09));
  color: var(--ink, #edeef2);
  border-radius: 9px; padding: 8px 10px; font-size: 13.5px;
}
.tipchat__field input:focus { outline: none; border-color: var(--amber, #f0a13a); }
.tipchat__err { color: #ff8f7a; font-size: 12px; min-height: 15px; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 480px) {
  .tipchat { right: 0; bottom: 0; left: 0; align-items: stretch; gap: 0; }
  .tipchat__launcher { margin: 0 12px 12px auto; }
  .tipchat__panel {
    width: 100%; height: 100dvh; max-height: 100dvh;
    border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0;
  }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  .tipchat__launcher { transition: none; }
  .tipchat__bubble--typing i { animation: none; opacity: .6; }
}

/* The site is dark by default; if a page opts into a light scheme the widget
   follows rather than punching a dark hole in it. */
@media (prefers-color-scheme: light) {
  .tipchat__panel:not([data-force-dark]) {
    --panel: #ffffff; --panel2: #f5f6f8; --bg2: #ffffff;
    --ink: #14161c; --ink2: #3c4150; --muted: #6b7080; --faint: #8a8f9c;
    --line: rgba(0, 0, 0, .12); --line2: rgba(0, 0, 0, .07);
  }
}