/* SM Chat -- pantalla que sustituye al Inbox (wa-openwa-inbox).
   Usa los tokens reales de la app (--sm-*, --cw-font-*) definidos en
   theme-light.css / copper-direccion-visual.css -- no redefine colores ni
   fuentes propias. Ver docs/superpowers/plans/2026-08-18-sm-chat-produccion.md
   y docs/superpowers/specs/2026-08-19-twenty-sucursales-distribucion-leads-design.md
   (la version StockMaster de ese spec, sin las restricciones de Twenty). */

.smc-root {
  /* Escala tipografica de SM Chat: 5 pasos, un rol cada uno. Antes habia 15
     tamanos distintos entre 9 y 18px (con medios pixeles: 9.5, 10.5, 11.5,
     12.5, 14.5), que es lo que hacia que la pantalla se leyera como armada a
     mano. Todo font-size de este archivo sale de aqui. */
  --smc-fs-micro: 10px;   /* etiquetas en mayusculas, hora, badges, claves */
  --smc-fs-meta: 12px;    /* metadatos, chips, telefonos, vista previa */
  --smc-fs-body: 13px;    /* texto corriente: mensajes, campos, nombres */
  --smc-fs-lead: 15px;    /* nombres destacados: hilo, ficha, dossier */
  --smc-fs-title: 18px;   /* titulo de pantalla y cifra principal */

  /* Burbujas del hilo. Tema oscuro; el claro se redefine mas abajo. */
  --smc-burbuja-propia: #5e3610;
  --smc-burbuja-propia-borde: #7a481a;
  --smc-burbuja-propia-tenue: #d3ab80;
  --smc-burbuja-propia-texto: var(--sm-text-primary);
  --smc-burbuja-ajena: #211d17;
  --smc-burbuja-ajena-borde: #322c22;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--sm-bg-root);
  color: var(--sm-text-primary);
  font-size: var(--smc-fs-body);
  line-height: 1.5;
}
.smc-root button { font-family: inherit; }
.smc-root svg { display: block; }
#smc-volver-lista { display: none; }

.smc-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--sm-border-soft);
  background: var(--sm-bg-surface);
  flex: none;
}
.smc-topbar h1 {
  font-family: var(--cw-font-display) !important;
  font-weight: 600;
  font-size: var(--smc-fs-title);
  margin: 0;
  letter-spacing: -0.01em;
}
.smc-topbar-stats { display: flex; gap: 20px; }
.smc-stat { display: flex; flex-direction: column; align-items: flex-end; min-width: 48px; }
.smc-stat .smc-n { font-family: var(--cw-font-mono) !important; font-weight: 600; font-size: var(--smc-fs-title); font-variant-numeric: tabular-nums; }
.smc-stat .smc-n.smc-warn { color: var(--cw-warn); }
.smc-stat .smc-l { font-size: var(--smc-fs-micro); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sm-text-muted); margin-top: 2px; }

.smc-body { flex: 1; display: grid; grid-template-columns: 272px minmax(0, 1fr) 288px; min-height: 0; }
@media (max-width: 980px) {
  .smc-body { grid-template-columns: minmax(0, 1fr); }
  .smc-rail, .smc-dossier { display: none; }
  .smc-root[data-smc-vista="lista"] .smc-rail { display: flex; }
  .smc-root[data-smc-vista="hilo"] .smc-rail { display: none; }
  .smc-root[data-smc-vista="lista"] .smc-thread { display: none; }
  .smc-root[data-smc-vista="hilo"] .smc-thread { display: flex; }
  #smc-volver-lista { display: flex; }
}

/* Pantalla completa en telefono: misma densidad que el modo compacto del
   panel flotante (topbar mas chico, sin stats, menos padding), pero por
   ancho real de viewport en vez de la clase .smc-compact. */
