/* ============================================================================
   TISLM Design Tokens — single source of truth.
   Loaded by app.py (Streamlit), pages/*, and templates/index.html (Flask).
   Mirrors the design-system bundle's colors_and_type.css.
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+Arabic:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&display=swap');

:root {
  /* brand */
  --tislm-accent:        #2d5e3a;
  --tislm-accent-dark:   #244e30;
  --tislm-accent-press:  #1f4327;
  --tislm-accent-soft:   #e8f0ea;
  --tislm-accent-line:   #a8c8af;
  --tislm-focus-ring:    #b7d2bd;

  /* surface */
  --tislm-bg:            #f5f7f2;
  --tislm-bg-top:        #f8faf6;
  --tislm-bg-bottom:     #f3f6ef;
  --tislm-surface:       #ffffff;
  --tislm-surface-soft:  #fbfcfa;
  --tislm-surface-code:  #f7faf5;

  /* text */
  --tislm-text:          #1c1f1b;
  --tislm-muted:         #5f665a;
  --tislm-muted-soft:    #888888;

  /* line */
  --tislm-line:          #d9dfd3;
  --tislm-line-soft:     #cfe1d3;

  /* state */
  --tislm-verified:      #22c55e;
  --tislm-verified-bg:   rgba(34, 197, 94, 0.08);
  --tislm-caution:       #eab308;
  --tislm-caution-bg:    rgba(234, 179, 8, 0.08);
  --tislm-crisis:        #ef4444;
  --tislm-crisis-bg:     #fef2f2;

  /* author signatures */
  --tislm-jameel:        #4A90D9;
  --tislm-jameel-soft:   rgba(74, 144, 217, 0.08);
  --tislm-karees:        #D94A8C;
  --tislm-author-default:#888888;

  /* type */
  --tislm-font-sans:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --tislm-font-arabic:  'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --tislm-font-serif:   'Source Serif 4', 'EB Garamond', Georgia, serif;
  --tislm-font-mono:    'SF Mono', 'Fira Code', Consolas, monospace;

  --tislm-fs-xs:    12px;
  --tislm-fs-sm:    14px;
  --tislm-fs-base:  16px;
  --tislm-fs-md:    18px;
  --tislm-fs-lg:    20px;
  --tislm-fs-xl:    24px;
  --tislm-fs-2xl:   30px;
  --tislm-fs-3xl:   36px;
  --tislm-fs-4xl:   48px;

  --tislm-fw-regular:  400;
  --tislm-fw-medium:   500;
  --tislm-fw-semibold: 600;
  --tislm-fw-bold:     700;

  --tislm-lh-tight:    1.2;
  --tislm-lh-snug:     1.35;
  --tislm-lh-normal:   1.5;
  --tislm-lh-relaxed:  1.7;
  --tislm-lh-arabic:   2.0;

  /* spacing (4 px grid) */
  --tislm-s-1:   4px;
  --tislm-s-2:   8px;
  --tislm-s-3:   12px;
  --tislm-s-4:   16px;
  --tislm-s-5:   20px;
  --tislm-s-6:   24px;
  --tislm-s-8:   32px;
  --tislm-s-10:  40px;
  --tislm-s-14:  56px;
  --tislm-s-18:  72px;

  /* radius */
  --tislm-radius-sm:    8px;
  --tislm-radius-md:   12px;
  --tislm-radius-lg:   14px;
  --tislm-radius-xl:   18px;
  --tislm-radius-2xl:  22px;
  --tislm-radius-pill: 999px;

  /* shadow */
  --tislm-shadow-card: 0 8px 20px rgba(20, 35, 22, 0.04);
  --tislm-shadow-pop:  0 12px 32px rgba(20, 35, 22, 0.08);
  --tislm-shadow-lift: 0 20px 50px -20px rgba(20, 35, 22, 0.12);
  --tislm-shadow-watermark: 0 2px 8px rgba(0, 0, 0, 0.15);

  /* motion */
  --tislm-ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --tislm-dur-hover:   150ms;
  --tislm-dur-state:   200ms;

  /* layout */
  --tislm-content-max: 880px;
  --tislm-input-min-h: 54px;
  --tislm-touch-min:   44px;
}

/* ============================================================================
   Base / typography
   ============================================================================ */

.tislm-body, body.tislm-body {
  margin: 0;
  background:
    radial-gradient(ellipse 70% 60% at 12% 8%, rgba(168,200,175,0.18), transparent 60%),
    radial-gradient(ellipse 55% 50% at 92% 28%, rgba(74,144,217,0.06), transparent 65%),
    linear-gradient(180deg, var(--tislm-bg-top) 0%, var(--tislm-bg-bottom) 100%);
  color: var(--tislm-text);
  font-family: var(--tislm-font-sans);
  font-size: var(--tislm-fs-base);
  line-height: var(--tislm-lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.tislm-display {
  font-family: var(--tislm-font-serif);
  font-weight: var(--tislm-fw-semibold);
  letter-spacing: -0.01em;
  line-height: var(--tislm-lh-tight);
}

.tislm-h1 { font-size: var(--tislm-fs-3xl); font-weight: var(--tislm-fw-bold); letter-spacing: -0.02em; line-height: var(--tislm-lh-tight); margin: 0; }
.tislm-h2 { font-size: var(--tislm-fs-xl); font-weight: var(--tislm-fw-bold); line-height: var(--tislm-lh-snug); margin: 0; }
.tislm-h3 { font-size: var(--tislm-fs-md); font-weight: var(--tislm-fw-semibold); line-height: var(--tislm-lh-snug); margin: 0; }
.tislm-body-lg { font-size: var(--tislm-fs-md); line-height: var(--tislm-lh-relaxed); }
.tislm-body-md { font-size: var(--tislm-fs-base); line-height: var(--tislm-lh-normal); }
.tislm-caption { font-size: var(--tislm-fs-sm); color: var(--tislm-muted); line-height: var(--tislm-lh-snug); }
.tislm-mono    { font-family: var(--tislm-font-mono); font-size: var(--tislm-fs-sm); }
.tislm-muted   { color: var(--tislm-muted); }
.tislm-label   { font-weight: var(--tislm-fw-bold); font-size: var(--tislm-fs-sm); display: block; }

/* ============================================================================
   RTL helpers
   ============================================================================ */

[dir="rtl"], .tislm-rtl, .rtl-content {
  direction: rtl;
  text-align: right;
  font-family: var(--tislm-font-arabic);
  line-height: var(--tislm-lh-arabic);
  unicode-bidi: embed;
}
[dir="rtl"] ul, [dir="rtl"] ol,
.rtl-content ul, .rtl-content ol { padding-right: 1.5em; padding-left: 0; }
[dir="rtl"] blockquote,
.rtl-content blockquote {
  border-right: 4px solid var(--tislm-jameel);
  border-left: none;
  padding-right: 1em;
  padding-left: 0;
  margin-right: 0;
}

/* ============================================================================
   Card
   ============================================================================ */

.tislm-card {
  background: var(--tislm-surface);
  border: 1px solid var(--tislm-line);
  border-radius: var(--tislm-radius-lg);
  padding: var(--tislm-s-5);
  box-shadow: var(--tislm-shadow-card);
}
.tislm-card--hover:hover {
  border-color: var(--tislm-accent-line);
  box-shadow: var(--tislm-shadow-pop);
  transition: border-color var(--tislm-dur-hover) var(--tislm-ease),
              box-shadow var(--tislm-dur-hover) var(--tislm-ease);
}

/* ============================================================================
   Button
   ============================================================================ */

.tislm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tislm-s-2);
  padding: 0 var(--tislm-s-5);
  min-height: var(--tislm-input-min-h);
  font-family: inherit;
  font-size: var(--tislm-fs-base);
  font-weight: var(--tislm-fw-bold);
  border-radius: var(--tislm-radius-md);
  cursor: pointer;
  transition: background var(--tislm-dur-hover) var(--tislm-ease),
              border-color var(--tislm-dur-hover) var(--tislm-ease);
}
.tislm-btn--primary {
  background: var(--tislm-accent);
  border: 1px solid var(--tislm-accent);
  color: #fff;
}
.tislm-btn--primary:hover  { background: var(--tislm-accent-dark); border-color: var(--tislm-accent-dark); }
.tislm-btn--primary:active { background: var(--tislm-accent-press); }
.tislm-btn--secondary {
  background: var(--tislm-surface);
  border: 1px solid var(--tislm-line);
  color: var(--tislm-text);
}
.tislm-btn--secondary:hover { border-color: var(--tislm-accent-line); }
.tislm-btn--ghost {
  background: transparent;
  border: 1px solid transparent;
  color: var(--tislm-accent);
}
.tislm-btn--ghost:hover { background: var(--tislm-accent-soft); }
.tislm-btn--danger {
  background: #fff;
  border: 1px solid var(--tislm-crisis);
  color: var(--tislm-crisis);
}
.tislm-btn--danger:hover { background: var(--tislm-crisis-bg); }

/* ============================================================================
   Inputs
   ============================================================================ */

.tislm-input,
.tislm-textarea,
.tislm-select {
  width: 100%;
  font-family: inherit;
  font-size: var(--tislm-fs-base);
  border: 1px solid var(--tislm-line);
  border-radius: var(--tislm-radius-md);
  padding: var(--tislm-s-3) var(--tislm-s-4);
  background: var(--tislm-surface);
  color: var(--tislm-text);
  min-height: var(--tislm-input-min-h);
  box-sizing: border-box;
}
.tislm-textarea { min-height: 190px; resize: vertical; }
.tislm-input:focus,
.tislm-textarea:focus,
.tislm-select:focus {
  outline: 2px solid var(--tislm-focus-ring);
  border-color: var(--tislm-accent-line);
  outline-offset: 0;
}

