/* Mail chrome tokens — dark-first; light via html[data-theme="light"].
   Inspired by modern webmail shells (sidebar / dense list / accent CTA),
   not a vendor clone. */
:root,
html[data-theme="dark"],
html[data-theme="system"] {
  color-scheme: dark;
  --gm-bg: #0f1218;
  --gm-bg-elevated: #171b24;
  --gm-surface: #1c2230;
  --gm-ink: #e8ecf4;
  --gm-muted: #9aa3b5;
  --gm-line: #2a3344;
  --gm-accent: #3b82f6;
  --gm-accent-hover: #2563eb;
  --gm-danger: #f07178;
  --gm-success: #7fd99a;
  --gm-unread: #60a5fa;
  --gm-font: "Segoe UI", "Helvetica Neue", sans-serif;
  --gm-radius: 0.5rem;
  --gm-row-pad: 0.85rem;
  --gm-sidebar-w: 15rem;
}

html[data-theme="light"] {
  color-scheme: light;
  --gm-bg: #f3efe6;
  --gm-bg-elevated: #fffdf8;
  --gm-surface: #fffdf8;
  --gm-ink: #1c1914;
  --gm-muted: #5c564c;
  --gm-line: #d4cdc0;
  --gm-accent: #0f5c4c;
  --gm-accent-hover: #0a4538;
  --gm-danger: #8b2e1f;
  --gm-success: #1f6b45;
  --gm-unread: #0f5c4c;
}

html[data-density="compact"] {
  --gm-row-pad: 0.55rem;
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    color-scheme: light;
    --gm-bg: #f3efe6;
    --gm-bg-elevated: #fffdf8;
    --gm-surface: #fffdf8;
    --gm-ink: #1c1914;
    --gm-muted: #5c564c;
    --gm-line: #d4cdc0;
    --gm-accent: #0f5c4c;
    --gm-accent-hover: #0a4538;
    --gm-danger: #8b2e1f;
    --gm-success: #1f6b45;
    --gm-unread: #0f5c4c;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body.gm-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--gm-font);
  color: var(--gm-ink);
  background: var(--gm-bg);
}

.gm-skip {
  position: absolute;
  left: -9999px;
}

.gm-skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 10;
  background: var(--gm-surface);
  padding: 0.5rem 0.75rem;
}

/* App chrome: sidebar + workspace */
.gm-app {
  display: grid;
  grid-template-columns: var(--gm-sidebar-w) 1fr;
  min-height: 100vh;
}

.gm-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem 0.85rem;
  background: var(--gm-bg-elevated);
  border-right: 1px solid var(--gm-line);
}

.gm-compose-cta {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.gm-sidebar-folders {
  border: 0;
}

.gm-sidebar-summary {
  cursor: pointer;
  color: var(--gm-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  list-style: none;
  margin-bottom: 0.5rem;
}

.gm-sidebar-summary::-webkit-details-marker {
  display: none;
}

.gm-folders-list {
  gap: 0.2rem;
}

.gm-folder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  color: var(--gm-muted);
  text-decoration: none;
  border-radius: var(--gm-radius);
}

.gm-folder:hover {
  background: color-mix(in srgb, var(--gm-accent) 10%, transparent);
  color: var(--gm-ink);
}

.gm-folder.is-active {
  color: var(--gm-ink);
  font-weight: 600;
  background: color-mix(in srgb, var(--gm-accent) 16%, transparent);
}

.gm-folder-unread {
  font-size: 0.75rem;
  color: var(--gm-unread);
  font-weight: 600;
}

.gm-workspace {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100vh;
}

.gm-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding: 0.75rem clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--gm-line);
  background: var(--gm-bg-elevated);
}

.gm-brand {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gm-ink);
  text-decoration: none;
}

.gm-nav {
  display: flex;
  gap: 0.85rem;
  flex: 1;
}

.gm-nav-link {
  color: var(--gm-muted);
  text-decoration: none;
  font-size: 0.95rem;
}

.gm-nav-link.is-active {
  color: var(--gm-accent);
  font-weight: 600;
}

.gm-user {
  margin: 0;
  font-size: 0.875rem;
  color: var(--gm-muted);
}

.gm-flash {
  margin: 0;
  padding: 0.65rem clamp(1rem, 2vw, 1.5rem);
  background: color-mix(in srgb, var(--gm-accent) 16%, var(--gm-bg-elevated));
  border-bottom: 1px solid var(--gm-line);
  color: var(--gm-ink);
}

.gm-main {
  flex: 1;
  padding: 0;
  min-height: 0;
  position: relative;
}

