/*
 * Codor Mail workbench
 *
 * This layer intentionally loads after the legacy stylesheet.  It provides a
 * dense, mail-first layout while retaining the established JS hooks and the
 * Codor Brain accent.  The structural gmail-* classes are owned by app.js.
 */

:root {
  --gm-canvas: #f6f8fc;
  --gm-surface: #ffffff;
  --gm-surface-subtle: #f1f3f4;
  --gm-surface-hover: #f5f7fb;
  --gm-surface-selected: #dbe8ff;
  --gm-surface-unread: #f2f6fc;
  --gm-border: #e0e3e7;
  --gm-text: #202124;
  --gm-muted: #5f6368;
  --gm-blue: #0b57d0;
  --gm-blue-soft: #d3e3fd;
  --gm-purple: #6d4aff;
  --gm-purple-soft: #eeeaff;
  --gm-danger: #b3261e;
  --gm-focus: #1558d6;
  --gm-shadow: 0 2px 8px rgb(60 64 67 / 18%), 0 8px 20px rgb(60 64 67 / 12%);
  --gm-sidebar-width: 256px;
  color-scheme: light;
}

[data-theme="dark"] {
  --gm-canvas: #202124;
  --gm-surface: #292a2d;
  --gm-surface-subtle: #303134;
  --gm-surface-hover: #34363a;
  --gm-surface-selected: #344b70;
  --gm-surface-unread: #30343b;
  --gm-border: #3c4043;
  --gm-text: #e8eaed;
  --gm-muted: #bdc1c6;
  --gm-blue: #a8c7fa;
  --gm-blue-soft: #394f70;
  --gm-purple: #d0bcff;
  --gm-purple-soft: #443b58;
  --gm-danger: #ffb4ab;
  --gm-focus: #a8c7fa;
  --gm-shadow: 0 2px 10px rgb(0 0 0 / 40%), 0 12px 28px rgb(0 0 0 / 30%);
  color-scheme: dark;
}

body:has(.gmail-shell) {
  background: var(--gm-canvas);
  color: var(--gm-text);
  font-family: Roboto, Arial, sans-serif;
}

.gmail-shell,
.gmail-shell * {
  box-sizing: border-box;
}

.gmail-shell {
  display: grid;
  grid-template-columns: var(--gm-sidebar-width) minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
  min-height: 100vh;
  overflow: clip;
  background: var(--gm-canvas);
  color: var(--gm-text);
}

/* App bar */
.gmail-topbar,
.gmail-header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(224px, var(--gm-sidebar-width)) minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 64px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--gm-border);
  background: var(--gm-surface);
  z-index: 10;
}

.gmail-topbar .brand,
.gmail-header .brand,
.gmail-topbar .gmail-brand {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 10px;
  color: var(--gm-text);
}

.gmail-header-leading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}

