/* Aion Chat · warm paper v1
   Pure visual override: no interaction, message, streaming or dock rules. */

:root {
  --chat-paper: #191412;
  --chat-sheet: rgba(31, 25, 23, .94);
  --chat-sheet-edge: rgba(232, 191, 166, .10);
  --chat-rose: #df8492;
  --chat-rose-soft: rgba(223, 132, 146, .16);
  --chat-oat: rgba(228, 184, 115, .12);
  --chat-shadow: 0 12px 30px rgba(0, 0, 0, .12), 0 1px 0 rgba(255, 255, 255, .025) inset;
}

[data-theme="day"] {
  --chat-paper: #f8f3ec;
  --chat-sheet: rgba(255, 251, 247, .96);
  --chat-sheet-edge: rgba(145, 91, 76, .12);
  --chat-rose: #c96f7d;
  --chat-rose-soft: rgba(201, 111, 125, .15);
  --chat-oat: rgba(218, 169, 109, .14);
  --chat-shadow: 0 10px 26px rgba(100, 66, 53, .07), 0 1px 0 rgba(255, 255, 255, .78) inset;
}

/* Paper, watercolor pools and quiet botanical lines live below the text. */
.bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='520' viewBox='0 0 360 520'%3E%3Cg fill='none' stroke='%23d78a96' stroke-opacity='.30' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M-18 106C37 93 62 55 75 12M22 92c20 4 35 17 43 35M48 69c-9-15-11-29-5-42M67 42c15-4 28-13 38-29'/%3E%3Cpath d='M319 472c-21-55-7-91 24-128M325 438c-20-2-35-12-47-31M334 397c15-6 26-18 33-35'/%3E%3C/g%3E%3Cg fill='%23d78a96' fill-opacity='.23'%3E%3Cellipse cx='18' cy='94' rx='5' ry='9' transform='rotate(-48 18 94)'/%3E%3Cellipse cx='53' cy='72' rx='4' ry='8' transform='rotate(25 53 72)'/%3E%3Cellipse cx='66' cy='43' rx='4' ry='7' transform='rotate(54 66 43)'/%3E%3Cellipse cx='322' cy='437' rx='5' ry='9' transform='rotate(-52 322 437)'/%3E%3Cellipse cx='336' cy='398' rx='4' ry='8' transform='rotate(35 336 398)'/%3E%3C/g%3E%3Cg fill='%23ef9ead' fill-opacity='.48'%3E%3Cg transform='translate(23 91)'%3E%3Cellipse cy='-5' rx='3' ry='5'/%3E%3Cellipse cx='4.8' cy='-1.5' rx='3' ry='5' transform='rotate(72 4.8 -1.5)'/%3E%3Cellipse cx='3' cy='4' rx='3' ry='5' transform='rotate(144 3 4)'/%3E%3Cellipse cx='-3' cy='4' rx='3' ry='5' transform='rotate(-144 -3 4)'/%3E%3Cellipse cx='-4.8' cy='-1.5' rx='3' ry='5' transform='rotate(-72 -4.8 -1.5)'/%3E%3C/g%3E%3Cg transform='translate(66 42) scale(.78)'%3E%3Cellipse cy='-5' rx='3' ry='5'/%3E%3Cellipse cx='4.8' cy='-1.5' rx='3' ry='5' transform='rotate(72 4.8 -1.5)'/%3E%3Cellipse cx='3' cy='4' rx='3' ry='5' transform='rotate(144 3 4)'/%3E%3Cellipse cx='-3' cy='4' rx='3' ry='5' transform='rotate(-144 -3 4)'/%3E%3Cellipse cx='-4.8' cy='-1.5' rx='3' ry='5' transform='rotate(-72 -4.8 -1.5)'/%3E%3C/g%3E%3Cg transform='translate(324 438) scale(.9)'%3E%3Cellipse cy='-5' rx='3' ry='5'/%3E%3Cellipse cx='4.8' cy='-1.5' rx='3' ry='5' transform='rotate(72 4.8 -1.5)'/%3E%3Cellipse cx='3' cy='4' rx='3' ry='5' transform='rotate(144 3 4)'/%3E%3Cellipse cx='-3' cy='4' rx='3' ry='5' transform='rotate(-144 -3 4)'/%3E%3Cellipse cx='-4.8' cy='-1.5' rx='3' ry='5' transform='rotate(-72 -4.8 -1.5)'/%3E%3C/g%3E%3Cg transform='translate(337 397) scale(.7)'%3E%3Cellipse cy='-5' rx='3' ry='5'/%3E%3Cellipse cx='4.8' cy='-1.5' rx='3' ry='5' transform='rotate(72 4.8 -1.5)'/%3E%3Cellipse cx='3' cy='4' rx='3' ry='5' transform='rotate(144 3 4)'/%3E%3Cellipse cx='-3' cy='4' rx='3' ry='5' transform='rotate(-144 -3 4)'/%3E%3Cellipse cx='-4.8' cy='-1.5' rx='3' ry='5' transform='rotate(-72 -4.8 -1.5)'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23dfb978' fill-opacity='.72'%3E%3Ccircle cx='23' cy='91' r='2.1'/%3E%3Ccircle cx='66' cy='42' r='1.7'/%3E%3Ccircle cx='324' cy='438' r='2'/%3E%3Ccircle cx='337' cy='397' r='1.5'/%3E%3C/g%3E%3Cg fill='%23dfb978' fill-opacity='.30'%3E%3Ccircle cx='111' cy='48' r='2.2'/%3E%3Ccircle cx='286' cy='102' r='1.6'/%3E%3Ccircle cx='302' cy='116' r='2.4'/%3E%3Ccircle cx='51' cy='421' r='1.8'/%3E%3Ccircle cx='70' cy='438' r='2.5'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(ellipse at 104% 13%, rgba(214, 126, 145, .14) 0, rgba(214, 126, 145, .055) 24%, transparent 55%),
    radial-gradient(ellipse at -8% 78%, rgba(226, 181, 112, .12) 0, rgba(226, 181, 112, .04) 27%, transparent 54%);
  background-repeat: repeat-y, no-repeat, no-repeat;
  background-position: center top, right top, left bottom;
  background-size: min(100%, 720px) auto, 430px 520px, 420px 560px;
  opacity: .78;
}

