/* ============================================================
   Edmonds Mail — Jmail / Gmail–inspired webmail stylesheet
   ============================================================ */

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

:root {
  --blue:       #1a73e8;
  --blue-lt:    #e8f0fe;
  --bg:         #f6f8fc;
  --white:      #ffffff;
  --border:     #e0e0e0;
  --border-lt:  #f1f3f4;
  --txt-hi:     #202124;
  --txt-lo:     #5f6368;
  --hover-bg:   #f1f3f4;
  --selected-bg:#e8f0fe;
  --sidebar-w:  256px;
  --banner-h:   36px;
  --topbar-h:   64px;
  --strip-h:    40px;
  --row-h:      68px;
  --panel-list: 400px;
}

html, body {
  height: 100%;
  font-family: 'Google Sans', Roboto, Arial, sans-serif;
  font-size: 14px;
  color: var(--txt-hi);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* ── INFO BANNER ─────────────────────────────────────────── */

.info-banner {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--banner-h);
  background: #1a73e8;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  letter-spacing: .15px;
  padding: 0 16px;
  text-align: center;
}

/* ── TOP BAR ─────────────────────────────────────────────── */

.topbar {
  position: fixed;
  top: var(--banner-h);
  left: 0; right: 0;
  height: var(--topbar-h);
  background: var(--white);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  z-index: 300;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  min-width: var(--sidebar-w);
}

.logo { display: flex; align-items: center; gap: 8px; padding-left: 4px; cursor: pointer; }
.logo-icon { display: block; width: 28px; height: 34px; }
.logo-text  { font-size: 22px; font-weight: 400; color: var(--txt-hi); letter-spacing: -.3px; }

/* Search */
.search-wrap {
  flex: 1;
  max-width: 720px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #eaf1fb;
  border-radius: 24px;
  padding: 0 8px 0 16px;
  height: 48px;
  transition: background .2s, box-shadow .2s;
}
.search-wrap:focus-within {
  background: var(--white);
  box-shadow: 0 1px 6px rgba(0,0,0,.22);
}
.search-icon { color: var(--txt-lo); flex-shrink: 0; }
.search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 16px;
  color: var(--txt-hi);
  outline: none;
  font-family: inherit;
  min-width: 0;
}
.search-input::placeholder { color: var(--txt-lo); }

.topbar-right {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
.info-banner-link {
  color: #fff;
  text-decoration: underline;
  margin-left: 6px;
}
.info-banner-link:hover { opacity: .85; }

/* ── PROFILE SWITCHER ────────────────────────────────────── */

.profile-area {
  position: relative;
}

.profile-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 6px 10px 6px 14px;
  border-radius: 32px;
  border: 1.5px solid var(--border);
  background: var(--white);
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.profile-trigger:hover {
  border-color: #aac4f5;
  box-shadow: 0 2px 8px rgba(26,115,232,.15);
  background: var(--white);
}

/* When a councilmember photo is shown — strip the pill, just show the avatar */
.profile-trigger.photo-mode {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  border-radius: 50%;
  gap: 0;
}
.profile-trigger.photo-mode:hover {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
}
.profile-trigger.photo-mode .profile-logged-in {
  display: none;
}
.profile-trigger.photo-mode .profile-btn {
  box-shadow: 0 0 0 2px var(--border);
}
.profile-trigger.photo-mode.person-selected .profile-btn {
  box-shadow: 0 0 0 2px var(--blue);
}

.profile-logged-in {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}
.profile-logged-in-label {
  font-size: 11px;
  color: var(--txt-lo);
  letter-spacing: .4px;
  font-weight: 400;
}
.profile-logged-in-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--txt-hi);
  white-space: nowrap;
  letter-spacing: -.2px;
}

.profile-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  transition: box-shadow .15s;
}
.profile-trigger:hover .profile-btn { box-shadow: none; }

.profile-btn-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.profile-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,.2);
  min-width: 280px;
  z-index: 400;
  overflow: hidden;
  padding: 8px 0;
}

.profile-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.profile-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  border: none;
  background: transparent;
  width: 100%;
  text-align: left;
  font-family: inherit;
  font-size: 14px;
  color: var(--txt-hi);
  transition: background .12s;
}
.profile-item:hover { background: var(--hover-bg); }

.profile-item-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.profile-item-info  { min-width: 0; }
.profile-item-name  { font-weight: 500; font-size: 14px; }
.profile-item-email { font-size: 12px; color: var(--txt-lo); }

/* Emails / Threads toggle */
.view-toggle {
  display: flex;
  align-items: center;
  background: var(--bg);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}
.toggle-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border: none;
  background: transparent;
  border-radius: 16px;
  font-size: 13px;
  font-family: inherit;
  color: var(--txt-lo);
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.toggle-btn .material-icons { font-size: 18px !important; }
.toggle-btn:hover { background: var(--border); }
.toggle-btn.active {
  background: var(--white);
  color: var(--blue);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  font-weight: 500;
}