/* ============================================================================
   Quality badges (verified / caution / crisis)
   Legacy aliases (.tislm-quality-green/yellow/red, .tislm-crisis-banner)
   are retained so existing markup keeps rendering.
   ============================================================================ */

.tislm-badge,
.tislm-quality-badge {
  padding: 10px 16px;
  border-radius: var(--tislm-radius-sm);
  margin: var(--tislm-s-2) 0;
  font-size: var(--tislm-fs-sm);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tislm-badge--verified,
.tislm-quality-green { background: var(--tislm-verified-bg); border-left: 4px solid var(--tislm-verified); }
.tislm-badge--caution,
.tislm-quality-yellow { background: var(--tislm-caution-bg);  border-left: 4px solid var(--tislm-caution); }
.tislm-quality-red    { background: var(--tislm-crisis-bg);   border-left: 4px solid var(--tislm-crisis); }
.tislm-badge--crisis,
.tislm-crisis-banner {
  background: var(--tislm-crisis-bg);
  border: 2px solid var(--tislm-crisis);
  border-radius: var(--tislm-radius-sm);
  padding: 12px 16px;
  margin: 8px 0;
}
[dir="rtl"] .tislm-badge--verified,
[dir="rtl"] .tislm-badge--caution,
[dir="rtl"] .tislm-quality-green,
[dir="rtl"] .tislm-quality-yellow,
[dir="rtl"] .tislm-quality-red { border-left: none; border-right: 4px solid currentColor; }

/* ============================================================================
   Source tag (pill chip)
   ============================================================================ */

.tislm-source-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--tislm-radius-pill);
  background: var(--tislm-jameel-soft);
  color: var(--tislm-jameel);
  font-size: 13px;
  margin: 3px 2px;
  border: 1px solid rgba(74,144,217,0.18);
}
.tislm-source-tag--scripture { background: var(--tislm-accent-soft); color: var(--tislm-accent); border-color: var(--tislm-accent-line); }

/* Legacy section divider */
.tislm-section-divider {
  border-top: 1px solid rgba(128, 128, 128, 0.15);
  margin: 12px 0;
}

/* ============================================================================
   Mode card (radio-as-card)
   ============================================================================ */

.tislm-mode-card {
  position: relative;
  display: block;
  border: 1px solid var(--tislm-line);
  border-radius: var(--tislm-radius-md);
  padding: var(--tislm-s-4);
  min-height: 108px;
  background: var(--tislm-surface-soft);
  cursor: pointer;
  transition: border-color var(--tislm-dur-hover) var(--tislm-ease),
              background var(--tislm-dur-hover) var(--tislm-ease),
              transform var(--tislm-dur-state) var(--tislm-ease);
}
.tislm-mode-card:hover { transform: translateY(-2px); border-color: var(--tislm-accent-line); }
.tislm-mode-card.is-active,
.tislm-mode-card:has(input:checked) {
  border-color: var(--tislm-accent);
  background: var(--tislm-accent-soft);
}
.tislm-mode-card .tislm-mode-title { display: block; font-weight: var(--tislm-fw-bold); margin-bottom: 4px; }
.tislm-mode-card .tislm-mode-desc  { display: block; color: var(--tislm-muted); font-size: var(--tislm-fs-sm); line-height: 1.35; }

/* ============================================================================
   Inline icon (Lucide as inline SVG)
   ============================================================================ */

