/* Chat widget styles - matches template-chat-partner.php design and blends with TOC */
:root {
  --cb-light-green: #9ecc8b;
  --cb-alt-new: #74806D;
  --cb-prime: #363C33;
  --cb-white: #ffffff;
  --cb-white-alt: #F2F4F1;
  --cb-grey-light: #e5e5e5;
  --cb-black-text: #121212;
  --cb-border-radius: 12px;
  --cb-border-radius-lg: 16px;
  --cb-thread-h: 420px;
}

/* Override card to blend with TOC (no extra styling) */
.otslr-chat-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Remove dark header background - let TOC tabs handle styling */
.otslr-chat-card .otslr-summary__header {
  background: transparent !important;
  color: var(--cb-black-text) !important;
  padding: 0;
  border-bottom: none;
  margin-bottom: 0;
}

.otslr-chat-card .otslr-summary__title {
  display: none; /* Title handled by tab */
}

/* Minimal padding on inner container */
.otslr-chat-card .otslr-summary__inner {
  padding: calc(var(--vertical_rythm, 7px) * 2);
}

/* Thread */
.otslr-chat-thread {
  max-height: var(--cb-thread-h);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: calc(var(--vertical_rythm, 7px) * 2);
  scrollbar-width: thin;
  background: transparent;
}
.otslr-chat-thread::-webkit-scrollbar { width: 6px; }
.otslr-chat-thread::-webkit-scrollbar-thumb { 
  background: var(--cb-grey-light); 
  border-radius: 3px;
}
.otslr-chat-thread::-webkit-scrollbar-thumb:hover { 
  background: var(--cb-alt-new);
}

/* Message rows */
.otslr-chat-row { 
  display: flex; 
  gap: 12px; 
  align-items: flex-start;
  margin-bottom: 14px;
}
.otslr-chat-row.assistant { 
  justify-content: flex-start;
}
.otslr-chat-row.user { 
  justify-content: flex-end;
  flex-direction: row-reverse;
}

/* Message bubble - matches template-chat-partner.php */
.otslr-chat-bubble {
  max-width: 70%;
  padding: 1rem 1.25rem;
  border-radius: var(--cb-border-radius-lg);
  font-family: var(--body_font, 'TT Commons Pro', system-ui, sans-serif);
  font-weight: 500;
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
  animation: cb-pop 0.2s ease-out;
}

/* Assistant bubble (white with border, tail on bottom-left) */
.otslr-chat-row.assistant .otslr-chat-bubble {
  background: var(--cb-white);
  color: var(--cb-black-text);
  border: 1px solid var(--cb-grey-light);
  border-bottom-left-radius: 0.25rem;
}

/* User bubble (light green, tail on bottom-right) */
.otslr-chat-row.user .otslr-chat-bubble {
  background: var(--cb-light-green);
  color: var(--cb-black-text);
  border-bottom-right-radius: 0.25rem;
}

/* Enhanced formatting for assistant responses */
.otslr-chat-row.assistant .otslr-chat-bubble p {
  margin: 0 0 0.75rem 0;
}

.otslr-chat-row.assistant .otslr-chat-bubble p:last-child {
  margin-bottom: 0;
}

.otslr-chat-row.assistant .otslr-chat-bubble strong {
  font-weight: 600;
  color: var(--cb-alt-new);
}

.otslr-chat-row.assistant .otslr-chat-bubble em {
  font-style: italic;
  color: var(--cb-alt-new);
}

/* Error styling */
.otslr-chat-bubble.is-error { 
  background: #ffe4e6;
  color: #7f1d1d;
  border: 1px solid #fecaca;
  align-self: center;
  max-width: 90%;
}

/* Typing indicator */
.otslr-chat-row.assistant.ghost .otslr-chat-bubble {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
  min-width: 60px;
  min-height: 24px;
  padding: 0.75rem 1rem;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cb-alt-new);
  animation: cb-dot 1.4s infinite ease-in-out;
  opacity: 0.6;
}
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes cb-dot { 
  0%, 60%, 100% { 
    transform: translateY(0); 
    opacity: 0.4;
  } 
  30% { 
    transform: translateY(-6px); 
    opacity: 1;
  } 
}

@keyframes cb-pop { 
  from { 
    transform: scale(0.95); 
    opacity: 0;
  } 
  to { 
    transform: scale(1); 
    opacity: 1;
  } 
}

/* Composer */
.otslr-chat-composer { 
  display: flex; 
  gap: 10px; 
  padding: calc(var(--vertical_rythm, 7px) * 2);
  padding-top: calc(var(--vertical_rythm, 7px) * 1);
}

#otslr-chat-input {
  flex: 1;
  height: 42px;
  border-radius: 10px;
  border: 1px solid var(--cb-grey-light);
  padding: 0 14px;
  outline: none;
  background: var(--cb-white);
  font-family: var(--body_font, 'TT Commons Pro', system-ui, sans-serif);
  font-size: 15px;
  transition: border-color 0.15s, box-shadow 0.15s;
}

#otslr-chat-input:focus { 
  border-color: var(--cb-alt-new);
  box-shadow: 0 0 0 3px rgba(116, 128, 109, 0.15);
}

#otslr-chat-send.otslr-btn {
  min-width: 80px;
  height: 42px;
  border-radius: 10px;
  border: none;
  background: var(--cb-alt-new);
  color: var(--cb-white);
  font-weight: 600;
  font-family: var(--body_font, 'TT Commons Pro', system-ui, sans-serif);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.2s ease;
}

#otslr-chat-send.otslr-btn:hover { 
  background: var(--cb-prime);
  transform: translateY(-1px);
}

#otslr-chat-send.otslr-btn:active { 
  transform: translateY(0);
}

#otslr-chat-send.otslr-btn:focus-visible { 
  outline: none;
  box-shadow: 0 0 0 3px rgba(116, 128, 109, 0.3);
}

.otslr-btn.is-busy { 
  opacity: 0.7;
  cursor: progress;
}

/* Mobile responsiveness */
@media (max-width: 560px) { 
  .otslr-chat-bubble { 
    max-width: 85%;
  }
  
  .otslr-chat-thread {
    padding: calc(var(--vertical_rythm, 7px) * 1.5);
  }
}