@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ═══════════════════════════════════
   COJAMZ
   ═══════════════════════════════════ */
:root {
  --bg:       #08080f;
  --bg2:      #0d0d1a;
  --surface:  rgba(255,255,255,.04);
  --surface2: rgba(255,255,255,.07);
  --surface3: rgba(255,255,255,.11);

  --cyan:     #00e5ff;
  --cyan-dim: rgba(0,229,255,.12);
  --cyan-glow:0 0 10px rgba(0,229,255,.5),0 0 28px rgba(0,229,255,.18);

  --mag:      #ff00cc;
  --mag-dim:  rgba(255,0,204,.12);
  --mag-glow: 0 0 10px rgba(255,0,204,.5),0 0 28px rgba(255,0,204,.18);

  --t:   #e4e4f5;
  --t2:  #b0b0d8;
  --t3:  #7070a0;

  --bd:  rgba(255,255,255,.06);
  --bd2: rgba(255,255,255,.11);
  --bdc: rgba(0,229,255,.28);
  --bdm: rgba(255,0,204,.28);

  /* Partner = magenta */
  --partner:     #ff00cc;
  --partner-key: rgba(255,0,204,.2);

  --fh: 'Space Grotesk', sans-serif;
  --fm: 'Space Mono', monospace;
  --r:  6px; --r2: 10px; --r3: 18px;
  --sb: 256px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { font-size:16px; -webkit-font-smoothing:antialiased; touch-action:manipulation; }

/* Prevent text selection highlights everywhere except inputs */
body, .kw, .kb, .btn, .mode-card, .inst-btn, .piano-area, .piano-scroll,
#piano-wrap, #piano-me, #piano-partner, #partner-dots, .jam-hdr,
.jam-sidebar, .ob-card, #onboarding {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
/* Re-enable for actual text inputs */
input, textarea { -webkit-user-select: text; user-select: text; }

body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 65% 55% at 10% 100%, rgba(124,58,237,.2) 0%, transparent 60%),
    radial-gradient(ellipse 45% 35% at 90% 5%,  rgba(0,229,255,.07) 0%, transparent 55%);
  color: var(--t);
  font-family: var(--fh);
  min-height: 100vh;
  overflow-x: hidden;
}

.label {
  font-family: var(--fm);
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--t2);
}
.hidden { display:none !important; }

::-webkit-scrollbar { width:3px; height:3px; }
::-webkit-scrollbar-thumb { background:var(--bd2); border-radius:3px; }

/* Wider scrollbar specifically for the sidebar */
.jam-sidebar::-webkit-scrollbar { width:5px; }
.jam-sidebar::-webkit-scrollbar-track { background:rgba(255,255,255,.02); }
.jam-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.18); border-radius:5px; }
.jam-sidebar::-webkit-scrollbar-thumb:hover { background:rgba(0,229,255,.4); }

/* ═══════ BUTTONS ═══════ */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:.5rem 1rem;
  border-radius:var(--r); border:1px solid transparent;
  font-family:var(--fm); font-size:.65rem;
  text-transform:uppercase; letter-spacing:.1em;
  cursor:pointer; transition:all .15s; white-space:nowrap;
  -webkit-tap-highlight-color:transparent;
}
.btn:active:not(:disabled) { transform:scale(.95); }
.btn:disabled { opacity:.28; cursor:not-allowed; }

.btn-primary {
  background:var(--cyan-dim); color:var(--cyan); border-color:var(--bdc);
}
.btn-primary:hover:not(:disabled) {
  background:rgba(0,229,255,.22); box-shadow:var(--cyan-glow);
}

.btn-outline {
  background:transparent; color:var(--t2); border-color:var(--bd2);
}
.btn-outline:hover:not(:disabled) {
  color:var(--t); border-color:var(--t3); background:var(--surface2);
}

.btn-ghost { background:transparent; color:var(--t3); border-color:transparent; }
.btn-ghost:hover:not(:disabled) { color:var(--t2); }

