/**
 * Investor Q&A — experimental motion only (v4)
 * Loads after qa-ui-polish-v3.css.
 * Keeps entrance + interaction motion; does NOT change layout rhythm.
 * Visual only, scoped to .gmail-shell.
 */

/* ═══════════════════════════════════════════════════════════
   MOTION SYSTEM
   ═══════════════════════════════════════════════════════════ */

:root {
  --qa-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --qa-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --qa-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --qa-ease-snap: cubic-bezier(0.2, 0.9, 0.3, 1.15);
  --qa-stagger: 0.07s;
}

@keyframes qa-aurora {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0.55;
  }
  40% {
    transform: translate3d(2%, 1%, 0);
    opacity: 0.85;
  }
  70% {
    transform: translate3d(-1%, 2%, 0);
    opacity: 0.7;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 0.55;
  }
}

@keyframes qa-orb-drift {
  0%, 100% { transform: translate(0, 0); }
  33% { transform: translate(2%, -1%); }
  66% { transform: translate(-1%, 2%); }
}

@keyframes qa-rise-blur {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.97);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes qa-clip-reveal {
  from {
    opacity: 0;
    clip-path: inset(12% 8% 18% 8% round 16px);
    transform: translateY(22px) scale(0.98);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0 round 0);
    transform: translateY(0) scale(1);
  }
}

@keyframes qa-slide-skew {
  from {
    opacity: 0;
    transform: translateX(-22px) skewX(-1.5deg);
  }
  to {
    opacity: 1;
    transform: translateX(0) skewX(0);
  }
}

@keyframes qa-slide-skew-r {
  from {
    opacity: 0;
    transform: translateX(28px) skewX(1.2deg) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateX(0) skewX(0) scale(1);
  }
}

@keyframes qa-topbar-drop {
  from {
    opacity: 0;
    transform: translateY(-18px);
    filter: blur(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes qa-compose-glow {
  0%, 100% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.5) inset,
      0 8px 24px rgba(0, 0, 0, 0.35),
      0 0 0 0 rgba(255, 255, 255, 0);
  }
  50% {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 12px 36px rgba(0, 0, 0, 0.4),
      0 0 40px 2px rgba(255, 255, 255, 0.06);
  }
}

@keyframes qa-shimmer-sweep {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

@keyframes qa-breathe-soft {
  0%, 100% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.08); }
}

@keyframes qa-stat-tick {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.04); }
  60% { transform: scale(0.98); }
}

@keyframes qa-vote-pop {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

@keyframes qa-panel-open {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT — left ~1/5, right ~4/5, no outer dark frame
   ═══════════════════════════════════════════════════════════ */

.gmail-shell .gmail-layout {
  /* ~28% left / ~72% right (was 1/5) */
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.85fr);
  gap: 0 12px;
  /* Fixed side inset from page edge (desktop) */
  padding: 0 160px;
  margin: 0;
  background: transparent;
  align-items: stretch;
  box-sizing: border-box;
}

@media (min-width: 1200px) {
  .gmail-shell .gmail-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.85fr);
    padding: 0 160px;
    gap: 0 14px;
  }
}

@media (min-width: 1400px) {
  .gmail-shell .gmail-layout {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.85fr);
    padding: 0 160px;
    gap: 0 16px;
  }
}

@media (min-width: 1600px) {
  .gmail-shell .gmail-layout {
    padding: 0 160px;
  }
}

.gmail-shell .col-nav {
  margin-top: 0;
  padding: 12px 8px 8px 0;
  gap: 14px;
  background: transparent;
}

.gmail-shell .col-workspace,
.gmail-shell .col-workspace.col-workspace-list-only {
  margin-top: 0;
  /* Base has padding + dark bg — that was the outer frame */
  padding: 0 !important;
  background: transparent !important;
}

/*
 * Left rail stack: Ask → My Questions → About
 * Keep a real gap so short / narrow viewports don’t crush About into My Q.
 */
.gmail-shell .col-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  min-height: 0;
}

.gmail-shell .nav-compose-stack {
  margin-top: 0 !important;
  /* Desktop: modest gap under buttons; mobile overridden at file end */
  margin-bottom: 12px !important;
  gap: 10px !important;
  flex: 0 0 auto !important;
  min-height: 0;
}

.gmail-shell .nav-compose-row {
  margin-bottom: 0;
}

/* Open My Questions list scrolls inside a cap — About stays below it */
.gmail-shell .nav-my-q-panel {
  max-height: min(220px, 30vh) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  margin: 0 !important;
  flex: 0 1 auto !important;
}

.gmail-shell .nav-about {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  padding: 18px 16px 16px;
  border-radius: 14px;
  flex: 0 0 auto !important;
}

/* Short windows: rail scrolls as a unit; more air between controls */
@media (max-height: 740px) {
  .gmail-shell .col-nav {
    gap: 16px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    -webkit-overflow-scrolling: touch;
  }

  .gmail-shell .nav-my-q-panel {
    max-height: min(160px, 26vh) !important;
  }
}

.gmail-shell .nav-about-label {
  margin-bottom: 12px;
  letter-spacing: 0.14em;
}

.gmail-shell .nav-about-starts {
  margin-bottom: 8px;
  font-size: 13px;
}

.gmail-shell .nav-about-close {
  margin-bottom: 14px;
}

