/* frontend/static/css/jathagam_exp/ai_joshier/ai_joshier_page.css */
/* AI Joshier standalone page — mobile-first */

/* ═══════════════════════════════════════════════════
   Prompt 109: Chat-shell layout — viewport lock,
   single scroll, fixed-bottom composer
   ═══════════════════════════════════════════════════ */
/* Prompt 110 fix: replaced body:has(#ai-joshier-page) with body.ai-joshier-body
   to prevent FOUC from :has() progressive rendering delay */
body.ai-joshier-body {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.ai-joshier-body > .header {
  flex-shrink: 0;
}

body.ai-joshier-body > main.page-container {
  flex: 1;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0;
  width: 100%;  /* Prompt 110: stabilise desktop width in flex chain */
}

/* ── Page wrapper ── */
.ai-joshier-page {
  width: 100%;  /* Prompt 110: fill parent — prevents content-driven width reflow */
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-pad, 16px) 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  /* Prompt 65: Subtle tinted background surface matching homepage design language */
  background:
    radial-gradient(ellipse 80% 55% at 50% 0%, rgba(123,44,191,0.06) 0%, transparent 65%),
    linear-gradient(170deg, #f8f2ff 0%, #f3ecfb 40%, #eee7f6 100%);
  border-radius: 16px 16px 0 0;
}

/* ── Hero (Prompt 109: compact top chrome) ── */
.ai-joshier-hero {
  text-align: center;
  padding: 10px 0 6px;
  flex-shrink: 0;
}

.ai-joshier-title {
  color: #5a189a;
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 2px;
}

.ai-joshier-subtitle {
  color: #7b6b8a;
  font-size: 0.82rem;
  margin: 0;
  line-height: 1.4;
}

/* Prompt 109: Hide subtitle when actively chatting (non-landing mode) */
.ai-joshier-page:not(.ai-joshier-page--landing) .ai-joshier-subtitle {
  display: none;
}

/* ── Chart context strip ── */
.ai-joshier-context-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  background: #f8f4ff;
  border: 1px solid #e8d8f8;
  border-radius: 10px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: #5a189a;
  flex-wrap: wrap;
  flex-shrink: 0;
}

.ai-joshier-context-strip--right {
  justify-content: flex-end;
}

.ai-joshier-context-rel {
  color: #7b6b8a;
  font-weight: 500;
}

.ai-joshier-context-name {
  font-weight: 600;
}

.ai-joshier-context-sep {
  color: #c0a8d8;
}

.ai-joshier-context-dob {
  color: #8a7a9a;
}

/* ── Chart switcher ── */
.ai-joshier-chart-switcher {
  position: relative;
  display: inline-flex;
}

.ai-joshier-chart-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  background: transparent;
  color: #7b2cbf;
  border: 1px solid #d4bbf0;
  border-radius: 14px;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}

.ai-joshier-chart-switch-btn:hover {
  background: #f3eaff;
  border-color: #7b2cbf;
}

.ai-joshier-chart-switch-arrow {
  font-size: 0.7rem;
  line-height: 1;
}

.ai-joshier-chart-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  max-width: 280px;
  background: #fff;
  border: 1px solid #e8d8f8;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(90, 24, 154, 0.12);
  z-index: 50;
  padding: 4px;
  max-height: 240px;
  overflow-y: auto;
}

.ai-joshier-chart-option {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s;
  gap: 2px;
}

.ai-joshier-chart-option:hover {
  background: #f3eaff;
}

.ai-joshier-chart-option--active {
  background: #f3eaff;
  cursor: default;
}

.ai-joshier-chart-option-name {
  font-size: 0.84rem;
  font-weight: 600;
  color: #5a189a;
}

.ai-joshier-chart-option--active .ai-joshier-chart-option-name::after {
  content: ' ✓';
  font-weight: 400;
  color: #7b2cbf;
}

.ai-joshier-chart-option-dob {
  font-size: 0.75rem;
  color: #8a7a9a;
}

/* ── See Jathagam CTA (Prompt 29A) ── */
.ai-joshier-see-jathagam-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  background: transparent;
  color: #7b2cbf;
  border: 1px solid #d4bbf0;
  border-radius: 14px;
  font-size: 0.8rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, border-color 0.2s;
}

.ai-joshier-see-jathagam-btn:hover {
  background: #f3eaff;
  border-color: #7b2cbf;
  color: #5a189a;
  text-decoration: none;
}

/* ── Session strip (Prompt 29B: hidden from visible UX, styles preserved for future reactivation) ── */
/*
.ai-joshier-session-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  margin-bottom: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ai-joshier-session-strip::-webkit-scrollbar {
  display: none;
}

.ai-joshier-new-conv-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: #7b2cbf;
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s;
}

.ai-joshier-new-conv-btn:hover {
  background: #5a189a;
}

.ai-joshier-new-conv-icon {
  font-size: 1rem;
  line-height: 1;
}

.ai-joshier-session-list {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ai-joshier-session-list::-webkit-scrollbar {
  display: none;
}

.ai-joshier-session-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f3eaff;
  color: #5a189a;
  border: 1px solid #d4bbf0;
  border-radius: 18px;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, border-color 0.2s;
}

.ai-joshier-session-chip:hover {
  background: #e8d4ff;
  border-color: #7b2cbf;
}

.ai-joshier-session-chip--active {
  background: #7b2cbf;
  color: #fff;
  border-color: #7b2cbf;
}

.ai-joshier-session-chip--active:hover {
  background: #5a189a;
}

.ai-joshier-session-chip-title {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ai-joshier-session-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 9px;
  font-size: 0.72rem;
  font-weight: 600;
}

.ai-joshier-session-chip--active .ai-joshier-session-chip-count {
  background: rgba(255, 255, 255, 0.25);
}

.ai-joshier-no-sessions {
  color: #8a7a9a;
  font-size: 0.8rem;
  font-style: italic;
  white-space: nowrap;
}
*/

/* ── Session switch loading overlay ── */
.ai-joshier-switch-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px 16px;
  color: #7b6b8a;
  font-size: 0.85rem;
}

/* ── Chat container ── */
.ai-joshier-chat-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8ddf0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(90, 24, 154, 0.06);
  min-height: 0;
  position: relative; /* Prompt 113: anchor for activation overlay */
}

/* ── Suggestions ── */
.ai-joshier-suggestions {
  padding: 18px 16px 10px;
  border-bottom: 1px solid #f0e8f8;
}

.ai-joshier-suggestions-label {
  font-size: 0.82rem;
  color: #8a7a9a;
  margin: 0 0 10px;
  font-weight: 500;
}

.ai-joshier-suggestion-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ai-joshier-chip {
  background: #f3eaff;
  color: #5a189a;
  border: 1px solid #d4bbf0;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 0.84rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-align: left;
  line-height: 1.4;
}

/* Tighter chips on mobile */
@media (max-width: 767px) {
  .ai-joshier-chip {
    padding: 5px 12px;
    font-size: 0.78rem;
  }
  .ai-joshier-suggestions {
    padding: 12px 14px 8px;
  }
  .ai-joshier-suggestions-label {
    margin: 0 0 6px;
  }
}

.ai-joshier-chip:hover {
  background: #e8d4ff;
  border-color: #7b2cbf;
}

/* ── Compact direct-entry onboarding (anonymous/no-chart first load) ── */
.ai-joshier-direct-entry {
  margin: 10px 14px 6px;
  padding: 16px 14px 12px;
  background: linear-gradient(170deg, #f8f2ff 0%, #f2e9ff 100%);
  border: 1px solid #e5d4f9;
  border-radius: 14px;
  text-align: center;
}

.ai-joshier-direct-entry-title {
  margin: 0;
  font-size: 1.2rem;
  color: #5a189a;
  font-weight: 700;
  line-height: 1.28;
}

.ai-joshier-direct-entry-subtitle {
  margin: 8px 0 0;
  font-size: 0.9rem;
  color: #66557a;
  line-height: 1.45;
}

.ai-joshier-direct-entry-social-proof {
  min-height: 0;
  margin-top: 8px;
}

/* Direct starter polish: keep this scoped to the true direct first-load mode only. */
.ai-joshier-page.ai-joshier-page--direct-starter-active {
  justify-content: flex-start;
}

.ai-joshier-page--direct-starter-active .ai-joshier-hero {
  display: none;
}

.ai-joshier-page--direct-starter-active .ai-joshier-chat-container {
  border: 1px solid rgba(123, 44, 191, 0.08);
  box-shadow: 0 2px 16px rgba(123, 44, 191, 0.06);
  border-radius: 20px;
  flex: 0 1 auto;
  overflow: visible;
  padding: 8px 0 10px;
  max-width: 860px;
  width: 100%;
  margin: 32px auto 0;
}

.ai-joshier-page--direct-starter-active .ai-joshier-direct-entry {
  order: 1;
  max-width: none;
  margin: 32px 16px 4px;
  padding: 18px 16px 12px;
}

.ai-joshier-page--direct-starter-active .ai-joshier-composer {
  order: 2;
  border-top: none;
  background: transparent;
  margin: 0;
  padding: 6px 16px 4px;
}

.ai-joshier-page--direct-starter-active .ai-joshier-suggestions {
  order: 3;
  border-bottom: none;
  padding: 6px 16px 10px;
}

.ai-joshier-page--direct-starter-active .ai-joshier-suggestions-label {
  text-align: center;
  margin: 0 0 10px;
}

.ai-joshier-page--direct-starter-active .ai-joshier-suggestion-chips {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ai-joshier-page--direct-starter-active .ai-joshier-chip {
  width: 100%;
  min-height: 48px;
  border-radius: 14px;
  padding: 10px 12px;
  line-height: 1.35;
}

.ai-joshier-page--direct-starter-active .ai-joshier-messages {
  display: none;
}

.ai-joshier-direct-starter-chip {
  background: #f3eaff;
  border-color: #d4bbf0;
}

.ai-joshier-direct-starter-chip:hover {
  background: #eadcff;
  border-color: #7b2cbf;
}

.ai-joshier-page--landing .ai-joshier-direct-entry {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .ai-joshier-direct-entry {
    margin: 8px 12px 4px;
    padding: 12px 10px 10px;
  }

  .ai-joshier-direct-entry-title {
    font-size: 1.02rem;
  }

  .ai-joshier-direct-entry-subtitle {
    font-size: 0.84rem;
  }

  .ai-joshier-page--direct-starter-active .ai-joshier-chat-container {
    max-width: none;
    border-radius: 16px 16px 0 0;
    margin-top: 18px;
    padding-bottom: 6px;
  }

  .ai-joshier-page--direct-starter-active .ai-joshier-direct-entry {
    margin: 18px 12px 2px;
    padding: 12px 10px 10px;
  }

  .ai-joshier-page--direct-starter-active .ai-joshier-composer {
    padding: 8px 12px 4px;
  }

  .ai-joshier-page--direct-starter-active .ai-joshier-suggestions {
    padding: 6px 12px 8px;
  }

  .ai-joshier-page--direct-starter-active .ai-joshier-suggestion-chips {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .ai-joshier-page--direct-starter-active .ai-joshier-chip {
    min-height: 44px;
    padding: 8px 12px;
  }
}

/* ── Desktop: direct-starter width enhancement ── */
@media (min-width: 768px) {
  .ai-joshier-page--direct-starter-active .ai-joshier-chat-container {
    max-width: 980px;
  }
}

/* ── Messages area (Prompt 109: single primary scroll surface) ── */
.ai-joshier-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px 16px;
  min-height: 80px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 0;
}

/* Prompt 05052026C — Latest exchange scroll anchor.
   The most-recently submitted user bubble is tagged with this class so the
   JS scroll helper can position it near the top of the chat viewport.
   `scroll-margin-top` provides a graceful fallback if anything (future
   sticky header inside the scroll container, etc.) ever uses
   scrollIntoView() on this anchor instead of the helper. */
.ai-joshier-latest-exchange-anchor {
  scroll-margin-top: 8px;
}

/* Prompt 112A: Per-response usage badge removed — replaced with persistent indicator */

/* Prompt 113B: Persistent usage indicator — compact pill above chat container */
.ai-joshier-persistent-usage {
  display: inline-block;
  font-size: 0.72rem;
  color: #7b6b8a;
  background: rgba(139, 92, 196, 0.07);
  border-radius: 999px;
  padding: 3px 12px;
  margin: 0 auto 4px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.4;
  text-align: center;
  align-self: center;
  width: fit-content;
}
/* Prompt 113B: Mode-specific color variants */
.ai-joshier-persistent-usage--free {
  color: #7b6b8a;
  background: rgba(139, 92, 196, 0.07);
}
/* Prompt 113D: Paid variants — mobile-safe max-width + soft wrap allowance */
.ai-joshier-persistent-usage--standard {
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.08);
  max-width: calc(100% - 24px);
  white-space: normal;
}
.ai-joshier-persistent-usage--premium {
  color: #6a1b9a;
  background: rgba(106, 27, 154, 0.10);
  max-width: calc(100% - 24px);
  white-space: normal;
}

/* ── Empty state ── */
.ai-joshier-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 16px;
  flex: 1;
}

.ai-joshier-empty-icon {
  font-size: 2rem;
  margin-bottom: 8px;
}

.ai-joshier-empty-text {
  color: #7b6b8a;
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0 0 12px;
  max-width: 340px;
}

/* Tighter empty state on mobile */
@media (max-width: 767px) {
  .ai-joshier-empty-state {
    padding: 16px 14px;
  }
  .ai-joshier-empty-icon {
    font-size: 1.8rem;
    margin-bottom: 6px;
  }
  .ai-joshier-empty-text {
    font-size: 0.82rem;
    margin: 0 0 10px;
  }
}

.ai-joshier-create-chart-btn {
  display: inline-block;
  background: #7b2cbf;
  color: #fff;
  padding: 10px 24px;
  border-radius: 24px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}

.ai-joshier-create-chart-btn:hover {
  background: #5a189a;
  color: #fff;
  text-decoration: none;
}

/* ── Inline no-chart CTA (shown after nudge message) ── */
.ai-joshier-nochart-inline-cta {
  display: flex;
  justify-content: center;
  padding: 4px 0 8px;
}

/* ── Message bubbles ── */
.ai-joshier-msg {
  display: flex;
  flex-direction: column;
  max-width: 85%;
}