/* Split panes */
.gm-split {
  display: grid;
  height: calc(100vh - 3.5rem);
  min-height: 24rem;
}

html[data-layout="split-right"] .gm-split {
  grid-template-columns: minmax(16rem, 22rem) 1fr;
}

html[data-layout="split-bottom"] .gm-split {
  grid-template-rows: minmax(10rem, 40%) 1fr;
}

.gm-pane {
  min-width: 0;
  min-height: 0;
  overflow: auto;
}

.gm-pane-list {
  border-right: 1px solid var(--gm-line);
  background: var(--gm-bg);
}

html[data-layout="split-bottom"] .gm-pane-list {
  border-right: 0;
  border-bottom: 1px solid var(--gm-line);
}

.gm-pane-reader {
  background: var(--gm-bg);
}

.gm-inbox {
  gap: 0.5rem;
  padding: 1rem 1.1rem;
}

.gm-inbox-title,
.gm-reader-title {
  margin: 0;
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  letter-spacing: -0.03em;
}

.gm-inbox-empty,
.gm-reader-empty {
  margin-top: 2rem;
  gap: 0.5rem;
  padding: 1.5rem 1.1rem;
}

.gm-inbox-empty-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.gm-inbox-empty-hint,
.gm-reader-meta,
.gm-msg-preview,
.gm-msg-meta {
  margin: 0;
  color: var(--gm-muted);
  line-height: 1.5;
}

.gm-inbox-list {
  margin-top: 0.5rem;
  gap: 0;
}

.gm-msg-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--gm-line);
}

.gm-msg-link:hover {
  background: color-mix(in srgb, var(--gm-accent) 8%, transparent);
}

.gm-msg-link.is-active {
  background: color-mix(in srgb, var(--gm-accent) 14%, transparent);
}

.gm-msg-link.is-unread .gm-msg-subject {
  font-weight: 700;
  color: var(--gm-ink);
}

.gm-msg-link.is-unread .gm-msg-meta {
  color: var(--gm-unread);
}

.gm-msg-row {
  gap: 0.15rem;
  padding: var(--gm-row-pad) 0.85rem;
}

.gm-msg-subject {
  margin: 0;
  font-weight: 600;
}

.gm-reader {
  gap: 0.55rem;
  padding: 1.1rem 1.35rem 2rem;
  max-width: 48rem;
}

.gm-back {
  color: var(--gm-accent);
  text-decoration: none;
  font-size: 0.9rem;
}

.gm-address-chip {
  display: inline-block;
  margin: 0;
  color: var(--gm-muted);
  font-size: 0.9rem;
}

.gm-reader-body {
  margin: 1rem 0 0;
  white-space: pre-wrap;
  line-height: 1.55;
  border-top: 1px solid var(--gm-line);
  padding-top: 1rem;
}

.gm-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
}

.gm-inline-form {
  display: inline;
  margin: 0;
}

.gm-btn {
  appearance: none;
  border: 1px solid var(--gm-line);
  background: var(--gm-surface);
  color: var(--gm-ink);
  padding: 0.45rem 0.85rem;
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  border-radius: var(--gm-radius);
}

.gm-btn-primary {
  background: var(--gm-accent);
  border-color: var(--gm-accent);
  color: #fff;
}

.gm-btn-primary:hover {
  background: var(--gm-accent-hover);
}

.gm-btn-danger {
  color: var(--gm-danger);
  border-color: color-mix(in srgb, var(--gm-danger) 35%, var(--gm-line));
}

.gm-attach {
  gap: 0.35rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gm-line);
}

.gm-attach-title {
  margin: 0;
  font-weight: 600;
}

.gm-attach-link,
.gm-link {
  color: var(--gm-accent);
}

/* Compose overlay */
.gm-compose-overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 1rem;
  background: color-mix(in srgb, #000 45%, transparent);
}

