/* ============================================================================
   Capi Când-IA Pro — Chat Overrides (Fase 2)
   Aplica visual novo às classes legadas que o JS de renderização usa
   (.message-user, .message-assistant, .message-bubble, .message-avatar,
   .chat-input, .btn-send, etc.) sem mexer no JS.
   ============================================================================ */

/* ═══════════════════════ MENSAGENS ═══════════════════════ */

#chatScreen.ds-shell .chat-messages {
  padding: 16px 32px 32px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 28px !important;
  background: transparent !important;
  /* Coluna central tipo Claude/ChatGPT/Cursor (durante conversa) */
  max-width: 820px !important;
  width: 100% !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Quando welcome está aberto, libera a largura pros cards horizontais (~1740px) */
#chatScreen.ds-shell .chat-messages:has(#welcomeScreen),
#chatScreen.ds-shell .chat-messages:has(.ds-welcome) {
  max-width: 1940px !important;
}

/* Tira a linha divisória dourada entre blocos user→assistant (não é divisor de dia) */
#chatScreen.ds-shell .conv-separator {
  display: none !important;
}

/* Container de cada mensagem */
#chatScreen.ds-shell .message {
  display: flex !important;
  gap: 14px !important;
  max-width: 780px !important;
  width: auto !important;
  margin: 0 !important;
}

#chatScreen.ds-shell .message.user,
#chatScreen.ds-shell .message-user {
  align-self: flex-end !important;
  flex-direction: row-reverse !important;
  margin-left: auto !important;
}

#chatScreen.ds-shell .message-assistant {
  align-self: flex-start !important;
  margin-right: auto !important;
}

/* Avatar */
#chatScreen.ds-shell .message-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  font-family: var(--ds-font-display) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

#chatScreen.ds-shell .message-user .message-avatar,
#chatScreen.ds-shell .message.user .message-avatar {
  background: var(--ds-gold-dim) !important;
  border: 1px solid var(--ds-gold-border) !important;
  color: var(--ds-gold) !important;
}

#chatScreen.ds-shell .message-assistant .message-avatar {
  background: radial-gradient(circle, var(--ds-gold) 0%, #8B6914 100%) !important;
  box-shadow: 0 0 16px rgba(212,160,23,0.30) !important;
  border: 1px solid rgba(212,160,23,0.45) !important;
}

#chatScreen.ds-shell .message-assistant .message-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

/* Bubble */
#chatScreen.ds-shell .message-bubble {
  font-family: var(--ds-font-sans) !important;
  font-size: 14.5px !important;
  line-height: 1.7 !important;
  max-width: 100% !important;
  border: none !important;
  box-shadow: none !important;
}

#chatScreen.ds-shell .message-user .message-bubble,
#chatScreen.ds-shell .message.user .message-bubble {
  background: var(--ds-gold-dim) !important;
  border: 1px solid rgba(212,160,23,0.20) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  color: var(--ds-text) !important;
}

#chatScreen.ds-shell .message-assistant .message-bubble {
  background: transparent !important;
  color: #e8e6e3 !important;
  padding: 2px 0 !important;
  border-radius: 0 !important;
}

#chatScreen.ds-shell .message-bubble strong {
  color: inherit;
  font-weight: 600;
}

#chatScreen.ds-shell .message-assistant .message-bubble strong {
  color: var(--ds-gold) !important;
}

#chatScreen.ds-shell .message-bubble em {
  font-style: italic;
  opacity: 0.9;
}

#chatScreen.ds-shell .message-bubble ul,
#chatScreen.ds-shell .message-bubble ol {
  margin: 8px 0 8px 22px;
}

#chatScreen.ds-shell .message-bubble code:not(pre code) {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 1px 6px;
  font-family: var(--ds-font-mono);
  font-size: 0.88em;
  color: var(--ds-gold);
}

#chatScreen.ds-shell .message-bubble pre {
  background: #1a1a1a !important;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--ds-radius-md);
  padding: 14px 16px;
  font-family: var(--ds-font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: #e8e6e3;
  margin: 6px 0;
  overflow-x: auto;
}

#chatScreen.ds-shell .message-bubble pre code {
  background: transparent !important;
  padding: 0 !important;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border: none;
}