.gmail-title {
  min-width: 0;
  overflow: hidden;
  color: var(--gm-text);
  font-size: 20px;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gmail-topbar .brand strong,
.gmail-header .brand strong,
.gmail-topbar .gmail-brand strong {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.3px;
}

.gmail-topbar .brand small,
.gmail-header .brand small,
.gmail-topbar .gmail-brand small {
  color: var(--gm-muted);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

.gmail-topbar .brand-icon,
.gmail-header .brand-icon,
.gmail-topbar .gmail-brand-mark {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: var(--gm-purple-soft);
  box-shadow: none;
  color: var(--gm-purple);
}

.gmail-topbar .search,
.gmail-header .search,
.gmail-topbar .gmail-search {
  width: min(100%, 720px);
  height: 46px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 23px;
  background: var(--gm-surface-subtle);
  color: var(--gm-text);
  box-shadow: none;
}

.gmail-topbar .search:focus-within,
.gmail-header .search:focus-within,
.gmail-topbar .gmail-search:focus-within {
  border-color: color-mix(in srgb, var(--gm-focus) 42%, transparent);
  background: var(--gm-surface);
  box-shadow: 0 1px 2px rgb(60 64 67 / 18%);
}

.gmail-topbar .search input,
.gmail-header .search input,
.gmail-topbar .gmail-search input {
  color: var(--gm-text);
  font-size: 14px;
}

.gmail-topbar .search input::placeholder,
.gmail-header .search input::placeholder,
.gmail-topbar .gmail-search input::placeholder {
  color: var(--gm-muted);
}

.gmail-header-actions,
.gmail-topbar .top-actions,
.gmail-header .top-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.gmail-topbar .top-actions .search,
.gmail-header .top-actions .search {
  flex: 1 1 280px;
  max-width: 720px;
}

.gmail-topbar .icon-btn,
.gmail-header .icon-btn,
.gmail-header-actions button {
  width: 44px;
  min-width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gm-muted);
}

.gmail-topbar .icon-btn:hover,
.gmail-header .icon-btn:hover,
.gmail-header-actions button:hover {
  background: var(--gm-surface-subtle);
  color: var(--gm-text);
}

.gmail-topbar .avatar,
.gmail-header .avatar {
  width: 36px;
  height: 36px;
  margin-left: 8px;
  background: var(--gm-purple-soft);
  color: var(--gm-purple);
  font-size: 12px;
}

/* Navigation */
.gmail-sidebar {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 16px 12px;
  border-right: 1px solid var(--gm-border);
  background: var(--gm-surface);
  overflow-y: auto;
  z-index: 8;
}

.gmail-nav-scrim {
  display: none;
}

.gmail-sidebar .compose,
.gmail-compose-trigger {
  width: max-content;
  min-width: 138px;
  min-height: 48px;
  margin: 0 0 16px 4px;
  padding: 0 20px;
  border: 0;
  border-radius: 24px;
  background: var(--gm-blue-soft);
  box-shadow: 0 1px 2px rgb(60 64 67 / 18%);
  color: #062e6f;
  font-size: 14px;
  font-weight: 500;
}

[data-theme="dark"] .gmail-sidebar .compose,
[data-theme="dark"] .gmail-compose-trigger {
  color: #dbe8ff;
}

.gmail-sidebar .compose:hover,
.gmail-compose-trigger:hover {
  box-shadow: var(--gm-shadow);
  filter: brightness(0.98);
}

.gmail-sidebar .compose kbd {
  display: none;
}

.gmail-sidebar .nav-label {
  margin: 10px 12px 6px;
  color: var(--gm-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}

.gmail-sidebar .nav-item {
  min-height: 40px;
  margin: 1px 0;
  padding: 0 12px;
  border-radius: 0 20px 20px 0;
  color: var(--gm-text);
  font-size: 14px;
  font-weight: 400;
}

.gmail-sidebar .nav-item:hover {
  background: var(--gm-surface-hover);
  color: var(--gm-text);
}

.gmail-sidebar .nav-item.active {
  background: var(--gm-blue-soft);
  color: #062e6f;
  font-weight: 700;
}

[data-theme="dark"] .gmail-sidebar .nav-item.active {
  color: #dbe8ff;
}

.gmail-sidebar .nav-item svg {
  width: 20px;
  height: 20px;
}

.gmail-sidebar .nav-item b,
.gmail-sidebar .nav-item i {
  color: inherit;
  font-size: 12px;
}

.gmail-sidebar .brain-status,
.gmail-sidebar .quota-mini {
  border-color: var(--gm-border);
}

.gmail-sidebar .brain-status {
  margin-top: 12px;
  padding: 16px 12px;
}

.gmail-sidebar .logout {
  min-height: 40px;
  padding: 0 12px;
  color: var(--gm-muted);
  font-size: 13px;
  text-align: left;
}

.gmail-sidebar .logout:hover {
  color: var(--gm-text);
  background: var(--gm-surface-hover);
}

/* Mail list and reader */
.gmail-workspace,
.gmail-main {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  padding: 16px;
  background: var(--gm-canvas);
  overflow: auto;
}

.gmail-mail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  min-height: calc(100vh - 96px);
}

/* Brain is opt-in: a closed drawer must not shrink the inbox. */
.gmail-mail-layout.brain-open {
  grid-template-columns: minmax(0, 1fr) minmax(0, 336px);
}

.gmail-mail-panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--gm-border);
  border-radius: 14px;
  background: var(--gm-surface);
  box-shadow: 0 1px 2px rgb(60 64 67 / 8%);
}

