/* ============================================================
   SHWETA RANI — PORTFOLIO AGENT
   A chat you have on warm paper. Fraunces + IBM Plex Mono.
   ============================================================ */

:root {
  --paper:      #F5F0E4;
  --paper-2:    #ECE5D1;
  --ink:        #211D14;
  --ink-2:      #6E6551;
  --rule:       rgba(33, 29, 20, 0.16);
  --rule-soft:  rgba(33, 29, 20, 0.07);
  --accent:     #BC3E14;
  --accent-soft:rgba(188, 62, 20, 0.09);
  --ok:         #4A7A3A;
  --serif: "Fraunces", "Georgia", serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  font-family: var(--serif);
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 24px 24px;
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  display: grid;
  grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
  overflow: hidden;
}

::selection { background: var(--accent); color: var(--paper); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.grain {
  position: fixed; inset: 0; z-index: 70; pointer-events: none;
  opacity: 0.2; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.13 0 0 0 0 0.11 0 0 0 0 0.08 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* ============ RAIL ============ */
.rail {
  display: flex; flex-direction: column; gap: 1.3rem;
  padding: clamp(1.4rem, 3vh, 2.2rem) clamp(1.2rem, 2.5vw, 2rem);
  border-right: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper-2) 40%, transparent);
  overflow-y: auto;
  position: relative;
}

.rail-top { position: relative; }

.rail-mark {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.1em; margin-bottom: 1.1rem;
}
.rail-mark span { color: var(--ink-2); font-weight: 400; }

.rail-stamp {
  position: absolute; top: 1.1rem; right: -0.4rem;
  width: 92px; aspect-ratio: 1;
  color: var(--accent); opacity: 0.85;
  mix-blend-mode: multiply; transform: rotate(-8deg);
  pointer-events: none;
}
.rail-stamp svg { width: 100%; height: 100%; animation: spin 28s linear infinite; }
.rail-stamp text {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.2em; fill: currentColor;
}
.rail-stamp .stamp-core {
  font-family: var(--serif); font-size: 27px; font-style: italic; font-weight: 600;
  letter-spacing: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }

.rail-name {
  font-size: clamp(2.4rem, 3.2vw, 3.1rem); font-weight: 540;
  font-variation-settings: "opsz" 144;
  line-height: 0.95; letter-spacing: -0.015em; margin-bottom: 0.8rem;
}
.rail-name em { font-style: italic; font-weight: 480; color: var(--accent); }

.rail-role {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600;
  letter-spacing: 0.11em; margin-bottom: 0.9rem;
}
.rail-role b { color: var(--accent); }
.rail-arrow {
  flex: 0 0 26px; height: 1px; position: relative;
  background-image: linear-gradient(90deg, var(--ink) 55%, transparent 45%);
  background-size: 8px 1px;
  animation: march 0.9s linear infinite;
}
.rail-arrow::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border-left: 6px solid var(--ink);
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
@keyframes march { to { background-position-x: 8px; } }

.rail-bio {
  font-size: 0.95rem; max-width: 30ch; margin-bottom: 1rem;
  color: color-mix(in srgb, var(--ink) 85%, var(--paper));
}

.rail-cta {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.12em; cursor: pointer;
  padding: 0.7rem 1rem;
  background: var(--ink); color: var(--paper);
  border: 1px solid var(--ink); border-radius: 2px;
  box-shadow: 3px 3px 0 var(--accent-soft);
  transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
  margin-bottom: 1rem;
}
.rail-cta:hover { background: var(--accent); border-color: var(--accent); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--accent-soft); }
.rail-cta i { font-style: normal; transition: transform 0.2s; }
.rail-cta:hover i { transform: translateX(3px); }

.rail-stats { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; }
.rail-stats li {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.08em;
  color: var(--ink-2); padding: 0.3rem 0.5rem;
  border: 1px solid var(--rule); border-radius: 2px; background: var(--paper);
}
.rail-stats b { color: var(--accent); font-weight: 600; }

.rail-label {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600;
  letter-spacing: 0.16em; color: var(--ink-2); margin-bottom: 0.5rem;
}
.rail-topics { display: flex; flex-direction: column; align-items: stretch; }
.rail-topics button {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.05em;
  text-align: left; padding: 0.55rem 0.6rem; cursor: pointer;
  background: none; border: none; border-bottom: 1px dashed var(--rule);
  color: var(--ink); position: relative;
  transition: background 0.2s, color 0.2s, padding-left 0.25s;
}
.rail-topics button span { color: var(--accent); font-weight: 600; margin-right: 0.4rem; }
.rail-topics button:hover, .rail-topics button:focus-visible {
  background: var(--accent-soft); color: var(--accent); padding-left: 0.9rem;
}