.btn-danger {
  background:transparent; color:#d20000; border-color:var(--bdm);
}
.btn-danger:hover:not(:disabled) {
  background:var(--mag-dim); box-shadow:var(--mag-glow);
}

.btn-rec { background:transparent; color:#d20000; border-color:var(--bdm); }
.btn-rec.active {
  background:var(--mag-dim); border-color:var(--mag);
  animation:recpulse 1.4s ease-in-out infinite;
}
.btn-rec.active svg {
  animation:blink .9s ease-in-out infinite;
}

.btn-next {
  background: transparent;
  color: var(--cyan);
  border-color: var(--bdc);
}
.btn-next:hover:not(:disabled) {
  background: var(--cyan-dim);
  box-shadow: var(--cyan-glow);
}
.btn-next svg {
  transition: transform .3s ease;
}
.btn-next:active:not(:disabled) svg {
  transform: rotate(180deg);
}
@keyframes blink    { 0%,100%{opacity:1}50%{opacity:.1} }
@keyframes recpulse { 0%,100%{box-shadow:none}50%{box-shadow:0 0 10px rgba(255,0,204,.35)} }
@keyframes spin     { to{transform:rotate(360deg)} }

.btn-sm   { padding:.32rem .7rem; font-size:.6rem; }
.btn-xs   { padding:.22rem .5rem; font-size:.55rem; }
.btn-icon { padding:.38rem .45rem; }
.btn-full { width:100%; justify-content:center; }
.btn-xl   { padding:.8rem 1.8rem; font-size:.78rem; border-radius:var(--r2); }
.btn-menu-toggle { display:none !important; }

/* ═══════ INPUTS ═══════ */
input[type=text] {
  font-family:var(--fh); font-size:.9rem; color:var(--t);
  background:var(--surface); border:1px solid var(--bd2);
  border-radius:var(--r); padding:.6rem .85rem; outline:none;
  transition:border-color .15s, box-shadow .15s; width:100%;
}
input:focus { border-color:var(--bdc); box-shadow:0 0 0 2px rgba(0,229,255,.1); }
input::placeholder { color:var(--t3); opacity:1; }

input[type=range] {
  -webkit-appearance:none; width:100%; height:2px;
  background:var(--surface3); border-radius:2px; outline:none; cursor:pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance:none; width:14px; height:14px; border-radius:50%;
  background:var(--cyan); border:none; box-shadow:var(--cyan-glow);
}

/* ═══════ STATUS PILL ═══════ */
.spill {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 10px; border-radius:99px;
  font-family:var(--fm); font-size:.55rem;
  text-transform:uppercase; letter-spacing:.12em;
  border:1px solid transparent; backdrop-filter:blur(8px);
}
.spill .dot { width:5px; height:5px; border-radius:50%; }
.sp-idle   { background:var(--surface); color:var(--t3); border-color:var(--bd); }
.sp-idle   .dot { background:var(--t3); }
.sp-search { background:var(--cyan-dim); color:var(--cyan); border-color:var(--bdc); }
.sp-search .dot { background:var(--cyan); animation:blink 1s ease-in-out infinite; }
.sp-conn   { background:var(--mag-dim); color:var(--mag); border-color:var(--bdm); }
.sp-conn   .dot { background:var(--mag); box-shadow:0 0 5px var(--mag); }

/* ═══════ TOAST ═══════ */
#toast {
  position:fixed; bottom:1.5rem; left:50%;
  transform:translateX(-50%) translateY(80px);
  background:var(--surface3); color:var(--t);
  border:1px solid var(--bd2); backdrop-filter:blur(16px);
  font-family:var(--fm); font-size:.65rem;
  padding:.5rem 1.1rem; border-radius:99px; z-index:9999;
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
  pointer-events:none; white-space:nowrap;
  box-shadow:0 4px 24px rgba(0,0,0,.5);
}
#toast.show { transform:translateX(-50%) translateY(0); }

/* ═══════════════════════════════════
   ONBOARDING
   ═══════════════════════════════════ */
