/* ── Kcoin Support live chat — member widget styles ──────────────────────────────────────────────
 *
 * SELF-CONTAINED PALETTE. This file deliberately reads NO custom property from the host page.
 *
 * That is a fix for a real bug. The widget used to take its text colour from the page's --txt and
 * its backgrounds from var(--surface, <dark fallback>). kcoin.click does not serve one theme:
 * index.html is light (--txt is near-black) and account.html is dark (--txt is near-white). Any page
 * that defines the text colour but NOT the surface variables paints dark text onto a dark fallback —
 * which is exactly how the operator console ended up with an invisible reply box. A floating panel
 * cannot be half-adaptive; it owns one palette: dark surface, light text, Kcoin gold. Same on every
 * page, and immune to a host stylesheet change.
 */

.kcchat-root,
.kcchat-root * { box-sizing: border-box; }

.kcchat-root {
  /* local tokens only — nothing below is inherited from the page */
  --kc-bg2: #0a0c11;
  --kc-surface: #0f1219;
  --kc-surface2: #151925;
  --kc-raise: #1b2030;
  --kc-line: rgba(255, 255, 255, .07);
  --kc-line2: rgba(255, 255, 255, .13);
  --kc-txt: #eef1f7;
  --kc-muted: #98a1b3;   /* 6.96:1 on --kc-surface2 */
  --kc-dim: #7d8698;     /* 4.94:1 on --kc-surface2 — the previous #5c6478 measured 2.96:1 */
  --kc-gold: #f0c453;
  --kc-gold2: #d9a93a;
  --kc-on-gold: #1a1305;
  --kc-mint: #3ddc97;
  --kc-red: #ff5f6d;
  --kc-badge: #d92b41;   /* white on --kc-red measures 2.95:1; this clears AA at 4.80:1 */

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--kc-txt);
  text-align: left;
}
.kcchat-root [hidden] { display: none !important; }

/* ── launcher ────────────────────────────────────────────────────────────────────────────────── */
.kcchat-launcher {
  position: relative;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 1px solid rgba(240, 196, 83, .45);
  background: linear-gradient(150deg, var(--kc-gold), var(--kc-gold2));
  color: var(--kc-on-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 0 0 rgba(240, 196, 83, .45);
  transition: transform .18s ease, box-shadow .25s ease;
}
.kcchat-launcher:hover { transform: translateY(-2px) scale(1.03); }
.kcchat-launcher:active { transform: scale(.97); }
.kcchat-launcher:focus-visible { outline: 2px solid var(--kc-gold); outline-offset: 3px; }
.kcchat-root:not(.open) .kcchat-launcher { animation: kcchat-breathe 3.4s ease-in-out infinite; }
@keyframes kcchat-breathe {
  0%, 100% { box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 0 rgba(240,196,83,.40); }
  55%      { box-shadow: 0 10px 30px rgba(0,0,0,.55), 0 0 0 12px rgba(240,196,83,0); }
}
.kcchat-launcher-icon { display: flex; }

.kcchat-badge {
  position: absolute;
  top: -4px; right: -4px;
  min-width: 22px; height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--kc-badge);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
  border: 2px solid #06070a;
}

/* ── panel ───────────────────────────────────────────────────────────────────────────────────── */
.kcchat-panel {
  position: absolute;
  right: 0;
  bottom: 72px;
  width: 384px;
  max-width: calc(100vw - 32px);
  height: 582px;
  max-height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background: var(--kc-surface);
  border: 1px solid var(--kc-line2);
  border-radius: 22px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, .68);
  overflow: hidden;
  animation: kcchat-in .19s ease-out;
}
@keyframes kcchat-in { from { opacity: 0; transform: translateY(12px) scale(.985); } to { opacity: 1; transform: none; } }

