/* Umbra Mail (Chrome extension): the two typefaces ship inside the extension, nothing is fetched from Google Fonts.
   The build puts this in front of src/umbra.css in place of its Google Fonts @import, and compat.js turns
   / into the extension's own address. Both fonts: SIL Open Font License 1.1 (fonts/LICENSE-*.txt),
   woff2 files and unicode ranges from Fontsource 5.3.0 (@fontsource-variable/instrument-sans, @fontsource-variable/newsreader). */

/* Instrument Sans: variable weight 400–700 (Umbra uses 400, 450, 500 and 600) */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/instrument-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Newsreader: variable optical size 6–72 (follows the font size on its own) and weight 200–800 */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/newsreader-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Umbra for Gmail — Quiet
   Two layers:
   1. Gmail, kept working underneath, with its chrome removed and its
      pop-ups (compose, menus, dialogs, toasts) restyled and lifted on top.
   2. Umbra's own screens (#qm-view), drawn to the Quiet design.
   ========================================================================== */

html.qm {
  --bg: #0f1012;
  --bg-rgb: 15, 16, 18;
  --row-hover: #15171a;
  --s1: #17191c;
  --s2: #1a1c20;
  --s3: #1e2024;
  --sel: #202328;
  --mine: #26292e;
  --chip: #1d1f23;
  --chip-2: #222429;
  --line: #1e2125;
  --line-2: #24272c;
  --line-3: #2b2e34;
  --hi: #2a2d33;
  --side: #16181b;
  --text: #eceae6;
  --text-2: #dad7d2;
  --text-3: #9a9ea5;
  --text-4: #8a8e95;
  --text-5: #6a6e75;
  --text-6: #7a7e85;
  --icon: #858990;
  --hover: #24272c;
  --hover-2: #1c1f23;
  --scroll: #2b2e34;
  --ring: #3d4148;
  --avatar: #25282d;
  --ink: #0f1012;
  --ink-line: #b8b5af;
  --primary-hover: #fff;
  --text-hi: #fff;
  --text-rgb: 236, 234, 230;
  --shade: 0, 0, 0;
  --tint: 255, 255, 255;
  --scrim: 9, 10, 11;
  --sans: "Instrument Sans", ui-sans-serif, -apple-system, system-ui, sans-serif;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* Zen's compact-mode spring */
  --zen-spring: linear(0 0%, .0105 2%, .0388 4%, .0803 6%, .1313 8%, .1887 10%, .2498 12%, .3127 14%, .3757 16%, .4374 18%, .497 20%, .5536 22%, .6068 24%, .6563 26%, .7018 28%, .7434 30%, .781 32%, .8147 34%, .8448 36%, .8714 38%, .8948 40%, .9151 42%, .9327 44%, .9478 46%, .9606 48%, .9714 50%, .9803 52%, .9878 54%, .9938 56%, .9987 58%, 1.0025 60%, 1.0054 62%, 1.0075 64%, 1.0091 66%, 1.0101 68%, 1.0106 70%, 1.0109 72%, 1.0109 74%, 1.0106 76%, 1.01 78%, 1.0094 80%, 1.0088 82%, 1.0081 84%, 1.0074 86%, 1.0067 88%, 1.006 90%, 1.0054 92%, 1.0048 94%, 1.0042 96%, 1.0037 98%, 1.0034 100%);
  --spring-snappy: linear(0, 0.018, 0.064, 0.129, 0.204, 0.285, 0.366, 0.445, 0.52, 0.589, 0.652, 0.709, 0.759, 0.802, 0.84, 0.872, 0.899, 0.921, 0.94, 0.955, 0.968, 0.977, 0.985, 0.991, 0.996, 0.999, 1.001, 1.003, 1.004, 1.005, 1.005, 1.005, 1.005, 1.005, 1.004, 1.004, 1.003, 1.003, 1.003, 1.002, 1);
  --spring-smooth: linear(0, 0.019, 0.068, 0.134, 0.208, 0.286, 0.363, 0.436, 0.505, 0.568, 0.625, 0.676, 0.721, 0.761, 0.795, 0.826, 0.852, 0.874, 0.893, 0.91, 0.924, 0.936, 0.946, 0.955, 0.962, 0.968, 0.974, 0.978, 0.982, 0.985, 0.987, 0.989, 0.991, 0.993, 0.994, 0.995, 0.996, 0.996, 0.997, 0.998, 1);
  --spring-bouncy: linear(0, 0.028, 0.099, 0.198, 0.314, 0.434, 0.553, 0.663, 0.763, 0.848, 0.919, 0.975, 1.018, 1.048, 1.068, 1.079, 1.083, 1.082, 1.077, 1.069, 1.059, 1.049, 1.039, 1.03, 1.021, 1.014, 1.008, 1.003, 0.999, 0.996, 0.995, 0.993, 0.993, 0.993, 0.993, 0.994, 0.995, 0.996, 0.997, 0.997, 1);
  --spring-gentle: linear(0, 0.017, 0.061, 0.124, 0.2, 0.283, 0.368, 0.452, 0.533, 0.609, 0.679, 0.741, 0.797, 0.845, 0.886, 0.921, 0.95, 0.973, 0.991, 1.005, 1.016, 1.023, 1.028, 1.03, 1.031, 1.031, 1.03, 1.028, 1.026, 1.023, 1.021, 1.018, 1.015, 1.013, 1.011, 1.009, 1.007, 1.005, 1.004, 1.003, 1);
  color-scheme: dark;
  background: var(--bg) !important;
}

@keyframes qm-fade { from { opacity: 0; } }
@keyframes qm-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes qm-pop { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes qm-drop { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
/* arriving on a spring: menus grow from where they're anchored, notes rise, sheets settle */
@keyframes qm-menu-in { from { opacity: 0; transform: translateY(-4px) scale(.94); } }
@keyframes qm-note-in { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes qm-sheet-in { from { opacity: 0; transform: translateY(8px) scale(.965); } }

/* =================================================================== 1. Gmail underneath */

html.qm body { background: var(--bg) !important; color: var(--text) !important; overflow: hidden !important; }
html.qm :is(.wl, .wq, .wp, .wo, .wn, .vI8oZc, .yL) { background: var(--bg) !important; background-image: none !important; }

/* Gmail chrome Umbra replaces */
html.qm :is(.nH.w-asV, header#gb, .aeN, [gh="cm"], .bAw, .aUx, div.nH:has(> .aUx)),
html.qm :is([aria-label*="Gemini" i]:not(input), [data-tooltip*="Gemini" i], [aria-label="Studio"], [aria-label*="Summarize" i], .CL.u7KLgd, .k1rxSb):not(#qm-view *, #qm-panel *, #qm-pal *, #qm-side *, .qm-menu *, #qm-rail *),
html.qm :is([role="tooltip"].ne2Ple-oshW8e-J9, .T-ays) {
  display: none !important;
}
html.qm.qm-sidepanel :is(.bAw, .aUx, div.nH:has(> .aUx)) { display: block !important; }

/* Gmail's pages that Umbra doesn't redraw (settings, filters, …): dark and calm */
html.qm .Tm.aeJ { height: 100vh !important; }
html.qm :is(.aeJ, .aeF, .AO, .Tm, .bkK, .bkK > .nH, .ar4, .aeH, .G-atb, [role="main"], .r4, .v9) { background-color: var(--bg) !important; background-image: none !important; box-shadow: none !important; border-radius: 0 !important; }
html.qm .bkK { margin-left: 0 !important; }
html.qm { scrollbar-color: var(--scroll) transparent; }
html.qm.qm-gmailpage .aeH { max-width: 1040px !important; margin: 0 auto !important; padding: 64px 32px 0 !important; box-sizing: border-box !important; }
#qm-gback {
  all: unset; box-sizing: border-box; position: fixed; z-index: 2147479100; top: 24px; left: 24px; width: 44px; height: 44px;
  display: none; align-items: center; justify-content: center; border-radius: 10px; color: var(--icon); cursor: pointer;
  transition: color .12s var(--ease), background-color .12s var(--ease);
}
#qm-gback:hover { color: var(--text); background: var(--hover); }
#qm-gback:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
#qm-gback svg { width: 20px; height: 20px; }
html.qm.qm-gmailpage #qm-gback { display: inline-flex; }
html.qm.qm-gmailpage .bkK [role="main"] { max-width: 1040px !important; margin: 0 auto !important; padding: 48px 32px 96px !important; box-sizing: border-box !important; }
html.qm.qm-gmailpage .bkK :where(div, table, td, th, tr, tbody, span, ul, li, form):not(.T-I-atl):not(.aoO) { background-color: transparent !important; }
html.qm.qm-gmailpage .bkK :where(div, span, td, th, label, li, b, h2, h3, p) { color: var(--text-2) !important; }
html.qm.qm-gmailpage .bkK :where(div, span, td, th, label, li, b, h2, h3, p, a, button, input, select, textarea) { font-family: var(--sans) !important; }
html.qm.qm-gmailpage .aeH h2.dt { font: 600 30px/1.2 var(--sans) !important; letter-spacing: -0.015em; color: var(--text) !important; }
html.qm.qm-gmailpage .bkK a { color: var(--text) !important; }
html.qm.qm-gmailpage .bkK :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea) { background-color: var(--s1) !important; color: var(--text) !important; border: 1px solid var(--line-3) !important; border-radius: 9px !important; }
html.qm.qm-gmailpage .bkK input:is([type="radio"], [type="checkbox"]) { accent-color: var(--text); }
html.qm.qm-gmailpage .bkK tr.r7 { border-bottom: 1px solid var(--line) !important; }
html.qm.qm-gmailpage .bkK [role="tab"], html.qm.qm-gmailpage .bkK [role="tab"] * { color: var(--text-5) !important; border-color: transparent !important; }
html.qm.qm-gmailpage .bkK [role="tab"][aria-selected="true"], html.qm.qm-gmailpage .bkK [role="tab"][aria-selected="true"] * { color: var(--text) !important; }

/* Gmail's floating things sit above Umbra's screens */
html.qm .dw { z-index: 2147480200 !important; }
html.qm :is([role="menu"], .J-M, [role="listbox"]:not(.afx), .gssb_c, .Kj-JD, [role="alertdialog"], .bAh, .aSs, .aSt, .Kj-JE):not(#qm-pal *, .qm-menu, .qm-menu *, #qm-tpl, #qm-tpl *, .qm-confirm, .qm-confirm *) { z-index: 2147480400 !important; }
html.qm .b8 { z-index: 2147480300 !important; }
html.qm .aLF-aPX { z-index: 2147480600 !important; }

/* --- writing windows: Gmail's reply (floated) and compose, drawn to the design --- */
html.qm .ip.qm-float {
  position: fixed !important; z-index: 2147480250 !important;
  right: 32px; bottom: 32px; width: min(620px, calc(100vw - 48px)) !important; max-height: calc(100vh - 64px);
  margin: 0 !important; padding: 0 !important; overflow: hidden auto; visibility: visible !important;
  border-radius: 16px !important; background: var(--s2) !important; border: 1px solid var(--line-3) !important;
  box-shadow: 0 14px 40px rgba(var(--shade), .34), 0 1px 3px rgba(var(--shade), .22) !important;
  translate: var(--qm-dx, 0px) var(--qm-dy, 0px);
  animation: qm-pop .28s var(--ease-out) both;
  transition: opacity .16s var(--ease);
}
html.qm .ip.qm-float.qm-full { left: 48px; top: 48px; right: 48px; bottom: 48px; width: auto !important; max-height: none; translate: none; }
html.qm .ip.qm-float.qm-tucked { opacity: 0; pointer-events: none; }
html.qm .nH.Hd[role="dialog"], html.qm .qm-winprobe {
  border-radius: 16px !important; overflow: hidden !important;
  background: var(--s2) !important; border: 1px solid var(--line-3) !important;
  box-shadow: 0 14px 40px rgba(var(--shade), .34), 0 1px 3px rgba(var(--shade), .22) !important;
  translate: var(--qm-dx, 0px) var(--qm-dy, 0px);
}
html.qm .nH.Hd[role="dialog"].qm-new { animation: qm-pop .28s var(--ease-out) both; }
/* a window is as tall as what's in it (Gmail fixes its inner height, so a notice it adds, like "Be cautious about
   sharing sensitive information", would push Send out of the bottom); only the message area gives way to the screen */
html.qm :is(.nH.Hd[role="dialog"], .qm-msnap) .aoI { height: auto !important; }
html.qm :is(.nH.Hd[role="dialog"], .qm-msnap)[data-qm-fit] .M9 .GP { min-height: 0 !important; max-height: var(--qm-bodymax) !important; }
html.qm :is(.nH.Hd[role="dialog"], .qm-msnap)[data-qm-fit] .M9 .qz { max-height: var(--qm-bodymax) !important; }
/* Gmail docks compose to the bottom edge, inset for its side rails; float it like the reply window */
html.qm .dw .jvV5Me { position: absolute !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 27px !important; width: auto !important; }
html.qm .dw .AD { bottom: 32px !important; }
html.qm :is(.nH.Hd[role="dialog"], .qm-msnap) .aoI { padding: 0 !important; }
html.qm .dw :is(.no, .nn, .nH) { background: transparent !important; }
html.qm :is(.aSs, .aSt) .nH.Hd[role="dialog"] { translate: none; }

/* everything inside a writing window: dark surfaces, light text */
html.qm :is(.ip.qm-float, .ip.qm-bar, :is(.nH.Hd[role="dialog"], .qm-msnap)) :where(*):not(.dC, .dC *, svg, path, img, .qm-whead, .qm-whead *, .qm-aibar, .qm-aibar *, .afV, .akl, .agh, .dL, .ajR, [role="menu"], [role="menu"] *, .J-M, .J-M *) { background-color: transparent !important; box-shadow: none !important; }
html.qm :is(.ip.qm-float, .ip.qm-bar, :is(.nH.Hd[role="dialog"], .qm-msnap)) :where(div, span, td, input, label, p, a, li, b, i, u, font, h2):not(.dC *, .notranslate, .J-M *, .qm-whead *, .qm-aibar *) { color: var(--text) !important; font-family: var(--sans) !important; }
html.qm .M9 :is(.aDj, .aDh, .aDg, .btC, .hL, .aDv, td.I5, .aoI)::before,
html.qm .M9 :is(.aDj, .aDh, .aDg, .btC, .hL, .aDv, td.I5, .aoI)::after { display: none !important; }
html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)) .aDj { position: static !important; left: auto !important; width: auto !important; clip: auto !important; }
html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)) .aDg { height: auto !important; }
html.qm .M9 :is(.aC4:empty, .GM:empty) { display: none !important; }
html.qm .ip.qm-float :is(td.aoY, .pLw6bb, .bJvOmf, .mVCoBd, td.HQ, .bgW) { display: none !important; }
html.qm .ip.qm-float :is(table.aoP, td.I5, .M9, .aoI) { width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; }

/* Umbra's header on a writing window */
.qm-whead {
  flex: none; display: flex; align-items: center; gap: 2px; height: 52px; padding: 0 8px 0 20px; box-sizing: border-box;
  cursor: grab; user-select: none; touch-action: none; position: sticky; top: 0; z-index: 4; background: var(--s2);
  font: 400 15px var(--sans); color: var(--text-3);
}
.qm-whead:active { cursor: grabbing; }
.qm-whead .qm-wtitle { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-3); }
html.qm :is(.nH.Hd[role="dialog"], .qm-msnap) .aXJ { display: none !important; }

/* rows: To, Cc, Bcc, Subject */
html.qm .M9 :is(.aoD, .fX, .GS, .bze, tr.bzf, td.eV, td.ok, .wO, .anm, .afp, .aGb, .afx, .aH9, table.IG, td.Iy) { border-color: transparent !important; }
html.qm .M9 :is(.aoD.hl, .fX, .aoD.az6) { border-top: 1px solid var(--line-2) !important; border-bottom: 0 !important; min-height: 48px !important; padding-left: 20px !important; padding-right: 12px !important; box-sizing: border-box; }
html.qm .M9 table.IG { border-top: 1px solid var(--line-2) !important; border-radius: 0 !important; margin: 0 !important; width: 100% !important; }
html.qm .M9 table.IG td.Iy .aoD.hl { border-top: 0 !important; }
html.qm .ip.qm-float .M9 td.Iy .aoD.hl { display: flex; align-items: center; justify-content: flex-start !important; }
html.qm .ip.qm-float .M9 td.Iy .aoD.hl .oL { margin: 0 !important; flex: 1 1 auto; text-align: left !important; }
html.qm .ip.qm-float .M9 td.Iy .aoD.hl::before { content: "To"; width: 48px; flex: none; color: var(--icon); font: 400 15px var(--sans); }
html.qm .M9 :is(.gO, .aB, .aB *) { color: var(--icon) !important; font-size: 15px !important; }
html.qm .M9 .aB { padding: 8px 10px !important; border-radius: 8px !important; transition: color .12s var(--ease), background-color .12s var(--ease); }
html.qm .M9 .aB:hover { color: var(--text) !important; background-color: var(--hover) !important; }
html.qm .M9 :is(.oL, .oL *) { color: var(--text) !important; font-size: 16px !important; }
html.qm .M9 :is(input.agP, input.aoT) { background: transparent !important; color: var(--text) !important; font: 400 16px var(--sans) !important; border: 0 !important; outline: none !important; box-shadow: none !important; caret-color: var(--text); }
html.qm .M9 :is(input.agP, input.aoT)::placeholder { color: var(--text-5) !important; }
html.qm .M9 :is(.afV, .akl, .agh) { background: var(--hover) !important; border: 0 !important; border-radius: 14px !important; }
html.qm .M9 :is(.afV, .akl) * { color: var(--text) !important; background: transparent !important; }
html.qm .M9 .afX { filter: brightness(0) invert(.6); }
/* body */
html.qm .M9 .editable { font: 400 16px/1.6 var(--sans) !important; color: var(--text) !important; caret-color: var(--text); padding: 16px 20px 18px !important; box-sizing: border-box; }
html.qm .M9 .editable :is(div, p, span, font):not([style*="color"]) { color: inherit !important; }
html.qm .M9 .editable a { color: var(--text) !important; }
html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)) .M9 .editable :is(.gmail_quote, .gmail_quote *, .gmail_signature, .gmail_signature *) { color: var(--text-4) !important; }
html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)) .M9 .editable blockquote { margin: 4px 0 4px 2px !important; padding-left: 14px !important; border-left: 2px solid var(--line-3) !important; }
html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)) .M9 .editable { overflow-wrap: anywhere; }
html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)) .M9 .editable :is(img, table, div, blockquote, pre) { max-width: 100% !important; box-sizing: border-box; }
html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)) .M9 .editable img { height: auto !important; }
html.qm .M9 :is(.aO7, .GP, .qz, .et) { padding: 0 !important; }
html.qm .M9 .ajR { display: inline-flex !important; align-items: center; justify-content: center; width: 34px; height: 20px; margin: 0 0 12px 20px !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: rgba(var(--tint), .07) !important; cursor: pointer; transition: background-color .12s var(--ease); }
html.qm .M9 .ajR:hover { background: rgba(var(--tint), .14) !important; }
html.qm .M9 .ajR .ajT { filter: brightness(0) invert(.75); opacity: 1 !important; }
html.qm .M9 :is(.zYQAmc, [data-placeholder*="Gmail & Drive"], .QyAfwb) { display: none !important; }
/* attachments while writing */
html.qm .M9 .dL {
  display: inline-flex !important; align-items: center; gap: 12px; height: 44px; box-sizing: border-box;
  margin: 0 0 12px 20px !important; padding: 0 4px 0 12px !important;
  background: var(--chip-2) !important; border: 0 !important; border-radius: 12px !important; box-shadow: none !important;
}
html.qm .M9 .dL :is(.vI, .dO, a, div, span):not(.vq) { color: var(--text) !important; background: transparent !important; font: 400 15px var(--sans) !important; }
html.qm .M9 .dL .vJ { color: var(--text-3) !important; font-size: 14px !important; }
html.qm .M9 .dL .dQ { background: var(--hi) !important; border: 0 !important; border-radius: 2px !important; height: 3px !important; overflow: hidden; }
html.qm .M9 .dL :is(.dR, .dS, .a7Y) { background: var(--text) !important; }
html.qm .M9 .dL :is(.vq, [aria-label^="Remove" i]) { filter: brightness(0) invert(.6); border-radius: 8px; }
html.qm :is(.aC7, .aDE) { background: rgba(var(--bg-rgb), .94) !important; border-color: var(--line-3) !important; border-radius: 14px !important; }
html.qm :is(.aC7, .aDE) * { color: var(--text-2) !important; }
/* bottom row: attach, Aa, more · · · discard, Send */
html.qm .M9 .btC { display: flex !important; align-items: center; gap: 2px; border-top: 1px solid var(--line-2) !important; padding: 10px 12px 12px !important; }
html.qm .M9 .btC > td { display: flex !important; align-items: center; height: 44px !important; padding: 0 !important; border: 0 !important; }
html.qm .M9 .btC :is(.bAK, [aria-label="Formatting options"]) { display: flex !important; align-items: center; height: 40px !important; max-height: none !important; padding: 0 !important; }
html.qm .M9 .btC > td.a8X { order: 1; }
html.qm .M9 .btC > td.oc { order: 2; }
html.qm .M9 .btC > td.aYL { order: 3; }
html.qm .M9 .btC::after { content: ""; order: 4; flex: 1 1 auto; display: block !important; }
html.qm .M9 .btC > td.a0z { order: 5; margin-right: 8px; }
html.qm .M9 .btC > td.Up { order: 6; }
html.qm .M9 .btC > td:not(.a8X):not(.oc):not(.aYL):not(.a0z):not(.Up) { display: none !important; }
html.qm .M9 .btC .bAK > :not([aria-label^="Attach" i]):not([data-tooltip^="Attach" i]) { display: none !important; }
html.qm .M9 .btC :is(.wG, .J-Z-I, .J-JN-M-I, .oh, [aria-label="Formatting options"] > div) {
  width: 40px !important; height: 40px !important; margin: 0 !important; border-radius: 10px !important;
  display: flex !important; align-items: center; justify-content: center; transition: background-color .12s var(--ease);
}
html.qm .M9 .btC :is(.wG, .J-Z-I, .J-JN-M-I, .oh):hover { background-color: var(--hover) !important; }
html.qm .M9 .btC :is(.aaA, .dv, .og, .J-JN-M-I-JG, .G-asx) { filter: brightness(0) invert(.56); transition: filter .12s var(--ease); }
html.qm .M9 .btC :is(.wG, .J-Z-I, .J-JN-M-I, .oh):hover :is(.aaA, .dv, .og, .J-JN-M-I-JG) { filter: brightness(0) invert(.92); }
html.qm .dC { display: flex !important; align-items: stretch; border-radius: 12px !important; overflow: hidden; background: var(--text) !important; box-shadow: none !important; outline: none !important; }
html.qm .dC :is(.aoO, .T-I.hG):focus { outline: none !important; box-shadow: none !important; }
html.qm .dC :is(.aoO, .T-I.hG) { background: var(--text) !important; background-image: none !important; color: var(--ink) !important; border: 0 !important; box-shadow: none !important; height: 44px !important; margin: 0 !important; }
html.qm .dC .aoO { border-radius: 12px 0 0 12px !important; line-height: 44px !important; padding: 0 16px 0 20px !important; font: 600 16px/44px var(--sans) !important; }
html.qm .dC .T-I.hG { width: 40px !important; min-width: 40px !important; border-radius: 0 12px 12px 0 !important; border-left: 1px solid var(--ink-line) !important; padding: 0 !important; }
html.qm .dC .T-I.hG .G-asx { filter: brightness(0) !important; }
html.qm .M9 .btC .dC .T-I.hG .G-asx, html.qm .M9 .btC .dC .T-I.hG[aria-expanded="true"] .G-asx { filter: brightness(0) !important; }
html.qm.qm-light:not(.qm-soft) .dC .T-I.hG .G-asx, html.qm.qm-light:not(.qm-soft) .M9 .btC .dC .T-I.hG .G-asx, html.qm.qm-light:not(.qm-soft) .M9 .btC .dC .T-I.hG[aria-expanded="true"] .G-asx { filter: brightness(0) invert(1) !important; }
html.qm .dC :is(.aoO, .T-I.hG):hover { background: var(--primary-hover) !important; }
html.qm .dC :is(.aoO, .T-I.hG)::before { display: none !important; }
/* formatting bar */
html.qm .M9 :is(.aX, .eq, .J-Z, .aWQ) { background: var(--s3) !important; border-color: var(--line-3) !important; box-shadow: none !important; border-radius: 12px !important; }
html.qm .M9 .J-Z :is(.J-Z-I-J6-H, .e3, [class*="aaA"]) { filter: brightness(0) invert(.62); }
html.qm .M9 .J-Z .J-Z-I:hover { background: var(--hi) !important; }

