:root{
  --bg:#ffffff; --text:#0d0d0f; --muted:#6b7280;
  --pill:#f3f4f6; --pill-border:#e5e7eb;
  --bubble-user:#f4f4f4;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial; background:var(--bg); color:var(--text)}

/* Top actions */
.top-actions{position:fixed; top:10px; right:16px; display:flex; gap:12px; z-index:5}
.btn{border:1px solid #111827; background:#111827; color:#fff; padding:8px 14px; border-radius:999px; font-weight:600; font-size:14px; cursor:pointer}
.btn.ghost{background:#fff; border-color:#e5e7eb; color:#111827}
.icon-btn{width:36px; height:36px; display:grid; place-items:center; border-radius:999px; border:1px solid #e5e7eb; background:#fff; cursor:pointer}

/* HOME */
.center{min-height:100dvh; display:grid; place-items:center; padding:24px}
.wrap{width:min(900px,92vw); display:flex; flex-direction:column; align-items:center; gap:24px; transform:translateY(-6vh)}
.title{font-size:36px; font-weight:700}
.pill{width:100%; background:#fff; border:1px solid var(--pill-border); border-radius:28px; padding:10px}
.pill-inner{display:flex; align-items:center; gap:12px; padding:4px 8px 4px 14px}
.pill textarea{flex:1; resize:none; border:0; outline:0; background:transparent; font-size:16px; line-height:1.4; padding:10px 0}

/* CHAT */
.chat{display:none; height:100dvh; padding-top:64px}
.chat .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* alineado a la izquierda */
  padding-left: 10px;            /* margen a la izquierda */
  /* border-bottom: 1px solid var(--pill-border); */
  background: #fff;
  z-index: 4;
  font-weight: 700;
}

.chat .header img {
  height: 28px;                  /* tamaño del logo */
  width: auto;
  margin-right: 8px;             /* espacio entre logo y texto */
}
.messages{height:calc(100dvh - 180px); overflow:auto; padding:18px}
.msg{display:flex; margin:10px auto; max-width:min(900px,92vw)}
.msg.user{justify-content:flex-end}
.msg.user .bubble{background:var(--bubble-user); border-radius:16px; padding:12px 14px}
.msg.assistant .bubble{background:transparent; border:none; color:#000; padding:0; font-size:16px; line-height:1.6; white-space:pre-wrap; word-break:break-word}
.typing .bubble{display:inline-flex; gap:6px}
.dot{width:8px;height:8px;border-radius:50%;background:#c7cbd3;animation:bounce 1.3s infinite}
.dot:nth-child(2){animation-delay:.15s} .dot:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:scale(.6);opacity:.6}40%{transform:scale(1);opacity:1}}

.composer{position:fixed; left:0; right:0; bottom:40px; padding:0 12px; background:transparent}
.composer .box{max-width:min(900px,92vw); margin:0 auto; background:#fff; border:1px solid var(--pill-border); border-radius:28px; padding:10px}
.composer .row{display:flex; align-items:center; gap:10px; padding:4px 8px 4px 14px}
.composer textarea{flex:1; resize:none; border:0; outline:0; background:transparent; font-size:16px; line-height:1.4; padding:10px 0}
.composer .actions{display:flex; gap:8px}
.primary{background:#111827; color:#fff; border:1px solid #111827; border-radius:999px; padding:8px 14px; cursor:pointer; font-weight:600}

.legal{position:fixed; bottom:10px; left:0; right:0; text-align:center; color:#6b7280; font-size:12px}

.composer-submit-btn {
    align-items: center;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
}
.composer-submit-button-color {
    background-color: var(--theme-submit-btn-bg);
    color: var(--theme-submit-btn-text);
}
.composer-submit-button-color {
    background-color: #000;
    color: #fff;
    border: 0 solid;
}

.pill-inner .icon-btn{display: none;}


.typing .bubble {
  display: inline-flex;
  gap: 6px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c7cbd3;
  animation: bounce 1.3s infinite;
}

.dot:nth-child(2) { animation-delay: .15s; }
.dot:nth-child(3) { animation-delay: .3s; }

@keyframes bounce {
  0%, 80%, 100% { transform: scale(.6); opacity: .6; }
  40% { transform: scale(1); opacity: 1; }
}

.legal a{
  text-decoration: none; /* sin subrayado */
  color: #000;           /* negro */
}
.legal a:hover {
  color: #444; /* gris oscuro en hover */
}