/* Colors live in themes. Dark is the default; data-theme="light" on the root switches the whole app,
   and on any element it restyles just that part, like the previews in Settings → Appearance. */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* The window's backdrop under the sidebar and around the chat: soft light falls from the left corners onto --app-bg.
     --app-bg alone is the backdrop where no light reaches, as under the title bar buttons on the right. */
  --app-bg: rgb(18, 19, 23);
  --frame:
    radial-gradient(58% 72% at 0% 0%, rgba(62, 76, 106, 0.5), rgba(62, 76, 106, 0.26) 38%, rgba(62, 76, 106, 0.08) 68%, transparent),
    radial-gradient(52% 64% at 0% 100%, rgba(58, 55, 94, 0.42), rgba(58, 55, 94, 0.2) 38%, rgba(58, 55, 94, 0.06) 68%, transparent),
    radial-gradient(26% 36% at 6% 50%, rgba(50, 64, 82, 0.2), rgba(50, 64, 82, 0.07) 50%, transparent);
  /* What sits on the backdrop: the chat lifts off it, the chosen row is a small card of its own. */
  --card-lift: 0 18px 48px -18px rgba(0, 0, 0, 0.7);
  --row-hover-bg: rgba(255, 255, 255, 0.055);
  --row-active-bg: rgb(43, 46, 54);
  --row-active-lift: inset 0 0.5px 0 rgba(255, 255, 255, 0.07), 0 1px 2px rgba(0, 0, 0, 0.35);
  /* The chat's padlock, drawn in thin lines, and the glass card that sets its password. */
  --seal-ink: rgba(255, 255, 255, 0.94);
  --pass-bg: rgba(255, 255, 255, 0.06);
  --pass-edge: rgba(255, 255, 255, 0.1);
  --pass-lift: 0 10px 30px -14px rgba(0, 0, 0, 0.6);
  --pass-focus-bg: rgba(255, 255, 255, 0.08);
  --pass-focus-edge: rgba(255, 255, 255, 0.2);
  --chat-bg: rgb(25, 25, 25);
  --titlebar-symbols: rgb(154, 154, 154);
  /* The opening: the night it falls into; its mist, deep where little light reaches it and lit where much does; the light
     around the ghost, and how much of it the trail takes on; the motes in the air and how bright they are; how far the
     edges sink into shade; and the soft light that stands in without WebGL. */
  --splash-night: rgb(13, 14, 22);
  --splash-mist-deep: rgb(26, 30, 48);
  --splash-mist-lit: rgb(150, 168, 240);
  --splash-glow: rgb(150, 170, 255);
  --splash-core: rgb(232, 238, 255);
  --splash-mist-alpha: 0.55;
  --splash-glow-alpha: 0.5;
  --splash-trail: 0.35;
  --splash-motes: 1;
  --splash-shade: 0.5;
  --splash-aura: rgba(86, 104, 172, 0.34);
  --splash-glow-rgb: 150, 172, 255;

  --contour-outer: rgba(0, 0, 0, 0.5);
  --contour-inner: rgb(32, 32, 32);

  --fg-rgb: 255, 255, 255;
  --fg-primary-opacity: 0.85;
  --fg-secondary-opacity: 0.55;
  --fg-tertiary-opacity: 0.25;
  --fg-quaternary-opacity: 0.1;

  --danger-rgb: 255, 115, 105;
  --success-rgb: 110, 205, 140;
  --warn-rgb: 255, 180, 96;
  --link-rgb: 140, 190, 255;
  --control-hover-bg: rgb(36, 36, 36);
  --menu-bg: rgb(36, 36, 36);
  --popover-bg: rgb(33, 33, 33);
  --selection-rgb: 130, 180, 245;
  --backdrop: rgba(0, 0, 0, 0.5);
  --mini-backdrop: rgba(0, 0, 0, 0.42);
  /* Every drop shadow's strength is multiplied by this: dark surfaces need deep shadows, light ones barely any. */
  --shadow: 1;
  --glow-rgb: 255, 255, 255;

  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.05));
  --glass-rim: linear-gradient(155deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.14) 32%, rgba(255, 255, 255, 0.05) 62%, rgba(255, 255, 255, 0.38));
  --glass-shade: inset 0 1px 1px rgba(255, 255, 255, 0.22), inset 0 -1px 2px rgba(0, 0, 0, 0.25);
  --glass-drop: 0 3px 10px rgba(0, 0, 0, 0.35);
  --glass-backdrop: blur(0.4px) saturate(1.6) brightness(1.08);
  --lens-bg: rgba(24, 24, 24, 0.55);

  /* What steps back behind a selection or a picker: blurred and dimmed here, blurred and washed out in the light. */
  --veil: blur(5px) brightness(0.78) contrast(0.949);
  --stage-veil: blur(24px) saturate(1.1) brightness(0.5);
  --stage-veil-bg: rgba(10, 10, 10, 0.36);
  --drop-veil-bg: rgba(25, 25, 25, 0.86);

  --composer-bg: rgb(30, 30, 30);
  --composer-border: rgb(34, 34, 34);
  --field-bg: var(--composer-bg);
  --composer-fg-rgb: 161, 161, 161;
  --composer-accent-rgb: 250, 250, 250;
  --composer-on-accent-rgb: 15, 15, 15;

  --diff-removed: rgb(255, 188, 181);
  --diff-added: rgb(192, 238, 206);
  --well-bg: rgba(0, 0, 0, 0.28);
  --tip-bg: rgba(36, 36, 38, 0.82);
  --attachment-note-bg: rgb(60, 60, 60);
  --attachment-note-hover-bg: rgb(80, 80, 80);
  --media-bg: rgb(20, 20, 20);
  --drop-icon-base: rgb(30, 30, 30);
  --on-danger: rgb(20, 20, 20);
  --stage-ring: rgba(10, 10, 10, 0.6);
  --paint-shade-rgb: 0, 0, 0;
  --browser-glass-bg: rgba(22, 22, 22, 0.82);
  --browser-toast-bg: rgba(22, 22, 22, 0.88);
  --browser-pill-hover-bg: rgb(255, 255, 255);

  /* Chat stats: a card with a frosted rim; its bars in pink, violet, sky and amber. */
  --stats-rim: rgba(255, 255, 255, 0.035);
  --stats-rim-edge: rgba(255, 255, 255, 0.085);
  --stats-card: rgb(29, 28, 34);
  --stats-card-lift: 0 18px 40px -20px rgba(0, 0, 0, 0.8);
  --stats-line: rgba(255, 255, 255, 0.1);
  --stats-wash: rgba(24, 22, 30, 0.42);
  --stats-1: 244, 88, 176;
  --stats-2: 160, 126, 255;
  --stats-3: 96, 176, 255;
  --stats-4: 250, 178, 72;
  --stats-neutral: 164, 162, 180;

  /* Drawings: how strong their ink is, and the palette of their series. The slots keep one order in both themes;
     it was picked so that neighbours stay apart for every kind of colour vision, and no slot is too pale or too
     loud for its surface. --s0 is what is left over: "other". */
  --dg-ink: 0.92;
  --dg-ink-2: 0.64;
  --dg-ink-3: 0.48;
  --s0: 122, 122, 122;
  --s1: 72, 133, 223;
  --s2: 202, 103, 25;
  --s3: 9, 148, 133;
  --s4: 134, 99, 198;
  --s5: 185, 137, 24;
  --s6: 215, 95, 148;
  --s7: 58, 143, 76;
}

[data-theme="light"] {
  color-scheme: light;

  --app-bg: rgb(240, 243, 248);
  --frame:
    radial-gradient(58% 72% at 0% 0%, rgba(198, 213, 236, 0.9), rgba(198, 213, 236, 0.48) 38%, rgba(198, 213, 236, 0.13) 68%, transparent),
    radial-gradient(52% 64% at 0% 100%, rgba(210, 207, 238, 0.85), rgba(210, 207, 238, 0.42) 38%, rgba(210, 207, 238, 0.11) 68%, transparent),
    radial-gradient(26% 36% at 6% 50%, rgba(250, 252, 255, 0.75), rgba(250, 252, 255, 0.28) 50%, transparent);
  --card-lift: 0 1px 2px rgba(30, 48, 88, 0.04), 0 18px 44px -20px rgba(30, 48, 88, 0.16);
  --row-hover-bg: rgba(255, 255, 255, 0.5);
  --row-active-bg: rgb(255, 255, 255);
  --row-active-lift: 0 0 0 0.5px rgba(30, 48, 88, 0.07), 0 1px 3px rgba(30, 48, 88, 0.08);
  --seal-ink: rgba(20, 24, 32, 0.9);
  --pass-bg: rgba(30, 48, 88, 0.045);
  --pass-edge: rgba(30, 48, 88, 0.1);
  --pass-lift: 0 0 0 0 transparent;
  --pass-focus-bg: rgb(255, 255, 255);
  --pass-focus-edge: rgba(30, 48, 88, 0.22);
  --chat-bg: rgb(255, 255, 255);
  --titlebar-symbols: rgb(92, 92, 92);
  --splash-night: rgb(243, 244, 250);
  --splash-mist-deep: rgb(200, 203, 230);
  --splash-mist-lit: rgb(255, 255, 255);
  --splash-glow: rgb(124, 116, 228);
  --splash-core: rgb(88, 80, 204);
  --splash-mist-alpha: 0.75;
  --splash-glow-alpha: 0.42;
  --splash-trail: 0.9;
  --splash-motes: 0;
  --splash-shade: 0.07;
  --splash-aura: rgba(166, 186, 242, 0.4);
  --splash-glow-rgb: 92, 118, 230;

  --contour-outer: rgba(30, 48, 88, 0.1);
  --contour-inner: rgb(255, 255, 255);

  --fg-rgb: 0, 0, 0;
  --fg-primary-opacity: 0.85;
  --fg-secondary-opacity: 0.6;
  --fg-tertiary-opacity: 0.32;
  --fg-quaternary-opacity: 0.12;

  --danger-rgb: 214, 48, 40;
  --success-rgb: 22, 138, 70;
  --warn-rgb: 200, 110, 0;
  --link-rgb: 22, 106, 214;
  --control-hover-bg: rgb(240, 240, 240);
  --menu-bg: rgb(255, 255, 255);
  --popover-bg: rgb(255, 255, 255);
  --selection-rgb: 40, 120, 235;
  --backdrop: rgba(0, 0, 0, 0.2);
  --mini-backdrop: rgba(0, 0, 0, 0.16);
  --shadow: 0.32;
  --glow-rgb: 0, 0, 0;

  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55) 55%, rgba(255, 255, 255, 0.7));
  --glass-rim: linear-gradient(155deg, rgba(255, 255, 255, 1), rgba(0, 0, 0, 0.1) 32%, rgba(0, 0, 0, 0.06) 62%, rgba(255, 255, 255, 0.8));
  --glass-shade: inset 0 1px 1px rgba(255, 255, 255, 0.9), inset 0 -1px 2px rgba(0, 0, 0, 0.06);
  --glass-drop: 0 3px 10px rgba(0, 0, 0, 0.12);
  --glass-backdrop: blur(0.4px) saturate(1.4) brightness(1.02);
  --lens-bg: rgba(255, 255, 255, 0.6);

  --veil: blur(5px) contrast(0.6) brightness(1.25);
  --stage-veil: blur(24px) saturate(1.1) brightness(1.08);
  --stage-veil-bg: rgba(250, 250, 250, 0.5);
  --drop-veil-bg: rgba(255, 255, 255, 0.84);

  --composer-bg: rgb(255, 255, 255);
  --composer-border: rgb(226, 226, 226);
  --field-bg: rgb(245, 245, 245);
  --composer-fg-rgb: 118, 118, 118;
  --composer-accent-rgb: 23, 23, 23;
  --composer-on-accent-rgb: 255, 255, 255;

  --diff-removed: rgb(176, 40, 32);
  --diff-added: rgb(18, 120, 60);
  --well-bg: rgba(0, 0, 0, 0.04);
  --tip-bg: rgba(255, 255, 255, 0.86);
  --attachment-note-bg: rgb(228, 228, 228);
  --attachment-note-hover-bg: rgb(212, 212, 212);
  --media-bg: rgb(238, 238, 238);
  --drop-icon-base: rgb(255, 255, 255);
  --on-danger: rgb(255, 255, 255);
  --stage-ring: rgba(250, 250, 250, 0.7);
  --paint-shade-rgb: 255, 255, 255;
  --browser-glass-bg: rgba(255, 255, 255, 0.82);
  --browser-toast-bg: rgba(255, 255, 255, 0.9);
  --browser-pill-hover-bg: rgb(0, 0, 0);

  --stats-rim: rgba(34, 32, 48, 0.022);
  --stats-rim-edge: rgba(34, 32, 48, 0.045);
  --stats-card: rgb(255, 255, 255);
  --stats-card-lift: 0 1px 2px rgba(30, 30, 50, 0.05), 0 16px 36px -16px rgba(30, 30, 50, 0.22);
  --stats-line: rgba(40, 30, 60, 0.1);
  --stats-wash: rgba(255, 255, 255, 0.46);
  --stats-1: 226, 52, 156;
  --stats-2: 134, 86, 240;
  --stats-3: 44, 140, 238;
  --stats-4: 230, 140, 20;
  --stats-neutral: 124, 122, 142;

  --dg-ink: 0.9;
  --dg-ink-2: 0.64;
  --dg-ink-3: 0.56;
  --s0: 140, 140, 140;
  --s1: 28, 101, 200;
  --s2: 202, 91, 4;
  --s3: 11, 142, 127;
  --s4: 109, 60, 179;
  --s5: 191, 134, 16;
  --s6: 209, 65, 134;
  --s7: 7, 120, 47;
}

/* Tokens made of the ones above, worked out again wherever a theme starts. */
:root,
[data-theme] {
  --contour:
    inset 0 0 0 var(--contour-width) var(--contour-inner),
    0 0 0 var(--contour-width) var(--contour-outer);
  --fg-primary: rgba(var(--fg-rgb), var(--fg-primary-opacity));
  --fg-secondary: rgba(var(--fg-rgb), var(--fg-secondary-opacity));
  --fg-tertiary: rgba(var(--fg-rgb), var(--fg-tertiary-opacity));
  --fg-quaternary: rgba(var(--fg-rgb), var(--fg-quaternary-opacity));
  --icon-rgb: var(--fg-rgb);
  --icon-opacity: var(--fg-secondary-opacity);
  --icon-hover-opacity: var(--fg-primary-opacity);
  --icon-disabled-opacity: var(--fg-tertiary-opacity);
  --focus-ring: rgba(var(--fg-rgb), 0.35);
  --bubble-bg: rgb(var(--composer-accent-rgb));
  --bubble-fg-rgb: var(--composer-on-accent-rgb);
}

/* A theme picked by hand spreads from the pointer with a soft edge (theme.js grows the mask);
   one changed by the system fades in. The edge is the last 16% of the circle, REVEAL.feather in theme.js. */
.is-theme-reveal::view-transition-old(root),
.is-theme-reveal::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

.is-theme-reveal::view-transition-new(root) {
  -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent);
  mask-image: radial-gradient(closest-side, #000 84%, transparent);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 0 0;
  mask-size: 0 0;
}

.is-theme-fade::view-transition-group(root) {
  animation-duration: 0.42s;
}

:root {
  --contour-width: 1.5px;
  --icon-size: 22px;
  --icon-button-size: 32px;

  --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono-font: ui-monospace, "Cascadia Code", Consolas, monospace;
  --font-size: 15px;
  --small-font-size: 14px;
  --line-height: 1.5;
  --message-line-height: 1.65;

  --chat-radius: 12px;
  --chat-gap: 8px;
  --sidebar-width: 17.3%;
  --sidebar-min-width: 240px;
  --sidebar-size: max(var(--sidebar-min-width), var(--sidebar-width));
  --motion-duration: 0.6s;
  --motion-easing: cubic-bezier(0.32, 0.72, 0, 1);
  --toggle-inset: 10px;
  --icon-stroke: 5.5;

  --sidebar-gap: 6px;
  --sidebar-font-size: 14px;

  --scrollbar-width: 4px;
  --scrollbar-hover-width: 6px;
  --scrollbar-hit-width: 12px;

  --composer-max-width: 680px;
  --composer-side-gap: 24px;
  --composer-bottom-gap: 16px;
  --composer-radius: 24px;
  --composer-font-size: 16px;
  --composer-line-height: 24px;
  --composer-button-size: 34px;
  --composer-icon-size: 16px;

  --welcome-size: 96px;
  --welcome-gap: 16px;
  --folder-space: 44px;
  --welcome-space: calc(var(--welcome-size) * 70 / 64 + var(--welcome-gap) + var(--folder-space));

  --titlebar-height: 0px;
}

.is-desktop {
  --titlebar-height: 36px;
}

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

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--frame), var(--app-bg);
  color: var(--fg-primary);
  font-family: var(--font);
  font-size: var(--font-size);
  line-height: var(--line-height);
  overflow: hidden;
}

.app {
  position: relative;
  height: 100%;
}

.titlebar {
  display: none;
}

.is-desktop .titlebar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  height: var(--titlebar-height);
  padding-left: calc(var(--toggle-inset) + 6px);
  -webkit-app-region: drag;
  app-region: drag;
}

/* macOS shows the name in its own title bar; Linux window managers draw the whole bar themselves. */
.is-mac .titlebar-name {
  display: none;
}

.is-linux.is-desktop {
  --titlebar-height: 0px;
}

.is-linux.is-desktop .titlebar {
  display: none;
}

.titlebar-name {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(var(--fg-rgb), 0.5);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  user-select: none;
}

.titlebar-name .glyph-ghost {
  width: 12px;
  height: 13px;
  color: rgba(var(--fg-rgb), 0.78);
}

.glyph-ghost-eye {
  fill: var(--app-bg);
}

.is-desktop .app {
  top: calc(var(--titlebar-height) - var(--chat-gap));
  height: calc(100% - var(--titlebar-height) + var(--chat-gap));
}

.splash {
  display: none;
}

.is-splash .splash {
  --splash-size: 112px;
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: block;
  overflow: hidden;
}

.splash.is-opening {
  pointer-events: none;
}

/* The app is drawn ahead, under the opening, so it can fade in at once when the opening gives way to it. */
.is-splash .app {
  will-change: transform, opacity;
}

/* The opening's stage: night falls over the window's own color and mist drifts through it, all drawn by the mist's
   canvas. Without WebGL a soft light in the middle stands in for it. */
.splash-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--chat-bg);
}

.splash-aura {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1200px;
  height: 1200px;
  margin: -600px 0 0 -600px;
  background: radial-gradient(closest-side, var(--splash-aura), transparent);
  opacity: 0;
}

.splash-mist {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.splash-fly {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--splash-size);
  height: calc(var(--splash-size) * 70 / 64);
  margin: calc(var(--splash-size) * -35 / 64) 0 0 calc(var(--splash-size) / -2);
  opacity: 0;
}

.splash-ghost {
  width: 100%;
  height: 100%;
}

.splash-ghost-body,
.splash ghost-thinking {
  width: 100%;
  height: 100%;
}

.splash-word {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgb(var(--composer-accent-rgb));
  font-family: "OpenGhost Display", var(--font);
  font-size: 48px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: pre;
  transform: translateY(-54%);
  text-shadow: 0 0 34px rgba(var(--splash-glow-rgb), 0.2);
  /* Hidden until the letters are set up, so the page never shows the bare word while it loads. */
  visibility: hidden;
}

.splash-word.is-set {
  visibility: visible;
}

/* The name out of focus, under the sharp one: each letter drawn only as its own soft glow, painted once. */
.splash-haze span {
  color: transparent;
  text-shadow: 0 0 10px rgb(var(--composer-accent-rgb));
}

.splash-word span {
  display: inline-block;
  opacity: 0;
}

.chats {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 14px calc(-1 * var(--toggle-inset)) 8px;
}

/* Chats slip under the header and the footer through the same soft fade as the messages in the chat.
   Each fade follows the scroll: it comes in once there is something past that edge, so the first and last rows stay clear at the ends.
   A fade is a piece of the window's backdrop, pinned to the window so it lines up with the light around it. */
.chats::before,
.chats::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  height: 28px;
  background: var(--frame), var(--app-bg);
  background-attachment: fixed;
  opacity: 0;
  pointer-events: none;
}

.chats::before {
  top: 0;
  -webkit-mask-image: linear-gradient(#000, transparent 70%);
  mask-image: linear-gradient(#000, transparent 70%);
}

.chats::after {
  bottom: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 70%);
  mask-image: linear-gradient(transparent, #000 70%);
}

/* The fades run on the scroll only while there is one. In a list that fits, the timeline would be inactive and the fade
   animations would sit waiting on it for good, and a list in that state trembled after a hover. */
.chats:has(> .chats-scrollbar.is-scrollable) {
  timeline-scope: --chats;
}

.chats:has(> .chats-scrollbar.is-scrollable) > .chats-scroll {
  scroll-timeline: --chats block;
}

.chats:has(> .chats-scrollbar.is-scrollable)::before,
.chats:has(> .chats-scrollbar.is-scrollable)::after {
  animation-duration: auto;
  animation-timing-function: linear;
  animation-fill-mode: both;
  animation-timeline: --chats;
}

.chats:has(> .chats-scrollbar.is-scrollable)::before {
  animation-name: chats-edge-in;
  animation-range: 0 28px;
}

.chats:has(> .chats-scrollbar.is-scrollable)::after {
  animation-name: chats-edge-out;
  animation-range: calc(100% - 28px) 100%;
}

@keyframes chats-edge-in {
  to {
    opacity: 1;
  }
}

@keyframes chats-edge-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.chats-scroll {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--toggle-inset);
  scrollbar-width: none;
}

.chats-scroll::-webkit-scrollbar {
  display: none;
}

.chats-list {
  position: relative;
  padding-bottom: 16px;
}

.chats-scrollbar {
  z-index: 3;
  right: 0;
}

.chats-glide {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
  border-radius: 9px;
  background: var(--row-hover-bg);
  opacity: 0;
  pointer-events: none;
  will-change: transform, height, opacity;
}

.chats-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 30px;
  margin-top: 12px;
  padding: 0 2px 0 10px;
  color: var(--fg-secondary);
  font-size: 12.5px;
  font-weight: 500;
  user-select: none;
}

.chats-glide + .chats-heading {
  margin-top: 0;
}

.chats-heading-action {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  outline: none;
  background: none;
  color: rgba(var(--fg-rgb), 0.55);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.chats-heading-action:hover,
.chats-heading-action:focus-visible {
  background: rgba(var(--fg-rgb), 0.07);
  color: rgba(var(--fg-rgb), 0.9);
}

.chats-heading-action .glyph {
  width: 16px;
  height: 16px;
  overflow: visible;
}

.chats-folder + .chats-folder {
  margin-top: 4px;
}

/* The chats without a folder open the list, or follow the pinned ones a section apart. */
.chat-row + .chats-folder.is-home {
  margin-top: 12px;
}

.chats-folder-head,
.chat-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  margin-bottom: 2px;
  padding: 0 8px 0 10px;
  border-radius: 9px;
  outline: none;
  color: var(--fg-primary);
  font: inherit;
  font-size: var(--sidebar-font-size);
  cursor: pointer;
  user-select: none;
}

.chats-folder-head {
  border: 0;
  background: none;
  text-align: left;
}

.chats-folder-head:focus-visible,
.chat-row:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.chats-folder-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  color: rgba(var(--fg-rgb), 0.62);
  transition: color 0.2s ease;
}

.chats-folder-head:hover .chats-folder-icon {
  color: rgba(var(--fg-rgb), 0.85);
}

.chats-folder-action {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  outline: none;
  background: none;
  color: rgba(var(--fg-rgb), 0.62);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, background-color 0.2s ease;
}

.chats-folder-action + .chats-folder-action {
  margin: 0 -4px 0 -8px;
  transition-delay: 0.03s;
}

.chats-folder-head:hover .chats-folder-action,
.chats-folder-head:focus-within .chats-folder-action,
.chats-folder.is-confirming .chats-folder-action {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.chats-folder-action:hover,
.chats-folder-action:focus-visible {
  background: rgba(var(--fg-rgb), 0.08);
  color: rgba(var(--fg-rgb), 0.92);
}

.chats-folder-action .glyph {
  width: 15px;
  height: 15px;
  overflow: visible;
}

.chats-folder.is-confirming .chats-folder-action.is-delete {
  background: rgba(var(--danger-rgb), 0.16);
  color: rgb(var(--danger-rgb));
}

.chats-folder.is-confirming .trash-lid {
  transform: translate(-1px, -3px) rotate(-14deg);
}

.chat-row.is-draft .chat-meta {
  display: none;
}

.chat-row.is-draft .chat-title {
  color: var(--fg-secondary);
}

.chats-folder-icon .glyph {
  width: 17px;
  height: 17px;
  overflow: visible;
}

.glyph-folder .folder-front {
  d: path("M42 57L86 57L80.8 73.2A4 4 0 0 1 77 76L42 76A4 4 0 0 1 38 72Z");
  transition: d 0.45s var(--motion-easing);
}

.chats-folder.is-collapsed .glyph-folder .folder-front,
.composer-folder .glyph-folder .folder-front {
  d: path("M38 53L82 53L82 72A4 4 0 0 1 78 76L42 76A4 4 0 0 1 38 72Z");
}

/* The chats' bubble is empty while they show and fills with three dots, one after another, when they fold away:
   the way a folder closes. */
.glyph-bubble .bubble-dot {
  stroke-width: 6.5;
  opacity: 0;
  transform: scale(0.2);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.2s ease, transform 0.3s var(--motion-easing);
}

.chats-folder.is-collapsed .glyph-bubble .bubble-dot {
  opacity: 1;
  transform: none;
  transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chats-folder.is-collapsed .glyph-bubble .bubble-dot:nth-child(3) {
  transition-delay: 0.05s;
}

.chats-folder.is-collapsed .glyph-bubble .bubble-dot:nth-child(4) {
  transition-delay: 0.1s;
}

.chats-folder-name,
.chat-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A long title fades out instead of ending in an ellipsis, so its end can glide when the row makes room for the buttons. */
.chat-title {
  text-overflow: clip;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  transition: filter 0.42s var(--motion-easing), opacity 0.42s ease;
}

/* A locked chat's title hides behind a blur; unlocking brings the real one into focus. */
.chat-row.is-locked .chat-title {
  filter: blur(3.5px);
  opacity: 0.5;
}

.chats-folder-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.48s var(--motion-easing);
}

.chats-folder.is-collapsed .chats-folder-body {
  grid-template-rows: 0fr;
}

.chats-folder-inner {
  min-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.chats-folder.is-collapsed .chats-folder-inner {
  opacity: 0;
  pointer-events: none;
}

.chats-empty {
  display: flex;
  align-items: center;
  height: 30px;
  padding-left: 38px;
  color: rgba(var(--fg-rgb), 0.35);
  font-size: 13.5px;
  user-select: none;
}

.chats-empty.is-hint {
  padding-left: 10px;
}

/* Opaque, so the hover glide sliding underneath never doubles up with it. */
.chat-row.is-active {
  background: var(--row-active-bg);
  box-shadow: var(--row-active-lift);
}

.chat-row.is-active:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus-ring), var(--row-active-lift);
}

.chat-mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
}

.chat-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(var(--fg-rgb), 0.28);
  transition: opacity 0.2s ease, transform 0.35s var(--motion-easing), background-color 0.3s ease;
}

.chat-row.is-unread .chat-dot {
  background: rgb(var(--composer-accent-rgb));
}

.chat-row.is-busy .chat-dot,
.chat-row.is-protected .chat-dot {
  opacity: 0;
  transform: scale(0.2);
}

/* A protected chat wears a small padlock in place of the dot: shut while locked, open while it is on screen. */
.chat-guard {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(var(--fg-rgb), 0.5);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}

.chat-guard .glyph {
  width: 14px;
  height: 14px;
  overflow: visible;
}

.chat-row.is-protected .chat-guard {
  opacity: 1;
  transform: none;
}

.chat-row.is-protected:not(.is-locked) .chat-guard {
  color: rgba(var(--fg-rgb), 0.85);
}

/* A reply that came in while the chat was locked lights the padlock up, the way it lights the dot of any other chat. */
.chat-row.is-protected.is-unread .chat-guard {
  color: rgb(var(--composer-accent-rgb));
}

.chat-row.is-busy .chat-guard {
  opacity: 0;
  transform: scale(0.5);
}

.chat-mark ghost-thinking {
  position: absolute;
  top: 0.5px;
  left: 1.5px;
  width: 15px;
  height: 16.4px;
  --ghost-rgb: var(--composer-accent-rgb);
  --ghost-eye: var(--app-bg);
}

/* On hover the row makes room for its two buttons: the title's end glides back, the time fades and the buttons pop in one after the other.
   A short wait before it starts keeps a quick sweep down the list calm. */
.chat-meta {
  position: relative;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 26px;
  height: 100%;
  transition: min-width 0.36s var(--motion-easing);
}

.chat-row:hover .chat-meta,
.chat-row:focus-within .chat-meta,
.chat-row.is-confirming .chat-meta,
.chat-row.is-carding .chat-meta {
  min-width: 104px;
  transition-delay: 0.05s;
}

.chat-time {
  color: rgba(var(--fg-rgb), 0.45);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.2s ease, transform 0.3s var(--motion-easing);
}

.chat-actions {
  position: absolute;
  top: 50%;
  right: -4px;
  display: flex;
  translate: 0 -50%;
  pointer-events: none;
}

.chat-row:hover .chat-time,
.chat-row:focus-within .chat-time,
.chat-row.is-carding .chat-time {
  opacity: 0;
  transform: scale(0.85);
  transition-delay: 0.05s;
}

.chat-row:hover .chat-actions,
.chat-row:focus-within .chat-actions,
.chat-row.is-carding .chat-actions {
  pointer-events: auto;
}

.chat-action {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  outline: none;
  background: none;
  color: rgba(var(--fg-rgb), 0.5);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 0.18s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, background-color 0.2s ease;
}

.chat-row:hover .chat-action,
.chat-row:focus-within .chat-action,
.chat-row.is-confirming .chat-action,
.chat-row.is-carding .chat-action {
  opacity: 1;
  transform: none;
  transition-delay: 0.05s, 0.05s, 0s, 0s;
}

.chat-row:hover .chat-action + .chat-action,
.chat-row:focus-within .chat-action + .chat-action,
.chat-row.is-confirming .chat-action + .chat-action,
.chat-row.is-carding .chat-action + .chat-action {
  transition-delay: 0.08s, 0.08s, 0s, 0s;
}