.tislm-icon {
  display: inline-flex;
  vertical-align: -2px;
  margin-right: 6px;
}
.tislm-icon svg {
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tislm-icon--accent { color: var(--tislm-accent); }
.tislm-icon--muted  { color: var(--tislm-muted); }
.tislm-icon--crisis { color: var(--tislm-crisis); }

/* ============================================================================
   Streamlit-specific overrides — applied where Streamlit's defaults
   conflict with the design language.
   ============================================================================ */

/* Hide Streamlit's chrome (top header, deploy badge, hamburger, footer)
   so the app shell reads as pastoral, not as a SaaS dashboard. */
header[data-testid="stHeader"],
[data-testid="stToolbar"],
[data-testid="stDecoration"],
[data-testid="stStatusWidget"],
#MainMenu,
footer { display: none !important; }
.stApp { padding-top: 0 !important; }

/* Body background — layered radial gradients for ambient warmth. */
.stApp {
  background:
    radial-gradient(ellipse 70% 60% at 12% 8%, rgba(168,200,175,0.32), transparent 60%),
    radial-gradient(ellipse 55% 50% at 92% 28%, rgba(74,144,217,0.10), transparent 65%),
    radial-gradient(ellipse 60% 55% at 78% 96%, rgba(217,74,140,0.06), transparent 65%),
    linear-gradient(180deg, var(--tislm-bg-top) 0%, #eef3ea 100%);
  background-attachment: fixed;
}

/* Floating ambient blobs — decorative, brand-tinted, slowly drifting.
   Sit at z-index:0 behind the glassy main panel; visible at the screen
   edges where the panel doesn't cover them. */
.tislm-blob {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .65;
  z-index: 0;
  animation: tislm-drift 22s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .tislm-blob { animation: none !important; }
}
.tislm-blob--a { width: 520px; height: 520px; left: -120px; top: -180px;
  background: radial-gradient(circle, #a8c8af, transparent 70%); }
.tislm-blob--b { width: 420px; height: 420px; right: -100px; top: 30%;
  background: radial-gradient(circle, #cfe1d3, transparent 70%); animation-delay: -7s; }
.tislm-blob--c { width: 360px; height: 360px; left: 30%; bottom: -160px;
  background: radial-gradient(circle, rgba(74,144,217,0.30), transparent 70%); animation-delay: -14s; }
@keyframes tislm-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(30px, -20px) scale(1.06); }
  100% { transform: translate(-20px, 30px) scale(0.96); }
}

/* Main content area — full-width glassy panel that fills the entire
   space next to the sidebar. We constrain readable text width via
   inline content (chat bubbles, blockquotes) instead of squeezing
   the whole panel into a narrow centered column. */
[data-testid="stMainBlockContainer"] {
  position: relative;
  z-index: 1;
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  /* extra bottom padding reserves space so the fixed-position chat input
     never overlaps the last message in the conversation. */
  padding: 24px 48px 140px !important;
  min-height: calc(100vh - 140px);
  background: linear-gradient(165deg, rgba(255,255,255,0.82) 0%, rgba(251,252,250,0.76) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(217,223,211,0.7);
  border-radius: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
@media (max-width: 720px) {
  [data-testid="stMainBlockContainer"] {
    padding: 18px 16px 130px !important;
    min-height: calc(100vh - 110px);
  }
}

/* Chat input bottom strip — transparent so it reads as a continuation
   of the panel. The pill itself is constrained to the readable content
   width so it doesn't stretch awkwardly across ultra-wide viewports.
   On phones it can fill the screen. */
[data-testid="stBottomBlockContainer"],
[data-testid="stBottom"] {
  background: transparent !important;
}
[data-testid="stBottom"] > div {
  max-width: var(--tislm-content-max, 880px) !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  box-sizing: border-box;
}
@media (max-width: 720px) {
  [data-testid="stBottom"] > div { padding: 0 12px !important; }
}

/* Headings — pastoral serif for h1, sharp Inter for h2/h3 */
.stApp h1 {
  font-family: var(--tislm-font-serif) !important;
  font-weight: var(--tislm-fw-semibold) !important;
  font-size: 56px !important;
  letter-spacing: -0.03em !important;
  line-height: var(--tislm-lh-tight);
  color: var(--tislm-text);
  margin: 0 0 4px;
  text-align: center;
}
@media (max-width: 720px) {
  .stApp h1 { font-size: 38px !important; }
}
/* The page subtitle (caption immediately after h1) is centered too */
.stApp h1 + [data-testid="stCaptionContainer"] {
  text-align: center;
  margin: 0 auto 20px;
  font-size: var(--tislm-fs-sm);
  color: var(--tislm-muted);
}
.stApp h2, .stApp h3, .stApp h4 {
  font-family: var(--tislm-font-sans);
  letter-spacing: -0.01em;
  color: var(--tislm-text);
}

/* Body & captions */
.stApp, .stApp p, .stApp li {
  font-family: var(--tislm-font-sans);
  color: var(--tislm-text);
}
.stApp .stCaption, .stApp [data-testid="stCaptionContainer"] {
  color: var(--tislm-muted);
}

/* Primary buttons — adopt accent green */
.stApp button[kind="primary"], .stApp button[data-testid="baseButton-primary"] {
  background: var(--tislm-accent) !important;
  border-color: var(--tislm-accent) !important;
  color: #fff !important;
  border-radius: var(--tislm-radius-md) !important;
  font-weight: var(--tislm-fw-bold) !important;
}
.stApp button[kind="primary"]:hover, .stApp button[data-testid="baseButton-primary"]:hover {
  background: var(--tislm-accent-dark) !important;
  border-color: var(--tislm-accent-dark) !important;
}

/* Secondary buttons */
.stApp button[kind="secondary"], .stApp button[data-testid="baseButton-secondary"] {
  background: var(--tislm-surface) !important;
  border: 1px solid var(--tislm-line) !important;
  color: var(--tislm-text) !important;
  border-radius: var(--tislm-radius-md) !important;
}
.stApp button[kind="secondary"]:hover, .stApp button[data-testid="baseButton-secondary"]:hover {
  border-color: var(--tislm-accent-line) !important;
}

/* Inputs / textareas / selects */
.stApp input[type="text"],
.stApp input[type="password"],
.stApp input[type="number"],
.stApp textarea,
.stApp [data-baseweb="select"] > div {
  border-radius: var(--tislm-radius-md) !important;
  border-color: var(--tislm-line) !important;
}
.stApp input:focus,
.stApp textarea:focus {
  outline: 2px solid var(--tislm-focus-ring) !important;
  border-color: var(--tislm-accent-line) !important;
}

/* Sidebar — width is permanently locked at 288px. The previous
   drag-to-resize feature kept being triggered accidentally and
   shrinking the sidebar over time, which the user described as
   'the sidebar keeps getting smaller'. We keep the width pinned
   via CSS *and* re-enforce it from JS on every DOM mutation
   (see app.py components.html for the MutationObserver). */
section[data-testid="stSidebar"] {
  background: linear-gradient(165deg, rgba(255,255,255,0.92) 0%, rgba(248,250,246,0.88) 100%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-right: 1px solid rgba(217,223,211,0.7);
  box-shadow: 0 20px 50px -20px rgba(20,35,22,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
  top: 0 !important;
  height: 100vh !important;
  z-index: 100 !important;
  min-width: 288px !important;
  max-width: 288px !important;
  width: 288px !important;
  flex: 0 0 288px !important;
  flex-shrink: 0 !important;
  position: relative !important;
}
section[data-testid="stSidebar"] > div {
  min-width: 288px !important;
  max-width: 288px !important;
  width: 288px !important;
  height: 100vh !important;
}
/* Sidebar collapse — driven by our own .tislm-force-collapsed class
   added/removed via the floating re-open tab + the chevron click. We
   own the toggle because Streamlit's React state machine in this
   version doesn't respond to programmatic clicks on the collapse
   button. */
section[data-testid="stSidebar"].tislm-force-collapsed {
  transform: translateX(-100%) !important;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  border-right: 0 !important;
  box-shadow: none !important;
}
section[data-testid="stSidebar"]:not(.tislm-force-collapsed) {
  transform: translateX(0) !important;
  transition: transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}
/* Hide leftover Streamlit aria-expanded styling so it can't conflict. */
section[data-testid="stSidebar"][aria-expanded="false"] { }
section[data-testid="stSidebar"] [data-testid="stSidebarUserContent"],
section[data-testid="stSidebar"] [data-testid="stSidebarContent"] {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
section[data-testid="stSidebar"] [data-testid="stSidebarHeader"] {
  padding: 14px 12px 6px !important;
  min-height: 44px !important;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
section[data-testid="stSidebar"] [data-testid="stSidebarHeader"] [data-testid="stSidebarCollapseButton"] {
  position: relative !important;
  top: 0 !important;
  margin: 0 !important;
}
@media (max-width: 720px) {
  section[data-testid="stSidebar"],
  section[data-testid="stSidebar"] > div { min-width: 248px !important; width: 248px !important; }
}
section[data-testid="stSidebar"] [data-testid="stSidebarContent"] {
  padding-top: 18px;
  display: flex;
  flex-direction: column;
}
section[data-testid="stSidebar"] .stMarkdown,
section[data-testid="stSidebar"] label,
section[data-testid="stSidebar"] p {
  color: var(--tislm-text);
}
section[data-testid="stSidebar"] h1,
section[data-testid="stSidebar"] h2,
section[data-testid="stSidebar"] h3 {
  font-family: var(--tislm-font-sans) !important;
  font-size: 11px !important;
  font-weight: var(--tislm-fw-semibold) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tislm-muted) !important;
  margin: 12px 0 6px;
}

/* Section title (e.g. CONVERSATIONS) inside the sidebar */
section[data-testid="stSidebar"] .tislm-side-section-title {
  font-size: 11px;
  font-weight: var(--tislm-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tislm-muted);
  margin: 14px 0 8px;
}

/* API status floater — sits at the very top of the sidebar, above the
   multi-page nav. JS in app.py moves it into place after first paint. */
.tislm-api-status-floater {
  padding: 10px 14px 8px;
  border-bottom: 1px solid rgba(217,223,211,0.5);
  margin-bottom: 6px;
}
.tislm-api-status-floater .tislm-status-dot {
  font-size: 12px;
  font-weight: var(--tislm-fw-semibold);
  color: var(--tislm-text);
}

/* The "+ New conversation" CTA — white pill with accent border, big.
   Targets the first sidebar button (Streamlit guarantees insertion order
   matches our Python code, which renders New conversation right after the
   API status floater). Stands out against the cream-tinted sidebar. */
section[data-testid="stSidebar"] [data-testid="stSidebarContent"] [data-testid="stButton"]:nth-of-type(1) > button {
  background: #ffffff !important;
  border: 1.5px solid var(--tislm-accent) !important;
  color: var(--tislm-accent-dark) !important;
  font-weight: var(--tislm-fw-bold) !important;
  border-radius: var(--tislm-radius-pill) !important;
  min-height: 48px !important;
  font-size: 14px !important;
  letter-spacing: -0.01em;
  box-shadow: 0 8px 22px -8px rgba(45,94,58,0.18);
  transition: transform var(--tislm-dur-state) var(--tislm-ease),
              background var(--tislm-dur-hover) var(--tislm-ease),
              box-shadow var(--tislm-dur-state) var(--tislm-ease);
}
section[data-testid="stSidebar"] [data-testid="stSidebarContent"] [data-testid="stButton"]:nth-of-type(1) > button:hover {
  background: var(--tislm-accent-soft) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -10px rgba(45,94,58,0.30);
}

/* Sidebar conversation buttons (secondary) — pill cards with active state.
   The "current" conversation isn't a button (it's a markdown line); we
   target the regular sidebar buttons below the Conversations heading. */
section[data-testid="stSidebar"] button[kind="secondary"] {
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  text-align: left !important;
  font-weight: var(--tislm-fw-medium) !important;
  color: var(--tislm-text) !important;
  min-height: 40px !important;
  margin: 2px 0;
  transition: background var(--tislm-dur-hover) var(--tislm-ease),
              border-color var(--tislm-dur-hover) var(--tislm-ease);
}
section[data-testid="stSidebar"] button[kind="secondary"] > div {
  text-align: left !important;
  justify-content: flex-start !important;
}
section[data-testid="stSidebar"] button[kind="secondary"]:hover {
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(217,223,211,0.7) !important;
}

/* Sidebar caption rows (msg count + date below each conversation) — softer */
section[data-testid="stSidebar"] [data-testid="stCaptionContainer"] {
  font-size: 11px !important;
  color: var(--tislm-muted) !important;
  margin: 0 0 10px 14px;
  letter-spacing: 0;
}

/* RMNET / Remission Ministries footer — sticky-pinned to the bottom of
   the sidebar viewport so it stays visible regardless of how long the
   conversation list grows. */
.tislm-brand-footer {
  position: sticky;
  bottom: 0;
  margin: 24px -16px 0;
  padding: 14px 16px 14px;
  background: linear-gradient(180deg, rgba(248,250,246,0.6) 0%, rgba(248,250,246,0.95) 35%, rgba(248,250,246,1) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(217,223,211,0.6);
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5;
}

/* Per-conversation row in the sidebar history. Tightens spacing so the
   ⋯ menu sits cleanly next to the conv title. The marker div is a
   zero-height anchor used by the right-click JS bridge. */
.tislm-conv-row {
  height: 0;
  overflow: hidden;
}
/* Conv-row ⋯ trigger — small icon button. Doesn't apply to the
   sidebar's Edit-tag popover (which has the "Edit tag" label). */
section[data-testid="stSidebar"] [data-testid="stHorizontalBlock"] [data-testid="stPopover"] > div > button {
  min-height: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: var(--tislm-muted) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
}
section[data-testid="stSidebar"] [data-testid="stHorizontalBlock"] [data-testid="stPopover"] > div > button:hover {
  background: rgba(232,240,234,0.6) !important;
  border-color: rgba(217,223,211,0.6) !important;
  color: var(--tislm-text) !important;
}
/* Tighten the conv-row column gap so the title + ⋯ feel like one row */
section[data-testid="stSidebar"] [data-testid="stHorizontalBlock"] {
  gap: 4px !important;
}
section[data-testid="stSidebar"] [data-testid="column"]:last-child {
  flex: 0 0 36px !important;
  min-width: 36px !important;
}
.tislm-brand-mark {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--tislm-accent) 0%, #3d7649 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--tislm-font-sans);
  font-weight: var(--tislm-fw-bold);
  font-size: 12px;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 16px -4px rgba(45,94,58,0.45);
  flex-shrink: 0;
}
.tislm-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.tislm-brand-name {
  font-size: 13px;
  font-weight: var(--tislm-fw-bold);
  color: var(--tislm-text);
  letter-spacing: -0.01em;
}
.tislm-brand-tagline {
  font-size: 11px;
  font-weight: var(--tislm-fw-medium);
  color: var(--tislm-muted);
}

/* Metric cards (used heavily in admin)
   Allow value/label to wrap and shrink so 6-column grids never truncate. */
.stApp [data-testid="stMetric"] {
  background: linear-gradient(165deg, rgba(255,255,255,0.95), rgba(251,252,250,0.9));
  border: 1px solid var(--tislm-line);
  border-radius: var(--tislm-radius-xl);
  padding: 14px 18px;
  box-shadow: 0 8px 22px -10px rgba(20,35,22,0.06);
  transition: transform var(--tislm-dur-state) var(--tislm-ease),
              box-shadow var(--tislm-dur-state) var(--tislm-ease);
  min-width: 0;             /* let flex/grid children shrink */
  overflow: visible;        /* don't clip */
}
.stApp [data-testid="stMetric"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -12px rgba(20,35,22,0.12);
}
.stApp [data-testid="stMetric"] > div { min-width: 0; }
.stApp [data-testid="stMetricLabel"] {
  color: var(--tislm-muted);
  font-size: clamp(10px, 0.9vw, 11px) !important;
  font-weight: var(--tislm-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: normal !important;
  overflow-wrap: anywhere;
  text-overflow: clip !important;
  line-height: 1.25;
}
.stApp [data-testid="stMetricValue"] {
  font-family: var(--tislm-font-serif);
  font-weight: var(--tislm-fw-semibold);
  letter-spacing: -0.02em;
  font-size: clamp(18px, 2.2vw, 28px) !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  line-height: 1.1;
}
.stApp [data-testid="stMetricValue"] > div { white-space: normal !important; }

/* Expander — glassy review-card aesthetic, matches the Flask IG reviewer.
   Soft white-92 surface, line border, gentle shadow, backdrop-blur, and
   accent-line on hover so panels feel like one product across surfaces. */
.stApp [data-testid="stExpander"] {
  border: 1px solid var(--tislm-line);
  border-radius: var(--tislm-radius-lg);
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--tislm-shadow-card);
  margin: 10px 0;
  overflow: hidden;
  transition: border-color var(--tislm-dur-hover) var(--tislm-ease),
              box-shadow var(--tislm-dur-hover) var(--tislm-ease);
}
.stApp [data-testid="stExpander"]:hover {
  border-color: var(--tislm-accent-line);
  box-shadow: var(--tislm-shadow-pop);
}
.stApp .streamlit-expanderHeader,
.stApp [data-testid="stExpander"] summary,
.stApp [data-testid="stExpander"] details > summary {
  font-size: var(--tislm-fs-sm) !important;
  font-weight: var(--tislm-fw-semibold) !important;
  color: var(--tislm-text) !important;
  padding: 12px 16px !important;
  letter-spacing: -0.005em;
}
.stApp [data-testid="stExpander"] details[open] > summary {
  border-bottom: 1px solid rgba(217,223,211,0.55);
}
.stApp [data-testid="stExpander"] details > div[role="region"],
.stApp [data-testid="stExpander"] [data-testid="stExpanderDetails"] {
  padding: 8px 16px 14px !important;
}

/* ============================================================================
   Streamlit tabs — IG reviewer pill-row aesthetic.
   Replace the underline-on-active pattern with rounded pill toggles that
   match templates/review_list.html "Pending only / All conversations".
   Active pill → forest fill + white text. Inactive → white + line border,
   hover border accent-line.
   ============================================================================ */

.stApp [data-testid="stTabs"] [data-baseweb="tab-list"] {
  gap: 8px !important;
  border-bottom: 0 !important;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.stApp [data-testid="stTabs"] [data-baseweb="tab"] {
  background: rgba(255,255,255,0.92) !important;
  border: 1px solid var(--tislm-line) !important;
  border-radius: var(--tislm-radius-md) !important;
  padding: 8px 14px !important;
  margin: 0 !important;
  min-height: 38px !important;
  font-size: var(--tislm-fs-sm) !important;
  font-weight: var(--tislm-fw-semibold) !important;
  color: var(--tislm-text) !important;
  transition: border-color var(--tislm-dur-hover) var(--tislm-ease),
              background var(--tislm-dur-hover) var(--tislm-ease),
              color var(--tislm-dur-hover) var(--tislm-ease);
}
.stApp [data-testid="stTabs"] [data-baseweb="tab"]:hover {
  border-color: var(--tislm-accent-line) !important;
}
.stApp [data-testid="stTabs"] [data-baseweb="tab"][aria-selected="true"] {
  background: var(--tislm-accent) !important;
  border-color: var(--tislm-accent) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px -8px rgba(45,94,58,0.45);
}
.stApp [data-testid="stTabs"] [data-baseweb="tab-highlight"],
.stApp [data-testid="stTabs"] [data-baseweb="tab-border"] {
  display: none !important;
}
.stApp [data-testid="stTabs"] [data-baseweb="tab-panel"] { padding-top: 4px; }

/* ============================================================================
   Horizontal radio (e.g. the chat View switcher: Chat | Advanced).
   Render each option as a pill toggle, mirroring the tab styling above so
   the chat surface feels native to the IG reviewer.
   ============================================================================ */

.stApp [data-testid="stRadio"][role="radiogroup"][aria-orientation="horizontal"] [role="radiogroup"],
.stApp [data-testid="stRadio"] [role="radiogroup"][aria-orientation="horizontal"] {
  gap: 8px !important;
}
.stApp [data-testid="stRadio"] [role="radiogroup"][aria-orientation="horizontal"] label,
.stApp [data-testid="stRadio"] [role="radiogroup"][aria-orientation="horizontal"] [data-baseweb="radio"] {
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--tislm-line);
  border-radius: var(--tislm-radius-md);
  padding: 6px 14px !important;
  margin: 0 !important;
  min-height: 36px;
  cursor: pointer;
  transition: border-color var(--tislm-dur-hover) var(--tislm-ease),
              background var(--tislm-dur-hover) var(--tislm-ease);
}
.stApp [data-testid="stRadio"] [role="radiogroup"][aria-orientation="horizontal"] label:hover {
  border-color: var(--tislm-accent-line);
}
.stApp [data-testid="stRadio"] [role="radiogroup"][aria-orientation="horizontal"] label:has(input:checked) {
  background: var(--tislm-accent) !important;
  border-color: var(--tislm-accent) !important;
  box-shadow: 0 6px 16px -8px rgba(45,94,58,0.45);
}
.stApp [data-testid="stRadio"] [role="radiogroup"][aria-orientation="horizontal"] label:has(input:checked) > div:last-child,
.stApp [data-testid="stRadio"] [role="radiogroup"][aria-orientation="horizontal"] label:has(input:checked) p {
  color: #fff !important;
  font-weight: var(--tislm-fw-semibold);
}
/* Hide the actual radio dot in horizontal mode — the pill itself is the
   indicator. Vertical radios keep their dots (rule above this block). */
.stApp [data-testid="stRadio"] [role="radiogroup"][aria-orientation="horizontal"] [data-baseweb="radio"] > div:first-child {
  display: none !important;
}

/* ============================================================================
   Page header card — mirrors templates/review_list.html and review_thread.html
   header pattern (review-card with title + caption + right-aligned actions).
   Used by app.py (chat) and pages/1_Org_Admin.py to introduce each surface.
   ============================================================================ */

.tislm-page-header {
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--tislm-line);
  border-radius: var(--tislm-radius-lg);
  box-shadow: var(--tislm-shadow-card);
  padding: 18px 22px;
  margin: 0 0 18px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.tislm-page-header__text { min-width: 0; flex: 1 1 auto; }
.tislm-page-header__eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: var(--tislm-fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--tislm-accent-dark);
  margin: 0 0 4px;
}
.tislm-page-header__title,
.stApp .tislm-page-header h1.tislm-page-header__title,
.stApp h1.tislm-page-header__title {
  font-family: var(--tislm-font-serif) !important;
  font-weight: var(--tislm-fw-semibold) !important;
  font-size: clamp(22px, 2.4vw, 30px) !important;
  letter-spacing: -0.02em !important;
  color: var(--tislm-text) !important;
  margin: 0 !important;
  line-height: 1.15 !important;
  text-align: left !important;
}
.tislm-page-header__sub {
  color: var(--tislm-muted);
  font-size: var(--tislm-fs-sm);
  margin: 4px 0 0;
  max-width: 64ch;
  line-height: 1.45;
}
.tislm-page-header__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* When the page header sits inside the centered admin layout, the
   serif title looks better slightly larger. */
.tislm-page-header--lg .tislm-page-header__title,
.stApp .tislm-page-header--lg h1.tislm-page-header__title {
  font-size: clamp(26px, 2.8vw, 36px) !important;
}

/* Inline pill chip variant matching templates/_base.html .review-pill */
.tislm-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--tislm-radius-pill);
  font-size: 12px;
  font-weight: var(--tislm-fw-semibold);
  border: 1px solid transparent;
}
.tislm-pill--ok    { background: rgba(34,197,94,0.10); color: var(--tislm-verified); border-color: rgba(34,197,94,0.20); }
.tislm-pill--warn  { background: rgba(234,179,8,0.10); color: #a16207; border-color: rgba(234,179,8,0.20); }
.tislm-pill--soft  { background: var(--tislm-accent-soft); color: var(--tislm-accent-dark); border-color: var(--tislm-accent-line); }
.tislm-pill--quiet { background: rgba(255,255,255,0.85); color: var(--tislm-muted); border-color: var(--tislm-line); }

/* st.divider — soften so it doesn't fight the card aesthetic. */
.stApp [data-testid="stDivider"] hr,
.stApp hr {
  border-color: rgba(217,223,211,0.6) !important;
  margin: 18px 0 !important;
}

/* st.subheader / h3 — sleek section labels (matches IG reviewer h3 style). */
.stApp h3 {
  font-family: var(--tislm-font-sans) !important;
  font-size: 17px !important;
  font-weight: var(--tislm-fw-semibold) !important;
  letter-spacing: -0.01em;
  margin: 22px 0 10px !important;
  color: var(--tislm-text);
}

/* st.info / st.success / st.warning / st.error — softer, more on-brand */
.stApp [data-testid="stAlert"] {
  border-radius: var(--tislm-radius-lg) !important;
  border: 1px solid var(--tislm-line) !important;
  background: rgba(255,255,255,0.92) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: var(--tislm-shadow-card);
  padding: 12px 14px !important;
}
.stApp [data-testid="stAlert"][data-baseweb="notification"][kind="info"],
.stApp [data-testid="stAlertContentInfo"] {
  border-left: 3px solid var(--tislm-accent) !important;
}
.stApp [data-testid="stAlertContentSuccess"] {
  border-left: 3px solid var(--tislm-verified) !important;
}
.stApp [data-testid="stAlertContentWarning"] {
  border-left: 3px solid var(--tislm-caution) !important;
}
.stApp [data-testid="stAlertContentError"] {
  border-left: 3px solid var(--tislm-crisis) !important;
}

/* Chat messages — assistant gets the glassy white bubble; user gets the
   forest-green gradient bubble. Both rise in on first paint. */
.stApp [data-testid="stChatMessage"] {
  background: linear-gradient(165deg, rgba(255,255,255,0.95) 0%, rgba(251,252,250,0.92) 100%);
  border: 1px solid rgba(217,223,211,0.7);
  border-radius: var(--tislm-radius-2xl);
  box-shadow: 0 12px 30px -12px rgba(20,35,22,0.10);
  padding: 14px 18px;
  animation: tislm-rise 380ms cubic-bezier(0.2,0.8,0.2,1) both;
}
.stApp [data-testid="stChatMessage"]:has([data-testid="chatAvatarIcon-user"]) {
  background: linear-gradient(135deg, var(--tislm-accent) 0%, #3d7649 100%);
  border-color: var(--tislm-accent-dark);
  color: #fff;
  box-shadow: 0 12px 28px -10px rgba(45,94,58,0.45);
}
.stApp [data-testid="stChatMessage"]:has([data-testid="chatAvatarIcon-user"]) p,
.stApp [data-testid="stChatMessage"]:has([data-testid="chatAvatarIcon-user"]) li,
.stApp [data-testid="stChatMessage"]:has([data-testid="chatAvatarIcon-user"]) strong {
  color: #fff;
}
@keyframes tislm-rise {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Apply rise animation to ALL chat bubbles (user + assistant). */
.stApp [data-testid="stChatMessage"]:has([data-testid^="chatAvatarIcon-"]) {
  animation: tislm-rise 380ms cubic-bezier(0.2,0.8,0.2,1) both;
}
@media (prefers-reduced-motion: reduce) {
  .stApp [data-testid="stChatMessage"] { animation: none !important; }
}

/* Pastoral blockquote treatment in chat (Jameel-blue rule) */
.stApp [data-testid="stChatMessage"] blockquote {
  border-left: 3px solid var(--tislm-jameel);
  padding: .5em 1em;
  margin: .6em 0;
  font-family: var(--tislm-font-serif);
  font-size: 17px;
  font-style: italic;
  color: var(--tislm-text);
  background: rgba(74,144,217,0.04);
  border-radius: 0 12px 12px 0;
}

/* Chat input — large rounded composer with a round green submit pill.
   Fixed-position pin to the viewport bottom so it stays put regardless of
   the surrounding scroll container's behavior. (Sticky was unreliable —
   when the parent wasn't a scroll container the input rendered inline in
   the message stream.) The main content area reserves bottom padding to
   keep the last message visible above this strip.

   Gradient is a long, soft fade so messages scroll cleanly under the strip
   without a visible color band — the previous 35% midpoint produced a
   sharp transition the user reported as "graphics out of place". */
[data-testid="stBottom"] {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 28px 0 16px !important;
  background: linear-gradient(180deg,
      rgba(248,250,246,0)    0%,
      rgba(248,250,246,0.30) 30%,
      rgba(248,250,246,0.70) 60%,
      rgba(248,250,246,0.95) 85%,
      rgba(248,250,246,1)   100%) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  z-index: 50;
  transition: left 240ms cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

/* Sidebar-aware: when the sidebar is OPEN (no .tislm-force-collapsed class)
   the chat input slides right by the sidebar width so it sits over the
   main column, not under the sidebar. Uses :has() — supported in Chrome 105+,
   Firefox 121+, Safari 15.4+. On older browsers the input keeps left:0
   (visually overlaps the sidebar but stays usable). */
.stApp:has(section[data-testid="stSidebar"]:not(.tislm-force-collapsed)) [data-testid="stBottom"] {
  left: 288px !important;
}
@media (max-width: 720px) {
  /* On phones the sidebar acts as an overlay, so no shift needed —
     the sidebar simply covers the input when open. */
  .stApp:has(section[data-testid="stSidebar"]:not(.tislm-force-collapsed)) [data-testid="stBottom"] {
    left: 0 !important;
  }
}
.stApp [data-testid="stChatInput"] {
  border-radius: 999px !important;
  border: 1px solid var(--tislm-line) !important;
  background: linear-gradient(165deg, rgba(255,255,255,0.95) 0%, rgba(248,250,246,0.92) 100%) !important;
  box-shadow: 0 16px 40px -16px rgba(20,35,22,0.10);
  padding: 6px 10px 6px 22px !important;
  min-height: 64px !important;
  max-height: 64px !important;
  outline: 0 !important;
  /* Constrain the pill itself so the submit button never clips off the
     right edge — applies regardless of intermediate Streamlit wrappers
     (the [data-testid="stBottom"] > div selector only catches direct
     children). 32px gutters either side prevent the pill from kissing
     the viewport edge. */
  max-width: var(--tislm-content-max, 880px) !important;
  width: calc(100% - 64px) !important;
  margin: 0 auto !important;
}
@media (max-width: 720px) {
  .stApp [data-testid="stChatInput"] {
    width: calc(100% - 24px) !important;
  }
}
.stApp [data-testid="stChatInput"]:focus-within {
  border-color: var(--tislm-accent-line) !important;
  outline: 2px solid var(--tislm-focus-ring) !important;
  outline-offset: 0 !important;
  box-shadow: 0 20px 48px -16px rgba(45,94,58,0.18) !important;
}
.stApp [data-testid="stChatInput"] textarea {
  font-size: 15px !important;
  background: transparent !important;
  border: 0 !important;
  padding-top: 8px !important;
  outline: 0 !important;
  box-shadow: none !important;
  caret-color: var(--tislm-accent);
}
.stApp [data-testid="stChatInput"] textarea:focus {
  outline: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
@media (max-width: 480px) {
  .stApp [data-testid="stChatInput"] textarea::placeholder { content: "Ask…"; }
  .stApp [data-testid="stChatInput"] textarea { font-size: 14px !important; }
}
.stApp [data-testid="stChatInputSubmitButton"],
.stApp [data-testid="stChatInput"] button {
  background: var(--tislm-accent) !important;
  border-radius: 999px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  padding: 0 !important;
  color: #fff !important;
  box-shadow: 0 8px 18px -6px rgba(45,94,58,0.45);
  transition: transform var(--tislm-dur-state) var(--tislm-ease),
              background var(--tislm-dur-hover) var(--tislm-ease);
}
.stApp [data-testid="stChatInputSubmitButton"]:hover,
.stApp [data-testid="stChatInput"] button:hover {
  background: var(--tislm-accent-dark) !important;
  transform: translateY(-1px);
}
.stApp [data-testid="stChatInputSubmitButton"] svg,
.stApp [data-testid="stChatInput"] button svg {
  fill: #fff !important;
  color: #fff !important;
}

/* Radio buttons — Streamlit's actual DOM is:
     <label data-baseweb="radio">
       <div>            ← outer ring (border)
         <div></div>    ← inner dot
       </div>
       <input type="radio" checked>
       <div>...label text...</div>
     </label>
   Color the ring + dot accent green when the input is checked. */
.stApp [data-baseweb="radio"]:has(input:checked) > div:first-child {
  border-color: var(--tislm-accent) !important;
  background-color: rgba(45,94,58,0.08) !important;
}
.stApp [data-baseweb="radio"]:has(input:checked) > div:first-child > div {
  background-color: var(--tislm-accent) !important;
}
.stApp [data-testid="stRadio"] [role="radiogroup"] {
  gap: 8px;
}

/* Status dots used by markdown like ":green[● Connected]" */
.tislm-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--tislm-fs-sm);
}
.tislm-status-dot::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--tislm-verified);
  display: inline-block;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}
.tislm-status-dot--off::before { background: var(--tislm-crisis); box-shadow: 0 0 0 3px rgba(239,68,68,0.18); }

/* Toast / info / alert tints — keep Streamlit but soften the corners */
.stApp [data-testid="stAlert"] {
  border-radius: var(--tislm-radius-lg);
  border: 1px solid var(--tislm-line);
}

/* Toast notifications — Streamlit's default places them in the top-right
   where our version bubble lives, so they get hidden. Move them to a
   centered top-of-viewport stack so the user actually sees errors. */
[data-testid="stToastContainer"],
.stToastContainer,
[data-testid="stNotificationContainer"] {
  top: 16px !important;
  right: auto !important;
  left: 50% !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  z-index: 100000 !important;
  max-width: min(560px, calc(100vw - 32px));
}
[data-testid="stToastContainer"] [data-testid="stToast"],
[data-testid="stNotification"] {
  max-width: 560px !important;
  margin: 0 auto 8px !important;
  border-radius: var(--tislm-radius-lg) !important;
  box-shadow: var(--tislm-shadow-pop) !important;
  border: 1px solid var(--tislm-line) !important;
  background: var(--tislm-surface) !important;
}

/* Caption */
.stApp [data-testid="stCaptionContainer"] {
  font-size: var(--tislm-fs-sm);
  color: var(--tislm-muted);
}

/* Sidebar collapse chevron — always visible at low opacity, full on
   hover. Streamlit applies visibility:hidden by default. */
[data-testid="stSidebarCollapseButton"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 0.55 !important;
  transition: opacity var(--tislm-dur-hover) var(--tislm-ease) !important;
  z-index: 9999 !important;
}
[data-testid="stSidebarCollapseButton"] * { visibility: visible !important; }
[data-testid="stSidebarCollapseButton"]:hover { opacity: 1 !important; }

/* Floating "re-open sidebar" tab — pinned to the left edge of the
   viewport, only visible when the sidebar is collapsed. Streamlit's
   own collapsed-control was removed in recent versions, so without
   this users have no way to bring the sidebar back. */
.tislm-reopen-tab {
  position: fixed;
  left: 0;
  top: 14px;
  width: 32px;
  height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--tislm-surface);
  border: 1px solid var(--tislm-line);
  border-left: 0;
  border-radius: 0 12px 12px 0;
  color: var(--tislm-muted);
  cursor: pointer;
  z-index: 10000;
  box-shadow: var(--tislm-shadow-card);
  transition: background var(--tislm-dur-hover) var(--tislm-ease),
              color var(--tislm-dur-hover) var(--tislm-ease);
  font-size: 18px;
  user-select: none;
}
.tislm-reopen-tab:hover {
  background: var(--tislm-accent-soft);
  color: var(--tislm-accent-dark);
}
/* Show the re-open tab whenever the sidebar is force-collapsed. */
body:has(section[data-testid="stSidebar"].tislm-force-collapsed) .tislm-reopen-tab {
  display: flex;
}
/* Re-open chevron when sidebar is collapsed — make it discoverable */
[data-testid="collapsedControl"] {
  background: rgba(255,255,255,0.85) !important;
  border: 1px solid var(--tislm-line) !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: var(--tislm-shadow-card);
}
/* (collapse width is handled by Streamlit's own transitions now) */

/* Version watermark — the wrapper is a no-layout class hook so the
   JS in app.py can dedupe it. The inner div from
   utils/version.py:get_version_badge_html() carries its own
   position:fixed + author-tinted styling; appending the wrapper to
   <body> is enough to escape any backdrop-filter ancestor that would
   otherwise trap fixed positioning inside the main panel. */
.tislm-version-bubble { display: contents; }

/* Streamlit expander summary — let it wrap, but keep the count suffix
   attached. We use NBSPs server-side; this CSS just stops Streamlit's
   default `text-overflow: ellipsis` from cutting at character boundaries. */
section[data-testid="stSidebar"] [data-testid="stExpander"] summary {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  font-size: 13px;
  font-weight: var(--tislm-fw-medium);
}

/* Unify source-tag chips (Jameel-blue book chips elsewhere; the
   scripture variant gets the forest-green accent). The Advanced trace
   uses the same .tislm-source-tag class — no extra rules needed. */

/* Subheaders that follow h1 should sit closer (the page subtitle pattern) */
.stApp h1 + p, .stApp h1 + [data-testid="stCaptionContainer"] {
  margin-top: -2px;
  color: var(--tislm-muted);
  font-size: var(--tislm-fs-sm);
}

/* Inputs / textareas / selects — softer focus halo */
.stApp input[type="text"],
.stApp input[type="password"],
.stApp input[type="number"],
.stApp textarea {
  background: var(--tislm-surface) !important;
}

/* Slider — accent green thumb. Keep BaseWeb's positioning intact and
   only color the thumb so drag handlers and hit area aren't disturbed. */
.stApp [data-testid="stSlider"] [role="slider"] {
  background: var(--tislm-accent) !important;
  pointer-events: auto !important;
  touch-action: pan-x !important;
  cursor: grab;
  /* Ensure hit area meets the design system's 44px touch minimum even
     when the visible thumb is smaller. */
  min-width: var(--tislm-touch-min);
  min-height: var(--tislm-touch-min);
}
.stApp [data-testid="stSlider"] [role="slider"]:active { cursor: grabbing; }

/* Checkbox / toggle — accent green */
.stApp [data-testid="stCheckbox"] [role="checkbox"][aria-checked="true"],
.stApp [data-baseweb="checkbox"] [data-checked="true"] {
  background-color: var(--tislm-accent) !important;
  border-color: var(--tislm-accent) !important;
}

/* Multiselect chips */
.stApp [data-testid="stMultiSelect"] [data-baseweb="tag"] {
  background: var(--tislm-accent-soft) !important;
  border-color: var(--tislm-accent-line) !important;
  color: var(--tislm-accent-dark) !important;
  border-radius: var(--tislm-radius-pill) !important;
}

/* ============================================================================
   Floating overlays (selectbox dropdown, tooltips) — these float over the
   page chrome and need both an opaque background and a high z-index so they
   visually mask everything below.
   ============================================================================ */

/* Selectbox / multiselect dropdown menu */
[data-baseweb="popover"],
[data-baseweb="select"] [data-baseweb="popover"],
[data-baseweb="menu"],
ul[role="listbox"] {
  z-index: 9999 !important;
  background: var(--tislm-surface) !important;
  border: 1px solid var(--tislm-line) !important;
  border-radius: var(--tislm-radius-md) !important;
  box-shadow: var(--tislm-shadow-pop) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
[data-baseweb="menu"] li[role="option"],
ul[role="listbox"] li {
  background: var(--tislm-surface);
  color: var(--tislm-text);
}
[data-baseweb="menu"] li[role="option"]:hover,
ul[role="listbox"] li:hover {
  background: var(--tislm-accent-soft);
}

/* Tooltips (Streamlit help icons + BaseWeb popover tooltips) */
[data-baseweb="tooltip"],
[role="tooltip"] {
  z-index: 99999 !important;
  background: var(--tislm-text) !important;
  color: #fff !important;
  border-radius: var(--tislm-radius-sm) !important;
  padding: 8px 12px !important;
  font-size: var(--tislm-fs-xs) !important;
  font-family: var(--tislm-font-sans);
  line-height: 1.4;
  max-width: 280px;
  box-shadow: var(--tislm-shadow-pop);
  pointer-events: none;
  /* Push tooltip below its trigger by 4px so it never sits flush against
     the row above (BaseWeb's default offset clips against tight grids). */
  transform: translateY(4px);
}
[data-baseweb="tooltip"] *,
[role="tooltip"] * { color: #fff !important; }

/* ============================================================================
   BiDi safety — Latin labels (Sources:, Trace:, etc.) inside an RTL
   container would otherwise have their trailing punctuation flipped to
   the wrong side. unicode-bidi:plaintext makes each <strong>/<span>
   element use its own first-strong-character direction.
   ============================================================================ */

[dir="rtl"] strong,
[dir="rtl"] code,
[dir="rtl"] .tislm-ltr-label { unicode-bidi: plaintext; }
.tislm-ltr-label { direction: ltr; unicode-bidi: isolate; }

/* ============================================================================
   Portable chat bubble — same look as Streamlit's chat messages
   (above) but applicable outside .stApp. The Flask reviewer renders
   these directly so /admin chat and /review thread feel like the same
   surface.
   ============================================================================ */

.tislm-bubble {
  background: linear-gradient(165deg, rgba(255,255,255,0.95) 0%, rgba(251,252,250,0.92) 100%);
  border: 1px solid rgba(217,223,211,0.7);
  border-radius: var(--tislm-radius-2xl);
  box-shadow: 0 8px 22px -10px rgba(20,35,22,0.10);
  padding: 14px 18px;
  /* Bubbles fill up to 92% of the chat column so the conversation
     uses the available reading width on wide screens (the old 86%
     left awkward gutters either side). Block-level so margin auto
     can align it within the .flex-1 wrapper next to the avatar. */
  max-width: 92%;
  display: block;
  animation: tislm-rise 380ms cubic-bezier(0.2,0.8,0.2,1) both;
}
.tislm-bubble--user {
  background: linear-gradient(135deg, var(--tislm-accent) 0%, #3d7649 100%);
  border-color: var(--tislm-accent-dark);
  color: #fff;
  /* Lighter shadow than before — the heavy 28px-blur green glow was the
     loudest thing on the page and made every user message feel "shouty". */
  box-shadow: 0 8px 20px -10px rgba(45,94,58,0.32);
  /* Push the bubble to the right of its .flex-1 wrapper so it sits
     adjacent to the right-side avatar (in row-reverse layout). */
  margin-left: auto;
  margin-right: 0;
}
.tislm-bubble--user p,
.tislm-bubble--user li,
.tislm-bubble--user strong { color: #fff; }
.tislm-bubble--assistant {
  /* Push to the left of the wrapper, adjacent to the left-side avatar. */
  margin-left: 0;
  margin-right: auto;
}
.tislm-bubble blockquote {
  border-left: 3px solid var(--tislm-jameel);
  padding: .5em 1em;
  margin: .6em 0;
  font-family: var(--tislm-font-serif);
  font-size: 17px;
  font-style: italic;
  color: var(--tislm-text);
  background: rgba(74,144,217,0.04);
  border-radius: 0 12px 12px 0;
}
[dir="rtl"] .tislm-bubble blockquote,
.tislm-bubble blockquote.rtl-content {
  border-left: 0;
  border-right: 3px solid var(--tislm-jameel);
  border-radius: 12px 0 0 12px;
}
@media (prefers-reduced-motion: reduce) {
  .tislm-bubble { animation: none !important; }
}

/* Tiny avatar dot to anchor the role visually without writing the
   word "User"/"Assistant" — same shape as Streamlit's chatAvatarIcon. */
.tislm-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: var(--tislm-fw-semibold);
}
.tislm-avatar--user      { background: linear-gradient(135deg, var(--tislm-jameel) 0%, #6aa9e6 100%); color: #fff; }
.tislm-avatar--assistant { background: var(--tislm-accent-soft); color: var(--tislm-accent-dark); }

/* Row layout that pairs an avatar with a bubble; chat-style alignment.
   row-reverse on user rows puts the avatar on the right; the bubble
   inside the .flex-1 wrapper uses margin-left:auto to right-align next
   to it. (Don't reset margins here — that was the old bug that left
   user bubbles stranded on the left side of their wrapper.) */
.tislm-msg-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.tislm-msg-row--user {
  flex-direction: row-reverse;
}

/* ============================================================================
   Chat surface — slim sticky header + centered reading column.
   Used by /chat (templates/chat.html). The column matches the composer
   max-width (max-w-3xl ≈ 768px) so the page reads as a focused chat
   thread, not as a wide document with empty side gutters. The header
   is a slim glassy bar that sticks to the very top of the viewport;
   visual weight is dialed way back from the old review-card style so
   it doesn't feel like a floating tooltip.
   ============================================================================ */

/* The chat column is intentionally wider than the old 760px reading
   width — on a wide viewport (laptop / desktop) the sidebar already
   shifts content to the right, so a narrow centered column looks
   stranded between two huge empty gutters. 980px gives the
   conversation real estate without letting bubbles stretch into
   hard-to-scan paragraphs (each bubble still caps at .tislm-bubble's
   max-width). The composer below mirrors this width via the
   .tislm-chat-composer-col wrapper. */
.tislm-chat-col {
  max-width: 980px;
  margin-inline: auto;
}
.tislm-chat-composer-col {
  max-width: 980px;
  margin-inline: auto;
}

.tislm-chat-header {
  position: sticky;
  top: 0;
  z-index: 30;
  /* Negative top margin bleeds into the .tislm-shell__main-inner's top
     padding so the bar sits flush against the viewport edge when
     stuck. Side margins stay 0 so the header always matches the
     reading-column width — no horizontal overflow on any viewport. */
  margin: -24px 0 14px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid rgba(217,223,211,0.65);
  border-radius: 0 0 14px 14px;
  box-shadow: 0 6px 16px -14px rgba(20,35,22,0.22);
}
@media (max-width: 720px) {
  .tislm-chat-header { margin: -16px 0 12px; padding: 8px 12px; }
}

.tislm-chat-header__row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.tislm-chat-header__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.tislm-chat-header__tag {
  flex-shrink: 0;
  font-size: 10.5px;
  padding: 2px 8px;
}
.tislm-chat-header__h1 {
  font-size: 16px;
  font-weight: var(--tislm-fw-semibold);
  letter-spacing: -0.01em;
  color: var(--tislm-text);
  line-height: 1.25;
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tislm-chat-header__cid {
  flex-shrink: 0;
  font-size: 10.5px;
  color: var(--tislm-muted);
  background: var(--tislm-surface-code);
  border: 1px solid var(--tislm-line);
  border-radius: 6px;
  padding: 1px 6px;
}
@media (max-width: 540px) {
  .tislm-chat-header__cid { display: none; }
}

.tislm-chat-header__actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tislm-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: var(--tislm-fw-semibold);
  border: 1px solid var(--tislm-line);
  background: rgba(255,255,255,0.92);
  color: var(--tislm-text);
  cursor: pointer;
  transition: background var(--tislm-dur-hover, 140ms) var(--tislm-ease, ease),
              border-color var(--tislm-dur-hover, 140ms) var(--tislm-ease, ease),
              color var(--tislm-dur-hover, 140ms) var(--tislm-ease, ease);
  white-space: nowrap;
}
.tislm-chat-btn:hover {
  border-color: var(--tislm-accent-line);
}
.tislm-chat-btn--primary {
  background: var(--tislm-accent);
  color: #fff;
  border-color: var(--tislm-accent-dark);
}
.tislm-chat-btn--primary:hover {
  background: var(--tislm-accent-dark);
  border-color: var(--tislm-accent-press);
  color: #fff;
}
.tislm-chat-btn--ghost {
  background: rgba(255,255,255,0.85);
  color: var(--tislm-muted);
}
.tislm-chat-btn--ghost:hover {
  color: var(--tislm-accent-dark);
}
.tislm-chat-btn--danger {
  padding: 6px 8px;
}
.tislm-chat-btn--danger:hover {
  color: var(--tislm-crisis);
  border-color: rgba(239,68,68,0.45);
}
.tislm-chat-btn[data-on="1"] {
  background: var(--tislm-accent-soft);
  color: var(--tislm-accent-dark);
  border-color: var(--tislm-accent-line);
}
/* On narrow viewports drop the labels so the buttons stay one row. */
@media (max-width: 640px) {
  .tislm-chat-btn__label { display: none; }
  .tislm-chat-btn { padding: 7px 9px; }
}

.tislm-chat-header__recents {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(217,223,211,0.55);
}
.tislm-chat-header__recents summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: var(--tislm-fw-semibold);
  color: var(--tislm-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  list-style: none;
  user-select: none;
}
.tislm-chat-header__recents summary::-webkit-details-marker { display: none; }
.tislm-chat-header__recents summary:hover { color: var(--tislm-accent); }
.tislm-chat-header__count {
  font-size: 11px;
  font-weight: var(--tislm-fw-regular);
  color: var(--tislm-muted-soft);
}
.tislm-chat-recents-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .tislm-chat-recents-grid { grid-template-columns: 1fr 1fr; }
}
.tislm-chat-recent {
  display: block;
  padding: 8px 10px;
  border-radius: var(--tislm-radius-md, 12px);
  border: 1px solid var(--tislm-line);
  background: rgba(255,255,255,0.9);
  color: var(--tislm-text);
  text-decoration: none;
  transition: border-color var(--tislm-dur-hover, 140ms) var(--tislm-ease, ease),
              background var(--tislm-dur-hover, 140ms) var(--tislm-ease, ease);
}
.tislm-chat-recent:hover {
  border-color: var(--tislm-accent-line);
  background: #fff;
}
.tislm-chat-recent.is-current {
  border-color: var(--tislm-accent);
  background: var(--tislm-accent-soft);
}

/* Composer mode picker — looks like an inline pill button.
   The native <select> drives behavior; we hide its default chrome
   and draw our own chevron next to it so the picker matches the
   send-button on the other side of the composer. */
.tislm-composer-card {
  align-items: center;
}
.tislm-mode-pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 22px 6px 10px;
  border-radius: 999px;
  background: var(--tislm-accent-soft);
  border: 1px solid var(--tislm-accent-line);
  color: var(--tislm-accent-dark);
  font-size: 12px;
  font-weight: var(--tislm-fw-semibold);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--tislm-dur-hover, 140ms) var(--tislm-ease, ease),
              border-color var(--tislm-dur-hover, 140ms) var(--tislm-ease, ease);
}
.tislm-mode-pill:hover {
  background: #dde9df;
}
.tislm-mode-pill__select {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  outline: none;
  padding-inline-end: 4px;
}
.tislm-mode-pill__select:focus { outline: none; box-shadow: none; }
.tislm-mode-pill__chevron {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: currentColor;
  pointer-events: none;
}
/* RTL: pad on the leading edge instead. */
[dir="rtl"] .tislm-mode-pill { padding: 6px 10px 6px 22px; }

/* ============================================================================
   Markdown body — applied to .md-body inside every chat bubble. Keeps
   serif type for prose, tightens spacing so paragraphs don't drift
   apart, and gives lists / blockquotes / inline code a calm style that
   matches the rest of the surface.
   ============================================================================ */

.md-body { font-family: var(--tislm-font-serif); }
.md-body .md-p {
  margin: 0 0 8px;
  white-space: pre-wrap;
}
.md-body .md-p:last-child { margin-bottom: 0; }

/* Dual-render: every assistant bubble emits a .md-clean version (no
   inline [N] markers, no trailing Sources/Note block) and a .md-full
   version (the original prose). The "Show/Hide sources" toggle flips
   the .thread-hide-sources class on #thread; CSS picks which one is
   visible from that. Default is hidden = clean. */
.md-body.md-full { display: none; }
.md-body.md-clean { display: block; }
#thread:not(.thread-hide-sources) .md-body.md-clean { display: none; }
#thread:not(.thread-hide-sources) .md-body.md-full { display: block; }

/* Trailing citation list rendered by utils/markdown_render when it
   spots a "Sources:" / "المصادر:" / "Note:" header. Styled to feel like
   a polished reference list — muted background, tight type, ordered
   markers tracking the [N] indices from the LLM output. Only shows up
   inside .md-full so it disappears with the toggle. */
.md-body .md-citations {
  display: block;
  margin: 14px 0 0;
  padding: 10px 14px;
  border: 1px solid var(--tislm-line-soft);
  border-radius: var(--tislm-radius-md, 12px);
  background: linear-gradient(180deg, rgba(232,240,234,0.55) 0%, rgba(251,252,250,0.85) 100%);
  font-size: 13.5px;
  line-height: 1.55;
}
.md-body .md-citations-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--tislm-font-sans);
  font-size: 11px;
  font-weight: var(--tislm-fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tislm-muted);
  margin: 0 0 6px;
}
.md-body .md-citations-label::before {
  content: "";
  width: 12px;
  height: 12px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f665a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m16 6 4 14'/><path d='M12 6v14'/><path d='M8 8v12'/><path d='M4 4v16'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
}
.md-body .md-citations-list {
  list-style-position: inside;
  list-style-type: decimal;
  margin: 0;
  padding: 0;
  font-family: var(--tislm-font-serif);
  color: var(--tislm-text);
}
.md-body .md-citation-item {
  margin: 2px 0;
  padding-inline-start: 2px;
}
.md-body .md-citation-item--plain {
  list-style: none;
  margin-inline-start: 0;
  color: var(--tislm-muted);
  font-style: italic;
}
[dir="rtl"] .md-body .md-citations,
.md-body.rtl-content .md-citations { text-align: right; }
[dir="rtl"] .md-body .md-citations-list,
.md-body.rtl-content .md-citations-list {
  padding-inline-end: 0;
}
.tislm-bubble--user .md-body .md-citations {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
}
.tislm-bubble--user .md-body .md-citations-label {
  color: rgba(255,255,255,0.85);
}
.tislm-bubble--user .md-body .md-citations-label::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='m16 6 4 14'/><path d='M12 6v14'/><path d='M8 8v12'/><path d='M4 4v16'/></svg>");
}
.md-body .md-h {
  font-family: var(--tislm-font-serif);
  font-weight: var(--tislm-fw-semibold);
  letter-spacing: -0.01em;
  margin: 14px 0 6px;
  line-height: var(--tislm-lh-snug);
}
.md-body h2.md-h { font-size: 1.18em; }
.md-body h3.md-h { font-size: 1.08em; }
.md-body h4.md-h,
.md-body h5.md-h,
.md-body h6.md-h { font-size: 1em; color: var(--tislm-muted); text-transform: none; }
.md-body .md-ul,
.md-body .md-ol {
  margin: 4px 0 10px;
  padding-inline-start: 1.4em;
}
.md-body .md-ul li,
.md-body .md-ol li { margin: 2px 0; }
.md-body .md-ul { list-style: disc; }
.md-body .md-ol { list-style: decimal; }
.md-body .md-bq {
  border-left: 3px solid var(--tislm-jameel);
  background: rgba(74,144,217,0.06);
  padding: 6px 14px;
  margin: 8px 0;
  font-style: italic;
  color: var(--tislm-text);
  border-radius: 0 10px 10px 0;
}
[dir="rtl"] .md-body .md-bq,
.md-body.rtl-content .md-bq {
  border-left: 0;
  border-right: 3px solid var(--tislm-jameel);
  border-radius: 10px 0 0 10px;
}
.md-body code {
  font-family: var(--tislm-font-mono);
  font-size: 0.92em;
  background: var(--tislm-surface-code);
  border: 1px solid var(--tislm-line);
  border-radius: 6px;
  padding: 0.05em 0.4em;
}
.md-body strong { font-weight: var(--tislm-fw-semibold); }
.md-body br + br { display: none; }

.tislm-bubble--user .md-body .md-bq {
  border-color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.10);
  color: #fff;
}
.tislm-bubble--user .md-body code {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
  color: #fff;
}

/* ============================================================================
   Instagram draft bubble — assistant message that's pending an outbound
   DM. Same shape as the regular assistant bubble but tinted toward IG
   purple/pink so the reviewer can tell drafts apart at a glance. The
   little "Instagram draft" chip above the bubble + a calmer footer
   below make the queue read like a triage list, not a chat log.
   ============================================================================ */

.tislm-bubble--ig {
  background: linear-gradient(165deg,
                              rgba(255,253,254,0.96) 0%,
                              rgba(252,245,250,0.93) 100%);
  border-color: rgba(217, 74, 140, 0.22);
  box-shadow: 0 10px 26px -14px rgba(217,74,140,0.18),
              0 1px 0 rgba(255,255,255,0.6) inset;
  margin-left: 0;
  margin-right: auto;
}

.tislm-avatar--ig {
  background: linear-gradient(135deg, #f58529 0%, #dd2a7b 55%, #8134af 100%);
  color: #fff;
  box-shadow: 0 4px 10px -4px rgba(221, 42, 123, 0.45);
}

.tislm-ig-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: var(--tislm-fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px 2px 6px;
  margin: 0 0 6px;
  border-radius: 999px;
  color: #ad1457;
  background: linear-gradient(135deg, rgba(245,133,41,0.10), rgba(217,74,140,0.10) 55%, rgba(129,52,175,0.10));
  border: 1px solid rgba(217, 74, 140, 0.22);
}

.tislm-ig-footer {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--tislm-muted);
}
.tislm-ig-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tislm-ig-time { font-variant-numeric: tabular-nums; }
.tislm-ig-dot { color: var(--tislm-line); }
.tislm-ig-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
[dir="rtl"] .tislm-ig-actions { margin-left: 0; margin-right: auto; }

.tislm-ig-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: var(--tislm-fw-semibold);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--tislm-dur-hover) var(--tislm-ease),
              border-color var(--tislm-dur-hover) var(--tislm-ease),
              color var(--tislm-dur-hover) var(--tislm-ease);
  white-space: nowrap;
}
.tislm-ig-btn--primary {
  background: var(--tislm-accent);
  color: #fff;
  border-color: var(--tislm-accent-dark);
  box-shadow: 0 4px 10px -4px rgba(45,94,58,0.35);
}
.tislm-ig-btn--primary:hover {
  background: var(--tislm-accent-dark);
}
.tislm-ig-btn--ghost {
  background: #fff;
  color: var(--tislm-muted);
  border-color: var(--tislm-line);
}
.tislm-ig-btn--ghost:hover {
  color: var(--tislm-accent-dark);
  border-color: var(--tislm-accent-line);
}

.tislm-ig-dot-pulse {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  position: relative;
  opacity: 0.85;
}
.tislm-ig-dot-pulse::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.55;
  animation: tislm-ig-pulse 1.6s ease-out infinite;
}
@keyframes tislm-ig-pulse {
  0%   { transform: scale(0.85); opacity: 0.6; }
  70%  { transform: scale(1.6);  opacity: 0;   }
  100% { transform: scale(1.6);  opacity: 0;   }
}
@media (prefers-reduced-motion: reduce) {
  .tislm-ig-dot-pulse::after { animation: none; }
}

/* ============================================================================
   Cross-surface sidebar
   Rendered by templates/_sidebar.html on the Flask side and mirrored on
   the Streamlit side (see app.py — the "Apps" block at the top of the
   Streamlit sidebar uses the same .tislm-cross-link class so the two
   surfaces feel like one product).
   ============================================================================ */

.tislm-cross-sidebar {
  flex: 0 0 268px;
  width: 268px;
  background: linear-gradient(165deg, rgba(255,255,255,0.92) 0%, rgba(248,250,246,0.88) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-right: 1px solid rgba(217,223,211,0.7);
  box-shadow: 0 20px 50px -20px rgba(20,35,22,0.12);
  align-self: stretch;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.tislm-cross-sidebar__inner {
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.tislm-cross-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--tislm-text);
  padding: 4px 6px 12px;
  border-bottom: 1px solid rgba(217,223,211,0.5);
  margin-bottom: 12px;
}
.tislm-cross-brand:hover .tislm-brand-name { color: var(--tislm-accent-dark); }

.tislm-brand-mark--sm {
  width: 28px; height: 28px;
  border-radius: 10px;
  font-size: 11px;
}

.tislm-cross-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0 0;
}
.tislm-cross-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--tislm-radius-md);
  color: var(--tislm-text);
  text-decoration: none;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.55);
  transition: background var(--tislm-dur-hover) var(--tislm-ease),
              border-color var(--tislm-dur-hover) var(--tislm-ease);
  min-height: 44px;
}
.tislm-cross-link:hover {
  background: rgba(255,255,255,0.95);
  border-color: rgba(217,223,211,0.75);
}
.tislm-cross-link svg {
  flex-shrink: 0;
  color: var(--tislm-muted);
}
.tislm-cross-link.is-active {
  background: var(--tislm-accent-soft);
  border-color: var(--tislm-accent-line);
}
.tislm-cross-link.is-active svg,
.tislm-cross-link.is-active .tislm-cross-link__title {
  color: var(--tislm-accent-dark);
}
.tislm-cross-link__label {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}
.tislm-cross-link__title {
  font-weight: var(--tislm-fw-semibold);
  font-size: 14px;
}
.tislm-cross-link__sub {
  font-size: 11px;
  color: var(--tislm-muted);
  margin-top: 2px;
}
.tislm-cross-link--quiet { background: transparent; min-height: 36px; padding: 8px 12px; }
.tislm-cross-link--quiet:hover { background: rgba(255,255,255,0.85); }

.tislm-cross-footer {
  margin-top: auto;
  padding: 12px 8px 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid rgba(217,223,211,0.6);
}

/* When the cross-surface sidebar is rendered INSIDE the Streamlit
   sidebar (a tighter container), shrink padding and hide the
   sub-labels so it fits cleanly. */
section[data-testid="stSidebar"] .tislm-cross-link {
  padding: 8px 10px;
  min-height: 40px;
}
section[data-testid="stSidebar"] .tislm-cross-link__sub { display: none; }
section[data-testid="stSidebar"] .tislm-cross-link__title { font-size: 13px; }