/* Icon button */
.icon-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--txt-lo);
  flex-shrink: 0;
  transition: background .15s;
}
.icon-btn:hover { background: var(--hover-bg); }

/* ── TOOLBAR STRIP ───────────────────────────────────────── */

.toolbar-strip {
  position: fixed;
  top: calc(var(--banner-h) + var(--topbar-h));
  left: 0; right: 0;
  height: var(--strip-h);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 2px;
  z-index: 290;
}

.toolbar-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border: none;
  background: transparent;
  border-radius: 15px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--txt-lo);
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.toolbar-tab .material-icons { font-size: 16px !important; }
.toolbar-tab:hover  { background: var(--hover-bg); color: var(--txt-hi); }
.toolbar-tab.active { background: var(--blue-lt);  color: var(--blue); }

/* Topics tab only shows when sidebar is hidden (≤1080px) */
#topicsTab { display: none; }
@media (max-width: 1080px) { #topicsTab { display: inline-flex; } }

/* ── TOPICS BOTTOM SHEET ─────────────────────────────────── */

.topics-sheet-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  z-index: 400;
  animation: fadeIn .2s ease;
}
.topics-sheet-backdrop.open { display: block; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.topics-sheet {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--white);
  border-radius: 16px 16px 0 0;
  z-index: 401;
  max-height: 75vh;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -4px 24px rgba(0,0,0,.12);
}
.topics-sheet.open { transform: translateY(0); }

.topics-sheet-handle {
  width: 36px; height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px auto 2px;
  flex-shrink: 0;
}
.topics-sheet-header {
  display: flex;
  align-items: center;
  padding: 8px 12px 8px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.topics-sheet-title {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt-hi);
}
.topics-sheet-close {
  background: none; border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--txt-lo);
  border-radius: 50%;
  display: flex; align-items: center;
}
.topics-sheet-close:hover { background: var(--hover-bg); color: var(--txt-hi); }
.topics-sheet-close .material-icons { font-size: 20px; }

.topics-sheet .topic-list {
  overflow-y: auto;
  padding: 6px 0 8px;
}

/* ── MAIN LAYOUT ─────────────────────────────────────────── */

.main {
  position: fixed;
  top: calc(var(--banner-h) + var(--topbar-h) + var(--strip-h));
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: var(--sidebar-w) var(--panel-list) 4px 1fr;
  overflow: hidden;
  transition: grid-template-columns .2s;
}
.main.sidebar-hidden {
  grid-template-columns: 0 var(--panel-list) 4px 1fr;
}

/* ── RESIZE HANDLE ───────────────────────────────────────── */

.resize-handle {
  background: var(--border);
  cursor: col-resize;
  position: relative;
  transition: background .15s;
  z-index: 10;
}
.resize-handle::after {
  content: '';
  position: absolute;
  inset: 0 -4px;
}
.resize-handle:hover,
.resize-handle.dragging { background: var(--blue); }

/* ── SIDEBAR ─────────────────────────────────────────────── */

.sidebar {
  background: var(--white);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
}
.main.sidebar-hidden .sidebar { overflow: hidden; }

.sidebar-inner { padding: 8px 0 32px; }

.folder-list { list-style: none; padding: 4px 0 4px; }
.folder-item {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 40px;
  padding: 0 16px;
  border-radius: 0 20px 20px 0;
  margin-right: 16px;
  cursor: pointer;
  color: var(--txt-lo);
  font-size: 14px;
  font-weight: 500;
  transition: background .12s;
  white-space: nowrap;
}
.folder-item .material-icons { font-size: 20px; flex-shrink: 0; }
.folder-item:hover  { background: var(--hover-bg); }
.folder-item.active { background: var(--blue-lt); color: var(--blue); }
.folder-item.active .material-icons { color: var(--blue); }

.sidebar-divider { height: 1px; background: var(--border); margin: 8px 16px; }
.sidebar-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  color: var(--txt-lo);
  padding: 8px 16px 4px;
  text-transform: uppercase;
}

.topics-info-btn {
  background: none;
  border: none;
  padding: 0 2px;
  cursor: pointer;
  color: var(--txt-lo);
  vertical-align: middle;
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 50%;
  line-height: 1;
}
.topics-info-btn .material-icons {
  font-size: 15px !important;
  transition: color .15s;
}
.topics-info-btn:hover .material-icons,
.topics-info-btn.open .material-icons { color: var(--blue); }

.topics-info-tooltip {
  display: none;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  background: #3c4043;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  white-space: normal;
  width: 200px;
  padding: 7px 10px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  z-index: 600;
  pointer-events: none;
}
.topics-info-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #3c4043;
}
.topics-info-btn:hover .topics-info-tooltip,
.topics-info-btn.open .topics-info-tooltip { display: block; }

