/* ============================================================================
   Fortune Dream — Staff / Owner panel visual redesign  (20260729r)
   PURE VISUAL LAYER. No markup, IDs, scripts, or behaviour are changed here.
   It only restyles the existing elements and works with all 48 themes
   (every colour comes from the theme variables).
   TO REVERT: remove the <link ... redesign.css> line from staff/index.html
   (or redeploy the pre-redesign bundle). Deleting this file also reverts.
   ============================================================================ */

/* ---------- Foundations ---------- */
.staff-app{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.conversation-list::-webkit-scrollbar,.message-list::-webkit-scrollbar,.details-panel::-webkit-scrollbar,.note-list::-webkit-scrollbar{width:11px;height:11px}
.conversation-list::-webkit-scrollbar-thumb,.message-list::-webkit-scrollbar-thumb,.details-panel::-webkit-scrollbar-thumb,.note-list::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 26%,transparent);border-radius:99px;border:3px solid transparent;background-clip:content-box}
.conversation-list::-webkit-scrollbar-thumb:hover,.message-list::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--muted) 46%,transparent);background-clip:content-box}

/* ---------- Sidebar ---------- */
.sidebar{border-right:1px solid var(--line)}
.sidebar-header{min-height:66px;padding:15px 16px 12px}
.sidebar-header #brandName{font-size:17px;font-weight:750;letter-spacing:-.01em}
.sidebar-header small{font-size:12px;opacity:.82}
.alerts-button,.sidebar-header .icon-button{width:38px;height:38px;border-radius:12px;background:transparent}
.alerts-button:hover,.sidebar-header .icon-button:hover{background:color-mix(in srgb,var(--muted) 13%,transparent)}

