body {
  font-family: sans-serif;
  background-color: #f8fafc;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}
/* Prevent iOS Safari auto-zoom on input focus.
   iOS zooms when font-size is below 16px. Setting a minimum
   of 16px on all form elements prevents this behavior. */
@media screen and (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important;
    touch-action: manipulation;
  }
}
/*
  The overall layout is a vertical stack: the chat area grows to fill
  available space and a persistent navigation bar sits at the bottom.
  The sidebar used in the original implementation has been removed
  and replaced with a floating navigation bar.  This change makes
  better use of horizontal space on desktop and simplifies the
  experience on mobile devices.
*/
.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
@media (min-width: 769px) {
  .layout {
    height: calc(100vh - 45px);
  }
}
/* The chat area now takes up all remaining vertical space.  It uses
   flexbox to arrange the messages, input area, logo and disclaimer
   vertically.  On mobile devices the chat fills the screen minus
   the input wrapper, while the navigation options are hidden
   behind a hamburger menu. */
.chat-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin-left: 0;
  min-height: 0;
  box-sizing: border-box;
  overflow: hidden;
}
/* Note: the .sidebar class is no longer used; it is retained in the
   stylesheet for reference but has no effect on the layout. */
/* Logo and welcome arranged horizontally in sidebar */
.logo-welcome {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  width: 100%;
}
.logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
h1 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #111827;
  margin: 0;
}
/* Controls inside the sidebar stacked vertically */
.menu-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  margin-bottom: 16px;
}
.menu-controls label {
  font-size: 0.9rem;
  margin-bottom: 2px;
}
.menu-controls select,
.menu-controls button,
.menu-controls .dark-toggle {
  width: 100%;
}
.menu-controls button {
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
}
.menu-controls button:hover {
  background-color: #e5e7eb;
}
.context-location-display {
  width: 50%;
  max-width: 50%;
  align-self: flex-start;
  font-size: 0.9rem;
  text-align: left;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #f9fafb;
  box-sizing: border-box;
}
#share-location-btn,
#manual-location-wrapper {
  width: 50%;
  max-width: 50%;
  align-self: flex-start;
  box-sizing: border-box;
}
#share-location-btn {
  text-align: left;
}
.context-manual-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.context-manual-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
}
.context-manual-entry input {
  flex: 1;
  min-width: 0;
  box-sizing: border-box;
  padding: 8px 10px;
  border: none;
  border-radius: 0;
  font-size: 0.95rem;
  background-color: transparent;
  color: #111827;
}
.context-manual-entry input:focus {
  outline: none;
}
.context-manual-actions {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}
.context-manual-actions button {
  white-space: nowrap;
  border: none;
  border-left: 1px solid #d1d5db;
  border-radius: 0;
  background-color: #f9fafb;
  padding-inline: 12px;
}
.context-location-suggestions {
  display: none;
  flex-direction: column;
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #ffffff;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}
.context-location-suggestions button {
  width: 100%;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 0;
  background: transparent;
  text-align: left;
  padding: 10px 12px;
}
.context-location-suggestions button:last-child {
  border-bottom: none;
}
.context-location-suggestions button:hover,
.context-location-suggestions button:focus-visible {
  background-color: #f3f4f6;
  outline: none;
}
.location-map-modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(16px, 5vh, 48px) 16px 16px;
  background: rgba(15, 23, 42, 0.55);
  z-index: 5000;
  overflow-y: auto;
}
.location-map-dialog {
  width: min(720px, 100%);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.location-map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.location-map-header h4 {
  margin: 0;
}
.location-map-close {
  border: none;
  background: transparent;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.location-map-description {
  margin: 0;
  font-size: 0.95rem;
}
#location-map {
  width: 100%;
  height: 320px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #d1d5db;
}
.location-map-selected {
  min-height: 1.4em;
  font-size: 0.95rem;
  color: #374151;
}
.location-map-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
body.dark .context-location-display {
  background-color: #1f2937;
  border-color: #4b5563;
  color: #e5e7eb;
}
body.dark .context-manual-row,
body.dark .context-manual-entry input,
body.dark .context-location-suggestions,
body.dark .location-map-dialog {
  background-color: #111827;
  border-color: #4b5563;
  color: #e5e7eb;
}
body.dark .context-manual-actions button {
  background-color: #1f2937;
  border-left-color: #4b5563;
  color: #e5e7eb;
}
body.dark .context-location-suggestions button {
  color: #e5e7eb;
  border-bottom-color: #374151;
}
body.dark .context-location-suggestions button:hover,
body.dark .context-location-suggestions button:focus-visible {
  background-color: #1f2937;
}
body.dark .location-map-description,
body.dark .location-map-selected,
body.dark .location-map-header h4,
body.dark .location-map-close {
  color: #e5e7eb;
}
@media (max-width: 640px) {
  .context-location-display,
  #share-location-btn,
  #manual-location-wrapper {
    width: 100%;
    max-width: 100%;
  }
  .context-manual-row {
    flex-wrap: wrap;
  }
  .context-manual-entry input {
    min-width: 100%;
  }
  .context-manual-actions {
    width: 100%;
    justify-content: stretch;
    border-top: 1px solid #d1d5db;
  }
  .context-manual-actions button {
    flex: 1;
    border-left: none;
  }
  .context-manual-actions button + button {
    border-left: 1px solid #d1d5db;
  }
  body.dark .context-manual-actions {
    border-top-color: #4b5563;
  }
  body.dark .context-manual-actions button + button {
    border-left-color: #4b5563;
  }
  .location-map-dialog {
    padding: 16px;
  }
  #location-map {
    height: 280px;
  }
}
.dark-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.9rem;
}
/* Provide vertical spacing under each dropdown by styling the placeholder div */
.dropdown-spacing {
  height: 8px;
}
/* Wrapper around formatting controls to separate it visually */
.formatting-wrapper {
  width: 100%;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
  box-sizing: border-box;
}
/* Disclaimer wrapper with border */
.disclaimer-wrapper {
  width: 100%;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  /* Increase the padding so the disclaimer text does not appear to
     overlap the surrounding border.  A larger padding creates
     breathing room above and below the text. */
  padding: 16px;
  margin-bottom: 16px;
  box-sizing: border-box;
}
/* Add spacing at the top of the disclaimer text so it does not touch the border.  This
   rule mirrors the margin defined in the generic .sidebar-disclaimer selector, but
   placed here with a more specific selector to override any previous definitions. */
