/* ============================================================
   BYOD Email Client — byod-email-client.css
   Full 3-panel layout: topbar + sidebar + message list + reading pane
   Uses --byod-* tokens already declared by byod-domain-selector.css
   ============================================================ */

/* ── Root wrapper ─────────────────────────────────────────────────── */
.byod-ec-wrapper {
    --ec-topbar-h   : 64px;
    --ec-sidebar-w  : 260px;
    --ec-list-w     : 320px;
    --ec-radius     : 12px;
    --ec-surface    : #ffffff;
    --ec-border     : #e2e8f0;
    --ec-text       : #1e293b;
    --ec-text-muted : #64748b;
    --ec-primary    : #2563eb;
    --ec-primary-bg : #eff6ff;
    --ec-danger     : #ef4444;
    --ec-success    : #22c55e;
    --ec-unread-dot : #2563eb;
    font-family     : 'Inter', sans-serif;
    font-size       : 14px;
    color           : var(--ec-text);
    background      : #f8fafc;
    border          : 1px solid var(--ec-border);
    border-radius   : var(--ec-radius);
    overflow        : hidden;
    min-height      : 600px;
    display         : flex;
    flex-direction  : column;
}

/* ── Login wall ───────────────────────────────────────────────────── */
.byod-ec-login-wall {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 16px;
    padding         : 64px 32px;
    text-align      : center;
}
.byod-ec-login-icon {
    font-size   : 48px;
    color       : var(--ec-text-muted);
}
.byod-ec-login-wall h3 {
    margin      : 0;
    font-size   : 20px;
    font-weight : 600;
}
.byod-ec-login-wall p {
    margin      : 0;
    color       : var(--ec-text-muted);
}

/* ── No-domains state ─────────────────────────────────────────────── */
.byod-ec-no-domains {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 16px;
    padding         : 64px 32px;
    text-align      : center;
}
.byod-ec-no-domains .material-symbols-outlined {
    font-size   : 48px;
    color       : var(--ec-text-muted);
}
.byod-ec-no-domains h3 {
    margin      : 0;
    font-size   : 20px;
    font-weight : 600;
}
.byod-ec-no-domains p {
    margin      : 0;
    color       : var(--ec-text-muted);
    max-width   : 380px;
}
.byod-ec-no-domains-steps {
    display     : flex;
    align-items : center;
    gap         : 8px;
    flex-wrap   : wrap;
    justify-content : center;
}
.byod-ec-no-domains-step {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    gap             : 6px;
    padding         : 16px;
    background      : var(--ec-surface);
    border          : 1px solid var(--ec-border);
    border-radius   : 10px;
    min-width       : 100px;
}
.byod-ec-step-num {
    width           : 24px;
    height          : 24px;
    background      : var(--ec-primary);
    color           : #fff;
    border-radius   : 50%;
    display         : flex;
    align-items     : center;
    justify-content : center;
    font-size       : 12px;
    font-weight     : 700;
}
.byod-ec-step-label {
    font-size   : 12px;
    font-weight : 500;
    color       : var(--ec-text-muted);
}
.byod-ec-no-domains-step-arrow .material-symbols-outlined {
    font-size : 20px;
    color     : var(--ec-text-muted);
}

/* ── Top bar ──────────────────────────────────────────────────────── */
.byod-ec-topbar {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    height          : var(--ec-topbar-h);
    padding         : 0 20px;
    background      : var(--ec-surface);
    border-bottom   : 1px solid var(--ec-border);
    flex-shrink     : 0;
    gap             : 12px;
}
.byod-ec-topbar-left {
    display     : flex;
    align-items : center;
    gap         : 12px;
    flex        : 1;
    min-width   : 0;
}
.byod-ec-topbar-logo {
    font-size   : 24px;
    color       : var(--ec-primary);
    flex-shrink : 0;
}
.byod-ec-domain-picker-wrap {
    display     : flex;
    align-items : center;
    gap         : 8px;
    background  : #f1f5f9;
    border      : 1px solid var(--ec-border);
    border-radius : 8px;
    padding     : 0 12px;
    height      : 40px;
}
.byod-ec-domain-icon {
    font-size   : 18px;
    color       : var(--ec-text-muted);
    flex-shrink : 0;
}
.byod-ec-domain-select {
    border      : none;
    background  : transparent;
    font-family : inherit;
    font-size   : 14px;
    font-weight : 500;
    color       : var(--ec-text);
    outline     : none;
    cursor      : pointer;
    min-width   : 160px;
    max-width   : 280px;
}
.byod-ec-topbar-right {
    display     : flex;
    align-items : center;
    gap         : 8px;
    flex-shrink : 0;
}