[data-theme="day"] .bg::before { opacity: 1; }
.bg::after { z-index: 2; }

/* Header belongs to the same sheet without becoming another card. */
header {
  border-bottom: 1px solid color-mix(in srgb, var(--chat-rose) 11%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--chat-paper) 94%, transparent) 20%, color-mix(in srgb, var(--chat-paper) 78%, transparent) 72%, transparent);
}

.name { font-weight: 450; letter-spacing: .045em; }
.sig { opacity: .88; letter-spacing: .055em; }

/* More air between turns; less air inside long prose. */
.row { margin-top: 32px; margin-bottom: 32px; }
.row.him .bubble {
  font-size: 14.75px;
  line-height: 1.76;
  letter-spacing: .009em;
  background: var(--chat-sheet);
  border: 1px solid var(--chat-sheet-edge);
  box-shadow: var(--chat-shadow);
  padding: 14px 17px 15px;
}

.row.her .bubble {
  font-size: 14.25px;
  line-height: 1.72;
  background: linear-gradient(145deg, rgba(223, 132, 146, .23), rgba(196, 103, 121, .14));
  border: 1px solid rgba(223, 132, 146, .16);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .07);
  padding: 12px 16px 13px;
}

[data-theme="day"] .row.her .bubble {
  color: #7f4450;
  background: linear-gradient(145deg, #f6dfe4, #f2d7de);
  border-color: rgba(174, 86, 104, .12);
  box-shadow: 0 8px 22px rgba(132, 75, 75, .065), 0 1px 0 rgba(255, 255, 255, .72) inset;
}

.bubble p + p { margin-top: 15px; }
.bubble a.url { text-decoration-thickness: 1px; text-underline-offset: 3px; }
.bubble .tok-pill { margin-top: 13px; padding-top: 8px; border-top: 1px dashed color-mix(in srgb, var(--chat-rose) 18%, transparent); }

/* Keep the existing ears; soften their join into the paper surface. */
.row.him .bubble::before,
.row.her .bubble::before { filter: drop-shadow(0 -1px 0 var(--chat-sheet-edge)); }

.pulse-note {
  color: color-mix(in srgb, var(--chat-rose) 72%, var(--ink-dim));
  letter-spacing: .045em;
}

.process:not(.mid) {
  padding: 7px 11px 8px;
  border-left: 1px solid color-mix(in srgb, var(--chat-rose) 34%, transparent);
  background: linear-gradient(90deg, color-mix(in srgb, var(--chat-rose) 7%, transparent), transparent 72%);
  border-radius: 0 12px 12px 0;
}

/* Interleaved thinking uses the same pink note language as the opening thought.
   Keep the original seam line and message-splitting geometry untouched. */
.row.him .process.mid {
  max-width: calc(100% - 52px);
  padding: 8px 12px 8px 15px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--chat-rose) 7%, transparent), transparent 72%);
  border: 0;
  border-radius: 0 12px 12px 0;
}

