*{box-sizing:border-box}
body{margin:0;font:14px/1.45 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:#1e293b;background:#f8fafc}
[hidden],aside[hidden],section[hidden],tr[hidden],.hidden{display:none !important}

header{display:flex;gap:16px;align-items:center;padding:10px 20px;background:#0f172a;color:#f8fafc}
header strong{font-size:15px;letter-spacing:-0.2px}
header nav{display:flex;gap:4px;flex:1}
header button{background:none;border:0;color:#94a3b8;padding:6px 12px;border-radius:6px;cursor:pointer;font:inherit;font-weight:500;transition:all .15s}
header button:hover{color:#fff;background:#1e293b}
header button.on{background:#334155;color:#fff}
#me{font-size:12px;color:#94a3b8;background:#1e293b;padding:4px 10px;border-radius:20px}

.todo{display:flex;gap:10px;padding:12px 20px;flex-wrap:wrap;background:#f1f5f9;border-bottom:1px solid #e2e8f0}
.todo .pill{background:#fff;border:1px solid #cbd5e1;border-radius:20px;padding:5px 14px;cursor:pointer;font-size:13px;transition:all .15s;display:inline-flex;align-items:center}
.todo .pill:hover{border-color:#94a3b8;background:#fafafa}
.todo .pill b{margin-right:6px;color:#0f172a}

main{padding:14px 20px 60px}
.bar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}
.bar input{flex:2;min-width:240px}
.bar select{flex:1;min-width:140px}

input,select,textarea{font:inherit;padding:7px 10px;border:1px solid #cbd5e1;border-radius:6px;background:#fff;color:#1e293b}
input:focus,select:focus,textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,0.15)}
textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12.5px;line-height:1.5}

table{width:100%;min-width:1226px;table-layout:fixed;border-collapse:collapse;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(0,0,0,0.06);overflow:visible}
th,td{padding:9px 12px;border-bottom:1px solid #e2e8f0;text-align:left;vertical-align:middle;box-sizing:border-box}
th{background:#f8fafc;font-weight:600;font-size:12px;color:#64748b;letter-spacing:0.3px;text-transform:uppercase;border-bottom:2px solid #e2e8f0}
th[data-sort]{cursor:pointer;user-select:none;transition:background .1s, color .1s}
th[data-sort]:hover{background:#f1f5f9;color:#0f172a}
.sort-icon{font-size:10px;color:#6366f1;display:inline-block;width:12px;text-align:center}

tr.contact-row{transition:background .1s}
tr.contact-row:hover{background:#f8fafc}
tr.contact-row.is-expanded{background:#f1f5f9}

/* Expand toggle button (crisp chevron, never looks like a media play button) */
.expand-toggle{background:#f8fafc;border:1px solid #e2e8f0;width:26px;height:26px;padding:0;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:#475569;border-radius:6px;transition:transform .18s ease, color .15s, background .15s, border-color .15s;line-height:1}
.expand-toggle:hover{color:#0f172a;background:#e2e8f0;border-color:#cbd5e1}
.expand-toggle.open{transform:rotate(90deg);color:#0284c7;background:#e0f2fe;border-color:#7dd3fc}
.expand-toggle svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.25;fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}

/* Table cells */
.id-cell b{font-family:ui-monospace,Menlo,monospace;font-size:12px;color:#334155}
.target-cell{line-height:1.35;overflow:hidden}
.name-line{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.name-line b{color:#0f172a;font-size:13.5px}
.company-line{font-size:12px;color:#64748b}
.email-line{font-size:11.5px;color:#475569;margin-top:2px;word-break:break-all}

/* Segment cell */
.segment-cell{font-size:12.5px;overflow:hidden}
.sub-tag{display:inline-block;font-size:11px;background:#f1f5f9;color:#475569;padding:1px 6px;border-radius:4px;margin-top:3px}

/* Music / Pitch Sample Cell */
.music-td{overflow:hidden}
.music-cell{display:flex;flex-direction:column;gap:3px;font-size:12px}
.music-title{display:flex;align-items:center;gap:4px;color:#0f172a}
.music-links{display:flex;gap:4px;flex-wrap:wrap}
.demo-pill,.clip-pill{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 7px;border-radius:12px;text-decoration:none;font-weight:500;transition:opacity .15s}
.demo-pill{background:#e0f2fe;color:#0369a1}
.demo-pill:hover{opacity:.85;background:#bae6fd}
.clip-pill{background:#ffedd5;color:#c2410c}
.clip-pill:hover{opacity:.85;background:#fed7aa}

/* Contact forms & Alts */
.form-pill{display:inline-flex;align-items:center;gap:3px;font-size:11px;padding:2px 7px;border-radius:12px;background:#ecfdf5;color:#047857;text-decoration:none;font-weight:600;border:1px solid #a7f3d0}
.form-pill:hover{background:#d1fae5}
.copy-btn{transition:color .15s, background .15s}

/* Relationship / History Selector */
.history-td{overflow:visible}
.history-cell{display:flex;flex-direction:column;gap:3px}
.rel-select{font-size:11.5px;padding:3px 6px;border-radius:6px;font-weight:500;cursor:pointer;border-width:1px;border-style:solid;width:100%;max-width:180px}
.rel-select.rel-cold{background:#f1f5f9;color:#475569;border-color:#cbd5e1}
.rel-select.rel-known{background:#e0f2fe;color:#0369a1;border-color:#7dd3fc;font-weight:600}
.rel-select.rel-customer{background:#dcfce7;color:#15803d;border-color:#86efac;font-weight:600}
.rel-select.rel-past_contact{background:#f3e8ff;color:#7e22ce;border-color:#d8b4fe;font-weight:600}
.rel-select.rel-do_not_contact{background:#fee2e2;color:#b91c1c;border-color:#fca5a5;font-weight:600}
.small-note{font-size:11px;color:#64748b;line-height:1.2;cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Value cell & Tooltip */
.value-td{overflow:visible;text-align:center}
.val-wrapper{position:relative;display:inline-block;cursor:help}
.val-badge{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 7px;border-radius:10px;background:#f1f5f9;color:#334155;border:1px solid #cbd5e1}
.val-badge.tier-1{background:#fef3c7;color:#92400e;border-color:#fde68a}
.val-badge.tier-2{background:#e0e7ff;color:#3730a3;border-color:#c7d2fe}
.val-badge.tier-3{background:#f3f4f6;color:#374151;border-color:#e5e7eb}

.tooltip-box{position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%) translateY(4px);width:310px;background:#0f172a;color:#f8fafc;padding:12px 14px;border-radius:8px;font-size:11.5px;line-height:1.45;box-shadow:0 12px 28px rgba(0,0,0,0.3);z-index:9999;pointer-events:none;opacity:0;transition:opacity .18s ease, transform .18s ease;text-align:left}
.tooltip-box::after{content:"";position:absolute;top:100%;left:50%;margin-left:-6px;border-width:6px;border-style:solid;border-color:#0f172a transparent transparent transparent}
.val-wrapper:hover .tooltip-box{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}

.tooltip-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.tooltip-header strong{font-size:12px;color:#facc15}
.tooltip-tier-badge{font-size:10px;padding:1px 6px;border-radius:4px;background:#334155;color:#94a3b8}
.tooltip-desc{color:#cbd5e1;margin-bottom:8px;font-size:11px}
.tooltip-divider{height:1px;background:#334155;margin:8px 0}
.tooltip-section-title{font-weight:600;color:#94a3b8;margin-bottom:4px;font-size:10.5px;text-transform:uppercase;letter-spacing:0.3px}
.tooltip-specifics{display:flex;flex-direction:column;gap:3px}
.tooltip-item{color:#e2e8f0;font-size:11px}
.tooltip-item b{color:#94a3b8;font-weight:500}

/* Stage tags */
.tag{display:inline-block;font-size:11px;padding:2px 8px;border-radius:10px;background:#eee;font-weight:500}
.st-draft{background:#fef3c7;color:#92400e}
.st-son_approved{background:#e0f2fe;color:#0369a1;font-weight:600}
.st-launched{background:#dcfce7;color:#15803d;font-weight:600}
.st-hold{background:#e2e8f0;color:#475569}
.st-do_not_contact{background:#fee2e2;color:#b91c1c}
.st-reply{background:#fae8ff;color:#86198f;font-weight:600}

/* Action Buttons */
button{font:inherit;padding:7px 14px;border-radius:6px;border:1px solid #0f172a;background:#0f172a;color:#fff;cursor:pointer;transition:all .15s}
button:hover{background:#1e293b}
button.ghost{background:transparent;color:inherit;border-color:#cbd5e1}
button.ghost:hover{background:#f1f5f9;border-color:#94a3b8}
button:disabled{opacity:.4;cursor:not-allowed}

.btn-approve{background:#059669;border-color:#047857;color:#fff;font-weight:600;font-size:12px;padding:5px 11px;border-radius:6px;cursor:pointer;white-space:nowrap;transition:background .15s}
.btn-approve:hover{background:#047857}
.btn-launch{background:#7c3aed;border-color:#6d28d9;color:#fff;font-weight:600;font-size:12px;padding:5px 12px;border-radius:6px;cursor:pointer;white-space:nowrap;transition:background .15s}
.btn-launch:hover{background:#6d28d9}
.btn-save{background:#2563eb;border-color:#1d4ed8;color:#fff;font-weight:500;font-size:12px;padding:5px 12px;border-radius:6px;cursor:pointer}
.btn-save:hover{background:#1d4ed8}

.small-btn{padding:4px 8px;font-size:11px}
.icon-btn{padding:4px 7px;font-size:12px;line-height:1}

.actions-td{text-align:right}
.actions-cell{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:nowrap}

/* Detail Row / Inline Accordion */
.detail-row td.detail-cell{background:#f8fafc;padding:16px 20px;border-bottom:2px solid #cbd5e1;box-shadow:inset 0 2px 4px rgba(0,0,0,0.03)}
.detail-box{display:flex;flex-direction:column;gap:12px}

.detail-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding-bottom:10px;border-bottom:1px solid #e2e8f0}
.detail-title-group{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.detail-top-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.jurisdiction-tag{background:#e2e8f0;color:#334155;font-weight:500}
.email-badge{font-size:12px;background:#f1f5f9;padding:3px 8px;border-radius:6px;color:#1e293b}

.account-select{font-size:12px;padding:5px 8px;border-radius:6px;background:#fff;border:1px solid #cbd5e1}
.stage-select{font-size:12px;padding:5px 8px;border-radius:6px;background:#fff;border:1px solid #cbd5e1}

/* Detail 3-Card Grid */
.detail-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px}
@media (max-width: 1100px) {
  .detail-grid{grid-template-columns:1fr;gap:14px}
}

.detail-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,0.03);display:flex;flex-direction:column;gap:10px}
.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:2px}
.card-head h4{margin:0;font-size:13.5px;color:#0f172a;display:flex;align-items:center;gap:6px}

.guard-pill{font-size:11px;padding:2px 8px;border-radius:12px;font-weight:600}
.guard-pill.ok{background:#dcfce7;color:#15803d}
.guard-pill.warn{background:#fef3c7;color:#92400e}

.approval-stamp{font-size:11.5px;padding:6px 10px;border-radius:6px;line-height:1.4}
.approval-stamp.ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.approval-stamp.err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b}
.approval-stamp.muted{background:#f1f5f9;color:#64748b}

.field-group{display:flex;flex-direction:column;gap:4px}
.field-group label{font-size:11.5px;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:0.3px}
.subject-input{font-weight:500;font-size:13px}
.body-textarea{min-height:240px;resize:vertical}

/* Draft Save Bar, Accessible Switch Toggle & Keystroke/Edit Counter */
.draft-save-bar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 10px;padding-top:4px;border-top:1px solid #f1f5f9}
.draft-save-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.autosave-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#334155;cursor:pointer;user-select:none;padding:4px 9px;border-radius:999px;background:#f8fafc;border:1px solid #e2e8f0;transition:border-color .15s,background .15s}
.autosave-toggle:hover{border-color:#cbd5e1;background:#f1f5f9}
.autosave-switch{appearance:none;-webkit-appearance:none;width:30px;height:17px;border-radius:999px;background:#cbd5e1;border:0;padding:0;margin:0;position:relative;cursor:pointer;transition:background .18s ease;flex-shrink:0}
.autosave-switch::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.22);transition:transform .18s ease}
.autosave-switch:checked{background:#059669}
.autosave-switch:checked::after{transform:translateX(13px)}
.autosave-switch:focus-visible{outline:2px solid #6366f1;outline-offset:2px}
.autosave-state-txt{font-size:11px;color:#64748b}
.autosave-state-txt.is-on{color:#059669}

.draft-save-meta{display:flex;align-items:center;gap:6px 8px;flex-wrap:wrap;font-size:11.5px}
.edit-counter{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:500;border:1px solid transparent;white-space:nowrap}
.edit-counter.clean{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.edit-counter.dirty{background:#fffbeb;color:#b45309;border-color:#fde68a;font-weight:600}
.edit-counter.saving{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe}
.last-saved-time{color:#475569;font-size:11px;white-space:nowrap}
.last-saved-time b{color:#0f172a;font-weight:600}

.thread-container{min-height:80px;display:flex;flex-direction:column;gap:8px}
.thread-card{border:1px solid #e2e8f0;border-radius:6px;padding:8px 10px;background:#f8fafc;font-size:12px}
.thread-card.reply{border-left:3px solid #7c3aed;background:#fff}
.thread-card-head{display:flex;justify-content:space-between;margin-bottom:4px;color:#64748b;font-size:11px}

.card-divider{height:1px;background:#e2e8f0;margin:6px 0}
.comments-list{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow:auto}
.comment-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:6px 8px;font-size:12px}
.comment-item.done{opacity:.5}
.comment-input-row{display:flex;gap:6px;margin-top:4px}
.comment-input-row input{flex:1;font-size:12px;padding:5px 8px}

.info-block{display:flex;flex-direction:column;gap:3px;font-size:12px}
.info-label{font-size:11px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:0.3px}
.info-value{color:#1e293b;line-height:1.4}
.audit-list{max-height:120px;overflow:auto;line-height:1.5}

/* Drawer fallback */
aside{position:fixed;inset:0;background:rgba(0,0,0,0.45);display:flex;justify-content:flex-end;z-index:9999}
.drawer{width:min(760px,100%);background:#fff;height:100%;overflow:auto;padding:24px;position:relative;box-shadow:-4px 0 24px rgba(0,0,0,0.15)}
.close{position:absolute;right:16px;top:16px;font-size:18px;width:32px;height:32px;display:grid;place-items:center;padding:0;border-radius:50%}

/* Status banners */
.warn{color:#b45309}.err{color:#b91c1c}.ok{color:#15803d}.muted{color:#64748b}.small{font-size:11.5px}
.box{border:1px solid #e2e8f0;border-radius:8px;padding:10px;margin:8px 0;background:#fcfcfc}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0}

/* Legacy fallback classes */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.grid .box b{font-size:22px;display:block}
.login{display:grid;place-items:center;height:100vh}
.card{background:#fff;padding:28px;border-radius:12px;width:320px;display:grid;gap:12px;box-shadow:0 4px 24px #0001}

/* Gmail Unified Inbox Architecture */
.gmail-inbox-section{width:100%;margin-top:4px}
.gmail-app-container{display:grid;grid-template-columns:230px 1fr;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,0.04);min-height:640px;overflow:hidden}

/* Left Sidebar */
/* The sidebar is an <aside>; undo the generic drawer rule above (position:fixed;inset:0), which made it cover the whole inbox */
.gmail-sidebar{position:static;inset:auto;z-index:auto;justify-content:flex-start;background:#f8fafc;border-right:1px solid #e2e8f0;padding:16px 12px;display:flex;flex-direction:column;gap:14px;user-select:none}
.gmail-compose-btn{display:inline-flex;align-items:center;gap:10px;padding:0 22px;height:46px;border-radius:24px;background:#c2e7ff;color:#001d35;border:none;font-size:13.5px;font-weight:600;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.1);transition:all .15s}
.gmail-compose-btn:hover{background:#b3defa;box-shadow:0 2px 6px rgba(0,0,0,0.15);transform:translateY(-1px)}
.gmail-compose-icon{flex-shrink:0}

.gmail-nav{display:flex;flex-direction:column;gap:2px}
.gmail-nav-item{display:flex;align-items:center;gap:10px;padding:8px 14px;border-radius:20px;font-size:13px;font-weight:500;color:#475569;background:none;border:none;cursor:pointer;text-align:left;width:100%;transition:background .15s, color .15s}
.gmail-nav-item:hover{background:#e2e8f0;color:#0f172a}
.gmail-nav-item.active{background:#d3e3fd;color:#041e49;font-weight:600}
.gmail-nav-item .nav-icon{font-size:15px;width:20px;display:inline-block;text-align:center}
.gmail-nav-item .nav-label{flex:1}
.gmail-nav-item .nav-badge{font-size:11px;font-weight:600;padding:2px 7px;border-radius:10px;background:rgba(0,0,0,0.06);color:inherit}
.gmail-nav-item.active .nav-badge{background:rgba(4,30,73,0.12);color:#041e49}

.gmail-sidebar-section{display:flex;flex-direction:column;gap:6px;border-top:1px solid #e2e8f0;padding-top:12px;margin-top:4px}
.gmail-section-title{display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:0.5px;padding:0 8px}
.btn-xs-link{background:none;border:none;font-size:11px;color:#6366f1;cursor:pointer;text-decoration:underline;padding:0}
.btn-xs-link:hover{color:#4f46e5}

.gmail-account-list{display:flex;flex-direction:column;gap:3px}
.account-filter-item{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;font-size:12px;color:#334155;cursor:pointer;transition:background .1s}
.account-filter-item:hover{background:#e2e8f0}
.account-filter-item.active{background:#e0e7ff;color:#3730a3;font-weight:600}
.acc-dot{width:7px;height:7px;border-radius:50%;background:#10b981;flex-shrink:0}
.acc-dot.paused{background:#94a3b8}

/* Main Content Area */
.gmail-main{display:flex;flex-direction:column;background:#fff;min-width:0}

/* Topbar */
.gmail-topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid #f1f5f9;background:#fff}
.gmail-search-bar{display:flex;align-items:center;gap:8px;background:#f1f5f9;border-radius:24px;padding:0 14px;height:40px;flex:1;max-width:540px;border:1px solid transparent;transition:all .15s}
.gmail-search-bar:focus-within{background:#fff;border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,0.15)}
.gmail-search-bar input{border:none;background:transparent;outline:none;font-size:13px;width:100%;color:#0f172a;padding:0}
.search-icon{font-size:14px;color:#64748b}
.btn-search-clear{background:none;border:none;font-size:12px;color:#94a3b8;cursor:pointer;padding:2px 4px}
.btn-search-clear:hover{color:#0f172a}

.btn-gmail-refresh{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;border:1px solid #cbd5e1;background:#fff;color:#334155;font-size:12.5px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-gmail-refresh:hover{background:#f8fafc;border-color:#94a3b8;color:#0f172a}
.btn-gmail-refresh.spinning .refresh-icon{animation:spin 1s linear infinite}
@keyframes spin{100%{transform:rotate(360deg)}}

/* Toolbar */
.gmail-toolbar{display:flex;justify-content:space-between;align-items:center;padding:8px 18px;border-bottom:1px solid #e2e8f0;background:#f8fafc;min-height:42px}
.toolbar-left{display:flex;align-items:center;gap:10px}
.select-box-wrapper{display:flex;align-items:center}
.btn-toolbar-icon{background:none;border:none;font-size:15px;color:#64748b;cursor:pointer;padding:4px 6px;border-radius:4px}
.btn-toolbar-icon:hover{background:#e2e8f0;color:#0f172a}
.toolbar-actions-group{display:flex;align-items:center;gap:6px}
.btn-toolbar-action{font-size:12px;font-weight:500;padding:4px 10px;border-radius:6px;border:1px solid #cbd5e1;background:#fff;color:#334155;cursor:pointer;transition:all .1s}
.btn-toolbar-action:hover{background:#f1f5f9;border-color:#94a3b8;color:#0f172a}
.btn-toolbar-action.danger:hover{background:#fef2f2;border-color:#fca5a5;color:#b91c1c}
.toolbar-right{font-size:12px;color:#64748b}

/* Message List & Rows */
.gmail-content-body{flex:1;display:flex;flex-direction:column;position:relative;overflow:auto}
.gmail-list-view{flex:1;display:flex;flex-direction:column}
.gmail-rows-list{display:flex;flex-direction:column}

.gmail-row{display:flex;align-items:center;gap:10px;padding:9px 16px;border-bottom:1px solid #f1f5f9;cursor:pointer;transition:background .1s, box-shadow .1s;font-size:13px;user-select:none}
.gmail-row:hover{background:#f8fafc;box-shadow:inset 1px 0 0 #dadce0, inset -1px 0 0 #dadce0}
.gmail-row.unread{font-weight:600;background:#fff}
.gmail-row.read{background:#fafafa;color:#475569}
.gmail-row.selected{background:#e0f2fe}

.mail-star{font-size:15px;cursor:pointer;color:#cbd5e1;transition:color .1s;line-height:1}
.mail-star.starred{color:#f59e0b}
.mail-star:hover{transform:scale(1.15)}

.mail-avatar{width:28px;height:28px;border-radius:50%;background:#e0f2fe;color:#0369a1;font-size:11px;font-weight:700;display:grid;place-items:center;flex-shrink:0}
.mail-sender{width:180px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;color:#0f172a}
.mail-content{flex:1;display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;min-width:0}
.mail-subject{color:#0f172a;flex-shrink:0}
.mail-snippet{color:#64748b;font-weight:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-badge-tag{font-size:11px;padding:2px 6px;border-radius:4px;background:#f1f5f9;color:#475569;flex-shrink:0}
.mail-date{width:90px;text-align:right;font-size:12px;color:#64748b;flex-shrink:0}

/* Google-style Empty State */
.gmail-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center;margin:auto}
.empty-graphic-wrapper{position:relative;width:80px;height:80px;border-radius:50%;background:#f1f5f9;display:grid;place-items:center;margin-bottom:14px;box-shadow:0 2px 10px rgba(0,0,0,0.03)}
.empty-tray-icon{font-size:38px}
.empty-sparkle-stars{position:absolute;top:2px;right:2px;font-size:18px;animation:pulse 2s infinite ease-in-out}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.empty-title{font-size:18px;font-weight:600;color:#0f172a;margin:0 0 6px}
.empty-subtitle{font-size:13.5px;color:#64748b;max-width:440px;line-height:1.5;margin:0 0 20px}
.empty-accounts-status{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:24px}
.acc-status-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:20px;font-size:12px;background:#f8fafc;border:1px solid #e2e8f0;color:#334155}
.empty-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn-empty-action{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-empty-action.primary{background:#1a73e8;color:#fff;border:none;box-shadow:0 1px 3px rgba(26,115,232,0.3)}
.btn-empty-action.primary:hover{background:#1557b0}
.btn-empty-action.secondary{background:#fff;border:1px solid #cbd5e1;color:#1e293b}
.btn-empty-action.secondary:hover{background:#f8fafc;border-color:#94a3b8}
.btn-empty-action.ghost{background:none;border:none;color:#6366f1;text-decoration:underline}

/* Thread Detail View */
.gmail-thread-view{padding:20px 24px;display:flex;flex-direction:column;gap:16px;background:#fff;min-height:500px}
.thread-header-bar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f5f9;padding-bottom:12px}
.btn-back-inbox{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;background:#f1f5f9;border:1px solid #e2e8f0;font-size:12.5px;font-weight:500;color:#334155;cursor:pointer}
.btn-back-inbox:hover{background:#e2e8f0;color:#0f172a}
.thread-actions-bar{display:flex;gap:8px}

.thread-subject-title{font-size:18px;font-weight:600;color:#0f172a;margin:4px 0 0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* Contact Context Card inside Thread */
.thread-contact-card{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:10px 14px;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;font-size:12.5px}
.contact-card-info{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:#166534}
.contact-card-info b{font-size:13.5px;color:#0f172a}
.btn-view-pipeline{background:#fff;border:1px solid #86efac;color:#15803d;padding:4px 10px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .1s}
.btn-view-pipeline:hover{background:#dcfce7}

.thread-message-card{border:1px solid #e2e8f0;border-radius:8px;padding:16px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,0.03)}
.thread-sender-row{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:12px}
.sender-details{display:flex;gap:10px;align-items:center}
.sender-avatar-lg{width:36px;height:36px;border-radius:50%;background:#e0f2fe;color:#0369a1;font-size:13px;font-weight:700;display:grid;place-items:center}
.sender-meta{display:flex;flex-direction:column;gap:2px}
.sender-name-text{font-size:14px;font-weight:600;color:#0f172a}
.sender-sub-text{font-size:12px;color:#64748b}
.thread-date-text{font-size:12px;color:#64748b}

.thread-message-body{font-size:13.5px;line-height:1.6;color:#1e293b;white-space:pre-wrap;margin:12px 0 16px}
.thread-replies-history{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.reply-bubble{background:#f8fafc;border-left:3px solid #6366f1;border-radius:0 8px 8px 0;padding:12px 14px;font-size:13px}
.reply-bubble-head{display:flex;justify-content:space-between;color:#64748b;font-size:11.5px;margin-bottom:4px}

/* Inline Quick Reply Box */
.thread-reply-composer{border:1px solid #cbd5e1;border-radius:8px;padding:14px;background:#f8fafc;display:flex;flex-direction:column;gap:10px;margin-top:12px}
.reply-header-info{display:flex;align-items:center;gap:10px;font-size:12.5px}
.reply-account-select{padding:4px 8px;font-size:12px;border-radius:6px;background:#fff;border:1px solid #cbd5e1}
.reply-textarea{min-height:120px;border:1px solid #cbd5e1;border-radius:6px;padding:10px;font-size:13px;background:#fff}
.reply-footer{display:flex;justify-content:space-between;align-items:center}

/* Gmail Floating Docked Compose Box */
.docked-compose{position:fixed;bottom:0;right:24px;width:520px;max-width:calc(100vw - 32px);background:#fff;border-radius:10px 10px 0 0;box-shadow:0 8px 30px rgba(0,0,0,0.22);border:1px solid #cbd5e1;border-bottom:none;z-index:99999;display:flex;flex-direction:column;overflow:hidden;font-size:13px;transition:height .2s, width .2s}
.docked-compose.minimized{height:40px;width:280px}
.docked-compose.minimized .docked-compose-body{display:none}
.docked-compose.expanded{width:min(900px, 94vw);height:min(700px, 86vh);bottom:10px;right:10px;border-radius:10px;border-bottom:1px solid #cbd5e1}

.docked-compose-header{background:#0f172a;color:#fff;padding:8px 14px;display:flex;justify-content:space-between;align-items:center;font-weight:600;cursor:pointer;user-select:none}
.docked-title{font-size:13px;letter-spacing:-0.2px}
.docked-controls{display:flex;gap:6px;align-items:center}
.btn-control{background:none;border:none;color:#94a3b8;font-size:14px;cursor:pointer;padding:2px 6px;line-height:1;border-radius:3px}
.btn-control:hover{color:#fff;background:rgba(255,255,255,0.15)}

.docked-compose-body{display:flex;flex-direction:column;flex:1;background:#fff}
.compose-field{display:flex;align-items:center;border-bottom:1px solid #f1f5f9;padding:6px 14px;gap:8px}
.compose-label{font-size:12px;color:#64748b;font-weight:500;width:54px;flex-shrink:0}
.compose-select{flex:1;border:none;background:transparent;outline:none;font-size:12.5px;padding:2px 0}
.compose-to-wrapper{flex:1;position:relative}
.compose-to-wrapper input{width:100%;border:none;background:transparent;outline:none;font-size:12.5px;padding:2px 0}
.compose-field input{flex:1;border:none;background:transparent;outline:none;font-size:12.5px;padding:2px 0}

.compose-contact-dropdown{position:absolute;top:100%;left:0;right:0;max-height:180px;overflow-y:auto;background:#fff;border:1px solid #cbd5e1;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,0.12);z-index:1000;margin-top:4px}
.contact-dropdown-item{padding:6px 10px;cursor:pointer;font-size:12px;display:flex;justify-content:space-between;border-bottom:1px solid #f1f5f9}
.contact-dropdown-item:hover{background:#f1f5f9}

.compose-editor{flex:1;display:flex;flex-direction:column;min-height:180px}
.compose-editor textarea{flex:1;border:none;resize:none;outline:none;padding:12px 14px;font-size:13px;line-height:1.5;font-family:inherit}

.docked-compose-footer{padding:8px 14px;border-top:1px solid #f1f5f9;background:#f8fafc;display:flex;justify-content:space-between;align-items:center}
.btn-gmail-send{background:#1a73e8;color:#fff;border:none;border-radius:18px;padding:7px 20px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-gmail-send:hover{background:#1557b0;box-shadow:0 1px 3px rgba(0,0,0,0.2)}
.btn-icon-danger{background:none;border:none;font-size:15px;color:#94a3b8;cursor:pointer;padding:4px}
.btn-icon-danger:hover{color:#ef4444}
.compose-status{font-size:12px;margin-left:10px}

/* Accounts Grid & Modals */
.accounts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:16px}
.account-card{background:#fff;border-radius:12px;padding:20px;border:1px solid #e2e8f0;box-shadow:0 1px 4px rgba(0,0,0,0.04);display:flex;flex-direction:column;gap:12px;position:relative}
.account-card.is-paused{opacity:0.8;background:#fafafa}
.account-header{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.account-title-group{display:flex;flex-direction:column;gap:2px}
.account-badge-group{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.account-stat-pill{background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:6px 10px;display:flex;flex-direction:column;gap:2px;font-size:11px}
.account-stat-pill b{font-size:13px;color:#0f172a}
.test-res-box{border-radius:8px;padding:10px 12px;font-size:11.5px;display:flex;flex-direction:column;gap:4px}
.test-res-box.ok{background:#f0fdf4;border:1px solid #86efac;color:#166534}
.test-res-box.warn{background:#fffbeb;border:1px solid #fde68a;color:#92400e}
.test-res-box.err{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b}

/* Native dialog modals (modern-web-guidance compliant) */
dialog:modal{overscroll-behavior:contain}
dialog::backdrop{overflow:hidden;overscroll-behavior:contain}
dialog.modal{border:none;border-radius:12px;padding:0;max-width:680px;width:95vw;box-shadow:0 24px 48px rgba(0,0,0,0.25);background:#fff;color:#1e293b}
dialog.modal::backdrop{background:rgba(15,23,42,0.65);backdrop-filter:blur(3px)}
.modal-header{padding:14px 20px;border-bottom:1px solid #e2e8f0;display:flex;justify-content:space-between;align-items:center;background:#f8fafc;border-radius:12px 12px 0 0}
.modal-header h3{font-size:15px;color:#0f172a}
.modal-body{padding:20px;max-height:75vh;overflow-y:auto}
.modal-footer{padding:12px 20px;border-top:1px solid #e2e8f0;display:flex;justify-content:flex-end;align-items:center;gap:10px;background:#f8fafc;border-radius:0 0 12px 12px}

/* Industry & Music Type Multi-Select Chips & Pickers */
.tax-cell-wrap{display:flex;flex-direction:column;gap:4px}
.tax-chips-line{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.tax-chip{display:inline-flex;align-items:center;gap:3px;font-size:10.5px;line-height:1.25;padding:2px 7px;border-radius:999px;font-weight:600;border:1px solid transparent;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tax-chip.ind{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}
.tax-chip.mus{background:#fef3c7;color:#92400e;border-color:#fde68a}
.tax-actions-row{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:1px}
.tax-edit-pill{background:#f8fafc;color:#475569;border:1px solid #cbd5e1;font-size:10.5px;font-weight:600;padding:1.5px 7px;border-radius:999px;cursor:pointer;line-height:1.3;transition:all .12s}
.tax-edit-pill:hover{background:#e2e8f0;color:#0f172a;border-color:#94a3b8}
.tax-edit-pill.confirmed{background:#ecfdf5;color:#047857;border-color:#a7f3d0}
.tax-confirm-btn{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0;font-size:10.5px;font-weight:700;padding:1.5px 6px;border-radius:999px;cursor:pointer;line-height:1.3;transition:all .12s}
.tax-confirm-btn:hover{background:#d1fae5;border-color:#6ee7b7}
.news-count-pill{display:inline-flex;align-items:center;gap:3px;font-size:10px;font-weight:600;padding:1px 6px;border-radius:999px;background:#f0f9ff;color:#0369a1;border:1px solid #bae6fd;cursor:pointer}
.news-count-pill:hover{background:#e0f2fe}

/* Son's Connection Memory Pills & Notes Card */
.son-mem-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;cursor:pointer;border:1px solid transparent;line-height:1.25;transition:all .15s;width:fit-content;max-width:100%}
.son-mem-pill.has-mem{background:#ecfdf5;color:#047857;border-color:#86efac}
.son-mem-pill.has-mem:hover{background:#dcfce7;border-color:#4ade80}
.son-mem-pill.needs-mem{background:#fffbeb;color:#b45309;border-color:#fcd34d}
.son-mem-pill.needs-mem:hover{background:#fef3c7;border-color:#fbbf24}

.son-notes-card{background:linear-gradient(180deg,#f0fdf4 0%,#f8fafc 100%);border:1px solid #86efac;border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;font-size:12px}
.son-notes-grid{display:grid;grid-template-columns:1fr;gap:4px}
.son-notes-row{display:flex;gap:6px;line-height:1.4}
.son-notes-row b{color:#065f46;min-width:108px;flex-shrink:0;font-size:11.5px}
.warm-draft-banner{background:#f0fdf4;border:1px solid #86efac;border-radius:8px;padding:10px 12px;margin-bottom:4px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}

/* News, Publications, Releases & Research Links Area */
.news-feed{display:flex;flex-direction:column;gap:7px;max-height:310px;overflow-y:auto;padding-right:2px}
.news-card{background:#f8fafc;border:1px solid #e2e8f0;border-left:3px solid #0284c7;border-radius:7px;padding:8px 10px;display:flex;flex-direction:column;gap:4px;font-size:12px;transition:border-color .12s,background .12s}
.news-card:hover{background:#fff;border-color:#cbd5e1;border-left-color:#0284c7}
.news-card-top{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.news-badges{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.news-kind-badge{font-size:10px;font-weight:700;padding:1.5px 6px;border-radius:999px;background:#e0f2fe;color:#0369a1;text-transform:uppercase;letter-spacing:0.25px}
.news-kind-badge.kind-release{background:#ede9fe;color:#6d28d9}
.news-kind-badge.kind-award{background:#fef3c7;color:#b45309}
.news-kind-badge.kind-interview{background:#fce7f3;color:#be185d}
.news-kind-badge.kind-publication{background:#dcfce7;color:#15803d}
.news-date-badge{font-size:10.5px;color:#475569;font-weight:600;background:#fff;border:1px solid #e2e8f0;padding:1px 6px;border-radius:999px}
.news-title-link{font-weight:600;color:#0f172a;text-decoration:none;line-height:1.35;word-break:break-word}
.news-title-link:hover{color:#2563eb;text-decoration:underline}
.news-domain-link{display:inline-flex;align-items:center;gap:3px;font-size:11px;color:#0284c7;text-decoration:none;font-weight:500}
.news-domain-link:hover{text-decoration:underline}
.news-summary{color:#475569;font-size:11.5px;line-height:1.42}

/* Modal Chips & Multi-Select Checkboxes */
.warm-target-banner{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:9px 12px;font-size:12.5px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.modal-field-label{display:block;font-size:12px;font-weight:700;color:#1e293b;margin-bottom:5px}
.quick-chip-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px}
.quick-chip{background:#f8fafc;color:#334155;border:1px solid #cbd5e1;border-radius:999px;padding:3px 9px;font-size:11px;font-weight:500;cursor:pointer;transition:all .12s}
.quick-chip:hover{background:#e0e7ff;color:#3730a3;border-color:#a5b4fc}
.quick-chip.active{background:#4f46e5;color:#fff;border-color:#4338ca}
.warm-regen-card{display:flex;align-items:flex-start;gap:10px;padding:11px 13px;background:#ecfdf5;border:1px solid #86efac;border-radius:8px;cursor:pointer;user-select:none}
.warm-regen-card input[type="checkbox"]{margin-top:2px;width:16px;height:16px;accent-color:#059669;flex-shrink:0}

.tax-option-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:7px}
.tax-opt-label{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;font-size:12px;font-weight:500;color:#1e293b;cursor:pointer;user-select:none;transition:all .12s}
.tax-opt-label:hover{border-color:#94a3b8;background:#f8fafc}
.tax-opt-label:has(input:checked){background:#eef2ff;border-color:#6366f1;color:#312e81;font-weight:600}
.tax-opt-label.music-opt:has(input:checked){background:#fffbeb;border-color:#f59e0b;color:#78350f;font-weight:600}
.tax-opt-label input{margin:0;accent-color:#4f46e5;flex-shrink:0}
.tax-opt-label.music-opt input{accent-color:#d97706}

/* ───────── Mobile layout (≤760px) ─────────
   Root cause of the "blocker": the header row could not wrap and several blocks had
   fixed min-widths wider than a phone (table 1226px, account cards 360px, inbox 230px
   sidebar), so the page itself became wider than the screen. Fix the causes, then
   clip any remaining stray overflow at the root as a failsafe. */
#queue{overflow-x:auto}
.accounts-grid{grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr))}

@media (max-width:760px){
  html{overflow-x:clip}

  /* Header: brand + user on row 1, tabs as a swipeable strip on row 2 */
  header{flex-wrap:wrap;gap:8px 10px;padding:10px 12px}
  header strong{flex:1;font-size:14px}
  header nav{order:3;flex:1 0 100%;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:2px}
  header nav::-webkit-scrollbar{display:none}
  header nav button{white-space:nowrap;flex:0 0 auto;padding:6px 10px}
  #me{max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  header form button{padding:4px 10px;font-size:12px}

  .todo{padding:10px 12px;gap:6px}
  .todo .pill{font-size:12px;padding:4px 10px}
  main{padding:10px 12px 70px}

  /* Filters: search full width, selects two per row */
  .bar input{min-width:0;flex:1 0 100%}
  .bar select{min-width:0;flex:1 1 calc(50% - 4px);max-width:calc(50% - 4px)}

  /* Pipeline table → cards. The header row stays as a strip of sort chips. */
  #pipeline > div[style*="overflow-x"]{overflow:visible !important}
  #pipeline table{min-width:0;table-layout:auto;background:transparent;box-shadow:none;display:block}
  #pipeline thead{display:block;margin:0 0 8px}
  #pipeline thead tr{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
  #pipeline thead tr::-webkit-scrollbar{display:none}
  #pipeline thead th{flex:0 0 auto;width:auto !important;border:1px solid #cbd5e1;border-radius:16px;padding:4px 10px;font-size:11px;background:#fff;white-space:nowrap}
  #pipeline thead th:not([data-sort]){display:none}
  #pipeline tbody{display:block}

  tr.contact-row{display:grid;grid-template-columns:30px minmax(0,1fr) auto;grid-template-areas:
      "tog target value"
      "id  seg    stage"
      ".   music  music"
      ".   hist   hist"
      "act act    act";
    background:#fff;border:1px solid #e2e8f0;border-radius:10px;margin-bottom:10px;padding:8px 6px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
  tr.contact-row.is-expanded{border-color:#6366f1;border-radius:10px 10px 0 0;margin-bottom:0}
  tr.contact-row > td{display:block;width:auto !important;border:0;padding:3px 6px;text-align:left !important;overflow:visible}
  tr.contact-row > td:nth-child(1){grid-area:tog;padding:2px 0}
  tr.contact-row > td.id-cell{grid-area:id;padding:2px 0;text-align:center !important}
  tr.contact-row > td.id-cell b{font-size:10.5px}
  tr.contact-row > td.target-cell{grid-area:target}
  tr.contact-row > td.value-td{grid-area:value;text-align:right !important}
  tr.contact-row > td.segment-cell{grid-area:seg}
  tr.contact-row > td.stage-cell{grid-area:stage;text-align:right !important}
  tr.contact-row > td.music-td{grid-area:music}
  tr.contact-row > td.history-td{grid-area:hist}
  tr.contact-row > td.actions-td{grid-area:act;border-top:1px solid #f1f5f9;margin-top:4px;padding-top:8px}
  .music-cell{flex-direction:row;flex-wrap:wrap;align-items:center;gap:6px}
  .rel-select{max-width:none}
  .small-note{white-space:normal}
  .alt-reps-preview{white-space:normal !important}
  .actions-cell{justify-content:flex-start;flex-wrap:wrap}

  /* Expanded detail sits under its card */
  tr.detail-row{display:block;margin-bottom:10px}
  tr.detail-row > td.detail-cell{display:block;padding:12px;border:1px solid #6366f1;border-top:0;border-radius:0 0 10px 10px}
  #rows > tr:not(.contact-row):not(.detail-row) > td{display:block}

  /* Value tooltip: anchor to the right edge so it never runs off-screen; tap to show */
  .tooltip-box{left:auto;right:0;transform:translateY(4px);width:min(310px,86vw)}
  .val-wrapper:hover .tooltip-box,.val-wrapper:focus-within .tooltip-box{transform:translateY(0)}
  .tooltip-box::after{left:auto;right:14px}

  /* Inbox: folders become a horizontal strip above the list */
  .gmail-app-container{grid-template-columns:minmax(0,1fr);min-height:0}
  .gmail-sidebar,.gmail-main{min-width:0}
  .gmail-sidebar{border-right:0;border-bottom:1px solid #e2e8f0;padding:10px;gap:8px}
  .gmail-compose-btn{height:38px;padding:0 16px;align-self:flex-start}
  .gmail-nav,.gmail-account-list{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:4px}
  .gmail-nav::-webkit-scrollbar,.gmail-account-list::-webkit-scrollbar{display:none}
  .gmail-nav-item,.account-filter-item{width:auto;flex:0 0 auto;white-space:nowrap;padding:6px 10px}
  .gmail-sidebar-section{padding-top:8px}
  .gmail-topbar{flex-wrap:wrap;padding:10px 12px}
  .gmail-search-bar{max-width:none;flex:1 0 100%}
  .gmail-toolbar{flex-wrap:wrap;gap:6px;padding:8px 12px}
  .gmail-row{padding:9px 10px;gap:8px}
  .mail-sender{width:96px}
  .mail-snippet,.mail-badge-tag{display:none}
  .mail-date{width:52px}
  .gmail-thread-view{padding:14px 12px}
  .thread-sender-row,.reply-footer{flex-wrap:wrap;gap:8px}

  /* Compose: full-width sheet */
  .docked-compose{right:0;width:100%;max-width:100vw;border-radius:10px 10px 0 0}
  .docked-compose.expanded{width:100vw;height:92vh;right:0;bottom:0}

  /* Account modal: fixed-width fields shrink to fit */
  .modal-body .row > div[style*="width"]{width:auto !important;flex:1 1 120px}
  .modal-body{padding:14px}
}


/* ───────── Rich HTML Email Editor & Clickable Links ───────── */
.rte-shell{display:flex;flex-direction:column;border:1px solid #cbd5e1;border-radius:8px;background:#fff;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.rte-shell:focus-within{border-color:#6366f1;box-shadow:0 0 0 3px rgba(99,102,241,.12)}
.rte-shell.is-locked{background:#f8fafc;opacity:.92}
.rte-toolbar{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:5px 8px;background:#f8fafc;border-bottom:1px solid #e2e8f0}
.rte-group{display:inline-flex;align-items:center;gap:2px}
.rte-sep{inline-size:1px;align-self:stretch;background:#cbd5e1;margin:3px 3px}
.rte-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-inline-size:28px;min-block-size:28px;padding:3px 7px;border:1px solid transparent;border-radius:5px;background:transparent;color:#334155;font-size:11.5px;font-weight:600;cursor:pointer;line-height:1;transition:background .12s,color .12s,border-color .12s}
.rte-btn:hover:not(:disabled){background:#e2e8f0;color:#0f172a}
.rte-btn:focus-visible{outline:2px solid #4f46e5;outline-offset:1px}
.rte-btn[aria-pressed="true"]{background:#e0e7ff;color:#3730a3;border-color:#818cf8}
.rte-btn:disabled{opacity:.45;cursor:not-allowed}

.rte-link-popover{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;padding:6px 10px;background:#eff6ff;border-bottom:1px solid #bfdbfe;font-size:11.5px;color:#1e3a8a}
.rte-link-popover[hidden]{display:none !important}
.rte-link-popover-url{font-weight:600;color:#1d4ed8;text-decoration:underline;max-width:290px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rte-link-popover-actions{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap}

.rte-visual{min-height:260px;max-height:520px;overflow-y:auto;padding:12px 14px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:13.5px;line-height:1.58;color:#0f172a;outline:none;word-break:break-word}
.rte-visual.compose-visual{min-height:190px;max-height:340px}
.rte-visual:empty::before{content:attr(data-placeholder);color:#94a3b8;pointer-events:none}
.rte-visual p{margin:0 0 10px}
.rte-visual p:last-child{margin-bottom:0}
.rte-visual ul,.rte-visual ol{margin:4px 0 12px;padding-left:22px}
.rte-visual li{margin:0 0 4px}
.rte-visual hr{border:none;border-top:1px solid #e2e8f0;margin:14px 0 8px}
.rte-visual a{color:#1d4ed8;text-decoration:underline;text-underline-offset:2px;cursor:pointer;border-radius:3px;padding:0 1px;transition:background .12s}
.rte-visual a:hover{background:#dbeafe;color:#1e40af}

.rte-shell .body-textarea,.rte-shell #composeBodyInput{border:0 !important;border-radius:0 !important;min-height:260px;margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12.5px;line-height:1.5;padding:12px;width:100%;resize:vertical;outline:none}
.rte-shell .body-textarea[hidden],.rte-shell #composeBodyInput[hidden],.rte-visual[hidden]{display:none !important}

.draft-links-strip{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;padding:6px 9px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:7px;font-size:11px}
.draft-links-strip-label{font-weight:700;color:#475569;white-space:nowrap}
.draft-link-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:#eff6ff;border:1px solid #bfdbfe;color:#1d4ed8;font-weight:600;text-decoration:none;max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:background .12s,border-color .12s}
.draft-link-chip:hover{background:#dbeafe;border-color:#93c5fd;text-decoration:underline}
.draft-link-chip.is-video{background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.draft-link-chip.is-video:hover{background:#fee2e2;border-color:#fca5a5}

.btn-send-now{background:#0284c7;color:#fff;border:1px solid #0369a1;padding:5px 11px;border-radius:6px;font-weight:700;font-size:12px;cursor:pointer;transition:background .12s}
.btn-send-now:hover:not(:disabled){background:#0369a1}
.btn-send-now:disabled{opacity:.5;cursor:not-allowed}
.test-badge{display:inline-flex;align-items:center;gap:3px;padding:1px 6px;border-radius:999px;background:#fef3c7;border:1px solid #fcd34d;color:#92400e;font-size:10px;font-weight:700;letter-spacing:.2px}

.thread-message-body.rich-html p{margin:0 0 10px}
.thread-message-body.rich-html ul,.thread-message-body.rich-html ol{margin:4px 0 12px;padding-left:22px}
.thread-message-body.rich-html li{margin:0 0 4px}
.thread-message-body.rich-html a,.thread-card a.inline-mail-link{color:#1d4ed8;text-decoration:underline}

/* ───────── Shellcatch Global Fisheries Import, Language & Office Styles ───────── */
.asr-pill {
  display: inline-flex;
  align-items: center;
  background: rgba(56, 189, 248, 0.16);
  color: #7dd3fc;
  border: 1px solid rgba(56, 189, 248, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.pipeline-actions-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 14px;
  background: linear-gradient(90deg, #f8fafc 0%, #f0f9ff 100%);
  border: 1px solid #cbd5e1;
  border-radius: 10px;
}

.pipeline-actions-left,
.pipeline-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-import-primary {
  background: #0284c7;
  color: #fff;
  border: 1px solid #0369a1;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(2, 132, 199, 0.2);
  transition: background 0.15s ease;
}
.btn-import-primary:hover {
  background: #0369a1;
}

.export-link {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: #334155;
  background: #fff;
}
.export-link:hover {
  background: #f1f5f9;
  color: #0f172a;
}

.deal-val-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #ecfdf5;
  color: #047857;
  border: 1px solid #6ee7b7;
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10.5px;
  font-weight: 700;
  margin-top: 3px;
}

.import-dropzone {
  border: 2px dashed #94a3b8;
  background: #f8fafc;
  border-radius: 10px;
  padding: 20px 16px;
  text-align: center;
  transition: all 0.15s ease;
}
.import-dropzone.dragover {
  border-color: #0284c7;
  background: #e0f2fe;
}

.mapping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(225px, 1fr));
  gap: 8px;
  max-height: 210px;
  overflow-y: auto;
  padding: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.mapping-item {
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mapping-col-name {
  font-size: 11px;
  font-weight: 700;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mapping-item select {
  font-size: 11px;
  padding: 3px 5px;
  width: 100%;
}

.preview-table-wrap {
  max-height: 175px;
  overflow: auto;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
}
.preview-table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.preview-table-wrap th {
  background: #f1f5f9;
  color: #334155;
  padding: 5px 8px;
  position: sticky;
  top: 0;
  font-size: 10.5px;
  white-space: nowrap;
}
.preview-table-wrap td {
  padding: 4px 8px;
  border-top: 1px solid #e2e8f0;
  max-width: 190px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-timeline {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}
.history-item {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid #0284c7;
  border-radius: 6px;
  padding: 7px 9px;
  font-size: 11.5px;
}
.history-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 3px;
}

.custom-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 8px;
  font-size: 11px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 7px 9px;
  margin-top: 4px;
}

/* ───────── Shellcatch Global Fisheries Language & Office Styles ───────── */
.lang-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  white-space: nowrap;
}
.lang-pill.bilingual {
  background: #ecfeff;
  color: #0e7490;
  border-color: #a5f3fc;
}

.country-region-line {
  font-size: 11px;
  color: #0369a1;
  font-weight: 600;
  margin-top: 1px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.office-line {
  font-size: 10.5px;
  color: #64748b;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lang-switcher-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 11px;
  background: linear-gradient(90deg, #f0f9ff 0%, #ecfeff 100%);
  border: 1px solid #bae6fd;
  border-radius: 8px;
  font-size: 11.5px;
}
.lang-switcher-bar select {
  font-size: 11.5px;
  padding: 4px 8px;
  font-weight: 600;
  border-color: #7dd3fc;
  background: #fff;
}