.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0.7rem; }
.rail-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.rail-links a {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.1em; color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.12rem;
  transition: color 0.2s, border-color 0.2s;
}
.rail-links a:hover { color: var(--accent); border-color: var(--accent); }

.rail-status {
  display: flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--ink-2);
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-2); flex: none; }
.dot.ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(74,122,58,0.18); animation: pulse 2.4s ease infinite; }
.dot.warm { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); animation: pulse 2.4s ease infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px transparent; } }

.rail-colophon { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.12em; color: var(--ink-2); }

/* ============ CHAT ============ */
.chat { display: flex; flex-direction: column; height: 100dvh; min-width: 0; }

.ticker {
  overflow: hidden; flex: none;
  border-bottom: 1px solid var(--rule);
  background: var(--ink); color: var(--paper);
  padding: 0.4rem 0;
}
.ticker-track { display: flex; width: max-content; animation: tick 60s linear infinite; }
.ticker-track span {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em;
  white-space: nowrap; padding-right: 2.5rem;
}
@keyframes tick { to { transform: translateX(-50%); } }

.thread {
  flex: 1; overflow-y: auto; scroll-behavior: smooth;
  padding: clamp(1.4rem, 4vh, 2.6rem) clamp(1.2rem, 5vw, 4rem) 1rem;
  display: flex; flex-direction: column; gap: 1.3rem;
}

