/* ============================================================
   Dystopia Mail — workspace: sidebar, list, reader, compose
   ============================================================ */

.mail-body { height: 100vh; height: 100dvh; overflow: hidden; }
.mail-app { height: 100%; }

.workspace { display: flex; flex-direction: column; height: 100%; }

/* ---------- topbar ---------- */

.ws-topbar {
  position: relative; z-index: 50; flex: none;
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--topbar-h); padding-inline: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-1); background: var(--bg-1);
}
.ws-menu-btn { display: none; }

.ws-search { position: relative; flex: 1; max-width: 32rem; }
.ws-search-icon {
  position: absolute; left: 0.65rem; top: 50%; transform: translateY(-50%);
  width: 0.9rem; height: 0.9rem; fill: none; stroke: var(--text-3);
  stroke-width: 1.8; stroke-linecap: round; pointer-events: none;
}
.ws-search-input {
  width: 100%; font: inherit; font-size: var(--fs-sm); color: var(--text-1);
  background: var(--bg-2); border: 1px solid transparent; border-radius: var(--r-md);
  padding: 0.45rem 0.8rem 0.45rem 2rem;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.ws-search-input::placeholder { color: var(--text-4); }
.ws-search-input:focus { outline: none; background: var(--bg-2); border-color: var(--accent); }

.btn-compose { margin-left: auto; }
.avatar { margin-left: var(--sp-2); }

/* ---------- main grid ---------- */

.ws-main { display: flex; flex: 1; min-height: 0; }

/* ---------- sidebar ---------- */

.ws-sidebar {
  flex: none; width: var(--sidebar-w);
  display: flex; flex-direction: column;
  background: var(--bg-1); border-right: 1px solid var(--line-1);
  padding: var(--sp-3) var(--sp-3);
  overflow-y: auto;
}
.folders { display: flex; flex-direction: column; gap: 1px; }
.folder {
  display: flex; align-items: center; gap: 0.65rem;
  width: 100%; text-align: left; font: inherit; font-size: var(--fs-md);
  color: var(--text-2); background: none; border: 0; border-radius: var(--r-md);
  padding: 0.45rem 0.65rem; cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.folder svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.folder:hover { background: var(--bg-3); color: var(--text-1); }
.folder[aria-current="true"] { background: var(--bg-3); color: var(--text-1); box-shadow: inset 2px 0 0 var(--accent); }
.folder-count { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-4); }
.folder[aria-current="true"] .folder-count { color: var(--text-2); }

.sidebar-foot { margin-top: auto; padding-top: var(--sp-4); }
.quota-bar { height: 3px; background: var(--bg-4); overflow: hidden; }
.quota-fill { display: block; width: 18%; height: 100%; background: var(--text-4); }
.quota-note { color: var(--text-4); font-size: var(--fs-xs); margin: var(--sp-2) 0 0; }

.ws-scrim { position: fixed; inset: 0; z-index: 45; background: rgba(5, 6, 8, 0.6); border: 0; padding: 0; }

/* ---------- list ---------- */

.ws-list {
  flex: none; width: var(--list-w);
  display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid var(--line-1); background: var(--bg-0);
}
.list-head {
  flex: none; display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line-1);
}
.list-title { font-size: var(--fs-md); font-weight: 650; margin: 0; }
.list-tools { display: flex; gap: 0.2rem; }

.msg-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }

.msg-row {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto;
  gap: 0.05rem 0.6rem; align-items: baseline;
  width: 100%; text-align: left; font: inherit; border: 0; background: none;
  border-bottom: 1px solid var(--line-1);
  padding: 0.6rem var(--sp-4) 0.65rem;
  cursor: pointer; color: inherit;
  transition: background var(--t-fast) var(--ease-out);
}
.msg-row:hover { background: var(--bg-2); }
.msg-row.is-selected { background: var(--bg-3); box-shadow: inset 2px 0 0 var(--accent); }
.msg-row .unread-dot { grid-row: 1 / span 3; grid-column: 1; align-self: center; width: 5px; height: 5px; border-radius: var(--r-full); background: var(--accent); opacity: 0; transition: opacity var(--t-fast); }
.msg-row.is-unread .unread-dot { opacity: 1; }
.msg-row.is-unread .msg-from, .msg-row.is-unread .msg-subject { color: var(--text-1); font-weight: 650; }

