/* -------- RESET & BASE -------- */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  background:#fff;color:#111;
  display:flex;flex-direction:column;
  height:100vh;
}

/* -------- HEADER -------- */
header{
  background:#fff;
  padding:16px;
  text-align:center;
  font-size:1.3rem;font-weight:500;
  border-bottom:1px solid #eee;
  box-shadow:0 1px 4px rgba(0,0,0,.05);
  position: relative;
}

/* -------- MENÚ HAMBURGUESA -------- */
.menu-container { position:absolute; top:2px; right:16px; }
#menu-toggle { background:none; border:none; font-size:1.5rem; cursor:pointer; color:#333; }
#menu-options {
  list-style:none; margin-top:8px; padding:8px 0; position:absolute; right:0;
  background:#fff; border:1px solid #ddd; border-radius:6px; box-shadow:0 2px 6px rgba(0,0,0,.1);
  z-index:100; min-width:180px;
}
#menu-options li { padding:10px 16px; font-size:.95rem; cursor:pointer; transition:background .2s; }
#menu-options li:hover { background:#f5f5f5; }
.hidden { display:none; }

/* -------- CHAT AREA -------- */
#chat-box{
  flex:1;
  overflow-y:auto;
  padding:16px;
  display:flex;flex-direction:column;gap:12px;
  margin-bottom:0;
  padding-bottom:var(--composer-h, 64px);
}

/* -------- MESSAGE BUBBLES -------- */
.message{
  padding:10px 14px;border-radius:14px;
  font-size:1rem;max-width:80%;
  line-height:1.5;word-wrap:break-word;white-space:pre-wrap;
}
.user{
  background:#edf3ff;color:#000;
  align-self:flex-end;border-bottom-right-radius:4px;
}
.bot{
  background:#f5f6f7;color:#333;
  align-self:flex-start;border-bottom-left-radius:4px;
}
.message a{color:#005ec1;text-decoration:none}
.message a:hover{text-decoration:underline}

/* -------- FIXED INPUT BAR (COMPOSER) -------- */
#chat-form{
  position:fixed;inset:auto 0 0 0;
  width:100vw;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  display:flex;gap:8px;align-items:center;
  background:#fff;border-top:1px solid #e0e0e0;z-index:10;
  box-sizing:border-box;
}
#msg{
  flex:1;min-width:0;padding:10px 14px;font-size:1rem;
  border:1px solid #ccc;border-radius:20px;background:#f1f3f4;outline:none;
  line-height:1.45; resize:none; overflow-y:auto; max-height:220px;
  font-weight:400;
}
button{
  flex-shrink:0;padding:10px 16px;border:none;border-radius:20px;
  font-weight:700;background:#0070f3;color:#fff;cursor:pointer;
  transition:background .2s, transform .06s ease;
  box-shadow:none;
}
button:hover{background:#005ec1; box-shadow:none}
button:active{transform:scale(.98); box-shadow:none}

/* -------- ATTACHMENTS (composer) -------- */
:root { --chip-size: 120px; }
.composer-attachments{display:flex;gap:.6rem;flex-wrap:wrap;margin:0 0 .5rem}
.attach-chip{
  position:relative; display:inline-flex; align-items:center; gap:.6rem;
  border:1px solid #e6e6e7; border-radius:14px; padding:.55rem .75rem .55rem .55rem; background:#fafafa;
}
.attach-chip img{
  width:var(--chip-size); height:var(--chip-size); object-fit:cover; border-radius:10px; display:block;
}
.file-pill-large{
  width:var(--chip-size); height:var(--chip-size); border-radius:10px;
  border:1px solid #cfd8ff; background:#eef2ff; color:#3f51b5;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:1.1rem;
}
.chip-meta{ color:#777; font-size:.85rem; }
.remove-overlay{
  position:absolute; top:8px; right:8px; width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid #e5e7eb; background:#fff; color:#111;
  font-size:18px; font-weight:700; line-height:1; cursor:pointer; z-index:10;
  box-shadow:0 2px 6px rgba(0,0,0,.08); padding:0;
}
.remove-overlay:hover{ background:#f3f4f6; }

/* -------- FILE BUBBLES (enviados) -------- */
.deliver-note{ font-size:12px; color:#b26b00; margin-top:4px; }
.message.sending{ opacity:.6; position:relative; }
.message.sending::after{ content:"Enviando…"; position:absolute; bottom:-1.1rem; right:.5rem; font-size:.75rem; color:#777; }
.message.error{ border:1px solid #e74c3c; }
.message.sent{ opacity:1; }
.msg-image{ display:inline-block; border-radius:14px; overflow:hidden; border:1px solid #e7e7e8; background:#fff; }
.msg-image img{ display:block; width:180px; height:180px; object-fit:cover; }
.msg-filetile{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:140px; height:140px; border:1px solid #e7e7e8; border-radius:14px; background:#fff; gap:.35rem;
}
.msg-filetile .ext{
  font-weight:600; font-size:1.1rem; background:#eef2ff; color:#3f51b5;
  border:1px solid #cfd8ff; border-radius:10px; padding:.2rem .5rem;
}
.msg-filetile .hint{ color:#666; font-size:.8rem; }

/* -------- SUGGESTION CHIPS (opcionales) -------- */
.suggestion-buttons{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;justify-content:center}
.suggestion-buttons button{
  padding:10px 14px;border:1px solid #ddd;border-radius:20px;background:#fff;
  font-size:.9rem;cursor:pointer;transition:background .2s;
}
.suggestion-buttons button:hover{background:#f1f1f1}

/* -------- RESPONSIVE -------- */
@media(max-width:600px){
  header{font-size:1.1rem}
  .message{font-size:.95rem}
}

/* ===== DESKTOP CENTRADO ===== */
@media(min-width:900px){
  :root{--chat-max:720px}
  #chat-box{width:100%; max-width:var(--chat-max); margin-left:auto; margin-right:auto;}
  .suggestion-buttons{max-width:var(--chat-max); margin:0 auto;}
  #chat-form{
    left:50%; right:auto; width:100%; max-width:var(--chat-max);
    transform:translateX(-50%);
  }
  #menu-options { text-align:left; }
}

/* ===== MÓVIL: eliminar banda blanca ===== */
@media (max-width: 600px) {
  #chat-form { border-top: none; padding-left: 10px; padding-right: 10px; }
  #chat-box { padding-bottom: max(calc(var(--composer-h, 64px) - 14px), 0px); }
}