/* Mido — widget Customer Service pengunjung (Phase 4 Batch 5).
   Theme-aware: seluruh warna dari token portal (--surface/--ink/--accent/--border).
   Desktop: floating kanan-bawah. Mobile (<=480px): full-screen 100dvw/dvh.
   Status tidak pernah hanya lewat warna — selalu ada label teks. */

#mido-root { position: fixed; right: 0; bottom: 0; z-index: 95; }
#mido-root *, #mido-root *::before, #mido-root *::after { box-sizing: border-box; }

/* ---- collapsed launcher ---- */
.mido-launcher {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 0.7rem;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: 0.7rem 1rem 0.7rem 0.7rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
  box-shadow: var(--elev-3); cursor: pointer; text-align: left;
  font: inherit;
}
.mido-launcher:hover { border-color: var(--accent); }
.mido-launcher:focus-visible { outline: none; box-shadow: var(--focus-ring), var(--elev-3); }
.mido-launcher__text { display: grid; gap: 0.1rem; min-width: 0; }
.mido-launcher__title { font-weight: 700; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mido-launcher__sub { font-size: 0.74rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- avatar ---- */
.mido-ava {
  flex: none; width: 2rem; height: 2rem; border-radius: 999px; overflow: hidden;
  display: grid; place-items: center; font-family: var(--font-display);
  font-weight: 800; font-size: 0.95rem; color: var(--accent-ink);
  background: #fff url("/assets/brand/mido-logo.png") center / cover no-repeat;
}
/* Petugas mengambil alih percakapan -> kembali ke inisial pada ubin navy. */
.mido-ava--agent {
  border-radius: var(--radius-sm);
  background: var(--accent);
}

/* ---- expanded panel ---- */
.mido-panel {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  width: min(24rem, calc(100vw - 2rem));
  height: min(38rem, calc(100dvh - 2rem));
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  box-shadow: var(--elev-3); overflow: hidden;
}
.mido-panel[hidden] { display: none; }

.mido-head {
  flex: none; display: flex; align-items: center; gap: 0.6rem;
  padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.mido-head__id { display: grid; gap: 0.05rem; min-width: 0; flex: 1; }
.mido-head__id strong { font-size: 0.92rem; }
.mido-head__sub { font-size: 0.74rem; color: var(--ink-soft); }
.mido-x {
  flex: none; width: 2rem; height: 2rem; border: 1px solid var(--border);
  background: var(--surface); color: var(--ink-soft); border-radius: var(--radius-sm);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.mido-x:hover { color: var(--ink); border-color: var(--border-strong); }
.mido-x:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.mido-ctx {
  flex: none; margin: 0; padding: 0.45rem 0.85rem; font-size: 0.76rem;
  color: var(--ink-soft); background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.mido-ctx[hidden] { display: none; }

.mido-banner {
  flex: none; margin: 0; padding: 0.6rem 0.85rem; font-size: 0.8rem;
  color: var(--info-fg); background: var(--info-bg); border-bottom: 1px solid var(--border);
}
.mido-banner[hidden] { display: none; }

.mido-log {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 0.9rem 0.85rem; display: flex; flex-direction: column; gap: 0.55rem;
  background: var(--bg);
}
.mido-log:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); }
.mido-log[hidden] { display: none; }

.mido-msg {
  max-width: 85%; padding: 0.5rem 0.7rem; border-radius: var(--radius-md);
  font-size: 0.88rem; line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap;
}
.mido-msg__meta { display: block; font-size: 0.68rem; color: var(--ink-faint); margin-bottom: 0.15rem; }
.mido-msg__body { display: block; }
.mido-msg--visitor { align-self: flex-end; background: var(--accent); color: var(--accent-ink); }
.mido-msg--visitor .mido-msg__meta { color: var(--accent-ink); opacity: 0.8; }
.mido-msg--mido { align-self: flex-start; background: var(--surface); border: 1px solid var(--border); }
.mido-msg--petugas { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border-strong); }
.mido-msg--system { align-self: center; max-width: 92%; text-align: center; font-size: 0.78rem; color: var(--ink-soft); background: transparent; padding: 0.2rem 0.4rem; }

/* ---- Dasar informasi ---- */
.mido-src { margin-top: 0.4rem; border-top: 1px dashed var(--border-strong); padding-top: 0.35rem; }
/* QA10-F05: perbesar target sentuh ringkasan "Dasar informasi" (>=24px) tanpa
   mengubah tipografi. padding vertikal menambah tinggi area yang bisa ditekan. */
.mido-src > summary { cursor: pointer; font-size: 0.76rem; font-weight: 700; color: var(--link); list-style: none; padding: 0.4rem 0; }
.mido-src > summary::-webkit-details-marker { display: none; }
.mido-src > summary::before { content: "\25B8 "; }
.mido-src[open] > summary::before { content: "\25BE "; }
.mido-src ul { list-style: none; margin: 0.35rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.mido-src li { display: flex; flex-wrap: wrap; gap: 0.25rem 0.4rem; align-items: baseline; font-size: 0.76rem; }
.mido-src__kind {
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--surface-3); color: var(--ink-soft); border-radius: var(--radius-xs); padding: 0 0.3rem;
}
.mido-src__name { font-weight: 600; }
.mido-src__meta { color: var(--ink-faint); }

.mido-typing {
  flex: none; margin: 0; padding: 0.3rem 0.85rem 0.5rem; font-size: 0.76rem;
  color: var(--ink-soft); font-style: italic;
}
.mido-typing[hidden] { display: none; }

.mido-cta {
  flex: none; display: flex; flex-wrap: wrap; gap: 0.4rem;
  padding: 0.5rem 0.85rem; border-top: 1px solid var(--border);
}
.mido-cta:empty { display: none; }
.mido-cta[hidden] { display: none; }
.mido-cta__btn {
  font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer;
  padding: 0.4rem 0.75rem; border-radius: var(--radius-sm);
  background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent-strong);
}
.mido-cta__btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.mido-cta__btn:hover { filter: brightness(1.05); }
.mido-cta__btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.mido-closednote { flex-basis: 100%; margin: 0 0 0.2rem; font-size: 0.82rem; color: var(--ink-soft); }
.mido-summary { flex-basis: 100%; margin-top: 0.3rem; font-size: 0.8rem; }
.mido-summary__ttl { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.mido-summary dl { margin: 0; display: grid; gap: 0.2rem; }
.mido-summary dl > div { display: flex; gap: 0.5rem; }
.mido-summary dt { color: var(--ink-faint); min-width: 6.5rem; }
.mido-summary dd { margin: 0; color: var(--ink); }

.mido-composer {
  flex: none; display: flex; gap: 0.5rem; padding: 0.65rem 0.85rem;
  border-top: 1px solid var(--border); background: var(--surface);
}
.mido-composer[hidden] { display: none; }
.mido-composer textarea {
  flex: 1; resize: none; font: inherit; font-size: 0.88rem; min-height: 2.4rem; max-height: 7.5rem;
  padding: 0.5rem 0.6rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink);
}
/* QA10-F04: placeholder default peramban gagal kontras AA di skin gelap portal.
   Pakai token teks sekunder tema (kontras AA terjamin), opacity penuh. */
.mido-composer textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.mido-composer textarea:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); border-color: var(--accent); }
.mido-send {
  flex: none; align-self: flex-end; width: 2.6rem; height: 2.6rem; cursor: pointer;
  border-radius: var(--radius-sm); border: 1px solid var(--accent-strong);
  background: var(--accent); color: var(--accent-ink); font-size: 1rem;
}
.mido-send:disabled { opacity: 0.55; cursor: default; }
.mido-send:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.mido-send--block { width: 100%; height: auto; padding: 0.55rem; font-weight: 700; margin-top: 0.4rem; }

