/* ═══════════════════════════════════════════════════════════════
   adam.css — Adam en la web (burbuja + panel de conversación)
   ───────────────────────────────────────────────────────────────
   Reemplaza al chat inline de Costos y Cotización (gemini-chat.css):
   un solo asistente en toda la web, el mismo de la app. Ver ADAM.md §F6.

   Sello (SELLO-UI §6): fondo marino LITERAL, tinta crema, un solo acento
   celeste, font-family heredada, cuerpo de 15 px, cerrar 44×44, y se
   apoya en --belk-float-bottom / --belk-float-right para no tapar la
   cápsula de módulos.
   ═══════════════════════════════════════════════════════════════ */

:root{
  --adam-ground: #0D1B2A;
  --adam-ink:    #F7F3E9;
  --adam-muted:  #C4D0DF;
  --adam-line:   rgba(197,212,232,.20);
  --adam-raise:  #1B2D42;   /* burbuja del usuario y campos, sobre el marino */
  --adam-accent: var(--belk-accent-celeste, #51C7F5);
  --adam-accent-hover: #8FDCFA;
}
/* El botón va donde lo tiene la app (dueño, 2026-10-11): 96 px sobre el
   borde con la cápsula (22 menos que el despeje de los otros flotantes) y
   24 px del borde derecho. Sin cápsula, pegado abajo como todo flotante.
   Va en `body` y no en :root: --belk-float-bottom lo pone body.has-shell, y
   una variable calculada en :root se queda con el valor de :root (16 px). */
body{
  --adam-fab-bottom: max(16px, calc(var(--belk-float-bottom, 16px) - 22px));
  --adam-fab-right: 24px;
}

/* ── Burbuja ─────────────────────────────────────────────────── */
.adam-fab{
  position: fixed;
  right: var(--adam-fab-right);
  bottom: var(--adam-fab-bottom);
  z-index: 9500;
  width: 56px; height: 56px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid var(--adam-accent);
  background: var(--adam-ground);
  box-shadow: 0 8px 22px rgba(13,27,42,.40);
  cursor: pointer;
  overflow: hidden;
  font-family: inherit;
}
.adam-fab img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
/* El botón es un micrófono (2026-10-11): el FAB es el único relleno celeste
   de la pantalla (SELLO §0), con el ícono en marino encima. */
.adam-fab{ background: var(--adam-accent); color: var(--adam-ground);
  display: inline-flex; align-items: center; justify-content: center; }
.adam-fab-mic{ width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; pointer-events: none; }
.adam-fab:hover{ background: var(--adam-accent-hover); }

/* Adam en un recuadro chico mientras habla: arriba a la derecha, justo bajo
   la barra superior (52 px en todas las páginas del taller), lejos del
   trabajo y de la píldora de abajo (dueño, 2026-10-11). Entra bajando. */
.adam-cara{
  position: fixed;
  top: calc(52px + env(safe-area-inset-top, 0px) + 10px);
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 9550;
  width: 120px; height: 120px;
  box-sizing: border-box;
  border-radius: 20px;
  border: 2px solid var(--adam-accent);
  background: var(--adam-ground);
  box-shadow: 0 10px 26px rgba(13,27,42,.45);
  overflow: hidden;
  opacity: 0; transform: translateY(-10px) scale(.6); transform-origin: 100% 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 160ms cubic-bezier(.2,.9,.3,1.2);
}
.adam-cara.is-open{ opacity: 1; transform: none; animation: adam-habla 1.4s ease-in-out infinite; }
.adam-cara video{ width: 100%; height: 100%; object-fit: cover; display: block; }
/* «Está hablando»: el recuadro respira un poco y el borde late. */
@keyframes adam-habla{
  0%, 100%{ box-shadow: 0 10px 26px rgba(13,27,42,.45), 0 0 0 0 rgba(81,199,245,.45); transform: none; }
  50%     { box-shadow: 0 10px 26px rgba(13,27,42,.45), 0 0 0 6px rgba(81,199,245,0); transform: translateY(2px); }
}
@media (prefers-reduced-motion: reduce){
  .adam-cara{ transition-duration: 1ms; }
  .adam-cara.is-open{ animation: none; }
}
/* Mantener el dedo encima es el gesto para hablar (teléfono): sin menú del
   sistema, sin selección, sin que el navegador lo tome como desplazamiento. */
.adam-fab{
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
/* Escuchando: anillo celeste que late. */
.adam-fab.is-oye{ box-shadow: 0 0 0 4px var(--adam-accent), 0 8px 22px rgba(13,27,42,.40); animation: adam-late 1.1s ease-in-out infinite; }
@keyframes adam-late{ 50%{ box-shadow: 0 0 0 9px rgba(81,199,245,.35), 0 8px 22px rgba(13,27,42,.40); } }
@media (prefers-reduced-motion: reduce){ .adam-fab.is-oye{ animation: none; } }

/* PC: el clic en la burbuja es para hablar; escribir tiene su botón al lado. */
.adam-escribir{
  position: fixed;
  right: calc(var(--adam-fab-right) + 64px);
  bottom: calc(var(--adam-fab-bottom) + 6px);
  z-index: 9500;
  width: 44px; height: 44px; padding: 0;
  display: none; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--adam-line);
  background: var(--adam-ground); color: var(--adam-ink);
  box-shadow: 0 6px 16px rgba(13,27,42,.35);
  cursor: pointer; font-family: inherit;
}
.adam-escribir svg{ width: 20px; height: 20px; fill: none; stroke: currentColor; }
.adam-escribir:hover{ color: var(--adam-ground); background: var(--adam-accent); }
.adam-escribir:focus-visible{ outline: 3px solid var(--adam-accent); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine){ .adam-escribir:not([hidden]){ display: inline-flex; } }

/* Píldora sobre la burbuja: lo que Adam oye, y «Pensando…». Solo mientras
   pasa (como el HUD de la app): no se queda pegada. */
.adam-hud{
  position: fixed;
  right: var(--adam-fab-right);
  bottom: calc(var(--adam-fab-bottom) + 68px);
  z-index: 9550;
  max-width: min(340px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 10px 14px;
  font-family: inherit; font-size: 15px; line-height: 1.4;
  color: var(--adam-ink);
  background: var(--adam-ground);
  border: 1px solid var(--adam-accent);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(13,27,42,.45);
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity 100ms ease, transform 100ms ease;
}
.adam-hud.is-open{ opacity: 1; transform: none; transition-duration: 140ms; }
@media (prefers-reduced-motion: reduce){ .adam-hud{ transition-duration: 1ms; } }
.adam-fab:focus-visible{ outline: 3px solid var(--adam-accent); outline-offset: 3px; }
.adam-fab[aria-expanded="true"]{ display:none; }

/* ── Panel ───────────────────────────────────────────────────── */
.adam-panel{
  position: fixed;
  right: var(--belk-float-right, 16px);
  bottom: var(--belk-float-bottom, 16px);
  z-index: 9550;
  width: min(400px, calc(100vw - 24px));
  height: min(560px, calc(100vh - var(--belk-float-bottom, 16px) - 72px));
  box-sizing: border-box;
  display: flex; flex-direction: column;
  font-family: inherit;
  color: var(--adam-muted);
  background: var(--adam-ground);
  border: 1px solid var(--adam-line);
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(13,27,42,.50);
  opacity: 0; transform: translateY(8px);
  pointer-events: none;
  transition: opacity 100ms cubic-bezier(.2,.9,.3,1), transform 100ms cubic-bezier(.2,.9,.3,1);
}
.adam-panel.is-open{
  opacity: 1; transform: none; pointer-events: auto;
  transition-duration: 140ms;
}
@media (max-width:520px){
  .adam-panel{ right: 12px; width: calc(100vw - 24px); }
  .adam-cara{ width: 104px; height: 104px; border-radius: 18px; }
}
@media (prefers-reduced-motion: reduce){
  .adam-panel{ transition-duration: 1ms !important; }
}

.adam-head{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 6px 10px 14px;
  border-bottom: 1px solid var(--adam-line);
}
.adam-head img{ width:36px; height:36px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.adam-head-txt{ flex: 1 1 auto; min-width: 0; }
.adam-ti{ font-size: 17px; font-weight: 700; line-height: 1.2; color: var(--adam-ink); }
.adam-sub{ font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--adam-accent); }

.adam-ic-btn{
  width: 44px; height: 44px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border: 0; border-radius: 12px;
  background: transparent; color: var(--adam-muted);
  cursor: pointer; font-family: inherit;
}
.adam-ic-btn svg{ width: 20px; height: 20px; }
.adam-ic-btn:hover{ color: var(--adam-ink); background: var(--adam-raise); }
.adam-ic-btn:focus-visible{ outline: 2px solid var(--adam-accent); outline-offset: -2px; }
.adam-ic-btn:disabled{ opacity: .45; cursor: default; background: transparent; }
.adam-ic-btn.is-on{ color: var(--adam-ground); background: var(--adam-accent); }
.adam-ic-relleno svg{ fill: currentColor; }

/* ── Conversación ────────────────────────────────────────────── */
.adam-log{
  flex: 1 1 auto; overflow-y: auto;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.adam-msg{
  max-width: 88%;
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 15px; line-height: 1.45;
  white-space: pre-wrap; word-wrap: break-word;
}
.adam-msg.is-model{ align-self: flex-start; color: var(--adam-ink); background: transparent; border: 1px solid var(--adam-line); }
.adam-msg.is-user{ align-self: flex-end; color: var(--adam-ink); background: var(--adam-raise); border: 1px solid var(--adam-line); }
.adam-files{ display: block; margin-top: 4px; font-size: 12px; color: var(--adam-muted); }
.adam-hecho{
  display: block; margin-top: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--adam-accent);
}
.adam-deshacer{
  margin-left: 8px; padding: 0; border: 0; background: none;
  color: var(--adam-ink); font: inherit; font-size: 12px; font-weight: 700;
  text-decoration: underline; cursor: pointer;
  min-height: 24px;
}
.adam-typing{ display: inline-flex; gap: 4px; }
.adam-typing span{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--adam-muted); animation: adam-dot 1s infinite ease-in-out;
}
.adam-typing span:nth-child(2){ animation-delay: .15s; }
.adam-typing span:nth-child(3){ animation-delay: .3s; }
@keyframes adam-dot{ 0%,80%,100%{ opacity:.3 } 40%{ opacity:1 } }

/* ── Escribir / dictar ───────────────────────────────────────── */
.adam-pend{ padding: 0 14px; font-size: 12px; color: var(--adam-muted); }
.adam-pend:empty{ display: none; }
.adam-foot{
  display: flex; align-items: flex-end; gap: 4px;
  padding: 8px 8px 10px;
  border-top: 1px solid var(--adam-line);
}
.adam-input{
  flex: 1 1 auto; min-width: 0;
  min-height: 44px; max-height: 120px;
  box-sizing: border-box;
  padding: 11px 12px;
  resize: none;
  font: inherit; font-size: 15px; line-height: 1.35;
  color: var(--adam-ink);
  background: var(--adam-raise);
  border: 1px solid var(--adam-line);
  border-radius: 12px;
}
.adam-input::placeholder{ color: var(--adam-muted); opacity: .8; }
.adam-input:focus{ outline: 2px solid var(--adam-accent); outline-offset: -1px; }
.adam-send{ color: var(--adam-ground); background: var(--adam-accent); }
.adam-send:hover{ color: var(--adam-ground); background: var(--adam-accent-hover); }

@media print{ .adam-fab, .adam-panel, .adam-hud, .adam-escribir, .adam-cara{ display:none !important; } }