/* junction.css - The Junction chat. Self-contained (does not need ms-pages.css), same dark-space palette.
   Everything is prefixed .jn- ; page rules apply only to body.jn. No fonts, images, CDNs. */
body.jn{
  --accent:#89b4fa; --edge:#3344aa; --bg:#05060f; --panel:rgba(17,17,27,.96); --panel2:rgba(30,30,46,.96);
  --text:#cdd6f4; --dim:#a6adc8; --ok:#00ff88; --bad:#ff6666; --warn:#f9e2af; --violet:#7c4dff; --line:rgba(137,180,250,.18);
  margin:0; height:100vh; height:100dvh; overflow:hidden; color:var(--text); background-color:var(--bg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; line-height:1.45; -webkit-text-size-adjust:100%;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent 60%), radial-gradient(1px 1px at 28% 72%,#cdd6f4,transparent 60%),
    radial-gradient(1.5px 1.5px at 44% 34%,#89b4fa,transparent 60%), radial-gradient(1px 1px at 63% 12%,#fff,transparent 60%),
    radial-gradient(2px 2px at 78% 58%,#fff,transparent 60%), radial-gradient(1px 1px at 90% 86%,#cdd6f4,transparent 60%),
    radial-gradient(1px 1px at 8% 90%,#fff,transparent 60%), radial-gradient(1.5px 1.5px at 55% 88%,#89b4fa,transparent 60%),
    radial-gradient(ellipse 60% 45% at 85% 10%,rgba(51,68,170,.45),transparent 70%),
    radial-gradient(ellipse 55% 50% at 10% 95%,rgba(137,180,250,.18),transparent 70%),
    radial-gradient(ellipse at 50% 50%,#0d0f24 0%,#05060f 75%);
  background-attachment:fixed;
}
body.jn *,body.jn *::before,body.jn *::after{box-sizing:border-box}
body.jn [hidden]{display:none !important}
body.jn a{color:var(--accent)}
.jn-app{display:flex; flex-direction:column; height:100%; width:100%; max-width:920px; margin:0 auto; min-width:0; background:var(--panel);
  border-left:1px solid var(--edge); border-right:1px solid var(--edge); box-shadow:0 0 40px rgba(137,180,250,.22)}
@media (max-width:940px){ .jn-app{border-left:0; border-right:0; box-shadow:none} }

/* ---------- buttons / inputs: every control is at least 44 x 44 css px ---------- */
.jn-btn{appearance:none; -webkit-appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:44px; min-width:44px; padding:0 14px; margin:0; border:1px solid var(--edge); border-radius:10px;
  background:rgba(51,68,170,.35); color:#fff; font:600 .95rem/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; text-decoration:none}
.jn-btn:hover{background:rgba(51,68,170,.6)}
.jn-btn:focus-visible,.jn-in:focus-visible,.jn-name:focus-visible,.jn-row:focus-visible,.jn-sel:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.jn-btn[disabled]{opacity:.5; cursor:not-allowed}
.jn-primary{background:var(--edge); border-color:var(--accent)}
.jn-primary:hover{background:#4156cc}
.jn-danger{border-color:#a04050; background:rgba(160,64,80,.28)}
.jn-danger:hover{background:rgba(160,64,80,.5)}
.jn-ghost{background:transparent}
.jn-icon{padding:0; width:44px}
.jn-icon svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.jn-in,.jn-sel{display:block; width:100%; min-height:44px; padding:8px 12px; margin:0; border:1px solid var(--edge); border-radius:10px;
  background:#0b0c1a; color:var(--text); font:inherit; font-size:16px; /* 16px stops iOS zoom-on-focus */ }
.jn-in::placeholder{color:#7f849c}
.jn-lbl{display:block; margin:10px 0 4px; font-size:.8rem; color:var(--dim); letter-spacing:.04em}
.jn-badge{display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:var(--bad); color:#fff; font:700 .72rem/1 system-ui,sans-serif}
.jn-iconwrap{position:relative; display:inline-flex}
.jn-iconwrap .jn-badge{position:absolute; top:-9px; right:-10px; pointer-events:none}

/* ---------- header ---------- */
.jn-top{display:flex; align-items:center; gap:6px; padding:6px 8px 6px 10px; min-height:56px;
  background:linear-gradient(90deg,rgba(51,68,170,.55),rgba(137,180,250,.1),transparent); border-bottom:1px solid var(--line)}
.jn-brand{display:flex; align-items:center; gap:8px; min-width:0; min-height:44px; flex:1 1 auto; color:#fff !important; text-decoration:none}
.jn-brand b{flex:0 0 auto; background:var(--edge); color:#fff; padding:4px 6px; border-radius:4px; font:700 .85rem/1 ui-monospace,"Courier New",monospace; letter-spacing:.1em}
.jn-title{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; font-size:1.05rem; letter-spacing:.02em}
.jn-actions{display:flex; gap:4px; flex:0 0 auto}
.jn-status{display:flex; align-items:center; gap:8px; padding:4px 12px; min-height:30px; font-size:.78rem; color:var(--dim); border-bottom:1px solid var(--line); background:rgba(5,6,15,.55)}
.jn-led{flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--warn); box-shadow:0 0 8px var(--warn)}
.jn-led.ok{background:var(--ok); box-shadow:0 0 8px var(--ok)}
.jn-led.bad{background:var(--bad); box-shadow:0 0 8px var(--bad)}
.jn-sp{flex:1 1 auto}
.jn-status span{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#jn-online{flex:0 0 auto; color:var(--text); font-weight:600}

/* ---------- messages ---------- */
.jn-list{position:relative; flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; padding:8px 8px 4px}
.jn-msgs{list-style:none; margin:0; padding:0}
.jn-msg{display:flex; gap:10px; align-items:flex-start; padding:6px 4px; min-width:0}
.jn-msg + .jn-msg{border-top:1px solid rgba(137,180,250,.07)}
.jn-av{flex:0 0 44px; width:44px; height:44px; padding:0; border-radius:50%; border:1px solid rgba(255,255,255,.18); color:#fff;
  font:700 .95rem/1 system-ui,sans-serif; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; text-transform:uppercase}
.jn-av.sys{cursor:default}
.jn-av{position:relative; overflow:hidden}
.jn-av img{position:absolute; inset:0; width:100%; height:100%; border-radius:50%; object-fit:cover; display:block; background:transparent; pointer-events:none; opacity:0; transition:opacity .15s}
.jn-av.has-img img{opacity:1}
.jn-mb{flex:1 1 auto; min-width:0}
.jn-hd{display:flex; flex-wrap:wrap; align-items:center; column-gap:8px; min-width:0}
.jn-name{min-width:44px; text-align:left; appearance:none; -webkit-appearance:none; min-height:44px; margin:-9px 0; padding:0 2px; border:0; background:none; cursor:pointer; color:var(--accent);
  font:700 .95rem/1 system-ui,sans-serif; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; touch-action:manipulation}
.jn-msg.mine .jn-name{color:#a0e9ff}
.jn-msg.guest .jn-name{color:#b4bef0; font-style:italic}
.jn-tag{display:inline-block; padding:2px 6px; border-radius:6px; font:700 .62rem/1.2 ui-monospace,monospace; letter-spacing:.08em; text-transform:uppercase; border:1px solid var(--edge); color:var(--dim)}
.jn-tag.mod{color:var(--ok); border-color:rgba(0,255,136,.45)}
.jn-tag.adm{color:var(--warn); border-color:rgba(249,226,175,.5)}
.jn-time{font-size:.72rem; color:#8a90a8}
.jn-tx{margin:2px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; color:var(--text)}
.jn-msg.sys .jn-tx{color:var(--accent); font-style:italic}
.jn-empty{margin:28px 12px; text-align:center; color:var(--dim)}
.jn-new{position:absolute; left:50%; transform:translateX(-50%); bottom:8px; z-index:3}
.jn-listwrap{position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column}

/* ---------- composer ---------- */
.jn-compose{flex:0 0 auto; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); background:rgba(17,17,27,.98); border-top:1px solid var(--edge)}
.jn-notice{margin:0 0 8px; padding:10px 12px; border:1px solid rgba(249,226,175,.4); border-radius:10px; background:rgba(249,226,175,.08); color:var(--warn); font-size:.88rem}
.jn-notice a{color:inherit; font-weight:700; display:inline-flex; align-items:center; min-height:44px; padding:0 6px; margin:-10px 0}
.jn-row2{display:flex; gap:8px; align-items:stretch}
.jn-row2 .jn-in{flex:1 1 auto; min-width:0; border-radius:22px; padding:8px 16px}
.jn-row2 .jn-btn{flex:0 0 auto; border-radius:22px; padding:0 18px}
.jn-guest{margin:0 0 8px}
.jn-count{margin:4px 4px 0; font-size:.72rem; color:#8a90a8; text-align:right; min-height:1em}
.jn-count.warn{color:var(--warn)}

/* ---------- sheets (drawer on wide screens, bottom sheet on phones) ---------- */
.jn-back{position:fixed; inset:0; z-index:50; background:rgba(0,0,0,.6)}
.jn-sheet{position:fixed; z-index:60; right:0; top:0; bottom:0; width:min(100%,400px); display:flex; flex-direction:column;
  background:var(--panel2); border-left:1px solid var(--edge); box-shadow:-10px 0 40px rgba(0,0,0,.5); animation:jn-in .18s ease-out}
.jn-sh-h{display:flex; align-items:center; gap:8px; padding:6px 6px 6px 14px; min-height:56px; border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgba(51,68,170,.45),transparent)}
.jn-sh-h h2{flex:1 1 auto; margin:0; font-size:1.05rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.jn-sh-b{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; padding:10px 12px 16px; -webkit-overflow-scrolling:touch}
@media (max-width:700px){
  .jn-sheet{top:auto; left:0; right:0; width:100%; max-height:88vh; max-height:88dvh; border-left:0; border-top:1px solid var(--edge);
    border-radius:16px 16px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.5); animation:jn-up .2s ease-out}
  .jn-sheet.tall{height:88vh; height:88dvh}
}
@keyframes jn-in{from{transform:translateX(24px); opacity:0} to{transform:none; opacity:1}}
@keyframes jn-up{from{transform:translateY(24px); opacity:0} to{transform:none; opacity:1}}

.jn-row{display:flex; align-items:center; gap:10px; width:100%; min-height:48px; padding:6px 8px; margin:0 0 2px; border:0; border-radius:10px;
  background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; text-decoration:none}
.jn-row:hover{background:rgba(137,180,250,.1)}
.jn-row .grow{flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.jn-row .jn-av{flex:0 0 36px; width:36px; height:36px; font-size:.8rem; cursor:inherit; pointer-events:none}
.jn-who{display:flex; align-items:center; gap:10px; min-width:0; margin-bottom:2px}
.jn-who .jn-av{flex:0 0 36px; width:36px; height:36px; font-size:.8rem; cursor:default}
.jn-who .who{min-width:0}
.jn-row.dim{opacity:.55}
.jn-sep{height:1px; margin:10px 0; background:var(--line); border:0}
.jn-h3{margin:14px 0 6px; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--dim)}
.jn-note{margin:0 0 8px; color:var(--dim); font-size:.88rem}
.jn-btns{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
.jn-btns .jn-btn{flex:1 1 130px}
.jn-item{padding:10px; margin:0 0 8px; border:1px solid var(--line); border-radius:12px; background:rgba(5,6,15,.45); min-width:0}
.jn-item .who{font-weight:700; color:var(--accent); overflow-wrap:anywhere}
.jn-item .txt{margin:4px 0; white-space:pre-wrap; overflow-wrap:anywhere}
.jn-item .meta{font-size:.74rem; color:#8a90a8; overflow-wrap:anywhere}
.jn-item .jn-btns .jn-btn{flex:1 1 90px; font-size:.88rem}
.jn-tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:6px; margin:0 -2px 6px; scrollbar-width:thin}
.jn-tabs .jn-btn{flex:0 0 auto}
.jn-tabs .jn-btn[aria-selected="true"]{background:var(--edge); border-color:var(--accent)}
.jn-card-h{display:flex; align-items:center; gap:12px; margin-bottom:6px}
.jn-card-h .jn-av{cursor:default}
.jn-card-h .nm{font-size:1.1rem; font-weight:700; overflow-wrap:anywhere; min-width:0}
.jn-quote{margin:6px 0 10px; padding:8px 10px; border-left:3px solid var(--edge); background:rgba(5,6,15,.5); color:var(--dim); font-size:.88rem; white-space:pre-wrap; overflow-wrap:anywhere; max-height:7em; overflow:hidden}

/* ---------- toasts ---------- */
.jn-toasts{position:fixed; z-index:90; left:0; right:0; bottom:calc(76px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 10px; pointer-events:none}
.jn-toast{pointer-events:auto; width:min(100%,460px); padding:10px 12px; border:1px solid var(--edge); border-radius:12px; background:rgba(17,17,27,.98);
  box-shadow:0 8px 30px rgba(0,0,0,.55); animation:jn-up .18s ease-out; overflow-wrap:anywhere}
.jn-toast.err{border-color:#a04050}
.jn-toast.ok{border-color:rgba(0,255,136,.5)}
.jn-toast.tap{border-color:var(--violet); box-shadow:0 8px 30px rgba(124,77,255,.35)}
.jn-toast .jn-btns{margin-top:6px}
.jn-toast .jn-btns .jn-btn{flex:1 1 100px}

@media (prefers-reduced-motion:reduce){
  .jn-sheet,.jn-toast{animation:none}
  .jn-btn,.jn-row,.jn-av img{transition:none}
}
.jn-sr{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:360px){
  .jn-title{font-size:.95rem}
  .jn-top{padding-left:6px; gap:2px}
  .jn-actions{gap:0}
  .jn-brand{gap:6px}
  .jn-row2 .jn-btn{padding:0 14px}
}

/* ---- bottom bar (phones / narrow tablets <=700px); desktop unchanged ---- */
@media (max-width: 700px) {
  .jn-top .jn-actions {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 45;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 4px;
    min-height: 56px;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    background: rgba(17, 17, 27, .98);
    border-top: 1px solid var(--line, rgba(137, 180, 250, .28));
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .35);
  }
  .jn-top .jn-actions .jn-btn {
    flex: 1 1 0;
    min-width: 44px;
    min-height: 44px;
  }
  .jn-top {
    /* brand + status stay at top; actions relocated */
    min-height: 48px;
  }
  .jn-app {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
  .jn-compose {
    /* sit above the action bar */
    padding-bottom: 8px;
    margin-bottom: 0;
  }
  .jn-toasts {
    bottom: calc(56px + 76px + env(safe-area-inset-bottom, 0px));
  }
  .jn-new {
    bottom: calc(56px + 8px + env(safe-area-inset-bottom, 0px));
  }
  /* Counter above action bar */
  .msc:not(.in) {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 8px) !important;
  }
  .jn-counter .msc.in {
    /* in-slot counter on junction stays in flow; ensure slot clears bar */
  }
  #msc-slot.jn-counter {
    margin-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}