.typing-indicator {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  background-color: #e9ecef;
  padding: 6px 10px;
  border-radius: 20px;
  min-width: 24px;
}

.typing-indicator span {
  height: 6px;
  width: 6px;
  background-color: #93989b;
  display: inline-block;
  border-radius: 50%;
  margin: 0 1px;
  animation: bounce 1.3s linear infinite;
  flex-shrink: 0;
}

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

/* Default height for the chat window bottom spacer */
#chat-window-bottom-spacer {
  height: 0px !important; /* Desktop default: Explicitly 0px and important. Space managed by other paddings. */
}

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-4px); }
}

.message-container {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1rem;
  max-width: 100%;
}

@media (min-width: 768px) {
  div[data-controller="chat"].card {
    max-width: 880px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .message-container {
    max-width: 650px; /* Increased from 550px */
  }
  /* .card rule below is now less specific, div[data-controller="chat"].card takes precedence for the chat UI */
  /* .card { max-width: 1000px !important; margin: 0 auto; } */

  /* Ensure chat input container is correctly positioned on desktop */
  .chat-input-card-footer {
    position: sticky !important; /* Changed to sticky */
    bottom: 0 !important;
    left: 0 !important; /* Explicitly set left to 0 */
    width: 100% !important;
    z-index: 10 !important; /* Ensure it's above content */
    background-color: #fff !important; /* Ensure background for sticky element */
  }

  .elber .message-content {
    width: auto !important; /* Changed from fixed 480px */
    min-width: 300px; /* Optional minimum width */
    transition: none !important;
  }

  /* REMOVED chat-input-card-footer margin reset as it's no longer needed
  .chat-input-card-footer {
    margin-bottom: 0px !important;
  }
  */

  /* Rule for #chat-window-bottom-spacer removed from (min-width: 768px) as it should use the default or be set by JS */

  /* Add padding-bottom to prevent content from being hidden by sticky input */
  /* This value should be roughly the height of .chat-input-card-footer */
  #chat-window {
    padding-top: 1.5rem; /* Ensure top padding is consistent */
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 70px !important; /* For sticky input - RESTORED */
  }
}

@media (max-width: 767px) {
  .message-container {
    max-width: 95%;
  }
  .container-fluid { /* This might need review if it's too global */
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .card { /* This applies to the .card from _chat_interface.html.erb */
    margin: 0;
    border-radius: 0;
  }
  /* Reduce padding on the main turbo-frame for mobile to give more space */
  turbo-frame#main_content {
    padding: 0.5rem !important; /* Restore original padding-bottom by removing the calc() */
  }

  #chat-window {
    padding-left: 0.5rem !important; /* Reduce side padding */
    padding-right: 0.5rem !important; /* Reduce side padding */
    /* padding-top is 0 from global, padding-bottom is dynamic + base */
    width: 100%; /* Ensure it tries to fill parent */
    box-sizing: border-box; /* Be explicit */
    /* font-size: 16px; /* Ensure base font size for chat window content is legible if needed */
  }

  /* Target the chat input textarea specifically on mobile to prevent auto-zoom */
  .input-group .form-control,
  textarea#chatInput { /* If your textarea has id=chatInput */
    font-size: 16px !important; /* Prevents iOS Safari auto-zoom */
    /* Optionally, adjust line-height if needed with larger font */
    /* line-height: 1.4; */
  }

  /* If chat is wrapped in a container-fluid directly under turbo-frame, remove its padding */
  turbo-frame#main_content > .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Style the main chat card for mobile: edge-to-edge, no side borders/shadow */
  /* This targets the chat card specifically when it's within #main_content on mobile */
  #main_content .card[data-controller="chat"] {
    width: 100% !important;
    max-width: 100% !important; /* Ensure it doesn't try to expand beyond container */
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    /* Keep top/bottom borders from the general #main_content .card rule if desired, or set them explicitly */
    /* border-top: 1px solid #edf2f7 !important; */
    /* border-bottom: 1px solid #edf2f7 !important; */
    box-shadow: none !important;
    overflow-x: hidden !important; /* Prevent card's own content from causing horizontal scroll */
  }

  /* Existing message container style */
  .message-container {
    max-width: 100%; /* Let messages use full width within chat-window's new padding */
                     /* Individual .message-content still has its own padding for text */
  }

  /* Removed the general .container-fluid padding override from here, */
  /* as it's now handled more specifically for turbo-frame#main_content > .container-fluid */
  /* .container-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  } */

  /* Fallback height for the bottom spacer in the chat window on mobile */
  /* JavaScript will usually override this when the fixed input is active. */
  #chat-window-bottom-spacer {
    height: 40px; /* Removed !important, this is a fallback */
  }
}

.message-container.user {
  margin-left: auto;
  flex-direction: row-reverse;
}

.message-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  margin: 0 10px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
}

.message-avatar.elber-avatar {
  background-image: url(/assets/elber-avatar-b98e711ebfc3758b16b15093cf8d85c5a2ab8e3327123be995351fa3609b0fb5.png);
}

.message-avatar svg {
  width: 100%;
  height: 100%;
}

