/* Control remoto de la tarea: el composer del prompt pegado al pie, el turno en vivo
   y las propuestas de backlog esperando el visto bueno. El dictado por voz y el alta
   rápida de tarea desde el tablero están en turno-dictado.css. */

/* ── Composer del prompt ────────────────────────────────────────────────── */
/* Con poco contenido la pantalla no llega al fondo y el composer quedaría flotando a
   media altura: se estira la pantalla y se lo empuja abajo con el margen automático. */
.pantalla:has(> .composer) { min-height: 100%; }

.composer {
  margin-top: auto;
  /* Antes se bombeaba de borde a borde con márgenes negativos; ahora es una tarjeta
     propia (SPEC-MULTI-MAD-MOVIL §5.4), angosta por el padding de `.pantalla` igual que
     el resto del contenido, con un poco de aire antes de la barra de pestañas. */
  margin-bottom: calc(var(--sp-8) * -1 + var(--sp-2));
  position: sticky;
  bottom: 0;
  z-index: var(--z-pie);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  /* Los controles del composer son más BAJOS que el mínimo táctil general: el campo y
     los dos botones se usan de a uno y con el pulgar apoyado, y en una pantalla de
     teléfono cada píxel de alto acá se lo come a la conversación. */
  --alto-ctl: 36px;
  background-color: var(--panel);
  background-image: var(--grad-superficie);
  backdrop-filter: var(--blur-vidrio);
  -webkit-backdrop-filter: var(--blur-vidrio);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}

.composer[hidden] { display: none; }

.composer-fila {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-end;
}

.prompt {
  flex: 1;
  min-height: var(--alto-ctl);
  padding: var(--sp-2) 0;
  max-height: 160px;
  resize: none;
  overflow-y: auto;
  /* Dentro de la tarjeta del composer el borde propio del `.input` sobra: el que ya
     dibuja `.composer` alcanza (igual que el campo del mock, que es texto a secas). */
  background: transparent;
  border-color: transparent;
  /* La barra de scroll nativa aparecía como una rayita gris al borde del campo apenas
     el texto (o el placeholder) pasaba de una línea: se scrollea igual, sin barra. */
  scrollbar-width: none;
}

.prompt::-webkit-scrollbar { display: none; }

/* El placeholder en una sola línea: si no entra se corta con "…" en vez de partirse en
   dos y quedar a medias debajo del borde del campo. */
.prompt::placeholder {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.composer .btn { min-height: var(--alto-ctl); }
.composer .btn.icono { width: var(--alto-ctl); }

/* ── Adjuntos del prompt ────────────────────────────────────────────────── */
/* Tira de miniaturas ARRIBA del campo: ocupa alto sólo cuando hay algo adjunto, y
   scrollea en horizontal para que ocho archivos no empujen la conversación fuera de
   la pantalla. */
.adjuntos {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  padding-bottom: var(--sp-1);
  scrollbar-width: none;
}
.adjuntos[hidden] { display: none; }
.composer.dictando .adjuntos { display: none; }

/* Menú de origen del clip: galería, cámara o archivo. Se abre hacia ARRIBA (el composer
   vive pegado al pie) y se ancla al botón, igual que la grilla del selector de tipo. */
.adj-origen { position: relative; flex: 0 0 auto; display: inline-flex; }

.origen-menu {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  z-index: var(--z-hoja);
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: max-content;
  padding: var(--sp-1);
  background: var(--panel);
  border: 1px solid var(--line-hi);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
}
.origen-menu[hidden] { display: none; }

.origen-item {
  display: flex;
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
}
.origen-item:active { background: var(--fill-hi); }
.origen-item svg { color: var(--muted); flex: 0 0 auto; }

/* Los inputs de archivo NO van con `hidden`: en varios WebKit el `.click()` sobre un
   input display:none se ignora sin avisar y el selector nunca abre. */
.adj-file {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.adj {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 var(--sp-2);
  align-items: center;
  flex: 0 0 auto;
  max-width: 62%;
  padding: var(--sp-1) var(--sp-2);
  padding-right: var(--sp-6);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.adj-mini {
  grid-row: span 2;
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: var(--r-sm);
  background: var(--fill);
}
/* Sin miniatura (un PDF, un .zip) el recuadro lleva la extensión. */
.adj-mini.doc {
  display: grid;
  place-items: center;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.adj-nombre {
  font-size: var(--fs-sm);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adj-pie { font-size: var(--fs-xs); color: var(--faint); }
.adj.roto .adj-pie { color: var(--conflict); }

/* La barra de progreso es una línea al pie del chip: mandar 80 MB desde el celular
   tarda, y sin ella la subida parece colgada. */
.adj-barra {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  transition: width 0.2s linear;
}
.adj:not(.subiendo) .adj-barra { opacity: 0; }

.adj-quitar {
  position: absolute;
  top: 2px;
  right: 2px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: var(--r-pill);
}

.enviar { flex: 0 0 auto; }

/* Bajar el teclado (o borrar lo escrito): es una SALIDA, no una acción del turno, así
   que va sin borde y apagado — tiene que estar a mano sin competir con el enviar.
   Ver js/ui/teclado.js. */
.bajar {
  flex: 0 0 auto;
  border-color: transparent;
  background: transparent;
  color: var(--faint);
}

.bajar[hidden] { display: none; }

/* Fila de botones chicos (la usa el bloque de copiloto). */
.fila-acciones { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

.fila-botones {
  display: flex;
  gap: var(--sp-2);
  justify-content: flex-end;
}

/* ── Propuestas de backlog ──────────────────────────────────────────────── */
.card-propuesta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  text-align: left;
}

.titulos-propuestos {
  margin: 0;
  padding-left: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  color: var(--ink);
  font-size: var(--fs-md);
  line-height: 1.4;
}

.titulos-propuestos li::marker { color: var(--accent); }

/* Ficha de cada tarea propuesta: se aprueba sabiendo qué se aprueba. */
.items-propuestos { display: flex; flex-direction: column; gap: var(--sp-2); }

.item-prop {
  display: flex; flex-direction: column; gap: 3px;
  padding: var(--sp-2);
  border-left: 2px solid var(--border-hi);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--panel2) 60%, transparent);
}

.ip-cab { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.ip-grupo { color: var(--faint); font-size: var(--fs-xs); }
.ip-titulo { font-size: var(--fs-md); font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

.ip-desc {
  margin: 0; color: var(--muted); font-size: var(--fs-sm); line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; overflow-wrap: anywhere;
}
.ip-desc.entera { display: block; }

.ip-needs { color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.ip-needs b { color: var(--wait); font-weight: 600; }