.ai-joshier-msg-user {
  align-self: flex-end;
}

.ai-joshier-msg-assistant {
  align-self: flex-start;
}

.ai-joshier-msg-text {
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.6;
  word-break: break-word;
}

.ai-joshier-msg-user .ai-joshier-msg-text {
  background: #7b2cbf;
  color: #fff;
  border-bottom-right-radius: 4px;
}

.ai-joshier-msg-assistant .ai-joshier-msg-text {
  background: #f3eaff;
  color: #2d1b47;
  border-bottom-left-radius: 4px;
}

.ai-joshier-para {
  margin: 0 0 8px;
}

.ai-joshier-para:last-child {
  margin-bottom: 0;
}

/* ── Prompt 9: Rich response formatting ── */
.ai-joshier-list {
  margin: 4px 0 8px;
  padding-left: 20px;
  list-style: disc;
}

.ai-joshier-list-item {
  margin: 0 0 4px;
  line-height: 1.5;
}

.ai-joshier-list-item:last-child {
  margin-bottom: 0;
}

.ai-joshier-msg-text strong {
  font-weight: 600;
  color: #4a148c;
}

.ai-joshier-msg-assistant .ai-joshier-msg-text strong {
  color: #4a148c;
}

/* ── Loading indicator ── */
.ai-joshier-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  color: #7b6b8a;
  font-size: 0.85rem;
}

.ai-joshier-loading-dots {
  display: flex;
  gap: 4px;
}

.ai-joshier-loading-dots span {
  width: 6px;
  height: 6px;
  background: #b48ee0;
  border-radius: 50%;
  animation: ai-joshier-dot-pulse 1.4s infinite ease-in-out both;
}

.ai-joshier-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.ai-joshier-loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.ai-joshier-loading-dots span:nth-child(3) { animation-delay: 0s; }

@keyframes ai-joshier-dot-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ── Error area ── */
.ai-joshier-error {
  padding: 8px 16px;
  color: #c0392b;
  font-size: 0.85rem;
}

.ai-joshier-error p {
  margin: 0;
}

/* ── Prompt 90: Usage strip — subtle info bar above composer ── */
.ai-joshier-usage-strip {
  padding: 6px 14px;
  font-size: 12px;
  color: #6c5c7a;
  background: #f5f0fa;
  border-top: 1px solid #ede4f5;
  text-align: center;
  line-height: 1.4;
}
.ai-joshier-usage-strip--warn {
  color: #856404;
  background: #fff8e1;
  border-top-color: #ffe082;
}
.ai-joshier-usage-strip--limit {
  color: #721c24;
  background: #fce8ea;
  border-top-color: #f5c6cb;
}

/* ── Composer area (Prompt 109: fixed at bottom of chat shell) ── */
.ai-joshier-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 14px 14px;
  padding-bottom: 22px;
  border-top: 1px solid #e8ddf0;
  background: #faf7ff;
  position: relative;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* Prompt 124 — chart-level Guidance Language Lock pill */
.ai-joshier-guidance-pill {
  flex: 0 0 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  line-height: 1.2;
  color: #6a5a82;
  background: #f1ecf8;
  border: 1px solid #e0d4ee;
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 4px;
  width: max-content;
  max-width: 100%;
}
.ai-joshier-guidance-pill-label {
  opacity: 0.85;
}
.ai-joshier-guidance-pill-value {
  font-weight: 600;
  color: #4a3a66;
}

.ai-joshier-input {
  flex: 1;
  border: 2px solid #d4bbf0;
  border-radius: 14px;
  padding: 12px 16px;
  font-size: 0.95rem;
  resize: none;
  outline: none;
  background: #fff;
  color: #2d1b47;
  line-height: 1.5;
  max-height: 120px;
  overflow-y: auto;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ai-joshier-input:focus {
  border-color: #7b2cbf;
  box-shadow: 0 0 0 3px rgba(123, 44, 191, 0.1);
}

.ai-joshier-input::placeholder {
  color: #b0a0c0;
}

/* Slightly smaller placeholder on mobile */
@media (max-width: 767px) {
  .ai-joshier-input {
    font-size: 0.88rem;
  }
}

.ai-joshier-send-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #7b2cbf;
  color: #fff;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  flex-shrink: 0;
}

.ai-joshier-send-btn:hover {
  background: #5a189a;
}

.ai-joshier-send-btn:active {
  transform: scale(0.93);
}

.ai-joshier-send-btn:disabled {
  background: #c4b0d8;
  cursor: not-allowed;
}

.ai-joshier-send-btn svg {
  pointer-events: none;
}

/* Prompt 40: character counter + validation error */
/* Prompt 56A/65: left position aligned with textarea content left edge */
.ai-joshier-composer-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 0 0;
  position: absolute;
  bottom: 2px;
  left: 30px; /* 14px composer padding + 16px textarea padding = content edge */
  right: 62px; /* 14px padding + 8px gap + 40px send button */
}

.ai-joshier-char-counter {
  font-size: 0.72rem;
  color: #9a8bb0;
  user-select: none;
}

.ai-joshier-char-counter--warn {
  color: #e07b00;
  font-weight: 600;
}

.ai-joshier-char-counter--over {
  color: #d32f2f;
  font-weight: 600;
}

/* Prompt 06062026 — Hide character counter on AI Joshiyar composer (desktop/mobile)
   to prevent visual overlap with composer border. The 1000-character validation
   and limit is preserved in JavaScript (inputEl validation continues to work). */
.ai-joshier-char-counter {
  display: none !important;
}

.ai-joshier-input-error {
  font-size: 0.75rem;
  color: #d32f2f;
  text-align: right;
  flex: 1;
}

/* ═══════════════════════════════════════════════════ */
/* Prompt 30 — Chart Fact Block Styles                */
/* ═══════════════════════════════════════════════════ */
.ai-joshier-chart-fact {
  align-self: flex-start;
  max-width: 85%;
  margin: 4px 0 8px;
  padding: 10px 14px;
  border-radius: 14px;
  border-bottom-left-radius: 4px;
  background: #ede4f7;
  border: 1px solid #d4bfeb;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #2d1b47;
}

.ai-joshier-chart-fact-title {
  font-weight: 700;
  font-size: 0.85rem;
  color: #5a189a;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #d4bfeb;
}

/* Compact card: definition list */
.ai-joshier-chart-fact-dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
}

.ai-joshier-chart-fact-dl dt {
  font-weight: 600;
  color: #4a148c;
  font-size: 0.84rem;
  white-space: nowrap;
}

.ai-joshier-chart-fact-dl dd {
  margin: 0;
  font-size: 0.84rem;
}

.ai-joshier-chart-fact-text {
  margin: 0;
  font-size: 0.86rem;
}

/* Mini table */
.ai-joshier-chart-fact-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  margin: 4px 0 0;
}

.ai-joshier-chart-fact-table th {
  background: #d4bfeb;
  color: #2d1b47;
  padding: 4px 8px;
  text-align: left;
  font-weight: 600;
  font-size: 0.8rem;
  border-bottom: 1px solid #c1a5dc;
}

.ai-joshier-chart-fact-table td {
  padding: 3px 8px;
  border-bottom: 1px solid #e8ddf3;
}

.ai-joshier-chart-fact-table tbody tr:last-child td {
  border-bottom: none;
}

/* Chart grid (D1/D9 South Indian style) */
.ai-joshier-chart-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: #c1a5dc;
  border: 1px solid #c1a5dc;
  border-radius: 4px;
  overflow: hidden;
  margin: 4px 0 0;
}

.ai-joshier-chart-grid-cell {
  background: #faf5ff;
  padding: 4px 3px;
  font-size: 0.72rem;
  text-align: center;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  line-height: 1.3;
}

.ai-joshier-chart-grid-center {
  background: #ede4f7;
  grid-column: span 2;
  grid-row: span 2;
  font-weight: 600;
  font-size: 0.78rem;
  color: #5a189a;
}

/* Houses list fallback */
.ai-joshier-chart-fact-houses {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.ai-joshier-chart-fact-house-item {
  background: #faf5ff;
  border: 1px solid #e8ddf3;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 0.78rem;
}

.ai-joshier-chart-fact-house-label {
  font-weight: 600;
  color: #4a148c;
  margin-right: 4px;
}

.ai-joshier-chart-fact-house-planets {
  color: #2d1b47;
}

/* Explanation items (yogam/dosham) */
.ai-joshier-chart-fact-explanation-item {
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e8ddf3;
}

.ai-joshier-chart-fact-explanation-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.ai-joshier-chart-fact-explanation-item strong {
  color: #4a148c;
  font-size: 0.84rem;
}

.ai-joshier-chart-fact-explanation-item p {
  margin: 2px 0 0;
  font-size: 0.82rem;
}

/* ── Desktop adjustments (Prompt 109: compact chrome, no max-height) ── */
@media (min-width: 768px) {
  .ai-joshier-page {
    padding: 0 24px 0;
  }

  .ai-joshier-hero {
    padding: 14px 0 8px;
  }

  .ai-joshier-title {
    font-size: 1.35rem;
  }

  .ai-joshier-subtitle {
    font-size: 0.88rem;
  }

  .ai-joshier-messages {
    padding: 24px;
  }

  .ai-joshier-composer {
    padding: 16px 20px;
  }

  /* Prompt 56A: align counter with textarea on desktop */
  .ai-joshier-composer-meta {
    left: 20px;
    right: 68px; /* 20px padding + 8px gap + 40px send button */
  }

  .ai-joshier-msg {
    max-width: 70%;
  }

  .ai-joshier-session-chip-title {
    max-width: 180px;
  }

  .ai-joshier-chart-fact {
    max-width: 70%;
  }

  .ai-joshier-chart-grid-cell {
    min-height: 44px;
    font-size: 0.78rem;
    padding: 5px 4px;
  }
}

/* ══════════════════════════════════════════════
   Chart-created success state (Prompt 12)
   ══════════════════════════════════════════════ */
.ai-joshier-chart-created-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px 16px 16px;
  width: 100%;
}

.ai-joshier-msg-system {
  max-width: 100%;
  background: linear-gradient(135deg, #f3eaff 0%, #e8d5ff 100%);
  border-radius: 14px;
  padding: 18px 20px;
  margin: 0 auto 16px;
  text-align: center;
  border: 1px solid rgba(123, 44, 191, 0.12);
}

.ai-joshier-msg-system .ai-joshier-msg-text {
  color: #3c096c;
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre-line;
}

.ai-joshier-chart-created-ctas {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}

.ai-joshier-cta-secondary {
  color: #7b2cbf;
  font-size: 0.88rem;
  text-decoration: underline;
  cursor: pointer;
}

.ai-joshier-cta-secondary:hover {
  color: #5a189a;
}

.ai-joshier-chart-created-chips-label {
  font-size: 0.82rem;
  color: #8a7a9a;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.ai-joshier-chart-created-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  width: 100%;
}

.ai-joshier-chart-created-chips .ai-joshier-chip {
  font-size: 0.82rem;
  padding: 6px 14px;
}

/* Pending question label (Prompt 12D) */
.ai-joshier-pending-label {
  font-size: 0.82rem;
  color: #8a7a9a;
  margin: 12px 0 4px;
  text-align: center;
  font-weight: 500;
}
/* Prompt 110: removed stray } and max-width:900px desktop constraint
   — page now uses var(--page-max) (1200px) at all breakpoints */

/* ═══════════════════════════════════════════════════════════
   Gita context banner (BG verse → AI Joshier funnel)
   ═══════════════════════════════════════════════════════════ */
.ai-joshier-gita-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #f8f0ff 0%, #ede4ff 100%);
  border: 1px solid #d4bfea;
}
.ai-joshier-gita-banner-icon {
  font-size: 1.35em;
  flex-shrink: 0;
}
.ai-joshier-gita-banner-text {
  display: flex;
  flex-direction: column;
  font-size: 0.88em;
  color: #5e2a9e;
  line-height: 1.4;
}
.ai-joshier-gita-banner-text strong {
  color: #7b2cbf;
  font-size: 0.95em;
}

/* ── Context strip variants ── */
.ai-joshier-context-icon {
  font-size: 1.1em;
  flex-shrink: 0;
}

.ai-joshier-context-hint {
  color: #8a7a9a;
  font-size: 0.83rem;
}

.ai-joshier-context-label {
  font-weight: 600;
}

.ai-joshier-context-strip--gita {
  background: linear-gradient(135deg, #f8f0ff 0%, #ede4ff 100%);
  border-color: #d4bfea;
}

/* ── Follow-up suggestion chips ── */
.ai-joshier-followups {
  padding: 10px 16px 6px;
}

.ai-joshier-followups-label {
  font-size: 0.78rem;
  color: #8a7a9a;
  margin: 0 0 8px;
  font-weight: 500;
}

.ai-joshier-followup-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ai-joshier-followup-chip {
  background: #fff;
  color: #5a189a;
  border: 1px solid #d4bbf0;
  border-radius: 18px;
  padding: 6px 14px;
  font-size: 0.82rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-align: left;
  line-height: 1.4;
  font-family: inherit;
}

.ai-joshier-followup-chip:hover {
  background: #f3eaff;
  border-color: #7b2cbf;
}

/* ── Prompt 05052026A — Inline follow-up chips inside the chat stream ──
   Renders the chip group below the latest assistant bubble instead of
   the fixed footer. Composer remains the only fixed element below.
   Prompt 05052026B — visual refinement: compact pill chips, content-based
   width, aligned with the assistant bubble (max-width: 85%, flex-start). */
.ai-joshier-inline-followups {
  /* Match assistant bubble alignment + readable width */
  align-self: flex-start;
  max-width: 85%;
  margin: 6px 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-joshier-inline-followups-label {
  font-size: 0.72rem;
  color: #8a7a9a;
  font-weight: 500;
  margin: 0 0 2px 4px;
  opacity: 0.85;
}

.ai-joshier-inline-followups-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: flex-start;
}

/* Compact pill chip — overrides the legacy `.ai-joshier-followup-chip`
   sizing so inline chips read as conversational chips, not large buttons. */
.ai-joshier-inline-followups .ai-joshier-followup-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  max-width: 100%;
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 0.82rem;
  line-height: 1.3;
  white-space: normal;
  word-break: break-word;
  text-align: left;
  box-shadow: none;
}