/* Toolbar · search · filters */
.toolbar{gap:9px;padding:4px 12px 12px;border-bottom:1px solid var(--line)}
.search-wrap input{border-radius:999px;padding:11px 14px 11px 38px;background:color-mix(in srgb,var(--muted) 9%,var(--panel));border:1px solid transparent}
.search-wrap input:focus{background:var(--panel);border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.search-wrap svg{left:13px}
.filter-row{gap:6px}
.filter-row select,#registeredFilter,#labelFilter{border-radius:10px;padding:9px 10px;font-size:12.5px;background:color-mix(in srgb,var(--muted) 6%,var(--panel));border:1px solid var(--line)}

/* ---------- Conversation list: modern rounded rows ---------- */
.conversation-list{padding:4px 0 8px}
.conversation-card{margin:2px 8px;padding:10px 11px;border-bottom:0;border-radius:14px;background:transparent;grid-template-columns:48px minmax(0,1fr) auto;gap:11px;min-height:64px;transition:background .12s ease}
.conversation-card:hover{background:color-mix(in srgb,var(--muted) 9%,var(--panel))}
.conversation-card.active{background:color-mix(in srgb,var(--primary) 14%,var(--panel))!important;color:var(--text)}
.conversation-card.active::before{display:none!important}
.conversation-card.unread-card{border-left:0!important;background:color-mix(in srgb,var(--primary) 8%,var(--panel))!important}
.conversation-card.unread-card.active{background:color-mix(in srgb,var(--primary) 18%,var(--panel))!important}
.conversation-card.unread-card .conversation-copy strong{font-weight:750}
.avatar{width:46px;height:46px;box-shadow:0 1px 3px rgba(0,0,0,.16)}
.online-dot{box-shadow:0 0 0 2px var(--panel),0 0 6px color-mix(in srgb,#31a24c 60%,transparent)}
.conversation-copy{gap:3px}
.conversation-copy strong{font-size:15px;font-weight:640;letter-spacing:-.006em}
.conversation-copy>span{font-size:13px}
.conversation-side{font-size:11px;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.unread{margin-top:0;min-width:20px;height:20px;font-size:11px;font-weight:700;box-shadow:0 2px 6px color-mix(in srgb,var(--primary) 42%,transparent)}
.label-mini i{font-weight:700;padding:2px 7px}

/* sidebar footer */
.sidebar-footer{padding:10px;gap:8px;border-top:1px solid var(--line)}
.sidebar-footer button{border-radius:11px;font-weight:600;font-size:13px}

/* ---------- Conversation header ---------- */
.conversation-header{min-height:66px;padding:12px 16px;border-bottom:0;box-shadow:0 1px 0 var(--line)}
.header-avatar{width:44px;height:44px;box-shadow:0 1px 3px rgba(0,0,0,.16)}
.header-copy strong{font-size:16px;font-weight:720;letter-spacing:-.01em}
.header-copy span{font-size:12.5px}
.header-actions{gap:7px}
.header-actions .icon-button{width:38px;height:38px;border-radius:12px}
.header-actions .icon-button:hover{background:color-mix(in srgb,var(--muted) 13%,transparent)}
.header-actions #claimButton{border-radius:11px;font-weight:650}
.header-actions select{border-radius:10px}

/* ---------- Pane tabs: segmented control ---------- */
.pane-tabs{padding:9px 14px 7px;gap:5px;border-bottom:1px solid var(--line)}
.pane-tabs button{border-radius:10px;padding:8px 15px;font-size:13.5px;font-weight:600;color:var(--muted)}
.pane-tabs button:hover{background:color-mix(in srgb,var(--muted) 9%,transparent)}
.pane-tabs button.active{border-bottom:0!important;background:color-mix(in srgb,var(--primary) 15%,var(--panel));color:var(--primary);font-weight:700}

/* ---------- Messages ---------- */
.message-list{padding:16px 18px 10px}
.bubble{padding:10px 14px;box-shadow:0 1px 2px rgba(0,0,0,.06);max-width:min(70%,660px)}
.message-meta{font-size:10.5px;opacity:.9}
.reaction-chip{border:1px solid var(--line);box-shadow:0 1px 3px rgba(0,0,0,.12)}
.typing-dots{border-radius:999px}
.scroll-latest{box-shadow:0 6px 18px color-mix(in srgb,var(--primary) 45%,rgba(0,0,0,.28))}

/* ---------- Composer: elevated dock ---------- */
.composer{padding:10px 12px max(10px,env(safe-area-inset-bottom));gap:6px;border-top:0;box-shadow:0 -1px 0 var(--line),0 -10px 24px rgba(0,0,0,.045)}
.composer-button{width:40px;height:40px;border-radius:13px;background:transparent;color:var(--primary)}
.composer-button:hover{background:color-mix(in srgb,var(--primary) 13%,var(--panel))}
.composer textarea{border:1px solid var(--line);background:color-mix(in srgb,var(--muted) 7%,var(--panel));padding:11px 16px}
.composer textarea:focus{border-color:var(--primary);background:var(--panel);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%,transparent)}
.send-button{width:42px;height:42px;box-shadow:0 3px 10px color-mix(in srgb,var(--primary) 42%,transparent)}
.send-button:hover{filter:brightness(1.06)}
.pending-tray{border-top:0;box-shadow:0 -1px 0 var(--line)}

/* ---------- Details panel ---------- */
.details-panel>header{padding:14px 16px}
.details-panel h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.details-panel section{padding:14px 16px}
.details-panel section>button{border-radius:11px;font-weight:600}
.assigned-label{border-radius:10px}

/* ---------- Global control language ---------- */
.icon-button svg{width:21px;height:21px}
.primary-button{border-radius:11px;box-shadow:0 3px 10px color-mix(in srgb,var(--primary) 34%,transparent)}
.empty-state{font-size:14px;font-weight:500}

/* ---------- Login screen ---------- */
.login-card{border-radius:20px;box-shadow:0 22px 60px rgba(0,0,0,.18)}
.login-card h1{font-size:26px;font-weight:750;letter-spacing:-.02em}
.login-card input{border-radius:12px}

/* ---------- Dialogs ---------- */
dialog{border-radius:18px}
dialog>header{padding:14px 16px}
dialog>header strong{font-size:15px;font-weight:700}


/* A person's name in the cashout screens is a link to their chat. Styled as
   text, not a button: it sits inline in a sentence of amounts and statuses,
   and a button chrome there would read as an action to perform. */
.cco-who-link{
  background:none;border:0;padding:0;margin:0;font:inherit;font-weight:700;
  color:var(--accent,#0084ff);cursor:pointer;text-decoration:underline;
  text-underline-offset:2px;text-decoration-thickness:1px;
}
.cco-who-link:hover,.cco-who-link:focus-visible{text-decoration-thickness:2px}


/* ---------- Merge chooser (2026-08-22 redesign) ----------------------------
   Rebuilt after seeing it on a real screen. Three faults were visible at once:
   `dialog input{width:100%}` in styles.css STRETCHED each native radio into a
   full-width blue bar; `.sheet-head` is styled nowhere, so the title sat flush
   against the dialog edge; and the two classes it carried (`sheet`,
   `dismissible-sheet`) match no rule and no binding — the real one is
   `dismissible`. Everything here is scoped and self-contained so a global
   dialog rule cannot reach in and reshape it again. */
/* A column so the BODY is the only thing that scrolls. Without this the dialog
   grew past the viewport on a laptop screen and pushed Cancel/Merge off the
   bottom entirely — seen on a 577px-tall window, where the whole point of the
   screen (the two buttons) was unreachable. */
dialog.merge-choices-dialog{width:min(580px,calc(100vw - 20px));padding:0;overflow:hidden;
  display:flex;flex-direction:column;max-height:min(88dvh,840px)}
.merge-choices-dialog .mc-head,
.merge-choices-dialog .mc-facts,
.merge-choices-dialog .mc-actions{flex:0 0 auto}
.mc-head{position:relative;display:grid;gap:7px;padding:20px 56px 16px 22px;border-bottom:1px solid var(--line)}
.mc-head h2{margin:0;font-size:18px;font-weight:750;letter-spacing:-.015em;line-height:1.25}
.mc-sub{margin:0;font-size:13px;line-height:1.55;color:var(--muted)}
.mc-sub b{color:var(--text);font-weight:700}
.mc-x{position:absolute;top:13px;right:13px;display:grid;place-items:center;width:34px;height:34px;
  min-height:34px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--muted);font-size:20px;line-height:1}
.mc-x:hover{background:color-mix(in srgb,var(--muted) 14%,transparent)}
.mc-x:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent)}

.mc-body{display:grid;gap:18px;padding:16px 22px 18px;overflow:auto;flex:1 1 auto;min-height:0}
.mc-game{display:grid;gap:9px}
.mc-game-head{display:flex;align-items:center;gap:9px}
.mc-step{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:color-mix(in srgb,var(--primary) 15%,var(--panel));color:var(--primary);font-size:11.5px;font-weight:750}
.mc-game-name{font-size:13.5px;font-weight:750;letter-spacing:.03em}
.mc-game-hint{margin-left:auto;font-size:11.5px;color:var(--muted)}

/* The whole card is the target — a beginner should not have to hit a 20px dot. */
.mc-opt{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:13px;
  padding:13px 15px;margin:0;border:1.5px solid var(--line);border-radius:14px;background:var(--panel);
  cursor:pointer;transition:border-color .13s ease,background .13s ease}
.mc-opt+.mc-opt{margin-top:8px}
.mc-opt:hover{background:color-mix(in srgb,var(--muted) 7%,var(--panel))}
.mc-opt.is-picked{border-color:var(--primary);background:color-mix(in srgb,var(--primary) 9%,var(--panel))}
/* !important is deliberate: styles.css sets `dialog input{width:100%;padding:11px}`
   for text fields, which is what flattened the radio in the first place. */
.mc-opt input[type=radio]{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-items:center;
  width:20px!important;height:20px;min-height:0;margin:0;padding:0!important;border-radius:50%;background:transparent;
  border:2px solid color-mix(in srgb,var(--muted) 55%,transparent);cursor:pointer}
.mc-opt input[type=radio]::after{content:'';width:10px;height:10px;border-radius:50%;background:var(--primary);
  transform:scale(0);transition:transform .14s cubic-bezier(.34,1.56,.64,1)}
.mc-opt input[type=radio]:checked{border-color:var(--primary)}
.mc-opt input[type=radio]:checked::after{transform:scale(1)}
.mc-opt input[type=radio]:focus-visible{outline:none;box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 28%,transparent)}
@media (prefers-reduced-motion:reduce){.mc-opt,.mc-opt input[type=radio]::after{transition:none}}

