/* ============================================================================
   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}