.gmail-list-toolbar,
.gmail-toolbar,
.gmail-mail-panel .panel-head,
.gmail-mail-panel .bulk-toolbar {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--gm-border);
  background: var(--gm-surface);
  color: var(--gm-muted);
}

.gmail-mail-panel .panel-head {
  justify-content: space-between;
}

.gmail-mail-panel .panel-head .eyebrow {
  display: none;
}

.gmail-mail-panel .panel-head h3 {
  color: var(--gm-text);
  font-size: 14px;
  font-weight: 500;
}

.gmail-mail-panel .filter-pills {
  gap: 2px;
}

.gmail-mail-panel .pill,
.gmail-mail-panel .sort-select,
.gmail-mail-panel .bulk-btn,
.gmail-mail-panel .clear-selection {
  min-height: 36px;
  border-color: transparent;
  border-radius: 18px;
  background: transparent;
  color: var(--gm-muted);
  font-size: 12px;
}

.gmail-mail-panel .pill:hover,
.gmail-mail-panel .bulk-btn:hover,
.gmail-mail-panel .clear-selection:hover {
  background: var(--gm-surface-hover);
  color: var(--gm-text);
}

.gmail-mail-panel .pill.active {
  background: var(--gm-blue-soft);
  color: #062e6f;
  font-weight: 600;
}

[data-theme="dark"] .gmail-mail-panel .pill.active {
  color: #dbe8ff;
}

.gmail-message-list,
.gmail-mail-list,
.gmail-mail-panel .message-list {
  background: var(--gm-surface);
}

.gmail-message-row,
.gmail-mail-panel .message-row {
  display: grid;
  grid-template-columns: 24px 36px minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  border-bottom: 1px solid var(--gm-border);
  border-radius: 0;
  background: var(--gm-surface);
  color: var(--gm-text);
  text-align: left;
  transition: background-color 120ms ease, box-shadow 120ms ease;
}

.gmail-mail-panel .message-row.unread {
  background: var(--gm-surface-unread);
}

.gmail-mail-panel .message-row:hover,
.gmail-mail-panel .message-row.selected {
  background: var(--gm-surface-hover);
  box-shadow: inset 0 1px 0 rgb(60 64 67 / 8%), inset 0 -1px 0 rgb(60 64 67 / 8%);
}

.gmail-mail-panel .message-row.checked {
  background: var(--gm-blue-soft);
}

.gmail-mail-panel .message-check {
  width: 24px;
  height: 44px;
  margin: 0;
  padding: 0;
}

.gmail-mail-panel .message-check span,
.gmail-mail-panel .select-all span {
  border-color: var(--gm-muted);
  background: transparent;
}

.gmail-mail-panel .message-check input:checked + span,
.gmail-mail-panel .select-all input:checked + span {
  border-color: var(--gm-blue);
  background: var(--gm-blue);
  box-shadow: inset 0 0 0 4px var(--gm-surface);
}

.gmail-mail-panel .sender-avatar {
  display: none;
}

.gmail-mail-panel .message-main {
  display: grid;
  grid-template-columns: minmax(124px, 180px) minmax(0, 1fr) max-content;
  grid-template-rows: 20px 18px;
  align-items: center;
  min-width: 0;
  column-gap: 12px;
}

.gmail-mail-panel .message-meta {
  display: contents;
}

