* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; font-family: -apple-system, "Segoe UI", "Hiragino Sans", sans-serif; font-size: 14px; color: #222; }
button { cursor: pointer; border: none; background: none; font: inherit; }
a { color: inherit; text-decoration: none; }

#app { display: grid; height: 100dvh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }

#sidebar { background: #f3f3f3; padding: 12px; overflow-y: auto; }
#sidebar .compose { width: 100%; padding: 10px; background: #0078d4; color: #fff; border-radius: 4px; margin-bottom: 12px; font-weight: 600; }
#sidebar nav { display: flex; flex-direction: column; gap: 2px; }
#sidebar .nav-item { padding: 10px 12px; border-radius: 4px; min-height: 44px; display: flex; align-items: center; }
#sidebar .nav-item:hover { background: #e5e5e5; }
#sidebar .nav-item.active { background: #cce4f6; color: #0078d4; font-weight: 600; }

#list-pane { background: #fafafa; border-right: 1px solid #ddd; overflow-y: auto; }
#list-header { padding: 8px 12px; border-bottom: 1px solid #ddd; display: flex; align-items: center; gap: 8px; }
#mail-list { list-style: none; }
#mail-list li { padding: 10px 12px; border-bottom: 1px solid #eee; display: flex; gap: 8px; cursor: pointer; min-height: 56px; }
#mail-list li:hover { background: #f0f0f0; }
#mail-list li.unread .subject { font-weight: 700; }
#mail-list .from { flex: 0 0 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mail-list .subject { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mail-list .date { flex: 0 0 80px; color: #777; font-size: 12px; }

#detail-pane { padding: 16px; overflow-y: auto; }
#detail-content .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
#detail-content .actions button { padding: 8px 14px; border: 1px solid #ddd; border-radius: 4px; min-height: 44px; }
#detail-content .meta { color: #555; font-size: 12px; margin-bottom: 12px; }
#detail-content .body { white-space: pre-wrap; line-height: 1.7; }
#detail-content .attachments { margin-top: 16px; }
#detail-content .attachment { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid #ddd; border-radius: 4px; margin: 4px 4px 4px 0; }
#detail-content .summary-box { margin-top: 16px; padding: 12px; background: #fffbe6; border-left: 4px solid #ffc107; }