/* ── Prompt: select domain ────────────────────────────────────────── */
.byod-ec-pick-prompt {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 12px;
    flex            : 1;
    padding         : 64px 32px;
    color           : var(--ec-text-muted);
    text-align      : center;
}
.byod-ec-pick-prompt .material-symbols-outlined {
    font-size : 48px;
}
.byod-ec-pick-prompt p {
    margin      : 0;
    font-size   : 15px;
}

/* ── 3-panel body ─────────────────────────────────────────────────── */
.byod-ec-body {
    display         : grid;
    grid-template-columns : var(--ec-sidebar-w) var(--ec-list-w) 1fr;
    flex            : 1;
    min-height      : 0;
    overflow        : hidden;
}

/* ── SIDEBAR ──────────────────────────────────────────────────────── */
.byod-ec-sidebar {
    display         : flex;
    flex-direction  : column;
    background      : var(--ec-surface);
    border-right    : 1px solid var(--ec-border);
    overflow-y      : auto;
    overflow-x      : hidden;
}

/* Nav items */
.byod-ec-nav {
    padding : 8px 0;
}
.byod-ec-nav-item {
    display         : flex;
    align-items     : center;
    gap             : 10px;
    width           : 100%;
    padding         : 10px 16px;
    border          : none;
    background      : transparent;
    cursor          : pointer;
    font-family     : inherit;
    font-size       : 14px;
    font-weight     : 500;
    color           : var(--ec-text-muted);
    border-radius   : 0 28px 28px 0;
    margin-right    : 12px;
    width           : calc(100% - 12px);
    transition      : background 0.15s, color 0.15s;
    position        : relative;
    text-align      : left;
}
.byod-ec-nav-item:hover {
    background : #f1f5f9;
    color      : var(--ec-text);
}
.byod-ec-nav-item.byod-ec-nav-active {
    background : var(--ec-primary-bg);
    color      : var(--ec-primary);
    font-weight: 600;
}
.byod-ec-nav-item .material-symbols-outlined {
    font-size   : 20px;
    flex-shrink : 0;
}
.byod-ec-nav-label {
    flex : 1;
}
.byod-ec-badge {
    background      : var(--ec-primary);
    color           : #fff;
    border-radius   : 12px;
    font-size       : 11px;
    font-weight     : 700;
    padding         : 1px 6px;
    min-width       : 18px;
    text-align      : center;
}

/* Sidebar divider */
.byod-ec-sidebar-divider {
    height     : 1px;
    background : var(--ec-border);
    margin     : 8px 16px;
}

/* ── Sidebar section header — label + optional "All" action button ── */
.byod-ec-sidebar-section-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 4px 16px 6px;
}

/* Section label */
.byod-ec-sidebar-section-label {
    font-size      : 11px;
    font-weight    : 600;
    color          : var(--ec-text-muted);
    letter-spacing : 0.06em;
    text-transform : uppercase;
}

/* ── ADDRESS LIST ─────────────────────────────────────────────────── */

/* Loading state shown while AJAX fetches addresses */
.byod-ec-addr-loading {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 6px;
    padding         : 16px;
    font-size       : 12px;
    color           : var(--ec-text-muted);
}

/* Empty state shown when domain has no generated emails */
.byod-ec-addr-empty {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    gap             : 6px;
    padding         : 16px;
    text-align      : center;
}
.byod-ec-addr-empty .material-symbols-outlined {
    font-size : 28px;
    color     : var(--ec-text-muted);
}
.byod-ec-addr-empty p {
    margin      : 0;
    font-size   : 12px;
    font-weight : 600;
    color       : var(--ec-text-muted);
}
.byod-ec-addr-empty small {
    font-size : 11px;
    color     : var(--ec-text-muted);
    line-height : 1.4;
}

/* Address list — <ul> container */
.byod-ec-address-list {
    list-style  : none;
    margin      : 0;
    padding     : 2px 0 4px;
}