/* ═══════════ Timestamp (msg-timestamp) ═══════════ */
#chatScreen.ds-shell .msg-timestamp {
  font-family: var(--ds-font-mono) !important;
  font-size: 10px !important;
  color: var(--ds-text-muted) !important;
  opacity: 0.7 !important;
  margin-top: 8px !important;
  letter-spacing: 0.04em !important;
}

/* ═══════════ Msg actions (JS-rendered: .msg-actions + .msg-action-btn) ═══════════ */
#chatScreen.ds-shell .msg-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 8px !important;
  align-items: center !important;
}

/* Botão base de ação (pill rounded) */
#chatScreen.ds-shell .msg-action-btn {
  padding: 5px 11px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--ds-radius-full) !important;
  color: var(--ds-text-2) !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  letter-spacing: 0 !important;
  font-family: var(--ds-font-sans) !important;
  line-height: 1.4 !important;
}

#chatScreen.ds-shell .msg-action-btn svg {
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  stroke: currentColor;
}

/* Loader spinner anim (usado no estado .tts-loading) */
.ds-spin { animation: ds-spin 0.7s linear infinite; transform-origin: center }
@keyframes ds-spin { to { transform: rotate(360deg) } }

#chatScreen.ds-shell .msg-action-btn:hover {
  border-color: var(--ds-gold-border) !important;
  color: var(--ds-gold) !important;
  background: var(--ds-gold-dim) !important;
}

/* Estado "copiado" (✓ feedback) */
#chatScreen.ds-shell .msg-action-btn.copied {
  border-color: rgba(74,222,128,0.30) !important;
  color: var(--ds-success) !important;
  background: rgba(74,222,128,0.08) !important;
}

/* TTS Ouvir — estado loading + playing */
#chatScreen.ds-shell .msg-action-btn.tts-loading {
  opacity: 0.6 !important;
  pointer-events: none !important;
}

#chatScreen.ds-shell .msg-action-btn.tts-playing {
  border-color: var(--ds-gold-border) !important;
  color: var(--ds-gold) !important;
  background: var(--ds-gold-dim) !important;
}

/* ═══════════ "•••" mais menu (liquid glass dropdown) ═══════════ */
#chatScreen.ds-shell .msg-more-wrap {
  position: relative;
  display: inline-flex;
}

#chatScreen.ds-shell .msg-more-btn {
  width: 28px !important;
  height: 26px !important;
  padding: 0 !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--ds-radius-full) !important;
  color: var(--ds-text-2) !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--ds-font-sans) !important;
}

#chatScreen.ds-shell .msg-more-btn svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

#chatScreen.ds-shell .msg-more-btn:hover {
  border-color: var(--ds-gold-border) !important;
  color: var(--ds-gold) !important;
  background: var(--ds-gold-dim) !important;
}

#chatScreen.ds-shell .msg-more-menu {
  display: none;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  min-width: 180px;
  padding: 6px !important;
  z-index: 50;

  /* Liquid glass · mesma diretriz do spotlight ⌘K */
  background:
    linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 60%),
    rgba(22,20,18,0.25) !important;

  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);

  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;

  box-shadow:
    0 24px 64px rgba(0,0,0,0.55),
    0 6px 18px rgba(0,0,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.10) !important;

  overflow: hidden;
  animation: ds-more-fade 0.15s ease;
}

#chatScreen.ds-shell .msg-more-menu.open {
  display: block !important;
}

@keyframes ds-more-fade {
  from { opacity: 0; transform: translateY(4px) }
  to { opacity: 1; transform: translateY(0) }
}

/* Highlight gradient top do liquid glass */
#chatScreen.ds-shell .msg-more-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 14px 14px 0 0;
}

/* Rim glass de luz no topo */
#chatScreen.ds-shell .msg-more-menu::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 20%;
  right: 20%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.30) 50%, transparent 100%);
  pointer-events: none;
}

#chatScreen.ds-shell .msg-more-menu > * {
  position: relative;
  z-index: 1;
}

/* Items dentro do mais menu (full width, sem border, item style) */
#chatScreen.ds-shell .msg-more-menu .msg-action-btn {
  width: 100% !important;
  justify-content: flex-start !important;
  border: none !important;
  border-radius: var(--ds-radius) !important;
  padding: 8px 12px !important;
  font-size: 12.5px !important;
  background: transparent !important;
  color: #d8d4ce !important;
  margin: 0 !important;
}

