/* ----------------------------------------------------------------------
 * Mobile (≤768px) — pain points fixed in this block:
 *   1. Assistant sidebar becomes a full-screen overlay instead of pushing
 *      the page off the right edge.
 *   2. Top navbar / page padding tighten up.
 *   3. PDF iframe caps at 60vh so the form below it is reachable.
 *   4. Form inputs span the column rather than the 420px desktop cap.
 *   5. Action cards on the home page stack with sensible spacing.
 *   6. Tables wrap in horizontal scroll instead of breaking the layout.
 * -------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Assistant overlay. The wrapper is laid out via flex on desktop;
     position:fixed pulls it out of flow on mobile so the chat covers
     the page. !important is needed because the toggle callback writes
     inline width values. */
  .ds-ai-wrapper-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 1050 !important;
    overflow-y: auto !important;
    background: var(--ds-parchment, #f8f5ee);
    padding: 8px;
  }
  .ds-ai-wrapper-open .ds-ai-panel.card {
    min-width: 0 !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 6px;
  }
  .ds-ai-wrapper-open .ds-ai-chat {
    height: calc(100vh - 220px) !important;
  }

  /* Page chrome tightens up. */
  .ds-app.container-fluid,
  .ds-app.container { padding-left: 12px; padding-right: 12px; }
  .ds-page-content { padding: 0 !important; }
  .ds-hero { margin-bottom: 1rem !important; }
  .ds-page-title { font-size: 1.4rem !important; }

  /* Navbar — stop the brand + nav links from racing each other off
     the right edge. */
  .ds-navbar .navbar-nav { gap: 4px; }
  .ds-navbar .navbar-brand img { height: 32px !important; }
  .ds-navbar .nav-link { padding: 0.25rem 0.5rem !important; }

  /* Document detail: PDF iframe shouldn't dominate the screen. */
  #pdf-iframe { height: 60vh !important; }

  /* Form inputs take the full column on phones. */
  input.form-control,
  textarea.form-control,
  .form-select,
  [style*="maxWidth: 420px"],
  [style*="max-width: 420px"] {
    max-width: 100% !important;
  }

  /* Tables in admin/settings get horizontal scroll. */
  .table-responsive,
  .table { overflow-x: auto !important; display: block !important; }

  /* Assistant Send + Mic buttons sit on one row that the textarea
     squeezes; allow wrapping. */
  .ds-ai-panel .input-group { flex-wrap: wrap; gap: 6px; }
  .ds-ai-panel .input-group > * { margin-left: 0 !important; }
}

/* Ultra-narrow phones (≤480px) — tighten further. */
@media (max-width: 480px) {
  .ds-page-title { font-size: 1.2rem !important; }
  .ds-hero p.lead { font-size: 0.95rem !important; }
}

/* Assistant bubble: tighten the markdown wrapper so dcc.Markdown
 * doesn't add the default block spacing that makes chat replies feel
 * paragraph-like. Inline formatting (bold/italic/code) still renders. */
.ds-chat-markdown p {
  margin-bottom: 0;
  line-height: 1.5;
}
.ds-chat-markdown ul,
.ds-chat-markdown ol {
  margin-bottom: 0.25rem;
  padding-left: 1.25rem;
}
.ds-chat-markdown code {
  background: rgba(13, 22, 40, 0.06);
  padding: 0.05em 0.35em;
  border-radius: 4px;
  font-size: 0.92em;
}

/* Assistant mic button — neutral when idle, pulsing red while recording. */
.ds-mic-btn {
  color: var(--ds-ink-soft) !important;
  border: 1px solid var(--ds-parchment-shadow) !important;
  background: #ffffff !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
}
.ds-mic-btn:hover {
  color: var(--ds-velvet) !important;
  background: #f8fafc !important;
}
.ds-mic-btn.recording {
  color: #ffffff !important;
  background: #c1121f !important;
  border-color: #c1121f !important;
  animation: ds-mic-pulse 1.2s ease-in-out infinite;
}
@keyframes ds-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(193, 18, 31, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(193, 18, 31, 0); }
}

.ds-ai-chat {
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Chat bubbles inside the glass — frosted tiles. User bubble leans
 * cool/blue-tinted, assistant bubble leans warmer/brighter so they
 * read distinct without hard lines. */
.ds-chat-msg-user {
  background: rgba(203, 213, 225, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--ds-ink);
  padding: 10px 12px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.ds-chat-msg-assistant {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: var(--ds-ink);
  padding: 10px 12px;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Streaming placeholder shown inside the assistant bubble while the
 * model is thinking or running a tool. Replaced by markdown text on the
 * first text delta. */
.ds-typing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ds-ink-soft);
  font-style: italic;
}
.ds-typing-label {
  font-size: 0.92em;
}
.ds-typing-dots {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.ds-typing-dots i {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ds-brass);
  opacity: 0.35;
  animation: ds-typing-bounce 1.1s ease-in-out infinite;
}
.ds-typing-dots i:nth-child(2) { animation-delay: 0.18s; }
.ds-typing-dots i:nth-child(3) { animation-delay: 0.36s; }
@keyframes ds-typing-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.35; }
  40%           { transform: translateY(-3px); opacity: 1; }
}

.ds-section-heading {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  color: var(--ds-mahogany-deep);
}