/* ============================================================================
   StyleKro CHAT styles (split from styles.css 2026-06-26). Key-selector rules
   for .chat-*/.bubble*/.composer*/.msg-*/.welcome*. Load AFTER common.css.
   ============================================================================ */
/* ==========  Chat  ========== */
.screen:has(.chat-shell) { padding-bottom: 24px; }
.chat-shell {
  flex: 1;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 28px;
  min-height: 0;
}
.chat-side {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: fit-content;
  position: sticky; top: 24px;
}

.suggestions { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line); }

.chat-main {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  min-height: 70vh;
  height: calc(100vh - 120px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.chat-list {
  flex: 1;
  overflow-y: auto;
  padding: 32px clamp(20px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  scroll-behavior: smooth;
}
.chat-list::-webkit-scrollbar { width: 6px; }
.chat-list::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 4px; }

.bubble {
  max-width: 78%;
  padding: 14px 18px;
  border-radius: 18px;
  line-height: 1.55;
  font-size: 15px;
  white-space: pre-wrap;
  animation: pop .25s ease both;
}
.bubble.user {
  align-self: flex-end;
  background: var(--grad);
  color: white;
  border-bottom-right-radius: 4px;
  box-shadow: 0 8px 20px -10px rgba(255, 92, 138, 0.5);
}
.bubble.assistant {
  align-self: flex-start;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.bubble.assistant.welcome {
  background: var(--paper);
  border-left: 2px solid var(--accent);
  border-radius: 0;
  padding-left: 22px;
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 90%;
}
.bubble.image-only { padding: 0; background: transparent; border: none; }

.bubble.typing {
  display: flex; gap: 6px; align-items: center;
  background: var(--paper-2); border: 1px solid var(--line);
}

/* ==========  Composer  ========== */
.composer {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  gap: 12px;
  padding: 18px clamp(20px, 4vw, 32px);
  border-top: 1px solid var(--line);
  background: var(--paper);
  align-items: end;
}
.composer-hint {
  margin: 0;
  padding: 10px clamp(20px, 4vw, 32px) 18px;
  font-size: 11px;
  color: var(--muted);
  background: var(--paper);
  letter-spacing: 0.12em;
  text-transform: none;
  font-style: italic;
  font-family: 'Fraunces', serif;
}

/* ==========  Composer pill (modern unified input)  ========== */
.composer.composer-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 14px;
  margin: 14px clamp(20px, 4vw, 32px) 0;
  background: #fff;
  border: 1px solid rgba(20, 20, 50, 0.08);
  border-radius: 999px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(20, 20, 50, 0.08);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.composer.composer-pill:focus-within {
  border-color: rgba(255, 45, 111, 0.35);
  box-shadow: 0 10px 30px rgba(255, 45, 111, 0.12);
}
.composer.composer-pill .composer-attach {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f8;
  border: none;
  border-radius: 999px;
  color: #1d1d1f;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.composer.composer-pill .composer-attach:hover { background: #ffe6ee; color: #ff2d6f; }
.composer.composer-pill .composer-send {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #1d1d1f;
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.18s ease, opacity 0.18s ease;
}
.composer.composer-pill .composer-send:hover:not(:disabled) {
  background: #ff2d6f;
  transform: translateY(-1px);
}
.composer.composer-pill .composer-send:disabled { opacity: 0.4; cursor: not-allowed; }
.composer.composer-pill .composer-send-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  animation: blink 1s infinite ease-in-out;
}
.composer-pill + .composer-hint { padding-top: 10px; padding-bottom: 14px; background: transparent; }

/* ==========  Welcome (legacy, kept for compat)  ========== */
.welcome-wrap {
  min-height: calc(100vh - 80px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
}
.welcome-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 56px;
  max-width: 920px;
  width: 100%;
  box-shadow: var(--shadow-md);
}
.welcome-eyebrow { color: var(--accent); margin-bottom: 14px; }
.welcome-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 36px 0;
}
.welcome-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.source-badge.chat { background: rgba(15, 14, 23, 0.78); }
.source-pill.chat {
  background: #f3f4f8;
  color: #6f7282;
}

/* ===== Chat UI v2 ===== */
.chat-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.chat-title { display: flex; align-items: center; gap: 8px; font-size: 0.92rem; }
.chat-title-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52,211,153,0.18);
  animation: pulse 2s ease-in-out infinite;
}

