/* OPTIMUM brand: pink #E266A7, teal #67E2E3 */

:root {
  --pink: #E266A7;
  --pink-soft: #F7BEDE;
  --teal: #67E2E3;
  --teal-soft: #C2F1F1;
  --ink: #1A1633;
  --ink-soft: #5B5870;
  --bg: #FAF7FC;
  --card: #FFFFFF;
  --line: #EDE8F3;
  --ok: #17B978;
  --warn: #F2B705;
  --bad: #E9374A;
  --radius: 16px;
  --shadow: 0 6px 20px rgba(30, 20, 60, 0.06);
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
html {
  background: white;
}
html, body {
  margin: 0;
  padding: 0;
  overscroll-behavior: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
body {
  font-family: 'Poppins', 'Helvetica', -apple-system, BlinkMacSystemFont, sans-serif;
  background: white;
  color: var(--ink);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: fixed;
  inset: 0;
  overflow: hidden;
}
#root {
  background: var(--bg);
}

/* PULL TO REFRESH — loader overlays the header, centered vertically with the logo */
.pull-indicator {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0) + 10px);
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: opacity 0.2s ease-out, transform 0.2s ease-out;
}
.pull-indicator.visible { opacity: 1; transform: translateX(-50%) scale(1); }
.pull-indicator.loading { opacity: 1; transform: translateX(-50%) scale(1); }
/* Branded loader — ring of 12 tiny white dots with one bigger white dot
   fluidly orbiting around them. Shiny, minimal, on-brand. */
.loader {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-ring {
  position: absolute;
  inset: 0;
}
.loader-ring span {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  margin-top: -1.5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.45);
}
.loader-ring span:nth-child(1)  { transform: rotate(0deg)   translateY(-20px); }
.loader-ring span:nth-child(2)  { transform: rotate(30deg)  translateY(-20px); }
.loader-ring span:nth-child(3)  { transform: rotate(60deg)  translateY(-20px); }
.loader-ring span:nth-child(4)  { transform: rotate(90deg)  translateY(-20px); }
.loader-ring span:nth-child(5)  { transform: rotate(120deg) translateY(-20px); }
.loader-ring span:nth-child(6)  { transform: rotate(150deg) translateY(-20px); }
.loader-ring span:nth-child(7)  { transform: rotate(180deg) translateY(-20px); }
.loader-ring span:nth-child(8)  { transform: rotate(210deg) translateY(-20px); }
.loader-ring span:nth-child(9)  { transform: rotate(240deg) translateY(-20px); }
.loader-ring span:nth-child(10) { transform: rotate(270deg) translateY(-20px); }
.loader-ring span:nth-child(11) { transform: rotate(300deg) translateY(-20px); }
.loader-ring span:nth-child(12) { transform: rotate(330deg) translateY(-20px); }

.loader-orbit {
  position: absolute;
  inset: 0;
  animation: spin 1.1s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
.loader-orbit::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  margin-top: -4.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, rgba(255, 255, 255, 0.85) 55%, rgba(255, 255, 255, 0.5) 100%);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.85), 0 0 18px rgba(255, 255, 255, 0.4);
  transform: translateY(-20px);
}
.pull-indicator.loading .loader-orbit {
  animation-duration: 0.85s;
}
#root {
  height: 100vh;
  height: 100dvh;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
input, textarea, [contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}

#root { min-height: 100vh; padding-bottom: 180px; }

/* HEADER — sticky so tapping it always scrolls to top (iOS-native feel) */
.hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  padding-top: calc(14px + env(safe-area-inset-top, 0));
  background: linear-gradient(135deg, var(--pink) 0%, var(--teal) 100%);
  color: white;
  box-shadow: var(--shadow);
  position: sticky;
  top: 0;
  z-index: 15;
  cursor: pointer;
}
.brand {
  display: flex;
  align-items: center;
  background: white;
  padding: 6px 14px;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  text-decoration: none;
  transition: transform 0.1s;
}
.brand:active { transform: scale(0.95); }
.brand-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}
.hdr-right { display: flex; align-items: center; gap: 12px; }
.date {
  font-family: 'Poppins', inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 35%,
    rgba(255, 255, 255, 0.55) 50%,
    #ffffff 65%,
    #ffffff 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: labelShine 4.5s linear infinite;
}
.hdr-settings {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: white;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  transition: transform 0.25s, background 0.15s;
  position: relative;
  overflow: hidden;
}
.hdr-settings svg { width: 15px; height: 15px; position: relative; z-index: 1; transition: transform 0.4s; }
.hdr-settings:hover svg,
.hdr-settings:active svg { transform: rotate(60deg); }
.hdr-settings:active { transform: scale(0.92); background: rgba(255, 255, 255, 0.32); }
.hdr-settings::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: labelShine 4s linear infinite;
  pointer-events: none;
}

/* Settings modal */
.settings-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 22, 51, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease-out;
}
.settings-sheet {
  background: white;
  width: 100%;
  max-width: 500px;
  border-radius: 20px 20px 0 0;
  padding: 20px 20px calc(30px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
  animation: slideUp 0.28s cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.settings-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.settings-header h2 { margin: 0; font-size: 20px; font-weight: 800; color: var(--ink); }
.settings-close {
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  width: 32px; height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}
.settings-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.settings-row:last-child { border-bottom: none; }
.settings-row-body { flex: 1; }
.settings-row-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.settings-row-sub { font-size: 12px; color: var(--ink-soft); margin-top: 3px; line-height: 1.35; }
.settings-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 46px; height: 28px;
  background: var(--line);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
  margin: 0;
}
.settings-switch::before {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 22px; height: 22px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s;
}
.settings-switch:checked {
  background: linear-gradient(135deg, var(--pink), var(--teal));
}
.settings-switch:checked::before { transform: translateX(18px); }
.settings-voice-row { display: flex; gap: 8px; margin-top: 10px; align-items: stretch; }
.settings-voice-select {
  flex: 1;
  padding: 10px 34px 10px 12px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' stroke='%235B5870' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}
.settings-voice-preview {
  background: linear-gradient(135deg, var(--pink), var(--teal));
  border: none;
  color: white;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 0 18px;
  border-radius: 10px;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(226, 102, 167, 0.3);
  position: relative;
  overflow: hidden;
  transition: transform 0.1s;
  flex-shrink: 0;
}
.settings-voice-preview:active { transform: scale(0.96); }
.settings-voice-preview::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: labelShine 3.5s linear infinite;
  pointer-events: none;
}

/* Speaker button on assistant messages — custom SVG, glossy pill when active */
.msg-speak {
  background: rgba(226, 102, 167, 0.10);
  border: 1px solid rgba(226, 102, 167, 0.22);
  color: var(--pink);
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 0;
  font-family: inherit;
  transition: transform 0.1s, background 0.15s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}
.msg-speak svg { width: 14px; height: 14px; position: relative; z-index: 1; }
.msg-speak:active { transform: scale(0.9); background: rgba(226, 102, 167, 0.2); }
.msg-speak.speaking {
  background: linear-gradient(135deg, var(--pink), var(--teal));
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(226, 102, 167, 0.35);
}
.msg-speak.speaking::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.32) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: labelShine 2s linear infinite;
  pointer-events: none;
}

/* BOTTOM STACK — chat bar + tab dock pinned to bottom, stacked vertically */
.bottom-stack {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.96);
}