#onboarding {
  position:fixed; inset:0;
  background:var(--bg);
  background-image:
    radial-gradient(ellipse 60% 60% at 50% 100%, rgba(124,58,237,.25) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 20%,  rgba(0,229,255,.08) 0%, transparent 50%);
  z-index:100; display:flex; align-items:center; justify-content:center;
  padding:1rem; transition:opacity .4s; overflow-y:auto;
}
#onboarding.exit { opacity:0; pointer-events:none; }

.ob-card {
  background:var(--surface); border:1px solid var(--bd2);
  border-radius:var(--r3); padding:2rem;
  max-width:420px; width:100%;
  backdrop-filter:blur(24px);
  box-shadow:0 0 0 1px var(--bd), 0 24px 64px rgba(0,0,0,.55);
}

.ob-logo {
  display:flex;
  justify-content:center;
  margin:0 auto .75rem;
  width:100%;
}
.logo-link {
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.logo-img {
  display:block;
  width:auto;
  max-width:100%;
}
.ob-logo .logo-img {
  height:13rem;
}
.jam-logo .logo-img {
  height:2rem;
}
.ob-tagline { font-size:.8rem; color:var(--t3); margin-bottom:1.5rem; line-height:1.6; }

#ob-link-msg {
  display:none; background:rgba(0,229,255,.06); border:1px solid var(--bdc);
  border-radius:var(--r); padding:.6rem .85rem;
  font-size:.78rem; color:var(--cyan); margin-bottom:1rem; line-height:1.5;
}

.ob-section { margin-bottom:1.1rem; }
.ob-section .label { margin-bottom:.4rem; display:block; }

.ob-modes { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:.4rem; }
.mode-card {
  border:1px solid var(--bd2); border-radius:var(--r2);
  padding:.85rem .8rem; cursor:pointer; transition:all .15s;
  background:transparent; text-align:left;
}
.mode-card:hover { border-color:var(--bdc); background:var(--cyan-dim); }
.mode-card.selected { border-color:var(--cyan); background:var(--cyan-dim); }
.mode-icon  { font-size:1.3rem; margin-bottom:.35rem; line-height:1; }
.mode-title { font-weight:600; font-size:.85rem; margin-bottom:.1rem; color:var(--t); }
.mode-desc  { font-size:.68rem; color:var(--t3); line-height:1.4; }

.ob-extra { margin-top:.75rem; display:none; }
.ob-extra.show { display:block; }
.ob-extra .label { margin-bottom:.35rem; display:block; }
.ob-extra input { font-family:var(--fm); font-size:.8rem; }
.ob-extra-note { font-size:.64rem; color:var(--t3); margin-top:.3rem; }

.ob-footer { margin-top:1.25rem; }

/* ═══════════════════════════════════
   SEARCHING
   ═══════════════════════════════════ */
#searching-overlay {
  position:fixed; inset:0;
  background:rgba(8,8,15,.96); backdrop-filter:blur(12px);
  z-index:90; display:none;
  flex-direction:column; align-items:center; justify-content:center; gap:1.2rem;
}
#searching-overlay.show { display:flex; }
.search-logo { font-family:var(--fh); font-weight:700; font-size:1.6rem; letter-spacing:-.03em; }
.search-logo span { color:var(--cyan); text-shadow:var(--cyan-glow); }
.search-ring {
  width:52px; height:52px;
  border:2px solid var(--bd2); border-top-color:var(--cyan);
  border-radius:50%; animation:spin 1s linear infinite;
  box-shadow:0 0 16px rgba(0,229,255,.3);
}
.search-text { font-family:var(--fm); font-size:.68rem; color:var(--t3); text-transform:uppercase; letter-spacing:.14em; text-align:center; }
.search-name { font-weight:600; font-size:.95rem; color:var(--t); }

/* ═══════════════════════════════════
   SHARE MODAL
   ═══════════════════════════════════ */
