/* admin.css — AVA INC. Enterprise Workspace v4.0 */

:root {
    --accent: #000000;
    --orange: #ff6600;
    --page-bg: #F7F7F7;
    --panel-bg: #FFFFFF;
    --border: #E5E5E5;
    --text-main: #111111;
    --text-muted: #666666;
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Outfit', sans-serif;
}

* { margin:0; padding:0; box-sizing:border-box; }

body { background:var(--page-bg); color:var(--text-main); font-family:var(--font-body); min-height:100vh; overflow:hidden; }

/* ── LOGIN ── */
.login-overlay { position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at center,#F4F4F4,#E0E0E0);z-index:9999; }
.login-box { width:90%;max-width:400px;background:rgba(255,255,255,.9);backdrop-filter:blur(24px);border:1px solid rgba(0,0,0,.06);border-radius:16px;padding:2.5rem 2rem;box-shadow:0 20px 40px rgba(0,0,0,.08);position:relative;z-index:2; }
.login-header { text-align:center;margin-bottom:2rem; }
.login-header h2 { font-family:var(--font-heading);font-size:2rem;letter-spacing:-1px;font-weight:700;color:#000; }
.login-header p { color:var(--text-muted);font-size:.95rem;margin-top:.25rem; }
.login-error { color:#E53935;font-size:.85rem;margin-top:1rem;min-height:20px;text-align:center;font-weight:500; }
.login-footer { margin-top:2rem;text-align:center; }
.bg-glow { position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,rgba(255,102,0,.06),transparent 60%);pointer-events:none; }

/* ── INPUTS & BUTTONS ── */
.input-group { margin-bottom:1.25rem; }
.input-group label { display:block;font-size:.8rem;color:var(--text-muted);margin-bottom:.4rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px; }
.input-group input { width:100%;background:#fff;border:1px solid var(--border);padding:.9rem 1rem;color:var(--text-main);border-radius:8px;font-family:var(--font-body);font-size:.95rem;transition:all .2s;box-shadow:0 1px 2px rgba(0,0,0,.02) inset; }
.input-group input:focus { outline:none;border-color:#000;box-shadow:0 0 0 2px rgba(0,0,0,.05); }
.btn-primary { background:var(--accent);color:#fff;border:none;padding:.9rem 1.25rem;border-radius:8px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s;display:flex;justify-content:center;align-items:center;gap:.5rem; }
.btn-primary:hover { transform:translateY(-1px);box-shadow:0 8px 16px rgba(0,0,0,.15); }
.btn-primary:disabled { opacity:.5;cursor:not-allowed;transform:none; }
.btn-outline { background:transparent;border:1px solid var(--border);color:var(--text-main);padding:.5rem 1rem;border-radius:6px;cursor:pointer;transition:all .2s;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;font-weight:500;font-size:.9rem; }
.btn-outline:hover { border-color:var(--accent);background:rgba(0,0,0,.02); }
.btn-sm { font-size:.82rem;padding:.35rem .75rem; }
.w-100 { width:100%; }

/* ── LAYOUT ── */
.admin-layout { display:flex;height:100vh; }
.admin-sidebar { width:240px;background:var(--panel-bg);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:10;flex-shrink:0; }
.sidebar-brand { padding:1.25rem 1.5rem;font-family:var(--font-heading);font-size:1rem;font-weight:800;border-bottom:1px solid var(--border);letter-spacing:1px;color:#000; }
.user-profile { padding:1rem 1.25rem;display:flex;align-items:center;gap:.75rem;border-bottom:1px solid var(--border);background:rgba(0,0,0,.01); }
.user-profile .avatar { width:34px;height:34px;border-radius:8px;background:#111;color:#fff;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0; }
.user-info .name { font-weight:600;font-size:.88rem;color:#000; }
.user-info .role { color:var(--text-muted);font-size:.68rem;text-transform:uppercase;letter-spacing:1px;margin-top:2px;font-weight:600; }
.sidebar-nav { flex:1;padding:.75rem 0;overflow-y:auto; }
.sidebar-nav ul { list-style:none;padding:0 .6rem; }
.sidebar-nav li { margin-bottom:.2rem; }
.sidebar-nav li a { display:flex;align-items:center;gap:.65rem;padding:.6rem .9rem;color:var(--text-muted);text-decoration:none;font-size:.875rem;font-weight:500;transition:all .1s;border-radius:6px; }
.sidebar-nav li a:hover { color:#000;background:rgba(0,0,0,.04); }
.sidebar-nav li a.active { background:#000;color:#fff; }
.sidebar-footer { padding:.875rem;border-top:1px solid var(--border); }
.logout-btn { width:100%;background:transparent;border:1px solid var(--border);color:var(--text-main);padding:.6rem;border-radius:6px;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:.5rem;font-weight:500;font-size:.875rem;transition:all .2s; }
.logout-btn:hover { background:#FAFAFA;border-color:#000; }

/* ── MAIN AREA ── */
.admin-main { flex:1;display:flex;flex-direction:column;background:var(--page-bg);overflow:hidden;min-width:0; height: 100vh; position: relative; }
.main-header { height:56px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 1.5rem;gap:1rem;background:var(--panel-bg);flex-shrink:0; }
.main-header h1 { font-family:var(--font-heading);font-size:1rem;font-weight:600;color:#000;white-space:nowrap; }
.header-tools { display:flex;align-items:center;gap:.5rem;flex-shrink:0; }
.icon-btn { background:transparent;border:1px solid var(--border);color:var(--text-muted);width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all .2s;font-size:1rem; }
.icon-btn:hover { border-color:#000;color:#000; }
.notif-badge { position:absolute;top:-5px;right:-5px;background:#ff4444;color:#fff;font-size:.6rem;min-width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;padding:0 3px; }
.main-content { flex:1;overflow-y:auto !important;padding:1.75rem; -webkit-overflow-scrolling: touch; }
.tab-pane { display:none;animation:subtleFade .2s ease; }
.tab-pane.active { display:block!important; }
@keyframes subtleFade { from{opacity:0} to{opacity:1} }

/* ── GLOBAL SEARCH ── */
.header-search-wrap { position:relative;flex:1;max-width:360px; }
.header-search-wrap input { width:100%;background:#F5F5F5;border:1px solid var(--border);padding:.5rem .9rem .5rem 2.25rem;border-radius:8px;font-size:.875rem;color:#000;outline:none;transition:border .2s; }
.header-search-wrap input:focus { border-color:#000;background:#fff; }
.search-dropdown { position:absolute;top:calc(100% + 6px);left:0;right:0;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);z-index:1000;overflow:hidden; }
.search-item { display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;font-size:.875rem;cursor:pointer;transition:background .1s; }
.search-item:hover { background:#F5F5F5; }
.search-type { font-size:.7rem;background:#E5E5E5;color:#555;padding:.15rem .5rem;border-radius:20px;font-weight:600; }

/* ── SHARED CARDS & FORMS ── */
.card { background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px rgba(0,0,0,.02); }
.editor-card { background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;padding:1.75rem;max-width:600px; }
.panel-header { display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem; }
.panel-header h2 { font-family:var(--font-heading);font-size:1.4rem;font-weight:600;color:#000; }
.form-group { margin-bottom:1.1rem; }
.form-group label { display:block;font-size:.78rem;color:var(--text-muted);margin-bottom:.35rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px; }
.form-group input[type="text"],.form-group input[type="password"],.form-group input[type="email"],.form-group input[type="date"],.form-group textarea,.form-group select { width:100%;background:#fff;border:1px solid var(--border);padding:.7rem .9rem;border-radius:8px;color:#000;font-family:var(--font-body);font-size:.9rem;transition:all .2s;resize:vertical; }
.form-group input:focus,.form-group textarea:focus,.form-group select:focus { border-color:#000;outline:none;box-shadow:0 0 0 2px rgba(0,0,0,.05); }
.form-actions { display:flex;gap:.75rem;margin-top:1.5rem; }
.mt-2{margin-top:.5rem}.mt-3{margin-top:1rem}.mt-4{margin-top:2rem}.pt-4{padding-top:2rem}.mb-2{margin-bottom:.5rem}.ml-2{margin-left:.5rem}
.text-muted{color:var(--text-muted)}

/* ── TOGGLE SWITCH ── */
.toggle-group { display:flex;align-items:center;justify-content:space-between; }
.switch { position:relative;display:inline-block;width:44px;height:24px;flex-shrink:0; }
.switch input { opacity:0;width:0;height:0; }
.slider { position:absolute;cursor:pointer;inset:0;background:#CCC;transition:.3s;border-radius:24px; }
.slider:before { position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background:#fff;transition:.3s;border-radius:50%; }
input:checked+.slider { background:#000; }
input:checked+.slider:before { transform:translateX(20px); }

/* ── STATUS BADGES ── */
.status-badge { padding:.2rem .55rem;border-radius:6px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.4px; }
.status-badge.published { background:#F0FDF4;color:#166534;border:1px solid #DCFCE7; }
.status-badge.action { background:#F3F4F6;color:#111;border:1px solid #E5E7EB;cursor:pointer; }
.status-badge.action:hover { background:#000;color:#fff;border-color:#000; }

/* ── TABLES ── */
.table-container { background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.02); }
.admin-table { width:100%;border-collapse:collapse;text-align:left; }
.admin-table th { padding:.9rem 1.25rem;font-size:.72rem;color:var(--text-muted);border-bottom:1px solid var(--border);font-weight:600;text-transform:uppercase;letter-spacing:.5px;background:#FAFAFA; }
.admin-table td { padding:.9rem 1.25rem;font-size:.9rem;border-bottom:1px solid var(--border);vertical-align:middle;color:#111; }
.admin-table tr:last-child td { border-bottom:none; }
.admin-table tr:hover td { background:#FAFAFA; }
.action-btn { background:none;border:none;color:var(--text-muted);font-size:1.05rem;cursor:pointer;transition:color .1s;margin-right:.4rem;padding:.2rem; }
.action-btn:hover { color:#000; }
.action-btn.delete:hover { color:#E53935; }

/* ── MODALS ── */
.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);z-index:10000;display:flex;align-items:center;justify-content:center;animation:subtleFade .2s; }
.modal-content { background:var(--panel-bg);width:100%;max-width:450px;border-radius:12px;border:1px solid var(--border);overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.12); }
.modal-header { padding:1.1rem 1.4rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:#FAFAFA; }
.modal-header h3 { font-size:1rem;font-weight:600; }
.close-btn { background:none;border:none;color:var(--text-muted);font-size:1.15rem;cursor:pointer;padding:.25rem;border-radius:4px; }
.close-btn:hover { color:#000;background:rgba(0,0,0,.05); }
.modal-body { padding:1.4rem; }

/* ── ANALYTICS ── */
.analytics-stat-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-bottom:1.5rem; }
.stat-card { background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;padding:1.25rem;display:flex;align-items:center;gap:1rem;box-shadow:0 2px 8px rgba(0,0,0,.02); }
.stat-icon { width:44px;height:44px;background:#F4F4F4;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#444;flex-shrink:0; }
.stat-info h3 { font-size:.78rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;margin-bottom:.25rem; }
.stat-number { font-family:var(--font-heading);font-size:1.6rem;font-weight:800;color:#000; }
.analytics-charts-grid { display:grid;grid-template-columns:2fr 1fr;gap:1.25rem; }

/* ── SPLIT EDITOR ── */
#tab-content { padding:0;height:100%; }
.split-engine-layout { display:flex;height:100%;width:100%;background:var(--border);gap:1px; }
.engine-editor-pane { width:400px;background:#fff;display:flex;flex-direction:column;flex-shrink:0; }
.engine-header { padding:1rem 1.1rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:#FAFAFA; }
.engine-header h2 { font-size:.95rem;font-weight:600; }
.engine-tools { display:flex;gap:.5rem; }
.engine-body { flex:1;overflow-y:auto;padding:1.1rem; }
.engine-preview-pane { flex:1;background:#E5E5E5;display:flex;flex-direction:column;overflow:hidden; }
.preview-toolbar { height:40px;background:#F4F4F4;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:1rem;color:var(--text-muted);font-size:.85rem;font-weight:500;padding:0 1rem; }
.preview-toolbar i { font-size:1.1rem;cursor:pointer;transition:color .2s; }
.preview-toolbar i:hover { color:#000; }
.preview-frame-container { flex:1;padding:1rem;display:flex;justify-content:center;overflow:auto;background:var(--page-bg); }
.preview-iframe { width:100%;height:100%;border:1px solid var(--border);border-radius:8px;background:#fff;box-shadow:0 20px 40px rgba(0,0,0,.1);transition:all .4s cubic-bezier(.25,1,.5,1); }
.preview-iframe.tablet-view { width:768px!important;height:1024px!important;border-radius:12px;margin-top:1rem;border:10px solid #111;flex-shrink:0; }
.preview-iframe.mobile-view { width:375px!important;height:812px!important;border-radius:36px;margin-top:1rem;border:12px solid #111;flex-shrink:0; }
.editor-section-group { margin-bottom:1.75rem; }
.editor-section-group h3 { font-size:.78rem;text-transform:uppercase;color:var(--text-muted);letter-spacing:1px;margin-bottom:.75rem;display:flex;align-items:center;gap:.5rem;font-weight:600; }
.e-card { background:#fff;border:1px solid var(--border);border-radius:8px;margin-bottom:1rem;overflow:hidden;transition:border-color .2s; }
.e-card:focus-within { border-color:#000;box-shadow:0 0 0 1px #000; }
.e-card-body { padding:.9rem; }
.stats-edit-grid { display:grid;grid-template-columns:1fr 1fr;gap:.75rem; }
.ai-btn { position:absolute;right:.5rem;top:.5rem;background:linear-gradient(135deg,#111,#333);color:#fff;border:none;padding:.2rem .5rem;border-radius:4px;font-size:.68rem;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:.25rem;transition:transform .2s; }
.ai-btn:hover { transform:scale(1.05); }
.input-with-ai { position:relative; }
.input-with-ai input,.input-with-ai textarea { padding-right:4.5rem; }
.save-status { animation:slideUp .3s ease-out;z-index:1000;background:#000!important;color:#fff!important;font-weight:500;font-size:.875rem; }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }

/* ── KANBAN ── */
.kanban-board { display:flex;gap:1.25rem;height:calc(100vh - 185px); }
.kanban-column { flex:1;background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.02); }
.kanban-header { padding:1rem 1.1rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:#FAFAFA; }
.kanban-title { font-weight:600;font-size:.9rem;display:flex;align-items:center;gap:.5rem; }
.kanban-count { background:#E5E5E5;color:#111;padding:.1rem .55rem;border-radius:20px;font-size:.72rem;font-weight:700; }
.kanban-body { flex:1;padding:.9rem;overflow-y:auto;display:flex;flex-direction:column;gap:.85rem;min-height:80px;transition:background .2s; }
.kanban-body.drag-over { background:#EFEFEF;border:2px dashed #CCC;border-radius:8px; }
.k-card { background:#fff;border:1px solid var(--border);border-radius:8px;padding:.9rem;cursor:pointer;box-shadow:0 2px 5px rgba(0,0,0,.02);transition:transform .2s,box-shadow .2s,border-color .2s; }
.k-card:hover { transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.08);border-color:#CCC; }
.k-card.dragging { opacity:.5;cursor:grabbing; }
.k-card-header { display:flex;justify-content:space-between;margin-bottom:.4rem; }
.k-card-title { font-weight:600;font-size:.9rem;color:#000; }
.k-card-desc { font-size:.82rem;color:var(--text-muted);line-height:1.45;margin-bottom:.75rem; }
.k-card-footer { display:flex;justify-content:space-between;align-items:center;border-top:1px solid #F0F0F0;padding-top:.5rem; }
.k-card-value { font-weight:600;color:#166534;font-size:.82rem; }
.k-card-badge { font-size:.68rem;padding:.15rem .45rem;border-radius:4px;color:#666;font-weight:500;border:1px solid transparent; }

/* ── LEAD DETAIL PANEL ── */
.lead-panel-overlay { position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200;backdrop-filter:blur(1px); }
.lead-detail-panel { position:fixed;top:0;right:0;height:100vh;width:380px;background:#fff;border-left:1px solid var(--border);box-shadow:-10px 0 40px rgba(0,0,0,.12);z-index:201;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .3s cubic-bezier(.25,1,.5,1); }
.lead-detail-panel.open { transform:translateX(0); }
.ldp-header { padding:1.25rem 1.4rem;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:flex-start;background:#FAFAFA;flex-shrink:0; }
.ldp-body { flex:1;overflow-y:auto;padding:1.25rem 1.4rem; }
.ldp-footer { padding:1rem 1.4rem;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:#FAFAFA;flex-shrink:0; }
.ldp-row { display:flex;flex-direction:column;gap:.25rem;margin-bottom:1rem; }
.ldp-label { font-size:.72rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.4px; }
.ldp-history { display:flex;flex-direction:column;gap:.4rem; }
.ldp-hist-item { font-size:.8rem;color:var(--text-muted);display:flex;align-items:center;gap:.5rem;padding:.35rem 0;border-bottom:1px solid #F5F5F5; }

/* ── ACTIVITY LOG ── */
.activity-timeline { display:flex;flex-direction:column;gap:0; }
.activity-item { display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid #F5F5F5;position:relative; }
.activity-item:last-child { border-bottom:none; }
.activity-dot { width:32px;height:32px;border-radius:8px;background:#F4F4F4;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:#555;flex-shrink:0; }
.activity-body { flex:1; }
.activity-action { font-weight:600;font-size:.9rem;color:#000; }
.activity-detail { font-size:.82rem;color:var(--text-muted);margin-top:.1rem; }
.activity-time { font-size:.75rem;color:#AAA;margin-top:.2rem; }

/* ── NOTIFICATION DROPDOWN ── */
.notif-dropdown { position:absolute;top:calc(100% + 8px);right:0;width:300px;background:#fff;border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.12);z-index:1000;overflow:hidden; }
.notif-item { display:flex;align-items:flex-start;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid #F5F5F5;font-size:.875rem;cursor:pointer;transition:background .1s; }
.notif-item:last-child { border-bottom:none; }
.notif-item:hover { background:#F9F9F9; }
.notif-item i { font-size:1rem;margin-top:2px;flex-shrink:0; }

/* ── LEGACY TEAM CHAT (kept for reference) ── */
.premium-chat-layout { display:flex;height:calc(100vh - 160px);background:#fff;border:1px solid var(--border);border-radius:12px;overflow:hidden; }
.chat-main { flex:1;display:flex;flex-direction:column;border-right:1px solid var(--border); }
.chat-header-info { padding:1rem 1.4rem;border-bottom:1px solid var(--border);display:flex;align-items:center;background:#FAFAFA; }
.channel-info { display:flex;align-items:center;gap:.5rem; }
.channel-icon { font-size:1.2rem;color:#000;font-weight:800; }
.channel-name { font-weight:600;font-family:var(--font-heading);font-size:1rem;color:#000; }
.channel-dot { width:7px;height:7px;border-radius:50%;background:#22C55E; }
.premium-chat-messages { flex:1;padding:1.25rem 1.4rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem; }
.chat-msg-row { display:flex;gap:.85rem;align-items:flex-start; }
.chat-avatar { width:32px;height:32px;border-radius:8px;background:#F4F4F4;color:#111;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.8rem;flex-shrink:0;border:1px solid var(--border); }
.chat-msg-content { flex:1; }
.chat-msg-header { display:flex;align-items:center;gap:.5rem;margin-bottom:.2rem; }
.chat-msg-user { font-weight:600;font-size:.875rem;color:#000; }
.chat-msg-time { font-size:.7rem;color:var(--text-muted); }
.chat-msg-text { font-size:.9rem;line-height:1.5;color:#111;background:#F4F4F4;padding:.65rem .9rem;border-radius:0 10px 10px 10px;border:1px solid var(--border);display:inline-block; }
.chat-msg-row.own { flex-direction:row-reverse; }
.chat-msg-row.own .chat-msg-header { justify-content:flex-end; }
.chat-msg-row.own .chat-msg-text { background:#000;color:#fff;border-color:#000;border-radius:10px 0 10px 10px; }
.chat-msg-row.own .chat-avatar { display:none; }
.premium-chat-input { padding:.9rem 1.25rem;background:#fff;border-top:1px solid var(--border);display:flex;align-items:center;gap:.9rem; }
.premium-chat-input input { flex:1;background:#F9F9F9;border:1px solid var(--border);padding:.75rem 1.1rem;border-radius:20px;color:#000;font-size:.9rem;transition:border .2s;outline:none; }
.premium-chat-input input:focus { border-color:#000;background:#fff; }
.btn-send { background:#000;color:#fff;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:transform .2s;flex-shrink:0; }
.btn-send:hover { transform:scale(1.08); }
.chat-sidebar { width:200px;padding:1.25rem;display:flex;flex-direction:column;background:#FAFAFA; }
.sidebar-section h3 { font-size:.72rem;text-transform:uppercase;color:var(--text-muted);margin-bottom:.85rem;letter-spacing:1px;font-weight:600; }
.premium-roster { list-style:none;display:flex;flex-direction:column;gap:.65rem; }
.roster-item { display:flex;align-items:center;gap:.65rem;font-size:.875rem;font-weight:500;color:#111; }
.status-dot { width:7px;height:7px;border-radius:50%;background:#22C55E;flex-shrink:0; }
.status-dot.offline { background:#E5E5E5;border:1px solid #CCC; }

/* ── AI TRAINER ── */
.ai-trainer-layout { display:flex;height:calc(100vh - 160px);gap:1.25rem; }
.chat-trainer { flex:1;display:flex;flex-direction:column;background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;overflow:hidden; }
.chat-trainer-header { padding:.9rem 1rem;border-bottom:1px solid var(--border);background:#FAFAFA;display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:.9rem; }
.chat-trainer-messages { flex:1;padding:1.25rem;overflow-y:auto;display:flex;flex-direction:column;gap:.9rem; }
.ai-msg { align-self:flex-start;background:#F4F4F4;color:#111;padding:.65rem .9rem;border-radius:0 10px 10px 10px;font-size:.9rem;border:1px solid var(--border);max-width:82%;line-height:1.45; }
.user-msg { align-self:flex-end;background:#000;color:#fff;padding:.65rem .9rem;border-radius:10px 0 10px 10px;font-size:.9rem;max-width:82%;line-height:1.45; }
.chat-trainer-input { padding:.9rem;border-top:1px solid var(--border);display:flex;gap:.5rem; }
.chat-trainer-input input { flex:1;padding:.7rem .9rem;border-radius:8px;border:1px solid var(--border);font-size:.9rem;outline:none; }
.chat-trainer-input input:focus { border-color:#000; }
.knowledge-base-panel { width:280px;background:var(--panel-bg);border:1px solid var(--border);border-radius:12px;display:flex;flex-direction:column;overflow:hidden; }
.kb-header { padding:.9rem 1rem;border-bottom:1px solid var(--border);font-weight:600;font-size:.875rem;background:#FAFAFA; }
.kb-list { flex:1;overflow-y:auto;padding:.85rem;display:flex;flex-direction:column;gap:.65rem; }
.kb-item { font-size:.8rem;background:#F9F9F9;border:1px solid var(--border);padding:.65rem .8rem;border-radius:6px; }
.kb-item strong { display:block;color:#000;margin-bottom:.2rem; }
.kb-item span { color:var(--text-muted);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

/* ── ROLE SELECTOR ── */
.role-selector { display:flex;flex-direction:column;gap:.4rem;margin-bottom:.75rem; }
.role-option { display:flex;align-items:center;gap:.8rem;padding:.75rem .9rem;border:1.5px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s;background:#fff; }
.role-option i { font-size:1.1rem;color:var(--text-muted);flex-shrink:0; }
.role-option .role-name { font-weight:600;font-size:.875rem;color:#000; }
.role-option .role-desc { font-size:.72rem;color:var(--text-muted);margin-top:1px; }
.role-option:hover { border-color:#999;background:#FAFAFA; }
.role-option.active { border-color:#000;background:#000; }
.role-option.active i,.role-option.active .role-name { color:#fff; }
.role-option.active .role-desc { color:rgba(255,255,255,.6); }

/* ── DARK MODE ── */
body.dark-admin { filter:invert(1) hue-rotate(180deg);background:#000; }
body.dark-admin img { filter:invert(1) hue-rotate(180deg); }
body.dark-admin iframe.preview-iframe { filter:invert(1) hue-rotate(180deg); }

/* ══════════════════════════════════════════
   SLACK-STYLE TEAM CHAT
══════════════════════════════════════════ */
#tab-teamchat { padding:0; height:100%; }
.slack-layout {
    display: grid;
    grid-template-columns: 220px 1fr 180px;
    height: calc(100vh - 56px);
    background: #1a1d21;
    overflow: hidden;
}

/* Left sidebar */
.slack-sidebar {
    background: #19171d;
    border-right: 1px solid rgba(255,255,255,.08);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    color: #ccc;
}
.slack-workspace-name {
    padding: .9rem 1rem;
    font-weight: 800;
    font-size: .88rem;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.03);
    letter-spacing: .2px;
}
.slack-section { padding: .5rem 0; }
.slack-section-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem 1rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}
.slack-section-label:hover { color: #fff; }
.slack-channel-list { list-style: none; padding: 0; }
.slack-channel {
    padding: .35rem 1rem .35rem 1.5rem;
    font-size: .88rem;
    color: #aaa;
    cursor: pointer;
    transition: background .1s, color .1s;
    display: flex;
    align-items: center;
    gap: .4rem;
    border-radius: 4px;
    margin: 1px 6px;
}
.slack-channel:hover { background: rgba(255,255,255,.06); color: #fff; }
.slack-channel.active { background: rgba(255,255,255,.12); color: #fff; font-weight: 600; }
.slack-add-channel {
    padding: .35rem 1rem .35rem 1.5rem;
    font-size: .82rem;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .4rem;
    margin: 1px 6px;
    border-radius: 4px;
    transition: color .15s;
}
.slack-add-channel:hover { color: #ff6600; }

/* Main area */
.slack-main {
    display: flex;
    flex-direction: column;
    background: #1a1d21;
    overflow: hidden;
}
.slack-header {
    padding: .75rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1a1d21;
    flex-shrink: 0;
}
.slack-channel-info { display: flex; align-items: center; gap: .5rem; }
.slack-channel-hash { font-size: 1.2rem; font-weight: 800; color: #fff; }
.slack-channel-title { font-weight: 700; font-size: 1rem; color: #fff; }
.slack-channel-desc { font-size: .8rem; color: #666; padding-left: .5rem; border-left: 1px solid #333; margin-left: .25rem; }
.slack-header-tools { display: flex; align-items: center; gap: .5rem; }
.slack-icon-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,.1);
    color: #888;
    width: 30px; height: 30px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s;
    font-size: .9rem;
}
.slack-icon-btn:hover { border-color: rgba(255,255,255,.3); color: #fff; background: rgba(255,255,255,.05); }
.slack-online-pill {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    color: #888;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 20px;
    padding: .2rem .65rem;
}
.slack-pinned-bar {
    padding: .55rem 1.25rem;
    background: rgba(255,200,0,.06);
    border-bottom: 1px solid rgba(255,200,0,.12);
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: #e5c547;
    flex-shrink: 0;
}

/* Messages */
.slack-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.1) transparent;
}
.slack-messages::-webkit-scrollbar { width: 4px; }
.slack-messages::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.slack-msg {
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: .4rem .5rem;
    border-radius: 6px;
    transition: background .1s;
}
.slack-msg:hover { background: rgba(255,255,255,.03); }
.slack-msg:hover .slack-msg-actions { opacity: 1; }
.slack-msg.new-sender { margin-top: .75rem; }
.slack-msg-avatar {
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: .85rem;
    color: #fff;
    flex-shrink: 0;
    font-family: var(--font-heading);
}
.slack-msg-body { flex: 1; min-width: 0; }
.slack-msg-header { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .2rem; }
.slack-msg-user { font-weight: 700; font-size: .92rem; color: #fff; }
.slack-msg-time { font-size: .7rem; color: #555; }
.slack-msg-text {
    font-size: .9rem;
    line-height: 1.55;
    color: #ccc;
    word-wrap: break-word;
}
.slack-msg-text .mention {
    color: #ff9900;
    background: rgba(255,153,0,.12);
    border-radius: 4px;
    padding: 0 .25rem;
    font-weight: 600;
}
.slack-msg-reactions { display: flex; gap: .35rem; margin-top: .4rem; flex-wrap: wrap; }
.slack-reaction {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 20px;
    padding: .15rem .5rem;
    font-size: .8rem;
    cursor: pointer;
    transition: all .15s;
    color: #aaa;
}
.slack-reaction:hover { background: rgba(255,102,0,.12); border-color: rgba(255,102,0,.3); color: #ff9900; }
.slack-msg-actions {
    opacity: 0;
    display: flex;
    gap: .25rem;
    transition: opacity .15s;
}
.slack-msg-action-btn {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    color: #888;
    width: 26px; height: 26px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .75rem;
    transition: all .15s;
}
.slack-msg-action-btn:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Day divider */
.slack-day-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1rem 0;
    font-size: .72rem;
    color: #555;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.slack-day-divider::before,
.slack-day-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.06);
}

/* Typing indicator */
.slack-typing {
    padding: .25rem 1.25rem .5rem;
    font-size: .78rem;
    color: #666;
    font-style: italic;
    flex-shrink: 0;
}

/* @mention dropdown */
.mention-dropdown {
    position: absolute;
    bottom: 130px;
    left: 240px;
    right: 180px;
    background: #222529;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
    z-index: 100;
    overflow: hidden;
    max-height: 220px;
    overflow-y: auto;
}
.mention-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .6rem 1rem;
    cursor: pointer;
    transition: background .1s;
    font-size: .88rem;
    color: #ccc;
}
.mention-item:hover, .mention-item.selected { background: rgba(255,102,0,.12); color: #ff9900; }
.mention-item .m-avatar {
    width: 26px; height: 26px;
    border-radius: 6px;
    font-size: .72rem;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mention-label { font-size: .72rem; color: #666; margin-left: auto; }

/* Input area */
.slack-input-wrap {
    padding: .75rem 1.25rem .9rem;
    background: #1a1d21;
    border-top: 1px solid rgba(255,255,255,.07);
    flex-shrink: 0;
}
.slack-emoji-bar {
    display: flex;
    gap: .2rem;
    margin-bottom: .5rem;
}
.emoji-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    cursor: pointer;
    padding: .2rem .3rem;
    border-radius: 5px;
    transition: background .1s, transform .1s;
    line-height: 1;
}
.emoji-btn:hover { background: rgba(255,255,255,.08); transform: scale(1.2); }
.slack-input-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: .5rem .75rem;
    transition: border-color .2s;
}
.slack-input-row:focus-within { border-color: rgba(255,102,0,.4); }
.slack-input-box {
    flex: 1;
    outline: none;
    color: #ddd;
    font-size: .9rem;
    line-height: 1.5;
    min-height: 22px;
    max-height: 120px;
    overflow-y: auto;
    font-family: var(--font-body);
}
.slack-input-box:empty::before {
    content: attr(data-placeholder);
    color: #555;
    pointer-events: none;
}
.slack-input-tools { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; }
.slack-send-btn {
    background: #ff6600;
    color: #fff;
    border: none;
    width: 32px; height: 32px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .9rem;
    transition: background .15s, transform .15s;
    flex-shrink: 0;
}
.slack-send-btn:hover { background: #e05500; transform: scale(1.05); }

/* Right roster */
.slack-roster {
    background: #1a1d21;
    border-left: 1px solid rgba(255,255,255,.07);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}
.slack-roster-section { padding: .75rem 1rem; }
.slack-roster-label {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #555;
    font-weight: 700;
    margin-bottom: .5rem;
}
.slack-roster-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.slack-roster-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .82rem;
    color: #888;
    padding: .25rem .35rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background .1s, color .1s;
}
.slack-roster-item:hover { background: rgba(255,255,255,.05); color: #ddd; }
.slack-roster-avatar {
    width: 22px; height: 22px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .65rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.slack-status-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
}
.slack-status-dot.online { background: #22C55E; box-shadow: 0 0 4px rgba(34,197,94,.5); }
.slack-status-dot.away { background: #F59E0B; }


/* ══════════════════════════════════════════════════════
   RESPONSIVE — HAMBURGER, SIDEBAR DRAWER, ALL BREAKPOINTS
══════════════════════════════════════════════════════ */

/* ── Hamburger button (hidden on desktop) ── */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: .35rem;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.hamburger-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--text-main);
    border-radius: 2px;
    transition: transform .25s, opacity .25s;
}
/* Animated X when sidebar is open */
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Sidebar overlay (dark backdrop on mobile) ── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 49;
    backdrop-filter: blur(2px);
}
.sidebar-overlay.active { display: block; }

/* ════════ iPad Landscape: ≤ 1200px ════════ */
@media (max-width: 1200px) {
    .analytics-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .analytics-charts-grid { grid-template-columns: 1fr; }
    .kanban-board { gap: .85rem; }
    .slack-layout { grid-template-columns: 200px 1fr; }
    .slack-roster { display: none; }
    .dashboard-stats { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .leads-grid { grid-template-columns: 1fr; }
}

/* ════════ iPad Portrait: ≤ 900px ════════ */
@media (max-width: 900px) {
    /* Hamburger visible */
    .hamburger-btn { display: flex; }

    /* Sidebar becomes a slide-in drawer */
    .admin-sidebar {
        position: fixed;
        left: -280px;
        top: 0; bottom: 0;
        width: 280px;
        z-index: 50;
        transition: left .28s cubic-bezier(.4,0,.2,1);
        box-shadow: 4px 0 20px rgba(0,0,0,.15);
    }
    .admin-sidebar.open { left: 0; }

    /* Main header */
    .main-header { padding: 0 .75rem; gap: .5rem; }
    .main-header h1 { font-size: .88rem; }
    .header-search-wrap { display: none; } /* hide search on tablet */

    /* Main content */
    .main-content { padding: 1rem; }

    /* Dashboard stat cards: 2 columns */
    .dashboard-stats { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
    .stat-card { padding: 1rem; }
    .stat-card .stat-value { font-size: 1.5rem; }

    /* Leads */
    .leads-header { flex-direction: column; align-items: flex-start; gap: .5rem; }
    .leads-filters { flex-wrap: wrap; gap: .5rem; overflow-x: auto; }
    .lead-detail-panel { width: 100%; position: fixed; bottom: 0; left: 0; right: 0; top: auto;
        height: 70vh; border-radius: 16px 16px 0 0; z-index: 40; overflow-y: auto; }

    /* Kanban: horizontal scroll */
    .kanban-board { display: flex; overflow-x: auto; gap: .75rem; padding-bottom: 1rem; -webkit-overflow-scrolling: touch; }
    .kanban-col { min-width: 260px; flex-shrink: 0; }

    /* Chat layout: single column, no sidebar panel */
    .slack-layout { display: flex; flex-direction: column; height: 100%; }
    .slack-sidebar { display: none; }
    .slack-roster { display: none; }
    .slack-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .slack-messages { flex: 1; overflow-y: auto; }

    /* Mobile channel bar replaces sidebar */
    .mobile-channel-bar { display: flex; }

    /* Analytics */
    .analytics-stat-grid { grid-template-columns: repeat(2, 1fr); }
    .analytics-charts-grid { grid-template-columns: 1fr; }

    /* Editor */
    .editor-layout { grid-template-columns: 1fr; }

    /* Settings */
    .settings-grid { grid-template-columns: 1fr; }

    /* Hide "View Live Site" text on small tablets */
    .btn-outline.btn-sm { font-size: .72rem; padding: .3rem .5rem; }

    /* Chat touch affordances */
    .chat-msg-quick-actions { opacity: 1; } /* Always show on touch */
    .chat-quick-btn { width: 32px; height: 32px; font-size: .9rem; }
}

/* ════════ Phone: ≤ 640px ════════ */
@media (max-width: 640px) {
    /* Dashboard stats: 1 column on small phones */
    .dashboard-stats { grid-template-columns: 1fr; gap: .65rem; }

    /* Header: minimal */
    .main-header { padding: 0 .6rem; height: 50px; }
    .main-header h1 { font-size: .82rem; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .header-tools { gap: .3rem; }
    .icon-btn { width: 30px; height: 30px; font-size: .88rem; }

    /* Themebutton + notif only, hide "View Live Site" link */
    .header-tools > a { display: none; }

    /* Content padding */
    .main-content { padding: .75rem; }

    /* Overview cards single col */
    .analytics-stat-grid { grid-template-columns: 1fr; }

    /* Leads filter pills wrap */
    .leads-filters { gap: .3rem; }
    .filter-btn { font-size: .75rem; padding: .3rem .65rem; }

    /* Editor */
    .editor-card { padding: 1rem; }
    .editor-card textarea { min-height: 180px; }

    /* Chat bubbles: full width */
    .chat-bubble-wrap { max-width: 88%; }
    .chat-media-thumb { max-width: 180px; }

    /* Emoji picker: full width */
    .emoji-picker-panel { right: 0; left: 0; width: 100%; border-radius: 12px 12px 0 0; bottom: 110px; }

    /* Input wrap */
    .slack-input-wrap { padding: .5rem; }
    .slack-emoji-bar { padding: .3rem .4rem; gap: .3rem; }
    .emoji-btn { font-size: 1.1rem; }

    /* Kanban col min-width */
    .kanban-col { min-width: 230px; }

    /* Context menu full width bottom sheet feel */
    .chat-context-menu { left: 1rem !important; right: 1rem !important; width: auto; }
}

/* ── Mobile Channel Switcher Bar ── */
/* A horizontal pill bar shown on mobile instead of sidebar */
.mobile-channel-bar {
    display: none; /* shown on mobile via media query above */
    overflow-x: auto;
    gap: .4rem;
    padding: .5rem .75rem;
    background: var(--panel-bg);
    border-bottom: 1px solid var(--border);
    -webkit-overflow-scrolling: touch;
    flex-shrink: 0;
    scrollbar-width: none;
}
.mobile-channel-bar::-webkit-scrollbar { display: none; }
.mob-ch-pill {
    flex-shrink: 0;
    background: rgba(0,0,0,.05);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: .3rem .75rem;
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all .15s;
}
.mob-ch-pill.active { background: #000; color: #fff; border-color: #000; }


/* ══════════════════════════════════════════════════════
   WHATSAPP + SLACK CHAT — New Components v2.0
══════════════════════════════════════════════════════ */

/* ── WhatsApp Bubble Rows ── */
.chat-bubble-row {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
    margin: .25rem 0;
    position: relative;
}
.chat-bubble-row.own {
    flex-direction: row-reverse;
}
.chat-bubble-row:hover .chat-msg-quick-actions { opacity: 1; }

.chat-bubble-avatar {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .8rem; color: #fff;
    flex-shrink: 0;
    font-family: var(--font-heading);
    margin-bottom: 4px;
}

.chat-bubble-wrap { display: flex; flex-direction: column; max-width: 72%; }
.chat-bubble-row.own .chat-bubble-wrap { align-items: flex-end; }

.chat-bubble-sender {
    font-size: .72rem;
    font-weight: 700;
    margin-bottom: .2rem;
    padding-left: .25rem;
}

/* main bubble */
.chat-bubble {
    padding: .55rem .75rem;
    border-radius: 14px;
    position: relative;
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.chat-bubble.other {
    background: #2b2d31;
    border: 1px solid rgba(255,255,255,.06);
    border-bottom-left-radius: 4px;
    color: #d8d8d8;
}
.chat-bubble.own {
    background: linear-gradient(135deg, #ff6600, #e05500);
    border-bottom-right-radius: 4px;
    color: #fff;
}
/* Bubble tails */
.chat-bubble.other::before {
    content: '';
    position: absolute;
    left: -6px; bottom: 6px;
    border: 6px solid transparent;
    border-right-color: #2b2d31;
    border-left: 0;
}
.chat-bubble.own::before {
    content: '';
    position: absolute;
    right: -6px; bottom: 6px;
    border: 6px solid transparent;
    border-left-color: #e05500;
    border-right: 0;
}

.chat-bubble-text {
    font-size: .9rem;
    /* Render ** bold ** */
    white-space: pre-wrap;
}
/* Bold/italic markdown in AI messages */
.chat-bubble.other .chat-bubble-text { color: #d8d8d8; }
.chat-bubble.own .chat-bubble-text { color: #fff; }

.chat-bubble-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .3rem;
    margin-top: .3rem;
}
.chat-bubble-time {
    font-size: .65rem;
    opacity: .65;
}

/* Read receipts */
.chat-read-receipt { font-size: .7rem; }
.chat-read-receipt.sent { opacity: .5; }
.chat-read-receipt.read { color: #60efff; }

/* ── Quote/Reply block inside bubble ── */
.chat-quote-block {
    background: rgba(0,0,0,.2);
    border-left: 3px solid #ff6600;
    border-radius: 4px 8px 8px 4px;
    padding: .3rem .55rem;
    margin-bottom: .4rem;
    cursor: pointer;
    transition: background .15s;
}
.chat-quote-block:hover { background: rgba(0,0,0,.3); }
.chat-quote-user { display: block; font-size: .7rem; font-weight: 700; color: #ff9900; margin-bottom: .1rem; }
.chat-quote-text { display: block; font-size: .78rem; color: #aaa; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }

/* ── Reactions: reacted state ── */
.slack-reaction.reacted {
    background: rgba(255,102,0,.18);
    border-color: rgba(255,102,0,.5);
    color: #ff9900;
}

/* ── Quick actions on hover ── */
.chat-msg-quick-actions {
    display: flex;
    gap: .2rem;
    opacity: 0;
    transition: opacity .15s;
    align-items: center;
    margin-bottom: 4px;
}
.chat-quick-btn {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    color: #999;
    width: 26px; height: 26px;
    border-radius: 6px;
    font-size: .78rem;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all .12s;
}
.chat-quick-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.chat-quick-btn.del:hover { background: rgba(255,68,68,.15); color: #ff5555; border-color: rgba(255,68,68,.3); }

/* ── Media: image thumbnail ── */
.chat-media-wrap { margin-bottom: .35rem; }
.chat-media-thumb {
    max-width: 220px; max-height: 200px;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    border: 1px solid rgba(255,255,255,.1);
    transition: opacity .15s, transform .15s;
    object-fit: cover;
}
.chat-media-thumb:hover { opacity: .9; transform: scale(1.01); }

/* ── File pill ── */
.chat-file-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    padding: .4rem .65rem;
    font-size: .82rem;
    color: #ccc;
    margin-bottom: .35rem;
    max-width: 220px;
}
.chat-file-pill i { color: #ff9900; font-size: 1rem; flex-shrink: 0; }
.chat-file-pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 130px; }
.chat-file-size { color: #666; font-size: .72rem; flex-shrink: 0; }

/* ── Image Lightbox Modal ── */
.chat-image-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
}
.chat-image-modal.open { opacity: 1; pointer-events: all; }
.chat-image-modal img {
    max-width: 90vw; max-height: 88vh;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,.6);
    object-fit: contain;
}
.chat-image-modal-close {
    position: absolute;
    top: 1.25rem; right: 1.5rem;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
    z-index: 1;
}
.chat-image-modal-close:hover { background: rgba(255,255,255,.2); }

/* ── Context Menu ── */
.chat-context-menu {
    position: fixed;
    background: #222529;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    padding: .35rem;
    box-shadow: 0 8px 30px rgba(0,0,0,.5);
    z-index: 99998;
    min-width: 150px;
    overflow: hidden;
    animation: subtleFade .1s ease;
}
.chat-context-menu button {
    width: 100%;
    background: none;
    border: none;
    color: #ccc;
    font-size: .85rem;
    padding: .5rem .75rem;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: .55rem;
    transition: background .1s, color .1s;
}
.chat-context-menu button:hover { background: rgba(255,255,255,.07); color: #fff; }
.chat-context-menu button i { font-size: .9rem; color: #888; }

/* ── Reply bar above input ── */
.chat-reply-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255,102,0,.08);
    border-top: 1px solid rgba(255,102,0,.2);
    border-bottom: 1px solid rgba(255,102,0,.15);
    padding: .45rem .75rem;
    flex-shrink: 0;
}
.chat-reply-bar-inner { display: flex; align-items: center; gap: .5rem; flex: 1; min-width: 0; }
.chat-reply-preview { display: flex; flex-direction: column; min-width: 0; }
.chat-reply-who { font-size: .7rem; font-weight: 700; color: #ff9900; }
.chat-reply-text { font-size: .78rem; color: #888; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 400px; }
.chat-reply-cancel {
    background: none; border: none; color: #666;
    font-size: 1rem; cursor: pointer; padding: 0 .25rem;
    transition: color .15s;
    flex-shrink: 0;
}
.chat-reply-cancel:hover { color: #ff6600; }

/* ── Inline search bar ── */
.chat-search-bar {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255,255,255,.04);
    border-bottom: 1px solid rgba(255,255,255,.07);
    padding: .5rem 1rem;
    flex-shrink: 0;
}
.chat-search-bar i { color: #666; font-size: .95rem; }
.chat-search-bar input {
    flex: 1;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    color: #ddd;
    padding: .4rem .75rem;
    border-radius: 6px;
    font-size: .875rem;
    outline: none;
    transition: border .2s;
}
.chat-search-bar input:focus { border-color: rgba(255,102,0,.4); }

/* ── Full Emoji Picker Panel ── */
.emoji-picker-panel {
    position: absolute;
    bottom: 120px;
    right: 190px;
    width: 310px;
    background: #222529;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    z-index: 200;
    overflow: hidden;
    animation: subtleFade .15s ease;
}
.emoji-picker-cats {
    display: flex;
    gap: .2rem;
    padding: .5rem .6rem;
    border-bottom: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.03);
}
.ecat-btn {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    padding: .3rem;
    border-radius: 6px;
    transition: background .1s, transform .1s;
    opacity: .6;
}
.ecat-btn:hover { background: rgba(255,255,255,.07); opacity: 1; transform: scale(1.15); }
.ecat-btn.active { background: rgba(255,102,0,.15); opacity: 1; }
.emoji-picker-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 1px;
    padding: .5rem .6rem;
    max-height: 170px;
    overflow-y: auto;
}
.epicker-emoji {
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    padding: .2rem;
    border-radius: 5px;
    transition: background .08s, transform .08s;
    line-height: 1;
}
.epicker-emoji:hover { background: rgba(255,255,255,.08); transform: scale(1.2); }

/* ── AVA AI special styling ── */
.chat-bubble-avatar[style*="ff6600"] {
    box-shadow: 0 0 12px rgba(255,102,0,.4);
    animation: aiPulse 2s infinite;
}
@keyframes aiPulse {
    0%, 100% { box-shadow: 0 0 8px rgba(255,102,0,.3); }
    50% { box-shadow: 0 0 16px rgba(255,102,0,.6); }
}

/* AVA typing indicator */
#slackTypingIndicator {
    font-style: italic;
    color: #888;
    font-size: .8rem;
    padding: .2rem 1.25rem .4rem;
}

/*  WhatsApp-Style Chat Bubbles  */
.slack-msg { display:flex; gap:.75rem; align-items:flex-start; padding:.4rem .75rem; border-radius:6px; }
.slack-msg.own  { flex-direction:row-reverse; }
.slack-msg.other { flex-direction:row; }
.msg-avatar { width:38px;height:38px;border-radius:50%;background:#2a2a2a;color:#ff6600;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1rem;flex-shrink:0; }
.msg-bubble { max-width:72%;padding:.65rem .9rem;border-radius:16px;position:relative; line-height:1.5; }
.own-bubble  { background:#ff6600;color:#fff;border-bottom-right-radius:4px; }
.other-bubble { background:#2b2b2b;color:#ddd;border-bottom-left-radius:4px; }
.msg-text { font-size:.9rem; word-break:break-word; }
.msg-username { font-size:.72rem;font-weight:700;color:#ff9900;margin-bottom:.2rem; }
.msg-meta { font-size:.68rem;margin-top:.3rem;text-align:right;opacity:.65; }
.own-meta { color:rgba(255,255,255,.7); }
.reaction-pill { background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:12px;padding:2px 8px;font-size:.8rem;cursor:pointer;display:inline-flex;align-items:center;gap:3px; }
.slack-reactions { display:flex;gap:.25rem;flex-wrap:wrap;margin-top:.35rem; }

/*  Client Tier Badges  */
.tier-badge { display:inline-block;padding:2px 10px;border-radius:20px;font-size:.72rem;font-weight:700;letter-spacing:.5px; }
.tier-vip     { background:rgba(255,215,0,.15);color:#D4A900;border:1px solid rgba(255,215,0,.3); }
.tier-important { background:rgba(59,130,246,.15);color:#3B82F6;border:1px solid rgba(59,130,246,.3); }
.tier-regular  { background:rgba(34,197,94,.15);color:#16A34A;border:1px solid rgba(34,197,94,.3); }
.tier-project  { background:rgba(168,85,247,.15);color:#9333EA;border:1px solid rgba(168,85,247,.3); }

/* ═══════════════════
   ASANA-STYLE TICKET BOARD — Enhanced v2.0
 */

/* Board container */
#ticketBoard {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    min-height: 500px;
    align-items: start;
}
.kanban-column {
    background: #F6F7F9;
    border-radius: 12px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    min-height: 200px;
    transition: background .15s;
}
.kanban-column.drag-over { background: rgba(255,102,0,.05); border-color: rgba(255,102,0,.3); }

.kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .85rem 1rem .6rem;
    border-bottom: 1px solid var(--border);
}
.kanban-col-title {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
    display: flex;
    align-items: center;
    gap: .45rem;
}
.kanban-col-indicator {
    width: 9px; height: 9px;
    border-radius: 50%;
}
.kanban-col-count {
    font-size: .72rem;
    font-weight: 700;
    background: rgba(0,0,0,.08);
    color: #555;
    border-radius: 20px;
    min-width: 20px;
    text-align: center;
    padding: 1px 6px;
}

/* k-card: enhanced Asana ticket card */
.k-card {
    margin: .45rem .5rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .85rem 1rem;
    cursor: pointer;
    transition: transform .18s, box-shadow .18s, border-color .18s;
    user-select: none;
    position: relative;
}
.k-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    border-color: rgba(255,102,0,.2);
}
.k-card.dragging { opacity: .5; transform: scale(.96); }

.k-card-title {
    font-weight: 600;
    font-size: .9rem;
    color: #111;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .5rem;
}
.k-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex-wrap: wrap;
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px solid #F0F0F0;
}
.kcf-left, .kcf-right { display: flex; align-items: center; gap: .4rem; }
.k-pri-badge {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 2px 7px;
    border-radius: 20px;
}
.k-pri-high  { background: rgba(255,68,68,.1); color:#e33; border:1px solid rgba(255,68,68,.25); }
.k-pri-medium{ background: rgba(245,158,11,.1); color:#d97706; border:1px solid rgba(245,158,11,.2); }
.k-pri-low   { background: rgba(34,197,94,.1); color:#15803d; border:1px solid rgba(34,197,94,.2); }

.k-assignee-pill {
    font-size: .72rem;
    background: #F3F4F6;
    color: #374151;
    padding: 2px 7px;
    border-radius: 20px;
    display: flex; align-items: center; gap: .25rem;
}
.k-due-pill {
    font-size: .7rem;
    color: #888;
    display: flex; align-items: center; gap: .25rem;
}
.k-due-pill.overdue { color: #ff4444; font-weight: 600; }
.k-comment-count {
    font-size: .7rem;
    color: #999;
    display: flex; align-items: center; gap: .2rem;
}

/* Column colour dots */
.col-todo    .kanban-col-indicator { background: #94A3B8; }
.col-progress.kanban-col-indicator { background: #3B82F6; }
.col-review  .kanban-col-indicator { background: #F59E0B; }
.col-done    .kanban-col-indicator { background: #22C55E; }

/* Add Task inline button inside column */
.kanban-add-task-btn {
    margin: .35rem .5rem .6rem;
    width: calc(100% - 1rem);
    background: none;
    border: 1px dashed rgba(0,0,0,.12);
    border-radius: 8px;
    padding: .5rem;
    font-size: .8rem;
    color: #999;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    transition: background .15s, color .15s, border-color .15s;
}
.kanban-add-task-btn:hover { background: rgba(255,102,0,.05); color: #ff6600; border-color: rgba(255,102,0,.3); }

/* 
   USER MANAGEMENT TABLE — Enhanced
 */

.user-avatar-cell {
    display: flex;
    align-items: center;
    gap: .65rem;
}
.user-avatar-circle {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff6600, #e05500);
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: .85rem; color: #fff;
    flex-shrink: 0;
    font-family: var(--font-heading);
}
.user-row-name { font-weight: 600; font-size: .9rem; color: #111; }
.user-row-email { font-size: .75rem; color: #999; }

/* Add Client tier card selector */
.tier-select-btn {
    transition: transform .15s, box-shadow .15s;
    position: relative;
}
.tier-select-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.tier-select-btn input:checked ~ div .tier-checkmark,
.tier-select-btn.selected::after {
    content: '';
    position: absolute;
    top: .4rem; right: .5rem;
    font-size: .75rem;
    font-weight: 800;
    color: inherit;
}
.tier-select-btn.active-tier { box-shadow: 0 0 0 2px currentColor; transform: translateY(-1px); }

/*  ROLE-BASED PRIVACY  */
body:not(.role-superadmin) .superadmin-only-col { display: none !important; }
body.role-author .not-author-col { display: none !important; }

/*  AMAZON BOX (CARDBOARD STYLE)  */
.amazon-box {
    background: #d4a76a; /* Cardboard brown */
    background: linear-gradient(145deg, #e3be8b, #c19459);
    border: 1px solid #b3864d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 
                0 4px 6px rgba(0,0,0,0.1), 
                0 1px 3px rgba(0,0,0,0.08);
    position: relative;
    padding: 1.5rem;
    border-radius: 4px; /* Sharper edges for boxes */
}
.amazon-box::before {
    content: "";
    position: absolute;
    top: 50%; left: 0; right: 0;
    height: 40px;
    background: rgba(0,0,0,0.03); /* Subtle tape overlay */
    transform: translateY(-50%);
    pointer-events: none;
}
.amazon-box-tape {
    position: absolute;
    top: 0; left: 50%;
    width: 40px; height: 100%;
    background: rgba(0,0,0,0.05); /* Vertical tape */
    transform: translateX(-50%);
    box-shadow: 1px 0 3px rgba(0,0,0,0.05);
}

/*  BLOG RENDERING FIX (MIDI TEXT)  */
.blog-content, #tab-blog .k-card-desc {
    word-break: break-word;
    overflow-wrap: break-word;
    line-height: 1.6;
    letter-spacing: 0.01em;
}

/* Fix Add User Modal Overflow */
#addUserModal .modal-content {
    max-height: 80vh;
    overflow-y: auto;
}