/* ── kcoin-chat-clarity v3 (11 Oct 2026) ────────────────────────────────────────────────────────────
   Member composer: the field must paint itself, and the phone layout must be usable.

   v1 gave `.kcchat-input` its own surface. v2 pinned it with !important. Why both were needed:

   The kcoin pages ship a host rule `input, select, textarea { background: #fff }`, and the client
   page additionally ships `input:focus,select:focus,textarea:focus{background:#fff}`. That :focus
   rule is specificity (0,1,1) and therefore BEATS the widget's `.kcchat-input` (0,1,0). So while the
   composer was focused the field was painted white, against this widget's `#eef1f7` near-white text:
   white on white, and the member could not see what they were typing. It only happened on focus,
   which is why unfocused screenshots looked perfect. Specificity and load order are not guarantees —
   a legibility guarantee is. Hence !important, on the field and on :focus, and never remove it to
   let a host rule "win".

   v3 fixes two things that only appear on a phone:

   1. THE LAUNCHER COVERS THE SEND BUTTON. The launcher is a toggle, and the widget never hides it
      when the panel opens. On desktop the panel is a floating card and the launcher sits beside it,
      which is harmless. On mobile the panel is `position: fixed; inset: 0` — fullscreen — so the
      launcher renders ON TOP of the composer, covering the send button and clipping the advisory
      line. A member tapping "send" hits the launcher and closes the panel instead. Once the panel is
      open the launcher has no job: the panel header carries its own minimise control.

   2. THE SEND BUTTON IS UNDER THE TAP-TARGET MINIMUM. `.kcchat-send` is 36x36. iOS asks for 44pt and
      Android for 48dp; 36 is a miss-tap on a phone, and a miss-tap next to a money chat is worse
      than a miss-tap. Bumped to 44 on small screens, along with the field's height and the header
      control.

   Loaded AFTER kcoin-chat.css and kcoin-chat-fix.css.
   ───────────────────────────────────────────────────────────────────────────────────────────────── */

.kcchat-root {
  /* the widget is dark by design — keep the UA's forced-dark pass away from it */
  color-scheme: dark;
}

/* The field owns its surface and its text colour. !important is deliberate: a legibility guarantee
   outranks any host rule. Never remove it. */
.kcchat-input {
  background: var(--kc-surface, #0f1219) !important;
  color: var(--kc-txt, #eef1f7) !important;
  -webkit-text-fill-color: var(--kc-txt, #eef1f7) !important;
  opacity: 1 !important;
  caret-color: var(--kc-gold, #f0c453) !important;
  min-height: 34px;
  padding: 8px;
  border-radius: 10px;
}

.kcchat-input:focus,
.kcchat-input:active {
  background: var(--kc-surface, #0f1219) !important;
  color: var(--kc-txt, #eef1f7) !important;
}

.kcchat-input::placeholder {
  color: var(--kc-muted, #98a1b3) !important;
  opacity: 1 !important;
}

/* the shell stays the raised surface; the field reads as a well inside it */
.kcchat-composer {
  background: var(--kc-raise, #1b2030);
  border-color: rgba(255, 255, 255, .20);
}

.kcchat-composer:focus-within {
  border-color: rgba(240, 196, 83, .55);
}

/* the panel's controls must look like controls, not faint squares */
.kcchat-icon-btn {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  color: var(--kc-txt, #eef1f7);
}

.kcchat-icon-btn:hover {
  background: rgba(255, 255, 255, .13);
  border-color: rgba(255, 255, 255, .30);
}

.kcchat-hint {
  color: var(--kc-muted, #98a1b3);
}

/* ── the launcher is a toggle, not a permanent fixture ────────────────────────────────────────────
   While the panel is open it has no purpose: the header carries the minimise control. Leaving it up
   costs nothing on desktop (it sits beside the card) but on mobile the fullscreen panel puts it
   straight over the send button. Hide it whenever the panel is open, at every width. */
.kcchat-root.open .kcchat-launcher {
  display: none !important;
}

/* ── phones ──────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {

  /* 36px is under the 44pt/48dp tap-target minimum, and a miss-tap beside a money chat is costly */
  .kcchat-send {
    width: 44px;
    height: 44px;
    border-radius: 13px;
  }

  .kcchat-input {
    min-height: 40px;
  }

  /* the minimise control needs a comfortable target too */
  .kcchat-icon-btn {
    min-width: 40px;
    min-height: 40px;
  }

  /* keep the advisory line clear of the home indicator */
  .kcchat-foot {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }
}