#chatScreen.ds-shell .msg-more-menu .msg-action-btn:hover {
  background: rgba(255,255,255,0.08) !important;
  color: var(--ds-text) !important;
}

/* ═══════════ Audio container (TTS player) ═══════════ */
#chatScreen.ds-shell .msg-audio-container audio {
  width: 100% !important;
  max-width: 380px !important;
  height: 36px !important;
  border-radius: 18px !important;
  outline: none !important;
  filter: invert(0.92) hue-rotate(180deg);
}

/* ═══════════ Suggestion chips contextuais (ctx-chip) ═══════════ */
#chatScreen.ds-shell .ctx-suggestions {
  margin-top: 12px !important;
}

#chatScreen.ds-shell .ctx-chip {
  padding: 6px 14px !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: var(--ds-radius-full) !important;
  color: var(--ds-text-2) !important;
  font-size: 12px !important;
  font-family: var(--ds-font-sans) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

#chatScreen.ds-shell .ctx-chip:hover {
  border-color: var(--ds-gold-border) !important;
  color: var(--ds-gold) !important;
  background: var(--ds-gold-dim) !important;
}

#chatScreen.ds-shell .ctx-chip.proativo {
  border-color: rgba(212,160,23,0.20) !important;
  background: rgba(212,160,23,0.04) !important;
  color: var(--ds-text-2) !important;
  font-weight: 500 !important;
}

#chatScreen.ds-shell .ctx-chip.proativo:hover {
  border-color: var(--ds-gold-border) !important;
  background: var(--ds-gold-dim) !important;
  color: var(--ds-gold) !important;
}

/* Streaming indicator — JS pode adicionar .is-streaming na bubble */
#chatScreen.ds-shell .message-assistant .message-bubble.is-streaming::after {
  content: '';
  display: inline-block;
  width: 7px;
  height: 14px;
  background: var(--ds-gold);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: ds-msg-blink 1s infinite;
  border-radius: 1px;
}

/* ═══════════ Botão "Tentar novamente" em erro (inline-styled) ═══════════ */
/* O JS cria esse botão inline com cor gold + radius 8px direto dentro
   de .message-bubble. Override pra usar nosso botão F dimensional. */
#chatScreen.ds-shell .message-assistant .message-bubble > button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: linear-gradient(180deg, var(--ds-gold) 0%, #B8860B 100%) !important;
  color: var(--ds-gold-text) !important;
  border: 1px solid rgba(255,225,150,0.20) !important;
  padding: 8px 16px !important;
  border-radius: var(--ds-radius) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  margin-top: 10px !important;
  cursor: pointer !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 1px 2px rgba(0,0,0,0.3) !important;
  transition: all 0.15s ease !important;
}

#chatScreen.ds-shell .message-assistant .message-bubble > button:hover {
  background: linear-gradient(180deg, var(--ds-gold-hover) 0%, var(--ds-gold) 100%) !important;
}

/* ═══════════════════════ CHAT INPUT ═══════════════════════ */

#chatScreen.ds-shell .chat-input-area {
  background: transparent !important;
  border: none !important;
  padding: 14px 28px 22px !important;
}

#chatScreen.ds-shell .chat-input-container {
  background: var(--ds-surface) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px !important;
  padding: 0 !important;
  max-width: 780px !important;
  margin: 0 auto !important;
  transition: border 0.18s ease, box-shadow 0.18s ease !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}

#chatScreen.ds-shell .chat-input-container:focus-within {
  border-color: rgba(212,160,23,0.45) !important;
  box-shadow: 0 0 0 3px rgba(212,160,23,0.08) !important;
}

/* File badge area dentro do container */
#chatScreen.ds-shell #fileBadgeArea {
  padding: 10px 14px 0 !important;
}

#chatScreen.ds-shell #fileBadgeArea:empty {
  display: none !important;
}

