/* Direção: ferramenta de testes, discreta e funcional.
   Satoshi; superfícies neutras; teal para a ação principal. */
:root {
    color-scheme: light;
    --bg: #f7f6f2;
    --surface: #ffffff;
    --offset: #eeece6;
    --text: #28251d;
    --muted: #625f58;
    --accent: #01696f;
    --on-accent: #ffffff;
    --error: #9b233e;
    --border: oklch(from var(--text) l c h / .15);
    --font-body: 'Satoshi', sans-serif;
    --font-display: 'Satoshi', sans-serif;
    --text-sm: clamp(.875rem, .85rem + .15vw, .95rem);
    --text-base: clamp(1rem, .97rem + .15vw, 1.0625rem);
    --text-lg: clamp(1.125rem, 1rem + .4vw, 1.375rem);
    --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    --s1: .25rem; --s2: .5rem; --s3: .75rem;
    --s4: 1rem; --s6: 1.5rem; --s8: 2rem;
    --s12: 3rem;
    --radius: .75rem;
}
[data-theme="dark"] {
    color-scheme: dark;
    --bg: #171614;
    --surface: #201f1c;
    --offset: #2b2925;
    --text: #eeece5;
    --muted: #b6b2a8;
    --accent: #83c5c7;
    --on-accent: #112f31;
    --error: #ffa1b1;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    min-height: 100dvh;
    background: var(--bg); color: var(--text);
    font: var(--text-base)/1.6 var(--font-body);
    -webkit-font-smoothing: antialiased;
}
input, button { font: inherit; color: inherit; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { line-height: 1.25; overflow-wrap: anywhere; }
h1 { font: 700 var(--text-xl)/1.25 var(--font-display); }
h2, h3 { font-size: var(--text-lg); }
button, .button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: var(--s2) var(--s4);
    border: 1px solid var(--border); border-radius: .5rem;
    background: var(--surface); text-decoration: none;
    cursor: pointer; font-size: var(--text-sm);
    transition: background 180ms, opacity 180ms;
}
button:hover, .button:hover { background: var(--offset); }
button:active, .button:active { opacity: .75; }
.primary { background: var(--accent); color: var(--on-accent); border: 0; }
.primary:hover { background: color-mix(in oklch, var(--accent) 85%, var(--text)); }
.topbar, main, footer { width: min(960px, 100%); margin-inline: auto; }
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s4); padding: var(--s6);
    border-bottom: 1px solid var(--border);
}
.brand {
    display: flex; align-items: center; gap: var(--s3);
    font-weight: 700; text-decoration: none;
}
.brand svg { flex-shrink: 0; }
main { padding: var(--s8) var(--s6); }
.intro { margin-bottom: var(--s8); }
.intro h1 { margin-block: var(--s2) var(--s4); }
.eyebrow, .small, time { font-size: var(--text-sm); }
.eyebrow { letter-spacing: .08em; color: var(--muted); }
.muted { color: var(--muted); }
.panel {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: var(--s6);
    margin-bottom: var(--s6);
}
.panel > h2 { margin-bottom: var(--s6); }
label { display: block; margin-bottom: var(--s2); font-weight: 500; }
.controls { display: flex; gap: var(--s3); }
.address {
    display: flex; align-items: center; flex: 1; min-width: 0;
    border: 1px solid var(--border); border-radius: .5rem;
    background: var(--bg);
}
.address input {
    width: 100%; min-width: 0; border: 0; background: transparent;
    padding: var(--s3); min-height: 48px;
}
.address span { padding-right: var(--s3); white-space: nowrap; }
#ajuda-caixa { margin-top: var(--s2); }
.notice {
    background: var(--offset); padding: var(--s4);
    border-radius: .5rem; margin-top: var(--s6);
    font-size: var(--text-sm);
}
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s4); margin-bottom: var(--s4);
}
.messages { list-style: none; margin-top: var(--s4); }
.messages li { border-top: 1px solid var(--border); padding-block: var(--s6); }
.message-head { display: flex; gap: var(--s4); justify-content: space-between; }
.message-head h3 { font-size: var(--text-base); }
time { flex-shrink: 0; color: var(--muted); }
.sender { overflow-wrap: anywhere; margin-top: var(--s2); }
.empty { padding-block: var(--s12); }
.empty h3 { margin-bottom: var(--s2); }
.footnote { border-top: 1px solid var(--border); padding-top: var(--s4); }
.error { color: var(--error); margin-bottom: var(--s6); }
footer { padding: var(--s6); color: var(--muted); font-size: var(--text-sm); }
.skip { position: absolute; left: -10000px; }
.skip:focus { position: static; display: block; padding: var(--s4); }
@media (max-width: 600px) {
    .topbar, main, footer { padding-inline: var(--s4); }
    .panel { padding: var(--s4); }
    .controls { flex-direction: column; }
    .address span { font-size: var(--text-sm); }
    .message-head { flex-direction: column; gap: var(--s2); }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}

