/* ENTRE — cálido, humano, sin presión. */
:root{
  --bg:#faf6ef; --panel:#ffffff; --panel2:#f3ecdf;
  --ink:#33302b; --soft:#8a8175; --line:#e7ddcc;
  --acc:#c96f4a;        /* terracota */
  --acc-ink:#fff;
  --me-bg:#f6e7dc; --me-bd:#eBD3c2;
  --them-bg:#ffffff; --them-bd:#e7ddcc;
  --ok:#7ca982; --warn:#c9a24a; --bad:#c05b5b;
  --sans:-apple-system,"SF Pro Text",Segoe UI,Roboto,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --r:18px;
  --shadow:0 2px 14px rgba(80,60,40,.08);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#211d19; --panel:#2b2620; --panel2:#332d26;
    --ink:#efe7db; --soft:#a3988a; --line:#3d362d;
    --me-bg:#3d2f27; --me-bd:#4d3a2e;
    --them-bg:#2b2620; --them-bd:#3d362d;
    --shadow:0 2px 14px rgba(0,0,0,.35);
  }
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  overflow:hidden; position:fixed; inset:0; font-size:16px; line-height:1.45}
.hidden{display:none !important}
button{font-family:inherit}

/* ===== pantallas ===== */
.screen{position:fixed; inset:0; display:flex; flex-direction:column;
  padding:env(safe-area-inset-top) 0 0}

/* ===== acceso ===== */
#lock{align-items:center; justify-content:center}
.lock-wrap{width:min(340px,88vw); text-align:center}
.brand-mark{font-size:52px; color:var(--acc); line-height:1}
.brand-name{font-family:var(--serif); font-size:34px; letter-spacing:.32em; margin:10px 0 4px; font-weight:400}
.brand-tag{color:var(--soft); font-size:14px; margin:0 0 34px}
.pin-label{display:block; text-align:left; font-size:13px; color:var(--soft); margin-bottom:8px}
.pin-input{width:100%; background:var(--panel); border:1px solid var(--line); color:var(--ink);
  font-size:18px; padding:13px 14px; border-radius:14px; outline:none; text-align:center; letter-spacing:.2em}
.pin-input:focus{border-color:var(--acc)}
.btn-primary{width:100%; margin-top:12px; background:var(--acc); color:var(--acc-ink); border:0;
  font-size:16px; font-weight:600; padding:13px; border-radius:14px; cursor:pointer}
.btn-primary:active{opacity:.85}
.btn-ghost{background:transparent; border:1px solid var(--line); color:var(--ink);
  font-size:14px; padding:11px 14px; border-radius:12px; cursor:pointer}
.pin-msg{margin-top:12px; min-height:18px; font-size:13px; color:var(--bad)}
.install-hint{margin-top:26px; font-size:13px; color:var(--soft); line-height:1.7;
  border:1px dashed var(--line); border-radius:12px; padding:10px 12px}

/* ===== app ===== */
.topbar{display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--panel);
  border-bottom:1px solid var(--line)}
.tb-left{flex:1; min-width:0}
.tb-title{font-family:var(--serif); font-size:18px; letter-spacing:.22em}
.tb-mark{color:var(--acc)}
.tb-peer{font-size:12px; color:var(--soft); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.status-btn{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--panel2);
  font-size:17px; cursor:pointer; flex:none}
.icon-btn{width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--panel);
  color:var(--ink); font-size:17px; cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center}
.icon-btn.send{background:var(--acc); color:var(--acc-ink); border-color:var(--acc)}

.chat{flex:1; display:flex; flex-direction:column; min-height:0; position:relative}
.load-more{align-self:center; margin:8px 0 0; background:transparent; border:0; color:var(--soft);
  font-size:12px; cursor:pointer; text-decoration:underline; text-underline-offset:3px}
.msgs{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:14px 12px 6px;
  display:flex; flex-direction:column; gap:10px}
.typing{padding:2px 16px 6px; font-size:12px; color:var(--soft); font-style:italic}

/* ===== burbujas ===== */
.msg{max-width:82%; padding:10px 13px; border-radius:var(--r); position:relative;
  word-wrap:break-word; overflow-wrap:anywhere; box-shadow:var(--shadow); border:1px solid var(--them-bd)}
.msg .t{white-space:pre-wrap}
.msg.me{align-self:flex-end; background:var(--me-bg); border-color:var(--me-bd)}
.msg.them{align-self:flex-start; background:var(--them-bg)}
.msg .meta{display:block; font-size:10.5px; color:var(--soft); margin-top:5px; text-align:right}
.msg .meta .tick{margin-left:5px}
.msg .meta .tick.st-seen{color:var(--acc)}
.msg .meta .tick.st-failed{color:var(--bad)}
.msg.pending{opacity:.75}
.msg.failed{border-color:var(--bad); cursor:pointer}
.msg.failed::after{content:"⚠ tocá para reintentar"; display:block; font-size:10px; color:var(--bad); margin-top:3px; text-align:right}