/* CTA chip — slightly stronger fill, same compact pill geometry. */
.ai-joshier-inline-followups .ai-joshier-followup-chip--cta {
  background: #f3eaff;
  border-color: #c39bea;
  color: #4a127c;
  font-weight: 500;
}
.ai-joshier-inline-followups .ai-joshier-followup-chip--cta:hover {
  background: #e7d4fb;
  border-color: #7b2cbf;
}

@media (max-width: 640px) {
  .ai-joshier-inline-followups {
    /* Match assistant-bubble width on mobile */
    max-width: 85%;
    margin: 4px 0 2px;
  }
  /* Keep mobile chat surface uncluttered — hide the subtle label on mobile,
     chips alone communicate the affordance. */
  .ai-joshier-inline-followups-label {
    display: none;
  }
  .ai-joshier-inline-followups-chips {
    gap: 6px;
  }
  .ai-joshier-inline-followups .ai-joshier-followup-chip {
    /* Content-based width on mobile too — do NOT stretch full-width.
       Long Tamil text wraps naturally inside the pill. */
    flex: 0 1 auto;
    min-height: 32px;
    padding: 6px 11px;
    font-size: 0.78rem;
    line-height: 1.25;
    text-align: center;
  }
}

/* ── Prompt 20: Gating CTA (anonymous → login) ── */
.ai-joshier-gating-cta {
  display: flex;
  justify-content: center;
  padding: 12px 0 6px;
}

.ai-joshier-gating-login-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  background: linear-gradient(135deg, #7b2cbf, #5a189a);
  color: #fff;
  border: none;
  border-radius: 24px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(90, 24, 154, 0.18);
}

.ai-joshier-gating-login-btn:hover {
  background: linear-gradient(135deg, #9d4edd, #7b2cbf);
  box-shadow: 0 4px 14px rgba(90, 24, 154, 0.28);
  color: #fff;
  text-decoration: none;
}

.ai-joshier-msg-system {
  background: #faf5ff;
  border: 1px solid #e8d8f8;
  border-radius: 12px;
  padding: 14px 18px;
  margin: 8px 0;
  text-align: center;
  color: #5a189a;
  font-size: 0.9rem;
}

.ai-joshier-msg-system .ai-joshier-msg-text {
  margin: 0;
}

/* ── Prompt 22A: LLM-generated conversion message highlight ── */
.ai-joshier-msg-conversion {
  background: linear-gradient(135deg, #faf5ff 0%, #f0e6ff 100%);
  border: 1px solid rgba(123, 44, 191, 0.18);
  text-align: left;
}

.ai-joshier-msg-conversion .ai-joshier-msg-text {
  line-height: 1.7;
}

/* ── Prompt 22: Disabled composer state (gating / post-login pre-chart) ── */
/* Prompt 116A: bumped opacity to 0.6 and explicit textarea cursor for clearer
 * "you can't type right now" affordance during quota-exhausted hard-stops.
 */
.ai-joshier-composer--disabled {
  opacity: 0.6;
  pointer-events: none;
  user-select: none;
}

.ai-joshier-composer--disabled .ai-joshier-input,
.ai-joshier-composer--disabled textarea {
  background: #f5f0fa;
  cursor: not-allowed;
}

.ai-joshier-composer--disabled .ai-joshier-send-btn {
  cursor: not-allowed;
  background: #ccc;
}

/* ── Prompt 54D Part E: Scheduled-chart banner ── */
.ai-joshier-scheduled-banner {
  text-align: center;
  padding: 40px 20px;
  background: #fffcf5;
  border: 1px solid #fde0b0;
  border-radius: 12px;
  margin: 16px 0;
}

.ai-joshier-scheduled-icon {
  font-size: 2.5rem;
  margin-bottom: 12px;
}

.ai-joshier-scheduled-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #856404;
  margin: 0 0 8px;
}

.ai-joshier-scheduled-msg {
  font-size: 0.9rem;
  color: #6b5c80;
  margin: 0 0 18px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
}

.ai-joshier-scheduled-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  background: linear-gradient(135deg, #7b2cbf, #a855f7);
  color: #fff;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 0.2s;
}

.ai-joshier-scheduled-cta:hover {
  box-shadow: 0 4px 16px rgba(123, 44, 191, 0.3);
  color: #fff;
  text-decoration: none;
}

/* ── Prompt 56A: Welcome-back transition message ── */
.ai-joshier-msg-welcome-back {
  background: linear-gradient(135deg, #f0faf4 0%, #e6f5ec 100%);
  border: 1px solid #b8e6c8;
  border-bottom-left-radius: 4px;
}

.ai-joshier-msg-welcome-back .ai-joshier-msg-text {
  color: #2d5a3d;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════════════
   Prompt 62: Landing mode — hero-like entry state
   Applies only before the first message is sent.
   Reorders chat container children via CSS order so the
   composition feels like a clean AI-first entry surface
   rather than an empty conversation box.
   ═══════════════════════════════════════════════════════════ */

/* Page centers content vertically in landing mode (Prompt 109: flex-based, no min-height) */
.ai-joshier-page--landing {
  justify-content: center;
}

/* Hero gets more visual breathing room in landing mode */
.ai-joshier-page--landing .ai-joshier-hero {
  padding: 20px 0 6px;
}

.ai-joshier-page--landing .ai-joshier-title {
  font-size: 1.6rem;
}

/* Chat container: subtle card shell in landing mode (Prompt 65: grounded, not floating) */
.ai-joshier-page--landing .ai-joshier-chat-container {
  border: 1px solid rgba(123,44,191,0.06);
  box-shadow: 0 2px 16px rgba(123,44,191,0.05);
  background: rgba(255,255,255,0.55);
  border-radius: 20px;
  flex: 0 1 auto;
  overflow: visible;
  padding: 8px 0;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

/* Reorder children: empty-state(messages) → composer → chips(suggestions) */
.ai-joshier-page--landing .ai-joshier-messages {
  order: 1;
  min-height: 0;
  max-height: none;
  padding: 0 16px;
  flex: 0;
  overflow: visible;
}

.ai-joshier-page--landing .ai-joshier-composer {
  order: 2;
  border-top: none;
  background: transparent;
  max-width: 100%;
  margin: 0;
  width: 100%;
}

.ai-joshier-page--landing .ai-joshier-suggestions {
  order: 3;
  border-bottom: none;
  padding: 8px 12px 8px;
}

.ai-joshier-page--landing .ai-joshier-suggestions-label {
  text-align: center;
}

.ai-joshier-page--landing .ai-joshier-suggestion-chips {
  justify-content: center;
  gap: 10px;
}

/* Empty state: refined for landing composition */
.ai-joshier-page--landing .ai-joshier-empty-state {
  padding: 8px 16px 12px;
}

.ai-joshier-page--landing .ai-joshier-empty-icon {
  font-size: 2.6rem;
  margin-bottom: 10px;
}

/* Input: hero-like prominent border matching homepage hero */
.ai-joshier-page--landing .ai-joshier-input {
  border: 2px solid #7b2cbf;
  box-shadow: 0 2px 12px rgba(123, 44, 191, 0.10);
}

.ai-joshier-page--landing .ai-joshier-input:focus {
  box-shadow: 0 4px 20px rgba(123, 44, 191, 0.18);
}

/* Non-essential elements pushed to end in landing mode */
.ai-joshier-page--landing .ai-joshier-loading,
.ai-joshier-page--landing .ai-joshier-error,
.ai-joshier-page--landing .ai-joshier-followups,
.ai-joshier-page--landing .ai-joshier-switch-loading {
  order: 10;
}

/* ── Landing mode: desktop refinements ── */
@media (min-width: 768px) {
  .ai-joshier-page--landing .ai-joshier-hero {
    padding: 28px 0 10px;
  }

  .ai-joshier-page--landing .ai-joshier-title {
    font-size: 1.9rem;
  }

  .ai-joshier-page--landing .ai-joshier-empty-icon {
    font-size: 3rem;
  }

  .ai-joshier-page--landing .ai-joshier-composer-meta {
    left: 30px;
    right: 62px;
  }
}

/* ── Landing mode: mobile refinements ── */
@media (max-width: 767px) {
  .ai-joshier-page--landing .ai-joshier-empty-state {
    padding: 4px 12px 8px;
  }

  .ai-joshier-page--landing .ai-joshier-suggestions {
    padding: 6px 10px 6px;
  }

  .ai-joshier-page--landing .ai-joshier-suggestion-chips {
    gap: 8px;
  }
}

/* ── Prompt 81: Subscription gating styles ── */

/* Subscription gate message */
.ai-joshier-msg-subscription-gate .ai-joshier-msg-text {
  color: #5a189a;
  font-weight: 500;
}

.ai-joshier-usage-info {
  font-size: 0.82rem;
  color: #7b6b8a;
  margin-top: 6px;
  padding: 4px 8px;
  background: rgba(90, 24, 154, 0.06);
  border-radius: 6px;
  display: inline-block;
}

.ai-joshier-usage-info--free-limit {
  color: #5a189a;
  background: rgba(123, 44, 191, 0.09);
  font-weight: 600;
}

/* Plan selection CTA area */
.ai-joshier-subscription-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 0;
  max-width: 340px;
}

.ai-joshier-plan-btn {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 2px solid #e8d8f8;
  border-radius: 12px;
  background: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s ease;
}

.ai-joshier-plan-btn:hover,
.ai-joshier-plan-btn:focus {
  border-color: #5a189a;
  background: #f8f4ff;
}

.ai-joshier-plan-btn--standard {
  color: #5a189a;
}

.ai-joshier-plan-btn--premium {
  color: #fff;
  background: linear-gradient(135deg, #5a189a 0%, #7b2cbf 100%);
  border-color: #5a189a;
}

.ai-joshier-plan-btn--premium:hover,
.ai-joshier-plan-btn--premium:focus {
  background: linear-gradient(135deg, #3c096c 0%, #5a189a 100%);
  border-color: #3c096c;
}

/* Soft reminder message */
.ai-joshier-msg-soft-reminder .ai-joshier-msg-text {
  color: #856404;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
}

/* Prompt 87: Ensure plan CTA link buttons match button styling */
a.ai-joshier-plan-btn {
  display: block;
  text-decoration: none;
  box-sizing: border-box;
}

/* Loading state for paywall plan buttons (₹299 / ₹699) — shown after click,
   before the Razorpay checkout window opens. Localized text comes from
   ta.json key `payment_window_opening`; nothing is hardcoded here. */
.ai-joshier-plan-btn--loading {
  opacity: 0.85;
  cursor: wait;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ai-joshier-plan-btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: ai-joshier-plan-btn-spin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes ai-joshier-plan-btn-spin {
  to { transform: rotate(360deg); }
}

/* "Up to 6 jathagams" sub-note shown beneath each plan card / CTA */
.plan-sub-note {
  font-size: 12px;
  color: #6b7280;
  margin-top: 6px;
  margin-bottom: 0;
  text-align: center;
}

/* ── Prompt 95: Value-driven paywall styles ── */

/* Context-aware title */
.ai-joshier-paywall-context-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #5a189a;
  margin-bottom: 8px;
  line-height: 1.5;
}

/* Continuity line */
.ai-joshier-paywall-continuity {
  font-size: 0.82rem;
  color: #7b6b8a;
  margin-top: 10px;
  font-style: italic;
  line-height: 1.4;
}

/* Trust elements */
.ai-joshier-paywall-trust {
  margin-top: 12px;
}

/* ── Prompt 112B: Price anchoring styles ── */
.ai-joshier-paywall-price-anchor {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  background: #faf5ff;
  border: 1px solid #e8d8f8;
  border-radius: 10px;
  margin-bottom: 4px;
}

.ai-joshier-price-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: #5a189a;
  line-height: 1.4;
}

.ai-joshier-price-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-joshier-price-original {
  font-size: 0.82rem;
  color: #999;
  text-decoration: line-through;
  font-weight: 400;
}

.ai-joshier-price-discounted {
  font-size: 1rem;
  font-weight: 700;
  color: #2d6a4f;
}

.ai-joshier-paywall-trust-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-joshier-paywall-trust-list li {
  font-size: 0.78rem;
  color: #6c757d;
  line-height: 1.4;
  padding-left: 16px;
  position: relative;
}

.ai-joshier-paywall-trust-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #28a745;
  font-weight: 600;
  font-size: 0.75rem;
}

/* Usage strip two-line layout (Prompt 95 Part 5) */
.ai-joshier-usage-strip-main {
  display: block;
  font-size: 12px;
}

.ai-joshier-usage-strip-stat {
  display: block;
  font-size: 11px;
  opacity: 0.75;
  margin-top: 2px;
}

/* ── Prompt 82: Agreement gate styles ── */

.ai-joshier-agreement-gate {
  background: linear-gradient(135deg, #faf5ff 0%, #f0e6ff 100%);
  border: 1px solid #e8d8f8;
  border-radius: 14px;
  padding: 24px 22px;
  margin: 16px 0;
  /* Prompt 110: removed max-width:440px — full-width gate surface within messages area */
}

.ai-joshier-agreement-heading {
  font-size: 1rem;
  font-weight: 700;
  color: #5a189a;
  margin-bottom: 8px;
}

.ai-joshier-agreement-intro {
  font-size: 0.88rem;
  color: #4a3f5c;
  margin: 0 0 10px;
  line-height: 1.5;
}

.ai-joshier-agreement-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

.ai-joshier-agreement-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 0.84rem;
  color: #4a3f5c;
  line-height: 1.55;
  margin-bottom: 5px;
}

.ai-joshier-agreement-bullets li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #7b2cbf;
  font-weight: bold;
}

.ai-joshier-agreement-links {
  font-size: 0.8rem;
  margin-bottom: 14px;
  color: #7b6b8a;
}

.ai-joshier-agreement-links a {
  color: #5a189a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ai-joshier-agreement-links a:hover {
  color: #3c096c;
}

.ai-joshier-agreement-check-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.85rem;
  color: #4a3f5c;
  cursor: pointer;
  margin-bottom: 12px;
  line-height: 1.4;
}

.ai-joshier-agreement-checkbox {
  margin-top: 2px;
  accent-color: #5a189a;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.ai-joshier-agreement-accept-btn {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: linear-gradient(135deg, #7b2cbf, #5a189a);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.ai-joshier-agreement-accept-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #9d4edd, #7b2cbf);
}

.ai-joshier-agreement-accept-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 480px) {
  .ai-joshier-agreement-gate {
    padding: 16px 14px;
    margin: 8px 0;
  }

  .ai-joshier-agreement-heading {
    font-size: 0.95rem;
  }
}