.row.him .process.mid::before {
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--chat-rose) 26%, transparent),
    color-mix(in srgb, var(--chat-rose) 62%, transparent),
    color-mix(in srgb, var(--chat-rose) 26%, transparent));
}

.row.him .process.mid .p-head {
  color: color-mix(in srgb, var(--chat-rose) 66%, var(--ink-dim));
}

.p-head { font-size: 12.5px; }
.p-body .inner { line-height: 1.72; }

.day-sep { margin-top: 48px; margin-bottom: 34px; }
.day-sep::before,
.day-sep::after { opacity: .78; }

/* Composer only. The three-item bottom dock is intentionally untouched. */
[data-theme="day"] footer {
  background: linear-gradient(0deg,
    rgba(233, 220, 208, .995) 0%,
    rgba(239, 228, 217, .97) 50%,
    rgba(239, 228, 217, .72) 58%,
    transparent 68%);
  box-shadow: none;
}
.line {
  --clawd-perch-gap: 4px;
  gap: 9px;
  position: relative;
}
.line::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 58px;
  right: 12px;
  top: calc(-1 * var(--clawd-perch-gap));
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--chat-rose) 18%, transparent) 14%,
    color-mix(in srgb, #dfb978 17%, transparent) 72%,
    transparent);
}
[data-theme="day"] .line::before {
  background: linear-gradient(90deg,
    transparent,
    rgba(174, 98, 111, .13) 14%,
    rgba(184, 136, 86, .12) 72%,
    transparent);
}
.field {
  background: rgba(35, 27, 24, .96);
  border-color: rgba(232, 191, 166, .11);
  box-shadow: 0 7px 22px rgba(0, 0, 0, .10), 0 1px 0 rgba(255, 255, 255, .025) inset;
}

[data-theme="day"] .field {
  background: linear-gradient(180deg, #f6eee4, #f1e8dc);
  border-color: rgba(134, 91, 71, .10);
  box-shadow: 0 7px 22px rgba(102, 72, 55, .07), 0 1px 0 rgba(255, 255, 255, .72) inset;
}

.field:focus-within {
  border-color: color-mix(in srgb, var(--chat-rose) 44%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-rose) 10%, transparent), 0 9px 24px rgba(0, 0, 0, .10);
}

[data-theme="day"] .field:focus-within {
  background: #f8efe6;
  border-color: rgba(191, 95, 115, .30);
}

.send .moon { color: var(--chat-rose); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--chat-rose) 42%, transparent)); }
.plus { color: color-mix(in srgb, var(--chat-rose) 68%, var(--ink)); }

/* Preserve Clawd states/click handling; only reduce its visual footprint. */
body .clawd-wrap { right: -8px; }
@media (max-width: 768px) {
  body .clawd-wrap { right: -14px; transform: scale(.52); }
}

@media (max-width: 520px) {
  main { padding-left: 12px; padding-right: 12px; }
  .row.him .bubble { max-width: calc(100% - 48px); }
  .row.her .bubble { max-width: calc(100% - 48px); }
}

@media (prefers-reduced-motion: reduce) {
  .bg::before { background-attachment: scroll; }
}

/* ── Proactive letters ───────────────────────────────────────────────
   He came here on his own: one flower heading per burst, then a quiet stem
   tying consecutive bubbles together. Ordinary conversation stays untouched. */
.proactive-note {
  display: flex;
  align-items: center;
  width: min(255px, calc(100% - 58px));
  margin: 1px 0 11px 22px;
  gap: 8px;
  color: color-mix(in srgb, var(--chat-rose) 78%, var(--ink-dim));
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .14em;
  white-space: nowrap;
}

