/* El Horizonte de Santiago — El Observatorio */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --gold:#d4c5a9; --gold-dim:#9a8a6a; --text:#e9e2d4; --muted:#8a8678;
  --accent:#d4c5a9; /* lo pisa cada mente */
  --line:rgba(212,197,169,.18);
}
html,body{height:100%}
body{
  font-family:Georgia,'Times New Roman',serif; color:var(--text);
  background:radial-gradient(ellipse at 50% 120%, #11182e 0%, #0a0e1a 38%, #05060d 100%);
  height:100vh; overflow:hidden; position:relative;
}
#stars{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
#horizon{
  position:fixed; left:0; right:0; top:64%; height:1px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(212,197,169,.5),transparent);
  box-shadow:0 0 60px 18px rgba(120,140,200,.10), 0 0 14px 2px rgba(212,197,169,.18);
}
#app{position:relative;z-index:2;height:100vh;display:flex;flex-direction:column}

.fade{animation:fade .6s ease}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- Umbral / Login ---------- */
.umbral{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.umbral .brand{font-size:clamp(26px,5vw,44px);letter-spacing:.16em;font-weight:400;color:var(--gold);
  text-shadow:0 0 30px rgba(212,197,169,.25);line-height:1.25}
.umbral .tag{color:var(--muted);font-style:italic;letter-spacing:.08em;margin-top:14px;font-size:15px}
.umbral form{margin-top:46px;display:flex;flex-direction:column;gap:12px;width:100%;max-width:320px}
.umbral input{background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);
  padding:13px 16px;border-radius:10px;font-family:inherit;font-size:15px;text-align:center}
.umbral input:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.06)}
.umbral button{background:rgba(212,197,169,.12);border:1px solid var(--gold-dim);color:var(--gold);
  padding:12px;border-radius:10px;font-family:inherit;font-size:15px;letter-spacing:.05em;cursor:pointer;transition:.25s}