/* ── AI Joshiyar Free Journey v2 — Phase D: Soft Disclaimer Notice ── */
.ai-joshier-soft-notice {
  background: #f7f5fb;
  border: 1px solid #e5dff0;
  border-radius: 12px;
  padding: 14px 16px;
  margin: 12px 0;
  max-width: 100%;
  box-sizing: border-box;
}

.ai-joshier-soft-notice-heading {
  font-size: 0.92rem;
  font-weight: 600;
  color: #4a3f5c;
  margin-bottom: 6px;
}

.ai-joshier-soft-notice-body {
  font-size: 0.82rem;
  color: #5a4f6c;
  line-height: 1.5;
  margin: 0 0 6px;
}

.ai-joshier-soft-notice-body:last-of-type {
  margin-bottom: 8px;
}

.ai-joshier-soft-notice-links {
  font-size: 0.78rem;
  color: #7b6b8a;
}

.ai-joshier-soft-notice-links a {
  color: #5a189a;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

.ai-joshier-soft-notice-links a:hover {
  color: #3c096c;
}

@media (max-width: 480px) {
  .ai-joshier-soft-notice {
    padding: 12px 12px;
    margin: 8px 0;
  }
  .ai-joshier-soft-notice-heading {
    font-size: 0.88rem;
  }
  .ai-joshier-soft-notice-body {
    font-size: 0.8rem;
  }
}

/* ── Phase 1 (Prompt 25052026): Compact one-line Terms note for v2 ── */
/* Overrides the heavier soft-notice container for the compact variant. */
/* Phase 2 (Prompt 25052026 — 25 May 2026):
   The v2 soft-notice DOM is no longer rendered by _renderSoftNoticeV2 in
   ai_joshier_page.js. The following rules are intentionally retained
   (inert) to support fast rollback to the Phase 1 compact one-line note
   without a CSS round-trip. Do not delete in this prompt. */
#ai-joshier-soft-notice-v2 {
  background: transparent;
  border: none;
  padding: 4px 6px;
  margin: 6px 0 8px;
}

.ai-joshier-soft-notice-line {
  font-size: 0.78rem;
  line-height: 1.45;
  color: #7b6b8a;
  max-width: 100%;
  box-sizing: border-box;
  word-break: normal;
  overflow-wrap: anywhere;
}

.ai-joshier-soft-notice-line a {
  color: #5a189a;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-word;
}

.ai-joshier-soft-notice-line a:hover {
  color: #3c096c;
}

@media (max-width: 480px) {
  #ai-joshier-soft-notice-v2 {
    padding: 2px 4px;
    margin: 4px 0 6px;
  }
  .ai-joshier-soft-notice-line {
    font-size: 0.76rem;
  }
}

/* ==========================================================================
   Prompt 94 — Chart Creation Conversion Optimization (UX + messaging)
   ========================================================================== */