@media (max-width: 600px) {
  .smc-root .smc-topbar-stats { display: none; }
  .smc-root .smc-topbar { padding: 10px 14px; }
  .smc-root .smc-topbar h1 { font-size: var(--smc-fs-lead); }
  .smc-root .smc-thread-header,
  .smc-root .smc-rail-search,
  .smc-root .smc-filter-row,
  .smc-root .smc-messages,
  .smc-root .smc-composer,
  .smc-root .smc-conv-item { padding-left: 12px; padding-right: 12px; }
  .smc-root .smc-ticket-wrap { padding-left: 12px; padding-right: 12px; }
  .smc-root .smc-ticket-grid { grid-template-columns: repeat(2, auto); }
}

/* Modo compacto: el panel flotante de StockBot es angosto aunque la ventana
   no lo sea -- se fuerza por clase (ver smChatAbrirEnPanelFlotante), no por
   una media query de ancho de viewport. */
.smc-root.smc-compact { font-size: var(--smc-fs-body); }
.smc-root.smc-compact .smc-body { grid-template-columns: minmax(0, 1fr); }
.smc-root.smc-compact .smc-rail,
.smc-root.smc-compact .smc-dossier { display: none; }
.smc-root.smc-compact[data-smc-vista="lista"] .smc-rail { display: flex; }
.smc-root.smc-compact[data-smc-vista="lista"] .smc-thread { display: none; }
.smc-root.smc-compact[data-smc-vista="hilo"] .smc-thread { display: flex; }
.smc-root.smc-compact #smc-volver-lista { display: flex; }
.smc-root.smc-compact .smc-topbar-stats { display: none; }
.smc-root.smc-compact .smc-topbar { padding: 10px 14px; }
.smc-root.smc-compact .smc-topbar h1 { font-size: var(--smc-fs-lead); }
.smc-root.smc-compact .smc-thread-header,
.smc-root.smc-compact .smc-rail-search,
.smc-root.smc-compact .smc-filter-row,
.smc-root.smc-compact .smc-messages,
.smc-root.smc-compact .smc-composer,
.smc-root.smc-compact .smc-conv-item { padding-left: 12px; padding-right: 12px; }
.smc-root.smc-compact .smc-ticket-wrap { padding-left: 12px; padding-right: 12px; }
.smc-root.smc-compact .smc-ticket-grid { grid-template-columns: repeat(2, auto); }

.smc-rail { border-right: 1px solid var(--sm-border-soft); display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--sm-bg-surface); }
.smc-rail-search { padding: 10px 12px 8px; flex: none; }
.smc-search-box {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--sm-border-medium); border-radius: 9px; padding: 6px 9px;
  background: var(--sm-bg-raised);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.smc-search-box:focus-within { border-color: var(--cw-accent); box-shadow: 0 0 0 3px rgba(168, 97, 31, 0.16); }
.smc-search-box input { border: none; background: transparent; outline: none; font-size: var(--smc-fs-body); color: var(--sm-text-primary); width: 100%; }
.smc-search-box input::placeholder { color: var(--sm-text-muted); }
.smc-search-box svg { color: var(--sm-text-muted); flex: none; }

.smc-filter-row { display: flex; gap: 6px; padding: 0 12px 8px; flex: none; flex-wrap: wrap; }
.smc-pill {
  border: 1px solid var(--sm-border-medium); background: transparent; color: var(--sm-text-secondary);
  font-size: var(--smc-fs-meta); padding: 4px 10px; border-radius: 999px; cursor: pointer;
  display: flex; align-items: center; gap: 5px;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.smc-pill:hover { border-color: var(--sm-border-strong); }
.smc-pill:active { transform: scale(0.94); }
.smc-pill .smc-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--cw-warn); }
.smc-pill.smc-active { background: var(--sm-text-primary); border-color: var(--sm-text-primary); color: var(--sm-bg-surface); }
.smc-pill.smc-active .smc-dot { background: var(--sm-bg-surface); }

