/* ========================================
   CHAT APPLICATION STYLES
   ======================================== */

/* Note: Animations moved to animations.css for shared use */

/* ========================================
   ACCESSIBILITY - FOCUS INDICATORS
   ======================================== */

/* Focus indicators for interactive elements */
button:focus,
input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--border-focus, #2196F3);
  outline-offset: 2px;
}

/* Remove focus outline for non-keyboard focus */
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}

/* Ensure focus is visible for keyboard navigation */
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--border-focus, #2196F3);
  outline-offset: 2px;
}

/* Focus indicators for sermon items */
#sermonList .sermon-item:focus {
  outline: 2px solid var(--border-focus, #2196F3);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Focus indicators for buttons */
#sendButton:focus,
#resubmitButton:focus,
#cancelButton:focus {
  outline: 2px solid var(--border-focus, #2196F3);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ========================================
   TOUCH TARGET IMPROVEMENTS
   ======================================== */

/* Ensure minimum touch target sizes (44px x 44px) */
#sendButton,
#resubmitButton,
#cancelButton {
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-sm, 8px);
}

body.progress-active {
  overflow: hidden;
}

body.progress-active::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 1400;
}

#progressContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1501;
  width: min(90vw, 640px);
  max-height: 80vh;
  overflow-y: auto;
  margin: 0;
}

/* Touch target improvements for sermon items */
#sermonList .sermon-item {
  min-height: 44px;
  padding: var(--spacing-sm, 8px);
  cursor: pointer;
}

/* Touch target for checkboxes */
#sermonList .sermon-item input[type="checkbox"] {
  min-width: 20px;
  min-height: 20px;
  margin: var(--spacing-xs, 4px);
}

/* Improve touch targets for mobile devices */
@media (max-width: 768px) {
  #sendButton,
  #resubmitButton,
  #cancelButton {
    min-width: 48px;
    min-height: 48px;
    padding: var(--spacing-md, 12px);
  }
  
  #sermonList .sermon-item {
    min-height: 48px;
    padding: var(--spacing-md, 12px);
  }
  
  #userInput {
    font-size: 16px; /* Prevents zoom on iOS */
  }
  
  /* Mobile responsive layout for Ask the Message page */
  .w-64 {
    width: 0;
    overflow: hidden;
    transition: width 0.3s ease;
  }
  
  .w-64.mobile-sidebar-open {
    width: 256px;
    position: fixed;
    z-index: 1000;
    height: 100vh;
    background: var(--bg-primary, white);
    box-shadow: 2px 0 10px rgba(0,0,0,0.1);
  }
  
  /* Main content takes full width on mobile */
  .flex-1 {
    width: 100%;
  }
  
  /* Progress container adjustments for mobile */
  #progressContainer {
    width: calc(100vw - 2rem);
    max-width: calc(100vw - 2rem);
  }
  
  /* Mobile-specific input area */
  .p-4.border-t {
    padding: var(--spacing-sm, 0.5rem);
  }
  
  /* Chat messages mobile adjustments */
  #chatMessages {
    padding: var(--spacing-sm, 0.5rem);
  }
  
  .assistant-message {
    margin: var(--spacing-sm, 0.5rem) 0;
    padding: var(--spacing-md, 1rem);
  }
}

/* ========================================
   MOBILE NAVIGATION HEADER
   ======================================== */