#share-modal {
  position:fixed; inset:0; background:rgba(8,8,15,.82); backdrop-filter:blur(12px);
  z-index:80; display:none; align-items:center; justify-content:center; padding:1rem;
}
.share-box {
  background:var(--surface); border:1px solid var(--bd2); border-radius:var(--r3);
  padding:1.5rem; max-width:400px; width:100%;
  backdrop-filter:blur(24px); box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.share-box h2 { font-weight:600; font-size:1.05rem; margin-bottom:.3rem; color:var(--t); }
.share-box p  { font-size:.75rem; color:var(--t3); line-height:1.55; margin-bottom:1rem; }
.share-block  { background:var(--surface2); border:1px solid var(--bd2); border-radius:var(--r); padding:.6rem .8rem; margin-bottom:.6rem; }
.share-lbl    { font-family:var(--fm); font-size:.52rem; text-transform:uppercase; letter-spacing:.16em; color:var(--t3); margin-bottom:3px; }
.share-val    { font-family:var(--fm); color:var(--t); }
.share-code-big  { font-size:1.6rem !important; font-weight:700; letter-spacing:.2em; color:var(--cyan); text-shadow:var(--cyan-glow); }
.share-url-val   { font-size:.6rem !important; word-break:break-all; color:var(--t2); }
.share-actions   { display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; }
.wait-pulse { display:flex; align-items:center; gap:6px; margin-top:.75rem; font-family:var(--fm); font-size:.6rem; color:var(--cyan); }
.wait-pulse .wd { width:5px; height:5px; border-radius:50%; background:var(--cyan); animation:blink 1s ease-in-out infinite; }

/* ═══════════════════════════════════
   EXPORT MENU
   ═══════════════════════════════════ */
.export-overlay {
  position:fixed; inset:0; background:rgba(8,8,15,.85); backdrop-filter:blur(12px);
  z-index:200; display:none; align-items:center; justify-content:center; padding:1rem;
}
.export-overlay.show { display:flex; }
.export-box {
  background:var(--surface); border:1px solid var(--bd2); border-radius:var(--r3);
  padding:1.5rem; max-width:340px; width:100%;
  backdrop-filter:blur(24px); box-shadow:0 24px 64px rgba(0,0,0,.6);
  max-height:90vh; overflow-y:auto;
}
.export-title    { font-weight:600; font-size:1rem; margin-bottom:.2rem; color:var(--t); }
.export-subtitle { font-size:.7rem; color:var(--t3); margin-bottom:1rem; }
.export-options  { display:flex; flex-direction:column; gap:.4rem; }
.export-btn {
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem .85rem; border:1px solid var(--bd2); border-radius:var(--r2);
  background:transparent; cursor:pointer; text-align:left; transition:all .15s; width:100%;
}
.export-btn:hover { border-color:var(--bdc); background:var(--cyan-dim); }
.export-btn-icon  { font-size:1.2rem; flex-shrink:0; }
.export-btn-label { font-weight:600; font-size:.8rem; color:var(--t); }
.export-btn-note  { font-size:.6rem; color:var(--t3); font-family:var(--fm); margin-top:1px; }

/* ═══════════════════════════════════
   JAM ROOM
   ═══════════════════════════════════ */
#jam { display:none; flex-direction:column; height:100vh; overflow:hidden; }
#jam.show { display:flex; }

/* Header */
.jam-hdr {
  display:flex; align-items:center; justify-content:space-between;
  padding:.55rem 1.25rem;
  background:rgba(8,8,15,.85); border-bottom:1px solid var(--bd);
  backdrop-filter:blur(20px); flex-shrink:0; gap:.6rem; z-index:10; position:relative;
}
.jam-hdr-l { display:flex; align-items:center; gap:.75rem; }
.jam-hdr-r { display:flex; align-items:center; gap:.45rem; }
.jam-logo  { display:inline-flex; align-items:center; }
.jam-logo .logo-img { height:1.25rem; }

.jam-body { flex:1; overflow:hidden; display:flex; }

/* Main */
.jam-main { flex:1; display:flex; flex-direction:column; overflow:hidden; min-width:0; }

.wave-bar {
  height:70px; flex-shrink:0;
  border-bottom:1px solid var(--bd); background:rgba(8,8,15,.6); position:relative;
}
.wave-lbl { position:absolute; top:5px; left:12px; }
#waveform  { position:absolute; inset:0; width:100%; height:150%; display:block; }

/* Piano area */
.piano-area {
  flex:1; display:flex; flex-direction:column;
  overflow:hidden; padding:.4rem 1rem 0; gap:.4rem;
  justify-content:flex-end; position:relative;
}

/* Partner piano (top, desktop) */
.partner-piano-section {
  flex-shrink:0;
  margin-top:4vh;
  border:1px solid var(--bdm); border-radius:var(--r2) var(--r2) 0 0;
  background:rgba(255,0,204,.03); padding:.5rem .7rem .4rem;
}

/* Octave / MIDI controls — now lives in sidebar */
.piano-topbar {
  display:flex; align-items:center; justify-content:space-between;
  flex-shrink:0;
}
.piano-topbar-l { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.piano-topbar-r { display:flex; align-items:center; gap:.4rem; }

.oct-disp {
  font-family:var(--fm); font-size:.58rem; color:var(--cyan);
  padding:2px 8px; background:var(--cyan-dim);
  border:1px solid var(--bdc); border-radius:var(--r);
  min-width:56px; text-align:center;
}

.midi-badge {
  display:flex; align-items:center; gap:4px;
  font-family:var(--fm); font-size:.55rem; color:var(--t3);
  text-transform:uppercase; letter-spacing:.1em;
  padding:2px 8px; border-radius:99px;
  border:1px solid var(--bd); background:var(--surface);
  margin:0 auto .55rem;
  width:fit-content;
}
.midi-badge.on { color:var(--cyan); border-color:var(--bdc); background:var(--cyan-dim); }
.midi-badge .dot { width:4px; height:4px; border-radius:50%; background:var(--t3); }
.midi-badge.on .dot { background:var(--cyan); box-shadow:0 0 4px var(--cyan); }

.kb-legend { display:flex; align-items:center; gap:.4rem; }
.kb-legend-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--mag); box-shadow:0 0 5px var(--mag); }
.kb-legend-name { font-size:.62rem; font-weight:500; color:var(--mag); font-family:var(--fm); }