.disclaimer-wrapper .sidebar-disclaimer {
  margin: 4px 0 0 0;
}
/* Bottom controls anchored to bottom of the sidebar */
.bottom-controls {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
/* Formatting controls stacked vertically in sidebar (single canonical definition) */
.formatting-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  margin-bottom: 16px;
}
.formatting-instructions {
  font-size: 0.8rem;
  text-align: left;
}
.formatting-controls button {
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  width: 100%;
}
.formatting-controls button:hover {
  background-color: #e5e7eb;
}

/* Style the individual text colour picker in the formatting controls */
.formatting-controls input[type="color"] {
  width: 100%;
  height: 32px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background-color: #f3f4f6;
  cursor: pointer;
}
.formatting-controls input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.formatting-controls input[type="color"]::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}
body.dark .formatting-controls input[type="color"] {
  background-color: #374151;
  border-color: #4b5563;
}
/* Style the selected text colour picker label like a button */
.formatting-controls .selection-color-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background-color: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
  box-sizing: border-box;
}
.formatting-controls .selection-color-btn:hover {
  background-color: #e5e7eb;
}
.formatting-controls .selection-color-btn input[type="color"] {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
}
body.dark .formatting-controls .selection-color-btn {
  background-color: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}
body.dark .formatting-controls .selection-color-btn:hover {
  background-color: #4b5563;
}
.sidebar-disclaimer {
  font-size: 0.75rem;
  color: #111827;
  /* Reset the margin so the disclaimer text sits just below the top
     padding of its wrapper.  Using a small top margin avoids the
     text touching the border while preventing it from being pushed
     down by flexbox. */
  margin: 4px 0 0 0;
}
/* Messages list in chat area grows and scrolls */
.messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 4px;
}
.message-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  /* Prevent bubbles and audio controls from wrapping onto separate
     lines.  Keeping the row in a single line ensures the audio
     buttons appear beside the message rather than above it. */
  flex-wrap: nowrap;
}
/* User messages appear on the right; assistant messages on the left. */
.message-row {
  justify-content: flex-start;
}
.message-row.user {
  justify-content: flex-end;
}
.message-row.assistant {
  justify-content: flex-start;
}
.bubble {
  /* Leave room for audio controls by reducing the maximum width */
  max-width: 80%;
  padding: 12px 16px;
  padding-bottom: 32px; /* Extra padding for audio button at bottom */
  border-radius: 16px;
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  position: relative;
  /* Align message text to the left */
  text-align: left;
}
.bubble.user {
  background-color: #e6f0ff;
  color: #111827;
  border-top-left-radius: 16px;
  border-top-right-radius: 4px;
}
.bubble.assistant {
  background-color: #ffffff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-top-left-radius: 0;
}
.small-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-image: url('circlo_logo.png');
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
}
/* Input wrapper sticks to bottom of chat area */
.input-wrapper {
  width: calc(100% - 24px);
  margin-left: 12px;
  margin-right: 12px;
  background-color: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  bottom: 0;
  box-sizing: border-box;
}
#chat-input {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 12px 16px;
  /* Use explicit 16px to prevent iOS Safari auto-zoom on focus.
     iOS zooms when font-size is below 16px. */
  font-size: 16px;
  color: #111827;
  outline: none;
  background-color: #f9fafb;
  min-height: 52px;
  /* Prevent resizing entirely to avoid the textarea extending outside its container */
  resize: none;
  overflow: auto;
  max-height: 200px;
  /* Align text to the left */
  text-align: left;
  /* Ensure the input stays within bounds */
  box-sizing: border-box;
  /* Prevent zoom on double-tap and pinch on touch devices */
  touch-action: manipulation;
}
#chat-input::placeholder {
  color: #9ca3af;
}
.controls-row {
  display: flex;
  /* Spread the translation group, mic, and enter button evenly */
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
/*
  Styles for the translation row and language selector.

  The original implementation made the language picker blend in
  with the surrounding text by removing the native arrow and
  eliminating its borders.  During usability testing it became
  clear that some users were not aware the language label was
  interactive.  To remedy this we give the select element a
  subtle border and background, restore the default arrow and
  increase its padding.  These changes help the dropdown read
  like a conventional form control without overwhelming the
  minimalist design.
*/
.translation-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1rem;
  color: #374151;
  font-style: italic;
}
.translation-label {
  font-style: italic;
}