.msg-from { grid-column: 2; grid-row: 1; font-size: var(--fs-sm); color: var(--text-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-subject { grid-column: 2; grid-row: 2; font-size: var(--fs-sm); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-preview { grid-column: 2; grid-row: 3; font-size: var(--fs-xs); color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.msg-meta { grid-column: 3; grid-row: 1 / span 3; align-self: center; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.msg-time { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-4); white-space: nowrap; }
.msg-meta-icons { display: flex; align-items: center; gap: 0.3rem; }
.msg-meta svg { width: 0.8rem; height: 0.8rem; }

.star-btn {
  border: 0; background: none; padding: 0.15rem; cursor: pointer; color: var(--text-4);
  border-radius: var(--r-sm); display: inline-flex;
  transition: color var(--t-fast);
}
.star-btn:hover { color: var(--text-2); }
.star-btn.is-starred { color: var(--accent); }
.star-btn svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.star-btn.is-starred svg { fill: currentColor; }
.attach-flag { color: var(--text-4); }

.list-empty { padding: var(--sp-7) var(--sp-5); text-align: center; color: var(--text-4); }
.list-empty strong { display: block; color: var(--text-2); margin-bottom: var(--sp-1); }
.list-foot { flex: none; padding: var(--sp-3); text-align: center; border-top: 1px solid var(--line-1); }
.list-foot[hidden] { display: none; }

/* skeleton loading */
.skeleton { padding: 0.65rem var(--sp-4); border-bottom: 1px solid var(--line-1); }
.skeleton span { display: block; height: 0.55rem; border-radius: var(--r-sm); background: var(--bg-3); animation: pulse 1.6s ease-in-out infinite; }
.skeleton span + span { margin-top: 0.45rem; width: 65%; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ---------- reader ---------- */

.ws-reader { flex: 1; min-width: 0; overflow-y: auto; background: var(--bg-0); }

.reader-empty {
  height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-2); color: var(--text-4); text-align: center; padding: var(--sp-6);
}
.reader-empty svg { width: 2.5rem; height: 2.5rem; fill: none; stroke: var(--line-3); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--sp-2); }
.reader-empty p { margin: 0; font-size: var(--fs-md); }

.reader { max-width: 44rem; margin: 0 auto; padding: var(--sp-5) var(--sp-6) var(--sp-8); }
.reader-toolbar { display: flex; gap: 0.2rem; justify-content: flex-end; margin-bottom: var(--sp-4); }
.reader-subject { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 550; margin-bottom: var(--sp-4); }
.reader-head {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-top: 1px solid var(--line-1); border-bottom: 1px solid var(--line-1);
}
.reader-avatar {
  flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-3); border: 1px solid var(--line-3);
  color: var(--text-2); font-weight: 600; font-size: var(--fs-sm);
}
.reader-who { min-width: 0; flex: 1; }
.reader-from { font-weight: 650; font-size: var(--fs-md); }
.reader-to { color: var(--text-3); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reader-date { flex: none; color: var(--text-3); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }

.reader-body { padding-top: var(--sp-5); color: var(--text-1); line-height: 1.7; white-space: pre-wrap; overflow-wrap: break-word; }
.reader-attachments { margin-top: var(--sp-5); border-top: 1px solid var(--line-1); padding-top: var(--sp-4); }
.reader-attachments h3 { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-3); }
.attach-chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--bg-1); border: 1px solid var(--line-2); border-radius: var(--r-md);
  padding: 0.45rem 0.7rem; font-size: var(--fs-sm); color: var(--text-2); margin: 0 0.5rem 0.5rem 0;
}
.attach-chip svg { width: 0.85rem; height: 0.85rem; fill: none; stroke: currentColor; stroke-width: 1.8; }
.attach-size { color: var(--text-4); font-size: var(--fs-xs); }

/* ---------- compose dialog ---------- */

#compose-dialog { width: min(44rem, calc(100vw - 2rem)); }
.compose { display: flex; flex-direction: column; max-height: min(80vh, 42rem); }
.compose-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--line-1);
}
.compose-title { font-size: var(--fs-md); margin: 0; }
.compose-row { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-5); border-bottom: 1px solid var(--line-1); }
.compose-row.is-hidden { display: none; }
.compose-label { flex: none; width: 4rem; font-size: var(--fs-sm); color: var(--text-3); }
.compose-input {
  flex: 1; min-width: 0; font: inherit; font-size: var(--fs-md); color: var(--text-1);
  background: none; border: 0; padding: 0.65rem 0;
}
.compose-input:focus { outline: none; }
.compose-row:focus-within { box-shadow: inset 0 -1px 0 var(--accent); }
.compose-extra { border: 0; background: none; color: var(--accent); font: inherit; font-size: var(--fs-sm); cursor: pointer; padding: 0.5rem 0; }
.compose-extra:hover { color: var(--accent-hover); }
.compose-body-wrap { padding: 0 var(--sp-5); min-height: 11rem; flex: 1; }
.compose-body {
  width: 100%; height: 100%; min-height: 11rem; resize: none;
  font: inherit; font-size: var(--fs-md); line-height: 1.65; color: var(--text-1);
  background: none; border: 0; padding: var(--sp-3) 0;
}
.compose-body:focus { outline: none; }
.compose-foot {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--line-1);
}
.compose-flex { flex: 1; }
.attach-btn { cursor: pointer; }
.attach-list { font-size: var(--fs-xs); color: var(--text-4); }

/* ---------- responsive ---------- */

@media (max-width: 64rem) {
  :root { --list-w: 18.5rem; }
}
@media (max-width: 48rem) {
  .ws-menu-btn { display: inline-flex; }
  .ws-sidebar {
    position: fixed; z-index: 46; top: var(--topbar-h); bottom: 0; left: 0;
    transform: translateX(-100%); transition: transform var(--t-med) var(--ease-out);
    box-shadow: var(--shadow-2); width: 15rem;
  }
  .ws-sidebar.is-open { transform: none; }
  .ws-main { position: relative; }
  .ws-reader { display: none; }
  .workspace.show-reader .ws-reader { display: block; position: absolute; inset: 0; z-index: 44; background: var(--bg-0); }
  .workspace.show-reader .ws-list { display: none; }
  .btn-compose span { display: none; }
  .btn-compose { padding-inline: 0.55rem; }
  .demo-chip { display: none; }
}