/* Value preview message — subtle insight-driven tone */
.ai-joshier-msg-value-preview {
  background: linear-gradient(135deg, #fef8f0 0%, #fdf2e4 100%);
  border: 1px solid #e8d5b8;
  border-bottom-left-radius: 4px;
}

.ai-joshier-msg-value-preview .ai-joshier-msg-text {
  color: #5c4a2e;
  line-height: 1.7;
  font-size: 0.92rem;
}

/* Enhanced CTA container */
.ai-joshier-gating-cta--enhanced {
  text-align: center;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

/* CTA subtext — subtle reassurance below button */
.ai-joshier-cta-subtext {
  display: block;
  text-align: center;
  font-size: 0.78rem;
  color: #888;
  margin-top: 4px;
  letter-spacing: 0.3px;
}

/* ── Prompt 113F: Plan cards — two-column (desktop) / stacked (mobile) ── */

.ai-joshier-subscription-cta {
  max-width: 100%; /* override old 340px constraint for card layout */
}

.ai-joshier-plan-cards-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 4px 0;
}

@media (min-width: 600px) {
  .ai-joshier-plan-cards-row {
    flex-direction: row;
    align-items: stretch;
    gap: 14px;
  }
}

.ai-joshier-plan-card {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: 1.5px solid #e8d8f8;
  background: #faf5ff;
  box-shadow: 0 2px 8px rgba(90, 24, 154, 0.06);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ai-joshier-plan-card:hover {
  border-color: #b07de0;
  box-shadow: 0 4px 16px rgba(90, 24, 154, 0.12);
}

.ai-joshier-plan-card--premium {
  background: linear-gradient(145deg, #f5eeff 0%, #ede0ff 100%);
  border-color: #c3a0e8;
}

.ai-joshier-plan-card-badge {
  display: inline-block;
  background: linear-gradient(135deg, #7b2cbf, #9d4edd);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: -4px;
}

.ai-joshier-plan-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #3c096c;
  line-height: 1.3;
}

.ai-joshier-plan-card-allowance {
  font-size: 0.82rem;
  color: #6b5c80;
  font-weight: 500;
  line-height: 1.4;
}

.ai-joshier-plan-card-price-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.ai-joshier-plan-card-price-row .ai-joshier-price-original {
  font-size: 0.85rem;
}

.ai-joshier-plan-card-price-row .ai-joshier-price-discounted {
  font-size: 1.15rem;
}

.ai-joshier-plan-card-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ai-joshier-plan-card-bullets li {
  font-size: 0.82rem;
  color: #4a3f5c;
  padding-left: 16px;
  position: relative;
  line-height: 1.45;
}

.ai-joshier-plan-card-bullets li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #7b2cbf;
  font-weight: 700;
  font-size: 0.75rem;
}

/* CTA inside the card — full width, flush to card bottom */
.ai-joshier-plan-card-cta {
  margin-top: auto;
  width: 100%;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.88rem;
}

.ai-joshier-plan-card .ai-joshier-plan-btn--primary {
  color: #fff;
  background: linear-gradient(135deg, #5a189a 0%, #7b2cbf 100%);
  border-color: #5a189a;
}

.ai-joshier-plan-card .ai-joshier-plan-btn--primary:hover {
  background: linear-gradient(135deg, #3c096c 0%, #5a189a 100%);
}

.ai-joshier-plan-card .ai-joshier-plan-btn--premium {
  color: #fff;
  background: linear-gradient(135deg, #7b2cbf 0%, #9d4edd 100%);
  border-color: #7b2cbf;
}

.ai-joshier-plan-card .ai-joshier-plan-btn--premium:hover {
  background: linear-gradient(135deg, #5a189a 0%, #7b2cbf 100%);
}

.ai-joshier-plan-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   Prompt 12052026-A — Paywall P1
   Continuity headline + Standard-recommended hierarchy + strike-through removal
   ────────────────────────────────────────────────────────────────────────── */

/* Continuity-led headline + subheadline (free_limit / standard_limit / premium_limit) */
.ai-joshier-paywall-headline {
  font-size: 1.05rem;
  font-weight: 700;
  color: #3c096c;
  line-height: 1.35;
  margin: 2px 0 4px;
}

.ai-joshier-paywall-subheadline {
  font-size: 0.88rem;
  color: #5a4a6e;
  line-height: 1.5;
  margin-bottom: 8px;
}

/* Standard card — visually recommended (subtle, not loud) */
.ai-joshier-plan-card--recommended {
  border-width: 2px;
  border-color: #7b2cbf;
  background: linear-gradient(155deg, #faf5ff 0%, #f3e8ff 100%);
  box-shadow: 0 4px 14px rgba(123, 44, 191, 0.12);
}

/* Premium card — secondary / deeper guidance, less dominant than Standard */
.ai-joshier-plan-card--secondary {
  background: #fbfaff;
  border-color: #e0d4f0;
  box-shadow: 0 1px 4px rgba(90, 24, 154, 0.05);
}

.ai-joshier-plan-card--secondary:hover {
  border-color: #b9a3d8;
  box-shadow: 0 3px 10px rgba(90, 24, 154, 0.08);
}

/* Calm primary badge for Standard "Recommended to start" */
.ai-joshier-plan-card-badge--recommended {
  background: linear-gradient(135deg, #5a189a, #7b2cbf);
  color: #fff;
  text-transform: none;
  letter-spacing: 0.2px;
  font-weight: 600;
  padding: 4px 12px;
}

.ai-joshier-plan-card--starter .ai-joshier-plan-card-badge--recommended {
  align-self: center;
  text-align: center;
}

/* Muted neutral badge for Premium "For deeper guidance" */
.ai-joshier-plan-card-badge--secondary {
  background: #ede4f7;
  color: #5a189a;
  text-transform: none;
  letter-spacing: 0.2px;
  font-weight: 600;
  padding: 4px 12px;
}

/* "monthly · cancel anytime" sub-price line below the price */
.ai-joshier-plan-price-suffix {
  font-size: 0.74rem;
  color: #8a7a9c;
  margin-top: -4px;
  margin-bottom: 2px;
  line-height: 1.3;
}

/* Single calm trust line under CTA grid (free_limit) */
.ai-joshier-paywall-trust-line {
  font-size: 0.78rem;
  color: #6c757d;
  text-align: center;
  line-height: 1.55;
  padding: 6px 4px 0;
  word-break: keep-all;
}

/* v3 — common trust line shown once below the two-card grid, replacing
   the per-card monthly suffix. Mirrors `.ai-joshier-paywall-trust-line`
   color/size language for visual consistency. */
.ai-joshier-paywall-common-trust {
  margin: 10px 0 0;
  text-align: center;
  font-size: 0.78rem;
  color: #7b6b8a;
  line-height: 1.45;
}

/* v3 — benefit-oriented plan card lines (mobile-safe, no card redesign) */
.ai-joshier-plan-card-primary {
  font-size: 0.88rem;
  line-height: 1.45;
}
.ai-joshier-plan-card-benefit {
  font-size: 0.82rem;
  color: #4a3f5c;
  line-height: 1.45;
  margin-top: 6px;
}
.ai-joshier-plan-card-quota {
  font-size: 0.76rem;
  color: #6b5c80;
  margin-top: 6px;
  text-align: center;
}

/* Inside plan cards we no longer render strike-through originals (P1).
   Defensively hide them if any legacy code path still injects one. */
.ai-joshier-plan-card-price-row .ai-joshier-price-original {
  display: none;
}

/* Mobile-first stacking + Standard appears above Premium with comfortable gap */
@media (max-width: 599px) {
  .ai-joshier-plan-cards-row {
    gap: 14px;
  }
  .ai-joshier-plan-card {
    padding: 16px 14px 14px;
  }
  .ai-joshier-paywall-headline {
    font-size: 1rem;
  }
  .ai-joshier-paywall-subheadline {
    font-size: 0.84rem;
  }
  .ai-joshier-plan-card-cta {
    padding: 12px 14px;
    font-size: 0.92rem;
    min-height: 44px;
  }
  .ai-joshier-paywall-trust-line {
    font-size: 0.74rem;
    line-height: 1.6;
  }
}

/* ── Prompt 113F: Prominent payment error banner ── */

.ai-joshier-payment-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: #fff0f0;
  border: 1.5px solid #f5a0a0;
  border-radius: 12px;
  color: #c0392b;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.5;
  max-width: 100%;
  animation: ai-joshier-fadein 0.25s ease;
}

@keyframes ai-joshier-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ai-joshier-payment-error-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.ai-joshier-payment-error-close {
  margin-left: auto;
  flex-shrink: 0;
  background: none;
  border: none;
  color: #c0392b;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.7;
}

.ai-joshier-payment-error-close:hover {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════
   Prompt 105: Chart access denied — unauthorized/unavailable
   Shared pattern for foreign or invalid chart token access.
   ═══════════════════════════════════════════════════════════ */
.chart-access-denied {
  text-align: center;
  padding: 48px 20px 40px;
  background: #fefcff;
  border: 1px solid #e8d8f4;
  border-radius: 14px;
  margin: 16px 0;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}
.chart-access-denied-icon {
  font-size: 2.5rem;
  margin-bottom: 14px;
}
.chart-access-denied-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: #5a189a;
  margin: 0 0 10px;
}
.chart-access-denied-msg {
  font-size: 0.9rem;
  color: #6b5c80;
  line-height: 1.65;
  margin: 0 0 24px;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
.chart-access-denied-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  max-width: 240px;
  margin-left: auto;
  margin-right: auto;
}
.chart-access-denied-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: box-shadow 0.2s, opacity 0.2s;
  justify-content: center;
}
.chart-access-denied-btn--primary {
  background: linear-gradient(135deg, #7b2cbf, #a855f7);
  color: #fff;
}
.chart-access-denied-btn--primary:hover {
  box-shadow: 0 4px 16px rgba(123, 44, 191, 0.3);
  color: #fff;
  text-decoration: none;
}
.chart-access-denied-btn--secondary {
  background: #f3ecfb;
  color: #7b2cbf;
  border: 1px solid #d8c4f0;
}
.chart-access-denied-btn--secondary:hover {
  background: #ebe0f6;
  text-decoration: none;
  color: #7b2cbf;
}

/* ── Prompt 112C: Date separators ── */
.ai-chat-date-separator {
  text-align: center;
  font-size: 12px;
  color: #888;
  margin: 16px 0;
  position: relative;
}
.ai-chat-date-separator::before,
.ai-chat-date-separator::after {
  content: "";
  display: inline-block;
  width: 20%;
  height: 1px;
  background: #e0e0e0;
  margin: 0 8px;
  vertical-align: middle;
}
@media (max-width: 600px) {
  .ai-chat-date-separator {
    font-size: 11px;
    margin: 12px 0;
  }
  .ai-chat-date-separator::before,
  .ai-chat-date-separator::after {
    width: 15%;
  }
}

/* ═══════════════════════════════════════════════════ */
/* Prompt 113/113A — Post-payment activation overlay  */
/* ═══════════════════════════════════════════════════ */
.ai-joshier-activation-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
}
.ai-joshier-activation-content {
  text-align: center;
  padding: 32px 24px;
  max-width: 340px;
}
.ai-joshier-activation-spinner {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.ai-joshier-activation-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: #5a189a;
  margin-top: 16px;
  margin-bottom: 8px;
}
.ai-joshier-activation-msg {
  font-size: 0.88rem;
  color: #6c567b;
  line-height: 1.5;
}
.ai-joshier-activation-success {
  color: #2e7d32;
}
.ai-joshier-activation-retry-btn {
  margin-top: 16px;
  padding: 10px 24px;
  border: none;
  border-radius: 24px;
  background: #5a189a;
  color: #fff;
  font-size: 0.88rem;
  font-weight: 500;
  cursor: pointer;
}
.ai-joshier-activation-retry-btn:hover {
  background: #7b2cbf;
}

/* ── Prompt 113A: Spiritual spinner (reused from Create Jathagam) ── */
.ai-joshier-activation-overlay .spiritual-spinner {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ai-joshier-activation-overlay .mandala-ring {
  position: absolute;
  border-radius: 50%;
  border: 3px solid transparent;
}
.ai-joshier-activation-overlay .mandala-ring.outer {
  width: 100px; height: 100px;
  border-top-color: #7b2cbf;
  border-right-color: #9c4dcc;
  animation: ai-joshier-spinOuter 3s linear infinite;
}
.ai-joshier-activation-overlay .mandala-ring.middle {
  width: 72px; height: 72px;
  border-top-color: #d4a5ff;
  border-bottom-color: #b388eb;
  animation: ai-joshier-spinMiddle 2s linear infinite reverse;
}
.ai-joshier-activation-overlay .mandala-ring.inner {
  width: 44px; height: 44px;
  border-left-color: #e9d5ff;
  border-right-color: #c084fc;
  animation: ai-joshier-spinInner 1.5s linear infinite;
}
.ai-joshier-activation-overlay .om-symbol {
  position: absolute;
  font-size: 22px;
  color: #7b2cbf;
  font-weight: bold;
  animation: ai-joshier-pulseOm 2s ease-in-out infinite;
}
.ai-joshier-activation-overlay .lotus-petals {
  position: absolute;
  width: 100px; height: 100px;
  animation: ai-joshier-rotateLotus 8s linear infinite;
}
.ai-joshier-activation-overlay .lotus-petals span {
  position: absolute;
  top: 0; left: 50%;
  width: 6px; height: 14px;
  margin-left: -3px;
  background: linear-gradient(to bottom, #7b2cbf, transparent);
  border-radius: 50% 50% 0 0;
  transform-origin: center 50px;
  opacity: 0.6;
}
.ai-joshier-activation-overlay .lotus-petals span:nth-child(1) { transform: rotate(0deg); }
.ai-joshier-activation-overlay .lotus-petals span:nth-child(2) { transform: rotate(45deg); }
.ai-joshier-activation-overlay .lotus-petals span:nth-child(3) { transform: rotate(90deg); }
.ai-joshier-activation-overlay .lotus-petals span:nth-child(4) { transform: rotate(135deg); }
.ai-joshier-activation-overlay .lotus-petals span:nth-child(5) { transform: rotate(180deg); }
.ai-joshier-activation-overlay .lotus-petals span:nth-child(6) { transform: rotate(225deg); }
.ai-joshier-activation-overlay .lotus-petals span:nth-child(7) { transform: rotate(270deg); }
.ai-joshier-activation-overlay .lotus-petals span:nth-child(8) { transform: rotate(315deg); }

@keyframes ai-joshier-spinOuter   { to { transform: rotate(360deg); } }
@keyframes ai-joshier-spinMiddle  { to { transform: rotate(360deg); } }
@keyframes ai-joshier-spinInner   { to { transform: rotate(360deg); } }
@keyframes ai-joshier-pulseOm     { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.15); opacity: 0.8; } }
@keyframes ai-joshier-rotateLotus { to { transform: rotate(360deg); } }

/* ── Prompt 113: Post-payment success system message ── */
.ai-joshier-msg-activation-success {
  background: #f0faf0;
  border: 1px solid #c8e6c9;
  border-radius: 14px;
  padding: 12px 16px;
  margin: 8px 0;
  text-align: center;
}
.ai-joshier-msg-activation-success .ai-joshier-msg-text {
  color: #2e7d32;
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   Prompt 119 — Mobile chat-first redesign
   Mobile (≤ 767px) only. Desktop is intentionally untouched.
   ═══════════════════════════════════════════════════════════ */

/* Mobile-only top bar — hidden on desktop */
.ai-joshier-mobile-topbar { display: none; }

/* Mobile-only context bottom sheet — hidden on desktop */
.ai-joshier-context-sheet,
.ai-joshier-context-sheet-backdrop { display: none; }

@media (max-width: 767px) {

  /* ── Page chrome: zero padding, full bleed ── */
  .ai-joshier-page {
    padding: 0;
    background: #fff;
    border-radius: 0;
  }

  /* ── Hide bulky chrome blocks on mobile when chart is linked ── */
  /* Hide the in-page hero (large title + subtitle) — title now lives in mobile top bar.
     Prompt 119A: hero is hidden whenever the mobile topbar is present (which is
     now ALL states: chart-linked, no-chart, anonymous). */
  .ai-joshier-mobile-topbar ~ .ai-joshier-hero,
  .ai-joshier-mobile-topbar + .ai-joshier-hero { display: none; }

  /* Hide the bulky desktop context strip on mobile (chart variant only).
     Gita variant retained — it's a meaningful banner. */
  .ai-joshier-context-strip--right { display: none; }

  /* Hide the persistent usage chip on mobile by default — moved into the bottom sheet.
     JS keeps updating it (display:'') so we re-hide with !important. */
  .ai-joshier-persistent-usage { display: none !important; }

  /* ── Mobile top bar (chart-linked) ── */
  .ai-joshier-mobile-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid #f0e8f8;
    flex-shrink: 0;
    min-height: 44px;
  }

  .ai-joshier-mobile-topbar-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #5a189a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 0 1 auto;
  }

  .ai-joshier-mobile-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f8f4ff;
    color: #5a189a;
    border: 1px solid #e8d8f8;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    max-width: 60vw;
    line-height: 1.2;
    transition: background 0.15s, border-color 0.15s;
  }

  .ai-joshier-mobile-pill:active,
  .ai-joshier-mobile-pill[aria-expanded="true"] {
    background: #efe3ff;
    border-color: #c8a8e8;
  }

  .ai-joshier-mobile-pill-icon { font-size: 0.95rem; line-height: 1; }

  .ai-joshier-mobile-pill-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40vw;
  }

  .ai-joshier-mobile-pill-arrow { font-size: 0.7rem; line-height: 1; opacity: 0.7; }

  /* ── Chat container: remove card chrome, full-bleed ── */
  .ai-joshier-chat-container {
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: #fff;
  }

  /* ── Messages area: improved readability ── */
  .ai-joshier-messages {
    padding: 12px 12px;
    gap: 14px;
    background: #fff;
  }

  .ai-joshier-msg {
    max-width: 92%;
  }

  /* Prompt 119A: tuned down to ChatGPT/Grok-style readability (~14.5px). */
  .ai-joshier-msg-text {
    font-size: 0.92rem;       /* ~14.7px */
    line-height: 1.55;
    padding: 9px 13px;
  }

  /* Assistant message: lighter, less boxed-in feel */
  .ai-joshier-msg-assistant .ai-joshier-msg-text {
    background: #faf6ff;
    color: #221033;
  }

  .ai-joshier-para { margin: 0 0 8px; }
  .ai-joshier-para:last-child { margin-bottom: 0; }

  /* ── Composer: sticky-bottom with safe-area inset ── */
  /* Prompt 119A (revised): keep composer as a clean horizontal row
     [textarea | send-btn]. Counter/meta is taken out of normal flow so
     it never squashes the textarea, and is visually hidden at rest so
     it cannot overlap content. The inline error span (also inside meta)
     is shown via JS when needed and overrides the hidden state. */
  .ai-joshier-composer {
    padding: 8px 12px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-top: 1px solid #ece1f6;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    position: relative;
  }

  .ai-joshier-input {
    flex: 1 1 auto;
    min-width: 0;
    /* iOS Safari auto-zoom prevention requires >= 16px on iOS;
       we keep 16px for safety, but compensate visual weight with
       lighter padding, calmer placeholder, and a hidden scrollbar. */
    font-size: 16px;
    padding: 9px 14px;
    border-width: 1px;
    border-radius: 14px;
    line-height: 1.45;
    /* Prompt 119A: scroll stays functional (textarea is auto-resized to
       max 120px by JS) but the scrollbar / black bar is visually hidden. */
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    min-height: 40px;
  }
  .ai-joshier-input::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .ai-joshier-input::placeholder {
    color: #b5a8c8;
    opacity: 0.85;
    font-weight: 400;
  }

  /* Meta row: kept absolutely positioned (taken out of flow) so the
     composer row stays a clean [input | send] horizontal layout.
     Tucked just above the composer, right-aligned, hidden at rest. */
  .ai-joshier-composer-meta {
    position: absolute;
    bottom: 100%;
    left: 12px;
    right: 12px;
    padding: 0 4px 2px;
    justify-content: flex-end;
    pointer-events: none;
  }
  .ai-joshier-char-counter {
    font-size: 0.66rem;
    opacity: 0;
    transition: opacity 0.18s ease;
  }
  /* Reveal counter on focus or when warn/over state set by JS */
  .ai-joshier-composer:focus-within .ai-joshier-char-counter {
    opacity: 0.6;
  }
  .ai-joshier-char-counter.ai-joshier-char-counter--warn,
  .ai-joshier-char-counter.ai-joshier-char-counter--over {
    opacity: 1;
  }

  /* Send button proportions trimmed to match calmer composer */
  .ai-joshier-send-btn {
    width: 40px;
    height: 40px;
    min-width: 40px;
    flex-shrink: 0;
  }

  /* Suggestion chips: tighter top padding, no border-bottom on full-bleed surface */
  .ai-joshier-suggestions { border-bottom: none; }

  /* Prompt 119A: landing mode (anonymous / no-chart) now also has the mobile
     topbar above. Keep page items naturally stacked from the top instead of
     vertically centered — otherwise the topbar floats mid-screen. */
  .ai-joshier-page--landing {
    justify-content: flex-start;
  }
  /* Tighten landing-mode chat container chrome on mobile so it sits below
     the new topbar without an awkward gap. */
  .ai-joshier-page--landing .ai-joshier-chat-container {
    margin-top: 8px;
  }

  /* ── Bottom sheet ── */
  .ai-joshier-context-sheet-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(20, 8, 40, 0.45);
    z-index: 1100;
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
  }
  .ai-joshier-context-sheet-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .ai-joshier-context-sheet {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80vh;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 24px rgba(60, 9, 108, 0.18);
    z-index: 1101;
    transform: translateY(100%);
    transition: transform 0.22s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .ai-joshier-context-sheet.is-open { transform: translateY(0); }

  .ai-joshier-context-sheet-handle {
    width: 38px;
    height: 4px;
    background: #d8c8e8;
    border-radius: 2px;
    margin: 8px auto 4px;
    flex-shrink: 0;
  }

  .ai-joshier-context-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px 10px;
    border-bottom: 1px solid #f0e8f8;
    flex-shrink: 0;
  }

  .ai-joshier-context-sheet-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #3c096c;
    margin: 0;
  }

  .ai-joshier-context-sheet-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: #7b6b8a;
    padding: 4px 8px;
    cursor: pointer;
    border-radius: 8px;
  }
  .ai-joshier-context-sheet-close:active { background: #f3eaff; }

  .ai-joshier-context-sheet-body {
    overflow-y: auto;
    padding: 12px 16px 18px;
    -webkit-overflow-scrolling: touch;
  }

  .ai-joshier-context-sheet-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px;
    background: #faf6ff;
    border: 1px solid #ece1f6;
    border-radius: 12px;
    margin-bottom: 14px;
  }
  .ai-joshier-context-sheet-active-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }
  .ai-joshier-context-sheet-active-icon {
    width: 36px;
    height: 36px;
    background: #f3eaff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
  }
  .ai-joshier-context-sheet-active-info { min-width: 0; }
  .ai-joshier-context-sheet-active-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #3c096c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Prompt 119A: meta row is no longer rendered (DOB/relationship removed).
     Style retained as no-op in case it's added back. */
  .ai-joshier-context-sheet-active-meta {
    font-size: 0.78rem;
    color: #7b6b8a;
    margin-top: 2px;
  }
  .ai-joshier-context-sheet-sep { color: #c0a8d8; margin: 0 2px; }

  .ai-joshier-context-sheet-action {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 12px;
    background: #fff;
    color: #5a189a;
    border: 1px solid #d4bbf0;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .ai-joshier-context-sheet-action:hover,
  .ai-joshier-context-sheet-action:active {
    background: #f3eaff;
    color: #3c096c;
    text-decoration: none;
  }

  .ai-joshier-context-sheet-section-label {
    font-size: 0.75rem;
    color: #8a7a9a;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 4px 4px 8px;
  }

  .ai-joshier-context-sheet-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .ai-joshier-context-sheet-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #f0e8f8;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }
  .ai-joshier-context-sheet-option:active { background: #f8f4ff; border-color: #d4bbf0; }
  .ai-joshier-context-sheet-option-icon {
    width: 28px; height: 28px; flex-shrink: 0;
    background: #f3eaff; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
  }
  /* Prompt 119A: name + clear circular arrow button so users immediately
     understand each row is a tappable "switch to this chart" control. */
  .ai-joshier-context-sheet-option-name {
    flex: 1;
    min-width: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #3c096c;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ai-joshier-context-sheet-option-action {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #7b2cbf;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    border-radius: 50%;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(123, 44, 191, 0.25);
  }
  .ai-joshier-context-sheet-option:active .ai-joshier-context-sheet-option-action {
    background: #5a189a;
    transform: scale(0.94);
  }
  .ai-joshier-context-sheet-option-info {
    display: flex; flex-direction: column; min-width: 0; flex: 1;
  }
  .ai-joshier-context-sheet-option-name {
    font-size: 0.88rem; font-weight: 600; color: #3c096c;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .ai-joshier-context-sheet-option-dob {
    font-size: 0.74rem; color: #8a7a9a;
  }

  .ai-joshier-context-sheet-plan {
    margin-top: 16px;
    padding: 10px 12px;
    background: #faf6ff;
    border: 1px solid #ece1f6;
    border-radius: 10px;
    font-size: 0.82rem;
    color: #5a189a;
    font-weight: 500;
    text-align: center;
  }
  .ai-joshier-context-sheet-plan:empty { display: none; }
  .ai-joshier-context-sheet-plan a {
    color: #5a189a;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ── Landing mode (anonymous) on mobile: keep hero visible (no mobile pill exists). ── */
  /* No override needed — :has() rule above only triggers when topbar is present. */
}


/* ============================================================ */
/* Prompt 122B: retry-button loading state (renewal-pending gate) */
/* Mobile-first; reuses existing .ai-joshier-plan-btn--standard.  */
/* ============================================================ */
.ai-joshiyar-retry-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ai-joshiyar-retry-btn[disabled],
.ai-joshiyar-retry-btn[aria-busy='true'] {
  opacity: 0.85;
  cursor: progress;
}

.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top: 2px solid #fff;
  border-radius: 50%;
  animation: ai-joshier-btn-spin 0.6s linear infinite;
  display: inline-block;
  flex: 0 0 auto;
}

.btn-spinner.hidden {
  display: none;
}

@keyframes ai-joshier-btn-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btn-spinner { animation-duration: 1.2s; }
}

/* -----------------------------------------------------------
   03052026 Chunk 3 � Post-agreement Jathagam intro summary
   Reuses .ai-joshier-msg-assistant base styling. Optional accent +
   chip-row layout only. Mobile-first, no fixed widths.
   ----------------------------------------------------------- */
.ai-joshier-msg.ai-joshier-bubble--intro .ai-joshier-msg-text {
  border-top: 2px solid #b39ddb;
}

.ai-joshier-intro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 12px;
  align-self: flex-start;
  max-width: 100%;
}

