/* .chat-fab estilos movidos para .dock-btn-chat em components.css */

/* =============================================
   CHAT PANEL
   ============================================= */
.chat-panel {
  position:        fixed;
  bottom:          0;
  right:           0;
  width:           380px;
  height:          calc(100vh - 62px);
  background:      rgba(10,10,22,0.97);
  backdrop-filter: blur(24px);
  border-left:     1px solid var(--border-h);
  display:         flex;
  flex-direction:  column;
  z-index:         250;
  animation:       slideInRight .28s ease;
}
.chat-panel.hidden { display: none; }

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

.chat-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 18px;
  border-bottom:   1px solid var(--border);
  flex-shrink:     0;
}
.chat-title {
  display:     flex;
  align-items: center;
  gap:         9px;
  font-weight: 600;
  font-size:   .9rem;
}
.chat-actions    { display: flex; gap: 6px; }
.chat-action-btn {
  background:    none;
  border:        none;
  color:         var(--text-2);
  cursor:        pointer;
  padding:       5px 8px;
  border-radius: 7px;
  font-size:     .9rem;
  transition:    all .2s;
}
.chat-action-btn:hover { background: var(--bg-card-h); color: var(--text); }

/* =============================================
   CHAT MESSAGES
   ============================================= */
.chat-messages {
  flex:           1;
  overflow-y:     auto;
  padding:        16px;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.chat-welcome {
  text-align:  center;
  padding:     24px 16px;
  color:       var(--text-2);
  font-size:   .86rem;
  line-height: 1.6;
}
.chat-welcome-icon { font-size: 2rem; margin-bottom: 10px; }

.chat-msg           { display: flex; flex-direction: column; }
.chat-msg-user      { align-items: flex-end; }
.chat-msg-assistant,
.chat-msg-error     { align-items: flex-start; }

.chat-bubble {
  max-width:    88%;
  padding:      10px 14px;
  border-radius: 14px;
  font-size:    .86rem;
  line-height:  1.55;
  word-break:   break-word;
}
.user-bubble {
  background:           linear-gradient(135deg, var(--purple), #2563eb);
  color:                #fff;
  border-bottom-right-radius: 4px;
}
.ai-bubble {
  background:          rgba(255,255,255,.07);
  color:               var(--text);
  border:              1px solid var(--border);
  border-bottom-left-radius: 4px;
}
.ai-bubble strong { color: #fff; }
.ai-bubble em     { color: var(--text-2); font-style: italic; }
.ai-bubble code   { background: rgba(255,255,255,.1); padding: 1px 5px; border-radius: 4px; font-size: .82rem; }

.error-bubble {
  background:          rgba(239,68,68,.12);
  color:               #f87171;
  border:              1px solid rgba(239,68,68,.2);
  border-bottom-left-radius: 4px;
  font-size:           .82rem;
}

[data-theme="light"] .ai-bubble        { background: rgba(0,0,0,.04); border-color: var(--border); }
[data-theme="light"] .ai-bubble strong { color: var(--text); }
[data-theme="light"] .ai-bubble code   { background: rgba(0,0,0,.07); }
[data-theme="light"] .chat-typing      { background: rgba(0,0,0,.04); border-color: var(--border); }
[data-theme="light"] .chat-panel       { background: rgba(238,242,247,0.98); border-left-color: var(--border); }

/* Typing indicator */
.chat-typing {
  display:             flex;
  gap:                 5px;
  align-items:         center;
  padding:             12px 14px;
  background:          rgba(255,255,255,.07);
  border:              1px solid var(--border);
  border-radius:       14px;
  border-bottom-left-radius: 4px;
  width:               fit-content;
}
.typing-dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--text-2);
  animation:     typingBounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }
@keyframes typingBounce {
  0%,60%,100% { transform: translateY(0); opacity: .4; }
  30%         { transform: translateY(-5px); opacity: 1; }
}

/* =============================================
   CHAT INPUT
   ============================================= */
.chat-input-area {
  display:    flex;
  gap:        8px;
  padding:    14px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-input-area input {
  flex:          1;
  background:    rgba(255,255,255,.06);
  border:        1px solid var(--border);
  border-radius: var(--r-sm);
  color:         var(--text);
  padding:       10px 14px;
  font-family:   var(--font);
  font-size:     .88rem;
  outline:       none;
  transition:    border-color .2s;
}
.chat-input-area input:focus       { border-color: var(--purple); }
.chat-input-area input::placeholder { color: var(--text-3); }

.btn-send {
  width:           40px;
  height:          40px;
  border-radius:   var(--r-sm);
  background:      linear-gradient(135deg, var(--purple), #2563eb);
  border:          none;
  color:           #fff;
  font-size:       1rem;
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  transition:      opacity .2s;
}
.btn-send:hover:not(:disabled) { opacity: .85; }
.btn-send:disabled             { opacity: .4; cursor: not-allowed; }

/* =============================================
   RESPONSIVE CHAT
   ============================================= */
@media (max-width: 900px) {
  .chat-panel { width: 100%; height: calc(100vh - 62px); border-left: none; border-top: 1px solid var(--border-h); }
}