/* Individual address row — <li> */
.byod-ec-addr-row {
    display      : flex;
    align-items  : center;
    gap          : 9px;
    padding      : 9px 12px 9px 16px;
    cursor       : pointer;
    transition   : background 0.12s;
    position     : relative;
}
.byod-ec-addr-row:hover {
    background : #f8fafc;
}
.byod-ec-addr-row:hover .byod-ec-addr-actions {
    opacity : 1;
}
.byod-ec-addr-row.byod-ec-addr-row-active {
    background : var(--ec-primary-bg);
}
.byod-ec-addr-row.byod-ec-addr-row-active .byod-ec-addr-email {
    color       : var(--ec-primary);
    font-weight : 600;
}

/* Avatar circle — shows first letter of the address */
.byod-ec-addr-avatar {
    width            : 32px;
    height           : 32px;
    border-radius    : 50%;
    background       : var(--ec-primary-bg);
    color            : var(--ec-primary);
    font-size        : 13px;
    font-weight      : 700;
    display          : flex;
    align-items      : center;
    justify-content  : center;
    flex-shrink      : 0;
    text-transform   : uppercase;
}
.byod-ec-addr-row.byod-ec-addr-row-active .byod-ec-addr-avatar {
    background : var(--ec-primary);
    color      : #fff;
}

/* Info column — email text + counts */
.byod-ec-addr-info {
    flex        : 1;
    min-width   : 0;
    display     : flex;
    flex-direction : column;
    gap         : 2px;
}
.byod-ec-addr-email {
    font-size     : 12px;
    font-weight   : 500;
    color         : var(--ec-text);
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
    display       : block;
}
.byod-ec-addr-counts {
    display     : flex;
    align-items : center;
    gap         : 6px;
}
.byod-ec-addr-total {
    font-size : 11px;
    color     : var(--ec-text-muted);
}
.byod-ec-addr-unread {
    font-size   : 11px;
    font-weight : 600;
    color       : var(--ec-primary);
}

/* Badge column — numeric unread pill, right-aligned */
.byod-ec-addr-badges {
    display     : flex;
    align-items : center;
    flex-shrink : 0;
}
.byod-ec-addr-badge {
    border-radius : 10px;
    font-size     : 11px;
    font-weight   : 700;
    padding       : 1px 6px;
    min-width     : 18px;
    text-align    : center;
}
.byod-ec-addr-badge-unread {
    background : var(--ec-primary);
    color      : #fff;
}
.byod-ec-addr-badge-total {
    background : #e2e8f0;
    color      : var(--ec-text-muted);
}

/* Action buttons column — copy icon, hidden until hover */
.byod-ec-addr-actions {
    display     : flex;
    align-items : center;
    gap         : 2px;
    flex-shrink : 0;
    opacity     : 0;
    transition  : opacity 0.12s;
}