.gmail-shell .nav-about-stats {
  margin-bottom: 14px;
  padding-bottom: 0;
  gap: 18px;
  border-bottom: none;
}

.gmail-shell .nav-about-stat-value {
  font-size: 15px;
  letter-spacing: normal;
  line-height: normal;
}

.gmail-shell .col-list {
  /* Edge-to-edge in the right column — no floating card / panel fill */
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: transparent !important;
  /* Desktop: fill column so q-row-list can scroll inside */
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.gmail-shell .col-workspace,
.gmail-shell .col-workspace.col-workspace-list-only,
.gmail-shell .q-row-list {
  background: transparent !important;
}

/* q-row-list is the desktop scrollport */
.gmail-shell .q-row-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 6px 8px 20px;
  mask-image: none;
  -webkit-mask-image: none;
}

@media (max-width: 860px) {
  .gmail-shell .col-list {
    height: auto !important;
    overflow: visible !important;
  }

  .gmail-shell .q-row-list {
    flex: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
  }
}

.gmail-shell .workspace-filter-bar {
  /* Horizontal 0 on mobile (see max-width block) so filters line up with cards */
  padding: 12px 8px 10px !important;
  gap: 8px !important;
  background: transparent;
  border-bottom: none !important;
  box-shadow: none;
}

@media (max-width: 860px) {
  .gmail-shell .workspace-filter-bar {
    padding: 12px 0 10px !important;
  }
}

.gmail-shell .workspace-filter-bar.is-pinned {
  background: transparent;
  box-shadow: none;
  border: none !important;
  border-bottom: none !important;
  border-radius: 0;
}

/* Kill glowing/shimmer hairline under the filter bar */
.gmail-shell .workspace-filter-bar::after {
  content: none !important;
  display: none !important;
  animation: none !important;
}

/* Flatten wave / cascade indents from v3 experimental */
.gmail-shell .q-item,
.gmail-shell .q-row-list > .q-item:nth-child(odd),
.gmail-shell .q-row-list > .q-item:nth-child(even),
.gmail-shell .q-row-list > .q-item:nth-child(4n + 1),
.gmail-shell .q-row-list > .q-item:nth-child(4n + 2),
.gmail-shell .q-row-list > .q-item:nth-child(4n + 3),
.gmail-shell .q-row-list > .q-item:nth-child(4n + 4),
.gmail-shell .q-row-list > .q-item:first-child {
  margin: 0 0 6px;
  margin-left: 0;
  margin-right: 0;
  padding: 18px 16px 16px;
  border-radius: 12px;
}

.gmail-shell .q-item-text,
.gmail-shell .q-row-list > .q-item:first-child .q-item-text,
.gmail-shell .q-row-list > .q-item:nth-child(2) .q-item-text,
.gmail-shell .q-row-list > .q-item:nth-child(3) .q-item-text,
.gmail-shell .q-row-list > .q-item:nth-child(n + 6) .q-item-text {
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: rgba(255, 255, 255, 0.92);
}

@media (max-width: 860px) {
  .gmail-shell .gmail-layout {
    grid-template-columns: 1fr;
    padding: 8px 12px 8px;
    gap: 20px;
  }

  .gmail-shell .col-nav {
    padding: 4px 0 8px;
    gap: 16px !important;
  }

  .gmail-shell .col-list {
    border-radius: 12px;
  }

  .gmail-shell .q-item,
  .gmail-shell .q-row-list > .q-item:first-child {
    padding: 16px 14px;
  }

  .gmail-shell .q-item-text,
  .gmail-shell .q-row-list > .q-item:first-child .q-item-text {
    font-size: 14.5px;
  }
}

/* ═══════════════════════════════════════════════════════════
   ATMOSPHERE — living background (motion only)
   ═══════════════════════════════════════════════════════════ */

.gmail-shell {
  isolation: isolate;
}

/*
 * Desktop: classic shell scroll — page fixed, only question list scrolls.
 * (Mobile page-scroll is scoped under max-width: 860px below.)
 */