/* -----------------------------------------------------------
   03052026 Chunk 4 — Structured intro summary (full guidance)
   Mobile-first: vertical card stack inside the assistant bubble.
   No tables, no horizontal scroll.
   ----------------------------------------------------------- */
.ai-joshier-msg.ai-joshier-bubble--intro .ai-joshier-intro-summary {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ai-joshier-intro-header {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #4a3b6b;
}
.ai-joshier-intro-section-title {
  margin: 4px 0 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #6a4caa;
  letter-spacing: 0.01em;
}
.ai-joshier-intro-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ai-joshier-intro-card {
  background: rgba(149, 117, 205, 0.06);
  border: 1px solid rgba(149, 117, 205, 0.18);
  border-left: 3px solid #9575cd;
  border-radius: 10px;
  padding: 10px 12px;
}
.ai-joshier-intro-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.ai-joshier-intro-card-emoji {
  font-size: 1.05rem;
  line-height: 1;
  flex: 0 0 auto;
}
.ai-joshier-intro-card-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: #3f2c63;
  line-height: 1.35;
}
.ai-joshier-intro-card-body {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #2a2342;
}
.ai-joshier-intro-card-body p {
  margin: 0 0 6px;
}
.ai-joshier-intro-card-body p:last-child {
  margin-bottom: 0;
}

.ai-joshier-intro-time,
.ai-joshier-intro-advice {
  background: rgba(149, 117, 205, 0.05);
  border: 1px solid rgba(149, 117, 205, 0.16);
  border-radius: 10px;
  padding: 10px 12px;
}
.ai-joshier-intro-time-title,
.ai-joshier-intro-advice-title {
  margin: 0 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
  color: #3f2c63;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ai-joshier-intro-time-body p {
  margin: 0 0 6px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #2a2342;
}
.ai-joshier-intro-time-body p:last-child { margin-bottom: 0; }

.ai-joshier-intro-advice-list {
  list-style: disc;
  padding-left: 1.2rem;
  margin: 0;
}
.ai-joshier-intro-advice-item {
  font-size: 0.92rem;
  line-height: 1.55;
  color: #2a2342;
  margin-bottom: 4px;
}
.ai-joshier-intro-advice-item:last-child { margin-bottom: 0; }

.ai-joshier-intro-footer {
  margin: 4px 0 0;
  font-size: 0.92rem;
  font-weight: 500;
  color: #4a3b6b;
}

.ai-joshier-bubble--intro-loading .ai-joshier-msg-text {
  border-top: 2px dashed #b39ddb;
}
.ai-joshier-intro-loading {
  margin: 0;
  font-size: 0.92rem;
  color: #6a4caa;
  font-style: italic;
}

/* =====================================================================
 * Prompt 04052026A — Anonymous 3Q Structured UX + Personalization Nudge
 * Mobile-first, additive. All new surfaces are flag- and locale-gated
 * by JS; CSS only styles them when the JS chooses to render them.
 * ===================================================================== */

/* Prompt 05052026D — Anonymous Q1/Q2/Q3 answer title/badge strip removed.
   The .ai-joshier-anon-badge style is intentionally dropped because the JS
   no longer renders the badge DOM. Nudge card styles below are unchanged. */

/* Personalization nudge card — subtle, reuses the system-message look. */
.ai-joshier-msg-system.ai-joshier-msg-system--nudge {
  padding: 10px 14px;
  margin: 6px 0 10px;
  text-align: left;
  background: #faf5ff;
  border: 1px solid #ead6f9;
  border-radius: 12px;
  box-shadow: none;
}

.ai-joshier-anon-nudge-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #5a189a;
  margin: 0 0 2px 0;
  line-height: 1.35;
}

.ai-joshier-anon-nudge-body {
  font-size: 0.82rem;
  color: #4a3a66;
  line-height: 1.45;
  margin: 0;
}

/* Login / Create CTA after Q3 (anonymous). Reuses gating button gradient
 * via the shared .ai-joshier-gating-login-btn class on the same element. */
.ai-joshier-anon-cta-wrap {
  display: flex;
  justify-content: center;
  margin: 4px 0 12px;
}

.ai-joshier-anon-cta-btn {
  width: 100%;
  max-width: 360px;
  text-align: center;
  padding: 10px 18px;
  font-size: 0.92rem;
}

@media (min-width: 480px) {
  .ai-joshier-anon-cta-btn {
    width: auto;
  }
}

/* =====================================================================
 * Prompt 04052026B — Anonymous Q4 login-gate benefit card
 * Compact, mobile-first, locale-driven. Rendered above the existing
 * login button. Hidden gracefully when locale keys are missing.
 * ===================================================================== */
.ai-joshier-anon-q4-benefit {
  margin: 4px 0 8px;
  padding: 12px 14px;
  background: #faf5ff;
  border: 1px solid #ead6f9;
  border-radius: 12px;
}

.ai-joshier-anon-q4-benefit-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: #5a189a;
  line-height: 1.35;
  margin: 0 0 4px 0;
}

.ai-joshier-anon-q4-benefit-intro {
  font-size: 0.82rem;
  color: #4a3a66;
  line-height: 1.45;
  margin: 0 0 8px 0;
}

.ai-joshier-anon-q4-benefit-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ai-joshier-anon-q4-benefit-item {
  position: relative;
  font-size: 0.82rem;
  color: #3a2a52;
  line-height: 1.45;
  padding: 3px 0 3px 18px;
}

.ai-joshier-anon-q4-benefit-item::before {
  content: "•";
  position: absolute;
  left: 4px;
  top: 3px;
  color: #7c3aed;
  font-weight: 700;
}

/* --------------------------------------------------------------------
   Prompt 05052026E-2A � Jathagam Snapshot in chat (renderer skeleton)
   Mobile-first compact card. Defined here so E-2C can wire the renderer
   without a follow-up CSS change. No visible behaviour until E-2B
   locale keys ship and E-2C wires the orchestrator.
   -------------------------------------------------------------------- */
.ai-joshier-snapshot {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 8px 0;
  padding: 12px 14px;
  background: #fbf7ff;
  border: 1px solid #e6d9f5;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(60, 30, 90, 0.04);
  color: #2c1f3f;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-wrap: break-word;
  /* Prompt 09052026-B (D1): scoped left-align reset.
     The snapshot card carries `ai-joshier-msg-system`, which sets
     `text-align: center` for generic system messages. Snapshot rows
     and the section title must read left-to-right; we override here
     instead of touching the global system-message style. */
  text-align: left;
}

.ai-joshier-snapshot__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #ece1f7;
}

.ai-joshier-snapshot__title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #5a189a;
  line-height: 1.3;
}

.ai-joshier-snapshot__person {
  font-size: 0.82rem;
  color: #6b5a82;
  line-height: 1.3;
}

.ai-joshier-snapshot__section {
  margin: 8px 0 0 0;
  padding: 0;
  border: 0;
}

.ai-joshier-snapshot__section + .ai-joshier-snapshot__section {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #ece1f7;
}

.ai-joshier-snapshot__section-title {
  font-size: 0.84rem;
  font-weight: 700;
  /* Prompt 09052026-B3 (D1 polish): use the brand purple as the
     subsection accent so the four card subheadings (பிறப்பு விவரங்கள்,
     முக்கிய ஜாதக நிலைகள், தற்போதைய மஹா தசா, தற்போதைய புக்தி) read as
     side-titles, slightly richer than the body text without going harsh. */
  color: #5a189a;
  letter-spacing: 0.01em;
  margin: 0 0 6px 0;
  line-height: 1.3;
  text-align: left;
}

/* Prompt 09052026-B3 (D1 polish): row-level subsection modifier.
   Used on the current Maha Dasha and current Bhukti rows inside the
   core-chart section to introduce a soft lavender divider above the
   row and re-style the row label as a subsection heading. */
.ai-joshier-snapshot__row--subsection {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #ece1f7;
}

.ai-joshier-snapshot__row--subsection .ai-joshier-snapshot__row-label {
  color: #5a189a;
  font-weight: 700;
}

.ai-joshier-snapshot__rows {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-joshier-snapshot__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  align-items: baseline;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  line-height: 1.4;
}

.ai-joshier-snapshot__row-label {
  flex: 0 0 auto;
  min-width: 96px;
  margin: 0;
  padding: 0;
  font-weight: 600;
  color: #6b5a82;
  text-align: left;
}

.ai-joshier-snapshot__row-value {
  flex: 1 1 60%;
  min-width: 0;
  margin: 0;
  padding: 0;
  color: #2c1f3f;
  text-align: left;
}

/* Prompt 09052026-B (D1): secondary line under a dasha/bhukti value
   showing the localized "Balance: X years Y months Z days" string.
   Visually subdued so it never competes with the main value. */
.ai-joshier-snapshot__row-balance {
  display: block;
  margin-top: 2px;
  font-size: 0.78rem;
  color: #6b5a82;
  line-height: 1.35;
}

.ai-joshier-snapshot__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.ai-joshier-snapshot__theme {
  display: inline-block;
  font-size: 0.78rem;
  line-height: 1.2;
  padding: 3px 8px;
  border-radius: 999px;
  background: #efe3fb;
  color: #4a2e7a;
  border: 1px solid #e1cef5;
}

.ai-joshier-snapshot__advice {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ai-joshier-snapshot__advice li {
  position: relative;
  padding: 0 0 0 14px;
  font-size: 0.84rem;
  line-height: 1.45;
  color: #2c1f3f;
}

.ai-joshier-snapshot__advice li::before {
  content: "\2022";
  position: absolute;
  left: 2px;
  top: 0;
  color: #7c3aed;
  font-weight: 700;
}

.ai-joshier-snapshot__section--more {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #ece1f7;
}

.ai-joshier-snapshot__more {
  cursor: pointer;
  list-style: none;
  font-size: 0.86rem;
  font-weight: 600;
  color: #5a189a;
  padding: 10px 4px;
  min-height: 44px;
  display: flex;
  align-items: center;
  user-select: none;
}

.ai-joshier-snapshot__more::-webkit-details-marker { display: none; }

.ai-joshier-snapshot__more::after {
  content: "\25BE";
  margin-left: 6px;
  font-size: 0.8rem;
  color: #7c3aed;
  transition: transform 0.15s ease;
}

.ai-joshier-snapshot__section--more[open] .ai-joshier-snapshot__more::after {
  transform: rotate(180deg);
}

.ai-joshier-snapshot__links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 0 0;
  padding: 0;
}

.ai-joshier-snapshot__link {
  display: block;
  font-size: 0.86rem;
  line-height: 1.35;
  color: #5a189a;
  text-decoration: none;
  padding: 10px 8px;
  min-height: 44px;
  border-radius: 8px;
  background: #f3eaff;
  border: 1px solid transparent;
}

.ai-joshier-snapshot__link:hover,
.ai-joshier-snapshot__link:focus {
  background: #ebdcff;
  border-color: #d4bbf0;
  outline: none;
}

@media (min-width: 600px) {
  .ai-joshier-snapshot { padding: 14px 16px; }
  .ai-joshier-snapshot__title { font-size: 1.02rem; }
  .ai-joshier-snapshot__row { font-size: 0.9rem; }
  .ai-joshier-snapshot__row-label { min-width: 132px; }
}

/* Prompt 05052026E-2C — heading + spacing for the snapshot-before-
   agreement chart-created flow. The "Your Jathagam is ready; a short
   chart snapshot is below" message inherits .ai-joshier-msg-system
   styles; we just tighten the bottom margin so it visually pairs with
   the snapshot card immediately beneath it, and add a little breathing
   room before the agreement card that follows. */
.ai-joshier-msg-snapshot-ready {
  margin-bottom: 4px;
}
.ai-joshier-msg-snapshot-ready + .ai-joshier-snapshot {
  margin-top: 0;
}
.ai-joshier-snapshot + .ai-joshier-agreement-gate {
  margin-top: 12px;
}

/* Prompt 05052026E-2C-FLOW — inline snapshot loading bubble shown
   between the "ready" heading and the snapshot card while the fetch is
   in flight. Reuses .ai-joshier-loading-dots so no new animation
   is introduced. Compact, mobile-friendly, system-tone. */
.ai-joshier-msg-snapshot-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 0;
  margin-bottom: 6px;
}
.ai-joshier-msg-snapshot-loading .ai-joshier-msg-text {
  margin: 0;
}
.ai-joshier-msg-snapshot-ready + .ai-joshier-msg-snapshot-loading {
  margin-top: 0;
}
.ai-joshier-msg-snapshot-loading + .ai-joshier-snapshot {
  margin-top: 4px;
}