.chat-row:hover .chat-action + .chat-action + .chat-action,
.chat-row:focus-within .chat-action + .chat-action + .chat-action,
.chat-row.is-confirming .chat-action + .chat-action + .chat-action,
.chat-row.is-carding .chat-action + .chat-action + .chat-action {
  transition-delay: 0.11s, 0.11s, 0s, 0s;
}

.chat-row:hover .chat-action + .chat-action + .chat-action + .chat-action,
.chat-row:focus-within .chat-action + .chat-action + .chat-action + .chat-action,
.chat-row.is-confirming .chat-action + .chat-action + .chat-action + .chat-action,
.chat-row.is-carding .chat-action + .chat-action + .chat-action + .chat-action {
  transition-delay: 0.14s, 0.14s, 0s, 0s;
}

/* Locking waits while the chat is replying. */
.chat-row:hover .chat-action:disabled,
.chat-row:focus-within .chat-action:disabled {
  opacity: 0.3;
  background: none;
  cursor: default;
}

.chat-action:hover,
.chat-action:focus-visible {
  background: rgba(var(--fg-rgb), 0.08);
  color: rgba(var(--fg-rgb), 0.92);
}

.chat-action .glyph {
  width: 15px;
  height: 15px;
  overflow: visible;
}

.chat-action.is-on {
  color: rgba(var(--fg-rgb), 0.85);
}

.chat-action.is-on .glyph-pin path {
  fill: currentColor;
}

.trash-lid {
  transform-origin: 40px 45px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The padlock's shackle swings open about its left leg and snaps shut with a small bounce. */
.lock-shackle {
  transform-origin: 49px 55px;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat-row.is-protected:not(.is-locked) .chat-guard .lock-shackle,
.chat-action.is-lock:not(.is-on) .lock-shackle {
  transform: rotate(-32deg);
}

/* Reaching for the lock of an open chat already shows it shutting. */
.chat-action.is-lock:not(.is-on):not(:disabled):hover .lock-shackle {
  transform: none;
}

.chat-row.is-confirming .chat-time {
  opacity: 0;
}

/* While its card is out the row stays as it is under the pointer (the rules above), with the lock button pressed; the
   button's padlock has flown to the card. A padlock flying back to the row lands where its small one stands, hidden until then. */
.chat-row.is-carding .chat-action.is-lock {
  background: rgba(var(--fg-rgb), 0.08);
  color: rgba(var(--fg-rgb), 0.92);
}

.chat-action.is-away .glyph,
.chat-row.is-guard-away .chat-guard {
  visibility: hidden;
}

.chat-row.is-confirming .chat-actions {
  pointer-events: auto;
}

.chat-row.is-confirming .chat-action.is-delete {
  background: rgba(var(--danger-rgb), 0.16);
  color: rgb(var(--danger-rgb));
}

.chat-row.is-confirming .trash-lid {
  transform: translate(-1px, -3px) rotate(-14deg);
}

/* Reached for, the pencil tips forward and writes a short line. */
.glyph-pencil .pencil-body {
  transform-origin: 44px 76px;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glyph-pencil .pencil-line {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  transition: stroke-dashoffset 0.36s var(--motion-easing);
}

.chat-action.is-rename:not(:disabled):hover .pencil-body {
  transform: translateX(3px) rotate(-8deg);
}

.chat-action.is-rename:not(:disabled):hover .pencil-line {
  stroke-dashoffset: 0;
}

/* Renaming happens in the row: it turns into a field like the app's others, the title its text, and the time and the buttons
   step aside for it. */
.chat-row.is-renaming {
  background: var(--composer-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.18);
  cursor: text;
  animation: chat-rename-in 0.3s var(--motion-easing);
}

@keyframes chat-rename-in {
  from {
    box-shadow: inset 0 0 0 1px transparent;
  }
}

.chat-row.is-renaming .chat-title {
  display: none;
}

.chat-rename {
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--fg-primary);
  caret-color: var(--fg-primary);
  font: inherit;
  user-select: text;
  cursor: text;
}

.chat-rename::selection {
  background: rgba(var(--selection-rgb), 0.3);
}

.chats-list .chat-row.is-renaming .chat-meta {
  min-width: 0;
  transition-delay: 0s;
}

.chats-list .chat-row.is-renaming .chat-time {
  position: absolute;
  right: 0;
  opacity: 0;
}

.chats-list .chat-row.is-renaming .chat-action {
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
  transition-delay: 0s;
}

/* A new title writes itself in, each letter rising out of a blur a moment after the one before, like the words typed in the composer. */
.chat-letter {
  position: relative;
  animation: chat-letter 0.36s var(--motion-easing) both;
}

@keyframes chat-letter {
  from {
    top: 0.35em;
    opacity: 0;
    filter: blur(2px);
  }
}

.sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: var(--sidebar-size);
  padding: calc(var(--chat-gap) + var(--toggle-inset)) var(--toggle-inset);
  isolation: isolate;
}

.app.is-sidebar-collapsed .chats-scrollbar {
  opacity: 0;
  pointer-events: none;
}

.sidebar-footer {
  display: flex;
  margin-top: auto;
}

.sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sidebar-gap);
  height: var(--icon-button-size);
}

/* The slot always spans the header; only the capsule drawn inside it takes pointer hits. */
.sidebar-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  height: 100%;
  pointer-events: none;
}

.sidebar-search-shell {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--icon-button-size);
  height: 100%;
  border-radius: calc(var(--icon-button-size) / 2);
  background-color: rgba(var(--fg-rgb), 0.055);
  background-image: linear-gradient(180deg, rgba(var(--fg-rgb), 0.035), transparent 60%, rgba(0, 0, 0, calc(0.06 * var(--shadow))));
  box-shadow:
    0 1px 2px rgba(0, 0, 0, calc(0.28 * var(--shadow))),
    0 0 0 7px rgba(var(--fg-rgb), 0);
  opacity: 0;
  transform-origin: calc(var(--icon-button-size) / 2) 50%;
  pointer-events: auto;
  transition:
    background-color 0.2s ease,
    box-shadow 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.sidebar-search-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(var(--fg-rgb), 0.13), rgba(var(--fg-rgb), 0.035) 45%, rgba(var(--fg-rgb), 0.015) 75%, rgba(var(--fg-rgb), 0.05));
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.sidebar-search:hover .sidebar-search-shell {
  background-color: rgba(var(--fg-rgb), 0.07);
}

/* macOS-style focus ring: it tightens onto the field from a wider, invisible ring. */
.sidebar-search:has(.sidebar-search-input:focus) .sidebar-search-shell {
  background-color: rgba(var(--fg-rgb), 0.08);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, calc(0.28 * var(--shadow))),
    0 0 0 2.5px rgba(var(--fg-rgb), 0.16);
}

/* On the light backdrop the capsule is frosted glass, like the rows: white, lit along its top edge. */
[data-theme="light"] .sidebar-search-shell {
  background-color: rgba(255, 255, 255, 0.5);
  background-image: none;
}

[data-theme="light"] .sidebar-search-shell::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.4) 45%, rgba(30, 48, 88, 0.05) 75%, rgba(30, 48, 88, 0.1));
}

[data-theme="light"] .sidebar-search:hover .sidebar-search-shell {
  background-color: rgba(255, 255, 255, 0.66);
}

[data-theme="light"] .sidebar-search:has(.sidebar-search-input:focus) .sidebar-search-shell {
  background-color: rgba(255, 255, 255, 0.85);
}

.glass-lens {
  isolation: isolate;
  border-radius: 999px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shade), var(--glass-drop), 0 0 0 0.5px rgba(0, 0, 0, calc(var(--paint, 0) * 0.18 * var(--shadow)));
  -webkit-backdrop-filter: var(--glass-lens,) var(--glass-backdrop);
  backdrop-filter: var(--glass-lens,) var(--glass-backdrop);
}

.glass-lens::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--glass-rim);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.sidebar-search-button {
  position: relative;
  flex: none;
  pointer-events: auto;
  transition: transform 0.2s ease;
}

.sidebar-search.is-expanded .sidebar-search-button {
  transform: scale(0.84);
  transition: transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1);
}

.sidebar-search-input {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: 0 10px 0 2px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fg-primary);
  caret-color: var(--fg-primary);
  font: inherit;
  font-size: var(--sidebar-font-size);
  pointer-events: auto;
}

.sidebar-search.has-value .sidebar-search-input {
  padding-right: 30px;
}

.sidebar-search-input::placeholder {
  color: transparent;
}

.sidebar-search-placeholder {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  color: rgb(var(--composer-fg-rgb));
  font-size: var(--sidebar-font-size);
  white-space: pre;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

.sidebar-search-placeholder span {
  display: inline-block;
  white-space: pre;
}

.sidebar-search.has-value .sidebar-search-placeholder {
  opacity: 0;
}

.sidebar-search-clear {
  position: absolute;
  top: 50%;
  right: 4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -12px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--app-bg);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
  transition: opacity 0.12s ease, transform 0.18s ease;
}

.sidebar-search-clear::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: rgba(var(--fg-rgb), 0.3);
  transition: background-color 0.15s ease;
}

.sidebar-search-clear:hover::before {
  background: rgba(var(--fg-rgb), 0.48);
}

.sidebar-search-clear svg {
  position: relative;
  width: 8px;
  height: 8px;
}

.sidebar-search.has-value .sidebar-search-clear {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  transition: opacity 0.15s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.main {
  position: absolute;
  z-index: 1;
  top: var(--chat-gap);
  right: var(--chat-gap);
  bottom: var(--chat-gap);
  left: var(--sidebar-size);
  display: flex;
  flex-direction: column;
  background: var(--chat-bg);
  border-radius: var(--chat-radius);
  box-shadow: var(--contour), var(--card-lift);
  transition: left var(--motion-duration) var(--motion-easing), right var(--motion-duration) var(--motion-easing);
}

.app.is-sidebar-collapsed .main {
  left: var(--chat-gap);
}

.main::before {
  content: "";
  flex: 1 1 0;
}

.main::after {
  content: "";
  flex: 0 1 0;
  transition: flex-grow var(--motion-duration) var(--motion-easing);
}

.thread-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.thread-view::before,
.thread-view::after {
  content: "";
  position: absolute;
  z-index: 2;
  right: 0;
  left: 0;
  height: calc(var(--composer-bottom-gap) + 12px);
  pointer-events: none;
}

.thread-view::before {
  top: 0;
  background: linear-gradient(var(--chat-bg), transparent 70%);
}

.thread-view::after {
  bottom: 0;
  background: linear-gradient(transparent, var(--chat-bg) 70%);
}

.thread {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  scroll-padding-bottom: calc(var(--composer-space, 140px) + 16px);
}

.thread::-webkit-scrollbar {
  display: none;
}

.thread-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: min(var(--composer-max-width), 100% - 2 * var(--composer-side-gap));
  margin: 0 auto;
  padding: 56px 0 calc(var(--composer-space, 140px) + 32px);
}

.thread-list:empty {
  padding: 0;
}

.thread-list.is-parked {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
  padding: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.thread-scrollbar {
  z-index: 2;
  top: 12px;
  right: 2px;
  bottom: calc(var(--composer-space, 140px) + 4px);
}

.message {
  font-size: var(--composer-font-size);
  line-height: var(--message-line-height);
  overflow-wrap: break-word;
}

.message.is-user {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  animation: message-in 0.35s var(--motion-easing) both;
}

@keyframes message-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.message-bubble {
  max-width: 80%;
  padding: 10px 16px;
  background: var(--bubble-bg);
  border-radius: 20px;
  color: rgb(var(--bubble-fg-rgb));
  white-space: pre-wrap;
}

.message-quote {
  display: flex;
  gap: 8px;
  max-width: 80%;
  padding: 8px 14px 8px 11px;
  border-radius: 16px;
  background: rgba(var(--fg-rgb), 0.05);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.05);
  color: var(--fg-secondary);
  font-size: 14px;
  line-height: 20px;
}

.message-quote .glyph-quote {
  flex: none;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: rgba(var(--fg-rgb), 0.4);
}

.message-quote-text {
  display: -webkit-box;
  overflow: hidden;
  white-space: pre-wrap;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.message-bubble::selection,
.message-bubble ::selection {
  background: rgba(var(--bubble-fg-rgb), 0.16);
  color: rgb(var(--bubble-fg-rgb));
}

.message-content {
  font-weight: 600;
}

.message-status {
  transform-origin: left top;
  animation: ghost-in 0.45s var(--motion-easing) both;
}

.message-status.is-leaving {
  overflow: hidden;
}

.message-status.is-arriving {
  opacity: 0;
}

@keyframes ghost-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.7);
  }
}

ghost-thinking {
  width: 30px;
  height: 33px;
  --ghost-rgb: var(--composer-accent-rgb);
  --ghost-eye: var(--chat-bg);
}

.message-error {
  color: rgb(var(--danger-rgb));
  font-size: var(--small-font-size);
}

.message-note {
  margin-top: 10px;
  color: var(--fg-secondary);
  font-size: var(--small-font-size);
}

.message-content:empty + .message-note,
.message-content:empty + .message-error {
  margin-top: 0;
}

.message-content:not(:empty) + .message-error {
  margin-top: 10px;
}

.message-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.message-action,
.settings-tab {
  border: 0;
  outline: none;
  font: inherit;
  font-size: var(--small-font-size);
  cursor: pointer;
}

.message-action {
  height: 32px;
  padding: 0 14px;
  background: var(--composer-bg);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--composer-border);
  color: var(--fg-primary);
  transition: background-color 0.2s ease;
}

.message-action:hover {
  background: var(--control-hover-bg);
}

.message-action:focus-visible,
.settings-tab:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.message-tools {
  display: flex;
  gap: 2px;
  margin: 10px 0 0 -6px;
  animation: message-tools-in 0.45s var(--motion-easing) both;
}

.message-note + .message-tools {
  margin-top: 6px;
}

.message-tools + .message-error {
  margin-top: 6px;
}

.message.is-user .message-tools {
  position: absolute;
  top: 100%;
  right: 0;
  margin: 0;
  padding-top: 2px;
  opacity: 0;
  animation: none;
  transition: opacity 0.2s ease;
}

.message.is-user:hover .message-tools,
.message.is-user .message-tools:has(:focus-visible, .is-copied) {
  opacity: 1;
}

@keyframes message-tools-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.message-content:not(:empty) ~ .message-status.is-working {
  padding-top: 14px;
}

/* The card asking to approve a step. Its tone follows what the step does: green only looks, amber changes or installs,
   red deletes or touches the system, blue goes online, grey runs a program or records history. The pieces come in one after another
   by their --i: the words of the headline out of a blur, then the chips, then the buttons. */
.approval {
  --tone: var(--fg-rgb);
  margin-top: 14px;
  padding: 14px 14px 12px;
  border-radius: 18px;
  background: var(--composer-bg);
  box-shadow: inset 0 0 0 1px var(--composer-border), 0 10px 30px rgba(0, 0, 0, calc(0.22 * var(--shadow)));
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  animation: approval-in 0.5s var(--motion-easing) both;
}

.approval.is-read {
  --tone: var(--success-rgb);
}

.approval.is-change,
.approval.is-install {
  --tone: var(--warn-rgb);
}

.approval.is-delete,
.approval.is-system {
  --tone: var(--danger-rgb);
}

.approval.is-online {
  --tone: var(--link-rgb);
}

.message-content:empty + .approval,
.message-status + .approval {
  margin-top: 0;
}

@keyframes approval-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

@keyframes approval-word {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(0.35em);
  }
}

@keyframes approval-pop {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes approval-rise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.92);
  }
}

.approval-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.approval-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(var(--tone), 0.12);
  color: rgb(var(--tone));
}

.approval-icon .glyph {
  width: 17px;
  height: 17px;
  overflow: visible;
}

.approval-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding-top: 5px;
}

.approval-title {
  margin: 0;
  color: var(--fg-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 22px;
  overflow-wrap: anywhere;
}

.approval-word {
  display: inline-block;
  animation: approval-word 0.45s var(--motion-easing) calc(60ms + var(--i) * 26ms) backwards;
}

.approval-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.approval-effect,
.approval-place,
.approval-quote {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 24px;
  padding: 0 10px;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 550;
  line-height: 24px;
  white-space: nowrap;
  animation: approval-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(180ms + var(--i) * 45ms) backwards;
}

.approval-effect {
  background: rgba(var(--tone), 0.12);
  color: rgb(var(--tone));
}

.approval-effect::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.approval-effect.is-count {
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--fg-secondary);
}

.approval-effect.is-count::before {
  display: none;
}

.approval-place {
  max-width: 240px;
  padding-left: 8px;
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--fg-primary);
}

.approval-place .glyph {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--fg-secondary);
  overflow: visible;
}

.approval-place-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* What gets searched, clicked or typed: it may be long, so it wraps. */
.approval-quote {
  height: auto;
  padding: 2px 10px;
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--fg-primary);
  line-height: 20px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.approval-details {
  overflow: hidden;
}

.approval-details-inner {
  padding-top: 12px;
}

.approval-code,
.approval-diff {
  margin: 0;
  border-radius: 10px;
  background: var(--well-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.05);
}

.approval-code {
  max-height: 184px;
  padding: 9px 12px;
  overflow: auto;
  color: rgba(var(--fg-rgb), 0.88);
  font: 500 12.5px/19px var(--mono-font);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  scrollbar-width: thin;
}

.approval-diff {
  max-height: 232px;
  padding: 6px 0;
  overflow: auto;
  font: 500 12.5px/19px var(--mono-font);
  scrollbar-width: thin;
}

.approval-line {
  display: flex;
  padding: 0 12px 0 8px;
  color: rgba(var(--fg-rgb), 0.85);
}

.approval-sign {
  flex: none;
  width: 16px;
  color: var(--fg-tertiary);
  user-select: none;
}

.approval-text {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.approval-line.is-new {
  padding-left: 12px;
}

.approval-line.is-new .approval-sign {
  display: none;
}

.approval-line.is-removed {
  background: rgba(var(--danger-rgb), 0.09);
  color: var(--diff-removed);
}

.approval-line.is-removed .approval-sign {
  color: rgb(var(--danger-rgb));
}

.approval-line.is-added {
  background: rgba(var(--success-rgb), 0.09);
  color: var(--diff-added);
}

.approval-line.is-added .approval-sign {
  color: rgb(var(--success-rgb));
}

.approval-more {
  padding: 3px 12px 0 24px;
  color: var(--fg-tertiary);
  font-family: var(--font);
  font-size: 12px;
}

.approval-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

.approval-foot > * {
  animation: approval-rise 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) calc(240ms + var(--i) * 50ms) backwards;
}

.approval-reveal {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  margin-right: auto;
  padding: 0 10px 0 12px;
  border: 0;
  border-radius: 15px;
  outline: none;
  background: none;
  color: var(--fg-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.approval-reveal:hover {
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--fg-primary);
}

.approval-reveal:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.approval-reveal svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.4s var(--motion-easing);
}

.approval.is-open .approval-reveal svg {
  transform: rotate(180deg);
}

.approval-button {
  height: 30px;
  padding: 0 16px;
  border: 0;
  border-radius: 15px;
  outline: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.2s var(--motion-easing), opacity 0.2s ease;
}

.approval-button.is-deny {
  background: rgba(var(--fg-rgb), 0.07);
  color: var(--fg-primary);
}

.approval-button.is-deny:hover {
  background: rgba(var(--fg-rgb), 0.11);
}

.approval-button.is-allow {
  background: rgb(var(--composer-accent-rgb));
  color: rgb(var(--composer-on-accent-rgb));
}

.approval-button:active {
  transform: scale(0.95);
}

.approval-button:focus-visible {
  box-shadow: 0 0 0 2px var(--composer-bg), 0 0 0 4px var(--focus-ring);
}

.approval.is-answered .approval-button,
.approval.is-answered .approval-reveal {
  opacity: 0.5;
  cursor: default;
}

.thread-compact {
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(var(--fg-rgb), 0.34);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  user-select: none;
  animation: message-in 0.35s var(--motion-easing) both;
}

.thread-compact::before,
.thread-compact::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--fg-rgb), 0.09));
}

.thread-compact::after {
  background: linear-gradient(90deg, rgba(var(--fg-rgb), 0.09), transparent);
}

/* A darker band runs across semi-transparent letters. */
.thread-compact.is-live .thread-compact-text {
  background: linear-gradient(90deg, rgba(var(--fg-rgb), 0.58) 0 34%, rgba(var(--fg-rgb), 0.14) 50%, rgba(var(--fg-rgb), 0.58) 66% 100%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: compact-wave 1.9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes compact-wave {
  to {
    background-position: 0% 0;
  }
}

/* Chat stats: a card in the thread, the user's only, in a frosted rim: the total in large type, a chart of the replies,
   and a line a model with a meter of its cache, then the context. */
.stats-item {
  align-self: center;
  width: min(468px, 100%);
}

.stats {
  position: relative;
  padding: 12px;
}

.stats-card {
  position: relative;
  margin: 8px;
  padding: 14px 20px 16px;
  border-radius: 18px;
  background: var(--stats-card);
  box-shadow: 0 0 0 8px var(--stats-rim), 0 0 0 9px var(--stats-rim-edge), var(--stats-card-lift);
  color: var(--fg-primary);
  font-size: 13.5px;
  line-height: 18px;
}

.stats-head {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 20px;
  margin-bottom: 4px;
  color: var(--fg-secondary);
  font-size: 12.5px;
  font-weight: 550;
}

.stats-mark {
  display: grid;
  flex: none;
  width: 15px;
  height: 15px;
  color: rgb(var(--stats-1));
}

.stats-mark .glyph {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.stats-remove {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  margin: -2px -10px -2px auto;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: none;
  color: var(--fg-tertiary);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.stats-item:hover .stats-remove,
.stats-remove:focus-visible {
  opacity: 1;
}

.stats-remove:hover,
.stats-remove:focus-visible {
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--fg-primary);
}

.stats-remove svg {
  width: 14px;
  height: 14px;
}

.stats-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
}

.stats-value {
  font-size: 32px;
  font-weight: 650;
  line-height: 38px;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
}

.stats-unit {
  color: var(--fg-secondary);
  font-size: 13.5px;
}

.stats-chart {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: 108px auto;
  column-gap: 10px;
  margin-bottom: 10px;
}

/* The scale's numbers sit on its lines: the top, two thirds, one third and the floor. */
.stats-y {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  margin: -7px 0;
  color: var(--fg-tertiary);
  font-size: 11px;
  line-height: 14px;
  font-variant-numeric: tabular-nums;
}

.stats-plot {
  position: relative;
  border-bottom: 1px solid var(--stats-line);
  border-left: 1px solid var(--stats-line);
}

.stats-grid i {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0;
  border-top: 1px dashed var(--stats-line);
  transform-origin: 0 0;
  pointer-events: none;
}

.stats-grid i:nth-child(2) {
  top: 33.333%;
}

.stats-grid i:nth-child(3) {
  top: 66.667%;
}

.stats-bars {
  position: absolute;
  inset: 0 4px;
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  grid-template-rows: 100%;
}

/* A bar is the tokens of one reply; its lower, paler part is what the provider read from its cache. */
.stats-bar {
  position: relative;
  align-self: end;
  justify-self: center;
  width: min(22px, 62%);
  height: calc(var(--h) * 100%);
  min-height: 2px;
  overflow: hidden;
  border-radius: 5px 5px 2px 2px;
  background: rgb(var(--c));
  transform-origin: 50% 100%;
  transition: opacity 0.25s ease;
}

.stats-bar i {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(var(--cache) * 100%);
  background: var(--stats-wash);
}

.stats-plot.is-probing .stats-bar:not(.is-lit),
.stats-bar.is-dim,
.stats-row.is-dim {
  opacity: 0.3;
}

.stats-tip {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 9px;
  border-radius: 9px;
  background: var(--tip-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.08), 0 8px 20px rgba(0, 0, 0, calc(0.25 * var(--shadow)));
  font-size: 11.5px;
  line-height: 15px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, translate 0.28s var(--motion-easing);
}

.stats-tip.is-shown {
  opacity: 1;
}

.stats-tip b {
  font-weight: 600;
}

.stats-tip span {
  color: var(--fg-secondary);
}

.stats-x {
  position: relative;
  grid-column: 2;
  height: 20px;
  margin: 0 4px;
  color: var(--fg-tertiary);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.stats-x span {
  position: absolute;
  top: 6px;
  left: calc(var(--at) * 100%);
  translate: -50% 0;
}

/* One line a model, all lines on shared columns: the name, what it spent, a meter of its cache and the share, so every meter is
   as long as the others and the numbers stand in columns. */
.stats-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(44px, 76px) auto;
  column-gap: 12px;
  row-gap: 11px;
  padding-top: 14px;
  border-top: 1px solid var(--stats-line);
}

.stats-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  transition: opacity 0.25s ease;
}

.stats-row-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 550;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.stats-row-value {
  justify-self: end;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.stats-row-value em {
  color: var(--fg-tertiary);
  font-style: normal;
  font-weight: 500;
}

.stats-meter {
  position: relative;
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(var(--fg-rgb), 0.07);
}

.stats-meter b {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--p) * 100%);
  border-radius: inherit;
  background: rgb(var(--c));
  transform-origin: 0 50%;
}

.stats-row-meta {
  justify-self: end;
  color: var(--fg-tertiary);
  white-space: nowrap;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}

.stats-row.is-context {
  --c: var(--stats-neutral);
}

.stats-row.is-context.is-high {
  --c: var(--warn-rgb);
}

.stats-row.is-context .stats-row-name {
  color: var(--fg-secondary);
  font-weight: 500;
}

.stats-note {
  margin: 12px 0 0;
  color: var(--fg-tertiary);
  font-size: 12px;
  line-height: 17px;
}

/* The chart glyph on its way from the menu into the card, above everything. */
.stats-flyer {
  position: fixed;
  inset: 0 auto auto 0;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  pointer-events: none;
}

.stats-flyer .glyph {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@property --selection-alpha {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.3;
}

/* Selected text keeps its own color: only a soft blue wash goes behind it while the mouse is still selecting. */
::selection {
  background: rgba(var(--selection-rgb), var(--selection-alpha));
}

/* Once the rest of the feed is blurred, the wash behind the picked words fades away: their sharpness alone marks them. */
.select-held {
  --selection-alpha: 0;
  transition: --selection-alpha 0.45s ease;
}

/* While a piece of a reply is selected, the rest of the feed steps back behind a soft blur; the selection itself is cut out of the veil.
   Brightness dims the text and the slightly lowered contrast lifts the chat background back to its own color, so the cut-outs leave no visible boxes. */
.select-focus {
  position: absolute;
  z-index: 1;
  right: 0;
  left: 0;
  -webkit-backdrop-filter: var(--veil);
  backdrop-filter: var(--veil);
  pointer-events: none;
  user-select: none;
}

/* Once it has faded out the menu leaves the layout altogether: left where the last selection was, deep in a long reply,
   it kept the feed scrollable far below its end, so a short chat opened onto empty space and an empty one could scroll. */
.select-menu {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  display: none;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 3px;
  overflow: visible;
  border: 0;
  border-radius: 13px;
  background: var(--menu-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.09), 0 10px 30px rgba(0, 0, 0, calc(0.45 * var(--shadow)));
  color: var(--fg-primary);
  opacity: 0;
  scale: 0.94;
  pointer-events: none;
  user-select: none;
  transform-origin: 24px 100%;
  transition:
    opacity 0.16s ease,
    scale 0.3s var(--motion-easing),
    display 0.3s allow-discrete;
}

.select-menu.is-shown {
  display: flex;
  opacity: 1;
  scale: 1;
  pointer-events: auto;
  transition:
    opacity 0.16s ease,
    scale 0.3s var(--motion-easing),
    display 0s allow-discrete;
}

@starting-style {
  .select-menu.is-shown {
    opacity: 0;
    scale: 0.94;
  }
}

.select-menu.is-below {
  transform-origin: 24px 0;
}

.select-menu-button {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 11px 0 9px;
  border: 0;
  border-radius: 10px;
  outline: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.select-menu-button:hover,
.select-menu-button:focus-visible {
  background: rgba(var(--fg-rgb), 0.08);
}

.select-menu-button .glyph {
  width: 14px;
  height: 14px;
  overflow: visible;
  color: rgba(var(--fg-rgb), 0.75);
}

.select-menu-button[hidden],
.select-menu-divider[hidden] {
  display: none;
}

.select-menu-divider {
  width: 1px;
  height: 16px;
  background: rgba(var(--fg-rgb), 0.1);
}

.mini {
  --composer-max-width: 100%;
  --composer-side-gap: 12px;
  --composer-bottom-gap: 12px;
  --composer-font-size: 15px;
  position: fixed;
  inset: var(--room-top, 0) var(--room-right, 0) var(--room-bottom, 0) var(--room-left, 0);
  width: min(330px, var(--room-width, 100vw) - 32px);
  max-width: none;
  height: min(490px, var(--room-height, 100vh) - 32px);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: var(--chat-bg);
  box-shadow: var(--contour), 0 30px 80px rgba(0, 0, 0, calc(0.55 * var(--shadow)));
  color: var(--fg-primary);
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition:
    opacity 0.22s ease,
    transform 0.45s var(--motion-easing),
    overlay 0.45s allow-discrete,
    display 0.45s allow-discrete;
}

.mini[open] {
  display: flex;
  flex-direction: column;
  opacity: 1;
  transform: none;
}

@starting-style {
  .mini[open] {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
  }
}

.mini.is-closing {
  opacity: 0;
  transform: translateY(10px) scale(0.97);
}

.mini::backdrop {
  background: transparent;
  transition:
    background-color 0.3s ease,
    overlay 0.45s allow-discrete,
    display 0.45s allow-discrete;
}

.mini[open]::backdrop {
  background: var(--mini-backdrop);
}

.mini.is-closing::backdrop {
  background: transparent;
}

@starting-style {
  .mini[open]::backdrop {
    background: transparent;
  }
}

.mini-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 8px 0 16px;
}

.mini-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 650;
}

.mini-title .glyph-ghost {
  width: 14px;
  height: 15px;
  color: rgb(var(--composer-accent-rgb));
}

.mini .glyph-ghost-eye {
  fill: var(--chat-bg);
}

.mini-tools {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: auto;
}

.mini-close,
.mini-clear {
  --icon-button-size: 30px;
  --icon-size: 16px;
}

/* The trash shows only while there is something to clear. */
.mini-clear {
  opacity: 0;
  transform: scale(0.6);
  visibility: hidden;
  transition: opacity 0.18s ease, transform 0.3s var(--motion-easing), visibility 0s linear 0.3s;
}

.mini-clear.is-shown {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s;
}