.chat-list { position: relative; }
.chat-list.drag-over { outline: 2px dashed var(--accent, #c084fc); outline-offset: -8px; }

.bubble-row {
  display: flex;
  gap: 10px;
  margin: 14px 0;
  align-items: flex-end;
  animation: msgIn 0.25s ease-out;
}
.bubble-row.user { justify-content: flex-end; }

.msg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.82rem; font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.msg-avatar.assistant {
  background: linear-gradient(135deg, #a855f7, #ec4899);
  color: white;
}
.msg-avatar.user {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: #ddd;
}

.msg-col { display: flex; flex-direction: column; max-width: 70%; }
.bubble-row.user .msg-col { align-items: flex-end; }
.bubble-row.assistant .msg-col { align-items: flex-start; }

.bubble-text { line-height: 1.55; }
.bubble.image-only { padding: 6px; background: transparent; border: none; }
.bubble-image {
  max-width: 100%;
  max-height: 380px;
  border-radius: 14px;
  cursor: zoom-in;
  display: block;
  margin-top: 6px;
  transition: transform 0.2s;
}
.bubble-image:hover { transform: scale(1.01); }

.msg-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 4px;
  padding: 0 4px;
  font-size: 0.72rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.bubble-row:hover .msg-meta { opacity: 0.7; }
.msg-time { opacity: 0.7; }
.msg-action {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0 4px;
  text-decoration: none;
  opacity: 0.6;
}
.msg-action:hover { opacity: 1; }

.chat-skeleton { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.drop-overlay {
  position: absolute;
  inset: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(168,85,247,0.12);
  border: 2px dashed var(--accent, #c084fc);
  border-radius: 16px;
  font-size: 1rem;
  color: var(--accent, #c084fc);
  pointer-events: none;
  font-weight: 500;
}

.composer-attach-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 18px 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
.chat-side-scrim { display: none; }
.bubble.assistant.typing:has(.tryon-progress-pill) {
  padding: 14px 16px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}
html[data-shell="android"] .chat-shell { padding-top: 0; }


/* ============================================================
   Chat consistency pass — unify all sections of the chat screen
   (sidebar, shell, bubbles, avatars, scroll btn, drop overlay,
    attach preview, composer hint) with the v3 pink/glass palette
   ============================================================ */

/* ---- Shell + sidebar ---- */
.chat-shell { gap: 20px; }
.chat-side {
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,45,111,0.1);
  border-radius: 22px;
  box-shadow: 0 12px 28px rgba(255,45,111,0.06), 0 2px 8px rgba(20,20,50,0.04);
}

/* ---- Main chat panel shell ---- */
.chat-main {
  background: linear-gradient(180deg, #fff 0%, #fffafc 50%, #fff5f8 100%);
  border: 1px solid rgba(255,45,111,0.08);
  border-radius: 22px;
  box-shadow: 0 16px 40px rgba(255,45,111,0.06), 0 2px 10px rgba(20,20,50,0.04);
}

/* ---- Chat list & scrollbar ---- */
.chat-list {
  padding: 22px clamp(16px, 3vw, 24px);
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,45,111,0.25) transparent;
}
.chat-list::-webkit-scrollbar { width: 6px; }
.chat-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255,45,111,0.3), rgba(196,77,255,0.25));
  border-radius: 4px;
}
.chat-list::-webkit-scrollbar-track { background: transparent; }
.chat-list.drag-over { outline-color: #ff2d6f; }

/* ---- Bubble rows ---- */
.bubble-row { margin: 6px 0; gap: 10px; }
.msg-col { max-width: 76%; }

/* Avatars — unified small gradient/white style */
.msg-avatar {
  width: 30px; height: 30px;
  font-size: 12px; font-weight: 700;
  box-shadow: 0 2px 6px rgba(20,20,50,0.08);
}
.msg-avatar.assistant {
  background: linear-gradient(135deg, #ff2d6f, #c44dff);
  color: #fff;
}
.msg-avatar.user {
  background: #fff;
  border: 1px solid rgba(20,20,50,0.08);
  color: #1d1d1f;
}

/* Bubbles — modernized */
.bubble {
  max-width: 100%;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  box-shadow: 0 4px 14px rgba(20,20,50,0.04);
}
.bubble.user {
  background: linear-gradient(135deg, #ff2d6f 0%, #ff5b8f 60%, #c44dff 100%);
  color: #fff;
  border-bottom-right-radius: 6px;
  box-shadow: 0 8px 20px rgba(255,45,111,0.25);
}
.bubble.assistant {
  background: #fff;
  border: 1px solid rgba(20,20,50,0.06);
  border-bottom-left-radius: 6px;
  color: #1d1d1f;
}
.bubble.assistant.welcome {
  background: linear-gradient(135deg, rgba(255,45,111,0.06), rgba(196,77,255,0.04));
  border: 1px solid rgba(255,45,111,0.18);
  border-radius: 18px;
  border-left: none;
  padding: 14px 18px;
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-style: italic;
  color: #1d1d1f;
}
.bubble.image-only { box-shadow: none; }
.bubble-image {
  border-radius: 14px;
  max-height: 360px;
  box-shadow: 0 8px 22px rgba(20,20,50,0.1);
}
.bubble.typing {
  background: #fff;
  border: 1px solid rgba(20,20,50,0.06);
  box-shadow: 0 4px 14px rgba(20,20,50,0.04);
}

/* Meta row */
.msg-meta { font-size: 11px; padding: 0 6px; }
.msg-time { color: #8a8a93; }
.msg-action { color: #6f7282; }
.msg-action:hover { color: #ff2d6f; opacity: 1; }

/* ---- Drop overlay — pink theme ---- */
.drop-overlay {
  background: rgba(255,45,111,0.08);
  border-color: #ff2d6f;
  color: #ff2d6f;
  border-radius: 18px;
  font-weight: 700;
}

/* ---- Composer attach preview — glass card ---- */
.composer-attach-preview {
  margin: 12px clamp(16px, 3vw, 24px) 0;
  padding: 10px 12px;
  background: #fff;
  border: 1.5px solid #ff2d6f;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(255,45,111,0.18);
  flex-shrink: 0;
  animation: capSlideIn 0.22s ease-out;
}

/* ---- Composer attach row: fixed above the pill (Gmail-style) ---- */
.composer-attach-row {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 196px);
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - 32px);
  max-width: 560px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 10px;
  background: #fff;
  border: 1px solid rgba(20,20,50,0.08);
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(20,20,50,0.10), 0 2px 6px rgba(20,20,50,0.04);
  animation: capSlideIn 0.18s ease-out;
}

/* ---- Composer paddings unified ---- */
.composer.composer-pill {
  margin: 12px clamp(16px, 3vw, 24px) 0;
}
.composer-hint {
  padding: 8px clamp(16px, 3vw, 24px) 14px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  font-style: normal;
  font-family: inherit;
  color: #8a8a93;
  background: transparent;
}


/* ============================================================
   Chat redesign — v4 (mockup-aligned)
   Hero stage with overlay chat, icon category tabs, heart on
   cards, purple-tinted AI rec card, composer sparkle
   ============================================================ */

/* ---- Chat-main is now sectioned: header / hero-stage (grows) / browse / ai-rec / composer ---- */
.chat-main {
  background: #fff;
  padding: 0;
}

/* Clear-chat icon button — top-right of chat-main */
.chat-clear-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 10;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: #555;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transition: color .15s ease, background .15s ease, border-color .15s ease, transform .15s ease;
}
.chat-clear-btn:hover {
  color: #c0392b;
  border-color: rgba(192, 57, 43, 0.35);
  background: #fff;
}
.chat-clear-btn:active { transform: scale(0.96); }
.chat-main { position: relative; }

/* Chat overlay on hero — was chat-list, now absolutely positioned */
.chat-list.overlay {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: min(70%, 360px);
  z-index: 2;
  padding: 14px 12px 14px 14px;
  gap: 8px;
  overflow-y: auto;
  background: transparent;
  border: none;
  scrollbar-width: none;
}
.chat-list.overlay::-webkit-scrollbar { display: none; }

/* Bubble rows inside hero overlay — smaller, glassier */
.chat-list.overlay .bubble-row { margin: 4px 0; gap: 6px; }
.chat-list.overlay .msg-col { max-width: 100%; }
.chat-list.overlay .msg-avatar {
  width: 28px; height: 28px;
  font-size: 11px;
  box-shadow: 0 4px 10px rgba(20,20,50,0.15);
  border: 2px solid #fff;
}
.chat-list.overlay .bubble {
  font-size: 13px;
  padding: 9px 13px;
  max-width: 100%;
  box-shadow: 0 6px 18px rgba(20,20,50,0.12);
}
.chat-list.overlay .bubble.assistant {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.5);
  color: #1d1d1f;
}
.chat-list.overlay .bubble.user {
  background: linear-gradient(135deg, #a78bfa 0%, #7c5cff 100%);
  color: #fff;
  box-shadow: 0 8px 20px rgba(124,92,255,0.35);
}
.chat-list.overlay .bubble.welcome {
  font-size: 13px;
  padding: 9px 13px;
  font-style: normal;
  font-family: inherit;
  background: rgba(255,255,255,0.96);
  border: 1px solid rgba(255,255,255,0.5);
}
.chat-list.overlay .bubble-image { max-height: 200px; }
.chat-list.overlay .msg-meta { display: none; }

/* Drop overlay positioned for hero context */
.chat-list.overlay .drop-overlay { inset: 8px; }

/* ---- Composer — sparkle prefix, purple gradient send ---- */
.composer.composer-pill {
  margin: 10px clamp(14px, 3vw, 22px) 6px;
  padding: 6px 6px 6px 14px;
  background: #fff;
  border: 1px solid rgba(20,20,50,0.08);
  border-radius: 999px;
  box-shadow: 0 6px 16px rgba(20,20,50,0.05);
}
.composer.composer-pill:focus-within {
  border-color: rgba(124,92,255,0.35);
  box-shadow: 0 8px 20px rgba(124,92,255,0.15);
}
.composer.composer-pill .composer-attach {
  width: 34px; height: 34px;
  background: transparent;
  color: #8a8a93;
}
.composer.composer-pill .composer-attach:hover { background: #f3e8ff; color: #7c5cff; }
.composer.composer-pill .composer-send {
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #a78bfa 0%, #7c5cff 100%);
  box-shadow: 0 6px 14px rgba(124,92,255,0.4);
}
.composer.composer-pill .composer-send:hover:not(:disabled) {
  background: linear-gradient(135deg, #9d7df9 0%, #6a47ff 100%);
  box-shadow: 0 10px 20px rgba(124,92,255,0.5);
}
.composer-hint { display: none; }


/* ---- Full-screen chat (header removed) ---- */
.screen:has(.chat-shell) { padding-bottom: 0; padding-top: 0; }
.chat-shell {
  max-width: none;
  width: 100%;
  margin: 0;
  gap: 0;
  padding: 0;
}
.chat-main {
  border-radius: 0;
  border: none;
  box-shadow: none;
  height: 100vh;
  min-height: 100vh;
}

/* ---- Chat overlay: full width now that hero has no image ---- */
.chat-list.overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  max-width: none;
  padding: 16px 20px 24px;
  background: transparent;
  z-index: 2;
  overflow-y: auto;
}

/* =====================================================
   PROFESSIONAL POLISH — chat overlay refinements
   ===================================================== */

/* Hide user avatars — modern chat UIs (Claude/ChatGPT) don't show them */
.chat-list.overlay .bubble-row.user .msg-avatar.user { display: none; }

/* Smaller, neutral assistant avatar */
.chat-list.overlay .msg-avatar.assistant {
  width: 28px; height: 28px;
  font-size: 12px; font-weight: 600;
  background: #1d1d1f;
  color: #fff;
  border: none;
  box-shadow: none;
}

/* Refined bubble spacing & typography */
.chat-list.overlay { padding: 18px 16px 28px; gap: 4px; }
.chat-list.overlay .bubble-row { margin: 4px 0; gap: 10px; align-items: flex-start; }
.chat-list.overlay .msg-col { max-width: 78%; }

/* Assistant bubble — cleaner card */
.chat-list.overlay .bubble.assistant {
  background: #fff;
  border: 1px solid rgba(20,20,50,0.08);
  box-shadow: 0 1px 2px rgba(20,20,50,0.04);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #1d1d1f;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* User bubble — refined purple, right-aligned, no avatar gap */
.chat-list.overlay .bubble.user {
  background: #7c5cff;
  color: #fff;
  border: none;
  border-radius: 14px 14px 4px 14px;
  padding: 10px 13px;
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 1px 2px rgba(124,92,255,0.18);
}

/* Image-only user bubble: just show the image, no purple bg */
.chat-list.overlay .bubble.user.image-only {
  background: transparent;
  padding: 0;
  box-shadow: none;
}
.chat-list.overlay .bubble.user.image-only .bubble-image {
  border-radius: 14px;
  max-height: 240px;
  box-shadow: 0 2px 8px rgba(20,20,50,0.12);
}

/* Welcome bubble */
.chat-list.overlay .bubble.welcome {
  background: #fff;
  border: 1px solid rgba(20,20,50,0.08);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
  color: #1d1d1f;
}

/* Bubble images — crisp rounded */
.chat-list.overlay .bubble-image {
  border-radius: 10px;
  max-height: 260px;
  margin-top: 8px;
}
.chat-list.overlay .bubble.assistant .bubble-image:first-child { margin-top: 0; }

/* ---- Fix: leave room for bottom nav so composer is visible ---- */
.chat-main { height: 100vh; min-height: 100vh; }
/* Ensure composer is always visible (not pushed off by hero flex) */
.composer { flex-shrink: 0; }

/* ---- Fix v2: composer visibility — use dynamic vh & restore bottom padding ---- */
.chat-main {
  height: auto !important;
  min-height: 0 !important;
  /* Let the natural document flow place us between topbar and bottom nav */
}
.chat-shell { min-height: calc(100dvh - 80px); }
.composer, .composer-pill { flex-shrink: 0; position: relative; z-index: 5; }


.chat-load-more { display: flex; justify-content: center; padding: 6px 0 10px; }
.chat-load-more-hint { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted, rgba(255,255,255,0.55)); opacity: 0.75; }



/* ============================================================
   Chat spacing polish � tighter, more breathable, mobile-first
   ============================================================ */
.chat-list.overlay {
  padding: 20px 14px 28px;
  gap: 14px;
}
.bubble-row {
  margin: 0;
  gap: 8px;
  align-items: flex-end;
}
.chat-list.overlay .bubble-row + .bubble-row { margin-top: 2px; }
/* Tighter stacking when the same role speaks twice in a row */
.bubble-row.assistant + .bubble-row.assistant,
.bubble-row.user + .bubble-row.user {
  margin-top: -4px;
}

.msg-col { max-width: 82%; gap: 2px; }
.bubble {
  padding: 12px 16px;
  border-radius: 20px;
  line-height: 1.5;
  font-size: 15px;
}
.bubble.user {
  border-bottom-right-radius: 6px;
}
.bubble.assistant {
  border-bottom-left-radius: 6px;
}
.bubble.image-only { padding: 4px; }
.bubble-image { margin-top: 4px; border-radius: 16px; }
.bubble.image-only .bubble-image { margin-top: 0; }

.msg-avatar { width: 28px; height: 28px; font-size: 0.78rem; }
.msg-meta { padding: 2px 6px 0; font-size: 0.7rem; }

.chat-load-more { padding: 4px 0 10px; }

.chat-shell {
  max-width: 1280px;
  gap: 24px;
}

.chat-side {
  top: 96px;
  padding: 26px;
}

.chat-main {
  min-height: 72vh;
  background: var(--surface-panel-tint);
}

.chat-list {
  padding: 24px clamp(18px, 3vw, 28px) 28px;
  gap: 16px;
  scrollbar-color: rgba(255, 56, 92, 0.22) transparent;
}

.chat-list.overlay {
  padding: 22px 16px 30px;
}

.chat-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 107, 107, 0.42), rgba(255, 77, 141, 0.34));
}

.bubble-row {
  gap: 10px;
}

.msg-col {
  max-width: 80%;
  gap: 4px;
}

.bubble {
  padding: 14px 18px;
  border-radius: var(--surface-radius);
  line-height: 1.58;
  box-shadow: 0 10px 22px rgba(20, 20, 50, 0.05);
}

.bubble.user {
  background: var(--grad);
  box-shadow: 0 18px 30px rgba(255, 77, 141, 0.18);
}

.bubble.assistant {
  background: var(--surface-flat);
  border: var(--border-subtle);
}

.bubble.assistant.welcome {
  position: relative;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 246, 249, 0.96));
  border: 1px solid rgba(255, 56, 92, 0.10);
  padding-left: 22px;
}

.bubble.assistant.welcome::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  border-radius: 999px;
  background: var(--grad);
}

