/* Layout for the three-pane mail client. theme.css holds design tokens and
   generic components; this file is purely structural. */

.app-shell { height: 100vh; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: center; gap: 1rem;
  padding: 0 1rem; height: 52px; flex: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.topbar .brand { display: flex; align-items: center; gap: 0.5em; font-family: var(--font-serif); font-size: 1.1em; }
.topbar .brand .mark {
  width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 0.9em;
}
.topbar .spacer { flex: 1; }
.topbar .user-menu { display: flex; align-items: center; gap: 0.75em; font-size: 0.9em; color: var(--text-muted); }
.topbar .user-menu strong { color: var(--text); font-weight: 500; }

.app-body { flex: 1; display: flex; min-height: 0; }

/* Rail */
.rail {
  width: 220px; flex: none;
  background: var(--rail-bg);
  border-right: 1px solid var(--border);
  padding: 1rem 0.75rem;
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.compose-btn { width: 100%; justify-content: center; margin-bottom: 1.2rem; }
.folder-list { list-style: none; margin: 0; padding: 0; }
.folder-list li { margin-bottom: 2px; }
.folder-list button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5em;
  padding: 0.5em 0.7em; border-radius: var(--radius);
  border: none; background: transparent; text-align: left; cursor: pointer;
  color: var(--text-muted); font-weight: 500;
}
.folder-list button:hover { background: var(--bg-sunken); color: var(--text); }
.folder-list button.active { background: var(--accent-soft); color: var(--accent); }
.folder-list .count { font-size: 0.8em; color: var(--text-faint); }
.folder-list button.active .count { color: var(--accent); }
.rail-bottom { margin-top: auto; padding-top: 1rem; }
.rail-bottom .btn { width: 100%; justify-content: center; }

/* Message list column: a fixed-width flex column holding the search/sort
   toolbar (flex: none, stays put) above the scrolling message list itself
   (flex: 1) -- the toolbar used to not exist, so message-list was both the
   flex item AND the scroll container; now that's split across two elements. */
.message-list-col {
  width: 340px; flex: none;
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 0;
}
.list-toolbar {
  display: flex; gap: 0.5em; padding: 0.6em; flex: none;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.list-toolbar input[type="search"] {
  flex: 1; min-width: 0; padding: 0.4em 0.6em;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg); color: inherit; font-size: 0.9em;
}
.list-toolbar select {
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--bg); color: inherit; font-size: 0.85em; padding: 0.3em 0.2em;
  max-width: 8.5em;
}
.message-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  background: var(--bg);
}
.list-group-header {
  width: 100%; display: flex; align-items: center; gap: 0.4em;
  padding: 0.5em 1em; border: none; background: var(--bg-sunken);
  color: var(--text-muted); font-size: 0.78em; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer; position: sticky; top: 0; z-index: 1;
}
.list-group-header:hover { color: var(--text); }
.list-group-header .chev { display: inline-block; transition: transform 120ms ease; font-size: 0.9em; }
.list-group-header .chev.collapsed { transform: rotate(-90deg); }
.list-group-header .count { font-weight: 400; text-transform: none; letter-spacing: normal; }
.message-row {
  display: block; width: 100%; text-align: left;
  padding: 0.75em 1em; border: none; border-bottom: 1px solid var(--border);
  border-left: 3px solid transparent;
  background: transparent; cursor: pointer; color: inherit;
  transition: background 120ms ease;
}
.message-row:hover { background: var(--bg-sunken); }
.message-row.selected { background: var(--accent-soft); }
.message-row.unread { border-left-color: var(--accent); }
.message-row .row-top { display: flex; justify-content: space-between; gap: 0.5em; margin-bottom: 0.2em; }
.message-row .from { font-weight: 400; font-size: 0.92em; color: var(--text-muted); }
.message-row.unread .from { font-weight: 600; color: var(--text); }
.message-row .when { font-size: 0.78em; color: var(--text-faint); flex: none; }
.message-row .subject { font-family: var(--font-serif); font-size: 0.98em; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.message-row.unread .subject { font-weight: 600; }
.empty-state { padding: 3em 1.5em; text-align: center; color: var(--text-faint); }

/* Reading pane */
.reading-pane { flex: 1; overflow-y: auto; background: var(--bg-elevated); min-width: 0; }
.reading-pane .empty-state { padding-top: 6em; }
.msg-header { padding: 1.5em 2em 1em; border-bottom: 1px solid var(--border); }
.msg-header h2 { font-size: 1.4em; margin-bottom: 0.4em; }
.msg-header .meta { font-size: 0.88em; color: var(--text-muted); display: flex; flex-direction: column; gap: 0.2em; }
.msg-header .meta strong { color: var(--text); font-weight: 500; }
.msg-header .actions { margin-top: 1em; display: flex; gap: 0.5em; }
.msg-body { padding: 1.5em 2em; white-space: pre-wrap; line-height: 1.6; }
.msg-html-frame { width: 100%; min-height: 120px; border: none; display: block; }
.msg-attachments { padding: 0 2em 1.5em; display: flex; flex-wrap: wrap; gap: 0.5em; }
.attachment-chip {
  display: inline-flex; align-items: center; gap: 0.4em;
  padding: 0.4em 0.8em; border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: 0.85em; background: var(--bg-sunken);
}

/* Compose panel — Gmail-style bottom-right slide-up, user-resizable by
   dragging the top-left corner (resize:both anchored at bottom-right via
   fixed right/bottom, so growing the box only ever moves the top-left). */
.compose-panel {
  position: fixed; right: 1.5rem; bottom: 0;
  width: 680px; height: 680px;
  min-width: 340px; min-height: 320px;
  max-width: calc(100vw - 3rem); max-height: 90vh;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -4px 24px var(--shadow-strong);
  display: flex; flex-direction: column;
  overflow: hidden;
  resize: both;
  transform: translateY(110%);
  transition: transform 200ms ease-out;
  z-index: 50;
}
.compose-panel.open { transform: translateY(0); }
/* Minimized: collapses to a small clickable bar instead of fully closing --
   !important is needed because a manual drag on the resize handle sets an
   inline width/height on this same element, which otherwise outranks any
   class-based rule regardless of specificity. */
.compose-panel.minimized {
  width: 280px !important; height: 44px !important;
  min-height: 44px; max-height: 44px; resize: none;
}
.compose-panel.minimized .compose-body,
.compose-panel.minimized .compose-foot { display: none; }
/* Maximized: fills nearly the whole viewport, centered rather than
   anchored bottom-right. Also !important for the same inline-style reason
   as .minimized above. */
.compose-panel.maximized {
  width: min(1100px, calc(100vw - 3rem)) !important;
  height: calc(100vh - 3rem) !important;
  right: 1.5rem; bottom: 1.5rem;
  max-height: calc(100vh - 3rem);
  border-radius: var(--radius-lg);
  border-bottom: 1px solid var(--border);
  resize: none;
}
.compose-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7em 1em; background: var(--bg-sunken);
  flex: none;
  font-weight: 500;
  cursor: pointer;
}
.compose-head .btn-ghost { padding: 0.2em 0.5em; }
.compose-body { padding: 0.75em 1em; overflow-y: auto; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.compose-body .field { margin-bottom: 0.6em; }
.compose-body .field-row { display: flex; border-bottom: 1px solid var(--border); flex: none; }
.compose-body .field-row label { width: 3.2em; flex: none; font-size: 0.85em; color: var(--text-muted); padding: 0.55em 0; }
.compose-body .field-row input { flex: 1; border: none; padding: 0.55em 0; background: transparent; }
.compose-body .field-row input:focus { outline: none; box-shadow: none; }

.compose-toolbar { display: flex; gap: 0.2em; padding: 0.4em 0; flex: none; border-bottom: 1px solid var(--border); }
.compose-toolbar button {
  border: none; background: transparent; cursor: pointer; border-radius: var(--radius);
  width: 1.9em; height: 1.9em; display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); font-size: 0.95em;
}
.compose-toolbar button:hover { background: var(--bg-sunken); color: var(--text); }
.compose-toolbar button.active { background: var(--accent-soft); color: var(--accent); }
.compose-toolbar .sep { width: 1px; background: var(--border); margin: 0.3em 0.3em; }