/* Mobile header - hidden on desktop */
.mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-sm, 8px) var(--spacing-md, 12px);
  background: var(--bg-primary, white);
  border-bottom: 1px solid var(--border-primary, #e0e0e0);
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile-title {
  font-size: var(--font-size-lg, 18px);
  font-weight: 600;
  margin: 0;
  color: var(--text-primary, #333);
}

.mobile-sidebar-toggle,
.mobile-theme-toggle {
  background: none;
  border: none;
  padding: var(--spacing-sm, 8px);
  border-radius: var(--radius-sm, 4px);
  cursor: pointer;
  color: var(--text-primary, #333);
  transition: background-color var(--transition-normal, 0.3s);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-sidebar-toggle:hover,
.mobile-theme-toggle:hover {
  background-color: var(--bg-tertiary, #f5f5f5);
}

.mobile-sidebar-toggle:focus,
.mobile-theme-toggle:focus {
  outline: 2px solid var(--border-focus, #2196F3);
  outline-offset: 2px;
}

/* Mobile sidebar overlay */
.mobile-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-normal, 0.3s), visibility var(--transition-normal, 0.3s);
}

.mobile-sidebar-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Prevent body scroll when sidebar is open */
body.sidebar-open {
  overflow: hidden;
}

/* Show mobile header and adjust layout on mobile */
@media (max-width: 768px) {
  .mobile-header {
    display: flex;
  }
  
  /* Adjust chat messages to account for mobile header */
  #chatMessages {
    padding-top: var(--spacing-sm, 8px);
  }
  
  /* Enhanced mobile sidebar behavior */
  .w-64 {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 1000;
    background: var(--bg-primary, white);
    transition: transform var(--transition-normal, 0.3s);
    transform: translateX(-100%);
  }
  
  .w-64.mobile-sidebar-open {
    transform: translateX(0);
  }
  
  /* Adjust main content on mobile */
  main.flex-1 {
    width: 100%;
  }
}

/* ========================================
   CHAT MESSAGE FORMATTING
   ======================================== */

/* Main assistant message container */
.assistant-message {
  background-color: #ffffff;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  margin: 1rem 0;
  width: 100%;
  max-width: 48rem;
  box-sizing: border-box;
}

/* Assistant message headings */
.assistant-message h1 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  color: #1f2937;
  border-bottom: 1px solid #e5e7eb;
  padding-bottom: 0.375rem;
}

.assistant-message h2 {
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  color: #374151;
}

.assistant-message h3 {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
  margin-top: 0.75rem;
  margin-bottom: 0.5rem;
  color: #4b5563;
}

.assistant-message h4,
.assistant-message h5,
.assistant-message h6 {
  font-size: 0.9375rem;
  line-height: 1.5rem;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.375rem;
  color: #6b7280;
}

/* Sermon/source lists at end of responses - compact styling */
.assistant-message ul li strong,
.assistant-message ol li strong {
  font-size: 0.875rem;
  font-weight: 600;
}

/* Compact list styling for sermon references */
.assistant-message ul + h1,
.assistant-message ul + h2,
.assistant-message ol + h1,
.assistant-message ol + h2 {
  margin-top: 0.75rem;
}

/* Assistant message paragraphs */
.assistant-message p {
  margin-bottom: 0.75rem;
  color: #374151;
  line-height: 1.625;
}

/* Assistant message lists */
.assistant-message ul {
  list-style-type: disc;
  padding-left: 1.5rem;
  margin-bottom: 0.75rem;
}

.assistant-message li {
  margin-bottom: 0.25rem;
  color: #374151;
}

/* ========================================
   SERMON LIST SIDEBAR
   ======================================== */

/* Individual sermon items in the sidebar */
#sermonList .sermon-item {
  display: flex;
  align-items: flex-start;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

#sermonList .sermon-item:hover {
  background-color: #f9fafb;
}

/* Sermon item checkboxes */
#sermonList .sermon-item input[type="checkbox"] {
  margin-top: 0.25rem;
  margin-right: 0.5rem;
}

/* Sermon item labels with text truncation */
#sermonList .sermon-item label {
  font-size: 0.75rem;
  line-height: 1.25;
  color: #374151;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* ========================================
   JUMP TO LATEST BUTTON
   ======================================== */

#jump-to-latest {
  transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease;
}

#studyToolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

#studyToolbar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

#studyToolbar input,
#studyToolbar select {
  min-width: 140px;
  padding: 6px 8px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}

#studyToolbar button {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  background: #f9fafb;
  white-space: nowrap;
}

#studyToolbar label input {
  margin-right: 4px;
}

#studyInfoPanel {
  max-width: 420px;
  display: none;
}

#studyInfoPanel.visible {
  display: block;
}

#studyInfoPanel.hidden {
  display: none;
}

#studyToolbar .guided-btn {
  background: #f3f4f6;
}