.mc-who{display:grid;gap:3px;min-width:0}
.mc-user{font-size:14.5px;font-weight:700;overflow-wrap:anywhere;line-height:1.3}
/* Identity and money on one line, provenance underneath. They were one wrapping
   flex line, and a long pair ("balance unknown", "never checked") pushed the
   last item down WITH its separator, leaving an orphan "·" starting a line.
   Splitting on meaning fixes it and reads better: who and how much first, when
   we last looked second. */
.mc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.mc-meta>*+*::before{content:'·';margin-right:7px;opacity:.55}
.mc-when{font-size:11px;color:var(--muted);opacity:.75}
.mc-money{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.mc-money.is-zero{color:var(--muted);font-weight:600}

.mc-flag{flex:none;padding:4px 10px;border-radius:999px;font-size:10.5px;font-weight:750;
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
  background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--muted)}
/* The green is nudged toward the theme's OWN text colour, so it darkens on a
   light ground and lightens on a dark one with no theme selector at all.
   The first attempt used `[data-theme="dark"]`, which matches NOTHING in this
   panel: dark is gated on :root[data-style-theme=...][data-color-mode=...] plus
   a prefers-color-scheme block for "system". With 48 style themes, deriving the
   colour from the tokens is the only version that cannot go stale. */
.mc-opt.is-picked .mc-flag{background:color-mix(in srgb,#16a34a 20%,transparent);
  color:color-mix(in srgb,#16a34a 76%,var(--text))}

/* The three things a beginner needs to know before pressing Merge, stated as
   facts rather than buried in a paragraph.
   These sit INSIDE the scrolling body on purpose. Pinned above the buttons they
   held ~130px hostage, and on a 577px-tall laptop window that left the choices
   themselves — the entire point of the dialog — in a 170px slot showing one and
   a half cards. Header and buttons pin; everything else shares one scroll, so
   the decision always gets the room first. Full-bleed via negative margins. */
.mc-facts{display:grid;gap:9px;margin:4px -22px -18px;padding:15px 22px 18px;list-style:none;
  border-top:1px solid var(--line);background:color-mix(in srgb,var(--muted) 5%,var(--panel));
  font-size:12.5px;line-height:1.5;color:var(--muted)}
.mc-facts li{display:grid;grid-template-columns:17px minmax(0,1fr);gap:9px;align-items:start}
.mc-facts b{color:var(--text);font-weight:700}
.mc-mark{font-size:13px;font-weight:750;line-height:1.35;text-align:center;color:var(--muted)}

.mc-actions{display:flex;gap:10px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--line)}
.mc-actions button{min-height:42px;padding:0 20px;border-radius:12px;font-size:14px;font-weight:700}
.mc-go{background:var(--primary);border-color:var(--primary);color:#fff}
.mc-go:hover{background:color-mix(in srgb,var(--primary) 88%,#000)}
.mc-actions button:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 30%,transparent)}

@media (max-width:520px){
  .mc-head{padding:17px 52px 14px 17px}
  .mc-body,.mc-actions{padding-left:17px;padding-right:17px}
  .mc-facts{margin-left:-17px;margin-right:-17px;padding-left:17px;padding-right:17px}
  .mc-opt{grid-template-columns:20px minmax(0,1fr);row-gap:8px}
  .mc-flag{grid-column:2;justify-self:start}
  .mc-actions{flex-direction:column-reverse}
  .mc-actions button{width:100%}
}