.mini-main {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mini-main::before {
  content: "";
  flex: 1 1 0;
}

.mini .thread-view::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  left: 0;
  height: 14px;
  background: linear-gradient(var(--chat-bg), transparent);
  pointer-events: none;
}

.mini .thread-list {
  gap: 22px;
  padding: 12px 0 calc(var(--composer-space, 120px) + 20px);
}

.mini .thread-list:empty {
  padding: 0;
}

.mini .thread-scrollbar {
  top: 6px;
}

.mini .composer {
  box-shadow: inset 0 0 0 1px var(--composer-border), 0 10px 30px rgba(0, 0, 0, calc(0.3 * var(--shadow)));
}

.mini .composer-mode {
  anchor-name: --mini-mode;
}

.mini-empty {
  position: absolute;
  top: calc((100% - var(--composer-space, 120px)) / 2);
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: min(290px, 100% - 48px);
  color: var(--fg-secondary);
  font-size: 13.5px;
  line-height: 19px;
  text-align: center;
  opacity: 0;
  transform: scale(0.94);
  translate: -50% -50%;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.45s var(--motion-easing);
}

.mini-main.is-empty .mini-empty {
  opacity: 1;
  transform: none;
  transition-delay: 0.08s;
}

/* While its kept messages are being read, an empty mini chat doesn't say it is empty. */
.mini-main.is-loading .mini-empty {
  opacity: 0;
  transition: none;
}

.mini-empty ghost-thinking {
  width: 44px;
  height: 48px;
}

.mini-empty p {
  margin: 0;
  text-wrap: balance;
}

.markdown {
  --tone: 150, 150, 150;
  --md-line: calc(var(--composer-font-size) * var(--message-line-height));
  --md-gap: 14px;
  --md-card-bg: var(--composer-bg);
  --md-card-border: var(--composer-border);
}

.t-lilac { --tone: 190, 160, 255; }
.t-turquoise { --tone: 72, 222, 200; }
.t-blue { --tone: 112, 172, 255; }
.t-pink { --tone: 255, 134, 192; }
.t-yellow { --tone: 255, 212, 96; }
.t-orange { --tone: 255, 162, 98; }
.t-green { --tone: 128, 218, 134; }

/* On white the same tones go deeper, so text in them stays readable and fills keep their weight. */
[data-theme="light"] .markdown { --tone: 112, 112, 112; }
[data-theme="light"] .t-lilac { --tone: 128, 84, 226; }
[data-theme="light"] .t-turquoise { --tone: 0, 146, 128; }
[data-theme="light"] .t-blue { --tone: 36, 110, 226; }
[data-theme="light"] .t-pink { --tone: 216, 48, 124; }
[data-theme="light"] .t-yellow { --tone: 222, 156, 0; }
[data-theme="light"] .t-orange { --tone: 230, 106, 20; }
[data-theme="light"] .t-green { --tone: 30, 150, 70; }

.md-w {
  position: relative;
  animation: md-wave 0.22s cubic-bezier(0.33, 1, 0.68, 1) both, md-focus 0.14s cubic-bezier(0.33, 1, 0.68, 1) both;
}

@keyframes md-wave {
  from {
    top: 0.35em;
    opacity: 0;
  }
}

@keyframes md-focus {
  from {
    filter: blur(2px);
  }
}

@keyframes md-rise {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}

@keyframes md-pop {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

.markdown > * {
  margin: 0 0 var(--md-gap);
}

.markdown > :first-child {
  margin-top: 0;
}

.markdown > :last-child {
  margin-bottom: 0;
}

.markdown p {
  margin: 0 0 var(--md-gap);
}

.markdown strong {
  color: rgb(var(--fg-rgb));
  font-weight: 800;
  transition: color 0.35s ease;
}

.markdown em {
  color: rgba(var(--fg-rgb), 0.95);
}

.markdown del {
  color: var(--fg-secondary);
  text-decoration-color: rgba(var(--fg-rgb), 0.4);
}

.markdown a {
  color: rgb(var(--link-rgb));
  text-decoration: underline;
  text-decoration-color: rgba(var(--link-rgb), 0.35);
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  transition: text-decoration-color 0.2s ease;
}

.markdown a:hover {
  text-decoration-color: currentColor;
}

.link-chip,
.markdown a.link-chip {
  display: inline-block;
  margin: 0 1px;
  padding: 0 9px 0 6px;
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.08);
  color: rgba(var(--fg-rgb), 0.9);
  font-size: 0.875em;
  font-weight: 500;
  line-height: 1.65;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: baseline;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.markdown a.link-chip {
  font-weight: inherit;
}

.link-chip:hover,
.markdown a.link-chip:hover {
  background: rgba(var(--fg-rgb), 0.14);
  color: rgb(var(--fg-rgb));
}

.link-chip:focus-visible {
  outline: 2px solid rgba(var(--fg-rgb), 0.5);
  outline-offset: 1px;
}

.message-bubble .link-chip {
  background: rgba(var(--bubble-fg-rgb), 0.08);
  color: rgb(var(--bubble-fg-rgb));
}

.message-bubble .link-chip:hover {
  background: rgba(var(--bubble-fg-rgb), 0.14);
  color: rgb(var(--bubble-fg-rgb));
}

.message-bubble .link-chip:focus-visible {
  outline-color: rgba(var(--bubble-fg-rgb), 0.45);
}

.link-chip-icon {
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 6px;
  border-radius: 4px;
  background: var(--favicon, none) center / contain no-repeat;
  vertical-align: -2px;
}

.link-chip-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: calc(var(--globe, 0) * 0.65);
  transition: opacity 0.25s ease;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.3'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cellipse cx='8' cy='8' rx='2.7' ry='6.2'/%3E%3Cpath d='M2 8h12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.markdown code {
  padding: 0.12em 0.38em;
  background: rgba(var(--fg-rgb), 0.08);
  border-radius: 6px;
  color: rgba(var(--fg-rgb), 0.92);
  font-family: var(--mono-font);
  font-size: 0.86em;
  font-weight: 500;
}

.markdown pre code {
  padding: 0;
  background: none;
  border-radius: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.markdown mark.md-highlight {
  padding: 0.02em 0.18em;
  border-radius: 0.22em;
  background: rgba(var(--tone), 0.18);
  color: rgb(var(--tone));
  font-weight: 700;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.md-h {
  position: relative;
  isolation: isolate;
  width: fit-content;
  max-width: 100%;
  padding: 0.08em 0.42em 0.1em;
  border-radius: 0.34em;
  color: rgb(var(--tone));
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -0.012em;
  transform-origin: left center;
  transition: color 0.35s ease;
  animation: md-rise 0.5s var(--motion-easing) both;
}

.markdown > .md-h {
  margin: 28px 0 12px;
}

.markdown > .md-h:first-child {
  margin-top: 0;
}

.md-h::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--md-w, 100%);
  border-radius: inherit;
  background: rgba(var(--tone), 0.15);
  transition: width 0.24s cubic-bezier(0.25, 0.8, 0.3, 1), background-color 0.35s ease;
}

.md-h strong {
  color: inherit;
  font-weight: inherit;
}

h1.md-h {
  font-size: 1.5em;
}

h2.md-h {
  font-size: 1.3em;
}

h3.md-h {
  font-size: 1.14em;
}

h4.md-h,
h5.md-h,
h6.md-h {
  font-size: 1.02em;
}

.markdown > h4.md-h,
.markdown > h5.md-h,
.markdown > h6.md-h {
  margin-top: 22px;
}

.markdown ul,
.markdown ol {
  padding-left: 22px;
  list-style: none;
}

.markdown ol {
  padding-left: 32px;
  counter-reset: md-ol;
}

.markdown li {
  position: relative;
}

.markdown li + li {
  margin-top: 6px;
}

.markdown li > * {
  margin: 0;
}

.markdown li > * + * {
  margin-top: 6px;
}

.markdown ul > li::before {
  content: "";
  position: absolute;
  top: calc(var(--md-line) / 2 - 3px);
  left: -15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--tone));
  animation: md-pop 0.4s var(--motion-easing) both;
}

.markdown ul ul > li::before {
  background: none;
  box-shadow: inset 0 0 0 1.5px rgba(var(--tone), 0.85);
}

.markdown ol > li {
  counter-increment: md-ol;
}

.markdown ol > li::before {
  content: counter(md-ol);
  position: absolute;
  top: calc(var(--md-line) / 2 - 10px);
  left: -32px;
  min-width: 21px;
  height: 20px;
  padding: 0 5px;
  border-radius: 7px;
  background: rgba(var(--tone), 0.15);
  color: rgb(var(--tone));
  font-size: 11.5px;
  font-weight: 800;
  line-height: 20px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  animation: md-pop 0.4s var(--motion-easing) both;
}

.markdown ul:has(> .md-task) {
  padding-left: 26px;
}

.markdown li.md-task::before {
  content: none;
}

.md-box {
  position: absolute;
  top: calc(var(--md-line) / 2 - 8px);
  left: -26px;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1.5px rgba(var(--tone), 0.75);
  animation: md-pop 0.4s var(--motion-easing) both;
}

.md-task.is-done > .md-box {
  background: rgb(var(--tone));
  box-shadow: none;
}

.md-task.is-done > .md-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--chat-bg);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.5'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.md-task.is-done > p {
  color: var(--fg-secondary);
  text-decoration: line-through;
  text-decoration-color: rgba(var(--fg-rgb), 0.3);
}

.markdown blockquote {
  position: relative;
  padding: 10px 16px 10px 22px;
  border-radius: 14px;
  background: rgba(var(--tone), 0.07);
  color: rgba(var(--fg-rgb), 0.78);
  animation: md-rise 0.45s var(--motion-easing) both;
}

.markdown blockquote::before {
  content: "";
  position: absolute;
  top: 11px;
  bottom: 11px;
  left: 10px;
  width: 3px;
  border-radius: 3px;
  background: rgb(var(--tone));
  transform-origin: top;
  animation: md-bar 0.6s var(--motion-easing) both;
}

@keyframes md-bar {
  from {
    transform: scaleY(0);
  }
}

.markdown blockquote > * {
  margin: 0;
}

.markdown blockquote > * + * {
  margin-top: 8px;
}

.md-callout {
  color: var(--fg-primary);
}

.md-callout-title {
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgb(var(--tone));
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 20px;
  text-transform: uppercase;
}

.md-callout-title::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  mask: var(--callout-icon) center / contain no-repeat;
}

.md-callout.is-note,
.md-callout.is-important {
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6.2'/%3E%3Cpath d='M8 7.2v3.6M8 5h.01'/%3E%3C/svg%3E");
}

.md-callout.is-tip {
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5h4M6.5 14.5h3M8 1.8a4.4 4.4 0 0 0-2.6 8c.4.3.6.8.6 1.3V12h4v-.9c0-.5.2-1 .6-1.3A4.4 4.4 0 0 0 8 1.8z'/%3E%3C/svg%3E");
}

.md-callout.is-warning,
.md-callout.is-caution {
  --callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 2.6a1.2 1.2 0 0 1 2 0l5.4 9.6a1.2 1.2 0 0 1-1 1.8H2.6a1.2 1.2 0 0 1-1-1.8z'/%3E%3Cpath d='M8 6.4v3M8 11.6h.01'/%3E%3C/svg%3E");
}

.markdown blockquote.md-quote {
  width: fit-content;
  max-width: 100%;
  padding: 11px 18px 12px 40px;
  border-radius: 14px;
  background: rgba(var(--fg-rgb), 0.035);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.06);
  color: rgba(var(--fg-rgb), 0.86);
  font-weight: 500;
}

.markdown blockquote.md-quote::before {
  content: "\201C";
  top: 13px;
  bottom: auto;
  left: 14px;
  width: auto;
  border-radius: 0;
  background: none;
  color: rgba(var(--tone), 0.85);
  font-family: "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1;
  animation: md-quote-mark 0.5s ease both;
}

@keyframes md-quote-mark {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
}

.markdown blockquote.md-quote > .md-cite {
  margin-top: 6px;
}

.md-cite {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  line-height: 18px;
  animation: md-rise 0.5s var(--motion-easing) both;
}

.md-cite::before {
  content: "";
  flex: none;
  width: 12px;
  height: 1px;
  background: var(--fg-tertiary);
}

.md-cite-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
  min-width: 0;
}

.md-cite-name {
  color: rgba(var(--fg-rgb), 0.72);
  font-weight: 600;
}

.md-cite-role {
  color: var(--fg-secondary);
  font-weight: 500;
}

.md-cite-role::before {
  content: "·";
  margin-right: 6px;
  color: var(--fg-tertiary);
}

.markdown > .md-gap {
  height: 0;
  margin: 26px 0 0;
}

.md-code {
  overflow: hidden;
  border-radius: 14px;
  background: var(--md-card-bg);
  box-shadow: inset 0 0 0 1px var(--md-card-border);
  animation: md-rise 0.45s var(--motion-easing) both;
}

.md-code-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 38px;
  padding: 0 6px 0 14px;
}

.md-code-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--fg-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.md-code-lang::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--tone));
}

.md-copy {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  outline: none;
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.md-copy:hover {
  background: var(--control-hover-bg);
  color: var(--fg-primary);
}

.md-copy:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.md-copy svg {
  grid-area: 1 / 1;
  width: 15px;
  height: 15px;
  transition: opacity 0.2s ease, transform 0.35s var(--motion-easing);
}

.md-check-icon,
.md-copy.is-copied .md-copy-icon {
  opacity: 0;
  transform: scale(0.5);
}

.md-copy.is-copied .md-check-icon {
  opacity: 1;
  transform: none;
  color: rgb(var(--success-rgb));
}

.md-code pre {
  margin: 0;
  padding: 0 16px 14px;
  overflow-x: auto;
  color: rgba(var(--fg-rgb), 0.88);
  font-family: var(--mono-font);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.6;
  tab-size: 4;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--fg-rgb), 0.15) transparent;
}

.md-code.is-art pre {
  padding: 4px 18px 18px;
  line-height: 1.22;
}

.md-code.is-art code {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

.art-line {
  color: rgba(var(--tone), 0.6);
}

.art-arrow {
  color: rgb(var(--tone));
}

.md-calc {
  position: relative;
  width: fit-content;
  max-width: 100%;
  padding: 20px 30px 20px 26px;
  border-radius: 20px;
  background: var(--md-card-bg);
  box-shadow: inset 0 0 0 1px var(--md-card-border);
  overflow-x: auto;
  scrollbar-width: none;
  animation: md-rise 0.45s var(--motion-easing) both;
}

.md-calc-grid {
  --calc-cell: 0.64em;
  --calc-dot: 0.3em;
  --calc-row: 1.46em;
  --calc-rule: 0.62em;
  --calc-carry: 0.9em;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--calc-cell)) auto;
  width: max-content;
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.md-calc-d,
.md-calc-op {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: rgba(var(--fg-rgb), 0.93);
  transition: color 0.5s ease, font-weight 0.5s ease;
  animation: md-calc-in 0.5s var(--motion-easing) both;
  animation-delay: calc(var(--d, 0) * 34ms);
}

.md-calc-op {
  color: rgb(var(--tone));
  font-weight: 400;
}

.md-calc-d.is-step {
  color: var(--fg-secondary);
}

.md-calc-d.is-result {
  color: rgb(var(--tone));
  font-weight: 720;
}

.md-calc-d.is-carry {
  color: rgba(var(--tone), 0.85);
  font-size: 0.56em;
  font-weight: 650;
}

.md-calc-rule {
  align-self: center;
  height: 1.5px;
  margin: 0 -0.1em;
  border-radius: 1px;
  background: rgba(var(--fg-rgb), 0.3);
  transform-origin: right;
  animation: md-calc-rule 0.6s var(--motion-easing) both;
}

.md-calc-bar {
  justify-self: center;
  width: 1.5px;
  background: rgba(var(--fg-rgb), 0.3);
  transform-origin: top;
  animation: md-bar 0.5s var(--motion-easing) both;
}

.md-calc-glow {
  z-index: 0;
  margin: 0.08em -0.28em;
  border-radius: 0.36em;
  background: rgba(var(--tone), 0.14);
  transform-origin: right;
  animation: md-calc-glow 0.6s var(--motion-easing) 0.12s both;
}

.md-calc-note {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 10px;
  max-width: 34ch;
  margin-left: 22px;
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 550;
  line-height: 1.35;
  font-variant-numeric: normal;
  animation: md-calc-note 0.5s var(--motion-easing) both;
  animation-delay: calc(var(--d, 0) * 34ms);
}

.md-calc-note::before {
  content: "";
  flex: none;
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
  background: rgba(var(--tone), 0.6);
}

.md-pending {
  display: none;
}

.md-sheet {
  --sheet-calc: 17px;
  padding: 18px 30px 20px 24px;
}

.md-sheet-grid {
  display: grid;
  grid-template-columns: max-content;
  width: max-content;
  font-size: 14.5px;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

.md-sheet.has-labels .md-sheet-grid {
  grid-template-columns: max-content max-content;
  column-gap: 22px;
}

.md-sheet-grid > * {
  grid-column: 1 / -1;
}

.md-sheet-row {
  display: grid;
  grid-template-columns: subgrid;
  align-items: baseline;
  padding: 2px 0;
}

.md-sheet:not(.has-labels) .md-sheet-label {
  display: none;
}

.md-sheet-label {
  color: var(--fg-secondary);
  font-weight: 500;
}

.md-sheet-value {
  color: var(--fg-secondary);
}

.md-sheet-num {
  color: rgba(var(--fg-rgb), 0.93);
  font-weight: 560;
}

.md-sheet-op {
  color: rgb(var(--tone));
}

.md-sheet-row.is-calc {
  align-items: start;
  padding: 6px 0 8px;
}

.md-sheet-row.is-calc .md-sheet-label {
  line-height: calc(var(--sheet-calc) * 1.46);
}

.md-sheet .md-calc-grid {
  font-size: var(--sheet-calc);
}

.md-sheet-row.is-total {
  padding-top: 4px;
}

.md-sheet-row.is-total .md-sheet-label {
  color: rgba(var(--fg-rgb), 0.93);
  font-weight: 650;
}

.md-sheet-result {
  margin-left: -2px;
  padding: 2px 8px;
  border-radius: 8px;
  background: rgba(var(--tone), 0.14);
  animation: md-calc-glow 0.6s var(--motion-easing) 0.12s both;
}

.md-sheet-result .md-sheet-num {
  color: rgb(var(--tone));
  font-weight: 720;
}

.md-sheet-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: 18px;
  font-size: 13px;
  font-weight: 550;
}

.md-sheet-note::before {
  content: "";
  width: 16px;
  height: 1.5px;
  border-radius: 1px;
  background: rgba(var(--tone), 0.6);
}

.md-sheet-title {
  margin-bottom: 6px;
  color: rgba(var(--fg-rgb), 0.95);
  font-size: 15.5px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.md-sheet-sub {
  color: var(--fg-secondary);
  font-weight: 450;
}

.md-sheet-text {
  color: var(--fg-secondary);
}

.md-sheet-gap {
  height: 12px;
}

.md-sheet-divider {
  height: 1px;
  margin: 16px 0 18px;
  background: rgba(var(--fg-rgb), 0.1);
  transform-origin: left;
  animation: md-calc-rule 0.7s var(--motion-easing) both;
}

.md-calc > .md-copy {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.md-calc:hover > .md-copy,
.md-calc > .md-copy:focus-visible {
  opacity: 1;
}

@keyframes md-calc-in {
  from {
    opacity: 0;
    transform: translateY(0.3em) scale(0.9);
    filter: blur(3px);
  }
}

@keyframes md-calc-rule {
  from {
    transform: scaleX(0);
  }
}

@keyframes md-calc-glow {
  from {
    opacity: 0;
    transform: scaleX(0.5);
  }
}

@keyframes md-calc-note {
  from {
    opacity: 0;
    transform: translateX(-8px);
  }
}

.hl-keyword { color: rgb(198, 162, 255); }
.hl-string { color: rgb(150, 222, 150); }
.hl-number { color: rgb(255, 172, 112); }
.hl-comment { color: rgba(var(--fg-rgb), 0.38); font-style: italic; }
.hl-function { color: rgb(122, 182, 255); }
.hl-type { color: rgb(255, 214, 112); }
.hl-property { color: rgb(112, 220, 206); }
.hl-inserted { color: rgb(128, 218, 134); }
.hl-deleted { color: rgb(255, 128, 128); }

[data-theme="light"] .hl-keyword { color: rgb(136, 72, 214); }
[data-theme="light"] .hl-string { color: rgb(28, 126, 56); }
[data-theme="light"] .hl-number { color: rgb(192, 88, 0); }
[data-theme="light"] .hl-comment { color: rgba(var(--fg-rgb), 0.45); }
[data-theme="light"] .hl-function { color: rgb(22, 100, 208); }
[data-theme="light"] .hl-type { color: rgb(158, 104, 0); }
[data-theme="light"] .hl-property { color: rgb(0, 126, 116); }
[data-theme="light"] .hl-inserted { color: rgb(28, 126, 56); }
[data-theme="light"] .hl-deleted { color: rgb(200, 44, 44); }

.md-table {
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
}

.md-table table {
  position: relative;
  z-index: 1;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14.5px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}

.md-table th,
.md-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
}

.md-table th {
  padding-top: 2px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.12);
  color: var(--fg-secondary);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.25s ease;
  animation: md-rise 0.45s var(--motion-easing) both;
}

.md-table td {
  border-bottom: 1px solid rgba(var(--fg-rgb), 0.055);
  overflow-wrap: break-word;
  transition: border-color 0.25s ease;
}

/* A long path or identifier may wrap anywhere, otherwise it stretches its column past the edge. */
.md-table td code {
  overflow-wrap: anywhere;
}

.md-table td:first-child {
  color: rgb(var(--fg-rgb));
  font-weight: 750;
}

.md-table tbody tr:last-child > td,
.md-table tbody tr:hover > td,
.md-table tbody tr:has(+ tr:hover) > td {
  border-bottom-color: transparent;
}

.md-table table:has(tbody tr:hover) th {
  border-bottom-color: rgba(var(--fg-rgb), 0.08);
}

.md-table table:has(td:nth-child(1):hover) th:nth-child(1),
.md-table table:has(td:nth-child(2):hover) th:nth-child(2),
.md-table table:has(td:nth-child(3):hover) th:nth-child(3),
.md-table table:has(td:nth-child(4):hover) th:nth-child(4),
.md-table table:has(td:nth-child(5):hover) th:nth-child(5),
.md-table table:has(td:nth-child(6):hover) th:nth-child(6),
.md-table table:has(td:nth-child(7):hover) th:nth-child(7),
.md-table table:has(td:nth-child(8):hover) th:nth-child(8) {
  color: rgb(var(--tone));
}

.md-table tbody tr {
  animation: md-row 0.45s var(--motion-easing) both;
}

@keyframes md-row {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
}

.md-glide {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  height: 0;
  border-radius: 12px;
  background: rgba(var(--fg-rgb), 0.05);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.025);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s var(--motion-easing), height 0.4s var(--motion-easing), opacity 0.2s ease;
}

.markdown > .md-wide {
  --wide: min(100cqw - 56px, 1320px);
  width: var(--wide);
  margin-left: calc(50% - var(--wide) / 2);
}

.md-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.md-chip {
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(var(--tone), 0.15);
  color: rgb(var(--tone));
  font-size: 14.5px;
  font-weight: 750;
  line-height: 22px;
  animation: md-chip 0.5s calc(var(--k) * 110ms) var(--motion-easing) both;
}

.md-chip strong {
  color: inherit;
}

.md-arrow {
  width: 18px;
  height: 10px;
  background: rgba(var(--fg-rgb), 0.35);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 5h15M12 1.5L16 5l-4 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: md-arrow 0.45s calc(var(--k) * 110ms - 50ms) var(--motion-easing) both;
}

@keyframes md-chip {
  from {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(4px);
  }
}

@keyframes md-arrow {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
}

.md-math {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 4px 10px;
  color: rgba(var(--fg-rgb), 0.95);
  font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", "Times New Roman", serif;
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  white-space: nowrap;
  scrollbar-width: none;
  animation: md-math-in 0.7s var(--motion-easing) both;
}

.md-math::-webkit-scrollbar {
  display: none;
}

.markdown > .md-math {
  margin: 16px 0 18px;
}

@keyframes md-math-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
    filter: blur(5px);
  }
}

.md-imath {
  font-family: "Cambria Math", "STIX Two Math", "Latin Modern Math", "Times New Roman", serif;
  font-size: 1.1em;
  font-weight: 400;
  white-space: nowrap;
}

.md-math sup,
.md-math sub,
.md-imath sup,
.md-imath sub {
  font-size: 0.68em;
}

.md-math sup,
.md-imath sup {
  margin-left: 0.05em;
}

.mo {
  padding: 0 0.22em;
}

.mo.is-rel {
  padding: 0 0.3em;
}

.mo.is-unary {
  padding: 0 0.03em 0 0;
}

:is(sup, sub, .mss, .mlim-t, .mlim-b) .mo {
  padding: 0 0.06em;
}

.mn,
.mt,
.mop {
  font-style: normal;
}

.mn {
  padding: 0 0.15em 0 0.12em;
}

.mt.is-bold {
  font-weight: 700;
}

.mf {
  display: inline-flex;
  flex-direction: column;
  margin: 0 0.12em;
  font-size: 0.86em;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
}

.md-math .mf {
  margin: 0 0.16em;
  font-size: 0.94em;
  line-height: 1.35;
}

.md-math .mf .mf {
  font-size: 0.86em;
}

.mf > span:first-child {
  padding: 0 0.22em 0.12em;
  border-bottom: 0.055em solid currentColor;
}

.mf.is-bare > span:first-child {
  border-bottom: 0;
}

.mf > span:last-child {
  padding: 0.12em 0.22em 0;
}

.ms {
  display: inline-flex;
  align-items: stretch;
}

.ms::before {
  content: "";
  flex: none;
  width: 0.58em;
  margin-right: -0.02em;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 40' preserveAspectRatio='none'%3E%3Cpath d='M0.3 23.7L3.5 21.9l2.9 12.6L10.6 0.4H12v1.4h-0.2L7.7 39.6H6.2L2.8 25 1 26.1z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}

.ms-in {
  align-self: baseline;
  padding: 0.22em 0.1em 0 0.04em;
  border-top: 0.06em solid currentColor;
  line-height: 1.2;
}

.mx {
  margin-right: -0.42em;
  font-size: 0.55em;
}

.mdel {
  display: inline-flex;
  align-items: stretch;
  margin: 0 0.04em;
}

.mdel-in {
  align-self: baseline;
  padding: 0 0.06em;
  line-height: 1.3;
}

.mdl {
  flex: none;
  width: 0.36em;
  background: currentColor;
  mask: var(--mdl) center / 100% 100% no-repeat;
}