/* Linha de input + botões */
#chatScreen.ds-shell .chat-input-container > div:last-child {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Textarea de input */
#chatScreen.ds-shell #chatInput.chat-input {
  background: transparent !important;
  border: none !important;
  color: var(--ds-text) !important;
  font-family: var(--ds-font-sans) !important;
  font-size: 14.5px !important;
  line-height: 1.6 !important;
  padding: 14px 16px 4px !important;
  resize: none !important;
  outline: none !important;
  min-height: 24px !important;
  max-height: 240px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  order: 1;
}

#chatScreen.ds-shell #chatInput.chat-input::placeholder {
  color: var(--ds-text-muted) !important;
}

/* Botões da toolbar (clip + mic + ⭐ + send) */
#chatScreen.ds-shell .chat-input-container .upload-btn,
#chatScreen.ds-shell .chat-input-container #micBtn,
#chatScreen.ds-shell .chat-input-container #saveTemplateBtn,
#chatScreen.ds-shell .chat-input-container #sendBtn {
  margin-bottom: 0 !important;
  flex-shrink: 0;
}

/* Order pra agrupar botões dentro do row de input
   (input row: clip + mic + textarea + ⭐ + send)
   Vamos manter o layout original mas estilizar cada um. */
#chatScreen.ds-shell .chat-input-container > div:last-child {
  display: flex !important;
  align-items: flex-end !important;
  gap: 4px !important;
  padding: 4px 8px 8px !important;
  flex-direction: row !important;
}

#chatScreen.ds-shell .upload-btn {
  background: transparent !important;
  border: none !important;
  color: var(--ds-text-2) !important;
  padding: 7px !important;
  border-radius: var(--ds-radius) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: color 0.12s ease, background 0.12s ease !important;
  margin: 0 !important;
}

#chatScreen.ds-shell .upload-btn:hover {
  color: var(--ds-text) !important;
  background: rgba(255,255,255,0.04) !important;
}

#chatScreen.ds-shell .upload-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
}

#chatScreen.ds-shell #micBtn.mic-btn {
  background: transparent !important;
  border: none !important;
  color: var(--ds-text-2) !important;
  padding: 7px !important;
  border-radius: var(--ds-radius) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
}

#chatScreen.ds-shell #micBtn.mic-btn:hover {
  color: var(--ds-text) !important;
  background: rgba(255,255,255,0.04) !important;
}

#chatScreen.ds-shell #micBtn.mic-btn svg {
  width: 16px !important;
  height: 16px !important;
  stroke: currentColor !important;
}

#chatScreen.ds-shell #micBtn.mic-btn.recording {
  color: var(--ds-error) !important;
  animation: ds-mic-pulse 1.2s ease-in-out infinite;
}

/* ⭐ Save template */
#chatScreen.ds-shell #saveTemplateBtn.header-action-btn {
  background: transparent !important;
  border: none !important;
  color: var(--ds-text-muted) !important;
  padding: 7px !important;
  border-radius: var(--ds-radius) !important;
  font-size: 14px !important;
  width: auto !important;
  height: auto !important;
}

#chatScreen.ds-shell #saveTemplateBtn.header-action-btn:hover {
  color: var(--ds-gold) !important;
  background: rgba(255,255,255,0.04) !important;
}

/* Send button (botão F mini) */
#chatScreen.ds-shell #sendBtn.btn-send {
  background: linear-gradient(180deg, var(--ds-gold) 0%, #B8860B 100%) !important;
  color: #0a0a0a !important;
  border: 1px solid rgba(255,225,150,0.20) !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--ds-radius-md) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.15) !important;
  transition: all 0.15s ease !important;
  padding: 0 !important;
}

#chatScreen.ds-shell #sendBtn.btn-send:hover:not(:disabled) {
  background: linear-gradient(180deg, var(--ds-gold-hover) 0%, var(--ds-gold) 100%) !important;
}

#chatScreen.ds-shell #sendBtn.btn-send:disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

#chatScreen.ds-shell #sendBtn.btn-send svg {
  width: 14px !important;
  height: 14px !important;
  stroke: currentColor !important;
  fill: currentColor !important;
}

/* Mobile */
@media (max-width: 600px) {
  #chatScreen.ds-shell .chat-messages { padding: 18px 14px !important }
  #chatScreen.ds-shell .chat-input-area { padding: 10px 14px 14px !important }
  #chatScreen.ds-shell #chatInput.chat-input { font-size: 14px !important; padding: 12px 14px 4px !important }
}