.person-list { list-style: none; }
.person-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 16px;
  border-radius: 0 20px 20px 0;
  margin-right: 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--txt-hi);
  transition: background .12s;
  white-space: nowrap;
}
.person-item:hover  { background: var(--hover-bg); }
.person-item.active { background: var(--blue-lt); color: var(--blue); font-weight: 500; }
.person-item.active .person-name { color: var(--blue); }

.avatar {
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: #fff;
  font-weight: 500;
  font-family: 'Google Sans', sans-serif;
  text-transform: uppercase;
}
.avatar-photo {
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.person-name { overflow: hidden; text-overflow: ellipsis; }

/* ── TOPIC LIST ───────────────────────────────────────────── */

.topic-list { list-style: none; }
.topic-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 16px;
  border-radius: 0 20px 20px 0;
  margin-right: 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--txt-hi);
  transition: background .12s;
  white-space: nowrap;
}
.topic-item:hover  { background: var(--hover-bg); }
.topic-item.active { background: var(--blue-lt); color: var(--blue); font-weight: 500; }
.topic-item.active .topic-icon { color: var(--blue); }

.topic-icon {
  font-size: 20px !important;
  flex-shrink: 0;
  color: var(--txt-lo);
}
.topic-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }

/* ── EMAIL LIST PANEL ────────────────────────────────────── */

.email-list-panel {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-right: 1px solid var(--border);
  overflow: hidden;
}