@media (min-width: 861px) {
  .gmail-shell.shell,
  .shell.gmail-shell,
  .gmail-shell {
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .gmail-shell .gmail-layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: hidden !important;
    align-items: stretch !important;
  }

  .gmail-shell .col-nav {
    min-height: 0 !important;
    overflow: auto !important;
    height: auto !important;
    max-height: 100% !important;
  }

  .gmail-shell .col-workspace,
  .gmail-shell .col-workspace.col-workspace-list-only {
    min-height: 0 !important;
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .gmail-shell .col-list {
    flex: 1 1 auto !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .gmail-shell .q-row-list {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .gmail-shell .workspace-filter-bar {
    flex-shrink: 0 !important;
  }

  .gmail-shell .nav-footer-row {
    flex-shrink: 0 !important;
  }

  /* Atmosphere stays inside the fixed shell */
  .gmail-shell::before,
  .gmail-shell::after {
    inset: 0 !important;
  }
}

/* Drifting aurora — much quieter (left-side wash was too strong) */
.gmail-shell::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 40% 35% at 18% 28%, rgba(120, 150, 220, 0.035), transparent 62%),
    radial-gradient(ellipse 35% 30% at 82% 62%, rgba(180, 140, 90, 0.02), transparent 58%),
    radial-gradient(ellipse 28% 26% at 50% 82%, rgba(90, 110, 180, 0.02), transparent 55%);
  animation: qa-aurora 28s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.35;
}

.gmail-shell::before {
  inset: 0;
  animation: qa-orb-drift 28s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   ENTRANCE CHOREOGRAPHY
   ═══════════════════════════════════════════════════════════ */

.gmail-shell.qa-enter .topbar.topbar-event {
  animation: qa-topbar-drop 0.85s var(--qa-ease-out) both;
}

.gmail-shell.qa-enter .col-nav {
  animation: qa-slide-skew 0.9s var(--qa-ease-out) both;
  animation-delay: 0.1s;
}

.gmail-shell.qa-enter .col-list,
.gmail-shell.qa-enter .col-workspace {
  animation: qa-slide-skew-r 0.95s var(--qa-ease-out) both;
  animation-delay: 0.16s;
}

.gmail-shell.qa-enter .nav-footer-row {
  animation: qa-rise-blur 0.75s var(--qa-ease-out) both;
  animation-delay: 0.5s;
}

.gmail-shell.qa-enter .workspace-filter-bar {
  animation: qa-rise-blur 0.65s var(--qa-ease-out) both;
  animation-delay: 0.28s;
}

.gmail-shell.qa-enter .nav-compose {
  animation:
    qa-rise-blur 0.7s var(--qa-ease-spring) both,
    qa-compose-glow 3.8s ease-in-out 1.1s infinite;
  animation-delay: 0.14s, 0.9s;
}

.gmail-shell.qa-enter .nav-about {
  animation: qa-rise-blur 0.8s var(--qa-ease-out) both;
  animation-delay: 0.32s;
}

/* Items: clip-path reveal cascade */
.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item {
  animation: qa-clip-reveal 0.7s var(--qa-ease-out) both !important;
}

.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item:nth-child(1) { animation-delay: 0.32s !important; }
.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item:nth-child(2) { animation-delay: 0.4s !important; }
.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item:nth-child(3) { animation-delay: 0.48s !important; }
.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item:nth-child(4) { animation-delay: 0.55s !important; }
.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item:nth-child(5) { animation-delay: 0.62s !important; }
.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item:nth-child(6) { animation-delay: 0.69s !important; }
.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item:nth-child(7) { animation-delay: 0.75s !important; }
.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item:nth-child(8) { animation-delay: 0.81s !important; }
.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item:nth-child(9) { animation-delay: 0.87s !important; }
.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item:nth-child(10) { animation-delay: 0.93s !important; }
.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item:nth-child(11) { animation-delay: 0.98s !important; }
.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item:nth-child(12) { animation-delay: 1.03s !important; }
.gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item:nth-child(n + 13) { animation-delay: 1.08s !important; }

/* ═══════════════════════════════════════════════════════════
   INTERACTION MOTION (layout sizes/gaps unchanged)
   ═══════════════════════════════════════════════════════════ */

.gmail-shell .q-item {
  will-change: transform;
  transition:
    background 0.32s var(--qa-ease-soft),
    border-color 0.32s var(--qa-ease-soft),
    box-shadow 0.4s var(--qa-ease-out),
    transform 0.4s var(--qa-ease-spring),
    opacity 0.25s ease,
    filter 0.3s ease;
}

/* Soft hover — lift + very subtle color wash. Never scale (text looks bigger). */
.gmail-shell .q-item {
  position: relative;
  transform: translateY(0); /* stable layer so text doesn’t re-rasterize larger */
  isolation: isolate;
}

/* Subtle hover tint via overlay so status gradients stay underneath */
.gmail-shell .q-item::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  pointer-events: none;
  z-index: 0;
  transition: background 0.28s var(--qa-ease-soft);
}

.gmail-shell .q-item > * {
  position: relative;
  z-index: 1;
}

.gmail-shell .q-item:hover {
  transform: translateY(-2px) scale(1) !important;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.1),
    0 8px 22px rgba(0, 0, 0, 0.16);
  z-index: 3;
  filter: none;
}

/* Very subtle white wash on every card hover */
.gmail-shell .q-item:hover::before {
  background: rgba(255, 255, 255, 0.028);
}

/* Status-tinted hover — barely-there color shift matching each tone */
.gmail-shell .q-item.tone-answered:hover::before,
.gmail-shell .q-item.tone-queued:hover::before {
  background: rgba(140, 175, 230, 0.04);
}

/* Submitted hover = soft grey, not blue */
.gmail-shell .q-item.tone-open:hover::before,
.gmail-shell .q-item.tone-selected:hover::before {
  background: rgba(255, 255, 255, 0.03);
}

.gmail-shell .q-item.selected {
  transform: translateY(-1px) scale(1) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 12px 36px rgba(0, 0, 0, 0.28);
}

.gmail-shell .q-item.selected:hover {
  transform: translateY(-2px) scale(1) !important;
  border-color: rgba(255, 255, 255, 0.08);
}

.gmail-shell .q-item.selected:hover::before {
  background: rgba(255, 255, 255, 0.03);
}

/* Selected for webcast (queued) — same: no text/card scale on hover */
.gmail-shell .q-item.tone-queued:hover,
.gmail-shell .q-item.tone-queued.selected:hover {
  transform: translateY(-2px) scale(1) !important;
}

/* Meta chips cascade up on hover */
.gmail-shell .q-item .status-pill,
.gmail-shell .q-item .topic-pill,
.gmail-shell .q-item .topic-tag,
.gmail-shell .q-item .q-item-status,
.gmail-shell .q-item .vote-btn-inline {
  transition:
    transform 0.3s var(--qa-ease-spring),
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    box-shadow 0.25s ease;
}