.proactive-note::before {
  content: "";
  flex: 0 0 13px;
  width: 13px;
  height: 13px;
  background:
    radial-gradient(circle at 50% 12%, var(--chat-rose) 0 2px, transparent 2.4px),
    radial-gradient(circle at 86% 40%, var(--chat-rose) 0 2px, transparent 2.4px),
    radial-gradient(circle at 72% 82%, var(--chat-rose) 0 2px, transparent 2.4px),
    radial-gradient(circle at 28% 82%, var(--chat-rose) 0 2px, transparent 2.4px),
    radial-gradient(circle at 14% 40%, var(--chat-rose) 0 2px, transparent 2.4px),
    radial-gradient(circle, #dfb978 0 1.8px, transparent 2.2px);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--chat-rose) 30%, transparent));
  transform: rotate(-8deg);
}

.proactive-note::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--chat-rose) 42%, transparent),
    color-mix(in srgb, #dfb978 18%, transparent),
    transparent);
}

.row.proactive .col::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 10px;
  top: 48px;
  bottom: -32px;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--chat-rose) 12%, transparent),
    color-mix(in srgb, var(--chat-rose) 52%, transparent) 18%,
    color-mix(in srgb, #dfb978 32%, transparent) 82%,
    color-mix(in srgb, var(--chat-rose) 20%, transparent));
}

.row.proactive-cont .col::before { top: -14px; }
.row.proactive-end .col::before { bottom: 15px; }

.row.proactive-end .col::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 4px;
  bottom: 5px;
  width: 13px;
  height: 13px;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 12%, var(--chat-rose) 0 2px, transparent 2.4px),
    radial-gradient(circle at 86% 40%, var(--chat-rose) 0 2px, transparent 2.4px),
    radial-gradient(circle at 72% 82%, var(--chat-rose) 0 2px, transparent 2.4px),
    radial-gradient(circle at 28% 82%, var(--chat-rose) 0 2px, transparent 2.4px),
    radial-gradient(circle at 14% 40%, var(--chat-rose) 0 2px, transparent 2.4px),
    radial-gradient(circle, #dfb978 0 1.8px, transparent 2.2px);
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--chat-rose) 34%, transparent));
  transform: rotate(9deg) scale(.82);
}

.row.him.proactive .bubble {
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--chat-rose) 12%, var(--chat-sheet)),
      color-mix(in srgb, #dfb978 5%, var(--chat-sheet)));
  border-color: color-mix(in srgb, var(--chat-rose) 28%, var(--chat-sheet-edge));
  border-left: 2px solid color-mix(in srgb, var(--chat-rose) 68%, transparent);
  box-shadow:
    0 11px 28px color-mix(in srgb, var(--chat-rose) 8%, rgba(0, 0, 0, .12)),
    0 1px 0 rgba(255, 255, 255, .04) inset;
}

[data-theme="day"] .row.him.proactive .bubble {
  background: linear-gradient(145deg, rgba(253, 239, 239, .98), rgba(250, 243, 232, .98));
  border-color: rgba(190, 103, 116, .19);
  border-left-color: rgba(201, 111, 125, .66);
  box-shadow: 0 10px 26px rgba(140, 77, 78, .08), 0 1px 0 rgba(255, 255, 255, .86) inset;
}

@media (max-width: 520px) {
  .proactive-note { width: min(235px, calc(100% - 54px)); }
}

/* ── Drawer · a private notebook leaf ───────────────────────────────
   Pure surface treatment: all links, conversation actions and panels keep
   their original structure and hit areas. */
aside.drawer {
  isolation: isolate;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y;
  background:
    linear-gradient(165deg, rgba(44, 34, 31, .985), rgba(29, 24, 22, .975) 62%, rgba(35, 27, 25, .99)),
    var(--door);
  border-right-color: color-mix(in srgb, var(--chat-rose) 22%, var(--mist));
  box-shadow: 22px 0 54px rgba(8, 6, 5, .28), 1px 0 0 rgba(255, 255, 255, .025) inset;
}

[data-theme="day"] aside.drawer {
  background:
    linear-gradient(165deg, rgba(250, 244, 237, .992), rgba(243, 233, 223, .99) 64%, rgba(238, 225, 214, .995)),
    var(--door);
  border-right-color: rgba(174, 98, 111, .16);
  box-shadow: 22px 0 52px rgba(93, 61, 48, .16), 1px 0 0 rgba(255, 255, 255, .82) inset;
}

