:root{
    
    --brand-primary:#2563eb;
    --brand-primary-dark:#1d4ed8;
    --brand-primary-light:#4f8cff;
    --brand-accent:#0ea5b7;      
    --brand-navy:#111a2e;        
    --brand-navy-2:#1b2540;

    --danger:#e0453f;
    --warning:#f39c12;
    --success:#28c76f;
    --star:#f5a623;

    --radius:10px;
    --radius-sm:6px;
    --shadow-sm:0 1px 3px rgba(17,26,46,.08);
    --shadow-md:0 6px 24px rgba(17,26,46,.14);
    --shadow-lg:0 16px 46px rgba(17,26,46,.22);

    --bg-app:#eef1f7;
    --bg-card:#ffffff;
    --border:#dde2ec;
    --border-soft:#e8ebf3;
    --text:#1e2433;
    --text-muted:#6b7280;
    --text-faint:#9aa1b0;

    --row-hover:#f2f5fc;
    --row-selected:#e3ecff;
    --row-unread-bar:var(--brand-primary);
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;font-family:'Segoe UI',Roboto,Arial,sans-serif;background:var(--bg-app);color:var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100vw;}
#app,.app-shell{max-width:100vw;}
#app{height:100%;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}
::selection{background:var(--brand-primary-light);color:#fff;}


*::-webkit-scrollbar{width:9px;height:9px;}
*::-webkit-scrollbar-thumb{background:#c7cfdf;border-radius:6px;}
*::-webkit-scrollbar-thumb:hover{background:#aeb8cc;}
*::-webkit-scrollbar-track{background:transparent;}

/* ========================= LOGIN SCREEN ========================= */
.login-screen{
    height:100%;display:flex;align-items:center;justify-content:center;
    background:
        radial-gradient(circle at 15% 20%, rgba(79,140,255,.25), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(14,165,183,.25), transparent 45%),
        linear-gradient(135deg, var(--brand-navy) 0%, var(--brand-primary-dark) 60%, var(--brand-primary-light) 130%);
    padding:20px;
}
.login-shell{display:flex;flex-direction:column;align-items:center;gap:16px;}
.login-card{
    background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);
    padding:38px 36px 32px;width:380px;
}
.login-mail-icon{
    width:56px;
    height:56px;
    margin:0 auto 10px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--brand-primary-light),var(--brand-primary-dark));
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 6px 16px rgba(37,99,235,.35);
}
.login-brand{display:flex;align-items:center;justify-content:center;margin-bottom:6px;}
.login-logo{height:44px;max-width:220px;object-fit:contain;}
.login-sub{color:var(--text-muted);font-size:13.5px;margin:2px 0 22px;text-align:center;}
.login-error{
    background:#fdecea;color:var(--danger);font-size:13px;
    padding:10px 12px;border-radius:var(--radius-sm);margin-bottom:14px;border:1px solid #f6cbc8;
}
#login-form label{font-size:12.5px;color:var(--text-muted);display:block;margin:14px 0 5px;font-weight:600;}
#login-form input{
    width:100%;padding:11px 13px;border:1.5px solid var(--border);
    border-radius:var(--radius-sm);font-size:14px;transition:.15s;
}
#login-form input:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(37,99,235,.12);}
#login-btn{
    width:100%;margin-top:22px;padding:12px;
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));
    color:#fff;border:none;border-radius:var(--radius-sm);font-size:15px;font-weight:700;
    cursor:pointer;transition:.2s;letter-spacing:.2px;
}
#login-btn:hover{filter:brightness(1.08);box-shadow:var(--shadow-md);}
#login-btn:disabled{opacity:.6;cursor:default;}
.login-footer{color:rgba(255,255,255,.75);font-size:12px;text-align:center;}

/* ========================= APP SHELL ========================= */
.app-shell{height:100%;display:flex;flex-direction:column;}

/* ---- Masthead ---- */
.masthead{
    height:80px;flex-shrink:0;display:flex;align-items:center;gap:16px;
    background:linear-gradient(90deg,var(--brand-navy) 0%,var(--brand-navy-2) 100%);
    color:#fff;padding:0 18px;box-shadow:0 2px 8px rgba(0,0,0,.18);position:relative;z-index:20;
}
.masthead-left{display:flex;align-items:center;gap:14px;flex-shrink:0;}
.masthead-left > a{display:flex;align-items:center;line-height:0;transition:opacity .15s;}
.masthead-left > a:hover{opacity:.85;}
.masthead-logo{height:48px;max-width:210px;object-fit:contain;}
.masthead-title{font-size:17px;font-weight:600;color:#dbe6ff;white-space:nowrap;letter-spacing:.2px;margin-left:24px;}
.masthead-mail-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:30px;height:30px;flex:0 0 30px;border-radius:8px;
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
    font-size:15px;color:#dbe6ff;line-height:1;
}
.mobile-only{display:none;}

.masthead-search{
    flex:1;max-width:480px;min-width:0;display:flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);
    border-radius:20px;padding:0 14px;height:34px;transition:.15s;
}
.masthead-search:focus-within{background:#fff;border-color:#fff;}
.masthead-search:focus-within .search-icon{filter:none;opacity:.55;}
.search-icon{font-size:13px;opacity:.7;flex-shrink:0;}
.masthead-search input{
    flex:1;min-width:0;background:transparent;border:none;outline:none;color:#fff;font-size:13.5px;height:100%;
}
.masthead-search:focus-within input{color:var(--text);}
.masthead-search input::placeholder{color:rgba(255,255,255,.65);}
.masthead-search:focus-within input::placeholder{color:var(--text-faint);}
.search-clear{
    background:none;border:none;color:inherit;opacity:.7;cursor:pointer;font-size:16px;line-height:1;
    padding:0 2px;flex-shrink:0;
}
.search-clear:hover{opacity:1;}

.masthead-right{display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto;}
.user-menu{flex-shrink:0;}
.icon-btn{
    width:34px;height:34px;border-radius:50%;border:none;background:transparent;color:#fff;
    font-size:16px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center;
}
.icon-btn.ghost:hover{background:rgba(255,255,255,.15);}

.user-menu{position:relative;}
.user-chip{
    display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.14);border-radius:20px;padding:4px 10px 4px 4px;
    cursor:pointer;color:#fff;transition:.15s;
}
.user-chip:hover{background:rgba(255,255,255,.16);}
.user-avatar{
    width:26px;height:26px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--brand-accent),var(--brand-primary-light));
    color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;
}
.user-email{font-size:12.5px;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chevron{font-size:9px;opacity:.75;}
.user-dropdown{
    position:absolute;right:0;top:calc(100% + 8px);background:#fff;border-radius:var(--radius-sm);
    box-shadow:var(--shadow-md);min-width:160px;padding:6px;display:none;z-index:50;border:1px solid var(--border-soft);
}
.user-dropdown.open{display:block;}
.user-dropdown a{
    display:flex;align-items:center;gap:8px;padding:9px 12px;font-size:13.5px;color:var(--text);text-decoration:none;border-radius:var(--radius-sm);
}
.user-dropdown a:hover{background:var(--row-hover);}
.logout-icon{flex-shrink:0;vertical-align:middle;}

/* ---- Body layout ---- */
.app-body{flex:1;display:flex;min-height:0;position:relative;}

/* ---- Sidebar / folder tree ---- */
.sidebar{
    width:220px;flex-shrink:0;
    background:linear-gradient(180deg,var(--brand-navy) 0%,var(--brand-navy-2) 100%);
    border-right:2px solid var(--brand-accent);
    display:flex;flex-direction:column;padding:14px 10px;overflow-y:auto;overflow-x:hidden;
    transition:width .2s ease,padding .2s ease,border-width .2s ease;
}
.sidebar.collapsed{width:0;padding:0;border-right-width:0;}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.35);}

/* ---- Edge handle: tombol tampilkan/sembunyikan sidebar di tepi tengah ----
   Catatan: horizontal offset pakai margin-left tetap (-11px = separuh lebar
   tombol 22px), BUKAN transform translateX(-50%). Alasannya: translateX(-50%)
   ikut menggeser tombol relatif terhadap `left` yang sedang berubah, jadi
   saat sidebar collapsed (left:0) separuh tombol malah "ketarik" keluar
   layar (nilai negatif) dan cuma kelihatan seuntil tipis di tepi. Dengan
   margin-left tetap, tombol selalu utuh terlihat di kedua state. */
.sidebar-edge-toggle{
    position:absolute;
    top:50%;
    left:220px;
    margin-left:-11px;
    transform:translateY(-50%);
    width:22px;height:46px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));
    color:#fff;border:2px solid var(--brand-accent);border-radius:8px;
    cursor:pointer;padding:0;font-size:14px;line-height:1;
    box-shadow:0 2px 8px rgba(0,0,0,.28);
    z-index:85;transition:left .2s ease,margin-left .2s ease,background .15s;
}
.sidebar-edge-toggle:hover{background:linear-gradient(135deg,var(--brand-primary-light),var(--brand-primary));}
.sidebar.collapsed ~ .sidebar-edge-toggle{left:0;margin-left:0;}
.compose-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));
    color:#fff;border:none;border-radius:var(--radius-sm);
    padding:11px;font-size:14px;font-weight:700;cursor:pointer;margin-bottom:16px;
    box-shadow:0 3px 10px rgba(37,99,235,.28);transition:.15s;white-space:nowrap;
}
.compose-btn:hover{filter:brightness(1.07);transform:translateY(-1px);}
.compose-icon{font-size:15px;}
.compose-icon-envelope{display:inline-flex;align-items:center;}
/* Kotak ikon berukuran & posisi tengah SAMA untuk ketiga tombol sidebar
   (Tulis Pesan Baru / Kontak / Tanda Tangan) supaya tidak "jomplang" --
   sebelumnya tiap ikon SVG punya viewBox & bobot visual berbeda-beda
   sehingga terlihat tidak sejajar satu sama lain. */
