/* ── RESET & BASE ── */
*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, sans-serif;
    background: #0b1220;
    color: #e2e8f0;
    min-height: 100vh;
}

/* ── DRAG HANDLE ── */
.drag-handle {
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1e293b;
    flex-shrink: 0;
    touch-action: none;
}
.drag-handle::before {
    content: '';
    width: 40px;
    height: 4px;
    background: #475569;
    border-radius: 2px;
}

/* ── LOGIN FORM ── */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.login-box {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 16px;
    padding: 32px 28px;
    width: 100%;
    max-width: 420px;
}
.login-box h2 { margin: 0 0 6px; font-size: 20px; }
.login-box p  { margin: 0 0 24px; font-size: 13px; color: #64748b; }
.login-box input {
    width: 100%;
    padding: 12px 14px;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 14px;
    outline: none;
    transition: border-color .2s;
    font-family: monospace;
}
.login-box input:focus { border-color: #60a5fa; }
.login-box button {
    margin-top: 14px;
    width: 100%;
    padding: 12px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.login-box button:hover { background: #1d4ed8; }
.login-hint {
    margin-top: 14px;
    font-size: 11px;
    color: #475569;
    line-height: 1.6;
}
.error-msg {
    background: #450a0a;
    border: 1px solid #7f1d1d;
    color: #fca5a5;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* ── HEADER ── */
.header {
    padding: 13px 16px;
    background: #111827;
    position: sticky;
    top: 0;
    z-index: 10;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
}
.header .badge { margin-left: auto; font-size: 11px; color: #64748b; font-weight: 400; }
.token-status {
    font-size: 11px;
    font-weight: 400;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
}
.token-status.ok      { color: #4ade80; border-color: #14532d; }
.token-status.refresh { color: #fbbf24; border-color: #78350f; }
.token-status.expired { color: #f87171; border-color: #7f1d1d; }
.logout-btn {
    margin-left: 8px;
    font-size: 11px;
    color: #64748b;
    cursor: pointer;
    text-decoration: none;
    padding: 4px 8px;
    border: 1px solid #334155;
    border-radius: 6px;
    font-weight: 400;
    transition: color .15s, border-color .15s;
}
.logout-btn:hover { color: #f87171; border-color: #7f1d1d; }

/* ── MAIL LIST ── */
.container { padding: 12px; max-width: 680px; margin: 0 auto; }
.mail {
    padding: 14px;
    margin-bottom: 8px;
    background: #1e293b;
    border-radius: 12px;
    cursor: pointer;
    transition: background .15s, transform .1s;
    border: 1px solid transparent;
}
.mail:hover  { background: #273548; border-color: #334155; }
.mail:active { transform: scale(.99); }
.mail.unread { background: #1e3a5f; border-color: #2563eb; }
.mail.unread:hover { background: #1e4a7a; }
.mail.unread .subject { color: #93c5fd; }
.subject { font-weight: 600; margin-bottom: 4px; font-size: 14px; }
.from    { font-size: 12px; color: #94a3b8; margin-bottom: 2px; }
.time    { font-size: 11px; color: #64748b; }
.empty   { padding: 40px; text-align: center; color: #475569; }

/* ── LOADING ── */
.loading {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    background: #0b1220;
    color: #94a3b8;
    font-size: 18px;
    font-weight: 500;
    gap: 15px;
    z-index: 99999;
}
.spinner { display: flex; align-items: center; gap: 8px; }
.spinner::before {
    content: '';
    width: 28px; height: 28px;
    border: 3px solid #334155;
    border-top-color: #60a5fa;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── MODAL ── */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
}
.modal-box {
    background: #1e293b;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.25s ease-out;
    overflow: hidden; /* quan trọng: giữ child không tràn */
}
@keyframes slideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0);    }
}
.modal-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    background: #111827;
    border-bottom: 1px solid #334155;
    flex-shrink: 0;
}
.modal-title {
    flex: 1;
    font-weight: 700;
    font-size: 16px;
    color: #f1f5f9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.close {
    font-size: 32px;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    padding: 0 5px;
}
.modal-meta {
    background: #1e293b;
    color: #64748b;
    font-size: 12px;
    padding: 10px 15px;
    border-bottom: 1px solid #0b1220;
    flex-shrink: 0;
}

/* ── MODAL BODY ── (1 rule duy nhất, không duplicate) */
.modal-body {
    flex: 1;           /* chiếm hết chiều cao còn lại */
    min-height: 0;     /* BẮT BUỘC: fix flexbox child không shrink */
    position: relative;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
}

/* ── IFRAME ── */
.mail-frame {
    width: 100%;
    /* KHÔNG dùng height:100% hay min-height:100% — JS set height theo scrollHeight */
    border: none;
    display: block;
    background: #fff;
}

/* ── PLAIN TEXT BODY ── */
.body-text {
    padding: 15px;
    color: #1a202c;
    font-size: 15px;
    line-height: 1.6;
    word-break: break-word;
    white-space: pre-wrap;
    margin: 0;
}

/* ── TOAST ── */
.toast {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(60px);
    background: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 13px;
    z-index: 100000;
    transition: transform .3s ease, opacity .3s ease;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
}
.toast.show  { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.warn  { border-color: #78350f; color: #fbbf24; }
.toast.error { border-color: #7f1d1d; color: #f87171; }

/* ── MAIL CONTENT (thay iframe) ── */
.mail-content {
    padding: 12px;
    font-family: system-ui, sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #1a202c;
    word-break: break-word;
    overflow-wrap: break-word;
}
.mail-content img  { max-width: 100%; height: auto; }
.mail-content a    { color: #2563eb; }
.mail-content pre,
.mail-content code { white-space: pre-wrap; word-break: break-word; }
.mail-content table { max-width: 100%; overflow-x: auto; display: block; }