/* ======================================================================
   NOTEPAY — Mobile Bottom Navigation (workspace.css)
   Applies to: dashboard.html, event.html
   Hidden at min-width: 900px (desktop sidebar takes over).
   Uses position:fixed so it always sits at the bottom regardless of
   how the .app container manages its own scroll/overflow.
   Safe-area aware for iOS home indicator and Android navigation bar.
   ====================================================================== */


/* -----------------------------------------------------------------------
   BOTTOM NAV SHELL
   ----------------------------------------------------------------------- */
np-bottom-nav {
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 56px;
  min-height: 56px;
  z-index: 200;
  contain: layout paint;
}

.np-bottom-nav {
  display: flex;
  align-items: stretch;
  /* Fixed at the bottom of the viewport, full width */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #FFFFFF;
  border-top: 1px solid var(--border, #D6E4F0);
  /* Safe area: home indicator on iOS, nav bar on Android */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 200;
  /* GPU compositing layer for smooth rendering */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  /* Subtle shadow for depth separation */
  box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.05);
}

html.dark .np-bottom-nav,
body.dark-mode .np-bottom-nav,
html.dark-mode .np-bottom-nav {
  background: #090B0F !important;
  border-top: 1px solid #1C212E !important;
  box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.4);
}

/* Hidden on desktop - sidebar handles navigation */
@media (min-width: 900px) {
  np-bottom-nav,
  .np-bottom-nav {
    display: none !important;
  }
}

