@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..700&family=Pixelify+Sans:wght@400..700&display=swap');

/*
 * Tip 012: message bubbles in six materials, with the three motions a
 * thread needs: sending, a long reply coming in, and deleting one from the
 * middle. The scene on top plays one conversation in the material named in
 * the tabs; the dark board below shows that material's CSS and lights the
 * motion being played.
 *
 * chat.js places every bubble with a transform, measured up from the field,
 * so the thread can move as one. The materials only change paint: every
 * bubble keeps the same box in each, so the motion is the same throughout.
 *
 * Corners are plain circular arcs, never superellipses: rounded rectangles,
 * capsules and circles.
 */

:where(.tip-stage, .tip-stage *, .tip-stage *::before, .tip-stage *::after) {
  --lumno-corner-shape: round;
}

.tip-stage {
  --font: 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
  --scene-h: 930px;
  --side: 48px;
  padding: 0;
  background: #141416;
  font-family: var(--font);
  font-feature-settings: 'cv11';
}

.tip-stage:has(> .tip-credit) { padding: 0; }

button { font: inherit; }

/* ---------- The scene ---------- */

.scene {
  position: absolute;
  inset: 0 0 auto;
  height: var(--scene-h);
  overflow: hidden;
}

/* One backdrop per material; chat.js fades between them. */
.wall {
  position: absolute;
  inset: 0;
  opacity: 0;
}