.sidebar-icon-box{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;flex:0 0 19px;}
.sidebar-icon-box svg{display:block;}
.contacts-btn{
    background:rgba(255,255,255,.06);color:#dbe6ff;
    border:1px solid rgba(255,255,255,.18);box-shadow:none;margin-top:-8px;
}
.contacts-btn:hover{background:rgba(255,255,255,.14);color:#fff;filter:none;}
.contacts-icon{color:#22d3ee;display:inline-flex;align-items:center;}
.contacts-btn:hover .contacts-icon{color:#67e8f9;}

.tree-label{
    font-size:10.5px;font-weight:700;color:rgba(255,255,255,.4);letter-spacing:.6px;
    padding:10px 8px 6px;white-space:nowrap;
}
.tree-label-row{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 0;}
.tree-label-row .tree-label{padding:6px 6px 6px 6px;}
.tree-label-add-btn{
    flex-shrink:0;width:20px;height:20px;border-radius:50%;border:none;cursor:pointer;
    background:rgba(255,255,255,.12);color:#dbe6ff;font-size:14px;line-height:1;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;transition:.15s;margin-right:2px;
}
.tree-label-add-btn:hover{background:var(--brand-primary);color:#fff;}
.folder-nav{display:flex;flex-direction:column;gap:1px;}
.folder-nav-other{}
.folder-item{
    display:flex;align-items:center;gap:8px;justify-content:space-between;
    padding:8px 9px;border-radius:var(--radius-sm);cursor:pointer;
    color:#dbe6ff;font-size:13.5px;transition:.12s;user-select:none;white-space:nowrap;
}
.folder-item .folder-main{display:flex;align-items:center;gap:8px;overflow:hidden;}
.folder-item .folder-icon{font-size:14px;flex-shrink:0;width:16px;text-align:center;}
.folder-item .folder-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.folder-item:hover{background:rgba(255,255,255,.08);}
.folder-item.active{background:rgba(255,255,255,.14);color:#fff;font-weight:700;}
.folder-item.active .folder-icon{color:var(--brand-accent);}
.folder-item .count{
    font-size:11px;font-weight:700;color:#dbe6ff;background:rgba(255,255,255,.1);
    border-radius:10px;padding:1px 7px;flex-shrink:0;
}
.folder-item.active .count{background:var(--brand-primary);color:#fff;}
.folder-item.unread-bold{font-weight:700;}
.folder-item[data-key="starred"] .folder-icon{color:var(--star);}
.folder-item.custom-folder-item .folder-icon{color:#38bdf8;}
.folder-icon.custom-folder-icon{display:inline-flex;align-items:center;justify-content:center;}
.folder-item .folder-edit-btn{
    flex-shrink:0;width:20px;height:20px;border-radius:50%;border:none;background:transparent;
    color:#dbe6ff;font-size:12px;cursor:pointer;display:none;align-items:center;justify-content:center;
    opacity:.8;
}
.folder-item.custom-folder-item:hover .folder-edit-btn{display:inline-flex;}
.folder-item .folder-edit-btn:hover{background:rgba(255,255,255,.18);opacity:1;}
.other-folders-empty{padding:6px 9px;font-size:12px;color:rgba(255,255,255,.4);white-space:normal;}

/* ---- Date filter panel ---- */
.date-filter-box{
    display:flex;flex-direction:column;gap:8px;
    padding:10px 9px 12px;margin-top:2px;
}
.date-filter-field{display:flex;flex-direction:column;gap:4px;}
.date-filter-field span{
    font-size:11px;font-weight:600;color:rgba(255,255,255,.55);
}
.date-filter-field input[type="date"]{
    border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-sm);
    padding:7px 8px;font-size:12.5px;color:var(--text);background:#fff;
    font-family:inherit;cursor:pointer;
}
.date-filter-field input[type="date"]:focus{
    outline:none;border-color:var(--brand-accent);
    box-shadow:0 0 0 2px rgba(14,165,183,.25);
}
.date-filter-actions{display:flex;gap:6px;margin-top:2px;}
.date-filter-btn{
    flex:1;border:1px solid rgba(255,255,255,.18);border-radius:var(--radius-sm);
    background:rgba(255,255,255,.06);color:#dbe6ff;font-size:12px;font-weight:700;
    padding:7px 6px;cursor:pointer;transition:.12s;
}
.date-filter-btn:hover{background:rgba(255,255,255,.14);color:#fff;}
.date-filter-btn.primary{
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));
    color:#fff;border:none;box-shadow:0 2px 6px rgba(37,99,235,.25);
}
.date-filter-btn.primary:hover{filter:brightness(1.07);}
.date-filter-btn.active-filter{
    border-color:var(--brand-accent);color:#fff;background:rgba(14,165,183,.22);
}

/* ---- Pemisah tipis sebelum tombol Pengaturan, supaya tidak dempet ke
   tombol Terapkan/Reset filter tanggal di atasnya ---- */
.sidebar-divider{
    border-top:1px solid rgba(255,255,255,.12);
    margin:14px 2px 12px;
}
.sidebar-settings-btn-standalone{margin-top:0;}

/* ---- Sidebar footer: account + logout ---- */
.sidebar-footer{
    margin-top:auto;padding-top:14px;
    border-top:1px solid rgba(255,255,255,.12);
}
.sidebar-account{
    display:flex;align-items:center;gap:9px;
    padding:6px 8px 12px;overflow:hidden;
}
.sidebar-avatar{
    flex-shrink:0;width:30px;height:30px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));
    color:#fff;font-size:12.5px;font-weight:700;
}
.sidebar-account-email{
    font-size:12.5px;color:rgba(255,255,255,.7);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.sidebar-logout-btn{
    display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
    background:rgba(220,38,38,.12);color:#ffb4b4;
    border:1px solid rgba(220,38,38,.35);border-radius:var(--radius-sm);
    padding:10px;font-size:13.5px;font-weight:700;cursor:pointer;
    transition:.12s;white-space:nowrap;
}
.sidebar-logout-btn:hover{background:rgba(220,38,38,.22);color:#fff;}
.sidebar-logout-btn .compose-icon{font-size:14px;display:inline-flex;align-items:center;}

/* ---- Main panel ---- */
.main-panel{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg-card);}

/* action toolbar */
.app-toolbar{
    display:flex;align-items:center;gap:4px;padding:8px 14px;
    background:#fff;border-bottom:1px solid var(--border);flex-wrap:nowrap;overflow-x:auto;
}
.select-all-wrap{display:flex;align-items:center;padding:0 4px;cursor:pointer;}
.select-all-wrap input{width:15px;height:15px;cursor:pointer;accent-color:var(--brand-primary);}
.toolbar-divider{width:1px;align-self:stretch;background:var(--border);margin:0 6px;flex-shrink:0;}
.tb-btn{
    display:flex;align-items:center;gap:6px;background:none;border:none;
    color:var(--text-muted);font-size:12.5px;font-weight:600;padding:7px 10px;border-radius:var(--radius-sm);
    cursor:pointer;transition:.12s;white-space:nowrap;flex-shrink:0;
}
.tb-btn:hover:not(:disabled){background:var(--row-hover);color:var(--text);}
.tb-btn:disabled{opacity:.38;cursor:default;}
.tb-btn[data-action="delete"]:hover:not(:disabled){color:var(--danger);}
.tb-btn[data-action="star"]:hover:not(:disabled){color:var(--star);}
.tb-select-wrap select{
    border:1px solid var(--border);border-radius:var(--radius-sm);padding:6px 8px;
    font-size:12.5px;color:var(--text-muted);background:#fff;cursor:pointer;max-width:150px;
}
.tb-select-wrap select:disabled{opacity:.5;cursor:default;}
.toolbar-spacer{flex:1;}
.pagination{display:flex;align-items:center;gap:2px;flex-shrink:0;}
.pagination-info{font-size:12px;color:var(--text-muted);margin-right:4px;white-space:nowrap;}
.pagination .icon-btn{color:var(--text-muted);width:28px;height:28px;}
.pagination .icon-btn:hover{background:var(--row-hover);}
.pagination .icon-btn:disabled{opacity:.35;cursor:default;background:none;}

.mail-view{flex:1;display:flex;flex-direction:column;min-height:0;min-width:0;}

/* content split: list + reader */
.content-split{flex:1;display:flex;overflow:hidden;min-height:0;}

/* ========================= DASHBOARD ========================= */
.dashboard-nav-btn{background:rgba(255,255,255,.06);color:#dbe6ff;border:1px solid rgba(255,255,255,.18);box-shadow:none;}
.dashboard-nav-btn:hover{background:rgba(255,255,255,.14);color:#fff;filter:none;}
.dashboard-nav-btn.active{background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));color:#fff;border-color:transparent;box-shadow:0 3px 10px rgba(37,99,235,.28);}

.dashboard-view{flex:1;min-height:0;display:flex;flex-direction:column;background:var(--bg-app);}
.dashboard-scroll{flex:1;overflow-y:auto;padding:22px 26px 34px;}
.dashboard-header{
    display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
    margin-bottom:22px;flex-wrap:wrap;
}
.dashboard-greeting{font-size:21px;font-weight:700;color:var(--text);}
.dashboard-subtitle{font-size:13px;color:var(--text-muted);margin-top:3px;}
.dashboard-refresh-btn{
    display:flex;align-items:center;gap:6px;background:var(--bg-card);color:var(--text-muted);
    border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px 13px;
    font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s;white-space:nowrap;
}
.dashboard-refresh-btn:hover{background:var(--row-hover);color:var(--text);}
.dashboard-refresh-btn.spinning{opacity:.6;pointer-events:none;}

.dashboard-section-label{
    font-size:11px;font-weight:700;color:var(--text-faint);letter-spacing:.6px;
    margin:26px 0 10px;
}
.dashboard-section-label:first-of-type{margin-top:0;}

.dashboard-quick-actions{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.dashboard-action-card{
    display:flex;flex-direction:column;align-items:flex-start;gap:10px;
    background:var(--bg-card);border:1px solid var(--border);border-radius:12px;
    padding:14px;cursor:pointer;transition:.15s;text-align:left;font-family:inherit;
}
.dashboard-action-card:hover{border-color:var(--brand-primary-light);box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.dashboard-action-icon{
    width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
    background:rgba(37,99,235,.1);color:var(--brand-primary);flex-shrink:0;
}
.dashboard-action-label{font-size:13.5px;font-weight:700;color:var(--text);}
.dashboard-action-desc{font-size:11.5px;color:var(--text-muted);}

.dashboard-stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;}
.dashboard-stat-card{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    background:var(--bg-card);border:1px solid var(--border);border-radius:12px;
    padding:14px 16px;cursor:pointer;transition:.15s;font-family:inherit;text-align:left;
}
.dashboard-stat-card:hover{border-color:var(--brand-primary-light);box-shadow:var(--shadow-sm);transform:translateY(-1px);}
.dashboard-stat-main{display:flex;align-items:center;gap:10px;overflow:hidden;}
.dashboard-stat-icon{font-size:17px;flex-shrink:0;width:20px;text-align:center;}
.dashboard-stat-label{font-size:13px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dashboard-stat-count{font-size:18px;font-weight:800;color:var(--brand-primary);flex-shrink:0;}
.dashboard-stat-card.has-unread .dashboard-stat-count{color:var(--danger);}
.dashboard-stat-skeleton,.dashboard-recent-empty{
    grid-column:1/-1;padding:16px;color:var(--text-muted);font-size:13px;
    background:var(--bg-card);border:1px dashed var(--border);border-radius:12px;text-align:center;
}

.dashboard-recent{
    display:flex;flex-direction:column;background:var(--bg-card);
    border:1px solid var(--border);border-radius:12px;overflow:hidden;
}
.dashboard-recent-item{
    display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;
    border-bottom:1px solid var(--border-soft);transition:.12s;
}
.dashboard-recent-item:last-child{border-bottom:none;}
.dashboard-recent-item:hover{background:var(--row-hover);}
.dashboard-recent-item.unread .dashboard-recent-subject{font-weight:700;}
.dashboard-recent-avatar{
    flex-shrink:0;width:34px;height:34px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));
    color:#fff;font-size:12px;font-weight:700;
}
.dashboard-recent-body{flex:1;overflow:hidden;}
.dashboard-recent-from{font-size:13px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dashboard-recent-subject{font-size:12.5px;color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dashboard-recent-date{font-size:11.5px;color:var(--text-faint);flex-shrink:0;white-space:nowrap;}

@media (max-width: 600px){
    .dashboard-scroll{padding:16px 14px 26px;}
    .dashboard-greeting{font-size:18px;}
    .dashboard-quick-actions{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));}
    .dashboard-stats-grid{grid-template-columns:1fr 1fr;}
}

.message-list{
    width:380px;flex-shrink:0;overflow-y:auto;border-right:1px solid var(--border);background:#fff;
}
.msg-row{
    display:flex;align-items:flex-start;gap:9px;
    padding:11px 12px 11px 10px;border-bottom:1px solid var(--border-soft);cursor:pointer;
    transition:.12s;position:relative;border-left:3px solid transparent;
}
.msg-row:hover{background:var(--row-hover);}
.msg-row.active{background:var(--row-selected);border-left-color:var(--brand-primary);}
.msg-row.unread{border-left-color:var(--row-unread-bar);}
.msg-row.unread .msg-from,
.msg-row.unread .msg-subject{font-weight:700;color:var(--text);}
.msg-checkbox{margin-top:2px;flex-shrink:0;width:14px;height:14px;accent-color:var(--brand-primary);cursor:pointer;}
.msg-star{
    flex-shrink:0;margin-top:1px;background:none;border:none;cursor:pointer;font-size:17px;
    color:var(--border);padding:0;line-height:1;
}
.msg-star.on{color:var(--star);}
.msg-star:hover{color:var(--star);}
.msg-body-col{flex:1;min-width:0;}
.msg-row .msg-from{
    font-size:13px;color:var(--text-muted);display:flex;justify-content:space-between;gap:6px;
}
.msg-row .msg-from-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.msg-row .msg-subject{
    font-size:13.5px;margin:3px 0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text);
}
.msg-row .msg-date{font-size:11px;color:var(--text-faint);flex-shrink:0;}
.msg-row .msg-flags{display:inline-flex;gap:3px;margin-right:4px;}
mark.search-hit{
    background:rgba(14,165,183,.32);color:inherit;border-radius:2px;padding:0 1px;
    box-shadow:0 0 0 1px rgba(14,165,183,.25);
}
.msg-row.unread mark.search-hit{background:rgba(37,99,235,.30);box-shadow:0 0 0 1px rgba(37,99,235,.25);}
.msg-empty, .reader-empty{
    display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;
    color:var(--text-faint);font-size:13.5px;gap:10px;padding:20px;text-align:center;
}
.reader-empty-icon{font-size:34px;opacity:.5;}

.spinner{
    width:22px;height:22px;flex-shrink:0;border-radius:50%;
    border:3px solid var(--border);border-top-color:var(--brand-primary);
    animation:ft-spin .7s linear infinite;
}
.spinner-sm{
    width:14px;height:14px;border-width:2px;
    display:inline-block;vertical-align:-2.5px;margin-right:8px;
}
@keyframes ft-spin{to{transform:rotate(360deg);}}

/* ---- Reading pane ---- */
.message-reader{flex:1;overflow-y:auto;background:#fff;display:flex;flex-direction:column;min-width:0;}
.reader-toolbar{
    display:flex;align-items:center;gap:8px;padding:10px 20px;border-bottom:1px solid var(--border-soft);flex-shrink:0;
}
.reader-toolbar .tb-btn{
    padding:8px 14px;border:1px solid var(--border);border-radius:20px;
    background:var(--bg-card);color:var(--text);font-weight:700;
}
.reader-toolbar .tb-btn:hover{background:var(--row-hover);border-color:var(--brand-primary);}
.reader-toolbar .tb-btn[data-raction="delete"]{color:var(--danger);}
.reader-toolbar .tb-btn[data-raction="delete"]:hover{border-color:var(--danger);background:rgba(220,38,38,.08);}
.reader-toolbar .toolbar-divider{margin:0 2px;}
.reader-content{padding:20px 26px 30px;flex:1;}
.reader-subject{font-size:18px;font-weight:700;margin:0 0 14px;color:var(--text);line-height:1.35;}
.reader-meta{
    display:flex;gap:12px;align-items:flex-start;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--border-soft);
}
.reader-avatar{
    width:38px;height:38px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--brand-accent),var(--brand-primary-light));
    color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
}
.reader-meta-text{font-size:13px;color:var(--text-muted);line-height:1.75;}
.reader-meta-text b{color:var(--text);font-weight:600;}
.reader-body-frame{width:100%;min-height:200px;border:0;}
.reader-attachments{margin-top:20px;border-top:1px solid var(--border-soft);padding-top:14px;}
.reader-attachments-label{font-size:12px;color:var(--text-faint);font-weight:700;margin-bottom:8px;letter-spacing:.4px;}
.attachment-chip{
    display:inline-flex;align-items:center;gap:7px;background:var(--bg-app);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:8px 13px;font-size:13px;margin:0 8px 8px 0;text-decoration:none;color:var(--text);transition:.12s;
}
.attachment-chip:hover{border-color:var(--brand-primary);color:var(--brand-primary-dark);background:#fff;box-shadow:var(--shadow-sm);}

/* Lampiran di atas email (kartu preview/download) */
.reader-attachments-top{margin-top:0;margin-bottom:18px;border-top:0;border-bottom:1px solid var(--border-soft);padding-top:0;padding-bottom:16px;}
.attachment-grid{display:flex;flex-wrap:wrap;gap:10px;}
.attachment-card{
    display:flex;align-items:center;gap:10px;background:var(--bg-app);
    border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:9px 10px;min-width:190px;max-width:260px;transition:.12s;
}
.attachment-card:hover{border-color:var(--brand-primary);box-shadow:var(--shadow-sm);background:#fff;}
.attachment-card-icon{font-size:22px;line-height:1;flex-shrink:0;}
.attachment-card-meta{min-width:0;flex:1;}
.attachment-card-name{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.attachment-card-size{font-size:11.5px;color:var(--text-faint);margin-top:1px;}
.attachment-card-actions{display:flex;gap:4px;flex-shrink:0;}
.attachment-action-btn{
    display:flex;align-items:center;justify-content:center;
    width:28px;height:28px;border-radius:7px;border:1px solid var(--border);
    background:#fff;font-size:13px;cursor:pointer;text-decoration:none;color:var(--text);
    transition:.12s;
}
.attachment-action-btn:hover{border-color:var(--brand-primary);background:var(--brand-primary-light);}

/* Modal pratinjau lampiran (lightbox) */
.attachment-preview-modal{
    position:fixed;inset:0;background:rgba(17,26,46,.65);
    display:none;align-items:center;justify-content:center;padding:24px;z-index:300;
}
.attachment-preview-modal.open{display:flex;}
.attachment-preview-box{
    width:100%;max-width:900px;max-height:88vh;background:#fff;border-radius:var(--radius-md);
    box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;
}
.attachment-preview-header{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:12px 16px;background:linear-gradient(90deg,var(--brand-navy),var(--brand-navy-2));color:#fff;flex-shrink:0;
}
.attachment-preview-title{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.attachment-preview-header-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.attachment-preview-download{
    display:inline-flex;align-items:center;gap:5px;font-size:12.5px;color:#fff;text-decoration:none;
    background:rgba(255,255,255,.15);border-radius:6px;padding:6px 10px;transition:.12s;
}
.attachment-preview-download:hover{background:rgba(255,255,255,.28);}
.attachment-preview-close{
    background:transparent;border:0;color:#fff;font-size:16px;cursor:pointer;
    width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:6px;
}
.attachment-preview-close:hover{background:rgba(255,255,255,.15);}
.attachment-preview-body{
    flex:1;overflow:auto;background:var(--bg-app);
    display:flex;align-items:center;justify-content:center;padding:16px;min-height:200px;
}
.attachment-preview-body img{max-width:100%;max-height:78vh;border-radius:6px;box-shadow:var(--shadow-sm);}
.attachment-preview-body iframe{width:100%;height:78vh;border:0;background:#fff;border-radius:6px;}
.attachment-preview-body video{max-width:100%;max-height:78vh;border-radius:6px;}
.attachment-preview-body audio{width:100%;}
.attachment-preview-unsupported{font-size:13.5px;color:var(--text-muted);text-align:center;padding:30px;}

/* Pratinjau dokumen kantor: Word (mammoth.js), Excel (SheetJS), PowerPoint (JSZip) */
.attachment-preview-loading{font-size:13px;color:var(--text-muted);text-align:center;padding:30px;display:flex;flex-direction:column;align-items:center;gap:10px;}
.attachment-preview-spinner{width:26px;height:26px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--brand-primary);animation:ftSpin .8s linear infinite;}
@keyframes ftSpin{to{transform:rotate(360deg);}}
.attachment-preview-error{font-size:13.5px;color:var(--danger);text-align:center;padding:30px;}

.docx-preview-wrap{background:#fff;width:100%;max-width:820px;margin:0 auto;padding:36px 44px;border-radius:6px;box-shadow:var(--shadow-sm);font-size:14px;line-height:1.55;color:#1a1a1a;overflow-x:auto;align-self:flex-start;}
.docx-preview-wrap img{max-width:100%;height:auto;}
.docx-preview-wrap table{border-collapse:collapse;}
.docx-preview-wrap table td,.docx-preview-wrap table th{border:1px solid #ccc;padding:4px 8px;}

.xlsx-preview-wrap{width:100%;height:78vh;display:flex;flex-direction:column;background:#fff;border-radius:6px;overflow:hidden;}
.xlsx-preview-tabs{display:flex;gap:2px;flex-wrap:wrap;background:var(--bg-app);padding:6px 6px 0;flex-shrink:0;border-bottom:1px solid var(--border);}
.xlsx-preview-tab{border:1px solid var(--border);border-bottom:none;background:#fff;color:var(--text-muted);font-size:12px;padding:6px 12px;border-radius:6px 6px 0 0;cursor:pointer;}
.xlsx-preview-tab.active{color:var(--brand-primary);font-weight:600;background:#fff;}
.xlsx-preview-table-wrap{flex:1;overflow:auto;}
.xlsx-preview-table{border-collapse:collapse;font-size:12.5px;width:max-content;min-width:100%;}
.xlsx-preview-table th,.xlsx-preview-table td{border:1px solid var(--border-soft);padding:4px 8px;white-space:nowrap;}
.xlsx-preview-table th{background:var(--bg-app);position:sticky;top:0;color:var(--text-muted);font-weight:600;}
.xlsx-preview-table tr:nth-child(even) td{background:#fafbfd;}

.pptx-preview-wrap{width:100%;max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:14px;align-self:flex-start;}
.pptx-preview-slide{background:#fff;border-radius:8px;box-shadow:var(--shadow-sm);padding:16px 20px;}
.pptx-preview-slide-title{font-size:11.5px;font-weight:700;color:var(--brand-primary);text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px;}
.pptx-preview-slide-body{font-size:13.5px;color:var(--text);white-space:pre-wrap;line-height:1.5;}
.pptx-preview-slide-body:empty::after{content:'(tidak ada teks pada slide ini)';color:var(--text-faint);font-style:italic;}

/* Pratinjau PDF: dirender ke <canvas> per halaman lewat PDF.js, bukan lewat
   iframe (lihat renderPdfPreview() di app.js untuk alasannya). */
.pdf-preview-wrap{width:100%;max-width:820px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;}
.pdf-preview-page{max-width:100%;height:auto;background:#fff;border-radius:4px;box-shadow:var(--shadow-sm);}
.pdf-preview-truncated-note{font-size:12.5px;color:var(--text-muted);text-align:center;padding:8px 0;}

/* Pratinjau file .txt: teks polos di dalam <pre>, bukan iframe. */
.text-preview-pre{width:100%;max-width:820px;margin:0 auto;background:#fff;border-radius:6px;box-shadow:var(--shadow-sm);padding:20px 24px;font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;font-size:12.5px;line-height:1.6;color:#1a1a1a;white-space:pre-wrap;word-break:break-word;align-self:flex-start;}

/* ========================= COMPOSE PANEL ========================= */
.compose-modal{
    position:fixed;inset:0;background:rgba(17,26,46,.45);
    display:flex;align-items:center;justify-content:center;padding:0;z-index:200;
}
.compose-box{
    width:100%;max-width:none;height:100vh;background:#fff;border-radius:0;
    box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;
}
.compose-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:12px 10px 12px 20px;background:linear-gradient(90deg,var(--brand-navy),var(--brand-navy-2));
    color:#fff;font-weight:600;font-size:14.5px;flex-shrink:0;
}
.compose-header .icon-btn{color:#fff;}
#compose-form{display:flex;flex-direction:column;padding:16px 22px 20px;gap:10px;flex:1;min-height:0;}
.compose-toolbar-row{display:flex;align-items:center;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--border);flex-shrink:0;}
.compose-cancel-btn{
    background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:9px 20px;font-weight:600;cursor:pointer;font-size:13.5px;color:var(--text-body);
}
.compose-cancel-btn:hover{background:var(--row-hover);}
.compose-field-row{display:flex;gap:0;align-items:center;flex-shrink:0;border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;}
.compose-field-row:focus-within{border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(37,99,235,.10);}
.compose-field-label{
    flex-shrink:0;width:72px;padding:10px 12px;font-size:13px;font-weight:600;color:var(--text-muted);
    background:var(--bg-app);border-right:1px solid var(--border);
}
.compose-field-row input{flex:1;border:none;border-radius:0;padding:10px 12px;font-size:13.5px;font-family:inherit;}
.compose-field-row input:focus{outline:none;box-shadow:none;}
.field-ac-wrap{position:relative;flex:1;display:flex;min-width:0;}
.field-ac-wrap input{width:100%;}
.contact-suggest{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:40;
    background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);
    box-shadow:var(--shadow-md);max-height:220px;overflow-y:auto;margin-top:4px;
}
.contact-suggest.contact-suggest-floating{position:fixed;z-index:500;margin-top:0;}

/* Panel dropdown toolbar RTE (font/emoji/karakter khusus/gaya list) dipindah ke
   <body> lewat JS supaya tidak terpotong oleh .compose-box{overflow:hidden}.
   top/left/max-height diisi inline oleh JS sesuai posisi tombol & sisa layar. */
.rte-floating-panel{position:fixed !important;z-index:500 !important;}
.contact-suggest-item{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;}
.contact-suggest-item:hover,.contact-suggest-item.active{background:var(--row-hover);}
.contact-suggest-avatar{
    flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--brand-primary-light);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:11.5px;font-weight:700;
}
.contact-suggest-info{min-width:0;}
.contact-suggest-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.contact-suggest-email{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cc-bcc-toggle{
    flex-shrink:0;background:none;border:none;border-left:1px solid var(--border);color:var(--brand-primary);font-size:12.5px;font-weight:600;
    cursor:pointer;padding:10px 14px;align-self:stretch;
}
.cc-bcc-toggle:hover{background:var(--row-hover);}
.compose-attach-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;flex-shrink:0;}
.attach-label{
    display:inline-block;font-size:12.5px;color:var(--brand-primary-dark);font-weight:600;
    cursor:pointer;padding:8px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;
}
.attach-label:hover{background:var(--row-hover);}
.attach-file-list{display:flex;flex-wrap:wrap;gap:6px;}
.attach-file-chip{
    display:inline-flex;align-items:center;gap:6px;font-size:12px;background:var(--bg-app);border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:5px 6px 5px 10px;color:var(--text-muted);
}
.attach-file-chip .attach-preview-btn{
    border:none;background:none;color:var(--brand-primary,#2563eb);cursor:pointer;font-size:13px;line-height:1;padding:2px 4px;border-radius:3px;
}
.attach-file-chip .attach-preview-btn:hover{background:rgba(37,99,235,.12);}
.attach-file-chip .attach-remove{
    border:none;background:none;color:var(--text-muted);cursor:pointer;font-size:14px;line-height:1;padding:2px 4px;border-radius:3px;
}
.attach-file-chip .attach-remove:hover{background:#fee2e2;color:#b91c1c;}
.compose-box{min-height:0;}
#compose-form{min-height:0;}

/* ---- Contacts modal (manajemen kontak email) ---- */
.contacts-modal{
    position:fixed;inset:0;background:rgba(17,26,46,.45);
    display:flex;align-items:center;justify-content:center;padding:20px;z-index:210;
}
.contacts-box{
    width:100%;max-width:760px;max-height:90vh;background:#fff;border-radius:14px;
    box-shadow:var(--shadow-lg);display:flex;flex-direction:column;overflow:hidden;
}
.contacts-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:14px 12px 14px 20px;background:linear-gradient(90deg,var(--brand-navy),var(--brand-navy-2));
    color:#fff;font-weight:700;font-size:14.5px;flex-shrink:0;
}
.contacts-header .icon-btn{color:#fff;}
.contacts-body{display:flex;flex:1;min-height:0;}
.contacts-list-pane{
    width:44%;min-width:220px;border-right:1px solid var(--border);
    display:flex;flex-direction:column;min-height:0;background:var(--bg-app);
}
.contacts-toolbar{display:flex;gap:8px;padding:12px;flex-shrink:0;}
.contacts-toolbar input{
    flex:1;min-width:0;border:1.5px solid var(--border);border-radius:var(--radius-sm);
    padding:8px 10px;font-size:13px;font-family:inherit;
}
.contacts-toolbar input:focus{outline:none;border-color:var(--brand-primary);}
.contacts-add-btn{
    flex-shrink:0;background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));
    color:#fff;border:none;border-radius:var(--radius-sm);padding:0 12px;font-size:12.5px;font-weight:700;cursor:pointer;
}
.contacts-add-btn:hover{filter:brightness(1.07);}
.contacts-list{flex:1;overflow-y:auto;padding:0 8px 10px;}
.contact-list-item{
    display:flex;align-items:center;justify-content:space-between;gap:8px;
    padding:9px 10px;border-radius:var(--radius-sm);cursor:pointer;margin-bottom:2px;transition:.12s;
}
.contact-list-item:hover{background:var(--row-hover);}
.contact-list-item.active{background:var(--row-selected);}
.contact-list-item .contact-avatar{
    width:32px;height:32px;border-radius:50%;flex-shrink:0;
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));
    color:#fff;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;
}
.contact-list-item .contact-info{flex:1;min-width:0;}
.contact-list-item .contact-name{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.contact-list-item .contact-email{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.contact-list-item .contact-quick-send{
    flex-shrink:0;width:26px;height:26px;border-radius:50%;border:none;background:transparent;
    color:var(--brand-primary);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.contact-list-item .contact-quick-send:hover{background:rgba(37,99,235,.12);}
.contacts-empty{padding:24px 12px;text-align:center;color:var(--text-faint);font-size:13px;}
.contacts-form-pane{flex:1;min-width:0;overflow-y:auto;padding:18px 20px;}
.contact-form-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:8px;}
.contact-field-label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin:8px 0 4px;}
.contact-field-label:first-of-type{margin-top:0;}
#contact-form input[type="text"],
#contact-form input[type="email"],
#contact-form textarea,
#custom-folder-form input[type="text"]{
    width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);
    padding:9px 10px;font-size:13.5px;font-family:inherit;resize:vertical;
    box-sizing:border-box;
}
#contact-form input:focus,#contact-form textarea:focus,
#custom-folder-form input:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(37,99,235,.10);}
.contact-form-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.contact-save-btn{
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));
    color:#fff;border:none;border-radius:var(--radius-sm);padding:9px 18px;font-weight:700;font-size:13.5px;cursor:pointer;
}
.contact-save-btn:hover{filter:brightness(1.07);}
.contact-cancel-btn{
    background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);
    padding:9px 16px;font-weight:600;font-size:13.5px;cursor:pointer;color:var(--text);
}
.contact-cancel-btn:hover{background:var(--row-hover);}
.contact-delete-btn{
    background:#fdecea;border:1px solid #f6cbc8;color:var(--danger);border-radius:var(--radius-sm);
    padding:9px 16px;font-weight:700;font-size:13.5px;cursor:pointer;
}
.contact-delete-btn:hover{background:#fbdbd8;}
@media (max-width:640px){
    .contacts-body{flex-direction:column;}
    .contacts-list-pane{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:40vh;}
    .contacts-box{max-height:92vh;}
}

/* ---- RTE toolbar  (font, gaya teks, warna, align, sisip, dll) ---- */
.rte-toolbar{
    display:flex;align-items:center;flex-wrap:wrap;gap:3px;
    padding:6px 8px;background:var(--bg-app);border:1px solid var(--border);border-radius:var(--radius-sm);
    flex-shrink:0;position:relative;
}
.rte-select{
    height:28px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text);
    font-size:12px;padding:0 6px;cursor:pointer;
}
.rte-select.rte-font{max-width:132px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
.rte-select.rte-size{max-width:64px;}
.rte-select.rte-format{max-width:90px;}
.rte-divider{width:1px;align-self:stretch;margin:2px 4px;background:var(--border);flex-shrink:0;}
.rte-btn{
    width:28px;height:28px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid transparent;border-radius:4px;background:none;color:var(--text-body,var(--text));
    font-size:13px;cursor:pointer;transition:.12s;
}
.rte-btn svg{display:block;color:inherit;}
.rte-btn:hover{background:var(--row-hover);border-color:var(--border);}
.rte-btn.active{background:var(--row-selected);border-color:var(--brand-primary-light);color:var(--brand-primary-dark);}
.rte-color-btn{
    position:relative;width:28px;height:28px;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
    border:1px solid transparent;border-radius:4px;font-size:13px;font-weight:700;cursor:pointer;overflow:hidden;
}
.rte-color-btn:hover{background:var(--row-hover);border-color:var(--border);}
.rte-color-btn input[type=color]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0;}
.rte-hilite-swatch{background:#fff59d;border-radius:2px;padding:0 2px;}
.rte-emoji-wrap{position:relative;}
.rte-emoji-panel{
    display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:60;
    width:260px;max-height:280px;overflow-y:auto;background:#fff;border:1px solid var(--border);
    border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:8px;
    grid-template-columns:repeat(8,1fr);gap:2px;align-content:flex-start;
}
.rte-emoji-panel.open{display:grid;}
.rte-emoji-panel button{
    width:26px;height:26px;border:none;background:none;font-size:16px;cursor:pointer;border-radius:4px;
    display:flex;align-items:center;justify-content:center;
}
.rte-emoji-panel button:hover{background:var(--row-hover);}

.rte-specialchar-wrap{position:relative;}
.rte-specialchar-panel{
    display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:60;
    width:300px;background:#fff;border:1px solid var(--border);
    border-radius:var(--radius-sm);box-shadow:var(--shadow-md);overflow:hidden;
}
.rte-specialchar-panel.open{display:block;}
.rte-specialchar-tabs{
    display:flex;flex-wrap:wrap;gap:2px;padding:6px 6px 0;border-bottom:1px solid var(--border);
}
.rte-specialchar-tabs button{
    border:none;background:none;font-size:11px;padding:5px 8px;border-radius:4px 4px 0 0;
    cursor:pointer;color:var(--text-muted,var(--text));white-space:nowrap;
}
.rte-specialchar-tabs button:hover{background:var(--row-hover);}
.rte-specialchar-tabs button.active{background:var(--row-selected);color:var(--brand-primary-dark);font-weight:600;}
.rte-specialchar-grid{
    display:grid;grid-template-columns:repeat(8,1fr);gap:2px;padding:8px;
    max-height:220px;overflow-y:auto;
}
.rte-specialchar-grid button{
    width:32px;height:32px;border:none;background:none;font-size:16px;cursor:pointer;border-radius:4px;
    display:flex;align-items:center;justify-content:center;color:var(--text-body,var(--text));
}
.rte-specialchar-grid button:hover{background:var(--row-hover);}

.rte-split-wrap{position:relative;display:inline-flex;align-items:stretch;flex-shrink:0;}
.rte-split-main{border-radius:4px 0 0 4px;}
.rte-split-arrow{width:16px;border-radius:0 4px 4px 0;border-left:1px solid transparent;font-size:9px;}
.rte-split-wrap:hover .rte-split-arrow,.rte-split-wrap:hover .rte-split-main{border-color:var(--border);}
.rte-split-menu{
    display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:60;
    min-width:150px;background:#fff;border:1px solid var(--border);
    border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:4px;flex-direction:column;gap:1px;
}
.rte-split-menu.open{display:flex;}
.rte-split-menu button{
    border:none;background:none;text-align:left;padding:6px 8px;border-radius:4px;cursor:pointer;
    font-size:13px;color:var(--text-body,var(--text));white-space:nowrap;
}
.rte-split-menu button:hover{background:var(--row-hover);}

.rte-font-wrap{position:relative;flex-shrink:0;}
.rte-font-trigger{
    display:inline-flex;align-items:center;justify-content:space-between;gap:6px;
    max-width:132px;overflow:hidden;
}
.rte-font-trigger span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rte-font-trigger-arrow{font-size:9px;flex-shrink:0;color:var(--text-muted,var(--text));}
.rte-font-menu{
    display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:60;
    min-width:190px;max-height:320px;overflow-y:auto;background:#fff;border:1px solid var(--border);
    border-radius:var(--radius-sm);box-shadow:var(--shadow-md);padding:4px;flex-direction:column;gap:1px;
}
.rte-font-menu.open{display:flex;}
.rte-font-menu-group-label{
    font-size:11px;font-weight:600;color:var(--text-muted,var(--text));text-transform:uppercase;
    letter-spacing:.03em;padding:6px 8px 2px;
}
.rte-font-menu button{
    border:none;background:none;text-align:left;padding:7px 8px;border-radius:4px;cursor:pointer;
    font-size:14px;color:var(--text-body,var(--text));white-space:nowrap;
}
.rte-font-menu button:hover{background:var(--row-hover);}
.rte-font-menu button.active{background:var(--row-selected);color:var(--brand-primary-dark);font-weight:600;}

/* ---- Editor / kolom input ---- */
.compose-body-wrap{position:relative;flex:1 1 auto;min-height:220px;display:flex;box-sizing:border-box;margin-top:8px;}
.rte-editor{
    box-sizing:border-box;
    flex:1 1 auto;display:block;width:100%;height:100%;min-height:220px;overflow-y:auto;overflow-x:auto;
    border:1.5px solid var(--border);border-radius:var(--radius-sm);
    padding:14px;font-size:13.5px;font-family:inherit;line-height:1.6;color:var(--text);background:#fff;
}
/* Sama seperti kotak pratinjau di modal Tanda Tangan: di dalam area tulis
   (Buat Baru/Balas/Balas Semua/Teruskan/Sunting Draf) maupun jendela Kirim
   Terjadwal, tanda tangan yang disisipkan HARUS tetap tampak landscape
   seperti tampilan desktop (logo di kiri, teks di kanan) -- bukan menumpuk
   ke bawah. Perilaku menumpuk (flex-wrap) di buildSignatureHtml() hanya
   ditujukan untuk email yang SUDAH terkirim & dibuka di klien luar (Gmail
   HP, dst), bukan saat masih ditulis di webmail ini. Kalau tidak muat di
   layar, area tulis sudah overflow-x:auto sehingga tinggal digeser.*/
.rte-editor .ft-sig-box{flex-wrap:nowrap !important;width:550px !important;max-width:550px !important;}
.rte-editor .ft-sig-logocell{flex:0 0 210px !important;}
.rte-editor:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(37,99,235,.10);}
.rte-editor:empty:before{content:attr(data-placeholder);color:var(--text-faint);pointer-events:none;}
/* Reset margin baris baru (Enter) supaya jarak antar baris konsisten
   dengan line-height, bukan margin bawaan browser untuk <p>/<div>. */
.rte-editor p,.rte-editor div{margin:0;padding:0;}
.rte-editor p{margin-bottom:0.4em;}
.rte-editor p:last-child{margin-bottom:0;}
.rte-editor img{max-width:100%;}
.rte-editor table{border-collapse:collapse;}
.rte-editor table td,.rte-editor table th{border:1px solid var(--border);padding:6px 8px;}
.rte-source{
    box-sizing:border-box;flex:1 1 auto;width:100%;height:100%;min-height:220px;resize:none;
    border:1.5px solid var(--border);border-radius:var(--radius-sm);
    padding:14px;font-size:12.5px;font-family:'Courier New',monospace;line-height:1.55;color:var(--text);background:#fbfcfe;
}
.rte-source:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(37,99,235,.10);}

/* ---- Kolom kutipan balasan/teruskan ---- */
.rte-write-space{min-height:110px;}
.rte-quote-box{
    border:1px solid var(--border);border-left:3px solid var(--brand-primary-light);
    border-radius:var(--radius-sm);background:var(--bg-app);
    padding:12px 14px;margin:10px 0 2px;
}
.rte-quote-meta{font-size:12.5px;color:var(--text-muted);margin-bottom:8px;}
.rte-quote-meta b{color:var(--text);}
.rte-quote-body{
    font-size:13px;color:var(--text-body,var(--text));border-top:1px solid var(--border-soft);
    padding-top:8px;max-width:100%;overflow-x:auto;word-wrap:break-word;
}
.rte-quote-body img{max-width:100%;height:auto;}
.rte-quote-body table{max-width:100%;}
.rte-quote-body pre{white-space:pre-wrap;word-break:break-word;}
.rte-fwd-header{font-size:12.5px;color:var(--text-muted);line-height:1.7;border-top:1px solid var(--border-soft);padding-top:8px;margin-top:2px;}

/* ---- Blok tanda tangan yang disisipkan/dilepas lewat tombol toolbar ---- */
.rte-signature-block{
    margin-top:14px;padding-top:10px;border-top:1px solid var(--border-soft);
    font-size:12.5px;color:var(--text-body,var(--text));line-height:1.6;
}
.rte-signature-block .rte-signature-logo{max-width:300px;max-height:300px;height:auto;display:block;}
.rte-signature-block .rte-sig-person{margin-bottom:10px;padding-bottom:8px;}
.rte-signature-block .rte-sig-salam{margin-bottom:4px;}
.rte-signature-block .rte-sig-nama{font-size:13.5px;}
.rte-signature-block .rte-sig-jabatan{color:var(--text-muted);}
.rte-signature-block .rte-sig-perusahaan{margin-top:2px;font-size:14pt;color:var(--brand-primary,#2563eb);}
.rte-signature-block .rte-sig-alamat{margin-top:4px;color:var(--text-muted);}
.rte-signature-block .rte-sig-contact{margin-top:4px;}
.rte-signature-block .rte-sig-contact-line{display:flex;gap:4px;align-items:baseline;}
.rte-signature-block .rte-sig-contact-label{display:inline-block;min-width:46px;flex:0 0 auto;color:var(--text-muted);}
.rte-signature-block .rte-sig-contact-line a{color:var(--brand-primary,#2563eb);text-decoration:none;}
.rte-signature-block .rte-sig-contact-line a:hover{text-decoration:underline;}
.rte-signature-block .rte-sig-extra{margin-top:4px;color:var(--text-muted);}

/* ---- Modal pengaturan tanda tangan (pakai kerangka .contacts-modal/.contacts-box) ---- */
.signature-box{max-width:100vw;width:100vw;height:100vh;max-height:100vh;border-radius:0;}
#signature-modal.contacts-modal{padding:0;}
.signature-body{
    padding:16px 20px;display:flex;flex-direction:column;gap:8px;
    flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.signature-checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer;}
.signature-hint{font-size:12px;color:var(--text-muted);margin:0;line-height:1.5;}
.signature-hint code{background:#f1f5f9;border-radius:4px;padding:1px 5px;font-size:11.5px;}

.signature-logo-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.signature-logo-preview{
    width:72px;height:72px;flex:0 0 auto;border:1.5px dashed var(--border);border-radius:var(--radius-sm);
    display:flex;align-items:center;justify-content:center;background:#f8fafc;overflow:hidden;
}
.signature-logo-preview img{max-width:100%;max-height:100%;object-fit:contain;}
.signature-logo-empty{font-size:10.5px;color:var(--text-muted);text-align:center;padding:0 4px;}
.signature-logo-actions{display:flex;flex-wrap:wrap;gap:8px;flex:1 1 auto;}

.signature-fields-grid{
    display:grid;grid-template-columns:1fr 1fr;gap:10px 12px;margin-top:6px;
}
.signature-field{display:flex;flex-direction:column;gap:4px;}
.signature-field-full{grid-column:1 / -1;}
.signature-input{
    box-sizing:border-box;width:100%;
    border:1.5px solid var(--border);border-radius:var(--radius-sm);
    padding:8px 10px;font-size:13px;line-height:1.4;color:var(--text);background:#fbfcfe;font-family:inherit;
}
.signature-input:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(37,99,235,.10);}
.signature-textarea-sm{resize:vertical;min-height:44px;}

.signature-multi-list{display:flex;flex-direction:column;gap:6px;}
.signature-multi-row{display:flex;align-items:center;gap:6px;}
.signature-multi-row .signature-multi-input{flex:1 1 auto;}
.signature-multi-remove-btn{
    flex:0 0 auto;width:30px;height:30px;border-radius:var(--radius-sm);
    border:1.5px solid var(--border);background:#fff;color:var(--text-muted);
    cursor:pointer;font-size:13px;line-height:1;display:flex;align-items:center;justify-content:center;
}
.signature-multi-remove-btn:hover{border-color:#ef4444;color:#ef4444;}
.signature-multi-add-btn{
    align-self:flex-start;margin-top:6px;border:1.5px dashed var(--border);border-radius:var(--radius-sm);
    background:#fff;color:var(--brand-primary,#2563eb);font-size:12.5px;font-weight:600;
    padding:6px 12px;cursor:pointer;
}
.signature-multi-add-btn:hover{background:#f8fafc;}

.signature-preview-wrap{display:flex;flex-direction:column;gap:6px;margin-top:4px;}
.signature-preview{
    border:1.5px dashed var(--border);border-radius:var(--radius-sm);
    padding:14px;background:#fff;overflow-x:auto;font-size:12.5px;color:var(--text);line-height:1.6;
}
.signature-preview .rte-signature-block{margin-top:0;padding-top:0;border-top:none;}
.signature-preview .rte-signature-logo{max-width:300px;max-height:300px;}
/* Kotak tanda tangan (.ft-sig-box) sengaja pakai flex-wrap supaya tanda
   tangan ASLI yang terkirim otomatis menumpuk ke bawah kalau dibuka di
   klien email mobile (Gmail HP, dst) -- lihat komentar di buildSignatureHtml().
   Tapi untuk KOTAK PRATINJAU di modal pengaturan ini, perilaku menumpuk itu
   tidak diinginkan: pratinjau harus selalu tampak identik dengan tampilan
   desktop (logo di kiri, teks di kanan), berapa pun sempitnya layar HP.
   Makanya di sini wrap-nya dipaksa mati (nowrap) dan lebarnya dikunci sama
   seperti lebar maksimal aslinya; kalau tidak muat di layar, tinggal geser
   ke samping (.signature-preview sudah overflow-x:auto). */
.signature-preview .ft-sig-box{flex-wrap:nowrap !important;width:550px !important;max-width:550px !important;}
.signature-preview .ft-sig-logocell{flex:0 0 210px !important;}
.signature-preview .ft-sig-textcell{flex:1 1 auto !important;}

@media (max-width: 480px){
    .signature-fields-grid{grid-template-columns:1fr;}
}

.compose-dropzone-hint{
    position:absolute;left:15px;top:13px;font-size:12.5px;font-style:italic;color:var(--text-muted);
    pointer-events:none;transition:opacity .1s;z-index:1;background:#fff;padding:1px 3px;
}
.compose-body-wrap.drag-over .rte-editor{border-color:var(--brand-primary);background:rgba(37,99,235,.05);}
.compose-body-wrap.drag-over .compose-dropzone-hint{color:var(--brand-primary-dark);font-weight:600;}
#compose-send{
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));color:#fff;border:none;border-radius:var(--radius-sm);
    padding:10px 26px;font-weight:700;cursor:pointer;transition:.15s;font-size:13.5px;
}
#compose-send:hover{filter:brightness(1.08);}
#compose-send:disabled{opacity:.6;cursor:default;}
.compose-status{font-size:12.5px;color:var(--text-muted);}
.compose-draft-status{font-size:12px;color:var(--text-faint);margin-left:auto;font-style:italic;}
.compose-draft-status.saving{color:var(--brand-primary);font-style:normal;}
.compose-draft-status.saved{color:var(--success);font-style:normal;}
.compose-draft-status.error{color:var(--danger);font-style:normal;}

/* ========================= TOASTS ========================= */
.toast-wrap{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center;}
.toast{
    background:var(--brand-navy);color:#fff;font-size:13px;padding:10px 18px;border-radius:24px;
    box-shadow:var(--shadow-md);opacity:0;transform:translateY(8px);transition:.2s;
}
.toast.show{opacity:1;transform:translateY(0);}
.toast.error{background:var(--danger);}

/* ========================= SWEETALERT2 (di atas semua modal lain) ========================= */
.swal2-container{z-index:9999 !important;}
.swal2-popup{font-family:'Segoe UI',Roboto,Arial,sans-serif;border-radius:14px;}
.swal2-title{font-size:18px;}
.swal2-html-container{font-size:14px;}
.swal2-confirm{background:var(--brand-primary) !important;box-shadow:none !important;}
.swal2-confirm:focus{box-shadow:0 0 0 3px rgba(37,99,235,.35) !important;}
.swal2-cancel{background:#eef1f7 !important;color:var(--text) !important;box-shadow:none !important;}
.swal2-styled.swal2-confirm.swal2-danger{background:var(--danger) !important;}

/* ========================= RESPONSIVE ========================= */
@media (max-width: 980px){
    .masthead-title{display:none;}
    .masthead-search{max-width:none;}
}
@media (max-width: 900px){
    .sidebar{
        position:fixed;left:0;top:80px;bottom:0;z-index:80;width:250px;
        transform:translateX(-100%);transition:.2s;box-shadow:var(--shadow-lg);
    }
    .sidebar.open{transform:translateX(0);}
    .sidebar.collapsed{width:250px;padding:14px 10px;border-right-width:2px;}
    .sidebar-edge-toggle{left:0;margin-left:0;}
    .sidebar.open ~ .sidebar-edge-toggle{left:250px;margin-left:-11px;}
    .app-toolbar{padding:8px 10px;}
    .reader-toolbar{overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .message-list{width:100%;}
    .content-split{position:relative;}
    .message-reader{position:absolute;inset:0;background:#fff;display:none;z-index:10;}
    .message-reader.open{display:flex;}
    .compose-field-label{width:56px;font-size:12px;}
    .pagination-info{display:none;}
    .rte-select.rte-font{max-width:78px;}
    .rte-select.rte-format{display:none;}
}

/* ---- Phone-size (≤600px): rapikan masthead, toolbar, list & compose ---- */
@media (max-width: 600px){
    /* Masthead lebih ramping supaya search bar & kotak masuk tetap terlihat rapi */
    .masthead{height:68px;padding:0 8px;gap:6px;}
    .masthead-left{gap:6px;}
    .masthead-logo{max-width:110px;height:34px;}
    .masthead-search{padding:0 10px;height:34px;gap:6px;}
    .masthead-search input{font-size:12.5px;}
    .masthead-right{gap:2px;}
    .icon-btn{width:32px;height:32px;font-size:15px;}
    .user-chip{padding:3px;gap:0;}
    .user-avatar{width:26px;height:26px;font-size:12px;}
    .user-email,.chevron{display:none;}
    .sidebar{top:68px;}
    .sidebar-edge-toggle{width:20px;height:40px;font-size:12px;}
    .sidebar.open ~ .sidebar-edge-toggle{margin-left:-10px;}

    /* Toolbar aksi: rapatkan & sembunyikan scrollbar (tetap bisa digeser jari) */
    .app-toolbar{padding:6px 8px;gap:2px;}
    .app-toolbar::-webkit-scrollbar{display:none;}
    .app-toolbar{scrollbar-width:none;-webkit-overflow-scrolling:touch;}
    .tb-btn{padding:7px 9px;font-size:12px;gap:4px;}
    .toolbar-divider{margin:0 3px;}
    .select-all-wrap input{width:17px;height:17px;}
    .tb-select-wrap select{max-width:96px;font-size:11.5px;padding:6px 6px;}

    /* Daftar email: tap target lebih besar, teks lebih ringkas */
    .msg-row{padding:11px 10px 11px 8px;gap:8px;}
    .msg-checkbox{width:17px;height:17px;}
    .msg-star{font-size:19px;}
    .msg-row .msg-from{font-size:12.5px;}
    .msg-row .msg-subject{font-size:13px;margin:4px 0 2px;}
    .msg-row .msg-date{font-size:10.5px;}

    /* Pembaca email full-layar: konten & toolbar lebih lega di layar sempit */
    .reader-toolbar{padding:8px 10px;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
    .reader-toolbar::-webkit-scrollbar{display:none;}
    .reader-toolbar{scrollbar-width:none;}
    .reader-toolbar .tb-btn{padding:7px 12px;font-size:12.5px;}
    .reader-content{padding:16px 16px 26px;}
    .reader-subject{font-size:16.5px;}
    .reader-meta{gap:10px;margin-bottom:14px;padding-bottom:14px;}
    .reader-avatar{width:32px;height:32px;font-size:13px;}
    .reader-meta-text{font-size:12.5px;}

    /* Compose full-layar: field & toolbar RTE dirapikan supaya muat */
    .compose-header{padding:10px 8px 10px 14px;font-size:13.5px;}
    #compose-form{padding:12px 14px 16px;gap:8px;}
    .compose-toolbar-row{gap:8px;padding-bottom:8px;flex-wrap:wrap;}
    .compose-cancel-btn{padding:8px 14px;font-size:13px;}
    #compose-send{padding:9px 16px;font-size:13px;}
    .compose-field-label{width:48px;padding:9px 8px;font-size:11.5px;}
    .compose-field-row input{padding:9px 10px;font-size:13px;}
    .cc-bcc-toggle{padding:9px 10px;font-size:11px;}
    .rte-toolbar{gap:2px;padding:5px 6px;}
    .rte-select.rte-font{max-width:64px;}
    .rte-select.rte-size{max-width:52px;}
    .rte-btn,.rte-color-btn{width:26px;height:26px;font-size:12px;}
    .attach-label{padding:7px 12px;font-size:12px;}
}

/* ---- Ponsel sangat sempit (≤380px, mis. iPhone SE) ---- */
@media (max-width: 380px){
    .masthead{padding:0 6px;gap:4px;}
    .masthead-logo{max-width:68px;}
    .masthead-search{padding:0 8px;}
    .masthead-search input::placeholder{font-size:11.5px;}
    .icon-btn{width:28px;height:28px;}
    .compose-field-label{width:42px;font-size:11px;}
    .tb-select-wrap select{max-width:76px;}
}

/* ============================================================
   NOTIFICATION BELL (masthead)
   ============================================================ */
.notif-bell-wrap{position:relative;}
.notif-bell-badge{
    position:absolute;top:2px;right:2px;background:var(--danger);color:#fff;
    font-size:10px;font-weight:700;line-height:1;min-width:15px;height:15px;border-radius:8px;
    display:flex;align-items:center;justify-content:center;padding:0 3px;pointer-events:none;
    box-shadow:0 0 0 2px var(--brand-navy);
}
.notif-bell-dropdown{
    position:absolute;right:0;top:calc(100% + 8px);width:340px;max-width:88vw;
    background:var(--bg-card);border-radius:var(--radius-sm);box-shadow:var(--shadow-md);
    display:none;z-index:50;border:1px solid var(--border-soft);overflow:hidden;
}
.notif-bell-dropdown.open{display:block;}
.notif-bell-header{
    display:flex;justify-content:space-between;align-items:center;
    padding:11px 14px;font-size:13px;font-weight:700;color:var(--text);border-bottom:1px solid var(--border-soft);
}
.notif-bell-clear{background:none;border:none;color:var(--brand-primary);font-size:12px;font-weight:600;cursor:pointer;padding:2px 4px;}
.notif-bell-clear:hover{text-decoration:underline;}
.notif-bell-list{max-height:360px;overflow-y:auto;}
.notif-bell-empty{padding:26px 14px;text-align:center;color:var(--text-faint);font-size:13px;}
.notif-bell-item{
    display:flex;flex-direction:column;gap:2px;padding:10px 14px;cursor:pointer;
    border-bottom:1px solid var(--border-soft);transition:.12s;
}
.notif-bell-item:last-child{border-bottom:none;}
.notif-bell-item:hover{background:var(--row-hover);}
.notif-bell-item .nb-from{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notif-bell-item .nb-subject{font-size:12.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notif-bell-item .nb-time{font-size:11px;color:var(--text-faint);}

/* ============================================================
   POPUP NOTIFICATIONS (kartu muncul saat email masuk)
   ============================================================ */
.notif-popup-stack{
    position:fixed;top:16px;right:16px;z-index:400;display:flex;flex-direction:column;gap:10px;
    max-width:340px;width:calc(100vw - 32px);pointer-events:none;
}
.notif-popup-card{
    pointer-events:auto;background:var(--bg-card);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);
    border:1px solid var(--border-soft);border-left:4px solid var(--brand-primary);
    padding:12px 14px;cursor:pointer;display:flex;gap:10px;align-items:flex-start;
    animation:notifPopIn .22s ease-out;
}
.notif-popup-card:hover{filter:brightness(1.02);}
@keyframes notifPopIn{
    from{opacity:0;transform:translateX(24px);}
    to{opacity:1;transform:translateX(0);}
}
.notif-popup-card.leaving{animation:notifPopOut .18s ease-in forwards;}
@keyframes notifPopOut{
    to{opacity:0;transform:translateX(24px);}
}
.notif-popup-icon{
    flex-shrink:0;width:34px;height:34px;border-radius:50%;
    background:linear-gradient(135deg,var(--brand-accent),var(--brand-primary-light));
    color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;
}
.notif-popup-body{flex:1;min-width:0;}
.notif-popup-title{font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notif-popup-subject{font-size:12.5px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.notif-popup-close{
    flex-shrink:0;background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:14px;
    line-height:1;padding:2px;
}
.notif-popup-close:hover{color:var(--text);}

/* ============================================================
   SETTINGS MODAL
   ============================================================ */
.settings-box{max-width:640px;width:94vw;}
.settings-body{padding:16px 20px 20px;overflow-y:auto;}
.settings-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border-soft);margin-bottom:14px;flex-wrap:wrap;}
.settings-tab{
    background:none;border:none;padding:9px 14px;font-size:13px;font-weight:600;color:var(--text-muted);
    cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;transition:.12s;
}
.settings-tab:hover{color:var(--text);}
.settings-tab.active{color:var(--brand-primary);border-bottom-color:var(--brand-primary);}
.settings-panel{display:none;}
.settings-panel.active{display:block;}
.settings-row{
    display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:11px 2px;border-bottom:1px solid var(--border-soft);cursor:pointer;
}
.settings-row:last-of-type{border-bottom:none;}
.settings-row > span{display:flex;flex-direction:column;gap:2px;}
.settings-row b{font-size:13.5px;color:var(--text);font-weight:600;}
.settings-row small{font-size:11.5px;color:var(--text-muted);line-height:1.4;}
.settings-row input[type="checkbox"]{
    flex-shrink:0;width:38px;height:22px;appearance:none;-webkit-appearance:none;
    background:var(--border);border-radius:20px;position:relative;cursor:pointer;transition:.15s;outline:none;
}
.settings-row input[type="checkbox"]::before{
    content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
    background:#fff;transition:.15s;box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.settings-row input[type="checkbox"]:checked{background:var(--brand-primary);}
.settings-row input[type="checkbox"]:checked::before{left:18px;}
.settings-row-select{cursor:default;}
.settings-row select{
    flex-shrink:0;border:1.5px solid var(--border);border-radius:var(--radius-sm);
    padding:7px 10px;font-size:13px;font-family:inherit;background:var(--bg-card);color:var(--text);cursor:pointer;
}
.settings-row select:focus{outline:none;border-color:var(--brand-primary);}
.settings-inline-control{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.notif-sound-test-btn{
    flex-shrink:0;border:1.5px solid var(--border);border-radius:var(--radius-sm);
    padding:6.5px 12px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer;
    background:var(--bg-card);color:var(--text);transition:.15s;
}
.notif-sound-test-btn:hover{background:var(--brand-primary);color:#fff;border-color:var(--brand-primary);}
.notif-sound-test-btn:active{filter:brightness(.95);}
.settings-volume-control{gap:10px;min-width:160px;}
.settings-volume-control input[type="range"]{
    flex:1;min-width:100px;height:4px;border-radius:4px;background:var(--border);
    appearance:none;-webkit-appearance:none;cursor:pointer;outline:none;
}
.settings-volume-control input[type="range"]::-webkit-slider-thumb{
    appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
    background:var(--brand-primary);cursor:pointer;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.settings-volume-control input[type="range"]::-moz-range-thumb{
    width:16px;height:16px;border-radius:50%;background:var(--brand-primary);cursor:pointer;
    border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.3);
}
.settings-volume-control span{font-size:12px;font-weight:600;color:var(--text-muted);min-width:34px;text-align:right;}
.settings-account-info{display:flex;align-items:center;gap:12px;padding:8px 2px 18px;}
.settings-account-info .sidebar-avatar{width:46px;height:46px;font-size:17px;}
.settings-account-email{font-size:14.5px;font-weight:700;color:var(--text);}
.settings-account-sub{font-size:12px;color:var(--text-muted);margin-top:2px;}
.settings-account-shortcuts{display:flex;flex-wrap:wrap;gap:8px;}
@media (max-width:640px){
    .settings-tabs{overflow-x:auto;flex-wrap:nowrap;}
    .settings-row{flex-direction:column;align-items:flex-start;gap:8px;}
    .settings-row input[type="checkbox"]{align-self:flex-start;}
}

/* ============================================================
   TAMPILAN: kepadatan (density) & ukuran font pembaca email
   ============================================================ */
body.density-compact .msg-row{padding:6px 10px 6px 8px;}
body.density-compact .msg-row .msg-subject{margin:1px 0;}
body.density-compact .msg-row .msg-from{font-size:12px;}
body.density-compact .msg-row .msg-subject{font-size:12.5px;}

body.reader-font-small .reader-content{font-size:12.5px;}
body.reader-font-medium .reader-content{font-size:14px;}
body.reader-font-large .reader-content{font-size:16.5px;}

/* ============================================================
   TEMA GELAP (dark theme)
   ============================================================ */
body[data-theme="dark"]{
    --bg-app:#12151c;
    --bg-card:#1b1f29;
    --border:#2c313d;
    --border-soft:#242833;
    --text:#e6e9f0;
    --text-muted:#a2a9ba;
    --text-faint:#767d8e;
    --row-hover:#232834;
    --row-selected:#243354;
}
body[data-theme="dark"] .login-card,
body[data-theme="dark"] .masthead-search:focus-within,
body[data-theme="dark"] .user-dropdown,
body[data-theme="dark"] .notif-bell-dropdown,
body[data-theme="dark"] .notif-popup-card,
body[data-theme="dark"] .date-filter-field input,
body[data-theme="dark"] .app-toolbar,
body[data-theme="dark"] .tb-select-wrap select,
body[data-theme="dark"] .message-list,
body[data-theme="dark"] .message-reader,
body[data-theme="dark"] .attachment-chip,
body[data-theme="dark"] .attachment-card,
body[data-theme="dark"] .attachment-action-btn,
body[data-theme="dark"] .attachment-preview-box,
body[data-theme="dark"] .attachment-preview-body,
body[data-theme="dark"] .compose-box,
body[data-theme="dark"] .compose-field-row input,
body[data-theme="dark"] .cc-bcc-toggle,
body[data-theme="dark"] .contacts-box,
body[data-theme="dark"] .signature-input,
body[data-theme="dark"] .signature-multi-remove-btn,
body[data-theme="dark"] .signature-multi-add-btn,
body[data-theme="dark"] .rte-select,
body[data-theme="dark"] .contact-suggest,
body[data-theme="dark"] .rte-font-menu,
body[data-theme="dark"] .rte-specialchar-panel,
body[data-theme="dark"] .rte-editor,
body[data-theme="dark"] .contact-cancel-btn,
body[data-theme="dark"] #contact-form input[type="text"],
body[data-theme="dark"] #contact-form input[type="email"],
body[data-theme="dark"] #contact-form textarea,
body[data-theme="dark"] #custom-folder-form input[type="text"],
body[data-theme="dark"] .contacts-toolbar input,
body[data-theme="dark"] .notif-sound-test-btn,
body[data-theme="dark"] .settings-row select,
body[data-theme="dark"] .signature-preview,
body[data-theme="dark"] .signature-logo-preview{
    background:var(--bg-card);color:var(--text);border-color:var(--border);
}
body[data-theme="dark"] .masthead-search:focus-within input{color:var(--text);}
body[data-theme="dark"] .masthead-search:focus-within .search-icon{filter:invert(1);}
body[data-theme="dark"] .contacts-list-pane{background:var(--bg-app);}
body[data-theme="dark"] mark.search-hit{background:rgba(14,165,183,.5);}
body[data-theme="dark"] .reader-content img{filter:brightness(.92);}

/* ==================== PESAN TERJADWAL (SCHEDULER) ==================== */
.scheduler-nav-badge{
    margin-left:auto;flex-shrink:0;background:var(--brand-accent,#f59e0b);color:#fff;font-size:11px;font-weight:700;
    border-radius:10px;padding:1px 7px;line-height:1.5;
}
#scheduler-modal.contacts-modal{padding:0;}
.scheduler-modal-box{max-width:none;width:100vw;height:100vh;max-height:100vh;border-radius:0;}
.scheduler-list-pane{width:17%;min-width:170px;}
.scheduler-form-pane{
    overflow:hidden;display:flex;flex-direction:column;padding:0;min-height:0;
}
.scheduler-form-pane form{display:flex;flex-direction:column;min-height:0;flex:1;}
.scheduler-form-toolbar-row{
    display:flex;align-items:center;gap:12px;flex-shrink:0;
    padding:14px 20px;border-bottom:1px solid var(--border);
}
.scheduler-form-toolbar-row #scheduler-save-btn{
    background:linear-gradient(135deg,var(--brand-primary),var(--brand-primary-dark));
    color:#fff;border:none;border-radius:var(--radius-sm);padding:9px 20px;font-weight:700;font-size:13.5px;cursor:pointer;
}
.scheduler-form-toolbar-row #scheduler-save-btn:hover{filter:brightness(1.07);}
.scheduler-delete-btn-top{color:var(--danger);border-color:#f6cbc8;background:#fdecea;}
.scheduler-delete-btn-top:hover{background:#fbdbd8;}
.scheduler-form-title{margin-left:auto;font-size:13px;font-weight:700;color:var(--text-muted);}
.scheduler-status-line{
    font-size:12px;font-weight:600;padding:6px 20px;margin-bottom:0;flex-shrink:0;
    background:var(--bg-app);color:var(--text-muted);border-bottom:1px solid var(--border);
}
.scheduler-status-line.ok{background:#ecfdf5;color:#047857;}
.scheduler-status-line.err{background:#fef2f2;color:#b91c1c;}
.scheduler-form-scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px;}

.sched-item{
    display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
    padding:10px;border-radius:var(--radius-sm);cursor:pointer;margin-bottom:4px;transition:.12s;
    border:1px solid transparent;
}
.sched-item:hover{background:var(--row-hover);}
.sched-item.active{background:var(--row-selected);border-color:var(--brand-primary-light);}
.sched-item-main{flex:1;min-width:0;}
.sched-item-subject{font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sched-item-to{font-size:12px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.sched-item-meta{font-size:11.5px;color:var(--text-faint);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.sched-badge{
    display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:8px;text-transform:uppercase;letter-spacing:.02em;
}
.sched-badge.pending{background:#eff6ff;color:#1d4ed8;}
.sched-badge.sent{background:#ecfdf5;color:#047857;}
.sched-badge.error{background:#fef2f2;color:#b91c1c;}
.sched-badge.off{background:#f1f5f9;color:#64748b;}
.sched-item-actions{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0;}
.sched-toggle{
    position:relative;width:34px;height:19px;border-radius:10px;background:var(--border);border:none;cursor:pointer;flex-shrink:0;transition:.15s;
}
.sched-toggle::before{
    content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.sched-toggle.on{background:var(--brand-primary);}
.sched-toggle.on::before{left:17px;}
.sched-item-del{border:none;background:none;color:var(--text-faint);font-size:13px;cursor:pointer;padding:2px 4px;border-radius:3px;}
.sched-item-del:hover{background:#fee2e2;color:#b91c1c;}

.sched-body-editor{
    min-height:280px;border-radius:0 0 var(--radius-sm) var(--radius-sm);
}

.sched-type-row{display:flex;gap:10px;margin:6px 0 12px;flex-wrap:wrap;}
.sched-type-option{
    display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text);
    border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:8px 14px;cursor:pointer;transition:.12s;flex:1;min-width:150px;justify-content:center;
}
.sched-type-option:has(input:checked){border-color:var(--brand-primary);background:rgba(37,99,235,.06);color:var(--brand-primary-dark);}
.sched-type-option input{accent-color:var(--brand-primary);}
.sched-datetime-row{display:flex;gap:10px;flex-wrap:wrap;}
.sched-field{flex:1;min-width:130px;}
.sched-field input{
    width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);
    padding:9px 10px;font-size:13.5px;font-family:inherit;box-sizing:border-box;
}
.sched-field input:focus{outline:none;border-color:var(--brand-primary);box-shadow:0 0 0 3px rgba(37,99,235,.10);}

@media (max-width:720px){
    .scheduler-list-pane{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:36vh;}
    .contacts-body:has(.scheduler-list-pane){flex-direction:column;}
    .scheduler-modal-box{height:100vh;max-height:100vh;}
    .scheduler-form-toolbar-row{flex-wrap:wrap;}
    .scheduler-form-title{margin-left:0;width:100%;order:-1;}
}

body[data-theme="dark"] .sched-field input,
body[data-theme="dark"] .sched-body-editor,
body[data-theme="dark"] .sched-type-option,
body[data-theme="dark"] .scheduler-status-line,
body[data-theme="dark"] .scheduler-form-toolbar-row{
    background:var(--bg-card);color:var(--text);border-color:var(--border);
}