/*
  In dark mode, override the colour of the translation label so it remains
  legible against the dark background.  The default colour for the
  translation row is a medium grey (#374151), which is appropriate on
  a light background but lacks contrast when dark mode is enabled.  By
  targeting the `.translation-row` and its label within a `body.dark`
  context, we ensure the word “Translation” switches to a light
  colour (white) whenever the user toggles dark mode on.  This
  override leaves the light‑mode styling unaffected.
*/
body.dark .translation-row,
body.dark .translation-label {
  color: #ffffff !important;
}
body.dark .translation-row {
  color: #ffffff !important;
}
#language-select {
  /* Give the dropdown its own background and border so it looks clickable */
  background-color: #f3f4f6; /* subtle gray background */
  border: 1px solid #d1d5db; /* light gray border */
  border-radius: 6px;
  color: #374151;
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 8px;
  /* restore the native arrow so users recognise this as a dropdown */
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
}
#language-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); /* blue focus ring */
}
#send-button {
  background-color: #2563eb; /* blue */
  color: #ffffff;
  border: none;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  /* No left margin; spacing now handled by the parent flex container */
  margin-left: 0;
}
#send-button:hover {
  background-color: #1d4ed8;
}
.send-icon {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

/* Reset button uses a contrasting colour to differentiate its purpose from the send button. */
#reset-button {
  /* Use a rectangular shape with subtle rounded corners for the reset button */
  background-color: #f87171; /* red tone indicating clear/reset */
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0 12px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  /* Remove left margin; spacing is handled by the button container */
  margin-left: 0;
}
#reset-button:hover {
  background-color: #ef4444;
}
/* A container to group the send and reset buttons side by side with spacing */
.send-reset-buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Disclaimer style */
.disclaimer {
  font-size: 0.9rem;
  color: #6b7280;
  margin-top: -12px;
  margin-bottom: 24px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.3;
}

