/* Staff Chat Dashboard - MHN v4.1 */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800&display=swap');

:root {
    --sidebar-w: 225px;
    --detail-w: 290px;
    --accent: #1e88e5;
    --accent-light: #42a5f5;
    --accent-dark: #0d47a1;
    --accent-glow: rgba(30,136,229,0.3);
    --gradient: linear-gradient(135deg, #1e88e5 0%, #0d47a1 100%);
    --success: #34d399;
    --danger: #f87171;
    --warn: #fbbf24;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-xl: 24px;
}

/* === DARK THEME === */
[data-theme="dark"] {
    --bg-app: linear-gradient(135deg, #0a1628 0%, #0d1f3c 40%, #0a1a30 100%);
    --bg-glass: rgba(14,30,60,0.65);
    --bg-glass-strong: rgba(12,25,55,0.9);
    --bg-glass-subtle: rgba(20,40,75,0.45);
    --bg-sidebar: rgba(8,18,40,0.85);
    --bg-sidebar-hover: rgba(30,80,160,0.2);
    --bg-sidebar-active: rgba(30,136,229,0.2);
    --bg-chat: rgba(10,20,40,0.5);
    --bg-chat-header: rgba(10,22,48,0.9);
    --bg-input: rgba(18,35,65,0.6);
    --bg-msg-customer: rgba(20,40,75,0.7);
    --bg-msg-ai: rgba(12,50,35,0.55);
    --bg-card: rgba(16,32,60,0.6);
    --bg-avatar: rgba(100,60,180,0.35);
    --text-primary: #e8edf5;
    --text-secondary: #8faac8;
    --text-muted: #5a7a9a;
    --text-on-accent: #fff;
    --border: rgba(30,136,229,0.15);
    --border-glow: rgba(30,136,229,0.3);
    --scrollbar-thumb: rgba(30,136,229,0.3);
    --shadow-card: 0 8px 32px rgba(0,0,0,0.4);
    --login-bg: linear-gradient(135deg, #0d1f3c 0%, #0a1628 50%, #0d2240 100%);
}

/* === LIGHT THEME === */
[data-theme="light"] {
    --bg-app: linear-gradient(135deg, #e3eef8 0%, #f0f5fa 40%, #dce8f4 100%);
    --bg-glass: rgba(255,255,255,0.75);
    --bg-glass-strong: rgba(255,255,255,0.92);
    --bg-glass-subtle: rgba(230,240,252,0.6);
    --bg-sidebar: rgba(248,251,255,0.8);
    --bg-sidebar-hover: rgba(30,136,229,0.08);
    --bg-sidebar-active: rgba(30,136,229,0.14);
    --bg-chat: rgba(255,255,255,0.5);
    --bg-chat-header: rgba(248,251,255,0.9);
    --bg-input: rgba(240,246,255,0.85);
    --bg-msg-customer: rgba(225,238,252,0.9);
    --bg-msg-ai: rgba(215,248,230,0.85);
    --bg-card: rgba(235,243,255,0.8);
    --bg-avatar: rgba(130,90,200,0.2);
    --text-primary: #0a1628;
    --text-secondary: #2c4a6e;
    --text-muted: #5a7a9a;
    --text-on-accent: #fff;
    --border: rgba(30,136,229,0.15);
    --border-glow: rgba(30,136,229,0.25);
    --scrollbar-thumb: rgba(30,136,229,0.25);
    --shadow-card: 0 8px 32px rgba(13,71,161,0.1);
    --login-bg: linear-gradient(135deg, #e3eef8 0%, #cddff0 50%, #e8f0f8 100%);
}

/* Light: force dark text */
[data-theme="light"] .mhai-staff-name,
[data-theme="light"] .mhai-chat-preview-name,
[data-theme="light"] .mhai-chat-header-name,
[data-theme="light"] .mhai-detail-name,
[data-theme="light"] .mhai-detail-row-value,
[data-theme="light"] .mhai-no-chat h2 { color: #0a1628 !important; }

[data-theme="light"] .mhai-chat-preview-time,
[data-theme="light"] .mhai-chat-header-meta,
[data-theme="light"] .mhai-detail-row-label,
[data-theme="light"] .mhai-msg-meta,
[data-theme="light"] .mhai-chat-claimed-by,
[data-theme="light"] .mhai-status-select,
[data-theme="light"] .mhai-queue-label,
[data-theme="light"] .mhai-no-chat p,
[data-theme="light"] .mhai-detail-section h4,
[data-theme="light"] .mhai-online-bar,
[data-theme="light"] .mhai-detail-empty,
[data-theme="light"] .mhai-detail-empty p,
[data-theme="light"] .mhai-empty-queue,
[data-theme="light"] .mhai-empty-queue p,
[data-theme="light"] .mhai-empty-queue-sm,
[data-theme="light"] .mhai-empty-queue-sm p,
[data-theme="light"] .mhai-login-forgot { color: #2c4a6e !important; }

[data-theme="light"] .mhai-bubble-user { background: rgba(225,238,252,0.95) !important; color: #0a1628 !important; }
[data-theme="light"] .mhai-bubble-assistant { background: rgba(215,248,230,0.9) !important; color: #0a1628 !important; }
[data-theme="light"] .mhai-chat-input-wrap textarea { color: #0a1628 !important; }
[data-theme="light"] .mhai-status-select option { background: #fff; color: #0a1628; }
[data-theme="light"] .mhai-detail-section h4 { color: #0d47a1 !important; }
[data-theme="light"] .mhai-detail-section { background:rgba(200,220,245,0.7) !important; border-color:rgba(30,136,229,0.15) !important; }

/* Light theme glass cards */
[data-theme="light"] .mhai-chat-item { background:rgba(30,136,229,0.08) !important; border-color:rgba(30,136,229,0.12) !important; }
[data-theme="light"] .mhai-chat-item:hover { background:rgba(30,136,229,0.15) !important; }
[data-theme="light"] .mhai-chat-item.active { background:rgba(30,136,229,0.22) !important; border-color:rgba(30,136,229,0.3) !important; }
[data-theme="light"] .mhai-staff-card { background:rgba(255,255,255,0.6); border-color:rgba(30,136,229,0.15); }
[data-theme="light"] .mhai-topbar { background:rgba(240,247,255,0.95) !important; border-bottom-color:rgba(30,136,229,0.15) !important; }
[data-theme="light"] .mhai-topbar-name { color:#0a1628 !important; }
[data-theme="light"] .mhai-topbar-select { color:#2c4a6e !important; }
[data-theme="light"] .mhai-topbar-select option { background:#fff; color:#0a1628; }
[data-theme="light"] .mhai-topbar-btn { background:rgba(255,255,255,0.6) !important; color:#2c4a6e !important; border-color:rgba(30,136,229,0.15) !important; }
[data-theme="light"] .mhai-clock-date { color:#0a1628 !important; }
[data-theme="light"] .mhai-clock-time { color:#2c4a6e !important; }
[data-theme="light"] .mhai-header-btn { background:rgba(255,255,255,0.5) !important; color:#0a1628 !important; border-color:rgba(30,136,229,0.2) !important; }
[data-theme="light"] .mhai-header-btn:hover { background:rgba(30,136,229,0.1) !important; }
[data-theme="light"] .mhai-header-btn.danger { color:var(--danger) !important; border-color:rgba(248,113,113,0.3) !important; }
[data-theme="light"] .mhai-header-btn.danger:hover { background:rgba(239,68,68,0.1) !important; }
[data-theme="light"] .mhai-detail-row-label { color:#2c4a6e !important; }
[data-theme="light"] .mhai-detail-row-value { color:#0a1628 !important; }
[data-theme="light"] .mhai-edit-input { background:rgba(255,255,255,0.9) !important; color:#0a1628 !important; border-color:rgba(30,136,229,0.2) !important; }
[data-theme="light"] .mhai-stat-box { background:rgba(180,210,245,0.5) !important; border-color:rgba(30,136,229,0.15) !important; }
[data-theme="light"] .mhai-stat-num { color:#0a1628 !important; }
[data-theme="light"] .mhai-stat-label { color:#2c4a6e !important; }
[data-theme="light"] .mhai-stat-total { color:#2c4a6e !important; }
[data-theme="light"] .mhai-tab.active { color:#0d47a1 !important; border-bottom-color:#0d47a1 !important; }
[data-theme="light"] .mhai-tab { color:#5a7a9a !important; }
[data-theme="light"] .mhai-tabs-panel { border-color:rgba(30,136,229,0.2) !important; }

/* Base */
#mhai-staff-app { font-family:'Nunito',sans-serif !important; width:100%; height:100vh; display:flex; flex-direction:column; background:var(--bg-app); color:var(--text-primary); overflow:hidden; position:fixed; top:0; left:0; z-index:99999; }
#mhai-staff-app *,#mhai-staff-app *::before,#mhai-staff-app *::after { box-sizing:border-box; }
#mhai-staff-app h1,#mhai-staff-app h2,#mhai-staff-app h3,#mhai-staff-app h4,#mhai-staff-app h5,#mhai-staff-app p { margin:0; }

/* Google Places autocomplete dropdown - must be above staff app */
.pac-container { z-index:999999 !important; max-width:calc(100vw - 20px) !important; font-size:12px !important; }

/* ===== GLOBAL TOP BAR ===== */
.mhai-topbar { display:flex; align-items:center; padding:0 20px; height:64px; min-height:64px; background:var(--bg-chat-header); backdrop-filter:blur(30px); border-bottom:1px solid var(--border-glow); flex-shrink:0; gap:16px; }
.mhai-topbar-left { display:flex; align-items:center; gap:12px; }
.mhai-topbar-initials { width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; color:#fff; flex-shrink:0; box-shadow:0 3px 10px rgba(124,58,237,0.3); }
.mhai-topbar-name { font-size:14px; font-weight:800; color:var(--text-primary); }
.mhai-topbar-status { display:flex; align-items:center; gap:6px; }
.mhai-topbar-dot { width:9px; height:9px; border-radius:50%; }
.mhai-topbar-dot.online { background:#34d399; box-shadow:0 0 10px rgba(52,211,153,0.6); }
.mhai-topbar-dot.busy { background:var(--warn); box-shadow:0 0 8px rgba(251,191,36,0.5); }
.mhai-topbar-dot.offline { background:var(--text-muted); }
.mhai-topbar-select { background:transparent; border:none; color:var(--text-secondary); font-size:12px; font-family:inherit; font-weight:600; cursor:pointer; outline:none; }
.mhai-topbar-select option { background:#0c1a30; color:#e8edf5; }
.mhai-topbar-spacer { flex:1; }
.mhai-topbar-actions { display:flex; gap:8px; }
.mhai-topbar-btn { background:var(--bg-glass); backdrop-filter:blur(8px); border:1px solid var(--border); color:var(--text-secondary); height:36px; padding:0 14px; border-radius:10px; cursor:pointer; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:6px; transition:all 0.2s; font-family:inherit; }
.mhai-topbar-btn:hover { background:var(--bg-sidebar-hover); color:var(--text-primary); border-color:var(--border-glow); }

/* Clock */
.mhai-topbar-clock { text-align:center; flex-shrink:0; }
.mhai-clock-date { display:block; font-size:13px; font-weight:700; color:var(--text-primary); }
.mhai-clock-time { display:block; font-size:11px; font-weight:600; color:var(--text-secondary); margin-top:1px !important; }

/* Topbar Stats */
.mhai-topbar-stats { display:flex; gap:12px; align-items:center; flex:1; justify-content:center; }
.mhai-tb-stat { display:flex; flex-direction:column; align-items:center; gap:1px; }
.mhai-tb-stat-num { font-size:14px; font-weight:800; color:var(--text-primary); line-height:1.2; }
.mhai-tb-stat-lbl { font-size:8px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; }
[data-theme="light"] .mhai-tb-stat-num { color:#0a1628 !important; }
[data-theme="light"] .mhai-tb-stat-lbl { color:#2c4a6e !important; }

/* Chat History in sidebar */
.mhai-history-divider { padding:10px 14px; font-size:10px; font-weight:800; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; cursor:pointer; border-top:1px solid var(--border); margin-top:8px; display:flex; align-items:center; gap:6px; transition:color 0.2s; }
.mhai-history-divider:hover { color:var(--text-secondary); }
.mhai-history-arrow { font-size:8px; }
.mhai-history-count { background:var(--bg-glass-subtle); border:1px solid var(--border); border-radius:8px; padding:1px 6px; font-size:9px; margin-left:auto; }
.mhai-chat-ended { opacity:0.6; }
.mhai-chat-ended:hover { opacity:0.85; }
.mhai-chat-ai { background:rgba(171,71,188,0.1) !important; border-color:rgba(171,71,188,0.25) !important; }
.mhai-chat-ai:hover { background:rgba(171,71,188,0.18) !important; }
.mhai-ai-label { border-top:1px solid rgba(171,71,188,0.3); }
.mhai-ai-badge { background:rgba(171,71,188,0.3) !important; }
.mhai-empty-queue-sm { text-align:center; color:var(--text-primary) !important; padding:12px 10px; font-size:11px; }
.mhai-archive-all-btn { margin-left:auto; font-size:9px; font-weight:700; color:var(--accent-light); cursor:pointer; text-transform:none; letter-spacing:0; padding:2px 8px; border-radius:6px; border:1px solid var(--border); transition:all 0.2s; }
.mhai-archive-all-btn:hover { background:rgba(30,136,229,0.15); border-color:var(--accent-light); }

/* Body - 3 column layout below top bar */
.mhai-body { display:flex; flex:1; overflow:hidden; }

/* ===== LOGIN (35% bigger box, centered) ===== */
.mhai-login-screen { width:100%; height:100vh; display:flex; align-items:center; justify-content:center; background:var(--login-bg); position:relative; overflow:hidden; }
.mhai-login-screen::before { content:''; position:absolute; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(30,136,229,0.15) 0%,transparent 70%); top:-150px; right:-150px; animation:floatB 8s ease-in-out infinite; }
.mhai-login-screen::after { content:''; position:absolute; width:350px; height:350px; border-radius:50%; background:radial-gradient(circle,rgba(13,71,161,0.12) 0%,transparent 70%); bottom:-100px; left:-100px; animation:floatB 10s ease-in-out infinite reverse; }
@keyframes floatB { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(20px,-30px) scale(1.1)} }

.mhai-login-box { background:var(--bg-glass-strong); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); border:1px solid var(--border-glow); border-radius:var(--radius-xl); padding:44px 60px; width:550px; max-width:92vw; box-shadow:var(--shadow-card),0 0 60px rgba(30,136,229,0.08); position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.mhai-login-logo { width:70px; height:70px; margin:0 0 10px 0 !important; border-radius:18px; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-size:30px; box-shadow:0 8px 24px var(--accent-glow); }
.mhai-login-box h1 { font-size:20px; font-weight:800; color:#ffffff !important; margin-bottom:2px !important; text-align:center; }
.mhai-login-subtitle { color:#8faac8 !important; font-size:12px; margin-bottom:24px !important; font-weight:500; text-align:center; }
.mhai-login-field { margin-bottom:12px !important; width:45%; text-align:left; }
.mhai-login-field label { display:block; font-size:10px; font-weight:700; color:#8faac8 !important; margin-bottom:4px !important; text-transform:uppercase; letter-spacing:0.8px; }
.mhai-login-field input { width:100%; padding:10px 12px !important; background:rgba(20,40,75,0.5) !important; border:1.5px solid rgba(30,136,229,0.25) !important; border-radius:var(--radius-sm); color:#e8edf5 !important; font-size:13px; font-family:inherit; font-weight:600; outline:none; transition:all 0.25s; }
.mhai-login-field input:focus { border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-glow); }
.mhai-login-field input::placeholder { color:#5a7a9a !important; font-weight:500; }
.mhai-login-btn { width:45%; padding:10px !important; background:var(--gradient); color:#fff; border:none; border-radius:var(--radius-sm); font-size:13px; font-weight:700; cursor:pointer; transition:all 0.2s; font-family:inherit; box-shadow:0 6px 20px var(--accent-glow); margin-top:18px !important; }
.mhai-login-btn:hover { transform:translateY(-2px); box-shadow:0 10px 30px var(--accent-glow); }
.mhai-login-error { color:var(--danger); text-align:center; font-size:12px; font-weight:600; margin-top:8px !important; min-height:16px; }
.mhai-login-forgot { color:#5a7a9a; text-align:center; font-size:11px; font-weight:500; margin-top:10px !important; }

/* Captcha - same width as fields */
.mhai-captcha-row { display:flex; align-items:center; gap:10px; width:45%; margin-top:2px !important; }
.mhai-captcha-question { font-size:13px; font-weight:700; color:#8faac8; white-space:nowrap; flex-shrink:0; }
.mhai-captcha-input { flex:1; min-width:0; padding:10px 12px !important; background:rgba(20,40,75,0.5) !important; border:1.5px solid rgba(30,136,229,0.25) !important; border-radius:var(--radius-sm); color:#e8edf5 !important; font-size:13px; font-family:inherit; font-weight:600; outline:none; text-align:center; }
.mhai-captcha-input:focus { border-color:var(--accent) !important; box-shadow:0 0 0 3px var(--accent-glow); }

/* ===== SIDEBAR ===== */
.mhai-sidebar { width:var(--sidebar-w); min-width:var(--sidebar-w); background:var(--bg-sidebar); backdrop-filter:blur(30px); display:flex; flex-direction:column; border-right:1px solid var(--border); height:100%; }
.mhai-queue-label { font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:1.5px; color:var(--text-muted); padding:14px 16px 8px; display:flex; align-items:center; gap:4px; }
.mhai-queue-count { display:inline-block; background:var(--gradient); color:#fff; border-radius:10px; padding:1px 8px; font-size:10px; margin-left:4px; font-weight:700; }

/* ===== CHAT LIST - glassmorphic cards ===== */
.mhai-chat-list { flex:1; overflow-y:auto; padding:8px 10px; }
.mhai-chat-list::-webkit-scrollbar { width:4px; }
.mhai-chat-list::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:2px; }

.mhai-chat-item { display:flex !important; align-items:center !important; gap:10px !important; padding:10px 10px !important; border-radius:10px !important; cursor:pointer; transition:all 0.25s; margin-bottom:8px !important; border:1px solid var(--border) !important; background:rgba(30,100,180,0.12) !important; backdrop-filter:blur(8px); }
.mhai-chat-item:hover { background:rgba(30,136,229,0.2) !important; border-color:var(--border-glow) !important; }
.mhai-chat-item.active { background:rgba(30,136,229,0.3) !important; border-color:rgba(30,136,229,0.5) !important; box-shadow:0 2px 16px rgba(30,136,229,0.2) !important; }

.mhai-chat-avatar { width:28px; height:28px; border-radius:8px; background:var(--gradient); border:none; display:flex; align-items:center; justify-content:center; font-size:14px; flex-shrink:0; position:relative; box-shadow:0 2px 6px var(--accent-glow); }
.mhai-chat-unread-badge { position:absolute; top:-3px; right:-3px; width:14px; height:14px; background:var(--danger); color:#fff; border-radius:50%; font-size:7px; font-weight:800; display:flex; align-items:center; justify-content:center; border:2px solid rgba(8,18,40,0.8); }
.mhai-chat-preview { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; }
.mhai-chat-preview-name { font-size:11px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:4px; }
.mhai-customer-presence { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.mhai-customer-presence.online { background:#4caf50; box-shadow:0 0 4px rgba(76,175,80,0.6); }
.mhai-customer-presence.offline { background:#ef5350; box-shadow:0 0 4px rgba(239,83,80,0.6); }
.mhai-unlock-addr-btn { margin-top:6px !important; font-size:10px !important; padding:4px 10px !important; width:100%; }
.mhai-unlock-addr-btn.mhai-unlocked { background:var(--success) !important; cursor:default; opacity:0.7; }
.mhai-chat-preview-time { font-size:9px; color:var(--text-secondary); margin-top:1px !important; font-weight:500; }
.mhai-chat-claimed-by { font-size:8px; color:var(--accent-light); font-weight:700; margin-top:1px !important; }
.mhai-empty-queue { text-align:center; color:var(--text-primary) !important; padding:40px 20px; font-size:13px; font-weight:600; }
.mhai-empty-queue-icon { font-size:44px; margin-bottom:12px; }
.mhai-online-bar { display:flex; align-items:center; gap:8px; padding:12px 16px; border-top:1px solid var(--border); font-size:11px; color:var(--text-muted); font-weight:600; }
.mhai-online-avatars { display:flex; }
.mhai-online-dot { width:22px; height:22px; border-radius:7px; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-size:8px; font-weight:800; color:#fff; margin-left:-4px; border:2px solid var(--bg-sidebar); }
.mhai-online-dot:first-child { margin-left:0; }

/* Version link */
.mhai-version-link { margin-left:auto; font-size:10px; font-weight:700; color:var(--accent-light); cursor:pointer; opacity:0.7; transition:opacity 0.2s; }
.mhai-version-link:hover { opacity:1; text-decoration:underline; }

/* Changelog modal */
.mhai-changelog-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:99999; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.mhai-changelog-modal { background:var(--bg-sidebar); border:1px solid var(--border-glow); border-radius:16px; width:480px; max-width:90vw; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
.mhai-changelog-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.mhai-changelog-header h2 { margin:0 !important; font-size:16px; font-weight:800; color:var(--text-primary); }
.mhai-changelog-close { background:none; border:none; color:var(--text-muted); font-size:22px; cursor:pointer; padding:0 4px; line-height:1; }
.mhai-changelog-close:hover { color:var(--text-primary); }
.mhai-changelog-body { overflow-y:auto; padding:16px 20px; flex:1; }
.mhai-changelog-version { margin-bottom:16px; }
.mhai-changelog-ver-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:6px; }
.mhai-changelog-ver-header strong { font-size:14px; color:var(--accent); }
.mhai-changelog-ver-header span { font-size:11px; color:var(--text-muted); }
.mhai-changelog-version ul { margin:0 !important; padding-left:18px !important; }
.mhai-changelog-version li { font-size:12px; color:var(--text-secondary); line-height:1.6; font-weight:500; }
[data-theme="light"] .mhai-changelog-modal { background:#fff; }
[data-theme="light"] .mhai-changelog-version li { color:#2c4a6e !important; }

/* Shared Notepad Modal */
.mhai-notepad-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:99999; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); }
.mhai-notepad-modal { background:var(--bg-sidebar); border:1px solid var(--border-glow); border-radius:16px; width:560px; max-width:90vw; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.4); }
.mhai-notepad-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); }
.mhai-notepad-header h2 { margin:0 !important; font-size:16px; font-weight:800; color:var(--text-primary) !important; }
.mhai-notepad-close { background:none; border:none; color:var(--text-muted); font-size:22px; cursor:pointer; padding:0 4px; line-height:1; }
.mhai-notepad-close:hover { color:var(--text-primary); }
.mhai-notepad-notes { flex:1; overflow-y:auto; padding:16px 20px; display:flex; flex-direction:column; gap:10px; min-height:200px; max-height:50vh; }
.mhai-notepad-notes::-webkit-scrollbar { width:4px; }
.mhai-notepad-notes::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:2px; }
.mhai-notepad-empty { text-align:center; color:var(--text-muted); font-size:13px; font-weight:500; padding:40px 0; }
.mhai-notepad-loading { text-align:center; color:var(--text-muted); font-size:13px; padding:40px 0; }
.mhai-note-item { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:12px 14px; position:relative; overflow:hidden; }
.mhai-note-new { animation:mhai-note-fadein 0.3s ease; }
@keyframes mhai-note-fadein { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
.mhai-note-text { font-size:13px; font-weight:500; color:var(--text-primary) !important; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.mhai-note-meta { display:flex; align-items:center; gap:10px; margin-top:8px; padding-top:8px; border-top:1px solid rgba(255,255,255,0.06); }
.mhai-note-author { font-size:11px; font-weight:700; color:var(--accent); }
.mhai-note-date { font-size:10px; color:var(--text-muted); font-weight:500; }
.mhai-note-body { display:flex; align-items:flex-start; gap:10px; }
.mhai-note-checkbox { width:16px; height:16px; margin-top:2px; flex-shrink:0; cursor:pointer; accent-color:#dc2626; }
.mhai-note-delete { background:none; border:none; color:var(--text-muted); font-size:16px; cursor:pointer; padding:0 2px; margin-left:auto; line-height:1; opacity:0.4; transition:all 0.2s; }
.mhai-note-delete:hover { color:#ef4444; opacity:1; }
.mhai-note-fixed-overlay { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-15deg); font-size:36px; font-weight:900; font-family:'Nunito',sans-serif; color:rgba(220,38,38,0.25); text-transform:uppercase; letter-spacing:6px; pointer-events:none; z-index:1; white-space:nowrap; }
.mhai-note-is-fixed { opacity:0.6; }
.mhai-note-is-fixed .mhai-note-text { text-decoration:line-through; text-decoration-color:rgba(220,38,38,0.3); }
.mhai-note-fixed-by { font-size:10px; font-weight:600; color:#dc2626; }
.mhai-notepad-footer { display:flex; flex-direction:column; gap:10px; padding:12px 20px; border-top:1px solid var(--border); }
.mhai-notepad-footer-row { display:flex; align-items:flex-end; gap:10px; }
.mhai-notepad-fix-row { display:flex; justify-content:center; }
.mhai-notepad-fix-btn { background:none; border:1px solid #dc2626; color:#dc2626; padding:10px 20px; font-family:'Nunito',sans-serif; font-size:12px; font-weight:700; border-radius:8px; cursor:pointer; transition:all 0.2s; }
.mhai-notepad-fix-btn:hover:not(:disabled) { background:#dc2626; color:#fff; }
.mhai-notepad-fix-btn:disabled { opacity:0.35; cursor:default; }
.mhai-notepad-input { flex:1; background:var(--bg-card) !important; border:1px solid var(--border) !important; border-radius:8px; padding:10px 12px !important; font-family:'Nunito',sans-serif !important; font-size:13px !important; font-weight:500; color:var(--text-primary) !important; resize:none; outline:none; line-height:1.5; }
.mhai-notepad-input::placeholder { color:var(--text-muted) !important; }
.mhai-notepad-input:focus { border-color:var(--accent) !important; box-shadow:0 0 0 2px rgba(30,136,229,0.2); }
.mhai-notepad-btn { padding:10px 20px; border-radius:8px; border:none; font-family:'Nunito',sans-serif; font-size:12px; font-weight:700; cursor:pointer; transition:all 0.2s; flex-shrink:0; }
.mhai-notepad-save { background:var(--gradient); color:#fff; }
.mhai-notepad-save:hover { opacity:0.9; transform:translateY(-1px); }
.mhai-notepad-save:disabled { opacity:0.6; cursor:default; transform:none; }
[data-theme="light"] .mhai-notepad-modal { background:#fff; }
[data-theme="light"] .mhai-note-item { background:#f8fafc; border-color:#e2e8f0; }
[data-theme="light"] .mhai-note-text { color:#0a1628 !important; }
[data-theme="light"] .mhai-note-meta { border-top-color:rgba(0,0,0,0.06); }
[data-theme="light"] .mhai-note-date { color:#2c4a6e !important; }
[data-theme="light"] .mhai-notepad-input { background:#f8fafc !important; color:#0a1628 !important; border-color:#d1d5db !important; }

/* Change password form */
.mhai-change-pw-box { display:none; }
.mhai-login-forgot a { color:var(--accent-light); text-decoration:none; }
.mhai-login-forgot a:hover { text-decoration:underline; color:var(--accent); }

/* ===== CHAT MAIN ===== */
.mhai-chat-main { flex:1; display:flex; flex-direction:column; background:var(--bg-chat); backdrop-filter:blur(20px); height:100%; }

/* Chat header - frosted glass bar */
.mhai-chat-header { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; border-bottom:1px solid var(--border); background:var(--bg-chat-header); backdrop-filter:blur(20px); flex-shrink:0; }
.mhai-chat-header-info { display:flex; align-items:center; gap:12px; }
.mhai-chat-header-name { font-size:15px; font-weight:800; color:var(--text-primary); }
.mhai-chat-header-meta { font-size:10px; color:var(--text-muted); font-weight:500; }
.mhai-hdr-status { display:inline-flex; align-items:center; font-size:10px; font-weight:700; padding:4px 10px; border-radius:8px; margin-left:10px; border:1px solid; }
.mhai-hdr-status.active { background:rgba(52,211,153,0.1); color:#34d399; border-color:rgba(52,211,153,0.2); }
.mhai-hdr-status.waiting { background:rgba(251,191,36,0.1); color:var(--warn); border-color:rgba(251,191,36,0.2); }

/* Header action buttons - glass pills */
.mhai-chat-header-actions { display:flex; gap:8px; }
.mhai-header-btn { padding:8px 18px; border-radius:10px; border:1px solid var(--border-glow); background:var(--bg-glass); backdrop-filter:blur(8px); color:var(--text-primary) !important; font-size:11px; font-weight:700; cursor:pointer; transition:all 0.25s; font-family:inherit; }
.mhai-header-btn:hover { background:rgba(30,136,229,0.2); border-color:var(--accent); }
.mhai-header-btn.danger { border-color:rgba(248,113,113,0.3); color:var(--danger) !important; }
.mhai-header-btn.danger:hover { background:rgba(239,68,68,0.15); border-color:rgba(248,113,113,0.5); }

/* ===== MESSAGES (20% less padding) ===== */
.mhai-messages-area { flex:1; overflow-y:auto; padding:24px 28px; }
.mhai-messages-area::-webkit-scrollbar { width:5px; }
.mhai-messages-area::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:3px; }
.mhai-msg { display:flex; margin-bottom:16px; animation:msgIn 0.3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes msgIn { from{opacity:0;transform:translateY(10px) scale(0.97)} to{opacity:1;transform:translateY(0) scale(1)} }
.mhai-msg.msg-left { justify-content:flex-start; }
.mhai-msg.msg-right { justify-content:flex-end; }
.mhai-msg-inner { max-width:68%; }
.mhai-msg.msg-right .mhai-msg-inner { text-align:right; }
.mhai-msg-meta { font-size:10px; font-weight:700; color:var(--text-muted); margin-bottom:4px; letter-spacing:0.3px; }

.mhai-msg-bubble {
    padding: 10px 18px !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    font-weight: 500 !important;
    display: inline-block !important;
    text-align: left !important;
    max-width: 100% !important;
    min-width: 40px !important;
}

.mhai-bubble-agent {
    background: var(--gradient) !important;
    color: #fff !important;
    border-radius: 14px 14px 4px 14px !important;
    box-shadow: 0 3px 12px var(--accent-glow) !important;
}
.mhai-bubble-user {
    background: var(--bg-glass) !important;
    backdrop-filter: blur(12px);
    color: var(--text-primary) !important;
    border-radius: 14px 14px 14px 4px !important;
    border: 1px solid var(--border-glow) !important;
}
.mhai-bubble-assistant {
    background: var(--bg-msg-ai) !important;
    backdrop-filter: blur(12px);
    color: var(--text-primary) !important;
    border-radius: 14px 14px 14px 4px !important;
    border: 1px solid rgba(52,211,153,0.2) !important;
    border-left: 3px solid var(--success) !important;
}

/* ===== INPUT ===== */
.mhai-chat-input-area { padding:14px 20px 18px; border-top:1px solid var(--border); background:var(--bg-chat-header); backdrop-filter:blur(20px); flex-shrink:0; }
.mhai-chat-input-wrap { display:flex; align-items:flex-end; gap:10px; background:var(--bg-glass); backdrop-filter:blur(12px); border:1px solid var(--border-glow); border-radius:14px; padding:10px 14px; transition:all 0.25s; }
.mhai-chat-input-wrap:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-glow); }
.mhai-chat-input-wrap textarea { flex:1; background:transparent !important; border:none !important; color:var(--text-primary) !important; font-size:15px !important; font-family:inherit; font-weight:600; resize:none; outline:none !important; min-height:44px; max-height:120px; line-height:1.5 !important; padding:10px 14px !important; }
.mhai-chat-input-wrap textarea::placeholder { color:var(--text-muted) !important; font-weight:500; }
.mhai-send-btn { height:40px; padding:0 20px; border-radius:12px; background:var(--gradient); border:none; color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all 0.2s; box-shadow:0 3px 10px var(--accent-glow); font-family:inherit; font-size:12px; font-weight:800; letter-spacing:1px; }
.mhai-send-btn:hover { transform:scale(1.08); box-shadow:0 6px 18px var(--accent-glow); }
.mhai-send-btn svg { width:20px; height:20px; }

/* ===== NO CHAT ===== */
.mhai-no-chat { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--text-primary) !important; }
.mhai-no-chat-icon { font-size:56px; margin-bottom:16px; filter:drop-shadow(0 4px 12px var(--accent-glow)); }
.mhai-no-chat h2 { font-size:18px; font-weight:800; margin-bottom:6px; color:var(--text-primary) !important; }
.mhai-no-chat p { font-size:13px; font-weight:500; color:var(--text-primary) !important; }
.mhai-detail-empty p { color:var(--text-primary) !important; }
.mhai-empty-queue p, .mhai-empty-queue-sm p { color:var(--text-primary) !important; }

/* ===== DETAIL PANEL ===== */
.mhai-detail-panel { width:380px; min-width:380px; background:var(--bg-sidebar); backdrop-filter:blur(30px); border-left:1px solid var(--border); display:flex; flex-direction:column; height:100%; overflow:hidden; padding:10px; gap:8px; }
.mhai-detail-panel > .mhai-detail-section { flex-shrink:0; }
.mhai-detail-panel::-webkit-scrollbar { width:4px; }
.mhai-detail-panel::-webkit-scrollbar-thumb { background:var(--scrollbar-thumb); border-radius:2px; }

.mhai-detail-section { padding:8px 12px; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; }
.mhai-detail-section.mhai-section-tight { padding:3px 10px; }
.mhai-detail-section.mhai-section-tight .mhai-detail-row { padding:1px 0 !important; }
.mhai-detail-section.mhai-section-tight h4 { margin-bottom:1px !important; }
.mhai-detail-section.mhai-section-tight .mhai-edit-input { padding:1px 5px !important; font-size:9px; }
.mhai-detail-section h4 { font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:1px; color:var(--accent); margin-bottom:5px !important; display:flex; align-items:center; gap:4px; }
.mhai-detail-section h4::before { content:''; display:inline-block; width:2px; height:8px; background:var(--gradient); border-radius:2px; }

.mhai-detail-row { display:flex; justify-content:space-between; align-items:center; padding:3px 0 !important; border-bottom:1px solid rgba(255,255,255,0.04); }
.mhai-detail-row:last-child { border-bottom:none; }
.mhai-detail-row-label { font-size:10px; color:var(--text-muted); font-weight:600; }
.mhai-detail-row-value { font-size:10px; color:var(--text-primary); font-weight:700; text-align:right; max-width:58%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

[data-theme="light"] .mhai-detail-row { border-bottom-color:rgba(0,0,0,0.05); }

.mhai-detail-empty { text-align:center; color:var(--text-primary) !important; padding:60px 20px; font-size:13px; font-weight:600; }

/* Stats grid */
.mhai-stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:5px; margin-bottom:5px !important; }
.mhai-stat-box { background:var(--bg-glass-subtle); border:1px solid var(--border); border-radius:8px; padding:5px 6px; text-align:center; }
.mhai-stat-num { font-size:14px; font-weight:800; color:var(--text-primary); line-height:1.2; }
.mhai-stat-label { font-size:8px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.5px; margin-top:1px !important; }
.mhai-stat-total { text-align:center; font-size:9px; font-weight:700; color:var(--text-secondary); padding-top:4px !important; border-top:1px solid var(--border); }

/* Editable fields */
.mhai-edit-input { background:var(--bg-glass-subtle) !important; border:1px solid var(--border) !important; border-radius:4px; padding:2px 5px !important; color:var(--text-primary) !important; font-size:10px; font-family:inherit; font-weight:600; width:55%; text-align:right; outline:none; transition:border 0.2s; }
.mhai-edit-input:focus { border-color:var(--accent) !important; box-shadow:0 0 0 2px var(--accent-glow); }
.mhai-edit-toggle { cursor:pointer; font-size:12px; float:right; opacity:0.5; }
.mhai-edit-toggle:hover { opacity:1; }
[data-theme="light"] .mhai-edit-input { color:#0a1628 !important; background:rgba(240,246,255,0.8) !important; }

/* Tabs */
.mhai-tabs-panel { padding:0 !important; flex:1 !important; min-height:0 !important; display:flex; flex-direction:column; overflow:hidden; }
.mhai-tab-bar { display:flex; border-bottom:1px solid var(--border-glow); flex-shrink:0; }
.mhai-tab { flex:1; text-align:center; padding:8px 6px; font-size:11px; font-weight:700; color:var(--text-muted); cursor:pointer; transition:all 0.2s; border-bottom:2px solid transparent; margin-bottom:-1px; }
.mhai-tab:hover { color:var(--text-primary); }
.mhai-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.mhai-tab-content { padding:10px; flex:1; overflow-y:auto; display:flex; flex-direction:column; min-height:0; }
.mhai-tab-content > * { width:100%; }
.mhai-sales-flow { flex:1; }
.mhai-notes-area { width:100%; flex:1; min-height:80px; background:var(--bg-glass-subtle); border:1px solid var(--border); border-radius:8px; color:var(--text-primary); font-family:inherit; font-size:12px; padding:8px; resize:none; outline:none; }
.mhai-notes-area:focus { border-color:var(--accent); }
[data-theme="light"] .mhai-notes-area { color:#0a1628 !important; }
[data-theme="light"] .mhai-tab.active { color:#0d47a1 !important; border-bottom-color:#0d47a1 !important; }

/* Sales Flow */
.sf-step { }
.sf-step h5 { font-size:12px; font-weight:800; color:var(--text-primary); margin-bottom:8px !important; }
.sf-input { width:100%; padding:8px 10px; background:var(--bg-glass-subtle); border:1px solid var(--border); border-radius:7px; color:var(--text-primary); font-family:inherit; font-size:12px; font-weight:600; outline:none; margin-bottom:7px !important; }
.sf-input:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-glow); }
[data-theme="light"] .sf-input { color:#0a1628 !important; background:rgba(240,246,255,0.8) !important; }
[data-theme="light"] .sf-step h5 { color:#0a1628 !important; }
[data-theme="light"] .sf-card { color:#0a1628 !important; }
[data-theme="light"] .sf-card strong { color:#0a1628 !important; }
[data-theme="light"] .sf-review-row { color:#2c4a6e !important; }
[data-theme="light"] .sf-review-row strong { color:#0a1628 !important; }
[data-theme="light"] .sf-status { color:#2c4a6e !important; }
.sf-btn { display:block; width:100%; padding:8px; background:var(--gradient); color:#fff !important; border:none; border-radius:7px; font-size:12px; font-weight:700; cursor:pointer; font-family:inherit; margin-top:6px !important; transition:all 0.2s; }
.sf-btn:hover { transform:translateY(-1px); box-shadow:0 4px 12px var(--accent-glow); }
.sf-btn.sf-back { background:var(--bg-glass-subtle); color:var(--text-primary) !important; border:1px solid var(--border); }
.sf-btn.sf-back:hover { border-color:var(--accent); box-shadow:none; transform:none; }
[data-theme="light"] .sf-btn.sf-back { color:#0a1628 !important; background:rgba(220,235,255,0.8) !important; }
.sf-btn.sf-submit { background:linear-gradient(135deg, #10b981 0%, #059669 100%); margin-top:12px; }
.sf-card { padding:9px 11px; background:var(--bg-glass-subtle); border:1.5px solid var(--border); border-radius:8px; margin-bottom:6px !important; cursor:pointer; transition:all 0.2s; font-size:12px; }
.sf-card:hover { border-color:var(--accent); background:var(--bg-sidebar-hover); }
.sf-card.selected { border-color:var(--accent); background:rgba(30,136,229,0.15); box-shadow:0 0 0 2px var(--accent-glow); }
.sf-card strong { color:var(--text-primary); }
.sf-review-row { display:flex; justify-content:space-between; padding:3px 0 !important; font-size:11px; color:var(--text-secondary); }
.sf-status { margin-top:6px !important; font-size:12px; }
.sf-success { text-align:center; padding:20px 0 !important; }
.sf-success h5 { font-size:15px; color:var(--success) !important; }
.sf-btn.sf-push { background:linear-gradient(135deg, #10b981 0%, #059669 100%); margin-top:8px !important; box-shadow:0 3px 10px rgba(16,185,129,0.3); font-size:12px; padding:10px; letter-spacing:0.3px; }
.sf-btn.sf-push:hover { box-shadow:0 6px 20px rgba(16,185,129,0.4); }
.sf-push-status { text-align:center; margin-top:8px; font-size:12px; font-weight:700; color:var(--success); }
.sf-waiting { text-align:center; padding:14px 8px !important; font-size:12px; color:var(--text-muted); }
.sf-waiting-spinner { display:inline-block; width:16px; height:16px; border:2px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:sfSpin 0.8s linear infinite; margin-right:6px; vertical-align:middle; }
@keyframes sfSpin { to { transform:rotate(360deg); } }

/* Staff-side push cards in chat */
.mhai-staff-push-cards { margin-top:6px; }
.mhai-push-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:8px; }
.mhai-spush-card { background:var(--bg-glass); border:1.5px solid var(--border); border-radius:10px; padding:10px; text-align:center; cursor:pointer; transition:all 0.25s; position:relative; }
.mhai-spush-card:hover { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 4px 12px var(--accent-glow); }
.mhai-spush-card.popular { border-color:var(--accent); }
.mhai-spush-badge { position:absolute; top:-7px; right:8px; background:var(--gradient); color:#fff; padding:2px 7px; border-radius:8px; font-size:8px; font-weight:700; text-transform:uppercase; }
.mhai-spush-name { font-size:12px; font-weight:800; color:var(--text-primary); margin-bottom:4px; }
.mhai-spush-speed { font-size:10px; font-weight:600; color:var(--accent-light); }
.mhai-spush-desc { font-size:9px; color:var(--text-muted); margin:4px 0; line-height:1.3; }
.mhai-spush-price { font-size:18px; font-weight:800; color:var(--text-primary); margin:6px 0; }
.mhai-spush-price span { font-size:10px; font-weight:500; color:var(--text-muted); }
.mhai-spush-btn { background:var(--gradient); color:#fff; border:none; padding:5px 14px; border-radius:12px; font-size:10px; font-weight:700; cursor:pointer; transition:all 0.2s; font-family:inherit; display:block; margin:0 auto; }
.mhai-spush-btn:hover { box-shadow:0 3px 10px var(--accent-glow); }
[data-theme="light"] .mhai-spush-card { background:rgba(255,255,255,0.7) !important; }
[data-theme="light"] .mhai-spush-name { color:#0a1628 !important; }
[data-theme="light"] .mhai-spush-price { color:#0a1628 !important; }

/* Staff calendar slots */
.sf-cal-slot { padding:5px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg-glass-subtle); color:var(--text-primary); font-size:10px; font-weight:700; cursor:pointer; transition:all 0.2s; font-family:inherit; }
.sf-cal-slot:hover { border-color:var(--accent); background:rgba(30,136,229,0.15); }
.sf-cal-slot.selected { background:var(--gradient); color:#fff !important; border-color:var(--accent); box-shadow:0 2px 8px var(--accent-glow); }
[data-theme="light"] .sf-cal-slot { color:#0a1628 !important; }
[data-theme="light"] .sf-cal-slot.selected { color:#fff !important; }

/* ===== RESPONSIVE ===== */
@media (max-width:1024px) { .mhai-detail-panel{display:none} }
@media (max-width:768px) { .mhai-sidebar{width:100%;min-width:100%;position:absolute;z-index:10} .mhai-chat-main{width:100%} .mhai-sidebar.hidden{display:none} .mhai-chat-main.hidden{display:none} }