#c-body-editable {
  flex: 1; min-height: 100px; overflow-y: auto;
  padding: 0.75em 0.1em; outline: none; line-height: 1.5;
}
#c-body-editable img { max-width: 100%; height: auto; border-radius: 4px; margin: 0.3em 0; }
#c-body-editable:empty::before {
  content: attr(data-placeholder); color: var(--text-faint); pointer-events: none;
}
.compose-foot { display: flex; align-items: center; gap: 0.6em; padding: 0.6em 1em; border-top: 1px solid var(--border); }
.compose-foot .spacer { flex: 1; }
.attach-list { display: flex; flex-wrap: wrap; gap: 0.4em; margin: 0.4em 0; }

/* Address book modal */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,23,28,0.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 60;
}
.modal-backdrop[hidden] { display: none; }
.modal {
  width: 100%; max-width: 32rem; max-height: 80vh;
  display: flex; flex-direction: column;
  padding: 1.5rem;
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1em; }
.contact-list { overflow-y: auto; flex: 1; }
.contact-row { display: flex; justify-content: space-between; align-items: center; padding: 0.6em 0; border-bottom: 1px solid var(--border); }
.contact-row .name { font-weight: 500; }
.contact-row .email { color: var(--text-muted); font-size: 0.9em; }

/* Cross-fade when switching folders */
.fade-swap { animation: fadeSwap 150ms ease; }
@keyframes fadeSwap { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 900px) {
  .rail { position: fixed; left: 0; top: 52px; bottom: 0; z-index: 40; transform: translateX(-100%); transition: transform 180ms ease; }
  .rail.open { transform: translateX(0); box-shadow: 4px 0 16px var(--shadow-strong); }
  .message-list-col { width: 100%; }
  .reading-pane { display: none; }
  .app-body.reading .message-list-col { display: none; }
  .app-body.reading .reading-pane { display: block; }
  .compose-panel { right: 0.75rem; width: calc(100vw - 1.5rem); }
}