/* Hide legacy menu bar definitions.  All controls live in the sidebar now. */

/* Remove inline audio button styling; audio controls are outside the bubble */
/* Container for audio controls placed next to each message bubble */
.audio-controls {
  position: absolute;
  bottom: 4px;
  right: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  /* Minimum 44×44px touch target on mobile */
  width: 44px;
  height: 44px;
}
.audio-toggle-btn {
  background-color: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: inherit;
  padding: 0;
  /* 44×44px touch target */
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s;
}
.audio-toggle-btn:hover {
  opacity: 0.7;
}
/* Dictation active (recording) state — pulsing red mic */
#dictation-btn.recording {
  background-color: #fee2e2;
  border-color: #ef4444 !important;
  color: #ef4444;
  animation: pulse-recording 1.2s ease-in-out infinite;
}
@keyframes pulse-recording {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
  50%       { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* Spinner loader used while awaiting a response */
.spinner {
  border: 4px solid #f3f4f6;
  border-top: 4px solid #2563eb;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  margin: 4px;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Highlight style for user input */
.highlighted {
  background-color: #fffbc1 !important;
}

/* Dark mode overrides */
body.dark {
  background-color: #1f2937;
  color: #e5e7eb;
}
/* Explicit light mode text colors - ensure all text is black when not in dark mode */
body:not(.dark) {
  color: #111827;
}
body:not(.dark) h1,
body:not(.dark) h2,
body:not(.dark) h3,
body:not(.dark) p,
body:not(.dark) span,
body:not(.dark) label,
body:not(.dark) button {
  color: #111827;
}
body:not(.dark) .menu-controls label,
body:not(.dark) .formatting-instructions,
body:not(.dark) .sidebar-disclaimer {
  color: #111827;
}
body:not(.dark) .bubble.user {
  color: #111827;
}
body:not(.dark) .bubble.assistant {
  color: #111827;
}
body:not(.dark) #readability-panel,
body:not(.dark) #context-panel {
  color: #111827;
}
body:not(.dark) #readability-panel h3,
body:not(.dark) #readability-panel label,
body:not(.dark) #context-panel h3,
body:not(.dark) #context-panel label {
  color: #111827;
}
/* Dark mode styling for sidebar and input wrapper */
body.dark .sidebar {
  background-color: #1f2937;
  border-color: #4b5563;
}
body.dark .menu-controls select,
body.dark .menu-controls button,
body.dark .formatting-controls button {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}
body.dark .menu-controls button:hover,
body.dark .formatting-controls button:hover {
  background-color: #4b5563;
}
/* Style the sidebar disclaimer and instructions in dark mode */
body.dark .formatting-instructions,
body.dark .sidebar-disclaimer {
  color: #ffffff;
}
/* Dark mode for input wrapper */
body.dark .input-wrapper {
  background-color: #374151;
  border-color: #4b5563;
}
body.dark #chat-input {
  background-color: #1f2937;
  color: #e5e7eb;
}
body.dark #language-select {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}
body.dark .bubble.user {
  background-color: #3b82f6;
  color: #ffffff;
}
body.dark .bubble.assistant {
  background-color: #374151;
  color: #e5e7eb;
  border-color: #4b5563;
}
/*
  =====================================================================
  Navigation and responsive additions
  =====================================================================

  A floating navigation bar replaces the old sidebar.  It sits at the
  bottom of the viewport on larger screens and provides quick access
  to readability settings, dark mode, saving the conversation and
  resetting the chat.  On smaller screens the bar is hidden and a
  hamburger button appears at the top of the chat area.  When
  activated, a full‑screen overlay (mobile navigation) presents the
  same controls in a vertical list along with a back button to return
  to the chat view.  A readability panel slides up above the
  navigation bar to expose font and formatting options when
  requested.
*/
.nav-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45px; /* Further reduce height to show more chat text on desktop */
  background-color: #ffffff;
  border-top: 2px solid #e5e7eb;
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 1000;
  /* Safe area inset for iPhone home indicator */
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-bar button,
.nav-bar label {
  background: none;
  border: none;
  color: #111827;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.nav-bar button:hover,
.nav-bar label:hover {
  color: #2563eb;
}
.nav-bar input[type="checkbox"] {
  margin-right: 4px;
}
body.dark .nav-bar {
  background-color: #374151;
  border-color: #4b5563;
}
body.dark .nav-bar button,
body.dark .nav-bar label {
  color: #e5e7eb;
}

/* Readability panel slides up above the navigation bar when active.  It
   contains controls to adjust font size, font family, line spacing,
   text colour and formatting.  Initially hidden, it is toggled by the
   Readability button.  A close (×) button in the top right allows
   users to hide the panel without returning to the navigation bar. */
#readability-panel,
#context-panel {
  position: fixed;
  bottom: 45px; /* align with updated navigation bar height */
  left: 0;
  right: 0;
  max-height: 70vh;
  background-color: #ffffff;
  border-top: 2px solid #e5e7eb;
  padding: 16px;
  display: none;
  z-index: 3000;
  overflow-y: auto;
  /* Provide a relative positioning context for the close button */
  position: fixed;
}
body.dark #readability-panel,
body.dark #context-panel {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}

