/* Nimbus Together web client. Builds on nimbus.css tokens. */
.tg { width: min(720px, calc(100% - 32px)); margin: 0 auto; padding: 32px 0 calc(48px + env(safe-area-inset-bottom)); }
.tg-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.tg-me { font-size: 28px; font-weight: 600; letter-spacing: -.03em; }
.tg-conn { color: var(--faint); font-size: 13px; margin-top: 2px; }
.tg-link { border: 0; background: none; color: var(--dim); font: 500 14px var(--sans); cursor: pointer; padding: 8px; }
.tg-link:hover { color: var(--ink); }

.tg-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 3px; background: #1c1c20; border-radius: 10px; margin-bottom: 18px; position: sticky; top: 8px; z-index: 5; }
.tg-tabs button { border: 0; background: transparent; color: var(--faint); height: 38px; font: 600 14px var(--sans); cursor: pointer; border-radius: 8px; }
.tg-tabs button[aria-selected="true"] { background: #f4f4f0; color: #09090b; }

.tg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tg-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--line); background: #101013; border-radius: 12px; }
.tg-row-text { flex: 1; min-width: 0; }
.tg-row-name { font-weight: 600; }
.tg-row-sub { color: var(--dim); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-row-actions { display: flex; gap: 6px; }
.tg-dot { width: 9px; height: 9px; border-radius: 50%; background: #3a3a3e; flex: none; }
.tg-dot.on { background: #5bd17a; }
.tg-dot.live { background: #ff5a6e; box-shadow: 0 0 0 4px rgba(255, 90, 110, .18); }
.tg-empty { color: var(--faint); font-size: 14px; text-align: center; padding: 28px 8px; margin: 0; }
.tg-fine { color: var(--faint); font-size: 12px; margin-top: 16px; }
.btn.sm { min-height: 34px; padding: 0 14px; font-size: 13px; }
.btn[disabled] { opacity: .6; cursor: default; }


.tg-chatbar { margin-bottom: 10px; }
.tg-select { display: flex; align-items: center; gap: 8px; color: var(--dim); font-size: 13px; }
.tg-select select { flex: 1; height: 38px; border-radius: 8px; border: 1px solid var(--line); background: #101013; color: var(--ink); font: 15px var(--sans); padding: 0 10px; }
.tg-thread { height: min(60vh, 560px); overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #0c0c0e; overscroll-behavior: contain; }
.tg-day { align-self: center; color: var(--faint); font-size: 11px; margin: 8px 0 2px; }
.tg-bubble { max-width: 78%; align-self: flex-start; padding: 8px 12px; border-radius: 16px; background: #1f1f23; font-size: 15px; line-height: 1.35; overflow-wrap: anywhere; }
.tg-bubble.mine { align-self: flex-end; background: #f4f4f0; color: #09090b; }
.tg-bubble time { display: block; font-size: 10px; opacity: .55; margin-top: 2px; }
.tg-compose { display: flex; gap: 8px; margin-top: 10px; }
.tg-compose input { flex: 1; min-width: 0; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: #101013; color: var(--ink); font: 16px var(--sans); padding: 0 14px; }
.tg-compose[hidden] { display: none; }

@media (max-width: 560px) {
  .tg-body .nav .links a:not(.btn) { display: none; }
  .tg-row { padding: 12px; }
  .tg-row-actions .btn { padding: 0 10px; }
  .tg-thread { height: calc(100svh - 330px); }
}

.tg-banner { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin-bottom: 14px; border-radius: 14px; background: linear-gradient(100deg, rgba(255,90,110,.16), rgba(255,90,110,.05)); border: 1px solid rgba(255,90,110,.35); }
.tg-banner[hidden] { display: none; }

/* ---- Live player: the notch's Now Playing card ---- */
.tg-player { margin-bottom: 14px; }
.tg-player[hidden] { display: none; }
.np { background: #000; border-radius: 34px; padding: 18px 22px 16px; color: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.06); }
.np-top { display: flex; align-items: center; gap: 12px; height: 56px; }
.np-art { position: relative; width: 55px; height: 55px; flex: none; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.08); display: grid; place-items: center; }
.np-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.np-art img[hidden] { display: none; }
.np-note { width: 22px; height: 22px; fill: none; stroke: rgba(255,255,255,.35); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.np-text { flex: 1; min-width: 0; }
.np-title { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.98); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.np-artist { font-size: 13px; color: rgba(255,255,255,.55); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.np-icon { width: 30px; height: 30px; flex: none; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; color: rgba(255,255,255,.8); }
.np-icon[hidden] { display: none; }
.np-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.np-icon.on { color: #ff5468; }
.np-icon.on svg { fill: currentColor; }
.np-icon[aria-pressed="true"] { color: #fff; }
.np-icon[aria-pressed="true"] svg { fill: rgba(255,255,255,.2); }
.np-icon[disabled] { opacity: .35; cursor: default; }
.np-bars { display: flex; align-items: center; gap: 2px; height: 18px; width: 16px; flex: none; margin-left: 2px; }
.np-bars i { width: 2.5px; height: 100%; border-radius: 2px; background: #fff; transform-origin: center; transform: scaleY(.18); transition: transform .12s ease-out; }
.np-scrub { display: flex; align-items: center; gap: 8px; margin-top: 13px; font: 11px var(--sans); font-variant-numeric: tabular-nums; color: rgba(255,255,255,.6); }
.np-scrub.unknown { opacity: .35; }
.np-scrub span { min-width: 34px; }
.np-scrub span:last-child { text-align: right; }
.np-rail { flex: 1; height: 18px; display: flex; align-items: center; position: relative; }
.np-rail::before { content: ""; position: absolute; left: 0; right: 0; height: 4px; border-radius: 2px; background: rgba(255,255,255,.18); }
.np-rail i { position: relative; height: 4px; width: 100%; border-radius: 2px; background: rgba(255,255,255,.85); transform-origin: left; transform: scaleX(0); }
.np-rail.seekable { cursor: pointer; }
.np-transport { display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; justify-items: center; max-width: 335px; margin: 10px auto 0; }
.np-transport[hidden] { display: none; }
.np-btn { width: 44px; height: 44px; border: 0; background: none; padding: 0; display: grid; place-items: center; cursor: pointer; color: #fff; border-radius: 50%; }
.np-btn svg { width: 21px; height: 21px; fill: currentColor; }
.np-btn.big svg { width: 30px; height: 30px; }
.np-btn:active { background: rgba(255,255,255,.1); }
.np-lyrics { padding: 16px 2px 6px; min-height: 120px; }
.np-lyrics[hidden], .np-body[hidden] { display: none; }
.np-lyrics p { margin: 0; overflow-wrap: anywhere; transition: opacity .2s; }
#ly-prev { color: rgba(255,255,255,.3); font-size: 15px; font-weight: 600; }
#ly-now { color: #fff; font-size: 24px; font-weight: 700; line-height: 1.25; margin: 8px 0; letter-spacing: -.01em; }
#ly-next { color: rgba(255,255,255,.4); font-size: 15px; font-weight: 600; }
.np-foot { display: flex; align-items: center; gap: 10px; padding: 10px 6px 0; }
.np-live { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-diag { flex: 1; color: var(--faint); font: 11px var(--mono); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) { .np { padding: 16px 16px 14px; border-radius: 30px; } .tg-diag { display: none; } .np-live { flex: 1; } }

/* Add a friend */
.tg-add { margin-bottom: 10px; }
.tg-invite { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.tg-invite[hidden] { display: none; }
.tg-invite-half { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #101013; display: grid; gap: 8px; align-content: start; }
.tg-invite-label { color: var(--dim); font-size: 13px; }
.tg-invite-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tg-invite input { height: 38px; border-radius: 8px; border: 1px solid var(--line); background: #0c0c0e; color: var(--ink); font: 15px var(--mono); padding: 0 10px; min-width: 0; }
.tg-code { font: 13px var(--mono); word-break: break-all; padding: 8px 10px; border-radius: 8px; background: #0c0c0e; user-select: all; }
.tg-code[hidden] { display: none; }
@media (max-width: 560px) { .tg-invite { grid-template-columns: 1fr; } }

/* Three sign-in modes in one row; hidden fields really hide. */
.auth-tabs { grid-template-columns: repeat(3, 1fr); }
.auth-tabs button { font-size: 12.5px; padding: 0 4px; }
.auth-form label[hidden] { display: none; }
.tg-invite [hidden] { display: none !important; }

/* The reset code, when it arrives on a signed-in browser. */
.tg-dialog { max-width: 380px; width: calc(100% - 32px); border: 1px solid var(--line); border-radius: 18px; background: #111114; color: var(--ink); padding: 22px; }
.tg-dialog::backdrop { background: rgba(0,0,0,.6); }
.tg-dialog h2 { margin: 0 0 8px; font-size: 19px; }
.tg-dialog p { color: var(--dim); font-size: 14px; margin: 0 0 12px; }
.tg-bigcode { font: 700 34px var(--mono); letter-spacing: .18em; text-align: center; padding: 12px; border-radius: 12px; background: #0a0a0c; margin-bottom: 12px; user-select: all; }

/* The host's music is on another device: a note and the song's own link. */
.np-away { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(244,242,238,.06);
  display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.np-away p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--dim); }
.np-away .btn { flex: none; }