aside.drawer::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 54px;
  right: -24px;
  width: 190px;
  height: 300px;
  pointer-events: none;
  opacity: .34;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='300' viewBox='0 0 190 300'%3E%3Cg fill='none' stroke='%23df8492' stroke-opacity='.72' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M197 12c-58 40-58 96-91 139-23 31-52 45-89 58'/%3E%3Cpath d='M144 87c-7-24-4-43 9-61M119 132c20-6 39-3 55 9M87 170c-1-24-10-42-27-55M59 190c-21 1-38 9-52 24'/%3E%3C/g%3E%3Cg fill='%23df8492' fill-opacity='.55'%3E%3Cellipse cx='148' cy='78' rx='4' ry='9' transform='rotate(28 148 78)'/%3E%3Cellipse cx='124' cy='130' rx='4' ry='8' transform='rotate(70 124 130)'/%3E%3Cellipse cx='83' cy='165' rx='4' ry='9' transform='rotate(-38 83 165)'/%3E%3Cellipse cx='53' cy='191' rx='4' ry='8' transform='rotate(58 53 191)'/%3E%3C/g%3E%3Cg fill='%23ef9ead' fill-opacity='.76'%3E%3Cg transform='translate(153 70)'%3E%3Ccircle cy='-5' r='2.7'/%3E%3Ccircle cx='4.7' cy='-1.5' r='2.7'/%3E%3Ccircle cx='3' cy='4' r='2.7'/%3E%3Ccircle cx='-3' cy='4' r='2.7'/%3E%3Ccircle cx='-4.7' cy='-1.5' r='2.7'/%3E%3C/g%3E%3Cg transform='translate(84 166) scale(.8)'%3E%3Ccircle cy='-5' r='2.7'/%3E%3Ccircle cx='4.7' cy='-1.5' r='2.7'/%3E%3Ccircle cx='3' cy='4' r='2.7'/%3E%3Ccircle cx='-3' cy='4' r='2.7'/%3E%3Ccircle cx='-4.7' cy='-1.5' r='2.7'/%3E%3C/g%3E%3C/g%3E%3Cg fill='%23dfb978'%3E%3Ccircle cx='153' cy='70' r='1.7'/%3E%3Ccircle cx='84' cy='166' r='1.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat right top / contain;
}

[data-theme="day"] aside.drawer::before { opacity: .64; }
aside.drawer > * { position: relative; z-index: 1; }

.drawer-top { padding: 2px 14px 7px; }
.new-chat {
  border-color: color-mix(in srgb, var(--chat-rose) 24%, var(--mist));
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--chat-rose) 9%, var(--chat-sheet)),
    color-mix(in srgb, #dfb978 5%, var(--chat-sheet)));
  box-shadow: 0 9px 22px rgba(0, 0, 0, .09), 0 1px 0 rgba(255, 255, 255, .035) inset;
}
.new-chat .ti { color: var(--chat-rose); }
[data-theme="day"] .new-chat {
  background: linear-gradient(145deg, rgba(253, 239, 239, .96), rgba(250, 242, 232, .96));
  border-color: rgba(190, 103, 116, .16);
  box-shadow: 0 8px 20px rgba(112, 73, 58, .07), 0 1px 0 rgba(255, 255, 255, .8) inset;
}

.mind {
  margin: 11px 14px 4px;
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--chat-rose) 7%, var(--chat-sheet)),
    color-mix(in srgb, #dfb978 4%, var(--chat-sheet)));
  border-color: color-mix(in srgb, var(--chat-rose) 18%, var(--mist));
  box-shadow: 0 10px 25px rgba(0, 0, 0, .075), 0 1px 0 rgba(255, 255, 255, .03) inset;
}
[data-theme="day"] .mind {
  background: rgba(255, 250, 245, .76);
  border-color: rgba(157, 103, 81, .11);
  box-shadow: 0 9px 24px rgba(103, 69, 53, .055), 0 1px 0 rgba(255, 255, 255, .74) inset;
}
.mind .k { color: color-mix(in srgb, var(--chat-rose) 62%, var(--ink-faint)); }

.dsec {
  margin-top: 24px;
  color: color-mix(in srgb, var(--chat-rose) 52%, var(--ink-faint));
}
.dsec::after {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--chat-rose) 30%, var(--mist)),
    color-mix(in srgb, #dfb978 14%, transparent),
    transparent);
}