.message-content {
  padding: 12px 16px;
  border-radius: 20px;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: calc(100% - 90px);
}

.message-content a {
  color: #0095ff;
  text-decoration: underline;
}

.message-content a:hover,
.message-content a:focus {
  color: #0077cc;
  text-decoration: none;
}

.user .message-content {
  background-color: #007bff;
  color: white;
  border-top-right-radius: 4px;
}

.elber .message-content {
  background-color: #e9ecef;
  color: #2d3748;
  border-top-left-radius: 4px;
  width: auto; /* Default to auto, will be overridden for larger screens */
  transition: none !important; /* Ensure no transition on width/height */
}

.user .message-content a {
  color: #ADD8E6; /* Light blue for better contrast on dark blue background */
}

.user .message-content a:hover,
.user .message-content a:focus {
  color: #87CEEB; /* Sky blue for hover/focus, slightly darker than #ADD8E6 */
  text-decoration: underline; /* Keep underline on hover for user messages for clarity */
}

#chat-window {
  background: transparent !important;
  padding: 0 1.5rem 1.5rem 1.5rem; /* Remove top padding, keep sides and bottom */
  height: 70vh; /* RESTORED - Let flexbox determine height - Forcing height as it helps scrolling */
  overflow-y: scroll;
  flex-grow: 1; /* Ensure it's explicitly set here too if inline style is ever removed */
  min-height: 0; /* Crucial for flex children that scroll */
}

#chat-window .message-container:first-child {
  margin-top: 2.5rem; /* Add margin above the first message for clean separation */
}

.chat-message {
  margin: 0;
  line-height: 1;
  font-size: 1rem;
}

.chat-message code {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 2px 4px;
  border-radius: 4px;
}

.user .chat-message code {
  background-color: rgba(255, 255, 255, 0.2);
}

/* General .card styles from the original inline styles.
   These will apply to the .card within _chat_interface.html.erb */
.card {
  background: #fff !important;
  border: none !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  border-radius: 18px !important;
}

.card-header {
  background-color: #fff;
  border-bottom: 1px solid #edf2f7;
  padding: 1.5rem 1rem; /* Even vertical padding for balanced header */
  text-align: center; /* Center the header content */
  justify-content: center !important; /* Center flex children horizontally */
  margin-bottom: 0;
}

.input-group {
  display: flex;
  align-items: center;
  gap: 8px; /* Add space between input and button */
  background-color: #fff;
  border-radius: 20px;
  padding: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.input-group .form-control {
  border-radius: 20px 0 0 20px !important; /* Only left side rounded */
  flex: 1;
}

.input-group .btn {
  border-radius: 0 20px 20px 0 !important; /* Only right side rounded */
  margin-left: 0; /* gap handles spacing */
}

.form-control {
  border: none;
  padding: 8px 12px;
  border-radius: 20px !important;
  background-color: #f8f9fa;
  max-height: 150px;
  overflow-y: auto;
}

/* Minimal markdown styles - let browser defaults handle most formatting */
.message-content pre {
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  overflow-x: auto;
}

/* === New Global Layout Styles === */

/* Add html base styles */
html {
  height: 100%;
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

/* Replace previous body style from home/index */
body {
  display: flex;
  flex-direction: column;
  height: 100dvh; /* Changed from 100vh to 100dvh for dynamic viewport height */
  margin: 0; /* Reset default body margin */
  background-color: #f8f9fa; /* Set to light gray for overall page background */
}

#main_header_container {
  flex-shrink: 0; /* Prevent header from shrinking */
  /* The header partial (_main_header.html.erb) uses Bootstrap card-header, which has its own padding and border.
     If specific height or z-index is needed, it can be added here or in _main_header.html.erb itself. */
}

#main_app_content_wrapper {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  overflow: hidden; /* Changed from overflow-y: hidden - prevent scrollbars on wrapper, rely on children */
  /* padding: 1rem; /* Optional: if you want padding around the turbo-frame itself */
}

turbo-frame#main_content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  width: 100%;
  padding: 1rem; /* Add padding here to affect both chat and profile consistently */
}

/* Adjust previous .container-fluid style from home/index.
   This new rule is more specific to a .container-fluid when it IS the turbo-frame content.*/
turbo-frame#main_content.container-fluid {
    padding: 0; /* Reset padding as the turbo-frame#main_content now has it, or adjust as needed */
    /* height: 100%; /* It will already be 100% due to flex-grow on turbo-frame and its parent */
}

/* If a .container-fluid is a CHILD of turbo-frame#main_content (e.g., home/index.html.erb has this structure) */
turbo-frame#main_content > .container-fluid {
  display: flex;
  flex-direction: column;
  flex-grow: 1; /* Ensure it grows to fill the turbo-frame */
  height: 100%; /* Make it fill the turbo-frame height */
  width: 100%;
  /* padding: 1rem; /* Or keep its Bootstrap padding if needed - mobile CSS handles this */
}


