/* Ronda 3: más legibilidad y aire sin alterar la identidad de Claudbar. */
.hero-task { line-height: 1.3; letter-spacing: -.025em; }
#hello-name { margin-left: .28em; white-space: nowrap; }
#hello-name:empty { margin-left: 0; }
.hero .greet-sub, .hero-say { color: var(--text-secondary, #c6c9d8); }

#chat-messages { padding-inline: 10px; gap: 18px; }
#chat-messages > .message { gap: 7px; }
.msg-head { font-size: 11.5px; color: #aeb3c7; }
.msg-head b { font-size: 12px; }
.bubble { font-size: var(--msg-font, 14px); line-height: 1.62; padding: 12px 14px; }
.bubble p { margin: 0 0 10px; }
.bubble p:last-child, .bubble ul:last-child, .bubble ol:last-child { margin-bottom: 0; }
.bubble pre { font-size: 12px; }
.msg-meta { font-size: 11px; color: #aeb3c7; }
.msg-actions { gap: 5px; opacity: .74; }
.message:hover .msg-actions, .message:focus-within .msg-actions, .message.show-actions .msg-actions { opacity: 1; }
.msg-actions .act { width: 34px; height: 34px; border-radius: 10px; }
.msg-source { display: inline-flex; align-items: center; gap: 5px; width: fit-content; margin: 2px 0 1px 2px; padding: 5px 9px; border: 1px solid color-mix(in srgb, var(--border, #45465a) 75%, transparent); border-radius: 999px; color: #c8c1ff; font-size: 11.5px; text-decoration: none; }
.msg-source:hover { color: #fff; border-color: var(--accent, #8c72ff); background: rgba(124,92,255,.12); }

.composer-row { gap: 8px; }
.composer-row .icon-btn, .composer-row .send-btn, .composer-row .stop-btn { width: 42px; height: 42px; min-width: 42px; border-radius: 13px; }
.composer-row .send-btn { box-shadow: 0 5px 16px rgba(124,92,255,.32); }
.composer textarea, #user-input { font-size: 14px; line-height: 1.5; }
.quick-row { gap: 8px; margin-bottom: 10px; }
.quick-chip { min-height: 32px; padding-inline: 12px; }
.tool-icon, .icon-btn { color: #d7d9e7; }
.tool-icon:focus-visible, .icon-btn:focus-visible, .send-btn:focus-visible, .msg-actions .act:focus-visible { outline: 2px solid #a897ff; outline-offset: 2px; }

@media (max-width: 360px) {
  #chat-messages { padding-inline: 7px; }
  .bubble { padding: 10px 11px; }
  .msg-actions .act { width: 32px; height: 32px; }
}

/* Estilos finales del panel de tienda; el panel debe crecer con la barra lateral de Chrome. */
html, body, .shell, #app { width: 100%; min-width: 0; }
.shell { max-width: none; }
#app { margin: 0; border-radius: 0; }
#chat-messages { padding-inline: clamp(12px, 4vw, 22px); }
.bubble { color: #f4f5fb; font-size: 14px; }
.msg-head, .msg-meta, .model-text small, .ai-status { color: #c1c5d6; }
.msg-actions { opacity: 1; }
.msg-actions { flex-wrap: wrap; }
.msg-actions .act { min-width: 40px; width: auto; padding-inline: 9px; color: #e0e2ee; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.msg-actions .act-label { display: inline; }
.composer { margin-inline: 12px; }
.composer .icon-btn[title], .composer .send-btn[aria-label] { position: relative; }
.hero-task, .hero .greet-sub, #user-input { font-size: max(14px, 1em); }