/* Piano scroll — desktop: horizontal scroll. Mobile: fixed fit, no scroll. */
.piano-scroll {
  overflow-x:auto; overflow-y:hidden; padding-bottom:0;
  -webkit-overflow-scrolling:touch; touch-action:pan-x; flex:1;
  display:flex; align-items:flex-end;
  min-height:18vh;
}
.piano-scroll::-webkit-scrollbar { height:3px; }

/* On mobile/touch: block horizontal pan so touches reach keys, but allow vertical page scroll */
@media (pointer:coarse), (max-width:1023px) {
  .piano-scroll {
    overflow-x:hidden;
    touch-action:pan-y;
  }
}

/* ── MOBILE OCTAVE NAV ARROWS — bottom-right overlay ── */
.piano-nav {
  position:absolute; bottom:6px; right:6px; z-index:20;
  display:flex; align-items:center; gap:4px;
  background:rgba(8,8,15,.72); backdrop-filter:blur(8px);
  border:1px solid var(--bd2); border-radius:99px;
  padding:3px 6px;
}
.piano-nav-btn {
  padding:3px 8px !important; font-size:.52rem !important;
  min-width:0 !important; border-radius:99px !important;
  line-height:1.2; justify-content:center;
}
.piano-nav-oct {
  font-family:var(--fm); font-size:.52rem; color:var(--cyan);
  padding:0 6px; min-width:52px; text-align:center;
  white-space:nowrap;
}

#piano-wrap { position:relative; display:inline-block; min-width:100%; }
#piano-me, #piano-partner { position:relative; min-width:100%; min-height:100%; }

/* Partner dots (mobile overlay) */
#partner-dots { position:absolute; top:0; left:0; pointer-events:none; z-index:10; }
.partner-dot {
  position:absolute; width:11px; height:11px; border-radius:50%;
  background:var(--mag); transform:translateX(-50%); top:5px;
  opacity:0; transition:opacity .08s;
  box-shadow:0 0 8px var(--mag), 0 0 18px rgba(255,0,204,.35);
  border:1.5px solid rgba(255,255,255,.15);
}