/* Close button inside the readability panel */
#readability-panel .close-btn,
#context-panel .close-btn {
  position: absolute;
  top: 8px;
  right: 12px;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: inherit;
}
#readability-panel h3,
#context-panel h3 {
  margin-top: 0;
  margin-bottom: 12px;
}
#readability-panel .menu-controls select,
#readability-panel .formatting-controls button,
#context-panel .menu-controls button,
#context-panel .menu-controls input {
  width: 100%;
}

/* Logo, title and disclaimer area positioned above the navigation bar.  We use flexbox
   to place the logo beside the title/disclaimer, conserving vertical space.  A grey
   outline surrounds the disclaimer text to visually separate it from the title and
   other elements. */
.logo-disclaimer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 0;
  text-align: center;
}
.logo-disclaimer .tayo-logo {
  width: 60px;
  height: 60px;
}
.title-disclaimer {
  display: flex;
  /* Arrange the title and disclaimer horizontally to save vertical space */
  flex-direction: row;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.title-disclaimer h2 {
  margin: 0;
  font-size: 1.2rem;
}
.disclaimer-text {
  font-size: 0.7rem;
  color: #111827;
  /* Remove top margin so the disclaimer lines up with the heading */
  margin: 0;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 4px 8px;
  max-width: 600px;
  text-align: center;
}
body.dark .disclaimer-text {
  border-color: #4b5563;
  color: #ffffff;
}

/* Mobile navigation overlay.  Hidden by default and displayed
   as a bottom sheet when the menu button is activated. */
#mobile-nav {
  display: none;
  position: fixed;
  top: auto;
  left: 0;
  right: 0;
  bottom: 0;
  /* Use auto height (up to 60vh) so small screens aren't cramped */
  height: auto;
  max-height: 60vh;
  background-color: #ffffff;
  z-index: 2000;
  overflow-y: auto;
  padding: 20px;
  box-sizing: border-box;
  flex-direction: column;
  /* Safe area inset for iPhone home indicator */
  padding-bottom: calc(20px + env(safe-area-inset-bottom));
  /* Ensure this is a positioning context for absolute children */
}
body.dark #mobile-nav {
  background-color: #1f2937;
  color: #e5e7eb;
}
#mobile-nav h2 {
  margin-top: 0;
  margin-bottom: 16px;
}
#mobile-nav button {
  width: 100%;
  padding: 12px;
  margin-bottom: 8px;
  font-size: 1rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background-color: #f3f4f6;
  color: #111827;
  cursor: pointer;
}
body.dark #mobile-nav button {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}
#mobile-nav button:hover {
  background-color: #e5e7eb;
}
body.dark #mobile-nav button:hover {
  background-color: #4b5563;
}