/* Email address list (old .byod-ec-email-list kept for any legacy references) */
.byod-ec-email-list {
    flex        : 1;
    padding     : 4px 0;
}
.byod-ec-email-list-loading {
    display         : flex;
    justify-content : center;
    padding         : 16px;
    color           : var(--ec-text-muted);
}
.byod-ec-email-item {
    display      : flex;
    align-items  : center;
    gap          : 8px;
    width        : 100%;
    padding      : 9px 16px;
    border       : none;
    background   : transparent;
    cursor       : pointer;
    font-family  : inherit;
    font-size    : 13px;
    color        : var(--ec-text);
    text-align   : left;
    transition   : background 0.12s;
}
.byod-ec-email-item:hover { background : #f8fafc; }
.byod-ec-email-item.byod-ec-email-item-active {
    background : var(--ec-primary-bg);
    font-weight: 600;
    color      : var(--ec-primary);
}
.byod-ec-email-item .material-symbols-outlined {
    font-size   : 18px;
    flex-shrink : 0;
    color       : var(--ec-text-muted);
}
.byod-ec-email-item-label {
    flex         : 1;
    overflow     : hidden;
    text-overflow: ellipsis;
    white-space  : nowrap;
}
.byod-ec-email-badge {
    background   : var(--ec-primary);
    color        : #fff;
    border-radius: 10px;
    font-size    : 11px;
    font-weight  : 700;
    padding      : 1px 5px;
}
.byod-ec-email-list-empty {
    padding     : 12px 16px;
    font-size   : 12px;
    color       : var(--ec-text-muted);
    margin      : 0;
}

/* SMTP section */
.byod-ec-smtp-section {
    padding : 8px 12px;
}
.byod-ec-smtp-status-row {
    padding     : 4px 4px 8px;
    font-size   : 12px;
}
.byod-ec-smtp-ok      { color: var(--ec-success); font-weight: 600; }
.byod-ec-smtp-missing { color: var(--ec-danger);  font-weight: 600; }
.byod-ec-smtp-checking{ color: var(--ec-text-muted); }

.byod-ec-smtp-form {
    margin-top : 8px;
}
.byod-ec-smtp-field {
    margin-bottom : 10px;
}
.byod-ec-smtp-field label {
    display     : block;
    font-size   : 12px;
    font-weight : 600;
    color       : var(--ec-text);
    margin-bottom : 3px;
}
.byod-ec-smtp-field small {
    display     : block;
    font-size   : 11px;
    color       : var(--ec-text-muted);
    margin-bottom : 5px;
    line-height : 1.4;
}
.byod-ec-radio-chips {
    display : flex;
    gap     : 6px;
}
.byod-ec-chip {
    display       : flex;
    align-items   : center;
    gap           : 4px;
    padding       : 4px 10px;
    border        : 1px solid var(--ec-border);
    border-radius : 20px;
    font-size     : 12px;
    font-weight   : 500;
    cursor        : pointer;
    transition    : background 0.12s, border-color 0.12s;
}
.byod-ec-chip:has(input:checked) {
    background   : var(--ec-primary-bg);
    border-color : var(--ec-primary);
    color        : var(--ec-primary);
}
.byod-ec-chip input { display: none; }
.byod-ec-smtp-actions {
    display : flex;
    gap     : 8px;
    margin-top : 8px;
}
.byod-ec-smtp-save-status {
    padding       : 8px 10px;
    border-radius : 6px;
    font-size     : 12px;
    margin-top    : 6px;
}
.byod-ec-status-success { background: #f0fdf4; color: var(--ec-success); border: 1px solid #bbf7d0; }
.byod-ec-status-error   { background: #fef2f2; color: var(--ec-danger);  border: 1px solid #fecaca; }

/* New email button */
.byod-ec-sidebar-new-email {
    padding : 8px 12px 12px;
}

/* ── MESSAGE LIST PANEL ───────────────────────────────────────────── */
.byod-ec-message-list-panel {
    display         : flex;
    flex-direction  : column;
    background      : #f8fafc;
    border-right    : 1px solid var(--ec-border);
    overflow        : hidden;
}

/* ── Address filter bar — shown when a specific address is selected ─ */
.byod-ec-addr-filter-bar {
    display         : flex;
    align-items     : center;
    gap             : 6px;
    padding         : 7px 12px 7px 16px;
    background      : var(--ec-primary-bg);
    border-bottom   : 1px solid #bfdbfe;
    flex-shrink     : 0;
}
.byod-ec-addr-filter-bar > .material-symbols-outlined {
    font-size   : 15px;
    color       : var(--ec-primary);
    flex-shrink : 0;
}
.byod-ec-addr-filter-label {
    flex          : 1;
    font-size     : 12px;
    font-weight   : 600;
    color         : var(--ec-primary);
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
}

/* Search bar */
.byod-ec-search-bar {
    display     : flex;
    align-items : center;
    gap         : 8px;
    padding     : 12px 16px;
    background  : var(--ec-surface);
    border-bottom : 1px solid var(--ec-border);
    flex-shrink : 0;
}
.byod-ec-search-icon {
    font-size   : 18px;
    color       : var(--ec-text-muted);
    flex-shrink : 0;
}
.byod-ec-search-input {
    flex        : 1;
    border      : none;
    background  : transparent;
    font-family : inherit;
    font-size   : 13px;
    color       : var(--ec-text);
    outline     : none;
}
.byod-ec-search-input::placeholder { color: var(--ec-text-muted); }

/* Stats bar */
.byod-ec-stats-bar {
    display       : flex;
    gap           : 16px;
    padding       : 8px 16px;
    background    : var(--ec-surface);
    border-bottom : 1px solid var(--ec-border);
    flex-shrink   : 0;
}
.byod-ec-stat {
    display     : flex;
    align-items : center;
    gap         : 5px;
}
.byod-ec-stat-label {
    font-size : 12px;
    color     : var(--ec-text-muted);
}
.byod-ec-stat-value {
    font-size   : 12px;
    font-weight : 700;
    color       : var(--ec-text);
}
.byod-ec-unread-count { color: var(--ec-primary); }

/* Loading */
.byod-ec-loading {
    display         : flex;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    padding         : 24px;
    color           : var(--ec-text-muted);
    font-size       : 13px;
    flex-shrink     : 0;
}

/* Message list */
.byod-ec-messages-list {
    list-style  : none;
    margin      : 0;
    padding     : 0;
    overflow-y  : auto;
    flex        : 1;
}
.byod-ec-msg-row {
    display         : flex;
    align-items     : center;
    gap             : 8px;
    padding         : 12px 16px;
    border-bottom   : 1px solid var(--ec-border);
    cursor          : pointer;
    transition      : background 0.12s;
    background      : var(--ec-surface);
    position        : relative;
}
.byod-ec-msg-row:hover       { background: #f1f5f9; }
.byod-ec-msg-row.byod-ec-unread::before {
    content       : '';
    position      : absolute;
    left          : 4px;
    top           : 50%;
    transform     : translateY(-50%);
    width         : 6px;
    height        : 6px;
    border-radius : 50%;
    background    : var(--ec-unread-dot);
}
.byod-ec-msg-row.byod-ec-unread .byod-ec-row-from,
.byod-ec-msg-row.byod-ec-unread .byod-ec-row-subject {
    font-weight : 700;
}
.byod-ec-row-main {
    flex        : 1;
    min-width   : 0;
    display     : grid;
    grid-template-columns : auto 1fr;
    grid-template-rows    : auto auto;
    column-gap  : 8px;
    row-gap     : 2px;
}
.byod-ec-row-from {
    font-size   : 13px;
    font-weight : 500;
    color       : var(--ec-text);
    white-space : nowrap;
    overflow    : hidden;
    text-overflow : ellipsis;
    grid-column : 1;
    grid-row    : 1;
}
.byod-ec-row-date {
    font-size   : 11px;
    color       : var(--ec-text-muted);
    white-space : nowrap;
    grid-column : 2;
    grid-row    : 1;
    text-align  : right;
}
.byod-ec-row-subject {
    font-size     : 12px;
    color         : var(--ec-text-muted);
    overflow      : hidden;
    text-overflow : ellipsis;
    white-space   : nowrap;
    grid-column   : 1 / span 2;
    grid-row      : 2;
}
.byod-ec-row-actions {
    display     : flex;
    align-items : center;
    gap         : 2px;
    flex-shrink : 0;
    opacity     : 0;
    transition  : opacity 0.12s;
}
.byod-ec-msg-row:hover .byod-ec-row-actions { opacity: 1; }

/* Empty state */
.byod-ec-empty-state {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 8px;
    padding         : 48px 24px;
    text-align      : center;
    flex-shrink     : 0;
}
.byod-ec-empty-state .material-symbols-outlined {
    font-size : 36px;
    color     : var(--ec-text-muted);
}
.byod-ec-empty-title {
    margin      : 0;
    font-size   : 14px;
    font-weight : 600;
    color       : var(--ec-text);
}
.byod-ec-empty-hint {
    margin    : 0;
    font-size : 12px;
    color     : var(--ec-text-muted);
}

/* Pagination */
.byod-ec-pagination {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 10px 16px;
    border-top      : 1px solid var(--ec-border);
    background      : var(--ec-surface);
    flex-shrink     : 0;
}
.byod-ec-page-info {
    font-size : 12px;
    color     : var(--ec-text-muted);
}

/* ── READING PANE ─────────────────────────────────────────────────── */
.byod-ec-reading-pane {
    display         : flex;
    flex-direction  : column;
    background      : var(--ec-surface);
    overflow        : hidden;
    position        : relative;
}

/* Prompt: pick a message */
.byod-ec-read-prompt {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 12px;
    flex            : 1;
    color           : var(--ec-text-muted);
    text-align      : center;
    padding         : 48px;
}
.byod-ec-read-prompt .material-symbols-outlined { font-size: 48px; }
.byod-ec-read-prompt p { margin: 0; font-size: 14px; }

/* Message view */
.byod-ec-message-view {
    display         : flex;
    flex-direction  : column;
    flex            : 1;
    overflow        : hidden;
}
.byod-ec-msg-view-header {
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    padding         : 12px 20px;
    border-bottom   : 1px solid var(--ec-border);
    flex-shrink     : 0;
}
.byod-ec-msg-view-actions {
    display : flex;
    gap     : 6px;
}
.byod-ec-msg-view-meta {
    padding     : 20px 24px 12px;
    border-bottom : 1px solid var(--ec-border);
    flex-shrink : 0;
}
.byod-ec-msg-subject {
    margin      : 0 0 12px;
    font-size   : 18px;
    font-weight : 600;
    color       : var(--ec-text);
    line-height : 1.3;
}
.byod-ec-msg-meta-row {
    display     : flex;
    align-items : center;
    gap         : 8px;
    margin-bottom : 4px;
    font-size   : 13px;
    color       : var(--ec-text-muted);
}
.byod-ec-msg-meta-row .material-symbols-outlined { font-size: 16px; }
.byod-ec-msg-body {
    flex        : 1;
    overflow-y  : auto;
    padding     : 20px 24px;
    font-size   : 14px;
    line-height : 1.6;
    color       : var(--ec-text);
}
.byod-ec-body-loading { color: var(--ec-text-muted); }
.byod-ec-error        { color: var(--ec-danger); }

/* Attachments */
.byod-ec-attachments {
    display     : flex;
    flex-wrap   : wrap;
    gap         : 8px;
    margin-top  : 16px;
    padding-top : 16px;
    border-top  : 1px solid var(--ec-border);
    align-items : center;
}
.byod-ec-attach-chip {
    display       : flex;
    align-items   : center;
    gap           : 4px;
    padding       : 6px 12px;
    background    : #f1f5f9;
    border        : 1px solid var(--ec-border);
    border-radius : 20px;
    font-size     : 12px;
    font-weight   : 500;
    color         : var(--ec-text);
    text-decoration: none;
    transition    : background 0.12s;
}
.byod-ec-attach-chip:hover { background: #e2e8f0; }
.byod-ec-attach-chip .material-symbols-outlined { font-size: 16px; }

/* ── COMPOSE PANEL ────────────────────────────────────────────────── */
.byod-ec-compose-panel {
    display         : flex;
    flex-direction  : column;
    flex            : 1;
    overflow        : hidden;
    border-left     : 3px solid var(--ec-primary);
}
.byod-ec-compose-header {
    display         : flex;
    align-items     : center;
    gap             : 10px;
    padding         : 14px 20px;
    border-bottom   : 1px solid var(--ec-border);
    flex-shrink     : 0;
}
.byod-ec-compose-header .material-symbols-outlined { color: var(--ec-primary); font-size: 20px; }
.byod-ec-compose-title {
    flex        : 1;
    margin      : 0;
    font-size   : 15px;
    font-weight : 600;
}
.byod-ec-compose-body {
    flex        : 1;
    overflow-y  : auto;
    padding     : 16px 20px;
    display     : flex;
    flex-direction : column;
    gap         : 10px;
}
.byod-ec-compose-field {
    display        : flex;
    flex-direction : column;
    gap            : 4px;
}
.byod-ec-compose-label {
    font-size   : 12px;
    font-weight : 600;
    color       : var(--ec-text-muted);
}
.byod-ec-compose-body-field { flex: 1; }
.byod-ec-compose-advanced { margin: -4px 0; }
.byod-ec-compose-advanced-toggle {
    font-size : 12px;
    color     : var(--ec-text-muted);
    gap       : 4px;
}
.byod-ec-compose-advanced-fields {
    margin-top : 8px;
    display    : flex;
    flex-direction : column;
    gap        : 8px;
}
.byod-ec-compose-status {
    padding       : 10px 12px;
    border-radius : 8px;
    font-size     : 13px;
    margin-top    : 4px;
}
.byod-ec-compose-footer {
    display     : flex;
    align-items : center;
    gap         : 10px;
    padding     : 14px 20px;
    border-top  : 1px solid var(--ec-border);
    background  : var(--ec-surface);
    flex-shrink : 0;
}

/* ── SHARED INPUTS ────────────────────────────────────────────────── */
.byod-ec-input {
    width         : 100%;
    padding       : 8px 12px;
    border        : 1px solid var(--ec-border);
    border-radius : 8px;
    font-family   : inherit;
    font-size     : 13px;
    color         : var(--ec-text);
    background    : var(--ec-surface);
    outline       : none;
    transition    : border-color 0.15s, box-shadow 0.15s;
    box-sizing    : border-box;
}
.byod-ec-input:focus {
    border-color : var(--ec-primary);
    box-shadow   : 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.byod-ec-input-readonly {
    background : #f8fafc;
    color      : var(--ec-text-muted);
    cursor     : default;
}
.byod-ec-textarea {
    width         : 100%;
    padding       : 10px 12px;
    border        : 1px solid var(--ec-border);
    border-radius : 8px;
    font-family   : inherit;
    font-size     : 13px;
    color         : var(--ec-text);
    background    : var(--ec-surface);
    outline       : none;
    resize        : vertical;
    flex          : 1;
    min-height    : 140px;
    transition    : border-color 0.15s;
    box-sizing    : border-box;
}
.byod-ec-textarea:focus {
    border-color : var(--ec-primary);
    box-shadow   : 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ── BUTTONS ──────────────────────────────────────────────────────── */
.byod-ec-btn {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    gap             : 6px;
    padding         : 8px 16px;
    border          : none;
    border-radius   : 8px;
    font-family     : inherit;
    font-size       : 13px;
    font-weight     : 600;
    cursor          : pointer;
    transition      : background 0.15s, box-shadow 0.15s, opacity 0.15s;
    white-space     : nowrap;
    text-decoration : none;
}
.byod-ec-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.byod-ec-btn .material-symbols-outlined { font-size: 18px; }

.byod-ec-btn-primary {
    background : var(--ec-primary);
    color      : #fff;
}
.byod-ec-btn-primary:hover:not(:disabled) { background: #1d4ed8; }

.byod-ec-btn-secondary {
    background : #e2e8f0;
    color      : var(--ec-text);
}
.byod-ec-btn-secondary:hover:not(:disabled) { background: #cbd5e1; }

.byod-ec-btn-ghost {
    background : transparent;
    color      : var(--ec-text-muted);
}
.byod-ec-btn-ghost:hover:not(:disabled) { background: #f1f5f9; color: var(--ec-text); }

.byod-ec-btn-danger {
    background : transparent;
    color      : var(--ec-danger);
}
.byod-ec-btn-danger:hover:not(:disabled) { background: #fef2f2; }

.byod-ec-btn-icon { padding: 6px; border-radius: 6px; }
.byod-ec-btn-sm   { padding: 5px 12px; font-size: 12px; }
.byod-ec-btn-xs   { padding: 2px 8px;  font-size: 11px; font-weight: 600; }
.byod-ec-btn-full { width: 100%; }

.byod-ec-icon-btn {
    background  : transparent;
    border      : none;
    cursor      : pointer;
    padding     : 4px;
    border-radius: 4px;
    display     : flex;
    align-items : center;
    color       : var(--ec-text-muted);
    transition  : background 0.12s, color 0.12s;
}
.byod-ec-icon-btn:hover { background: #e2e8f0; color: var(--ec-text); }
.byod-ec-row-star .material-symbols-outlined  { font-size: 18px; }
.byod-ec-row-delete .material-symbols-outlined { font-size: 18px; }
.byod-ec-msg-row.byod-ec-starred .byod-ec-row-star .material-symbols-outlined { color: #f59e0b; }

/* ── TOAST NOTIFICATIONS ──────────────────────────────────────────── */
.byod-ec-toast {
    position        : fixed;
    bottom          : 24px;
    left            : 50%;
    transform       : translateX(-50%) translateY(20px);
    padding         : 10px 20px;
    border-radius   : 8px;
    font-size       : 13px;
    font-weight     : 500;
    color           : #fff;
    z-index         : 99999;
    opacity         : 0;
    transition      : opacity 0.25s, transform 0.25s;
    pointer-events  : none;
    box-shadow      : 0 4px 12px rgba(0,0,0,0.15);
}
.byod-ec-toast-show {
    opacity   : 1;
    transform : translateX(-50%) translateY(0);
}
.byod-ec-toast-success { background: #16a34a; }
.byod-ec-toast-error   { background: var(--ec-danger); }
.byod-ec-toast-info    { background: var(--ec-primary); }

/* ── SPIN ANIMATION ───────────────────────────────────────────────── */
@keyframes byod-ec-spin {
    to { transform: rotate(360deg); }
}
.byod-ec-spin {
    display          : inline-block;
    animation        : byod-ec-spin 0.9s linear infinite;
}

/* ── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .byod-ec-body {
        grid-template-columns : 0 1fr 0;
    }
    .byod-ec-sidebar,
    .byod-ec-reading-pane {
        display : none;
    }
    .byod-ec-message-list-panel {
        border-right : none;
    }
}
@media (max-width: 600px) {
    .byod-ec-topbar { padding: 0 12px; }
    .byod-ec-domain-select { min-width: 120px; max-width: 180px; font-size: 13px; }
}