.smc-conv-list { overflow-y: auto; flex: 1; min-height: 0; }
.smc-conv-item {
  display: flex; gap: 9px; padding: 9px 12px;
  border-left: 2px solid transparent; cursor: pointer;
  border-bottom: 1px solid var(--sm-border-soft);
  transition: background 140ms ease, border-left-color 200ms ease;
}
.smc-conv-item:hover { background: var(--sm-bg-raised); }
.smc-conv-item.smc-active { background: rgba(168, 97, 31, 0.09); border-left-color: var(--cw-accent); }
.smc-avatar {
  width: 32px; height: 32px; border-radius: 999px; background: var(--sm-bg-raised); border: 1px solid var(--sm-border-medium);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--cw-font-display) !important; font-weight: 600; font-size: var(--smc-fs-meta); color: var(--sm-text-secondary); flex: none;
}
.smc-conv-main { min-width: 0; flex: 1; }
.smc-conv-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.smc-conv-name { font-size: var(--smc-fs-body); font-weight: 500; color: var(--sm-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smc-conv-time { font-family: var(--cw-font-mono) !important; font-size: var(--smc-fs-micro); color: var(--sm-text-muted); flex: none; }
.smc-conv-preview { font-size: var(--smc-fs-meta); color: var(--sm-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.smc-conv-meta { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.smc-sucursal-tag { font-size: var(--smc-fs-micro); color: var(--sm-text-muted); font-family: var(--cw-font-mono) !important; letter-spacing: 0.02em; }
.smc-unread {
  background: var(--cw-accent); color: #fff; font-family: var(--cw-font-mono) !important; font-size: var(--smc-fs-micro); font-weight: 600;
  min-width: 16px; height: 16px; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 4px;
}
.smc-vendor-chip { font-size: var(--smc-fs-micro); color: var(--sm-text-secondary); background: var(--sm-bg-raised); border: 1px solid var(--sm-border-soft); border-radius: 999px; padding: 1px 6px; }
.smc-empty { padding: 24px 16px; text-align: center; color: var(--sm-text-muted); font-size: var(--smc-fs-body); }

.smc-thread { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--sm-bg-root); }
.smc-thread-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px;
  background: var(--sm-bg-surface); border-bottom: 1px solid var(--sm-border-soft); flex: none;
}
.smc-thread-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.smc-thread-who .smc-avatar { width: 36px; height: 36px; font-size: var(--smc-fs-body); }
.smc-thread-who-text { min-width: 0; overflow: hidden; }
.smc-thread-name,
.smc-thread-phone { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.smc-thread-name { font-family: var(--cw-font-display) !important; font-weight: 600; font-size: var(--smc-fs-lead); letter-spacing: -0.005em; }
.smc-thread-phone { font-family: var(--cw-font-mono) !important; font-size: var(--smc-fs-meta); color: var(--sm-text-muted); }
.smc-thread-actions { display: flex; gap: 7px; flex: none; }
.smc-btn {
  border: 1px solid var(--sm-border-medium); background: var(--sm-bg-surface); color: var(--sm-text-secondary);
  font-size: var(--smc-fs-meta); padding: 5px 11px; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 6px;
  transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, background 140ms ease;
}
.smc-btn:hover { border-color: var(--sm-border-strong); color: var(--sm-text-primary); }
.smc-btn:active { transform: scale(0.96); }
.smc-btn-primary { background: var(--cw-accent); border-color: var(--cw-accent); color: #fff; }
.smc-btn-primary:hover { background: var(--cw-accent-2); border-color: var(--cw-accent-2); color: #fff; }
.smc-btn[disabled] { opacity: 0.5; cursor: default; pointer-events: none; }

.smc-ticket-wrap { padding: 10px 16px 0; flex: none; }
.smc-ticket {
  display: grid; grid-template-columns: 1fr auto; background: var(--sm-bg-surface);
  border: 1px solid var(--sm-border-medium); border-radius: 10px; overflow: hidden;
}
.smc-ticket-main { padding: 10px 14px; }
.smc-ticket-eyebrow { font-size: var(--smc-fs-micro); text-transform: uppercase; letter-spacing: 0.08em; color: var(--cw-accent); font-weight: 600; margin-bottom: 3px; }
.smc-ticket-title { font-family: var(--cw-font-display) !important; font-weight: 600; font-size: var(--smc-fs-lead); }
.smc-ticket-grid { display: grid; grid-template-columns: repeat(4, auto); gap: 2px 20px; margin-top: 7px; }
.smc-ticket-field .smc-k { font-size: var(--smc-fs-micro); text-transform: uppercase; letter-spacing: 0.05em; color: var(--sm-text-muted); }
.smc-ticket-field .smc-v { font-family: var(--cw-font-mono) !important; font-size: var(--smc-fs-meta); color: var(--sm-text-primary); font-variant-numeric: tabular-nums; }
.smc-ticket-stub {
  border-left: 1px dashed var(--sm-border-strong); background: var(--sm-bg-raised); padding: 10px 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 88px;
}
.smc-ticket-stub .smc-price { font-family: var(--cw-font-mono) !important; font-weight: 600; font-size: var(--smc-fs-body); color: var(--sm-text-primary); white-space: nowrap; }
.smc-ticket-stub .smc-status { font-size: var(--smc-fs-micro); color: var(--cw-ok); background: rgba(21, 128, 61, 0.1); padding: 2px 8px; border-radius: 999px; font-weight: 500; }
.smc-ticket-empty {
  margin: 10px 16px 0; padding: 8px 12px; border: 1px dashed var(--sm-border-medium); border-radius: 9px;
  font-size: var(--smc-fs-meta); color: var(--sm-text-muted); display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.smc-ticket-empty button { font-size: var(--smc-fs-meta); }

.smc-messages { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; min-height: 0; }
.smc-bubble-row { display: flex; }
.smc-bubble-row.smc-out { justify-content: flex-end; }
.smc-bubble { max-width: 70%; padding: 7px 11px; border-radius: 12px; font-size: var(--smc-fs-body); position: relative; word-wrap: break-word; }
/* Lo mio va en color, lo del cliente va neutro -- el mismo reparto que hace
   WhatsApp, en cobre en vez de verde: la app ya tiene una identidad y el verde
   entraria como cuerpo extrano. Antes el saliente era cobre al 9% sobre un fondo
   casi negro: rgb(27,20,12) contra rgb(15,14,12) del entrante, una diferencia
   que no se ve. El color va en la burbuja, no en el texto, que se mantiene en el
   mismo tono en ambas para que el hilo se lea corrido. */
.smc-bubble-row.smc-in .smc-bubble {
  background: var(--smc-burbuja-ajena);
  border: 1px solid var(--smc-burbuja-ajena-borde);
  border-bottom-left-radius: 3px;
}
.smc-bubble-row.smc-out .smc-bubble {
  background: var(--smc-burbuja-propia);
  border: 1px solid var(--smc-burbuja-propia-borde);
  color: var(--smc-burbuja-propia-texto);
  border-bottom-right-radius: 3px;
}
/* La hora y los ticks sobre el cobre necesitan su propio tono: el gris apagado
   del resto de la interfaz se hunde en ese fondo. */
.smc-bubble-row.smc-out .smc-bubble .smc-meta time,
.smc-bubble-row.smc-out .smc-bubble .smc-ticks { color: var(--smc-burbuja-propia-tenue); }
.smc-bubble .smc-meta { display: flex; justify-content: flex-end; gap: 4px; margin-top: 3px; }
.smc-bubble .smc-meta time { font-family: var(--cw-font-mono) !important; font-size: var(--smc-fs-micro); color: var(--sm-text-muted); }
.smc-ticks { color: var(--cw-info); flex: none; }
.smc-ticks.smc-leido { color: var(--cw-accent); }
.smc-img-bubble { max-width: 220px; border-radius: 9px; display: block; cursor: pointer; }
.smc-doc-bubble { display: flex; align-items: center; gap: 8px; }
.smc-voice-bubble { display: flex; align-items: center; gap: 8px; min-width: 180px; }
.smc-voice-bubble audio { height: 32px; max-width: 190px; }

.smc-composer { flex: none; padding: 10px 16px 14px; background: var(--sm-bg-surface); border-top: 1px solid var(--sm-border-soft); }
.smc-composer-box {
  display: flex; align-items: flex-end; gap: 7px; border: 1px solid var(--sm-border-medium); border-radius: 12px;
  padding: 7px 9px; background: var(--sm-bg-raised);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}
.smc-composer-box:focus-within { border-color: var(--cw-accent); box-shadow: 0 0 0 3px rgba(168, 97, 31, 0.16); }
.smc-icon-btn {
  background: transparent; border: none; color: var(--sm-text-muted); width: 28px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.smc-icon-btn:hover { background: var(--sm-bg-sunken); color: var(--sm-text-primary); }
.smc-icon-btn:active { transform: scale(0.9); }
.smc-composer textarea {
  flex: 1; border: none; background: transparent; outline: none; resize: none; font-family: inherit;
  font-size: var(--smc-fs-body); color: var(--sm-text-primary); max-height: 90px; padding: 5px 0; width: 100%;
}
.smc-composer textarea::placeholder { color: var(--sm-text-muted); }
.smc-send-btn {
  background: var(--cw-accent); color: #fff; border: none; width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; cursor: pointer; flex: none;
  transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), background 140ms ease, opacity 140ms ease;
}
.smc-send-btn:hover { background: var(--cw-accent-2); }
.smc-send-btn:active { transform: scale(0.88); }
.smc-send-btn[disabled] { opacity: 0.5; pointer-events: none; }
.smc-closed-banner {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; background: var(--sm-bg-raised); border-top: 1px solid var(--sm-border-soft); font-size: var(--smc-fs-body); color: var(--sm-text-secondary);
}

.smc-dossier { border-left: 1px solid var(--sm-border-soft); overflow-y: auto; padding: 16px 16px 22px; background: var(--sm-bg-surface); }
.smc-dossier-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding-bottom: 14px; border-bottom: 1px solid var(--sm-border-soft); }
.smc-dossier-head .smc-avatar { width: 52px; height: 52px; font-size: var(--smc-fs-lead); }
.smc-dossier-head .smc-name { font-family: var(--cw-font-display) !important; font-weight: 600; font-size: var(--smc-fs-lead); }
.smc-dossier-head .smc-phone { font-family: var(--cw-font-mono) !important; font-size: var(--smc-fs-meta); color: var(--sm-text-muted); }
.smc-status-pill { font-size: var(--smc-fs-micro); font-weight: 500; padding: 3px 10px; border-radius: 999px; margin-top: 2px; }
.smc-status-pill.smc-unassigned { color: var(--cw-warn); background: rgba(180, 83, 9, 0.1); }
.smc-status-pill.smc-assigned { color: var(--cw-ok); background: rgba(21, 128, 61, 0.1); }

.smc-dsec { padding: 14px 0; border-bottom: 1px solid var(--sm-border-soft); }
.smc-dsec:last-child { border-bottom: none; }
.smc-dsec-title { font-size: var(--smc-fs-micro); text-transform: uppercase; letter-spacing: 0.07em; color: var(--sm-text-muted); font-weight: 600; margin-bottom: 9px; }
.smc-drow { display: flex; justify-content: space-between; gap: 10px; font-size: var(--smc-fs-body); padding: 3px 0; }
.smc-drow .smc-k { color: var(--sm-text-muted); }
.smc-drow .smc-v { color: var(--sm-text-primary); text-align: right; }
.smc-drow .smc-v.smc-mono { font-family: var(--cw-font-mono) !important; font-size: var(--smc-fs-meta); }

.smc-assign-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.smc-assign-select {
  flex: 1; border: 1px solid var(--sm-border-medium); background: var(--sm-bg-raised); color: var(--sm-text-secondary);
  font-size: var(--smc-fs-meta); padding: 6px 8px; border-radius: 8px;
}
.smc-assign-select:focus { border-color: var(--cw-accent); outline: none; box-shadow: 0 0 0 3px rgba(168, 97, 31, 0.16); }

.smc-vin-row { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.smc-vin-row input {
  flex: 1; border: 1px solid var(--sm-border-medium); background: var(--sm-bg-raised); color: var(--sm-text-primary);
  font-size: var(--smc-fs-meta); font-family: var(--cw-font-mono) !important; padding: 6px 8px; border-radius: 8px;
}

.smc-tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.smc-tag { font-size: var(--smc-fs-meta); background: var(--sm-bg-raised); border: 1px solid var(--sm-border-soft); color: var(--sm-text-secondary); padding: 3px 9px; border-radius: 999px; }
button.smc-tag.smc-add { color: var(--sm-text-muted); border-style: dashed; cursor: pointer; background: transparent; }
button.smc-tag.smc-add:hover { color: var(--cw-accent); border-color: var(--cw-accent); }
button.smc-tag.smc-remove { color: var(--sm-text-secondary); cursor: pointer; }
button.smc-tag.smc-remove:hover { color: var(--cw-bad); border-color: var(--cw-bad); }

.smc-mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.smc-mini-stat { background: var(--sm-bg-raised); border-radius: 9px; padding: 8px 9px; }
.smc-mini-stat .smc-n { font-family: var(--cw-font-mono) !important; font-weight: 600; font-size: var(--smc-fs-lead); font-variant-numeric: tabular-nums; }
.smc-mini-stat .smc-l { font-size: var(--smc-fs-micro); color: var(--sm-text-muted); margin-top: 1px; }

.smc-loading { display: flex; align-items: center; justify-content: center; padding: 30px; color: var(--sm-text-muted); font-size: var(--smc-fs-body); }

@media (prefers-reduced-motion: reduce) {
  .smc-root * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── Envio de un mensaje ────────────────────────────────────────────────────
   El mensaje aparece al instante, atenuado y con un reloj, y se asienta cuando
   el servidor confirma (~1.4s despues). Toda la animacion cabe en 160ms: una
   burbuja tiene que aparecer, no hacer una coreografia -- al decimo mensaje del
   dia cualquier gesto lucido se vuelve un peaje. El unico movimiento es un
   desplazamiento de 6px, en la direccion en la que el hilo crece. */
.smc-bubble-row.smc-enviando .smc-bubble { opacity: 0.62; }
.smc-bubble-row .smc-bubble { transition: opacity 180ms ease; }

@media (prefers-reduced-motion: no-preference) {
  .smc-bubble-row.smc-recien-llegada {
    animation: smc-entra-burbuja 160ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
  }
  /* El tick de confirmacion no salta: aparece donde estaba el reloj. */
  .smc-bubble-row .smc-ticks { transition: opacity 180ms ease; }
}

@keyframes smc-entra-burbuja {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .smc-bubble-row.smc-recien-llegada { animation: none; }
  .smc-bubble-row .smc-bubble { transition: none; }
}


/* En claro se invierte el peso: lo del cliente queda en blanco puro y lo mio en
   un cobre lavado, para que el propio siga siendo el que lleva color. */
html[data-sm-theme="light"] .smc-root {
  --smc-burbuja-propia: #f7e4cd;
  --smc-burbuja-propia-borde: #e8caa5;
  --smc-burbuja-propia-tenue: #8a5a28;
  --smc-burbuja-propia-texto: #2b1f12;
  --smc-burbuja-ajena: #ffffff;
  --smc-burbuja-ajena-borde: #e4ddcf;
}