.gmail-shell .q-item:hover .status-pill,
.gmail-shell .q-item:hover .q-item-status {
  transform: translateY(-2px);
}

.gmail-shell .q-item:hover .topic-pill,
.gmail-shell .q-item:hover .topic-tag {
  transform: translateY(-2px);
  transition-delay: 0.04s;
}

.gmail-shell .q-item:hover .vote-btn-inline {
  transform: translateY(-2px) scale(1.04);
  transition-delay: 0.08s;
}

/* Question body text — lock size/weight/tracking on every state */
.gmail-shell .q-item-text,
.gmail-shell .q-item:hover .q-item-text,
.gmail-shell .q-item.selected .q-item-text,
.gmail-shell .q-item.selected:hover .q-item-text,
.gmail-shell .q-item.tone-queued:hover .q-item-text,
.gmail-shell .q-item.tone-answered:hover .q-item-text,
.gmail-shell .q-item.tone-open:hover .q-item-text,
.gmail-shell .q-item.tone-selected:hover .q-item-text {
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  transform: none !important;
  scale: none !important;
  transition: color 0.25s ease !important;
}

.gmail-shell .q-item:hover .q-item-text,
.gmail-shell .q-item.selected .q-item-text,
.gmail-shell .q-item.selected:hover .q-item-text {
  color: #fff;
}

/* Compose — stay light on hover (base theme inverts to dark; that looked odd) */
.gmail-shell .nav-compose,
.gmail-shell .nav-compose-stack .nav-compose,
.gmail-shell .col-nav > .nav-compose {
  background: linear-gradient(180deg, #ffffff 0%, #ececec 100%) !important;
  color: #0a0a0a !important;
  border: none !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55) inset,
    0 6px 18px rgba(0, 0, 0, 0.28);
  transition:
    transform 0.25s var(--qa-ease-spring),
    box-shadow 0.3s ease,
    filter 0.2s ease,
    background 0.2s ease,
    color 0.2s ease;
}

/* No lift/scale on hover — col-nav overflow clips upward motion */
.gmail-shell .nav-compose:hover:not(:disabled),
.gmail-shell .nav-compose-stack .nav-compose:hover:not(:disabled),
.gmail-shell .col-nav > .nav-compose:hover:not(:disabled) {
  transform: none !important;
  filter: brightness(1.02);
  background: linear-gradient(180deg, #ffffff 0%, #f5f5f5 100%) !important;
  color: #050505 !important;
  border: none !important;
  animation: none !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 8px 22px rgba(0, 0, 0, 0.3);
}

.gmail-shell .nav-compose:active:not(:disabled),
.gmail-shell .nav-compose-stack .nav-compose:active:not(:disabled),
.gmail-shell .col-nav > .nav-compose:active:not(:disabled) {
  transform: none !important;
  filter: brightness(0.97);
  background: linear-gradient(180deg, #f0f0f0 0%, #e4e4e4 100%) !important;
  color: #0a0a0a !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.4) inset,
    0 3px 10px rgba(0, 0, 0, 0.22);
  transition-duration: 0.08s;
}

.gmail-shell .nav-compose:disabled,
.gmail-shell .nav-compose-stack .nav-compose:disabled {
  background: #2a2a2a !important;
  color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
  filter: none;
}

/* About ambient + hover lift (no layout reshape) */
.gmail-shell .nav-about {
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.35s ease,
    box-shadow 0.45s ease,
    transform 0.4s var(--qa-ease-out);
}

.gmail-shell .nav-about::after {
  content: "";
  position: absolute;
  inset: -50%;
  background: radial-gradient(
    circle at 25% 10%,
    rgba(255, 255, 255, 0.02),
    transparent 50%
  );
  animation: qa-breathe-soft 10s ease-in-out infinite;
  pointer-events: none;
  opacity: 0.35;
}

.gmail-shell .nav-about:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.025) inset,
    0 14px 36px rgba(0, 0, 0, 0.28);
}

/* My questions panel open motion */
.gmail-shell .nav-my-q-panel {
  animation: qa-panel-open 0.4s var(--qa-ease-out) both;
  transform-origin: top center;
}

.gmail-shell .nav-my-q-item {
  transition: background 0.18s ease, transform 0.25s var(--qa-ease-out);
}

.gmail-shell .nav-my-q-item:hover {
  background: rgba(255, 255, 255, 0.04);
  transform: translateX(3px);
}

/* Filter selects — press motion only (no shimmer line) */
.gmail-shell .bar-select {
  transition:
    transform 0.25s var(--qa-ease-spring),
    border-color 0.2s ease,
    background 0.2s ease,
    box-shadow 0.3s ease;
}

.gmail-shell .bar-select:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
}

.gmail-shell .bar-select:focus {
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.06);
}

.gmail-shell .bar-select:active {
  transform: translateY(0) scale(0.97);
}

/* Share + vote */
.gmail-shell .btn-share {
  transition:
    transform 0.25s var(--qa-ease-spring),
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.25s ease;
}

.gmail-shell .btn-share:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.gmail-shell .btn-share:active {
  transform: scale(0.94);
}

.gmail-shell .q-item .vote-btn-inline:active:not(:disabled) {
  animation: qa-vote-pop 0.35s var(--qa-ease-spring);
}

