*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;font-family:'DM Sans',sans-serif;background:#fff;color:var(--g900);overflow:hidden;-webkit-font-smoothing:antialiased;}
:root{
--sidebar-w:210px;--rbar-w:48px;--topbar-h:56px;--toolbar-h:44px;
--blue:#4a9ee8;--blue-light:#d6eafa;--blue-bg:#eaf4fd;
--red:#e84444;--green:#00c2b8;--orange:#f07a6a;--purple:#8430ce;--teal:#00c2b8;
--g50:#f8f9fa;--g100:#f1f3f4;--g200:#e8eaed;--g300:#dadce0;--g400:#bdc1c6;
--g500:#9aa0a6;--g600:#80868b;--g700:#5f6368;--g800:#3c4043;--g900:#202124;
--coral:#e85454;--cyan:#6bb5f0;
--accent-grad:linear-gradient(135deg, #e85454, #f09080, #6bb5f0, #4a9ee8);
}
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr var(--rbar-w);grid-template-rows:var(--topbar-h) 1fr;height:100vh;}
/* ═══ TOPBAR ═══ */
.topbar{grid-column:1/-1;display:flex;align-items:center;padding:0 16px;gap:16px;border-bottom:1px solid var(--g200);background:#fff;z-index:10;}
.topbar-logo{display:flex;align-items:center;gap:10px;min-width:calc(var(--sidebar-w) - 32px);padding-right:12px;}
.logo-icon{width:36px;height:36px;border-radius:10px;background:var(--accent-grad);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.logo-icon::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(255,255,255,0.25));}
.logo-icon svg{width:20px;height:20px;color:#fff;position:relative;z-index:1;}
.logo-text{display:flex;flex-direction:column;}
.logo-name{font-weight:700;font-size:15px;color:var(--g900);letter-spacing:-0.3px;line-height:1.2;}
.logo-tagline{font-size:11px;color:var(--cyan);font-style:italic;font-weight:500;letter-spacing:0.2px;}
.search-wrapper{flex:1;max-width:640px;margin:0 auto;position:relative;}
.search-box{display:flex;align-items:center;gap:10px;background:var(--g100);border:1px solid transparent;border-radius:28px;padding:0 16px;height:40px;transition:all 0.25s;}
.search-box:focus-within{background:#fff;border-color:var(--blue);box-shadow:0 1px 6px rgba(74,158,232,0.15);}
.search-box svg{width:18px;height:18px;color:var(--g600);flex-shrink:0;}
.search-box input{flex:1;background:none;border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);}
.search-box input::placeholder{color:var(--g500);}
.topbar-right{display:flex;align-items:center;gap:4px;}
.icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;transition:background 0.15s;color:var(--g700);}
.icon-btn:hover{background:var(--g100);}
.icon-btn svg{width:20px;height:20px;}
/* ═══ SIDEBAR ═══ */
.sidebar{border-right:1px solid var(--g200);display:flex;flex-direction:column;overflow:hidden;background:#fff;padding-top:4px;}
.compose-btn{margin:10px 14px 12px;display:flex;align-items:center;gap:10px;padding:0 24px;height:38px;background:var(--accent-grad);border:none;border-radius:22px;color:#fff;font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;cursor:pointer;transition:all 0.2s;box-shadow:0 1px 4px rgba(255,107,74,0.3);letter-spacing:0.2px;}
.compose-btn:hover{box-shadow:0 2px 12px rgba(255,107,74,0.4);transform:translateY(-1px);}
.compose-btn svg{width:18px;height:18px;}
.sidebar-nav{flex:1;overflow-y:auto;padding:6px 0;}
.nav-item{display:flex;align-items:center;gap:12px;padding:0 10px 0 20px;height:36px;cursor:pointer;transition:all 0.1s;font-size:13.5px;font-weight:500;color:var(--g800);border-radius:0 20px 20px 0;margin-right:12px;position:relative;}
.nav-item:hover{background:var(--g100);}
.nav-item.active{background:var(--blue-bg);color:var(--blue);font-weight:600;}
.nav-item.active::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;background:var(--blue);border-radius:0 3px 3px 0;}
.nav-item svg{width:16px;height:16px;flex-shrink:0;opacity:0.75;}
.nav-item.active svg{opacity:1;color:var(--blue);}
.nav-item .badge{margin-left:auto;font-size:12px;font-weight:600;color:var(--g700);}
.nav-item.active .badge{color:var(--blue);}
.nav-section{padding:18px 20px 8px;font-size:11px;font-weight:700;color:var(--g800);letter-spacing:0.3px;}
.reply-suggestion{margin:auto 12px 14px;padding-top:16px;border-top:1px solid var(--g200);}
.reply-label{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--g800);padding:0 8px;margin-bottom:8px;}
.reply-label svg{width:16px;height:16px;color:var(--orange);}
.reply-box{padding:12px 14px;background:var(--blue-bg);border-radius:10px;font-size:13px;color:var(--g700);cursor:pointer;transition:background 0.15s;border:1px solid var(--blue-light);max-height:none;overflow-y:visible;}
.reply-box:hover{background:var(--blue-light);}
.reply-sug-item{padding:8px 0;border-bottom:1px solid rgba(26,115,232,0.1);cursor:pointer;line-height:1.4;color:var(--g700);transition:color 0.1s;}
.reply-sug-item:last-child{border-bottom:none;}
.reply-sug-item:hover{color:var(--blue);}
.reply-sug-loading{display:flex;align-items:center;gap:8px;color:var(--g500);font-size:12px;}
.reply-sug-loading .dot-pulse{display:inline-flex;gap:3px;}
.reply-sug-loading .dot-pulse span{width:4px;height:4px;border-radius:50%;background:var(--g400);animation:dotPulse 1.2s infinite;}
.reply-sug-loading .dot-pulse span:nth-child(2){animation-delay:0.2s;}
.reply-sug-loading .dot-pulse span:nth-child(3){animation-delay:0.4s;}
@keyframes dotPulse{0%,80%,100%{opacity:0.3;transform:scale(0.8);}40%{opacity:1;transform:scale(1.2);}}
/* ═══ MAIN ═══ */
.main{display:flex;flex-direction:column;overflow:hidden;background:#fff;}
.toolbar{display:flex;align-items:center;padding:0 12px;height:var(--toolbar-h);border-bottom:1px solid var(--g200);gap:4px;background:#fff;}
.toolbar-left{display:flex;align-items:center;gap:2px;}
.tool-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g700);transition:background 0.15s;}
.tool-btn:hover{background:var(--g100);}
.tool-btn svg{width:18px;height:18px;}
.toolbar-cb{display:flex;align-items:center;gap:2px;padding:4px 4px 4px 8px;border-radius:4px;cursor:pointer;transition:background 0.15s;}
.toolbar-cb:hover{background:var(--g100);}
.toolbar-cb input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--blue);}
.toolbar-cb svg{width:14px;height:14px;color:var(--g600);}
.toolbar-right{margin-left:auto;display:flex;align-items:center;gap:4px;}
.page-info{font-size:12.5px;color:var(--g600);margin-right:4px;font-variant-numeric:tabular-nums;}
.bulk-actions{display:flex;align-items:center;gap:2px;margin-left:6px;padding-left:10px;border-left:1px solid var(--g300);animation:bulkSlideIn 0.18s ease-out;}
@keyframes bulkSlideIn{from{opacity:0;transform:translateX(-6px);}to{opacity:1;transform:translateX(0);}}
.bulk-btn{color:var(--g700);}
.bulk-btn:hover{background:var(--g100);color:var(--g900);}
.bulk-btn-danger:hover{background:#fee2e2;color:var(--red);}
.bulk-count{font-size:12.5px;font-weight:600;color:var(--blue);margin-left:8px;white-space:nowrap;}
.nav-arrow{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);transition:all 0.15s;}
.nav-arrow:hover{background:var(--g100);color:var(--g800);}
.nav-arrow svg{width:20px;height:20px;}
/* ═══ SMART TABS ═══ */
.smart-tabs{display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--g200);gap:0;background:#fff;}
.smart-tab{display:flex;align-items:center;gap:8px;padding:12px 20px;font-size:13px;font-weight:500;color:var(--g700);cursor:pointer;transition:all 0.15s;border-bottom:3px solid transparent;white-space:nowrap;}
.smart-tab:hover{background:var(--g50);color:var(--g900);}
.smart-tab.active{color:var(--blue);border-bottom-color:var(--blue);font-weight:600;}
.smart-tab svg{width:16px;height:16px;opacity:0.7;}
.smart-tab.active svg{opacity:1;color:var(--blue);}
/* ═══ EMAIL LIST ═══ */
.email-list{flex:1;overflow-y:auto;}
.email-row{display:flex;align-items:center;padding:0 16px;height:42px;border-bottom:1px solid var(--g200);cursor:pointer;transition:box-shadow 0.1s;gap:8px;font-size:13px;}
.email-row:hover{box-shadow:inset 3px 0 0 var(--blue),0 1px 4px rgba(0,0,0,0.06);background:var(--g50);z-index:1;}
.email-row.unread{background:#fff;font-weight:600;}
.email-row.read{background:#f2f6fc;}
.email-row.selected{background:var(--blue-bg);}
.email-check{width:18px;height:18px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;}
.email-star{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:var(--g400);flex-shrink:0;border-radius:50%;transition:all 0.15s;}
.email-star:hover{color:var(--orange);background:rgba(227,116,0,0.08);}
.email-star.starred{color:var(--orange);}
.email-star svg{width:18px;height:18px;}
.email-labels{display:flex;gap:4px;flex-shrink:0;margin-right:4px;}
.elabel{font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:3px;letter-spacing:0.2px;white-space:nowrap;}
.elabel.bl{background:#dbeafe;color:#1d4ed8;}.elabel.ops{background:#fce7f3;color:#be185d;}.elabel.docs{background:#e0e7ff;color:#4338ca;}.elabel.acct{background:#d1fae5;color:#065f46;}.elabel.customs{background:#ede9fe;color:#6d28d9;}.elabel.alert{background:#fee2e2;color:#b91c1c;}.elabel.si{background:#ccfbf1;color:#0f766e;}.elabel.pre-alert{background:#fef9c3;color:#a16207;}.elabel.invoice{background:#ffedd5;color:#c2410c;}.elabel.tracking{background:#d1fae5;color:#047857;}.elabel.dg{background:#fee2e2;color:#b91c1c;}
.email-sender{width:180px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--g900);}
.email-sender .email-thread-count{
display:inline-block;margin-left:4px;font-size:11px;font-weight:400;color:var(--g600);
font-variant-numeric:tabular-nums;
}
.email-row.unread .email-sender .email-thread-count{color:var(--g700);font-weight:500;}
.email-sender .email-draft-tag{
display:inline-block;margin-left:6px;padding:1px 6px;
background:#fee2e2;color:var(--red);
border-radius:4px;font-size:10.5px;font-weight:600;line-height:1.4;
vertical-align:middle;letter-spacing:0.2px;
}
/* "Draft" prefix shown in the inbox-row snippet when a thread has a draft. */
.email-snippet-draft{
color:var(--red);font-weight:600;
}
.email-row.read .email-sender{color:var(--g700);font-weight:400;}
/* "+N" overflow count in the Gmail-style participant list. */
.email-sender .email-participant-more{
color:var(--g600);font-weight:400;font-variant-numeric:tabular-nums;
}
.email-row.unread .email-sender .email-participant-more{color:var(--g700);}
.email-content{flex:1;display:flex;align-items:center;gap:0;overflow:hidden;min-width:0;}
.email-subject{color:var(--g900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;max-width:45%;}
.email-row.read .email-subject{color:var(--g700);font-weight:400;}
.email-snippet{color:var(--g500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;margin-left:4px;font-weight:400 !important;}
.email-snippet::before{content:'— ';}
.email-attach{flex-shrink:0;color:var(--g500);margin-left:8px;display:flex;align-items:center;}
.email-attach svg{width:16px;height:16px;}
.email-time{flex-shrink:0;font-size:12px;color:var(--g600);margin-left:auto;white-space:nowrap;min-width:60px;text-align:right;font-variant-numeric:tabular-nums;}
.email-assigned{flex-shrink:0;font-size:11px;color:var(--cyan);white-space:nowrap;margin-left:8px;}
.email-assigned b{font-weight:600;color:var(--blue);}
.email-row.unread .email-time{font-weight:600;color:var(--g900);}
/* ═══ RIGHT BAR ═══ */
.right-bar{border-left:1px solid var(--g200);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:4px;background:#fff;}
.right-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);transition:all 0.15s;}
.right-icon:hover{background:var(--g100);color:var(--g800);}
.right-icon svg{width:20px;height:20px;}
/* ═══ MODAL / PANEL SHARED ═══ */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.18);z-index:100;display:none;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
/* ═══ LOGIN PAGE (full-bleed) ═══ */
.login-overlay{background:linear-gradient(135deg,#3949AB 0%,#1976D2 35%,#1E88E5 70%,#26C6DA 100%);align-items:center;justify-content:center;padding:24px;}
.login-card{
width:100%;max-width:440px;background:#fff;border-radius:20px;
padding:36px 32px 28px;box-shadow:0 20px 60px rgba(0,0,0,0.18),0 2px 8px rgba(0,0,0,0.06);
display:flex;flex-direction:column;align-items:stretch;text-align:center;
font-family:'DM Sans',sans-serif;
}
.login-logo{
width:54px;height:54px;margin:0 auto 14px;
display:flex;align-items:center;justify-content:center;
}
.login-title{font-size:24px;font-weight:700;color:var(--g900);letter-spacing:-0.4px;margin-bottom:6px;}
.login-tagline{font-size:13px;color:var(--g700);margin-bottom:18px;line-height:1.45;}
.login-subhead{font-size:13.5px;font-weight:600;color:var(--g800);margin-bottom:4px;}
.login-desc{font-size:11.5px;color:var(--g500);line-height:1.5;margin-bottom:22px;}
.login-tabs{
display:flex;background:var(--g100);border-radius:10px;padding:4px;gap:4px;margin-bottom:18px;
}
.login-tab{
flex:1;padding:8px 10px;background:transparent;border:none;border-radius:7px;
font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--g600);
cursor:pointer;transition:all 0.15s;
}
.login-tab:hover{color:var(--g800);}
.login-tab.active{background:#fff;color:var(--g900);box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.login-fields{display:flex;flex-direction:column;gap:10px;margin-bottom:14px;}
.login-input{
width:100%;padding:12px 14px;border:1.5px solid var(--g300);border-radius:10px;
font-family:'DM Sans',sans-serif;font-size:13.5px;color:var(--g900);outline:none;
transition:border-color 0.15s;background:#fff;
}
.login-input:focus{border-color:var(--blue);}
.login-input::placeholder{color:var(--g500);}
.login-pw-wrap{position:relative;}
.login-pw-wrap .login-input{padding-right:42px;}
.login-pw-toggle{
position:absolute;top:50%;right:8px;transform:translateY(-50%);
width:30px;height:30px;display:flex;align-items:center;justify-content:center;
background:none;border:none;border-radius:6px;color:var(--g500);cursor:pointer;
}
.login-pw-toggle:hover{background:var(--g100);color:var(--g800);}
.login-btn{
width:100%;padding:13px;background:linear-gradient(135deg,#4a9ee8 0%,#26C6DA 100%);
border:none;border-radius:24px;color:#fff;font-weight:700;font-size:14px;
font-family:'DM Sans',sans-serif;cursor:pointer;transition:all 0.2s;
box-shadow:0 4px 12px rgba(74,158,232,0.3);
margin-bottom:14px;
}
.login-btn:hover{box-shadow:0 6px 18px rgba(74,158,232,0.4);transform:translateY(-1px);}
.login-btn:active{transform:translateY(0);}
.login-foot-primary{font-size:11px;color:var(--g500);line-height:1.5;}
.login-foot-features{
display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;
font-size:10.5px;color:var(--g500);margin-top:12px;margin-bottom:10px;
}
.login-foot-features .dot{color:var(--g300);}
.login-tos{font-size:10.5px;color:var(--g500);line-height:1.6;margin-top:6px;}
.login-tos a{color:var(--blue);text-decoration:none;}
.login-tos a:hover{text-decoration:underline;}
.login-demo-link{
margin-top:10px;background:none;border:none;color:var(--g500);
font-family:'DM Sans',sans-serif;font-size:11.5px;cursor:pointer;text-decoration:underline;
}
.login-demo-link:hover{color:var(--g700);}
/* ═══ DETAIL PANEL ═══ */
.detail-panel{width:720px;max-height:85vh;background:#fff;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;}
@keyframes slideUp{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.detail-header{display:flex;align-items:center;padding:16px 20px;border-bottom:1px solid var(--g200);gap:8px;}
.detail-back{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g700);}
.detail-back:hover{background:var(--g100);}
.detail-back svg{width:20px;height:20px;}
.detail-title{font-size:18px;font-weight:700;color:var(--g900);flex:1;letter-spacing:-0.3px;}
.detail-labels{display:flex;gap:6px;}
.detail-actions{display:flex;gap:2px;}
.detail-body{flex:1;overflow-y:auto;padding:20px 24px;}
.detail-meta{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.detail-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:15px;flex-shrink:0;}
.detail-sender-info{flex:1;}
.detail-sender-name{font-weight:600;font-size:14px;color:var(--g900);}
.detail-sender-email{font-size:12px;color:var(--g600);}
.detail-date{font-size:12px;color:var(--g600);}
.detail-content{font-size:14px;line-height:1.75;color:var(--g800);}
.detail-content p{margin-bottom:14px;}
.detail-attachments{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
.att-chip{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--g300);border-radius:8px;font-size:12.5px;color:var(--g700);cursor:pointer;transition:all 0.15s;}
.att-chip:hover{background:var(--g50);border-color:var(--g400);}
.att-chip svg{width:16px;height:16px;color:var(--g500);}
.att-size{color:var(--g500);font-size:11px;}
.detail-reply{padding:16px 20px;border-top:1px solid var(--g200);display:flex;align-items:center;gap:10px;}
.detail-reply-input{flex:1;padding:10px 16px;border:1px solid var(--g300);border-radius:24px;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);outline:none;transition:border-color 0.2s;}
.detail-reply-input:focus{border-color:var(--blue);}
.detail-reply-input::placeholder{color:var(--g500);}
.send-btn{padding:8px 20px;background:linear-gradient(135deg,var(--coral),#FF8A6A);border:none;border-radius:20px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:6px;font-family:'DM Sans',sans-serif;transition:all 0.2s;}
.send-btn:hover{box-shadow:0 2px 12px rgba(255,107,74,0.35);}
.send-btn svg{width:14px;height:14px;}
/* ═══ COMPOSE ═══ */
.compose-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.2);z-index:150;display:none;align-items:flex-end;justify-content:flex-end;padding:0 24px 24px 0;}
.compose-overlay.open{display:flex;}
.compose-overlay.compose-maximized{align-items:center;justify-content:center;padding:5vh 5vw;background:rgba(0,0,0,0.35);}
.compose-modal{position:relative;width:640px;background:#fff;border-radius:12px 12px 0 0;box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);display:flex;flex-direction:column;animation:compIn 0.2s ease-out;}
.compose-overlay.compose-maximized .compose-modal{width:90vw;height:90vh;max-width:1100px;border-radius:12px;}
/* Color picker for compose window — mirrors the reply composer's picker styling. */
.compose-color-picker{
display:none;position:absolute;z-index:60;
background:#fff;border:1px solid var(--g200);border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.06);
padding:12px;width:204px;
}
.compose-color-picker.open{display:block;animation:slideUp 0.15s ease-out;}
.compose-overlay.compose-maximized .compose-body-area{flex:1;display:flex;flex-direction:column;}
.compose-overlay.compose-maximized .compose-body-editor{flex:1;max-height:none;min-height:0;}
.compose-modal.compose-minimized{width:320px;border-radius:8px 8px 0 0;}
.compose-modal.compose-minimized .compose-fields,
.compose-modal.compose-minimized .compose-body-area,
.compose-modal.compose-minimized .compose-format-row,
.compose-modal.compose-minimized .compose-bottom,
.compose-modal.compose-minimized .compose-attach-strip{display:none !important;}
.compose-modal.compose-minimized .compose-top{cursor:pointer;border-radius:8px 8px 0 0;}
@keyframes compIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}
.compose-top{display:flex;align-items:center;padding:10px 16px;background:var(--g800);border-radius:12px 12px 0 0;color:#fff;}
.compose-top-title{font-size:13px;font-weight:600;flex:1;}
.compose-top-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;color:rgba(255,255,255,0.7);border-radius:50%;}
.compose-top-btn:hover{color:#fff;background:rgba(255,255,255,0.1);}
.compose-top-btn svg{width:16px;height:16px;}
.compose-field{display:flex;align-items:center;padding:8px 16px;border-bottom:1px solid var(--g200);}
.compose-field-label{font-size:13px;color:var(--g600);width:40px;flex-shrink:0;}
.compose-field input{flex:1;border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g900);background:none;}
.compose-body-area{padding:16px;}
.compose-body-area textarea, .compose-body-editor{width:100%;min-height:280px;border:none;outline:none;font-family:'DM Sans',sans-serif;font-size:14px;line-height:1.7;color:var(--g900);resize:none;background:none;}
.compose-body-editor{max-height:480px;overflow-y:auto;}
.compose-body-editor:empty::before{content:attr(data-placeholder);color:var(--g500);pointer-events:none;}
.compose-body-editor table{border-collapse:collapse;margin:8px 0;}
.compose-body-editor table td, .compose-body-editor table th{border:1px solid var(--g300);padding:6px 10px;min-width:60px;vertical-align:top;}
.compose-body-editor table th{background:var(--g100);font-weight:600;text-align:left;}
.compose-bottom{display:flex;align-items:center;gap:8px;padding:10px 16px;border-top:1px solid var(--g200);}
.compose-send{padding:8px 24px;background:linear-gradient(135deg,var(--coral),#FF8A6A);border:none;border-radius:20px;color:#fff;font-weight:600;font-size:13px;cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s;}
.compose-send:hover{box-shadow:0 2px 12px rgba(255,107,74,0.35);}
.compose-tool{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);}
.compose-tool:hover{background:var(--g100);}
.compose-tool svg{width:18px;height:18px;}
/* ═══ SMART SORT PANEL ═══ */
.ss-panel{
width:440px;max-height:80vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;
animation:slideUp 0.2s ease-out;
}
.ss-header{
display:flex;align-items:center;padding:18px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.ss-header-icon{display:flex;align-items:center;color:var(--g900);}
.ss-header-icon svg{width:22px;height:22px;}
.ss-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.ss-header-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g700);transition:background 0.15s;}
.ss-header-btn:hover{background:rgba(0,0,0,0.06);}
.ss-header-btn svg{width:18px;height:18px;}
.ss-desc{
padding:18px 24px 14px;font-size:15px;color:var(--g800);
border-bottom:1px solid var(--g200);line-height:1.5;
}
.ss-list{
flex:1;overflow-y:auto;padding:16px 22px;
display:flex;flex-direction:column;gap:10px;
}
.ss-item{
display:flex;align-items:center;
padding:14px 18px;
border:1.5px solid var(--g300);border-radius:12px;
background:#fff;cursor:pointer;transition:all 0.15s;
gap:12px;
}
.ss-item:hover{border-color:var(--g400);background:var(--g50);}
.ss-item.selected{border-color:var(--blue);background:var(--blue-bg);}
.ss-item-name{font-size:15px;font-weight:600;color:var(--g900);flex:1;}
.ss-item-check{
width:22px;height:22px;border:2px solid var(--g400);border-radius:6px;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
transition:all 0.15s;
}
.ss-item.selected .ss-item-check{border-color:var(--blue);background:var(--blue);}
.ss-item.selected .ss-item-check::after{
content:'';width:6px;height:10px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);margin-top:-2px;
}
.ss-item-delete{
width:28px;height:28px;display:none;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;
color:var(--red);transition:all 0.15s;flex-shrink:0;
}
.ss-item-delete:hover{background:rgba(217,48,37,0.08);}
.ss-item:hover .ss-item-delete{display:flex;}
.ss-item-delete svg{width:16px;height:16px;}
.ss-footer{
padding:14px 22px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;
}
.ss-build-btn{
padding:10px 28px;
background:linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
border:none;border-radius:24px;color:#fff;
font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;
cursor:pointer;transition:all 0.2s;
}
.ss-build-btn:hover{box-shadow:0 2px 12px rgba(79,195,247,0.4);transform:translateY(-1px);}
/* ═══ BUILD YOUR OWN PANEL ═══ */
.byo-panel{
width:560px;max-height:88vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;
animation:slideUp 0.2s ease-out;
}
.byo-preview-section{margin-top:4px;}
.byo-preview-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;}
.byo-preview-title{font-size:13px;font-weight:700;color:var(--g900);letter-spacing:-0.1px;}
.byo-preview-count{font-size:12px;font-weight:600;color:var(--blue);background:var(--blue-bg);padding:2px 10px;border-radius:12px;}
.byo-preview-count.empty{color:var(--g600);background:var(--g100);}
.byo-preview-list{
border:1px solid var(--g200);border-radius:10px;background:var(--g50);
max-height:200px;overflow-y:auto;
}
.byo-preview-empty{padding:24px 16px;text-align:center;font-size:12.5px;color:var(--g500);line-height:1.5;}
.byo-preview-row{
display:flex;align-items:center;gap:10px;padding:8px 12px;
border-bottom:1px solid var(--g200);font-size:12.5px;
cursor:default;transition:background 0.1s;
}
.byo-preview-row:last-child{border-bottom:none;}
.byo-preview-row:hover{background:#fff;}
.byo-preview-sender{font-weight:600;color:var(--g900);min-width:120px;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.byo-preview-subj{flex:1;color:var(--g700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.byo-preview-time{font-size:11px;color:var(--g500);white-space:nowrap;font-variant-numeric:tabular-nums;}
.byo-header{
display:flex;align-items:center;padding:18px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.byo-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.byo-body{padding:24px;display:flex;flex-direction:column;gap:20px;overflow-y:auto;flex:1;}
.byo-field-label{font-size:15px;font-weight:700;color:var(--g900);margin-bottom:8px;}
.byo-input{
width:100%;padding:14px 18px;
border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;
color:var(--g800);outline:none;transition:border-color 0.2s;
background:#fff;
}
.byo-input:focus{border-color:var(--blue);}
.byo-input::placeholder{color:var(--g500);}
.byo-textarea{
width:100%;padding:14px 18px;min-height:56px;
border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;
color:var(--g800);outline:none;transition:border-color 0.2s;
background:#fff;resize:none;
}
.byo-textarea:focus{border-color:var(--blue);}
.byo-textarea::placeholder{color:var(--g500);}
.byo-help{font-size:13.5px;color:var(--g700);line-height:1.6;margin-top:4px;}
.byo-help-example{margin-top:8px;font-size:13px;color:var(--g800);}
.byo-footer{
padding:14px 22px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;
}
.byo-create-btn{
padding:10px 28px;
background:linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
border:none;border-radius:24px;color:#fff;
font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;
cursor:pointer;transition:all 0.2s;
}
.byo-create-btn:hover{box-shadow:0 2px 12px rgba(79,195,247,0.4);transform:translateY(-1px);}
.byo-create-btn.disabled{opacity:0.35;pointer-events:none;transform:none;box-shadow:none;}
.byo-cancel-btn{
padding:10px 22px;background:none;
border:1.5px solid var(--cyan);border-radius:24px;
color:var(--coral);font-family:'DM Sans',sans-serif;
font-weight:600;font-size:14px;cursor:pointer;transition:all 0.15s;
}
.byo-cancel-btn:hover{background:rgba(255,107,74,0.05);}
/* Smart Sort Definition Fields */
.byo-def-fields{display:flex;flex-direction:column;gap:0;}
.byo-def-row{display:flex;align-items:center;gap:0;border:1.5px solid var(--g300);border-radius:10px;overflow:hidden;margin:0;}
.byo-def-row:focus-within{border-color:var(--blue);}
.byo-def-label{
padding:10px 12px;background:var(--g100);font-family:'DM Mono',monospace;
font-size:12px;font-weight:600;color:var(--g700);white-space:nowrap;
border-right:1px solid var(--g200);min-width:72px;
}
.byo-def-input{
flex:1;padding:10px 14px;border:none;outline:none;
font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);background:#fff;
}
.byo-def-input::placeholder{color:var(--g500);}
.byo-def-or{
text-align:center;font-size:11px;font-weight:700;color:var(--g500);
padding:4px 0;letter-spacing:1px;font-family:'DM Mono',monospace;
}
.byo-def-preview{
margin-top:10px;padding:10px 14px;background:var(--g50);border:1px solid var(--g200);
border-radius:8px;font-family:'DM Mono',monospace;font-size:11.5px;
color:var(--g600);min-height:28px;line-height:1.5;word-break:break-all;
}
/* ═══ AUTO LABEL PANEL ═══ */
.al-panel{
width:90vw;max-width:1100px;max-height:88vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.al-header{
display:flex;align-items:center;padding:14px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.al-header-icon{display:flex;align-items:center;color:var(--g900);}
.al-header-icon svg{width:22px;height:22px;}
.al-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.al-body{flex:1;overflow-y:auto;padding:20px 24px;}
.al-section-title{font-size:15px;font-weight:700;color:var(--g900);margin-bottom:10px;display:flex;align-items:center;}
.al-section-actions{margin-left:auto;display:flex;gap:2px;}
.al-custom-box{
padding:16px 20px;background:var(--g50);border:1.5px solid var(--g200);
border-radius:12px;font-size:13.5px;color:var(--g500);min-height:60px;
margin-bottom:8px;resize:vertical;
}
.al-grid{
display:grid;grid-template-columns:repeat(7,1fr);gap:8px 12px;
}
.al-grid-item{
display:flex;align-items:center;gap:7px;cursor:pointer;padding:2px 0;
}
.al-grid-item input[type="checkbox"]{
width:16px;height:16px;accent-color:var(--blue);cursor:pointer;flex-shrink:0;
}
.al-grid-tag{
font-size:12px;font-weight:600;padding:3px 10px;border-radius:4px;
white-space:nowrap;letter-spacing:0.1px;
}
.al-footer{
padding:14px 22px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;
}
.al-add-btn{
padding:10px 28px;
background:linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
border:none;border-radius:24px;color:#fff;
font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;
cursor:pointer;transition:all 0.2s;
}
.al-add-btn:hover{box-shadow:0 2px 12px rgba(79,195,247,0.4);transform:translateY(-1px);}
.al-view-btn{
padding:10px 22px;background:none;
border:1.5px solid var(--cyan);border-radius:24px;
color:var(--coral);font-family:'DM Sans',sans-serif;
font-weight:600;font-size:14px;cursor:pointer;transition:all 0.15s;
}
.al-view-btn:hover{background:rgba(255,107,74,0.05);}
/* Auto Label Create Panel */
.alc-panel{
width:560px;max-height:88vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.alc-body{padding:24px;display:flex;flex-direction:column;gap:16px;flex:1;overflow-y:auto;}
.alc-tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;}
.alc-tag-item{display:flex;align-items:center;gap:6px;cursor:pointer;}
.alc-tag-item input[type="checkbox"]{display:none;}
.alc-tag-label{
font-size:12px;font-weight:600;padding:5px 14px;border-radius:6px;white-space:nowrap;
cursor:pointer;transition:all 0.15s;border:2px solid transparent;
user-select:none;
}
.alc-tag-label:hover{transform:scale(1.05);}
.alc-tag-item.selected .alc-tag-label{
border-color:var(--g900);
box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--g400);
transform:scale(1.08);
}
/* ═══ REMINDER PANEL ═══ */
.rem-panel{
width:560px;max-height:85vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.rem-header{
display:flex;align-items:center;padding:16px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.rem-header-icon{display:flex;align-items:center;color:var(--g900);}
.rem-header-icon svg{width:22px;height:22px;}
.rem-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.rem-body{flex:1;overflow-y:auto;padding:0;}
.rem-emails{max-height:220px;overflow-y:auto;}
.rem-email-card{border-bottom:1px solid var(--g200);padding:14px 24px;}
.rem-email-card:last-child{border-bottom:1px solid var(--g200);}
.rem-info{padding:4px 0;}
.rem-info-label{font-size:14px;font-weight:700;color:var(--g900);display:inline;}
.rem-info-value{font-size:14px;color:var(--g700);display:inline;margin-left:4px;}
.rem-options{padding:16px 24px;display:flex;flex-direction:column;gap:10px;}
.rem-option{
display:flex;align-items:center;padding:14px 18px;
border:1.5px solid var(--g300);border-radius:12px;
cursor:pointer;transition:all 0.15s;gap:12px;
}
.rem-option:hover{border-color:var(--g400);background:var(--g50);}
.rem-option.selected{border-color:var(--cyan);background:rgba(79,195,247,0.06);}
.rem-option-text{flex:1;font-size:14px;font-weight:600;color:var(--g900);}
.rem-option-radio{
width:22px;height:22px;border:2px solid var(--g400);border-radius:50%;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
transition:all 0.15s;
}
.rem-option.selected .rem-option-radio{border-color:var(--blue);}
.rem-option.selected .rem-option-radio::after{
content:'';width:12px;height:12px;border-radius:50%;background:var(--blue);
}
.rem-footer{
padding:14px 22px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;justify-content:flex-end;
}
.rem-confirm{
padding:10px 28px;background:linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
border:none;border-radius:24px;color:#fff;font-family:'DM Sans',sans-serif;
font-weight:600;font-size:14px;cursor:pointer;transition:all 0.2s;
}
.rem-confirm:hover{box-shadow:0 2px 12px rgba(79,195,247,0.4);transform:translateY(-1px);}
.rem-cancel{
padding:10px 22px;background:none;border:1.5px solid var(--cyan);border-radius:24px;
color:var(--coral);font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;
cursor:pointer;transition:all 0.15s;
}
.rem-cancel:hover{background:rgba(255,107,74,0.05);}
/* ═══ DATE TIME PICKER ═══ */
.dtp-panel{
width:620px;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.dtp-header{
display:flex;align-items:center;padding:16px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.dtp-header-icon{display:flex;align-items:center;color:var(--g900);}
.dtp-header-icon svg{width:22px;height:22px;}
.dtp-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.dtp-body{display:flex;padding:24px;gap:32px;}
.dtp-calendar{flex:1;}
.dtp-cal-nav{display:flex;align-items:center;margin-bottom:16px;}
.dtp-cal-title{flex:1;font-size:16px;font-weight:700;color:var(--g900);text-align:center;}
.dtp-cal-arrow{
width:32px;height:32px;display:flex;align-items:center;justify-content:center;
border:1px solid var(--g300);border-radius:50%;background:none;cursor:pointer;
color:var(--g600);transition:all 0.15s;
}
.dtp-cal-arrow:hover{background:var(--g100);color:var(--g800);}
.dtp-cal-arrow svg{width:18px;height:18px;}
.dtp-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:0;margin-bottom:8px;}
.dtp-weekday{text-align:center;font-size:12px;font-weight:600;color:var(--cyan);padding:4px 0;}
.dtp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.dtp-day{
width:36px;height:36px;display:flex;align-items:center;justify-content:center;
border-radius:50%;font-size:13px;color:var(--g800);cursor:pointer;transition:all 0.1s;
border:none;background:none;font-family:'DM Sans',sans-serif;margin:0 auto;
}
.dtp-day:hover{background:var(--g100);}
.dtp-day.today{background:var(--cyan);color:#fff;font-weight:700;}
.dtp-day.selected{background:var(--blue);color:#fff;font-weight:700;}
.dtp-day.empty{cursor:default;}
.dtp-day.empty:hover{background:none;}
.dtp-right{width:240px;display:flex;flex-direction:column;gap:20px;padding-top:8px;}
.dtp-field-label{font-size:15px;font-weight:700;color:var(--g900);margin-bottom:8px;}
.dtp-date-input{
padding:12px 16px;border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);
display:flex;align-items:center;gap:8px;
}
.dtp-date-input svg{width:18px;height:18px;color:var(--g500);margin-left:auto;}
.dtp-time-row{display:flex;gap:0;align-items:stretch;border:1.5px solid var(--g300);border-radius:12px;overflow:hidden;}
.dtp-time-input{
flex:1;padding:12px 14px;border:none;
font-family:'DM Sans',sans-serif;font-size:16px;font-weight:600;color:var(--g800);
text-align:center;outline:none;letter-spacing:1px;min-width:0;
}
.dtp-time-input:focus{background:var(--g50);}
.dtp-ampm-toggle{display:flex;flex-shrink:0;border-left:1.5px solid var(--g300);}
.dtp-ampm-btn{
padding:12px 16px;border:none;background:#fff;
font-family:'DM Sans',sans-serif;font-size:14px;font-weight:700;
color:var(--g600);cursor:pointer;transition:all 0.15s;
border-left:1px solid var(--g200);flex-shrink:0;
}
.dtp-ampm-btn:first-of-type{border-left:1.5px solid var(--g300);}
.dtp-ampm-btn:hover{background:var(--g100);}
.dtp-ampm-btn.selected{background:var(--cyan);color:#fff;}
.dtp-footer{
padding:14px 22px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;justify-content:flex-end;
}
/* ═══ TEMPLATES PANEL ═══ */
.tpl-panel{
width:620px;max-height:90vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.tpl-header{
display:flex;align-items:center;padding:14px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.tpl-header-icon{display:flex;align-items:center;color:var(--g900);}
.tpl-header-icon svg{width:22px;height:22px;}
.tpl-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.tpl-body{flex:1;overflow-y:auto;padding:20px 24px;display:flex;flex-direction:column;gap:16px;}
.tpl-field-label{font-size:14px;font-weight:700;color:var(--g900);margin-bottom:6px;}
.tpl-input{
width:100%;padding:12px 16px;border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);outline:none;
transition:border-color 0.2s;
}
.tpl-input:focus{border-color:var(--blue);}
.tpl-input::placeholder{color:var(--g500);}
.tpl-subject-editor{min-height:46px;line-height:1.5;white-space:pre-wrap;background:#fff;}
.tpl-subject-editor:empty::before{content:attr(data-placeholder);color:var(--g500);pointer-events:none;}
.tpl-subject-editor br{display:none;} /* keep subject as a single visual line */
.tpl-editor-wrap{border:1.5px solid var(--g300);border-radius:12px;overflow:visible;position:relative;}
.tpl-editor-wrap:focus-within{border-color:var(--blue);}
.tpl-toolbar{
display:flex;align-items:center;gap:2px;padding:6px 10px;
background:var(--g50);border-bottom:1px solid var(--g200);flex-wrap:wrap;
border-radius:12px 12px 0 0;
}
.tpl-toolbar select, .tpl-tb-select{
padding:5px 8px;border:1px solid var(--g300);border-radius:6px;
font-family:'DM Sans',sans-serif;font-size:12px;color:var(--g700);
background:#fff;cursor:pointer;outline:none;appearance:auto;
max-width:130px;
}
.tpl-tb-font{min-width:110px;}
.tpl-tb-select:hover{border-color:var(--g400);}
.tpl-tb-select:focus{border-color:var(--blue);}
.tpl-tb-btn{
width:28px;height:28px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:5px;cursor:pointer;
color:var(--g700);font-size:15px;font-weight:700;transition:all 0.1s;
font-family:'DM Sans',sans-serif;position:relative;
}
.tpl-tb-btn:hover{background:var(--g200);color:var(--g900);}
.tpl-tb-sep{width:1px;height:20px;background:var(--g300);margin:0 4px;}
/* Color buttons (font color + highlight) */
.tpl-tb-color-wrap{position:relative;display:inline-flex;}
.tpl-tb-color-btn{flex-direction:column;gap:0;padding:0;width:30px;height:28px;}
.tpl-tb-color-btn svg{margin-bottom:1px;}
.tpl-tb-color-bar{display:block;width:18px;height:3px;border-radius:1px;margin-top:-2px;border:0.5px solid rgba(0,0,0,0.12);}
/* Shared color-picker popup */
.tpl-color-picker{
display:none;position:absolute;top:46px;left:200px;z-index:50;
background:#fff;border:1px solid var(--g200);border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.06);
padding:12px;width:204px;
}
.tpl-color-picker.open{display:block;animation:slideUp 0.15s ease-out;}
.tpl-cp-label{font-size:12px;font-weight:700;color:var(--g800);margin-bottom:8px;}
.tpl-cp-grid{display:grid;grid-template-columns:repeat(8, 1fr);gap:4px;}
.tpl-cp-swatch{
width:20px;height:20px;border-radius:4px;cursor:pointer;
border:1px solid rgba(0,0,0,0.1);transition:transform 0.1s;
}
.tpl-cp-swatch:hover{transform:scale(1.15);box-shadow:0 1px 4px rgba(0,0,0,0.15);}
.tpl-cp-actions{margin-top:10px;padding-top:8px;border-top:1px solid var(--g200);}
.tpl-cp-clear{
width:100%;padding:6px 10px;background:var(--g100);border:none;border-radius:6px;
font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;color:var(--g700);
cursor:pointer;transition:background 0.1s;
}
.tpl-cp-clear:hover{background:var(--g200);color:var(--g900);}
/* Table picker grid */
.tpl-tb-table-wrap{position:relative;display:inline-flex;}
.tpl-table-picker{
display:none;position:absolute;top:32px;right:0;z-index:50;
background:#fff;border:1px solid var(--g200);border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.06);
padding:12px;
}
.tpl-table-picker.open{display:block;animation:slideUp 0.15s ease-out;}
.tpl-tp-label{font-size:12px;font-weight:700;color:var(--g800);margin-bottom:8px;text-align:center;}
.tpl-tp-grid{display:grid;grid-template-columns:repeat(8,16px);grid-gap:2px;}
.tpl-tp-cell{
width:16px;height:16px;border:1px solid var(--g300);
background:#fff;border-radius:2px;cursor:pointer;
}
.tpl-tp-cell.hover{background:var(--blue-light);border-color:var(--blue);}
/* Tables inserted into the editor */
.tpl-editor table.tpl-table{
border-collapse:collapse;margin:8px 0;
font-family:inherit;font-size:13px;
}
.tpl-editor table.tpl-table td{
border:1px solid var(--g300);padding:6px 10px;
min-width:60px;vertical-align:top;
}
.tpl-editor table.tpl-table th{
border:1px solid var(--g300);padding:6px 10px;
background:var(--g100);font-weight:600;text-align:left;
}
.tpl-editor{
min-height:100px;padding:12px 16px;outline:none;
font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);
line-height:1.7;
}
.tpl-editor:empty::before{content:attr(data-placeholder);color:var(--g500);}
.tpl-editor .tpl-var, .tpl-subject-editor .tpl-var, .compose-body-editor .tpl-var, .edi-ic-body .tpl-var{
display:inline-block;background:var(--blue);color:#fff;
padding:1px 9px;border-radius:10px;font-weight:600;font-size:12.5px;
font-family:'DM Sans',sans-serif;line-height:1.5;letter-spacing:0.1px;
user-select:all;vertical-align:baseline;margin:0 1px;
box-shadow:0 1px 2px rgba(74,158,232,0.25);
}
.tpl-editor .tpl-var::before, .tpl-subject-editor .tpl-var::before, .compose-body-editor .tpl-var::before, .edi-ic-body .tpl-var::before{
content:'';display:inline-block;width:5px;height:5px;border-radius:50%;
background:#fff;opacity:0.85;margin-right:6px;vertical-align:middle;margin-top:-1px;
}
.tpl-btn-row{display:flex;gap:10px;align-items:center;}
.tpl-save-btn{
padding:8px 22px;background:var(--coral);border:none;border-radius:24px;
color:#fff;font-family:'DM Sans',sans-serif;font-weight:600;font-size:13px;
cursor:pointer;transition:all 0.2s;
}
.tpl-save-btn:hover{box-shadow:0 2px 10px rgba(255,107,74,0.3);}
.tpl-vars-section{margin-top:4px;}
.tpl-vars-title{font-size:14px;font-weight:700;color:var(--g900);margin-bottom:8px;display:flex;align-items:center;}
.tpl-vars-title-actions{margin-left:auto;display:flex;gap:2px;}
.tpl-var-chips{display:flex;flex-wrap:wrap;gap:8px;}
.tpl-var-chip{
display:flex;align-items:center;gap:4px;padding:7px 16px;
border:1.5px solid var(--g300);border-radius:24px;background:#fff;
font-size:13px;color:var(--g700);cursor:pointer;transition:all 0.15s;
font-family:'DM Sans',sans-serif;
}
.tpl-var-chip:hover{border-color:var(--cyan);background:rgba(79,195,247,0.04);color:var(--g900);}
.tpl-var-chip .plus{color:var(--cyan);font-weight:700;margin-right:2px;}
.tpl-saved-section{margin-top:8px;}
.tpl-saved-title{font-size:14px;font-weight:700;color:var(--g900);margin-bottom:10px;}
.tpl-saved-list{display:flex;flex-direction:column;gap:8px;}
.tpl-saved-item{
display:flex;align-items:center;padding:14px 18px;
border:1.5px solid var(--g300);border-radius:12px;background:#fff;
transition:all 0.15s;
}
.tpl-saved-item:hover{border-color:var(--g400);background:var(--g50);}
.tpl-saved-name{flex:1;font-size:14px;font-weight:600;color:var(--g900);}
.tpl-saved-actions{display:flex;gap:2px;}
.tpl-saved-act{
width:30px;height:30px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;
color:var(--g600);transition:all 0.15s;
}
.tpl-saved-act:hover{background:var(--g100);color:var(--g900);}
.tpl-saved-act svg{width:16px;height:16px;}
.tpl-footer{
padding:14px 22px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;justify-content:flex-end;
}
/* Create Variable Panel */
.cv-panel{
width:420px;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.cv-body{padding:24px;display:flex;flex-direction:column;gap:16px;}
/* Template slash dropdown */
.tpl-slash-dropdown{
position:absolute;bottom:100%;left:0;right:0;margin-bottom:6px;
background:#fff;border:1.5px solid var(--g300);border-radius:12px;
box-shadow:0 4px 20px rgba(0,0,0,0.12);max-height:200px;overflow-y:auto;
z-index:50;display:none;
}
.tpl-slash-dropdown.open{display:block;}
.tpl-slash-header{
padding:8px 14px;font-size:11px;font-weight:700;color:var(--g500);
text-transform:uppercase;letter-spacing:1px;border-bottom:1px solid var(--g200);
}
.tpl-slash-item{
padding:10px 16px;cursor:pointer;font-size:13.5px;font-weight:500;
color:var(--g800);transition:all 0.1s;display:flex;align-items:center;gap:8px;
}
.tpl-slash-item:hover{background:var(--blue-bg);color:var(--blue);}
.tpl-slash-item .slash-name{font-weight:600;}
.tpl-slash-item .slash-subj{color:var(--g500);font-size:12px;margin-left:auto;}
.tpl-slash-empty{padding:12px 16px;font-size:13px;color:var(--g500);font-style:italic;}
/* Variable Fill Window */
.vf-panel{
width:480px;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.vf-body{flex:1;overflow-y:auto;padding:24px;display:flex;flex-direction:column;gap:16px;}
.vf-body .byo-input{border-color:#6366f1;border-width:2px;}
.vf-body .byo-input:focus{border-color:#4f46e5;box-shadow:0 0 0 3px rgba(99,102,241,0.1);}
.vf-body .byo-field-label{color:#1e1b4b;font-size:15px;}
.vf-footer{
padding:20px 24px;
background:linear-gradient(180deg, rgba(224,220,255,0.3) 0%, rgba(199,194,255,0.4) 100%);
display:flex;flex-direction:column;gap:12px;
}
.vf-controls{display:flex;gap:12px;align-items:center;}
.vf-ai-btn{
padding:10px 16px;border:1px solid var(--g300);border-radius:10px;
background:#fff;display:flex;align-items:center;gap:6px;
cursor:pointer;color:#6366f1;font-size:13px;font-weight:600;
font-family:'DM Sans',sans-serif;transition:all 0.15s;
}
.vf-ai-btn:hover{background:var(--g50);border-color:#6366f1;}
.vf-ai-btn svg{width:18px;height:18px;}
.vf-length-btn{
padding:10px 16px;border:1px solid var(--g300);border-radius:10px;
background:#fff;display:flex;align-items:center;gap:6px;
cursor:pointer;color:#6366f1;font-size:15px;font-weight:700;
font-family:'DM Sans',sans-serif;transition:all 0.15s;
}
.vf-length-btn:hover{background:var(--g50);border-color:#6366f1;}
.vf-write-btn{
width:100%;padding:14px;border:none;border-radius:12px;
background:#6366f1;color:#fff;font-family:'DM Sans',sans-serif;
font-size:15px;font-weight:700;cursor:pointer;transition:all 0.2s;
display:flex;align-items:center;justify-content:center;gap:8px;
}
.vf-write-btn:hover{background:#4f46e5;box-shadow:0 4px 16px rgba(99,102,241,0.3);}
.vf-write-btn svg{width:18px;height:18px;}
.vf-clear{
font-size:13px;font-weight:600;color:#6366f1;cursor:pointer;
background:none;border:none;margin-left:auto;text-decoration:underline;
font-family:'DM Sans',sans-serif;
}
.vf-clear:hover{color:#4f46e5;}
/* Compose enhancements */
.compose-fields{}
.compose-ccbcc-btns{display:flex;gap:4px;flex-shrink:0;margin-left:8px;}
.compose-ccbcc{
padding:2px 10px;border:1px solid var(--g300);border-radius:12px;
background:none;font-family:'DM Sans',sans-serif;font-size:11px;
font-weight:600;color:var(--g600);cursor:pointer;transition:all 0.15s;
}
.compose-ccbcc:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-bg);}
.compose-ccbcc.active{background:var(--blue-bg);color:var(--blue);border-color:var(--blue);}
.compose-send-group{display:flex;align-items:stretch;position:relative;}
.compose-send{border-radius:20px 0 0 20px;padding:8px 18px 8px 24px;}
.compose-send-arrow{
padding:8px 10px;background:var(--coral);border:none;
border-left:1px solid rgba(255,255,255,0.3);border-radius:0 20px 20px 0;
color:#fff;cursor:pointer;display:flex;align-items:center;transition:background 0.15s;
}
.compose-send-arrow:hover{background:#e55a3a;}
.compose-schedule-dd{
position:absolute;bottom:100%;left:0;margin-bottom:6px;
background:#fff;border:1.5px solid var(--g300);border-radius:10px;
box-shadow:0 4px 16px rgba(0,0,0,0.12);display:none;min-width:180px;z-index:10;
}
.compose-schedule-dd.open{display:block;}
.compose-schedule-item{
display:flex;align-items:center;gap:8px;padding:10px 16px;
cursor:pointer;font-size:13px;font-weight:500;color:var(--g800);
transition:all 0.1s;border-radius:10px;
}
.compose-schedule-item:hover{background:var(--blue-bg);color:var(--blue);}
.compose-delete:hover{color:var(--red) !important;background:rgba(217,48,37,0.08) !important;}
.compose-format-bar{
display:flex;align-items:center;gap:4px;padding:6px 10px;
background:var(--g50);border-bottom:1px solid var(--g200);
}
/* Account dropdown menu */
.account-menu{
position:absolute;top:100%;right:0;margin-top:8px;
width:280px;background:#fff;border:1.5px solid var(--g200);border-radius:16px;
box-shadow:0 4px 20px rgba(0,0,0,0.12);z-index:50;
display:none;animation:slideUp 0.15s ease-out;
padding:16px;
}
.account-menu.open{display:block;}
.acct-profile{display:flex;align-items:center;gap:12px;padding-bottom:14px;}
.acct-avatar{
width:44px;height:44px;border-radius:50%;
background:linear-gradient(135deg,var(--cyan),#29B6F6);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:18px;flex-shrink:0;
}
.acct-info{flex:1;min-width:0;}
.acct-email{font-size:13px;font-weight:600;color:var(--g900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-name{font-size:12.5px;color:var(--g600);margin-top:1px;}
.acct-actions{display:flex;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--g200);margin-bottom:12px;}
.acct-manage{
padding:7px 20px;background:linear-gradient(135deg,#4FC3F7,#29B6F6);
border:none;border-radius:20px;color:#fff;font-family:'DM Sans',sans-serif;
font-weight:600;font-size:12.5px;cursor:pointer;transition:all 0.15s;
}
.acct-manage:hover{box-shadow:0 2px 10px rgba(79,195,247,0.35);}
.acct-remove{
padding:7px 18px;background:none;border:1.5px solid var(--cyan);
border-radius:20px;color:var(--cyan);font-family:'DM Sans',sans-serif;
font-weight:600;font-size:12.5px;cursor:pointer;transition:all 0.15s;
}
.acct-remove:hover{background:rgba(79,195,247,0.06);}
.acct-add{
width:100%;padding:10px;background:none;
border:1.5px solid var(--g300);border-radius:24px;
font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
color:var(--g700);cursor:pointer;transition:all 0.15s;text-align:center;
}
.acct-add:hover{border-color:var(--cyan);color:var(--g900);background:var(--g50);}
/* ═══ SETTINGS PANEL ═══ */
.settings-panel{
width:820px;max-height:88vh;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.12);
display:flex;flex-direction:column;overflow:hidden;animation:slideUp 0.2s ease-out;
}
.settings-header{
display:flex;align-items:center;padding:14px 22px;gap:10px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.settings-header-icon{display:flex;align-items:center;color:var(--g900);}
.settings-header-icon svg{width:22px;height:22px;}
.settings-header-title{font-size:17px;font-weight:700;color:var(--g900);flex:1;}
.settings-body{display:flex;flex:1;overflow:hidden;}
.settings-sidebar{
width:200px;border-right:1px solid var(--g200);padding:16px 0;
flex-shrink:0;overflow-y:auto;
}
.settings-nav-section{
font-size:12px;font-weight:700;color:var(--g800);
padding:12px 20px 6px;letter-spacing:0.3px;
}
.settings-nav-item{
display:flex;align-items:center;gap:10px;
padding:9px 20px;font-size:13.5px;font-weight:500;
color:var(--g700);cursor:pointer;transition:all 0.1s;
}
.settings-nav-item:hover{background:var(--g50);color:var(--g900);}
.settings-nav-item.active{color:var(--blue);font-weight:600;background:var(--blue-bg);}
.settings-nav-item svg{width:18px;height:18px;opacity:0.7;flex-shrink:0;}
.settings-nav-item.active svg{opacity:1;color:var(--blue);}
.settings-content{flex:1;overflow-y:auto;padding:24px 32px;}
.settings-page-title{font-size:18px;font-weight:700;color:var(--g900);margin-bottom:4px;}
.settings-page-desc{font-size:13px;color:var(--g600);margin-bottom:20px;}
.settings-section{margin-bottom:20px;}
.settings-label{font-size:14px;font-weight:700;color:var(--g900);margin-bottom:6px;}
.settings-input{
width:100%;padding:12px 16px;border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);outline:none;
transition:border-color 0.2s;
}
.settings-input:focus{border-color:var(--blue);}
.settings-input::placeholder{color:var(--g500);}
.settings-pw-wrap{position:relative;}
.settings-pw-wrap .settings-input{padding-right:46px;}
.settings-pw-toggle{
position:absolute;top:50%;right:8px;transform:translateY(-50%);
width:32px;height:32px;display:flex;align-items:center;justify-content:center;
background:none;border:none;border-radius:8px;color:var(--g500);cursor:pointer;
transition:all 0.15s;
}
.settings-pw-toggle:hover{background:var(--g100);color:var(--g800);}
.settings-pw-error{
margin-top:8px;padding:8px 12px;border-radius:8px;
background:#fee2e2;color:var(--red);font-size:12.5px;line-height:1.5;
font-family:'DM Sans',sans-serif;
}
.settings-input.invalid{border-color:var(--red);}
.settings-textarea{
width:100%;padding:12px 16px;border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);outline:none;
min-height:80px;resize:vertical;transition:border-color 0.2s;
}
.settings-textarea:focus{border-color:var(--blue);}
.settings-textarea::placeholder{color:var(--g500);}
.settings-select{
width:100%;padding:12px 16px;border:1.5px solid var(--g300);border-radius:12px;
font-family:'DM Sans',sans-serif;font-size:14px;color:var(--g800);
background:#fff;appearance:auto;cursor:pointer;outline:none;
}
.settings-photo-row{
display:flex;align-items:center;gap:16px;padding:16px;
border:1.5px solid var(--g300);border-radius:12px;margin-bottom:4px;
}
.settings-photo-avatar{
width:64px;height:64px;border-radius:50%;
background:linear-gradient(135deg,var(--cyan),#29B6F6);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:24px;flex-shrink:0;
}
.settings-photo-info{flex:1;}
.settings-photo-label{font-size:14px;font-weight:600;color:var(--g900);margin-bottom:6px;}
.settings-upload-btn{
padding:6px 18px;background:linear-gradient(135deg,#4FC3F7,#29B6F6);
border:none;border-radius:16px;color:#fff;font-family:'DM Sans',sans-serif;
font-weight:600;font-size:12px;cursor:pointer;transition:all 0.15s;
}
.settings-upload-btn:hover{box-shadow:0 2px 8px rgba(79,195,247,0.35);}
.settings-photo-delete{
width:32px;height:32px;display:flex;align-items:center;justify-content:center;
border:1px solid var(--g300);background:none;border-radius:50%;cursor:pointer;
color:var(--g600);transition:all 0.15s;
}
.settings-photo-delete:hover{color:var(--red);border-color:var(--red);background:rgba(217,48,37,0.05);}
.settings-photo-delete svg{width:16px;height:16px;}
.settings-text-style{
display:flex;align-items:center;gap:4px;padding:8px 12px;
border:1.5px solid var(--g300);border-radius:12px;flex-wrap:wrap;
}
.settings-text-style select{
padding:4px 8px;border:1px solid var(--g300);border-radius:6px;
font-family:'DM Sans',sans-serif;font-size:12px;color:var(--g700);
background:#fff;cursor:pointer;appearance:auto;
}
.settings-text-style .tpl-tb-btn{
width:28px;height:28px;
}
.settings-footer{
padding:14px 24px;border-top:1px solid var(--g200);
background:var(--g50);display:flex;align-items:center;gap:12px;
}
.settings-save{
padding:10px 28px;background:var(--coral);border:none;border-radius:24px;
color:#fff;font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;
cursor:pointer;transition:all 0.2s;
}
.settings-save:hover{box-shadow:0 2px 12px rgba(255,107,74,0.35);}
.settings-cancel-btn{
padding:10px 22px;background:none;border:1px solid var(--g300);border-radius:24px;
color:var(--g700);font-family:'DM Sans',sans-serif;font-weight:600;font-size:14px;
cursor:pointer;transition:all 0.15s;
}
.settings-cancel-btn:hover{background:var(--g50);border-color:var(--g400);}
/* ═══ INLINE EMAIL DETAIL ═══ */
.email-detail-inline{
flex:1;display:flex;flex-direction:column;overflow:hidden;
}
.edi-toolbar{
display:flex;align-items:center;padding:0 12px;height:44px;
border-bottom:1px solid var(--g200);gap:2px;
}
.edi-back{
width:32px;height:32px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g700);
transition:background 0.15s;margin-right:8px;
}
.edi-back:hover{background:var(--g100);}
.edi-back svg{width:20px;height:20px;}
.edi-tool{
width:32px;height:32px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);
transition:all 0.15s;
}
.edi-tool:hover{background:var(--g100);color:var(--g800);}
.edi-tool-warn:hover{background:#fff3e0;color:#e65100;}
.edi-tool-danger:hover{background:#fee2e2;color:var(--red);}
.edi-tool svg{width:18px;height:18px;}
.edi-spacer{flex:1;}
.edi-page{font-size:12px;color:var(--g600);margin:0 8px;font-variant-numeric:tabular-nums;}
.edi-subject-row{
display:flex;align-items:center;gap:10px;
padding:16px 24px 12px;
}
.edi-subject{font-size:19px;font-weight:700;color:var(--g900);flex:1;letter-spacing:-0.3px;}
.edi-label-chip{
font-size:13px;font-weight:600;padding:5px 14px;border-radius:6px;
background:var(--blue-bg);color:var(--blue);letter-spacing:0.2px;
}
.edi-scroll{flex:1;overflow-y:auto;padding:0 24px 24px;}
.edi-meta{
display:flex;align-items:center;gap:12px;padding:12px 0 4px;
}
.edi-avatar{
width:40px;height:40px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:15px;flex-shrink:0;
}
.edi-sender-info{flex:1;}
.edi-sender-name{font-size:14px;font-weight:600;color:var(--g900);display:flex;align-items:center;gap:6px;}
.edi-sender-email{font-size:12px;color:var(--g600);}
.edi-to-me{font-size:12px;color:var(--g600);margin-top:1px;}
.edi-to-row{display:flex;align-items:center;gap:6px;margin-top:1px;}
.edi-headers-toggle{
width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
background:none;border:none;border-radius:3px;cursor:pointer;color:var(--g500);
transition:background 0.12s, transform 0.18s;
}
.edi-headers-toggle:hover{background:var(--g100);color:var(--g800);}
.edi-headers-toggle svg{width:14px;height:14px;}
.edi-headers-toggle.open{transform:rotate(-180deg);color:var(--g800);}
.edi-headers{
margin-top:10px;padding:14px 18px;background:#fff;
border:1px solid var(--g200);border-radius:10px;
box-shadow:0 1px 3px rgba(0,0,0,0.04);
animation:slideUp 0.18s ease-out;
}
.edi-headers-table{border-collapse:collapse;width:100%;font-size:13px;line-height:1.6;}
.edi-headers-table td{padding:4px 0;vertical-align:top;}
.edi-headers-key{
width:72px;padding-right:14px !important;text-align:right;
color:var(--g600);font-weight:400;text-transform:lowercase;
font-variant-numeric:tabular-nums;
}
.edi-headers-val{color:var(--g800);}
.edi-headers-val b{font-weight:700;color:var(--g900);}
.edi-date{font-size:12px;color:var(--g600);flex-shrink:0;font-variant-numeric:tabular-nums;}
.edi-date-actions{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.edi-assigned-chip{
font-size:11.5px;color:#4a9ee8;background:rgba(74,158,232,0.10);
padding:3px 10px;border-radius:12px;white-space:nowrap;font-weight:500;
}
.edi-assigned-chip b{font-weight:700;}
.edi-content{font-size:14px;line-height:1.75;color:var(--g800);padding:0 0 16px;}
/* Single-message body — indent it to line up with the sender name + "to"
line (which sit to the right of the 40px avatar + 12px gap), and there's
no divider line above it. Mirrors Gmail's single-message layout. */
.edi-content-single{padding-left:52px;padding-top:2px;}
.edi-content-single > *:first-child{margin-top:0;padding-top:0;}
.edi-thread{margin-top:8px;display:flex;flex-direction:column;}
/* .edi-thread-msg no longer draws its own separator line in the thread
collapse engine — that wraps every message in a .edi-thread-item div
which carries the single border-top. A border here too produced a
double line on expanded messages.
The legacy in-memory reply list (renderThreadReplies) still stacks
bare .edi-thread-msg elements inside a .edi-thread container, so we
scope the old separator to that container only. */
.edi-thread-msg{
padding-top:4px;
}
.edi-thread > .edi-thread-msg{
border-top:1px solid var(--g200);padding-top:18px;margin-top:12px;
}
/* Thread message: keep the body close to the "to ..." header line. The body
HTML often leads with a /
that carries its own top margin — strip
that so there's no large empty band between the header and the first line. */
.edi-thread-msg-header{padding-bottom:4px;}
.edi-thread-msg-body{margin-top:0;}
.edi-thread-msg-body > *:first-child{margin-top:0;padding-top:0;}
.edi-thread-msg .edi-content{padding-bottom:8px;}
.edi-content p{margin-bottom:14px;}
.edi-attachments{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.edi-reply-bar{
display:flex;align-items:center;gap:8px;
padding:12px 24px;border-top:1px solid var(--g200);
background:#fff;flex-shrink:0;
}
.edi-reply-btn{
display:flex;align-items:center;gap:6px;padding:8px 18px;
border:1.5px solid var(--g300);border-radius:20px;background:#fff;
font-family:'DM Sans',sans-serif;font-size:13px;font-weight:500;
color:var(--g700);cursor:pointer;transition:all 0.15s;
}
.edi-reply-btn:hover{border-color:var(--g400);background:var(--g50);color:var(--g900);}
.edi-reply-btn svg{width:16px;height:16px;}
/* Inline reply compose */
.edi-inline-compose{
position:relative;
border-top:1px solid var(--g200);flex-shrink:0;
padding:0 24px 16px;background:#fff;
}
.edi-ic-header{
display:flex;align-items:center;gap:8px;padding:10px 0 8px;
font-size:13px;color:var(--g600);
}
.edi-ic-header span{font-weight:600;color:var(--g800);}
.edi-ic-to{
display:flex;align-items:center;gap:6px;padding:6px 0;
font-size:13px;color:var(--g700);border-bottom:1px solid var(--g200);
}
.edi-ic-to-label{color:var(--g500);font-size:12px;width:36px;flex-shrink:0;}
.edi-ic-to-value{flex:1;font-size:13px;color:var(--g800);border:none;outline:none;font-family:'DM Sans',sans-serif;background:none;}
/* Recipient chips (To / Cc / Bcc in compose, reply, reply-all, forward). The wrap is a
flex container that holds previously-entered addresses as blue pills plus the live
editable input that flexes to fill the rest of the row. */
.recip-chips-wrap{
display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;
flex:1;min-width:0;
}
.recip-chips{display:contents;}
.recip-chip{
display:inline-flex;align-items:center;gap:4px;
background:var(--blue-bg);color:var(--blue);
border-radius:14px;padding:2px 4px 2px 10px;
font-size:12.5px;font-weight:500;font-family:'DM Sans',sans-serif;
line-height:1.5;max-width:100%;
}
.recip-chip-text{
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;
}
.recip-chip-x{
width:18px;height:18px;border:none;background:transparent;color:var(--blue);
cursor:pointer;display:flex;align-items:center;justify-content:center;
border-radius:50%;font-size:14px;line-height:1;padding:0;flex-shrink:0;
font-family:inherit;
}
.recip-chip-x:hover{background:rgba(74,158,232,0.18);}
.recip-chips-input{
flex:1;min-width:80px;border:none;outline:none;background:none;
font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);
padding:2px 0;
}
.edi-ic-recip-triggers{display:inline-flex;gap:2px;flex-shrink:0;margin-left:6px;}
.edi-ic-recip-add{
background:none;border:none;padding:3px 8px;border-radius:6px;
font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
color:var(--g600);cursor:pointer;transition:all 0.12s;
}
.edi-ic-recip-add:hover{background:var(--blue-bg);color:var(--blue);}
.edi-ic-body{
min-height:100px;max-height:200px;overflow-y:auto;
padding:10px 0;font-size:14px;line-height:1.7;color:var(--g800);
outline:none;font-family:'DM Sans',sans-serif;
}
.edi-ic-body:empty::before{content:attr(data-placeholder);color:var(--g500);}
.edi-ic-body table{border-collapse:collapse;margin:8px 0;}
.edi-ic-body table td, .edi-ic-body table th{border:1px solid var(--g300);padding:6px 10px;min-width:60px;vertical-align:top;}
.edi-ic-body table th{background:var(--g100);font-weight:600;text-align:left;}
.edi-ic-toolbar{
display:flex;align-items:center;gap:4px;padding:8px 0 0;
border-top:1px solid var(--g200);
}
.edi-ic-send{
padding:7px 20px;background:linear-gradient(135deg,var(--coral),#FF8A6A);
border:none;border-radius:18px;color:#fff;font-weight:600;font-size:13px;
cursor:pointer;font-family:'DM Sans',sans-serif;transition:all 0.2s;
}
.edi-ic-send:hover{box-shadow:0 2px 10px rgba(255,107,74,0.3);}
.compose-send-group .edi-ic-send{border-radius:18px 0 0 18px;padding:7px 16px 7px 20px;}
.edi-ic-tool{
width:30px;height:30px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);
transition:all 0.15s;
}
.edi-ic-tool:hover{background:var(--g100);color:var(--g800);}
.edi-ic-tool svg{width:16px;height:16px;}
/* Reply composer format row */
.edi-ic-format-row{
display:flex;align-items:center;gap:2px;padding:6px 0 8px;
border-top:1px solid var(--g200);flex-wrap:wrap;
}
.fmt-select{
padding:4px 8px;border:1px solid var(--g300);border-radius:6px;
font-family:'DM Sans',sans-serif;font-size:12px;color:var(--g700);
background:#fff;cursor:pointer;outline:none;appearance:auto;
max-width:130px;
}
.fmt-font{min-width:110px;}
.fmt-select:hover{border-color:var(--g400);}
.fmt-select:focus{border-color:var(--blue);}
/* Color buttons + picker (reply composer; shares logic with template editor's color picker) */
.edi-color-wrap{position:relative;display:inline-flex;}
.edi-color-btn{flex-direction:column;gap:0;padding:0;width:30px;height:28px;}
.edi-color-btn svg{margin-bottom:1px;}
.edi-color-bar{display:block;width:18px;height:3px;border-radius:1px;margin-top:-2px;border:0.5px solid rgba(0,0,0,0.12);}
.edi-color-picker{
display:none;position:absolute;z-index:50;
background:#fff;border:1px solid var(--g200);border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.06);
padding:12px;width:204px;
}
.edi-color-picker.open{display:block;animation:slideUp 0.15s ease-out;}
.edi-cp-label{font-size:12px;font-weight:700;color:var(--g800);margin-bottom:8px;}
.edi-cp-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;}
.edi-cp-swatch{width:20px;height:20px;border-radius:4px;cursor:pointer;border:1px solid rgba(0,0,0,0.1);transition:transform 0.1s;}
.edi-cp-swatch:hover{transform:scale(1.15);box-shadow:0 1px 4px rgba(0,0,0,0.15);}
.edi-cp-actions{margin-top:10px;padding-top:8px;border-top:1px solid var(--g200);}
.edi-cp-clear{
width:100%;padding:6px 10px;background:var(--g100);border:none;border-radius:6px;
font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;color:var(--g700);
cursor:pointer;transition:background 0.1s;
}
.edi-cp-clear:hover{background:var(--g200);color:var(--g900);}
/* Signature dropdown menu (used by both compose and reply) */
.sig-menu{
display:none;position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);
background:#fff;border:1px solid var(--g200);border-radius:10px;
box-shadow:0 6px 20px rgba(0,0,0,0.12),0 1px 4px rgba(0,0,0,0.06);
min-width:260px;max-width:340px;max-height:300px;overflow-y:auto;
z-index:60;padding:6px;
}
.sig-menu.open{display:block;animation:slideUp 0.15s ease-out;}
.sig-menu-header{font-size:11px;font-weight:700;color:var(--g500);text-transform:uppercase;letter-spacing:0.6px;padding:6px 10px 4px;}
.sig-menu-item{
display:flex;flex-direction:column;gap:2px;padding:8px 10px;border-radius:6px;cursor:pointer;
transition:background 0.12s;
}
.sig-menu-item:hover{background:var(--blue-bg);}
.sig-menu-item .sig-menu-name{font-size:13px;font-weight:600;color:var(--g900);}
.sig-menu-item .sig-menu-preview{font-size:11.5px;color:var(--g600);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:300px;}
.sig-menu-empty{padding:14px 12px;font-size:12.5px;color:var(--g600);text-align:center;line-height:1.5;}
.sig-menu-empty a{color:var(--blue);font-weight:600;cursor:pointer;text-decoration:underline;}
/* Inline image embedded into reply/compose */
.compose-body-editor img, .edi-ic-body img{max-width:100%;height:auto;border-radius:6px;margin:6px 0;}
/* Bullet/numbered lists inside the editors. The global `* { padding:0 }` reset strips
the default ul/ol padding so the bullets sit outside the visible area. Restore proper
list styling here so insertUnorderedList / insertOrderedList produce visible lists. */
.compose-body-editor ul, .edi-ic-body ul,
.compose-body-editor ol, .edi-ic-body ol{
margin:6px 0;padding-left:32px;
}
.compose-body-editor ul, .edi-ic-body ul{list-style:disc outside;}
.compose-body-editor ol, .edi-ic-body ol{list-style:decimal outside;}
.compose-body-editor ul ul, .edi-ic-body ul ul{list-style:circle outside;}
.compose-body-editor ul ul ul, .edi-ic-body ul ul ul{list-style:square outside;}
.compose-body-editor li, .edi-ic-body li{margin:2px 0;line-height:1.6;}
/* Attachment chip strips (reply + compose) */
.edi-ic-attach-strip, .compose-attach-strip{
display:flex;flex-wrap:wrap;gap:6px;
padding:8px 0;border-top:1px solid var(--g200);
}
.compose-attach-strip{padding:8px 16px;}
.attach-strip-chip{
display:inline-flex;align-items:center;gap:8px;
background:var(--g100);border:1px solid var(--g200);border-radius:16px;
padding:5px 6px 5px 12px;font-size:12px;color:var(--g800);
font-family:'DM Sans',sans-serif;max-width:240px;
transition:background 0.12s, border-color 0.12s;
}
.attach-strip-chip:hover{background:var(--g50);border-color:var(--g300);}
.attach-strip-chip svg.att-icon{width:14px;height:14px;color:var(--g600);flex-shrink:0;}
.attach-strip-chip .att-name{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.attach-strip-chip .att-size{color:var(--g500);font-size:11px;font-variant-numeric:tabular-nums;flex-shrink:0;}
.attach-strip-chip .att-remove{
width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g500);flex-shrink:0;
}
.attach-strip-chip .att-remove:hover{background:#fee2e2;color:var(--red);}
.attach-strip-chip .att-remove svg{width:12px;height:12px;}
.edi-ic-discard{margin-left:auto;}
.edi-ic-discard:hover{color:var(--red) !important;}
/* ═══ ASSIGN EMAIL PANEL ═══ */
.assign-panel{
position:fixed;top:var(--topbar-h);right:var(--rbar-w);bottom:0;
width:360px;background:#fff;border-left:1px solid var(--g200);
box-shadow:-4px 0 16px rgba(0,0,0,0.06);z-index:40;
display:none;flex-direction:column;animation:slideLeft 0.2s ease-out;
}
@keyframes slideLeft{from{transform:translateX(20px);opacity:0;}to{transform:translateX(0);opacity:1;}}
.assign-panel.open{display:flex;}
.assign-header{
display:flex;align-items:center;gap:8px;padding:12px 16px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.assign-header svg{width:20px;height:20px;color:var(--g800);}
.assign-header-title{font-size:15px;font-weight:700;color:var(--g900);flex:1;}
.assign-body{flex:1;overflow-y:auto;padding:12px 16px;}
.assign-current{
padding:8px 12px;background:rgba(255,107,74,0.08);border:1px solid rgba(255,107,74,0.2);
border-radius:8px;font-size:12.5px;color:var(--g800);margin-bottom:12px;
}
.assign-current b{color:var(--coral);}
.assign-self-card{
display:flex;align-items:center;gap:10px;padding:10px 0;
border-bottom:1px solid var(--g200);margin-bottom:8px;
}
.assign-avatar{
width:36px;height:36px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:14px;flex-shrink:0;position:relative;
}
/* Online / offline status indicator on Connect tab + Assign panel avatars.
Small dot sits at bottom-right with a white ring so it reads cleanly against
the coloured avatar background. */
.status-dot{
position:absolute;bottom:-1px;right:-1px;
width:11px;height:11px;border-radius:50%;
border:2px solid #fff;background:var(--g400);
box-sizing:border-box;
}
.status-dot.online{background:#22c55e;}
.status-dot.offline{background:#9ca3af;}
/* Smaller status dot for the compact 32px avatars (chat header, team-member card) */
.conn-avatar[style*="32px"] .status-dot,
.team-member-card .assign-avatar .status-dot{
width:9px;height:9px;border-width:1.5px;
}
.assign-name{font-size:13px;font-weight:600;color:var(--g900);}
.assign-email-text{font-size:11.5px;color:var(--g600);}
.assign-self-btn{
width:100%;padding:8px;background:linear-gradient(135deg,#4FC3F7,#29B6F6);
border:none;border-radius:8px;color:#fff;font-family:'DM Sans',sans-serif;
font-weight:600;font-size:12.5px;cursor:pointer;transition:all 0.15s;margin-top:6px;
}
.assign-self-btn:hover{box-shadow:0 2px 8px rgba(79,195,247,0.35);}
.assign-search{
width:100%;padding:8px 12px 8px 34px;border:1.5px solid var(--g300);border-radius:10px;
font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);
outline:none;margin:10px 0;background:#fff;transition:border-color 0.2s;
}
.assign-search:focus{border-color:var(--blue);}
.assign-search-wrap{position:relative;}
.assign-search-wrap svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--g500);}
.assign-member{
border:1.5px solid var(--g200);border-radius:10px;padding:12px;margin-bottom:10px;
}
.assign-member-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.assign-btn{
width:100%;padding:7px;border:1.5px solid var(--cyan);border-radius:8px;
background:none;font-family:'DM Sans',sans-serif;font-weight:600;font-size:12.5px;
color:var(--cyan);cursor:pointer;transition:all 0.15s;
}
.assign-btn:hover{background:rgba(79,195,247,0.06);}
.assign-section-title{font-size:13px;font-weight:700;color:var(--g900);margin:16px 0 8px;}
.assign-date-label{font-size:11px;color:var(--g600);font-weight:600;margin:10px 0 6px;border-bottom:1px solid var(--g200);padding-bottom:4px;}
.assigned-item{
border:1.5px solid var(--g200);border-radius:10px;padding:10px 12px;margin-bottom:8px;
position:relative;
}
.assigned-item-line{font-size:12px;color:var(--g700);line-height:1.6;}
.assigned-item-line b{color:var(--g900);font-weight:600;}
.assigned-reminder{
position:absolute;top:10px;right:10px;width:24px;height:24px;
display:flex;align-items:center;justify-content:center;
border:none;background:none;cursor:pointer;color:var(--g500);
border-radius:50%;transition:all 0.15s;
}
.assigned-reminder:hover{background:var(--g100);color:var(--g800);}
.assigned-reminder svg{width:16px;height:16px;}
/* ═══ CONNECT / CHAT PANEL ═══ */
.connect-panel{
position:fixed;top:var(--topbar-h);right:var(--rbar-w);bottom:0;
width:360px;background:#fff;border-left:1px solid var(--g200);
box-shadow:-4px 0 16px rgba(0,0,0,0.06);z-index:40;
display:none;flex-direction:column;animation:slideLeft 0.2s ease-out;
}
.connect-panel.open{display:flex;}
.conn-header{
display:flex;align-items:center;gap:8px;padding:12px 16px;
background:linear-gradient(135deg, rgba(255,200,200,0.15) 0%, rgba(180,210,255,0.2) 100%);
border-bottom:1px solid var(--g200);
}
.conn-header svg{width:20px;height:20px;color:var(--g800);}
.conn-header-title{font-size:15px;font-weight:700;color:var(--g900);flex:1;}
.conn-search{
width:100%;padding:8px 12px 8px 36px;border:1.5px solid var(--g300);border-radius:10px;
font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);
outline:none;box-sizing:border-box;margin:0;
}
.conn-search:focus{border-color:var(--blue);}
/* The wrap owns the outer 16px gutter; the input fills it edge-to-edge.
The icon sits inside the input box, 12px in from the input's left edge
(16px wrap padding + 12px = 28px from the wrap edge). */
.conn-search-wrap{position:relative;padding:10px 16px;}
.conn-search-wrap svg{
position:absolute;left:28px;top:50%;transform:translateY(-50%);
width:16px;height:16px;color:var(--g500);pointer-events:none;
}
.conn-search-wrap input{width:100%;}
.conn-list{flex:1;overflow-y:auto;}
/* Connect list-view tab strip: Team Members / Groups */
.conn-tabs{display:flex;border-bottom:1px solid var(--g200);padding:0 16px;flex-shrink:0;}
.conn-tab{
flex:1;padding:10px 4px;background:none;border:none;cursor:pointer;
font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;color:var(--g500);
border-bottom:2px solid transparent;margin-bottom:-1px;
}
.conn-tab:hover{color:var(--g800);}
.conn-tab.active{color:var(--blue);border-bottom-color:var(--blue);}
/* Unread-count badge on a Connect tab. */
.conn-tab-badge{
display:inline-flex;align-items:center;justify-content:center;
min-width:16px;height:16px;padding:0 4px;margin-left:6px;border-radius:8px;
background:var(--blue);color:#fff;font-size:9px;font-weight:700;
vertical-align:middle;box-sizing:border-box;
}
.conn-contact{
display:flex;align-items:center;gap:10px;padding:10px 16px;
cursor:pointer;transition:background 0.1s;border-bottom:1px solid var(--g100);
}
.conn-contact:hover{background:var(--g50);}
.conn-avatar{
width:36px;height:36px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:14px;flex-shrink:0;position:relative;
}
.conn-badge{
position:absolute;top:-2px;right:-2px;width:16px;height:16px;
border-radius:50%;background:var(--blue);color:#fff;font-size:8px;
font-weight:700;display:flex;align-items:center;justify-content:center;
border:2px solid #fff;
}
.conn-info{flex:1;min-width:0;}
.conn-name{font-size:13px;font-weight:600;color:var(--g900);}
.conn-last-msg{font-size:11.5px;color:var(--g600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.conn-time{font-size:10.5px;color:var(--g500);flex-shrink:0;}
/* Per-conversation unread count — a pill on the right of the list row. */
.conn-unread{
flex-shrink:0;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
background:var(--blue);color:#fff;font-size:10px;font-weight:700;
display:flex;align-items:center;justify-content:center;box-sizing:border-box;
}
/* A row with unread messages: darker, heavier text so it stands out. */
.conn-contact.has-unread .conn-name{font-weight:800;}
.conn-contact.has-unread .conn-last-msg{color:var(--g800);font-weight:600;}
/* Chat view */
.chat-header{
display:flex;align-items:center;gap:10px;padding:10px 16px;
border-bottom:1px solid var(--g200);
}
.chat-back{
width:28px;height:28px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);
}
.chat-back:hover{background:var(--g100);}
.chat-back svg{width:18px;height:18px;}
.chat-name{flex:1;font-size:14px;font-weight:600;color:var(--g900);}
.chat-action{
width:28px;height:28px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);
}
.chat-action:hover{background:var(--g100);}
.chat-action svg{width:18px;height:18px;}
.chat-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;}
.chat-bubble{
max-width:80%;padding:10px 14px;border-radius:14px;font-size:13px;
line-height:1.5;position:relative;
}
/* Sender name above a message in a GROUP chat — bigger and bold so it's
clearly distinct from the message text below it. */
.chat-bubble-sender{
font-size:14px;font-weight:800;color:var(--g900);
margin-bottom:3px;line-height:1.3;
}
.chat-bubble.them{
background:var(--g100);color:var(--g900);align-self:flex-start;
border-bottom-left-radius:4px;
}
.chat-bubble.me{
background:linear-gradient(135deg,#B3E5FC,#81D4FA);color:var(--g900);
align-self:flex-end;border-bottom-right-radius:4px;
}
.chat-bubble-time{font-size:10px;color:var(--g500);margin-top:4px;}
.chat-input-bar{
padding:10px 16px;border-top:1px solid var(--g200);display:flex;flex-direction:column;gap:8px;
}
.chat-input{
width:100%;padding:10px 14px;border:1.5px solid var(--g300);border-radius:10px;
font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);outline:none;
}
.chat-input:focus{border-color:var(--blue);}
.chat-input::placeholder{color:var(--g500);}
.chat-send-btn{
width:100%;padding:9px;background:linear-gradient(135deg,#4FC3F7,#29B6F6);
border:none;border-radius:10px;color:#fff;font-family:'DM Sans',sans-serif;
font-weight:600;font-size:13px;cursor:pointer;transition:all 0.15s;
}
.chat-send-btn:hover{box-shadow:0 2px 8px rgba(79,195,247,0.35);}
/* Chat email card */
.chat-email-card{
max-width:85%;
border:1.5px solid var(--g200);border-radius:12px;padding:10px 14px;
background:#fff;cursor:pointer;transition:all 0.15s;margin:4px 0;
}
/* Side depends on sender, same as .chat-bubble.me / .them */
.chat-email-card.me{align-self:flex-end;}
.chat-email-card.them{align-self:flex-start;}
.chat-email-card:hover{border-color:var(--g400);box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.chat-email-card-line{font-size:12px;color:var(--g700);line-height:1.6;}
.chat-email-card-line b{color:var(--g900);font-weight:600;}
.chat-email-card-assignee{font-size:11px;color:var(--cyan);margin-top:3px;}
.chat-email-card .chat-bubble-time{margin-top:4px;}
.chat-email-card-icon{
float:right;width:20px;height:20px;color:var(--g400);margin-left:8px;margin-top:2px;
}
/* ═══ OPENED EMAIL PANEL ═══ */
.opened-panel{
position:fixed;top:var(--topbar-h);right:var(--rbar-w);bottom:0;
width:360px;background:#fff;border-left:1px solid var(--g200);
box-shadow:-4px 0 16px rgba(0,0,0,0.06);z-index:40;
display:none;flex-direction:column;animation:slideLeft 0.2s ease-out;
}
.opened-panel.open{display:flex;}
.opened-list{flex:1;overflow-y:auto;padding:0 16px 16px;}
.opened-card{
border:1.5px solid var(--g200);border-radius:10px;padding:10px 14px;
margin-bottom:8px;cursor:pointer;transition:all 0.15s;
}
.opened-card:hover{border-color:var(--g400);background:var(--g50);}
.opened-card-line{font-size:12px;color:var(--g700);line-height:1.6;}
.opened-card-line b{color:var(--g900);font-weight:600;}
/* ═══ ADD TO TEAM PANEL ═══ */
.team-panel{
position:fixed;top:var(--topbar-h);right:var(--rbar-w);bottom:0;
width:360px;background:#fff;border-left:1px solid var(--g200);
box-shadow:-4px 0 16px rgba(0,0,0,0.06);z-index:40;
display:none;flex-direction:column;animation:slideLeft 0.2s ease-out;
}
.team-panel.open{display:flex;}
.team-tabs{display:flex;border-bottom:1px solid var(--g200);}
.team-tab{
flex:1;padding:10px;text-align:center;font-size:13px;font-weight:600;
color:var(--g600);cursor:pointer;border-bottom:2px solid transparent;
transition:all 0.15s;font-family:'DM Sans',sans-serif;background:none;border-top:none;border-left:none;border-right:none;
}
.team-tab:hover{color:var(--g800);}
.team-tab.active{color:var(--cyan);border-bottom-color:var(--cyan);}
.team-body{flex:1;overflow-y:auto;padding:16px;}
.team-member-card{
display:flex;align-items:center;gap:10px;padding:10px;
border:1.5px solid var(--g200);border-radius:10px;margin-bottom:8px;
}
.team-member-card .assign-avatar{width:32px;height:32px;font-size:13px;}
.team-member-name{font-size:13px;font-weight:600;color:var(--g900);}
.team-member-email{font-size:11px;color:var(--g600);}
.team-member-remove{
margin-left:auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;
border:none;background:none;cursor:pointer;color:var(--g500);border-radius:50%;
}
.team-member-remove:hover{background:var(--g100);color:var(--red);}
.team-member-remove svg{width:14px;height:14px;}
/* ═══ ASK AI PANEL ═══ */
.askai-panel{
position:fixed;top:var(--topbar-h);right:var(--rbar-w);bottom:0;
width:380px;background:#fff;border-left:1px solid var(--g200);
box-shadow:-4px 0 16px rgba(0,0,0,0.06);z-index:40;
display:none;flex-direction:column;animation:slideLeft 0.2s ease-out;
}
.askai-panel.open{display:flex;}
.askai-messages{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;}
.askai-msg{max-width:90%;font-size:13px;line-height:1.6;}
.askai-msg.assistant{align-self:flex-start;}
.askai-msg.user{align-self:flex-end;}
.askai-msg-label{font-size:11px;font-weight:700;color:var(--g900);margin-bottom:4px;}
.askai-msg-label.user-label{text-align:right;color:var(--coral);}
.askai-msg-bubble{padding:10px 14px;border-radius:12px;}
/* Ask AI answer: numbered items each on their own block with spacing
between them; plain text lines get a smaller gap. */
.askai-list-item{margin:8px 0;line-height:1.55;}
.askai-list-item:first-child{margin-top:0;}
.askai-list-item:last-child{margin-bottom:0;}
.askai-list-item strong{font-weight:700;color:var(--g900);}
.askai-text-line{margin:4px 0;line-height:1.55;}
.askai-text-line:first-child{margin-top:0;}
.askai-msg.assistant .askai-msg-bubble{background:var(--g100);color:var(--g800);border-bottom-left-radius:4px;}
.askai-msg.user .askai-msg-bubble{background:linear-gradient(135deg,#FFF3E0,#FFE0B2);color:var(--g900);border-bottom-right-radius:4px;}
.askai-input-bar{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--g200);}
.askai-input{
flex:1;padding:10px 14px;border:1.5px solid var(--g300);border-radius:10px;
font-family:'DM Sans',sans-serif;font-size:13px;color:var(--g800);outline:none;
}
.askai-input:focus{border-color:var(--blue);}
.askai-input::placeholder{color:var(--g500);}
.askai-send{
padding:8px 18px;background:var(--coral);border:none;border-radius:10px;
color:#fff;font-family:'DM Sans',sans-serif;font-weight:600;font-size:13px;
cursor:pointer;transition:all 0.15s;flex-shrink:0;
}
.askai-send:hover{box-shadow:0 2px 8px rgba(255,107,74,0.3);}
.askai-typing{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:12px;color:var(--g500);}
.askai-typing .dot-pulse{display:inline-flex;gap:3px;}
.askai-typing .dot-pulse span{width:4px;height:4px;border-radius:50%;background:var(--g400);animation:dotPulse 1.2s infinite;}
.askai-typing .dot-pulse span:nth-child(2){animation-delay:0.2s;}
.askai-typing .dot-pulse span:nth-child(3){animation-delay:0.4s;}
.askai-email-list{margin-top:8px;display:flex;flex-direction:column;gap:6px;}
.askai-email-card{
display:flex;align-items:flex-start;gap:8px;padding:8px 10px;
border:1.5px solid var(--g200);border-radius:8px;cursor:pointer;
transition:all 0.15s;font-size:12px;
}
.askai-email-card:hover{border-color:var(--blue);background:var(--blue-bg);}
.askai-email-num{
width:20px;height:20px;border-radius:50%;background:var(--coral);color:#fff;
font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;
flex-shrink:0;margin-top:1px;
}
.askai-email-info{flex:1;min-width:0;}
.askai-email-from{font-weight:600;color:var(--g900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.askai-email-subj{color:var(--g600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;}
/* Right panel responsive adjustment */
.app.rpanel-open .main{margin-right:360px;transition:margin-right 0.2s ease;}
/* Minimized panel pill */
.minimized-pill{
position:fixed;bottom:16px;right:calc(var(--rbar-w) + 12px);
background:#fff;border:1.5px solid var(--g300);border-radius:12px;
box-shadow:0 4px 16px rgba(0,0,0,0.1);padding:8px 12px;
display:flex;align-items:center;gap:8px;z-index:45;
animation:slideUp 0.2s ease-out;cursor:default;
}
.minimized-pill-title{font-size:12.5px;font-weight:600;color:var(--g900);}
.minimized-pill-btn{
width:24px;height:24px;display:flex;align-items:center;justify-content:center;
border:none;background:none;border-radius:50%;cursor:pointer;color:var(--g600);
}
.minimized-pill-btn:hover{background:var(--g100);color:var(--g900);}
.minimized-pill-btn svg{width:14px;height:14px;}
/* ═══ GLOBAL SEARCH DROPDOWN ═══ */
.search-wrapper{position:relative;}
.search-dropdown{
position:absolute;top:100%;left:0;right:0;margin-top:4px;
background:#fff;border:1.5px solid var(--g300);border-radius:14px;
box-shadow:0 8px 28px rgba(0,0,0,0.12);max-height:420px;overflow-y:auto;
z-index:60;display:none;
}
.search-dropdown.open{display:block;}
.search-dd-header{
padding:10px 16px;font-size:11px;font-weight:700;color:var(--g500);
text-transform:uppercase;letter-spacing:0.5px;border-bottom:1px solid var(--g200);
display:flex;align-items:center;justify-content:space-between;
}
.search-dd-count{font-weight:500;text-transform:none;letter-spacing:0;}
.search-dd-item{
display:flex;align-items:flex-start;gap:10px;padding:10px 16px;
cursor:pointer;transition:background 0.1s;border-bottom:1px solid var(--g100);
}
.search-dd-item:last-child{border-bottom:none;}
.search-dd-item:hover{background:var(--blue-bg);}
.search-dd-avatar{
width:32px;height:32px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:12px;flex-shrink:0;margin-top:2px;
}
.search-dd-info{flex:1;min-width:0;}
.search-dd-top{display:flex;align-items:center;gap:6px;margin-bottom:2px;}
.search-dd-sender{font-size:13px;font-weight:600;color:var(--g900);}
.search-dd-label{
font-size:10px;font-weight:600;padding:2px 8px;border-radius:4px;
flex-shrink:0;
}
.search-dd-date{font-size:11px;color:var(--g500);margin-left:auto;flex-shrink:0;}
.search-dd-subject{font-size:12.5px;color:var(--g800);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.search-dd-snippet{font-size:11.5px;color:var(--g600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:1px;}
.search-dd-meta{display:flex;align-items:center;gap:6px;margin-top:3px;}
.search-dd-tag{font-size:10px;color:var(--g500);display:flex;align-items:center;gap:3px;}
.search-dd-tag svg{width:12px;height:12px;}
.search-dd-empty{padding:24px 16px;text-align:center;font-size:13px;color:var(--g500);}
.search-highlight{background:rgba(255,107,74,0.15);border-radius:2px;padding:0 1px;}
/* Contacts section in search dropdown */
.search-dd-contact{
display:flex;align-items:center;gap:10px;padding:8px 16px;
cursor:pointer;transition:background 0.1s;
}
.search-dd-contact:hover{background:var(--blue-bg);}
.search-dd-contact-avatar{
width:28px;height:28px;border-radius:50%;background:var(--g300);color:var(--g700);
display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;
}
.search-dd-contact-info{flex:1;min-width:0;}
.search-dd-contact-name{font-size:13px;font-weight:600;color:var(--g900);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.search-dd-contact-email{font-size:11.5px;color:var(--g600);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Visual separator between the Contacts section and the Recent emails section */
.search-dd-separator{height:6px;background:var(--g50);border-top:1px solid var(--g200);border-bottom:1px solid var(--g200);}
/* Maximized panel states */
/* Modal overlays (Smart Sort, Auto Label, Templates) — expand panel to main area */
.modal-overlay .ss-panel.maximized,
.modal-overlay .byo-panel.maximized,
.modal-overlay .tpl-panel.maximized{
width:calc(100vw - var(--sidebar-w) - var(--rbar-w));
max-width:none;max-height:none;height:calc(100vh - var(--topbar-h));
border-radius:0;
}
/* Right-side panels — expand to fill main area */
.assign-panel.maximized,
.connect-panel.maximized,
.opened-panel.maximized,
.team-panel.maximized,
.askai-panel.maximized{
width:calc(100vw - var(--sidebar-w) - var(--rbar-w)) !important;
right:var(--rbar-w);
}
.fmt-select{
padding:4px 8px;border:1px solid var(--g300);border-radius:6px;
font-family:'DM Sans',sans-serif;font-size:12px;color:var(--g700);
background:#fff;cursor:pointer;appearance:auto;
}
/* Email tracking popup */
.track-popup{
position:absolute;top:100%;right:0;margin-top:4px;
width:280px;background:#fff;border:1.5px solid var(--g200);border-radius:12px;
box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:55;display:none;
padding:0;overflow:hidden;
}
.track-popup.open{display:block;}
.track-popup-header{
padding:12px 16px;font-size:13px;font-weight:700;color:var(--g900);
border-bottom:1px solid var(--g200);
}
.track-popup-item{
display:flex;align-items:center;gap:10px;padding:8px 16px;
border-bottom:1px solid var(--g100);font-size:12px;
}
.track-popup-item:last-child{border-bottom:none;}
.track-device{width:20px;height:20px;color:var(--g500);flex-shrink:0;}
.track-device svg{width:18px;height:18px;}
.track-name{font-weight:600;color:var(--g900);flex:1;}
.track-time{color:var(--g500);font-size:11px;flex-shrink:0;}
/* ═══ PHOTO CROP MODAL ═══ */
.photo-crop-panel{
width:380px;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.18);
padding:24px;display:flex;flex-direction:column;align-items:center;
animation:slideUp 0.2s ease-out;
}
.photo-crop-title{font-size:17px;font-weight:700;color:var(--g900);margin-bottom:4px;letter-spacing:-0.2px;}
.photo-crop-subtitle{font-size:12.5px;color:var(--g600);margin-bottom:16px;text-align:center;}
.photo-crop-stage{
position:relative;width:260px;height:260px;border-radius:8px;background:#f0f0f0;
overflow:hidden;cursor:grab;user-select:none;margin-bottom:14px;
}
.photo-crop-stage.dragging{cursor:grabbing;}
.photo-crop-stage img{
position:absolute;left:0;top:0;width:auto;height:auto;
transform-origin:0 0;pointer-events:none;
-webkit-user-drag:none;user-select:none;
}
.photo-crop-mask{
position:absolute;inset:0;pointer-events:none;
/* Outer overlay punched by a centred 220px circle */
background:radial-gradient(circle 110px at center, transparent 110px, rgba(0,0,0,0.45) 111px);
/* Circle outline */
box-shadow:inset 0 0 0 0;
}
.photo-crop-mask::after{
content:'';position:absolute;top:50%;left:50%;width:220px;height:220px;
border-radius:50%;transform:translate(-50%,-50%);
border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,0.18);
}
.photo-crop-zoom-row{
display:flex;align-items:center;gap:10px;width:100%;margin-bottom:18px;color:var(--g600);
}
.photo-crop-zoom{flex:1;accent-color:var(--blue);cursor:pointer;}
.photo-crop-actions{display:flex;gap:10px;width:100%;justify-content:center;}
/* When a profile photo has been set, override the gradient backgrounds with the photo */
.has-user-photo{
background-image:var(--user-photo-url) !important;
background-size:cover;background-position:center;color:transparent !important;
}
.has-user-photo > *{display:none;}
/* ═══ CONFIRM MODAL ═══ */
.confirm-panel{
width:380px;background:#fff;border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.1),0 12px 28px rgba(0,0,0,0.18);
padding:28px 24px 20px;display:flex;flex-direction:column;align-items:center;
animation:slideUp 0.2s ease-out;text-align:center;
}
.confirm-icon{
width:56px;height:56px;border-radius:50%;
background:#fee2e2;color:var(--red);
display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.confirm-icon svg{width:26px;height:26px;}
.confirm-icon.warning{background:#fef3c7;color:#b45309;}
.confirm-icon.info{background:var(--blue-bg);color:var(--blue);}
.confirm-title{font-size:17px;font-weight:700;color:var(--g900);margin-bottom:6px;letter-spacing:-0.2px;}
.confirm-msg{font-size:13.5px;color:var(--g700);line-height:1.5;margin-bottom:20px;padding:0 8px;}
.confirm-actions{display:flex;gap:10px;width:100%;justify-content:center;}
.confirm-cancel{
padding:9px 22px;background:#fff;border:1.5px solid var(--g300);border-radius:22px;
color:var(--g800);font-family:'DM Sans',sans-serif;font-weight:600;font-size:13.5px;
cursor:pointer;transition:all 0.15s;min-width:96px;
}
.confirm-cancel:hover{background:var(--g100);border-color:var(--g400);}
.confirm-ok{
padding:9px 22px;background:var(--red);border:none;border-radius:22px;
color:#fff;font-family:'DM Sans',sans-serif;font-weight:600;font-size:13.5px;
cursor:pointer;transition:all 0.15s;min-width:96px;
}
.confirm-ok:hover{background:#c92e2e;box-shadow:0 2px 8px rgba(232,68,68,0.3);}
.confirm-ok.primary{background:var(--blue);}
.confirm-ok.primary:hover{background:#3a8ad6;box-shadow:0 2px 8px rgba(74,158,232,0.3);}
/* ═══ TOAST ═══ */
.toast{position:fixed;bottom:32px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--g800);color:#fff;padding:10px 24px;border-radius:8px;font-size:13px;font-weight:500;box-shadow:0 4px 12px rgba(0,0,0,0.15);z-index:300;opacity:0;pointer-events:none;transition:all 0.3s;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
::-webkit-scrollbar{width:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--g300);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--g400);}
.email-row{animation:fadeIn 0.15s ease-out backwards;}
.email-row:nth-child(1){animation-delay:0.01s;}.email-row:nth-child(2){animation-delay:0.02s;}.email-row:nth-child(3){animation-delay:0.03s;}.email-row:nth-child(4){animation-delay:0.04s;}.email-row:nth-child(5){animation-delay:0.05s;}.email-row:nth-child(6){animation-delay:0.06s;}.email-row:nth-child(7){animation-delay:0.07s;}.email-row:nth-child(8){animation-delay:0.08s;}.email-row:nth-child(9){animation-delay:0.09s;}.email-row:nth-child(10){animation-delay:0.1s;}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
/* ── Bottom draft bar ──────────────────────────────────────────────────────
Minimized compose windows dock here as chips, Gmail-style. */
#draftBar{
position:fixed; right:24px; bottom:0; z-index:900;
display:flex; gap:10px; align-items:flex-end;
padding:0; pointer-events:none;
}
#draftBar .draft-chip{
pointer-events:auto;
display:flex; align-items:center; gap:10px;
background:#1f2937; color:#fff;
padding:9px 12px; border-radius:8px 8px 0 0;
box-shadow:0 -3px 14px rgba(0,0,0,0.22);
cursor:pointer; max-width:240px; font-size:13px;
}
#draftBar .draft-chip:hover{ background:#374151; }
#draftBar .draft-chip-title{
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
font-weight:500;
}
#draftBar .draft-chip-close{
font-size:17px; line-height:1; color:#9ca3af;
padding:0 2px; flex-shrink:0;
}
#draftBar .draft-chip-close:hover{ color:#fff; }
/* ── Recipient autocomplete dropdown (compose To / Cc / Bcc) ──────────────── */
.recipient-ac{
position:fixed; z-index:10000;
background:#fff; border:1px solid var(--g300);
border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.16);
max-height:240px; overflow-y:auto; padding:4px;
}
.recipient-ac-item{
display:flex; flex-direction:column; gap:1px;
padding:7px 10px; border-radius:6px; cursor:pointer;
}
.recipient-ac-item:hover, .recipient-ac-item.active{ background:var(--g100); }
.recipient-ac-name{ font-size:13px; font-weight:600; color:var(--g900); }
.recipient-ac-email{ font-size:12px; color:var(--g600); }
/* ── Drafts tab ───────────────────────────────────────────────────────────── */
.drafts-empty{
padding:48px 24px; text-align:center; color:var(--g500); font-size:14px;
}
.draft-row .draft-row-to{ color:var(--g700); }
.draft-row .email-subject{ font-weight:500; }
/* "Cancel send" button on Scheduled-tab email rows. */
.sched-cancel-btn{
background:#fee2e2; color:var(--red);
border:1px solid #fecaca; border-radius:6px;
padding:4px 10px; font-size:12px; font-weight:600;
cursor:pointer; margin-right:10px; white-space:nowrap;
}
.sched-cancel-btn:hover{ background:#fecaca; }
/* ═══ FIRST-RUN ONBOARDING OVERLAY ═══════════════════════════════════════ */
.onb-overlay{
position:fixed; inset:0; z-index:5000;
background:linear-gradient(to bottom right,#f9fafb,#ffffff,#f3f4f6);
display:flex; align-items:center; justify-content:center; padding:24px;
}
.onb-card{
background:#fff; width:100%; max-width:1040px;
border-radius:24px; border:1px solid var(--g200);
box-shadow:0 24px 60px rgba(0,0,0,0.18);
display:grid; grid-template-columns:34% 66%; overflow:hidden;
}
.onb-left{
background:linear-gradient(to bottom right,#eff6ff,#f0f9ff,#ecfeff);
border-right:1px solid var(--g200); padding:32px;
}
.onb-left-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }
.onb-left-head h2{ font-size:15px; font-weight:600; color:var(--g800); }
.onb-skip{ font-size:12px; color:var(--g400); background:none; border:none; cursor:pointer; }
.onb-skip:hover{ color:#000; }
.onb-progress-track{ width:100%; height:6px; background:var(--g200); border-radius:99px; margin-bottom:24px; }
.onb-progress-bar{
height:100%; border-radius:99px; width:14%;
background:linear-gradient(to right,#0ea5e9,#06b6d4);
transition:width .35s ease;
}
.onb-steps{ display:flex; flex-direction:column; gap:14px; font-size:13px; }
.onb-step{ display:flex; align-items:center; gap:9px; color:var(--g400); }
.onb-step.current{ color:#000; font-weight:700; }
.onb-step-num{
width:24px; height:24px; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
border-radius:99px; border:1px solid var(--g300); font-size:12px;
}
.onb-step.done .onb-step-num{ border-color:#0ea5e9; color:#0ea5e9; background:#fff; font-weight:700; }
.onb-right{ padding:44px; }
.onb-title{ font-size:30px; font-weight:700; color:var(--g900); margin-bottom:6px; }
.onb-subtitle{ color:#0284c7; font-weight:500; margin-bottom:6px; }
.onb-description{ color:var(--g600); margin-bottom:22px; line-height:1.5; }
.onb-content{ margin-bottom:28px; }
.onb-actions{ display:flex; gap:12px; }
.onb-back{ padding:12px 22px; border:1px solid var(--g300); border-radius:12px; background:#fff; cursor:pointer; font-size:14px; }
.onb-next{
flex:1; padding:12px 22px; border:none; border-radius:12px; cursor:pointer;
background:linear-gradient(to right,#0ea5e9,#06b6d4);
color:#fff; font-weight:600; font-size:14px;
}
/* shared content bits */
.onb-checklist{ padding:18px; border-radius:12px; background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; display:flex; flex-direction:column; gap:12px; font-size:14px; }
.onb-check-item{ display:flex; align-items:center; gap:8px; opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .4s ease; }
.onb-check-item.show{ opacity:1; transform:translateY(0); }
.onb-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.onb-opt{ border:1px solid var(--g300); border-radius:12px; padding:18px; cursor:pointer; transition:all .15s ease; font-size:14px; }
.onb-opt.full{ grid-column:1 / -1; }
.onb-opt.selected{ border-color:#0ea5e9; background:#e0f2fe; color:#0c4a6e; font-weight:600; box-shadow:0 0 0 1px #0ea5e9 inset; }
.onb-input{ width:100%; border:1px solid var(--g300); border-radius:12px; padding:14px; font-size:14px; margin-bottom:8px; }
.onb-hint{ font-size:12px; color:var(--g400); }
.onb-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.onb-chip{ padding:6px 14px; border-radius:99px; background:var(--g100); border:1px solid var(--g200); font-size:13px; }
.onb-list{ display:flex; flex-direction:column; gap:12px; font-size:14px; }
.onb-list-item{ border:1px solid var(--g200); border-radius:12px; padding:14px; background:#fff; }
.onb-summary{ padding:18px; border-radius:12px; background:#f0f9ff; border:1px solid #bae6fd; color:#0c4a6e; display:flex; flex-direction:column; gap:8px; font-size:14px; }
@media (max-width:760px){
.onb-card{ grid-template-columns:1fr; }
.onb-left{ border-right:none; border-bottom:1px solid var(--g200); }
}
/* Onboarding — last-step email-sync progress (replaces "Go to my inbox"). */
.onb-sync-box{ margin-top:4px; }
.onb-sync-head{
display:flex; justify-content:space-between; align-items:baseline;
margin-bottom:8px;
}
.onb-sync-label{ font-size:14px; font-weight:600; color:#0f172a; }
.onb-sync-percent{ font-size:14px; font-weight:700; color:#0369a1; }
.onb-sync-bar{
width:100%; height:8px; border-radius:999px;
background:#e2e8f0; overflow:hidden;
}
.onb-sync-bar-fill{
height:100%; width:0%; border-radius:999px;
background-image:linear-gradient(to right,#0ea5e9,#06b6d4);
transition:width .4s ease;
}
.onb-sync-count{
margin-top:10px; font-size:13px; color:#0369a1; font-weight:500;
}
/* New-email count badge on Smart Sort tabs. Clears when the tab is opened. */
.smart-tab-badge{
display:inline-flex; align-items:center; justify-content:center;
min-width:18px; height:18px; padding:0 5px;
border-radius:999px; background:var(--blue); color:#fff;
font-size:11px; font-weight:700; line-height:1;
}
.smart-tab.active .smart-tab-badge{ background:var(--blue); }