/* ===== KOKUMI INBOX - LAYOUT COMPACTO ===== */

.inbox-main {
    width: min(1500px, 96%);
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px 0;
}

.compact-panel {
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1px solid var(--border, #ddd);
    border-radius: 14px;
    background: var(--surface, #fff);
}

.compact-form label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.compact-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.compact-controls .address {
    display: flex;
    flex: 1;
    min-width: 260px;
    align-items: center;
}

.compact-controls .address input {
    flex: 1;
    min-width: 0;
}

.mail-grid {
    display: grid;
    grid-template-columns: minmax(300px, 35%) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.mail-sidebar,
.mail-reader {
    background: var(--surface, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 14px;
    min-height: 520px;
    overflow: hidden;
}

.mail-sidebar-head {
    padding: 18px;
    border-bottom: 1px solid var(--border, #ddd);
}

.mail-sidebar-head h2 {
    font-size: 18px;
    margin: 5px 0;
    overflow-wrap: anywhere;
}

.inbox-list {
    padding: 0;
    margin: 0;
    list-style: none;
    max-height: 650px;
    overflow-y: auto;
}

.inbox-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border, #ddd);
}

.inbox-item.selected {
    background: rgba(0, 130, 150, 0.08);
    border-left: 3px solid #008296;
}

.inbox-item-link {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    color: inherit;
    text-decoration: none;
}

.inbox-item-link strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.inbox-sender,
.inbox-item time {
    font-size: 12px;
    opacity: 0.7;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.delete-button {
    padding: 8px 10px;
    border: 1px solid #c94a4a;
    border-radius: 8px;
    background: transparent;
    color: #c94a4a;
    cursor: pointer;
    font-size: 12px;
}

.delete-button:hover {
    background: #c94a4a;
    color: white;
}

.mail-reader {
    padding: 24px;
}

.reader-header {
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border, #ddd);
}

.reader-header h2 {
    font-size: 22px;
    margin: 0 0 16px;
    overflow-wrap: anywhere;
}

.reader-header p {
    margin: 6px 0;
    font-size: 14px;
}

.reader-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.65;
    font-size: 15px;
    min-height: 350px;
}

.reader-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 450px;
    text-align: center;
}

.welcome-empty {
    text-align: center;
    padding: 65px 20px;
}

@media (max-width: 850px) {
    .mail-grid {
        grid-template-columns: 1fr;
    }

    .mail-sidebar,
    .mail-reader {
        min-height: auto;
    }

    .mail-reader {
        padding: 18px;
    }

    .reader-empty {
        min-height: 180px;
    }

    .compact-controls {
        align-items: stretch;
    }
}

/* ===== KOKUMI - VISUALIZADOR HTML ===== */

.reader-body {
    width: 100%;
    min-width: 0;
    min-height: 500px;
    padding: 0;
}

.email-html-frame {
    display: block;
    width: 100%;
    height: 650px;
    min-height: 500px;
    border: none;
    background: #ffffff;
    border-radius: 8px;
}

.email-text-body {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    line-height: 1.6;
    padding: 16px;
}

.mail-reader {
    min-width: 0;
    overflow: hidden;
}

@media (max-width: 850px) {
    .email-html-frame {
        height: 550px;
        min-height: 400px;
    }
}