/* ===================================================
   CSS Variables
=================================================== */
:root {
  /* Brand Colors */
  --color-midnight-navy: #2B2D42;
  --color-cream: #FFF7E4;
  --color-white: #FFFFFF;
  --color-ocean-teal: #4FA6A4;
  --color-sunset-yellow: #FEC042;

  /* Primary Colors */
  --color-primary: #4FA6A4;  /* Ocean Teal */
  --color-primary-dark: #3d8b89;  /* Darker teal for hover */

  /* Message Colors */
  --color-user-bg: #2B2D42;  /* Midnight Navy */
  --color-user-text: #FFFFFF;  /* White text on navy */
  --color-bot-bg: #FFFFFF;  /* White */
  --color-bot-text: #2B2D42;  /* Midnight Navy text */

  /* Button Colors */
  --color-button-bg: #FEC042;  /* Sunset Yellow */
  --color-button-hover: #e5a83a;  /* Darker yellow for hover */
  --color-button-text: #2B2D42;  /* Navy text on yellow */

  /* UI Colors */
  --color-background: #FFF7E4;  /* Cream */
  --color-border: #ccc;
  --color-text: #333;
  --color-text-light: #666;

  /* Canvas: the chat sits on a lighter panel down the middle of a cream page */
  --color-canvas-outer: #FFF7E4;  /* Cream */
  --color-canvas-inner: #FFFDF8;  /* Lighter cream */
  --color-panel-edge: rgba(43, 45, 66, 0.07);

  /* Layout: the chat column is capped at --chat-max and centred, on a panel
     --panel-pad wider each side. The top bar, chat area and input bar stay
     full-bleed and pad their content in to the same column, so everything lines
     up on a wide screen. On a phone the panel is simply the full width. */
  --chat-max: 800px;
  --panel-pad: 1.5rem;
  --panel-inset: max(0px, calc((100% - var(--chat-max)) / 2 - var(--panel-pad)));
  --chat-pad: calc(var(--panel-inset) + var(--panel-pad));

  /* Bubble shape: rounded, with a tighter corner on the speaker's side */
  --bubble-radius: 1.1rem;
  --bubble-corner: 0.3rem;
}

/* ===================================================
   Base Layout & Global Styles
=================================================== */
html, body {
  margin: 0;
  padding: 0;
  font-family: 'Open Sans', sans-serif;
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;  /* Dynamic viewport height for mobile */
  font-size: 0.95rem;
  overflow-x: hidden;  /* Prevent horizontal scrolling */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

* {
  box-sizing: border-box;
}

/* ===================================================
   Top Bar
=================================================== */
.top-bar {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-midnight-navy);
  padding: 0.75rem var(--chat-pad);
  z-index: 1000;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.door4-logo {
  display: block;
  height: 22px;
  width: auto;
}

/* ===================================================
   Chat Area
=================================================== */
#chatBox {
  flex: 1;
  padding: 1.25rem var(--chat-pad) 1.5rem;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* Outer cream either side, the lighter panel (with a hairline edge) behind
     the chat column. Painted as a gradient so the scrollbar stays at the
     window edge rather than inside the panel. */
  background: linear-gradient(to right,
    var(--color-canvas-outer) var(--panel-inset),
    var(--color-panel-edge) var(--panel-inset),
    var(--color-panel-edge) calc(var(--panel-inset) + 1px),
    var(--color-canvas-inner) calc(var(--panel-inset) + 1px),
    var(--color-canvas-inner) calc(100% - var(--panel-inset) - 1px),
    var(--color-panel-edge) calc(100% - var(--panel-inset) - 1px),
    var(--color-panel-edge) calc(100% - var(--panel-inset)),
    var(--color-canvas-outer) calc(100% - var(--panel-inset)));
  -webkit-overflow-scrolling: touch;
}

/* One row per message: holds the bubble, then its timestamp or option buttons */
.message-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 0.9rem;
  min-width: 0;
}

.message-row.from-user {
  align-items: flex-end;
}

/* ===================================================
   Message Bubbles
=================================================== */
.message {
  position: relative;
  width: fit-content;
  max-width: min(85%, 640px);
  padding: 0.7rem 1rem;
  border-radius: var(--bubble-radius);
  line-height: 1.5;
  font-size: 0.95rem;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.user {
  background-color: var(--color-user-bg);
  color: var(--color-user-text);
  border-bottom-right-radius: var(--bubble-corner);
}

.bot {
  background-color: var(--color-bot-bg);
  color: var(--color-bot-text);
  border-bottom-left-radius: var(--bubble-corner);
  box-shadow: 0 1px 2px rgba(43, 45, 66, 0.08), 0 2px 8px rgba(43, 45, 66, 0.05);
}

/* Markdown rendered inside a bubble by marked.js. Strip the outer margins of the
   first and last block so the padding alone sets the spacing and text sits
   centred in the bubble. Colours inherit so bold reads on both bubble colours. */
.message-body > :first-child {
  margin-top: 0;
}

.message-body > :last-child {
  margin-bottom: 0;
}

.message p {
  margin: 0 0 0.6rem;
}

.message strong {
  font-weight: 700;
}

.message ul,
.message ol {
  margin: 0.3rem 0 0.6rem;
  padding-left: 1.2rem;
}

.message li {
  margin: 0.15rem 0;
}

.message blockquote {
  margin: 0.4rem 0 0.6rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--color-ocean-teal);
}