.msg-avatar {
  width: 32px;
  height: 32px;
  border: var(--border-subtle);
  box-shadow: 0 8px 16px rgba(20, 20, 50, 0.08);
}

.msg-avatar.user {
  background: var(--surface-flat);
  color: var(--accent-active);
  border-color: rgba(255, 56, 92, 0.16);
}

.msg-meta,
.composer-hint {
  color: var(--muted);
}

.composer.composer-pill {
  margin: 16px clamp(18px, 3vw, 28px) 0;
  padding: 10px 10px 10px 16px;
  border-radius: var(--surface-radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 30px rgba(20, 20, 50, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px) saturate(1.06);
  -webkit-backdrop-filter: blur(14px) saturate(1.06);
}

.composer.composer-pill .composer-attach {
  background: rgba(255, 56, 92, 0.08);
  color: var(--accent-active);
}

.composer.composer-pill .composer-send {
  background: var(--grad);
  box-shadow: 0 12px 24px rgba(255, 77, 141, 0.20);
}

.composer.composer-pill .composer-send:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff5e74 0%, #ff8a47 42%, #ff3d87 100%);
  box-shadow: 0 16px 30px rgba(255, 77, 141, 0.26);
}

.screen:has(.chat-shell) {
  background: transparent;
}

.chat-main {
  background: transparent;
  border: none;
  box-shadow: none;
}

