:root { --bg: #f7f8fb; --panel: #fff; --muted: #666 }
* { box-sizing: border-box }
body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin: 0; color: #222; background: var(--bg) }
.topbar { height: 56px; display:flex; align-items:center; justify-content:space-between; padding: 0 16px; background: #1f2937; color: #fff }
.brand { font-weight:700 }
.layout { display: grid; grid-template-columns: 260px 1fr 420px; gap: 12px; padding: 16px }
.panel { background: var(--panel); padding: 12px; border-radius: 8px; box-shadow: 0 1px 2px rgba(0,0,0,0.04) }
.layout.two-col { grid-template-columns: 320px 1fr; gap: 16px; padding: 16px }
.accounts-col { display: flex; flex-direction: column; }
.accounts-panel { display:flex; flex-direction:column }
.mail-col { display:flex; flex-direction:column; gap:12px }
.list { list-style:none; padding:0; margin:0 }
.list li { padding:8px 10px; border-bottom:1px solid #f0f0f0 }
.list li .acct { display:flex; justify-content:space-between; align-items:center }
.list li .acct .title { font-weight:600 }
.acct { cursor: pointer; display:flex; justify-content:space-between; align-items:center }
.list li .folders { margin-top:6px; padding-left:12px }
.list li .folders li { padding:6px 0; border-bottom: none }
.list li a { color: #0366d6; text-decoration:none }
input[type=email], input[type=password] { width:100%; padding:8px; margin:6px 0 }
button { padding:8px 10px }
.viewer pre, #message-content { max-height: 60vh; overflow:auto; background:#0b1220; color:#e6eef6; padding:12px }
.main { display:flex; flex-direction:column; gap:12px }
.muted { color: var(--muted); font-size: 0.9rem }
.add-account { display:flex; gap:8px; margin-bottom:8px }
.add-account input { flex:1 }
.acct-actions button { margin-left:6px }
.login-panel { margin-top: 12px }
.login-panel input { width:100%; padding:8px; margin-top:6px }
.login-panel button { padding:8px 10px }

/* make layout fill viewport and allow independent column scrolling */
html, body { height: 100%; }
.layout { height: calc(100vh - 56px); }
.accounts-col { overflow: auto; }
.mail-col { overflow: auto; }
.accounts-panel { padding-bottom: 16px; }
.accounts-panel .list { max-height: none; }

/* message list states */
.message-item.unread { background: linear-gradient(90deg, rgba(2,6,23,0.02), rgba(0,0,0,0)); }
.message-item.unread .msg-subject { font-weight: 700 }
.message-item.recent { border-left: 4px solid #10b981; padding-left:8px }
.message-item.flagged { border-left: 4px solid #f59e0b; padding-left:8px }
.message-item.answered { background: linear-gradient(90deg, rgba(14,165,233,0.03), rgba(0,0,0,0)); }
.message-item.deleted { opacity: 0.6; text-decoration: line-through }
.msg-title { display:flex; justify-content:space-between; gap:12px; align-items:center }
.msg-subject { flex:1; min-width:0 }
.msg-time { color: var(--muted); font-size: 0.9rem; margin-left:8px; white-space:nowrap; margin-left:12px }

/* Message list: each message can expand to show its content (two-level collapsible) */
.msg-top { display:flex; justify-content:space-between; align-items:center; cursor:pointer }
.msg-title { font-weight:600 }
.message-body { display:none; padding:12px; margin-top:8px; background:#fbfcfe; border-radius:6px; border-left:3px solid #e6edf3; white-space:pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace; color:#111; max-height:none; overflow:visible }
.list li.expanded > .message-body { display:block; word-wrap: break-word; }
.list li.expanded > .msg-top { background:#f6f8fa }

.message-meta { font-size:0.85rem; color:var(--muted); margin-bottom:8px }
/* iframe isolation: keep iframe responsive and avoid horizontal overflow */
.message-body iframe { width:100%; max-width:100%; display:block; box-sizing:border-box; }
.message-body pre { white-space: pre-wrap; word-break: break-word; max-height:none; overflow:visible }
.message-body { overflow: visible }