/* --- Gmail's menus, pickers, dialogs, toasts --- */
html.qm :is([role="menu"], .J-M, .agJ, [role="listbox"]:not(.afx), .gssb_c, .aJg, .Kj-JD, [role="alertdialog"], .bAh, .ajB):not(#qm-pal *, .qm-menu, .qm-menu *, #qm-tpl, #qm-tpl *, .qm-confirm, .qm-confirm *) {
  background: var(--s2) !important; color: var(--text-2) !important;
  border: 1px solid var(--hi) !important; border-radius: 14px !important; box-shadow: 0 20px 50px rgba(var(--shade), .5) !important;
}
html.qm :is([role="menu"], .J-M):not(.qm-menu) { padding: 6px !important; animation: qm-menu-in .34s var(--spring-snappy) both; }
html.qm :is([role="menu"], .J-M, .Kj-JD, [role="alertdialog"], [role="listbox"], .gssb_c) :is(div, span, td, label, a, h1, h2, h3, p, li):not(.notranslate):not(#qm-pal *, .qm-menu, .qm-menu *, #qm-tpl, #qm-tpl *, .qm-confirm, .qm-confirm *) { color: var(--text-2) !important; font-family: var(--sans) !important; }
html.qm :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], .J-N):not(#qm-pal *, .qm-menu, .qm-menu *, #qm-tpl, #qm-tpl *, .qm-confirm, .qm-confirm *) { background-color: transparent !important; border-radius: 9px !important; color: var(--text-2) !important; font-size: 15px !important; transition: background-color .1s var(--ease); }
html.qm :is([role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], .J-N):is(:hover, .J-N-JT, [aria-selected="true"]):not(#qm-pal *, .qm-menu, .qm-menu *, #qm-tpl, #qm-tpl *, .qm-confirm, .qm-confirm *) { background-color: var(--hi) !important; color: var(--text) !important; }
html.qm :is(.J-Kh, [role="separator"]) { background: var(--line-2) !important; border-color: var(--line-2) !important; }
html.qm :is([role="menu"], .J-M) .J-N-JX { filter: brightness(0) invert(.6); }
html.qm :is([role="menu"], .J-M) svg { fill: var(--text-3) !important; }
html.qm :is([role="menu"], .J-M, .Kj-JD) input:not([type="checkbox"]):not([type="radio"]) { background: var(--s1) !important; color: var(--text) !important; border: 1px solid var(--line-3) !important; border-radius: 9px !important; }
html.qm .Kj-JD { padding: 24px !important; animation: qm-pop .2s var(--ease-out) both; }
html.qm :is(.Kj-JD-K7, .Kj-JD-K7 *) { color: var(--text) !important; font: 600 18px var(--sans) !important; background: transparent !important; }
html.qm :is(.Kj-JD-Jz, .Kj-JD-Jz *) { color: var(--text-2) !important; background: transparent !important; }
html.qm .Kj-JD-Jl button { border-radius: 10px !important; height: 40px !important; padding: 0 16px !important; font-family: var(--sans) !important; }
html.qm .Kj-JD-Jl button.J-at1-auR { background: var(--text) !important; color: var(--ink) !important; border: 0 !important; }
html.qm .Kj-JD-Jl button:not(.J-at1-auR) { background: transparent !important; color: var(--text-2) !important; border: 1px solid var(--line-3) !important; }
html.qm :is(.aSs, .aSt, .Kj-JE, .bBe) { background: rgba(var(--scrim), .6) !important; }
/* toasts ("Sent · Undo") sit bottom centre */
html.qm .b8 { position: fixed !important; left: 50% !important; right: auto !important; top: auto !important; transform: translateX(-50%) !important; bottom: 28px !important; }
html.qm .b8[style*="-10000"] { visibility: hidden !important; }
html.qm .b8 .vh {
  display: inline-flex !important; align-items: center; gap: 18px; min-height: 52px; padding: 0 8px 0 20px !important;
  background: var(--s2) !important; border: 1px solid var(--line-3) !important; border-radius: 14px !important;
  box-shadow: 0 16px 40px rgba(var(--shade), .5) !important; font: 400 16px var(--sans) !important; animation: qm-pop .24s var(--ease-out) both;
}
html.qm .b8 .vh * { color: var(--text-3) !important; background: transparent !important; border: 0 !important; box-shadow: none !important; font-family: var(--sans) !important; padding-top: 0; padding-bottom: 0; }
html.qm .b8 .vh :is(a, [role="link"], [role="button"], .ag, .bAo) { color: var(--text) !important; font-weight: 500 !important; text-decoration: none !important; padding: 10px 12px !important; border-radius: 10px !important; }
html.qm .b8 .vh :is(a, [role="link"], [role="button"]):hover { background: var(--hi) !important; }
html.qm .b8 .vh :is(.bBe, .bAp) { filter: brightness(0) invert(.6); }

/* while Umbra re-anchors one of Gmail's pop-ups, keep it hidden so it doesn't flash */
html.qm.qm-hush :is([role="menu"], .J-M, [role="dialog"]:not(.Hd)):not(.qm-menu, .qm-confirm, .qm-fview, [id^="qm-"]), html.qm [data-qm-skip] { opacity: 0 !important; animation: none !important; }

/* =================================================================== 2. Umbra's screens */

#qm-view {
  position: fixed; inset: 0; z-index: 2147479000; overflow: hidden;
  background: var(--bg); color: var(--text);
  font: 400 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased; letter-spacing: 0;
}
#qm-view[hidden], #qm-view [hidden] { display: none !important; }
:where(#qm-view, .qm-m-src, .qm-sketch, #qm-dock, #qm-fview-scrim, #qm-confirm-scrim, #qm-person, #qm-linktip, #qm-moving, #qm-chord, #qm-tpl, #qm-check) *, :where(#qm-view, .qm-m-src, .qm-sketch, #qm-dock, #qm-fview-scrim, #qm-confirm-scrim, #qm-person, #qm-linktip, #qm-moving, #qm-chord, #qm-tpl, #qm-check) *::before, :where(#qm-view, .qm-m-src, .qm-sketch, #qm-dock, #qm-fview-scrim, #qm-confirm-scrim, #qm-person, #qm-linktip, #qm-moving, #qm-chord, #qm-tpl, #qm-check) *::after { box-sizing: border-box; }
:where(.qm-m-src, .qm-sketch) { box-sizing: border-box; }
:where(#qm-view, #qm-pill, .qm-whead, #qm-panel, .qm-morph, #qm-dock, #qm-fview-scrim, #qm-confirm-scrim, #qm-rail, #qm-person, #qm-toast, #qm-tpl, #qm-check) :where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
:where(#qm-view) :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
#qm-view .qm-scroll { position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
/* every screen fills its place (so whatever moves it, a slide or a fade, what's inside keeps its size) */
#qm-view .qm-screen { position: absolute; inset: 0; }
#qm-view .qm-screen.qm-instant { animation: none; }

/* icon buttons */
.qm-ib { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--icon); flex: none; transition: color .12s var(--ease), background-color .12s var(--ease); }
.qm-ib:hover, .qm-ib[aria-expanded="true"] { color: var(--text); background: var(--hover); }
.qm-ib.qm-s { width: 40px; height: 40px; }
.qm-ib svg { width: 20px; height: 20px; }
.qm-ib.qm-s svg { width: 18px; height: 18px; }
.qm-x { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--text-5); flex: none; transition: color .12s var(--ease), background-color .12s var(--ease); }
.qm-x:hover { color: var(--text); background: var(--s1); }
.qm-x svg { width: 16px; height: 16px; }
.qm-svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.qm-svg.qm-solid { fill: currentColor; stroke: none; }

/* --------------------------------------------------------------- inbox */
.qm-inbox { width: 920px; max-width: calc(100vw - 64px); margin: 0 auto; padding: 96px 0 180px; }
.qm-title:empty, .qm-hints:empty, .qm-brief:empty { display: none; }
.qm-title { margin: 0 0 40px; font: 600 30px/1.2 var(--sans); letter-spacing: -0.015em; color: var(--text); }
.qm-brief { display: flex; flex-direction: column; gap: 4px; margin-bottom: 48px; }
/* filters: a bar that stays in sight above the list while anything is filtered out */
.qm-filterslot { position: sticky; top: 18px; z-index: 3; margin: -20px 0 28px; }
.qm-filterslot:empty { display: none; }
.qm-filterbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 46px; padding: 7px 7px 7px 14px; border-radius: 14px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 10px 28px rgba(var(--shade), .38); box-sizing: border-box; animation: qm-menu-in .36s var(--spring-snappy) both; }
.qm-filterbar > svg { width: 17px; height: 17px; color: var(--text-3); flex: none; }
.qm-filterbar .qm-flabel { font-size: 15px; color: var(--text-3); margin-right: 2px; }
#qm-view .qm-fchip { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 12px; border-radius: 15px; background: var(--text); color: var(--ink); font: 600 14px var(--sans); transition: background-color .12s var(--ease); }
#qm-view .qm-fchip:hover { background: var(--primary-hover); }
#qm-view .qm-fchip svg { width: 14px; height: 14px; opacity: .55; transition: opacity .12s var(--ease); }
#qm-view .qm-fchip:hover svg { opacity: 1; }
.qm-fcount { margin-left: auto; padding: 0 4px; font-size: 14px; color: var(--text-4); font-variant-numeric: tabular-nums; white-space: nowrap; }
#qm-view .qm-fclear { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 12px; border-radius: 15px; color: var(--text-2); font: 400 14px var(--sans); background: var(--s3); transition: background-color .12s var(--ease), color .12s var(--ease); }
#qm-view .qm-fclear:hover { background: var(--hi); color: var(--text); }
#qm-view .qm-fclear kbd { font: 500 11px var(--sans); color: var(--text-5); }
.qm-reach { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 64px; color: var(--text-5); font-size: 15px; }
#qm-view .qm-reach button { all: unset; box-sizing: border-box; cursor: pointer; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--s1); color: var(--text-2); font: 400 14px var(--sans); transition: background-color .12s var(--ease), color .12s var(--ease); }
#qm-view .qm-reach button:hover { background: var(--s2); color: var(--text); }
.qm-brief:empty { display: none; }
.qm-line { display: flex; align-items: center; gap: 16px; min-height: 44px; overflow: hidden; transition: opacity .18s var(--ease), max-height .24s var(--ease), min-height .24s var(--ease), margin .24s var(--ease); max-height: 160px; animation: qm-fade .3s var(--ease) both; }
.qm-line p { margin: 0; flex: 1; font-size: 19px; line-height: 1.45; color: var(--text); }
.qm-line[data-ref] p { cursor: pointer; }
.qm-line.qm-out { opacity: 0; max-height: 0; min-height: 0; }
.qm-line.qm-quiet p { color: var(--text-5); cursor: default; }
.qm-line.qm-go p { cursor: pointer; transition: color .12s var(--ease); }
.qm-line.qm-go p:hover { color: var(--text-hi); }
.qm-line .qm-acctag { flex: none; font-size: 14px; color: var(--text-5); }
.qm-hints { display: flex; flex-direction: column; gap: 4px; margin: -16px 0 32px; }
.qm-hint { display: flex; align-items: center; gap: 14px; min-height: 40px; color: var(--text-5); font-size: 15px; }
.qm-hint button { height: 32px; padding: 0 12px; border-radius: 16px; background: var(--s1); color: var(--text-2); font-size: 14px; white-space: nowrap; transition: background-color .12s var(--ease), color .12s var(--ease); }
.qm-hint button:hover { background: var(--s2); color: var(--text); }
/* to-dos (Gmail's AI Inbox) */
.qm-todos { display: flex; flex-direction: column; gap: 2px; }
.qm-todo { position: relative; margin: 0 -16px; padding: 14px 120px 14px 16px; border-radius: 12px; cursor: pointer; transition: background-color .12s var(--ease), opacity .2s var(--ease); }
.qm-todo:hover { background: var(--row-hover); }
.qm-todo.qm-out { opacity: 0; pointer-events: none; }
.qm-todo-t { font-size: 17px; font-weight: 500; line-height: 1.4; color: var(--text); }
.qm-todo-d { margin-top: 4px; font-size: 15px; line-height: 1.5; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.qm-todo:hover .qm-rowacts { opacity: 1; pointer-events: auto; }
.qm-line.qm-quiet[role="button"] p { cursor: pointer; }
.qm-line.qm-wait p { color: var(--text-5); }

.qm-rows { display: block; }
.qm-rows + .qm-rows { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.qm-row {
  position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr) 100px; column-gap: 24px; align-items: center;
  height: 50px; margin: 0 -16px; padding: 0 16px; border-radius: 10px; color: var(--text); cursor: pointer;
  transition: background-color .12s var(--ease);
}
.qm-row:hover, .qm-row.qm-cursor { background: var(--row-hover); }
.qm-row.qm-picked { background: var(--s1); }
.qm-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-row .qm-who { font-weight: 500; }
.qm-row .qm-when { text-align: right; font-size: 15px; color: var(--text-3); }
.qm-row .qm-count { color: var(--text-5); font-weight: 400; margin-left: 6px; }
.qm-row .qm-tag { color: var(--text-3); font-weight: 400; margin-right: 8px; }
.qm-row.qm-read { color: var(--text-4); }
.qm-row.qm-read .qm-who { font-weight: 400; }
.qm-row.qm-read .qm-when { color: var(--text-6); }
/* a row's quick actions: a small floating pill at its right end, centred on the row */
.qm-rowacts { position: absolute; right: 10px; top: 50%; translate: 0 -50%; display: flex; align-items: center; gap: 1px; padding: 3px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 6px 18px rgba(var(--shade), .32); opacity: 0; pointer-events: none; transition: opacity .12s var(--ease), translate .14s var(--ease); }
.qm-rowacts .qm-ib.qm-s { width: 32px; height: 30px; border-radius: 9px; }
.qm-rowacts .qm-ib svg { width: 17px; height: 17px; }
.qm-rowacts .qm-ib:hover { background: var(--hi); }
.qm-row:hover .qm-rowacts { opacity: 1; pointer-events: auto; }
.qm-row:has(.qm-rowacts):hover .qm-when { visibility: hidden; }
.qm-row:focus-within .qm-rowacts { opacity: 1; pointer-events: auto; }
.qm-row:has(.qm-rowacts:focus-within) :is(.qm-when, .qm-marks) { visibility: hidden; }
html.qm:not(.qm-v-list) :is(#qm-burger, #qm-rail, #qm-chip) { visibility: hidden; transition: opacity .18s var(--ease), visibility 0s linear .18s; }
.qm-empty { color: var(--text-5); font-size: 19px; min-height: 44px; display: flex; align-items: center; }
.qm-pager { display: flex; justify-content: flex-end; gap: 4px; margin-top: 24px; }
.qm-pager button { height: 40px; padding: 0 12px; border-radius: 10px; color: var(--text-5); font-size: 15px; transition: color .12s var(--ease), background-color .12s var(--ease); }
.qm-pager button:hover { color: var(--text); background: var(--s1); }
.qm-pager button[disabled] { opacity: .35; pointer-events: none; }
.qm-selbar { position: sticky; top: 16px; z-index: 3; display: flex; align-items: center; gap: 4px; margin: -64px 0 20px; height: 48px; padding: 0 6px 0 16px; border-radius: 14px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 16px 40px rgba(var(--shade), .4); animation: qm-menu-in .36s var(--spring-snappy) both; }
.qm-selbar span { flex: 1; color: var(--text-3); font-size: 15px; }
.qm-selslot, .qm-filesel { display: contents; }
.qm-selbar { z-index: 4; }
.qm-fade { position: fixed; left: 0; right: 0; bottom: 0; height: 140px; pointer-events: none; background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0), var(--bg) 85%); }

/* ---------------------------------------------------------------- find */
.qm-find { width: 760px; max-width: calc(100vw - 64px); margin: 0 auto; padding: 120px 0 180px; }
.qm-find form { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.qm-find form > svg { width: 22px; height: 22px; flex: none; color: var(--text-5); }
.qm-find input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 0; margin: 0; font: 400 28px/1.3 var(--sans); letter-spacing: -0.01em; color: var(--text); caret-color: var(--text); }
.qm-find input::placeholder { color: var(--text-5); }
.qm-find input::-webkit-search-cancel-button { display: none; }
.qm-answer { margin: 36px 0 0; font-size: 19px; line-height: 1.5; color: var(--text); animation: qm-fade .3s var(--ease) both; }
.qm-answer.qm-wait { color: var(--text-5); }
.qm-answer.qm-still { animation: none; }
.qm-answer p { margin: 0 0 10px; }
.qm-answer ul { margin: 0 0 10px; padding: 0 0 0 22px; }
.qm-answer li { margin: 0 0 8px; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.qm-answer li::marker { color: var(--text-5); }
.qm-answer b { font-weight: 600; color: var(--text); }
.qm-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.qm-sources button { display: inline-flex; align-items: center; gap: 8px; max-width: 360px; height: 34px; padding: 0 12px; border-radius: 17px; background: var(--s1); color: var(--text-3); font-size: 14px; transition: background-color .12s var(--ease), color .12s var(--ease); }
.qm-sources button:hover { background: var(--s2); color: var(--text); }
.qm-sources button span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-sources svg { width: 14px; height: 14px; flex: none; }
/* asking */
.qm-ask form > svg { color: var(--text-4); }
.qm-askbody { padding-top: 4px; }
.qm-steps { margin: 34px 0 0; display: flex; flex-direction: column; gap: 6px; }
.qm-step { font-size: 15px; color: var(--text-5); animation: qm-fade .2s var(--ease) both; }
.qm-step.qm-now { color: var(--text-3); }
.qm-steps .qm-thinking { margin: 8px 0 0; }
.qm-trail { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-5); }
.qm-sources small { flex: none; font-size: 12px; color: var(--text-5); }
.qm-askq { margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--line-2); font: 400 22px/1.35 var(--sans); color: var(--text-2); }
.qm-followup { display: flex; align-items: center; gap: 12px; margin: 34px 0 0; padding: 0 14px; height: 48px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line-2); }
.qm-followup svg { width: 17px; height: 17px; color: var(--text-5); flex: none; }
.qm-followup input { all: unset; flex: 1; min-width: 0; font: 400 16px var(--sans); color: var(--text); caret-color: var(--text); }
.qm-followup input::placeholder { color: var(--text-5); }
.qm-followup:focus-within { border-color: var(--line-3); }
.qm-thinking { display: flex; gap: 6px; margin: 44px 0 8px; }
.qm-lost p { color: var(--text-4); font-size: 16px; line-height: 1.6; margin: 10px 0 0; }
.qm-lost .qm-lostacts { display: flex; gap: 10px; margin-top: 28px; }
#qm-view .qm-lost .qm-btn { all: unset; box-sizing: border-box; cursor: pointer; height: 38px; padding: 0 16px; border-radius: 10px; display: inline-flex; align-items: center; background: var(--text); color: var(--ink); font: 600 14px var(--sans); }
#qm-view .qm-lost .qm-btn.qm-quietbtn { background: transparent; color: var(--text-3); border: 1px solid var(--line-3); font-weight: 400; }
#qm-view .qm-lost .qm-btn.qm-quietbtn:hover { color: var(--text); }
#qm-view .qm-lost .qm-btn:focus-visible { outline: 2px solid var(--text-4); outline-offset: 2px; }
.qm-thinking i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-5); animation: qm-blink 1.2s ease-in-out infinite; }
.qm-thinking i:nth-child(2) { animation-delay: .15s; }
.qm-thinking i:nth-child(3) { animation-delay: .3s; }
.qm-results { margin-top: 36px; }
/* a result: who, when, the subject, and where your words are (in its text, or a file's name), marked */
.qm-result { display: block; margin: 0 -16px; padding: 12px 16px 13px; border-radius: 12px; color: var(--text-3); cursor: pointer; transition: background-color .12s var(--ease), color .12s var(--ease); }
.qm-result + .qm-result { margin-top: 2px; }
.qm-rtop { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.qm-rtop .qm-from { flex: 1; min-width: 0; font-size: 14px; color: var(--text-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-rtop .qm-when { flex: none; font-size: 13.5px; color: var(--text-6); }
.qm-rclip { flex: none; display: inline-flex; color: var(--text-5); align-self: center; }
.qm-rclip svg { width: 14px; height: 14px; }
.qm-rsubj { margin-top: 3px; font-size: 16px; line-height: 1.35; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-rctx { margin-top: 4px; font-size: 14.5px; line-height: 1.5; color: var(--text-4); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qm-rctx.qm-rfile svg { width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; color: var(--text-5); }
.qm-result:hover, .qm-result.qm-cursor { background: var(--s1); }
.qm-result:hover .qm-rsubj, .qm-result.qm-cursor .qm-rsubj { color: var(--text); }
.qm-result.qm-unread .qm-rsubj { color: var(--text); font-weight: 600; }
.qm-result.qm-unread .qm-from { color: var(--text-2); font-weight: 500; }
mark.qm-hit { background: color-mix(in srgb, #e3b341 32%, transparent); color: var(--text); border-radius: 3px; padding: 0 1px; margin: 0 -1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
html.qm-light mark.qm-hit { background: color-mix(in srgb, #e3b341 45%, transparent); }

/* -------------------------------------------------------------- thread */
.qm-thread { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; }
.qm-bar { position: absolute; z-index: 2; top: 24px; display: flex; gap: 4px; }
.qm-bar.qm-left { left: 24px; }
.qm-bar.qm-right { right: 24px; }
.qm-head { width: var(--qm-read, 880px); max-width: calc(100% - 96px); flex: none; padding: 68px 0 14px; }
.qm-head h1 { margin: 0; font: 600 30px/1.2 var(--sans); letter-spacing: -0.015em; color: var(--text); overflow-wrap: anywhere; }
.qm-sum { margin-top: 12px; display: flex; align-items: center; gap: 16px; animation: qm-fade .3s var(--ease) both; }
.qm-sum p { margin: 0; flex: 1; font-size: 17px; line-height: 1.5; color: var(--text-3); }
.qm-sum.qm-wait p { color: var(--text-5); }
/* the conversation runs under the message box and fades out behind it (no hard edge above the box) */
.qm-convo { --qm-mask: linear-gradient(to bottom, transparent 0, #000 24px, #000 calc(100% - var(--qm-cslot-h, 120px) - 14px), transparent calc(100% - var(--qm-cslot-h, 120px) + 26px)); flex: 1; min-height: 0; width: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; -webkit-mask-image: var(--qm-mask); mask-image: var(--qm-mask); }
.qm-convo-in { width: var(--qm-read, 880px); max-width: calc(100% - 96px); min-height: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: flex-start; gap: 26px; padding: 24px 0 calc(var(--qm-cslot-h, 120px) + 24px); }
.qm-msg { position: relative; flex: none; align-self: flex-start; max-width: min(84%, 760px); min-width: 0; }
.qm-bwrap { position: relative; }
.qm-msg.qm-wide .qm-bwrap { position: static; } /* designed emails keep theirs at the top corner */
.qm-msg.qm-mine { align-self: flex-end; max-width: 560px; }
.qm-msg.qm-wide { align-self: stretch; max-width: none; }
.qm-meta { margin: 0 0 8px 4px; font-size: 14px; color: var(--text-4); }
.qm-mine .qm-meta { margin: 0 4px 8px 0; text-align: right; }
.qm-bubble { padding: 14px 18px; border-radius: 18px; background: var(--s1); font-size: 16px; line-height: 1.6; color: var(--text-2); overflow-wrap: anywhere; }
.qm-mine .qm-bubble { background: var(--mine); color: var(--text); }
.qm-bubble.qm-collapsed { cursor: pointer; color: var(--text-3); }
.qm-bubble.qm-collapsed:hover { color: var(--text-2); }
.qm-older { align-self: center; height: 36px; padding: 0 14px; border-radius: 18px; color: var(--text-4); font-size: 14px; background: var(--s1); transition: color .12s var(--ease), background-color .12s var(--ease); }
.qm-older:hover { color: var(--text); background: var(--s2); }
.qm-acts { position: absolute; left: calc(100% + 10px); bottom: 2px; display: flex; gap: 2px; padding: 4px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line-2); opacity: 0; visibility: hidden; transform: translateX(-4px); transition: opacity .16s var(--ease) .22s, transform .16s var(--ease) .22s, visibility 0s linear .38s; }
.qm-acts::before { content: ""; position: absolute; z-index: -1; inset: -12px -12px -12px -16px; } /* bridges the gap from the message, under the buttons */
.qm-mine .qm-acts { left: auto; right: calc(100% + 10px); transform: translateX(4px); }
.qm-msg.qm-wide .qm-acts { left: auto; right: 0; bottom: auto; top: -8px; transform: translateY(4px); }
.qm-msg:hover .qm-acts, .qm-msg:focus-within .qm-acts, .qm-msg.qm-on .qm-acts { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* message bodies (copied from Gmail) */
#qm-view .qm-body { font-size: inherit !important; line-height: inherit !important; color: inherit !important; font-family: inherit !important; overflow: visible !important; padding: 0 !important; margin: 0 !important; }
#qm-view .qm-body :where(div, p, span, font, td, li, b, strong, i, em, u, blockquote, pre, h1, h2, h3, h4, center, table, tr, tbody, th) { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; color: inherit !important; background-color: transparent !important; border-color: var(--line-2) !important; }
#qm-view .qm-body :where(p) { margin: 0 0 .8em; }
#qm-view .qm-body :where(p:last-child) { margin-bottom: 0; }
#qm-view .qm-body :where(b, strong, h1, h2, h3, h4) { color: var(--text) !important; font-weight: 600; }
#qm-view .qm-body a { color: var(--text) !important; text-decoration: underline; text-decoration-color: var(--text-5); text-underline-offset: 3px; transition: text-decoration-color .12s var(--ease); }
#qm-view .qm-body a:hover { text-decoration-color: var(--text); }
#qm-view .qm-body img { max-width: 100%; height: auto; border-radius: 8px; }
#qm-view .qm-body img:is([width="1"], [height="1"]) { display: none; }
#qm-view .qm-body :where(pre, code, tt) { font-family: ui-monospace, "SF Mono", Menlo, monospace !important; font-size: 14px !important; white-space: pre-wrap; }
#qm-view .qm-body blockquote { margin: 0 0 0 2px; padding-left: 14px; border-left: 2px solid var(--line-3) !important; color: var(--text-3) !important; }
#qm-view .qm-body hr { border: 0; border-top: 1px solid var(--line-2); }
#qm-view .qm-body :is(.yj6qo, .ajU, .ajR) { display: none !important; }
#qm-view .qm-body.qm-chat:not(.qm-showall) :is(.qm-quote, .gmail_attr) { display: none !important; }
#qm-view .qm-body.qm-showall .qm-quote { color: var(--text-4) !important; }
/* (Gmail keeps the part it trimmed hidden by its own rule: shown, once you ask for everything) */
#qm-view .qm-body.qm-showall :is(.h5, .adL) { display: block !important; }
.qm-more { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 20px; margin-top: 10px; border-radius: 10px; background: rgba(var(--tint), .07); color: var(--text-3); font-size: 9px; letter-spacing: 2px; padding-left: 2px; transition: background-color .12s var(--ease); }
.qm-more:hover { background: rgba(var(--tint), .14); opacity: 1; }
.qm-more { opacity: .55; transition: opacity .14s var(--ease), background-color .12s var(--ease); }
.qm-msg:hover .qm-more, .qm-article .qm-more { opacity: 1; }
/* designed emails keep their layout, darkened */
#qm-view .qm-rich { border-radius: 14px; overflow: hidden; background: #fff; color: #222; max-width: 100%; }
#qm-view .qm-rich > .qm-body { font: 400 14px/1.4 Arial, Helvetica, sans-serif !important; color: #222 !important; padding: 0 !important; }
#qm-view .qm-rich .qm-body :where(div, p, span, font, td, li, b, strong, i, em, u, blockquote, pre, h1, h2, h3, h4, center, table, tr, tbody, th) { font-family: revert !important; font-size: revert !important; line-height: revert !important; color: revert !important; background-color: revert !important; border-color: revert !important; }
#qm-view .qm-rich .qm-body a { color: revert !important; text-decoration: revert; }
#qm-view .qm-rich .qm-body img { border-radius: 0; }
/* white maps to the page colour, so a darkened email sits on the page instead of in a box;
   links and accents are muted. Pictures get the exact inverse so they keep their real colours. */
#qm-view .qm-rich.qm-dark { filter: invert(1) hue-rotate(180deg) saturate(.6) contrast(.887) brightness(1.04); }
#qm-view .qm-rich.qm-dark :is(img, video, picture, svg, iframe, [style*="background-image" i], [background]) { filter: brightness(.9615) contrast(1.1274) saturate(1.6667) hue-rotate(180deg) invert(1); }
#qm-view .qm-rich-wrap { overflow-x: auto; }
/* attachments */
/* Drive links Gmail draws inside a message: one of the file rows, not a clipped box */
#qm-view .qm-body .gmail_chip { display: flex !important; align-items: center; width: auto !important; max-width: 100% !important; height: 46px !important; margin: 10px 0 !important; padding: 0 12px !important; border: 0 !important; border-radius: 12px !important; background: var(--chip) !important; box-sizing: border-box; overflow: hidden; transition: background-color .12s var(--ease); }
#qm-view .qm-body .gmail_chip:hover { background: var(--hover) !important; }
#qm-view .qm-body .gmail_chip a { display: flex !important; align-items: center; gap: 12px; min-width: 0; width: 100% !important; height: auto !important; color: var(--text) !important; text-decoration: none !important; font: 400 15px var(--sans) !important; }
#qm-view .qm-body .gmail_chip a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: inherit !important; color: inherit !important; }
#qm-view .qm-body .gmail_chip img { width: 18px !important; height: 18px !important; object-fit: contain; flex: none; margin: 0 !important; }
/* a message's files: pictures, document pages, and cards for everything else, side by side and wrapping */
.qm-atts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; font-family: var(--sans); text-align: left; } /* (in the interface's type, whatever the email's) */
.qm-atts + .qm-atts { margin-top: 10px; }
.qm-mine .qm-atts { justify-content: flex-end; }
.qm-thumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.qm-thumb { width: 176px; height: 124px; border-radius: 12px; overflow: hidden; background: var(--chip); cursor: pointer; position: relative; box-shadow: inset 0 0 0 1px var(--line-2); }
.qm-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s var(--ease); }
.qm-thumb:hover img { transform: scale(1.03); }
.qm-thumb:focus-visible, .qm-att:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
/* a file without a picture of itself: a little page in its kind's colour, its name, and what it is */
.qm-att { position: relative; display: flex; align-items: center; gap: 12px; width: 272px; max-width: 100%; height: 64px; padding: 0 8px 0 12px; border-radius: 14px; background: var(--chip); border: 1px solid var(--line-2); color: var(--text); cursor: pointer; text-align: left; transition: background-color .12s var(--ease), border-color .12s var(--ease); }
.qm-att:hover { background: var(--hover); border-color: var(--line-3); }
.qm-attglyph { position: relative; flex: none; width: 32px; height: 40px; border-radius: 5px 9px 5px 5px; background: color-mix(in srgb, var(--ext) 20%, var(--s2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ext) 40%, transparent); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; }
.qm-attglyph::before { content: ""; position: absolute; top: 0; right: 0; width: 10px; height: 10px; border-bottom-left-radius: 4px; background: color-mix(in srgb, var(--ext) 45%, var(--s2)); }
.qm-attglyph b { margin-bottom: 5px; font: 700 9px/1 var(--sans); letter-spacing: .05em; color: color-mix(in srgb, var(--ext) 70%, var(--text)); }
.qm-attinfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qm-attname { font-size: 14.5px; line-height: 1.25; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-attmeta { font-size: 12.5px; color: var(--text-5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-att .qm-attdl { flex: none; width: 34px; height: 34px; opacity: 0; transition: opacity .12s var(--ease); }
.qm-att:hover .qm-attdl, .qm-att:focus-within .qm-attdl { opacity: 1; }
.qm-reacts { display: flex; gap: 6px; margin-top: 8px; }
.qm-react { height: 28px; padding: 0 10px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line-2); font-size: 13px; color: var(--text-3); display: inline-flex; align-items: center; gap: 6px; }
.qm-mine .qm-reacts { justify-content: flex-end; }

/* ------------------------------------------------------------- reading */
.qm-topfade { position: fixed; z-index: 1; left: 0; right: 14px; top: 0; height: 92px; pointer-events: none; background: linear-gradient(var(--bg) 40%, rgba(var(--bg-rgb), 0)); }
.qm-article { width: var(--qm-read, 880px); max-width: calc(100% - 96px); margin: 0 auto; padding: 104px 0 120px; }
.qm-article.qm-wide { width: max(var(--qm-read, 880px), 760px); }
.qm-article .qm-ameta { font-size: 15px; color: var(--text-4); }
.qm-article h1 { margin: 16px 0 28px; font: 500 48px/1.1 var(--serif); letter-spacing: -0.015em; color: var(--text); overflow-wrap: anywhere; }
.qm-points { display: flex; flex-direction: column; gap: 2px; margin-bottom: 36px; }
.qm-points:empty { display: none; }
.qm-points > .qm-sumask { align-self: flex-start; }
.qm-point { display: flex; align-items: center; gap: 16px; min-height: 40px; overflow: hidden; max-height: 120px; transition: opacity .18s var(--ease), max-height .24s var(--ease), min-height .24s var(--ease); animation: qm-fade .3s var(--ease) both; }
.qm-point p { margin: 0; flex: 1; font-size: 17px; color: var(--text-3); }
.qm-point.qm-out { opacity: 0; max-height: 0; min-height: 0; }
.qm-article .qm-plainbody { font: 400 21px/1.65 var(--serif); color: var(--text-2); }
.qm-article .qm-plainbody .qm-body :where(p) { margin: 0 0 24px; }
.qm-article .qm-plainbody .qm-body :where(b, strong) { color: var(--text) !important; }
.qm-article-bottom { margin-top: 32px; display: flex; gap: 8px; }
.qm-article-bottom button { height: 44px; padding: 0 18px; border-radius: 12px; background: var(--s1); color: var(--text-3); font-size: 15px; transition: background-color .12s var(--ease), color .12s var(--ease); }
.qm-article-bottom button:hover { background: var(--s2); color: var(--text); }

/* -------------------------------------------------------------- sidebar */
/* the menu button, top left: three thin lines (Superhuman Carbon) */
#qm-burger {
  all: unset; box-sizing: border-box; position: fixed; z-index: 2147479100; top: 24px; left: 24px; width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--icon); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .18s var(--ease), color .12s var(--ease), background-color .12s var(--ease);
}
#qm-burger svg { width: 20px; height: 20px; }
#qm-burger:hover { color: var(--text); background: var(--hover); }
#qm-burger:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
html.qm.qm-v-list #qm-burger { opacity: 1; pointer-events: auto; }
#qm-scrim { position: fixed; inset: 0; z-index: 2147481100; background: rgba(var(--scrim), .5); opacity: 0; pointer-events: none; transition: opacity .15s ease; }
#qm-side {
  position: fixed; z-index: 2147481200; left: 12px; top: 12px; bottom: 12px; width: 264px;
  padding: 14px 10px 10px; box-sizing: border-box; border-radius: 16px;
  background: var(--side); box-shadow: 0 24px 64px rgba(var(--shade), .5), inset 0 0 0 1px rgba(var(--tint), .04);
  display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none;
  font: 400 15px/1.3 var(--sans); color: var(--text-4); -webkit-font-smoothing: antialiased;
  translate: calc(-100% - 24px) 0; visibility: hidden; will-change: translate;
  transition: translate .16s cubic-bezier(.4, 0, 1, 1), visibility 0s linear .16s;
}
html.qm-side-open #qm-side { translate: 0 0; visibility: visible; transition: translate .24s var(--zen-spring), visibility 0s; }
html.qm-side-open #qm-scrim { opacity: 1; pointer-events: auto; transition: opacity .2s ease; }
#qm-side * { box-sizing: border-box; }
#qm-side .qm-group { display: flex; flex-direction: column; gap: 1px; }
#qm-side .qm-sep { flex: none; height: 1px; margin: 9px 10px; background: var(--line-2); }
#qm-side :is(a, button) {
  all: unset; box-sizing: border-box; cursor: pointer; flex: none;
  height: 36px; padding: 0 10px; display: flex; align-items: center; gap: 12px; border-radius: 9px;
  font: 400 15px var(--sans); color: var(--text-4); transition: background-color .1s var(--ease), color .1s var(--ease);
}
#qm-side :is(a, button):hover { color: var(--text-2); background: var(--hover-2); }
#qm-side :is(a, button):focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
#qm-side .qm-si { flex: none; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; color: var(--text-5); transition: color .1s var(--ease); }
#qm-side .qm-si svg { width: 18px; height: 18px; stroke-width: 1.6; }
#qm-side .qm-sl { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qm-side :is(a, button):hover .qm-si { color: var(--text-3); }
#qm-side a[aria-current="page"] { background: var(--sel); color: var(--text); }
#qm-side a[aria-current="page"] .qm-si { color: var(--text-2); }
#qm-side .qm-acct[aria-current="true"] { color: var(--text); background: var(--sel); }
#qm-side .qm-acct[aria-current="true"] .qm-si { color: var(--text-2); }
#qm-side .qm-sw { width: 12px; height: 12px; border-radius: 4px; display: block; background: var(--text-5); }
#qm-side .qm-n { margin-left: auto; padding-left: 8px; font-size: 13px; color: var(--text-5); font-variant-numeric: tabular-nums; }
#qm-side a[aria-current="page"] .qm-n, #qm-side .qm-acct[aria-current="true"] .qm-n { color: var(--text-3); }
#qm-side .qm-sub { height: 32px; font-size: 14px; padding-left: 40px; }
#qm-side .qm-sub .qm-si, #qm-side .qm-sub .qm-si svg { width: 15px; height: 15px; }
#qm-side .qm-foot { margin-top: auto; padding-top: 10px; }
#qm-side .qm-foot :is(a, button) { color: var(--text-5); }
#qm-side .qm-foot :is(a, button):hover { color: var(--text-2); }
#qm-side kbd { margin-left: auto; font: 400 12px var(--sans); color: var(--text-5); }
#qm-side kbd:empty { display: none; }

/* ------------------------------------------------------------- menus */
.qm-menu {
  position: fixed; z-index: 2147482500; min-width: 240px; max-height: 70vh; overflow-y: auto; box-sizing: border-box;
  padding: 6px; display: flex; flex-direction: column; border-radius: 14px;
  background: var(--s2); border: 1px solid var(--hi); box-shadow: 0 20px 50px rgba(var(--shade), .5);
  font: 400 15px var(--sans); color: var(--text-2); -webkit-font-smoothing: antialiased;
  transform-origin: top right; animation: qm-menu-in .34s var(--spring-snappy) both;
}
.qm-menu [role="menuitem"] { all: unset; box-sizing: border-box; cursor: pointer; flex: none; height: 42px; padding: 0 12px; border-radius: 9px; display: flex; align-items: center; gap: 16px; color: var(--text-2); font: 400 15px var(--sans); transition: background-color .1s var(--ease); }
.qm-menu [role="menuitem"]:is(:hover, :focus) { background: var(--hi); color: var(--text); }
.qm-menu [role="menuitem"]:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.qm-menu [role="menuitem"] .qm-k { margin-left: auto; color: var(--text-5); font-size: 13px; }
.qm-menu [role="separator"] { flex: none; height: 1px; margin: 6px; background: var(--line-2); }

/* -------------------------------------------------------- compose button */
#qm-fab {
  all: unset; box-sizing: border-box; position: fixed; right: 28px; bottom: 28px; z-index: 2147479500;
  width: 52px; height: 52px; border-radius: 50%; background: var(--text); color: var(--ink);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 10px 28px rgba(var(--shade), .45);
  transition: transform .42s var(--spring-gentle), opacity .18s var(--ease);
}
#qm-fab:hover { transform: scale(1.05); }
#qm-fab:focus-visible { outline: 2px solid var(--text-3); outline-offset: 3px; }
#qm-fab svg { width: 22px; height: 22px; stroke-width: 2; }
html.qm:not(.qm-v-list) #qm-fab, html.qm.qm-writing #qm-fab { opacity: 0; pointer-events: none; transform: scale(.9); }

/* ----------------------------------------------------- tucked draft pill */
#qm-pill {
  all: unset; box-sizing: border-box; position: fixed; z-index: 2147480260; right: 24px; bottom: 24px;
  height: 52px; padding: 0 14px 0 20px; display: flex; align-items: center; gap: 14px;
  border-radius: 14px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 16px 40px rgba(var(--shade), .5);
  font: 400 15px var(--sans); color: var(--text-2); cursor: pointer; max-width: min(420px, calc(100vw - 48px));
  animation: qm-pop .24s var(--ease-out) both; transition: background-color .12s var(--ease);
}
#qm-pill:hover { background: var(--s3); }
#qm-pill span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#qm-pill svg { width: 16px; height: 16px; color: var(--icon); flex: none; }
#qm-pill[hidden] { display: none; }

/* ----------------------------------------------------------- settings */
#qm-panel-scrim { position: fixed; inset: 0; z-index: 2147483000; background: rgba(var(--scrim), .62); display: flex; align-items: center; justify-content: center; padding: 32px 16px; animation: qm-fade .14s var(--ease) both; transition: opacity .14s var(--ease); }
#qm-panel-scrim.qm-out { opacity: 0; }
#qm-panel {
  position: relative; width: min(820px, 100%); height: min(640px, calc(100vh - 64px)); box-sizing: border-box; border-radius: 18px; overflow: hidden;
  background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 40px 100px rgba(var(--shade), .6);
  font: 400 15px/1.45 var(--sans); color: var(--text-2); -webkit-font-smoothing: antialiased;
  display: grid; grid-template-columns: 210px minmax(0, 1fr); animation: qm-sheet-in .44s var(--spring-snappy) both;
}
#qm-panel * { box-sizing: border-box; }
#qm-panel .qm-pnav { display: flex; flex-direction: column; gap: 2px; padding: 20px 12px 16px; background: var(--side); border-right: 1px solid var(--line-2); }
#qm-panel .qm-ptitle { padding: 2px 10px 14px; font: 600 17px var(--sans); color: var(--text); }
#qm-panel .qm-pnav button { all: unset; box-sizing: border-box; cursor: pointer; height: 36px; padding: 0 10px; border-radius: 9px; display: flex; align-items: center; gap: 12px; color: var(--text-4); font: 400 15px var(--sans); transition: background-color .1s var(--ease), color .1s var(--ease); }
#qm-panel .qm-pnav button svg { width: 18px; height: 18px; color: var(--text-5); }
#qm-panel .qm-pnav button:hover { background: var(--hover-2); color: var(--text-2); }
#qm-panel .qm-pnav button[aria-current="page"] { background: var(--sel); color: var(--text); }
#qm-panel .qm-pnav button[aria-current="page"] svg { color: var(--text-2); }
#qm-panel .qm-pver { margin-top: auto; padding: 0 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-5); }
#qm-panel .qm-pbody { overflow-y: auto; padding: 22px 32px 32px; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
#qm-panel .qm-pclose { position: absolute; top: 12px; right: 12px; }
#qm-panel section { display: flex; flex-direction: column; animation: qm-fade .16s var(--ease) both; }
#qm-panel h3 { margin: 18px 0 6px; font: 500 13px var(--sans); color: var(--text-5); letter-spacing: .01em; }
#qm-panel h3:first-child { margin-top: 2px; }
#qm-panel p { margin: 0; color: var(--text-3); }
#qm-panel .qm-pnote { font-size: 14px; color: var(--text-5); margin: 6px 0 4px; line-height: 1.5; }
#qm-panel .qm-pnote.qm-lead { margin: 0 0 14px; color: var(--text-4); }
#qm-panel .qm-tl { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#qm-panel .qm-tl small { font-size: 13px; color: var(--text-5); line-height: 1.4; }
#qm-panel .qm-prow { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 6px 0; border-bottom: 1px solid var(--line); }
#qm-panel .qm-seg { display: flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--s1); flex: none; }
#qm-panel .qm-seg button { all: unset; text-align: center; height: 32px; padding: 0 12px; border-radius: 8px; cursor: pointer; color: var(--text-3); font: 400 14px var(--sans); white-space: nowrap; transition: background-color .12s var(--ease), color .12s var(--ease); }
#qm-panel .qm-seg button:hover { color: var(--text); }
#qm-panel .qm-seg button[aria-pressed="true"] { background: var(--hi); color: var(--text); }
#qm-panel .qm-status { margin-top: 10px; font-size: 14px; color: var(--text-4); }
#qm-panel .qm-status.qm-ok { color: var(--text-3); }
#qm-panel .qm-status.qm-err { color: #e3a597; }
#qm-panel .qm-field { display: flex; gap: 8px; margin-top: 12px; }
#qm-panel :is(input[type="password"], input[type="text"], input[type="email"], input[type="search"], select) { all: unset; box-sizing: border-box; flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; background: var(--s1); border: 1px solid var(--line-3); color: var(--text); font: 400 14px var(--sans); }
#qm-panel select { appearance: auto; width: 100%; }
#qm-panel .qm-prow select { width: auto; max-width: 220px; flex: none; height: 36px; line-height: 36px; padding: 0 30px 0 12px; appearance: auto; }
#qm-panel textarea { all: unset; box-sizing: border-box; display: block; width: 100%; min-height: 110px; margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: var(--s1); border: 1px solid var(--line-3); color: var(--text-2); font: 400 14px/1.5 var(--sans); white-space: pre-wrap; overflow-wrap: anywhere; }
#qm-panel textarea:focus { border-color: var(--ring); }
#qm-panel .qm-note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--text-5); }
#qm-panel input:focus { border-color: var(--ring); }
#qm-panel .qm-btn { all: unset; box-sizing: border-box; cursor: pointer; height: 40px; padding: 0 16px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--text); color: var(--ink); font: 600 14px var(--sans); transition: background-color .12s var(--ease); white-space: nowrap; }
#qm-panel .qm-btn:hover { background: var(--primary-hover); }
#qm-panel .qm-btn.qm-quietbtn { background: transparent; color: var(--text-3); border: 1px solid var(--line-3); font-weight: 400; }
#qm-panel .qm-btn.qm-quietbtn:hover { color: var(--text); border-color: var(--ring); }
#qm-panel .qm-btn[disabled] { opacity: .45; pointer-events: none; }
#qm-panel .qm-keyctl { display: flex; align-items: center; gap: 10px; flex: none; }
#qm-panel .qm-keybtn { all: unset; box-sizing: border-box; cursor: pointer; min-width: 44px; height: 32px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--s1); border: 1px solid var(--line-2); font: 500 14px var(--sans); color: var(--text-2); transition: border-color .12s var(--ease), color .12s var(--ease); }
#qm-panel .qm-keybtn:hover { border-color: var(--line-3); color: var(--text); }
#qm-panel .qm-keybtn:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
#qm-panel .qm-keybtn.qm-off { color: var(--text-5); font-weight: 400; }
#qm-panel .qm-keybtn.qm-rec { border-color: var(--acct, var(--text-3)); color: var(--text); font-weight: 400; animation: qm-recpulse 1.2s var(--ease) infinite; }
@keyframes qm-recpulse { 50% { border-color: var(--line-2); } }
#qm-panel .qm-keyreset { all: unset; cursor: pointer; font: 400 13px var(--sans); color: var(--text-5); }
#qm-panel .qm-keyreset:hover { color: var(--text-2); }
#qm-panel .qm-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 6px 0; cursor: pointer; color: var(--text-2); border-bottom: 1px solid var(--line); }
#qm-panel .qm-toggle input { position: absolute; opacity: 0; pointer-events: none; }
#qm-panel .qm-switch { position: relative; flex: none; width: 34px; height: 20px; border-radius: 10px; background: var(--hi); transition: background-color .16s var(--ease); }
#qm-panel .qm-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-3); transition: transform .38s var(--spring-gentle), background-color .16s var(--ease); }
#qm-panel .qm-toggle input:checked + .qm-switch { background: var(--text); }
#qm-panel .qm-toggle input:checked + .qm-switch::after { transform: translateX(14px); background: var(--ink); }
#qm-panel .qm-toggle input:focus-visible + .qm-switch { outline: 2px solid var(--ring); outline-offset: 2px; }
#qm-panel a { color: var(--text-3); text-decoration: none; transition: color .12s var(--ease); }
#qm-panel a:hover { color: var(--text); }
#qm-panel code { font: 13px ui-monospace, Menlo, monospace; color: var(--text-2); }
#qm-panel [hidden] { display: none !important; }
/* colours */
#qm-panel .qm-acctrow { display: flex; flex-direction: column; gap: 10px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
#qm-panel .qm-acctname { display: flex; align-items: center; gap: 10px; }
#qm-panel .qm-acctname input { flex: 0 1 200px; height: 34px; }
#qm-panel .qm-acctname small { color: var(--text-5); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qm-panel .qm-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(var(--tint), .12); }
#qm-panel .qm-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
#qm-panel .qm-sw { all: unset; cursor: pointer; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px var(--s2), 0 0 0 2px transparent; transition: box-shadow .14s var(--ease), transform .14s var(--ease-out); }
#qm-panel .qm-sw:hover { transform: scale(1.08); }
#qm-panel .qm-sw[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--s2), 0 0 0 4px var(--text-2); }
#qm-panel .qm-sw-none { background: transparent; border: 1px dashed var(--text-5); box-sizing: border-box; }
/* people */
#qm-panel .qm-people .qm-field { margin: 0 0 10px; }
#qm-panel .qm-plist { display: flex; flex-direction: column; gap: 2px; }
#qm-panel .qm-person { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; margin: 0 -10px; border-radius: 10px; transition: background-color .1s var(--ease); }
#qm-panel .qm-person:hover { background: var(--hover-2); }
#qm-panel .qm-pn { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#qm-panel .qm-pn b { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qm-panel .qm-pn small { font-size: 13px; color: var(--text-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qm-panel .qm-pedited { font-size: 12px; color: var(--text-5); }
#qm-panel .qm-peditor { display: flex; gap: 18px; padding: 14px; margin: 4px -14px 8px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line-2); animation: qm-pop .18s var(--ease-out) both; }
#qm-panel .qm-pavbig { all: unset; position: relative; cursor: pointer; flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--hi); display: flex; align-items: center; justify-content: center; font: 500 24px var(--sans); color: var(--text-3); }
#qm-panel .qm-pavbig img { width: 100%; height: 100%; object-fit: cover; }
#qm-panel .qm-pavbig i { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--shade), .45); color: #fff; opacity: 0; transition: opacity .12s var(--ease); }
#qm-panel .qm-pavbig i svg { width: 20px; height: 20px; }
#qm-panel .qm-pavbig:hover i { opacity: 1; }
#qm-panel .qm-pfields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
#qm-panel .qm-pfields small { color: var(--text-5); font-size: 13px; }
#qm-panel .qm-pbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
#qm-panel .qm-pbtns .qm-btn { height: 34px; padding: 0 14px; }
@media (max-width: 640px) { #qm-panel { grid-template-columns: 1fr; grid-template-rows: auto 1fr; } #qm-panel .qm-pnav { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line-2); } #qm-panel .qm-ptitle, #qm-panel .qm-pver { display: none; } }

/* our own toast */
#qm-toast { position: fixed; z-index: 2147483250; left: 50%; bottom: 28px; translate: -50% 0; height: 52px; padding: 0 20px; display: flex; align-items: center; border-radius: 14px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 16px 40px rgba(var(--shade), .5); font: 400 15px var(--sans); color: var(--text-2); animation: qm-note-in .46s var(--spring-gentle) both; transition: opacity .2s var(--ease); }
#qm-toast.qm-out { opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none; transition: opacity .16s ease-in, transform .16s ease-in; }
#qm-toast.qm-above { bottom: 92px; }
html.qm.qm-bgimg #qm-view .qm-row:is(:hover, .qm-cursor) { background: rgba(var(--bg-rgb), .38); }
html.qm.qm-bgimg:not(.qm-soft) #qm-view .qm-row.qm-read:is(:hover, .qm-cursor):not(.qm-chosen, .qm-picked) { background: linear-gradient(rgba(var(--tint), .07), rgba(var(--tint), .07)), rgba(var(--bg-rgb), .35); }
#qm-toast.qm-hasact { padding: 0 8px 0 20px; gap: 16px; }
#qm-toast > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
#qm-toast button { all: unset; cursor: pointer; height: 36px; padding: 0 12px; border-radius: 10px; color: var(--text); font: 500 15px var(--sans); transition: background-color .12s var(--ease); }
#qm-toast button:hover { background: var(--hi); }
#qm-toast button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
  html.qm:not(.qm-motion-full) *, html.qm:not(.qm-motion-full) *::before, html.qm:not(.qm-motion-full) *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* elements an older installed copy may add */
html.qm :is(#umbra-fab, #umbra-brief, #umbra-nav, #umbra-pager, #umbra-search, #umbra-side, #umbra-inshort, #umbra-panel-scrim, .umbra-handle, .umbra-menu) { display: none !important; }

/* writing-window header buttons (outside #qm-view) */
.qm-whead .qm-ib { width: 40px; height: 40px; border-radius: 10px; color: var(--icon); display: inline-flex; align-items: center; justify-content: center; }
.qm-whead .qm-ib:hover { background: var(--hover); color: var(--text); }
.qm-whead .qm-ib svg { width: 18px; height: 18px; }

@keyframes qm-out { to { opacity: 0; transform: scale(.98); } }
.qm-menu.qm-out { animation: qm-out .12s var(--ease) forwards; pointer-events: none; }


/* writing windows: the message scrolls between a fixed header and a fixed toolbar, with no
   scrollbars (a soft fade at the edges shows there's more) and nothing wider than the window */
html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)), html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)) * { scrollbar-width: none !important; }
html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)) ::-webkit-scrollbar, html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap))::-webkit-scrollbar { display: none; width: 0; height: 0; }
html.qm .ip.qm-float { overflow: hidden !important; } /* only the message scrolls */
html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)) .aC3 { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
html.qm .ip.qm-float .M9 .qz {
  max-height: calc(100vh - 300px) !important; overflow-y: auto !important; overflow-x: hidden !important; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
}
html.qm .ip.qm-float.qm-full .M9 .qz { max-height: none !important; height: calc(100vh - 96px - 52px - 49px - 68px) !important; }


/* Everything's hidden copies of Gmail, one per account, tucked behind the page */
.qm-src { position: fixed; left: 0; top: 0; width: 1280px; height: 900px; border: 0; z-index: -1; pointer-events: none; }
.qm-loading { display: flex; justify-content: center; gap: 6px; padding: 32px 0; }
.qm-loading i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-5); animation: qm-blink 1.2s ease-in-out infinite; }
.qm-loading i:nth-child(2) { animation-delay: .15s; }
.qm-loading i:nth-child(3) { animation-delay: .3s; }
@keyframes qm-blink { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }

