/* ====== Layout raíz del recopilador ====== */
.recopilador-app{
  display: grid;
  grid-template-columns: 320px 1fr;           /* Panel izq + Chat der */
  grid-template-rows: 56px 1fr;               /* Topbar + contenido */
  gap: 16px;
  height: 100vh;
  padding: 16px;
}

/* ====== Topbar ====== */
.topbar{
  grid-column: 1 / -1;                        /* ocupa ancho completo */
  background: linear-gradient(180deg, rgba(11,11,15,.8), rgba(11,11,15,.4));
  border: 1px solid #333;
  border-radius: 12px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  backdrop-filter: blur(10px);
}

.back-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #1b1c24;
  border: 1px solid #2a2a2a;
  color: #eaeaf2;
  padding: 8px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, border-color .2s ease;
}
.back-btn:hover{ transform: translateY(-1px); border-color:#3b3b3b; }
.back-btn:active{ transform: translateY(0); }
.back-btn .icon{ font-weight:700; font-size:16px; }

.user-chip{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #12121a;
  border: 1px solid #2a2a2a;
  color: #d9d9e3;
  padding: 8px 12px;
  border-radius: 999px;
  min-height: 34px;
}
.user-chip .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;                        /* online */
  box-shadow: 0 0 10px rgba(34,197,94,.6);
}
.user-chip .email{ font-size: 12px; color: #a1a1b3; }

/* ====== Panel izquierdo (datos aprendidos) ====== */
.recopilador-panel{
  grid-row: 2 / 3;
  background: #111;
  border: 1px solid #333;
  border-radius: 16px;
  padding: 16px 18px;
  overflow-y: auto;
  animation: slideIn .5s ease;
}
.recopilador-panel h2{ margin: 0 0 .75rem 0; font-size: 1.05rem; }
.recopilador-panel ul{ margin: 0; padding-left: 1.1rem; }
.recopilador-panel li{ color: #a1a1b3; margin: .35rem 0; }

/* ====== Contenedor del chat ====== */
.recopilador-chat{
  grid-row: 2 / 3;
  background: #12121a;
  border: 1px solid #333;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Interno del chat */
#chat{ display: flex; flex-direction: column; height: 100%; }

/* ====== Timeline de mensajes ====== */
#messages{
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;              /* <— necesario para align-self en .msg */
  flex-direction: column;
  gap: 10px;
  background:
    radial-gradient(700px 480px at 85% -20%, rgba(124,77,255,.07), transparent 60%),
    radial-gradient(900px 560px at -10% 120%, rgba(24,160,251,.05), transparent 55%);
}

/* ====== Burbujas ====== */
.msg{
  max-width: 75%;
  padding: .7rem .9rem;
  border-radius: 12px;
  border: 1px solid #2a2a2a;
  white-space: pre-wrap;
  word-break: break-word;
  animation: fadeIn .4s ease;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.msg.user{
  background: linear-gradient(135deg, #4f46e5, #3b82f6);
  color: #fff;
  align-self: flex-end;
}
.msg.ai{
  background: #222;
  color: #ddd;
  align-self: flex-start;
}

/* ====== Uploader ====== */
.uploader{
  padding: 10px 16px 0 16px;
  border-top: 1px solid #2a2a2a;
}
.upload-btn{
  display: inline-block;
  background: #1b1b1f;
  border: 1px dashed #555;
  color: #ccc;
  padding: .45rem .8rem;
  border-radius: .6rem;
  cursor: pointer;
}

/* ====== Input ====== */
.input-area{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 12px 16px 16px 16px;
  border-top: 1px solid #2a2a2a;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
#userInput{
  width: 100%;
  background: #0b0c14;
  color: #fff;
  border: 1px solid #313131;
  border-radius: 10px;
  padding: .65rem .9rem;
  outline: none;
}
#userInput:focus{
  box-shadow: 0 0 0 2px rgba(124,77,255,.35);
  border-color: rgba(124,77,255,.6);
}
#sendBtn{
  background: linear-gradient(90deg, #4f46e5, #3b82f6);
  border: 0;
  color: #fff;
  font-weight: 600;
  padding: .7rem 1rem;
  border-radius: .7rem;
  transition: transform .2s ease, opacity .2s ease;
  min-width: 110px;
}
#sendBtn:hover{ transform: translateY(-1px); }
#sendBtn:active{ transform: translateY(0); }
#sendBtn:disabled{ opacity: .6; cursor: not-allowed; }

/* ====== Body (look global) ====== */
body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  background: radial-gradient(circle at 20% 20%, #15161d 0%, #0b0b0f 100%);
  color: #fff;
  height: 100vh;
  overflow: hidden;
}

/* ====== Animaciones ====== */
@keyframes fadeIn{
  from{ opacity: 0; transform: translateY(5px); }
  to{ opacity: 1; transform: translateY(0); }
}
@keyframes slideIn{
  from{ opacity: 0; transform: translateX(-10px); }
  to{ opacity: 1; transform: translateX(0); }
}

/* ====== Datos aprendidos: secciones ====== */
.apr-section{ margin-bottom: 14px; }
.apr-section h3{
  margin: 10px 0 6px 0;
  font-size: .95rem;
  color: #e6e6f0;
}

/* Listas de negocio e IA */
#learnedNegocio, #learnedIA{ margin: 0; padding-left: 1.1rem; }
#learnedNegocio li, #learnedIA li{ color: #a1a1b3; margin: .35rem 0; }

/* ====== Grid de imágenes ====== */
.imgs-grid{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.img-card{
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  overflow: hidden;
  background: #0f0f14;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.img-card img{
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  background: #111;
}
.img-caption{ padding: 8px; }
.img-caption p{
  margin: 0 0 4px 0;
  color: #d0d0db;
  font-size: .9rem;
}
.img-caption small{ color: #8b8ba3; }

/* ====== Attachment preview (pending image) ====== */
.attach-preview{
  padding: 8px 16px 0 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}
.attach-item{
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  background: #0f0f14;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  padding: 6px 8px 6px 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.25);
  max-width: 100%;
}
.attach-item img{
  width: 96px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  background: #111;
  flex-shrink: 0;
}
.attach-remove{
  background: #1b1b1f;
  border: 1px solid #3a3a3a;
  color: #bbb;
  border-radius: 8px;
  cursor: pointer;
  padding: 6px 8px;
  line-height: 1;
  align-self: flex-start;
}
.attach-remove:hover{
  background: #23232a;
  color: #fff;
  border-color: #4a4a4a;
}

/* ====== Attachment note text ====== */
.attach-note{
  color: #a1a1b3;
  font-size: .85rem;
  line-height: 1.2;
  max-width: 220px;
  white-space: normal;
  word-break: break-word;
  margin-right: 4px;
}