.gm-composer-panel {
  width: min(36rem, 100%);
  max-height: calc(100vh - 5rem);
  overflow: auto;
  background: var(--gm-bg-elevated);
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  padding: 1rem 1.15rem 1.25rem;
  box-shadow: 0 12px 40px color-mix(in srgb, #000 35%, transparent);
}

.gm-composer,
.gm-search,
.gm-settings {
  gap: 1rem;
  max-width: 42rem;
  padding: 1.25rem clamp(1rem, 2vw, 1.75rem);
}

.gm-composer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.gm-composer-close {
  color: var(--gm-muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.gm-compose-fields,
.gm-search-fields,
.gm-settings-section {
  gap: 0.85rem;
}

.gm-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.gm-field-label,
.gm-settings-label {
  margin: 0;
  font-size: 0.85rem;
  color: var(--gm-muted);
}

.gm-input,
.gm-textarea,
.gm-select {
  font: inherit;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--gm-line);
  background: var(--gm-surface);
  color: var(--gm-ink);
  border-radius: var(--gm-radius);
}

.gm-textarea {
  resize: vertical;
  min-height: 10rem;
}

.gm-error {
  margin: 0;
  color: var(--gm-danger);
}

.gm-search-results {
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--gm-line);
}

.gm-search-count {
  margin: 0;
  font-weight: 600;
}

.gm-check {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--gm-muted);
}

/* Settings */
.gm-settings-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.gm-layout-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.gm-layout-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.85rem;
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  background: var(--gm-surface);
  cursor: pointer;
}

.gm-layout-card.is-selected {
  border-color: var(--gm-accent);
  box-shadow: inset 0 0 0 1px var(--gm-accent);
}

.gm-layout-card-label {
  margin: 0;
  font-size: 0.85rem;
}

.gm-settings-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--gm-line);
}

.gm-settings-stub {
  margin: 0;
  color: var(--gm-muted);
  font-size: 0.9rem;
}

.gm-select {
  min-width: 10rem;
}

/* list-only: reader/list as single column with padding */
html[data-layout="list"] .gm-main > .gm-pane-list,
html[data-layout="list"] .gm-main > .gm-pane-reader,
html[data-layout="list"] .gm-composer,
html[data-layout="list"] .gm-search,
html[data-layout="list"] .gm-settings {
  padding: 1.25rem clamp(1rem, 2vw, 1.75rem);
}

html[data-layout="list"] .gm-compose-overlay {
  position: fixed;
}

.gm-thread {
  gap: 0.75rem;
  padding: 1.1rem 1.35rem 2rem;
  max-width: 48rem;
}

.gm-thread-list {
  gap: 1rem;
  margin-top: 0.75rem;
}

.gm-thread-item {
  border: 1px solid var(--gm-line);
  border-radius: var(--gm-radius);
  padding: 0.85rem 1rem;
  background: var(--gm-surface);
}

.gm-thread-item.is-active {
  border-color: var(--gm-accent);
  box-shadow: inset 0 0 0 1px var(--gm-accent);
}

.gm-thread-item-head {
  gap: 0.25rem;
}

.gm-thread-item-subject {
  margin: 0.35rem 0 0;
  font-weight: 600;
}

.gm-btn-thread {
  border-color: color-mix(in srgb, var(--gm-accent) 35%, var(--gm-line));
}

.gm-lab-banner {
  margin: 0;
  padding: 0.55rem clamp(1rem, 2vw, 1.5rem);
  background: color-mix(in srgb, var(--gm-danger) 18%, var(--gm-bg-elevated));
  border-bottom: 1px solid color-mix(in srgb, var(--gm-danger) 35%, var(--gm-line));
  color: var(--gm-ink);
  font-size: 0.85rem;
}

.gm-login {
  gap: 1rem;
  max-width: 22rem;
  padding: 2rem clamp(1rem, 2vw, 1.75rem);
}

.gm-login-form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.gm-live-badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--gm-line);
  color: var(--gm-muted);
}

.gm-live-badge[data-state="ok"] {
  color: var(--gm-success);
  border-color: color-mix(in srgb, var(--gm-success) 40%, var(--gm-line));
}

.gm-live-badge[data-state="err"] {
  color: var(--gm-danger);
  border-color: color-mix(in srgb, var(--gm-danger) 40%, var(--gm-line));
}

.gm-live-root {
  display: none;
}

/* Mobile: collapse sidebar */
@media (max-width: 800px) {
  .gm-app {
    grid-template-columns: 1fr;
  }

  .gm-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--gm-line);
  }

  .gm-sidebar-folders:not([open]) .gm-folders {
    display: none;
  }

  html[data-layout="split-right"] .gm-split,
  html[data-layout="split-bottom"] .gm-split {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(12rem, 40%) 1fr;
    height: auto;
    min-height: calc(100vh - 8rem);
  }

  .gm-pane-list {
    border-right: 0;
    border-bottom: 1px solid var(--gm-line);
  }

  .gm-layout-cards {
    grid-template-columns: 1fr;
  }

  .gm-compose-overlay {
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
  }

  .gm-composer-panel {
    width: 100%;
    max-height: none;
    border-radius: 0;
  }
}