.tab-dock {
  background: transparent;
  border-top: 1px solid var(--line);
  padding: 6px 16px 2px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.tab-dock-btn {
  background: none;
  border: none;
  padding: 4px 14px;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  font-family: inherit;
  color: var(--ink-soft);
  transition: color 0.15s;
}
.tab-dock-icon { width: 22px; height: 22px; display: block; }
.tab-dock-label { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
.tab-dock-btn { color: var(--ink); }
.tab-dock-btn .tab-dock-label { color: var(--ink); }
.tab-dock-active { color: var(--pink); }
.tab-dock-active .tab-dock-label { color: var(--pink); }

/* MAIN */
.main {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* GPU-promote so pull-to-refresh transform doesn't repaint the whole subtree each frame */
  will-change: transform;
  transform: translateZ(0);
}
.hdr { will-change: transform; transform: translateZ(0); }
/* Chat detail uses tighter padding — no cards, just a message stream */
#page-chat-detail.main { padding: 8px 10px 0; gap: 6px; }

/* AVATARS LIST */
#avatars-list, #chats-list, #avatar-files {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
#avatars-list .avatar-card {
  /* entry animation timing for list children */
  animation-delay: calc(0.04s * var(--i, 0));
}
.avatar-card {
  background: white;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform 0.1s;
}
.avatar-card:active { transform: scale(0.98); }
.avatar-card-title {
  font-size: 17px;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--ink);
}
.avatar-card-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.avatar-card-sub .chip { background: var(--bg); padding: 3px 10px; border-radius: 999px; }

/* AVATAR DETAIL */
.back-btn {
  background: white;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 6px 16px 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  align-self: flex-start;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(26, 22, 51, 0.08);
  position: relative;
  overflow: hidden;
  transition: transform 0.1s;
}
.back-btn:active { transform: scale(0.95); background: #fafafa; }
.back-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(26, 22, 51, 0.08) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: labelShine 3.5s linear infinite;
  pointer-events: none;
}
.page-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  text-transform: capitalize;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
.folder-header {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 16px 0 4px;
}
.file-row {
  background: white;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.1s;
}
.file-row:active { transform: scale(0.99); }
.file-row-name { font-size: 14px; font-weight: 500; color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 10px; }
.file-row-size { font-size: 11px; color: var(--ink-soft); }
.file-row-brief {
  background: rgba(226, 102, 167, 0.10);
  color: var(--pink);
  border: 1px solid rgba(226, 102, 167, 0.3);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 999px;
  margin-right: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s, background 0.15s;
  flex-shrink: 0;
}
.file-row-brief:active { transform: scale(0.94); background: rgba(226, 102, 167, 0.18); }

/* SWIPE TO DELETE (iOS-style: swipe left reveals red Delete button) */
.swipe-row {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  background: white;
  /* Allow vertical scrolling/pull-to-refresh to pass through to #root */
  touch-action: pan-y;
}
.swipe-row-body {
  position: relative;
  z-index: 2;
  transform: translateX(0);
  transition: transform 0.2s ease-out;
  background: white;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.swipe-delete-btn {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: 90px;
  background: linear-gradient(135deg, #FF4D63 0%, #D91730 100%);
  color: white;
  border: none;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  z-index: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  overflow: hidden;
  font-family: inherit;
  /* Hidden by default so a :active press-scale on the inner body doesn't reveal red edges */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease-out;
}
.swipe-row.swiped .swipe-delete-btn { opacity: 1; pointer-events: auto; }
.swipe-delete-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: deleteShine 3s linear infinite;
  pointer-events: none;
}
@keyframes deleteShine {
  0%   { background-position: 150% 0; }
  100% { background-position: -150% 0; }
}
.swipe-delete-btn:active { filter: brightness(0.92); }

/* Delete vanish animation: grow slightly, wobble, then shrink-fade out */
.swipe-row.deleting {
  animation: deleteVanish 0.55s cubic-bezier(0.5, -0.2, 0.7, 0.4) forwards;
  pointer-events: none;
}
@keyframes deleteVanish {
  0%   { transform: scale(1); opacity: 1; }
  18%  { transform: scale(1.04) rotate(-1.2deg); }
  32%  { transform: scale(1.03) rotate(1.4deg); }
  50%  { transform: scale(1.02) rotate(-0.8deg); opacity: 1; }
  100% { transform: scale(0.3) translateY(10px); opacity: 0; max-height: 0; margin: 0; padding: 0; border: 0; }
}

/* CHATS */
.chats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.chat-row {
  background: white;
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: transform 0.1s;
}
.chat-row:active { transform: scale(0.99); }
.chat-row-title { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.chat-pending-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #F7BEDE 35%, var(--pink) 70%, var(--pink) 100%);
  box-shadow: 0 0 6px rgba(226, 102, 167, 0.55), 0 0 12px rgba(103, 226, 227, 0.35);
  animation: chatPendingPulse 1.6s ease-in-out infinite;
  position: relative;
}
.chat-pending-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 102, 167, 0.5), transparent 70%);
  animation: chatPendingHalo 1.6s ease-out infinite;
  pointer-events: none;
}
@keyframes chatPendingPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.15); filter: brightness(1.25); }
}
@keyframes chatPendingHalo {
  0%   { opacity: 0.8; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.8); }
}
.chat-row-preview { font-size: 12px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.chat-row-meta { font-size: 11px; color: var(--ink-soft); margin-top: 6px; }

.chat-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Floating nav that only appears when user scrolls UP in a chat detail view.
   Hidden by default (off-screen above), slides in on scroll-up only. */
.chat-scroll-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0)) 16px 10px;
  background: rgba(250, 247, 252, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transform: translateY(-120%);
  transition: transform 0.28s ease-out;
  pointer-events: none;
}
.chat-scroll-nav.visible {
  transform: translateY(0);
  pointer-events: auto;
}
.chat-scroll-nav .chat-scroll-back {
  background: none;
  border: none;
  color: var(--pink);
  font-size: 14px;
  font-weight: 700;
  padding: 4px 0;
  cursor: pointer;
  font-family: inherit;
}
.chat-scroll-nav .chat-scroll-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-delete-btn {
  background: linear-gradient(135deg, #FF4D63 0%, #D91730 100%);
  border: none;
  color: white;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(233, 55, 74, 0.3);
  position: relative;
  overflow: hidden;
  transition: transform 0.1s;
}
.chat-delete-btn:active { transform: scale(0.95); }
.chat-delete-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.3) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: deleteShine 3s linear infinite;
  pointer-events: none;
}