/* writing windows never pan or rubber-band: only the message scrolls, and only up and down */
html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)) :is(.qz, .editable) { overflow-x: hidden !important; overscroll-behavior: none !important; }
html.qm .ip.qm-float .M9 .qz { touch-action: pan-y; }
html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)) .editable :is(table, td, th) { width: auto !important; max-width: 100% !important; word-break: break-word; }
html.qm :is(.ip.qm-float, :is(.nH.Hd[role="dialog"], .qm-msnap)) .editable :is(pre, code) { white-space: pre-wrap !important; }

/* the write-with-AI line under a writing window's header (⌘J) */
.qm-aibar { flex: none; display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px 0 20px; box-sizing: border-box; border-top: 1px solid var(--line-2); background: var(--s2); position: sticky; top: 52px; z-index: 3; animation: qm-fade .2s var(--ease) both; }
.qm-aibar > svg { width: 16px; height: 16px; flex: none; color: var(--text-3); }
.qm-aibar input { all: unset; flex: 1; min-width: 0; height: 100%; font: 400 15px var(--sans); color: var(--text); caret-color: var(--text); }
.qm-aibar input::placeholder { color: var(--text-5); }
.qm-aibar .qm-dots { display: none; gap: 5px; }
.qm-aibar.qm-busy .qm-dots { display: flex; }
.qm-aibar.qm-busy input { opacity: .55; pointer-events: none; }
.qm-dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--text-4); animation: qm-blink 1.2s ease-in-out infinite; }
.qm-dots i:nth-child(2) { animation-delay: .15s; }
.qm-dots i:nth-child(3) { animation-delay: .3s; }

/* a writing window grows out of the reply bar or the + button, and shrinks back into it */
.qm-morph-src { opacity: 0 !important; transition: none !important; }
html.qm .nH.Hd[role="dialog"] { transition: opacity .14s var(--ease); }
html.qm .nH.Hd[role="dialog"].qm-morph-in { opacity: 0 !important; animation: none !important; }
/* a window Gmail is just opening while something morphs into it: hidden from its very first frame */
html.qm.qm-popping .nH.Hd[role="dialog"]:not([data-qm-seen]) { opacity: 0 !important; animation: none !important; }
html.qm.qm-popping :is(.ip.qm-float, .ip.adB:not(.qm-bar)), html.qm.qm-popping .nH.Hd[role="dialog"]:not([data-qm-seen]) { opacity: 0 !important; pointer-events: none !important; animation: none !important; }

/* "•••" toggles the quoted text in a reply */
html.qm .qm-hidequote .editable :is(.gmail_quote, .gmail_quote_container) { display: none !important; }
/* Gmail clipped a long email */
.qm-clipped { margin-top: 14px; height: 34px; padding: 0 14px; border-radius: 17px; background: var(--s1); color: var(--text-3); font-size: 14px; transition: background-color .12s var(--ease), color .12s var(--ease); }
.qm-clipped:hover { background: var(--s2); color: var(--text); }
/* Gmail's emoji picker, dark and a sensible size */
html.qm .btF.aQz[role="menu"] { width: 352px !important; max-height: min(400px, 62vh) !important; overflow-y: auto !important; padding: 8px !important; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
html.qm .btF.aQz[role="menu"] * { background-color: transparent !important; border-color: var(--line-2) !important; }
html.qm .btF.aQz[role="menu"] input { background: var(--s1) !important; border: 1px solid var(--line-3) !important; border-radius: 10px !important; color: var(--text) !important; }
html.qm .btF.aQz[role="menu"] :is([role="menuitem"], [role="option"], button):hover { background-color: var(--hi) !important; }
html.qm .btF.aQz[role="menu"] svg { fill: var(--text-3) !important; }
/* a darkened email's white turns into exactly this, so the page matches it */
html:not(.qm-bgimg) #qm-view .qm-scroll:has(.qm-article.qm-wide .qm-rich.qm-dark) { background: #0f0f0f; }
html:not(.qm-bgimg) #qm-view .qm-scroll:has(.qm-article.qm-wide .qm-rich.qm-dark) .qm-topfade { background: linear-gradient(#0f0f0f 40%, rgba(15, 15, 15, 0)); }
/* Cc and Bcc sit at the end of the To line, not on a row of their own */
html.qm .M9 tbody.bze { position: relative; }
html.qm .M9 tbody.bze tr.bzf:has(> td.bzg) { height: 0 !important; min-height: 0 !important; overflow: visible; }
html.qm .M9 tbody.bze tr.bzf td.bzg { height: 0 !important; padding: 0 !important; }
html.qm .M9 tbody.bze .ow { position: absolute !important; top: -2px; right: 10px; float: none !important; padding: 0 !important; z-index: 2; }
html.qm .M9 tbody.bze .aGb { padding-right: 104px !important; box-sizing: border-box; }
html.qm .M9 .wO > .aA6 { margin-top: -1px !important; }

/* the reaction row */
.qm-menu.qm-emoji { flex-direction: row; min-width: 0; gap: 2px; padding: 6px; border-radius: 16px; }
.qm-menu.qm-emoji [role="menuitem"] { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 22px; line-height: 1; border-radius: 10px; transition: background-color .1s var(--ease), transform .12s var(--ease-out); }
.qm-menu.qm-emoji [role="menuitem"]:hover { transform: scale(1.15); }

/* =================================================================== 1.6 */
:root { --warm: #ec9a5d; }
html.qm { --warm: #ec9a5d; }
.qm-svg .qm-fill { fill: currentColor; stroke: none; }

/* people: a photo, or quiet initials */
.qm-av { flex: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--avatar); color: var(--text-3); font: 600 10.5px/1 var(--sans); letter-spacing: .02em; user-select: none; }
.qm-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qm-av.qm-none { background: transparent; }
.qm-av.qm-mav { width: 22px; height: 22px; font-size: 9.5px; }
.qm-av.qm-pav { width: 36px; height: 36px; font-size: 13px; }

/* rows */
.qm-row .qm-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qm-row .qm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-row .qm-count, .qm-row .qm-tag { flex: none; margin: 0; }
.qm-row.qm-read .qm-av { opacity: .72; }
/* a person waiting on you: a warm ring on their picture (or a warm dot) */
.qm-needdot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--warm); }
.qm-rows.qm-avs .qm-needdot { display: none; }
.qm-row.qm-needs .qm-av { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--warm); opacity: 1; }
.qm-row.qm-needs:hover .qm-av, .qm-row.qm-needs.qm-cursor .qm-av { box-shadow: 0 0 0 2px var(--row-hover), 0 0 0 3.5px var(--warm); }
.qm-row.qm-gone { height: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; opacity: 0; overflow: hidden; pointer-events: none; transition: height .38s var(--spring-snappy), margin .38s var(--spring-snappy), opacity .12s var(--ease); }
html.qm-dense .qm-row { height: 40px; }

html.qm-dense .qm-rows .qm-av.qm-rav { width: 22px; height: 22px; font-size: 9.5px; }

/* conversation */
.qm-thread > .qm-cslot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; margin: 0 auto; width: var(--qm-read, 880px); max-width: calc(100% - 96px); padding: 0 0 28px; }
.qm-cslot[hidden] { display: none !important; }
.qm-sumslot:empty { display: none; }
.qm-sumask { display: inline-flex; align-items: center; gap: 7px; height: 30px; margin-top: 12px; padding: 0 12px 0 9px; border-radius: 15px; color: var(--text-5); font-size: 14px; transition: background-color .12s var(--ease), color .12s var(--ease); }
.qm-sumask:hover { background: var(--s1); color: var(--text-2); }
.qm-sumask svg { width: 15px; height: 15px; }
.qm-point .qm-sumask { margin: 0; }
.qm-meta { display: flex; align-items: center; gap: 8px; }
.qm-mine .qm-meta { justify-content: flex-end; }
/* a run of messages from one person: their face once, at the start (the rest keep its place) */
.qm-meta.qm-same .qm-mav { visibility: hidden; }
.qm-article .qm-ameta { display: flex; align-items: center; gap: 10px; }
.qm-article .qm-ameta .qm-av { width: 26px; height: 26px; font-size: 10.5px; }
.qm-msg.qm-sending { opacity: .55; }
.qm-sendfiles { margin-top: 6px; font-size: 13px; color: var(--text-4); }

/* reactions under a message */
.qm-reacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.qm-mine .qm-reacts { justify-content: flex-end; }
.qm-react { all: unset; box-sizing: border-box; cursor: pointer; height: 28px; padding: 0 9px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line-2); display: inline-flex; align-items: center; gap: 5px; font: 500 13px var(--sans); color: var(--text-3); animation: qm-pop .2s var(--ease-out) both; transition: border-color .12s var(--ease), background-color .12s var(--ease), color .12s var(--ease); }
.qm-react .qm-remoji { font-size: 15px; line-height: 1; }
.qm-react.qm-minereact { background: var(--s2); border-color: var(--line-3); color: var(--text); }
.qm-react.qm-pending { opacity: .6; }
.qm-react:hover { border-color: var(--line-3); color: var(--text); }

/* the message box: a plain box until you type, then Gmail's own editor sits inside it */
.qm-composer { position: relative; display: flex; flex-direction: column; gap: 10px; }
.qm-cbox { position: relative; display: flex; flex-direction: column; border-radius: 20px; background: var(--s1); border: 1px solid var(--line-2); transition: border-color .14s var(--ease); }
.qm-composer:is(.qm-focus, :focus-within, .qm-live) .qm-cbox { border-color: var(--line-3); }
.qm-crow { flex: 1 1 auto; display: flex; align-items: flex-end; padding: 6px 6px 6px 5px; min-height: 54px; box-sizing: border-box; }
.qm-ctrash { display: none !important; }
.qm-composer.qm-hastext .qm-ctrash { display: inline-flex !important; }
.qm-cfield { flex: 1; min-width: 0; align-self: stretch; display: flex; align-items: flex-end; }
.qm-cfield textarea { flex: 1; min-width: 0; min-height: 42px; resize: none; border: 0; outline: none; background: transparent; color: var(--text); caret-color: var(--text); font: 400 16px/1.5 var(--sans); padding: 9px 8px; margin: 0; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; box-sizing: border-box; }
.qm-cfield textarea::placeholder { color: var(--text-5); }
.qm-composer.qm-live .qm-cfield textarea { visibility: hidden; height: 42px !important; }
.qm-crow .qm-ib { width: 42px; height: 42px; color: var(--text-5); }
.qm-crow .qm-ib:hover { color: var(--text); }
.qm-send { flex: none; width: 34px; height: 34px; margin: 4px 4px 4px 6px; border-radius: 50%; background: var(--text); color: var(--ink); display: flex; align-items: center; justify-content: center; transition: opacity .14s var(--ease), transform .14s var(--ease-out), background-color .12s var(--ease); }
.qm-send svg { width: 18px; height: 18px; stroke-width: 2.2; }
.qm-send:disabled { opacity: .16; cursor: default; }
.qm-send:not(:disabled):hover { background: var(--primary-hover); transform: scale(1.06); }
.qm-send:not(:disabled):active { transform: scale(.94); }
/* above the box: suggested replies, and "Write with AI" */
.qm-ctop { display: flex; align-items: flex-start; gap: 8px; }
.qm-ctop:not(:has(.qm-ideas > *)):not(:has(.qm-cai:not([hidden]))) { position: absolute; right: 2px; bottom: calc(100% + 8px); }
.qm-ideas { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qm-ideas:empty, .qm-composer.qm-aion .qm-ideas { display: none; }
.qm-ideas button { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 7px 14px 7px 12px; border-radius: 18px; background: var(--s1); border: 1px solid var(--line-2); color: var(--text-3); font-size: 14.5px; line-height: 1.4; text-align: left; animation: qm-rise .22s var(--ease-out) both; transition: background-color .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease); }
.qm-ideas button svg { width: 15px; height: 15px; flex: none; opacity: .7; }
.qm-ideas button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-ideas button:nth-child(2) { animation-delay: .05s; }
.qm-ideas button:nth-child(3) { animation-delay: .1s; }
.qm-ideas button:hover { background: var(--s2); border-color: var(--line-3); color: var(--text); }
.qm-ideas-wait { display: flex; gap: 5px; align-items: center; height: 36px; padding-left: 16px; }
.qm-ideas-wait i { width: 5px; height: 5px; border-radius: 50%; background: var(--text-5); animation: qm-blink 1.2s ease-in-out infinite; }
.qm-ideas-wait i:nth-child(2) { animation-delay: .15s; }
.qm-ideas-wait i:nth-child(3) { animation-delay: .3s; }
/* when it floats above the box, it only shows while you're at the box */
.qm-cai { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px 0 16px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line-3); animation: qm-fade .14s var(--ease) both; }
.qm-cai[hidden] { display: none; }
.qm-cai input { all: unset; flex: 1; min-width: 0; height: 100%; font: 400 15px var(--sans); color: var(--text); caret-color: var(--text); }
.qm-cai input::placeholder { color: var(--text-5); }
.qm-cai .qm-dots { display: none; gap: 5px; }
.qm-composer.qm-busy .qm-cai .qm-dots { display: flex; }
.qm-composer.qm-busy .qm-cai kbd { display: none; }
.qm-cai kbd { font: 400 12px var(--sans); color: var(--text-5); }
.qm-composer.qm-busy .qm-cbox::after { content: ""; position: absolute; inset: -1px; border-radius: 20px; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(var(--tint), .05) 50%, transparent 70%) 0 0 / 220% 100%; animation: qm-sheen 1.3s linear infinite; z-index: 1; }
@keyframes qm-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
/* while its window is open (or growing out of it) the box steps aside in the same frame; when the window
   shrinks back, the box is there at once and the suggestions follow a moment later */