.umbral button:hover{background:rgba(212,197,169,.22)}
.umbral .err{color:#d98a8a;font-size:13px;min-height:18px;margin-top:6px}

/* ---------- Galería / Horizonte ---------- */
.gallery{flex:1;display:flex;flex-direction:column}
.gallery .top{padding:30px 28px 0;text-align:center}
.gallery .top h1{font-weight:400;letter-spacing:.16em;color:var(--gold);font-size:clamp(20px,3.4vw,30px);
  text-shadow:0 0 24px rgba(212,197,169,.2)}
.gallery .top .sub{color:var(--muted);font-style:italic;margin-top:8px;font-size:14px}
.gallery .top .who{position:absolute;top:24px;right:26px;color:var(--muted);font-size:12px}
.gallery .top .who a{color:var(--muted);text-decoration:none;border-bottom:1px dotted var(--line);cursor:pointer}
.gallery .top .who a:hover{color:var(--gold)}
.constellation{flex:1;display:flex;align-items:center;justify-content:center;gap:clamp(26px,6vw,72px);
  flex-wrap:wrap;padding:20px 24px 9vh;align-content:center}
.mind-node{display:flex;flex-direction:column;align-items:center;cursor:pointer;width:170px;
  text-align:center;transition:.3s;opacity:.92}
.mind-node:hover{opacity:1;transform:translateY(-6px)}
.medallion{width:104px;height:104px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  position:relative;background:radial-gradient(circle at 38% 32%, rgba(255,255,255,.10), rgba(255,255,255,.02));
  border:1px solid var(--node-accent,#d4c5a9);overflow:hidden;
  box-shadow:0 0 26px 2px color-mix(in srgb, var(--node-accent,#d4c5a9) 35%, transparent), inset 0 0 22px rgba(0,0,0,.5);
  transition:.3s}
.mind-node:hover .medallion{box-shadow:0 0 44px 6px color-mix(in srgb, var(--node-accent,#d4c5a9) 55%, transparent), inset 0 0 22px rgba(0,0,0,.4)}
.medallion img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.medallion .mono{font-size:40px;color:var(--node-accent,#d4c5a9);font-weight:400;text-shadow:0 0 16px color-mix(in srgb,var(--node-accent,#d4c5a9) 60%,transparent)}
.mind-node .name{margin-top:16px;font-size:18px;letter-spacing:.05em;color:var(--text)}
.mind-node .era{font-size:11px;color:var(--muted);margin-top:3px;letter-spacing:.06em}
.mind-node .invite{font-size:13px;color:var(--gold-dim);font-style:italic;margin-top:10px;line-height:1.5;
  opacity:0;max-height:0;transition:.35s}
.mind-node:hover .invite{opacity:.95;max-height:60px}
.mind-node.more .medallion{border-style:dashed;border-color:var(--muted);background:transparent;box-shadow:none}
.mind-node.more .mono{color:var(--muted);font-size:30px}

/* ---------- Sala ---------- */
.room{flex:1;display:grid;grid-template-columns:248px 1fr;height:100vh;min-height:0}
.room .aside{border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;
  background:rgba(5,7,14,.55);backdrop-filter:blur(2px)}
.room .aside .back{padding:16px 18px;color:var(--muted);cursor:pointer;font-size:13px;letter-spacing:.04em;border-bottom:1px solid var(--line)}
.room .aside .back:hover{color:var(--gold)}
.room .aside .new{margin:14px 16px;padding:10px;text-align:center;border:1px solid var(--accent);border-radius:9px;
  color:var(--accent);cursor:pointer;font-size:13px;letter-spacing:.04em;transition:.2s}
.room .aside .new:hover{background:color-mix(in srgb,var(--accent) 14%,transparent)}
.room .aside .hist-label{padding:6px 18px;color:var(--muted);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.room .aside .hist{overflow-y:auto;flex:1;min-height:0;padding:0 10px 16px}
.room .aside .conv{padding:10px 12px;border-radius:8px;cursor:pointer;color:var(--muted);font-size:13px;line-height:1.4;transition:.2s}
.room .aside .conv:hover{background:rgba(255,255,255,.04);color:var(--text)}
.room .aside .conv.active{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--text)}
.room .aside .conv .when{display:block;font-size:10px;color:var(--gold-dim);margin-top:3px}

.room .main{display:flex;flex-direction:column;min-height:0}
.room .head{padding:16px 26px;border-bottom:1px solid var(--line);display:flex;align-items:baseline;gap:14px}
.room .head .av{width:30px;height:30px;border-radius:50%;border:1px solid var(--accent);flex-shrink:0;position:relative;
  display:flex;align-items:center;justify-content:center;color:var(--accent);font-size:14px;overflow:hidden;align-self:center}
.room .head .av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.room .head .name{font-size:18px;color:var(--text);letter-spacing:.04em}
.room .head .epi{font-size:13px;color:var(--gold-dim);font-style:italic}
.chat{flex:1;overflow-y:auto;padding:26px 18px;min-height:0}
.chat-inner{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.opening{text-align:center;color:var(--gold-dim);font-style:italic;font-size:16px;line-height:1.7;margin:auto;max-width:520px;padding:30px 0}
.msg{display:flex;gap:12px;max-width:92%}
.msg.user{align-self:flex-end}
.msg.mind{align-self:flex-start}
.bubble{padding:14px 18px;border-radius:14px;font-size:15.5px;line-height:1.75}
.bubble.user{background:rgba(120,140,200,.13);border:1px solid rgba(120,140,200,.18);border-bottom-right-radius:5px;color:var(--text)}
.bubble.mind{background:rgba(255,255,255,.045);border-left:2px solid var(--accent);border-bottom-left-radius:5px;color:#efe9dc;box-shadow:0 0 26px rgba(0,0,0,.3)}
.bubble.mind p{margin:0 0 10px}.bubble.mind p:last-child{margin:0}
.bubble.mind h2,.bubble.mind h3,.bubble.mind h4{font-size:16px;margin:12px 0 6px;color:var(--gold)}
.bubble.mind ul,.bubble.mind ol{margin:8px 0;padding-left:22px}.bubble.mind li{margin:4px 0}
.bubble.mind strong{color:#fff}.bubble.mind em{color:var(--gold)}
.bubble.mind code{background:rgba(0,0,0,.35);padding:1px 5px;border-radius:3px;font-size:13px}
.bubble.mind blockquote{border-left:2px solid var(--gold-dim);padding-left:12px;color:var(--muted);margin:8px 0}
.status{font-size:13px;color:var(--gold-dim);font-style:italic}
.dots span{animation:blink 1.3s infinite}.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

.input-area{padding:14px 18px;border-top:1px solid var(--line)}
.input-row{max-width:760px;margin:0 auto;display:flex;gap:10px;align-items:flex-end}
.input-row textarea{flex:1;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);
  padding:13px 16px;border-radius:12px;font-family:inherit;font-size:15px;resize:none;min-height:52px;max-height:170px;line-height:1.5}
.input-row textarea:focus{outline:none;border-color:var(--accent)}
.send{background:color-mix(in srgb,var(--accent) 18%,transparent);border:1px solid var(--accent);color:var(--accent);
  width:52px;height:52px;border-radius:12px;cursor:pointer;font-size:18px;flex-shrink:0;transition:.2s}
.send:hover{background:color-mix(in srgb,var(--accent) 30%,transparent)}.send:disabled{opacity:.4;cursor:default}

@media(max-width:680px){
  .room{grid-template-columns:1fr}
  .room .aside{display:none}
}

/* ============ La Mesa (multi-mente) ============ */
/* Galería: CTA reunir mesa */
.mesa-cta{text-align:center;padding:0 0 7vh}
.mesa-cta a{color:var(--gold-dim);cursor:pointer;letter-spacing:.08em;font-size:15px;border:1px solid var(--line);
  padding:10px 20px;border-radius:30px;transition:.25s;display:inline-block}
.mesa-cta a:hover{color:var(--gold);border-color:var(--gold);box-shadow:0 0 24px rgba(212,197,169,.15)}

/* Compose */
.compose{flex:1;display:flex;flex-direction:column;align-items:center;padding:24px;overflow-y:auto}
.compose .back{align-self:flex-start;color:var(--muted);cursor:pointer;font-size:13px}
.compose .back:hover{color:var(--gold)}
.compose h1{color:var(--gold);font-weight:400;letter-spacing:.12em;margin-top:10px;font-size:26px}
.compose .sub{color:var(--muted);font-style:italic;margin:6px 0 18px}
.constellation.small{gap:clamp(18px,4vw,40px);padding:8px 0 18px}
.constellation.small .mind-node{width:128px}
.constellation.small .medallion{width:78px;height:78px}
.mind-node.pick{opacity:.7}.mind-node.pick:hover{opacity:1}
.mind-node.pick.sel{opacity:1}
.mind-node.pick.sel .medallion{box-shadow:0 0 30px 5px color-mix(in srgb,var(--node-accent) 70%,transparent)}
.mind-node.pick.sel .name{color:var(--node-accent)}
.compose textarea{width:100%;max-width:520px;background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--text);
  padding:13px 16px;border-radius:12px;font-family:inherit;font-size:15px;resize:none}
.compose textarea:focus{outline:none;border-color:var(--gold)}
.compose #abrir{margin-top:16px;background:rgba(212,197,169,.14);border:1px solid var(--gold-dim);color:var(--gold);
  padding:12px 26px;border-radius:10px;font-family:inherit;font-size:15px;letter-spacing:.05em;cursor:pointer}
.compose #abrir:hover:not(:disabled){background:rgba(212,197,169,.24)}
.compose #abrir:disabled{opacity:.35;cursor:default}

/* Barra de comensales */
.roster{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:13px 22px;border-bottom:1px solid var(--line);
  background:rgba(5,7,14,.5)}
.roster .rlabel{color:var(--muted);font-size:12px;letter-spacing:.04em;margin-right:2px}
.chip{display:flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;border:1px solid color-mix(in srgb,var(--node-accent,#d4c5a9) 40%,transparent);
  border-radius:22px;font-size:13px;color:var(--text);transition:.25s;opacity:.62}
.chip.speaking{opacity:1;box-shadow:0 0 18px color-mix(in srgb,var(--node-accent) 45%,transparent);
  background:color-mix(in srgb,var(--node-accent) 10%,transparent)}
.chip .cav{width:24px;height:24px;border-radius:50%;position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;font-size:11px;color:var(--node-accent);border:1px solid color-mix(in srgb,var(--node-accent) 50%,transparent)}
.chip .cav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.chip.add{cursor:pointer;border-style:dashed;border-color:var(--muted);color:var(--muted);opacity:.8;padding:6px 13px}
.chip.add:hover{color:var(--gold);border-color:var(--gold);opacity:1}

/* Intervención de una mente: cabecera con retrato + nombre */
.msg.mind .speaker{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.msg.mind .sav{width:30px;height:30px;border-radius:50%;position:relative;overflow:hidden;display:flex;align-items:center;
  justify-content:center;font-size:13px;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 60%,transparent);flex-shrink:0}
.msg.mind .sav img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.msg.mind .sname{color:var(--accent);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.msg.mind{flex-direction:column;gap:0;max-width:94%}

/* Línea de convocatoria / sistema */
.sysline{text-align:center;margin:6px auto;color:var(--gold-dim);font-style:italic;font-size:13px;letter-spacing:.04em}
.sysline span{display:inline-block;padding:4px 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* Control de palabra */
.floor{display:flex;gap:8px;align-items:flex-end}
.floor select{background:var(--input-bg);color:var(--text);border:1px solid var(--input-border);border-radius:10px;
  padding:0 12px;height:52px;font-family:inherit;font-size:13px;cursor:pointer}
.floor select:focus{outline:none;border-color:var(--accent)}
.extra{max-width:760px;margin:8px auto 0;text-align:center}
.ghost{background:none;border:1px solid var(--line);color:var(--gold-dim);padding:7px 16px;border-radius:20px;
  font-family:inherit;font-size:13px;cursor:pointer;transition:.2s}
.ghost:hover{border-color:var(--gold);color:var(--gold)}

/* Journal: puntos de participantes */
.hist .conv .dots{display:inline-flex;gap:3px;margin-right:7px;vertical-align:middle}
.hist .conv .dots i{width:7px;height:7px;border-radius:50%;display:inline-block}
.empty-h{padding:10px 12px;color:var(--muted);font-size:12px;font-style:italic}

/* Overlay convidar */
.overlay{position:fixed;inset:0;z-index:50;background:rgba(3,5,12,.78);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:24px;animation:fade .3s ease}
.overlay-box{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 30px;max-width:620px;text-align:center}
.overlay-box h3{color:var(--gold);font-weight:400;letter-spacing:.08em;margin-bottom:16px}
.overlay-box .ghost{margin-top:12px}

/* ============ Micrófono + scroll inteligente ============ */
.room .main{position:relative}
.floor .mic{background:rgba(255,255,255,.04);border:1px solid var(--input-border);color:var(--gold-dim);
  width:52px;height:52px;border-radius:12px;cursor:pointer;font-size:18px;transition:.2s}
.floor .mic:hover{border-color:var(--accent);color:var(--accent)}
.floor .mic.listening{color:#e06a6a;border-color:#e06a6a;box-shadow:0 0 16px rgba(224,106,106,.4);animation:pulseMic 1.2s infinite}
@keyframes pulseMic{0%,100%{opacity:1}50%{opacity:.5}}
#tobottom{position:absolute;right:24px;bottom:104px;width:40px;height:40px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);color:var(--gold);cursor:pointer;font-size:17px;
  opacity:0;pointer-events:none;transition:.25s;z-index:6;box-shadow:0 4px 18px rgba(0,0,0,.45)}
#tobottom.show{opacity:.95;pointer-events:auto}
#tobottom:hover{border-color:var(--gold);transform:translateY(-1px)}