/* Prompt 05052026E-2C-FLOW — one-time post-acceptance guidance bubble
   shown after the user accepts the agreement on the immediate post-
   create snapshot flow. Removed when the user submits Q1. */
.ai-joshier-msg-snapshot-postaccept {
  margin-top: 6px;
}

/* placeholder marker D2 */

/* ─────────────────────────────────────────────────────────────
   Prompt 09052026-C — D2: Snapshot action buttons + in-page modal
   Replaces the dashboard deep-link accordion with compact, mobile-
   first action buttons (D1 / D9 / Panchangam / Guidance). Clicking
   any button opens an in-page modal whose content is fetched from
   the new /api/jathagam-exp/joshiyar/chart-section endpoint. The
   user never leaves AI Joshiyar.
   ───────────────────────────────────────────────────────────── */

.ai-joshier-snapshot__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #ece1f7;
  text-align: left;
}

.ai-joshier-snapshot__action-btn {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  line-height: 1.2;
  color: #5a189a;
  background: #f3eaff;
  border: 1px solid #e0cdf5;
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease,
              transform 0.12s ease;
}

.ai-joshier-snapshot__action-btn:hover,
.ai-joshier-snapshot__action-btn:focus {
  background: #ebdcff;
  border-color: #d4bbf0;
  outline: none;
}

.ai-joshier-snapshot__action-btn:active {
  transform: scale(0.98);
}

/* ── Body scroll-lock when a modal is open ── */
body.ai-joshier-modal-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

/* ── Modal shell ── */
.ai-joshier-chart-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-joshier-chart-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(36, 16, 64, 0.55);
  /* Backdrop captures all clicks/touches before the underlying page can
     react — honours the "background must be disabled" requirement. */
}

.ai-joshier-chart-modal__panel {
  position: relative;
  z-index: 1;
  background: #ffffff;
  width: calc(100% - 24px);
  max-width: 520px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(36, 16, 64, 0.28);
  overflow: hidden;
  /* Slight scale-in feels intentional without being slow. */
  animation: aiJoshierChartModalIn 0.16s ease-out;
  text-align: left;
}

@keyframes aiJoshierChartModalIn {
  from { opacity: 0; transform: translateY(6px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ai-joshier-chart-modal__header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: #f9f4ff;
  border-bottom: 1px solid #ece1f7;
}

.ai-joshier-chart-modal__title {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
  color: #4a148c;
  flex: 1 1 auto;
  min-width: 0;
}

.ai-joshier-chart-modal__close-x {
  appearance: none;
  -webkit-appearance: none;
  background: #ffffff;
  border: 1px solid #d4bbf0;
  color: #4a148c;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.ai-joshier-chart-modal__close-x:hover,
.ai-joshier-chart-modal__close-x:focus {
  background: #f3eaff;
  border-color: #b894e0;
  outline: none;
}

.ai-joshier-chart-modal__body {
  padding: 14px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  min-height: 0;
  font-size: 0.92rem;
  line-height: 1.4;
  color: #2c1a3f;
}

.ai-joshier-chart-modal__footer {
  padding: 10px 14px;
  border-top: 1px solid #ece1f7;
  background: #fbfaff;
  display: flex;
  justify-content: flex-end;
}

.ai-joshier-chart-modal__close-btn {
  appearance: none;
  -webkit-appearance: none;
  background: #5a189a;
  color: #ffffff;
  border: 1px solid #5a189a;
  border-radius: 999px;
  padding: 10px 18px;
  min-height: 44px;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
}

.ai-joshier-chart-modal__close-btn:hover,
.ai-joshier-chart-modal__close-btn:focus {
  background: #4a148c;
  border-color: #4a148c;
  outline: none;
}

/* ── Modal content states ── */
.ai-joshier-chart-modal__msg {
  margin: 8px 0;
  color: #5b4978;
  font-size: 0.92rem;
}

.ai-joshier-chart-modal__msg--error {
  color: #b3261e;
}

.ai-joshier-chart-modal__msg--empty {
  color: #6a4d8c;
}

/* ── House grid (D1 / D9) ── */
.ai-joshier-chart-modal__house-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.ai-joshier-chart-modal__house-table th,
.ai-joshier-chart-modal__house-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #f0e7fa;
  text-align: left;
  vertical-align: top;
}

.ai-joshier-chart-modal__house-table th {
  background: #faf6ff;
  color: #4a148c;
  font-weight: 600;
  font-size: 0.86rem;
}

.ai-joshier-chart-modal__house-cell {
  width: 64px;
  font-weight: 600;
  color: #4a148c;
}

.ai-joshier-chart-modal__planets-cell {
  color: #2c1a3f;
}

.ai-joshier-chart-modal__planets-cell--empty {
  color: #9080a8;
  font-style: italic;
}

/* ── South Indian chart kattam (Prompt 09052026-C2) ──
   Compact 4×4 grid that mirrors the dashboard "ராசி கட்டம்"
   visual. Cells 5,6,9,10 form the merged 2×2 center label.
   The legacy 12-row table is kept inside a collapsed
   <details> below the kattam as a graceful fallback. */
.ai-joshier-chart-kattam {
  margin: 0 0 12px 0;
  display: flex;
  justify-content: center;
}

.ai-joshier-chart-kattam__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  gap: 0;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 2px solid #7b2cbf;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(123, 44, 191, 0.12);
}

.ai-joshier-chart-kattam__cell {
  background: #fefaff;
  border: 1px solid #e2cdf7;
  position: relative;
  padding: 14px 4px 4px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-width: 0;
}

.ai-joshier-chart-kattam__cell--lagna {
  background: #f3eaff;
}

.ai-joshier-chart-kattam__cell-no {
  position: absolute;
  top: 2px;
  left: 4px;
  font-size: 0.6rem;
  color: #a48cc4;
  font-weight: 600;
  line-height: 1;
}

.ai-joshier-chart-kattam__center {
  grid-column: span 2;
  grid-row: span 2;
  background: #faf5ff;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.ai-joshier-chart-kattam__center-label {
  font-size: 1rem;
  font-weight: 700;
  color: #7b2cbf;
  letter-spacing: 0.5px;
}

.ai-joshier-chart-kattam__planets {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 2px;
  justify-content: center;
  align-content: flex-start;
}

.ai-joshier-chart-kattam__planet {
  font-size: 0.7rem;
  color: #5a189a;
  font-weight: 600;
  background: #f3eaff;
  border-radius: 3px;
  padding: 1px 4px;
  white-space: nowrap;
  line-height: 1.2;
}

.ai-joshier-chart-kattam__planet--empty {
  background: transparent;
  color: #b8a8cf;
  font-weight: 400;
  font-style: italic;
}

.ai-joshier-chart-kattam__fallback {
  margin-top: 4px;
}

.ai-joshier-chart-kattam__fallback-summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: #5a189a;
  padding: 6px 0;
  list-style: revert;
}

.ai-joshier-chart-kattam__fallback-table {
  margin-top: 4px;
  font-size: 0.86rem;
}

@media (max-width: 599px) {
  .ai-joshier-chart-kattam__grid {
    max-width: 300px;
  }
  .ai-joshier-chart-kattam__cell {
    padding: 12px 2px 2px;
  }
  .ai-joshier-chart-kattam__planet {
    font-size: 0.62rem;
    padding: 1px 3px;
  }
  .ai-joshier-chart-kattam__center-label {
    font-size: 0.85rem;
  }
  .ai-joshier-chart-kattam__cell-no {
    font-size: 0.55rem;
  }
}

/* ── Panchangam ── */
.ai-joshier-chart-modal__panchangam {
  margin: 0;
  padding: 0;
}

.ai-joshier-chart-modal__panchangam-row {
  display: flex;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #f0e7fa;
}

.ai-joshier-chart-modal__panchangam-row:last-child {
  border-bottom: none;
}

.ai-joshier-chart-modal__panchangam-label {
  flex: 0 0 38%;
  margin: 0;
  font-weight: 600;
  color: #4a148c;
  font-size: 0.9rem;
}

.ai-joshier-chart-modal__panchangam-value {
  flex: 1 1 auto;
  margin: 0;
  color: #2c1a3f;
  font-size: 0.92rem;
}

/* ── Guidance modal ── */
.ai-joshier-chart-modal__guidance-block {
  margin: 0 0 14px 0;
}

.ai-joshier-chart-modal__guidance-block:last-child {
  margin-bottom: 0;
}

.ai-joshier-chart-modal__guidance-label {
  margin: 0 0 4px 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #5a189a;
}

.ai-joshier-chart-modal__guidance-value {
  margin: 0;
  color: #2c1a3f;
  font-size: 0.92rem;
  line-height: 1.45;
}

.ai-joshier-chart-modal__guidance-list {
  margin: 0;
  padding-left: 20px;
  color: #2c1a3f;
  font-size: 0.92rem;
  line-height: 1.45;
}

.ai-joshier-chart-modal__guidance-list li {
  margin-bottom: 4px;
}

/* ── Mobile bottom-sheet treatment ── */
@media (max-width: 599px) {
  .ai-joshier-chart-modal {
    align-items: flex-end;
  }
  .ai-joshier-chart-modal__panel {
    width: 100%;
    max-width: none;
    max-height: 88vh;
    border-radius: 16px 16px 0 0;
    animation: aiJoshierChartModalSheetIn 0.18s ease-out;
  }
  .ai-joshier-chart-modal__panchangam-label {
    flex-basis: 44%;
  }
}