html.qm:is(.qm-replying, .qm-mx-reply) .qm-cbox, html.qm:is(.qm-replying, .qm-mx-reply, .qm-popping) .ip.qm-bar { opacity: 0 !important; pointer-events: none !important; transition: none !important; }
.qm-ctop { transition: opacity .22s var(--ease) .14s, transform .22s var(--ease-out) .14s; }
html.qm:is(.qm-replying, .qm-mx-reply) .qm-ctop { opacity: 0; transform: translateY(4px); pointer-events: none; transition: opacity .1s var(--ease); }
html.qm.qm-mx-fab #qm-fab { opacity: 0 !important; transition: none !important; }

/* Gmail's reply editor, living in the box */
html.qm .ip.adB.qm-bar {
  position: fixed !important; z-index: 2147479600 !important; left: var(--bar-l) !important; width: var(--bar-w) !important; bottom: var(--bar-b) !important;
  top: auto !important; right: auto !important; margin: 0 !important; padding: 0 !important; max-height: 44vh; overflow: hidden !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; visibility: visible !important;
}
html.qm .ip.qm-bar :is(td.aoY, form.bAs, .ajR, .aDj > .aDh > .IZ, .aO8, .Ar.As, .eJ) { display: none !important; }
html.qm .ip.qm-bar td.HE { position: absolute !important; left: 0; top: 0; width: 1px !important; height: 1px !important; overflow: hidden !important; clip-path: inset(50%) !important; opacity: 0 !important; pointer-events: none !important; }
html.qm .ip.qm-bar :is(.M9, .aoI, table.aoP, table.aoP > tbody, table.aoP > tbody > tr, td.I5, table.iN, table.iN > tbody, td.GQ, .qz, .et, .ZyRVue, .ZyRVue > div, table.cf, table.cf > tbody, table.cf > tbody > tr, td.Ap, .Ar, .aO7) { display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; height: auto !important; min-height: 0 !important; }
html.qm .ip.qm-bar table.iN > tbody > tr { display: block !important; }
html.qm .ip.qm-bar .qz { max-height: calc(44vh - 8px) !important; overflow-y: auto !important; overflow-x: hidden !important; scrollbar-width: thin !important; }
html.qm .ip.qm-bar :is(.aO7, .editable) { position: static !important; }
html.qm .ip.qm-bar .editable { width: 100% !important; box-sizing: border-box !important; min-height: 24px !important; height: auto !important; padding: 9px 4px !important; font: 400 16px/1.5 var(--sans) !important; color: var(--text) !important; caret-color: var(--text); outline: none !important; }
html.qm .ip.qm-bar .editable :is(div, p, span, font):not([style*="color"]) { color: inherit !important; }
html.qm .ip.qm-bar :is(.GM, .GN) { margin: 0 !important; padding: 0 !important; }
html.qm .ip.qm-bar .dL { margin: 4px 6px 6px 0 !important; }