:root {
  --t3: var(--text3, #6B8AA8);
  --t2: var(--text2, #3D5A7A);
  --surface-2: var(--surf-var, #EAF0F6);
}

/* -----------------------------------------------------------------------
   NAV ITEMS
   ----------------------------------------------------------------------- */
.np-bn-item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 2px;
  min-height: 50px;
  /* Reset button & link defaults */
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: none;
  /* Typography: scales with viewport width, 9-11px range */
  font-family: var(--font-ui);
  font-size: clamp(9px, 2.5vw, 11px);
  font-weight: 600;
  color: #6B8AA8;
  line-height: 1.2;
  /* Smooth, graceful transitions */
  transition: color 0.18s ease;
  /* Mobile UX */
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  touch-action: manipulation;
  overflow: hidden;
}

/* Dark mode default inactive tab text */
html.dark .np-bn-item,
body.dark-mode .np-bn-item,
html.dark-mode .np-bn-item {
  color: #8FA3BF;
}

.np-bn-item:active {
  background: none;
}

html.dark .np-bn-item:active,
body.dark-mode .np-bn-item:active {
  background: none;
}

@media (hover: hover) {
  .np-bn-item:hover {
    color: var(--text2, #3D5A7A);
  }
  html.dark .np-bn-item:hover,
  body.dark-mode .np-bn-item:hover {
    color: var(--text, #F0F4F8);
  }
}

/* -----------------------------------------------------------------------
   ACTIVE STATE (Corporate blue pill matching theme on all pages)
   ----------------------------------------------------------------------- */
.np-bn-item.active {
  color: #1A4E8C !important;
}

.np-bn-item.active .np-bn-icon {
  color: #1A4E8C !important;
  background: rgba(26, 78, 140, 0.1) !important;
}

/* Dark mode active tab state */
html.dark .np-bn-item.active,
body.dark-mode .np-bn-item.active,
html.dark-mode .np-bn-item.active {
  color: #5A9BE8 !important;
}

html.dark .np-bn-item.active .np-bn-icon,
body.dark-mode .np-bn-item.active .np-bn-icon,
html.dark-mode .np-bn-item.active .np-bn-icon {
  color: #5A9BE8 !important;
  background: rgba(90, 155, 232, 0.16) !important;
}

/* CTA center button: solid background */
.np-bn-item.np-bn-cta.active .np-bn-icon {
  background: var(--primary, #1A4E8C) !important;
  color: #FFFFFF !important;
}

/* -----------------------------------------------------------------------
   ICON CONTAINER & FLUID MICRO-INTERACTIONS
   ----------------------------------------------------------------------- */
.np-bn-icon {
  width: 52px;
  height: 28px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B8AA8;
  flex-shrink: 0;
  background: transparent;
  transform: scale(1);
  transition: transform 0.12s cubic-bezier(0.2, 0, 0, 1), color 0.18s ease, background-color 0.18s ease;
}

html.dark .np-bn-icon,
body.dark-mode .np-bn-icon,
html.dark-mode .np-bn-icon {
  color: #8FA3BF;
}

/* Gentle tab compression on tap (fluid, matching tab flip timing) */
.np-bn-item:active .np-bn-icon {
  transform: scale(0.95);
  transition: transform 0.1s cubic-bezier(0.2, 0, 0, 1);
}

/* Label: truncate with ellipsis on very narrow screens */
.np-bn-label {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  transition: color 0.18s ease;
}


/* -----------------------------------------------------------------------
   CENTER CTA BUTTON  (Dashboard: "+ Event" page trigger)
   ----------------------------------------------------------------------- */
.np-bn-item.np-bn-cta {
  color: var(--primary);
  font-weight: 700;
}

.np-bn-item.np-bn-cta .np-bn-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: var(--primary) !important;
  color: #ffffff;
  border-radius: 10px;
  padding: 0 !important;
  box-shadow: 0 2px 8px rgba(26, 78, 140, 0.3);
  transition: transform 0.13s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.13s;
}

html.dark .np-bn-item.np-bn-cta .np-bn-icon {
  box-shadow: 0 3px 12px rgba(96, 165, 250, 0.35);
}

.np-bn-item.np-bn-cta:active .np-bn-icon {
  transform: scale(0.92);
  box-shadow: 0 1px 4px rgba(26, 78, 140, 0.2);
}

@media (hover: hover) {
  .np-bn-item.np-bn-cta:hover .np-bn-icon {
    transform: scale(1.05);
    background: var(--primary-dk);
  }
}


/* -----------------------------------------------------------------------
   HIDE TOPBAR AVATAR ON MOBILE  (bottom nav "Me" replaces it)
   Element stays in DOM - applyAvatar() in dashboard.js targets #av-btn.
   ----------------------------------------------------------------------- */
@media (max-width: 899px) {
  .mob-av-btn {
    display: none !important;
  }
}


/* -----------------------------------------------------------------------
   CONTENT PADDING ADJUSTMENTS
   Since the bottom nav is fixed, the last scrollable item would be hidden
   behind it. Increase padding-bottom on scroll containers on mobile.
   nav height ~56px + safe-area. Using 72px for comfortable clearance.
   ----------------------------------------------------------------------- */

/* Dashboard: .scroll-area already has 80px; override for fixed nav */
@media (max-width: 899px) {
  .scroll-area {
    padding-bottom: calc(63px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Event page container clearances to prevent tables and summary logs from scrolling behind navigation buttons */
@media (max-width: 899px) {
  .tbl-section {
    padding-bottom: calc(63px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #pane-sum {
    padding-bottom: calc(63px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .tbl-sc {
    padding-bottom: 8px !important;
  }

  .sum-body {
    padding-bottom: 8px !important;
  }
}


/* -----------------------------------------------------------------------
   CHAT BOTTOM NAV VISIBILITY
   updateChatFabVisibility() in event-main.js toggles this on #bn-ev-chat.
   ----------------------------------------------------------------------- */
.np-bn-chat-hidden {
  display: none !important;
}


/* -----------------------------------------------------------------------
   HIDE DUPLICATE EVENT PAGE ELEMENTS ON MOBILE
   Both replaced by the bottom navigation bar.
   ----------------------------------------------------------------------- */

/* Event tab bar (Collections/Expenses/Summary) - bottom nav replaces these.
   JS still toggles .active on #tab-don/exp/sum safely even when hidden.
   Visible on desktop (min-width: 900px) where sidebar layout is used. */
@media (max-width: 899px) {
  .tab-heading {
    display: none !important;
  }
}

/* Chat FAB wrapper - bottom nav Chat tab replaces this on mobile.
   Targeting .chat-fab-wrapper (the container) so it takes priority over
   the inline style set by updateChatFabVisibility() on #chat-fab itself. */
@media (max-width: 899px) {
  .chat-fab-wrapper {
    display: none !important;
  }
}


/* -----------------------------------------------------------------------
   SHEET & OVERLAY - ABOVE BOTTOM NAV ON MOBILE
   Sheet z-index: 50 and overlay z-index: 40 from dashboard.css are below
   the bottom nav (z-index: 200). Raise them so the sheet covers the nav.
   ----------------------------------------------------------------------- */
@media (max-width: 899px) {
  .overlay {
    z-index: 210 !important;
  }
  .sheet {
    z-index: 220 !important;
  }
}





/* -----------------------------------------------------------------------
   ACTIVE TAB ICONS - BOLDER STROKE (LinkedIn / Instagram style)
   Inactive: thin outline. Active: heavier stroke + slight scale for depth.
   ----------------------------------------------------------------------- */
.np-bn-item.active .np-bn-icon svg {
  stroke-width: 2.8;
  filter: drop-shadow(0 0 0.3px currentColor);
}

/* CTA center button icon stays the same weight since it's always "active" visually */
.np-bn-item.np-bn-cta .np-bn-icon svg {
  stroke-width: 2.5;
  filter: none;
}


/* -----------------------------------------------------------------------
   SHEETS & MODALS LAYER ABOVE BOTTOM NAV
   Ensures +column, members, UPI collections, contribution code sheets
   open and slide up cleanly OVER the bottom navigation icons.
   ----------------------------------------------------------------------- */
.sov,
.sheet,
.overlay,
.pop-ov,
.chat-overlay,
#members-sheet,
#upi-sheet,
#custom-col-sheet,
#def-col-sheet,
#code-sheet,
#filter-sort-overlay {
  z-index: 25000 !important;
}

.popup-modal,
#np-global-confirm-modal,
#np-confirm-modal {
  z-index: 100050 !important;
}

/* -----------------------------------------------------------------------
   MAXIMIZE / THEATER MODE: HIDE BOTTOM NAVIGATION
   When in maximize mode (Theater rotation), bottom nav is completely hidden.
   ----------------------------------------------------------------------- */
body.theater-active .np-bottom-nav,
.is-rotated-90 .np-bottom-nav,
.is-rotated-180 .np-bottom-nav,
.is-rotated-270 .np-bottom-nav {
  display: none !important;
}


/* -----------------------------------------------------------------------
   EVENT PAGE SPECIFIC: SHEETS & THEATER STACKING FIX
   When nav is inside #main-page, sheets & modals are higher in stacking order.
   ----------------------------------------------------------------------- */
#main-page .sov,
#main-page .sbox,
#main-page .pop-ov,
#main-page #rot-overlay {
  z-index: 25000 !important;
}

#main-page .np-bottom-nav {
  z-index: 200 !important;
}

/* Hide bottom navigation in theater mode or when keyboard is open in active form sheet */
body.theater-active .np-bottom-nav,
.theater-active .np-bottom-nav,
.is-theater .np-bottom-nav,
#rot-overlay[style*="display: flex"] ~ .np-bottom-nav,
body.keyboard-open.sheet-open .np-bottom-nav {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* -----------------------------------------------------------------------
   BADGE ON NOTIFICATIONS TAB
   ----------------------------------------------------------------------- */
.np-bn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #ef4444;
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  min-width: 14px;
  height: 14px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
  line-height: 1;
  box-shadow: 0 0 0 1.5px var(--surface);
}

/* Hide top header bell on mobile screens */
@media (max-width: 899px) {
  #np-notif-bell {
    display: none !important;
  }
}

/* Clearances for mobile bottom navigation on scroll content */
@media (max-width: 899px) {
  .scr, .scroll-area {
    padding-bottom: calc(65px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* -----------------------------------------------------------------------
   Bottom Navigation Sheet & Overlay Styles
   ----------------------------------------------------------------------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(13, 27, 42, 0.3);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: none;
  z-index: 24000;
}
html.dark .overlay, body.dark-mode .overlay {
  background: rgba(0, 0, 0, 0.5);
}
.overlay.open {
  display: block;
  animation: fi .2s;
}
@keyframes fi {
  from { opacity: 0; }
  to { opacity: 1; }
}

.sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 500px;
  margin: 0 auto;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  padding: 12px 16px 36px;
  z-index: 25000;
  animation: su .28s cubic-bezier(.32, 1, .4, 1);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.1);
  border: 1px solid var(--border);
  border-bottom: none;
}
.sheet.hidden {
  display: none !important;
}
@keyframes su {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.sh-handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 16px;
}
.sh-title {
  font-family: var(--font-brand);
  font-size: 17px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
}
.sh-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surf-var);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all .15s;
  text-decoration: none;
}
.sh-opt.opt-create:hover {
  border-color: var(--primary);
  background: var(--primary-lt);
}
.sh-opt.opt-join:hover {
  border-color: var(--teal);
  background: rgba(15, 163, 163, 0.05);
}
.sh-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.si-navy {
  background: var(--primary-lt);
  color: var(--primary);
}
.si-teal {
  background: rgba(15, 163, 163, 0.08);
  color: var(--teal);
}
.sh-opt-t {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.sh-opt-d {
  font-size: 11.5px;
  color: var(--text2);
  margin-top: 2px;
}
.sh-chev {
  margin-left: auto;
  color: var(--text3);
}

/* Premium Dark Mode for Bottom Sheet */
html.dark .sheet, body.dark-mode .sheet {
  background: #12161E;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.85);
}
html.dark .sh-handle, body.dark-mode .sh-handle {
  background: rgba(255, 255, 255, 0.2);
}
html.dark .sh-opt, body.dark-mode .sh-opt {
  background: #181E2A;
  border-color: rgba(255, 255, 255, 0.05);
}
html.dark .sh-opt.opt-create:hover, body.dark-mode .sh-opt.opt-create:hover {
  background: #202738;
  border-color: #5a9be8;
}
html.dark .sh-opt.opt-join:hover, body.dark-mode .sh-opt.opt-join:hover {
  background: #202738;
  border-color: #12c5c5;
}
html.dark .si-navy, body.dark-mode .si-navy {
  background: rgba(90, 155, 232, 0.15);
  color: #5a9be8;
}
html.dark .si-teal, body.dark-mode .si-teal {
  background: rgba(18, 197, 197, 0.15);
  color: #12c5c5;
}

.sh-cancel {
  width: 100%;
  padding: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text3);
  background: none;
  border: none;
  cursor: pointer;
  transition: color .13s;
  text-align: center;
  margin-top: 4px;
}
.sh-cancel:hover {
  color: var(--text);
}

/* -----------------------------------------------------------------------
   PREMIUM AI ADVISOR RESPONSE FORMATTING & MARKDOWN UX
   ----------------------------------------------------------------------- */
.chat-msg.chat-msg-ai {
  width: 100% !important;
  max-width: 100% !important;
  margin: 14px 0 !important;
}

.chat-msg-ai .chat-bubble {
  width: 100% !important;
  max-width: 100% !important;
  background: linear-gradient(160deg, #FFFFFF 0%, #F8FAFC 100%) !important;
  border: 1px solid #E2E8F0 !important;
  border-left: 4px solid #00D4B8 !important;
  border-radius: 16px !important;
  padding: 16px 20px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  color: var(--text, #1E293B) !important;
}

html.dark .chat-msg-ai .chat-bubble,
body.dark-mode .chat-msg-ai .chat-bubble {
  background: linear-gradient(160deg, #111622 0%, #0A0D14 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-left: 4px solid #00D4B8 !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

.ai-advisor-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #0E7490;
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.12), rgba(0, 212, 184, 0.08));
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  border: 1px solid rgba(14, 116, 144, 0.2);
}

html.dark .ai-advisor-badge,
body.dark-mode .ai-advisor-badge {
  color: #22D3EE;
  background: linear-gradient(135deg, rgba(34, 211, 238, 0.15), rgba(0, 212, 184, 0.1));
  border-color: rgba(34, 211, 238, 0.3);
}

/* Headings */
.ai-md-h1 {
  font-size: 16.5px;
  font-weight: 800;
  color: var(--text, #0F172A);
  margin: 14px 0 8px 0;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.ai-md-h2 {
  font-size: 15px;
  font-weight: 800;
  color: var(--primary, #0284C7);
  margin: 12px 0 6px 0;
  line-height: 1.35;
}
.ai-md-h3 {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text, #334155);
  margin: 10px 0 4px 0;
}
html.dark .ai-md-h1, body.dark-mode .ai-md-h1 {
  color: #F8FAFC;
}
html.dark .ai-md-h2, body.dark-mode .ai-md-h2 {
  color: #38BDF8;
}
html.dark .ai-md-h3, body.dark-mode .ai-md-h3 {
  color: #CBD5E1;
}

/* Typography & Inlines */
.ai-md-strong {
  font-weight: 700;
  color: var(--text, #0F172A);
}
html.dark .ai-md-strong, body.dark-mode .ai-md-strong {
  color: #F8FAFC;
}

.ai-md-em {
  font-style: italic;
  opacity: 0.92;
}

.ai-md-hr {
  border: none;
  height: 1px;
  background: var(--border, #E2E8F0);
  margin: 12px 0;
  opacity: 0.8;
}
html.dark .ai-md-hr, body.dark-mode .ai-md-hr {
  background: rgba(255, 255, 255, 0.08);
}

/* Metric / Financial Highlight Badge */
.ai-metric-badge {
  display: inline-block;
  padding: 2px 8px;
  margin: 0 3px;
  background: linear-gradient(135deg, rgba(0, 212, 184, 0.14), rgba(14, 165, 233, 0.08));
  color: #0D9488;
  border-radius: 6px;
  font-weight: 800;
  font-size: 0.95em;
  border: 1px solid rgba(0, 212, 184, 0.28);
  letter-spacing: -0.01em;
}
html.dark .ai-metric-badge, body.dark-mode .ai-metric-badge {
  background: linear-gradient(135deg, rgba(0, 212, 184, 0.2), rgba(34, 211, 238, 0.12));
  color: #2DD4BF;
  border-color: rgba(45, 212, 191, 0.35);
}

/* Callouts / Insight Boxes */
.ai-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.07), rgba(0, 212, 184, 0.04));
  border: 1px solid rgba(14, 165, 233, 0.22);
  border-left: 3.5px solid #0284C7;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: 13px;
  line-height: 1.55;
}
html.dark .ai-callout, body.dark-mode .ai-callout {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.1), rgba(0, 212, 184, 0.06));
  border-color: rgba(56, 189, 248, 0.22);
  border-left-color: #38BDF8;
}
.ai-callout-icon {
  font-size: 16px;
  flex-shrink: 0;
  line-height: 1.2;
}
.ai-callout-text {
  flex: 1;
  color: var(--text, #334155);
}
html.dark .ai-callout-text, body.dark-mode .ai-callout-text {
  color: #E2E8F0;
}

/* Structured Lists */
.ai-md-list, .ai-md-ol {
  margin: 8px 0 10px 0;
  padding-left: 20px;
  font-size: 13.5px;
  line-height: 1.65;
}
.ai-md-list li, .ai-md-ol li {
  margin-bottom: 6px;
  color: var(--text, #334155);
}
html.dark .ai-md-list li, html.dark .ai-md-ol li,
body.dark-mode .ai-md-list li, body.dark-mode .ai-md-ol li {
  color: #CBD5E1;
}

/* Tables */
.ai-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin: 12px 0;
  border-radius: 10px;
  border: 1px solid var(--border, #E2E8F0);
  background: var(--surface, #FFFFFF);
  -webkit-overflow-scrolling: touch;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}
html.dark .ai-table-wrap, body.dark-mode .ai-table-wrap {
  border-color: rgba(255, 255, 255, 0.1);
  background: #121722;
}
.ai-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  text-align: left;
}
.ai-table th {
  background: var(--surf-var, #F1F5F9);
  padding: 9px 13px;
  font-weight: 700;
  color: var(--text, #1E293B);
  border-bottom: 1px solid var(--border, #E2E8F0);
  white-space: nowrap;
}
html.dark .ai-table th, body.dark-mode .ai-table th {
  background: #181F2D;
  color: #F1F5F9;
  border-color: rgba(255, 255, 255, 0.08);
}
.ai-table td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--border, #E2E8F0);
  color: var(--text2, #475569);
  white-space: nowrap;
}
html.dark .ai-table td, body.dark-mode .ai-table td {
  border-color: rgba(255, 255, 255, 0.05);
  color: #94A3B8;
}
.ai-table tr:last-child td {
  border-bottom: none;
}

/* Inline Code & Code Block */
.ai-inline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  background: var(--surf-var, #F1F5F9);
  color: #BE185D;
  padding: 2px 6px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
html.dark .ai-inline-code, body.dark-mode .ai-inline-code {
  background: #1C2331;
  color: #F472B6;
  border-color: rgba(255, 255, 255, 0.08);
}
.ai-code-block {
  background: #090D16;
  color: #E2E8F0;
  padding: 12px 14px;
  border-radius: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 12px;
  overflow-x: auto;
  margin: 10px 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.ai-link {
  color: #0284C7;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
html.dark .ai-link, body.dark-mode .ai-link {
  color: #38BDF8;
}