.list-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 52px;
}
.list-title { font-size: 14px; font-weight: 600; color: var(--txt-hi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-count { font-size: 13px; color: var(--txt-lo); flex-shrink: 0; }
.list-pagination { margin-left: auto; display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.sort-toggle { width: auto; height: 32px; padding: 0 8px 0 6px; border-radius: 4px; color: var(--txt-lo); flex-shrink: 0; display: flex; align-items: center; gap: 2px; }
.sort-toggle .material-icons { font-size: 18px; }
.sort-toggle-label { font-size: 12px; font-weight: 500; }

.page-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--txt-lo);
  transition: background .12s;
}
.page-btn:hover:not(:disabled) { background: var(--hover-bg); }
.page-btn:disabled { opacity: .4; cursor: default; }
.page-info { font-size: 12px; color: var(--txt-lo); white-space: nowrap; padding: 0 4px; }

.email-rows { flex: 1; overflow-y: auto; }

/* ── EMAIL ROW (individual) ──────────────────────────────── */

.email-row {
  display: grid;
  grid-template-columns: 52px 1fr 52px;
  align-items: center;
  height: var(--row-h);
  padding: 0 8px 0 4px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-lt);
  transition: background .1s;
}
.email-row:hover    { background: #f5f6f7; }
.email-row.selected { background: var(--selected-bg); }

.row-avatar { display: flex; justify-content: center; align-items: center; }
.row-main   { min-width: 0; padding: 0 4px; }
.row-from {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.row-subject {
  font-size: 13px;
  color: var(--txt-lo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}
.row-date {
  font-size: 11px;
  color: var(--txt-lo);
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  white-space: nowrap;
  align-self: center;
  padding-right: 2px;
}
.row-clip {
  font-size: 13px !important;
  line-height: 1;
  color: var(--txt-lo);
  opacity: 0.55;
}

/* ── THREAD ROW ──────────────────────────────────────────── */

.thread-row {
  display: grid;
  grid-template-columns: 52px 1fr 64px;
  align-items: center;
  min-height: var(--row-h);
  padding: 8px 8px 8px 4px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-lt);
  transition: background .1s;
}
.thread-row:hover    { background: var(--white); box-shadow: 0 1px 8px rgba(0,0,0,.10); position: relative; z-index: 1; }
.thread-row.selected { background: var(--selected-bg); }

/* Stack of up to 3 mini-avatars */
.thread-avatars {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.thread-avatar-wrap {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}
.thread-avatars .thread-avatar-wrap + .thread-avatar-wrap { margin-top: -10px; }
.thread-avatar-wrap .avatar,
.thread-avatar-wrap .avatar-photo { width: 24px !important; height: 24px !important; }

.thread-main { min-width: 0; padding: 0 4px; }
.thread-participants {
  font-size: 13px;
  font-weight: 600;
  color: var(--txt-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thread-subject-line {
  font-size: 13px;
  color: var(--txt-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thread-att-pills {
  display: flex;
  gap: 5px;
  margin-top: 4px;
  flex-wrap: nowrap;
  overflow: hidden;
}
.thread-att-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1px 8px 1px 3px;
  font-size: 11px;
  color: var(--txt-lo);
  background: var(--white);
  white-space: nowrap;
  overflow: hidden;
  max-width: 180px;
}
.thread-att-badge {
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  border-radius: 3px;
  padding: 1px 3px;
  letter-spacing: .3px;
  flex-shrink: 0;
}
.thread-att-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.thread-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--border);
  color: var(--txt-lo);
  font-size: 11px;
  font-weight: 600;
  border-radius: 8px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.thread-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── EMPTY / LOADING STATES ──────────────────────────────── */

.empty-state, .loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 12px;
  color: var(--txt-lo);
  font-size: 14px;
}
.empty-state .material-icons,
.loading-state .material-icons {
  font-size: 52px !important;
  color: #dadce0;
}

/* ── EMAIL DETAIL PANEL ──────────────────────────────────── */

.email-detail-panel {
  background: var(--bg);
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.detail-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}


.detail-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 16px;
  color: var(--txt-lo);
  font-size: 14px;
}
.detail-placeholder .material-icons { font-size: 72px !important; color: #dadce0; }

.detail-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 20px;
  color: var(--txt-lo);
}

.spinner {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 3px solid var(--border);
  border-top-color: var(--blue);
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Single email detail card */
.detail-content {
  margin: 24px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,.1), 0 0 0 1px rgba(0,0,0,.04);
  padding: 28px 36px 36px;
  max-width: 900px;
}

.detail-subject {
  font-size: 22px;
  font-weight: 400;
  color: var(--txt-hi);
  line-height: 1.35;
  margin-bottom: 10px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.detail-subject-text { flex: 1; }

.copy-link-btn {
  flex-shrink: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  height: 28px;
  padding: 0 10px 0 6px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--txt-lo);
  font-size: 12px;
  font-family: inherit;
  margin-top: 4px;
  transition: background .12s, color .12s;
}
.copy-link-btn:hover { background: var(--hover-bg); color: var(--txt-hi); }
.copy-link-btn .material-icons { font-size: 16px !important; }
.detail-meta {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.meta-avatar { flex-shrink: 0; margin-top: 2px; }
.meta-info   { flex: 1; min-width: 0; }
.meta-from   { font-size: 14px; font-weight: 600; color: var(--txt-hi); margin-bottom: 3px; }
.meta-field       { font-size: 13px; color: var(--txt-lo); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meta-field-wrap  { white-space: normal; overflow: visible; text-overflow: unset; word-break: break-word; }
.meta-label  { color: var(--txt-hi); font-weight: 500; margin-right: 4px; }
.meta-date   { font-size: 12px; color: var(--txt-lo); margin-top: 4px; }
.detail-divider { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.detail-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--txt-hi);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: Roboto, Arial, sans-serif;
}
.quoted-toggle {
  display: inline-block;
  margin: 8px 0;
  padding: 1px 10px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  cursor: pointer;
  font-size: 18px;
  letter-spacing: 3px;
  line-height: 1.4;
  color: var(--txt-lo);
  font-family: inherit;
  transition: background .12s, color .12s;
}
.quoted-toggle:hover { background: var(--hover-bg); color: var(--txt-hi); }
.quoted-toggle-open { color: var(--txt-hi); background: var(--hover-bg); }

/* ── THREAD DETAIL ───────────────────────────────────────── */

.thread-detail {
  display: flex;
  flex-direction: column;
  padding: 24px;
  gap: 12px;
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
}

.thread-detail-subject {
  font-size: 22px;
  font-weight: 400;
  color: var(--txt-hi);
  line-height: 1.35;
  padding-bottom: 4px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.thread-detail-subject .detail-subject-text { flex: 1; }

/* Thread-level attachments bar (shown under subject) */
.thread-att-bar .attachment-section {
  margin-top: 0;
  padding-top: 12px;
  border-top: none;
  border-bottom: 1px solid var(--border-lt);
  padding-bottom: 16px;
  margin-bottom: 4px;
}

/* Individual message card inside a thread */
.msg-card {
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  overflow: hidden;
  transition: box-shadow .15s;
}

.msg-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
}
.msg-header:hover { background: #fafafa; }

.msg-header-info { flex: 1; min-width: 0; }
.msg-sender {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-hi);
}
.msg-recipients {
  font-size: 12px;
  color: var(--txt-lo);
  white-space: normal;
  word-break: break-word;
  margin-top: 2px;
  line-height: 1.5;
}
.recip-more {
  background: none;
  border: none;
  color: var(--blue);
  cursor: pointer;
  font: inherit;
  padding: 0;
  margin-left: 2px;
}
.recip-more:hover { text-decoration: underline; }
.msg-header-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.msg-date {
  font-size: 12px;
  color: var(--txt-lo);
  white-space: nowrap;
}
.msg-copy-link {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 11px;
  color: var(--txt-lo);
  padding: 0;
  font-family: inherit;
  white-space: nowrap;
  transition: color .15s;
}
.msg-copy-link:hover { color: var(--blue); }
.msg-expand-icon {
  color: var(--txt-lo);
  flex-shrink: 0;
  font-size: 20px !important;
  transition: transform .2s;
}
.msg-card.expanded .msg-expand-icon { transform: rotate(180deg); }

.msg-body-wrap {
  display: none;
  border-top: 1px solid var(--border-lt);
  padding: 16px 20px 20px 72px; /* 72px = avatar(40) + gap(12) + avatar-margin(20) */
}
.msg-card.expanded .msg-body-wrap { display: block; }

.msg-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--txt-hi);
  white-space: pre-wrap;
  word-break: break-word;
  font-family: Roboto, Arial, sans-serif;
}

.msg-error {
  padding: 16px 20px;
  color: #c5221f;
  font-size: 13px;
}

/* ── ATTACHMENTS ─────────────────────────────────────────── */

.attachment-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-lt);
}
.attachment-toggle {
  display: flex;
  align-items: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 2px 4px 2px 0;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 0;
}
.attachment-toggle:hover { background: var(--hover-bg); }
.attachment-chevron {
  font-size: 16px !important;
  color: var(--txt-lo);
  transition: transform .15s;
}
.attachment-toggle.open .attachment-chevron { transform: rotate(90deg); }
.attachment-toggle + .attachment-list { margin-top: 10px; }
.attachment-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-lo);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 10px;
}
.attachment-toggle .attachment-label { margin-bottom: 0; }
.attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.att-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none;
  color: var(--txt-hi);
  font-size: 13px;
  max-width: 220px;
  transition: background .12s, box-shadow .12s;
}
.att-chip:hover {
  background: var(--blue-lt);
  border-color: var(--blue);
  box-shadow: 0 1px 4px rgba(26,115,232,.15);
}
.att-chip .material-icons {
  font-size: 20px !important;
  flex-shrink: 0;
  color: var(--txt-lo);
}
.att-chip:hover .material-icons { color: var(--blue); }
.att-chip-info { min-width: 0; }
.att-chip-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.att-chip-size { font-size: 11px; color: var(--txt-lo); }