/* ---- identity gate (in-panel) ---- */
.mido-identity { flex: 1; overflow-y: auto; padding: 1rem 0.95rem; }
.mido-identity[hidden] { display: none; }
.mido-identity h2 { font-size: 1rem; margin: 0 0 0.75rem; }
.mido-identity label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); margin: 0.7rem 0 0.25rem; }
.mido-identity input {
  width: 100%; font: inherit; font-size: 0.9rem; padding: 0.5rem 0.6rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink);
}
.mido-identity input:focus-visible { outline: none; box-shadow: var(--focus-ring-inset); border-color: var(--accent); }
.mido-iderr { color: var(--danger-fg); font-size: 0.8rem; margin: 0.5rem 0 0; min-height: 1.1em; }
.mido-note { font-size: 0.72rem; color: var(--ink-faint); margin: 0.6rem 0 0; }

/* ---- mobile: peluncur lebih ringkas (tetap CTA berlabel, target sentuh >=44px) ---- */
@media (max-width: 600px) {
  .mido-launcher {
    max-width: min(16.5rem, calc(100vw - 1.5rem));
    padding: 0.55rem 0.8rem 0.55rem 0.55rem;
    gap: 0.55rem;
  }
  .mido-ava { width: 1.75rem; height: 1.75rem; font-size: 0.85rem; }
  .mido-launcher__title { font-size: 0.78rem; }
  .mido-launcher__sub { font-size: 0.7rem; }
}

/* ---- mobile: full-screen 100dvw/dvh ---- */
@media (max-width: 480px) {
  .mido-panel {
    right: 0; bottom: 0; top: 0; left: 0;
    width: 100vw; width: 100dvw; height: 100vh; height: 100dvh;
    border: 0; border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .mido-msg { max-width: 90%; }
}
html.mido-lock, html.mido-lock body { overflow: hidden; }
@media (min-width: 481px) { html.mido-lock, html.mido-lock body { overflow: auto; } }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .mido-launcher, .mido-panel, .mido-cta__btn { transition: none; }
}

/* Sembunyikan FAB lama bila masih ada di DOM (widget menggantikannya). */
.mido-fab { display: none !important; }