.bubble.assistant {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px) saturate(1.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.05);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 24px;
  border-bottom-left-radius: 10px;
  box-shadow:
    0 12px 36px rgba(255, 122, 146, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  color: #404040;
}

.bubble.user {
  background: linear-gradient(135deg, #ff7f8e, #ff9aa5);
  color: #fff;
  border-radius: 24px;
  border-bottom-right-radius: 8px;
  box-shadow: 0 10px 25px rgba(255, 122, 146, 0.28);
}

.composer.composer-pill {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px;
  box-shadow:
    0 12px 40px rgba(255, 122, 146, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.composer.composer-pill .composer-attach {
  background: #fff2f4;
  color: #ff7f8e;
}
.composer.composer-pill .composer-attach:hover {
  background: #ffe1e6;
  color: #ff5d75;
}

.composer.composer-pill .composer-send {
  background: linear-gradient(135deg, #ffb6c1, #ff9aa5);
  color: #fff;
  box-shadow: 0 10px 24px rgba(255, 153, 170, 0.35);
}
.composer.composer-pill .composer-send:hover:not(:disabled) {
  background: linear-gradient(135deg, #ff9aa5, #ff7f8e);
  transform: translateY(-1px);
}

/* Vogue agent avatar — soft pink gradient with serif mark */
.msg-avatar.assistant,
.chat-list .msg-avatar.assistant,
.chat-list.overlay .msg-avatar.assistant {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, #ff9eb0 0%, #ffb7a2 100%);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  box-shadow:
    0 10px 22px rgba(255, 140, 160, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  font-family: 'Fraunces', 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0;
  position: relative;
  overflow: visible;
}

.msg-avatar.assistant::after,
.chat-list .msg-avatar.assistant::after,
.chat-list.overlay .msg-avatar.assistant::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #4ade80;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}