/* Aqua's pinstripes. */
.wall[data-for="aqua"] {
  background: repeating-linear-gradient(180deg, #f6f6f6 0 3px, #e9e9e9 3px 6px);
}

.wall[data-for="gradient"] { background: #000000; }
.wall[data-for="skeu"] { background: #f5f2e9; }
.wall[data-for="solid"] { background: #ffffff; }

/* The pixel grid shows faintly, one line every 4px cell. */
.wall[data-for="pixel"] {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 4px 4px,
    linear-gradient(180deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 4px 4px,
    #1b1e34;
}

/* ---------- The tabs ---------- */

.kinds {
  position: absolute;
  top: 36px;
  z-index: 4;
  left: 50%;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 20px;
  background: rgba(118, 118, 128, 0.14);
  backdrop-filter: blur(20px) saturate(140%);
  translate: -50% 0;
}

.scene:is([data-material="gradient"], [data-material="pixel"]) .kinds {
  background: rgba(44, 44, 48, 0.72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* Placed on the current tab by chat.js. */
.kinds-pill {
  position: absolute;
  top: 4px;
  left: 0;
  height: calc(100% - 8px);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 4px 12px -6px rgba(15, 23, 42, 0.2);
}

.kind {
  position: relative;
  padding: 13px 16px;
  color: rgba(24, 24, 27, 0.55);
  font: 600 20px/1 var(--font);
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.kind { cursor: pointer; }
.scene:is([data-material="gradient"], [data-material="pixel"]) .kind { color: rgba(255, 255, 255, 0.55); }
.kind.is-on,
.scene:is([data-material="gradient"], [data-material="pixel"]) .kind.is-on { color: #18181b; }

/* ---------- The thread ---------- */

.thread {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* Every bubble has the same box in every material: a capsule while it is
   one line, a rounded rectangle when it wraps. chat.js marks its place in
   a run of messages from the same person (data-pos: single, first, mid,
   last), and the material rounds the run as one, below. */
.bubble {
  --r: 38px;
  --r-join: 10px;
  position: absolute;
  top: 0;
  box-sizing: border-box;
  padding: 17px 26px;
  border: 2px solid transparent;
  border-radius: var(--r);
  font: 400 28px/38px var(--font);
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  transition: border-radius 200ms ease;
}

.bubble.me {
  right: var(--side);
  transform-origin: 100% 100%;
}

.bubble.them {
  left: var(--side);
  transform-origin: 0 100%;
}

/* Aqua, skeuomorphic and cirrus: where two bubbles of a run meet, the corners on
   the sender's side close up. */
.scene:is([data-material="aqua"], [data-material="skeu"], [data-material="cirrus"]) {
  & .bubble.me:is([data-pos="first"], [data-pos="mid"]) { border-bottom-right-radius: var(--r-join); }
  & .bubble.me:is([data-pos="mid"], [data-pos="last"]) { border-top-right-radius: var(--r-join); }
  & .bubble.them:is([data-pos="first"], [data-pos="mid"]) { border-bottom-left-radius: var(--r-join); }
  & .bubble.them:is([data-pos="mid"], [data-pos="last"]) { border-top-left-radius: var(--r-join); }
}

/* Solid and gradient: every bubble stays round, and the last of a run gets
   a short tail. The tail is a blob in the bubble's color, as tall as the
   corner it squares off, with a scoop of the backdrop's color cut out
   beside it, so only a curl shows past the edge. */
.scene:is([data-material="solid"], [data-material="gradient"]) .bubble {
  &::before,
  &::after {
    content: '';
    position: absolute;
    bottom: -2px;
    height: var(--r);
    opacity: 0;
    transition: opacity 160ms ease;
  }

  &::before { width: 64px; background: var(--tail); }
  /* A little taller than the blob, so no edge of it shows above. */
  &::after { width: 32px; height: calc(var(--r) + 4px); background: var(--backdrop); }

  &:is([data-pos="last"], [data-pos="single"])::before,
  &:is([data-pos="last"], [data-pos="single"])::after { opacity: 1; }

  &.me::before { right: -14px; border-bottom-left-radius: 18px 14px; border-bottom-right-radius: 3px; }
  &.me::after { right: -34px; border-bottom-left-radius: 20px 24px; }
  &.them::before { left: -14px; border-bottom-right-radius: 18px 14px; border-bottom-left-radius: 3px; }
  &.them::after { left: -34px; border-bottom-right-radius: 20px 24px; }
}

/* A long message wraps inside a fixed width, so its lines never move while
   the bubble opens around them. */
.bubble.is-long { white-space: normal; }
.bubble .text { position: relative; z-index: 1; display: block; }
.bubble.is-long .text { text-wrap: pretty; }
.bubble .w { display: inline-block; opacity: 0; }

/* The typing indicator, a dot matrix drawn by matrix.js, in the corner
   the reply grows from. */
.dots {
  position: absolute;
  left: 26px;
  bottom: 17px;
  z-index: 1;
  width: 48px;
  height: 48px;

  & canvas { display: block; width: 100%; height: 100%; }
}

/* While the reply is still being typed, only its dot matrix shows: no
   paint, edge, shadow or glass around it. */
.scene .thread .bubble.is-loading.is-long {
  border-color: transparent;
  background: none;
  box-shadow: none;
  backdrop-filter: none;

  &::before,
  &::after { display: none; }
}

.scene[data-material="pixel"] .dots canvas { image-rendering: pixelated; }

/* ---------- The menu ---------- */

.menu {
  position: absolute;
  top: 0;
  right: var(--side);
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 300px;
  padding: 8px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 2px 6px rgba(15, 23, 42, 0.08), 0 24px 60px -16px rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(30px) saturate(160%);
  color: #18181b;
  opacity: 0;
  transform-origin: 100% 0;
}

.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-radius: 20px;
  font: 500 28px/1 var(--font);
  letter-spacing: -0.01em;
}

/* Dividers are straight lines of their own, so the items' rounded corners
   never bend them. */
.menu-item + .menu-item::before {
  content: '';
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 1px;
  background: var(--divider, rgba(15, 23, 42, 0.08));
}

.menu-item[data-state]::before,
.menu-item[data-state] + .menu-item::before { opacity: 0; }

.menu-item.is-danger { color: #ff3b30; }
.menu-item[data-state] { background: rgba(255, 59, 48, 0.12); }

.menu svg,
.send svg {
  width: 30px;
  height: 30px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.scene[data-material="gradient"] .menu {
  background: rgba(40, 40, 44, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 24px 60px -16px rgba(0, 0, 0, 0.6);
  color: #f4f4f5;
}

.scene[data-material="gradient"] .menu { --divider: rgba(255, 255, 255, 0.1); }
.scene[data-material="gradient"] .menu-item.is-danger { color: #ff453a; }

/* Aqua's menu is a pinstriped sheet; the skeuomorphic one a raised panel. */
.scene[data-material="aqua"] .menu {
  border-radius: 18px;
  background: repeating-linear-gradient(180deg, rgba(250, 250, 250, 0.96) 0 3px, rgba(238, 238, 238, 0.96) 3px 6px);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.18), 0 18px 40px -12px rgba(0, 30, 80, 0.45);
  /* The items take their type from --font. */
  --font: 'Lucida Grande', 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
}

.scene[data-material="aqua"] .menu-item { border-radius: 10px; font-weight: 400; }

.scene[data-material="skeu"] .menu {
  border: 2px solid rgba(15, 23, 42, 0.14);
  background: linear-gradient(180deg, #ffffff 0%, #f2f3f5 100%);
  box-shadow: inset 0 2px 0 #ffffff, 0 2px 4px rgba(15, 23, 42, 0.08), 0 22px 44px -14px rgba(15, 23, 42, 0.4);
  backdrop-filter: none;
  --font: 'Avenir Next', 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
}

.scene[data-material="skeu"] .menu-item[data-state] {
  background: rgba(255, 59, 48, 0.1);
  box-shadow: inset 0 2px 3px rgba(120, 20, 10, 0.18);
}

/* ---------- The cursor, per material ---------- */

.tip-pointer[data-material="aqua"] svg { filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.35)); }

.tip-pointer[data-material="aqua"] .tip-pointer-label {
  border: 1px solid #1550a0;
  border-radius: 999px;
  background: linear-gradient(180deg, #74bcff 0%, #3a92f2 48%, #1c6fdc 54%, #2b84ec 78%, #8ad2ff 100%);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), 0 2px 4px rgba(0, 30, 80, 0.3);
  font-family: 'Lucida Grande', var(--font);
  text-shadow: 0 -1px 1px rgba(0, 40, 110, 0.45);
}

.tip-pointer[data-material="gradient"] svg { filter: drop-shadow(0 0 10px rgba(31, 191, 143, 0.6)); }

.tip-pointer[data-material="gradient"] .tip-pointer-label {
  background: linear-gradient(120deg, #1fbf8f, #0b7f86);
  box-shadow: 0 0 18px rgba(31, 191, 143, 0.45);
}

.tip-pointer[data-material="skeu"] svg { filter: drop-shadow(0 3px 3px rgba(15, 23, 42, 0.3)); }

.tip-pointer[data-material="skeu"] .tip-pointer-label {
  border: 2px solid #12161f;
  background: linear-gradient(180deg, #485164 0%, #273042 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.18), 0 3px 6px rgba(15, 23, 42, 0.3);
  font-family: 'Avenir Next', var(--font);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* ---------- The composer ---------- */

.composer {
  position: absolute;
  right: var(--side);
  bottom: 40px;
  left: var(--side);
  z-index: 2;
  display: flex;
  gap: 16px;
  align-items: center;
}

.field {
  position: relative;
  flex: 1;
  box-sizing: border-box;
  height: 84px;
  padding: 0 30px;
  border: 2px solid rgba(60, 60, 67, 0.2);
  border-radius: 42px;
  background: #ffffff;
  font: 400 32px/80px var(--font);
  letter-spacing: -0.012em;
  white-space: nowrap;
}

.field-hint {
  position: absolute;
  left: 30px;
  color: rgba(60, 60, 67, 0.4);
}

.field-text:not(:empty) + .field-hint { display: none; }

.send {
  display: grid;
  flex: none;
  place-items: center;
  width: 84px;
  height: 84px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: #0a84ff;
  color: #ffffff;
  transition: scale 120ms ease;
}

.send svg { width: 38px; height: 38px; stroke-width: 2.6; }
.send[data-state="pressed"] { scale: 0.9; }

/* ===================== The materials ===================== */

/* Each material sets its own type: Lucida Grande for the early Mac, a
   tighter medium Inter on the gradient, Avenir Next pressed into the keys. */
.scene[data-material="aqua"] .bubble { font-family: 'Lucida Grande', var(--font); letter-spacing: -0.01em; }
.scene[data-material="gradient"] .bubble { font-weight: 500; letter-spacing: -0.015em; }
.scene[data-material="skeu"] .bubble { font-family: 'Avenir Next', var(--font); font-weight: 500; }

/* The field types in the material's face too. */
.scene[data-material="aqua"] .composer { --font: 'Lucida Grande', 'Inter', -apple-system, 'Helvetica Neue', sans-serif; }
.scene[data-material="skeu"] .composer { --font: 'Avenir Next', 'Inter', -apple-system, 'Helvetica Neue', sans-serif; }

/* ---------- Aqua ----------
   Gel: a face that darkens past the middle and glows again at the bottom,
   a gloss over the top half, a darker edge and a soft drop. Yours is aqua
   blue, theirs graphite. */
.scene[data-material="aqua"] .bubble,
.scene[data-material="aqua"] .send {
  border-color: var(--aq-edge);
  background: var(--aq-face);
  box-shadow:
    inset 0 -14px 18px -8px var(--aq-glow),
    inset 0 2px 2px rgba(255, 255, 255, 0.5),
    0 4px 8px -2px rgba(0, 30, 80, 0.32);
}

.scene[data-material="aqua"] :is(.bubble.me, .send) {
  --aq-face: linear-gradient(180deg, #74bcff 0%, #3a92f2 48%, #1c6fdc 54%, #2b84ec 78%, #8ad2ff 100%);
  --aq-edge: #1550a0;
  --aq-glow: rgba(160, 228, 255, 0.95);
  color: #ffffff;
  text-shadow: 0 -1px 1px rgba(0, 40, 110, 0.45);
}

.scene[data-material="aqua"] .bubble.them {
  --aq-face: linear-gradient(180deg, #fdfdfe 0%, #eceef1 48%, #dcdfe4 54%, #e4e7eb 78%, #fbfcfd 100%);
  --aq-edge: #8d949f;
  --aq-glow: rgba(255, 255, 255, 0.95);
  color: #1d1d1f;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* The gloss: a white wash over the top, inset from the edge, that never
   grows taller than a line. */
.scene[data-material="aqua"] :is(.bubble, .send)::before {
  content: '';
  position: absolute;
  top: 3px;
  right: 16px;
  left: 16px;
  height: min(46%, 36px);
  border-radius: 30px 30px 18px 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.12));
  pointer-events: none;
}

.scene[data-material="aqua"] .send { position: relative; }
.scene[data-material="aqua"] .send::before { right: 12px; left: 12px; border-radius: 50% 50% 40% 40%; }
.scene[data-material="aqua"] .send svg { position: relative; filter: drop-shadow(0 -1px 1px rgba(0, 40, 110, 0.45)); }

.scene[data-material="aqua"] .field {
  border-color: #9aa1ab;
  border-radius: 42px;
  box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.18), 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ---------- Gradient ----------
   One gradient behind the whole thread: each of your bubbles shows the
   slice at its height (chat.js keeps --top in step), so a message changes
   color as it moves up. Theirs stay a flat dark gray. */
.scene[data-material="gradient"] .bubble { --backdrop: #000000; }

.scene[data-material="gradient"] .bubble.me {
  --grad: linear-gradient(180deg, #0b7f86 0%, #0d9488 28%, #10a37f 60%, #1fbf8f 100%);
  background: var(--grad) 0 calc(-1 * var(--top, 0px)) / 100% var(--scene-h);
  color: #ffffff;
}

/* The tail shows the slice at the bubble's foot (--h: its height). */
.scene[data-material="gradient"] .bubble.me::before {
  background: var(--grad) 0 calc(var(--r) - var(--top, 0px) - var(--h, 0px)) / 100% var(--scene-h);
}

.scene[data-material="gradient"] .bubble.them {
  --tail: #26262a;
  background: #26262a;
  color: #f4f4f5;
}

.scene[data-material="gradient"] .field {
  border-color: rgba(255, 255, 255, 0.12);
  background: #1c1c1f;
  color: #f4f4f5;
}

.scene[data-material="gradient"] .field-hint { color: rgba(235, 235, 245, 0.36); }
/* border-box, so the gradient also covers the transparent border instead
   of repeating its far end there. */
.scene[data-material="gradient"] .send { background: linear-gradient(160deg, #1fbf8f, #0d9488 60%, #0b7f86) border-box; }

/* ---------- Skeuomorphic ----------
   Raised like keys, from tip 001: a face lighter on top, an edge a step
   darker, a light line inside the top and a dark one at the bottom, and a
   contact shadow under a soft lift. Yours is Lumno's slate, theirs a white
   key. */
.scene[data-material="skeu"] :is(.bubble.me, .send) {
  border-color: #12161f;
  background: linear-gradient(180deg, #485164 0%, #273042 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 2px 6px rgba(255, 255, 255, 0.08),
    inset 0 -2px 0 rgba(0, 0, 0, 0.22),
    0 2px 4px rgba(15, 23, 42, 0.18),
    0 10px 22px -8px rgba(15, 23, 42, 0.36);
  color: #ffffff;
  text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.28);
}

.scene[data-material="skeu"] .bubble.them {
  border-color: rgba(15, 23, 42, 0.14);
  background: linear-gradient(180deg, #ffffff 0%, #f2f3f5 100%);
  box-shadow:
    inset 0 2px 0 #ffffff,
    inset 0 -2px 0 rgba(15, 23, 42, 0.06),
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 8px 18px -8px rgba(15, 23, 42, 0.18);
  color: #1f2937;
}

.scene[data-material="skeu"] .field {
  border-color: rgba(15, 23, 42, 0.12);
  background: linear-gradient(180deg, #ebe7dc 0%, #f3f0e7 100%);
  box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.12), 0 2px 0 rgba(255, 255, 255, 0.9);
}

.scene[data-material="skeu"] .bubble.them { text-shadow: 0 1px 0 #ffffff; }


/* ---------- Solid ---------- */
.scene[data-material="solid"] .bubble { --backdrop: #ffffff; }
.scene[data-material="solid"] .bubble.me { --tail: #0a84ff; background: #0a84ff; color: #ffffff; }
.scene[data-material="solid"] .bubble.them { --tail: #e9e9eb; background: #e9e9eb; color: #000000; }

/* ---------- The board ---------- */

.board {
  position: absolute;
  inset: var(--scene-h) 0 0;
  display: grid;
  grid-template-columns: 1fr 330px;
  align-items: start;
  gap: 52px;
  padding: 40px 60px 0;
  background: #141416;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.06);
  color: #e4e4e7;
}

.about { display: flex; flex-direction: column; min-width: 0; }

.about-no {
  margin: 0;
  color: rgba(255, 255, 255, 0.4);
  font: 500 17px/1 var(--tip-font-mono);
  letter-spacing: 0.12em;
}

.about-name {
  margin: 12px 0 0;
  color: #ffffff;
  font: 650 46px/1.05 var(--font);
  letter-spacing: -0.03em;
}

.about-use {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font: 500 22px/1.4 var(--font);
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

.code {
  margin: 20px 0 0;
  padding: 16px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
  color: #d4d4d8;
  font: 500 16.5px/1.55 var(--tip-font-mono);
  white-space: pre;
}

.code .prop { color: #8ab4f8; }
.code .val { color: #f6c177; }
.code .cmt { color: rgba(255, 255, 255, 0.38); }

.steps {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: 4px 0 0;
  list-style: none;
}

.step {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 20px;
  border-left: 3px solid rgba(255, 255, 255, 0.12);
  opacity: 0.38;
  transition: opacity 240ms ease, border-color 240ms ease;
}

.step.is-on {
  border-left-color: #0a84ff;
  opacity: 1;
}

.step b {
  color: #ffffff;
  font: 650 24px/1.2 var(--font);
  letter-spacing: -0.015em;
}

.step span {
  color: rgba(255, 255, 255, 0.72);
  font: 500 19px/1.4 var(--font);
  letter-spacing: -0.005em;
}

.tip-credit { bottom: 30px; color: rgba(255, 255, 255, 0.42); }
.tip-credit img { opacity: 0.42; }

/* ---------- Pixel ----------
   chat.js draws the bubbles on a 4px grid in a canvas; the DOM bubble only
   carries the text. Everything else gets a stepped one-cell outline, the
   box-shadow way, with square corners. */
.pixels {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  image-rendering: pixelated;
  pointer-events: none;
}

.scene[data-material="pixel"] {
  --px-line: #0e0f22;
  --px-pale: #f4f3ec;
  --px-blue: #5d70e8;
}

.scene[data-material="pixel"] .bubble {
  border-color: transparent;
  background: none;
  box-shadow: none;
  font-family: 'Pixelify Sans', var(--font);
  letter-spacing: 0.02em;

  &::before,
  &::after { display: none; }
}

.scene[data-material="pixel"] .bubble.me { color: #ffffff; text-shadow: 0 4px 0 rgba(14, 15, 34, 0.35); }
.scene[data-material="pixel"] .bubble.them { color: var(--px-line); }

.scene[data-material="pixel"] :is(.field, .send, .menu, .kinds, .kinds-pill) {
  border: 0;
  border-radius: 0;
  backdrop-filter: none;
}

.scene[data-material="pixel"] .field {
  background: var(--px-pale);
  box-shadow: 0 -4px 0 var(--px-line), 0 4px 0 var(--px-line), -4px 0 0 var(--px-line), 4px 0 0 var(--px-line);
  color: var(--px-line);
  font-family: 'Pixelify Sans', var(--font);
}

.scene[data-material="pixel"] .send {
  width: 76px;
  height: 76px;
  margin-left: 4px;
  background: var(--px-blue);
  box-shadow: 0 -4px 0 var(--px-line), 0 4px 0 var(--px-line), -4px 0 0 var(--px-line), 4px 0 0 var(--px-line),
    inset -4px -4px 0 rgba(14, 15, 34, 0.3), inset 4px 4px 0 rgba(255, 255, 255, 0.3);
}

.scene[data-material="pixel"] .send svg { stroke-linecap: square; stroke-linejoin: miter; stroke-width: 3.2; }

.scene[data-material="pixel"] .menu {
  --divider: rgba(14, 15, 34, 0.25);
  background: var(--px-pale);
  box-shadow: 0 -4px 0 var(--px-line), 0 4px 0 var(--px-line), -4px 0 0 var(--px-line), 4px 0 0 var(--px-line),
    8px 12px 0 rgba(0, 0, 0, 0.35);
  color: var(--px-line);
  --font: 'Pixelify Sans', 'Inter', -apple-system, 'Helvetica Neue', sans-serif;
}

.scene[data-material="pixel"] .menu-item { border-radius: 0; font-weight: 500; }
.scene[data-material="pixel"] .menu-item[data-state] { background: #ff5a4f; color: #ffffff; }
.scene[data-material="pixel"] .menu svg { stroke-linecap: square; stroke-linejoin: miter; }

.scene[data-material="pixel"] .kinds { background: #2a2e4f; box-shadow: 0 -4px 0 var(--px-line), 0 4px 0 var(--px-line), -4px 0 0 var(--px-line), 4px 0 0 var(--px-line); }
.scene[data-material="pixel"] .kinds-pill { background: var(--px-pale); box-shadow: none; }
.scene[data-material="pixel"] .kind { font-family: 'Pixelify Sans', var(--font); font-weight: 500; }

.tip-pointer[data-material="pixel"] svg { filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, 0.35)); }

.tip-pointer[data-material="pixel"] .tip-pointer-label {
  border-radius: 0;
  background: var(--px-blue, #5d70e8);
  box-shadow: 0 -4px 0 #0e0f22, 0 4px 0 #0e0f22, -4px 0 0 #0e0f22, 4px 0 0 #0e0f22;
  font-family: 'Pixelify Sans', var(--font);
  font-weight: 500;
}

/* ---------- Cirrus ----------
   Thin frosted panes over a rendered sky (media/sky.webp, made by
   clouds.js), with no edge of
   their own. Each pane blurs what is behind it, then lays a light tint and
   a fine grain on top.
   --frost (0 to 1, from chat.js) is how far the glass has frosted over. */
.wall[data-for="cirrus"] {
  overflow: hidden;
  background: linear-gradient(180deg, #2a72e0 0%, #7fb4f2 45%, #e9f0f8 70%, #f4f7fb 100%);
}

.sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 1300px;
  height: 100%;
}

.scene[data-material="cirrus"] {
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scene[data-material="cirrus"] .bubble {
  --frost: 1;
  border-color: transparent;
  background: none;
  box-shadow: none;
  backdrop-filter: blur(calc(var(--frost) * 26px)) saturate(calc(100% + var(--frost) * 30%));

  /* The tint and grain, laid over the blur as the glass frosts. */
  &::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: var(--grain), var(--tint);
    opacity: var(--frost);
  }
}

.scene[data-material="cirrus"] .bubble.me { --tint: rgba(46, 128, 232, 0.34); color: #ffffff; }
.scene[data-material="cirrus"] .bubble.them { --tint: rgba(104, 134, 168, 0.34); color: #ffffff; }

.scene[data-material="cirrus"] .field {
  border-color: transparent;
  background: var(--grain), rgba(104, 134, 168, 0.3);
  box-shadow: none;
  backdrop-filter: blur(26px) saturate(130%);
  color: #ffffff;
}

.scene[data-material="cirrus"] .field-hint { color: rgba(255, 255, 255, 0.7); }

.scene[data-material="cirrus"] .send {
  border-color: transparent;
  background: var(--grain), rgba(46, 128, 232, 0.4);
  box-shadow: none;
  backdrop-filter: blur(26px) saturate(130%);
}

.scene[data-material="cirrus"] .menu {
  --frost: 1;
  --divider: rgba(255, 255, 255, 0.2);
  background: var(--grain), rgba(70, 98, 134, 0.52);
  box-shadow: none;
  backdrop-filter: blur(calc(var(--frost) * 36px)) saturate(130%);
  color: #ffffff;
}

/* A soft coral, so Delete reads on the blue-gray glass without clashing. */
.scene[data-material="cirrus"] .menu-item.is-danger { color: #ff8a7e; }
.scene[data-material="cirrus"] .menu-item[data-state] { background: rgba(255, 140, 128, 0.22); }

.scene[data-material="cirrus"] .kinds {
  background: var(--grain), rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(24px) saturate(160%);
}

.tip-pointer[data-material="cirrus"] .tip-pointer-label {
  background: rgba(31, 111, 214, 0.78);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 6px 16px -6px rgba(20, 50, 100, 0.5);
  backdrop-filter: blur(16px);
}