/* "You · 21:45" / "Rev · 21:46" under each bubble */
.message-meta {
  font-size: 0.72rem;
  color: #8a8a8a;
  margin-top: 0.3rem;
  padding: 0 0.25rem;
}

/* ===================================================
   Links in Messages
=================================================== */
.user a {
  color: white;
  text-decoration: underline;
  font-weight: 500;
}

.user a:hover {
  color: #d4edda;
}

.bot a {
  color: var(--color-primary-dark);
  text-decoration: underline;
  font-weight: 500;
}

.bot a:hover {
  color: var(--color-bot-text);
}

/* ===================================================
   Bot Options (Buttons)
=================================================== */
.bot-option-container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.7rem;
  max-width: 100%;
  animation: optionsIn 0.25s ease-out 0.3s both;
}

.option-instruction {
  width: 100%;
  font-size: 0.8rem;
  color: var(--color-text-light);
  font-style: italic;
}

.bot-option {
  margin: 0;
  padding: 0.55rem 1rem;
  min-height: 2.5rem;
  border-radius: 999px;
  border: 1.5px solid var(--color-midnight-navy);
  cursor: pointer;
  background: var(--color-white);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-midnight-navy);
  font-family: 'Open Sans', sans-serif;
  text-align: center;
  line-height: 1.3;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.bot-option:hover,
.bot-option:focus-visible {
  background-color: var(--color-midnight-navy);
  color: var(--color-white);
}

/* Ghosted "Skip this question" for optional follow-ups: present, but clearly
   not the main choice */
.bot-option.skip-option {
  background: transparent;
  border: 1.5px dashed rgba(43, 45, 66, 0.3);
  color: var(--color-text-light);
  font-weight: 400;
}

.bot-option.skip-option:hover,
.bot-option.skip-option:focus-visible {
  background: rgba(43, 45, 66, 0.06);
  border-color: rgba(43, 45, 66, 0.5);
  color: var(--color-midnight-navy);
}

@keyframes optionsIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

/* ===================================================
   Input Area
=================================================== */
/* Navy footer to match the top bar */
#inputArea {
  padding: 0.75rem var(--chat-pad);
  padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  background: var(--color-midnight-navy);
  width: 100%;
  box-sizing: border-box;
}

.input-inner {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
}

/* The message box, with the send button sitting inside it on the right */
.composer {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 0.25rem;
  background: var(--color-white);
  border: 2px solid transparent;
  border-radius: 1.4rem;
  padding: 0.3rem 0.3rem 0.3rem 0.9rem;
  transition: border-color 0.2s ease;
}

.composer:focus-within {
  border-color: var(--color-sunset-yellow);
}

#userInput {
  flex: 1;
  min-width: 0;
  padding: 0.5rem 0;
  font-size: 1rem;  /* 16px stops iOS zooming in on focus */
  font-family: 'Open Sans', sans-serif;
  color: var(--color-midnight-navy);
  background: transparent;
  border: none;
  min-height: 2.25rem;
  max-height: 200px; /* Don't grow too much */
  resize: none; /* Prevent user resize handle */
  overflow-y: auto;
  line-height: 1.4;
}

#userInput:focus {
  outline: none;
}

.send-button {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-midnight-navy);
  color: var(--color-white);
  transition: background-color 0.15s ease, opacity 0.15s ease;
}

.send-button:hover {
  background-color: var(--color-ocean-teal);
}

/* Fade the send button until there's something to send */
#userInput:placeholder-shown + .send-button {
  opacity: 0.35;
}

button {
  margin-left: 0.625rem;
  padding: 0.625rem 1.25rem;
  font-size: 1rem;
  background-color: var(--color-midnight-navy);
  color: var(--color-white);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  font-weight: 500;
  min-height: 2.75rem;
}

button:hover {
  background-color: #1a1c2e;
}

/* ===================================================
   Typing Indicator
   A small bot bubble with three dots. When the reply arrives it is swapped
   for the real message, which grows out from the same spot (see growBubble).
=================================================== */
.typing-bubble {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.6rem;
  animation: typingIn 0.2s ease-out;
}

.typing-dots {
  display: inline-flex;
  gap: 0.3rem;
  align-items: center;
  padding: 0 0.1rem;
}

.typing-dots span {
  width: 7px;
  height: 7px;
  background: var(--color-ocean-teal);
  border-radius: 50%;
  animation: typingDot 1.2s infinite ease-in-out;
}

.typing-dots span:nth-child(2) { animation-delay: 0.15s; }
.typing-dots span:nth-child(3) { animation-delay: 0.3s; }

.typing-phrase {
  font-size: 0.875rem;
  color: var(--color-text-light);
}