/* ── WHITE KEYS ── */
.kw {
  position:absolute;
  background:linear-gradient(180deg,#e8e8f2 0%,#d0d0e0 100%);
  border:1px solid rgba(255,255,255,.1); border-bottom:none;
  border-radius:0 0 5px 5px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  padding-bottom:6px; gap:1px;
  transition:background .05s, box-shadow .05s, transform .05s;
  box-shadow:inset 0 -3px 6px rgba(0,0,0,.3), 0 1px 0 rgba(0,0,0,.5);
  -webkit-tap-highlight-color:transparent; touch-action:none;
}
.kw:hover { background:linear-gradient(180deg,#ffffff 0%,#e8e8f8 100%); }
.kw.down {
  background:linear-gradient(180deg,#99d8f0 0%,#66c0e8 100%);
  box-shadow:inset 0 2px 8px rgba(0,229,255,.5), 0 0 18px rgba(0,229,255,.55), 0 0 36px rgba(0,229,255,.18);
  transform:translateY(2px);
}
.kw.partner {
  background:linear-gradient(180deg,#ffb3ee 0%,#ff80dd 100%);
  box-shadow:inset 0 2px 6px rgba(255,0,204,.35), 0 0 14px rgba(255,0,204,.45);
}

/* ── BLACK KEYS ── */
.kb {
  position:absolute;
  background:linear-gradient(180deg,#0d0d1c 0%,#171728 60%,#0a0a18 100%);
  border-radius:0 0 4px 4px; cursor:pointer; z-index:2;
  transition:background .05s, box-shadow .05s, transform .05s;
  box-shadow:0 4px 0 rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.04);
  -webkit-tap-highlight-color:transparent; touch-action:none;
}
.kb:hover { background:linear-gradient(180deg,#191928 0%,#222238 60%,#12121e 100%); }
.kb.down {
  background:linear-gradient(180deg,#002233 0%,#003344 100%);
  box-shadow:0 1px 0 rgba(0,0,0,.75), 0 0 18px rgba(0,229,255,.65), 0 0 36px rgba(0,229,255,.2);
  transform:translateY(2px);
}
.kb.partner {
  background:linear-gradient(180deg,#2a001a 0%,#3d0026 100%);
  box-shadow:0 2px 0 rgba(0,0,0,.75), 0 0 14px rgba(255,0,204,.55);
}

.key-lbl { font-family:var(--fm); font-size:.44rem; color:rgba(0,0,0,.35); pointer-events:none; line-height:1; text-transform:uppercase; }
.key-sc  { font-family:var(--fm); font-size:.4rem;  color:rgba(0,0,0,.22); pointer-events:none; }

.kb-hints {
  display:flex; gap:.65rem; flex-wrap:wrap; flex-shrink:0; margin-top:.35rem; padding:0 .1rem;
}
.hint { display:flex; align-items:center; gap:3px; font-size:.62rem; color:var(--t3); }
.kbdk {
  font-family:var(--fm); font-size:.5rem; padding:1px 4px;
  background:var(--surface2); border:1px solid var(--bd2); border-bottom-width:2px;
  border-radius:3px; color:var(--t2);
}

/* ── SIDEBAR ── */
.jam-sidebar {
  width:var(--sb); flex-shrink:0;
  border-left:1px solid var(--bd);
  background:rgba(8,8,15,.75); backdrop-filter:blur(20px);
  display:flex; flex-direction:column; overflow-y:scroll;
  overflow-x:hidden;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  transition:transform .25s ease;
}
.sidebar-inner { display:flex; flex-direction:column; }
.sidebar-close  { display:none; }

.sb-sec { padding:.85rem .95rem; border-bottom:1px solid var(--bd); }

.partner-row { display:flex; align-items:center; gap:.65rem; }
.p-avatar {
  width:34px; height:34px; border-radius:50%;
  background:var(--surface2); border:1px solid var(--bd2);
  display:flex; align-items:center; justify-content:center;
  font-size:.9rem; flex-shrink:0; transition:all .3s;
}
.p-avatar.live { border-color:var(--mag); box-shadow:0 0 8px rgba(255,0,204,.3); background:var(--mag-dim); }
.p-name  { font-weight:600; font-size:.82rem; color:#ffffff; }
.p-sub   { font-size:.64rem; color:var(--t2); margin-top:1px; }
.p-inst  { font-family:var(--fm); font-size:.54rem; color:var(--mag); background:var(--mag-dim); padding:1px 6px; border-radius:3px; margin-top:3px; display:none; }
.p-inst.show { display:inline-block; }

.inst-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:4px; margin-top:.45rem; }
.inst-btn {
  padding:5px 3px; border:1px solid var(--bd); border-radius:var(--r);
  background:transparent; font-family:var(--fm); font-size:.56rem;
  color:var(--t3); cursor:pointer; text-align:center; transition:all .12s;
  text-transform:uppercase; letter-spacing:.05em;
}
.inst-btn:hover { border-color:var(--bdc); color:var(--cyan); background:var(--cyan-dim); }
.inst-btn.sel   { background:var(--cyan-dim); border-color:var(--cyan); color:var(--cyan); }

.ctrl-rows { display:flex; flex-direction:column; gap:.6rem; margin-top:.45rem; }
.ctrl-line { display:flex; flex-direction:column; gap:3px; }
.ctrl-head { display:flex; justify-content:space-between; }
.ctrl-val  { font-family:var(--fm); font-size:.58rem; color:var(--cyan); opacity:1; }
.ctrl-hint { font-family:var(--fm); font-size:.5rem; color:var(--t3); text-align:center; margin-top:2px; }

/* Sustain button active state */
#btn-sustain.active {
  background:var(--cyan-dim); color:var(--cyan); border-color:var(--bdc);
  box-shadow:var(--cyan-glow);
}

.sb-chat { flex:1; display:flex; flex-direction:column; min-height:0; }
.chat-msgs {
  overflow-y:auto; display:flex; flex-direction:column; gap:4px;
  margin-bottom:.6rem; min-height:60px; max-height:200px;
}
.cmsg { font-size:.73rem; line-height:1.45; padding:5px 9px; border-radius:var(--r); max-width:90%; word-break:break-word; }
.cmsg.me   { background:rgba(0,229,255,.18); color:#88f0ff; align-self:flex-end; border-bottom-right-radius:2px; }
.cmsg.them { background:rgba(255,0,204,.18); color:#ff88ee; align-self:flex-start; border-bottom-left-radius:2px; }
.cmsg.sys  { color:var(--t2); font-family:var(--fm); font-size:.56rem; align-self:center; font-style:italic; text-align:center; padding:2px 4px; }
.chat-row  { display:flex; gap:6px; flex-shrink:0; }
.chat-inp  { font-size:.78rem; padding:.4rem .65rem; background:var(--surface2); border-color:var(--bd2); }
.chat-inp:disabled { opacity:.3; }

/* ═══════ MOBILE ═══════
   Targets: narrow screens OR touch-primary devices (catches large phones
   that report >768px logical width but have no fine pointer).         */
@media (max-width:1023px), (pointer:coarse) {
  .btn-menu-toggle { display:flex !important; }
  .jam-sidebar {
    position:fixed; top:0; right:0; bottom:0; z-index:50;
    width:min(var(--sb),82vw); transform:translateX(100%);
  }
  .jam-sidebar.open {
    transform:translateX(0);
    box-shadow:-4px 0 32px rgba(0,0,0,.7), 0 0 0 1px var(--bd);
  }
  .sidebar-close { display:flex !important; margin:.6rem .95rem .2rem; align-self:flex-end; }
  .partner-piano-section { display:none !important; }
  #partner-dots  { display:block; }
  .kb-hints      { display:none; }
  .wave-bar      { height:26px; }
  .piano-area    { padding:.2rem .55rem 0; gap:.2rem; justify-content:flex-end; }
}

@media (max-width:1023px) and (orientation:landscape), (pointer:coarse) and (orientation:landscape) {
  .wave-bar   { height:20px; }
  .piano-area { padding:.15rem .45rem 0; gap:.15rem; justify-content:flex-end; }
}

/* ═══════ DESKTOP ═══════ */
@media (min-width:1024px) and (pointer:fine) {
  #partner-dots          { display:none !important; }
  .partner-piano-section { display:block; }
}

/* Session code (private room) */
.sb-session-code {
  padding:.75rem .95rem;
  border-bottom:1px solid var(--bd);
  display:none;
}
.sb-session-code.show { display:block; }
.session-code-label { font-family:var(--fm); font-size:.52rem; text-transform:uppercase; letter-spacing:.18em; color:var(--t2); margin-bottom:.35rem; }
.session-code-value {
  font-family:var(--fm); font-size:1.4rem; font-weight:700;
  letter-spacing:.2em; color:var(--cyan);
  text-shadow:var(--cyan-glow);
  cursor:pointer;
}
.session-code-hint { font-size:.6rem; color:var(--t3); margin-top:.25rem; font-family:var(--fm); }

/* ═══════════════════════════════════
   MIDI DEVICE SELECTION MENU
   ═══════════════════════════════════ */
.midi-menu-overlay {
  position:fixed; inset:0; background:rgba(8,8,15,.85); backdrop-filter:blur(12px);
  z-index:200; display:none; align-items:center; justify-content:center; padding:1rem;
}
.midi-menu-overlay.show { display:flex; }
.midi-menu-box {
  background:var(--surface); border:1px solid var(--bd2); border-radius:var(--r3);
  padding:1.5rem; max-width:340px; width:100%;
  backdrop-filter:blur(24px); box-shadow:0 24px 64px rgba(0,0,0,.6);
}
.midi-menu-title { font-weight:600; font-size:1rem; margin-bottom:1rem; color:var(--t); }
.midi-menu-devices { display:flex; flex-direction:column; gap:.4rem; }
.midi-device-btn {
  display:flex; align-items:center; gap:.7rem;
  padding:.7rem .85rem; border:1px solid var(--bd2); border-radius:var(--r2);
  background:transparent; cursor:pointer; text-align:left; transition:all .15s; width:100%;
  font-family:var(--fm); font-size:.75rem; color:var(--t2);
}
.midi-device-btn:hover { border-color:var(--bdc); background:var(--cyan-dim); color:var(--t); }
.midi-device-btn.selected { border-color:var(--bdc); background:var(--cyan-dim); color:var(--cyan); font-weight:600; }
.midi-device-icon { font-size:1rem; flex-shrink:0; }
.midi-device-name { flex:1; word-break:break-word; }
/* ═══════════════════════════════════
   iOS SILENT MODE BANNER
   ═══════════════════════════════════ */
#silent-banner {
  position:fixed; bottom:1rem; left:50%; z-index:9998;
  transform:translateX(-50%) translateY(0);
  display:flex; align-items:center; gap:.55rem;
  background:rgba(20,10,30,.92); backdrop-filter:blur(16px);
  border:1px solid rgba(255,160,0,.35); border-radius:12px;
  padding:.55rem .85rem .55rem .7rem;
  max-width:min(92vw, 400px);
  box-shadow:0 4px 24px rgba(0,0,0,.55);
  transition:transform .4s ease, opacity .4s ease;
}
#silent-banner.silent-hide {
  transform:translateX(-50%) translateY(120%);
  opacity:0;
}
.silent-icon { font-size:1.1rem; flex-shrink:0; }
.silent-text {
  font-family:var(--fh); font-size:.72rem; color:rgba(255,200,100,.9);
  line-height:1.45; flex:1;
}
.silent-text strong { color:#ffcc55; font-weight:600; }
.silent-close {
  flex-shrink:0; background:transparent; border:none; cursor:pointer;
  color:rgba(255,200,100,.5); font-size:.8rem; padding:2px 4px;
  line-height:1; -webkit-tap-highlight-color:transparent;
}
.silent-close:hover { color:rgba(255,200,100,.9); }