/* cabecera de intención dentro de la burbuja */
.mhead{display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-bottom:6px}
.chip{font-size:11px; padding:2px 9px; border-radius:11px; background:var(--panel2); color:var(--soft);
  border:1px solid var(--line); white-space:nowrap}
.chip.mood{background:transparent}
.mfoot{display:flex; justify-content:flex-end; margin-top:4px}
.chip.expect{font-size:10.5px}
.chip.expect.e-urgente{background:var(--bad); color:#fff; border-color:var(--bad)}
.chip.expect.e-hoy{background:var(--warn); color:#fff; border-color:var(--warn)}

/* tonos visuales por intención */
.msg.i-carino{background:#fbe9e4; border-color:#f2cfc4}
.msg.i-carino .mhead .chip.intent{background:#f6d9d0; color:#a35a41; border-color:#eec0b2}
.msg.i-serio{border-radius:8px; background:var(--panel); border-color:#9a917f; border-left:4px solid #6d675c}
.msg.i-disculpa{background:#eeeaf4; border-color:#d8cfe8; border-left:4px solid #8f7bb5}
.msg.i-resolver{border-left:4px solid var(--ok)}
.msg.i-pedir{border-left:4px solid var(--warn)}
.msg.i-contar{border-left:4px solid #7ea7c2}
.msg.i-pregunta{border-left:4px solid var(--acc)}
@media (prefers-color-scheme: dark){
  .msg.i-carino{background:#43302c; border-color:#5c4038}
  .msg.i-carino .mhead .chip.intent{background:#54382f; color:#f0b9a5; border-color:#6b4636}
  .msg.i-disculpa{background:#352f42; border-color:#4a4160}
  .msg.i-serio{background:#2b2620}
}

/* pregunta con botones */
.ask-opts{display:flex; flex-wrap:wrap; gap:7px; margin-top:9px}
.ask-opts button{background:var(--panel); border:1.5px solid var(--acc); color:var(--acc);
  font-size:13px; font-weight:600; padding:7px 13px; border-radius:14px; cursor:pointer}
.ask-opts button:disabled{opacity:.45; cursor:default}
.ask-opts button.chosen{background:var(--acc); color:#fff}
.ask-answered{margin-top:8px; font-size:12px; color:var(--ok); font-weight:600}

/* mensajes de sistema (pausa, etc.) */
.sys{align-self:center; font-size:12px; color:var(--soft); background:var(--panel2);
  border-radius:12px; padding:5px 13px; text-align:center; max-width:90%}

/* ===== barra de pausa / tensión ===== */
.pause-bar{display:flex; align-items:center; gap:10px; padding:9px 14px; background:#e9f0e6;
  border-bottom:1px solid #cfdec9; color:#4c6b45; font-size:13px}
.pause-bar button{margin-left:auto; background:transparent; border:0; color:#4c6b45;
  text-decoration:underline; cursor:pointer; font-size:12px}
@media (prefers-color-scheme: dark){ .pause-bar{background:#2c352a; border-color:#3d4a3a; color:#a9c4a1} .pause-bar button{color:#a9c4a1} }
.tension-bar{padding:12px 14px; background:var(--panel2); border-bottom:1px solid var(--line)}
.tn-txt{font-size:13.5px; line-height:1.5; margin-bottom:9px}
.tn-actions{display:flex; gap:8px}
.tn-yes{flex:1; background:var(--acc); color:#fff; border:0; padding:9px; border-radius:12px; font-weight:600; cursor:pointer}
.tn-no{flex:1; background:transparent; border:1px solid var(--line); color:var(--ink); padding:9px; border-radius:12px; cursor:pointer}

/* ===== ¿cómo responder? ===== */
.reply-help{margin:0 10px 6px; background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:9px 11px}
.rh-title{display:flex; align-items:center; font-size:12px; color:var(--soft); margin-bottom:7px}
.rh-title button{margin-left:auto; background:transparent; border:0; color:var(--soft); cursor:pointer; font-size:13px}
.rh-chips{display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:2px}
.rh-chips button{flex:none; background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  font-size:12.5px; padding:7px 11px; border-radius:13px; cursor:pointer; white-space:nowrap}

/* ===== selección + panel de intención ===== */
.sel-row{display:flex; gap:6px; flex-wrap:wrap; padding:6px 12px 0}
.sel-row .chip{cursor:pointer}
.sel-row .chip::after{content:" ✕"; opacity:.6}
.intent-panel{background:var(--panel); border-top:1px solid var(--line); padding:10px 12px 4px;
  max-height:44vh; overflow-y:auto}
.ip-sec{margin-bottom:10px}
.ip-label{font-size:11.5px; color:var(--soft); margin-bottom:6px; letter-spacing:.05em; text-transform:uppercase}
.ip-chips{display:flex; gap:6px; flex-wrap:wrap}
.ip-chips button{background:var(--panel2); border:1px solid var(--line); color:var(--ink);
  font-size:13px; padding:7px 12px; border-radius:14px; cursor:pointer}
.ip-chips button.on{background:var(--acc); border-color:var(--acc); color:#fff}

/* ===== composer ===== */
.composer{display:flex; align-items:center; gap:8px; padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  background:var(--panel); border-top:1px solid var(--line)}
.composer .icon-btn{border-radius:14px}
#intentBtn.on{background:var(--acc); color:#fff; border-color:var(--acc)}
.msg-input{flex:1; min-width:0; background:var(--bg); border:1px solid var(--line); color:var(--ink);
  font-size:16px; padding:11px 14px; border-radius:16px; outline:none}
.msg-input:focus{border-color:var(--acc)}

/* ===== modal suavizador ===== */
.modal{position:fixed; inset:0; z-index:200; background:rgba(40,30,20,.45);
  display:flex; align-items:center; justify-content:center; padding:20px}
.modal-card{width:min(420px,94vw); background:var(--panel); border-radius:20px; padding:18px; box-shadow:var(--shadow)}
.mc-title{font-size:15px; font-weight:700; line-height:1.4; margin-bottom:10px}
.mc-orig{font-size:13px; color:var(--soft); background:var(--panel2); border-radius:10px; padding:8px 10px;
  margin-bottom:12px; white-space:pre-wrap; max-height:90px; overflow-y:auto}
.mc-label{display:block; font-size:12px; color:var(--soft); margin-bottom:6px}
.mc-text{width:100%; background:var(--bg); border:1px solid var(--line); color:var(--ink); font-family:inherit;
  font-size:15px; padding:10px 12px; border-radius:12px; outline:none; resize:none}
.mc-text:focus{border-color:var(--acc)}
.mc-actions{display:flex; gap:8px; margin-top:12px}
.mc-actions .btn-ghost{flex:1}
.mc-actions .btn-primary{flex:1.4; width:auto; margin:0}

/* ===== hojas (estado / menú) ===== */
.sheet{position:fixed; inset:0; z-index:150; background:rgba(40,30,20,.4); display:flex; align-items:flex-end}
.sheet-card{width:100%; background:var(--panel); border-radius:22px 22px 0 0; padding:18px 16px calc(16px + env(safe-area-inset-bottom));
  max-height:80vh; overflow-y:auto; display:flex; flex-direction:column; gap:9px}
.sheet-title{font-family:var(--serif); font-size:17px; letter-spacing:.08em; margin-bottom:4px}
.status-list{display:flex; flex-direction:column; gap:7px}
.status-list button{display:flex; align-items:center; gap:10px; background:var(--panel2); border:1px solid var(--line);
  color:var(--ink); font-size:14.5px; padding:11px 13px; border-radius:13px; cursor:pointer; text-align:left}
.status-list button.on{border-color:var(--acc); box-shadow:inset 0 0 0 1px var(--acc)}
.status-list .st-sub{margin-left:auto; font-size:11px; color:var(--soft)}
.menu-toggle{display:flex; align-items:center; justify-content:space-between; font-size:14.5px; padding:4px 2px}
.sw{width:50px; height:29px; border-radius:15px; background:var(--panel2); border:1px solid var(--line);
  position:relative; cursor:pointer; padding:0; transition:background .2s}
.sw .sw-knob{position:absolute; top:2px; left:3px; width:23px; height:23px; border-radius:50%; background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.25); transition:left .2s}
.sw.on{background:var(--ok); border-color:var(--ok)}
.sw.on .sw-knob{left:22px}
.menu-note{font-size:11.5px; color:var(--soft); line-height:1.5}
.menu-item{background:var(--panel2); border:1px solid var(--line); color:var(--ink); font-size:14px;
  padding:11px 13px; border-radius:13px; cursor:pointer; text-align:left}
.menu-item.danger{color:var(--bad)}
.menu-foot{font-size:11px; color:var(--soft); line-height:1.6; padding-top:6px; border-top:1px solid var(--line)}

/* accesibilidad */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; transition-duration:.001ms !important}
}