/* Close button for mobile navigation - positioned in top right of mobile nav */
#mobile-nav .mobile-nav-close,
.mobile-nav-close {
  position: absolute !important;
  top: 10px;
  right: 10px;
  background: none !important;
  border: none !important;
  font-size: 2rem;
  cursor: pointer;
  color: #111827;
  width: 40px !important;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2001;
  padding: 0 !important;
  margin: 0 !important;
}
body.dark #mobile-nav .mobile-nav-close,
body.dark .mobile-nav-close {
  color: #ffffff;
}

/* Adjustments for input wrapper to reduce its vertical footprint */
/* Reduce padding so the input area occupies less vertical space.
   Add safe area inset so iOS home indicator doesn't overlap the input. */
.input-wrapper {
  padding: 8px;
  padding-bottom: max(8px, env(safe-area-inset-bottom));
  border-radius: 16px;
}

/* Wide enter button styling */
#send-button {
  background-color: #2563eb; /* blue */
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 0 20px;
  height: 40px;
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  min-width: 80px;
}
#send-button:hover {
  background-color: #1d4ed8;
}
/* Dictation button styling */
#dictation-btn {
  background-color: #f3f4f6;
  color: #111827;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 0 12px;
  height: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}
#dictation-btn:hover {
  background-color: #e5e7eb;
}
/* Menu button styling - hidden on desktop, shown on mobile next to disclaimer */
.menu-btn-mobile {
  display: none;
  /* Ensure 44px touch target when visible */
  min-height: 44px;
  min-width: 44px;
}

/* Mic icon inside dictation button and other icons share same dimensions */
.icon {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* Audio toggle button — 44×44px touch target */
.audio-toggle-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
}
.audio-toggle-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  pointer-events: none;
}

/* Disclaimer button - hidden on desktop, shown on mobile */
.disclaimer-btn {
  display: none;
  /* Ensure 44px touch target when visible */
  min-height: 44px;
  min-width: 44px;
}

/* Disclaimer modal overlay - full screen */
.disclaimer-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  z-index: 3000;
  padding: 20px;
  overflow-y: auto;
}
body.dark .disclaimer-modal {
  background-color: #1f2937;
}
.disclaimer-modal.active {
  display: block;
}
.disclaimer-modal-content {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 40px;
}
.disclaimer-modal-close {
  position: fixed;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 2rem;
  cursor: pointer;
  color: #111827;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3001;
}
body.dark .disclaimer-modal-close {
  color: #ffffff;
}
.disclaimer-modal-text {
  font-size: 1rem;
  line-height: 1.6;
  color: #111827;
}
body.dark .disclaimer-modal-text {
  color: #ffffff;
}

/* Hide the desktop navigation bar on small screens and display the
   menu button is shown next to the disclaimer instead. */