/* Ensure cards within the main content area can expand */
/* For profile page: turbo-frame.container-fluid > div.card */
turbo-frame#main_content.container-fluid > .card,
/* For chat page: turbo-frame > div.container-fluid > div.card */
turbo-frame#main_content > .container-fluid > .card {
  flex-grow: 1;
  display: flex; /* Make the card itself a flex container */
  flex-direction: column; /* Stack its children (header, chat-window, input) vertically */
  margin-top: 0 !important; /* Override previous margin-top for cards in main content */
  border: none !important; /* Override previous border for cards in main content */
  box-shadow: none !important; /* Override previous box-shadow for cards in main content */
}

turbo-frame#main_content.container-fluid > .card > .card-body,
turbo-frame#main_content > .container-fluid > .card > .card-body {
  flex-grow: 1;
  display: flex; /* To help center if content is smaller */
  flex-direction: column; /* Stack content vertically */
}

/* Remove or comment out old conflicting styles */
/*
body { // This was in home/index, might be too global here
  background-color: #f4f7f6;
  padding-top: 1rem;
}

.container-fluid { // This was in home/index, potentially too global or conflicts with bootstrap
  display: flex; // This flex setting might be specific to homepage layout
  flex-direction: column; // This flex setting might be specific to homepage layout
  height: calc(100vh - 2rem); // This height might be specific to homepage layout
}
*/

.chat-input-container { /* This was in home/index */
  padding: 1rem;
  border-top: 1px solid #edf2f7;
  background-color: #fff;
}

.input-group { /* This was redefined in home/index, merged with above */
  width: 100%;
}

.avatar-actions { /* This was in home/index */
  display: flex;
  align-items: center;
}

.user-avatar-nav { /* This was in home/index */
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #e9ecef; /* Default background if image fails */
  background-size: cover;
  background-position: center;
  cursor: pointer;
  margin-left: 10px;
}

/* Media query for smaller screens from home/index.html.erb */
@media (max-width: 576px) {
  #chat-window { height: calc(100vh - 150px); }
  .form-control { font-size: 0.9rem; }
  .btn { font-size: 0.9rem; padding: 0.375rem 0.75rem; }
}

/* New style for the message container when it's for the typing indicator */
.message-container.message-container--typing {
  align-items: center;
}
/* ENSURE NO OTHER STYLES FOR .message-container--typing or #typing_indicator_message_container EXIST BELOW THIS LINE */

/* Make chat card flat and transparent in main content area */
#main_content .container-fluid > .card,
#main_content .card,
#main_content .card .card-body,
#main_content #chat-window { /* THIS TARGETS #chat-window */
  background: #fff !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08) !important;
  border: 1px solid #edf2f7 !important;
}

/* Line 447-449 - Temporarily comment out to restore other paddings */
/*
#main_content #chat-window {
  padding: 0 !important;
}
*/

/* FORCE main app header: left logo, right avatar, always full width */
#main_header_container > .card-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 1.5rem 2rem 1.5rem 2rem !important;
  background: #fff !important;
  border-bottom: 1px solid #edf2f7 !important;
  box-sizing: border-box !important;
}

/* Center the logo only when signed out (single child) */
#main_header_container > .card-header.justify-content-center {
  justify-content: center !important;
}

/* Only center the secondary chat card header, not all .card-header */
.card.chat-card-header, .card .chat-card-header {
  text-align: center;
  justify-content: center !important;
  padding: 1.5rem 1rem;
}

/* New Messages Indicator Animation */
.new-messages-indicator {
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.new-messages-indicator.visible { /* Class to be added by JS for visibility control */
  display: flex !important; /* Use flex to help center arrow */
  align-items: center;
  justify-content: center;
  opacity: 1;
  animation: pulse-bounce 1.5s infinite;
}

@keyframes pulse-bounce {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.1) translateY(-3px); /* Slight bounce up and scale */
    opacity: 1;
  }
}

/* Intake Badge Styles */
.intake-badge-container {
  position: relative;
  display: inline-block;
}

.intake-badge-button {
  position: relative;
  background: none;
  border: none;
  padding: 8px;
  border-radius: 50%;
  cursor: pointer;
  color: #6c757d;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}

.intake-badge-button:hover:not(.disabled) {
  background-color: #f8f9fa;
  color: #495057;
  transform: scale(1.05);
}

.intake-badge-button.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.intake-notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: #dc3545;
  color: white;
  border-radius: 50%;
  min-width: 18px;
  height: 18px;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Ensure :root variables are defined. --sab might be global, define here for safety. */
:root {
  --sab: env(safe-area-inset-bottom, 0px);
  --chat-input-height: 70px; /* Default/fallback height for chat input bar */
}

/* Scrollbar Styling for Webkit (Safari, Chrome) and Firefox */
#chat-window::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
#chat-window::-webkit-scrollbar-track {
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
}
#chat-window::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.3);
  border-radius: 4px;
}
#chat-window::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,0.5);
}
#chat-window {
  scrollbar-width: thin; /* For Firefox: "auto", "thin", or "none" */
  scrollbar-color: rgba(0,0,0,0.3) rgba(0,0,0,0.05); /* thumb track for Firefox */
}

/* #main_header_container rule was incomplete, removing for now or assuming it's elsewhere */