/* Image thumbnail chip */
.att-chip.is-image { padding: 6px 10px 6px 6px; }
.att-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  background: var(--border-lt);
}

/* ICS calendar event chip */
.att-chip.is-ics { flex-direction: column; align-items: flex-start; max-width: 260px; }
.att-chip.is-ics .material-icons { color: var(--blue); }
.ics-title { font-weight: 600; font-size: 13px; }
.ics-date  { font-size: 12px; color: var(--txt-lo); margin-top: 2px; }

/* ICS calendar event card (inline in message body) */
.ics-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 16px;
  margin: 12px 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #f8fafd;
}
.ics-card-icon { color: var(--blue); font-size: 24px !important; flex-shrink: 0; margin-top: 2px; }
.ics-card-body { min-width: 0; }
.ics-card-title { font-weight: 600; font-size: 14px; color: var(--txt-hi); }
.ics-card-when  { font-size: 13px; color: var(--txt-lo); margin-top: 2px; }
.ics-card-where { font-size: 13px; color: var(--txt-lo); margin-top: 2px; }
.ics-card-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
}

/* ── CALENDAR VIEW (FullCalendar) ───────────────────────── */

/* Calendar-mode layout: hide detail panel + resize handle */
.main.calendar-mode { grid-template-columns: var(--sidebar-w) 1fr 0 0; }
.main.calendar-mode.sidebar-hidden { grid-template-columns: 0 1fr 0 0; }
.main.calendar-mode .resize-handle { display: none; }
.main.calendar-mode .email-detail-panel { display: none; }
.main.calendar-mode .email-list-panel { border-right: none; }

/* FullCalendar container — fill the available height */
.main.calendar-mode .email-rows {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#fullCalendarEl {
  padding: 8px 16px 16px;
  background: var(--white);
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
/* FullCalendar needs height:100% on its root when parent is flex */
#fullCalendarEl .fc {
  height: 100%;
}

/* FullCalendar overrides to match app aesthetic */
.fc {
  --fc-border-color: var(--border);
  --fc-today-bg-color: #e8f0fe;
  --fc-page-bg-color: var(--white);
  --fc-neutral-bg-color: var(--bg);
  font-family: 'Google Sans', Roboto, Arial, sans-serif;
  font-size: 13px;
}
.fc .fc-toolbar-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--txt-hi);
}
.fc .fc-button {
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--txt-lo);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 16px;
  transition: background .12s, color .12s;
}
.fc .fc-button:hover {
  background: var(--hover-bg);
  color: var(--txt-hi);
}
.fc .fc-button:disabled {
  opacity: .35;
  cursor: default;
}
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--blue-lt);
  color: var(--blue);
  border-color: var(--blue);
}
.fc .fc-button-primary:focus {
  box-shadow: 0 0 0 2px rgba(26,115,232,.25);
}
.fc .fc-col-header-cell-cushion {
  font-size: 11px;
  font-weight: 600;
  color: var(--txt-lo);
  text-transform: uppercase;
  padding: 8px 0;
}
.fc .fc-daygrid-day-number {
  font-size: 12px;
  font-weight: 500;
  color: var(--txt-hi);
  padding: 4px 6px;
}
.fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number { opacity: 0.35; }
.fc .fc-daygrid-event {
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 11px;
  cursor: pointer;
}
.fc .fc-daygrid-event:hover { opacity: 0.85; }