.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
}
.chat-messages .msg {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.55;
  word-wrap: break-word;
  /* Explicitly block text selection + iOS long-press callout — Noah's long
     press is used by our own copy handler, not native selection. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;
}
.chat-messages .msg-assistant {
  color: #2A2437; /* slightly softer than pure ink for easier reading */
}
.chat-messages .msg-text-rich {
  white-space: normal;
}
.chat-messages .msg-text-rich p { margin: 0 0 8px 0; }
.chat-messages .msg-text-rich p:last-child { margin-bottom: 0; }
.chat-messages .msg-text-rich strong { color: var(--ink); font-weight: 700; }
.chat-messages .msg-text-rich em { color: var(--ink); font-style: italic; }
.chat-messages .msg-text-rich code {
  background: rgba(226, 102, 167, 0.09);
  color: var(--ink);
  padding: 1px 6px;
  border-radius: 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
}
.chat-messages .msg-text-rich pre {
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 10px;
  overflow-x: auto;
  font-size: 13px;
  margin: 8px 0;
}
.chat-messages .msg-text-rich ul,
.chat-messages .msg-text-rich ol {
  margin: 6px 0 6px 20px;
  padding: 0;
}
.chat-messages .msg-text-rich li { margin: 3px 0; }
.chat-messages .msg-text-rich h1,
.chat-messages .msg-text-rich h2,
.chat-messages .msg-text-rich h3 {
  margin: 12px 0 6px;
  font-weight: 800;
  color: var(--ink);
}
.chat-messages .msg-text-rich h1 { font-size: 18px; }
.chat-messages .msg-text-rich h2 { font-size: 16px; }
.chat-messages .msg-text-rich h3 { font-size: 15px; }
.chat-messages .msg-text-rich a {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.chat-messages .msg-text-rich .msg-img,
.chat-messages .msg-text-rich .msg-video {
  display: block;
  max-width: 100%;
  border-radius: 12px;
  margin: 8px 0;
  border: 1px solid var(--line);
  background: var(--bg);
}
.chat-messages .msg-text-rich .msg-video { aspect-ratio: 16/9; object-fit: cover; }
.chat-messages .msg:active { opacity: 0.85; }
.chat-messages .msg.msg-long-pressed {
  transform: scale(1.02);
  box-shadow: 0 4px 14px rgba(226, 102, 167, 0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}

/* Toast for long-press copy confirmation */
.optimum-toast {
  position: fixed;
  bottom: 220px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(26, 22, 51, 0.92);
  color: white;
  padding: 10px 20px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.optimum-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.chat-messages .msg-user {
  align-self: flex-end;
  background: linear-gradient(140deg, #2A2437 0%, #0B0714 48%, #2A2437 100%);
  color: white;
  border-bottom-right-radius: 4px;
}
.chat-messages .msg-assistant {
  align-self: flex-start;
  background: white;
  color: var(--ink);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
  white-space: pre-wrap;
}
.chat-messages .msg-pending {
  align-self: flex-start;
  background: rgba(103, 226, 227, 0.15);
  color: var(--ink-soft);
  font-style: italic;
}

/* In-thread compose — lives in the bottom-stack BELOW the global chat-dock,
   right above the tab dock. Hidden outside chat-detail mode.
   Visual hierarchy: this is the PRIMARY send target while inside a thread, so
   it gets the full pink→teal gradient background + white send button. The
   global "Ask Opus anything" bar below stays plain white + black icons so
   both bars are clearly distinguishable (important when viewing with red
   glasses at night — red-tinted pink loses contrast, so the white send pops). */
.chat-compose {
  display: none;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: linear-gradient(135deg, var(--pink) 0%, var(--teal) 100%);
  border: none;
}
body.chat-detail-mode .chat-compose { display: flex; }
.chat-compose .compose-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.chat-compose input {
  flex: 1;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  font-size: 15px;
  outline: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-family: inherit;
  -webkit-user-select: text;
  user-select: text;
}
.chat-compose input::placeholder { color: var(--ink-soft); }
.chat-compose input:focus { border-color: white; background: white; }
.chat-compose button[type="submit"] {
  position: relative;
  overflow: hidden;
  border: none;
  background: white;
  color: var(--ink);
  width: 46px; height: 46px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.chat-compose button[type="submit"]::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  /* A single narrow highlight band that sweeps across via translateX. The
     band starts fully off-screen left and ends fully off-screen right, so
     the animation's loop boundary happens while the element is invisible —
     no visible jump or chop. */
  background: linear-gradient(115deg, transparent 40%, rgba(230, 102, 167, 0.55) 50%, rgba(103, 226, 227, 0.5) 55%, transparent 65%);
  transform: translateX(-120%);
  animation: chatShineSweep 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes chatShineSweep {
  0%   { transform: translateX(-120%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
.chat-compose button[type="submit"] > * { position: relative; z-index: 1; }
.chat-compose button[type="submit"]:active { transform: scale(0.94); }
.chat-compose .attach-btn,
.chat-form .attach-btn {
  position: relative;
  color: #FFFFFF;
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  background: linear-gradient(140deg, #2A2437 0%, #0B0714 48%, #2A2437 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
  transition: transform 0.1s;
}
.chat-compose .attach-btn::after,
.chat-form .attach-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: labelShine 4.5s linear infinite;
  pointer-events: none;
}
.chat-compose .attach-btn svg,
.chat-form .attach-btn svg { position: relative; z-index: 1; }
.chat-compose .attach-btn:active,
.chat-form .attach-btn:active { transform: scale(0.94); }

/* Mic button — Whisper voice input. Black glossy pill to match paperclip,
   turns red + pulses while recording, pink→teal while transcribing. */
.mic-btn {
  position: relative;
  color: #FFFFFF;
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  background: linear-gradient(140deg, #2A2437 0%, #0B0714 48%, #2A2437 100%);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  overflow: hidden;
  transition: transform 0.1s;
  font-family: inherit;
}
.mic-btn svg { width: 15px; height: 15px; position: relative; z-index: 1; }
.mic-btn:active { transform: scale(0.94); }
.mic-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 50%, transparent 70%);
  background-size: 250% 100%;
  animation: labelShine 4.5s linear infinite;
  pointer-events: none;
}

/* Inside the gradient thread compose: flip attach + mic to white buttons
   with the ink-colored icon, and swap the shine from white→transparent to
   pink→teal so it pops against white. These rules come AFTER the base
   button/::after definitions so the pink shine actually wins the cascade.
   Slightly oversized (44px) to make them comfortable tap targets. */
.chat-compose .attach-btn,
.chat-compose .mic-btn {
  background: white;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
  width: 44px;
  height: 44px;
}
.chat-compose .mic-btn svg,
.chat-compose .attach-btn svg { width: 18px; height: 18px; }
.chat-compose .attach-btn::after,
.chat-compose .mic-btn::after {
  top: 0; left: 0;
  width: 100%; height: 100%;
  inset: auto;
  background: linear-gradient(115deg, transparent 40%, rgba(230, 102, 167, 0.55) 50%, rgba(103, 226, 227, 0.5) 55%, transparent 65%);
  background-size: auto;
  transform: translateX(-120%);
  animation: chatShineSweep 2.8s ease-in-out infinite;
}
/* While recording, kill the sweeping pink/teal highlight on the mic — it
   fights with the red halo rings and looks cluttered at the larger scale. */
.mic-btn.mic-recording::after { display: none; }
.mic-btn.mic-recording {
  background: linear-gradient(135deg, #FF4D63 0%, #D91730 100%);
  transform: scale(1.95);
  transform-origin: center bottom;
  overflow: visible;
  position: relative;
  z-index: 20;
  will-change: box-shadow;
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
  /* Single keyframe animation — radial "ring" halo rendered entirely via
     box-shadow so the GPU can handle it without layout/paint work. No
     ::before pseudo, no sibling manipulation, no :has() queries. */
  animation: micRing 1.4s ease-out infinite;
}
@keyframes micRing {
  0% {
    box-shadow:
      0 0 0 0 rgba(233, 55, 74, 0.55),
      0 0 0 0 rgba(233, 55, 74, 0.35),
      0 2px 10px rgba(233, 55, 74, 0.4);
  }
  70% {
    box-shadow:
      0 0 0 12px rgba(233, 55, 74, 0),
      0 0 0 24px rgba(233, 55, 74, 0),
      0 2px 10px rgba(233, 55, 74, 0.4);
  }
  100% {
    box-shadow:
      0 0 0 0 rgba(233, 55, 74, 0),
      0 0 0 0 rgba(233, 55, 74, 0),
      0 2px 10px rgba(233, 55, 74, 0.4);
  }
}
.mic-btn.mic-transcribing {
  background: linear-gradient(135deg, var(--pink), var(--teal));
  box-shadow: 0 2px 10px rgba(226, 102, 167, 0.4);
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(233, 55, 74, 0.55), 0 2px 10px rgba(233, 55, 74, 0.4); transform: scale(1); }
  50%      { box-shadow: 0 0 0 8px rgba(233, 55, 74, 0), 0 2px 10px rgba(233, 55, 74, 0.4); transform: scale(1.05); }
}
.msg .msg-img {
  max-width: 100%;
  max-height: 320px;
  border-radius: 10px;
  margin-top: 4px;
  display: block;
}
.msg .msg-file-link {
  display: inline-block;
  background: rgba(226, 102, 167, 0.1);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--pink);
  text-decoration: none;
  margin-top: 4px;
}
.msg-pending-thinking::after {
  content: '…';
  animation: dots 1.4s steps(4, end) infinite;
  display: inline-block;
  width: 1em;
  text-align: left;
}
@keyframes dots {
  0%, 20% { content: ''; }
  40%    { content: '.'; }
  60%    { content: '..'; }
  80%, 100% { content: '…'; }
}
.attach-preview {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px 4px 0;
  align-items: center;
}
.attach-preview .att-chip {
  background: rgba(103, 226, 227, 0.18);
  color: var(--ink);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attach-preview .att-chip button {
  background: none;
  border: none;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0;
  width: auto;
  height: auto;
  font-size: 14px;
}

/* SCRIPT WRITER DOCKED EDITOR — pinned to the bottom-stack, sits right
   above the global "Ask Opus anything" compose. Matches the in-thread chat
   compose visually (same .chat-compose styling is reused via the sw-compose
   modifier). Above the compose sits a row with APPROVE + a small close/stop
   pill so the most common actions are thumb-accessible. */
.sw-actions { display: none; }
body.sw-run-mode .sw-actions { display: block; }
body.sw-run-mode .sw-compose { display: flex; }

/* Two floating round actions above the compose bar: ✓ APPROVE and ✕ CLOSE.
   Truly float — positioned absolutely above the bottom-stack so they sit
   over the page content instead of inside the stack's white fill. Centered. */
.sw-floating-actions {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 14px);
  display: flex;
  gap: 14px;
  padding: 0;
  z-index: 12;
}
body.sw-run-mode #root { padding-bottom: 310px; }
.sw-float-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(30, 20, 60, 0.18);
  transition: transform 0.1s;
}
.sw-float-btn:active { transform: scale(0.92); }
.sw-float-approve {
  background: linear-gradient(135deg, var(--pink), var(--teal));
  color: white;
}
.sw-float-close {
  background: white;
  color: var(--bad);
  border: 1px solid var(--line);
}

/* Attached reference chips inside the sw compose */
.sw-compose .attach-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 2px;
}
.sw-compose .att-chip {
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.sw-compose .att-chip button {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 0 2px;
  font-size: 13px;
}
.sw-editor-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sw-editor-bar input[type="text"],
.sw-editor-bar input:not([type]) {
  flex: 1;
  padding: 13px 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  font-size: 15px;
  outline: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-family: inherit;
  -webkit-user-select: text;
  user-select: text;
}
.sw-editor-bar input::placeholder { color: var(--ink-soft); }
.sw-editor-bar input:focus { border-color: white; background: white; }
.sw-editor-bar .attach-btn,
.sw-editor-bar .mic-btn {
  width: 44px; height: 44px;
  background: white;
  color: var(--ink);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.sw-editor-bar .attach-btn::after,
.sw-editor-bar .mic-btn::after {
  background: repeating-linear-gradient(
    115deg,
    transparent 0,
    transparent 18px,
    rgba(230, 102, 167, 0.42) 24px,
    rgba(103, 226, 227, 0.42) 32px,
    transparent 38px,
    transparent 60px
  );
  background-size: auto;
  animation: chatShineLoop 3.2s linear infinite;
}
.sw-editor-bar .mic-btn svg,
.sw-editor-bar .attach-btn svg { width: 18px; height: 18px; }

.sw-action-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.sw-btn {
  flex: 1;
  padding: 11px 10px;
  border: none;
  border-radius: 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
}
.sw-btn:active { transform: scale(0.97); }
.sw-btn-stop {
  background: rgba(255, 255, 255, 0.88);
  color: #B51229;
}
.sw-btn-feedback {
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
}
.sw-btn-approve {
  background: linear-gradient(140deg, #2A2437 0%, #0B0714 48%, #2A2437 100%);
  color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* IMAGE GALLERY */
.gallery-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  margin-bottom: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--pink), var(--teal));
  color: white;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(226, 102, 167, 0.3);
  transition: transform 0.1s;
}
.gallery-cta:active { transform: scale(0.98); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 480px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
.gallery-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--line);
  cursor: pointer;
  transition: transform 0.1s;
  border: 1px solid var(--line);
}
.gallery-tile:active { transform: scale(0.97); }
.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gallery-tile-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 6px 8px;
  font-size: 10px;
  font-weight: 600;
  color: white;
  background: linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gallery-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-soft);
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 20px;
  animation: fadeIn 0.15s ease-out;
}
.lightbox img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
}
.lightbox-caption {
  color: rgba(255, 255, 255, 0.85);
  margin-top: 14px;
  font-size: 13px;
  text-align: center;
  max-width: 90%;
}
.lightbox-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0) + 12px);
  right: 18px;
  width: 40px; height: 40px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: white;
  font-size: 18px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lightbox-close:active { transform: scale(0.92); }
