/* customer.css - the customer Chats application (S1-13). Since C6 (owner ruling
   2026-10-01 "Reuse the Message Hub UI") the page IS the shared Message Hub
   (shared/message-hub.css, loaded first). This file adds only what the customer
   application needs on top of it:

   - a light theme for people whose system asks for one (the Message Hub's own
     palette is the dark theme), as token overrides only;
   - one visible, non-error focus ring on every control, meeting 3:1 against
     the page (the Message Hub's inputs drop their outline; this restores it);
   - the page's own frame: header, sign-in, unavailable and empty states;
   - the compact presentation of what a member may not do: a denied control is
     dimmed in place and carries its reason as its tooltip and accessible
     description, with one short note per group, never a chip per button;
   - the account entries for the OnlyFans website, the action log, and the
     access editor.
   Colour is never the only signal; every state also has words. */

:root {
  --focus-ring: #8fb8ff;
  /* The shared rich-text field's tokens, from the Message Hub's palette. */
  --fl-inset: var(--surface2);
  --fl-border: var(--border);
  --fl-surface2: var(--surface3);
  --fl-blue: var(--accent);
  --fl-blue-soft: var(--accent-soft);
  --fl-blue-strong: var(--accent-strong);
  --text-muted: var(--muted);
  /* The access editor's and website drawer's own names for the same tokens. */
  --panel: var(--surface);
  --line: var(--border);
  --warn-bg: var(--warn-soft);
  --warn-text: var(--warn);
  font-size: 16px;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f6f9; --sidebar: #e9edf2; --surface: #ffffff; --surface2: #eef1f5; --surface3: #e2e7ee; --border: #c9d1dc;
    --text: #141920; --muted: #4a5462; --faint: #5b6675;
    --accent: #2459c6; --accent-strong: #1b4aa8; --accent-soft: #e2ebfb; --rose: #b8365f; --rose-soft: #fbe5ed;
    --ok: #0f7043; --ok-soft: #dcf2e7; --warn: #7a5100; --warn-soft: #fdf0cf; --bad: #b02222; --bad-soft: #fbe3e3;
    --off: #56616f; --off-soft: #e6eaf0; --info: #5b3fc9; --info-soft: #ebe6fc;
    --btn-primary-text: #ffffff;
    --shadow: 0 1px 2px rgba(20, 25, 32, .08), 0 3px 10px rgba(20, 25, 32, .07);
    --shadow-modal: 0 10px 36px rgba(20, 25, 32, .22);
    --focus-ring: #1b4aa8;
  }
  html { color-scheme: light; }
  .msg.out .bubble { border-color: #b9cdf3; }
  .msg .carousel { background: #e2e7ee; }
  .composer .zone.locked { background: #e7effc; }
  .wideBtn.notif, .creator .badge.flags, .notifpanel .ntabs .chip .cbadge { color: #ffffff; }
}

/* ---- focus: visible everywhere, never error-coloured ---- */
body.customer *:focus-visible,
body.customer .mm-rte:focus,
body.customer [contenteditable="true"]:focus {
  outline: 3px solid var(--focus-ring) !important;
  outline-offset: 2px !important;
}
body.customer .mm-rte:focus { box-shadow: none; }

/* ---- the page frame ---- */
.skip-link { position: absolute; left: -10000px; top: 0; }
.skip-link:focus { left: 8px; top: 8px; background: var(--surface); color: var(--text); padding: 8px; z-index: 60; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.contents { display: contents; }
.app-header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 16px; background: var(--sidebar); border-bottom: 1px solid var(--border); flex: none; }
.app-header h1 { font-size: 1.15rem; margin: 0; }
.app-status { flex: 1 1 auto; margin: 0; color: var(--muted); min-height: 1.45em; font-size: .9rem; }
.session-controls { display: flex; gap: 8px; align-items: center; }
.session-controls button.secondary { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; color: var(--text); font-weight: 600; cursor: pointer; }
.main:focus { outline: none; }
.notice-panel { max-width: 40rem; margin: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; }
.notice-panel h2 { margin: 0 0 6px; font-size: 1.15rem; }
.notice-panel p { margin: 6px 0; color: var(--muted); }
.notice-panel .btn { margin-top: 6px; }
a.btn-primary { color: #fff; }
.chats-app { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---- the account list (the Message Hub's creator list) ---- */
.creators h2 { margin: 0; font-size: 1.25rem; letter-spacing: -0.01em; display: inline-flex; align-items: center; gap: 8px; }
.creators .summary { color: var(--muted); font-size: .88rem; }
.creator-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.creator-item .creator { width: 100%; }
.creator .badge.unknown { background: var(--off-soft); color: var(--muted); }
.empty-state { background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; padding: 18px 20px; }
.empty-state h3 { font-size: 1rem; margin: 0 0 4px; }
.empty-state p { margin: 0; color: var(--muted); }
.account-website { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.account-website .btn { font-size: .8rem; padding: 5px 10px; white-space: nowrap; }
.account-website .note { margin: 0; flex-basis: 100%; color: var(--faint); font-size: .76rem; }
.website-offer { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; }
.website-offer p { margin: 0; flex-basis: 100%; font-size: .86rem; }
.website-offer .btn { font-size: .8rem; padding: 5px 10px; }

/* ---- what the Message Hub markup carried inline on the control plane ---- */
.panelhost { position: relative; }
.conv-empty { margin-top: 80px; }
.conv-shell { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.check-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.idtext { min-width: 0; }
.fan-body { gap: 14px; }
.viewer-body { align-items: center; }
.dfoot .push { margin-right: auto; }

/* ---- what a member may not do: compact, in place, in words ---- */
body.customer [data-denied] { opacity: .5; cursor: not-allowed; }
body.customer .btn[aria-disabled="true"] { pointer-events: auto; }
body.customer .chip[data-denied] .cbadge { display: none; }
.denied-note { margin: 0; padding: 6px 14px; font-size: .78rem; color: var(--muted); background: var(--surface); border-bottom: 1px solid var(--border); }
.composer-reason { margin: 4px 12px 0; font-size: .8rem; color: var(--warn); }
.composer .draft-note, .composer .formatting-note { margin: 4px 12px 0; }
.composer .mm-rte-field { margin: 8px 12px 4px; }
.composer #sendBtn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
/* The keyboard reaches a message's quick actions as well as a pointer does. */
.msg:focus-within .hover { display: flex; }

/* ---- the action log: each of this member's actions in its honest state ---- */
.action-panel { flex: none; max-height: 34vh; overflow-y: auto; border-top: 1px solid var(--border); background: var(--surface); padding: 8px 12px 10px; }
.actions-heading { font-size: .86rem; margin: 0 0 6px; color: var(--muted); font-weight: 600; }
.action-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.action-item { border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; display: grid; gap: 4px; font-size: .84rem; background: var(--bg); }
.action-item[data-fence="pending"] { border-color: var(--warn); }
.action-item[data-state="rejected"], .action-item[data-state="access_revoked"] { border-color: var(--bad); }
.action-label { font-weight: 600; }
.action-text { color: var(--muted); overflow-wrap: anywhere; }
.action-status { color: var(--text); }
.action-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.action-controls .btn { font-size: .78rem; padding: 4px 10px; }
.unavailable-reason { margin: 0; color: var(--warn); font-size: .8rem; }

/* ---- C2b: the OnlyFans website drawer (presentation only; the cell enforces) ---- */
.website-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 900; }
.website-scrim[hidden] { display: none; }
.website-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 60vw; min-width: 720px; max-width: 100vw; z-index: 901;
  display: flex; flex-direction: column; background: #0a0f17; color: #e8e9f4; border-left: 1px solid #272c58; }
.website-drawer[hidden] { display: none; }
@media (max-width: 900px) { .website-drawer { width: 100vw; min-width: 0; } }
.website-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #272c58; }
.website-badge { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 8px;
  border-radius: 999px; background: #5e58a8; color: #fff; }
.website-label { flex: 1; margin: 0; font-size: 1rem; }
.website-notice { margin: 0; padding: 8px 14px; font-size: 0.85rem; }
.website-notice[hidden] { display: none; }
.website-body { flex: 1; position: relative; overflow: hidden; background: #000; }
.website-body iframe { border: 0; width: 100%; height: 100%; display: block; }
.website-drawer button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid #3a4170; background: #1b2140; color: #e8e9f4; padding: 6px 12px; }

/* ---- C4a/C6: the access editor ---- */
.access-admin { flex: 1; min-height: 0; overflow-y: auto; background: var(--bg); padding: 16px 20px 28px; display: grid; gap: 12px; align-content: start; }
.access-admin h2 { font-size: 1.2rem; margin: 0; }
.access-admin button { font: inherit; cursor: pointer; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #fff; padding: 6px 12px; font-weight: 600; }
.access-admin button.secondary, .access-admin .account-tab { background: var(--surface2); color: var(--text); border-color: var(--border); }
.access-admin button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.access-admin button.small { font-size: .82rem; padding: 3px 9px; }
.access-admin .account-tab { border-bottom: none; border-radius: 8px 8px 0 0; }
.access-admin .account-tab[aria-selected="true"] { background: var(--surface); border-color: var(--accent); }
.access-admin .muted { color: var(--muted); }
.access-status { margin: 0; color: var(--text); min-height: 1.45em; }
.access-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); }
.access-panel { display: grid; gap: 10px; }
.access-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-width: 32rem; }
.access-member { display: grid; gap: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.access-member h3 { margin: 0; font-size: 1.05rem; }
.access-editor { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; display: grid; gap: 6px; background: var(--surface); }
.access-editor legend { font-weight: 600; padding: 0 4px; }
.access-choice { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.access-choice input[type="checkbox"] { width: 1.05rem; height: 1.05rem; margin: 0; flex: none; }
.access-account { display: grid; gap: 4px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.access-account > .access-choice { font-weight: 600; }
.access-account details > summary { cursor: pointer; color: var(--muted); font-size: .88rem; padding: 2px 0; }
.access-scoped { padding-left: 22px; display: grid; gap: 4px; }
.access-warning { background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: 6px 10px; }
.access-impact, .access-review, .access-plan { border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; background: var(--surface); }
.access-rights { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.access-rights li { display: grid; gap: 1px; }
.access-keys h4 { margin: 6px 0 2px; font-size: .95rem; }
.access-step-up-prompt { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 8px; padding: 8px 10px; display: grid; gap: 6px; }
.access-step-up-prompt p { margin: 0; }
.note-field { display: grid; gap: 4px; margin: 6px 0; }
.note-field textarea, .note-field input, .access-admin input[type="text"], .access-admin input[type="email"] {
  width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit;
}