.gmail-mail-panel .message-meta strong {
  grid-column: 1;
  grid-row: 1 / 3;
  min-width: 0;
  overflow: hidden;
  color: var(--gm-text);
  font-size: 14px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gmail-mail-panel .message-row.unread .message-meta strong,
.gmail-mail-panel .message-row.unread .message-main h4 {
  font-weight: 700;
}

/* In Sent/Drafts, app.js prefixes the counterpart name with "Đến: " so it
   reads like Gmail's own "To: recipient" convention in those folders,
   instead of always looking like the sender (which is always yourself
   there and therefore not useful information). Keep the prefix visually
   quieter than the name itself. */
.to-label {
  color: var(--gm-muted);
  font-weight: 400;
}

.gmail-mail-panel .message-main h4 {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: var(--gm-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gmail-mail-panel .message-main p {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--gm-muted);
  font-size: 14px;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.gmail-mail-panel .message-meta time {
  grid-column: 3;
  grid-row: 1 / 3;
  color: var(--gm-text);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.gmail-mail-panel .row-actions {
  grid-column: 4;
  gap: 0;
  background: var(--gm-surface-hover);
}

.gmail-mail-panel .message-row.unread .row-actions {
  background: var(--gm-surface-unread);
}

.gmail-mail-panel .row-action {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--gm-muted);
}

.gmail-mail-panel .row-action:hover {
  border-color: transparent;
  background: var(--gm-surface-subtle);
  color: var(--gm-text);
}

.gmail-mail-panel .message-row:focus-visible,
.gmail-mail-panel .reader-thread-item:focus-visible {
  outline: 2px solid var(--gm-focus);
  outline-offset: -2px;
}

.gmail-mail-panel .loading-list,
.gmail-mail-panel .empty {
  min-height: 280px;
  padding: 64px 24px;
  color: var(--gm-muted);
}

.gmail-mail-panel .skeleton-row {
  height: 52px;
  margin: 0;
  border-color: var(--gm-border);
  background: linear-gradient(90deg, transparent, rgb(60 64 67 / 6%), transparent);
}

/* Reader remains a full-width mail surface, not a nested dashboard card. */
.gmail-reader,
.gmail-mail-panel.reading .reader-head,
.gmail-mail-panel .reader-meta,
.gmail-mail-panel .reader-thread,
.gmail-mail-panel .reader-actions {
  border-color: var(--gm-border);
  background: var(--gm-surface);
}

.gmail-mail-panel .reader-head,
.gmail-mail-panel .reader-meta,
.gmail-mail-panel .reader-thread,
.gmail-mail-panel .reader-body,
.gmail-mail-panel .reader-actions {
  padding-right: 24px;
  padding-left: 24px;
}

.gmail-mail-panel .reader-head-titles h3,
.gmail-mail-panel .reader-meta strong {
  color: var(--gm-text);
}

.gmail-mail-panel .reader-body,
.gmail-mail-panel .full-body {
  background: var(--gm-surface);
  color: var(--gm-text);
  font-size: 14px;
  line-height: 1.65;
}

.gmail-mail-panel .reader-actions .secondary {
  min-height: 40px;
  border-color: var(--gm-border);
  border-radius: 20px;
  background: transparent;
  color: var(--gm-blue);
  font-weight: 600;
}

/* Codor Brain is secondary and contextual. */
.gmail-brain-drawer,
.gmail-brain-panel {
  display: none;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--gm-border);
  border-radius: 14px;
  background: var(--gm-surface);
  box-shadow: 0 1px 2px rgb(60 64 67 / 8%);
}

.gmail-mail-layout.brain-open .gmail-brain-drawer,
.gmail-mail-layout.brain-open .gmail-brain-panel {
  display: block;
}

.gmail-brain-drawer .brain-heading,
.gmail-brain-panel .brain-heading {
  min-height: 64px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--gm-border);
}

.gmail-brain-drawer .brain-heading h3,
.gmail-brain-panel .brain-heading h3,
.gmail-brain-drawer .selected-mail h4 {
  color: var(--gm-text);
}

.gmail-brain-drawer .brain-orb,
.gmail-brain-panel .brain-orb,
.gmail-brain-drawer .orbit {
  border: 0;
  background: var(--gm-purple-soft);
  box-shadow: none;
  color: var(--gm-purple);
}

.gmail-brain-drawer .brain-welcome,
.gmail-brain-panel .brain-welcome {
  padding: 56px 24px;
}

.gmail-brain-drawer .brain-welcome p,
.gmail-brain-panel .brain-welcome p,
.gmail-brain-drawer .selected-mail p,
.gmail-brain-drawer .brain-block p {
  color: var(--gm-muted);
  font-size: 13px;
}

.gmail-brain-drawer .selected-mail,
.gmail-brain-panel .selected-mail {
  padding: 20px 16px;
}

.gmail-brain-drawer .brain-suggestion,
.gmail-brain-panel .brain-suggestion {
  border-color: color-mix(in srgb, var(--gm-purple) 25%, var(--gm-border));
  border-radius: 10px;
  background: var(--gm-purple-soft);
}

.gmail-brain-drawer .brain-suggestion strong,
.gmail-brain-panel .brain-suggestion strong,
.gmail-brain-drawer .brain-resummarize-btn,
.gmail-brain-drawer .auto-label-suggest-btn,
.gmail-brain-drawer .auto-label-apply-btn {
  color: var(--gm-purple);
}

.gmail-brain-drawer .brain-block,
.gmail-brain-panel .brain-block,
.gmail-brain-drawer .brain-divider {
  border-color: var(--gm-border);
}

.gmail-brain-drawer .read-btn,
.gmail-brain-panel .read-btn {
  min-height: 44px;
  border-color: var(--gm-blue);
  border-radius: 22px;
  background: transparent;
  color: var(--gm-blue);
}

/* Compose floats above mail like a familiar email composer. */
.gmail-compose,
.modal.gmail-compose {
  position: fixed;
  right: 24px;
  bottom: 0;
  width: min(600px, calc(100vw - 48px));
  max-height: min(720px, calc(100vh - 88px));
  padding: 20px 20px 16px;
  border: 1px solid var(--gm-border);
  border-radius: 12px 12px 0 0;
  background: var(--gm-surface);
  box-shadow: var(--gm-shadow);
  color: var(--gm-text);
}

.gmail-compose h3,
.gmail-compose label,
.gmail-compose input,
.gmail-compose textarea,
.modal.gmail-compose h3,
.modal.gmail-compose label,
.modal.gmail-compose input,
.modal.gmail-compose textarea {
  color: var(--gm-text);
}

.gmail-compose input,
.gmail-compose textarea,
.modal.gmail-compose input,
.modal.gmail-compose textarea {
  border-color: var(--gm-border);
  border-radius: 4px;
  background: transparent;
}

.gmail-compose .primary,
.modal.gmail-compose .primary {
  min-height: 40px;
  border-radius: 20px;
  background: var(--gm-blue);
  box-shadow: none;
  color: #fff;
}

/* Shared controls and transient surfaces */
.gmail-shell button:focus-visible,
.gmail-shell input:focus-visible,
.gmail-shell select:focus-visible,
.gmail-shell textarea:focus-visible,
.gmail-compose button:focus-visible,
.gmail-compose input:focus-visible,
.gmail-compose textarea:focus-visible {
  outline: 2px solid var(--gm-focus);
  outline-offset: 2px;
}

.gmail-shell .toast {
  border-color: var(--gm-border);
  border-radius: 8px;
  background: var(--gm-surface);
  color: var(--gm-text);
  box-shadow: var(--gm-shadow);
}

.gmail-shell .mail-notice.error,
.gmail-compose .mail-notice.error {
  border-color: color-mix(in srgb, var(--gm-danger) 35%, var(--gm-border));
  background: color-mix(in srgb, var(--gm-danger) 10%, var(--gm-surface));
  color: var(--gm-danger);
}

@media (max-width: 1279px) {
  .gmail-shell {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .gmail-topbar {
    grid-template-columns: 72px minmax(0, 1fr);
  }

  .gmail-sidebar {
    width: 72px;
    padding: 16px 8px;
  }

  .gmail-sidebar .brand,
  .gmail-sidebar .nav-label,
  .gmail-sidebar .nav-item span,
  .gmail-sidebar .nav-item b,
  .gmail-sidebar .nav-item i,
  .gmail-sidebar .brain-status div,
  .gmail-sidebar .quota-mini,
  .gmail-sidebar .logout,
  .gmail-sidebar .compose kbd {
    display: none;
  }

  .gmail-sidebar .compose {
    width: 48px;
    min-width: 48px;
    padding: 0;
    font-size: 0;
  }

  .gmail-sidebar .compose svg {
    width: 20px;
    height: 20px;
  }

  .gmail-sidebar .nav-item {
    justify-content: center;
    padding: 0;
    border-radius: 50%;
  }

  .gmail-mail-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .gmail-mail-layout.brain-open .gmail-brain-drawer,
  .gmail-mail-layout.brain-open .gmail-brain-panel,
  .gmail-brain-drawer.is-open {
    display: block;
    position: fixed;
    z-index: 20;
    top: 80px;
    right: 16px;
    bottom: 16px;
    width: min(360px, calc(100vw - 104px));
    box-shadow: var(--gm-shadow);
  }
}

@media (max-width: 767px) {
  .gmail-shell {
    display: block;
    overflow: visible;
  }

  .gmail-topbar {
    position: sticky;
    top: 0;
    display: flex;
    min-height: 56px;
    padding: 6px 8px;
    gap: 6px;
  }

  .gmail-topbar .brand,
  .gmail-topbar .gmail-brand {
    display: none;
  }

  .gmail-topbar .search,
  .gmail-topbar .gmail-search {
    flex: 1;
    height: 42px;
  }

  .gmail-topbar .search kbd,
  .gmail-topbar .gmail-search kbd,
  .gmail-topbar .avatar,
  .gmail-topbar #refresh {
    display: none;
  }

  .gmail-sidebar {
    position: fixed;
    z-index: 30;
    top: 0;
    bottom: 0;
    left: 0;
    width: min(300px, calc(100vw - 56px));
    padding: 18px 12px;
    transform: translateX(-105%);
    transition: transform 180ms ease;
    box-shadow: var(--gm-shadow);
  }

  .gmail-shell.nav-open .gmail-sidebar,
  .gmail-sidebar.is-open {
    transform: translateX(0);
  }

  .gmail-nav-scrim.is-open,
  .gmail-shell.nav-open::after {
    position: fixed;
    z-index: 25;
    inset: 0;
    background: rgb(0 0 0 / 34%);
    content: "";
  }

  .gmail-nav-scrim.is-open {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
  }

  .gmail-sidebar .brand,
  .gmail-sidebar .nav-label,
  .gmail-sidebar .nav-item span,
  .gmail-sidebar .nav-item b,
  .gmail-sidebar .nav-item i,
  .gmail-sidebar .brain-status div,
  .gmail-sidebar .quota-mini,
  .gmail-sidebar .logout {
    display: initial;
  }

  .gmail-sidebar .brand {
    display: flex;
    padding: 0 12px 20px;
  }

  .gmail-sidebar .nav-item {
    justify-content: flex-start;
    padding: 0 12px;
    border-radius: 0 20px 20px 0;
  }

  .gmail-sidebar .compose {
    width: max-content;
    min-width: 138px;
    padding: 0 20px;
    font-size: 14px;
  }

  .gmail-workspace {
    padding: 0;
    overflow: visible;
  }

  .gmail-mail-layout {
    min-height: calc(100vh - 56px);
    gap: 0;
  }

  .gmail-mail-panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .gmail-list-toolbar,
  .gmail-mail-panel .panel-head,
  .gmail-mail-panel .bulk-toolbar {
    min-height: 52px;
    padding: 4px 8px;
  }

  .gmail-mail-panel .filter-pills .pill:not(.active),
  .gmail-mail-panel .sort-select {
    display: none;
  }

  .gmail-message-row,
  .gmail-mail-panel .message-row {
    grid-template-columns: 24px 32px minmax(0, 1fr) max-content;
    column-gap: 8px;
    min-height: 56px;
    padding: 0 10px;
  }

  .gmail-mail-panel .message-main {
    grid-template-columns: minmax(72px, 108px) minmax(0, 1fr) max-content;
    column-gap: 8px;
  }

  .gmail-mail-panel .message-meta strong {
    grid-column: 1;
    font-size: 13px;
  }

  .gmail-mail-panel .message-main h4 {
    grid-column: 2;
    font-size: 13px;
  }

  .gmail-mail-panel .message-main p {
    display: none;
  }

  .gmail-mail-panel .message-meta time {
    grid-column: 3;
    font-size: 11px;
  }

  .gmail-mail-panel .row-actions {
    display: none;
  }

  .gmail-mail-panel .reader-head,
  .gmail-mail-panel .reader-meta,
  .gmail-mail-panel .reader-thread,
  .gmail-mail-panel .reader-body,
  .gmail-mail-panel .reader-actions {
    padding-right: 16px;
    padding-left: 16px;
  }

  .gmail-mail-layout.brain-open .gmail-brain-drawer,
  .gmail-mail-layout.brain-open .gmail-brain-panel,
  .gmail-brain-drawer.is-open {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: min(78vh, 680px);
    border-radius: 16px 16px 0 0;
  }

  .gmail-compose,
  .modal.gmail-compose {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: none;
    max-height: none;
    border-radius: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gmail-shell *,
  .gmail-shell *::before,
  .gmail-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* Compose fields follow Gmail's compact rows instead of card-like form boxes. */
.gmail-compose .compose-body{padding:4px 20px 0;display:flex;flex-direction:column}
/* "To" now lives in a .to-row flex container together with the Cc/Bcc
   toggle link, so they sit on the same line the way Gmail places "To"
   and "Cc Bcc" side by side — instead of the toggle floating as its own
   full-width row underneath, which is what made the old layout feel
   disconnected from the To field. */
.gmail-compose .to-row{display:flex;align-items:center;gap:8px;padding:11px 0;border-bottom:1px solid var(--gm-border)}
.gmail-compose .to-row-label{flex:1;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:8px;margin:0;color:var(--gm-muted);font-size:13px}
.gmail-compose .to-row-label input{min-width:0;margin:0;padding:5px 0;border:0;border-radius:0;background:transparent;color:var(--gm-text);font-size:14px;box-shadow:none}
.gmail-compose .to-row-label input:focus{box-shadow:none}
.gmail-compose .compose-body>label:has(input[name="subject"]){display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:8px;margin:0;padding:11px 0;border-bottom:1px solid var(--gm-border);color:var(--gm-muted);font-size:13px}
.gmail-compose .compose-body>label:has(input[name="subject"]) input{min-width:0;margin:0;padding:5px 0;border:0;border-radius:0;background:transparent;color:var(--gm-text);font-size:14px;box-shadow:none}
.gmail-compose .compose-body>label:has(input[name="subject"]) input:focus{box-shadow:none}
.gmail-compose .cc-bcc-toggle{flex:0 0 auto;border:0;background:transparent;padding:5px 0;color:var(--gm-blue);font-size:12px;text-decoration:none}
.gmail-compose .cc-bcc-fields:not([hidden]){grid-template-columns:1fr 1fr;gap:16px;padding:4px 0 8px;border-bottom:1px solid var(--gm-border)}
.gmail-compose .cc-bcc-fields label{display:grid;grid-template-columns:28px minmax(0,1fr);align-items:center;gap:8px;margin:0;color:var(--gm-muted);font-size:12px}
.gmail-compose .cc-bcc-fields input{min-width:0;margin:0;padding:6px 0;border:0;border-bottom:1px solid var(--gm-border);border-radius:0;background:transparent;box-shadow:none}
.gmail-compose .field-note{margin:0;padding:6px 0;border:0;border-radius:0;background:transparent;color:var(--gm-muted);font-size:11px}
.gmail-compose .compose-message-label{display:block;margin:18px 0 0;color:var(--gm-muted);font-size:12px}
.gmail-compose .compose-message-label textarea{min-height:190px;margin-top:8px;padding:8px 0;border:0;border-radius:0;background:transparent;color:var(--gm-text);font-size:14px;line-height:1.65;resize:vertical;box-shadow:none}
.gmail-compose .compose-message-label textarea:focus{box-shadow:none}
/* Bottom toolbar: Send + Attach + AI-assist icons on the left, Discard on
   the far right — this is the single footer row Gmail actually uses,
   replacing the old dual-row setup (a floating "AI hỗ trợ" button above
   the textarea plus a separate Hủy/Lưu nháp/Xem trước row below it) that
   made the compose window feel busier than Gmail's real one. */
.gmail-compose .attachment-list{order:9;margin:0;padding:0 0 8px}
/* position:relative here anchors .ai-assist-menu's position:absolute
   (styles.css) — the menu is a sibling of the AI-assist button, both
   direct children of this toolbar, since the button now lives here
   instead of under the old .compose-message-label wrapper that used to
   provide that anchor. Position the menu above the toolbar (it sits at
   the bottom of the compose window, so opening downward would run off
   screen) and align it to where the AI-assist icon actually is (second
   icon from the left: Send, Attach, AI-assist). */
.gmail-compose .compose-toolbar{position:sticky;bottom:0;display:flex;align-items:center;gap:4px;margin:0 -20px;padding:10px 20px;background:var(--gm-surface);border-top:1px solid var(--gm-border);z-index:2}
.gmail-compose .ai-assist-menu:not([hidden]){top:auto;bottom:calc(100% + 6px);left:56px;right:auto}
.gmail-compose .compose-send-group{position:relative;display:flex;align-items:stretch;border-radius:18px;box-shadow:none}
.gmail-compose .compose-send-group:has(.compose-send-caret) .compose-send-btn{border-radius:18px 0 0 18px}
.gmail-compose .compose-send-btn{min-height:36px;border-radius:18px;padding:0 22px;background:var(--gm-blue);color:#fff;box-shadow:none;font-weight:500}
.gmail-compose .compose-send-caret{min-height:36px;width:28px;border:0;border-left:1px solid rgba(255,255,255,.35);border-radius:0 18px 18px 0;background:var(--gm-blue);color:#fff;display:grid;place-items:center}
.gmail-compose .compose-send-caret:hover{filter:brightness(1.08)}
.gmail-compose .compose-send-caret svg{width:14px;height:14px;transform:rotate(90deg)}
.gmail-compose .schedule-menu:not([hidden]){position:absolute;bottom:calc(100% + 8px);left:0;z-index:5;min-width:240px;background:var(--gm-surface);border:1px solid var(--gm-border);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,.35);padding:6px}
.gmail-compose .schedule-menu button[data-schedule-preset]{display:block;width:100%;text-align:left;border:0;background:transparent;padding:9px 10px;border-radius:6px;font-size:13px;color:var(--gm-text)}
.gmail-compose .schedule-menu button[data-schedule-preset]:hover{background:var(--gm-surface-hover)}
.gmail-compose .schedule-menu-divider{height:1px;margin:6px 4px;background:var(--gm-border)}
.gmail-compose .schedule-custom-label{display:block;padding:6px 10px;margin:0;font-size:11px;color:var(--gm-muted)}
.gmail-compose .schedule-custom-label input{width:100%;margin-top:6px;padding:6px 8px;border:1px solid var(--gm-border);border-radius:6px;background:transparent;color:var(--gm-text);font-size:12px}
.gmail-compose .schedule-menu-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px 6px 2px}
.gmail-compose .schedule-menu-actions button{padding:6px 12px;font-size:12px;border-radius:16px}
.gmail-compose .schedule-chip:not([hidden]){display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px 0 12px;border-radius:16px;background:var(--gm-surface-hover);color:var(--gm-text);font-size:12px}
.gmail-compose .schedule-chip svg{width:14px;height:14px}
.gmail-compose .schedule-chip button{width:18px;height:18px;border:0;background:transparent;color:var(--gm-muted);display:grid;place-items:center}
.gmail-compose .schedule-chip button:hover{color:var(--gm-text)}
.gmail-compose .schedule-chip button svg{width:12px;height:12px}
.gmail-compose .compose-tool-btn{width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--gm-muted)}
.gmail-compose .compose-tool-btn:hover{background:var(--gm-surface-hover);color:var(--gm-text)}
.gmail-compose .compose-tool-btn.danger:hover{color:#c5221f}
.gmail-compose .compose-toolbar-spacer{flex:1}
.gmail-compose .compose-draft-btn{border:0;background:transparent;padding:0 10px;color:var(--gm-muted);font-size:12px}
.gmail-compose .compose-draft-btn:hover{color:var(--gm-text);text-decoration:underline}
@media(max-width:640px){.gmail-compose .cc-bcc-fields:not([hidden]){grid-template-columns:1fr}.gmail-compose .compose-message-label textarea{min-height:150px}}