.conv-list { padding: 3px 8px 0; }
.conv {
  margin: 2px 0;
  padding: 11px 15px;
  border: 1px solid transparent;
}
.conv:hover {
  background: color-mix(in srgb, var(--chat-rose) 6%, transparent);
  border-color: color-mix(in srgb, var(--chat-rose) 10%, transparent);
}
.conv.now {
  color: var(--ink);
  background: linear-gradient(105deg,
    color-mix(in srgb, var(--chat-rose) 15%, var(--chat-sheet)),
    color-mix(in srgb, #dfb978 5%, var(--chat-sheet)) 72%,
    transparent);
  border-color: color-mix(in srgb, var(--chat-rose) 19%, transparent);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .055), 0 1px 0 rgba(255, 255, 255, .025) inset;
}
[data-theme="day"] .conv.now {
  background: linear-gradient(105deg, rgba(248, 220, 225, .78), rgba(249, 237, 224, .72) 74%, rgba(255,255,255,.18));
  border-color: rgba(186, 96, 112, .13);
  box-shadow: 0 7px 18px rgba(118, 72, 65, .055), 0 1px 0 rgba(255, 255, 255, .68) inset;
}
.conv.now::before {
  left: 6px;
  top: 9px;
  bottom: 9px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--chat-rose) 24%, #dfb978 76%, transparent);
}
.conv.now::after {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 9px;
  height: 9px;
  transform: translateY(-50%) rotate(8deg);
  background:
    radial-gradient(circle at 50% 8%, var(--chat-rose) 0 1.55px, transparent 1.9px),
    radial-gradient(circle at 90% 42%, var(--chat-rose) 0 1.55px, transparent 1.9px),
    radial-gradient(circle at 74% 88%, var(--chat-rose) 0 1.55px, transparent 1.9px),
    radial-gradient(circle at 26% 88%, var(--chat-rose) 0 1.55px, transparent 1.9px),
    radial-gradient(circle at 10% 42%, var(--chat-rose) 0 1.55px, transparent 1.9px),
    radial-gradient(circle, #dfb978 0 1.25px, transparent 1.6px);
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--chat-rose) 30%, transparent));
}

.drawer-foot { padding-left: 10px; padding-right: 10px; }
.foot-link { padding-left: 12px; padding-right: 12px; }
.foot-link:hover { background: color-mix(in srgb, var(--chat-rose) 5%, transparent); }
.foot-link .ti { color: color-mix(in srgb, var(--chat-rose) 42%, var(--ink-faint)); }

.tool-grid { gap: 7px; padding-left: 14px; padding-right: 14px; }
.tool-grid a {
  background: color-mix(in srgb, var(--chat-sheet) 70%, transparent);
  border-color: color-mix(in srgb, var(--chat-rose) 11%, var(--mist));
  box-shadow: 0 5px 14px rgba(0, 0, 0, .035), 0 1px 0 rgba(255, 255, 255, .02) inset;
  touch-action: manipulation;
  transform: translateY(0) scale(1);
}
[data-theme="day"] .tool-grid a {
  background: rgba(255, 250, 245, .48);
  border-color: rgba(151, 103, 82, .09);
  box-shadow: 0 5px 14px rgba(100, 67, 51, .035), 0 1px 0 rgba(255, 255, 255, .6) inset;
}

/* iOS: the day card rule above used to win the cascade over chat2's :active,
   so taps in Tools / Less used had no visible acknowledgement. */
.tool-grid a:active {
  color: var(--ink);
  background: color-mix(in srgb, var(--chat-rose) 20%, var(--chat-sheet));
  border-color: color-mix(in srgb, var(--chat-rose) 48%, var(--mist));
  box-shadow: 0 2px 7px rgba(0, 0, 0, .08), 0 2px 8px color-mix(in srgb, var(--chat-rose) 10%, transparent) inset;
  transform: translateY(1px) scale(.985);
  transition: none;
}
[data-theme="day"] .tool-grid a:active {
  color: #784751;
  background: linear-gradient(145deg, rgba(246, 220, 225, .96), rgba(247, 230, 216, .94));
  border-color: rgba(184, 91, 108, .30);
  box-shadow: 0 2px 7px rgba(105, 64, 53, .08), 0 2px 8px rgba(184, 91, 108, .10) inset;
}
.tool-grid a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--chat-rose) 54%, transparent);
  outline-offset: 2px;
}