/* ============================================================
   CHAT STYLES
   Chat-specific styles
   ============================================================ */

.msg{ max-width:82%; padding:var(--space-3) var(--space-4); border-radius:var(--radius-xl); line-height:var(--line-height-normal); font-size:var(--font-size-base); word-wrap:break-word; animation:fadeUp var(--duration-normal) var(--ease-out); position:relative; }
.msg.user{ align-self:flex-end; background:var(--color-warning); color:#fff; border-bottom-right-radius:var(--radius-sm); }
.msg.ai{ align-self:flex-start; background:var(--color-bg-card); border:1px solid var(--color-border); border-bottom-left-radius:var(--radius-sm); color:var(--color-text-primary); display:flex; gap:var(--space-3); }
.msg.ai .ai-avatar{
  width:var(--size-avatar-md); height:var(--size-avatar-md); border-radius:var(--radius-full);
  background:linear-gradient(135deg, var(--color-brand-primary) 0%, var(--color-brand-hover) 100%);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--font-size-base); flex-shrink:0;
}
.msg.ai .ai-content{ flex:1; }
.msg .msg-timestamp{
  display:block; margin-top:var(--space-2); font-size:var(--font-size-xs); color:var(--color-text-tertiary);
}
.msg.user .msg-timestamp{ text-align:right; }
.msg.user .read-indicator{
  display:inline-flex; gap:var(--space-1); margin-left:var(--space-1); font-size:var(--font-size-xs); color:var(--color-text-secondary);
}
/* Document-to-reels setup */
.msg.ai.difficulty-selection{
  width:min(100%, 760px); max-width:100%; padding:var(--space-6);
  border-radius:var(--radius-xl); border-color:color-mix(in srgb, var(--color-brand-primary) 26%, var(--color-border));
  background:linear-gradient(135deg, var(--color-bg-card), var(--color-bg-secondary)); display:block;
}
.difficulty-header{ margin-bottom:var(--space-5); }
.difficulty-header h3{ margin:0 0 var(--space-2); color:var(--color-text-primary); font-size:var(--font-size-xl); }
.difficulty-hint{ margin:0; color:var(--color-text-secondary); line-height:var(--line-height-relaxed); }
.difficulty-options{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-3); }
.difficulty-option{
  min-height:148px; padding:var(--space-5); text-align:left; border:1px solid var(--color-border); border-radius:var(--radius-lg);
  background:var(--color-bg); color:var(--color-text-primary); cursor:pointer; font-family:var(--font-family-sans);
  transition:transform var(--duration-normal) var(--ease-out), border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out);
}
.difficulty-option:hover, .difficulty-option:focus-visible{ transform:translateY(-3px); border-color:var(--color-brand-primary); box-shadow:0 12px 28px color-mix(in srgb, var(--color-brand-primary) 16%, transparent); outline:none; }
.difficulty-icon{ margin-bottom:var(--space-3); font-size:var(--font-size-xl); }
.difficulty-title{ margin-bottom:var(--space-2); font-size:var(--font-size-md); font-weight:var(--font-weight-bold); }
.difficulty-desc{ color:var(--color-text-secondary); font-size:var(--font-size-sm); line-height:var(--line-height-normal); }
.difficulty-detail{ margin-top:var(--space-3); color:var(--color-brand-primary); font-size:var(--font-size-xs); font-weight:var(--font-weight-semibold); }
@media (max-width:700px){ .msg.ai.difficulty-selection{ padding:var(--space-4); } .difficulty-options{ grid-template-columns:1fr; } .difficulty-option{ min-height:0; } }

.msg .tree-badge{
  display:inline-flex; align-items:center; gap:var(--space-1); margin-top:var(--space-2);
  font-family:var(--font-family-sans); font-size:var(--font-size-xs); font-weight:var(--font-weight-medium);
  background:var(--color-success-subtle); color:var(--color-success); padding:var(--space-1) var(--space-3); border-radius:var(--radius-full);
  border:1px solid rgba(16,185,129,0.3);
}

/* Clarification Actions */
.clarification-actions{
  display:flex; justify-content:center; padding:var(--space-2) var(--space-4); gap:var(--space-2);
  animation:fadeUp var(--duration-normal) var(--ease-out);
}

.skip-clarification-btn{
  background:var(--color-bg-card); border:1px solid var(--color-border);
  color:var(--color-text-primary); padding:var(--space-2) var(--space-4); border-radius:var(--radius-md);
  font-family:var(--font-family-sans); font-size:var(--font-size-sm); font-weight:var(--font-weight-medium);
  cursor:pointer; transition:all var(--duration-normal) var(--ease-out);
}

.skip-clarification-btn:hover{
  background:var(--color-border); border-color:var(--color-text-secondary);
}

.skip-clarification-btn:active{
  transform:scale(0.98);
}

/* Microphone Button */
.mic-btn {
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  width: 44px;
  height: 44px;
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-out);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.mic-btn:hover {
  border-color: var(--color-brand-primary);
  color: var(--color-brand-primary);
  background: var(--color-brand-subtle);
}

.mic-btn:active {
  transform: scale(0.95);
}

.mic-btn.recording {
  background: var(--color-error);
  color: white;
  border-color: var(--color-error);
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@media (max-width: 700px) {
  .mic-btn {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-sm);
  }
}