@keyframes typingDot {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-4px); opacity: 1; }
}

@keyframes typingIn {
  from { opacity: 0; transform: scale(0.9); transform-origin: bottom left; }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .typing-dots span,
  .typing-bubble,
  .bot-option-container {
    animation: none;
  }
}

/* ===================================================
   Test Mode Banner
=================================================== */
.test-banner {
  background-color: #fff3cd;
  color: #856404;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  border-bottom: 1px solid #ffeeba;
}

.test-banner.hidden {
  display: none;
}

/* ===================================================
   Modal Styling (Reset Confirmation)
=================================================== */
.modal {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 1rem;
}

.modal-content {
  background: #fff;
  color: var(--color-midnight-navy);
  width: 100%;
  max-width: 22rem;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal-content h3 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.modal-content p {
  margin: 0 0 1.25rem;
  line-height: 1.5;
  color: var(--color-text-light);
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}

.modal-button {
  margin: 0;
  padding: 0.55rem 1.1rem;
  min-height: 2.5rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
}

.modal-button.secondary {
  background: transparent;
  color: var(--color-midnight-navy);
  border: 1.5px solid rgba(43, 45, 66, 0.25);
}

.modal-button.secondary:hover {
  background: rgba(43, 45, 66, 0.06);
}

.modal-button.primary {
  background: var(--color-midnight-navy);
  color: var(--color-white);
}

.modal-button.primary:hover {
  background: var(--color-ocean-teal);
}

/* ===================================================
   Responsive Design
=================================================== */
@media screen and (max-width: 600px) {
  :root {
    --panel-pad: 0.75rem;
  }

  .message {
    max-width: 88%;
  }

  .bot-option {
    font-size: 0.85rem;
    padding: 0.5rem 0.85rem;
  }
}


/* ===================================================
   Utility Classes
=================================================== */
.hidden {
  display: none !important;
}

/* ===================================================
   Chat Ended Message
=================================================== */
#inputArea.chat-ended .input-inner {
  align-items: center;
}

.chat-ended-message {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  min-height: 2.9rem;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.95rem;
}

.chat-ended-icon {
  background: var(--color-ocean-teal);
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.chat-ended-text {
  font-weight: 500;
}

/* ===================================================
   Tools Button and Menu
   A ⋮ button on the navy footer, outside the message box, opening a small
   card upwards with "Mute sounds" and "Start again"
=================================================== */
.tools-container {
  position: relative;
  flex-shrink: 0;
}

.tools-button {
  width: 2.9rem;
  height: 2.9rem;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tools-button:hover,
.tools-button[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
  color: var(--color-white);
}

.tools-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.5rem);
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  min-width: 12rem;
  padding: 0.35rem;
  z-index: 1000;
}

.tools-menu-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  margin: 0;
  padding: 0.6rem 0.75rem;
  min-height: 0;
  border: none;
  border-radius: 0.5rem;
  background: none;
  color: var(--color-midnight-navy);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.tools-menu-item:hover,
.tools-menu-item:focus-visible {
  background: rgba(43, 45, 66, 0.06);
}

.tools-menu-item.danger {
  color: #b42318;
}

.tools-menu-item.danger:hover,
.tools-menu-item.danger:focus-visible {
  background: rgba(180, 35, 24, 0.07);
}

/* Door4 logo across the top of the menu. The SVG is white, so it's used as a
   mask and painted navy to show on the white card. */
.tools-menu-brand {
  height: 16px;
  margin: 0.55rem 0.75rem 0.5rem;
  background-color: var(--color-midnight-navy);
  -webkit-mask: url("images/door4_white_solus.svg") no-repeat left center / contain;
  mask: url("images/door4_white_solus.svg") no-repeat left center / contain;
}

.tools-menu-divider {
  height: 1px;
  margin: 0.3rem 0.5rem;
  background: rgba(43, 45, 66, 0.1);
}

/* Speaker icon: waves when sound is on, a cross when muted */
.tools-menu .sound-off,
.tools-menu.muted .sound-on {
  display: none;
}

.tools-menu.muted .sound-off {
  display: inline;
}

/* Dark Theme for Tools */
.dark-theme .tools-menu {
  background: #2d2d2d;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-theme .tools-menu-item {
  color: #ffffff;
}

.dark-theme .tools-menu-item:hover {
  background: #3d3d3d;
}

/* Dark Theme */
.dark-theme {
  background-color: #1a1a1a;
  color: #ffffff;
}

.dark-theme #chatBox {
  background-color: #2d2d2d;
}

.dark-theme .message {
  background-color: #3d3d3d;
  color: #ffffff;
}

.dark-theme .message.user {
  background-color: var(--color-user-bg);
}

.dark-theme #userInput {
  background-color: #2d2d2d;
  color: #ffffff;
  border-color: #3d3d3d;
}

.dark-theme .modal-content {
  background-color: #2d2d2d;
  color: #ffffff;
}

.dark-theme .modal-content h3 {
  color: #ffffff;
}

.menu-icon {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}