/* reading: the article scrolls, the message box stays at the bottom */
.qm-reading { position: absolute; inset: 0; }
.qm-reading > .qm-scroll { position: absolute; inset: 0; }
.qm-cslot.qm-dock { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; padding: 28px 0 24px; pointer-events: none; }
.qm-cslot.qm-dock .qm-composer { width: min(var(--qm-read, 880px), 820px); max-width: calc(100% - 96px); pointer-events: auto; }
.qm-reading:has(.qm-dock:not([hidden])) > .qm-scroll { --qm-mask: linear-gradient(to bottom, #000 calc(100% - var(--qm-cslot-h, 150px) - 16px), transparent calc(100% - var(--qm-cslot-h, 150px) + 26px)); -webkit-mask-image: var(--qm-mask); mask-image: var(--qm-mask); }
.qm-reading:has(.qm-dock:not([hidden])) .qm-article { padding-bottom: calc(var(--qm-cslot-h, 150px) + 48px); }

/* Gmail's reply working out of sight (sending from the box, or asking Gemini) */
html.qm .ip.adB[data-qm-quiet] { opacity: 0 !important; pointer-events: none !important; }
html.qm.qm-hushtoast .b8 { opacity: 0 !important; pointer-events: none !important; }

/* writing windows: which account you're writing from */
.qm-whead { position: sticky; }
.qm-whead .qm-wacct { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 10px 0 9px; margin-right: 6px; border-radius: 13px; background: rgba(var(--tint), .045); font-size: 13px; color: var(--text-3); white-space: nowrap; }
.qm-whead .qm-wacct i { width: 10px; height: 10px; border-radius: 3px; background: var(--acct, var(--text-5)); }
/* the reply-type button and the recipients line up with the rest of the window */
html.qm :is(.nH.Hd[role="dialog"], .qm-msnap) .M9 td.HQ { width: 52px !important; padding: 7px 0 0 12px !important; vertical-align: top !important; }
html.qm :is(.nH.Hd[role="dialog"], .qm-msnap) .M9 td.HQ .J-JN-M-I { width: 40px !important; height: 34px !important; margin: 0 !important; border-radius: 9px !important; }
html.qm :is(.nH.Hd[role="dialog"], .qm-msnap) .M9 td.HQ + td.Iy .aoD.hl { padding-left: 6px !important; }
/* the bottom row's buttons keep a dark pressed state with the icon visible */
html.qm .M9 .btC [role="button"]::before, html.qm .M9 .btC [role="button"]::after { background: none !important; box-shadow: none !important; }
html.qm .M9 .btC [role="button"]:is(.T-I-JO, .T-I-Kq, .T-I-JW, [aria-expanded="true"], [aria-pressed="true"]):not(.aoO):not(.hG) { background-color: var(--hi) !important; background-image: none !important; box-shadow: none !important; border-color: transparent !important; border-radius: 10px !important; }
html.qm .M9 .btC [role="button"]:is(.T-I-JO, [aria-expanded="true"]) :is(.aaA, .dv, .og, .J-JN-M-I-JG, .G-asx) { filter: brightness(0) invert(.92) !important; }
/* a window is never taller than the screen: the message scrolls inside it (fitWindow sets the size) */
html.qm :is(.nH.Hd[role="dialog"], .qm-msnap) .M9 .qz { overflow-y: auto !important; }
#qm-panel .qm-pfields input { flex: none; }
#qm-panel .qm-pclose { top: 14px; right: 14px; width: 36px; height: 36px; }
/* the close button keeps its corner: what scrolls passes under it, and a page's first line stops short of it */
#qm-panel .qm-pclose { z-index: 3; background: var(--s2); border-radius: 50%; }
#qm-panel .qm-pclose:hover { background: var(--hover); }
#qm-panel .qm-pbody > section > :first-child { margin-right: 40px; }
#qm-panel .qm-pbody > section > :first-child { margin-right: 36px; }
/* Gmail's "Help me write" stays out of sight but alive: Umbra drives it (display:none would stop it) */
html.qm :is([aria-label^="Help me write" i], .LUPmie) { position: absolute !important; width: 1px !important; height: 1px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; clip-path: inset(50%) !important; opacity: 0 !important; pointer-events: none !important; }

/* Gmail's own loading screen: the page colour, nothing else */
html.qm #loading { background: var(--bg) !important; }
html.qm #loading > * { opacity: 0 !important; }

/* =================================================================== 1.7: rows */
.qm-rows .qm-row { grid-template-columns: 220px minmax(0, 1fr) auto 92px; column-gap: 20px; }
.qm-rows.qm-avs .qm-row { grid-template-columns: 26px 196px minmax(0, 1fr) auto 92px; column-gap: 18px; }
html.qm-dense .qm-rows.qm-avs .qm-row { grid-template-columns: 22px 200px minmax(0, 1fr) auto 92px; }
.qm-row { color: var(--text); }
.qm-row .qm-who { font-weight: 500; }
.qm-row .qm-subj { display: flex; align-items: baseline; gap: 10px; min-width: 0; overflow: hidden; }
.qm-row .qm-s1 { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.qm-row .qm-s2 { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-4); font-weight: 400; }
.qm-row .qm-marks { display: flex; align-items: center; justify-content: flex-end; gap: 10px; color: var(--text-5); }
.qm-row .qm-mark { display: inline-flex; }
.qm-row .qm-mark svg { width: 15px; height: 15px; }
.qm-row .qm-star { color: #d5b45f; }
.qm-row .qm-star svg path { fill: currentColor; }
.qm-row .qm-acctsw { width: 10px; height: 10px; border-radius: 3px; background: var(--row-acct, var(--text-5)); flex: none; }
/* read mail: quieter text on a slightly lighter surface (runs of read mail join into one block) */
.qm-row.qm-read { color: var(--text-4); background: rgba(var(--tint), .022); }
.qm-row.qm-read .qm-who, .qm-row.qm-read .qm-s1 { font-weight: 400; }
.qm-row.qm-read .qm-s2 { color: var(--text-5); }
.qm-row.qm-read:has(+ .qm-row.qm-read) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.qm-row.qm-read + .qm-row.qm-read { border-top-left-radius: 0; border-top-right-radius: 0; }
.qm-row.qm-read:is(:hover, .qm-cursor) { background: var(--row-hover); }
/* automated mail: the sender a step quieter than people */
.qm-row.qm-auto:not(.qm-read) .qm-who { color: var(--text-2); }
.qm-row.qm-auto.qm-read { color: var(--text-5); }
/* day headings */
.qm-day { padding: 26px 0 8px; font: 500 13px var(--sans); letter-spacing: .01em; color: var(--text-5); }
.qm-rows > .qm-day:first-child { padding-top: 0; }
/* hover actions */

.qm-rowacts .qm-ib.qm-on { color: #d5b45f; }
.qm-rowacts .qm-ib.qm-on svg path { fill: currentColor; }
/* company logos on a light disc */
.qm-av.qm-logo { background: #efeeeb; }
.qm-av.qm-logo img { width: 62%; height: 62%; object-fit: contain; border-radius: 3px; }
.qm-av.qm-logo.qm-mono { background: var(--avatar); color: var(--text-3); }

/* =================================================================== 1.7: chrome */
.qm-row:has(.qm-rowacts):hover .qm-marks:not(:has(.qm-rowfile)) { visibility: hidden; }
/* (a file stays, clear of the buttons: it can be opened from here) */
.qm-row:has(.qm-rowacts):hover .qm-marks:has(.qm-rowfile) > :not(.qm-rowfile) { visibility: hidden; }
/* which account you're in, next to the menu; click to switch */
#qm-chip {
  all: unset; box-sizing: border-box; position: fixed; z-index: 2147479100; top: 30px; left: 76px; height: 32px; padding: 0 12px 0 10px;
  display: flex; align-items: center; gap: 9px; border-radius: 16px; cursor: pointer; color: var(--text-4); font: 400 14px var(--sans);
  opacity: 0; pointer-events: none; transition: opacity .18s var(--ease), color .12s var(--ease), background-color .12s var(--ease);
}
#qm-chip:hover { color: var(--text); background: var(--hover-2); }
#qm-chip:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
#qm-chip .qm-sw { width: 10px; height: 10px; border-radius: 3px; background: var(--text-5); }
#qm-chip .qm-sw.qm-all { background: conic-gradient(#7f9fd4 0 25%, #86b49b 0 50%, #a896d6 0 75%, #cf8f9e 0); }
html.qm.qm-v-list #qm-chip { opacity: 1; pointer-events: auto; }
/* the action bar */
#qm-pal-scrim { position: fixed; inset: 0; z-index: 2147483100; background: rgba(var(--scrim), .5); display: flex; justify-content: center; align-items: flex-start; padding: 14vh 16px 16px; animation: qm-fade .12s var(--ease) both; transition: opacity .12s var(--ease); }
#qm-pal-scrim.qm-out { opacity: 0; }
#qm-pal { width: min(620px, 100%); max-height: min(560px, 72vh); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 24px 64px rgba(var(--shade), .5); font: 400 15px/1.35 var(--sans); color: var(--text-2); -webkit-font-smoothing: antialiased; animation: qm-sheet-in .42s var(--spring-snappy) both; }
@keyframes qm-palin { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
#qm-pal * { box-sizing: border-box; }
#qm-pal .qm-pal-in { display: flex; align-items: center; gap: 12px; height: 58px; padding: 0 16px 0 18px; border-bottom: 1px solid var(--line-2); flex: none; }
#qm-pal .qm-pal-in > svg { width: 18px; height: 18px; color: var(--text-5); flex: none; }
#qm-pal input { all: unset; flex: 1; min-width: 0; font: 400 17px var(--sans); color: var(--text); caret-color: var(--text); }
#qm-pal input::placeholder { color: var(--text-5); }
#qm-pal kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px; background: rgba(var(--tint), .06); font: 500 11px var(--sans); color: var(--text-4); }
#qm-pal .qm-pal-list { overflow-y: auto; padding: 6px; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
#qm-pal .qm-pal-sec { padding: 12px 12px 6px; font: 500 12px var(--sans); letter-spacing: .02em; color: var(--text-5); }
#qm-pal .qm-pal-item { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 12px; border-radius: 10px; cursor: pointer; }
#qm-pal .qm-pal-item.qm-on { background: var(--hi); }
#qm-pal .qm-pal-ico { flex: none; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; color: var(--text-4); }
#qm-pal .qm-pal-ico svg { width: 18px; height: 18px; }
#qm-pal .qm-sw { width: 12px; height: 12px; border-radius: 4px; display: block; }
#qm-pal .qm-pal-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#qm-pal .qm-pal-t b { font-weight: 400; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qm-pal .qm-pal-t small { font-size: 13px; color: var(--text-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qm-pal .qm-pal-hint { flex: none; display: flex; align-items: center; font-size: 13px; color: var(--text-5); }
#qm-pal .qm-pal-item.qm-on .qm-pal-hint { color: var(--text-3); }
#qm-pal .qm-pal-tag { flex: none; font-size: 12px; color: var(--text-5); opacity: .8; }
#qm-pal .qm-pal-onpill { height: 20px; padding: 0 8px; border-radius: 10px; background: var(--text); color: var(--ink); font: 600 12px/20px var(--sans); }
#qm-pal .qm-pal-checked .qm-pal-ico { color: var(--text); }
#qm-pal .qm-pal-empty { padding: 18px 12px; color: var(--text-5); }
#qm-pal .qm-pal-foot { display: flex; gap: 18px; padding: 10px 16px; border-top: 1px solid var(--line-2); font-size: 12px; color: var(--text-5); flex: none; }
#qm-pal .qm-pal-foot span { display: inline-flex; align-items: center; gap: 4px; }
/* drop files anywhere */
#qm-drop { position: fixed; inset: 14px; z-index: 2147483200; display: flex; align-items: center; justify-content: center; border-radius: 22px; border: 1.5px dashed rgba(var(--text-rgb), .35); background: rgba(var(--bg-rgb), .78); backdrop-filter: blur(6px); pointer-events: none; opacity: 0; transition: opacity .14s var(--ease); }
#qm-drop.qm-on { opacity: 1; }
#qm-drop .qm-drop-in { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 14px; background: var(--s2); border: 1px solid var(--line-3); font: 400 16px var(--sans); color: var(--text); transform: translateY(4px); transition: transform .18s var(--ease-out); }
#qm-drop.qm-on .qm-drop-in { transform: none; }
#qm-drop svg { width: 18px; height: 18px; color: var(--text-3); }
/* shortcuts */
#qm-keys-scrim { position: fixed; inset: 0; z-index: 2147483100; background: rgba(var(--scrim), .55); display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; overscroll-behavior: contain; animation: qm-fade .12s var(--ease) both; transition: opacity .12s var(--ease); }
#qm-keys-scrim.qm-out { opacity: 0; }
/* (centred when it fits; on a short screen it starts at the top and the whole sheet scrolls) */
#qm-keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; width: min(880px, 100%); margin: auto 0; flex: none; padding: 26px 28px; border-radius: 18px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 30px 80px rgba(var(--shade), .5); font: 400 14px var(--sans); color: var(--text-3); animation: qm-sheet-in .42s var(--spring-snappy) both; }
#qm-keys h3 { margin: 0 0 10px; font: 500 12px var(--sans); letter-spacing: .02em; color: var(--text-5); }
#qm-keys .qm-krow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
#qm-keys .qm-kk { display: flex; gap: 4px; flex: none; }
#qm-keys .qm-keyedit { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; grid-column: 1 / -1; justify-self: start; height: 34px; padding: 0 14px; border-radius: 9px; cursor: pointer; background: transparent; color: var(--text-3); border: 1px solid var(--line-3); font: 400 13px var(--sans); }
#qm-keys .qm-keyedit:hover { color: var(--text); }
#qm-keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 6px; background: rgba(var(--tint), .06); font: 500 12px var(--sans); color: var(--text-2); }
@media (max-width: 760px) { #qm-keys { grid-template-columns: 1fr; } }
/* conversation header: who's in it, labels */
.qm-head .qm-hsub { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-size: 14px; color: var(--text-5); }
.qm-label { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(var(--tint), .05); font-size: 12.5px; color: var(--text-3); }
.qm-article .qm-ameta .qm-label { margin-left: 2px; }
.qm-unsub { margin-left: auto; height: 28px; padding: 0 12px; border-radius: 14px; font-size: 13px; color: var(--text-4); border: 1px solid var(--line-3) !important; transition: color .12s var(--ease), border-color .12s var(--ease); }
.qm-unsub:hover { color: var(--text); border-color: var(--ring) !important; }
/* Gemini's thumbs up/down row inside a message being written */
html.qm .editable .OLlS4 { display: none !important; }
/* the box's placeholder while Gmail's (empty) editor sits in it */
.qm-cfield { position: relative; }
.qm-composer.qm-live.qm-edempty:not(.qm-hastext) .qm-cfield::before { content: attr(data-ph); position: absolute; left: var(--qm-ph-left, 16px); bottom: 9px; line-height: 24px; font: 400 16px/24px var(--sans); color: var(--text-5); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: calc(100% - 16px); }
html.qm .ip.qm-bar .jKzJCd { display: none !important; }
/* Gmail's toast, shown by Umbra on top (Gmail's own stays out of sight) */
html.qm .b8 { visibility: hidden !important; }
#qm-gtoast { position: fixed; z-index: 2147483250; left: 50%; bottom: 28px; translate: -50% 0; min-height: 52px; padding: 0 8px 0 20px; display: flex; align-items: center; gap: 6px; border-radius: 14px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 16px 40px rgba(var(--shade), .45); font: 400 15px var(--sans); color: var(--text-2); -webkit-font-smoothing: antialiased; animation: qm-note-in .46s var(--spring-gentle) both; transition: opacity .18s var(--ease), translate .18s var(--ease); }
#qm-gtoast > span { margin-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; }
#qm-gtoast button { all: unset; cursor: pointer; height: 36px; padding: 0 12px; border-radius: 10px; color: var(--text); font: 500 15px var(--sans); transition: background-color .12s var(--ease); }
#qm-gtoast button:hover { background: var(--hi); }
#qm-gtoast button.qm-gx, #qm-toast button.qm-gx { all: unset; cursor: pointer; display: grid; place-items: center; width: 30px; height: 30px; margin-left: 2px; border-radius: 9px; color: var(--text-4); transition: color .12s var(--ease), background-color .12s var(--ease); }
#qm-gtoast button.qm-gx:hover, #qm-toast button.qm-gx:hover { color: var(--text); background: var(--hi); }
:is(#qm-gtoast, #qm-toast) button.qm-gx svg { width: 15px; height: 15px; }
#qm-gtoast.qm-out { opacity: 0; transform: translateY(6px) scale(.98); pointer-events: none; transition: opacity .16s ease-in, transform .16s ease-in; }
/* toasts sit above the reply box where there is one */
html.qm:has(#qm-view .qm-cslot:not([hidden]) .qm-composer) :is(#qm-gtoast, #qm-toast) { bottom: 104px; }
html.qm:has(#qm-view .qm-cslot:not([hidden]) .qm-composer) #qm-toast.qm-above { bottom: 168px; }
/* in the box, earlier messages quoted in a draft stay folded away (they're still sent) */
html.qm .ip.qm-bar .editable :is(.gmail_quote, .gmail_quote_container, .gmail_attr, blockquote.gmail_quote) { display: none !important; }


/* =================================================================== 1.10: the look */
/* a picture behind everything, dimmed so text stays easy to read. The picture is one layer and the dimming
   another: going from a list to an email only fades the dimming, and the picture never repaints */
html.qm.qm-bgimg #qm-view { background: var(--bg); isolation: isolate; }
html.qm.qm-bgimg #qm-view::before, html.qm.qm-bgimg #qm-view::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
html.qm.qm-bgimg #qm-view::before { z-index: -2; background: var(--qm-bgimg) var(--qm-bgpos, 50% 50%) / var(--qm-bgsize, cover) no-repeat; }
html.qm.qm-bgimg #qm-view::after { z-index: -1; background: rgb(var(--bg-rgb)); opacity: var(--qm-bgdim, .6); transition: opacity .45s var(--ease); }
/* while reading, the picture stays behind the email (designed ones too), dimmed further, or not at all */
html.qm.qm-bgimg.qm-on-mail #qm-view::after { opacity: var(--qm-bgdim-read, .82); }
html.qm.qm-bgimg.qm-on-mail.qm-bg-noread #qm-view::after { opacity: 1; }
html.qm.qm-bgimg #qm-view .qm-rich { box-shadow: 0 14px 44px rgba(var(--shade), .38), 0 0 0 1px rgba(var(--tint), .04); }
/* text that sits right on the picture keeps an edge to read against */
html.qm.qm-bgimg #qm-view :is(.qm-day, .qm-title, .qm-line p, .qm-meta, .qm-head h1, .qm-hsub, .qm-empty, .qm-older, .qm-article > header, .qm-reach span, .qm-phead) { text-shadow: 0 1px 3px rgba(var(--shade), .6), 0 0 14px rgba(var(--shade), .35); }
html.qm.qm-bgimg .qm-ideas button { background: rgba(var(--bg-rgb), .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.qm.qm-bgimg :is(.qm-fade, .qm-topfade) { display: none; }

/* more room: taller rows, wider gaps */
html.qm-spacious .qm-row { height: 60px; }
html.qm-spacious .qm-rows.qm-avs .qm-row { grid-template-columns: 30px 196px minmax(0, 1fr) auto 92px; }
/* a narrow window: the name gives some of its room to the subject */
@media (max-width: 760px) {
  .qm-rows .qm-row { grid-template-columns: 136px minmax(0, 1fr) auto 72px; column-gap: 14px; }
  .qm-rows.qm-avs .qm-row, html.qm-dense .qm-rows.qm-avs .qm-row { grid-template-columns: 26px 112px minmax(0, 1fr) auto 72px; column-gap: 14px; }
  html.qm-spacious .qm-rows.qm-avs .qm-row { grid-template-columns: 30px 112px minmax(0, 1fr) auto 72px; column-gap: 14px; }
}
html.qm-spacious .qm-rows .qm-av.qm-rav { width: 30px; height: 30px; font-size: 11.5px; }

html.qm-spacious .qm-day { margin-top: 30px; }
html.qm-spacious .qm-brief { gap: 10px; margin-bottom: 60px; }
html.qm-spacious .qm-convo-in { gap: 36px; }
html.qm-spacious .qm-inbox { padding-top: 112px; }

/* bigger: everything Umbra draws, a size up (Gmail's own windows keep theirs) */
html.qm-large :is(#qm-view, #qm-side, #qm-pal-scrim, #qm-panel-scrim, #qm-keys-scrim, #qm-chip, #qm-burger, #qm-fab, #qm-gtoast, #qm-toast, .qm-menu) { zoom: 1.12; }

/* a fine line between rows */
html.qm-lines .qm-rows .qm-row::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 1px; background: var(--line); pointer-events: none; }
html.qm-lines .qm-rows .qm-row:hover::after, html.qm-lines .qm-rows .qm-row.qm-cursor::after { opacity: 0; }
html.qm-lines .qm-row.qm-read { background: none; }

/* people with a colour or an emoji of their own */
.qm-av.qm-tint { color: rgba(255, 255, 255, .94); }
.qm-av.qm-emoji { font: 400 15px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.qm-rows .qm-av.qm-emoji.qm-rav { font-size: 14px; }
.qm-article .qm-av.qm-emoji, .qm-msg .qm-av.qm-emoji { font-size: 15px; }


/* settings: sliders, colour pickers, emoji */
#qm-panel .qm-range { display: flex; align-items: center; gap: 12px; flex: none; }
#qm-panel .qm-range input[type="range"] { -webkit-appearance: none; appearance: none; width: 180px; height: 4px; border-radius: 2px; background: var(--line-3); outline: none; cursor: pointer; }
#qm-panel .qm-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--text); border: 0; box-shadow: 0 1px 4px rgba(var(--shade), .5); }
#qm-panel .qm-range input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--text); border: 0; box-shadow: 0 1px 4px rgba(var(--shade), .5); }
#qm-panel .qm-rangev { min-width: 56px; text-align: right; font-size: 13px; color: var(--text-4); font-variant-numeric: tabular-nums; }
#qm-panel input[type="color"], #qm-panel .qm-colorin { -webkit-appearance: none; appearance: none; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-3); }
#qm-panel input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
#qm-panel input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; }
#qm-panel input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; }
#qm-panel .qm-pmark { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
#qm-panel .qm-pmark small { font-size: 12px; color: var(--text-5); }
#qm-panel input.qm-emojiin { flex: none; width: 76px; height: 34px; text-align: center; font-size: 16px; }
#qm-panel .qm-pavbig .qm-pemoji { font: 400 34px/1 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
#qm-panel .qm-swatches .qm-colorin { width: 26px; height: 26px; }

/* the rainbow wheel: any color (the system's picker) */
.qm-rainbow { position: relative; flex: none; display: inline-block; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; background: conic-gradient(from 0deg, #ff4d4d, #ffb84d, #f5f54d, #6cf06c, #4de0f0, #4d7bff, #b04dff, #ff4dc4, #ff4d4d); box-shadow: 0 0 0 2px var(--s2), inset 0 0 0 1px rgba(var(--shade), .25); transition: transform .14s var(--ease); }
.qm-rainbow::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--s2); box-shadow: inset 0 0 0 1px rgba(var(--tint), .08); }
.qm-rainbow:hover { transform: scale(1.08); }
.qm-rainbow input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; margin: 0; }

/* the picture editor: your screen in miniature */
#qm-panel .qm-bgtool { margin: 12px 0 6px; }
#qm-panel .qm-bgedit { position: relative; width: 100%; max-height: 300px; border-radius: 14px; overflow: hidden; cursor: grab; touch-action: none; user-select: none; background: var(--bg); box-shadow: 0 0 0 1px var(--line-3), 0 10px 30px rgba(var(--shade), .35); }
#qm-panel .qm-bgedit.qm-dragging { cursor: grabbing; }
#qm-panel .qm-bgpic, #qm-panel .qm-bgshade { position: absolute; inset: 0; background-repeat: no-repeat; }
#qm-panel .qm-bgmock { position: absolute; left: 18%; right: 18%; top: 16%; display: flex; flex-direction: column; gap: 9%; height: 70%; pointer-events: none; }
#qm-panel .qm-bgmock i { display: block; height: 7px; border-radius: 4px; background: rgba(var(--text-rgb), .55); }
#qm-panel .qm-bgmock i:nth-child(n+3) { background: rgba(var(--text-rgb), .3); }
#qm-panel .qm-bgctl { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
#qm-panel .qm-bgctl > svg { width: 16px; height: 16px; color: var(--text-5); flex: none; }
#qm-panel .qm-bgctl .qm-range { flex: 1; }
#qm-panel .qm-bgctl .qm-range input[type="range"] { width: 100%; }
#qm-panel .qm-bgctl .qm-btn { height: 32px; padding: 0 12px; font-size: 13px; }

/* the chrome, your way */
html.qm-font-system { --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; }
html.qm-read-serif :is(.qm-bubble, .qm-plainbody .qm-body, .qm-plainbody, .qm-answer p, .qm-answer li) { font-family: var(--serif) !important; font-size: 18px; line-height: 1.6; }
html.qm-read-serif .qm-plainbody .qm-body :is(div, p, span, font, li, td) { font-family: inherit !important; }
html.qm-nofab #qm-fab { display: none !important; }
html.qm-noburger #qm-burger { display: none !important; }
html.qm-noburger #qm-chip { left: 24px; }
html.qm-side-right #qm-side { left: auto; right: 12px; translate: calc(100% + 24px) 0; }
html.qm-side-right.qm-side-open #qm-side { translate: 0 0; }
html.qm-side-right #qm-burger { left: auto; right: 24px; }
html.qm-side-right #qm-chip { left: auto; right: 76px; flex-direction: row-reverse; padding: 0 10px 0 12px; }
html.qm-side-right.qm-noburger #qm-chip { right: 24px; }
html.qm-side-right #qm-rail { left: auto; right: 24px; }
/* the account label as a dot only */
#qm-chip.qm-chip-dot { width: 32px; padding: 0; justify-content: center; }
#qm-chip.qm-chip-dot span { display: none; }
#qm-chip.qm-chip-dot .qm-sw { width: 12px; height: 12px; border-radius: 4px; }
/* quick buttons under the menu button: accounts, find, write */
#qm-rail { position: fixed; z-index: 2147479100; top: 80px; left: 24px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border-radius: 14px; opacity: 0; pointer-events: none; transition: opacity .18s var(--ease); }
html.qm-noburger #qm-rail { top: 72px; }
html.qm-rail-on.qm-v-list .qm-inbox { max-width: calc(100vw - 168px); }
html.qm.qm-v-list #qm-rail { opacity: 1; pointer-events: auto; }
#qm-rail button { all: unset; box-sizing: border-box; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--icon); cursor: pointer; transition: background-color .12s var(--ease), color .12s var(--ease); }
#qm-rail button:hover { background: var(--hover-2); color: var(--text); }
#qm-rail button[aria-current="true"] { background: var(--sel); }
#qm-rail button svg { width: 18px; height: 18px; }
#qm-rail .qm-sw { width: 12px; height: 12px; border-radius: 4px; display: block; }
#qm-rail .qm-sw.qm-all { background: conic-gradient(#7f9fd4 0 25%, #86b49b 0 50%, #a896d6 0 75%, #cf8f9e 0); }
#qm-rail hr { width: 18px; height: 1px; margin: 4px 0; border: 0; background: var(--line-3); }
html.qm-large #qm-rail { zoom: 1.12; }

/* dual view */
#qm-view > .qm-host { position: absolute; inset: 0; }
#qm-view > .qm-listpane { display: none; }
html.qm-splitting #qm-view > .qm-host { left: var(--qm-pane, 380px); }
html.qm-splitting #qm-view > .qm-listpane { display: flex; flex-direction: column; position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: var(--qm-pane, 380px); border-right: 1px solid var(--line-2); background: rgba(var(--bg-rgb), .35); }
html.qm-splitting .qm-topfade { left: var(--qm-pane, 380px); }
.qm-listpane .qm-phead { flex: none; padding: 30px 22px 12px; font: 600 18px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-listpane .qm-pscroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; padding: 0 10px 24px; }
.qm-pitem { display: flex; gap: 12px; padding: 11px 12px; border-radius: 12px; cursor: pointer; color: var(--text-4); transition: background-color .1s var(--ease); }
.qm-pitem:hover { background: var(--row-hover); }
.qm-pitem.qm-on { background: var(--sel); color: var(--text-2); }
.qm-pitem > .qm-av { margin-top: 2px; }
.qm-pmain { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qm-ptop { display: flex; align-items: baseline; gap: 8px; }
.qm-pwho { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; }
.qm-pwhen { flex: none; font-size: 12.5px; color: var(--text-5); }
.qm-ptop .qm-acctsw { width: 8px; height: 8px; border-radius: 3px; flex: none; background: var(--row-acct, var(--text-5)); align-self: center; }
.qm-psubj { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-psnip { font-size: 13px; color: var(--text-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-pitem.qm-unread .qm-pwho, .qm-pitem.qm-unread .qm-psubj { color: var(--text); font-weight: 500; }
.qm-splitgrip { position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; cursor: col-resize; z-index: 4; }
.qm-splitgrip:hover, html.qm-resizing .qm-splitgrip { background: linear-gradient(to right, transparent 3px, var(--line-3) 3px, var(--line-3) 5px, transparent 5px); }
html.qm-resizing, html.qm-resizing * { cursor: col-resize !important; user-select: none !important; }
#qm-panel .qm-prow .qm-swatches { flex-wrap: nowrap; flex: none; align-items: center; }
#qm-panel .qm-sw:not(.qm-sw-none) { box-shadow: 0 0 0 2px var(--s2), inset 0 0 0 1px rgba(var(--tint), .14); }
#qm-panel .qm-sw[aria-pressed="true"]:not(.qm-sw-none) { box-shadow: 0 0 0 2px var(--s2), 0 0 0 4px var(--text-2), inset 0 0 0 1px rgba(var(--tint), .14); }
#qm-panel .qm-bgedit.qm-bgwait { aspect-ratio: 16 / 10; }

/* =================================================================== Gemini's notes on new mail */
/* on a row: what it is, Gemini's line, when it's due, the detail worth seeing */
.qm-row .qm-cat { flex: none; align-self: center; width: 7px; height: 7px; border-radius: 50%; background: var(--cat); opacity: .85; }
.qm-row .qm-s2.qm-gem { color: var(--text-3); }
.qm-row .qm-subj:has(.qm-gem) .qm-s1 { max-width: 62%; } /* the subject first; Gemini's line takes what's left */
.qm-row.qm-read .qm-s2.qm-gem { color: var(--text-4); }
.qm-row .qm-key, .qm-row .qm-due { flex: none; display: inline-flex; align-items: center; gap: 5px; max-width: 150px; font: 450 13.5px var(--sans); color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-row .qm-key.qm-code { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; font: 500 12.5px/22px ui-monospace, "SF Mono", Menlo, monospace; letter-spacing: .06em; color: var(--text); background: var(--s1); border: 1px solid var(--line-3); cursor: copy; }
.qm-row .qm-key.qm-code:hover { border-color: var(--text-4); }
.qm-row .qm-due svg { width: 13px; height: 13px; flex: none; }
.qm-row .qm-due.qm-soon { color: var(--warm); }
.qm-row .qm-due.qm-late { color: #e58c86; }
.qm-row.qm-read .qm-key:not(.qm-code), .qm-row.qm-read .qm-due:not(.qm-soon):not(.qm-late) { color: var(--text-5); }
/* piles: the inbox by what it is */
.qm-pileslot:empty { display: none; }
.qm-piles { display: flex; gap: 8px; margin: -14px 0 26px; padding: 2px 0; overflow-x: auto; scrollbar-width: none; }
.qm-piles::-webkit-scrollbar { display: none; }
.qm-piles button { all: unset; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 13px; box-sizing: border-box; border-radius: 16px; background: var(--s1); border: 1px solid var(--line-2); color: var(--text-3); font: 400 14px var(--sans); cursor: pointer; transition: background-color .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease); }
.qm-piles button:hover { color: var(--text); border-color: var(--line-3); }
.qm-piles button:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
.qm-piles button i { width: 8px; height: 8px; border-radius: 50%; background: var(--cat); flex: none; }
.qm-piles button b { font: 500 12.5px var(--sans); color: var(--text-5); }
.qm-piles button[aria-pressed="true"] { background: var(--hi); color: var(--text); border-color: var(--line-3); }
.qm-piles button[aria-pressed="true"] b { color: var(--text-3); }
/* settings: a switch that's off because its parent is */
#qm-panel .qm-toggle.qm-off { opacity: .45; pointer-events: none; }
#qm-panel .qm-field input[type="text"] { flex: 1; min-width: 0; }

/* documents attached to a message: their first page, like Gmail shows it */
.qm-docs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.qm-doc { width: 172px; border-radius: 12px; overflow: hidden; background: var(--chip); cursor: pointer; transition: transform .14s var(--ease), box-shadow .14s var(--ease); }
.qm-doc:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(var(--shade), .35); }
.qm-doc:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
.qm-docpage { height: 118px; overflow: hidden; background: #f4f3f0; }
.qm-docpage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: brightness(.94); }
.qm-docbar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px 0 10px; }
.qm-docbar .qm-docext { flex: none; height: 18px; padding: 0 5px; border-radius: 4px; font: 700 10.5px/18px var(--sans); letter-spacing: .03em; color: #fff; background: var(--ext, #6b7280); }
.qm-docbar .qm-fname { flex: 1; min-width: 0; font-size: 13.5px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-docbar .qm-x { width: 30px; height: 30px; flex: none; }
.qm-mine .qm-docs { justify-content: flex-end; }

/* piles under the menu button: an icon each, with how many */
#qm-rail { max-height: calc(100vh - 104px); overflow-y: auto; scrollbar-width: none; }
#qm-rail::-webkit-scrollbar { display: none; }
#qm-rail .qm-railpile { position: relative; }
#qm-rail .qm-railpile .qm-railn { position: absolute; right: 1px; bottom: 1px; min-width: 14px; height: 14px; padding: 0 3px; box-sizing: border-box; border-radius: 7px; font: 600 9.5px/14px var(--sans); text-align: center; color: var(--text-3); background: var(--bg); font-variant-numeric: tabular-nums; }
#qm-rail .qm-railpile[aria-pressed="true"] { background: color-mix(in srgb, var(--cat) 18%, transparent); color: var(--cat); }
#qm-rail .qm-railpile[aria-pressed="true"] .qm-railn { color: var(--cat); }
/* piles in the menu */
#qm-side .qm-sidehead { padding: 14px 14px 6px; font: 500 12px var(--sans); letter-spacing: .02em; color: var(--text-5); }
#qm-side .qm-sidepile .qm-si { color: var(--cat); opacity: .85; }
#qm-side .qm-sidepile[aria-current="page"] { background: color-mix(in srgb, var(--cat) 14%, transparent); color: var(--text); }
#qm-pilegroup:empty { display: none; }

/* subscriptions */
.qm-subs .qm-subnote { margin: -18px 0 22px; font-size: 15px; color: var(--text-4); }
.qm-subfind { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; margin-bottom: 14px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line-2); color: var(--text-4); cursor: text; }
.qm-subfind svg { width: 16px; height: 16px; flex: none; }
.qm-subfind input { all: unset; flex: 1; min-width: 0; font: 400 15px var(--sans); color: var(--text); }
.qm-subfind input::placeholder { color: var(--text-5); }
.qm-sublist { display: flex; flex-direction: column; }
#qm-view .qm-sublist:empty { display: none; }
.qm-subrow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; align-items: center; column-gap: 16px; min-height: 58px; padding: 6px 12px; border-radius: 12px; cursor: pointer; transition: background-color .12s var(--ease); }
.qm-subrow:hover, .qm-subrow:focus-visible { background: var(--hi); outline: none; }
.qm-subrow .qm-subav { width: 30px; height: 30px; }
.qm-subwho { display: flex; flex-direction: column; min-width: 0; }
.qm-subwho b { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-subwho small { font-size: 13px; color: var(--text-5); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-subfreq { font-size: 13.5px; color: var(--text-4); white-space: nowrap; }
.qm-subbtn { all: unset; box-sizing: border-box; height: 32px; padding: 0 14px; border-radius: 16px; border: 1px solid var(--line-3); font: 400 13.5px var(--sans); color: var(--text-3); cursor: pointer; transition: color .12s var(--ease), border-color .12s var(--ease), background-color .12s var(--ease); }
.qm-subbtn:hover { color: var(--text); border-color: var(--text-5); background: var(--s1); }
.qm-subbtn:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
.qm-subtag { font-size: 13px; color: var(--text-5); }
.qm-subrow.qm-subdone .qm-subwho b { color: var(--text-4); }
html.qm.qm-bgimg .qm-subrow:not(:hover) { background: rgba(var(--bg-rgb), .3); }
/* a name in a conversation: all your mail from them */
:is(.qm-meta, .qm-ameta) .qm-whois { all: unset; cursor: pointer; border-radius: 4px; }
:is(.qm-meta, .qm-ameta) .qm-whois:hover { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-5); }
:is(.qm-meta, .qm-ameta) .qm-whois:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }

/* =================================================================== 1.16 */
/* designed emails: the frame (corners, shadow) is a plain box; the darkening filter is on the email inside
   it, so nothing of the frame is ever inverted, and a wide email scrolls sideways without a scrollbar */
#qm-view .qm-rich-wrap { border-radius: 14px; overflow: hidden; background: #fff; isolation: isolate; }
#qm-view .qm-rich-wrap:has(> .qm-rich.qm-dark) { background: #0f0f0f; }
#qm-view .qm-rich { border-radius: 0; overflow: auto hidden; scrollbar-width: none; }
#qm-view .qm-rich::-webkit-scrollbar { display: none; }
html.qm.qm-bgimg #qm-view .qm-rich { box-shadow: none; }
html.qm.qm-bgimg #qm-view .qm-rich-wrap { box-shadow: 0 14px 44px rgba(var(--shade), .38), 0 0 0 1px rgba(var(--tint), .04); }
/* "Cancel" beside the describe-the-reply line: the same height and corners */
/* a page from the menu: the way back beside its title */
.qm-titlerow { display: flex; align-items: center; gap: 8px; margin: 0 0 40px; }
.qm-titlerow .qm-title { margin: 0; }
.qm-titlerow .qm-tback { width: 40px; height: 40px; margin-left: -10px; }
@media (min-width: 1100px) { .qm-titlerow .qm-tback { margin-left: -50px; } }
/* conversation header: the subject a size smaller, then who it's from */
.qm-head h1 { font-size: 23px; line-height: 1.3; letter-spacing: -0.01em; }
.qm-head { padding-top: 70px; }
.qm-head .qm-hsub { margin-top: 6px; }
.qm-hsub .qm-whois { all: unset; cursor: pointer; border-radius: 4px; color: var(--text-4); transition: color .12s var(--ease); }
.qm-hsub .qm-whois:hover { color: var(--text-2); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--text-5); }
.qm-hsub .qm-whois:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
.qm-hsub .qm-hmore { color: var(--text-5); }
.qm-article h1 { font-size: 34px; line-height: 1.15; margin: 12px 0 22px; }
/* the bottom of a conversation: the reply bar, or (until you've written, or once you fold it) a small Reply */
.qm-cslot.qm-mini-on > .qm-composer { display: none; }
/* Reply and Forward at the end of the email (nothing fixed to the bottom of the screen) */
.qm-endacts { display: flex; gap: 8px; margin: 40px 0 0; padding-bottom: 56px; }
.qm-convo-in > .qm-endacts { margin-top: 6px; }
#qm-view .qm-minibtn { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px 0 15px; border-radius: 21px; background: var(--s1); border: 1px solid var(--line-2); color: var(--text-3); font: 400 15px var(--sans); transition: background-color .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease); }
#qm-view .qm-minibtn svg { width: 17px; height: 17px; }
#qm-view .qm-minibtn:hover { background: var(--s2); border-color: var(--line-3); color: var(--text); }
html.qm.qm-bgimg #qm-view .qm-minibtn { background: rgba(var(--bg-rgb), .55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.qm-composer.qm-arrive .qm-cbox { animation: qm-note-in .46s var(--spring-gentle) both; }
/* "Collapse", once the pointer has rested on the bar */
/* "Collapse": plain text over whatever is behind it, there only while you're over the reply bar (it lingers a
   moment as you move up to it) */
.qm-fold { display: none; flex: none; height: 32px; padding: 0 2px 0 8px; align-items: center; gap: 6px; color: var(--text-4); font-size: 13.5px; white-space: nowrap; background: none !important; border: 0; box-shadow: none !important; opacity: 0; pointer-events: none; transition: color .12s var(--ease), opacity .16s var(--ease) .35s; }
.qm-fold svg { width: 15px; height: 15px; }
.qm-fold:hover { color: var(--text); }
.qm-composer:not(.qm-aion) .qm-fold { display: inline-flex; }
/* (once you've clicked in, the text area under the pointer is Gmail's own editor laid over the bar: that counts too) */
:is(.qm-composer:hover, html.qm:has(.ip.qm-bar:hover) .qm-composer):not(.qm-aion) .qm-fold { opacity: 1; pointer-events: auto; transition-delay: 0s; }
html.qm.qm-bgimg .qm-fold { color: var(--text-2); }
html.qm.qm-bgimg .qm-fold:hover { color: var(--text); }
html.qm.qm-bgimg .qm-fold svg { filter: var(--qm-halo-icon); }
/* the header floats over the conversation; scrolled in, it lifts away and the subject sits in a small pill at the top */
.qm-thread > .qm-head { position: absolute; z-index: 2; top: 0; left: 0; right: 0; margin: 0 auto; transition: opacity .16s var(--ease), transform .38s var(--spring-snappy); }
.qm-thread > .qm-convo { position: absolute; inset: 0; --qm-mask: linear-gradient(to bottom, transparent 0, transparent 68px, #000 98px, #000 calc(100% - var(--qm-cslot-h, 120px) - 14px), transparent calc(100% - var(--qm-cslot-h, 120px) + 26px)); }
.qm-thread .qm-convo-in { padding-top: calc(var(--qm-head-h, 150px) + 6px); }
.qm-head :is(.qm-hsub, .qm-sumslot) { max-height: 140px; overflow: hidden; transition: opacity .16s var(--ease), max-height .22s var(--ease-out), margin .22s var(--ease-out); }
.qm-thread.qm-compact > .qm-head { opacity: 0; transform: translateY(-14px); pointer-events: none; }
/* once the title has scrolled away (a conversation's header, or one email's title), it sits small in a pill between the
   buttons at the top: the pill only as wide as the words, with room around them. Only with Settings › Display › Email ›
   Title as you scroll (off unless turned on) */
.qm-minititle { position: absolute; z-index: 3; top: 28px; left: 0; right: 0; margin: 0 auto; box-sizing: border-box; width: max-content; max-width: min(560px, calc(100% - 456px)); height: 36px; padding: 0 18px; border-radius: 18px; font: 600 14.5px/36px var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: color-mix(in srgb, var(--s2) 86%, transparent); border: 1px solid var(--line-2); box-shadow: 0 8px 22px rgba(var(--shade), .28); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); opacity: 0; transform: translateY(-6px) scale(.96); transition: opacity .14s var(--ease), transform .2s var(--ease); pointer-events: none; }
.qm-minititle:empty { display: none; }
html.qm-scrolltitle :is(.qm-reading, .qm-thread).qm-compact > .qm-minititle { opacity: 1; transform: none; transition: opacity .2s var(--ease), transform .42s var(--spring-gentle); }
html.qm-soft .qm-minititle { background: var(--face); border-color: transparent; box-shadow: var(--up-2); }
html.qm.qm-bgimg .qm-minititle { text-shadow: none; }
/* no room beside the message: the actions sit on its top edge, at its inner corner */
.qm-msg.qm-acts-over .qm-acts { left: auto; right: 10px; bottom: auto; top: -27px; transform: translateY(4px); z-index: 2; box-shadow: 0 8px 22px rgba(var(--shade), .35); }
.qm-msg.qm-mine.qm-acts-over .qm-acts { left: 10px; right: auto; }
.qm-msg.qm-acts-over .qm-acts::before { inset: -10px; }
.qm-msg.qm-acts-over:hover .qm-acts, .qm-msg.qm-acts-over:focus-within .qm-acts, .qm-msg.qm-acts-over.qm-on .qm-acts { transform: none; }

/* =================================================================== windows: morphing, the dock, focus */
/* the morphing surface: one shape that becomes the window (or goes back into what it came from). Its faces
   are exact copies: of what you clicked, and of the window itself */
.qm-morph { position: fixed; z-index: 2147480300; box-sizing: border-box; pointer-events: none; overflow: hidden; border: 1px solid transparent; contain: layout paint; isolation: isolate; }
.qm-m-face { position: absolute; left: -1px; top: -1px; margin: 0 !important; pointer-events: none; }
.qm-m-face > * { pointer-events: none; }
.qm-m-face.qm-m-src { background: transparent !important; border-color: transparent !important; box-shadow: none !important; outline: none !important; transform: none !important; translate: none !important; animation: none !important; transition: none !important; opacity: 1; }
.qm-msnap { background: transparent !important; border: 1px solid transparent !important; box-sizing: border-box !important; box-shadow: none !important; translate: none !important; transform: none !important; animation: none !important; transition: none !important; opacity: 1 !important; overflow: hidden !important; }
.qm-msnap .qm-whead { position: relative; }
/* a sketch of a window, for the very first one (after that, a copy of the last one is used) */
.qm-sketch { display: flex; flex-direction: column; background: transparent; }
.qm-sketch .qm-whead { flex: none; }
.qm-sketch .qm-sk-row { flex: none; height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px 0 20px; border-top: 1px solid var(--line-2); font: 400 15px var(--sans); color: var(--icon); }
.qm-sketch .qm-sk-row b { font-weight: 400; color: var(--icon); }
.qm-sketch .qm-sk-row span { display: flex; gap: 28px; }
.qm-sketch .qm-sk-row.qm-sk-subj { color: var(--text-5); }
.qm-sketch .qm-sk-body { flex: 1; min-height: 0; padding: 16px 20px; font: 400 16px/1.6 var(--sans); color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-sketch .qm-sk-foot { flex: none; height: 67px; display: flex; align-items: center; gap: 2px; padding: 10px 12px 12px; border-top: 1px solid var(--line-2); color: var(--icon); }
.qm-sketch .qm-sk-foot i { width: 40px; height: 40px; }
.qm-sketch .qm-sk-foot b { margin-left: auto; width: 116px; height: 44px; border-radius: 12px; background: var(--text); }
/* while it lands, the window waits underneath, out of sight */
html.qm :is(.nH.Hd[role="dialog"], .ip.qm-float).qm-morph-in { opacity: 0 !important; animation: none !important; transition: none !important; }
html.qm [data-qm-gone] { opacity: 0 !important; pointer-events: none !important; transition: none !important; animation: none !important; }
/* a minimized window is a chip beside the + button; Gmail's own minimized bars stay out of sight */
html.qm [data-qm-min] { opacity: 0 !important; pointer-events: none !important; }
html.qm .ip.qm-float.qm-tucked { opacity: 0 !important; pointer-events: none !important; }
/* (minimized drafts stack up above the + button, right-aligned with it) */
#qm-dock { position: fixed; z-index: 2147479500; right: 28px; bottom: 28px; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; pointer-events: none; }
#qm-dock > * { pointer-events: auto; }
#qm-dock #qm-fab { position: relative; right: auto; bottom: auto; flex: none; }
.qm-chip { all: unset; box-sizing: border-box; position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; max-width: 250px; padding: 0 7px 0 15px; border-radius: 22px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 12px 30px rgba(var(--shade), .4); font: 400 14px var(--sans); color: var(--text-2); cursor: pointer; transition: background-color .12s var(--ease); }
.qm-chip:hover { background: var(--s3); }
.qm-chip:focus-visible { outline: 2px solid var(--text-3); outline-offset: 2px; }
.qm-chip > svg { width: 16px; height: 16px; flex: none; color: var(--icon); }
.qm-chip > .qm-chipt { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qm-chip > .qm-chipdot { width: 8px; height: 8px; border-radius: 3px; flex: none; background: var(--chip-acct, var(--text-5)); }
.qm-chip > .qm-chipx { all: unset; flex: none; width: 30px; height: 30px; border-radius: 15px; display: flex; align-items: center; justify-content: center; color: var(--text-5); opacity: .55; transition: opacity .12s var(--ease), color .12s var(--ease), background-color .12s var(--ease); cursor: pointer; }
.qm-chip > .qm-chipx svg { width: 14px; height: 14px; }
.qm-chip:hover > .qm-chipx, .qm-chip:focus-within > .qm-chipx { opacity: 1; }
.qm-chip > .qm-chipx:hover { color: var(--text); background: var(--hi); }
.qm-chip.qm-chip-in { animation: qm-note-in .46s var(--spring-gentle) both; }
.qm-chip.qm-chip-out { opacity: 0; scale: .9; transition: opacity .14s var(--ease), scale .14s var(--ease); pointer-events: none; }
html.qm-large #qm-dock { zoom: 1.12; }
html.qm-large #qm-dock #qm-fab { zoom: 1; }
/* full size is a focused writing room: one centred sheet, the rest of the screen stepped back */
html.qm .aSs { background: rgba(var(--bg-rgb), .8) !important; -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); animation: qm-fade .2s var(--ease) both; }
html.qm .aSt { position: fixed !important; left: 0 !important; right: 0 !important; top: 28px !important; bottom: 28px !important; margin: 0 auto !important; width: min(920px, calc(100vw - 48px)) !important; height: auto !important; }
html.qm .aSt > .aVN, html.qm .aSt > .aVN > .nH { height: 100% !important; width: 100% !important; }
html.qm .aSt .nH.Hd[role="dialog"] { width: 100% !important; height: 100% !important; box-sizing: border-box; }
html.qm :is(.aSt, .qm-snapfull) .aoI { height: auto !important; }
html.qm :is(.aSt .nH.Hd[role="dialog"], .qm-snapfull)[style*="--qm-fullbody"] .M9 .GP { height: var(--qm-fullbody) !important; min-height: var(--qm-fullbody) !important; max-height: var(--qm-fullbody) !important; }
html.qm :is(.aSt .nH.Hd[role="dialog"], .qm-snapfull)[style*="--qm-fullbody"] .M9 .qz { max-height: var(--qm-fullbody) !important; overflow-y: auto !important; }
html.qm :is(.aSt .nH.Hd[role="dialog"], .qm-snapfull)[style*="--qm-fullbody"] .M9 .editable { min-height: calc(var(--qm-fullbody) - 12px) !important; }
html.qm :is(.aSt, .qm-snapfull) .M9 .editable { font-size: 17.5px !important; line-height: 1.75 !important; padding: 26px 44px 36px !important; }
html.qm :is(.aSt, .qm-snapfull) .M9 :is(.aoD.hl, .fX, .aoD.az6) { padding-left: 44px !important; padding-right: 30px !important; min-height: 52px !important; }
html.qm :is(.aSt, .qm-snapfull) .M9 input.aoT { font-size: 19px !important; font-weight: 500 !important; }
html.qm :is(.aSt, .qm-snapfull) .qm-whead { padding-left: 44px; height: 56px; }
html.qm :is(.aSt, .qm-snapfull) .M9 .btC { padding: 12px 20px 16px 32px !important; }
.qm-morph { font: 400 16px/1.5 var(--sans); color: var(--text); -webkit-font-smoothing: antialiased; text-align: left; }
.qm-m-fabface { inset: -1px; display: flex; align-items: center; justify-content: center; color: var(--ink); }
.qm-m-fabface svg { width: 22px; height: 22px; stroke-width: 2; }
/* the account a new message is from: a button (it can move to another of your accounts) */
.qm-whead .qm-wacct { all: unset; box-sizing: border-box; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px 0 10px; margin-right: 6px; border-radius: 14px; background: rgba(var(--tint), .045); font: 400 13px var(--sans); color: var(--text-3); white-space: nowrap; cursor: pointer; transition: background-color .12s var(--ease), color .12s var(--ease); }
.qm-whead .qm-wacct:hover, .qm-whead .qm-wacct[aria-expanded="true"] { background: rgba(var(--tint), .09); color: var(--text); }
.qm-whead .qm-wacct svg { width: 13px; height: 13px; opacity: .7; }
/* Gmail's "Recipients" (the To line while you're elsewhere): the same quiet label as To */
html.qm .M9 .aoD.hl .oL.aDm, html.qm .M9 .aoD.hl > .oL:only-child { color: var(--icon) !important; font-weight: 400 !important; }

/* =================================================================== bright mode */
html.qm.qm-light {
  --bg: #f4f3f0; --bg-rgb: 244, 243, 240;
  --row-hover: #eae9e5; --s1: #eceae6; --s2: #fbfbfa; --s3: #f1f0ec; --sel: #e2e0db; --mine: #e5e3de; --chip: #e8e6e2; --chip-2: #e2e0db;
  --line: #e5e3de; --line-2: #dddbd6; --line-3: #d0cec8; --hi: #e0ded8; --side: #fbfbfa;
  --text: #1a1b1d; --text-2: #2b2c2f; --text-3: #595b60; --text-4: #6a6c71; --text-5: #898b90; --text-6: #7c7e83; --icon: #66686d;
  --hover: #e6e4df; --hover-2: #edece8; --scroll: #cdcbc5; --ring: #b4b2ac; --avatar: #e0ded9;
  --ink: #fbfbfa; --ink-line: #4b4c4f; --primary-hover: #000; --text-hi: #000; --text-rgb: 26, 27, 29;
  --shade: 168, 160, 146; --tint: 0, 0, 0; --scrim: 150, 146, 138;
  --warm: #d27a2c;
  color-scheme: light;
}
html.qm.qm-light.qm-bgimg #qm-view :is(.qm-day, .qm-title, .qm-line p, .qm-meta, .qm-head h1, .qm-hsub, .qm-empty, .qm-older, .qm-article > header, .qm-reach span, .qm-phead) { text-shadow: 0 1px 2px rgba(255, 255, 255, .75), 0 0 16px rgba(255, 255, 255, .55); }
html.qm.qm-light #qm-panel .qm-status.qm-err { color: #b4523f; }
html.qm.qm-light .qm-row .qm-due.qm-late { color: #c0453c; }
html.qm.qm-light .qm-row .qm-star, html.qm.qm-light .qm-rowacts .qm-ib.qm-on { color: #b8902f; }
html.qm.qm-light .qm-av.qm-logo.qm-mono { background: var(--avatar); }
html.qm.qm-light #qm-view .qm-rich-wrap { box-shadow: 0 0 0 1px var(--line-2); }
html.qm.qm-light #qm-drop { border-color: rgba(var(--text-rgb), .25); }

/* =================================================================== soft depth (neumorphism)
   One material: the page and everything on it are the same colour, shaped only by light from the top left.
   Things you can press rise out of it; places you type into, and whatever is chosen, are pressed into it.
   Every state has the same four shadow layers, so moving between them is one smooth motion. */
html.qm.qm-soft {
  --face: #1d1f23; --face-rgb: 29, 31, 35; --bg: var(--face); --bg-rgb: var(--face-rgb);
  --sl: rgba(255, 255, 255, .065); --sd: rgba(0, 0, 0, .52);
  --z: 0 0 0 0 rgba(0, 0, 0, 0); --zi: inset 0 0 0 0 rgba(0, 0, 0, 0);
  --flat: var(--z), var(--z), var(--zi), var(--zi);
  /* tight: each shadow's blur is about twice its offset, so a surface reads as a raised edge, not a haze */
  --up-1: -1px -1px 3px var(--sl), 2px 2px 4px var(--sd), var(--zi), var(--zi);
  --up-2: -2px -2px 5px var(--sl), 3px 3px 7px var(--sd), var(--zi), var(--zi);
  --up-3: -3px -3px 8px var(--sl), 5px 5px 11px var(--sd), inset 1px 1px 0 var(--sl), var(--zi);
  --dn-1: var(--z), var(--z), inset 2px 2px 4px var(--sd), inset -2px -2px 4px var(--sl);
  --dn-2: var(--z), var(--z), inset 3px 3px 6px var(--sd), inset -2px -2px 6px var(--sl);
  --s1: var(--face); --s2: var(--face); --s3: var(--face); --side: var(--face); --chip: var(--face); --chip-2: var(--face); --sel: var(--face); --mine: var(--face);
  --row-hover: var(--face); --hover: color-mix(in srgb, var(--face) 90%, var(--text)); --hover-2: color-mix(in srgb, var(--face) 94%, var(--text)); --hi: color-mix(in srgb, var(--face) 88%, var(--text));
  --line: color-mix(in srgb, var(--face) 82%, #000); --line-2: color-mix(in srgb, var(--face) 78%, #000); --line-3: color-mix(in srgb, var(--face) 72%, #000);
}
html.qm.qm-soft.qm-light {
  --face: #e8e7e3; --face-rgb: 232, 231, 227;
  --sl: rgba(255, 255, 255, .92); --sd: rgba(158, 150, 132, .46);
  --line: color-mix(in srgb, var(--face) 90%, #000); --line-2: color-mix(in srgb, var(--face) 87%, #000); --line-3: color-mix(in srgb, var(--face) 82%, #000);
}
/* a color of your own behind the mail (Settings › Look › Color): surfaces are that color, lifted, and text is
   white (or black) of a strength that reads on it, so a vivid blue, pink or green reads as well as the default */
html.qm.qm-tinted:not(.qm-light) {
  --row-hover: color-mix(in srgb, var(--bg) 93%, #fff); --s1: color-mix(in srgb, var(--bg) 91%, #fff); --s2: color-mix(in srgb, var(--bg) 88%, #fff);
  --s3: color-mix(in srgb, var(--bg) 85%, #fff); --sel: color-mix(in srgb, var(--bg) 82%, #fff); --mine: color-mix(in srgb, var(--bg) 80%, #fff);
  --chip: color-mix(in srgb, var(--bg) 88%, #fff); --chip-2: color-mix(in srgb, var(--bg) 84%, #fff); --side: color-mix(in srgb, var(--bg) 90%, #000);
  --line: color-mix(in srgb, var(--bg) 86%, #fff); --line-2: color-mix(in srgb, var(--bg) 82%, #fff); --line-3: color-mix(in srgb, var(--bg) 76%, #fff);
  --hi: color-mix(in srgb, var(--bg) 76%, #fff); --hover: color-mix(in srgb, var(--bg) 84%, #fff); --hover-2: color-mix(in srgb, var(--bg) 90%, #fff);
  --scroll: color-mix(in srgb, var(--bg) 70%, #fff); --avatar: color-mix(in srgb, var(--bg) 78%, #fff); --ink: var(--bg);
  --text: #fff; --text-2: rgba(255, 255, 255, .94); --text-3: rgba(255, 255, 255, .78); --text-4: rgba(255, 255, 255, .7);
  --text-5: rgba(255, 255, 255, .56); --text-6: rgba(255, 255, 255, .64); --icon: rgba(255, 255, 255, .74); --ring: rgba(255, 255, 255, .5);
}
html.qm.qm-tinted.qm-light {
  --row-hover: color-mix(in srgb, var(--bg) 94%, #000); --s1: color-mix(in srgb, var(--bg) 94%, #000); --s2: color-mix(in srgb, var(--bg) 70%, #fff);
  --s3: color-mix(in srgb, var(--bg) 92%, #000); --sel: color-mix(in srgb, var(--bg) 88%, #000); --mine: color-mix(in srgb, var(--bg) 90%, #000);
  --chip: color-mix(in srgb, var(--bg) 92%, #000); --chip-2: color-mix(in srgb, var(--bg) 88%, #000); --side: color-mix(in srgb, var(--bg) 70%, #fff);
  --line: color-mix(in srgb, var(--bg) 92%, #000); --line-2: color-mix(in srgb, var(--bg) 89%, #000); --line-3: color-mix(in srgb, var(--bg) 84%, #000);
  --hi: color-mix(in srgb, var(--bg) 86%, #000); --hover: color-mix(in srgb, var(--bg) 90%, #000); --hover-2: color-mix(in srgb, var(--bg) 94%, #000);
  --scroll: color-mix(in srgb, var(--bg) 80%, #000); --avatar: color-mix(in srgb, var(--bg) 88%, #000);
  --text: #111; --text-2: rgba(0, 0, 0, .86); --text-3: rgba(0, 0, 0, .66); --text-4: rgba(0, 0, 0, .6);
  --text-5: rgba(0, 0, 0, .48); --text-6: rgba(0, 0, 0, .54); --icon: rgba(0, 0, 0, .6); --ring: rgba(0, 0, 0, .4);
}
@keyframes qm-soft-in { from { opacity: 0; transform: translateY(6px) scale(.985); box-shadow: var(--flat); } }
@keyframes qm-soft-up { from { box-shadow: var(--flat); transform: translateY(3px); } }
html.qm-soft { --soft-t: box-shadow .16s var(--ease-out), transform .16s var(--ease-out), background-color .16s var(--ease), color .12s var(--ease); }

/* surfaces that sit above the page: raised, and rising into place as they appear */
html.qm-soft :is(#qm-pal, #qm-panel, .qm-menu, #qm-keys, #qm-gtoast, #qm-toast, #qm-side, .qm-filterbar, .qm-selbar, #qm-drop .qm-drop-in) { background: var(--face) !important; border-color: transparent !important; box-shadow: var(--up-3); }
html.qm-soft :is(#qm-pal, #qm-panel, .qm-menu:not(.qm-out), #qm-keys, #qm-gtoast:not(.qm-out), #qm-toast:not(.qm-out), .qm-filterbar, .qm-selbar) { animation: qm-soft-in .42s var(--spring-gentle) both; }
html.qm-soft :is([role="menu"], .J-M, .agJ, [role="listbox"]:not(.afx), .gssb_c, .aJg, .Kj-JD, [role="alertdialog"], .bAh, .ajB):not(#qm-pal *, .qm-menu, .qm-menu *, #qm-tpl, #qm-tpl *, .qm-confirm, .qm-confirm *) { background: var(--face) !important; border-color: transparent !important; box-shadow: var(--up-3) !important; }
html.qm-soft :is(.nH.Hd[role="dialog"], .ip.qm-float, .qm-winprobe) { background: var(--face) !important; border-color: transparent !important; box-shadow: var(--up-3) !important; }
html.qm-soft .qm-morph { border-color: transparent !important; }
html.qm-soft .qm-whead, html.qm-soft .qm-aibar { background: var(--face); }
html.qm-soft .qm-aibar { border-top: 0; margin: 4px 12px; border-radius: 12px; }
html.qm-soft #qm-scrim, html.qm-soft #qm-panel-scrim, html.qm-soft #qm-pal-scrim, html.qm-soft #qm-keys-scrim { background: rgba(var(--face-rgb), .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* things you press: raised; a little higher under the pointer; pressed in while held, and when chosen */
html.qm-soft :is(.qm-minibtn, .qm-article-bottom button, .qm-older, .qm-sumask, .qm-clipped, .qm-sources button, .qm-reach button, .qm-hint button, .qm-ideas button, .qm-subbtn, .qm-react, .qm-unsub, :where(#qm-panel .qm-btn, #qm-panel .qm-keybtn, #qm-keys .qm-keyedit, #qm-view .qm-lost .qm-btn, #qm-view .qm-fchip), .qm-fclear, .qm-chip, .qm-file, .qm-att, .qm-doc, .qm-thumb, .qm-more) {
  background: var(--face) !important; border-color: transparent !important; box-shadow: var(--up-1); transition: var(--soft-t);
}
html.qm-soft :is(.qm-minibtn, .qm-article-bottom button, .qm-chip, .qm-file, .qm-att, .qm-doc, .qm-thumb) { box-shadow: var(--up-2); }
html.qm-soft :is(.qm-minibtn, .qm-article-bottom button, .qm-older, .qm-sumask, .qm-clipped, .qm-sources button, .qm-reach button, .qm-hint button, .qm-ideas button, .qm-subbtn, .qm-react, .qm-unsub, :where(#qm-panel .qm-btn, #qm-panel .qm-keybtn, #qm-keys .qm-keyedit, #qm-view .qm-lost .qm-btn, #qm-view .qm-fchip), .qm-fclear, .qm-chip, .qm-file, .qm-att, .qm-doc, .qm-thumb, .qm-more):hover { box-shadow: var(--up-2); transform: translateY(-1px); }
html.qm-soft :is(.qm-minibtn, .qm-article-bottom button, .qm-chip, .qm-file, .qm-att, .qm-doc, .qm-thumb):hover { box-shadow: var(--up-3); }
html.qm-soft :is(.qm-minibtn, .qm-article-bottom button, .qm-older, .qm-sumask, .qm-clipped, .qm-sources button, .qm-reach button, .qm-hint button, .qm-ideas button, .qm-subbtn, .qm-react, .qm-unsub, :where(#qm-panel .qm-btn, #qm-panel .qm-keybtn, #qm-keys .qm-keyedit, #qm-view .qm-lost .qm-btn, #qm-view .qm-fchip), .qm-fclear, .qm-chip, .qm-file, .qm-att, .qm-doc, .qm-thumb, .qm-more):active { box-shadow: var(--dn-1); transform: none; transition-duration: .06s; }
html.qm-soft #qm-view .qm-fchip, html.qm-soft #qm-panel .qm-btn:not(.qm-quietbtn), html.qm-soft #qm-view .qm-lost .qm-btn:not(.qm-quietbtn) { color: var(--text) !important; font-weight: 600; }
html.qm-soft .qm-react.qm-minereact { box-shadow: var(--dn-1); }
html.qm-soft .qm-chip.qm-chip-in { animation: qm-soft-in .24s var(--ease-out) both; }
/* icon buttons: flat until the pointer is on them, then they rise; held, they press in */
html.qm-soft :is(.qm-ib, .qm-x, #qm-burger, #qm-gback, #qm-chip, #qm-rail button, .qm-whead .qm-wacct, #qm-side :is(a, button), #qm-panel .qm-pnav button, .qm-pager button, #qm-pal .qm-pal-item) { transition: var(--soft-t); }
html.qm-soft :is(.qm-ib, .qm-x, #qm-burger, #qm-gback, #qm-chip, #qm-rail button, .qm-whead .qm-wacct, #qm-side :is(a, button), #qm-panel .qm-pnav button, .qm-pager button):is(:hover, [aria-expanded="true"]) { background: var(--face) !important; box-shadow: var(--up-1); }
html.qm-soft :is(.qm-ib, .qm-x, #qm-burger, #qm-gback, #qm-chip, #qm-rail button, #qm-side :is(a, button), #qm-panel .qm-pnav button, .qm-pager button):active { box-shadow: var(--dn-1); transition-duration: .06s; }
html.qm-soft :is(#qm-side a[aria-current="page"], #qm-side .qm-acct[aria-current="true"], #qm-side .qm-sidepile[aria-current="page"], #qm-rail button[aria-current="true"], #qm-rail .qm-railpile[aria-pressed="true"], #qm-panel .qm-pnav button[aria-current="page"], #qm-pal .qm-pal-item.qm-on, .qm-pitem.qm-on, .qm-row.qm-picked) { background: var(--face) !important; box-shadow: var(--dn-2) !important; }
html.qm-soft #qm-pal .qm-pal-item.qm-on { transition: none; }
html.qm-soft .qm-whead .qm-wacct { background: var(--face); box-shadow: var(--up-1); }

/* the + button: the same material, raised highest */
html.qm-soft #qm-fab { background: var(--face); color: var(--text); box-shadow: var(--up-3); transition: box-shadow .16s var(--ease-out), transform .16s var(--ease-out), opacity .18s var(--ease); }
html.qm-soft #qm-fab:hover { transform: translateY(-1px); box-shadow: -4px -4px 10px var(--sl), 6px 6px 14px var(--sd), inset 1px 1px 0 var(--sl), var(--zi); }
html.qm-soft #qm-fab:active { box-shadow: var(--dn-2); transform: none; }
html.qm-soft .qm-m-fabface { color: var(--text); }

/* places you type into: pressed into the surface */
html.qm-soft :is(.qm-cbox, .qm-cai, .qm-subfind, .qm-followup, #qm-pal .qm-pal-in, #qm-panel :is(input[type="password"], input[type="text"], input[type="email"], input[type="search"], select, textarea), .qm-aibar) { background: var(--face) !important; border-color: transparent !important; box-shadow: var(--dn-2) !important; transition: box-shadow .16s var(--ease-out); }
html.qm-soft .qm-composer:is(.qm-focus, :focus-within, .qm-live) .qm-cbox { box-shadow: var(--z), var(--z), inset 3px 3px 7px var(--sd), inset -3px -3px 7px var(--sl) !important; }
html.qm-soft #qm-pal .qm-pal-in { margin: 12px 12px 4px; height: 52px; border-radius: 14px; border-bottom: 0; }
html.qm-soft .qm-find form { border-bottom: 0; padding: 14px 20px; border-radius: 18px; background: var(--face); box-shadow: var(--dn-2); }
html.qm-soft .qm-send { background: var(--face); color: var(--text); box-shadow: var(--up-1); transition: var(--soft-t), opacity .14s var(--ease); }
html.qm-soft .qm-send:not(:disabled):hover { background: var(--face); box-shadow: var(--up-2); transform: translateY(-1px); }
html.qm-soft .qm-send:not(:disabled):active { box-shadow: var(--dn-1); transform: none; }
html.qm-soft .qm-send:disabled { opacity: .35; box-shadow: var(--flat); }
/* Send and the other buttons in a window */
html.qm-soft .dC { background: var(--face) !important; box-shadow: var(--up-1) !important; transition: box-shadow .16s var(--ease-out); }
html.qm-soft .dC:hover { box-shadow: var(--up-2) !important; }
html.qm-soft .dC :is(.aoO, .T-I.hG) { background: var(--face) !important; color: var(--text) !important; }
html.qm-soft .dC :is(.aoO, .T-I.hG):hover { background: var(--face) !important; }
html.qm-soft .dC .T-I.hG { border-left-color: var(--line-3) !important; }
html.qm-soft .dC .T-I.hG .G-asx { filter: brightness(0) invert(.85) !important; }
html.qm-soft .M9 .btC :is(.wG, .J-Z-I, .J-JN-M-I, .oh):hover { background-color: var(--face) !important; box-shadow: var(--up-1) !important; }
html.qm-soft .M9 :is(.afV, .akl, .agh) { background: var(--face) !important; box-shadow: var(--up-1) !important; }
html.qm-soft .M9 :is(.aoD.hl, .fX, .aoD.az6), html.qm-soft .M9 table.IG, html.qm-soft .M9 .btC { border-color: var(--line) !important; }
html.qm-soft .M9 .dL { background: var(--face) !important; box-shadow: var(--up-1) !important; }

/* settings: switches, choices and sliders carved and raised */
html.qm-soft #qm-panel .qm-pnav { background: transparent; border-right: 0; }
html.qm-soft #qm-panel .qm-seg { background: var(--face); box-shadow: var(--dn-2); }
html.qm-soft #qm-panel .qm-seg button { transition: var(--soft-t); }
html.qm-soft #qm-panel .qm-seg button[aria-pressed="true"] { background: var(--face); box-shadow: var(--up-1); }
html.qm-soft #qm-panel .qm-switch { background: var(--face); box-shadow: var(--dn-1); }
html.qm-soft #qm-panel .qm-switch::after { background: var(--face); box-shadow: -1px -1px 3px var(--sl), 2px 2px 4px var(--sd); }
html.qm-soft #qm-panel .qm-toggle input:checked + .qm-switch { background: color-mix(in srgb, var(--face) 35%, var(--text)); box-shadow: var(--dn-1); }
html.qm-soft #qm-panel .qm-toggle input:checked + .qm-switch::after { background: var(--face); }
html.qm-soft #qm-panel .qm-range input[type="range"] { background: var(--face); box-shadow: var(--dn-1); height: 6px; border-radius: 3px; }
html.qm-soft #qm-panel .qm-range input[type="range"]::-webkit-slider-thumb { background: var(--face); box-shadow: -1px -1px 3px var(--sl), 2px 2px 5px var(--sd); width: 18px; height: 18px; }
html.qm-soft #qm-panel .qm-range input[type="range"]::-moz-range-thumb { background: var(--face); box-shadow: -1px -1px 3px var(--sl), 2px 2px 5px var(--sd); width: 18px; height: 18px; }
html.qm-soft #qm-panel :is(.qm-prow, .qm-toggle, .qm-acctrow) { border-bottom-color: var(--line); }
html.qm-soft #qm-panel .qm-peditor { background: var(--face); border-color: transparent; box-shadow: var(--dn-2); }
html.qm-soft #qm-panel .qm-bgedit { box-shadow: var(--up-2); }
html.qm-soft #qm-panel .qm-person:hover { background: var(--face); box-shadow: var(--up-1); }

/* lists: rows lie flat; the one under the pointer rises to meet it */
html.qm-soft .qm-row { transition: var(--soft-t); }
html.qm-soft :is(.qm-row:hover, .qm-row.qm-cursor) { background: var(--face) !important; box-shadow: var(--up-2); transform: translateY(-1px); z-index: 1; }
html.qm-soft .qm-row.qm-read { background: transparent; }
/* runs of read mail stay one continuous block, as in flat; only the lifted row gets its own corners */
html.qm-soft:not(.qm-bgimg) .qm-rows .qm-row.qm-read:is(:hover, .qm-cursor) { border-radius: 10px; }
html.qm-soft .qm-rowacts { background: var(--face); border-color: transparent; box-shadow: var(--up-2); }
html.qm-soft :is(.qm-pitem, .qm-subrow, .qm-todo, .qm-result) { transition: var(--soft-t); }
html.qm-soft :is(.qm-pitem, .qm-subrow, .qm-todo, .qm-result):is(:hover, :focus-visible, .qm-cursor) { background: var(--face) !important; box-shadow: var(--up-2); }
html.qm-soft.qm-splitting #qm-view > .qm-listpane { border-right-color: var(--line); }

/* a conversation: their messages raised, yours pressed in; designed emails sit on a raised card */
html.qm-soft .qm-msg .qm-bubble { background: var(--face); box-shadow: var(--up-2); }
html.qm-soft .qm-mine .qm-bubble { background: var(--face); box-shadow: var(--dn-2); }
html.qm-soft #qm-view .qm-rich-wrap { box-shadow: var(--up-2); }
html.qm-soft .qm-acts { background: var(--face); border-color: transparent; box-shadow: var(--up-2); }
html.qm-soft .qm-msg.qm-acts-over .qm-acts { box-shadow: var(--up-2); }
html.qm-soft .qm-label { background: var(--face); box-shadow: var(--up-1); }
html.qm-soft .qm-av { box-shadow: -1px -1px 2px var(--sl), 1px 1px 3px var(--sd); }
html.qm-soft .qm-row .qm-key.qm-code { background: var(--face); border-color: transparent; box-shadow: var(--dn-1); }
/* the settings panel itself never scrolls (focus on a switch could scroll it, pushing the menu out of view);
   only its pages do, and each switch's checkbox stays inside its own row */
#qm-panel, #qm-pal, #qm-keys { overflow: clip !important; }
#qm-panel .qm-toggle { position: relative; }
#qm-panel .qm-toggle input { left: 0; top: 50%; width: 1px; height: 1px; margin: 0; }
/* in a conversation the dock sits above the reply bar (and its small Reply), as toasts do */
html.qm:has(#qm-view .qm-cslot:not([hidden])) #qm-dock { bottom: calc(var(--qm-dock-lift, 96px) + 8px); }
.qm-composer.qm-aion .qm-ctop { align-items: stretch; }
/* "Collapse" only while the bar is empty: with words in it, the bar stays */
.qm-composer.qm-hastext .qm-fold { display: none !important; }
/* a backdrop on its way out lets clicks through */
:is(#qm-pal-scrim, #qm-panel-scrim, #qm-keys-scrim).qm-out { pointer-events: none; }
/* soft depth: a switch that's off still shows its knob */
html.qm-soft #qm-panel .qm-switch::after { background: color-mix(in srgb, var(--face) 82%, var(--text)); }
html.qm-soft.qm-light #qm-panel .qm-switch::after { background: #fff; }
/* bright mode: a category's name in a deeper shade of its colour, so it reads on a pale page */
html.qm-light .qm-row .qm-cat { background: color-mix(in srgb, var(--cat) 80%, #000); }
html.qm-light #qm-rail .qm-railpile[aria-pressed="true"], html.qm-light #qm-side .qm-sidepile .qm-si { color: color-mix(in srgb, var(--cat) 70%, #000); }
/* soft depth: keys drawn as keycaps */
html.qm-soft :is(#qm-keys, #qm-pal, .qm-fclear) kbd { background: var(--face); box-shadow: var(--up-1); }

/* bright mode: Gmail's own icons in dark greys */
html.qm.qm-light .M9 .afX { filter: brightness(0) invert(.4); }
html.qm.qm-light .M9 .ajR .ajT { filter: brightness(0) invert(.25); }
html.qm.qm-light .M9 .dL :is(.vq, [aria-label^="Remove" i]) { filter: brightness(0) invert(.4); }
html.qm.qm-light .M9 .btC :is(.aaA, .dv, .og, .J-JN-M-I-JG, .G-asx) { filter: brightness(0) invert(.44); }
html.qm.qm-light .M9 .btC :is(.wG, .J-Z-I, .J-JN-M-I, .oh):hover :is(.aaA, .dv, .og, .J-JN-M-I-JG) { filter: brightness(0) invert(.08); }
html.qm.qm-light .M9 .J-Z :is(.J-Z-I-J6-H, .e3, [class*="aaA"]) { filter: brightness(0) invert(.38); }
html.qm.qm-light :is([role="menu"], .J-M) .J-N-JX { filter: brightness(0) invert(.4); }
html.qm.qm-light .b8 .vh :is(.bBe, .bAp) { filter: brightness(0) invert(.4); }
html.qm.qm-light .M9 .btC [role="button"]:is(.T-I-JO, [aria-expanded="true"]) :is(.aaA, .dv, .og, .J-JN-M-I-JG, .G-asx) { filter: brightness(0) invert(.08) !important; }
html.qm-soft.qm-light .dC .T-I.hG .G-asx { filter: brightness(0) invert(.15) !important; }

/* =================================================================== windows open and close themselves */
/* the window's shadow grows underneath it; a copy of what you clicked fades away on top of it */
.qm-morph.qm-m-plate { z-index: 2147480150; background-clip: padding-box; }
.qm-morph.qm-m-top { z-index: 2147480320; }
html.qm .nH.Hd[role="dialog"][data-qm-gone] { opacity: 0 !important; pointer-events: none !important; }
/* what you clicked says it heard you while Gmail draws the window */
.qm-pressing { transition: transform .12s var(--ease) !important; }
#qm-fab.qm-pressing { transform: scale(.92) !important; }
.qm-cbox.qm-pressing { transform: scale(.992) !important; }
/* Gmail is slow (the first window after the page loads): a spinner, never an empty window */
@keyframes qm-spin { to { transform: rotate(360deg); } }
#qm-fab.qm-waiting::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid transparent; border-top-color: var(--text-3); border-right-color: var(--text-3); animation: qm-spin .8s linear infinite; }
.qm-cbox.qm-waiting::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(var(--tint), .07) 50%, transparent 70%) 0 0 / 220% 100%; animation: qm-sheen 1.1s linear infinite; z-index: 1; }
:is(.qm-chip, .qm-minibtn, #qm-view .qm-ib).qm-waiting { animation: qm-blink 1s ease-in-out infinite; }
/* the box keeps showing your words while they move into a window */
.qm-composer.qm-handing .qm-cfield textarea { visibility: visible !important; height: auto !important; }
html.qm .qm-composer.qm-handing ~ * .ip.qm-bar, html.qm:has(.qm-composer.qm-handing) .ip.qm-bar { opacity: 0 !important; }

/* =================================================================== a picture behind: text always reads
   Nothing goes between the picture and the text. Every letter carries a soft halo of the page's own tone,
   as strong as that picture needs (none over a dark enough one), and greys that would sink into it are lifted. */
html.qm.qm-bgimg.qm-halo #qm-view { --text-3: color-mix(in srgb, var(--text-2) 94%, transparent); --text-4: color-mix(in srgb, var(--text-2) 88%, transparent); --text-5: color-mix(in srgb, var(--text-2) 80%, transparent); --text-6: var(--text-4); text-shadow: var(--qm-halo); }
html.qm.qm-bgimg.qm-halo #qm-view .qm-row.qm-read .qm-who { font-weight: 400; }
html.qm.qm-bgimg #qm-view .qm-row.qm-read:not(:hover, .qm-cursor, .qm-chosen, .qm-picked) { background: rgba(var(--bg-rgb), .35); }
/* soft, over a picture: a row you point at is a rounded face set into read mail's backdrop, which runs on
   under its corners (still one block); it doesn't lift, and has no shadow to spill past the backdrop */
html.qm.qm-soft.qm-bgimg #qm-view .qm-rows .qm-row:is(:hover, .qm-cursor) { box-shadow: none !important; transform: none !important; isolation: isolate; }
html.qm.qm-soft.qm-bgimg #qm-view .qm-rows .qm-row.qm-read:is(:hover, .qm-cursor):not(.qm-chosen, .qm-picked) { background: rgba(var(--bg-rgb), .35) !important; }
html.qm.qm-soft.qm-bgimg #qm-view .qm-rows .qm-row.qm-read:is(:hover, .qm-cursor):not(.qm-chosen, .qm-picked)::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 10px; background: var(--face); pointer-events: none; }
html.qm.qm-bgimg.qm-halo #qm-view .qm-row:not(.qm-read) :is(.qm-who, .qm-s1) { font-weight: 600; color: var(--text); }
html.qm.qm-bgimg.qm-halo-read.qm-on-mail #qm-view { text-shadow: var(--qm-halo-read); }
html.qm.qm-bgimg:not(.qm-halo-read).qm-on-mail #qm-view { text-shadow: none; }
/* (things with their own surface keep their text clean) */
html.qm.qm-bgimg #qm-view :is(.qm-rich, .qm-rowacts, .qm-selbar, .qm-cpill, .qm-caught, .qm-key, .qm-code, .qm-tag, .qm-btn, .qm-cbox, .qm-composer, input, textarea, select, .qm-seg, .qm-fkind, .qm-fopt, .qm-fchip, .qm-subfind, .qm-sacts, .qm-pal-onpill, .qm-reach button, .qm-subbtn, .qm-subtag, .qm-catch) { text-shadow: none; }
html.qm.qm-bgimg.qm-halo #qm-view :is(.qm-find input, .qm-subfind input) { text-shadow: var(--qm-halo); }
html.qm.qm-bgimg.qm-halo #qm-view .qm-row .qm-when { color: var(--text-2); }
/* icons right on the picture: the same halo, as a shadow */
html.qm.qm-bgimg.qm-halo :is(#qm-rail button, #qm-burger, #qm-view .qm-tback, #qm-view .qm-mark, #qm-view .qm-day) { filter: var(--qm-halo-icon); }
html.qm.qm-bgimg.qm-halo :is(#qm-rail button, #qm-burger) { color: var(--text-2); }
html.qm.qm-bgimg.qm-halo #qm-chip { color: var(--text-2); text-shadow: var(--qm-halo); }
html.qm.qm-bgimg.qm-halo-read.qm-on-mail #qm-view :is(.qm-thread, .qm-reading) > .qm-bar .qm-ib { color: var(--text-2); filter: var(--qm-halo-icon); }
/* where a closing window goes (the + button, the box): there, as the window becomes it, without a fade */
html.qm #qm-fab.qm-morph-dest:not(.qm-morph-src), html.qm .qm-cbox.qm-morph-dest:not(.qm-morph-src) { opacity: 1 !important; transform: none !important; transition: none !important; pointer-events: auto !important; }
/* a window on its way back into the box (or the + button): it takes your next click already */
html.qm :is(#qm-fab, .qm-cbox).qm-morph-dest { pointer-events: auto !important; }

/* --- a row rebuilt under the pointer comes in already showing its buttons (no flicker while hovering) --- */
.qm-row.qm-hot { background: var(--row-hover); }
.qm-row.qm-hot .qm-rowacts { opacity: 1; pointer-events: auto; transition: none; }
.qm-row.qm-hot:has(.qm-rowacts) .qm-when { visibility: hidden; }
.qm-row.qm-hot:has(.qm-rowacts) .qm-marks:not(:has(.qm-rowfile)) { visibility: hidden; }
.qm-row.qm-hot:has(.qm-rowacts) .qm-marks:has(.qm-rowfile) > :not(.qm-rowfile) { visibility: hidden; }

/* --- quick buttons: which, and in what order (Settings › Layout) --- */
#qm-panel .qm-railbox { margin: 2px 0 6px; padding: 6px 0 2px 14px; border-left: 2px solid var(--line-2); }
#qm-panel .qm-railedit { display: flex; flex-direction: column; }
#qm-panel .qm-railrow.qm-toggle { display: grid; grid-template-columns: 14px 26px minmax(0, 1fr) auto; column-gap: 10px; min-height: 46px; border-bottom: 0; padding: 2px 6px 2px 0; border-radius: 10px; cursor: grab; }
#qm-panel .qm-railrow.qm-toggle:hover { background: var(--hover-2); }
#qm-panel .qm-railrow.qm-dragging { opacity: .5; }
#qm-panel .qm-railrow .qm-grip { width: 10px; height: 15px; justify-self: center; opacity: .5; background: radial-gradient(circle, var(--text-4) 1.3px, transparent 1.6px) 0 0 / 5px 5px; }
#qm-panel .qm-railrow .qm-grip i { display: none; }
#qm-panel .qm-railrow:hover .qm-grip { opacity: .85; }
#qm-panel .qm-railrow .qm-railico { display: flex; color: var(--icon); }
#qm-panel .qm-railrow .qm-railico svg { width: 17px; height: 17px; }
#qm-panel .qm-railbox .qm-pnote { margin: 6px 0 4px; }

/* --- Files --- */
#qm-view .qm-files { --fg: 16px; }
#qm-view .qm-files .qm-subnote { margin: -18px 0 20px; }
.qm-filebar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.qm-filebar .qm-subfind { margin: 0; }
.qm-filekinds { display: flex; flex-wrap: wrap; gap: 6px; }
.qm-fkind, .qm-fopt { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 16px; font: 450 13.5px var(--sans); color: var(--text-3); background: var(--s1); border: 1px solid var(--line-2); transition: background-color .12s var(--ease), color .12s var(--ease), border-color .12s var(--ease); }
.qm-fkind:hover, .qm-fopt:hover { color: var(--text); border-color: var(--line-3); }
.qm-fkind[aria-pressed="true"], .qm-fopt[aria-pressed="true"] { background: var(--text); color: var(--ink); border-color: transparent; }
.qm-fkind:focus-visible, .qm-fopt:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.qm-fileopts { display: flex; align-items: center; gap: 8px; min-height: 36px; margin-bottom: 18px; }
.qm-fileopts .qm-fsp, .qm-fvhead .qm-fsp { flex: 1; }
#qm-view .qm-fileopts .qm-fchip { height: 32px; }
.qm-seg.qm-fsort { display: flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--s1); border: 1px solid var(--line-2); }
.qm-seg.qm-fsort button { all: unset; height: 26px; padding: 0 12px; border-radius: 8px; cursor: pointer; color: var(--text-4); font: 450 13px var(--sans); }
.qm-seg.qm-fsort button:hover { color: var(--text); }
.qm-seg.qm-fsort button[aria-pressed="true"] { background: var(--hi); color: var(--text); }
.qm-fselbar.qm-selbar { position: sticky; top: 12px; margin: 0 0 16px; }
.qm-fselbar .qm-btn { height: 34px; }
:is(.qm-files, .qm-fview, .qm-confirm) .qm-btn { all: unset; box-sizing: border-box; cursor: pointer; height: 36px; padding: 0 14px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--text); color: var(--ink); font: 600 13.5px var(--sans); white-space: nowrap; transition: background-color .12s var(--ease), opacity .12s var(--ease); }
:is(.qm-files, .qm-fview, .qm-confirm) .qm-btn svg { width: 16px; height: 16px; }
:is(.qm-files, .qm-fview, .qm-confirm) .qm-btn:hover { background: var(--primary-hover); }
:is(.qm-files, .qm-fview, .qm-confirm) .qm-btn.qm-quietbtn { background: transparent; color: var(--text-2); border: 1px solid var(--line-3); font-weight: 450; }
:is(.qm-files, .qm-fview, .qm-confirm) .qm-btn.qm-quietbtn:hover { background: var(--hover); color: var(--text); }
:is(.qm-files, .qm-fview, .qm-confirm) .qm-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
:is(.qm-files, .qm-fview, .qm-confirm) .qm-btn.qm-danger { background: #e07a70; color: #1d0f0d; }
:is(.qm-files, .qm-fview, .qm-confirm) .qm-btn.qm-danger:hover { background: #ea8b81; }
html.qm-light :is(.qm-files, .qm-fview, .qm-confirm) .qm-btn.qm-danger { background: #c4483d; color: #fff; }
/* the files: rows like the inbox's (a small preview, or the file's mark, where a picture of the sender goes) */
.qm-filegrid.qm-rows { display: block; }
.qm-rows.qm-avs .qm-row.qm-frow { grid-template-columns: 26px minmax(0, 1.25fr) minmax(0, 1fr) 72px 92px; }
html.qm-dense .qm-rows.qm-avs .qm-row.qm-frow { grid-template-columns: 22px minmax(0, 1.25fr) minmax(0, 1fr) 72px 92px; }
html.qm-spacious .qm-rows.qm-avs .qm-row.qm-frow { grid-template-columns: 30px minmax(0, 1.25fr) minmax(0, 1fr) 72px 92px; }
.qm-frow .qm-fface { color: var(--icon); background: transparent; }
.qm-frow .qm-fface svg { width: 70%; height: 70%; }
.qm-frow .qm-fface.qm-fthumb { border-radius: 7px; background: var(--avatar); }
.qm-frow .qm-fface.qm-fthumb::before { border-radius: 7px; }
.qm-frow .qm-fname { display: flex; min-width: 0; font-weight: 500; color: var(--text); }
.qm-frow.qm-read .qm-fname { font-weight: 450; color: var(--text-2); }
.qm-frow .qm-fn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-frow .qm-ffrom { display: flex; align-items: baseline; gap: 10px; min-width: 0; color: var(--text-4); }
.qm-frow .qm-fwho { all: unset; flex: none; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; color: var(--text-3); border-radius: 6px; transition: color .12s var(--ease); }
.qm-frow .qm-fwho:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
.qm-frow .qm-fwho:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.qm-frow .qm-fin { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-5); }
.qm-frow .qm-fin .qm-tag { margin-right: 6px; }
.qm-frow .qm-fsize { text-align: right; font-size: 14px; color: var(--text-4); font-variant-numeric: tabular-nums; }
.qm-frow:hover .qm-fsize { visibility: hidden; }
/* chosen files: the preview turns into a check, as an email's picture does */
.qm-filegrid .qm-frow .qm-fface { position: relative; cursor: default; }
.qm-filegrid .qm-frow .qm-fface::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--text); opacity: 0; transform: scale(.6); transition: opacity .14s var(--ease), transform .16s var(--ease-out); }
.qm-filegrid .qm-frow .qm-fface::after { content: ""; position: absolute; left: 50%; top: 46%; width: 28%; height: 52%; border: solid var(--ink); border-width: 0 2px 2px 0; translate: -50% -50%; rotate: 45deg; opacity: 0; transition: opacity .14s var(--ease); }
.qm-filegrid .qm-frow.qm-picked .qm-fface::before { opacity: 1; transform: none; }
.qm-filegrid .qm-frow.qm-picked .qm-fface::after { opacity: 1; }
.qm-filegrid .qm-frow.qm-picked, .qm-filegrid .qm-frow.qm-picked:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
.qm-filegrid .qm-frow .qm-fface:hover { box-shadow: 0 0 0 2px var(--row-hover), 0 0 0 3.5px var(--line-3); }
.qm-picking .qm-frow .qm-rowacts { display: none; }
/* pictures: only the pictures, rounded, straight on the page */
.qm-filegrid.qm-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.qm-photo { position: relative; aspect-ratio: 1; border-radius: 14px; overflow: hidden; cursor: pointer; display: grid; place-items: center; background: rgba(var(--tint), .05); transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out); }
.qm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qm-photo:hover, .qm-photo:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(var(--shade), .3); outline: none; }
.qm-photo.qm-picked { box-shadow: 0 0 0 2.5px var(--text); }
.qm-photo:hover .qm-fpick, .qm-photo:focus-within .qm-fpick, .qm-picking .qm-photo .qm-fpick { opacity: 1; }
.qm-fglyph { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--text-3); flex: none; }
.qm-fglyph svg { width: 20px; height: 20px; }
.qm-fglyph b { font: 600 11px/1 var(--sans); letter-spacing: .08em; color: var(--text-4); }
.qm-fglyph.qm-big svg { width: 34px; height: 34px; stroke-width: 1.4; }
.qm-fpick { all: unset; box-sizing: border-box; position: absolute; top: 9px; left: 9px; z-index: 2; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: rgba(0, 0, 0, .28); border: 1.5px solid rgba(255, 255, 255, .85); color: transparent; opacity: 0; transition: opacity .12s var(--ease), background-color .12s var(--ease); }
.qm-fpick svg { width: 13px; height: 13px; stroke-width: 2.4; }
.qm-fpick[aria-checked="true"] { background: var(--text); border-color: var(--text); color: var(--ink); opacity: 1; }
.qm-fpick:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
html.qm-soft .qm-photo:hover { box-shadow: var(--up-2); }
html.qm-soft .qm-filegrid .qm-frow.qm-picked { background: var(--face) !important; box-shadow: var(--dn-1); }
html.qm-soft :is(.qm-fkind, .qm-fopt, .qm-seg.qm-fsort) { background: var(--face); border-color: transparent; box-shadow: var(--up-1); }
html.qm-soft :is(.qm-fkind, .qm-fopt)[aria-pressed="true"] { box-shadow: var(--dn-1); background: var(--face); color: var(--text); }

/* a file, open over the list */
#qm-fview-scrim { position: fixed; inset: 0; z-index: 2147483050; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(var(--scrim), .72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: qm-fade .14s var(--ease) both; transition: opacity .14s var(--ease); }
#qm-fview-scrim.qm-out { opacity: 0; }
.qm-fview { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); width: 100%; height: 100%; border-radius: 18px; overflow: hidden; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 30px 90px rgba(var(--shade), .55); animation: none; font: 400 14px var(--sans); color: var(--text-2); }
.qm-fvhead { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--line-2); min-width: 0; }
.qm-fvhead .qm-fglyph svg { width: 20px; height: 20px; }
.qm-fvtitle { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qm-fvtitle b { font: 600 15px var(--sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-fvtitle small { font: 400 12.5px var(--sans); color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-fvbody { position: relative; display: grid; place-items: center; min-height: 0; overflow: auto; background: color-mix(in srgb, var(--s1) 60%, var(--bg)); }
.qm-fvbody img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.qm-fvbody iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.qm-fvbody pre { align-self: stretch; justify-self: stretch; margin: 0; padding: 20px 24px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 13px/1.6 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-2); }
.qm-fvnone { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; color: var(--text-4); }
.qm-fvnone p { margin: 0; font-size: 14.5px; max-width: 420px; }
.qm-fvnone .qm-fvname { font: 600 17px/1.3 var(--sans); color: var(--text); max-width: 520px; overflow-wrap: anywhere; }
.qm-fvbody :is(video, audio) { max-width: 100%; max-height: 100%; }
.qm-fvbody audio { width: min(520px, 90%); }
/* a document Gmail reads: its first page, and the way to all of them */
.qm-fvdoc { display: flex; flex-direction: column; align-items: center; gap: 18px; max-height: 100%; padding: 24px; }
.qm-fvdoc img { max-width: min(620px, 100%); max-height: calc(100vh - 200px); object-fit: contain; border-radius: 6px; background: #fff; box-shadow: 0 10px 34px rgba(var(--shade), .4); }
.qm-fvnav { all: unset; box-sizing: border-box; position: absolute; top: 50%; z-index: 2; width: 42px; height: 42px; margin-top: -21px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text-2); background: color-mix(in srgb, var(--s2) 82%, transparent); border: 1px solid var(--line-3); box-shadow: 0 8px 22px rgba(var(--shade), .35); opacity: 0; transition: opacity .14s var(--ease); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.qm-fview:hover .qm-fvnav, .qm-fvnav:focus-visible { opacity: 1; }
.qm-fvnav svg { width: 18px; height: 18px; }
.qm-fvnav.qm-prev { left: 14px; }
.qm-fvnav.qm-next { right: 14px; }
.qm-fvnav.qm-next svg { transform: rotate(180deg); }
.qm-fvnav:hover { color: var(--text); }
html.qm-soft .qm-fview { background: var(--face); border-color: transparent; box-shadow: var(--up-3); }

/* a question that needs a yes */
#qm-confirm-scrim { position: fixed; inset: 0; z-index: 2147483150; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(var(--scrim), .6); animation: qm-fade .12s var(--ease) both; transition: opacity .12s var(--ease); }
#qm-confirm-scrim.qm-out { opacity: 0; }
.qm-confirm { width: min(470px, 100%); padding: 24px 24px 18px 26px; border-radius: 18px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 30px 80px rgba(var(--shade), .5); animation: qm-sheet-in .42s var(--spring-snappy) both; font: 400 14.5px/1.55 var(--sans); color: var(--text-3); }
.qm-confirm h2 { margin: 0 0 10px; font: 600 18px/1.3 var(--sans); color: var(--text); letter-spacing: -0.005em; }
.qm-confirm p { margin: 0 0 10px; }
:is(.qm-answer p, .qm-answer li, .qm-todo-t, .qm-catchup .qm-cusum, .qm-confirm h2, .qm-confirm p) { overflow-wrap: anywhere; }
:is(.qm-line, .qm-sum, .qm-point) p { min-width: 0; overflow-wrap: anywhere; }
#qm-view .qm-fchip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-confirm .qm-cbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
html.qm-soft .qm-confirm { background: var(--face); border-color: transparent; box-shadow: var(--up-3); }

/* =================================================================== calm */
.qm-calmslot:empty { display: none; }
.qm-calmslot { margin: -24px 0 28px; display: flex; flex-direction: column; gap: 14px; }
.qm-cpills { display: flex; flex-wrap: wrap; gap: 8px; }
.qm-cpill { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 9px; height: 38px; padding: 0 6px 0 14px; border-radius: 19px; background: var(--s1); border: 1px solid var(--line-2); color: var(--text-2); font: 450 14.5px var(--sans); }
button.qm-cpill { cursor: pointer; padding-right: 14px; transition: border-color .12s var(--ease), background-color .12s var(--ease); }
button.qm-cpill:hover { border-color: var(--line-3); background: var(--s2); }
.qm-cpill svg { width: 16px; height: 16px; color: var(--icon); flex: none; }
.qm-cpill small { font: 400 13.5px var(--sans); color: var(--text-4); }
.qm-cpill button { all: unset; cursor: pointer; height: 28px; padding: 0 12px; border-radius: 14px; background: var(--hi); color: var(--text); font: 500 13px var(--sans); margin-left: 4px; }
.qm-cpill button:hover { background: var(--hover); }
:is(.qm-cpill, .qm-cpill button):focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
html.qm-soft .qm-cpill { background: var(--face); border-color: transparent; box-shadow: var(--up-1); }
html.qm-soft button.qm-cpill:hover { box-shadow: var(--up-2); }
/* caught up: a small window onto the sky */
.qm-caught { display: flex; align-items: center; gap: 18px; padding: 14px 18px 14px 14px; border-radius: 18px; background: var(--s1); border: 1px solid var(--line-2); animation: qm-fade .5s var(--ease) both; }
.qm-skyart { width: 96px; height: 58px; flex: none; border-radius: 12px; display: block; box-shadow: 0 6px 18px rgba(var(--shade), .25); }
.qm-caughtw { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qm-caughtw b { font: 500 17px var(--sans); color: var(--text); }
.qm-caughtw small { font: 400 14px var(--sans); color: var(--text-4); }
html.qm-soft .qm-caught { background: var(--face); border-color: transparent; box-shadow: var(--up-1); }
html.qm.qm-bgimg :is(.qm-cpill, .qm-caught) { -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); background: color-mix(in srgb, var(--s1) 70%, transparent); }
#qm-view .qm-reach.qm-ended button { all: unset; cursor: pointer; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }
#qm-view .qm-reach.qm-ended button:hover { color: var(--text); background: none; }

/* the paper: an edition, set like a page */
.qm-paper .qm-titlerow { align-items: flex-start; margin-bottom: 36px; }
.qm-paper .qm-titlerow .qm-tback { margin-top: 8px; }
.qm-masthead { display: flex; flex-direction: column; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--line-3); flex: 1; }
.qm-masthead .qm-title { margin: 0; font: 500 44px/1.05 var(--serif); letter-spacing: -0.02em; }
.qm-dateline { margin: 0; font: 400 15px var(--sans); color: var(--text-4); letter-spacing: .01em; }
.qm-psection { margin: 0 0 40px; }
.qm-psection h2 { margin: 0 0 16px; font: 600 12.5px var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--text-4); }
.qm-stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px 28px; }
.qm-story { position: relative; display: flex; flex-direction: column; gap: 7px; padding: 16px 16px 18px; margin: 0 -16px; border-radius: 16px; cursor: pointer; transition: background-color .12s var(--ease); }
.qm-story:hover, .qm-story:focus-visible { background: var(--row-hover); outline: none; }
.qm-sfrom { display: flex; align-items: center; gap: 9px; font: 450 13.5px var(--sans); color: var(--text-3); min-width: 0; }
.qm-sfrom .qm-av { width: 22px; height: 22px; font-size: 10px; flex: none; }
.qm-sfrom span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-sfrom time { margin-left: auto; flex: none; color: var(--text-5); font-size: 13px; }
.qm-story h3 { margin: 0; font: 500 20px/1.3 var(--serif); color: var(--text); letter-spacing: -0.005em; overflow-wrap: anywhere; }
.qm-story p { margin: 0; font: 400 15px/1.5 var(--sans); color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.qm-story.qm-read h3 { color: var(--text-3); }
.qm-story.qm-read p { color: var(--text-5); }
.qm-sacts { position: absolute; top: 10px; right: 10px; display: flex; padding: 3px; border-radius: 11px; background: var(--s2); border: 1px solid var(--line-3); opacity: 0; pointer-events: none; transition: opacity .12s var(--ease); }
.qm-sacts .qm-ib.qm-s { width: 30px; height: 28px; border-radius: 8px; }
.qm-sacts .qm-ib svg { width: 16px; height: 16px; }
.qm-story:hover .qm-sacts, .qm-story:focus-within .qm-sacts { opacity: 1; pointer-events: auto; }
.qm-story:hover .qm-sfrom time { visibility: hidden; }
.qm-story.qm-gone { opacity: 0; transform: scale(.98); transition: opacity .18s var(--ease), transform .18s var(--ease); pointer-events: none; }
.qm-paperacts { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.qm-pmore { all: unset; cursor: pointer; display: inline-flex; align-items: center; height: 34px; margin: 8px 0 0 -12px; padding: 0 12px; border-radius: 10px; font: 450 14px var(--sans); color: var(--text-3); transition: background-color .12s var(--ease), color .12s var(--ease); }
.qm-pmore:hover { background: var(--hover); color: var(--text); }
.qm-pmore:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
.qm-paper .qm-pnote { text-align: center; margin: 14px 0 0; font-size: 13.5px; color: var(--text-5); }
.qm-paper .qm-btn { all: unset; box-sizing: border-box; cursor: pointer; height: 40px; padding: 0 18px; border-radius: 12px; display: inline-flex; align-items: center; gap: 8px; background: var(--text); color: var(--ink); font: 600 14px var(--sans); }
.qm-paper .qm-btn svg { width: 16px; height: 16px; }
.qm-paper .qm-btn:hover { background: var(--primary-hover); }
.qm-paper .qm-btn.qm-quietbtn { background: transparent; color: var(--text-2); border: 1px solid var(--line-3); font-weight: 450; }
.qm-paper .qm-btn.qm-quietbtn:hover { background: var(--hover); }
.qm-paperempty { justify-content: center; text-align: center; }
html.qm-soft .qm-story:is(:hover, :focus-visible) { background: var(--face); box-shadow: var(--up-2); }
html.qm-soft .qm-sacts { background: var(--face); border-color: transparent; box-shadow: var(--up-2); }

/* Settings › Calm */
#qm-panel .qm-times { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
#qm-panel .qm-tiderow { align-items: center; }
#qm-panel .qm-time { display: inline-flex; align-items: center; gap: 2px; padding: 3px 4px 3px 10px; border-radius: 10px; background: var(--s1); border: 1px solid var(--line-2); }
#qm-panel .qm-time .qm-x { all: unset; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 6px; color: var(--icon); }
#qm-panel .qm-time .qm-x:hover { background: var(--hover); color: var(--text); }
#qm-panel .qm-time .qm-x svg { width: 13px; height: 13px; }
#qm-panel input[type="time"] { all: unset; font: 500 14px var(--sans); color: var(--text); padding: 4px 2px; min-width: 76px; color-scheme: dark; }
html.qm-light #qm-panel input[type="time"] { color-scheme: light; }
#qm-panel .qm-prow input[type="time"] { padding: 6px 10px; border-radius: 10px; background: var(--s1); border: 1px solid var(--line-2); }
#qm-panel .qm-kinds { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 12px; }
#qm-panel .qm-rulerow { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 28px; gap: 12px; }
#qm-panel .qm-rulerow .qm-pav { width: 30px; height: 30px; }
#qm-panel .qm-rulerow .qm-x { all: unset; cursor: pointer; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--icon); }
#qm-panel .qm-rulerow .qm-x:hover { background: var(--hover); color: var(--text); }
#qm-panel .qm-rulerow .qm-x svg { width: 14px; height: 14px; }
/* Senders: the three views */
.qm-seg.qm-subtabs { display: inline-flex; padding: 3px; gap: 2px; margin: -22px 0 18px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line-2); }
.qm-seg.qm-subtabs button { all: unset; height: 30px; padding: 0 14px; border-radius: 9px; cursor: pointer; color: var(--text-4); font: 450 14px var(--sans); }
.qm-seg.qm-subtabs button:hover { color: var(--text); }
.qm-seg.qm-subtabs button[aria-pressed="true"] { background: var(--hi); color: var(--text); }
.qm-seg.qm-subtabs button:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }
html.qm-soft .qm-seg.qm-subtabs { background: var(--face); border-color: transparent; box-shadow: var(--dn-1); }
html.qm-soft .qm-seg.qm-subtabs button[aria-pressed="true"] { background: var(--face); box-shadow: var(--up-1); }
.qm-subs .qm-subnote:empty { display: none; }
.qm-timerow .qm-subwho small { display: flex; align-items: center; gap: 10px; }
.qm-timebar { display: inline-block; height: 5px; width: 90px; border-radius: 3px; background: var(--hi); position: relative; overflow: hidden; flex: none; }
.qm-timebar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 10%); border-radius: 3px; background: var(--text-4); }
#qm-view .qm-subs .qm-cta { all: unset; cursor: pointer; height: 38px; padding: 0 18px; border-radius: 11px; background: var(--text); color: var(--ink); font: 600 14px var(--sans); }
#qm-view .qm-subs .qm-cta:hover { background: var(--primary-hover); color: var(--ink); }
.qm-pnote.qm-center { text-align: center; color: var(--text-5); }

/* ---------------------------------------------------------------- selecting (⌘-click, x, ⇧J) */
.qm-rows .qm-row .qm-rav { position: relative; cursor: default; transition: box-shadow .12s var(--ease); }
.qm-rows .qm-row .qm-rav:hover { box-shadow: 0 0 0 2px var(--row-hover), 0 0 0 3.5px var(--line-3); }
/* chosen: the picture turns into a filled circle with a check */
.qm-rows .qm-row .qm-rav::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--text); opacity: 0; transform: scale(.6); transition: opacity .14s var(--ease), transform .16s var(--ease-out); }
.qm-rows .qm-row .qm-rav::after { content: ""; position: absolute; left: 50%; top: 46%; width: 28%; height: 52%; border: solid var(--ink); border-width: 0 2px 2px 0; translate: -50% -50%; rotate: 45deg; opacity: 0; transition: opacity .14s var(--ease); }
.qm-rows .qm-row.qm-chosen .qm-rav::before { opacity: 1; transform: none; }
.qm-rows .qm-row.qm-chosen .qm-rav::after { opacity: 1; }
.qm-rows .qm-row.qm-chosen .qm-rav { color: transparent; }
.qm-row.qm-chosen, .qm-row.qm-chosen:hover { background: color-mix(in srgb, var(--text) 9%, transparent); }
.qm-row.qm-chosen.qm-read { color: var(--text-3); }
html.qm-soft .qm-row.qm-chosen { background: var(--face) !important; box-shadow: var(--dn-1); }
.qm-selbar .qm-ib.qm-on svg { fill: currentColor; }
.qm-selbar .qm-selall { all: unset; cursor: pointer; height: 32px; padding: 0 12px; margin: 0 4px; border-radius: 9px; font: 450 14px var(--sans); color: var(--text-3); transition: background-color .12s var(--ease), color .12s var(--ease); }
.qm-selbar .qm-selall:hover { background: var(--hi); color: var(--text); }
.qm-selbar .qm-selall:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; }

/* ---------------------------------------------------------------- g, then a letter */
#qm-chord { position: fixed; z-index: 2147482600; left: 50%; bottom: 28px; translate: -50% 0; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 14px; max-width: min(860px, calc(100vw - 32px)); padding: 12px 18px; border-radius: 14px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 16px 40px rgba(var(--shade), .45); font: 400 14px var(--sans); color: var(--text-3); animation: qm-pop .2s var(--ease-out) both; transition: opacity .15s var(--ease); }
#qm-chord.qm-out { opacity: 0; }
#qm-chord kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; margin-right: 6px; border-radius: 6px; background: var(--hi); color: var(--text); font: 600 12px var(--sans); }
#qm-chord .qm-chordthen { margin: 0 6px 0 -8px; color: var(--text-5); }
#qm-chord .qm-chorditem { display: inline-flex; align-items: center; white-space: nowrap; }
html.qm-soft #qm-chord { background: var(--face); border-color: transparent; box-shadow: var(--up-3); }

/* ---------------------------------------------------------------- pinned searches */
.qm-find form .qm-pinbtn { flex: none; width: 36px; height: 36px; border-radius: 10px; color: var(--icon); }
.qm-find form .qm-pinbtn:hover { background: var(--hover); color: var(--text); }
.qm-find form .qm-pinbtn.qm-on { color: var(--text); }
.qm-find form .qm-pinbtn.qm-on svg { fill: currentColor; }

/* ---------------------------------------------------------------- ⌘1…9 in the menu (while ⌘ is held) */
#qm-side .qm-kn { display: none; margin-left: auto; padding-left: 8px; font: 500 12.5px var(--sans); color: var(--text-3); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
html.qm-modheld #qm-side .qm-kn { display: inline; animation: qm-fade .12s var(--ease) both; }
html.qm-modheld #qm-side .qm-n { display: none; }

/* ---------------------------------------------------------------- whose a brief line is: the account's square */
.qm-line .qm-linesw { width: 10px; height: 10px; border-radius: 3px; flex: none; align-self: center; margin-left: 14px; }

/* ---------------------------------------------------------------- files dropped onto a writing window */
html.qm .nH.Hd[role="dialog"].qm-dropping, html.qm .ip.qm-float.qm-dropping { outline: 2px solid var(--text-3); outline-offset: -2px; }
html.qm .nH.Hd[role="dialog"].qm-dropping::after { content: "Drop to attach"; position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; border-radius: inherit; background: rgba(var(--bg-rgb), .72); color: var(--text); font: 500 16px var(--sans); pointer-events: none; animation: qm-fade .12s var(--ease) both; }

/* ---------------------------------------------------------------- attachments while writing: a preview on each */
html.qm .dL:has(> .qm-attpv) { padding-left: 6px !important; gap: 10px !important; }
/* (:not(#qm-none) outranks the rule that clears every background inside a writing window) */
html.qm .dL > .qm-attpv:not(#qm-none) { flex: none; width: 32px; height: 32px; border-radius: 8px; overflow: hidden; display: grid; place-items: center; background: var(--hi) !important; color: var(--text-3) !important; }
html.qm .dL > .qm-attpv svg { width: 17px; height: 17px; }
html.qm .dL > .qm-attpv.qm-attimg:not(#qm-none) { background: var(--avatar) !important; }
html.qm .dL > .qm-attpv img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------------------------------------------------------------- a message moving to another account */
#qm-moving { position: fixed; z-index: 2147479600; display: flex; flex-direction: column; overflow: hidden; border-radius: 16px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 30px 80px rgba(var(--shade), .5); font: 400 15px/1.55 var(--sans); color: var(--text-2); animation: qm-fade .15s var(--ease) both; transition: opacity .24s var(--ease); pointer-events: none; }
#qm-moving.qm-out { opacity: 0; }
#qm-moving .qm-mvhead { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px 0 20px; border-bottom: 1px solid var(--line-2); }
#qm-moving .qm-mvtitle { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; color: var(--text); }
#qm-moving .qm-mvacct { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--text-3); }
#qm-moving .qm-mvsw { width: 10px; height: 10px; border-radius: 3px; }
#qm-moving .qm-mvline { padding: 10px 20px; border-bottom: 1px solid var(--line); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qm-moving .qm-mvline > span { color: var(--text-4); margin-right: 10px; }
#qm-moving .qm-mvbody { flex: 1; min-height: 0; overflow: hidden; padding: 14px 20px; }
#qm-moving .qm-mvbody p { margin: 0; }
#qm-moving .qm-mvfoot { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 20px; border-top: 1px solid var(--line-2); color: var(--text-3); font-size: 14px; }
#qm-moving .qm-mvspin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-3); border-top-color: var(--text-2); animation: qm-spin .8s linear infinite; }
html.qm-soft #qm-moving { background: var(--face); border-color: transparent; box-shadow: var(--up-3); }

/* a menu opened from the side menu sits beside it, above it */
html.qm .qm-menu.qm-menu-side { z-index: 2147481300 !important; }

/* =================================================================== reading */
/* an email that reports its opening */
.qm-trackchip { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12.5px; color: var(--text-4); background: rgba(var(--tint), .05); cursor: help; white-space: nowrap; }
.qm-trackchip svg { width: 14px; height: 14px; }
.qm-meta .qm-trackchip, .qm-meta .qm-readerbtn { margin-left: 8px; }
html.qm-soft .qm-trackchip { background: var(--face); box-shadow: var(--up-1); }
/* reader view */
.qm-readerbtn { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 13px; font-size: 13px; color: var(--text-4); border: 1px solid var(--line-3) !important; white-space: nowrap; transition: color .12s var(--ease), border-color .12s var(--ease), background-color .12s var(--ease); }
.qm-readerbtn svg { width: 14px; height: 14px; }
.qm-readerbtn:hover, .qm-readerbtn[aria-pressed="true"] { color: var(--text); border-color: var(--text-5) !important; }
.qm-article .qm-ameta .qm-readerbtn + .qm-unsub, .qm-article .qm-ameta .qm-trackchip + .qm-unsub { margin-left: auto; }
.qm-article .qm-ameta .qm-readerbtn { margin-left: auto; }
.qm-article .qm-ameta .qm-readerbtn ~ .qm-unsub { margin-left: 0; }
.qm-reader { max-width: 680px; font: 400 18px/1.65 var(--serif); color: var(--text-2); }
.qm-reader > :first-child { margin-top: 0; }
.qm-reader p, .qm-reader li { margin: 0 0 16px; overflow-wrap: anywhere; }
.qm-reader h3 { margin: 28px 0 12px; font: 600 22px/1.3 var(--sans); color: var(--text); letter-spacing: -0.01em; }
.qm-reader figure { margin: 22px 0; }
.qm-reader img { max-width: 100%; height: auto; border-radius: 10px; display: block; }
.qm-reader a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 3px; }
.qm-bubble .qm-reader { font-size: 17px; }
/* where a link really goes */
#qm-linktip { position: fixed; z-index: 2147482650; left: 16px; bottom: 16px; max-width: min(620px, calc(100vw - 32px)); display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; padding: 8px 14px 8px 12px; border-radius: 12px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 10px 30px rgba(var(--shade), .35); font: 400 13.5px var(--sans); color: var(--text-3); opacity: 0; translate: 0 4px; pointer-events: none; transition: opacity .12s var(--ease), translate .12s var(--ease); }
#qm-linktip.qm-on { opacity: 1; translate: 0 0; }
#qm-linktip svg { width: 15px; height: 15px; flex: none; color: var(--icon); }
#qm-linktip .qm-lthost { color: var(--text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 380px; }
#qm-linktip .qm-ltvia { color: var(--text-5); }
#qm-linktip .qm-ltwarn { flex-basis: 100%; color: var(--warm, #e0a36a); }
#qm-linktip.qm-odd svg { color: var(--warm, #e0a36a); }
html.qm-soft #qm-linktip { background: var(--face); border-color: transparent; box-shadow: var(--up-2); }
/* catch me up */
.qm-catchup { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; padding: 4px 0; font: 500 14px var(--sans); color: var(--text-3); }
.qm-catchup::before { content: ""; flex: 1 1 24px; max-width: 48px; height: 1px; background: var(--line-3); order: -1; }
.qm-catchup button { all: unset; cursor: pointer; height: 30px; padding: 0 12px; border-radius: 15px; background: var(--s1); color: var(--text-2); font: 450 13.5px var(--sans); transition: background-color .12s var(--ease); }
.qm-catchup button:hover { background: var(--s2); color: var(--text); }
.qm-catchup button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.qm-catchup button[disabled] { opacity: .6; cursor: default; }
.qm-catchup .qm-cusum { flex-basis: 100%; margin: 6px 0 0; font: 400 15.5px/1.55 var(--sans); color: var(--text-2); }
.qm-msg.qm-newmsg > .qm-meta::after { content: "New"; margin-left: 8px; font: 600 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-4); }
/* a person's card */
#qm-person { position: fixed; z-index: 2147482400; width: 340px; max-width: calc(100vw - 24px); padding: 16px; border-radius: 18px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 24px 60px rgba(var(--shade), .5); font: 400 14px var(--sans); color: var(--text-3); animation: qm-sheet-in .42s var(--spring-snappy) both; }
#qm-person .qm-pchead { display: flex; align-items: center; gap: 12px; }
#qm-person .qm-pcav { width: 44px; height: 44px; font-size: 16px; flex: none; }
#qm-person .qm-pcname { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
#qm-person .qm-pcname b { font: 600 16px var(--sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qm-person .qm-pcname small { font-size: 13px; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qm-person .qm-pcstat { margin: 12px 0 6px; font-size: 13.5px; color: var(--text-4); }
#qm-person .qm-pclist { display: flex; flex-direction: column; margin: 0 -8px 8px; }
#qm-person .qm-pcitem { all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 10px; padding: 7px 8px; border-radius: 9px; color: var(--text-2); }
#qm-person .qm-pcitem span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qm-person .qm-pcitem small { flex: none; color: var(--text-5); font-size: 12.5px; }
#qm-person .qm-pcitem:hover, #qm-person .qm-pcitem:focus-visible { background: var(--hover); color: var(--text); }
#qm-person .qm-pcacts { display: flex; gap: 6px; margin: 4px 0 12px; }
#qm-person .qm-btn { all: unset; box-sizing: border-box; cursor: pointer; height: 34px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-3); color: var(--text-2); font: 450 13.5px var(--sans); }
#qm-person .qm-btn svg { width: 15px; height: 15px; }
#qm-person .qm-btn:hover { background: var(--hover); color: var(--text); }
#qm-person .qm-pcrule { display: flex; width: 100%; }
#qm-person .qm-pcrule button { flex: 1; }
html.qm-soft #qm-person { background: var(--face); border-color: transparent; box-shadow: var(--up-3); }
/* reading type: editorial (a book-like serif, larger and airier) and mono */
html.qm-read-editorial :is(.qm-bubble, .qm-plainbody .qm-body, .qm-plainbody, .qm-answer p, .qm-answer li) { font-family: var(--serif) !important; font-size: 19.5px; line-height: 1.72; letter-spacing: .002em; }
html.qm-read-editorial .qm-plainbody { max-width: 640px; }
html.qm-read-editorial .qm-plainbody .qm-body :is(div, p, span, font, li, td) { font-family: inherit !important; }
html.qm-read-mono :is(.qm-bubble, .qm-plainbody .qm-body, .qm-plainbody) { font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace !important; font-size: 14.5px; line-height: 1.7; }
html.qm-read-mono .qm-plainbody .qm-body :is(div, p, span, font, li, td) { font-family: inherit !important; }
.qm-reader figure.qm-rfwait { display: none; }
.qm-reader img { max-height: 560px; object-fit: contain; }

#qm-person .qm-ib.qm-s { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--icon); align-self: flex-start; }
#qm-person .qm-ib.qm-s:hover { background: var(--hover); color: var(--text); }
#qm-person .qm-ib svg { width: 15px; height: 15px; }
#qm-person .qm-seg { display: flex; padding: 3px; gap: 2px; border-radius: 11px; background: var(--s1); }
#qm-person .qm-seg button { flex: 1; text-align: center; height: 30px; padding: 0 6px; border-radius: 8px; color: var(--text-3); font: 400 12.5px var(--sans); white-space: nowrap; transition: background-color .12s var(--ease), color .12s var(--ease); }
#qm-person .qm-seg button:hover { color: var(--text); }
#qm-person .qm-seg button[aria-pressed="true"] { background: var(--hi); color: var(--text); }
html.qm-soft #qm-person .qm-seg { background: var(--face); box-shadow: var(--dn-2); }
#qm-person :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* =================================================================== writing */
/* templates (⌘;) */
#qm-tpl { position: fixed; z-index: 2147482500; width: 420px; max-width: calc(100vw - 24px); border-radius: 16px; overflow: hidden; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 24px 60px rgba(var(--shade), .5); font: 400 14px var(--sans); color: var(--text-3); animation: qm-sheet-in .42s var(--spring-snappy) both; }
#qm-tpl .qm-tpin { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 14px; border-bottom: 1px solid var(--line-2); }
#qm-tpl .qm-tpin svg { width: 17px; height: 17px; color: var(--icon); flex: none; }
#qm-tpl .qm-tpin input { all: unset; flex: 1; min-width: 0; font: 400 15px var(--sans); color: var(--text); }
#qm-tpl .qm-tpin input::placeholder { color: var(--text-5); }
#qm-tpl .qm-tpin kbd { font: 400 12px var(--sans); color: var(--text-5); }
#qm-tpl .qm-tplist { max-height: 340px; overflow-y: auto; padding: 6px; }
#qm-tpl .qm-tpitem { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border-radius: 10px; cursor: pointer; }
#qm-tpl .qm-tpitem b { font: 500 14.5px var(--sans); color: var(--text); }
#qm-tpl .qm-tpitem small { font-size: 13px; color: var(--text-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qm-tpl .qm-tpitem.qm-on { background: var(--hover); }
#qm-tpl .qm-tpitem.qm-tpquiet b { font-weight: 400; color: var(--text-3); }
html.qm-soft #qm-tpl { background: var(--face); border-color: transparent; box-shadow: var(--up-3); }
#qm-panel .qm-tplcard { display: flex; flex-direction: column; gap: 8px; padding: 12px 0 16px; border-bottom: 1px solid var(--line); }
#qm-panel .qm-tplcard input, #qm-panel .qm-tplcard textarea { width: 100%; box-sizing: border-box; }
#qm-panel .qm-tplcard .qm-field { margin: 0; }
#qm-panel .qm-tplcard .qm-x { all: unset; cursor: pointer; flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--icon); }
#qm-panel .qm-tplcard .qm-x:hover { background: var(--hover); color: var(--text); }
#qm-panel .qm-tplcard .qm-x svg { width: 15px; height: 15px; }
#qm-panel .qm-times .qm-to { color: var(--text-4); font-size: 14px; }
/* promises: what you said you'd do */
.qm-promises { display: flex; flex-direction: column; }
.qm-promise { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 4px 0; cursor: pointer; }
.qm-promise .qm-prwho { flex: none; font: 450 13.5px var(--sans); color: var(--text-4); }
.qm-promise p { flex: 1; min-width: 0; margin: 0; font: 400 17px/1.4 var(--sans); color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-promise .qm-prdue { flex: none; font: 450 13.5px var(--sans); color: var(--text-3); }
.qm-promise .qm-prdue.qm-late { color: var(--warm); }
.qm-promise .qm-prdone { all: unset; cursor: pointer; flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--icon); opacity: .6; }
.qm-promise .qm-prdone svg { width: 16px; height: 16px; }
.qm-promise:hover .qm-prdone, .qm-promise .qm-prdone:focus-visible { opacity: 1; }
.qm-promise .qm-prdone:hover { background: var(--hover); color: var(--text); }
#qm-panel .qm-tplcard > input { flex: none; height: 40px; }
#qm-panel .qm-tplcard > textarea { margin-top: 0; }
/* a scheduled message: when it goes, and Cancel send */
.qm-sched { display: flex; align-items: center; gap: 10px; margin: 8px 0 18px; font: 450 14.5px var(--sans); color: var(--text-3); }
.qm-sched svg { width: 16px; height: 16px; color: var(--icon); flex: none; }
.qm-sched button { all: unset; cursor: pointer; height: 30px; padding: 0 12px; border-radius: 15px; border: 1px solid var(--line-3); color: var(--text-2); font: 450 13.5px var(--sans); }
.qm-sched button:hover { color: var(--text); background: var(--hover); }
.qm-sched button:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* =================================================================== looks */
/* grain: a fine film over everything (it never takes a click) */
#qm-grain { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; }
/* glass: surfaces let what's behind them show through, frosted */
html.qm.qm-glassy :is(#qm-pal, #qm-panel, .qm-menu, #qm-toast, #qm-gtoast, .qm-selbar, #qm-person, #qm-tpl, .qm-confirm, #qm-side, #qm-chord, #qm-linktip, .qm-chip) { background: color-mix(in srgb, var(--s2) var(--qm-glass-a, 100%), transparent) !important; -webkit-backdrop-filter: blur(var(--qm-glass-blur, 16px)) saturate(1.2); backdrop-filter: blur(var(--qm-glass-blur, 16px)) saturate(1.2); }
/* the account's color as the accent */
html.qm.qm-acc #qm-fab { background: var(--qm-acc); color: var(--qm-acc-ink); }
html.qm.qm-acc .qm-m-fabface { color: var(--qm-acc-ink); }
html.qm.qm-acc #qm-panel .qm-toggle input:checked + .qm-switch { background: var(--qm-acc); }
html.qm.qm-acc #qm-panel .qm-toggle input:checked + .qm-switch::after { background: var(--qm-acc-ink); }
html.qm.qm-acc .qm-rows .qm-row .qm-rav::before, html.qm.qm-acc .qm-filegrid .qm-frow .qm-fface::before { background: var(--qm-acc); }
html.qm.qm-acc .qm-rows .qm-row .qm-rav::after, html.qm.qm-acc .qm-filegrid .qm-frow .qm-fface::after { border-color: var(--qm-acc-ink); }
html.qm.qm-acc #qm-side [aria-current="page"] .qm-si { color: var(--qm-acc); }
/* less motion: things appear where they go */
html.qm.qm-still *, html.qm.qm-still *::before, html.qm.qm-still *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }

/* =================================================================== settings: flags, the welcome, the self-check */
#qm-panel .qm-flaglist { display: flex; flex-direction: column; margin: 4px 0 8px; max-height: 420px; overflow-y: auto; border-radius: 12px; border: 1px solid var(--line-2); }
#qm-panel .qm-flag { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) 64px; align-items: center; gap: 10px; min-height: 40px; padding: 4px 10px; border-bottom: 1px solid var(--line); }
#qm-panel .qm-flag:last-child { border-bottom: 0; }
#qm-panel .qm-flag code { font: 400 12.5px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#qm-panel .qm-flag.qm-changed code { color: var(--text); font-weight: 600; }
#qm-panel .qm-flag input[type="text"] { height: 30px; padding: 0 8px; font: 400 12.5px ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px; }
#qm-panel .qm-flag input.qm-bad { border-color: var(--warm); }
#qm-panel .qm-flagbool { all: unset; cursor: pointer; justify-self: start; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--s1); font: 400 12.5px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-2); }
#qm-panel .qm-flagbool[aria-pressed="true"] { color: var(--text); background: var(--hi); }
#qm-panel .qm-flagreset { all: unset; cursor: pointer; justify-self: end; font: 400 12.5px var(--sans); color: var(--text-4); }
#qm-panel .qm-flagreset:hover { color: var(--text); }
#qm-panel .qm-flags textarea { font: 400 12.5px/1.55 ui-monospace, "SF Mono", Menlo, monospace; }
#qm-check { position: fixed; z-index: 2147482700; top: 16px; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: 10px; max-width: min(760px, calc(100vw - 32px)); padding: 10px 10px 10px 18px; border-radius: 14px; background: var(--s2); border: 1px solid var(--line-3); box-shadow: 0 16px 40px rgba(var(--shade), .45); font: 400 14px/1.45 var(--sans); color: var(--text-2); animation: qm-pop .2s var(--ease-out) both; }
#qm-check span { flex: 1; }
#qm-check button { flex: none; height: 32px; padding: 0 12px; border-radius: 10px; color: var(--text); font: 500 13.5px var(--sans); }
#qm-check button:hover { background: var(--hi); }

/* =================================================================== one message, full screen
   Over the whole view (the list too, in dual view); the conversation waits underneath, hidden, just as it was. */
html.qm-mfull-on #qm-view > :not(#qm-mfull) { visibility: hidden !important; }
html.qm-mfull-on .ip.qm-bar { visibility: hidden !important; pointer-events: none !important; }
#qm-mfull { z-index: 6; animation: qm-fade .16s ease-out both; }
#qm-mfull > .qm-scroll { outline: none; }
html.qm.qm-bgimg #qm-mfull > .qm-bar { z-index: 2; }
#qm-mfull.qm-out { opacity: 0; transform: translateY(6px); transition: opacity .14s var(--ease), transform .14s var(--ease); pointer-events: none; }
@keyframes qm-mfull-in { from { opacity: 0; transform: translateY(10px); } }
html.qm-mfull-back #qm-view > :is(.qm-host, .qm-listpane) { animation: qm-fade .18s var(--ease) both; }
#qm-mfull .qm-article > .qm-more { margin-top: 10px; }
#qm-panel .qm-field > .qm-toggle.qm-inline { height: auto; border-bottom: 0; min-height: 0; }
.qm-mfacts { display: flex; gap: 8px; margin: 44px 0 0; padding-bottom: 72px; }
html.qm.qm-bgimg.qm-halo-read.qm-on-mail #qm-view #qm-mfull > .qm-bar .qm-ib { color: var(--text-2); filter: var(--qm-halo-icon); }

/* =================================================================== the keyboard's place, always visible
   (many of Umbra's controls reset the browser's own ring: this one ring is theirs) */
:is(#qm-panel, #qm-rail, #qm-gtoast, #qm-keys, .qm-whead, #qm-view, #qm-dock, #qm-confirm-scrim, #qm-fview-scrim, #qm-person, #qm-tpl) :is(button, [role="button"], [role="link"], [role="checkbox"], [role="tab"], a[href], [tabindex]:not([tabindex="-1"])):focus-visible,
:is(#qm-burger, #qm-chip, #qm-fab):focus-visible { outline: 2px solid var(--ring) !important; outline-offset: 2px; }

/* =================================================================== motion (parts/15-motion.js moves things; these are its pieces)
   the highlight of a choice sliding from the old one to the new (in that choice's own look) */
html :is(#qm-side, #qm-panel, #qm-view, #qm-pal, #qm-person, #qm-intro) .qm-slid.qm-slid.qm-slid.qm-slid { background-color: transparent !important; background-image: none !important; box-shadow: none !important; transition: none !important; }
.qm-plate { position: absolute; z-index: -1; display: block; transform-origin: 0 0; pointer-events: none; }
/* back from a conversation: its row glows for a moment, so your eye finds where you were */
@property --qm-glow { syntax: "<number>"; inherits: false; initial-value: 0; }
.qm-row.qm-came { background-image: linear-gradient(rgba(var(--tint), calc(var(--qm-glow) * .1)), rgba(var(--tint), calc(var(--qm-glow) * .1))); animation: qm-came 1.3s cubic-bezier(.3, .7, .4, 1) both; }
@keyframes qm-came { from { --qm-glow: 1; } to { --qm-glow: 0; } }
/* sparks off a star, an emoji on its way to its message */
.qm-spark { position: fixed; z-index: 2147483300; width: 5px; height: 5px; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
.qm-flyemoji { position: fixed; z-index: 2147483300; font-size: 22px; line-height: 1; pointer-events: none; transform: translate(-50%, -50%); font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
/* "Message sent": a check that draws itself */
#qm-gtoast .qm-gtick { flex: none; width: 18px; height: 18px; margin: 0 -2px 0 -4px; color: var(--text-2); }
#qm-gtoast .qm-gtick path { stroke-dasharray: 20; stroke-dashoffset: 20; animation: qm-draw .46s .1s cubic-bezier(.3, .7, .4, 1) forwards; }
@keyframes qm-draw { to { stroke-dashoffset: 0; } }
/* a row's buttons grow into place as you point at it */
.qm-rowacts { transform-origin: right center; scale: .96; transition: opacity .12s var(--ease), translate .14s var(--ease), scale .3s var(--spring-gentle); }
.qm-row:hover .qm-rowacts, .qm-row.qm-hot .qm-rowacts, .qm-row:focus-within .qm-rowacts { scale: 1; }

/* =================================================================== media
   a picture in an email's words opens full screen */
:is(#qm-view, #qm-mfull) :is(.qm-body, .qm-reader) img[data-qm-pic="1"] { cursor: zoom-in; }
/* the viewer: a picture bigger than the window shows at its own size on a click (scroll to look around) */
.qm-fvbody.qm-canzoom img { cursor: zoom-in; }
.qm-fvbody.qm-zoomed { display: block; }
.qm-fvbody.qm-zoomed img { max-width: none; max-height: none; cursor: zoom-out; }
/* a message's files, all at once */
.qm-attall { display: flex; align-items: center; gap: 8px; margin-top: 10px; font: 400 13.5px var(--sans); color: var(--text-4); }
.qm-attall > span { margin-right: 4px; }
.qm-attall .qm-minibtn { height: 32px; padding: 0 12px; font-size: 13.5px; }
/* pictures Gmail held back */
.qm-picshidden { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 14px; padding: 9px 10px 9px 14px; border-radius: 12px; background: var(--s1); border: 1px solid var(--line-2); font: 400 14px var(--sans); color: var(--text-3); }
.qm-picshidden > svg { width: 17px; height: 17px; flex: none; }
.qm-picshidden > span { flex: 1; min-width: 160px; }
.qm-picshidden button { all: unset; cursor: pointer; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--s2); color: var(--text); font: 500 13.5px var(--sans); }
.qm-picshidden button:hover { background: var(--hi); }
html.qm-soft .qm-picshidden { background: var(--face); border-color: transparent; box-shadow: var(--dn-1); }
/* a row's first file, by name */
.qm-row .qm-rowfile { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; max-width: 168px; height: 24px; padding: 0 8px 0 4px; border-radius: 7px; background: rgba(var(--tint), .055); border: 1px solid var(--line-2); font: 400 12.5px var(--sans); color: var(--text-3); white-space: nowrap; transition: background-color .12s var(--ease), color .12s var(--ease); }
.qm-row .qm-rowfile:hover { background: var(--hi); color: var(--text); }
.qm-row .qm-rowfile > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.qm-row .qm-rowfile > b { flex: none; font-weight: 500; color: var(--text-4); }
.qm-row .qm-rfext { flex: none; height: 16px; padding: 0 4px; border-radius: 4px; font: 700 8.5px/16px var(--sans); font-style: normal; letter-spacing: .02em; color: #fff; background: var(--ext, #8b93a3); }
html.qm-soft .qm-row .qm-rowfile { background: var(--face); border-color: transparent; box-shadow: var(--up-1); }
/* while you point at a row, its marks (a file, a star, a date due) step left, clear of its buttons */
.qm-row .qm-marks { transition: translate .32s var(--spring-gentle); }
.qm-row:is(:hover, .qm-hot) .qm-marks:has(.qm-rowfile) { translate: -76px 0; }
/* a video an email links to */
.qm-videos { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.qm-video { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 12px; width: min(420px, 100%); padding: 8px 14px 8px 8px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line-2); text-align: left; transition: background-color .12s var(--ease); }
.qm-video:hover { background: var(--s2); }
.qm-vthumb { position: relative; flex: none; width: 128px; height: 72px; border-radius: 9px; overflow: hidden; background: #111; }
.qm-vthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qm-vplay { position: absolute; left: 50%; top: 50%; width: 34px; height: 24px; margin: -12px 0 0 -17px; border-radius: 7px; background: rgba(0, 0, 0, .62); }
.qm-vplay::after { content: ""; position: absolute; left: 14px; top: 7px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #fff; }
.qm-video:hover .qm-vplay { background: #e5372b; }
.qm-video.qm-vnopic .qm-vthumb img { display: none; }
.qm-vinfo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.qm-vinfo b { font: 500 14.5px/1.35 var(--sans); color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.qm-vinfo small { font: 400 12.5px var(--sans); color: var(--text-4); }
html.qm-soft .qm-video { background: var(--face); border-color: transparent; box-shadow: var(--up-1); }
/* Trash and Spam: what happens there, and emptying it now */
.qm-binnote { display: flex; align-items: center; gap: 14px; margin: -28px 0 26px; font: 400 14px var(--sans); color: var(--text-4); }
.qm-binnote button { all: unset; cursor: pointer; height: 30px; padding: 0 12px; border-radius: 9px; background: var(--s1); border: 1px solid var(--line-2); color: var(--text-2); font: 500 13.5px var(--sans); }
.qm-binnote button:hover { background: var(--hi); color: var(--text); }

/* =================================================================== the welcome (parts/75-intro.js)
   White words on the eclipse's sky; glass for what you press; the type of the rest of Umbra */
#qm-intro { position: fixed; inset: 0; z-index: 2147483600; overflow: hidden; background: #000; color: #fff; font: 400 16px/1.5 "Instrument Sans", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; -webkit-font-smoothing: antialiased; text-align: left; letter-spacing: normal; outline: none; cursor: default; }
#qm-intro *, #qm-intro *::before, #qm-intro *::after { box-sizing: border-box; }
#qm-intro.qm-i-flat { background: linear-gradient(#012f9d, #0b5fd3 46%, #7fa2ec 66%, #f3dcef 80%, #fed166 90%, #e94442 97%, #ab284a); }
#qm-intro .qm-i-sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transform-origin: 50% 36%; }
#qm-intro.qm-i-flat .qm-i-sky { display: none; }
#qm-intro button, #qm-intro input { font: inherit; color: inherit; margin: 0; }
#qm-intro button { background: none; border: 0; padding: 0; cursor: pointer; }
#qm-intro :focus { outline: none; }
#qm-intro :focus-visible { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 3px; }
#qm-intro a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; text-decoration-thickness: 1px; }
#qm-intro a:hover { text-decoration-color: #fff; }
#qm-intro .qm-i-step { position: absolute; display: none; }
#qm-intro .qm-i-step.qm-i-on { display: block; }
/* the name */
#qm-intro .qm-i-title { left: 0; right: 0; top: calc(36% + 22vmin); text-align: center; }
#qm-intro h1 { margin: 0; font: 380 clamp(64px, 9.5vmin, 116px)/1 "Newsreader", "Iowan Old Style", Georgia, serif; letter-spacing: -0.03em; color: rgba(255, 255, 255, .97); text-shadow: 0 2px 40px rgba(0, 14, 60, .35); }
#qm-intro .qm-i-tag { margin: 16px 0 0; font-size: 17px; color: rgba(255, 255, 255, .74); letter-spacing: .005em; }
#qm-intro .qm-i-go { margin-top: 36px; }
/* the pages after it */
#qm-intro .qm-i-page { left: clamp(28px, 9vw, 150px); top: clamp(56px, calc(50% - 250px), 32%); width: min(540px, 50vw); }
#qm-intro .qm-i-page.qm-i-on { display: block; }
#qm-intro h2 { margin: 0 0 20px; font: 400 clamp(38px, 4.4vw, 56px)/1.04 "Newsreader", "Iowan Old Style", Georgia, serif; letter-spacing: -0.025em; color: #fff; text-shadow: 0 2px 30px rgba(0, 14, 60, .3); }
#qm-intro .qm-i-sub { margin: -6px 0 22px; font-size: 17px; color: rgba(255, 255, 255, .76); }
#qm-intro .qm-i-lines { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 12px; }
#qm-intro .qm-i-lines li { position: relative; padding-left: 22px; font-size: 17.5px; color: rgba(255, 255, 255, .84); }
#qm-intro .qm-i-lines li::before { content: ""; position: absolute; left: 3px; top: .64em; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: .7; box-shadow: 0 0 12px rgba(255, 255, 255, .8); }
#qm-intro .qm-i-choice { display: flex; flex-direction: column; gap: 10px; }
#qm-intro .qm-i-label { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
/* choices are words: the chosen one bright, with a dot that glows; the rest quieter. No boxes */
#qm-intro .qm-i-opts { display: flex; flex-wrap: wrap; gap: 4px 30px; }
#qm-intro .qm-i-opts.qm-i-col { flex-direction: column; gap: 2px; }
#qm-intro .qm-i-opt { position: relative; display: inline-flex; align-items: baseline; gap: 12px; padding: 5px 0 5px 20px; font-size: 17.5px; color: rgba(255, 255, 255, .5); text-align: left; transition: color .25s var(--ease, ease); }
#qm-intro .qm-i-opt::before { content: ""; position: absolute; left: 1px; top: calc(5px + .62em); width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); transition: background-color .25s var(--ease, ease), box-shadow .25s var(--ease, ease), transform .35s var(--spring-bouncy, ease); }
#qm-intro .qm-i-opt small { font-size: 14px; color: rgba(255, 255, 255, .38); transition: color .25s var(--ease, ease); }
#qm-intro .qm-i-opt:hover { color: rgba(255, 255, 255, .82); }
#qm-intro .qm-i-opt[aria-pressed="true"] { color: #fff; }
#qm-intro .qm-i-opt[aria-pressed="true"] small { color: rgba(255, 255, 255, .62); }
#qm-intro .qm-i-opt[aria-pressed="true"]::before { background: #fff; box-shadow: 0 0 0 1px #fff, 0 0 12px rgba(255, 255, 255, .85); transform: scale(1.1); }
#qm-intro .qm-i-choice + .qm-i-choice { margin-top: 22px; }
#qm-intro .qm-i-detail { min-height: 44px; margin-top: 18px; }
#qm-intro .qm-i-field { display: block; width: 100%; height: 44px; padding: 0 2px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .32); border-radius: 0; background: transparent; font-size: 16px; color: #fff; transition: border-color .2s; }
#qm-intro .qm-i-field::placeholder { color: rgba(255, 255, 255, .45); }
#qm-intro .qm-i-field:focus { border-bottom-color: rgba(255, 255, 255, .85); }
#qm-intro .qm-i-field:focus-visible { outline: none; }
#qm-intro .qm-i-note { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .62); }
#qm-intro .qm-i-note:empty { display: none; }
#qm-intro .qm-i-ok { color: #c9f7d9; }
#qm-intro .qm-i-err { color: #ffd0cf; }
#qm-intro .qm-i-agree { display: flex; align-items: flex-start; gap: 11px; margin-top: 20px; font-size: 14.5px; color: rgba(255, 255, 255, .82); cursor: pointer; }
#qm-intro .qm-i-agree[hidden] { display: none; }
#qm-intro .qm-i-agree input { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 16px; height: 16px; margin-top: 2px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .55); background: transparent; cursor: pointer; transition: background-color .18s, border-color .18s; }
#qm-intro .qm-i-agree input:checked { background: #fff; border-color: #fff; }
#qm-intro .qm-i-agree input:checked::after { content: ""; position: absolute; left: 4.5px; top: 1.5px; width: 4px; height: 8px; border: solid #0a1d52; border-width: 0 1.75px 1.75px 0; transform: rotate(45deg); }
/* moving on: words with an arrow that leans forward */
#qm-intro .qm-i-actions { display: flex; align-items: baseline; gap: 30px; margin-top: 34px; }
#qm-intro .qm-i-next { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 18px; font-weight: 500; color: #fff; letter-spacing: .005em; transition: opacity .25s; }
#qm-intro .qm-i-next::after { content: "→"; font-weight: 400; transition: transform .35s var(--spring-smooth, ease); }
#qm-intro .qm-i-next:hover::after { transform: translateX(5px); }
#qm-intro .qm-i-next:disabled { opacity: .32; cursor: default; }
#qm-intro .qm-i-next:disabled::after { transform: none; }
/* (the keyboard's place: underlined, never a box) */
#qm-intro :is(.qm-i-next, .qm-i-back, .qm-i-opt, .qm-i-skip, .qm-signin .qm-btn):focus-visible { outline: none; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
#qm-intro .qm-i-opt:focus-visible { color: rgba(255, 255, 255, .9); }
#qm-intro .qm-i-back { font-size: 15px; color: rgba(255, 255, 255, .5); transition: color .2s; }
#qm-intro .qm-i-back:hover { color: rgba(255, 255, 255, .9); }
#qm-intro .qm-i-title .qm-i-next { margin-top: 30px; font-size: 18px; }
/* how to use it: keys and what they do, in two quiet columns */
#qm-intro .qm-i-keys { display: grid; gap: 14px; margin: 4px 0 0; }
#qm-intro .qm-i-keys > div { display: grid; grid-template-columns: 112px 1fr; align-items: baseline; }
#qm-intro .qm-i-keys dt { font: 500 17px ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; letter-spacing: .02em; white-space: pre; }
#qm-intro .qm-i-keys dd { margin: 0; font-size: 17px; color: rgba(255, 255, 255, .78); }
/* the look page: the welcome narrows to the left, and the inbox shows beside it, as you choose */
#qm-intro { transition: clip-path .9s var(--spring-smooth, ease); clip-path: inset(0 0 0 0); }
#qm-intro.qm-i-split { clip-path: inset(0 46% 0 0); }
#qm-intro.qm-i-split .qm-i-page { width: min(540px, calc(54vw - clamp(28px, 9vw, 150px) - 32px)); }
#qm-intro.qm-i-split .qm-i-dots { left: 27%; }
#qm-intro.qm-i-split .qm-i-skip { right: calc(46% + 24px); }
.qm-i-shield { position: fixed; inset: 0; z-index: 2147483590; cursor: default; }
/* Sign in with ChatGPT, on the sky: words with an arrow, a line to paste into */
#qm-intro .qm-signin .qm-field { display: flex; gap: 8px; }
#qm-intro .qm-signin .qm-btn { display: inline-flex; align-items: center; gap: 10px; height: auto; padding: 6px 0; font-size: 17px; font-weight: 500; color: #fff; background: none; border: 0; }
#qm-intro .qm-signin .qm-btn::after { content: "→"; font-weight: 400; transition: transform .35s var(--spring-smooth, ease); }
#qm-intro .qm-signin .qm-btn:hover::after { transform: translateX(5px); }
#qm-intro .qm-signin .qm-btn:disabled { opacity: .5; }
#qm-intro .qm-signin .qm-pastebox[hidden] { display: none; }
#qm-intro .qm-signin .qm-pnote { margin: 14px 0 6px; font-size: 14px; color: rgba(255, 255, 255, .75); }
#qm-intro .qm-signin .qm-paste { display: block; width: 100%; height: 40px; padding: 0 2px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .32); border-radius: 0; background: transparent; font: 13.5px ui-monospace, SFMono-Regular, Menlo, monospace; color: #fff; }
#qm-intro .qm-signin .qm-paste::placeholder { color: rgba(255, 255, 255, .4); }
#qm-intro .qm-signin .qm-paste:focus { outline: none; border-bottom-color: rgba(255, 255, 255, .85); }
#qm-intro .qm-signin .qm-status { margin: 10px 0 0; font-size: 14px; color: rgba(255, 255, 255, .72); }
#qm-intro .qm-signin .qm-status:empty { display: none; }
#qm-intro .qm-signin .qm-status.qm-ok { color: #c9f7d9; }
#qm-intro .qm-signin .qm-status.qm-err { color: #ffd0cf; }
/* where you are, and the way out */
#qm-intro .qm-i-dots { position: absolute; left: 50%; bottom: 30px; display: flex; gap: 8px; transform: translateX(-50%); transition: opacity .4s; }
#qm-intro .qm-i-dots i { display: block; width: 6px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .34); transition: width .5s var(--spring-smooth, ease), background-color .4s; }
#qm-intro .qm-i-dots i.qm-i-cur { width: 20px; background: rgba(255, 255, 255, .92); }
#qm-intro .qm-i-skip { position: absolute; top: 20px; right: 24px; height: 32px; padding: 0 10px; font-size: 13.5px; color: rgba(255, 255, 255, .6); transition: color .2s, opacity .4s; }
#qm-intro .qm-i-skip:hover { color: #fff; }
#qm-intro .qm-i-wait { position: absolute; left: 0; right: 0; bottom: 64px; margin: 0; text-align: center; font-size: 14.5px; color: rgba(255, 255, 255, .78); }
@media (max-width: 859px) {
  #qm-intro .qm-i-title { top: calc(30% + 20vmin); }
  #qm-intro .qm-i-page { left: 24px; right: 24px; width: auto; top: auto; bottom: 70px; transform: none; }
}

/* Gmail's newer dialogs (Schedule send and its date picker, errors): they sit in their own layer, under Umbra's
   screens unless that layer is lifted. In Umbra's colours, the list inside them part of the dialog, not a card in it */
html.qm body > div:has(> div > :is([role="dialog"], [role="alertdialog"])):not([id^="qm-"]) { z-index: 2147480400 !important; }
html.qm body > div:has(> div > :is([role="dialog"], [role="alertdialog"])) > div > :is([role="dialog"], [role="alertdialog"]):not(.Hd) { background: var(--s2) !important; color: var(--text) !important; border: 1px solid var(--line-3) !important; border-radius: 22px !important; box-shadow: 0 30px 80px rgba(var(--shade), .55) !important; }
html.qm body > div:has(> div > :is([role="dialog"], [role="alertdialog"])) :is([role="dialog"], [role="alertdialog"]):not(.Hd) :is(h1, h2, h3, div, span, label, p, td, th) { color: var(--text-2) !important; }
html.qm body > div:has(> div > :is([role="dialog"], [role="alertdialog"])) :is([role="dialog"], [role="alertdialog"]):not(.Hd) :is(h1, h2, h3, [role="heading"]) { color: var(--text) !important; }
html.qm body > div:has(> div > [role="dialog"]) [role="dialog"]:not(.Hd) [role="menu"] { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 4px 0 !important; animation: none !important; }
html.qm body > div:has(> div > [role="dialog"]) [role="dialog"]:not(.Hd) [role="menuitem"]:hover { background: var(--hi) !important; }
html.qm body > div:has(> div > :is([role="dialog"], [role="alertdialog"])) :is([role="dialog"], [role="alertdialog"]):not(.Hd) :is(input, select) { background: var(--s1) !important; color: var(--text) !important; border: 1px solid var(--line-3) !important; border-radius: 10px !important; }
html.qm body > div:has(> div > :is([role="dialog"], [role="alertdialog"])) :is([role="dialog"], [role="alertdialog"]):not(.Hd) svg { fill: var(--text-3); }
/* (Schedule send's calendar: Gmail's older date picker, white unless told) */
html.qm :is([role="dialog"], [role="alertdialog"]):not(.Hd) :is(.J-JB-KA, .J-JB-KA tr, .J-JB-KA th, .J-JB-KA td, .J-JB-KA button) { background-color: transparent !important; }
html.qm:not(.qm-light) :is([role="dialog"], [role="alertdialog"]):not(.Hd) .J-JB-KA button { filter: invert(1) brightness(1.6); }
html.qm :is([role="dialog"], [role="alertdialog"]):not(.Hd) .J-JB-KA td { color: var(--text-2) !important; }