.gmail-shell .q-item .vote-btn-inline.active {
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(255, 255, 255, 0.08);
}

/* Topbar — match layout side inset (160px desktop) */
.gmail-shell .topbar.topbar-event {
  padding: 0 160px;
  box-sizing: border-box;
  background: rgba(5, 5, 5, 0.65);
  -webkit-backdrop-filter: blur(20px) saturate(1.35);
  backdrop-filter: blur(20px) saturate(1.35);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.03),
    0 12px 40px rgba(0, 0, 0, 0.25);
}

/*
 * Desktop topbar (red-ruler + centered unit):
 * 1) Logo + title share one bottom baseline (logo artwork bottom =
 *    title alphabetic baseline — the red line)
 * 2) That pair is vertically centered in the 64px bar
 *
 * Fonts leave descender space under the baseline even for caps, so a
 * plain flex-end of the line-box leaves the glyphs high. We trim that
 * with text-box-trim + a small fallback translate.
 */
@media (min-width: 861px) {
  .gmail-shell .topbar.topbar-event {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 160px !important;
    padding-right: 160px !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* Identical 18px strips, centered as one unit */
  .gmail-shell .topbar-brand,
  .gmail-shell .topbar-brand .brand,
  .gmail-shell .topbar-event-meta {
    display: flex !important;
    align-items: flex-end !important;
    align-self: center !important;
    height: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  /* Logo: SVG path bottoms sit on the strip floor */
  .gmail-shell .topbar-brand .brand-logo,
  .gmail-shell .topbar-brand .brand .brand-logo,
  .gmail-shell .brand-logo {
    display: block !important;
    height: 18px !important;
    width: auto !important;
    max-width: 200px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    object-position: left bottom !important;
  }

  /*
   * Title sits on the same floor as the logo path bottoms.
   * Caps still leave ~descender gap in the em-box; +2px drops the
   * alphabetic baseline onto the logo bottom (the red ruler).
   * Rest + hover must be identical (no size / tracking / transform jump).
   */
  .gmail-shell .topbar-event-title,
  .gmail-shell h1.topbar-event-title,
  .gmail-shell .topbar-event-title:hover,
  .gmail-shell h1.topbar-event-title:hover,
  .gmail-shell .topbar.topbar-event:hover .topbar-event-title,
  .gmail-shell .topbar-event-meta:hover .topbar-event-title {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 16.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    line-height: 1 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transform: translateY(2px) !important;
    scale: none !important;
    transition: none !important;
    text-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
    cursor: default !important;
    pointer-events: none; /* title is not interactive — no hover affordance */
  }

  .gmail-shell .topbar-actions {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
  }

  /* Desktop: non-interactive monogram (not a faux button next to Share) */
  .gmail-shell .topbar-user-av,
  .gmail-shell .avatar.topbar-user-av,
  .gmail-shell .topbar-user-av:hover,
  .gmail-shell .avatar.topbar-user-av:hover {
    width: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.55) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: none !important;
    box-shadow: none !important;
    cursor: default !important;
    pointer-events: none !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/*
 * Event title is display-only — never interactive.
 * iOS/Android sticky :hover after tap was enlarging the title on tablet/mobile
 * because rest vs hover rules could diverge. One selector list for every state.
 */
.gmail-shell .topbar-event-title,
.gmail-shell h1.topbar-event-title,
.gmail-shell .topbar-event-title:hover,
.gmail-shell h1.topbar-event-title:hover,
.gmail-shell .topbar-event-title:active,
.gmail-shell h1.topbar-event-title:active,
.gmail-shell .topbar-event-title:focus,
.gmail-shell .topbar-event-title:focus-visible,
.gmail-shell .topbar.topbar-event:hover .topbar-event-title,
.gmail-shell .topbar.topbar-event:active .topbar-event-title,
.gmail-shell .topbar-event-meta:hover .topbar-event-title,
.gmail-shell .topbar-event-meta:active .topbar-event-title,
.gmail-shell .topbar-event-meta:hover h1.topbar-event-title,
.gmail-shell .topbar-event-meta:active h1.topbar-event-title {
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  transition: none !important;
  /* Do not zero transform here — desktop uses translateY(2px) for logo baseline */
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  cursor: default !important;
  pointer-events: none !important;
  -webkit-tap-highlight-color: transparent !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  touch-action: manipulation !important;
  outline: none !important;
}

/* Parent meta also non-interactive so sticky :hover never lands on the title */
.gmail-shell .topbar-event-meta {
  pointer-events: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Pinned filter — identical UI to rest state (position handled separately) */
.gmail-shell .workspace-filter-bar.is-pinned {
  animation: none;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* Empty state */
.gmail-shell .list-empty {
  animation: qa-rise-blur 0.85s var(--qa-ease-out) both;
}

/* Footer — stay inside left column; wrap when narrow (no spill into questions) */
.gmail-shell .nav-footer-row,
.gmail-shell .gmail-layout > .nav-footer-row {
  padding-bottom: 12px;
  margin-bottom: 0;
  min-width: 0 !important; /* grid default min-content was forcing overflow */
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden; /* clip any residual spill into the right column */
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  transition: opacity 0.3s ease, transform 0.3s var(--qa-ease-out);
}

.gmail-shell .nav-footer-row:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.gmail-shell .nav-footer-row .nav-links,
.gmail-shell .nav-footer-row .nav-links.nav-links-compact,
.gmail-shell .nav-links.nav-links-compact {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px 10px !important;
  row-gap: 8px !important;
  column-gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Each control can sit on its own line; never force a single non-wrapping row */
.gmail-shell .nav-links-compact > a,
.gmail-shell .nav-links-compact > button,
.gmail-shell .nav-links-compact .built-with-grok,
.gmail-shell .nav-links-compact .nav-link-btn {
  flex: 0 1 auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Dots only between items on the same visual flow; shrink away if tight */
.gmail-shell .nav-links-compact .nav-dot {
  flex: 0 0 auto;
  margin: 0 !important;
}

/*
 * When the left rail is tight, hide the · separators so wrap is clean
 * (Built with Grok / Privacy / Quick Tips each on their own line if needed).
 */
@container (max-width: 220px) {
  .gmail-shell .nav-links-compact .nav-dot {
    display: none !important;
  }
}

/* Fallback without container queries — mid desktop with narrow rail */
@media (max-width: 1200px) {
  .gmail-shell .nav-links-compact .nav-dot {
    display: none !important;
  }

  .gmail-shell .nav-footer-row .nav-links.nav-links-compact {
    gap: 8px 12px !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE — keep motion softer, no layout experiments
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
  /* Top bar — keep avatar / share off the top edge + air under logo row */
  .gmail-shell .topbar.topbar-event {
    padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 18px !important;
    gap: 14px 12px !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    align-items: center !important;
  }

  .gmail-shell .topbar-brand {
    height: auto !important;
    padding-top: 2px;
  }

  .gmail-shell .topbar-actions {
    gap: 10px !important;
    align-items: center !important;
    padding-top: 2px;
  }

  /* Avatar stays a quiet monogram — don't match Share button size (looked clickable) */
  .gmail-shell .topbar-user-av,
  .gmail-shell .avatar.topbar-user-av {
    width: 28px !important;
    height: 28px !important;
    font-size: 10px !important;
    cursor: default !important;
    pointer-events: none !important;
    border: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.55) !important;
  }

  .gmail-shell .topbar-user-av:hover,
  .gmail-shell .avatar.topbar-user-av:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.55) !important;
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
  }

  .gmail-shell .btn-share {
    height: 36px !important;
    padding: 0 14px !important;
  }

  /* Title row — more space under brand/actions, before Ask button */
  .gmail-shell .topbar-event-meta {
    margin-top: 6px !important;
    padding-top: 10px !important;
    padding-bottom: 4px !important;
  }

  /* Mobile/tablet title size — identical for rest / hover / active / focus */
  .gmail-shell .topbar-event-title,
  .gmail-shell h1.topbar-event-title,
  .gmail-shell .topbar-event-title:hover,
  .gmail-shell h1.topbar-event-title:hover,
  .gmail-shell .topbar-event-title:active,
  .gmail-shell h1.topbar-event-title:active,
  .gmail-shell .topbar-event-title:focus,
  .gmail-shell .topbar-event-title:focus-visible,
  .gmail-shell .topbar.topbar-event:hover .topbar-event-title,
  .gmail-shell .topbar.topbar-event:active .topbar-event-title,
  .gmail-shell .topbar-event-meta:hover .topbar-event-title,
  .gmail-shell .topbar-event-meta:active .topbar-event-title {
    font-size: clamp(20px, 5.2vw, 26px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
    margin: 0 0 4px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
    pointer-events: none !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    cursor: default !important;
  }

  .gmail-shell .topbar-event-meta {
    pointer-events: none !important;
  }

  /* Left stack: Ask / My Questions / About — clear gap on mobile */
  .gmail-shell .col-nav {
    padding: 8px 0 12px !important;
    gap: 16px !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }

  .gmail-shell .nav-compose-stack {
    /* Match title → buttons air (~20px); padding does not collapse */
    margin-bottom: 0 !important;
    padding-bottom: 20px !important;
    gap: 12px !important;
  }

  .gmail-shell .nav-compose-row {
    margin-bottom: 0 !important;
    gap: 10px !important;
    padding-top: 0 !important;
  }

  .gmail-shell .nav-compose,
  .gmail-shell .nav-compose-stack .nav-compose {
    height: 48px !important;
    min-height: 48px !important;
    max-height: none !important;
  }

  .gmail-shell .nav-my-q-toggle {
    height: 48px !important;
    min-height: 48px !important;
  }

  .gmail-shell .nav-my-q-panel {
    max-height: min(200px, 28vh) !important;
    margin-bottom: 4px !important;
  }

  .gmail-shell .nav-about {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
    padding: 20px 16px 18px !important;
  }

  .gmail-shell .nav-about-label {
    margin-bottom: 14px !important;
  }

  .gmail-shell .nav-about-starts {
    margin-bottom: 12px !important;
  }

  .gmail-shell .nav-about-close {
    margin-bottom: 16px !important;
  }

  .gmail-shell .nav-about-stats {
    margin-bottom: 16px !important;
    padding-bottom: 0 !important;
  }

  .gmail-shell .gmail-layout {
    padding: 12px 14px 8px !important;
    gap: 22px !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
  }

  /* No trailing empty band under footer links */
  .gmail-shell .nav-footer-row {
    padding: 8px 0 12px !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  .gmail-shell .q-row-list {
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
  }

  .gmail-shell .col-list,
  .gmail-shell .col-workspace,
  .gmail-shell .col-nav {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    min-height: 0 !important;
  }

  /*
   * Kill double-scroll: only the document scrolls.
   * Base CSS re-applies overflow-y:auto / overflow:hidden AFTER the
   * mobile block, so we force-visible with !important on every shell child.
   */
  html {
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body {
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
  }

  #root {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .gmail-shell.shell,
  .shell.gmail-shell,
  .gmail-shell {
    display: block !important;
    height: auto !important;
    /* Don’t force a full-viewport shell — that left a dead band under the footer */
    min-height: 0 !important;
    max-height: none !important;
    /* clip keeps aurora from extending scrollHeight; not a scroll container */
    overflow-x: clip !important;
    overflow-y: clip !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .gmail-shell::before,
  .gmail-shell::after {
    inset: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
    animation: none !important;
  }

  .gmail-shell .nav-about::after {
    inset: 0 !important;
    animation: none !important;
  }

  .gmail-shell .gmail-layout,
  .gmail-shell .col-nav,
  .gmail-shell .col-workspace,
  .gmail-shell .col-workspace.col-workspace-list-only,
  .gmail-shell .col-list,
  .gmail-shell .q-row-list,
  .gmail-shell .nav-footer-row {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  .gmail-shell .col-list {
    border-radius: 12px;
  }

  /* No transform/filter containing blocks (breaks fixed + sticky) */
  .gmail-shell,
  .gmail-shell .gmail-layout,
  .gmail-shell .col-nav,
  .gmail-shell .col-workspace,
  .gmail-shell .col-list,
  .gmail-shell.qa-enter .col-nav,
  .gmail-shell.qa-enter .col-list,
  .gmail-shell.qa-enter .col-workspace {
    transform: none !important;
    filter: none !important;
    perspective: none !important;
    will-change: auto !important;
    contain: none !important;
  }

  /* Filter bar — same UI stuck or not (no alternate pinned chrome).
   * Horizontal pad 0 so dropdowns share the question-card left edge. */
  .gmail-shell .workspace-filter-bar {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    top: env(safe-area-inset-top, 0px) !important;
    z-index: 80 !important;
    padding: 10px 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: none !important;
    box-shadow: none !important;
    justify-content: flex-start !important;
  }

  .gmail-shell .workspace-filter-bar.is-pinned,
  .gmail-shell .workspace-filter-bar.qa-filter-stuck,
  [data-qa-filter-clone="1"] {
    /* Solid page bg when stuck so list text doesn’t bleed through */
    background: #050505 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    filter: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    justify-content: flex-start !important;
  }

  /* Fixed clone host: solid strip matching page, no elevated chrome.
   * left/right are set in JS to the question-card column edges. */
  [data-qa-filter-clone-host="1"] {
    background: #050505 !important;
    box-shadow: none !important;
    border: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Full-bleed opaque band behind the controls */
    padding-top: env(safe-area-inset-top, 0px) !important;
  }

  [data-qa-filter-clone="1"] .bar-select,
  [data-qa-filter-clone="1"] .bar-control,
  .gmail-shell .workspace-filter-bar .bar-select,
  .gmail-shell .workspace-filter-bar .bar-control {
    margin-left: 0 !important;
  }

  .gmail-shell .qa-filter-stuck-spacer {
    display: block;
    width: 100%;
    flex-shrink: 0;
    pointer-events: none;
  }

  /* Kill custom thin scrollbar chrome from v3 (was painting a 2nd bar) */
  .gmail-shell .q-row-list {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }

  .gmail-shell .q-row-list::-webkit-scrollbar,
  .gmail-shell .col-list::-webkit-scrollbar,
  .gmail-shell .gmail-layout::-webkit-scrollbar,
  .gmail-shell::-webkit-scrollbar,
  .gmail-shell *::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
  }

  .gmail-shell .q-item:hover,
  .gmail-shell .q-item.selected,
  .gmail-shell .q-item.selected:hover {
    transform: none;
  }

  .gmail-shell .nav-about:hover {
    transform: none;
  }

  .gmail-shell::after {
    animation: none;
    opacity: 0.4;
  }
}

/*
 * Mobile single-scroll — final overrides (must stay last).
 * Beats base CSS that re-enables overflow-y:auto after the mobile block.
 */
@media (max-width: 860px) {
  html {
    overflow-x: clip !important;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 0 !important;
  }

  body,
  #root {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .gmail-shell .gmail-layout,
  .gmail-shell .col-nav,
  .gmail-shell .col-workspace,
  .gmail-shell .col-workspace.col-workspace-list-only,
  .gmail-shell .col-list,
  .gmail-shell .q-row-list,
  .gmail-shell .workspace-filter-bar,
  .gmail-shell .nav-compose-stack,
  .gmail-shell .nav-about,
  .gmail-shell .nav-footer-row {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
  }

  .shell.gmail-shell,
  .gmail-shell.shell,
  .gmail-shell {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: clip !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .gmail-shell .gmail-layout {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .gmail-shell .nav-footer-row {
    padding-top: 8px !important;
    padding-bottom: 12px !important;
    margin-bottom: 0 !important;
  }

  .gmail-shell .col-list {
    /* v3 sets height:100% + overflow:hidden — kill both */
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .gmail-shell .q-row-list {
    flex: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    padding-bottom: 8px !important;
    margin-bottom: 0 !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .gmail-shell::before,
  .gmail-shell::after,
  .gmail-shell.qa-enter .topbar.topbar-event,
  .gmail-shell.qa-enter .col-nav,
  .gmail-shell.qa-enter .col-list,
  .gmail-shell.qa-enter .col-workspace,
  .gmail-shell.qa-enter .nav-footer-row,
  .gmail-shell.qa-enter .qa-enter-3 .q-row-list > .q-item,
  .gmail-shell.qa-enter .workspace-filter-bar,
  .gmail-shell.qa-enter .nav-compose,
  .gmail-shell.qa-enter .nav-about,
  .gmail-shell .workspace-filter-bar::after,
  .gmail-shell .nav-about::after,
  .gmail-shell .nav-my-q-panel,
  .gmail-shell .list-empty,
  .gmail-shell .workspace-filter-bar.is-pinned {
    animation: none !important;
  }

  .gmail-shell .q-item,
  .gmail-shell .nav-compose,
  .gmail-shell .nav-about,
  .gmail-shell .bar-select,
  .gmail-shell .btn-share,
  .gmail-shell .nav-my-q-item,
  .gmail-shell .q-item-text,
  .gmail-shell .nav-footer-row {
    transition: none !important;
  }

  .gmail-shell .q-item:hover,
  .gmail-shell .q-item.selected,
  .gmail-shell .q-item.selected:hover,
  .gmail-shell .nav-about:hover,
  .gmail-shell .nav-compose:hover:not(:disabled) {
    transform: none !important;
  }
}

/*
 * FINAL mobile gap: Ask / My Questions vs About
 * Padding-bottom on the button stack does not collapse (margins do).
 * Do NOT use padding-top on .nav-about — that only grows inside the card,
 * so the card border still touches the buttons.
 * qa-mobile-nav-gap.css/js also enforce this after load.
 */
@media (max-width: 860px) {
  .gmail-shell .col-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }

  .gmail-shell .nav-compose-stack {
    margin: 0 !important;
    padding-bottom: 20px !important;
  }

  .gmail-shell .nav-compose-stack:has(.nav-my-q-panel) {
    padding-bottom: 20px !important;
  }

  .gmail-shell .nav-rail-spacer {
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    flex: 0 0 0 !important;
    visibility: hidden !important;
    overflow: hidden !important;
  }

  .gmail-shell .nav-about {
    margin-top: 0 !important;
    margin-bottom: 24px !important;
  }
}

/*
 * Mobile: question list same width as About card.
 * About sits full-bleed in .col-nav (no side pad). The list had extra
 * horizontal padding on .q-row-list / filter bar / workspace — remove it
 * so cards align with About’s left/right edges.
 */
@media (max-width: 860px) {
  .gmail-shell .col-workspace,
  .gmail-shell .col-workspace.col-workspace-list-only,
  .gmail-shell .col-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .gmail-shell .q-row-list {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .gmail-shell .workspace-filter-bar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .gmail-shell .q-item,
  .gmail-shell .q-row-list > .q-item,
  .gmail-shell .q-row-list > .q-item:nth-child(odd),
  .gmail-shell .q-row-list > .q-item:nth-child(even),
  .gmail-shell .q-row-list > .q-item:first-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .gmail-shell .list-empty {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /*
   * iOS Safari auto-zooms focused inputs with font-size < 16px, then often
   * stays zoomed after the Ask modal closes. Keep form fields ≥16px so the
   * main page never “zooms in” after submit.
   */
  .ask-textarea,
  .ask-modal textarea,
  .ask-modal input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .ask-modal select,
  .gmail-shell .ask-textarea,
  .gmail-shell textarea,
  .gmail-shell input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .gmail-shell select.bar-select,
  .gmail-shell .bar-select,
  .delete-popup input,
  .tips-popup input {
    font-size: 16px !important;
  }

  .ask-textarea,
  .gmail-shell .ask-textarea {
    line-height: 1.5 !important;
  }
}


/*
 * TITLE TAP/HOVER LOCK (tablet + mobile) — final cascade win
 * Sticky :hover after tap must not change size/weight/tracking.
 */
@media (max-width: 1024px) {
  .gmail-shell .topbar-event-title,
  .gmail-shell h1.topbar-event-title,
  .gmail-shell .topbar-event-title:hover,
  .gmail-shell h1.topbar-event-title:hover,
  .gmail-shell .topbar-event-title:active,
  .gmail-shell h1.topbar-event-title:active,
  .gmail-shell .topbar-event-title:focus,
  .gmail-shell .topbar-event-title:focus-visible,
  .gmail-shell .topbar.topbar-event:hover .topbar-event-title,
  .gmail-shell .topbar.topbar-event:active .topbar-event-title,
  .gmail-shell .topbar-event-meta:hover .topbar-event-title,
  .gmail-shell .topbar-event-meta:active .topbar-event-title,
  .gmail-shell .topbar-event-meta:hover h1.topbar-event-title,
  .gmail-shell .topbar-event-meta:active h1.topbar-event-title {
    font-size: clamp(20px, 5.2vw, 26px) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
    color: rgba(255, 255, 255, 0.92) !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    text-shadow: none !important;
    outline: none !important;
    cursor: default !important;
    pointer-events: none !important;
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    touch-action: manipulation !important;
  }

  .gmail-shell .topbar-event-meta {
    pointer-events: none !important;
  }
}