@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@600;700&family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root {
  --rojo-dragon: #FF6347;
  --dorado-chifa: #FFD700;
  --rojo-oscuro: #800000;
  --rojo-carmesi: #A52A2A;
  --negro-rico: #1A1A1A;
  --crema: #FFF8EE;
  --gris-texto: #4a4038;

  --font-display: 'Dancing Script', cursive;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  margin: 0; font-family: var(--font-body); color: var(--gris-texto); background: var(--crema);
  overflow: hidden; /* la app ocupa 100dvh, el scroll vive dentro de .messages */
}
a { color: inherit; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-symbol { width: 36px; height: 36px; flex: none; object-fit: contain; }
.brand-text { font-family: var(--font-display); font-weight: 700; color: var(--dorado-chifa); }

.btn {
  display: inline-block; padding: 11px 22px; border-radius: 6px; border: 1px solid transparent;
  font-family: var(--font-heading); font-weight: 600; font-size: 14px; cursor: pointer;
}
.btn-primary { background: var(--dorado-chifa); color: var(--negro-rico); }
.btn-primary:hover { background: #ffdf33; }
.icon-btn-ghost {
  background: none; border: none; color: inherit; opacity: .7; cursor: pointer;
  font-family: var(--font-heading); font-size: 13px;
}
.icon-btn-ghost:hover { opacity: 1; }

/* --- Auth --- */
.auth-screen {
  height: 100dvh; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 140% at 50% -10%, var(--rojo-oscuro) 0%, var(--negro-rico) 65%);
  padding: 20px;
}
.auth-card { width: 100%; max-width: 360px; }
.auth-sub { text-align: center; color: #fff; opacity: .75; font-size: 13px; margin: 0 0 22px; }
.auth-tabs { display: flex; gap: 6px; margin-bottom: 18px; background: rgba(255,255,255,.06); border-radius: 8px; padding: 4px; }
.auth-tab {
  flex: 1; background: none; border: none; color: #fff; opacity: .65; padding: 9px; border-radius: 6px;
  font-family: var(--font-heading); font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.auth-tab.active { opacity: 1; background: rgba(255,215,0,.15); color: var(--dorado-chifa); }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 15px; }
.field span { font-family: var(--font-heading); font-size: 12px; font-weight: 600; color: #fff; opacity: .85; }
.field input {
  width: 100%; padding: 11px 12px; border-radius: 6px; border: 1px solid rgba(255,255,255,.2);
  background: rgba(255,255,255,.08); color: #fff; font-size: 14px; font-family: var(--font-body);
}
.error-msg { color: #ffb3b3; font-size: 12.5px; margin: -6px 0 12px; }

/* --- Chat screen --- */
.chat-screen { height: 100dvh; display: flex; flex-direction: column; }
.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--negro-rico); flex: none;
}
.chat-header-right { display: flex; align-items: center; gap: 14px; color: #fff; }
.cliente-nombre { font-size: 12.5px; opacity: .75; }

.messages { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 8px; background: #f4efe0; }
.msg-empty { margin: auto; text-align: center; opacity: .5; font-size: 13px; padding: 20px; }
.bubble-row { display: flex; }
.bubble-row.mine { justify-content: flex-end; }
.bubble {
  max-width: 78%; background: #fff; border-radius: 12px 12px 12px 3px; padding: 9px 12px;
  font-size: 14px; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.bubble-row.mine .bubble { background: #fdecc8; border-radius: 12px 12px 3px 12px; }
.bubble-text { white-space: pre-wrap; word-break: break-word; }
.bubble-media { max-width: min(260px, 60vw); border-radius: 8px; display: block; }
.bubble-time { display: block; font-size: 10px; opacity: .5; margin-top: 4px; text-align: right; }

/* --- Barra de entrada --- */
.chat-input-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #fff; border-top: 1px solid #eee2ce; flex: none; }
.chat-icon-btn {
  background: none; border: none; font-size: 21px; padding: 4px 6px; cursor: pointer; line-height: 1; flex: none;
}
.chat-input-bar .input {
  flex: 1; padding: 10px 14px; border-radius: 20px; border: 1px solid #ddd2bd; background: #f9f5ea;
  font-size: 14px; font-family: var(--font-body); color: var(--negro-rico);
}
.chat-input-bar .btn { padding: 10px 18px; border-radius: 20px; font-size: 13px; }

/* --- Grabación en vivo --- */
.record-bar {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #2a1414; color: #fff; flex: none;
}
.record-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--rojo-dragon); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.record-time { font-variant-numeric: tabular-nums; font-size: 13px; }
.record-label { font-size: 12.5px; opacity: .8; flex: 1; }
.record-video-live { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: #000; }
.record-bar .btn { padding: 7px 16px; font-size: 12.5px; }

/* --- Previsualización antes de enviar --- */
.preview-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-top: 1px solid #eee2ce; flex: none; }
.preview-media { flex: 1; display: flex; align-items: center; }
.preview-media img, .preview-media video { max-height: 90px; border-radius: 8px; }
.preview-media audio { width: 100%; }