@media (max-width: 768px) {
  /* Prevent body scrolling - use fixed height */
  html {
    height: 100%;
  }
  body {
    height: 100%;
    margin: 0;
    overflow: hidden;
  }
  .layout {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .chat-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 8px;
    overflow: hidden;
  }
  /* Messages area takes remaining space and scrolls */
  .messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }
  /* Input wrapper should not shrink */
  .input-wrapper {
    flex-shrink: 0;
  }
  /* Logo/disclaimer should not shrink */
  .logo-disclaimer {
    flex-shrink: 0;
    padding: 4px 0;
  }
  /* Hide the agents-content on mobile to prevent overflow */
  #agents-content {
    display: none;
  }
  .nav-bar {
    display: none;
  }

  /* On mobile, readability panel covers only bottom third and sits at the very bottom */
  #readability-panel,
  #context-panel {
    max-height: 33.33vh;
    height: 33.33vh;
    bottom: 0;
  }

  /* Reduce padding and font sizes on mobile to maximise chat area */
  .input-wrapper {
    padding: 6px;
    gap: 6px;
  }
  #chat-input {
    padding: 8px 12px;
    /* Must be exactly 16px on mobile to prevent iOS Safari auto-zoom on focus */
    font-size: 16px;
  }
  .translation-row {
    font-size: 0.9rem;
  }
  #send-button,
  #dictation-btn {
    /* Maintain 44px minimum touch target height on mobile */
    height: 44px;
    padding: 0 12px;
    font-size: 0.85rem;
  }
  /* Shrink the logo and heading on mobile */
  .logo-disclaimer img {
    width: 40px;
    height: 40px;
  }
  .logo-disclaimer h2 {
    font-size: 1rem;
    white-space: nowrap;
  }

  /* On mobile: arrange logo, title, and disclaimer button in one row */
  .logo-disclaimer {
    gap: 8px;
    flex-wrap: nowrap;
  }
  .title-disclaimer {
    flex-direction: row;
    gap: 8px;
    align-items: center;
    flex-shrink: 1;
  }

  /* Hide the full disclaimer text on mobile */
  .disclaimer-text {
    display: none;
  }

  /* Show disclaimer button on mobile — 44px touch target */
  .disclaimer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #111827;
    background-color: transparent;
    border: 1px solid #000000;
    border-radius: 4px;
    padding: 0 10px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
    font-family: inherit;
    /* 44px minimum touch target */
    min-height: 44px;
    min-width: 44px;
  }
  body.dark .disclaimer-btn {
    color: #ffffff;
    border-color: #ffffff;
  }

  /* Show menu button on mobile — 44px touch target */
  .menu-btn-mobile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    color: #111827;
    background-color: transparent;
    border: 1px solid #000000;
    border-radius: 4px;
    padding: 0 10px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    box-sizing: border-box;
    font-family: inherit;
    /* 44px minimum touch target */
    min-height: 44px;
    min-width: 44px;
  }
  body.dark .menu-btn-mobile {
    color: #ffffff;
    border-color: #ffffff;
  }
}
/* Active state styling for buttons in dark mode */
body.dark .menu-controls button.active,
body.dark .formatting-controls button.active {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #ffffff;
}

/* Dark mode: ensure heading text is white and formatting bar matches dark theme */
body.dark h1 {
  color: #ffffff;
}
/* Remove unused formatting-bar dark mode rules as we no longer use the formatting bar */
/* Dark mode styling for the new formatting and disclaimer wrappers */
body.dark .formatting-wrapper {
  background-color: #374151;
  border-color: #4b5563;
}
body.dark .disclaimer-wrapper {
  background-color: #374151;
  border-color: #4b5563;
}
body.dark .bottom-controls button {
  background-color: #374151;
  border-color: #4b5563;
  color: #e5e7eb;
}
body.dark .bottom-controls button:hover {
  background-color: #4b5563;
}
/* Dark mode styling for audio toggle button */
body.dark .audio-toggle-btn {
  color: #e5e7eb;
}
body.dark .audio-toggle-btn:hover {
  opacity: 0.7;
}