.lightbox-action {
  margin-top: 18px;
  padding: 12px 22px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--pink), var(--teal));
  color: white;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(226, 102, 167, 0.35);
}
.lightbox-action:active { transform: scale(0.97); }

/* FILE VIEWER */
.file-body {
  background: white;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  font-family: ui-monospace, 'Menlo', monospace;
  font-size: 12px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--ink);
  user-select: text;
  -webkit-user-select: text;
  overflow-x: auto;
}

/* WELCOME */
.welcome {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px 20px 22px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
}
.welcome-hi { font-size: 13px; color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase; }
.welcome-line { font-size: 22px; font-weight: 600; margin-top: 4px; line-height: 1.25; }

/* GRIDS */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) { .grid-2 { gap: 10px; } }

/* CARDS */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.15s, box-shadow 0.2s, opacity 0.5s ease-out;
}
/* Cards start offscreen-translated and faded out; the scroll-reveal observer
   removes .card-reveal when the card enters the viewport, letting the
   transition above bring it in smoothly. */
.card.card-reveal {
  opacity: 0;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Slot-machine pop: a gentle scale + soft bloom when a number lands */
.count-pop { animation: countPop 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes countPop {
  0%   { transform: scale(1); text-shadow: none; }
  50%  { transform: scale(1.04); text-shadow: 0 0 18px rgba(226, 102, 167, 0.4), 0 0 30px rgba(103, 226, 227, 0.25); }
  100% { transform: scale(1); text-shadow: none; }
}

/* Ka-ching wrapper — the inner span that actually scales. Block-level divs
   scaled via transform were reading as "no change" on iOS Safari; a dedicated
   inline-block span scales cleanly. */
.kaching-inner {
  display: inline-block;
  transform-origin: left center;
  will-change: transform;
  position: relative;
  z-index: 3;
}
.kaching-inner.kaching {
  animation: kachingBounce 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.kaching {
  display: inline-block;
  transform-origin: left center;
  animation: kachingBounce 1.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
  position: relative;
  z-index: 3;
}
@keyframes kachingBounce {
  0%   { transform: scale(0.4);  text-shadow: none; }
  18%  { transform: scale(2.4);  text-shadow: 0 0 50px rgba(226, 102, 167, 0.95), 0 0 90px rgba(103, 226, 227, 0.7); }
  32%  { transform: scale(1.1);  }
  48%  { transform: scale(1.7);  text-shadow: 0 0 36px rgba(226, 102, 167, 0.75), 0 0 65px rgba(103, 226, 227, 0.45); }
  64%  { transform: scale(1.02); }
  80%  { transform: scale(1.25); text-shadow: 0 0 22px rgba(226, 102, 167, 0.55); }
  92%  { transform: scale(1.01); }
  100% { transform: scale(1);    text-shadow: none; }
}
/* Let the scaled text escape the card without being clipped */
.profit-card { overflow: visible; }
.profit-card .card-row, .profit-card .card-row > div { overflow: visible; }
/* First-paint enter animation — only applied while <body> has .cards-entering,
   which JS removes ~1s after load. Prevents the animation re-running when a
   hidden page (display:none) is re-shown, which was leaving cards at opacity 0. */
body.cards-entering .card {
  opacity: 0;
  transform: translateY(12px);
  animation: cardEnter 0.6s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.card:active { transform: scale(0.99); }
/* The script-writer card is a reading surface, not a tap target — the scale
   dip on :active feels like a spring when the user is just trying to scroll. */
#sw-script-card:active,
#sw-hook-preview:active,
#sw-script-card,
#sw-hook-preview { transform: none !important; }

/* Script swap animation — when the content changes (regenerate, re-roll,
   or feedback loop), fade the old out and the new in with a subtle slide. */
#sw-script-body {
  transition: opacity 0.22s ease-out, transform 0.22s ease-out;
}
#sw-script-body.sw-swap-out { opacity: 0; transform: translateY(8px); }
#sw-script-body.sw-swap-in  {
  animation: swSwapIn 0.35s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
@keyframes swSwapIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardEnter {
  to { opacity: 1; transform: translateY(0); }
}
.main > * { animation-delay: var(--enter-delay, 0s); }
.main > *:nth-child(1) { --enter-delay: 0.00s; }
.main > *:nth-child(2) { --enter-delay: 0.05s; }
.main > *:nth-child(3) { --enter-delay: 0.10s; }
.main > *:nth-child(4) { --enter-delay: 0.15s; }
.main > *:nth-child(5) { --enter-delay: 0.20s; }
.main > *:nth-child(6) { --enter-delay: 0.25s; }
.main > *:nth-child(7) { --enter-delay: 0.30s; }
.main > *:nth-child(8) { --enter-delay: 0.35s; }

/* Live pulse dot (fresh data indicator) */
.pulse-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #17B978;
  box-shadow: 0 0 0 rgba(23, 185, 120, 0.6);
  animation: pulse 2.2s ease-out infinite;
  margin-right: 6px;
  vertical-align: middle;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(23, 185, 120, 0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(23, 185, 120, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 185, 120, 0); }
}

/* Press-scale on tappable controls */
.tab-dock-btn { transition: transform 0.1s; }
.tab-dock-btn:active { transform: scale(0.94); }
.chat-send { transition: transform 0.1s; }
.chat-send:active { transform: scale(0.92); }

/* Fade-in on number-big so count-up feels smooth */
.card-big { transition: color 0.3s; }
.card-label {
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-transform: uppercase;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}
.card-label-row { justify-content: space-between; }
.run-btn {
  border: none;
  background: linear-gradient(135deg, var(--pink), var(--teal));
  color: white;
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.2s;
  box-shadow: 0 2px 8px rgba(226, 102, 167, 0.25);
  text-transform: uppercase;
}
.run-btn:active { transform: scale(0.94); }
.run-btn[disabled] { opacity: 0.5; pointer-events: none; }
.run-btn .spin { display: inline-block; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.card-label .shine {
  background: linear-gradient(
    90deg,
    var(--ink) 0%,
    var(--ink) 35%,
    #B4B0C8 50%,
    var(--ink) 65%,
    var(--ink) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: labelShine 4.5s linear infinite;
}
@keyframes labelShine {
  0%   { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}
.card-big { font-size: 28px; font-weight: 700; margin-top: -4px; }
.card-sub { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

.shopify-card .card-big { color: var(--pink); }
.ads-card .card-big { color: var(--teal); }
.profit-card { background: linear-gradient(135deg, rgba(23,185,120,0.07), rgba(103,226,227,0.06)); border-color: rgba(23,185,120,0.22); cursor: pointer; }
.profit-card:active { transform: scale(0.99); }
.profit-card .card-big { font-size: 34px; }
.profit-card .card-big.profit-pos {
  background: linear-gradient(90deg, #17B978 0%, #17B978 40%, #A5F3D0 50%, #17B978 60%, #17B978 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: labelShine 4s linear infinite;
}
.profit-card .card-big.profit-neg { color: var(--bad); }
.silver-card .card-big {
  background: linear-gradient(
    90deg,
    #8B8FA3 0%,
    #D4D7E0 35%,
    #FFFFFF 50%,
    #D4D7E0 65%,
    #8B8FA3 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: labelShine 4.5s linear infinite;
}

.chart {
  width: 100%;
  height: 48px;
  margin-top: 10px;
  display: block;
}
.chart-lg { height: 120px; }
.chart .chart-area { opacity: 1; }
.chart .chart-sheen {
  opacity: 0.6;
  mix-blend-mode: overlay;
}
.chart .chart-line { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.chart .chart-grid { stroke: var(--line); stroke-width: 1; fill: none; }
.chart .chart-ylabel { font-size: 9px; fill: var(--ink-soft); font-family: inherit; }
.shopify-card .chart .chart-line { stroke: var(--pink); }
.ads-card .chart .chart-line { stroke: var(--teal); }
.silver-card .chart .chart-line { stroke: #8C91A3; stroke-width: 2.5; }
/* Gradient stop colors for the translucent fills */
.shopify-card .chart .grad-top,
.shopify-card .chart .grad-mid,
.shopify-card .chart .grad-bot { stop-color: #E266A7; }
.ads-card .chart .grad-top,
.ads-card .chart .grad-mid,
.ads-card .chart .grad-bot { stop-color: #67E2E3; }
.silver-card .chart .grad-top,
.silver-card .chart .grad-mid,
.silver-card .chart .grad-bot { stop-color: #B8BDCE; }
.chart-axis {
  display: flex;
  justify-content: space-between;
  padding: 0 8px 0 46px;
  font-size: 10px;
  color: var(--ink-soft);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.card-row { display: flex; justify-content: space-between; align-items: flex-start; }

/* RANKS */
.rank { list-style: none; padding: 0; margin: 10px 0 0 0; display: flex; flex-direction: column; gap: 6px; }
.rank li { font-size: 13px; display: flex; justify-content: space-between; gap: 8px; }
.rank li .rk-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank li .rk-val { font-weight: 600; color: var(--ink); }
.rank li.muted { color: var(--ink-soft); justify-content: flex-start; }

/* Rich rank rows — dopamine-fueled: rank glyph on the left, bold name + gradient
   spend on top, a color-coded ROAS pill leading the metric row, and a thin
   progress bar across the bottom showing spend relative to the top row. */
.rank-rich li {
  list-style: none;
  padding: 0;
  background: white;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(30, 20, 60, 0.06);
  border: 1px solid var(--line);
  position: relative;
  transition: transform 0.15s ease-out, box-shadow 0.2s ease-out;
}
.rank-rich li.rk-item:hover,
.rank-rich li.rk-item:active {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(30, 20, 60, 0.12);
}
.rank-rich .rk-body {
  display: flex;
  gap: 12px;
  align-items: stretch;
  padding: 10px 12px 14px;
}
/* Rank ticker — styled like a black betting-screen panel. White numeric
   glyph on a dark glossy card with a subtle top highlight + inset shadow
   for depth. Feels like a scoreboard slot, not decorative typography. */
.rank-rich .rk-rank {
  position: relative;
  overflow: hidden;
  width: 38px;
  height: 46px;
  border-radius: 6px;
  background: linear-gradient(180deg, #1c1628 0%, #05030a 100%);
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.35);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  flex-shrink: 0;
  align-self: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.rank-rich .rk-rank::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: rankShineSweep 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes rankShineSweep {
  0%   { transform: translateX(-120%); }
  55%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}
/* Stagger each rank's shine so they don't all flash at once */
.rank-rich li.rk-rank-1 .rk-rank::after { animation-delay: 0s; }
.rank-rich li.rk-rank-2 .rk-rank::after { animation-delay: 0.25s; }
.rank-rich li.rk-rank-3 .rk-rank::after { animation-delay: 0.5s; }
.rank-rich li.rk-rank-4 .rk-rank::after { animation-delay: 0.75s; }
.rank-rich li.rk-rank-5 .rk-rank::after { animation-delay: 1s; }
.rank-rich li.rk-rank-1 .rk-rank { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -1px 0 rgba(0, 0, 0, 0.7), 0 3px 10px rgba(0, 0, 0, 0.4); }
.rank-rich .rk-main { flex: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.rank-rich .rk-head { display: flex; align-items: baseline; gap: 10px; }
.rank-rich .rk-name {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-rich .rk-spend {
  font-size: 16px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--pink), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.rank-rich .rk-metrics {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.rank-rich .rk-roas {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.rank-rich .rk-roas.rk-roas-hot {
  background: linear-gradient(135deg, var(--pink), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rank-rich .rk-roas.rk-roas-cool {
  color: var(--ink-soft);
  opacity: 0.75;
}
.rank-rich .rk-roas .rk-cpa {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: var(--ink-soft);
  opacity: 0.75;
  margin-left: 6px;
  letter-spacing: 0;
}
.rank-rich .rk-stats {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  flex-wrap: wrap;
}
.rank-rich .rk-stat-cell b { color: var(--ink); font-weight: 700; }
.rank-rich .rk-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.04);
}
.rank-rich .rk-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pink), var(--teal));
  transition: width 0.5s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Media Buyer tab — scaffolded for now, wiring up Meta API in follow-ups.
   Visual tone: same brand gradient + white cards as the rest of the app. */
.media-summary-card {
  background: linear-gradient(135deg, var(--pink) 0%, var(--teal) 100%);
  color: white;
  border: none;
}
.media-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 10px;
}
.media-summary-pill {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.media-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.media-summary-cell {
  background: rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
}
.media-summary-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 3px;
  font-variant-numeric: tabular-nums;
}
.media-summary-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  opacity: 0.9;
}
.media-cta-card { border: 1px solid var(--line); }
.media-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.media-cta-btn {
  border: none;
  background: linear-gradient(140deg, #2A2437 0%, #0B0714 48%, #2A2437 100%);
  color: white;
  padding: 12px 18px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
  flex-shrink: 0;
}
.media-cta-btn:active { transform: scale(0.96); }

/* Tap anywhere on the rank card to toggle ad ↔ campaign. Small pill in the
   corner shows the current state — reads as a label, not a control. */
.rank-card { cursor: pointer; transition: transform 0.15s ease-out; }
.rank-card:active { transform: scale(0.985); }
.rank-state-pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 4px 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink), var(--teal));
  color: white;
  box-shadow: 0 2px 6px rgba(226, 102, 167, 0.25);
  transition: transform 0.3s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Juicy swap: old list lifts up + fades out, new list drops in from below
   with a tiny overshoot; list items cascade in one-after-the-other. Pill
   gets a quick scale pulse so the state change is obvious. */
.rank-rich { transition: opacity 0.18s ease-out, transform 0.18s ease-out; }
.rank-rich.rank-swap-out {
  opacity: 0;
  transform: translateY(-6px) scale(0.98);
}
.rank-rich.rank-swap-in li {
  opacity: 0;
  transform: translateY(10px);
  animation: rankItemIn 0.45s cubic-bezier(0.2, 0.9, 0.3, 1) forwards;
}
.rank-rich.rank-swap-in li:nth-child(1) { animation-delay: 0.00s; }
.rank-rich.rank-swap-in li:nth-child(2) { animation-delay: 0.04s; }
.rank-rich.rank-swap-in li:nth-child(3) { animation-delay: 0.08s; }
.rank-rich.rank-swap-in li:nth-child(4) { animation-delay: 0.12s; }
.rank-rich.rank-swap-in li:nth-child(5) { animation-delay: 0.16s; }
@keyframes rankItemIn {
  0%   { opacity: 0; transform: translateY(10px) scale(0.985); }
  70%  { opacity: 1; transform: translateY(-2px) scale(1.005); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.rank-state-pill.rank-pill-pulse {
  animation: rankPillPulse 0.45s cubic-bezier(0.2, 0.9, 0.3, 1);
}

/* Per-rank window toggle (1D / 7D / M2D) sits next to the ad/campaign pill. */
.rank-toolbar { display: flex; align-items: center; gap: 6px; }
.rank-window-toggle button { padding: 3px 8px; font-size: 10px; }
@keyframes rankPillPulse {
  0%   { transform: scale(1); box-shadow: 0 2px 6px rgba(226, 102, 167, 0.25); }
  40%  { transform: scale(1.22); box-shadow: 0 6px 18px rgba(226, 102, 167, 0.55); }
  100% { transform: scale(1); box-shadow: 0 2px 6px rgba(226, 102, 167, 0.25); }
}

/* REPORTS */
.report-card pre { font-family: ui-monospace, 'Menlo', monospace; font-size: 12px; white-space: pre-wrap; margin: 8px 0 0; }
.zone-pill-row { display: flex; gap: 6px; flex-wrap: wrap; }
.zone-pill {
  border: none;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.2s;
}
.zone-pill:active { transform: scale(0.94); }
.zone-pill.zone-pill-active { box-shadow: 0 0 0 2px var(--ink); }
.zone-pill.scale { background: #DCF7EA; color: var(--ok); }
.zone-pill.optimize { background: #FDF2CE; color: #8A6D00; }
.zone-pill.kill { background: #FADCDF; color: var(--bad); }
.zone-pill.learning { background: #ECE7F5; color: var(--ink-soft); }

.zone-details {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.zone-details-header { font-size: 12px; color: var(--ink-soft); margin-bottom: 4px; }
.zone-ad-row {
  background: var(--bg);
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
}
.zone-ad-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; word-break: break-word; }
.zone-ad-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-soft); margin-top: 3px; }
.zone-ad-meta .zone-ad-roas { font-weight: 700; color: var(--ink); }
.zone-ad-campaign { font-size: 10px; color: var(--ink-soft); margin-top: 3px; font-style: italic; }

/* Ad Report — window toggle (1D / 7D / 30D) */
.adr-toolbar { display: flex; align-items: center; gap: 8px; }
.adr-window-toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px;
  gap: 0;
}
.adr-window-toggle button {
  background: none;
  border: none;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.adr-window-toggle button.adr-win-active {
  background: linear-gradient(135deg, var(--pink), var(--teal));
  color: white;
  box-shadow: 0 2px 6px rgba(226, 102, 167, 0.25);
}

/* Ad Report card — native-styled sections */
.adr-stat-strip {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.adr-stat {
  flex: 1;
  background: var(--bg);
  border-radius: 12px;
  padding: 8px 10px;
  text-align: center;
  border: 1px solid var(--line);
}
.adr-stat-label { font-size: 9.5px; letter-spacing: 0.12em; color: var(--ink-soft); font-weight: 700; }
.adr-stat-val { font-size: 17px; font-weight: 700; color: var(--ink); margin-top: 2px; }
.adr-roas-good { color: var(--ok); }
.adr-roas-ok { color: #B58900; }
.adr-roas-bad { color: var(--bad); }

.adr-section-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink-soft);
  font-weight: 800;
  text-transform: uppercase;
  margin: 10px 0 6px;
}

.adr-top-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.adr-top-row {
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}
.adr-top-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.25; word-break: break-word; }
.adr-top-meta { display: flex; justify-content: space-between; font-size: 12px; margin-top: 4px; }
.adr-top-spend { color: var(--ink); font-weight: 600; }
.adr-top-roas { color: var(--ink); font-weight: 700; }

.adr-roas-bg-good { border-left-color: var(--ok); }
.adr-roas-bg-ok { border-left-color: #F2B705; }
.adr-roas-bg-bad { border-left-color: var(--bad); }

.adr-last-run {
  margin-top: 10px;
  font-size: 11px;
  text-align: center;
}

.zone-details-sub { font-weight: 400; color: var(--ink-soft); font-size: 11px; }

/* BOTS PAGE — redesigned rows + pipeline step tiles */
.bot-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  gap: 10px;
}
.bot-row:last-child { border-bottom: none; padding-bottom: 0; }
.bot-row:first-child { padding-top: 0; }
.bot-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.bot-dot.live { background: var(--ok); box-shadow: 0 0 0 0 rgba(23, 185, 120, 0.6); animation: pulse 2.4s ease-out infinite; }
.bot-dot.dead { background: var(--bad); }
.bot-row-body { flex: 1; min-width: 0; }
.bot-name { font-size: 14px; font-weight: 700; color: var(--ink); text-transform: capitalize; }
.bot-desc { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bot-meta { font-size: 10.5px; color: var(--ink-soft); text-align: right; flex-shrink: 0; font-family: ui-monospace, 'Menlo', monospace; }

/* Avatar selector + new-avatar controls on the pipeline card */
.pipeline-avatar-controls { display: flex; gap: 6px; align-items: center; }
.pipeline-avatar-select {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: inherit;
  color: var(--ink);
  cursor: pointer;
  text-transform: capitalize;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2 4l3 3 3-3' stroke='%235B5870' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 24px;
}

/* Step tiles */
.step-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: opacity 0.15s;
}
.step-tile:last-child { border-bottom: none; padding-bottom: 0; }
.step-tile:first-child { padding-top: 0; }
.step-tile:active { opacity: 0.7; }
.step-num {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  background: var(--bg);
  color: var(--ink-soft);
  border: 1px solid var(--line);
}
.step-done .step-num { background: linear-gradient(135deg, var(--ok), #0ea668); color: white; border-color: transparent; }
.step-ready .step-num { background: linear-gradient(135deg, var(--pink), var(--teal)); color: white; border-color: transparent; box-shadow: 0 2px 6px rgba(226, 102, 167, 0.25); }
.step-locked .step-num { opacity: 0.6; }
.step-body { flex: 1; min-width: 0; }
.step-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.step-sub { font-size: 11.5px; color: var(--ink-soft); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step-chevron { color: var(--ink-soft); font-size: 18px; opacity: 0.7; flex-shrink: 0; }
.step-locked { cursor: default; opacity: 0.6; }
.step-locked .step-chevron { display: none; }

/* Research runner page */
.research-setup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.research-setup-row:last-of-type { border-bottom: none; }
.research-setup-row label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  text-transform: uppercase;
  width: 90px;
}
.research-readonly { font-size: 14px; font-weight: 600; color: var(--ink); flex: 1; text-transform: capitalize; }
.research-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: white;
}
.research-input:focus { border-color: var(--pink); outline: none; }
.research-existing {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(103, 226, 227, 0.10);
  border: 1px solid rgba(103, 226, 227, 0.25);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink);
}
.research-existing-view {
  background: none;
  border: none;
  color: var(--pink);
  font-weight: 700;
  font-size: 12px;
  padding: 6px 0 0;
  cursor: pointer;
  font-family: inherit;
}
.big-btn {
  width: 100%;
  margin-top: 12px;
  border: none;
  background: linear-gradient(135deg, var(--pink), var(--teal));
  color: white;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.1s;
  text-transform: uppercase;
}
.big-btn:active { transform: scale(0.98); }
.big-btn-stop { background: linear-gradient(135deg, #FF4D63, #D91730); }
.research-log {
  background: #0f0d1a;
  color: #a8e6f0;
  font-family: ui-monospace, 'Menlo', monospace;
  font-size: 11.5px;
  line-height: 1.5;
  padding: 12px;
  border-radius: 10px;
  max-height: 340px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  -webkit-user-select: text;
  user-select: text;
}

/* Inventory card — visual redesign */
.inv-hero {
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--line);
}
.inv-hero-good { background: linear-gradient(135deg, rgba(23,185,120,0.12), rgba(23,185,120,0.03)); border-color: rgba(23,185,120,0.2); }
.inv-hero-ok   { background: linear-gradient(135deg, rgba(242,183,5,0.15), rgba(242,183,5,0.03)); border-color: rgba(242,183,5,0.3); }
.inv-hero-bad  { background: linear-gradient(135deg, rgba(233,55,74,0.14), rgba(233,55,74,0.03)); border-color: rgba(233,55,74,0.25); }
.inv-hero-status {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--ink);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
}
.inv-hero-dot { font-size: 12px; }
.inv-hero-stock {
  font-size: 30px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 4px;
}
.inv-hero-stock.inv-oversold { color: var(--bad); }
.inv-hero-unit { font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.inv-hero-days {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-top: 4px;
}

.inv-vel-strip {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.inv-vel {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
  text-align: center;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}
.inv-vel:active { transform: scale(0.97); }
.inv-vel.inv-vel-active {
  background: linear-gradient(135deg, rgba(226, 102, 167, 0.08), rgba(103, 226, 227, 0.08));
  border-color: var(--pink);
  box-shadow: 0 2px 8px rgba(226, 102, 167, 0.15);
}
.inv-vel-label { font-size: 9.5px; letter-spacing: 0.12em; color: var(--ink-soft); font-weight: 700; }
.inv-vel-val { font-size: 15px; font-weight: 700; color: var(--ink); margin-top: 2px; }

/* Slide-down chart panel under the velocity tiles */
.inv-vel-chart {
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.2, 0.9, 0.3, 1), opacity 0.25s ease-out, margin-top 0.3s;
}
.inv-vel-chart.open {
  max-height: 220px;
  opacity: 1;
  margin-top: 10px;
}
.inv-vel-chart .chart { height: 140px; }
.inv-vel-chart .chart-line { stroke: var(--pink); }
.inv-vel-chart .grad-top,
.inv-vel-chart .grad-mid,
.inv-vel-chart .grad-bot { stop-color: #E266A7; }

.inv-note {
  margin-top: 10px;
  background: rgba(23, 185, 120, 0.10);
  border: 1px solid rgba(23, 185, 120, 0.30);
  border-radius: 12px;
  padding: 10px 12px;
}
.inv-note-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
.inv-note-from {
  font-size: 10.5px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
  margin-top: 4px;
  font-style: italic;
}

.inv-sync {
  font-size: 10.5px;
  color: var(--ink-soft);
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.06em;
}

.muted { color: var(--ink-soft); font-size: 13px; }
.spacer { height: 16px; }

/* CHAT DOCK — global "Ask Opus anything" bar. Tight — no log, minimal padding. */
.chat-dock {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--line);
  padding: 6px 10px;
}
/* Inside a chat: extra bottom padding accommodates BOTH bars + tab dock. */
body.chat-detail-mode #root { padding-bottom: 240px; }
/* When the user has staged attachments the thread compose grows taller — add
   headroom so the newest chat message isn't cut off behind the compose bar. */
body.chat-detail-mode.has-thread-attachments #root { padding-bottom: 290px; }
.chat-form { display: flex; gap: 8px; align-items: center; }
.chat-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14px;
  outline: none;
  background: white;
  font-family: inherit;
}
.chat-input:focus { border-color: var(--pink); }
.chat-send {
  border: none;
  background: linear-gradient(140deg, #2A2437 0%, #0B0714 48%, #2A2437 100%);
  color: white;
  width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.chat-send:active { transform: scale(0.96); }

/* In-flight send: dim the compose and neuter the submit button so a second
   tap can't stack another POST on top of the pending one. */
.chat-compose.sending button[type="submit"],
.chat-form.sending .chat-send {
  opacity: 0.45;
  pointer-events: none;
}
.chat-compose.sending input,
.chat-form.sending .chat-input {
  opacity: 0.75;
}

/* Stop button — shown in place of the send button while an Opus reply is
   in flight for the current chat. Red glossy circle. */
.chat-stop-btn {
  display: none;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: linear-gradient(135deg, #FF4D63 0%, #D91730 100%);
  color: white;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(217, 23, 48, 0.35);
  animation: stopPulse 1.3s ease-in-out infinite;
}
.chat-stop-btn svg { width: 16px; height: 16px; }
.chat-stop-btn:active { transform: scale(0.94); }
.chat-compose.sending #chat-thread-send { display: none; }
.chat-compose.sending .chat-stop-btn { display: inline-flex; }
@keyframes stopPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(217, 23, 48, 0.35), 0 0 0 0 rgba(217, 23, 48, 0.4); }
  50%      { box-shadow: 0 2px 8px rgba(217, 23, 48, 0.35), 0 0 0 8px rgba(217, 23, 48, 0); }
}

/* Settings: model toggle segmented control */
.model-toggle {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  gap: 3px;
  margin-top: 10px;
}
.model-toggle-btn {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.model-toggle-btn.model-toggle-active {
  background: linear-gradient(135deg, var(--pink), var(--teal));
  color: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* Top-header model pill — only visible when inside a chat thread. Centered
   between the brand logo on the left and the date/settings on the right. */
.hdr-model-pill {
  display: none;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.1s;
}
body.chat-detail-mode .hdr-model-pill { display: inline-block; }
.hdr-model-pill:active { transform: scale(0.94); }

/* Floating "jump to latest" arrow — only relevant inside a chat thread and
   only when the user has scrolled away from the newest message. Sits just
   above the thread compose bar. */
.jump-latest-btn {
  position: absolute;
  bottom: calc(100% + 16px);
  right: 14px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: white;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(30, 20, 60, 0.18);
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.18s ease-out, transform 0.18s ease-out;
  z-index: 11;
}
.jump-latest-btn.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.jump-latest-btn:active { transform: translateY(0) scale(0.92); }
/* Only meaningful inside a chat thread or on the script-writer run page;
   hide outright otherwise so it doesn't flash during page transitions. */
body:not(.chat-detail-mode):not(.sw-run-mode) .jump-latest-btn { display: none; }
/* .bottom-stack is the positioning context for the arrow. */
.bottom-stack { position: fixed; }

/* Script writer context banner (avatar + hook file pills shown once picked) */
.sw-ctx {
  background: #f7f4fa;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.sw-ctx-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px;
  padding: 4px 0;
}
.sw-ctx-row + .sw-ctx-row { border-top: 1px solid #ece6f1; margin-top: 4px; padding-top: 8px; }
.sw-ctx-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #888;
  font-weight: 600;
  min-width: 52px;
}
.sw-ctx-value {
  flex: 1;
  font-weight: 600;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sw-ctx-change {
  background: none;
  border: none;
  color: var(--pink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
}
.sw-ctx-change:active { opacity: 0.6; }

/* Script writer avatar + hook file rows (tappable pills) */
.sw-avatar-option, .sw-hook-option {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 6px;
  background: white;
  cursor: pointer;
  font-size: 15px;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.sw-avatar-option:active, .sw-hook-option:active { transform: scale(0.99); }
.sw-avatar-option:hover, .sw-hook-option:hover { border-color: var(--pink); }
.sw-avatar-option.selected, .sw-hook-option.selected {
  background: #fdf0f7;
  border-color: var(--pink);
  color: #9b2f70;
  font-weight: 600;
}

/* Script writer hook picker cards */
.sw-hook-card {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 8px;
  background: white;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.sw-hook-card:active { transform: scale(0.99); }
.sw-hook-card:hover { border-color: var(--pink); }
.sw-hook-card.sw-hook-written { background: #f5fbf6; border-color: #cfe8d2; }
.sw-hook-card-head {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.sw-hook-num { font-weight: 600; font-size: 13px; }
.sw-hook-meta { font-size: 12px; color: #777; }
.sw-hook-badge {
  margin-left: auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #2c8a3a;
  color: white;
  font-weight: 600;
}
.sw-hook-preview {
  font-size: 13px;
  color: #444;
  line-height: 1.4;
}

/* Script viewer modal */
.sw-script-sheet {
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.sw-script-file {
  font-size: 11px;
  word-break: break-all;
  margin-bottom: 10px;
  font-family: "SF Mono", Menlo, monospace;
}
.sw-script-viewer {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--ink);
  font-family: "SF Mono", Menlo, monospace;
  margin-bottom: 14px;
}
.sw-script-actions { display: flex; gap: 10px; }
.sw-script-actions button { flex: 1; }
.sw-script-pick {
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  font-size: 13px;
  word-break: break-all;
}
.sw-script-pick:hover { border-color: var(--pink); }

/* RENDERED MARKDOWN — readable document view for .md files */
.rendered-md {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  white-space: normal !important;
  color: var(--ink);
}
.rendered-md > *:first-child { margin-top: 0; }
.rendered-md > *:last-child { margin-bottom: 0; }
.rendered-md h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 18px 0 10px;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.rendered-md h2 {
  font-size: 17px;
  font-weight: 700;
  margin: 22px 0 8px;
  line-height: 1.3;
  color: var(--pink);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rendered-md h3 {
  font-size: 15px;
  font-weight: 700;
  margin: 18px 0 6px;
  color: var(--ink);
}
.rendered-md h4,
.rendered-md h5,
.rendered-md h6 {
  font-size: 13px;
  font-weight: 700;
  margin: 14px 0 4px;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.rendered-md p { margin: 0 0 12px; }
.rendered-md strong { font-weight: 700; color: var(--ink); }
.rendered-md em { font-style: italic; }
.rendered-md hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 22px 0;
}
.rendered-md ul,
.rendered-md ol {
  margin: 0 0 12px 0;
  padding-left: 22px;
}
.rendered-md li { margin-bottom: 4px; }
.rendered-md a {
  color: var(--pink);
  text-decoration: underline;
  word-break: break-word;
}
.rendered-md code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}
.rendered-md pre {
  background: rgba(0, 0, 0, 0.05);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 12px;
}
.rendered-md pre code {
  background: none;
  padding: 0;
  font-size: 12px;
}