/* FullCalendar event inner layout */
.fc-event-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 1px 0;
  overflow: hidden;
}
.fc-event-title-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
}
.fc-event-avatars {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
}

/* RSVP avatar thumbnails */
.fc-event-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid transparent;
  object-fit: cover;
  display: block;
}
.fc-event-avatar.rsvp-accepted  { border-color: #1b873a; }
.fc-event-avatar.rsvp-declined  { border-color: #c00; }
.fc-event-avatar.rsvp-tentative { border-color: #b45309; }
.fc-event-avatar.rsvp-unknown   { border-color: #999; }

/* FullCalendar list view overrides */
.fc .fc-list-table { border: none; }
.fc .fc-list-day-cushion {
  background: var(--bg);
  padding: 6px 14px;
}
.fc .fc-list-day-text,
.fc .fc-list-day-side-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-lo);
  text-decoration: none;
}
.fc .fc-list-event:hover td { background: var(--hover-bg); }
.fc .fc-list-event-title a {
  color: var(--txt-hi);
  text-decoration: none;
  font-size: 13px;
}
.fc .fc-list-event-time {
  font-size: 12px;
  color: var(--txt-lo);
  white-space: nowrap;
}
.fc .fc-list-empty {
  background: var(--white);
  color: var(--txt-lo);
  font-size: 14px;
}

/* Mobile: force FC grid to 100% width, no overflow */
@media (max-width: 699px) {
  #fullCalendarEl { padding: 4px 8px 8px; }
  .fc .fc-scrollgrid,
  .fc .fc-daygrid-body,
  .fc table { width: 100% !important; min-width: 0 !important; }
  .fc .fc-col-header-cell-cushion { font-size: 10px; padding: 4px 0; }
  .fc .fc-daygrid-day-number { font-size: 11px; padding: 2px 4px; }
  .fc .fc-toolbar-title { font-size: 15px; }
  .fc-event-avatars { display: none; } /* avatars too small at mobile month grid; shown in modal */
}

/* ── CALENDAR EVENT MODAL ────────────────────────────────── */

.cal-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
}
.cal-modal-dialog {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  width: min(92vw, 440px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  z-index: 1;
}
.cal-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 18px 16px 12px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cal-modal-title {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  color: var(--txt-hi);
  line-height: 1.4;
}
.cal-modal-close {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--txt-lo);
  flex-shrink: 0;
  margin-top: -2px;
  transition: background .12s;
}
.cal-modal-close:hover { background: var(--hover-bg); }
.cal-modal-close .material-icons { font-size: 20px !important; }
.cal-modal-body {
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cal-modal-when {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--txt-lo);
}
.cal-modal-when .material-icons { font-size: 18px !important; color: var(--txt-lo); flex-shrink: 0; }
.cal-modal-members {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-modal-member {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cal-modal-avatar {
  width: 32px !important;
  height: 32px !important;
  border-width: 2px;
  flex-shrink: 0;
}
.cal-modal-member-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.cal-modal-member-name { font-size: 13px; font-weight: 500; color: var(--txt-hi); }
.cal-modal-member-rsvp { font-size: 11px; font-weight: 500; }
.cal-modal-thread-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  align-self: flex-start;
  transition: background .12s;
}
.cal-modal-thread-btn:hover { background: #1557b0; }
.cal-modal-thread-btn .material-icons { font-size: 16px !important; }

/* ── ATTACHMENT PREVIEW MODAL ────────────────────────────── */

.att-modal {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.att-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.65);
}
.att-modal-dialog {
  position: relative;
  background: var(--white);
  border-radius: 12px;
  max-width: min(92vw, 1100px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 48px rgba(0,0,0,.4);
  z-index: 1;
  min-width: 320px;
}
.att-modal-header {
  display: flex;
  align-items: center;
  padding: 10px 12px 10px 16px;
  border-bottom: 1px solid var(--border);
  gap: 8px;
  flex-shrink: 0;
}
.att-modal-title {
  font-weight: 500;
  font-size: 14px;
  color: var(--txt-hi);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-modal-download {
  width: 34px; height: 34px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--txt-lo);
  flex-shrink: 0;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.att-modal-download:hover { background: var(--hover-bg); color: var(--txt-hi); }
.att-modal-download .material-icons { font-size: 20px !important; }

.att-modal-close {
  width: 34px; height: 34px;
  border: none; background: transparent;
  border-radius: 50%;
  cursor: pointer;
  display: grid; place-items: center;
  color: var(--txt-lo);
  flex-shrink: 0;
}
.att-modal-close:hover { background: var(--hover-bg); color: var(--txt-hi); }
.att-modal-body {
  overflow: auto;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1a1a1a;
  min-height: 200px;
}
.att-modal-body img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  display: block;
}
.att-modal-body iframe {
  width: min(88vw, 1060px);
  height: 82vh;
  border: none;
  background: #fff;
}
.pdf-viewer {
  width: min(92vw, 1060px);
  height: 88vh;
  display: block;
}
.att-modal-docx {
  background: #fff;
  width: min(86vw, 820px);
  max-height: 84vh;
  overflow-y: auto;
  padding: 40px 48px;
}
.docx-loading {
  padding: 32px;
  color: var(--txt-lo);
  font-size: 14px;
}
.docx-body { font-family: Georgia, 'Times New Roman', serif; font-size: 14px; line-height: 1.7; color: #202124; }
.docx-body h1, .docx-body h2, .docx-body h3, .docx-body h4 { font-family: inherit; margin: 1.2em 0 .4em; line-height: 1.3; }
.docx-body p  { margin: .5em 0; }
.docx-body ul, .docx-body ol { margin: .5em 0 .5em 1.5em; }
.docx-body table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.docx-body td, .docx-body th { border: 1px solid #d0d0d0; padding: 6px 10px; font-size: 13px; }
.docx-body th { background: #f8f8f8; font-weight: 600; }

/* ── SPREADSHEET PREVIEW ─────────────────────────────────── */

.sheet-wrap {
  background: #fff;
  width: min(92vw, 1060px);
  max-height: 84vh;
  overflow: auto;
  padding: 16px;
}
.sheet-body { font-size: 13px; }
.sheet-body table {
  border-collapse: collapse;
  white-space: nowrap;
}
.sheet-body td, .sheet-body th {
  border: 1px solid #d0d0d0;
  padding: 4px 10px;
  font-size: 12px;
  vertical-align: top;
}
.sheet-body th {
  background: #f8f8f8;
  font-weight: 600;
  position: sticky;
  top: 0;
}

/* ── EMAIL IFRAME ─────────────────────────────────────────── */

.email-iframe {
  width: 100%;
  border: none;
  min-height: 200px;
  display: block;
  background: var(--white);
}

/* ── MOBILE TOOLBAR (back + copy link) ─────────────────────── */

.mobile-toolbar {
  display: none;
  align-items: center;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  min-height: 48px;
}
.mobile-back {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  padding: 10px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--blue);
  text-align: left;
}
.mobile-back .material-icons { font-size: 20px !important; color: var(--blue); }
.mobile-back:active { background: var(--blue-lt); }
.mobile-copy-link {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px 6px 8px;
  margin-right: 8px;
  background: none;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  color: var(--txt-lo);
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  transition: background .12s, color .12s;
}
.mobile-copy-link:hover { background: var(--hover-bg); color: var(--txt-hi); }
.mobile-copy-link:active { background: var(--blue-lt); color: var(--blue); }
.mobile-copy-link .material-icons { font-size: 18px; }

/* ── DESKTOP ONLY ────────────────────────────────────────── */

@media (min-width: 1081px) {
  /* Toolbar strip not needed — sidebar handles folder nav */
  .toolbar-strip { display: none; }
  :root { --strip-h: 0px; }

  /* Show full "Viewing messages as" pill in topbar */
  .profile-trigger.photo-mode {
    padding: 6px 10px 6px 14px;
    border: 1.5px solid var(--border);
    background: var(--white);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    border-radius: 32px;
    gap: 10px;
  }
  .profile-trigger.photo-mode:hover {
    border-color: #aac4f5;
    box-shadow: 0 2px 8px rgba(26,115,232,.15);
  }
  .profile-trigger.photo-mode .profile-logged-in { display: flex; }

  /* Dropdown header not needed on desktop (pill already shows it) */
  .profile-dropdown-header { display: none; }
}

/* ── RESPONSIVE — TABLET (≤1080px) ──────────────────────── */

@media (max-width: 1080px) {
  .main,
  .main.sidebar-hidden {
    grid-template-columns: var(--panel-list) 4px 1fr;
  }
  .sidebar        { display: none; }
  .topbar-left    { min-width: 0; }
  #sidebarToggle  { display: none; }

  /* Calendar-mode: no sidebar, full width */
  .main.calendar-mode,
  .main.calendar-mode.sidebar-hidden {
    grid-template-columns: 1fr 0 0;
  }
}

/* ── RESPONSIVE — MOBILE (≤699px) ───────────────────────── */

@media (max-width: 699px) {
  :root {
    --banner-h:  56px;
    --topbar-h:  96px;
    --panel-list: 100vw;
  }

  /* Compact banner on mobile */
  .info-banner  { font-size: 12px; padding: 0 12px; }

  /* Two-row topbar: [logo + icons] / [search] */
  .topbar {
    flex-wrap: wrap;
    align-content: flex-start;
    padding: 6px 8px 8px;
    gap: 0 4px;
  }
  .topbar-left  { flex: 1; min-width: 0; }
  .search-wrap  { order: 3; flex-basis: 100%; margin-top: 6px; height: 38px; }

  /* Profile trigger: bare avatar only, no pill */
  .profile-logged-in { display: none; }
  .profile-trigger {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    border-radius: 50%;
    gap: 0;
  }
  .profile-trigger:hover {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
  }

  /* Dropdown header shows current selection on mobile */
  .profile-dropdown-header {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 4px;
  }
  .profile-dropdown-viewing-label {
    font-size: 11px;
    color: var(--txt-lo);
    letter-spacing: .4px;
    display: block;
    margin-bottom: 2px;
  }
  .profile-dropdown-viewing-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--txt-hi);
  }

  /* Single-column layout — hide resize handle */
  .resize-handle { display: none; }
  .main,
  .main.sidebar-hidden {
    grid-template-columns: 1fr;
  }

  /* Calendar-mode: single column */
  .main.calendar-mode,
  .main.calendar-mode.sidebar-hidden {
    grid-template-columns: 1fr;
  }

  /* Detail panel: hidden until an email is opened */
  .email-detail-panel {
    display: none;
    position: fixed;
    inset: calc(var(--topbar-h) + var(--strip-h)) 0 0 0;
    z-index: 100;
    overflow: hidden;
    flex-direction: column;
  }

  /* Show detail, hide list when an email/thread is open */
  .main.detail-open .email-list-panel   { display: none; }
  .main.detail-open .email-detail-panel { display: flex; }

  /* Show mobile toolbar (back + copy link) */
  .mobile-toolbar { display: flex; }

  /* Hide inbox/sent tabs when viewing a message — not relevant */
  #app:has(.detail-open) .toolbar-strip { display: none; }
  #app:has(.detail-open) .email-detail-panel {
    inset: calc(var(--banner-h) + var(--topbar-h)) 0 0 0;
  }

  /* More padding on subject, copy-link below subject */
  .thread-detail-subject,
  .detail-subject {
    flex-wrap: wrap;
    padding-top: 8px;
  }
  .thread-detail-subject .copy-link-btn,
  .detail-subject .copy-link-btn {
    display: none;
  }

  /* Detail main: fill remaining space, scroll vertically, clip overflow */
  .detail-main {
    overflow-x: hidden;
    min-width: 0;
    width: 100%;
  }

  /* Tighten content cards for narrow screens */
  .detail-content {
    margin: 8px 0;
    padding: 20px 14px;
    border-radius: 0;
    box-shadow: none;
    max-width: 100%;
  }
  .thread-detail {
    padding: 16px 10px;
    max-width: 100%;
    box-sizing: border-box;
  }
  .thread-detail-subject {
    font-size: 18px;
    flex-wrap: wrap;
  }
  .msg-card {
    border-radius: 0;
  }
  .msg-header {
    padding: 12px 10px;
    flex-wrap: wrap;
  }
  .msg-header-info {
    flex: 1 1 0;
    min-width: 0;
  }
  .msg-header-right {
    order: 4;
    flex-basis: 100%;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding-left: 48px; /* align with text after avatar(36) + gap(12) */
    margin-top: 2px;
  }
  .msg-copy-link {
    display: none;
  }
  .msg-body-wrap {
    padding-left: 10px;
    padding-right: 4px;
    overflow-x: auto;
  }

  /* Prevent email iframes from overflowing */
  .email-iframe {
    max-width: 100%;
  }

  /* Prevent long email addresses / subjects from blowing out width */
  .detail-subject, .thread-detail-subject {
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .meta-field-wrap {
    word-break: break-all;
  }

  /* Attachment pills: wrap on narrow screens */
  .thread-att-pills {
    flex-wrap: wrap;
  }
  .att-chip {
    max-width: 100%;
    min-width: 0;
  }
  .att-chip-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* Narrower date column in thread rows */
  .thread-row {
    grid-template-columns: 44px 1fr 56px;
  }
  .thread-main {
    overflow: hidden;
  }
  .thread-subject-line, .thread-participants {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ── DRIVER.JS TOUR — font overrides ─────────────────────── */

.driver-popover,
.driver-popover * {
  font-family: 'Google Sans', Roboto, Arial, sans-serif !important;
}
.driver-popover-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #202124 !important;
}
.driver-popover-description {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #5f6368 !important;
  line-height: 1.5 !important;
}
.driver-popover-footer button,
.driver-popover-close-btn {
  font-size: 12px !important;
  font-weight: 500 !important;
}
.driver-popover-progress-text {
  font-size: 12px !important;
  color: #5f6368 !important;
}