.kcchat-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 14px 15px;
  background: linear-gradient(120deg, rgba(240,196,83,.13), rgba(27,32,48,.6) 55%, var(--kc-surface2));
  border-bottom: 1px solid var(--kc-line);
}
.kcchat-who { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.kcchat-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--kc-mint);
  box-shadow: 0 0 0 0 rgba(61,220,151,.55);
  animation: kcchat-live 2.6s ease-out infinite;
  flex: none;
}
@keyframes kcchat-live {
  0%   { box-shadow: 0 0 0 0 rgba(61,220,151,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(61,220,151,0); }
  100% { box-shadow: 0 0 0 0 rgba(61,220,151,0); }
}
.kcchat-titles { min-width: 0; }
.kcchat-title { font-size: 14px; font-weight: 700; letter-spacing: .2px; color: var(--kc-gold); }
.kcchat-status { font-size: 11.5px; color: var(--kc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kcchat-headbtns { display: flex; gap: 4px; }
.kcchat-icon-btn {
  width: 32px; height: 32px; border-radius: 9px;
  border: 1px solid var(--kc-line);
  background: rgba(255,255,255,.03);
  color: var(--kc-muted);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: .15s ease;
}
.kcchat-icon-btn:hover { color: var(--kc-txt); border-color: var(--kc-line2); }

/* ── messages ────────────────────────────────────────────────────────────────────────────────── */
.kcchat-list {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  scrollbar-width: thin;
  scrollbar-color: var(--kc-raise) transparent;
  background:
    radial-gradient(1000px 240px at 50% -60px, rgba(240,196,83,.05), transparent 70%),
    var(--kc-surface);
}
.kcchat-list::-webkit-scrollbar { width: 8px; }
.kcchat-list::-webkit-scrollbar-thumb { background: var(--kc-raise); border-radius: 8px; }

.kcchat-empty { margin: auto 6px; text-align: center; }
.kcchat-empty-t { font-size: 14px; font-weight: 650; color: var(--kc-txt); margin-bottom: 6px; }
.kcchat-empty-s { font-size: 12.5px; line-height: 1.5; color: var(--kc-muted); }

.kcchat-day {
  align-self: center;
  font-size: 10.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--kc-dim);
  background: rgba(255,255,255,.035);
  border: 1px solid var(--kc-line);
  border-radius: 20px;
  padding: 3px 11px;
  margin: 4px 0 2px;
}

.kcchat-row { display: flex; flex-direction: column; max-width: 84%; }
.kcchat-row.from-me { align-self: flex-end; align-items: flex-end; }
.kcchat-row.from-them { align-self: flex-start; align-items: flex-start; }

.kcchat-bubble {
  padding: 10px 13px;
  border-radius: 15px;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.from-them .kcchat-bubble {
  background: var(--kc-surface2);
  border: 1px solid var(--kc-line);
  color: var(--kc-txt);
  border-bottom-left-radius: 5px;
}
.from-me .kcchat-bubble {
  background: linear-gradient(150deg, var(--kc-gold), var(--kc-gold2));
  color: var(--kc-on-gold);
  font-weight: 500;
  border-bottom-right-radius: 5px;
  box-shadow: 0 4px 14px rgba(217,169,58,.16);
}
.kcchat-meta { font-size: 10.5px; color: var(--kc-dim); margin: 4px 4px 0; }
.kcchat-error {
  align-self: center; margin: 6px 0;
  font-size: 12px; color: var(--kc-red);
  background: rgba(255,95,109,.09);
  border: 1px solid rgba(255,95,109,.3);
  border-radius: 10px; padding: 7px 11px;
}

/* ── typing indicator ────────────────────────────────────────────────────────────────────────── */
.kcchat-typing {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 18px 10px;
  color: var(--kc-muted);
  font-size: 11.5px;
  background: var(--kc-surface);
}
.kcchat-typing-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--kc-gold);
  animation: kcchat-bounce 1.25s ease-in-out infinite;
}
.kcchat-typing-dot:nth-child(2) { animation-delay: .16s; }
.kcchat-typing-dot:nth-child(3) { animation-delay: .32s; }
.kcchat-typing-text { margin-left: 4px; }
@keyframes kcchat-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

.kcchat-jump {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 92px;
  border: 1px solid rgba(240,196,83,.4);
  background: var(--kc-raise);
  color: var(--kc-gold);
  font-size: 11.5px; font-weight: 600;
  padding: 6px 13px; border-radius: 20px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}

/* ── composer ────────────────────────────────────────────────────────────────────────────────── */
.kcchat-foot {
  padding: 11px 12px 12px;
  border-top: 1px solid var(--kc-line);
  background: var(--kc-surface2);
}
.kcchat-composer {
  display: flex; align-items: flex-end; gap: 8px;
  background: var(--kc-bg2);
  border: 1px solid var(--kc-line2);
  border-radius: 14px;
  padding: 7px 7px 7px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kcchat-composer:focus-within {
  border-color: rgba(240,196,83,.5);
  box-shadow: 0 0 0 3px rgba(240,196,83,.10);
}
.kcchat-input {
  flex: 1;
  border: 0; outline: 0; resize: none;
  background: transparent;
  color: var(--kc-txt);          /* light text: the composer background is --kc-bg2, which is dark */
  caret-color: var(--kc-gold);
  font: inherit; font-size: 13.5px; line-height: 1.45;
  max-height: 120px;
  padding: 5px 0;
}
.kcchat-input::placeholder { color: var(--kc-dim); }
.kcchat-send {
  flex: none;
  width: 36px; height: 36px; border-radius: 11px;
  border: 0;
  background: linear-gradient(150deg, var(--kc-gold), var(--kc-gold2));
  color: var(--kc-on-gold);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: .15s ease;
}
.kcchat-send:hover:not(:disabled) { filter: brightness(1.07); }
.kcchat-send:disabled { opacity: .5; cursor: default; }
.kcchat-hint { font-size: 10.5px; color: var(--kc-dim); margin-top: 8px; line-height: 1.4; }

/* ── mobile ──────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
  .kcchat-root { right: 14px; bottom: 14px; }
  .kcchat-panel {
    position: fixed;
    inset: 0;
    width: 100vw; height: 100dvh;
    max-width: none; max-height: none;
    border-radius: 0; border: 0;
    bottom: 0;
  }
  .kcchat-jump { bottom: 104px; }
}

@media (prefers-reduced-motion: reduce) {
  .kcchat-root:not(.open) .kcchat-launcher,
  .kcchat-dot,
  .kcchat-typing-dot { animation: none !important; }
  .kcchat-panel { animation: none !important; }
  .kcchat-launcher:hover { transform: none; }
}