/* /assets/css/chat.css
   ✅ Chat + composer con textarea tipo ChatGPT
*/

.bt-chat{
  flex: 1 1 auto;
  min-height: 0;
  display:flex;
  flex-direction: column;
  background: linear-gradient(180deg, var(--bg2), var(--bg3));
  overflow: hidden;
}

.bt-messages{
  flex: 1 1 auto;
  min-height: 0;
  overflow:auto;
  overflow-x:hidden;
  padding: 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
}

/* Bubbles */
.bt-msg{
  max-width: min(860px, 92%);
  position: relative;
  padding: 12px 12px 10px 12px;
  line-height: 1.45;
  font-size: 14px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 18px;
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.bt-msg .bt-body{ white-space: pre-wrap; }

.bt-msg.user{
  align-self:flex-end;
  background: var(--bubble-me);
  border:1px solid var(--bubble-me-border);
  border-top-right-radius: 8px;
}
.bt-msg.assistant{
  align-self:flex-start;
  background: var(--bubble-in);
  border:1px solid var(--bubble-in-border);
  border-top-left-radius: 8px;
}
.bt-msg.system{
  align-self:flex-start;
  background: var(--bubble-system);
  border:1px solid var(--bubble-system-border);
  border-top-left-radius: 8px;
}

.bt-msg.user::after{
  content:"";position:absolute;right:-6px;bottom:10px;width:12px;height:12px;
  background: var(--bubble-me);
  border-right:1px solid var(--bubble-me-border);
  border-bottom:1px solid var(--bubble-me-border);
  transform: rotate(45deg);
  border-bottom-right-radius:3px;
}
.bt-msg.assistant::before,
.bt-msg.system::before{
  content:"";position:absolute;left:-6px;bottom:10px;width:12px;height:12px;
  transform: rotate(-45deg);
  border-bottom-left-radius:3px;
}
.bt-msg.assistant::before{
  background: var(--bubble-in);
  border-left:1px solid var(--bubble-in-border);
  border-bottom:1px solid var(--bubble-in-border);
}
.bt-msg.system::before{
  background: var(--bubble-system);
  border-left:1px solid var(--bubble-system-border);
  border-bottom:1px solid var(--bubble-system-border);
}

.bt-meta{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
  display:flex;
  justify-content: space-between;
  gap: 10px;
  opacity: .92;
  align-items:center;
}

.bt-word{ padding: 0 1px; border-radius: 6px; }
.bt-word.on{ background: var(--hl-bg); }
html[data-theme="light"] .bt-word.on{ background: var(--hl-bg-light); }

/* Composer */
.bt-composer{
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  background: var(--composer-bg);
  padding: 12px;
  backdrop-filter: blur(12px);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* Barra estilo ChatGPT */
.bt-composerbar{
  display:flex;
  align-items:flex-end; /* textarea crece hacia arriba */
  gap:10px;
  border:1px solid var(--composer-pill-border);
  background:var(--composer-pill-bg);
  border-radius: 18px;
  padding: 10px 10px;
  max-width:100%;
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.06);
}

/* ✅ textarea tipo ChatGPT */
.bt-composerbar .bt-input{
  flex:1 1 auto;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-family: var(--mono);
  font-size: 15px;

  resize: none;
  width: 100%;
  min-height: 22px;
  max-height: 140px;
  overflow-y: auto;

  padding: 8px 6px;
  line-height: 1.35;
}

/* scrollbar discreta */
.bt-composerbar .bt-input::-webkit-scrollbar{ width: 8px; }
.bt-composerbar .bt-input::-webkit-scrollbar-thumb{
  background: rgba(147,164,217,.28);
  border-radius: 999px;
}
html[data-theme="light"] .bt-composerbar .bt-input::-webkit-scrollbar-thumb{
  background: rgba(11,16,32,.20);
}

/* Botones */
.bt-iconbtn{
  flex:0 0 auto;
  width:42px;height:42px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--composer-btn-border);
  background:var(--composer-btn-bg);
  color:var(--text);
  -webkit-tap-highlight-color: transparent;
}
.bt-iconbtn:hover{filter:brightness(1.08);}
.bt-iconbtn:disabled{opacity:.55;cursor:not-allowed;}

@media (max-width: 576px){
  .bt-composer{ padding: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .bt-messages{ padding: 12px; }
  .bt-msg{ max-width: 94%; }
  .bt-iconbtn{ width: 40px; height: 40px; }
}

/* ✅ Quitar la puntita / cola de burbuja */
.bt-msg.user::after,
.bt-msg.assistant::before,
.bt-msg.system::before{
  display: none !important;
  content: none !important;
}

.md .md-ol, .md .md-ul { margin: 6px 0 8px; padding-left: 20px; }
.md .md-ol li, .md .md-ul li { margin: 4px 0; }
.md .md-ol{ list-style-type: decimal; }
.md .md-ul{ list-style-type: disc; }