/* empty state */
.hello { max-width: 640px; margin: auto; text-align: center; padding: 1.5rem 0; }
.hello-fig {
  width: min(520px, 100%); color: var(--ink); margin-bottom: 1.4rem;
  border: 1px solid var(--rule); border-radius: 3px;
  background:
    linear-gradient(rgba(33,29,20,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(33,29,20,0.04) 1px, transparent 1px),
    var(--paper);
  background-size: 20px 20px;
  padding: 10px;
}
.hello-fig .hnode rect { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.hello-fig .hnode text {
  font-family: var(--mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.05em; fill: var(--ink); text-anchor: middle;
}
.hello-fig .hnode .sub { font-size: 7.5px; font-weight: 400; fill: var(--ink-2); }
.hello-fig .hot rect { stroke: var(--accent); stroke-width: 1.5; fill: #FBF7EC; }
.hello-fig .hot text { fill: var(--accent); }
.hello-fig .hot .sub { fill: color-mix(in srgb, var(--accent) 70%, var(--ink-2)); }
.hello-fig .hflow {
  fill: none; stroke: var(--ink); stroke-width: 1.1; color: var(--ink);
  stroke-dasharray: 5 5; animation: dash 1.1s linear infinite;
}
.hello-fig .hot-flow { stroke: var(--accent); color: var(--accent); }
.hello-fig .hpacket { fill: var(--accent); }
.hello-fig .ann {
  font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; fill: var(--ink-2);
}
@keyframes dash { to { stroke-dashoffset: -20; } }

.hello h2 {
  font-size: clamp(1.9rem, 4.5vw, 2.8rem); font-weight: 540;
  font-variation-settings: "opsz" 100;
  letter-spacing: -0.01em; margin-bottom: 0.8rem; line-height: 1.1;
}
.hello h2 em { font-style: italic; color: var(--accent); }
.hello p { color: var(--ink-2); max-width: 48ch; margin: 0 auto 1.4rem; font-size: 1rem; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
.chips button {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.07em; cursor: pointer;
  padding: 0.5rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink); transition: border-color 0.2s, color 0.2s, background 0.2s, transform 0.15s;
}
.chips button:hover {
  border-color: var(--accent); color: var(--accent);
  background: var(--accent-soft); transform: translateY(-1px);
}

/* messages */
.msg { max-width: 72ch; animation: rise 0.35s cubic-bezier(0.2, 0.6, 0.2, 1); }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

.msg .who {
  font-family: var(--mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--ink-2); margin-bottom: 0.35rem;
  display: flex; align-items: center; gap: 0.45rem;
}

.msg.you { align-self: flex-end; }
.msg.you .who { justify-content: flex-end; }
.msg.you .body {
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 3px; padding: 0.65rem 0.95rem; font-size: 0.98rem;
  box-shadow: 2px 2px 0 var(--rule-soft);
}

.msg.agent { align-self: flex-start; }
.msg.agent .who { color: var(--accent); }
.msg.agent.live .who::after {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent); animation: pulse 1.2s ease infinite;
}
.msg.agent .body {
  border-left: 2px solid var(--accent);
  padding: 0.1rem 0 0.1rem 1rem;
  font-size: 1.02rem;
}
.msg.agent .body > * + * { margin-top: 0.55em; }
.msg.agent .body ul { padding-left: 1.1em; }
.msg.agent .body li { margin: 0.25em 0; }
.msg.agent .body a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.msg.agent .body a:hover { text-decoration-style: double; }
.msg.agent .body code {
  font-family: var(--mono); font-size: 0.85em;
  background: var(--paper-2); border: 1px solid var(--rule);
  border-radius: 2px; padding: 0.05em 0.3em;
}
.msg.agent .body strong { font-weight: 620; }

.msg .thinking {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  color: var(--ink-2); display: inline-flex; align-items: center; gap: 0.6rem;
}
.thinking .spin {
  width: 10px; height: 10px; flex: none;
  border: 1.5px solid var(--rule); border-top-color: var(--accent);
  border-radius: 50%; animation: rot 0.8s linear infinite;
}
@keyframes rot { to { transform: rotate(360deg); } }

.cursor {
  display: inline-block; width: 0.55em; height: 1em;
  background: var(--accent); vertical-align: text-bottom;
  animation: blink 0.9s steps(2) infinite; margin-left: 1px;
}
@keyframes blink { 50% { opacity: 0; } }

.msg .error {
  font-family: var(--mono); font-size: 0.75rem; color: var(--accent);
  border: 1px dashed var(--accent); border-radius: 3px; padding: 0.6rem 0.8rem;
}

/* ============ COMPOSER ============ */
.composer {
  display: flex; gap: 0.6rem; align-items: center;
  margin: 0.4rem clamp(1.2rem, 5vw, 4rem) 0;
  border: 1px solid var(--ink); border-radius: 3px;
  background: var(--paper); padding: 0.3rem 0.3rem 0.3rem 1rem;
  box-shadow: 3px 3px 0 var(--rule);
  transition: box-shadow 0.2s;
}
.composer:focus-within { box-shadow: 4px 4px 0 var(--accent-soft); }

#input {
  flex: 1; border: none; outline: none; background: none;
  font-family: var(--serif); font-size: 1rem; color: var(--ink);
  padding: 0.55rem 0; min-width: 0;
}
#input::placeholder { color: var(--ink-2); opacity: 0.75; font-style: italic; }

#send {
  flex: none; width: 42px; height: 42px; border-radius: 2px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
#send:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); transform: translateY(-1px); }
#send:disabled { opacity: 0.4; cursor: default; }

.fineprint {
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.1em;
  color: var(--ink-2); text-align: center;
  padding: 0.6rem 1rem calc(0.8rem + env(safe-area-inset-bottom));
}
.fineprint a { color: inherit; }
.fineprint a:hover { color: var(--accent); }

/* ============ CASE FILES DRAWER ============ */
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(33, 29, 20, 0.45);
  backdrop-filter: blur(2px);
  animation: fadeIn 0.25s ease;
}
@keyframes fadeIn { from { opacity: 0; } }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 90;
  width: min(560px, 94vw);
  overflow-y: auto;
  background: var(--paper);
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 24px 24px;
  border-left: 1px solid var(--ink);
  box-shadow: -12px 0 40px rgba(33, 29, 20, 0.25);
  padding: clamp(1.4rem, 3vh, 2.2rem) clamp(1.2rem, 3vw, 2rem) 2rem;
  animation: slideIn 0.35s cubic-bezier(0.2, 0.6, 0.2, 1);
}
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }

.drawer-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.9rem; margin-bottom: 1.4rem;
}
.drawer-kicker {
  font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em;
  color: var(--ink-2); margin-bottom: 0.4rem;
}
.drawer-head h2 {
  font-size: clamp(1.9rem, 4vw, 2.5rem); font-weight: 550;
  font-variation-settings: "opsz" 90; line-height: 1;
}
.drawer-head h2 em { font-style: italic; color: var(--accent); }
.drawer-close {
  font-family: var(--mono); font-size: 1rem; cursor: pointer;
  width: 38px; height: 38px; border-radius: 2px;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
  transition: border-color 0.2s, color 0.2s, transform 0.2s;
}
.drawer-close:hover { border-color: var(--accent); color: var(--accent); transform: rotate(90deg); }

.case {
  border: 1px solid var(--rule); border-radius: 3px;
  background: color-mix(in srgb, var(--paper-2) 35%, transparent);
  padding: 1.1rem 1.2rem; margin-bottom: 1rem;
  position: relative;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.case:hover {
  border-color: var(--ink); transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--rule-soft);
}

.case-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.5rem; }
.case-no { font-family: var(--mono); font-size: 0.85rem; font-weight: 600; color: var(--accent); }
.case-links { display: flex; gap: 0.9rem; }
.case-links a {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.1rem;
  transition: color 0.2s, border-color 0.2s;
}
.case-links a:hover { color: var(--accent); border-color: var(--accent); }
.case-links a.hot { color: var(--accent); border-color: var(--accent); }