@keyframes aiJoshierChartModalSheetIn {
  from { transform: translateY(16px); opacity: 0.6; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ─── Prompt 12052026-B — Paywall P2: dynamic social-proof badge ─── */
/* Compact, factual pill shown on the free-limit paywall only,        */
/* between the headline/subheadline and the plan cards.               */
.ai-joshier-paywall-social-proof-slot {
  display: flex;
  justify-content: center;
  margin: 4px auto 10px;
  width: 100%;
}
.ai-joshier-paywall-social-proof {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  max-width: 100%;
  padding: 7px 14px 7px 12px;
  background: linear-gradient(135deg, #f5efff 0%, #ece1fb 100%);
  color: #4a3a7a;
  border: 1px solid #ddd0f3;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.35;
  text-align: center;
  box-shadow: 0 1px 2px rgba(90, 74, 138, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  cursor: default;
  user-select: none;
}
.ai-joshier-paywall-social-proof__icon {
  flex: 0 0 auto;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #a98cf0 0%, #6f4fc9 70%, #4a2fa3 100%);
  box-shadow: 0 0 0 0 rgba(127, 90, 220, 0.55);
  animation: aiJoshierPaywallSocialProofPulse 2.2s ease-in-out infinite;
}
@keyframes aiJoshierPaywallSocialProofPulse {
  0%   { box-shadow: 0 0 0 0 rgba(127, 90, 220, 0.55); }
  60%  { box-shadow: 0 0 0 6px rgba(127, 90, 220, 0); }
  100% { box-shadow: 0 0 0 0 rgba(127, 90, 220, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ai-joshier-paywall-social-proof__icon {
    animation: none;
  }
}
.ai-joshier-paywall-social-proof__text {
  display: inline-block;
  white-space: normal;
  word-break: break-word;
}

@media (max-width: 480px) {
  .ai-joshier-paywall-social-proof {
    padding: 6px 12px 6px 10px;
    gap: 7px;
    font-size: 12px;
    border-radius: 14px;        /* allow 2-line wrap to look like a soft chip */
  }
  .ai-joshier-paywall-social-proof__icon {
    width: 7px;
    height: 7px;
  }
  .ai-joshier-paywall-social-proof-slot {
    margin: 2px auto 8px;
  }
}

/* --------------------------------------------------------------------
   AI Joshiyar Free Journey v2 — Phase E: Snapshot Guidance Accordion
   Inline guidance accordion that replaces the Guidance modal action
   chip when the v2 flag is ON. Mirrors the dashboard's
   "உங்கள் வழிகாட்டல்" block visually but stays compact for the chat
   surface. Mobile-first; 44px tap targets; respects reduced motion.
   -------------------------------------------------------------------- */
.ai-joshier-snapshot__section--guidance-full .ai-joshier-snapshot__section-title {
  margin-bottom: 8px;
}

.ai-joshier-snapshot__accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.ai-joshier-snapshot__acc-item {
  background: #ffffff;
  border: 1px solid #ece1f7;
  border-radius: 10px;
  overflow: hidden;
}

.ai-joshier-snapshot__acc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  font-size: 0.88rem;
  font-weight: 700;
  color: #4a2e7a;
  text-align: left;
  line-height: 1.3;
  cursor: pointer;
  box-sizing: border-box;
}

.ai-joshier-snapshot__acc-header:focus {
  outline: 2px solid #b39ddb;
  outline-offset: 2px;
}

.ai-joshier-snapshot__acc-header:hover {
  background: #faf5ff;
}

.ai-joshier-snapshot__acc-header-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.ai-joshier-snapshot__acc-header-caret {
  flex: 0 0 auto;
  margin-left: 10px;
  font-size: 0.85rem;
  color: #6b5a82;
  transition: transform 0.18s ease;
}

.ai-joshier-snapshot__acc-header[aria-expanded="true"] .ai-joshier-snapshot__acc-header-caret {
  transform: rotate(180deg);
}

.ai-joshier-snapshot__acc-body {
  padding: 4px 14px 12px 14px;
  border-top: 1px solid #f3eafa;
  background: #fbf7ff;
  color: #2c1f3f;
  font-size: 0.86rem;
  line-height: 1.5;
}

.ai-joshier-snapshot__acc-body[hidden] {
  display: none;
}

.ai-joshier-snapshot__acc-text {
  margin: 8px 0 0 0;
  padding: 0;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.ai-joshier-snapshot__acc-themes {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

.ai-joshier-snapshot__acc-theme {
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid #ece1f7;
  border-radius: 8px;
}

.ai-joshier-snapshot__acc-theme-title {
  font-size: 0.86rem;
  font-weight: 700;
  color: #5a189a;
  margin: 0 0 4px 0;
  line-height: 1.3;
}

.ai-joshier-snapshot__acc-theme-body {
  margin: 0;
  padding: 0;
  font-size: 0.84rem;
  color: #2c1f3f;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.ai-joshier-snapshot__acc-theme-reasons {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #ece1f7;
}

.ai-joshier-snapshot__acc-theme-reasons-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b5a82;
  margin-bottom: 4px;
}

.ai-joshier-snapshot__acc-theme-reasons-list {
  list-style: disc;
  margin: 0;
  padding-left: 18px;
  font-size: 0.8rem;
  color: #4a2e7a;
  line-height: 1.4;
}

.ai-joshier-snapshot__acc-theme-reasons-list li {
  margin: 2px 0;
}

.ai-joshier-snapshot__acc-suggestions {
  list-style: disc;
  margin: 8px 0 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ai-joshier-snapshot__acc-suggestions li {
  margin: 0;
  font-size: 0.85rem;
  color: #2c1f3f;
  line-height: 1.45;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

@media (max-width: 480px) {
  .ai-joshier-snapshot__acc-header {
    padding: 10px 10px;
    font-size: 0.85rem;
  }
  .ai-joshier-snapshot__acc-body {
    padding: 4px 10px 10px 10px;
    font-size: 0.84rem;
  }
  .ai-joshier-snapshot__acc-theme {
    padding: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ai-joshier-snapshot__acc-header-caret {
    transition: none;
  }
}


/* ============================================================
   AI Joshiyar Free Journey v2 � Phase G
   Personalized preview badge + continuation teaser styles.
   Wiring-only phase: classes are referenced by the renderer when
   v2 metadata + locale text are both present. Styles are mobile
   first, calm, and never introduce horizontal overflow.
   ============================================================ */
.ai-joshier-preview-badge {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 6px 0;
  padding: 2px 10px;
  font-size: 11px;
  line-height: 16px;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #6b4a18;
  background: #fff5d8;
  border: 1px solid #f1d99a;
  border-radius: 999px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-joshier-preview-teaser {
  display: block;
  margin: -2px 12px 12px 12px;
  padding: 6px 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #5a4a2e;
  background: rgba(255, 245, 216, 0.55);
  border-left: 3px solid #f1d99a;
  border-radius: 6px;
  word-break: break-word;
}
.ai-joshier-paywall-continue-received,
.ai-joshier-paywall-continue-unlock {
  margin: 10px 0 0 0;
  padding: 10px 12px;
  background: rgba(255, 250, 235, 0.8);
  border: 1px solid #f1d99a;
  border-radius: 8px;
}
.ai-joshier-paywall-continue-received-title,
.ai-joshier-paywall-continue-unlock-title {
  margin: 0 0 6px 0;
  font-size: 13px;
  font-weight: 700;
  color: #6b4a18;
}
.ai-joshier-paywall-continue-received-items,
.ai-joshier-paywall-continue-unlock-items {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.5;
  color: #4a3b1e;
}
.ai-joshier-paywall-continue-received-items li,
.ai-joshier-paywall-continue-unlock-items li {
  margin: 2px 0;
  word-break: break-word;
}

/* ─── Batch 2 Phase 2C (24052026) — Faded answer-preview paywall ─── */
/* Preview answer bubble: same look as a normal assistant bubble but   */
/* with a soft bottom fade overlay that suggests "continues below".    */
.ai-joshier-msg-assistant--preview {
  position: relative;
  /* Allow the absolute-positioned fade overlay to align to the bubble */
  /* edges without overflowing into the chart background.              */
  overflow: hidden;
  /* Sit slightly apart from the continuation card below.              */
  margin-bottom: 8px;
  /* Phase 2F-2: Explicitly constrain the preview bubble so it never   */
  /* stretches to a full-width banner even if a future parent layout   */
  /* changes default flex alignment. Mirrors `.ai-joshier-msg` base.   */
  align-self: flex-start;
  max-width: 85%;
}

.ai-joshier-msg-assistant--preview .ai-joshier-msg-text {
  /* Preserve assistant bubble styling; just add some extra bottom     */
  /* padding so the gradient does not eat the final visible line.     */
  padding-bottom: 28px;
}

.ai-joshier-msg-preview-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36%;
  min-height: 56px;
  max-height: 96px;
  pointer-events: none;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  background: linear-gradient(
    to bottom,
    rgba(243, 234, 255, 0) 0%,
    rgba(243, 234, 255, 0.85) 70%,
    #f3eaff 100%
  );
}

/* Continuation card: warm, calm, separated from the bubble. */
.ai-joshier-preview-continuation-card {
  margin: 6px 0 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fbf6ff;
  border: 1px solid #e7d8f7;
  color: #2d1b47;
  /* Phase 2F-2: Constrain to assistant-bubble alignment so it does    */
  /* not look like a full-width banner. Mirrors `.ai-joshier-msg`     */
  /* (`align-self: flex-start; max-width: 85%`).                      */
  align-self: flex-start;
  max-width: 85%;
  box-sizing: border-box;
}

.ai-joshier-preview-continuation-text {
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

/* CTA wrapper for the preview paywall (reuses existing class names    */
/* for plan cards, social proof, etc.; this is just a hook for tests   */
/* and any future spacing tweaks).                                     */
.ai-joshier-preview-actions {
  margin-top: 4px;
}

/* Mobile-first overrides for the preview surface. */
@media (max-width: 480px) {
  .ai-joshier-msg-assistant--preview {
    /* Mobile gives a little more horizontal room while still staying  */
    /* visually a bubble (not a banner).                               */
    max-width: 92%;
  }
  .ai-joshier-msg-preview-fade {
    height: 40%;
    min-height: 48px;
  }
  .ai-joshier-preview-continuation-card {
    padding: 10px 12px;
    margin: 6px 0 10px;
    max-width: 92%;
  }
  .ai-joshier-preview-continuation-text {
    font-size: 0.9rem;
  }
}

/* Phase 2G — In-bubble continuation paragraph.                        */
/* When the continuation copy is rendered INSIDE the same assistant    */
/* preview bubble (not as a standalone card outside), this class       */
/* removes the standalone-card chrome (background, border, max-width,  */
/* self-alignment) and replaces it with a subtle top-border separator  */
/* so the paragraph reads as a natural continuation of the answer     */
/* above it. The two legacy classes                                    */
/* `ai-joshier-preview-continuation-card` and `-text` remain on the    */
/* same DOM nodes for backwards compatibility with older selectors    */
/* and tests, but this class takes precedence visually.                */
.ai-joshier-paywall-preview-continuation-paragraph {
  margin: 0.75rem 0 0;
  padding: 0.7rem 0 0;
  border-top: 1px solid rgba(120, 80, 180, 0.18);
  background: transparent;
  border-left: 0;
  border-right: 0;
  border-bottom: 0;
  border-radius: 0;
  color: #3a2860;
  line-height: 1.6;
  align-self: auto;
  max-width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 1; /* sit above the bottom fade overlay */
}

.ai-joshier-paywall-preview-continuation-paragraph
  .ai-joshier-preview-continuation-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: inherit;
}

@media (max-width: 480px) {
  .ai-joshier-paywall-preview-continuation-paragraph {
    margin-top: 0.6rem;
    padding-top: 0.55rem;
  }
  .ai-joshier-paywall-preview-continuation-paragraph
    .ai-joshier-preview-continuation-text {
    font-size: 0.9rem;
  }
}

/* ─── Phase 2G frontend bug-fix — preview answer surface guards ───   */
/* Explicit visibility-safe rules for the new                          */
/* `.ai-joshier-paywall-preview-answer` and                            */
/* `.ai-joshier-paywall-preview-answer-text` classes so the preview    */
/* answer bubble can never be accidentally collapsed/hidden by a       */
/* future override. The bottom fade overlay continues to be the only   */
/* visual obscuration; it stays bottom-only and pointer-events:none.   */
.ai-joshier-paywall-preview-answer {
  display: block;
  visibility: visible;
  opacity: 1;
}

.ai-joshier-paywall-preview-answer-text {
  display: block;
  visibility: visible;
  opacity: 1;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Reaffirm fade overlay constraints (defense-in-depth against a       */
/* future stylesheet making the fade cover the entire bubble).         */
.ai-joshier-paywall-preview-answer .ai-joshier-msg-preview-fade {
  pointer-events: none;
  top: auto;
  bottom: 0;
  max-height: 96px;
}

/* ─── Phase 2G Fix 8 (25052026) — Visible continuation footer ─── */
/* Fix 7 clipped the OUTER preview bubble with overflow:hidden +     */
/* max-height, which correctly stopped the answer from overlapping   */
/* the CTA — but it also clipped the LLM-generated continuation      */
/* paragraph that lives inside the same bubble, hiding the most      */
/* important call-to-action copy.                                    */
/*                                                                    */
/* Fix 8 splits the bubble: the outer `.ai-joshier-paywall-preview-  */
/* answer` becomes a normal visible block, and a NEW inner wrapper   */
/* `.ai-joshier-paywall-preview-clip` carries the overflow:hidden +  */
/* bounded max-height + fade overlay. The continuation paragraph is  */
/* a sibling of `.ai-joshier-paywall-preview-clip` (still inside the */
/* preview bubble) so it remains fully visible below the fade.       */
/* ─── Phase 2G Fix 9 (25052026) — Outer Preview Bubble Flex-Column ─── */
/* Fix 8's `display:block !important; min-height:1px !important;`     */
/* override demoted the assistant bubble's base flex-column layout    */
/* and pinned the outer bubble to a 1px height floor. The children    */
/* (`.ai-joshier-paywall-preview-clip` + the continuation paragraph)  */
/* remained visible because they overflowed visibly, but the plan-    */
/* card CTA below them was positioned against `previewBottom` ==      */
/* `previewTop + 1px` and overlapped the visible children.            */
/*                                                                    */
/* Fix 9 restores the bubble as a real flex-column stacking container */
/* whose intrinsic height is the sum of its children (clip + footer), */
/* so the CTA naturally starts AFTER the full preview bubble.         */
.ai-joshier-msg.ai-joshier-msg-assistant.ai-joshier-paywall-preview-answer,
.ai-joshier-msg-assistant--preview.ai-joshier-paywall-preview-answer,
.ai-joshier-paywall-preview-visible {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  height: auto !important;
  min-height: unset !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  /* Phase 2G Fix 10 — reduce the gap between the preview bubble and  */
  /* the dynamic social-proof badge / CTA wrapper that follows it.    */
  margin-bottom: 0.65rem;
  padding-bottom: 0;
}

/* Phase 2G Fix 9 — children participate as flex items in normal flow */
/* so the outer bubble height = clip height + continuation height.    */
.ai-joshier-paywall-preview-clip,
.ai-joshier-paywall-preview-continuation-paragraph {
  flex: 0 0 auto;
}

/* Phase 2G Fix 10 — tighter clip box: removes dead empty space below */
/* the visible answer text while still partially showing ~2 short    */
/* Tamil paragraphs and keeping overflow:hidden + fade overlay.      */
.ai-joshier-paywall-preview-clip {
  position: relative;
  display: block;
  height: auto;
  min-height: 0;
  max-height: clamp(190px, 26vh, 280px);
  overflow: hidden;
  padding-bottom: 2.75rem;
  box-sizing: border-box;
}

.ai-joshier-paywall-preview-answer-text {
  display: block !important;
  height: auto !important;
  min-height: 1px !important;
  max-height: none !important;
  overflow: visible;
  position: relative;
}

.ai-joshier-paywall-preview-continuation-paragraph {
  display: block !important;
  position: relative;
  height: auto !important;
  min-height: 1px !important;
  max-height: none !important;
  overflow: visible !important;
  margin-top: 0.85rem;
  padding: 0.85rem 0.95rem;
  border-top: 1px solid rgba(123, 44, 191, 0.18);
  background: rgba(123, 44, 191, 0.045);
  border-radius: 14px;
  line-height: 1.65;
  z-index: 3;
}

/* Re-affirm the fade overlay is bottom-only inside the inner clip   */
/* wrapper (not inside the outer bubble anymore). Scope to both the  */
/* legacy `.ai-joshier-paywall-preview-answer` descendant selector   */
/* (kept for backwards compatibility) AND the new clip selector.    */
.ai-joshier-paywall-preview-clip .ai-joshier-msg-preview-fade,
.ai-joshier-paywall-preview-visible .ai-joshier-msg-preview-fade,
.ai-joshier-paywall-preview-answer .ai-joshier-msg-preview-fade {
  /* Phase 2G Fix 10 — tighter bottom-only fade overlay. Bounded to a */
  /* compact pixel band (not a large percentage block) and uses the   */
  /* existing light-purple bubble background (#f3eaff) for a smooth   */
  /* fade-out of the clipped answer text.                             */
  position: absolute !important;
  left: 0;
  right: 0;
  top: auto !important;
  bottom: 0 !important;
  height: 88px;
  min-height: 72px;
  max-height: 96px;
  pointer-events: none !important;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    rgba(243, 234, 255, 0) 0%,
    rgba(243, 234, 255, 0.82) 58%,
    rgba(243, 234, 255, 1) 100%
  );
}

/* CTA wrapper spacing: keep CTA in normal block flow BELOW the      */
/* full preview bubble (clipped answer + visible continuation        */
/* footer). Never absolute/fixed — the bubble's margin-bottom +      */
/* this margin-top guarantee a visible gap.                          */
.ai-joshier-preview-actions,
.ai-joshier-gating-cta.ai-joshier-preview-actions {
  position: relative;
  z-index: 1;
  /* Phase 2G Fix 10 — reduce vertical gap between continuation       */
  /* paragraph and the dynamic social-proof badge / plan cards.       */
  margin-top: 0.35rem;
  clear: both;
}

/* Phase 2G Fix 10 — when the social proof chip is rendered inside the */
/* preview-actions wrapper, keep it visually compact without touching  */
/* the plan cards that follow it.                                     */
.ai-joshier-preview-actions .ai-joshier-social-proof-badge,
.ai-joshier-preview-actions .ai-joshier-paywall-social-proof {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

@media (max-width: 640px) {
  .ai-joshier-paywall-preview-clip {
    min-height: 0;
    max-height: min(30vh, 260px);
    padding-bottom: 2.5rem;
  }

  .ai-joshier-paywall-preview-continuation-paragraph {
    margin-top: 0.75rem;
    padding: 0.75rem 0.8rem;
    font-size: 0.95rem;
    line-height: 1.6;
  }
}