/* 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;
}

/* ── 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 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;
}

.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 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: 10px 0 8px;
}

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

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

/* 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: 8px 8px 6px;
  }
}

/* ── 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;
  }
}

/* ==========================================================================
   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 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; }
}