.case h3 {
  font-size: 1.35rem; font-weight: 560;
  font-variation-settings: "opsz" 40;
  margin-bottom: 0.4rem;
}
.case h3 span { font-size: 0.72em; font-weight: 400; font-style: italic; color: var(--ink-2); }
.case > p { font-size: 0.9rem; margin-bottom: 0.8rem; max-width: 58ch; }

.schematic {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; row-gap: 0.6rem;
  padding: 0.7rem 0.8rem; margin-bottom: 0.8rem;
  border: 1px dashed var(--rule); border-radius: 3px;
  background: var(--paper);
}
.schematic .n {
  font-family: var(--mono); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.07em; white-space: nowrap;
  padding: 0.28rem 0.5rem; border: 1px solid var(--ink);
  border-radius: 2px; background: var(--paper);
}
.schematic .hotn { border-color: var(--accent); color: var(--accent); background: #FBF7EC; }
.schematic .arr {
  flex: 0 0 18px; height: 1px; position: relative;
  background-image: linear-gradient(90deg, var(--ink-2) 55%, transparent 45%);
  background-size: 7px 1px;
}
.case:hover .schematic .arr { animation: march 0.7s linear infinite; }
.schematic .arr::after {
  content: ""; position: absolute; right: -1px; top: -3px;
  border-left: 5px solid var(--ink-2);
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
.schematic .arr.two::before {
  content: ""; position: absolute; left: -1px; top: -3px;
  border-right: 5px solid var(--ink-2);
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}

.case-foot { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tags span {
  font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 999px;
}
.ask {
  font-family: var(--mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.1em;
  cursor: pointer; padding: 0.45rem 0.7rem; border-radius: 2px;
  border: 1px solid var(--accent); background: none; color: var(--accent);
  transition: background 0.2s, color 0.2s;
}
.ask:hover { background: var(--accent); color: var(--paper); }

.bench { margin-top: 1.6rem; border-top: 1px solid var(--ink); padding-top: 1rem; }
.bench h4 {
  font-family: var(--mono); font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.12em; margin-bottom: 0.7rem;
}
.bench h4 span { color: var(--ink-2); font-weight: 400; }
.bench ul { list-style: none; columns: 1; }
.bench li { border-bottom: 1px dashed var(--rule); }
.bench a {
  display: block; padding: 0.5rem 0.2rem;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em;
  color: var(--ink-2); text-decoration: none;
  transition: color 0.2s, padding-left 0.25s;
}
.bench a:hover { color: var(--accent); padding-left: 0.6rem; }
.bench b { color: var(--ink); font-weight: 600; }
.bench a:hover b { color: var(--accent); }
.bench em { font-style: normal; color: var(--accent); }
.bench-all {
  display: inline-block; margin-top: 0.9rem;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em;
  color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: 0.15rem;
}
.bench-all:hover { border-bottom-style: double; }

/* ============ RESPONSIVE ============ */
@media (max-width: 880px) {
  body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); overflow: auto; }
  .rail {
    border-right: none; border-bottom: 1px solid var(--rule);
    padding: 1rem 1.2rem; gap: 0.9rem;
  }
  .rail-stamp { top: 0.4rem; right: 0.4rem; width: 74px; }
  .rail-name { font-size: 1.9rem; margin-bottom: 0.5rem; }
  .rail-bio, .rail-colophon, .rail-label, .rail-stats { display: none; }
  .rail-cta { margin-bottom: 0.4rem; padding: 0.55rem 0.8rem; }
  .rail-topics { flex-direction: row; overflow-x: auto; gap: 0.45rem; padding-bottom: 0.2rem; }
  .rail-topics button {
    flex: none; border: 1px solid var(--rule); border-radius: 999px;
    padding: 0.4rem 0.7rem; font-size: 0.62rem; white-space: nowrap;
  }
  .rail-foot { margin-top: 0; flex-direction: row; align-items: center; justify-content: space-between; }
  .chat { height: auto; min-height: 72dvh; }
  .ticker { display: none; }
  .hello-fig { display: none; }
  .drawer { width: 100vw; border-left: none; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .rail-arrow, .hello-fig .hflow, .thinking .spin, .cursor, .dot,
  .rail-stamp svg, .ticker-track, .schematic .arr, .msg.agent.live .who::after { animation: none !important; }
  .hello-fig .hpacket { display: none; }
  .msg { animation: none; }
  .drawer, .drawer-backdrop { animation: none; }
  .thread { scroll-behavior: auto; }
}