.mdl.is-paren-l { --mdl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40' preserveAspectRatio='none'%3E%3Cpath d='M9.2 0.8C3.6 7 1.9 13.4 1.9 20s1.7 13 7.3 19.2l0.9-0.8C5.2 32.4 4.1 26.4 4.1 20S5.2 7.6 10.1 1.6z'/%3E%3C/svg%3E"); }
.mdl.is-paren-r { --mdl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40' preserveAspectRatio='none'%3E%3Cpath d='M0.8 0.8C6.4 7 8.1 13.4 8.1 20s-1.7 13-7.3 19.2l-0.9-0.8C4.8 32.4 5.9 26.4 5.9 20S4.8 7.6-0.1 1.6z'/%3E%3C/svg%3E"); }
.mdl.is-bracket-l { --mdl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40' preserveAspectRatio='none'%3E%3Cpath d='M8.5 1H2.5v38h6v-1.6H4.3V2.6h4.2z'/%3E%3C/svg%3E"); }
.mdl.is-bracket-r { --mdl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40' preserveAspectRatio='none'%3E%3Cpath d='M1.5 1h6v38h-6v-1.6h4.2V2.6H1.5z'/%3E%3C/svg%3E"); }
.mdl.is-brace-l { --mdl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40' preserveAspectRatio='none'%3E%3Cpath d='M8.6 1C5.6 1 4.6 2.6 4.6 5.6v10.2c0 2.3-1 3.6-3.4 4.2 2.4 0.6 3.4 1.9 3.4 4.2v10.2c0 3 1 4.6 4 4.6v-1.4c-1.8 0-2.3-1-2.3-3.4V24c0-2.3-0.9-3.4-2.3-4 1.4-0.6 2.3-1.7 2.3-4V5.8c0-2.4 0.5-3.4 2.3-3.4z'/%3E%3C/svg%3E"); width: 0.46em; }
.mdl.is-brace-r { --mdl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40' preserveAspectRatio='none'%3E%3Cpath d='M1.4 1c3 0 4 1.6 4 4.6v10.2c0 2.3 1 3.6 3.4 4.2-2.4 0.6-3.4 1.9-3.4 4.2v10.2c0 3-1 4.6-4 4.6v-1.4c1.8 0 2.3-1 2.3-3.4V24c0-2.3 0.9-3.4 2.3-4-1.4-0.6-2.3-1.7-2.3-4V5.8c0-2.4-0.5-3.4-2.3-3.4z'/%3E%3C/svg%3E"); width: 0.46em; }
.mdl.is-bar { --mdl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40' preserveAspectRatio='none'%3E%3Cpath d='M4.25 0.5h1.5v39h-1.5z'/%3E%3C/svg%3E"); width: 0.24em; }
.mdl.is-dbar { --mdl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40' preserveAspectRatio='none'%3E%3Cpath d='M2.6 0.5h1.4v39H2.6zM6 0.5h1.4v39H6z'/%3E%3C/svg%3E"); width: 0.34em; }
.mdl.is-angle-l { --mdl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40' preserveAspectRatio='none'%3E%3Cpath d='M8.2 0.8L2.2 20l6 19.2 1.3-0.4L3.8 20 9.5 1.2z'/%3E%3C/svg%3E"); }
.mdl.is-angle-r { --mdl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 40' preserveAspectRatio='none'%3E%3Cpath d='M1.8 0.8l6 19.2-6 19.2-1.3-0.4L6.2 20 0.5 1.2z'/%3E%3C/svg%3E"); }

.mop {
  padding: 0 0.08em 0 0.04em;
}

.mop.is-display {
  font-size: 1.55em;
  line-height: 1;
}

.mop.is-display.is-int {
  font-size: 1.9em;
}

.mlim {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0.12em;
  line-height: 1.15;
  vertical-align: middle;
}

.mlim-t,
.mlim-b {
  font-size: 0.6em;
  line-height: 1.3;
}

.mss {
  display: inline-flex;
  flex-direction: column;
  margin-left: 0.04em;
  font-size: 0.68em;
  line-height: 1.12;
  text-align: left;
  vertical-align: middle;
}

.md-math .mss.is-int {
  row-gap: 0.8em;
  margin: 0 0.18em 0 -0.08em;
}

.ma {
  position: relative;
  display: inline-block;
}

.ma::before {
  content: attr(data-a);
  position: absolute;
  top: -0.36em;
  left: 58%;
  font-size: 0.85em;
  font-style: normal;
  line-height: 1;
  transform: translateX(-50%);
}

.ma.is-vec::before {
  top: -0.48em;
  font-size: 0.7em;
}

.ma.is-bar {
  padding-top: 0.04em;
  border-top: 0.06em solid currentColor;
}

.mgrid {
  display: inline-grid;
  grid-template-columns: repeat(var(--c), auto);
  column-gap: 0.9em;
  row-gap: 0.18em;
  margin: 0 0.1em;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
}

.mgrid.is-cases {
  justify-items: start;
  column-gap: 1.4em;
}

.mgrid.is-align {
  column-gap: 0;
}

.mgrid > .is-r {
  justify-self: end;
}

.mgrid > .is-l {
  justify-self: start;
}

.mg {
  display: inline-block;
  width: 1em;
}

.markdown {
  --dg-grid: radial-gradient(rgba(var(--fg-rgb), 0.08) 1px, transparent 1.4px) 0 0 / 18px 18px;
}

.thread {
  container-type: inline-size;
}

.t-neutral {
  --tone: 205, 205, 205;
}

[data-theme="light"] .t-neutral {
  --tone: 88, 88, 88;
}

.md-diagram {
  position: relative;
}

.markdown > .md-diagram.md-wide {
  margin-top: 6px;
  margin-bottom: 22px;
}

.md-diagram-status,
.dg-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  color: var(--fg-secondary);
  font-size: 12.5px;
  font-weight: 500;
  animation: dg-breathe 1.6s ease-in-out infinite;
}

.dg-status {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  pointer-events: none;
}

.md-diagram-status::before,
.dg-status::before {
  content: "";
  width: 5px;
  height: 5px;
  margin-right: 20px;
  border-radius: 50%;
  background: rgba(var(--fg-rgb), 0.7);
  box-shadow: 10px 0 rgba(var(--fg-rgb), 0.4), 20px 0 rgba(var(--fg-rgb), 0.2);
  animation: dg-dots 1.2s ease-in-out infinite;
}

@keyframes dg-breathe {
  50% {
    color: var(--fg-tertiary);
  }
}

@keyframes dg-dots {
  0%,
  100% {
    box-shadow: 10px 0 rgba(var(--fg-rgb), 0.4), 20px 0 rgba(var(--fg-rgb), 0.2);
  }
  33% {
    box-shadow: 10px 0 rgba(var(--fg-rgb), 0.7), 20px 0 rgba(var(--fg-rgb), 0.4);
  }
  66% {
    box-shadow: 10px 0 rgba(var(--fg-rgb), 0.4), 20px 0 rgba(var(--fg-rgb), 0.7);
  }
}

.dg-host {
  position: relative;
}

.dg-stage {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}

.dg-stage::-webkit-scrollbar {
  display: none;
}

.dg-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--dg-grid);
  opacity: 0;
  mask: radial-gradient(closest-side, #000 55%, transparent);
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.dg-host.is-editing .dg-stage::before {
  opacity: 1;
}

.dg-svg {
  position: relative;
  display: block;
  overflow: visible;
  font-family: var(--font);
}

.dg-svg .is-up {
  --c: var(--success-rgb);
}

.dg-svg .is-down {
  --c: var(--danger-rgb);
}

.dg-tools {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: flex;
  gap: 2px;
  width: 68px;
  height: 36px;
  padding: 3px;
  opacity: 0;
  scale: 0.9;
  pointer-events: none;
  transition: opacity 0.18s ease, scale 0.3s var(--motion-easing);
}

.dg-host.is-hover > .dg-tools,
.dg-host.is-editing > .dg-tools,
.dg-tools:has(:focus-visible) {
  opacity: 1;
  scale: 1;
  pointer-events: auto;
  transition: opacity 0.22s ease, scale 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.dg-host.is-live > .dg-tools {
  display: none;
}

.dg-tool {
  position: relative;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: transparent;
  color: rgba(var(--fg-rgb), 0.8);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dg-tool:hover {
  background: rgba(var(--fg-rgb), 0.1);
  color: rgb(var(--fg-rgb));
}

.dg-tool:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.dg-icon {
  grid-area: 1 / 1;
  width: 15px;
  height: 15px;
  transition: opacity 0.2s ease, transform 0.35s var(--motion-easing);
}

.dg-icon.is-done,
.dg-icon.is-copied,
.dg-host.is-editing .dg-icon.is-edit,
.dg-tool.is-done .dg-icon.is-copy {
  opacity: 0;
  transform: scale(0.5);
}

.dg-host.is-editing .dg-icon.is-done,
.dg-tool.is-done .dg-icon.is-copied {
  opacity: 1;
  transform: none;
}

.dg-tool.is-done .dg-icon.is-copied {
  color: rgb(var(--success-rgb));
}

.dg-editor {
  position: sticky;
  z-index: 4;
  bottom: calc(var(--composer-space, 140px) + 12px);
  overflow: hidden;
  width: min(980px, 100%);
  margin: 8px auto 0;
  border-radius: 20px;
  background: var(--composer-bg);
  box-shadow: inset 0 0 0 1px var(--composer-border), 0 18px 48px rgba(0, 0, 0, calc(0.3 * var(--shadow)));
}

.dg-editor[hidden] {
  display: none;
}

.dg-editor:focus {
  outline: none;
}

.dg-editor-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 12px;
  box-shadow: inset 0 -1px rgba(var(--fg-rgb), 0.06);
}

.dg-editor-space {
  flex: 1;
}

.dg-modes {
  position: relative;
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  padding: 2px;
  border-radius: 10px;
  background: rgba(var(--fg-rgb), 0.06);
}

.dg-modes[hidden] {
  display: none;
}

.dg-modes::before {
  content: "";
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.13);
  box-shadow: 0 1px 3px rgba(0, 0, 0, calc(0.3 * var(--shadow)));
  transition: translate 0.4s var(--motion-easing);
}

.dg-editor[data-mode="code"] .dg-modes::before {
  translate: 100% 0;
}

.dg-modes > button {
  position: relative;
  min-width: 78px;
  height: 28px;
  padding: 0 14px;
  border: 0;
  background: none;
  color: var(--fg-secondary);
  font: 650 12.5px var(--font);
  cursor: pointer;
  transition: color 0.25s ease;
}

.dg-modes > button.is-active {
  color: rgb(var(--fg-rgb));
}

.dg-editor-button {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--fg-secondary);
  font: 650 13px var(--font);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.dg-editor-button:hover {
  background: rgba(var(--fg-rgb), 0.07);
  color: rgb(var(--fg-rgb));
}

.dg-editor-button:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.dg-editor-button.is-primary {
  background: rgb(var(--fg-rgb));
  color: var(--chat-bg);
}

.dg-editor-button.is-primary:hover {
  background: rgba(var(--fg-rgb), 0.85);
  color: var(--chat-bg);
}

.dg-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  max-height: min(380px, 46vh);
  overflow: auto;
  padding: 16px 16px 18px;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--fg-rgb), 0.15) transparent;
}

.dg-editor[data-mode="code"] .dg-form,
.dg-editor[data-mode="data"] .dg-code-wrap {
  display: none;
}

.dg-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px 14px;
}

.dg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dg-field > span,
.dg-section-title,
.dg-table th {
  color: var(--fg-tertiary);
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
}

.dg-field.is-check {
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  align-self: end;
  height: 34px;
}

.dg-field.is-check > span {
  color: var(--fg-primary);
  font-size: 13px;
}

.dg-section-title {
  margin-bottom: 8px;
}

.dg-input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 10px;
  outline: none;
  background: rgba(var(--fg-rgb), 0.045);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.06);
  color: var(--fg-primary);
  font: 550 13.5px var(--font);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.dg-input::placeholder {
  color: var(--fg-tertiary);
}

.dg-input:hover {
  background: rgba(var(--fg-rgb), 0.07);
}

.dg-input:focus {
  background: rgba(var(--fg-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.65), 0 0 0 3px rgba(var(--tone), 0.15);
}

.dg-input.is-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.dg-input.is-bad {
  box-shadow: inset 0 0 0 1px rgba(var(--danger-rgb), 0.75);
}

.dg-input.is-select {
  appearance: none;
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='%23999' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 11px center;
  background-size: 9px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.dg-input.is-select option {
  background: var(--composer-bg);
  color: var(--fg-primary);
}

.dg-check {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: rgb(var(--tone));
  cursor: pointer;
}

.dg-table-scroll {
  overflow-x: auto;
  margin: 0 -4px;
  padding: 0 4px;
  scrollbar-width: thin;
}

.dg-tables {
  display: grid;
  gap: 22px;
}

.dg-tables.is-pair {
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
}

@media (max-width: 900px) {
  .dg-tables.is-pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

.dg-table-block {
  min-width: 0;
}

.dg-table {
  width: calc(100% + 12px);
  border-collapse: separate;
  border-spacing: 6px 5px;
  margin: -5px -6px;
  font-size: 13px;
}

.dg-table th {
  padding: 0 2px 1px;
  text-align: left;
}

.dg-table th.is-wide {
  min-width: 200px;
}

.dg-table td {
  min-width: 96px;
  padding: 0;
}

.dg-table td.is-narrow,
.dg-table th.is-narrow {
  min-width: 62px;
}

.dg-table th.is-narrow .dg-input.is-head {
  min-width: 0;
  text-align: right;
}

.dg-table td.dg-row-tools {
  min-width: 26px;
  width: 26px;
}

.dg-table .dg-input {
  height: 32px;
  border-radius: 9px;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.08);
}

.dg-table .dg-input:hover {
  background: rgba(var(--fg-rgb), 0.04);
}

.dg-table .dg-input:focus {
  background: rgba(var(--fg-rgb), 0.07);
  box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.65), 0 0 0 3px rgba(var(--tone), 0.15);
}

.dg-table tr.is-new {
  animation: dg-row-in 0.35s var(--motion-easing) both;
}

@keyframes dg-row-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.dg-head-cell {
  display: flex;
  align-items: center;
  gap: 4px;
}

.dg-table .dg-input.is-head {
  height: 28px;
  min-width: 90px;
  background: rgba(var(--fg-rgb), 0.05);
  box-shadow: none;
  color: rgb(var(--fg-rgb));
  font-size: 12.5px;
  font-weight: 700;
}

.dg-table .dg-input.is-type {
  flex: none;
  width: 78px;
  min-width: 0;
  color: var(--fg-secondary);
  font-weight: 650;
}

.dg-remove {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--fg-tertiary);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.dg-remove svg {
  width: 10px;
  height: 10px;
}

.dg-table tr:hover .dg-remove,
.dg-head-cell:hover .dg-remove,
.dg-remove:focus-visible {
  opacity: 1;
}

.dg-remove:hover {
  background: rgba(var(--danger-rgb), 0.14);
  color: rgb(var(--danger-rgb));
}

.dg-table-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.dg-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 13px 0 11px;
  border: 0;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.05);
  color: var(--fg-secondary);
  font: 650 12.5px var(--font);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.dg-add::before {
  content: "";
  width: 10px;
  height: 10px;
  background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 1v8M1 5h8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.dg-add:hover {
  background: rgba(var(--fg-rgb), 0.09);
  color: rgb(var(--fg-rgb));
}

.dg-outline {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dg-note-text {
  color: var(--fg-tertiary);
  font-size: 12px;
}

.dg-code-wrap {
  padding: 12px;
}

.dg-code {
  display: block;
  width: 100%;
  min-height: 220px;
  max-height: 56vh;
  margin: 0;
  padding: 14px 16px;
  border: 0;
  border-radius: 14px;
  outline: none;
  background: rgba(var(--fg-rgb), 0.03);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.06);
  color: var(--fg-primary);
  caret-color: rgb(var(--tone));
  font-family: var(--mono-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  font-variant-ligatures: none;
  tab-size: 2;
  resize: none;
  field-sizing: content;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--fg-rgb), 0.15) transparent;
  transition: box-shadow 0.25s ease;
}

.dg-code:focus {
  box-shadow: inset 0 0 0 1px rgba(var(--tone), 0.5), 0 0 0 3px rgba(var(--tone), 0.12);
}

.dg-code::selection {
  background: rgba(var(--tone), 0.3);
}

.dg-code.is-outline {
  min-height: 180px;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 550;
  line-height: 1.8;
  tab-size: 2;
}

.dg-hint {
  height: 0;
  padding: 0 18px;
  overflow: hidden;
  color: rgb(var(--danger-rgb));
  font-size: 12.5px;
  line-height: 18px;
  opacity: 0;
  transition: opacity 0.2s ease, height 0.25s var(--motion-easing), padding 0.25s var(--motion-easing);
}

.dg-hint.is-shown {
  height: 34px;
  padding: 0 18px 16px;
}

.dg-hint.is-shown {
  opacity: 0.9;
}

.dg-rename {
  position: absolute;
  z-index: 4;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 10px;
  outline: none;
  background: var(--composer-bg);
  box-shadow: 0 0 0 1.5px rgba(var(--s1), 0.8), 0 10px 28px rgba(0, 0, 0, calc(0.45 * var(--shadow)));
  color: rgb(var(--fg-rgb));
  font: 500 12.5px var(--font);
  text-align: center;
  animation: md-pop 0.3s var(--motion-easing) both;
}

.dg-fallback {
  max-width: var(--composer-max-width);
  margin: 0 auto;
}

.dg-rule {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 1px;
  background: linear-gradient(rgba(var(--fg-rgb), 0.3), rgba(var(--fg-rgb), 0.06));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.dg-rule.is-gliding {
  transition: opacity 0.15s ease, transform 0.22s var(--motion-easing), height 0.22s var(--motion-easing);
}

.dg-rule.is-shown {
  opacity: 1;
}

.dg-tip {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  min-width: 120px;
  padding: 7px 11px 8px;
  border-radius: 11px;
  background: var(--tip-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.08), 0 14px 34px rgba(0, 0, 0, calc(0.45 * var(--shadow)));
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  color: var(--fg-primary);
  font-size: 13.5px;
  font-weight: 550;
  line-height: 19px;
  white-space: nowrap;
  opacity: 0;
  scale: 0.96;
  pointer-events: none;
  transition: opacity 0.15s ease, scale 0.25s var(--motion-easing);
}

.dg-tip.is-gliding {
  transition: opacity 0.15s ease, scale 0.25s var(--motion-easing), transform 0.22s var(--motion-easing);
}

.dg-tip.is-shown {
  opacity: 1;
  scale: 1;
}

.dg-tip-title {
  margin-bottom: 1px;
  color: var(--fg-secondary);
  font-size: 12.5px;
  font-weight: 550;
}

.dg-tip-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The key of a row repeats how its series is drawn: a stroke for a line, a block for bars, a dot for points. */
.dg-tip-row i {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--tone));
}

.dg-tip-row i.is-bar {
  border-radius: 2.5px;
}

.dg-tip-row i.is-line {
  width: 10px;
  height: 2px;
  border-radius: 1px;
}

.dg-tip-row span {
  flex: 1;
  color: var(--fg-secondary);
}

.dg-tip-row b {
  color: rgb(var(--fg-rgb));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dg-tip-row.is-up b {
  color: rgb(var(--success-rgb));
}

.dg-tip-row.is-down b {
  color: rgb(var(--danger-rgb));
}

/* A drawing is ink on the chat's surface. Its structure is the text colour at low strength, in hairlines; its text
   comes in three strengths and nothing heavier than semibold. Colour stands for data alone: each series takes a slot
   of the palette, always in the same order, and a lone series takes the first. */
.dg-svg {
  --tone: var(--s1);
  --ink: rgba(var(--fg-rgb), var(--dg-ink));
  --ink-2: rgba(var(--fg-rgb), var(--dg-ink-2));
  --ink-3: rgba(var(--fg-rgb), var(--dg-ink-3));
  --hair: rgba(var(--fg-rgb), 0.08);
  --rule: rgba(var(--fg-rgb), 0.16);
  --plate: rgba(var(--fg-rgb), 0.04);
  --plate-edge: rgba(var(--fg-rgb), 0.12);
}

.md-diagram .t-s1 { --tone: var(--s1); }
.md-diagram .t-s2 { --tone: var(--s2); }
.md-diagram .t-s3 { --tone: var(--s3); }
.md-diagram .t-s4 { --tone: var(--s4); }
.md-diagram .t-s5 { --tone: var(--s5); }
.md-diagram .t-s6 { --tone: var(--s6); }
.md-diagram .t-s7 { --tone: var(--s7); }
.md-diagram .t-mute { --tone: var(--s0); }

.dg-body,
.dg-head {
  transform-box: fill-box;
  transform-origin: center;
}

/* Text that every kind of drawing shares. A number set over a mark keeps a rim of the surface around it. */
.dg-title-text {
  fill: var(--ink);
  font-size: 13.5px;
  font-weight: 650;
}

.dg-eyebrow,
.dg-cluster-title,
.dg-frame-kind,
.dg-quad-label,
.dg-today-tag {
  fill: var(--ink-3);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.06em;
}

.dg-tick,
.dg-unit,
.dg-axis-title,
.dg-zone-label {
  fill: var(--ink-3);
  font-size: 11px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}

.dg-value,
.dg-end,
.dg-goal-label {
  fill: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.dg-end {
  fill: var(--ink);
}

.dg-value,
.dg-goal-label,
.dg-zone-label,
.dg-tick.is-radar,
.dg-q-name,
.dg-sankey-name,
.dg-sankey-value,
.dg-cluster-title,
.dg-task-meta,
.dg-eyebrow.is-over {
  paint-order: stroke;
  stroke: var(--chat-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Blocks of a scheme: a plate barely off the surface with a hairline edge. Where a scheme begins and ends, the plate
   takes the accent; the text stays ink. */
.dg-shape {
  fill: color-mix(in srgb, rgb(var(--fg-rgb)) 4%, var(--chat-bg));
  stroke: var(--plate-edge);
  stroke-width: 1;
  stroke-linejoin: round;
  transition: fill 0.3s ease, stroke 0.3s ease;
}

.dg-node:hover .dg-shape {
  fill: color-mix(in srgb, rgb(var(--fg-rgb)) 7%, var(--chat-bg));
  stroke: rgba(var(--fg-rgb), 0.28);
}

.dg-node.is-key .dg-shape {
  fill: color-mix(in srgb, rgb(var(--tone)) 9%, var(--chat-bg));
  stroke: rgba(var(--tone), 0.62);
}

.dg-node.is-key:hover .dg-shape {
  fill: color-mix(in srgb, rgb(var(--tone)) 14%, var(--chat-bg));
  stroke: rgb(var(--tone));
}

.dg-node.is-root .dg-shape {
  fill: color-mix(in srgb, rgb(var(--fg-rgb)) 7%, var(--chat-bg));
  stroke: rgba(var(--fg-rgb), 0.22);
}

.dg-host:not(.is-live) .dg-node {
  cursor: text;
}

.dg-host .dg-node.is-card,
.dg-svg[data-kind="mindmap"] .dg-node {
  cursor: default;
}

.dg-shape-line {
  fill: none;
  stroke: var(--plate-edge);
  stroke-width: 1;
}

.dg-label {
  fill: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
}

/* A block that says what it is and what it does: the name strong, the rest quiet under it. */
.dg-label-head {
  font-weight: 650;
}

.dg-label-detail {
  fill: var(--ink-2);
  font-size: 11.5px;
  font-weight: 450;
}

.dg-node.is-root .dg-label {
  font-size: 13.5px;
  font-weight: 650;
}

.dg-node.is-branch .dg-label {
  font-weight: 600;
}

.dg-dot {
  fill: var(--ink-2);
}

.dg-ring {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.25;
}

/* A table of a database or a class of code: the name on a faint band, then its fields, their types in the code face. */
.dg-card-head {
  fill: rgba(var(--fg-rgb), 0.03);
}

.dg-card-rule {
  stroke: rgba(var(--fg-rgb), 0.1);
}

.dg-card-rule.is-soft {
  stroke: rgba(var(--fg-rgb), 0.07);
}

.dg-card-title {
  fill: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
}

.dg-card-sub {
  fill: var(--ink-3);
  font-size: 10.5px;
  font-weight: 500;
}

.dg-card-text {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

.dg-card-meta,
.dg-card-lead {
  fill: var(--ink-3);
  font-family: var(--mono-font);
  font-size: 11px;
  font-weight: 450;
}

.dg-card-badge {
  fill: var(--ink-3);
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
}

.dg-card-badge.is-key {
  fill: rgb(var(--tone));
}

/* Arrows */
.dg-edge > path {
  transition: stroke 0.25s ease, fill 0.25s ease, opacity 0.25s ease;
}

.dg-edge > path:first-child {
  fill: none;
  stroke: rgba(var(--fg-rgb), 0.3);
  stroke-width: 1.25;
  stroke-linecap: round;
}

.dg-edge.is-thick > path:first-child {
  stroke: rgba(var(--fg-rgb), 0.44);
  stroke-width: 2;
}

.dg-edge.is-dotted > path:first-child {
  stroke-dasharray: 1.5 4.5;
}

.dg-edge.is-dashed > path:first-child {
  stroke-dasharray: 4 4;
}

.dg-head {
  fill: rgba(var(--fg-rgb), 0.5);
}

.dg-head.is-hollow {
  fill: var(--chat-bg);
  stroke: rgba(var(--fg-rgb), 0.5);
  stroke-width: 1.25;
  stroke-linejoin: round;
}

.dg-mark {
  fill: none;
  stroke: rgba(var(--fg-rgb), 0.5);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-mark.is-hollow {
  fill: var(--chat-bg);
}

.dg-edge.is-lit > path:first-child {
  stroke: rgb(var(--tone));
}

.dg-edge.is-lit > .dg-head {
  fill: rgb(var(--tone));
}

.dg-edge.is-lit > .dg-head.is-hollow {
  fill: var(--chat-bg);
  stroke: rgb(var(--tone));
}

.dg-edge.is-lit > .dg-mark {
  stroke: rgb(var(--tone));
}

.dg-svg.is-lighting .dg-edge:not(.is-lit) > path {
  opacity: 0.35;
}

.dg-edge-label rect {
  fill: var(--chat-bg);
}

.dg-edge-label text {
  fill: var(--ink-2);
  font-size: 11.5px;
  font-weight: 500;
}

/* Groups of a scheme: a hairline frame with the name in small capitals. */
.dg-cluster > rect {
  fill: rgba(var(--fg-rgb), 0.018);
  stroke: rgba(var(--fg-rgb), 0.09);
  stroke-width: 1;
}

.dg-cluster.is-nested > rect {
  fill: rgba(var(--fg-rgb), 0.022);
}

/* A mind map: the branches carry the colour, thin; the words stay ink. */
.dg-edge.dg-branch > path:first-child {
  stroke: rgba(var(--tone), 0.8);
  stroke-width: 1.5;
}

.dg-edge.dg-branch.is-d2 > path:first-child {
  stroke-width: 1.25;
}

.dg-edge.dg-branch.is-d3 > path:first-child {
  stroke: rgba(var(--tone), 0.6);
  stroke-width: 1;
}

.dg-mind-dot {
  fill: rgb(var(--tone));
}

.dg-mind-leaf {
  fill: var(--ink-2);
  font-size: 12.5px;
  font-weight: 450;
}

/* Charts: a hairline grid that stays back, the floor a little stronger, and thin marks in flat colour. */
.dg-grid {
  stroke: var(--hair);
}

.dg-grid.is-zero,
.dg-line {
  stroke: var(--rule);
}

.dg-bar {
  fill: rgb(var(--tone));
  transition: opacity 0.2s ease;
}

.dg-svg.is-probing .dg-bar:not(.is-hot) {
  opacity: 0.45;
}

.dg-edge.dg-stroke > path:first-child {
  stroke: rgb(var(--tone));
  stroke-width: 1.75;
  stroke-linejoin: round;
}

.dg-edge.dg-stroke.is-ma > path:first-child {
  stroke-width: 1.25;
}

.dg-point {
  fill: rgb(var(--tone));
  stroke: var(--chat-bg);
  stroke-width: 2;
  transition: r 0.25s var(--motion-easing);
}

.dg-point.is-hot {
  r: 5px;
}

.dg-stop {
  stop-color: rgb(var(--tone));
}

.dg-stop.is-area {
  stop-color: rgba(var(--tone), 0.17);
}

.dg-stop.is-clear {
  stop-color: rgba(var(--tone), 0);
}

.dg-zone {
  fill: rgba(var(--tone), 0.08);
}

/* Among several series a band takes no side: it is a tint of the ink, not of one of their colours. */
.dg-zone.is-plain {
  fill: rgba(var(--fg-rgb), 0.045);
}

.dg-goal {
  stroke: var(--ink-2);
  stroke-dasharray: 3 3;
}

.dg-chip rect {
  fill: rgb(var(--tone));
}

.dg-chip text {
  fill: var(--ink-2);
  font-size: 11.5px;
  font-weight: 500;
}

/* Shares: a thin ring parted by the surface, and a small table of what it holds. */
.dg-slice {
  fill: none;
  stroke: rgb(var(--tone));
  transition: stroke-width 0.3s var(--motion-easing), opacity 0.2s ease;
}

.dg-slice.is-active {
  stroke-width: 16px;
}

.dg-center-value {
  fill: var(--ink);
  font-size: 20px;
  font-weight: 650;
}

.dg-center-label {
  fill: var(--ink-3);
  font-size: 11px;
  font-weight: 450;
}

.dg-legend-bg {
  fill: rgba(var(--fg-rgb), 0);
  transition: fill 0.2s ease;
}

.dg-legend-row.is-active .dg-legend-bg {
  fill: rgba(var(--fg-rgb), 0.05);
}

.dg-swatch {
  fill: rgb(var(--tone));
}

.dg-legend-label {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

.dg-legend-value {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dg-legend-share {
  fill: var(--ink-3);
  font-size: 11px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}

/* A ledger: names, thin bars and a column of numbers. */
.dg-hit {
  fill: transparent;
}

.dg-row-name {
  fill: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
}

.dg-row-note,
.dg-row-share {
  fill: var(--ink-3);
  font-size: 11px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}

.dg-row-value {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dg-row-total {
  fill: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.dg-ledger-bar {
  fill: rgb(var(--tone));
}

/* Where a whole row answers the pointer, the row is what it meets: the marks over it let it through. */
.dg-svg[data-kind="ledger"] .dg-layer:not(.is-back),
.dg-svg[data-kind="ranges"] .dg-layer:not(.is-back),
.dg-svg[data-kind="git"] .dg-layer:not(.is-back) {
  pointer-events: none;
}

/* Figures: a number to read, its unit beside it, and under it how it moved or how far it has come. */
.dg-metric-name {
  fill: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
}

.dg-figure-num {
  fill: var(--ink);
  font-weight: 650;
}

.dg-figure-unit {
  fill: var(--ink-2);
  font-size: 12px;
  font-weight: 450;
}

.dg-metric-change {
  fill: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dg-metric-change.is-good {
  fill: rgb(var(--success-rgb));
}

.dg-metric-change.is-bad {
  fill: rgb(var(--danger-rgb));
}

.dg-metric-note {
  fill: var(--ink-3);
  font-size: 11px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}

.dg-meter-track {
  fill: rgba(var(--tone), 0.2);
}

.dg-meter-fill {
  fill: rgb(var(--tone));
}

.dg-edge.dg-spark > path:first-child {
  stroke-width: 1.5;
}

/* A value against what is normal for it: the normal stretch is the same grey band in every row, the value a dot on
   it. Out of the band the dot turns amber and an arrow by the number says which way. */
.dg-range-track {
  stroke: rgba(var(--fg-rgb), 0.12);
  stroke-width: 2;
  stroke-linecap: round;
}

.dg-range-zone {
  fill: rgba(var(--fg-rgb), 0.24);
}

.dg-range-mark {
  fill: rgb(var(--tone));
  stroke: var(--chat-bg);
  stroke-width: 2;
}

.dg-range-mark.is-out {
  fill: rgb(var(--warn-rgb));
}

.dg-range-way {
  fill: rgb(var(--warn-rgb));
  font-size: 12px;
  font-weight: 650;
}

/* Columns of cards: a plan for the week, a board of tasks. */
.dg-col-name {
  fill: var(--ink);
  font-size: 12.5px;
  font-weight: 650;
}

.dg-col-sub {
  fill: var(--ink-3);
  font-size: 11px;
  font-weight: 450;
}

.dg-plate {
  fill: var(--plate);
  transition: fill 0.2s ease;
}

.dg-plate.is-hot {
  fill: rgba(var(--fg-rgb), 0.075);
}

/* Steps of a procedure down a hairline, each under its number. */
.dg-step-mark {
  fill: var(--chat-bg);
  stroke: rgba(var(--fg-rgb), 0.24);
  stroke-width: 1;
}

.dg-step-mark.is-done {
  stroke: rgba(var(--tone), 0.7);
}

.dg-wf-glyph.is-done path {
  stroke: rgb(var(--tone));
  stroke-width: 2;
}

.dg-step-text.is-done {
  fill: var(--ink-2);
}

.dg-step-n {
  fill: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.dg-step-text {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

.dg-step-meta {
  fill: var(--ink-3);
  font-size: 11px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}

.dg-step-note,
.dg-step-warn {
  fill: var(--ink-2);
  font-size: 12px;
  font-weight: 450;
}

.dg-step-warn {
  fill: var(--ink);
}

.dg-rail {
  stroke: rgba(var(--fg-rgb), 0.14);
}

.dg-wf-glyph.is-warn path {
  stroke: rgb(var(--warn-rgb));
  stroke-width: 1.7;
}

/* How a sum comes about: what adds is green, what takes away is red, where it stands is the accent. */
.dg-bar.is-up,
.dg-bar.is-down {
  fill: rgba(var(--c), 0.86);
}

.dg-bridge {
  stroke: rgba(var(--fg-rgb), 0.24);
}

.dg-funnel-bar {
  fill: rgb(var(--tone));
  transition: opacity 0.2s ease;
}

.dg-funnel-rate {
  fill: var(--ink-3);
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Flows: bands in one colour, as wide as what they carry. */
.dg-ribbon {
  fill: rgba(var(--tone), 0.24);
  transition: fill 0.2s ease;
}

.dg-ribbon.is-hot {
  fill: rgba(var(--tone), 0.55);
}

.dg-sankey-node {
  fill: rgb(var(--tone));
}

.dg-sankey-name {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

.dg-sankey-value {
  fill: var(--ink-3);
  font-size: 11px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}

/* Cells: the more there is, the more of the one colour, in steps far enough apart to tell. In a table the steps
   stay soft, so the number in the cell reads. */
.dg-cell {
  fill: rgba(var(--fg-rgb), 0.06);
}

.dg-cell.is-l1 {
  fill: rgba(var(--tone), 0.3);
}

.dg-cell.is-l2 {
  fill: rgba(var(--tone), 0.52);
}

.dg-cell.is-l3 {
  fill: rgba(var(--tone), 0.76);
}

.dg-cell.is-l4 {
  fill: rgb(var(--tone));
}

.dg-cell.is-soft.is-l1 {
  fill: rgba(var(--tone), 0.14);
}

.dg-cell.is-soft.is-l2 {
  fill: rgba(var(--tone), 0.3);
}

.dg-cell.is-soft.is-l3 {
  fill: rgba(var(--tone), 0.46);
}

.dg-cell.is-soft.is-l4 {
  fill: rgba(var(--tone), 0.64);
}

.dg-cell.is-hot {
  stroke: var(--ink);
  stroke-width: 1;
}

.dg-cell-dot {
  fill: rgb(var(--tone));
}

.dg-cell-off {
  stroke: rgba(var(--fg-rgb), 0.22);
  stroke-linecap: round;
}

.dg-cell-text {
  fill: var(--ink);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.dg-grid.is-faint {
  stroke: rgba(var(--fg-rgb), 0.045);
}

.dg-q-point.is-bubble {
  fill: rgba(var(--tone), 0.32);
  stroke: rgb(var(--tone));
  stroke-width: 1.25;
}

/* What a whole is made of: tiles in the colour of their group, parted by the surface. */
.dg-tile {
  fill: rgba(var(--tone), 0.3);
  transition: fill 0.2s ease;
}

.dg-tile.is-hot {
  fill: rgba(var(--tone), 0.5);
}

.dg-tile-name,
.dg-tile-value {
  fill: var(--ink);
  font-size: 11.5px;
  font-weight: 500;
  pointer-events: none;
}

.dg-tile-value {
  fill: var(--ink-2);
  font-size: 11px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}

/* The history of a repository: a lane for each branch, a dot for each commit; a merge is a ring. */
.dg-edge.dg-lane > path:first-child {
  stroke-width: 1.75;
}

.dg-commit {
  fill: rgb(var(--tone));
  stroke: var(--chat-bg);
  stroke-width: 2;
}

.dg-commit.is-merge {
  fill: var(--chat-bg);
  stroke: rgb(var(--tone));
  stroke-width: 1.75;
}

.dg-row-name.is-quiet {
  fill: var(--ink-3);
}

.dg-tag rect {
  fill: rgba(var(--fg-rgb), 0.08);
}

.dg-tag text {
  fill: var(--ink-2);
  font-size: 11px;
  font-weight: 600;
}

.dg-tag.is-branch rect {
  fill: none;
  stroke: rgba(var(--tone), 0.75);
}

/* Cells of an algorithm: small plates in a row, the marked ones in the accent; a pointer is a stroke and a name. */
.dg-acell {
  fill: rgba(var(--fg-rgb), 0.055);
}

.dg-acell.is-lit {
  fill: rgba(var(--tone), 0.2);
  stroke: rgba(var(--tone), 0.75);
}

.dg-acell-text {
  fill: var(--ink);
  font-family: var(--mono-font);
  font-size: 12px;
  font-weight: 400;
  pointer-events: none;
}

.dg-apoint {
  stroke: rgb(var(--tone));
  stroke-width: 1.5;
  stroke-linecap: round;
}

.dg-apoint-name {
  fill: var(--ink-2);
  font-family: var(--mono-font);
  font-size: 11px;
  font-weight: 400;
}

/* A knockout: who went through is ink, who went out steps back. */
.dg-team {
  fill: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
}

.dg-score {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dg-team.is-out,
.dg-score.is-out {
  fill: var(--ink-3);
}

.dg-edge.dg-tie > path:first-child {
  stroke: rgba(var(--fg-rgb), 0.2);
  stroke-width: 1;
  stroke-linejoin: round;
}

/* How a thing stands, said by colour and by a sign: the dot before a value, the count over a list of checks. */
.dg-state {
  fill: var(--ink-3);
}

.dg-state.is-good {
  fill: rgb(var(--success-rgb));
}

.dg-state.is-warn {
  fill: rgb(var(--warn-rgb));
}

.dg-state.is-bad {
  fill: rgb(var(--danger-rgb));
}

.dg-state.is-open {
  fill: none;
  stroke: var(--ink-3);
  stroke-width: 1.25;
}

/* Food: a ring for the day's energy over its faint track, then what it is made of. */
.dg-slice.is-track {
  stroke: rgba(var(--fg-rgb), 0.09);
}

.dg-value.is-over {
  fill: rgb(var(--danger-rgb));
}

/* A list of checks: the mark of each row says how it stands, in a colour and a sign of its own. */
.dg-check-mark {
  fill: var(--chat-bg);
  stroke: rgba(var(--fg-rgb), 0.24);
  stroke-width: 1.25;
}

.dg-check-mark.is-good {
  fill: rgba(var(--success-rgb), 0.14);
  stroke: rgba(var(--success-rgb), 0.7);
}

.dg-check-mark.is-warn {
  fill: rgba(var(--warn-rgb), 0.14);
  stroke: rgba(var(--warn-rgb), 0.75);
}

.dg-check-mark.is-bad {
  fill: rgba(var(--danger-rgb), 0.14);
  stroke: rgba(var(--danger-rgb), 0.7);
}

.dg-wf-glyph.dg-check-icon path {
  stroke-width: 2;
}

.dg-wf-glyph.dg-check-icon.is-good path {
  stroke: rgb(var(--success-rgb));
}

.dg-wf-glyph.dg-check-icon.is-warn path {
  stroke: rgb(var(--warn-rgb));
}

.dg-wf-glyph.dg-check-icon.is-bad path {
  stroke: rgb(var(--danger-rgb));
}

.dg-wf-glyph.dg-check-icon.is-ask path {
  stroke: var(--ink-2);
}

/* What a value was, before the arrow to what it is now. */
.dg-was {
  fill: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dg-edge.dg-turn > path:first-child {
  stroke: rgba(var(--fg-rgb), 0.34);
  stroke-width: 1.25;
}

.dg-edge.dg-turn > path:last-child {
  fill: rgba(var(--fg-rgb), 0.46);
}

/* The parts of a paper: their numbers stand in a column, the parts of a part hang on a rail. */
.dg-outline-mark {
  fill: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dg-outline-mark.is-head {
  fill: var(--ink-2);
}

.dg-outline-dot {
  fill: var(--ink-3);
}

.dg-wf-glyph.is-sheet path {
  stroke: rgb(var(--tone));
  stroke-width: 1.5;
}

/* Matches: the hour in its own column, the two sides facing each other across the score. */
.dg-match-time {
  fill: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dg-row-total.is-quiet {
  fill: var(--ink-3);
}

/* Languages: a word of a sentence over a rule that ties it to what it means; the rule of the word to look at
   takes the colour. In a table of forms the part that changes is strong and underlined in it. */
.dg-gloss-word {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.dg-gloss-means {
  fill: var(--ink-2);
  font-size: 12.5px;
  font-weight: 500;
}

.dg-gloss-rule {
  stroke: rgba(var(--fg-rgb), 0.2);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.dg-gloss-rule.is-key {
  stroke: rgb(var(--tone));
  stroke-width: 2;
}

.dg-form {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

.dg-form-end {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.dg-form-rule {
  stroke: rgb(var(--tone));
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Cooking: a row of dots leads from what goes in to how much of it, as on a menu. */
.dg-leader {
  stroke: rgba(var(--fg-rgb), 0.26);
  stroke-width: 1.25;
  stroke-dasharray: 0.1 4;
  stroke-linecap: round;
}

/* Devices: a switch drawn as it should stand, or the value to choose on a small plate. */
.dg-toggle {
  fill: rgba(var(--fg-rgb), 0.1);
  stroke: rgba(var(--fg-rgb), 0.22);
  stroke-width: 1;
}

.dg-toggle.is-on {
  fill: rgb(var(--tone));
  stroke: none;
}

.dg-toggle-knob {
  fill: rgba(var(--fg-rgb), 0.5);
}

.dg-toggle-knob.is-on {
  fill: #fff;
}

.dg-set-value rect {
  fill: rgba(var(--fg-rgb), 0.07);
}

.dg-set-value text {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Travel: the line of the way from stop to stop; where it starts and where it ends are rings. */
.dg-route-rail {
  stroke: rgba(var(--tone), 0.6);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.dg-route-stop {
  fill: rgb(var(--tone));
}

.dg-route-stop.is-end {
  fill: var(--chat-bg);
  stroke: rgb(var(--tone));
  stroke-width: 2;
}

.dg-route-leg {
  fill: var(--ink-3);
  font-size: 11.5px;
  font-weight: 500;
}

/* Prices: candles in the two colours a rise and a fall always have. */
.dg-candle,
.dg-vol {
  transition: opacity 0.2s ease;
}

.dg-wick {
  stroke: rgb(var(--c));
  stroke-width: 1;
}

.dg-candle-body {
  fill: rgb(var(--c));
}

.dg-vol {
  fill: rgba(var(--c), 0.28);
}

.dg-svg.is-probing .dg-candle:not(.is-hot),
.dg-svg.is-probing .dg-vol:not(.is-hot) {
  opacity: 0.35;
}

.dg-last {
  stroke: rgba(var(--c), 0.7);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.dg-last-tag rect {
  fill: rgb(var(--c));
}

.dg-last-tag text {
  fill: var(--chat-bg);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.dg-price {
  fill: var(--ink);
  font-size: 24px;
  font-weight: 650;
}

.dg-change {
  fill: rgb(var(--c));
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A history along a hairline. */
.dg-bracket {
  stroke: rgba(var(--fg-rgb), 0.12);
}

.dg-axis-line {
  stroke: var(--rule);
  stroke-width: 1;
}

.dg-period {
  fill: var(--ink);
  font-size: 13px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.dg-event {
  fill: var(--ink-2);
  font-size: 12.5px;
  font-weight: 450;
}

.dg-event.is-lead {
  fill: var(--ink);
}

.dg-tl-dot {
  fill: var(--chat-bg);
  stroke: rgb(var(--tone));
  stroke-width: 1.5;
}

/* A plan in time: thin bars. What is under way is full, what is ahead is lighter, what is done turns grey. */
.dg-sep {
  stroke: var(--hair);
}

.dg-task {
  fill: rgba(var(--tone), 0.6);
  transition: fill 0.2s ease;
}

.dg-task.is-crit {
  --tone: var(--danger-rgb);
  fill: rgba(var(--tone), 0.85);
}

.dg-task.is-active,
.dg-task.is-hot {
  fill: rgb(var(--tone));
}

.dg-task.is-done {
  fill: rgba(var(--fg-rgb), 0.2);
}

.dg-task.is-milestone {
  fill: var(--ink);
  stroke: var(--chat-bg);
  stroke-width: 2;
}

.dg-task-name {
  fill: var(--ink);
  font-size: 12.5px;
  font-weight: 500;
}

.dg-task-name.is-done {
  fill: var(--ink-3);
}

.dg-task-meta {
  fill: var(--ink-3);
  font-size: 11px;
  font-weight: 450;
  font-variant-numeric: tabular-nums;
}

.dg-today {
  stroke: rgb(var(--danger-rgb));
  stroke-width: 1;
}

.dg-today-tag {
  fill: rgb(var(--danger-rgb));
}

/* Two axes and four corners. */
.dg-quad {
  fill: rgba(var(--fg-rgb), 0.035);
}

.dg-quad-axis {
  stroke: var(--rule);
}

.dg-quad-label.is-lead {
  fill: var(--ink-2);
}

.dg-q-point {
  fill: rgb(var(--tone));
  stroke: var(--chat-bg);
  stroke-width: 2;
  transition: r 0.25s var(--motion-easing);
}

.dg-q-point.is-hot {
  r: 6px;
}

.dg-q-name {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

/* A web of criteria. */
.dg-radar-grid {
  fill: none;
  stroke: var(--hair);
}

.dg-radar-grid.is-outer {
  stroke: var(--rule);
}

.dg-radar-spoke {
  stroke: var(--hair);
}

.dg-radar-axis {
  fill: var(--ink-2);
  font-size: 12px;
  font-weight: 500;
}

.dg-radar-curve {
  fill: rgba(var(--tone), 0.1);
  stroke: rgb(var(--tone));
  stroke-width: 1.5;
  stroke-linejoin: round;
  transition: fill 0.25s ease;
}

.dg-radar-curve:hover {
  fill: rgba(var(--tone), 0.22);
}

/* Who says what to whom. */
.dg-life {
  stroke: rgba(var(--fg-rgb), 0.12);
  stroke-width: 1;
}

.dg-edge.dg-message > path:first-child {
  stroke: rgba(var(--fg-rgb), 0.46);
}

.dg-edge.dg-message > .dg-head {
  fill: rgba(var(--fg-rgb), 0.62);
}

.dg-message-label {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

.dg-badge circle {
  fill: var(--chat-bg);
  stroke: rgba(var(--fg-rgb), 0.3);
}

.dg-badge text {
  fill: var(--ink-2);
  font-size: 10px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.dg-note rect {
  fill: var(--plate);
}

.dg-note text {
  fill: var(--ink-2);
  font-size: 12px;
  font-weight: 450;
}

.dg-frame > rect {
  fill: none;
  stroke: rgba(var(--fg-rgb), 0.14);
}

.dg-frame-label {
  fill: var(--ink-2);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0;
}

.dg-divider {
  stroke: rgba(var(--fg-rgb), 0.14);
  stroke-dasharray: 3 3;
}

.dg-wf-window {
  fill: color-mix(in srgb, rgb(var(--fg-rgb)) 3%, var(--chat-bg));
  stroke: rgba(var(--fg-rgb), 0.1);
  stroke-width: 1;
}

.dg-wf-window.is-phone {
  stroke: rgba(var(--fg-rgb), 0.18);
  stroke-width: 1.5;
}

.dg-wf-light {
  fill: rgba(var(--fg-rgb), 0.13);
}

.dg-wf-address {
  fill: rgba(var(--fg-rgb), 0.05);
}

.dg-wf-island {
  fill: #000;
  stroke: rgba(var(--fg-rgb), 0.06);
}

.dg-wf-battery {
  fill: none;
  stroke: rgba(var(--fg-rgb), 0.45);
}

.dg-wf-charge,
.dg-wf-home {
  fill: rgba(var(--fg-rgb), 0.6);
}

.dg-wf-rule {
  stroke: rgba(var(--fg-rgb), 0.08);
  stroke-width: 1;
}

.dg-wf-rule.is-step {
  stroke: rgba(var(--fg-rgb), 0.16);
}

.dg-wf-glyph path {
  fill: none;
  stroke: rgba(var(--fg-rgb), 0.55);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dg-wf-glyph.is-media path {
  stroke: rgba(var(--fg-rgb), 0.24);
  stroke-width: 1.4;
}

.dg-wf-glyph.is-icon path {
  stroke: var(--fg-primary);
  stroke-width: 1.6;
}

.dg-wf-glyph.is-check path {
  stroke: var(--fg-secondary);
  stroke-width: 1.8;
}

.dg-wf-glyph.is-lock path {
  stroke: rgba(var(--fg-rgb), 0.4);
  stroke-width: 2;
}

.dg-wf-mark {
  fill: rgba(var(--fg-rgb), 0.82);
}

.dg-wf-strong {
  fill: rgba(var(--fg-rgb), 0.92);
}

.dg-wf-strong.is-soft {
  fill: var(--fg-primary);
}

.dg-wf-text {
  fill: var(--fg-secondary);
}

.dg-wf-muted {
  fill: var(--fg-tertiary);
}

.dg-wf-on {
  fill: var(--chat-bg);
}

.dg-wf-logo {
  fill: rgba(var(--fg-rgb), 0.3);
}

.dg-wf-quote {
  fill: rgba(var(--fg-rgb), 0.2);
}

.dg-wf-btn {
  fill: none;
  stroke: rgba(var(--fg-rgb), 0.22);
  stroke-width: 1;
}

.dg-wf-btn.is-primary {
  fill: rgba(var(--fg-rgb), 0.92);
  stroke: none;
}

.dg-wf-skel {
  fill: rgba(var(--fg-rgb), 0.08);
}

.dg-wf-skel.is-on {
  fill: color-mix(in srgb, var(--chat-bg) 30%, transparent);
}

.dg-wf-media {
  fill: rgba(var(--fg-rgb), 0.05);
}

.dg-wf-card {
  fill: rgba(var(--fg-rgb), 0.028);
  stroke: rgba(var(--fg-rgb), 0.07);
  stroke-width: 1;
}

.dg-wf-card.is-featured {
  fill: rgba(var(--fg-rgb), 0.045);
  stroke: rgba(var(--fg-rgb), 0.5);
  stroke-width: 1;
}

.dg-wf-icon {
  fill: rgba(var(--fg-rgb), 0.07);
}

.dg-wf-avatar {
  fill: rgba(var(--fg-rgb), 0.1);
}

.dg-wf-step {
  fill: color-mix(in srgb, rgb(var(--fg-rgb)) 6%, var(--chat-bg));
  stroke: rgba(var(--fg-rgb), 0.16);
  stroke-width: 1;
}

.dg-wf-pill {
  fill: rgba(var(--fg-rgb), 0.08);
}

.dg-wf-pill-text {
  fill: var(--fg-secondary);
}

.dg-wf-banner {
  fill: rgba(var(--fg-rgb), 0.045);
}

.dg-wf-input {
  fill: rgba(var(--fg-rgb), 0.025);
  stroke: rgba(var(--fg-rgb), 0.13);
  stroke-width: 1;
}

.dg-wf-band {
  fill: rgba(var(--tone), 0);
  stroke: rgba(var(--tone), 0);
  stroke-width: 1;
  transition: fill 0.25s ease, stroke 0.25s ease;
}

.dg-wf-band.is-hot {
  fill: rgba(var(--tone), 0.035);
  stroke: rgba(var(--tone), 0.4);
}

.dg-wf-sectag {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.dg-wf-sectag.is-hot {
  opacity: 1;
}

.dg-wf-sectag rect {
  fill: rgb(var(--tone));
}

.dg-wf-sectag text {
  fill: var(--chat-bg);
  font-size: 11px;
  font-weight: 600;
}

/* Files: a folder as a card in the column, like a file attachment. One line with the folder, where it is and what it
   holds; a thin line of the kinds inside, in the colors of their icons (--ft); then a quiet row for each entry. */
.dg-fv-card {
  fill: var(--composer-bg);
  stroke: var(--composer-border);
  stroke-width: 1;
}

.dg-fv-folder {
  color: var(--fg-secondary);
}

.dg-svg .dg-fv-folder .folder-front {
  d: path("M38 53L82 53L82 72A4 4 0 0 1 78 76L42 76A4 4 0 0 1 38 72Z");
}

.dg-fv-title {
  fill: var(--fg-primary);
  font-size: 14px;
  font-weight: 650;
}

.dg-fv-path {
  fill: rgba(var(--fg-rgb), 0.38);
  font-size: 12px;
  font-weight: 500;
}

.dg-fv-total {
  fill: var(--fg-primary);
  font-size: 12.5px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

.dg-fv-sum {
  fill: var(--fg-secondary);
  font-size: 12.5px;
  font-weight: 500;
}

.dg-fv-seg {
  fill: rgb(var(--ft));
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.dg-svg:has(.dg-fv-seg.is-hot) .dg-fv-seg:not(.is-hot) {
  opacity: 0.3;
}

[data-theme="light"] .dg-fv-seg {
  fill: color-mix(in oklab, rgb(var(--ft)) 85%, black);
}

/* A row catches the pointer across its whole width; the highlight itself is one for all rows and glides between them. */
.dg-fv-hit {
  fill: transparent;
}

.dg-glide {
  fill: rgba(var(--fg-rgb), 0.05);
  opacity: 0;
  pointer-events: none;
}

.dg-fv-name {
  fill: var(--fg-primary);
  font-size: 13.5px;
  font-weight: 500;
}

.dg-fv-note,
.dg-fv-date,
.dg-fv-count,
.dg-fv-more {
  fill: rgba(var(--fg-rgb), 0.4);
  font-size: 12px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.dg-fv-size {
  fill: var(--fg-secondary);
  font-size: 12.5px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
}

.dg-fv-rule {
  stroke: rgba(var(--fg-rgb), 0.06);
  stroke-width: 1;
}

.dg-fv-guide {
  stroke: rgba(var(--fg-rgb), 0.09);
  stroke-width: 1.2;
  stroke-linecap: round;
}

.thread-bottom {
  --icon-button-size: 36px;
  --icon-size: 17px;
  --icon-rgb: var(--fg-rgb);
  --icon-opacity: 0.8;
  --icon-hover-opacity: 1;
  position: absolute;
  z-index: 3;
  bottom: calc(var(--composer-space, 140px) + 14px);
  left: 50%;
  translate: -50% 0;
  background: var(--glass-fill), var(--lens-bg);
  -webkit-backdrop-filter: var(--glass-lens,) blur(3px) saturate(1.6) brightness(1.05);
  backdrop-filter: var(--glass-lens,) blur(3px) saturate(1.6) brightness(1.05);
  opacity: 0;
  transform: translateY(10px) scale(0.6);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.4s var(--motion-easing), visibility 0s linear 0.4s, filter 0.45s var(--motion-easing);
}

.thread-bottom.is-shown {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease, transform 0.5s cubic-bezier(0.34, 1.5, 0.64, 1), visibility 0s, filter 0.45s var(--motion-easing);
}

.is-veiled .thread-bottom {
  filter: var(--veil);
}
.main.is-empty::after {
  flex-grow: 1;
}

/* Over a locked chat: frost in the chat's own color, the padlock, one line of big type and «View chat», which the field
   for the password grows out of, the way Notes shows a locked note. */
.lock-screen {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  border-radius: inherit;
}

.lock-screen[hidden] {
  display: none;
}

/* At rest the frost is just the chat's color; while the chat locks or opens, lock-ui.js blurs whatever lies under it. */
.lock-frost {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--chat-bg);
}

.lock-screen-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(460px, 100%);
  margin-bottom: 5vh;
  text-align: center;
}

/* The padlock, drawn in thin lines like the system's symbols: bare, in the card and on a locked chat alike. */
.seal {
  --seal: 64px;
  position: relative;
  display: block;
  flex: none;
  width: var(--seal);
  height: var(--seal);
}

/* The padlock is drawn in thin lines; how thin is set where it stands, in the symbol's own units. */
.seal-symbol {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--seal-stroke, 3.6);
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--seal-ink);
}

/* The shackle's legs meet the body; it lifts and turns about its left leg to open. */
.seal-shackle {
  transform-box: view-box;
  transform-origin: 23px 30px;
}

/* A padlock on its way between places, over everything. */
.seal-flyer {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* The list's small padlock, which a flying one turns into or out of, drawn to the same size. */
.seal-outline {
  position: absolute;
  top: 3.125%;
  left: 3.125%;
  width: 93.75%;
  height: 93.75%;
  color: rgba(var(--fg-rgb), 0.85);
  opacity: 0;
}

.seal-outline .glyph {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* On a locked chat the padlock is as thin in its lines as the title in its strokes. */
.lock-screen-seal {
  --seal: 64px;
  --seal-stroke: 2.1;
  margin-bottom: 20px;
}

.lock-screen-title {
  margin: 0;
  color: var(--fg-primary);
  font-family: "OpenGhost Display", var(--font);
  font-size: 26px;
  font-weight: 640;
  line-height: 32px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

/* A title's words keep together while each of their letters rises on its own. */
.lock-word {
  display: inline-block;
  white-space: nowrap;
}

.lock-letter {
  display: inline-block;
}

/* One line under the title says what to do, or what went wrong; the two cross over through a blur. */
.lock-say {
  display: grid;
  margin-top: 8px;
}

.lock-say > * {
  grid-area: 1 / 1;
  margin: 0;
  color: var(--fg-secondary);
  font-size: 13.5px;
  line-height: 19px;
  text-wrap: balance;
  transition: opacity 0.3s ease, filter 0.35s ease, transform 0.5s var(--motion-easing), color 0.3s ease;
}

.lock-say.is-alt .lock-say-text {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-6px);
}

.lock-say-alt {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(6px);
}

.lock-say.is-alt .lock-say-alt {
  opacity: 1;
  filter: none;
  transform: none;
}

.lock-say.is-wrong .lock-say-alt {
  color: rgba(var(--danger-rgb), 0.95);
}

/* Under the title: «View chat», and in its place, once pressed, the field; a line under that for what went wrong. */
.lock-entry {
  position: relative;
  width: min(280px, 100%);
  margin-top: 20px;
}

.lock-screen:not(.is-asking) .lock-screen-form {
  visibility: hidden;
}

.lock-view {
  position: absolute;
  top: 5px;
  right: 0;
  left: 0;
  width: fit-content;
  height: 34px;
  margin: 0 auto;
  padding: 0 16px;
  border: 0;
  border-radius: 17px;
  outline: none;
  background: transparent;
  color: var(--fg-primary);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.25s var(--motion-easing);
}

.lock-view:hover {
  background: rgba(var(--fg-rgb), 0.07);
}

.lock-view:active {
  transform: scale(0.96);
}

.lock-view:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.lock-screen.is-asking .lock-view {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.lock-screen-error {
  min-height: 18px;
  margin: 10px 0 0;
  color: rgba(var(--danger-rgb), 0.95);
  font-size: 13px;
  line-height: 18px;
  opacity: 0;
  filter: blur(3px);
  transform: translateY(-4px);
  transition: opacity 0.25s ease, filter 0.3s ease, transform 0.4s var(--motion-easing);
}

.lock-screen-error.is-shown {
  opacity: 1;
  filter: none;
  transform: none;
}

/* A capsule for the password. The dots, the caret and the arrow are the field's own. */
.pass {
  position: relative;
  height: 44px;
  border-radius: 22px;
  background: var(--pass-bg);
  box-shadow: inset 0 0 0 0.5px var(--pass-edge), var(--pass-lift);
  cursor: text;
  transition: background-color 0.25s ease, box-shadow 0.3s ease;
}

.pass:focus-within {
  background: var(--pass-focus-bg);
  box-shadow: inset 0 0 0 0.5px var(--pass-focus-edge), var(--pass-lift);
}

.pass-input {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 52px 0 20px;
  border: 0;
  border-radius: inherit;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font: inherit;
  font-size: 15px;
}

.pass-input::selection {
  background: transparent;
  color: transparent;
}

.pass-dots {
  position: absolute;
  inset: 0 52px 0 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
  pointer-events: none;
}

.pass-track {
  flex: none;
  display: flex;
  align-items: center;
  transition: transform 0.3s var(--motion-easing);
}

.pass-dot {
  flex: none;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: var(--fg-primary);
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.pass-dot.is-selected {
  background: rgb(var(--selection-rgb));
  box-shadow: 0 0 0 2.5px rgba(var(--selection-rgb), 0.28);
}

.pass-caret {
  flex: none;
  width: 1.5px;
  height: 18px;
  border-radius: 1px;
  background: var(--fg-primary);
  opacity: 0;
}

.pass:focus-within .pass-caret {
  animation: pass-blink 1.1s steps(1) infinite;
}

@keyframes pass-blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* The hint stands in the middle of the empty field, the way the login window's does, and steps aside for the first character. */
.pass-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 48px;
  color: var(--fg-tertiary);
  font-size: 14px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.pass-dots:not(.is-empty) ~ .pass-hint {
  opacity: 0;
}

/* The arrow comes in with the first character and turns into a spinner while the password is being checked. */
.pass-go {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: rgb(var(--composer-accent-rgb));
  color: rgb(var(--composer-on-accent-rgb));
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.pass-go > * {
  grid-area: 1 / 1;
}

.pass-go:disabled {
  opacity: 0;
  transform: scale(0.4);
  pointer-events: none;
}

.pass-go:not(:disabled):active {
  transform: scale(0.9);
}

.pass-go:focus-visible {
  box-shadow: 0 0 0 2px var(--chat-bg), 0 0 0 4px var(--focus-ring);
}

.pass-go .glyph {
  width: 16px;
  height: 16px;
  transition: opacity 0.2s ease, transform 0.35s var(--motion-easing);
}

.pass-spin {
  width: 14px;
  height: 14px;
  border: 1.75px solid rgba(var(--composer-on-accent-rgb), 0.22);
  border-top-color: rgb(var(--composer-on-accent-rgb));
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.4);
  transition: opacity 0.2s ease, transform 0.35s var(--motion-easing);
}

.is-checking .pass-go .glyph,
.is-busy .pass-go .glyph {
  opacity: 0;
  transform: scale(0.4);
}

.is-checking .pass-spin,
.is-busy .pass-spin {
  opacity: 1;
  transform: none;
  animation: pass-spin 0.8s linear infinite;
}

@keyframes pass-spin {
  to {
    rotate: 360deg;
  }
}

/* The password beside a chat in the list, in the manner of the effort's stage (lock-ui.js): a capsule grown out of the chat's
   lock button holds the padlock and the field, the step stands over it in large type with a line under it, and a soft patch
   of the selection's veil stands behind. */
.lock-card {
  position: fixed;
  inset: auto;
  width: 320px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: none;
  color: var(--fg-primary);
}

.lock-veil {
  position: absolute;
  z-index: -1;
  mask-composite: intersect;
  transition: left 0.5s var(--motion-easing), top 0.5s var(--motion-easing), width 0.5s var(--motion-easing), height 0.5s var(--motion-easing);
}

.lock-card-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.lock-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: max-content;
  max-width: 400px;
  margin: 0 0 16px;
  padding: 0 14px;
}

.lock-card-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The steps stack in one line while one leaves and the next arrives. */
.lock-card-title {
  position: relative;
  height: 1.1em;
  color: rgb(var(--composer-accent-rgb));
  font-family: "OpenGhost Display", var(--font);
  font-size: clamp(26px, 2.6vw, 34px);
  line-height: 1.1;
}

/* Room for two lines, so the capsule stays where it is whatever the line says. */
.lock-card .lock-say {
  min-height: 34px;
  margin: 0;
  align-items: start;
}

.lock-card .lock-say > * {
  max-width: 320px;
  color: rgba(var(--fg-rgb), 0.55);
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
}

.lock-card .lock-say.is-wrong .lock-say-alt {
  color: rgba(var(--danger-rgb), 0.95);
}

/* The capsule is the effort's: it holds the padlock, and the field or what can be done with the password. */
.lock-capsule {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 48px;
  padding: 5px;
}

.lock-card:not(.is-set) .lock-capsule {
  width: max-content;
}

.lock-shell {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--composer-bg);
  box-shadow: inset 0 0 0 1px var(--composer-border), 0 18px 48px rgba(0, 0, 0, calc(0.45 * var(--shadow)));
  pointer-events: none;
  transition: box-shadow 0.3s ease;
}

.lock-capsule:focus-within .lock-shell {
  box-shadow: inset 0 0 0 1px var(--pass-focus-edge), 0 18px 48px rgba(0, 0, 0, calc(0.45 * var(--shadow)));
}

.lock-card .seal {
  --seal: 38px;
  --seal-stroke: 3.4;
  z-index: 1;
}

.lock-card-form {
  position: relative;
  flex: 1;
  min-width: 0;
}

/* The field is the capsule itself: no box of its own, the dots start right after the padlock. */
.lock-card .pass,
.lock-card .pass:focus-within {
  height: 38px;
  border-radius: 19px;
  background: transparent;
  box-shadow: none;
}

.lock-card .pass-input {
  padding: 0 44px 0 6px;
  font-size: 14px;
}

.lock-card .pass-dots {
  inset: 0 44px 0 6px;
}

.lock-card .pass-dot {
  width: 7px;
  height: 7px;
  margin-right: 6px;
}

.lock-card .pass-caret {
  height: 17px;
}

/* The hint starts just after the caret, the way a field's own does. */
.lock-card .pass-hint {
  justify-items: start;
  padding: 0 44px 0 10px;
  font-size: 14px;
}

.lock-card .pass-go {
  top: 3px;
  right: 3px;
}

.lock-card-note {
  max-width: 300px;
  margin: 12px 14px 0;
  color: var(--fg-tertiary);
  font-size: 11.5px;
  line-height: 16px;
  text-wrap: balance;
}

/* On a chat that has a password: lock it now, or take the password off. The second asks again before it goes. */
.lock-actions {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}

.lock-act {
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 19px;
  outline: none;
  background: transparent;
  color: var(--fg-secondary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.25s var(--motion-easing);
}

.lock-act.is-primary {
  color: rgb(var(--composer-accent-rgb));
}

.lock-act:hover,
.lock-act:focus-visible {
  background: rgba(var(--fg-rgb), 0.07);
  color: var(--fg-primary);
}

.lock-act:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus-ring);
}

.lock-act:active {
  transform: scale(0.96);
}

.lock-act.is-confirming {
  background: rgba(var(--danger-rgb), 0.14);
  color: rgb(var(--danger-rgb));
}

.lock-divider {
  flex: none;
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: rgba(var(--fg-rgb), 0.1);
}

.sidebar-toggle {
  position: absolute;
  z-index: 3;
  top: var(--toggle-inset);
  left: var(--toggle-inset);
}

.composer {
  position: relative;
  z-index: 2;
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(var(--composer-max-width), 100% - 2 * var(--composer-side-gap));
  margin: 0 auto var(--composer-bottom-gap);
  padding: 13px 14px 10px;
  background: var(--composer-bg);
  border-radius: var(--composer-radius);
  box-shadow: inset 0 0 0 1px var(--composer-border), 0 14px 40px rgba(0, 0, 0, calc(0.35 * var(--shadow)));
  font-size: var(--composer-font-size);
  line-height: var(--composer-line-height);
  cursor: text;
  transition:
    margin-top var(--motion-duration) var(--motion-easing),
    margin-bottom var(--motion-duration) var(--motion-easing),
    filter 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

/* While a piece of a reply is selected the composer steps back with the feed, with the same blur and dimming as the veil. */
.is-veiled > .composer {
  filter: var(--veil);
  transition:
    margin-top var(--motion-duration) var(--motion-easing),
    margin-bottom var(--motion-duration) var(--motion-easing),
    filter 0.52s var(--motion-easing);
}

.main.is-empty .composer {
  margin-top: var(--welcome-space);
  margin-bottom: 0;
}

.composer-folder {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px 0 10px;
  overflow: hidden;
  border: 0;
  border-radius: 16px;
  outline: none;
  background: var(--composer-bg);
  box-shadow: inset 0 0 0 1px var(--composer-border), 0 8px 24px rgba(0, 0, 0, calc(0.25 * var(--shadow)));
  color: var(--fg-primary);
  font: inherit;
  font-size: var(--small-font-size);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, opacity 0.3s ease 0.1s, transform 0.55s var(--motion-easing) 0.05s, visibility 0s;
}

.composer-folder:hover {
  background: var(--control-hover-bg);
}

.composer-folder:focus-visible {
  box-shadow: inset 0 0 0 1px var(--composer-border), 0 0 0 2px var(--focus-ring);
}

.main:not(.is-empty) .composer-folder {
  opacity: 0;
  transform: translateY(10px) scale(0.94);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.35s var(--motion-easing), visibility 0s linear 0.35s;
}

.composer-folder-icons {
  position: relative;
  flex: none;
  width: 17px;
  height: 17px;
  color: rgba(var(--fg-rgb), 0.62);
  transition: color 0.2s ease;
}

.composer-folder:hover .composer-folder-icons {
  color: rgba(var(--fg-rgb), 0.9);
}

.composer-folder-icons .glyph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* Without a folder the pill shows the chats, where the new chat will go, and under the pointer turns into what it does:
   a folder with a plus. With a folder picked it shows that folder. */
.composer-folder-icons .glyph-folder-add,
.composer-folder-icons .glyph-folder,
.composer-folder.is-picked .composer-folder-icons .glyph-bubble,
.composer-folder:is(:hover, :focus-visible) .composer-folder-icons .glyph-bubble {
  opacity: 0;
  transform: scale(0.6);
}

.composer-folder:not(.is-picked):is(:hover, :focus-visible) .composer-folder-icons .glyph-folder-add,
.composer-folder.is-picked .composer-folder-icons .glyph-folder {
  opacity: 1;
  transform: none;
}

.composer-folder-label {
  position: relative;
  display: block;
  max-width: 280px;
  line-height: 1.5;
}

.composer-folder-text {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: inherit;
}

.composer-folder-ghosts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.composer-folder-char {
  position: relative;
  animation: composer-folder-char 220ms cubic-bezier(0.33, 1, 0.68, 1) both;
}

@keyframes composer-folder-char {
  from {
    opacity: 0;
    top: 0.35em;
    filter: blur(2px);
  }
}

.composer-folder-ghost {
  position: absolute;
  line-height: 1.5;
  white-space: pre;
  animation: composer-ghost-out 240ms cubic-bezier(0.3, 0.7, 0.4, 1) both;
}

@property --welcome-wipe {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -40%;
}

.welcome {
  --welcome-height: calc(var(--welcome-size) * 70 / 64);
  position: absolute;
  z-index: 1;
  top: calc((100% - var(--composer-space, 140px) + var(--composer-bottom-gap) - var(--welcome-space)) / 2);
  left: calc(50% - var(--welcome-size) / 2);
  width: var(--welcome-size);
  height: var(--welcome-height);
  opacity: 0;
  transform: translateY(14px) scale(0.6);
  filter: blur(8px);
  pointer-events: none;
}

.welcome.is-shown,
.welcome.is-flying {
  opacity: 1;
  transform: none;
  filter: none;
}

.welcome.is-shown {
  transition:
    opacity 0.45s ease 0.15s,
    transform 0.9s cubic-bezier(0.34, 1.45, 0.64, 1) 0.15s,
    filter 0.5s ease 0.15s;
}

.welcome.is-leaving {
  --welcome-wipe: 100%;
  transform: translateY(-26px) scale(0.9);
  filter: blur(6px);
  mask-image: linear-gradient(to top, transparent var(--welcome-wipe), #000 calc(var(--welcome-wipe) + 40%));
  transition: opacity 0.45s ease, transform 0.52s var(--motion-easing), filter 0.45s ease, --welcome-wipe 0.5s ease-out;
}

.welcome-flight,
.welcome ghost-thinking {
  width: 100%;
  height: 100%;
}

.is-splash .welcome {
  visibility: hidden;
}

@media (max-height: 540px) {
  .welcome {
    display: none;
  }

  .main.is-empty .composer {
    margin-top: var(--folder-space);
  }
}

.composer-field {
  position: relative;
  overflow-x: visible;
  overflow-y: clip;
}

.composer-mirror {
  position: absolute;
  inset: 0;
  overflow: hidden;
  padding: 0 6px;
  color: var(--fg-primary);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  pointer-events: none;
}

.composer-hidden {
  color: transparent;
}

.composer-link {
  --link-size: 14px;
  position: relative;
  isolation: isolate;
  display: inline-block;
  color: rgb(var(--fg-rgb));
}

.composer-link::before {
  content: "";
  position: absolute;
  inset: 1px 0;
  z-index: -1;
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.11);
}

.composer-link::after {
  content: attr(data-label);
  position: absolute;
  top: 50%;
  left: calc(var(--pad) + 20px);
  font-size: var(--link-size);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
  transform: translateY(-50%);
}

.composer-link > .link-chip-icon {
  position: absolute;
  top: 50%;
  left: var(--pad);
  margin: -7px 0 0;
}

.composer-link.is-new {
  animation: composer-link-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.composer-link > .composer-quote-icon {
  position: absolute;
  top: 50%;
  left: var(--pad);
  width: 14px;
  height: 14px;
  margin-top: -7px;
  color: rgba(var(--fg-rgb), 0.72);
}

.composer-quote-icon .glyph {
  display: block;
  width: 100%;
  height: 100%;
}

.composer-link-ghost {
  position: absolute;
  line-height: var(--composer-line-height);
  white-space: pre;
}

@keyframes composer-link-in {
  from {
    opacity: 0;
    transform: scale(0.86);
    filter: blur(3px);
  }
}

.composer-wave {
  position: relative;
}

.composer-ghosts {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.composer-ghost {
  position: absolute;
  line-height: normal;
  white-space: pre;
  animation: composer-ghost-out 240ms cubic-bezier(0.3, 0.7, 0.4, 1) both;
}

@keyframes composer-ghost-out {
  to {
    opacity: 0;
    transform: translateY(-0.35em) scale(0.92);
    filter: blur(2px);
  }
}

.composer-input {
  position: relative;
  z-index: 1;
  display: block;
  scrollbar-width: none;
  overscroll-behavior: contain;
  width: 100%;
  min-height: var(--composer-line-height);
  max-height: 40vh;
  margin: 0;
  padding: 0 6px;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: var(--fg-primary);
  font: inherit;
  resize: none;
  field-sizing: content;
}

.composer-input::selection {
  background: rgba(var(--selection-rgb), 0.3);
  color: transparent;
}

/* A text too long for the mirror shows in the field itself, letters and selection alike. */
.is-plain > .composer-input,
.is-plain > .composer-input::selection {
  color: var(--fg-primary);
}

.composer-input::-webkit-scrollbar {
  display: none;
}

.composer-placeholder {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  overflow: hidden;
  padding: 0 6px;
  color: rgb(var(--composer-fg-rgb));
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.composer-field.has-value .composer-placeholder,
.composer-field.is-clearing .composer-placeholder {
  opacity: 0;
  transition-duration: 0.2s;
}

.scrollbar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--scrollbar-hit-width);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.scrollbar.is-scrollable {
  opacity: 1;
  pointer-events: auto;
}

.scrollbar-thumb {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: var(--scrollbar-width);
  margin-inline: auto;
  border-radius: calc(var(--scrollbar-hover-width) / 2);
  background: var(--fg-tertiary);
  transition: width 0.2s ease, background-color 0.2s ease;
}

.scrollbar:hover .scrollbar-thumb,
.scrollbar.is-dragging .scrollbar-thumb {
  width: var(--scrollbar-hover-width);
  background: var(--fg-secondary);
}

.composer-scrollbar {
  z-index: 2;
  right: -11px;
}

.composer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.composer-tools {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.composer-mode {
  anchor-name: --mode;
  display: flex;
  align-items: center;
  gap: 7px;
  height: var(--composer-button-size);
  padding: 0 12px 0 10px;
  overflow: hidden;
  border: 0;
  border-radius: calc(var(--composer-button-size) / 2);
  outline: none;
  background: transparent;
  color: rgb(var(--composer-fg-rgb));
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, opacity 0.34s ease, filter 0.4s ease;
}

.composer-mode[hidden] {
  display: none;
}

.composer-mode:hover {
  background: rgba(var(--fg-rgb), 0.06);
  color: rgb(var(--composer-accent-rgb));
}

.composer-mode:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.composer-mode-icons {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.composer-mode[data-mode="full"] .composer-mode-icons {
  color: rgb(var(--warn-rgb));
}

.mode-icon .glyph {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.composer-mode-icons .mode-icon {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.6) rotate(-12deg);
  transition: opacity 0.22s ease, transform 0.45s cubic-bezier(0.34, 1.4, 0.64, 1);
}

.composer-mode[data-mode="ask"] .mode-icon[data-mode="ask"],
.composer-mode[data-mode="auto"] .mode-icon[data-mode="auto"],
.composer-mode[data-mode="full"] .mode-icon[data-mode="full"] {
  opacity: 1;
  transform: none;
}

/* A dock grown out of a composer button, in the manner of the effort's stage (dock.js): its choices as icons in a capsule,
   a glass lens over the one in focus, and above it that one's name in large type over a soft patch of the selection's veil.
   The first icon stands over the button's own glyph; the capsule is as tall as the effort's. */
.dock {
  position: fixed;
  position-area: top span-right;
  position-try-fallbacks: flip-block;
  inset: auto;
  margin: 0 0 10px;
  padding: 5px;
  overflow: visible;
  border: 0;
  background: none;
  color: var(--fg-primary);
  user-select: none;
}

/* The veil reaches only around the stage, as the effort's does: its edges (a mask from dock.js) fade into the app. Its box
   follows the name, so it widens with a long one. */
.dock-veil {
  position: absolute;
  z-index: -1;
  mask-composite: intersect;
  transition: left 0.5s var(--motion-easing), top 0.5s var(--motion-easing), width 0.5s var(--motion-easing), height 0.5s var(--motion-easing);
}

.dock-shell {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--composer-bg);
  box-shadow: inset 0 0 0 1px var(--composer-border), 0 18px 48px rgba(0, 0, 0, calc(0.45 * var(--shadow)));
  pointer-events: none;
}

.dock-row {
  position: relative;
  display: flex;
  align-items: center;
  height: 38px;
}

.dock-item {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 19px;
  outline: none;
  background: none;
  color: rgb(var(--composer-fg-rgb));
  cursor: pointer;
  transition: color 0.25s ease;
}

.dock-item[hidden],
.dock-divider[hidden],
.dock-dot[hidden] {
  display: none;
}

.dock-item.is-focus {
  color: rgb(var(--composer-accent-rgb));
}

.dock-item[data-tone="warn"] {
  color: rgb(var(--warn-rgb));
}

.dock-item[aria-disabled="true"] {
  cursor: default;
}

.dock-glyph {
  display: grid;
  width: 20px;
  height: 20px;
  transition: opacity 0.25s ease;
}

.dock-item[aria-disabled="true"] .dock-glyph {
  opacity: 0.32;
}

.dock-glyph .glyph {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* The glyphs drawn on the 60 grid, the modes' own, come in the same weight of line as the rest. */
.dock-glyph svg[viewBox="30 30 60 60"] {
  stroke-width: 4.6;
}

.dock-divider {
  flex: none;
  width: 1px;
  height: 18px;
  margin: 0 6px;
  background: rgba(var(--fg-rgb), 0.1);
}

/* The current choice, the way the Dock marks an open app: a small dot under it, which glides to a new one. */
.dock-dot {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(var(--composer-accent-rgb), 0.6);
  transition: translate 0.7s cubic-bezier(0.34, 1.25, 0.64, 1), background-color 0.3s ease;
}

.dock-dot.is-warn {
  background: rgb(var(--warn-rgb));
}

/* The lens over the icon in focus magnifies it. Over the light theme the glass keeps a thinner white, so what it holds stays
   dark enough to read. */
.dock-lens {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 0;
  opacity: 0;
  pointer-events: none;
}

[data-theme="light"] .dock-lens {
  --glass-fill: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.12) 55%, rgba(255, 255, 255, 0.26));
}

.dock:has(.dock-item:focus-visible) .dock-lens {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.dock-title {
  position: absolute;
  bottom: calc(100% + 16px);
  left: 14px;
  width: max-content;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: rgb(var(--composer-accent-rgb));
  pointer-events: none;
}

/* The words stack in one line while one leaves and the next arrives. */
.dock-word-box {
  position: relative;
  height: 1.1em;
  font-family: "OpenGhost Display", var(--font);
  font-size: clamp(28px, 2.9vw, 38px);
  line-height: 1.1;
}

.stage-word {
  position: absolute;
  bottom: 0;
  left: 0;
  font-weight: 560;
  letter-spacing: -0.022em;
  white-space: pre;
  text-shadow: 0 0 28px rgba(var(--glow-rgb), 0.22);
  transition: opacity 0.3s ease;
}

[data-theme="light"] .stage-word {
  text-shadow: 0 0 26px rgba(var(--glow-rgb), 0.08);
}

.stage-word.is-off {
  opacity: 0.45;
}

.stage-letter {
  display: inline-block;
}

/* Every line stands in the same place, so the box is as tall as the longest and the name above never moves. The old line is
   gone before the new one comes, so they never read on top of each other. */
.dock-hint-box {
  --hint-delay: 140ms;
  display: grid;
}

.dock-hint {
  grid-area: 1 / 1;
  max-width: 300px;
  color: rgba(var(--fg-rgb), 0.55);
  font-size: 13px;
  font-weight: 500;
  line-height: 17px;
  text-wrap: balance;
  opacity: 0;
  filter: blur(3px);
  translate: 0 5px;
  transition: opacity 0.2s ease, filter 0.2s ease, translate 0.2s ease;
}

.dock-hint.is-shown {
  opacity: 1;
  filter: blur(0);
  translate: none;
  transition: opacity 0.48s ease var(--hint-delay), filter 0.48s ease var(--hint-delay), translate 0.48s cubic-bezier(0.22, 1, 0.36, 1) var(--hint-delay);
}

.dock-hint[data-tone="warn"] {
  color: rgba(var(--warn-rgb), 0.9);
}

/* Under the lens each icon gives a small sign of what it does: the sun rises and the picture behind slides out, the clip tips
   over, the chevrons press the line, the bars trade heights. */
.dock-item :is(.photo-sun, .photo-back, .compact-a, .compact-b) {
  transition: transform 0.5s var(--motion-easing);
}

.dock-item.is-focus .photo-sun {
  transform: translateY(-1.3px);
}

.dock-item.is-focus .photo-back {
  transform: translate(0.9px, -0.9px);
}

.dock-item .clip-wire {
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dock-item.is-focus .clip-wire {
  transform: rotate(-14deg);
}

.dock-item.is-focus .compact-a {
  transform: translateY(1.3px);
}

.dock-item.is-focus .compact-b {
  transform: translateY(-1.3px);
}

.dock-item :is(.bar-a, .bar-b, .bar-c) {
  transition: y 0.6s var(--motion-easing), height 0.6s var(--motion-easing);
}

.dock-item.is-focus .bar-a {
  y: 7.6px;
  height: 12.4px;
}

.dock-item.is-focus .bar-b {
  y: 10px;
  height: 10px;
}

.dock-item.is-focus .bar-c {
  y: 5.6px;
  height: 14.4px;
}

/* While its dock is out, the button has turned into the dock: it dissolves as the capsule grows out of it and comes back
   as the capsule folds into it. It keeps its size, since the dock is placed by it. */
.composer-add {
  transition: opacity 0.34s ease, filter 0.4s ease;
}

.composer-add.is-away,
.composer-mode.is-away {
  opacity: 0;
  filter: blur(3px);
  pointer-events: none;
  transition: opacity 0.16s ease, filter 0.2s ease;
}

.composer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.composer-add,
.composer-effort,
.composer-send {
  --icon-button-size: var(--composer-button-size);
  --icon-size: var(--composer-icon-size);
  --icon-stroke: 6;
  --icon-opacity: 1;
  --icon-hover-opacity: 1;
  --icon-disabled-opacity: 1;
}

.composer-add,
.composer-effort {
  --icon-rgb: var(--composer-fg-rgb);
  --icon-hover-rgb: var(--composer-accent-rgb);
}

.composer-effort {
  anchor-name: --effort;
}

.composer-model {
  --icon-button-size: var(--composer-button-size);
  --icon-size: var(--composer-icon-size);
  --icon-rgb: var(--composer-fg-rgb);
  --icon-hover-rgb: var(--composer-accent-rgb);
  --icon-opacity: 1;
  --icon-hover-opacity: 1;
}

/* Locked while OpenGhost works: the controls fade back instead of vanishing. */
.composer-effort,
.composer-model {
  --icon-disabled-opacity: 0.3;
}

.composer-model[expanded] {
  --icon-rgb: var(--composer-accent-rgb);
}

.model-stage {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: none;
  color: rgb(var(--composer-accent-rgb));
  user-select: none;
}

.model-stage::backdrop {
  background: none;
}

.model-veil {
  position: absolute;
  inset: 0;
  background: var(--stage-veil-bg);
  -webkit-backdrop-filter: var(--stage-veil);
  backdrop-filter: var(--stage-veil);
}

@property --fade-top {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --fade-bottom {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* With many models the list scrolls; whatever runs past its top or bottom fades into the veil. */
.model-list {
  --fade-top: 0px;
  --fade-bottom: 0px;
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  box-sizing: border-box;
  padding: 12px 68px 10px 96px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 var(--fade-top), #000 calc(100% - var(--fade-bottom)), transparent);
  transition: --fade-top 0.35s ease, --fade-bottom 0.35s ease;
}

.model-list::-webkit-scrollbar {
  display: none;
}

.model-list.can-up {
  --fade-top: 72px;
}

.model-list.can-down {
  --fade-bottom: 72px;
}

.model-group {
  padding: 18px 48px 2px 0;
  color: rgba(var(--fg-rgb), 0.4);
  font-size: 11px;
  font-weight: 700;
  line-height: 14px;
  letter-spacing: 0.14em;
  text-align: right;
  text-transform: uppercase;
  transform-origin: 100% 50%;
  user-select: none;
}

.model-slot {
  flex: none;
  display: grid;
  grid-template-rows: 1fr;
  justify-items: end;
  transition: grid-template-rows 0.55s var(--motion-easing), opacity 0.3s ease, filter 0.4s ease;
}

.model-slot.is-gone,
.model-slot.is-folded {
  grid-template-rows: 0fr;
}

.model-slot.is-gone {
  opacity: 0;
  filter: blur(8px);
}

/* The glow and the letter ripple reach past the rows, only the folding clips them. */
.model-slot-inner {
  min-height: 0;
  overflow: clip;
  overflow-clip-margin: 72px;
}

.model-row {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 0;
  border: 0;
  outline: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: right;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0.26;
  filter: blur(1.5px);
  transform: scale(0.95);
  transform-origin: 100% 50%;
  transition: opacity 0.35s ease, filter 0.45s var(--motion-easing), transform 0.6s var(--motion-easing);
}

/* At rest the focused row has no filter at all: a zero blur still leaves a faint line along the edge of its glow. */
.model-row.is-focus {
  opacity: 1;
  filter: none;
  transform: none;
}

.model-text {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.model-name {
  font-size: clamp(28px, 3.3vw, 44px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: pre;
  text-shadow: 0 0 0 rgba(var(--glow-rgb), 0);
  transition: text-shadow 0.5s ease;
}

.model-row.is-focus .model-name {
  text-shadow: 0 0 34px rgba(var(--glow-rgb), 0.28);
}

/* On the milky veil a dark glow of the same strength would read as a smudge; a faint one gives the name its depth. */
[data-theme="light"] .model-row.is-focus .model-name {
  text-shadow: 0 0 30px rgba(var(--glow-rgb), 0.1);
}

.model-letter {
  display: inline-block;
}

.model-meta {
  color: rgba(var(--fg-rgb), 0.55);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
}

.model-mark {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
}

.model-mark svg {
  display: block;
  width: 26px;
  height: 26px;
  overflow: visible;
}

.model-mark.is-away svg {
  visibility: hidden;
}

.model-flyer {
  position: absolute;
  top: 0;
  left: 0;
  color: rgb(var(--composer-accent-rgb));
  pointer-events: none;
  will-change: transform;
}

.model-flyer svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.model-confirm {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  width: max-content;
  max-width: 420px;
  padding: 22px 48px 4px 0;
  text-align: right;
  pointer-events: auto;
}

.model-confirm p {
  margin: 0;
}

.model-confirm-title {
  color: rgba(var(--fg-rgb), 0.95);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.model-word {
  display: inline-block;
}

.model-confirm-text {
  color: rgba(var(--fg-rgb), 0.6);
  font-size: 13.5px;
  line-height: 1.5;
}

.model-confirm-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.model-confirm .approval-button {
  height: 34px;
  padding: 0 18px;
  border-radius: 17px;
}

.model-confirm .approval-button:focus-visible {
  box-shadow: 0 0 0 2px var(--stage-ring), 0 0 0 4px var(--focus-ring);
}

.composer-effort[expanded] {
  --icon-rgb: var(--composer-accent-rgb);
}

.effort-panel {
  --paint: 0;
  --effort-inset: 22px;
  position: fixed;
  position-anchor: --effort;
  position-area: top span-left;
  position-try-fallbacks: flip-block;
  inset: auto;
  width: 264px;
  margin: 0 0 10px;
  padding: 6px 14px;
  overflow: visible;
  border: 0;
  background: none;
  color: var(--fg-primary);
  user-select: none;
}

/* The effort's stage: the model picker's veil behind the panel, and over the slider the level's name. Each name takes
   its weight, spacing and glow from how high its level stands (--level-heat), strains toward the next level while the lens
   is dragged (--strain), and leans as the lens moves (--lean). */
@property --strain {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

/* Windows 11's variable Segoe. Asked for as a system font, Chromium draws only its named weights (Light, Regular,
   Semibold, Bold), so a name straining toward the next level jumped between them; declared as a face with a weight
   range, it draws every weight in between. Where the font is missing, the name keeps the system font. */
@font-face {
  font-family: "OpenGhost Display";
  src: local("Segoe UI Variable Display");
  font-weight: 300 700;
}

/* The veil reaches only around the stage: a soft patch behind the name and the slider, the selection's veil,
   whose edges (a mask from effort-stage.js) fade into the app, which stays sharp further off. Its box follows
   the name, so it widens with a long one. */
.effort-veil {
  position: absolute;
  z-index: -1;
  mask-composite: intersect;
  transition: left 0.5s var(--motion-easing), top 0.5s var(--motion-easing), width 0.5s var(--motion-easing), height 0.5s var(--motion-easing);
}

.effort-title {
  --lean: 0deg;
  --glow: 0.34;
  position: absolute;
  right: 18px;
  bottom: calc(100% + 16px);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  color: rgb(var(--composer-accent-rgb));
  pointer-events: none;
}

[data-theme="light"] .effort-title {
  --glow: 0.12;
}

/* The words stack in one line while one leaves and the next arrives. */
.effort-word-box {
  position: relative;
  height: 1.1em;
  font-family: "OpenGhost Display", var(--font);
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.1;
  transform: skewX(var(--lean));
  transform-origin: 100% 100%;
}

.effort-word {
  --level-heat: 0;
  --heat: clamp(0, var(--level-heat) + var(--strain), 1);
  position: absolute;
  right: 0;
  bottom: 0;
  font-weight: calc(300 + 400 * var(--heat));
  letter-spacing: calc(-0.01em - 0.025em * var(--heat));
  text-shadow: 0 0 calc(6px + 30px * var(--heat)) rgba(var(--glow-rgb), calc(var(--glow) * var(--heat)));
  white-space: pre;
  transition: --strain 0.3s cubic-bezier(0.32, 0.72, 0, 1);
}

.effort-letter {
  display: inline-block;
}

.effort-hint-box {
  position: relative;
  height: 16px;
}

.effort-hint {
  position: absolute;
  right: 0;
  bottom: 0;
  color: rgba(var(--fg-rgb), 0.55);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.effort-shell {
  position: absolute;
  border-radius: 999px;
  background: color-mix(in srgb, var(--composer-bg), rgb(var(--composer-accent-rgb)) calc(var(--shell-paint, 0) * 100%));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--composer-border), transparent calc(var(--shell-paint, 0) * 100%)),
    0 18px 48px rgba(0, 0, 0, calc(0.45 * var(--shadow)));
  pointer-events: none;
}

.effort-morph {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.effort-morph span {
  position: absolute;
  border-radius: 999px;
}

.effort-paint {
  position: absolute;
  overflow: visible;
  opacity: var(--paint-fade, 1);
  pointer-events: none;
}

.effort-ghost {
  position: absolute;
  z-index: 2;
  opacity: calc(var(--ghost-appear, 0) * var(--paint-fade, 1));
  pointer-events: none;
}

.effort-ghost ghost-thinking {
  width: 100%;
  height: 100%;
  --ghost-rgb: var(--composer-on-accent-rgb);
  --ghost-eye: rgb(var(--composer-accent-rgb));
}

.effort-slider {
  position: relative;
  height: 36px;
  outline: none;
  cursor: pointer;
  touch-action: none;
}

.effort-track {
  position: absolute;
  top: 50%;
  right: var(--effort-inset);
  left: var(--effort-inset);
  height: 6px;
  margin-top: -3px;
}

.effort-track::before {
  content: "";
  position: absolute;
  inset: 0 -3px;
  border-radius: 3px;
  background: color-mix(in srgb, rgba(var(--fg-rgb), 0.1), rgba(var(--paint-shade-rgb), 0.1) calc(var(--paint) * 100%));
}

/* The end is cut by clip-path, not width: box sizes snap to device pixels and the lens magnifies each step. */
.effort-fill {
  position: absolute;
  inset: 0 -3px;
  background: color-mix(in srgb, rgb(var(--composer-accent-rgb)), rgb(var(--composer-on-accent-rgb)) calc(var(--paint) * 100%));
  clip-path: inset(0 var(--fill-cut, 100%) 0 0 round 3px);
}

.effort-tick {
  --bare: color-mix(in srgb, rgba(var(--fg-rgb), 0.3), rgba(var(--paint-shade-rgb), 0.22) calc(var(--paint) * 100%));
  --covered: color-mix(in srgb, rgba(var(--composer-on-accent-rgb), 0.45), rgb(var(--composer-accent-rgb)) calc(var(--paint) * 100%));
  position: absolute;
  top: 50%;
  left: calc(100% * var(--i) / var(--last));
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--bare), var(--covered) calc(var(--under) * 100%));
  transform: translate(-50%, -50%);
}

.effort-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  cursor: grab;
}

.effort-panel.is-dragging,
.effort-panel.is-dragging * {
  cursor: grabbing;
}

.effort-slider:focus-visible .effort-thumb {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}

.composer-send {
  --icon-rgb: var(--composer-on-accent-rgb);
  --send-bg: var(--composer-accent-rgb);
}

.settings {
  --settings-nav: 180px;
  position: fixed;
  inset: 0;
  width: min(780px, 100% - 48px);
  max-width: none;
  height: min(640px, 100% - 48px);
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--frame), var(--app-bg);
  border-radius: calc(var(--chat-radius) + var(--chat-gap));
  box-shadow: var(--contour), 0 24px 64px rgba(0, 0, 0, calc(0.45 * var(--shadow)));
  color: var(--fg-primary);
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity 0.2s ease,
    transform 0.35s var(--motion-easing),
    overlay 0.35s allow-discrete,
    display 0.35s allow-discrete;
}

/* In the light the contour's white inner line stood out as a bright frame around the pale backdrop; a thin cool line outside draws the edge. */
[data-theme="light"] .settings {
  box-shadow: 0 0 0 1px rgba(30, 48, 88, 0.18), 0 24px 64px rgba(0, 0, 0, calc(0.45 * var(--shadow)));
}

.settings[open] {
  display: flex;
  opacity: 1;
  transform: none;
}

.settings:focus {
  outline: none;
}

@starting-style {
  .settings[open] {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

.settings::backdrop {
  background: transparent;
  transition:
    background-color 0.25s ease,
    overlay 0.35s allow-discrete,
    display 0.35s allow-discrete;
}

.settings[open]::backdrop {
  background: var(--backdrop);
}

@starting-style {
  .settings[open]::backdrop {
    background: transparent;
  }
}

/* As in the chat, the page fades into its top and bottom edges; each edge shows while more of the page is scrolled out past it. */
.settings::before,
.settings::after {
  content: "";
  position: absolute;
  z-index: 1;
  right: var(--chat-gap);
  left: var(--settings-nav);
  height: calc(var(--composer-bottom-gap) + 12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.settings::before {
  top: var(--chat-gap);
  border-radius: var(--chat-radius) var(--chat-radius) 0 0;
  background: linear-gradient(var(--chat-bg), transparent 70%);
}

.settings::after {
  bottom: var(--chat-gap);
  border-radius: 0 0 var(--chat-radius) var(--chat-radius);
  background: linear-gradient(transparent, var(--chat-bg) 70%);
}

.settings.can-up::before,
.settings.can-down::after {
  opacity: 1;
}

.settings-nav {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 4px;
  width: var(--settings-nav);
  padding: calc(var(--chat-gap) + var(--toggle-inset)) var(--toggle-inset);
}

.settings-heading {
  display: flex;
  align-items: center;
  height: var(--icon-button-size);
  margin-bottom: 6px;
  padding: 0 12px;
  color: var(--fg-primary);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.settings-tabs {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* One highlight for all sections: it glides to the chosen one instead of blinking from row to row. */
.settings-glide {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 34px;
  border-radius: 17px;
  background: var(--row-active-bg);
  box-shadow: var(--row-active-lift);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.5s var(--motion-easing),
    height 0.5s var(--motion-easing),
    opacity 0.2s ease;
}

.settings-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px 0 10px;
  background: transparent;
  border-radius: 17px;
  color: var(--fg-secondary);
  font-weight: 500;
  text-align: left;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.settings-tab-icon {
  flex: none;
  width: 17px;
  height: 17px;
  overflow: visible;
}

.settings-tab:hover,
.settings-tab[aria-selected="true"] {
  color: var(--fg-primary);
}

/* Each section's icon moves a little as it is chosen: the sliders slide, the plug pushes in, the half moon turns over. */
.settings-tab-icon :is(.slide-a1, .slide-a2, .slide-b1, .slide-b2, .knob-a, .knob-b) {
  transition: d 0.6s var(--motion-easing), transform 0.6s var(--motion-easing);
}

.settings-tab[aria-selected="true"] .slide-a1 { d: path("M38 47H58"); }
.settings-tab[aria-selected="true"] .slide-a2 { d: path("M70 47H82"); }
.settings-tab[aria-selected="true"] .knob-a { transform: translateX(12px); }
.settings-tab[aria-selected="true"] .slide-b1 { d: path("M38 73H50"); }
.settings-tab[aria-selected="true"] .slide-b2 { d: path("M62 73H82"); }
.settings-tab[aria-selected="true"] .knob-b { transform: translateX(-12px); }

.settings-tab[aria-selected="true"] .plug {
  animation: settings-plug 0.6s var(--motion-easing);
}

@keyframes settings-plug {
  40% {
    transform: translateY(-5px);
  }
}

.settings-tab-icon .half {
  transform-box: fill-box;
  transform-origin: 0% 50%;
  transition: transform 0.7s var(--motion-easing);
}

.settings-tab[aria-selected="true"] .half {
  transform: rotate(180deg);
}

/* Usage: the three bars trade heights, like a chart catching up. */
.settings-tab-icon :is(.bar-a, .bar-b, .bar-c) {
  transition: d 0.6s var(--motion-easing);
}

.settings-tab[aria-selected="true"] .bar-a { d: path("M42 80V48"); }
.settings-tab[aria-selected="true"] .bar-b { d: path("M60 80V60"); }
.settings-tab[aria-selected="true"] .bar-c { d: path("M78 80V38"); }

.settings-lead {
  margin: 0 0 4px;
  color: var(--fg-secondary);
  font-size: 13.5px;
  line-height: 20px;
}

.provider {
  padding-top: 20px;
}

.provider + .provider {
  margin-top: 6px;
  border-top: 1px solid rgba(var(--fg-rgb), 0.07);
}

.provider-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.provider-name {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.provider-models {
  color: var(--fg-secondary);
  font-size: 12.5px;
}

.provider-state {
  margin-left: auto;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--fg-secondary);
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.provider-state.is-on {
  background: rgba(var(--success-rgb), 0.12);
  color: rgb(var(--success-rgb));
}

.provider .settings-row {
  padding: 14px 0;
}

/* Settings → Usage. On top a card with the periods, each split by provider in its color, and a column for each of the last
   30 days; then a section for every provider in use. */
.usage-summary {
  margin: 18px 0 8px;
  padding: 18px 18px 14px;
  border-radius: 18px;
  background: var(--composer-bg);
  box-shadow: inset 0 0 0 1px var(--composer-border);
}

.usage-periods {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.usage-period {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.usage-period-name,
.usage-stat-name {
  color: var(--fg-secondary);
  font-size: 12.5px;
  font-weight: 500;
}

.usage-period-value {
  color: var(--fg-primary);
  font-size: 24px;
  font-weight: 650;
  line-height: 28px;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.usage-split {
  display: flex;
  gap: 2px;
  height: 4px;
  margin-top: 2px;
}

.usage-split.is-empty {
  border-radius: 2px;
  background: rgba(var(--fg-rgb), 0.07);
}

.usage-split i {
  flex-basis: 0;
  min-width: 4px;
  border-radius: 2px;
  background: rgb(var(--tone));
  transform-origin: left;
}

/* Above the chart: what it shows, its total, and the arrows that turn it back through the months. */
.usage-range {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
}

.usage-range-title {
  color: var(--fg-primary);
  font-size: 14px;
  font-weight: 600;
}

.usage-range-total {
  color: var(--fg-secondary);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.usage-range-nav {
  display: flex;
  gap: 2px;
  margin: -4px -6px -4px auto;
}

.usage-nav {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: none;
  color: var(--fg-secondary);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease, transform 0.2s var(--motion-easing);
}

.usage-nav svg {
  width: 13px;
  height: 13px;
}

.usage-nav.is-later svg {
  transform: scaleX(-1);
}

.usage-nav:hover:not(:disabled),
.usage-nav:focus-visible {
  background: rgba(var(--fg-rgb), 0.07);
  color: var(--fg-primary);
}

.usage-nav:active:not(:disabled) {
  transform: scale(0.9);
}

.usage-nav:disabled {
  opacity: 0.3;
  cursor: default;
}

.usage-chart {
  position: relative;
  margin-top: 14px;
}

.usage-chart-plot {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 84px;
}

.usage-day {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 1;
  align-items: flex-end;
  height: 100%;
}

.usage-day-bar {
  display: flex;
  flex-direction: column-reverse;
  gap: 1.5px;
  width: 100%;
  height: calc(var(--h) * 100%);
  overflow: hidden;
  border-radius: 4px 4px 2px 2px;
  transform-origin: bottom;
}

.usage-day-bar i {
  flex-basis: 0;
  min-height: 2px;
  background: rgb(var(--tone));
}

.usage-day.is-empty .usage-day-bar {
  height: 3px;
  border-radius: 2px;
  background: rgba(var(--fg-rgb), 0.08);
}

/* One highlight glides along the days under the pointer on the sidebar's springs, the way it moves along the chats. */
.usage-chart-glide {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: -2px;
  width: 0;
  border-radius: 8px;
  background: rgba(var(--fg-rgb), 0.06);
  opacity: 0;
  pointer-events: none;
  will-change: transform, width, opacity;
}

.usage-chart-axis {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--fg-tertiary);
  font-size: 11.5px;
}

.usage-tip {
  position: absolute;
  z-index: 3;
  bottom: calc(100% + 6px);
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 140px;
  padding: 8px 12px 9px;
  border-radius: 14px;
  background: var(--tip-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.08), 0 14px 34px rgba(0, 0, 0, calc(0.45 * var(--shadow)));
  color: var(--fg-primary);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Frosted only while it shows. On the hidden tip, which waits on the page the whole time, the glass still made the window
   blur everything behind it on every frame, and it rebuilt the whole picture as the page settled in, which could blink the settings. */
.usage-tip.is-shown {
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
}

.usage-tip-head {
  color: var(--fg-secondary);
  font-weight: 500;
}

.usage-tip-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 500;
}

.usage-tip-row b {
  margin-left: auto;
  padding-left: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.usage-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 14px;
  font-size: 12.5px;
}

.usage-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--fg-secondary);
}

.usage-key {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.usage-key b {
  color: var(--fg-primary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.usage-key i,
.usage-tip-row i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--tone));
}

.usage-since {
  color: var(--fg-tertiary);
}

/* What the account itself says, set quietly at the right of the provider's name: the plan, the balance. */
.usage-account {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-left: auto;
  white-space: nowrap;
}

.usage-account[hidden] {
  display: none;
}

.usage-account-label {
  color: var(--fg-secondary);
  font-size: 12.5px;
  font-weight: 500;
}

.usage-account-value {
  color: var(--fg-primary);
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* A provider that is no longer connected keeps its history, quieter. */
.usage-provider.is-off :is(.usage-stats, .usage-facts, .usage-models) {
  opacity: 0.55;
}

/* The subscription's limits: a meter per window in the provider's color, amber past 80%, red once it is used up. */
/* One grid for all the rows, so every meter starts and ends in line whatever the window's name. */
.usage-limits {
  display: grid;
  grid-template-columns: minmax(84px, max-content) minmax(60px, 1fr) 42px minmax(128px, max-content);
  gap: 12px 14px;
  margin-top: 16px;
}

.usage-limit {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  min-height: 20px;
  font-size: 13px;
}

.usage-limit.is-high {
  --tone: 255, 212, 96;
}

[data-theme="light"] .usage-limit.is-high {
  --tone: 222, 156, 0;
}

.usage-limit.is-full {
  --tone: var(--danger-rgb);
}

.usage-limit-name {
  overflow: hidden;
  color: var(--fg-primary);
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-limit.is-model .usage-limit-name {
  color: var(--fg-secondary);
}

.usage-meter {
  position: relative;
  height: 6px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(var(--fg-rgb), 0.08);
}

.usage-meter i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: calc(var(--used) * 100%);
  border-radius: inherit;
  background: rgb(var(--tone));
}

.usage-limit-used {
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.usage-limit-reset {
  color: var(--fg-secondary);
  font-size: 12.5px;
  text-align: right;
  white-space: nowrap;
}

.usage-limit.is-full .usage-limit-reset {
  color: rgb(var(--danger-rgb));
}

/* While the limits load, two quiet rows keep their place with a slow band running across. */
.usage-limit.is-waiting span {
  grid-column: 1 / -1;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgba(var(--fg-rgb), 0.06) 30%, rgba(var(--fg-rgb), 0.13) 50%, rgba(var(--fg-rgb), 0.06) 70%) 100% 0 / 250% 100%;
  animation: compact-wave 1.9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.usage-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 20px;
  margin-top: 16px;
}

.usage-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.usage-stat-value {
  color: var(--fg-primary);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.usage-facts {
  display: flex;
  flex-wrap: wrap;
  margin: 12px 0 0;
  color: var(--fg-secondary);
  font-size: 12.5px;
  line-height: 18px;
}

.usage-facts.is-last {
  margin-bottom: 20px;
}

.usage-facts span + span::before {
  content: "·";
  margin: 0 8px;
  color: var(--fg-tertiary);
}

.usage-models {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 20px;
}

.usage-model {
  display: grid;
  grid-template-columns: minmax(0, 190px) minmax(40px, 1fr) minmax(44px, max-content);
  align-items: center;
  gap: 14px;
  font-size: 13px;
}

.usage-model-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usage-model-bar {
  height: 4px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(var(--fg-rgb), 0.06);
}

.usage-model-bar i {
  display: block;
  width: calc(var(--share) * 100%);
  height: 100%;
  border-radius: inherit;
  background: rgba(var(--tone), 0.75);
}

.usage-model-value {
  color: var(--fg-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.usage-empty,
.usage-note {
  margin: 14px 0 20px;
  color: var(--fg-secondary);
  font-size: 13px;
  line-height: 18px;
}

.usage-limits .usage-note {
  grid-column: 1 / -1;
  margin: 0;
}

/* Coming in, the page rises out of a blur, the splits and the bars grow and the days rise one after another. */
.is-entering .usage-period,
.is-entering .usage-provider {
  animation: usage-rise 0.6s var(--motion-easing) both;
  animation-delay: calc(var(--k, 3) * 60ms);
}

.is-entering .usage-split i,
.is-entering .usage-model-bar i {
  animation: usage-grow-x 0.8s var(--motion-easing) 0.18s both;
}

.is-entering .usage-day-bar {
  animation: usage-grow-y 0.7s var(--motion-easing) both;
  animation-delay: calc(120ms + var(--k) * 16ms);
}

.usage-limits.is-filling .usage-meter i {
  animation: usage-grow-x 0.9s var(--motion-easing) both;
}

/* Turning to another month, its days rise one after another and the numbers under them come in anew. */
.is-flipping .usage-day-bar {
  animation: usage-grow-y 0.55s var(--motion-easing) both;
  animation-delay: calc(var(--k) * 10ms);
}

.is-flipping :is(.usage-range-title, .usage-range-total, .usage-legend, .usage-provider .usage-stats, .usage-provider .usage-facts, .usage-provider .usage-models, .usage-provider .usage-empty) {
  animation: usage-rise 0.45s var(--motion-easing) both;
}

.usage-meter i,
.usage-model-bar i {
  transform-origin: left;
}

@keyframes usage-rise {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(4px);
  }
}

@keyframes usage-grow-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes usage-grow-y {
  from {
    transform: scaleY(0);
  }
}

.settings-account-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.settings-account-who {
  max-width: 220px;
  overflow: hidden;
  color: var(--fg-primary);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-account[data-state="idle"] :is([data-action="cancel"], [data-action="logout"], .settings-account-who),
.settings-account[data-state="waiting"] :is([data-action="login"], [data-action="logout"]),
.settings-account[data-state="connected"] :is([data-action="login"], [data-action="cancel"]) {
  display: none;
}

/* While the browser sign-in is open, the same slow band that marks a live compaction runs across the words. */
.settings-account[data-state="waiting"] .settings-account-who {
  background: linear-gradient(90deg, rgba(var(--fg-rgb), 0.58) 0 34%, rgba(var(--fg-rgb), 0.14) 50%, rgba(var(--fg-rgb), 0.58) 66% 100%) 100% 0 / 250% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: compact-wave 1.9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.settings-button {
  height: 34px;
  padding: 0 16px;
  border: 0;
  border-radius: 17px;
  outline: none;
  background: rgba(var(--fg-rgb), 0.07);
  color: var(--fg-primary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.2s var(--motion-easing);
}

.settings-button:hover {
  background: rgba(var(--fg-rgb), 0.11);
}

.settings-button.is-primary {
  background: rgb(var(--composer-accent-rgb));
  color: rgb(var(--composer-on-accent-rgb));
}

.settings-button:active {
  transform: scale(0.96);
}

.settings-button:focus-visible {
  box-shadow: 0 0 0 2px var(--chat-bg), 0 0 0 4px var(--focus-ring);
}

/* The page scrolls under the app's own thin scrollbar, the one the chat has. */
.settings-page {
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
  margin: var(--chat-gap) var(--chat-gap) var(--chat-gap) 0;
  padding: var(--toggle-inset) 24px 24px;
  overflow-y: auto;
  background: var(--chat-bg);
  border-radius: var(--chat-radius);
  box-shadow: var(--contour);
}

.settings-page::-webkit-scrollbar {
  display: none;
}

.settings-scrollbar {
  z-index: 2;
  top: calc(var(--chat-gap) + 12px);
  right: calc(var(--chat-gap) + 2px);
  bottom: calc(var(--chat-gap) + 12px);
}

.settings-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--icon-button-size);
  margin: 0 -14px 8px 0;
}

.settings-page-title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}

.settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: start;
  padding: 18px 0;
}

.settings-row + .settings-row {
  border-top: 1px solid rgba(var(--fg-rgb), 0.06);
}

.settings-label {
  display: block;
  font-size: var(--font-size);
  font-weight: 500;
}

.settings-hint {
  margin: 4px 0 0;
  color: var(--fg-secondary);
  font-size: 13px;
  line-height: 18px;
}

.settings-hint a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--fg-tertiary);
  text-underline-offset: 3px;
}

.settings-hint a:hover {
  color: var(--fg-primary);
}

.settings-control {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.settings-key-box {
  position: relative;
}

.settings-key {
  width: 260px;
  height: 36px;
  padding: 0 42px 0 16px;
  border: 0;
  outline: none;
  background: var(--composer-bg);
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px var(--composer-border);
  color: var(--fg-primary);
  caret-color: var(--fg-primary);
  font-family: var(--mono-font);
  font-size: 13px;
  transition: box-shadow 0.2s ease;
}

/* The eye inside the field's end shows the key for a check; it is there only once the field holds one. */
.settings-key-eye {
  position: absolute;
  top: 4px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: transparent;
  color: rgba(var(--fg-rgb), 0.42);
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.settings-key-eye:hover,
.settings-key-box.is-revealed .settings-key-eye {
  color: rgba(var(--fg-rgb), 0.85);
}

.settings-key-eye:hover {
  background: rgba(var(--fg-rgb), 0.06);
}

.settings-key-eye:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.settings-key-eye .glyph {
  width: 20px;
  height: 20px;
}

.settings-key:placeholder-shown + .settings-key-eye {
  opacity: 0;
  transform: scale(0.7);
  pointer-events: none;
}

.glyph-eye .eye-slash {
  stroke-dasharray: 51;
  stroke-dashoffset: 51;
  transition: stroke-dashoffset 0.32s var(--motion-easing);
}

.settings-key-box.is-revealed .eye-slash {
  stroke-dashoffset: 0;
}

.settings-key::placeholder {
  color: rgb(var(--composer-fg-rgb));
}

.settings-key:focus {
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.2);
}

.settings-status {
  min-height: 18px;
  margin: 6px 16px 0 0;
  color: var(--fg-secondary);
  font-size: 13px;
  line-height: 18px;
}

.settings-status[data-tone="error"] {
  color: rgb(var(--danger-rgb));
}

/* Settings → General. */
.general-block {
  padding: 20px 0 18px;
}

.general-block + .general-block {
  border-top: 1px solid rgba(var(--fg-rgb), 0.06);
}

.general-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.general-count {
  color: var(--fg-secondary);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.general-field {
  margin-top: 12px;
  overflow: hidden;
  background: var(--composer-bg);
  border-radius: 16px;
  box-shadow: inset 0 0 0 1px var(--composer-border);
  transition: box-shadow 0.2s ease;
}

.general-field:focus-within {
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.2);
}

.general-input {
  display: block;
  width: 100%;
  min-height: 116px;
  max-height: 320px;
  field-sizing: content;
  padding: 13px 16px;
  border: 0;
  outline: none;
  background: transparent;
  color: var(--fg-primary);
  caret-color: var(--fg-primary);
  font: inherit;
  font-size: 14px;
  line-height: 21px;
  resize: none;
  scrollbar-color: rgba(var(--fg-rgb), 0.2) transparent;
  scrollbar-width: thin;
}

.general-input::placeholder {
  color: rgb(var(--composer-fg-rgb));
}

.general-files {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.general-files:empty {
  display: none;
}

.general-file {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 54px;
  padding: 0 9px 0 12px;
  overflow: hidden;
  background: var(--composer-bg);
  border-radius: 14px;
  box-shadow: inset 0 0 0 1px var(--composer-border);
}

/* Icons and picture thumbnails take the same 32px, so the names line up. */
.general-file .file-icon {
  width: 25px;
  height: 31px;
  margin: 0 3.5px;
}

.general-file-thumb {
  flex: none;
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.08);
}

.general-file-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.general-file-name {
  overflow: hidden;
  color: var(--fg-primary);
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.general-file-meta {
  overflow: hidden;
  color: var(--fg-secondary);
  font-size: 12.5px;
  line-height: 17px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.general-file-remove {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: transparent;
  color: var(--fg-secondary);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.general-file-remove svg {
  width: 12px;
  height: 12px;
}

.general-file:hover .general-file-remove,
.general-file-remove:focus-visible {
  opacity: 1;
}

.general-file-remove:hover,
.general-file-remove:focus-visible {
  background: rgba(var(--fg-rgb), 0.08);
  color: var(--fg-primary);
}

/* Adding files: one wide dashed target, pressed to choose files or dropped onto; while files hover over the section it lights up. */
.general-drop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  margin-top: 12px;
  border: 1.5px dashed rgba(var(--fg-rgb), 0.16);
  border-radius: 14px;
  outline: none;
  background: transparent;
  color: var(--fg-secondary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.35s var(--motion-easing);
}

.general-drop svg {
  width: 15px;
  height: 15px;
  transition: transform 0.45s var(--motion-easing);
}

.general-drop:hover,
.general-drop:focus-visible {
  border-color: rgba(var(--fg-rgb), 0.3);
  color: var(--fg-primary);
}

.general-drop:active {
  transform: scale(0.99);
}

.general-files-block.is-dropping .general-drop {
  border-color: rgba(var(--fg-rgb), 0.5);
  background: rgba(var(--fg-rgb), 0.05);
  color: var(--fg-primary);
  transform: scale(1.015);
}

.general-files-block.is-dropping .general-drop svg {
  transform: rotate(90deg) scale(1.15);
}

.general-status {
  margin-right: 0;
  text-align: left;
}

/* Settings → Appearance: each theme as a small window of the app, painted by that theme's own tokens. */
.theme-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 22px;
}

.theme-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--fg-secondary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.25s ease;
}

/* .is-held: the card just picked by the pointer keeps the hover's look while the theme spreads (settings-appearance.js). */
.theme-option:hover,
.theme-option.is-held,
.theme-option[aria-checked="true"] {
  color: var(--fg-primary);
}

.theme-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(var(--fg-rgb), 0.1),
    0 0 0 0 transparent,
    0 6px 16px rgba(0, 0, 0, calc(0.2 * var(--shadow)));
  transition:
    box-shadow 0.35s ease,
    transform 0.5s var(--motion-easing);
}

.theme-option:is(:hover, .is-held) .theme-frame {
  transform: translateY(-2px);
}

.theme-option:active .theme-frame {
  transform: scale(0.98);
}

.theme-option[aria-checked="true"] .theme-frame {
  box-shadow:
    0 0 0 2px var(--chat-bg),
    0 0 0 4px rgb(var(--composer-accent-rgb)),
    0 10px 24px rgba(0, 0, 0, calc(0.28 * var(--shadow)));
}

.theme-option:focus-visible .theme-frame {
  box-shadow:
    0 0 0 2px var(--chat-bg),
    0 0 0 4px var(--focus-ring),
    0 6px 16px rgba(0, 0, 0, calc(0.2 * var(--shadow)));
}

.theme-option[aria-checked="true"]:focus-visible .theme-frame {
  box-shadow:
    0 0 0 2px var(--chat-bg),
    0 0 0 4px rgb(var(--composer-accent-rgb)),
    0 0 0 7px var(--focus-ring);
}

.theme-preview {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 5%;
  padding: 7% 0 0 5%;
  background: var(--frame), var(--app-bg);
}

/* System: the light window with the dark one over its lower right half, split on the diagonal. */
.theme-frame.is-split .theme-preview + .theme-preview {
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.theme-preview-side {
  display: flex;
  flex: 0 0 21%;
  flex-direction: column;
  gap: 7px;
  padding-top: 13%;
}

.theme-preview-side i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--fg-rgb), 0.14);
}

.theme-preview-side i:nth-child(2) {
  width: 78%;
}

.theme-preview-side i:nth-child(3) {
  width: 88%;
}

.theme-preview-side i:nth-child(4) {
  width: 64%;
}

.theme-preview-chat {
  position: relative;
  flex: 1;
  background: var(--chat-bg);
  border-radius: 8px 0 0;
  box-shadow: var(--contour);
}

.theme-preview-bubble {
  position: absolute;
  top: 12%;
  right: 10%;
  width: 32%;
  height: 12%;
  border-radius: 999px;
  background: var(--bubble-bg);
}

.theme-preview-ghost {
  position: absolute;
  top: 33%;
  left: 10%;
  width: 11%;
  color: rgb(var(--composer-accent-rgb));
  --ghost-eye: var(--chat-bg);
}

.theme-preview-ghost svg {
  display: block;
  width: 100%;
  height: auto;
}

.theme-preview-ghost .glyph-ghost-eye {
  fill: var(--chat-bg);
}

.theme-preview-line {
  position: absolute;
  top: 36%;
  left: 26%;
  width: 52%;
  height: 5px;
  border-radius: 3px;
  background: rgba(var(--fg-rgb), 0.2);
}

.theme-preview-line.is-short {
  top: calc(36% + 11px);
  width: 34%;
}

.theme-preview-composer {
  position: absolute;
  right: 9%;
  bottom: 11%;
  left: 9%;
  height: 19%;
  border-radius: 999px;
  background: var(--composer-bg);
  box-shadow: inset 0 0 0 1px var(--composer-border), 0 4px 10px rgba(0, 0, 0, calc(0.35 * var(--shadow)));
}

.theme-preview-send {
  position: absolute;
  top: 50%;
  right: 4%;
  height: 64%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(var(--composer-accent-rgb));
  transform: translateY(-50%);
}

/* The chosen theme gets a small check in the corner, springing in as the ring settles around it. */
.theme-check {
  position: absolute;
  top: 7px;
  left: 7px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgb(var(--composer-accent-rgb));
  box-shadow: 0 0 0 2px var(--chat-bg), 0 3px 8px rgba(0, 0, 0, calc(0.35 * var(--shadow)));
  color: rgb(var(--composer-on-accent-rgb));
  opacity: 0;
  transform: scale(0.4);
  transition:
    opacity 0.2s ease,
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Kept on its own layer for good: the settings window often stands between whole pixels, and a mark dropped from its layer
     as the pop ends was drawn again half a pixel off, a twitch right after it landed. */
  will-change: transform;
}

.theme-check svg {
  width: 11px;
  height: 11px;
}

.theme-option[aria-checked="true"] .theme-check {
  opacity: 1;
  transform: none;
}

.file-icon {
  display: block;
  flex: none;
  overflow: visible;
}

.file-icon-page {
  fill: rgba(var(--ft), 0.15);
  stroke: rgba(var(--ft), 0.42);
  stroke-width: 1;
}

.file-icon-fold {
  fill: rgba(var(--ft), 0.34);
}

.file-icon-glyph .stroke {
  fill: none;
  stroke: rgb(var(--ft));
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.file-icon-glyph .fill {
  fill: rgb(var(--ft));
}

.file-icon-ext {
  fill: rgb(var(--ft));
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* The file colors are bright for the dark theme; on white their lines and letters go deeper. */
[data-theme="light"] .file-icon {
  --ft-ink: color-mix(in oklab, rgb(var(--ft)) 70%, black);
}

[data-theme="light"] .file-icon-page {
  stroke: color-mix(in srgb, var(--ft-ink) 45%, transparent);
}

[data-theme="light"] .file-icon-fold {
  fill: color-mix(in srgb, var(--ft-ink) 36%, transparent);
}

[data-theme="light"] .file-icon-glyph .stroke {
  stroke: var(--ft-ink);
}

[data-theme="light"] :is(.file-icon-glyph .fill, .file-icon-ext) {
  fill: var(--ft-ink);
}

.composer-attachments {
  flex: none;
  margin: 0 -14px -10px;
  overflow: clip;
  cursor: default;
}

.attachments-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 14px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.attachments-row:empty {
  padding: 0;
}

.attachments-row::-webkit-scrollbar {
  display: none;
}

.attachments-row.fade-start {
  mask-image: linear-gradient(90deg, transparent, #000 28px);
}

.attachments-row.fade-end {
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

.attachments-row.fade-start.fade-end {
  mask-image: linear-gradient(90deg, transparent, #000 28px, #000 calc(100% - 28px), transparent);
}

.attachment {
  position: relative;
  flex: none;
  height: 56px;
  border-radius: 12px;
}

.attachment.is-entering {
  animation: attachment-in 0.5s cubic-bezier(0.34, 1.36, 0.64, 1) both;
}

@keyframes attachment-in {
  from {
    opacity: 0;
    transform: scale(0.7);
    filter: blur(4px);
  }
}

.attachment.is-image {
  width: 56px;
}

.attachment.is-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.08);
  pointer-events: none;
}

.attachment-thumb {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

/* A video's card is a photo's: a frame of it, which comes in once it is taken, and the video's length over a soft shade
   at the bottom. The length sits on the left, clear of the note's button. */
.attachment.is-video {
  background: rgba(var(--fg-rgb), 0.06);
}

.attachment.is-video .attachment-thumb {
  animation: attachment-frame-in 0.4s ease both;
}

@keyframes attachment-frame-in {
  from {
    opacity: 0;
  }
}

.attachment.is-video:has(.attachment-thumb)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 58%);
  pointer-events: none;
}

.attachment-duration {
  position: absolute;
  bottom: 4px;
  left: 6px;
  color: #fff;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 13px;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.attachment-duration:empty,
.attachment.is-video:not(:has(.attachment-thumb)) .attachment-duration {
  display: none;
}

.attachment.is-file {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 232px;
  padding: 0 14px 0 10px;
  background: rgba(var(--fg-rgb), 0.045);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.06);
}

.attachment .file-icon,
.file-card .file-icon {
  width: 30px;
  height: 38px;
}

.attachment-text,
.file-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.attachment-name {
  overflow: hidden;
  color: var(--fg-primary);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.attachment-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  color: var(--fg-secondary);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
}

.attachment-meta svg {
  flex: none;
  width: 11px;
  height: 11px;
}

.attachment-note-text {
  overflow: hidden;
  color: rgba(var(--fg-rgb), 0.72);
  text-overflow: ellipsis;
}

.attachment-flag {
  color: var(--fg-tertiary);
  white-space: pre;
}

/* A pasted text is a card like a file; the whole card puts the text back into the message. Under the pointer it lifts
   a little, and its line hands over to what a click does. */
.attachment.is-pasted {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.attachment.is-pasted:hover {
  background: rgba(var(--fg-rgb), 0.07);
}

button.attachment-text {
  padding: 0;
  border: 0;
  outline: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.attachment.is-pasted .attachment-meta {
  display: grid;
}

.attachment-meta-line,
.attachment-unpaste {
  display: flex;
  grid-area: 1 / 1;
  align-items: center;
  gap: 4px;
  min-width: 0;
  transition: opacity 0.2s ease, transform 0.3s var(--motion-easing), filter 0.3s var(--motion-easing);
}

.attachment-unpaste {
  color: var(--fg-primary);
  opacity: 0;
  transform: translateY(7px);
  filter: blur(2px);
}

.attachment.is-pasted:hover:not(:has(.attachment-note:hover, .attachment-remove:hover)) .attachment-meta-line,
.attachment-text:focus-visible .attachment-meta-line {
  opacity: 0;
  transform: translateY(-7px);
  filter: blur(2px);
}

.attachment.is-pasted:hover:not(:has(.attachment-note:hover, .attachment-remove:hover)) .attachment-unpaste,
.attachment-text:focus-visible .attachment-unpaste {
  opacity: 1;
  transform: none;
  filter: none;
}

.attachment-remove,
.attachment-note {
  position: absolute;
  z-index: 1;
  right: -4px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: var(--attachment-note-bg);
  box-shadow: 0 0 0 1.5px var(--composer-bg), 0 2px 6px rgba(0, 0, 0, calc(0.35 * var(--shadow)));
  color: rgba(var(--fg-rgb), 0.92);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.5);
  transition:
    opacity 0.16s ease,
    transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
    background-color 0.15s ease,
    color 0.15s ease;
}

.attachment-remove {
  top: -4px;
}

.attachment-note {
  bottom: -4px;
}

.attachment-remove::before,
.attachment-note::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
}

.attachment-remove svg {
  width: 9px;
  height: 9px;
}

.attachment-note svg {
  width: 10px;
  height: 10px;
}

.attachment:hover > button,
.attachment.is-editing > button,
.attachment:has(:focus-visible) > button,
.attachment.has-note > .attachment-note {
  opacity: 1;
  transform: none;
}

.attachment-remove:hover,
.attachment-note:hover {
  background: var(--attachment-note-hover-bg);
}

.attachment-remove:focus-visible,
.attachment-note:focus-visible {
  box-shadow: 0 0 0 1.5px var(--composer-bg), 0 0 0 3.5px var(--focus-ring);
}

.attachment.has-note > .attachment-note,
.attachment.is-editing > .attachment-note {
  background: rgb(var(--composer-accent-rgb));
  color: rgb(var(--composer-on-accent-rgb));
}

.note-panel {
  position: fixed;
  position-anchor: --attachment-note;
  position-area: top span-right;
  position-try-fallbacks: top span-left, flip-block;
  inset: auto;
  width: 300px;
  margin: 0 0 10px -4px;
  padding: 12px 12px 10px;
  overflow: visible;
  border: 0;
  border-radius: 18px;
  background: var(--composer-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.08), 0 18px 48px rgba(0, 0, 0, calc(0.5 * var(--shadow)));
  color: var(--fg-primary);
  font-size: var(--small-font-size);
  line-height: 20px;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transform-origin: 24px 100%;
  transition:
    opacity 0.18s ease,
    transform 0.4s var(--motion-easing),
    overlay 0.4s allow-discrete,
    display 0.4s allow-discrete;
}

.note-panel:popover-open {
  opacity: 1;
  transform: none;
}

@starting-style {
  .note-panel:popover-open {
    opacity: 0;
    transform: translateY(6px) scale(0.96);
  }
}

.note-head {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0 2px 8px;
}

.note-thumb {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 24px;
}

.note-thumb img {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  object-fit: cover;
}

.note-thumb .file-icon {
  width: 19px;
  height: 24px;
}

.note-title {
  overflow: hidden;
  color: var(--fg-secondary);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.note-input {
  display: block;
  width: 100%;
  min-height: 76px;
  max-height: 180px;
  margin: 0;
  padding: 8px 10px;
  border: 0;
  outline: none;
  border-radius: 11px;
  background: rgba(var(--fg-rgb), 0.045);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.06);
  color: var(--fg-primary);
  caret-color: var(--fg-primary);
  font: inherit;
  font-size: 14px;
  line-height: 20px;
  resize: none;
  field-sizing: content;
  scrollbar-width: none;
  transition: box-shadow 0.2s ease;
}

.note-input:focus {
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.16);
}

.note-input::placeholder {
  color: rgb(var(--composer-fg-rgb));
}

.note-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 10px 0 0 2px;
}

.note-hint {
  color: var(--fg-secondary);
  font-size: 12px;
  line-height: 16px;
}

.note-done {
  flex: none;
  height: 28px;
  padding: 0 14px;
  border: 0;
  outline: none;
  border-radius: 14px;
  background: rgb(var(--composer-accent-rgb));
  color: rgb(var(--composer-on-accent-rgb));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s var(--motion-easing), background-color 0.15s ease;
}

.note-done:active {
  transform: scale(0.95);
}

.note-done:focus-visible {
  box-shadow: 0 0 0 2px var(--app-bg), 0 0 0 4px var(--focus-ring);
}

.drop-zone {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  background: var(--drop-veil-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, visibility 0s linear 0.22s;
}

.drop-zone::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 8px;
  background: radial-gradient(50% 45% at 50% 50%, rgba(var(--fg-rgb), 0.045), transparent);
  box-shadow: inset 0 0 0 1.5px rgba(var(--fg-rgb), 0.12);
}

.main.is-dropping .drop-zone,
.mini-main.is-dropping .drop-zone {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease;
}

.drop-art {
  position: relative;
  width: 180px;
  height: 100px;
  margin-bottom: 18px;
}

.drop-art .file-icon {
  --file-icon-base: var(--drop-icon-base);
  position: absolute;
  top: 10px;
  left: 50%;
  width: 64px;
  height: 80px;
  margin-left: -32px;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, calc(0.5 * var(--shadow))));
  transform: translateY(16px) scale(0.8);
  transition: transform 0.6s cubic-bezier(0.34, 1.5, 0.64, 1);
}

.drop-art .file-icon:nth-child(2) {
  z-index: 1;
}

.main.is-dropping .drop-art .file-icon:nth-child(1),
.mini-main.is-dropping .drop-art .file-icon:nth-child(1) {
  transform: translate(-46px, 8px) rotate(-14deg);
  transition-delay: 0.04s;
}

.main.is-dropping .drop-art .file-icon:nth-child(2),
.mini-main.is-dropping .drop-art .file-icon:nth-child(2) {
  transform: translateY(-6px);
}

.main.is-dropping .drop-art .file-icon:nth-child(3),
.mini-main.is-dropping .drop-art .file-icon:nth-child(3) {
  transform: translate(46px, 8px) rotate(14deg);
  transition-delay: 0.08s;
}

.file-icon-base {
  fill: var(--file-icon-base, transparent);
}

.drop-title {
  color: var(--fg-primary);
  font-size: 17px;
  font-weight: 700;
  line-height: 24px;
}

.drop-hint {
  color: var(--fg-secondary);
  font-size: 13px;
  line-height: 18px;
}

/* The cards fanned behind a stack of photos and videos reach a little below it: what follows lies over them. */
.media ~ :is(.message-files, .message-quote, .message-bubble) {
  position: relative;
  z-index: 1;
}

.message-files {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 80%;
}

.file-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 280px;
  padding: 9px 14px 9px 10px;
  border-radius: 16px;
  background: var(--composer-bg);
  box-shadow: inset 0 0 0 1px var(--composer-border);
}

.file-card-name,
.file-card-meta {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.file-card-name {
  font-size: 14px;
  font-weight: 600;
  line-height: 19px;
}

.file-card-meta {
  color: var(--fg-secondary);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 17px;
}

.file-card-note {
  display: -webkit-box;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(var(--fg-rgb), 0.72);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 17px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.media {
  position: relative;
  isolation: isolate;
  width: min(100%, var(--media-w, 380px));
  aspect-ratio: var(--ratio, 1.3333);
  border-radius: 18px;
  outline: none;
  touch-action: pan-y;
  user-select: none;
}

.media.is-many {
  margin-top: 6px;
  cursor: grab;
}

.media.is-dragging {
  cursor: grabbing;
}

.media:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.media-card {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--media-bg);
  box-shadow: 0 10px 28px rgba(0, 0, 0, calc(0.32 * var(--shadow)));
  transform-origin: 50% 120%;
}

.media.is-many .media-card {
  will-change: transform, opacity;
}

.media-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.07);
  pointer-events: none;
}

.media-shade {
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.media-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.media-backdrop {
  position: absolute;
  top: -12%;
  left: -12%;
  width: 124%;
  height: 124%;
  object-fit: cover;
  filter: blur(24px) saturate(1.3) brightness(0.6);
}

.media-arrow {
  position: absolute;
  z-index: 500;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  outline: none;
  background: rgba(22, 22, 22, 0.5);
  -webkit-backdrop-filter: blur(12px) saturate(1.5);
  backdrop-filter: blur(12px) saturate(1.5);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 2px 8px rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.2s ease, transform 0.3s var(--motion-easing), background-color 0.15s ease;
}

.media-arrow svg {
  width: 12px;
  height: 12px;
}

.media-arrow.is-prev {
  left: 10px;
}

.media-arrow.is-next {
  right: 10px;
}

.media-arrow.is-next svg {
  transform: scaleX(-1);
}

.media:hover .media-arrow:not(.is-hidden),
.media-arrow:focus-visible:not(.is-hidden) {
  opacity: 1;
  transform: none;
}

.media-arrow.is-hidden {
  pointer-events: none;
}

.media-arrow:hover {
  background: rgba(44, 44, 44, 0.62);
}

.media-arrow:active {
  transform: scale(0.9);
}

.media-arrow:focus-visible {
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.2), 0 0 0 2px var(--focus-ring);
}

.media-dots {
  position: absolute;
  z-index: 500;
  bottom: 10px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 18px;
  padding: 0 7px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  translate: -50% 0;
}

.media-dot {
  position: relative;
  flex: none;
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 3px;
  outline: none;
  background: rgba(255, 255, 255, calc(0.42 + var(--near, 0) * 0.58));
  cursor: pointer;
}

.media-dot::before {
  content: "";
  position: absolute;
  inset: -6px -3px;
}

.media-dot:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.media-counter {
  color: rgba(255, 255, 255, 0.92);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

/* A video's length, on the same frosted pill as the dots. */
.media-duration {
  position: absolute;
  bottom: 10px;
  left: 10px;
  height: 18px;
  padding: 0 7px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  color: rgba(255, 255, 255, 0.92);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* Pictures and videos a reply shows. The pictures are the stack an attachment has, leafed through the same way;
   under it stand the caption and the source of the picture on top. */
.md-media {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 4px 0 calc(var(--md-gap) + 4px);
}

.md-media:empty {
  display: none;
}

.md-gallery {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.md-gallery .media.is-linked {
  cursor: pointer;
}

.md-gallery .media.is-linked.is-many {
  cursor: grab;
}

.md-gallery .media.is-linked.is-dragging {
  cursor: grabbing;
}

/* The pictures behind fan out below the one on top: what is written under the stack starts below their corners. */
.md-gallery .media.is-many {
  margin-bottom: 26px;
}

/* While the pictures are on their way, a quiet plate keeps their place. */
.md-gallery-wait {
  width: min(100%, 380px);
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  background: rgba(var(--fg-rgb), 0.04);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.07);
  animation: md-media-wait 1.8s ease-in-out infinite;
}

@keyframes md-media-wait {
  50% { background: rgba(var(--fg-rgb), 0.075); }
}

.md-gallery-caption {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  max-width: 100%;
  color: rgba(var(--fg-rgb), var(--fg-secondary-opacity));
  font-size: 0.875em;
  font-weight: 500;
  line-height: 1.5;
}

.md-gallery-caption[hidden] {
  display: none;
}

.md-gallery-held {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}

/* A picture from a place the app does not load by itself: it comes on a click. */
.md-gallery-ask {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: 30px;
  padding: 0 11px 0 9px;
  border: 0;
  border-radius: 10px;
  outline: none;
  background: rgba(var(--fg-rgb), 0.07);
  color: rgba(var(--fg-rgb), 0.9);
  font: inherit;
  font-size: 0.875em;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.md-gallery-ask:hover {
  background: rgba(var(--fg-rgb), 0.12);
}

.md-gallery-ask:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.md-gallery-ask svg {
  flex: none;
  width: 15px;
  height: 15px;
  opacity: 0.75;
}

.md-gallery-ask-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.md-gallery-ask-host {
  flex: none;
  color: rgba(var(--fg-rgb), var(--fg-secondary-opacity));
}

/* A video: its preview with a play mark on it, its name under it, and who made it. */
.md-videos {
  display: grid;
  grid-template-columns: minmax(0, 380px);
  gap: 20px 14px;
}

/* Several stand in rows; in a narrow window still two to a row, as long as a card keeps a readable width. */
.md-videos.is-many {
  grid-template-columns: repeat(auto-fill, minmax(max(170px, min(210px, 46%)), 1fr));
}

.md-video,
.markdown a.md-video {
  display: flex;
  flex-direction: column;
  min-width: 0;
  outline: none;
  color: inherit;
  text-decoration: none;
}

.md-video-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: var(--media-bg);
  box-shadow: 0 8px 22px rgba(0, 0, 0, calc(0.26 * var(--shadow)));
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}

.md-video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.07);
  pointer-events: none;
}

.md-video-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.md-video.is-loaded .md-video-img {
  opacity: 1;
}

.md-video:hover .md-video-thumb {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, calc(0.34 * var(--shadow)));
}

.md-video:hover .md-video-img {
  transform: scale(1.03);
}

.md-video:focus-visible .md-video-thumb {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.md-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.38);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.28);
  color: #fff;
  translate: -50% -50%;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s ease;
}

.md-video-play svg {
  width: 22px;
  height: 22px;
}

.md-video:hover .md-video-play {
  transform: scale(1.08);
  background: rgba(0, 0, 0, 0.5);
}

.md-video:active .md-video-play {
  transform: scale(0.94);
}

/* A video's length, on the same frosted pill as on an attached video. */
.md-video-time {
  position: absolute;
  right: 8px;
  bottom: 8px;
  height: 18px;
  padding: 0 7px;
  border-radius: 9px;
  background: rgba(0, 0, 0, 0.42);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
  color: rgba(255, 255, 255, 0.94);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

.md-video-title {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 10px;
  color: rgba(var(--fg-rgb), 0.92);
  font-size: 0.9em;
  font-weight: 600;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.md-video-title:empty {
  display: none;
}

.md-video-meta {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-top: 5px;
  color: rgba(var(--fg-rgb), var(--fg-secondary-opacity));
  font-size: 0.8em;
  font-weight: 500;
  line-height: 1.4;
}

.md-video-meta .link-chip-icon {
  flex: none;
  vertical-align: 0;
}

.md-video-by {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A video that is not there keeps its link and loses the plate: there is nothing to show on it. */
.md-video.is-missing .md-video-thumb {
  display: none;
}

.md-video.is-missing .md-video-title {
  margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .md-gallery-wait {
    animation: none;
  }

  .md-video-thumb,
  .md-video-img,
  .md-video-play {
    transition: none;
  }

  .md-video:hover .md-video-thumb,
  .md-video:hover .md-video-img,
  .md-video:hover .md-video-play {
    transform: none;
  }
}

.browser-toggle {
  position: absolute;
  z-index: 3;
  top: var(--toggle-inset);
  right: var(--toggle-inset);
}

.browser-toggle[hidden] {
  display: none;
}

.app.is-browser-open .main {
  right: calc(var(--chat-gap) * 2 + var(--browser-width, 520px));
}

/* Closed, the panel waits under the chat card: a webview that is hidden, clipped or outside the window stops drawing, and the agent may still be using it. */
.browser {
  position: absolute;
  z-index: 0;
  top: var(--chat-gap);
  right: var(--chat-gap);
  bottom: var(--chat-gap);
  width: var(--browser-width, 520px);
  transform: scale(0.97);
  transform-origin: 100% 50%;
  transition: transform var(--motion-duration) var(--motion-easing);
}

.app.is-browser-open .browser {
  transform: none;
}

.app:not(.is-browser-open) .browser:not(.is-agent) .browser-view {
  visibility: hidden;
}

.app.is-browser-resizing,
.app.is-browser-resizing * {
  cursor: col-resize !important;
  user-select: none;
}

.app.is-browser-resizing .main,
.app.is-browser-resizing .browser {
  transition: none;
}

.app.is-browser-resizing .browser-view {
  pointer-events: none;
}

.browser-resize {
  position: absolute;
  z-index: 2;
  top: 12px;
  bottom: 12px;
  left: calc(var(--chat-gap) * -1 - 3px);
  width: calc(var(--chat-gap) + 6px);
  cursor: col-resize;
}

.browser-resize::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 36px;
  margin: -18px 0 0 -1.5px;
  border-radius: 2px;
  background: rgba(var(--fg-rgb), 0.28);
  opacity: 0;
  transition: opacity 0.2s ease, height 0.3s var(--motion-easing), margin 0.3s var(--motion-easing);
}

.browser-resize:hover::after,
.app.is-browser-resizing .browser-resize::after {
  opacity: 1;
  height: 56px;
  margin-top: -28px;
}

.browser-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--chat-bg);
  border-radius: var(--chat-radius);
  box-shadow: var(--contour), var(--card-lift);
}

.browser-tabs {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 42px;
  padding: 7px 8px 3px;
}

.browser-tab-list {
  display: flex;
  gap: 3px;
  min-width: 0;
  overflow: hidden;
}

.browser-tab {
  position: relative;
  flex: 0 1 196px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 54px;
  height: 30px;
  padding: 0 6px 0 10px;
  border-radius: 9px;
  color: var(--fg-secondary);
  font-size: 13px;
  line-height: 1;
  cursor: default;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.browser-tab:hover {
  background: rgba(var(--fg-rgb), 0.04);
}

.browser-tab.is-active {
  background: rgba(var(--fg-rgb), 0.08);
  color: var(--fg-primary);
}

.browser-tab-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
}

.browser-tab-icon img {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  object-fit: contain;
}

.browser-tab-icon .glyph {
  width: 15px;
  height: 15px;
  opacity: 0.6;
}

.browser-spinner {
  width: 12px;
  height: 12px;
  border: 1.6px solid rgba(var(--fg-rgb), 0.18);
  border-top-color: rgba(var(--fg-rgb), 0.8);
  border-radius: 50%;
  animation: browser-spin 0.8s linear infinite;
}

@keyframes browser-spin {
  to {
    transform: rotate(360deg);
  }
}

.browser-tab-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent);
}

.browser-tab-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--fg-secondary);
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease;
}

.browser-tab-close svg {
  width: 14px;
  height: 14px;
}

.browser-tab:hover .browser-tab-close,
.browser-tab.is-active .browser-tab-close {
  opacity: 1;
}

.browser-tab-close:hover {
  background: rgba(var(--fg-rgb), 0.1);
  color: var(--fg-primary);
}

.browser-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  outline: none;
  background: none;
  color: rgba(var(--fg-rgb), var(--fg-secondary-opacity));
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.browser-icon svg {
  width: 18px;
  height: 18px;
}

.browser-icon:hover:not(:disabled) {
  background: rgba(var(--fg-rgb), 0.06);
  color: var(--fg-primary);
}

.browser-icon:active:not(:disabled) {
  transform: scale(0.9);
}

.browser-icon:disabled {
  color: var(--fg-tertiary);
  cursor: default;
}

.browser-icon:focus-visible,
.browser-tab-close:focus-visible,
.browser-pill:focus-visible {
  box-shadow: 0 0 0 2px var(--focus-ring);
}

.browser-bar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 42px;
  padding: 3px 8px 6px;
}

.browser-address {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 32px;
  margin: 0 4px;
  border-radius: 16px;
  background: rgba(var(--fg-rgb), 0.05);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.05);
  cursor: text;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.browser-address:hover {
  background: rgba(var(--fg-rgb), 0.07);
}

.browser.is-editing .browser-address {
  background: rgba(var(--fg-rgb), 0.08);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.22);
}

.browser-url,
.browser-url-view {
  width: 100%;
  padding: 0 14px;
  font: inherit;
  font-size: 13px;
  line-height: 32px;
  white-space: nowrap;
}

.browser-url {
  height: 32px;
  border: 0;
  outline: none;
  background: none;
  color: transparent;
  caret-color: var(--fg-primary);
}

.browser-url::placeholder {
  color: var(--fg-tertiary);
}

.browser.is-editing .browser-url {
  color: var(--fg-primary);
}

.browser-url::selection {
  background: rgba(var(--selection-rgb), 0.3);
  color: var(--fg-primary);
}

.browser-url-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--fg-secondary);
  pointer-events: none;
}

.browser.is-editing .browser-url-view {
  visibility: hidden;
}

.browser-url-host {
  color: var(--fg-primary);
}

.browser-url-dim {
  color: var(--fg-tertiary);
}

.browser-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 0 6px 6px;
  overflow: hidden;
  border-radius: calc(var(--chat-radius) - 4px);
  background: rgba(var(--fg-rgb), 0.02);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.05);
}

.browser-view {
  position: absolute;
  inset: 0;
  display: flex;
  width: 100%;
  height: 100%;
  border: 0;
  background: #fff;
}

.browser-view:not(.is-active) {
  visibility: hidden;
  pointer-events: none;
}

.browser-progress {
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.browser-progress::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 42%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--composer-accent-rgb)), transparent);
  animation: browser-progress 1.1s var(--motion-easing) infinite;
}

.browser.is-loading .browser-progress {
  opacity: 0.9;
}

@keyframes browser-progress {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(240%);
  }
}

.browser-empty {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  text-align: center;
}

.browser.is-blank .browser-empty {
  display: flex;
  animation: browser-fade 0.4s ease both;
}

.browser-empty .glyph-ghost {
  width: 40px;
  height: 42px;
  color: rgba(var(--fg-rgb), 0.16);
}

.browser-empty .glyph-ghost-eye {
  fill: var(--chat-bg);
}

.browser-empty p {
  max-width: 290px;
  margin: 0;
  color: var(--fg-secondary);
  font-size: 13.5px;
  line-height: 1.5;
}

@keyframes browser-fade {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

.browser-error {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 24px;
  background: var(--chat-bg);
  text-align: center;
}

.browser-error[hidden] {
  display: none;
}

.browser-error p {
  margin: 0;
}

.browser-error-title {
  color: var(--fg-primary);
  font-size: 15px;
  font-weight: 600;
}

.browser-error-code {
  margin-bottom: 10px !important;
  color: var(--fg-secondary);
  font-size: 13px;
}

.browser-pill {
  height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: 15px;
  outline: none;
  background: var(--bubble-bg);
  color: rgb(var(--bubble-fg-rgb));
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.browser-pill:hover {
  background: var(--browser-pill-hover-bg);
}

.browser-pill:active {
  transform: scale(0.96);
}

.browser-agent {
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.browser-agent::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1.5px rgba(var(--composer-accent-rgb), 0.55), inset 0 0 34px rgba(var(--composer-accent-rgb), 0.14);
  animation: browser-breathe 2.8s ease-in-out infinite;
}

@keyframes browser-breathe {
  50% {
    opacity: 0.45;
  }
}

.browser.is-driving .browser-agent {
  opacity: 1;
  pointer-events: auto;
}

.browser-badge,
.browser-user {
  position: absolute;
  top: 12px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 14px 0 11px;
  border-radius: 16px;
  background: var(--browser-glass-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.1), 0 8px 24px rgba(0, 0, 0, calc(0.35 * var(--shadow)));
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  color: var(--fg-primary);
  font-size: 12.5px;
  font-weight: 550;
  white-space: nowrap;
  transform: translateX(-50%);
}

.browser-badge .glyph-ghost {
  width: 13px;
  height: 14px;
  color: rgb(var(--composer-accent-rgb));
  animation: browser-float 2.4s ease-in-out infinite;
}

.browser-badge .glyph-ghost-eye {
  fill: var(--app-bg);
}

@keyframes browser-float {
  50% {
    transform: translateY(-1.5px);
  }
}

.browser-take {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 40px;
  padding: 0 20px;
  border-radius: 20px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, calc(0.4 * var(--shadow)));
  font-size: 14px;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 0.2s ease, transform 0.35s var(--motion-easing), background-color 0.2s ease;
}

.browser-agent:hover .browser-take,
.browser-take:focus-visible {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.browser-take:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.browser-user {
  z-index: 4;
  gap: 12px;
  padding: 0 4px 0 14px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -8px);
  transition: opacity 0.25s ease, transform 0.4s var(--motion-easing);
}

.browser-user .browser-pill {
  height: 24px;
  padding: 0 11px;
  border-radius: 12px;
  font-size: 12px;
}

.browser.is-user .browser-user {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%);
}

.browser-cursor {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.browser-cursor.is-shown {
  opacity: 1;
}

.browser-cursor-arrow {
  width: 52px;
  height: 52px;
  margin: -8px 0 0 -16px;
  pointer-events: none;
}

.browser-ripple {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.browser-ripple::after {
  content: "";
  position: absolute;
  top: -16px;
  left: -16px;
  width: 32px;
  height: 32px;
  border: 2px solid rgba(var(--composer-accent-rgb), 0.9);
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(var(--composer-accent-rgb), 0.35);
  animation: browser-ripple 0.55s var(--motion-easing) forwards;
}

@keyframes browser-ripple {
  from {
    opacity: 1;
    transform: scale(0.25);
  }

  to {
    opacity: 0;
    transform: scale(1.4);
  }
}

.browser-toast {
  position: absolute;
  z-index: 5;
  bottom: 14px;
  left: 50%;
  max-width: calc(100% - 32px);
  padding: 8px 14px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--browser-toast-bg);
  box-shadow: inset 0 0 0 1px rgba(var(--fg-rgb), 0.1), 0 10px 30px rgba(0, 0, 0, calc(0.4 * var(--shadow)));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--fg-primary);
  font-size: 12.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.3s ease, transform 0.45s var(--motion-easing);
}

.browser-toast.is-shown {
  opacity: 1;
  transform: translateX(-50%);
}

@media (prefers-reduced-motion: reduce) {
  .note-panel,
  .drop-zone,
  .drop-art .file-icon,
  .attachment-remove,
  .attachment-note,
  .media-arrow,
  .message.is-user .message-tools,
  .composer-mode-icons .mode-icon,
  .composer-add,
  .composer-mode,
  .composer-add.is-away,
  .composer-mode.is-away,
  .model-slot,
  .model-row,
  .model-name,
  .chats-folder-action,
  .chat-meta,
  .chat-time,
  .chat-action,
  .chat-title,
  .chat-guard,
  .lock-shackle,
  .lock-say > *,
  .lock-veil,
  .lock-shell,
  .lock-act,
  .lock-view,
  .lock-screen-error,
  .pass,
  .pass-track,
  .pass-dot,
  .pass-hint,
  .pass-go,
  .pass-go .glyph,
  .pass-spin,
  .trash-lid,
  .select-menu,
  .mini,
  .mini::backdrop,
  .mini-empty,
  .mini-clear,
  .mini-clear.is-shown,
  .dock-veil,
  .dock-item,
  .dock-glyph,
  .dock-dot,
  .stage-word,
  .dock-hint,
  .dock-hint.is-shown,
  .dock-item :is(.photo-sun, .photo-back, .compact-a, .compact-b, .clip-wire, .bar-a, .bar-b, .bar-c),
  .stats-remove,
  .stats-bar,
  .stats-row,
  .stats-tip,
  .browser,
  .browser-take,
  .browser-user,
  .browser-toast,
  .browser-cursor {
    transition: none;
  }

  .attachment.is-entering,
  .attachment.is-video .attachment-thumb,
  .message-tools,
  .approval,
  .approval-word,
  .approval-effect,
  .approval-place,
  .approval-quote,
  .approval-foot > *,
  .thread-compact,
  .thread-compact.is-live .thread-compact-text,
  .browser-agent::before,
  .browser-badge .glyph-ghost,
  .browser-ripple::after,
  .browser.is-blank .browser-empty {
    animation: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .main,
  .main::after,
  .composer,
  .composer-placeholder,
  .sidebar-search-shell,
  .sidebar-search-button,
  .sidebar-search.is-expanded .sidebar-search-button,
  .sidebar-search-placeholder,
  .sidebar-search-clear,
  .sidebar-search-clear::before,
  .settings,
  .settings::backdrop,
  .thread-bottom,
  .thread-bottom.is-shown,
  .welcome.is-shown,
  .welcome.is-leaving,
  .composer-folder,
  .main:not(.is-empty) .composer-folder,
  .composer-folder-icons .glyph,
  .chats-folder-body,
  .chats-folder-inner,
  .glyph-folder .folder-front,
  .glyph-bubble .bubble-dot,
  .chats-folder.is-collapsed .glyph-bubble .bubble-dot,
  .chat-dot,
  .settings-glide,
  .settings-tab-icon *,
  .general-drop,
  .general-drop svg,
  .theme-frame,
  .theme-check {
    transition: none;
  }

  .message.is-user,
  .message-status,
  .settings-tab .plug {
    animation: none;
  }

  .composer-ghost {
    animation: none;
    opacity: 0;
  }

  .markdown *,
  .markdown *::before,
  .markdown *::after {
    animation: none;
    transition: none;
  }
}