/* JNY comm — icon bar collapsed by default, expandable panel. */

.comm-bar {
  display: flex;
  flex-direction: column;
  background: #0a0d1a;
  position: relative;
  height: auto !important;      /* override stub height from app.css */
  min-height: 0 !important;
  /* svh + keyboard-aware: when the on-screen keyboard opens, --jny-kbd-h
     is set by wireKeyboardLayout() and this ceiling drops so the expanded
     comm panel still fits above the keys. */
  max-height: calc(70svh - var(--jny-kbd-h, 0px)) !important;
}
.comm-bar.is-expanded {
  max-height: calc(70svh - var(--jny-kbd-h, 0px)) !important;
}

/* ─── Icon row (always visible) ─── */
.comm-icons {
  display: flex;
  background: #0c0f1e;
  border-top: 1px solid #252b4a;
  height: 56px;
  flex-shrink: 0;
}
.comm-icon {
  flex: 1;
  background: transparent;
  border: 0;
  color: #9aa0c0;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  position: relative;
  transition: color 120ms ease, background 120ms ease;
}
.comm-icon:hover { color: #c9cce8; }
.comm-icon:active { background: rgba(80,98,199,.12); }
.ci-glyph { font-size: 20px; line-height: 1; }
.ci-label { font-size: 11px; letter-spacing: 0.02em; }
.ci-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 22px);
  background: #e25757;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 10px;
  min-width: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px #0c0f1e;
}

/* ─── Expandable panel (hidden by default) ─── */
.comm-panel {
  display: flex;
  flex-direction: column;
  /* svh + keyboard-aware (see .comm-bar above) */
  height: calc(50svh - var(--jny-kbd-h, 0px));
  max-height: calc(50svh - var(--jny-kbd-h, 0px));
  border-top: 1px solid #252b4a;
  background: #0c0f1e;
  animation: commSlideUp 160ms ease-out;
}
.comm-panel[hidden] { display: none; }
@keyframes commSlideUp {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Tablet / laptop — the phone-first 50svh comm panel leaves hundreds of px
   of dead space on larger viewports. Let the panel fill close to full
   height when there's room. Phone portrait (390×844) keeps the 50svh cap
   because its width is < 600px (min-width is the only trigger — the OR with
   min-height would fire on tall phones too, which we don't want). */
@media (min-width: 600px) {
  .comm-panel {
    height: calc(85svh - var(--jny-kbd-h, 0px));
    max-height: calc(85svh - var(--jny-kbd-h, 0px));
  }
  .comm-bar {
    max-height: calc(90svh - var(--jny-kbd-h, 0px)) !important;
  }
  .comm-bar.is-expanded {
    max-height: calc(90svh - var(--jny-kbd-h, 0px)) !important;
  }
}

.comm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #0c0f1e;
  border-bottom: 1px solid #252b4a;
  font-size: 12px;
  color: #9aa0c0;
}
.comm-room { flex: 1; font-weight: 600; color: #c9cce8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comm-crumb { color: #7c84a8; font-weight: 500; font-size: 11px; }
.comm-action,
.comm-pin,
.comm-close,
.comm-back {
  background: transparent;
  border: 0;
  color: #9aa0c0;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  -webkit-tap-highlight-color: transparent;
}
.comm-back {
  font-size: 18px;
  padding: 2px 8px;
  color: #c9cce8;
}
.comm-pin.is-pinned { color: #ffd166; background: rgba(255,209,102,.1); }
.comm-action:hover,
.comm-pin:hover,
.comm-close:hover,
.comm-back:hover { background: rgba(255,255,255,.06); color: #c9cce8; }
.comm-action:active,
.comm-back:active { transform: scale(0.94); }

.comm-stream {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bubble {
  max-width: 80%;
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.35;
  word-wrap: break-word;
  position: relative;
}
.bubble-meta { font-size: 11px; opacity: .65; margin-bottom: 2px; }
.bubble-body { white-space: pre-wrap; }
.bubble-time { font-size: 10px; opacity: .5; margin-top: 3px; text-align: right; }

.bubble.is-mine {
  align-self: flex-end;
  background: linear-gradient(135deg, #5062c7, #3c4a8a);
  color: #ffffff;
  border-bottom-right-radius: 4px;
}
.bubble.is-theirs {
  align-self: flex-start;
  background: #1f2345;
  color: #e9eaf2;
  border: 1px solid #2d3463;
  border-bottom-left-radius: 4px;
}

/* Echo test bar — only visible when @echo is in the room. Shows a 7-tap
   surface (3 inbound tests + 3 outbound tests + 1 dev-menu) so a senior
   can do a full "does this thing work" check without typing anything. */
.comm-echo-bar {
  padding: 8px 10px;
  background: #0f1326;
  border-top: 1px solid #252b4a;
  border-bottom: 1px solid #252b4a;
}
.comm-echo-bar[hidden] { display: none; }
.echo-bar-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9aa0c4;
  margin-bottom: 6px;
}
.echo-bar-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.echo-bar-row:last-child { margin-bottom: 0; }
.echo-btn {
  flex: 1 1 auto;
  min-width: 78px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  background: #1a1f3c;
  color: #e8ecff;
  border: 1px solid #2d3463;
  border-radius: 999px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.echo-btn:hover { background: #242a4f; border-color: #445099; }
.echo-btn:active { transform: scale(0.96); }
.echo-btn.echo-dev {
  flex: 0 0 auto;
  min-width: 0;
  width: 36px;
  padding: 8px 0;
  background: transparent;
  color: #9aa0c4;
}
.echo-btn.echo-dev:hover { color: #e8ecff; background: #1a1f3c; }

.comm-compose {
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  background: #0a0d1a;
  border-top: 1px solid #252b4a;
  flex-shrink: 0;
}
.comm-compose input[type="text"] {
  flex: 1;
  background: #14172b;
  border: 1px solid #2d3463;
  color: #e9eaf2;
  padding: 10px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
}
.comm-compose input[type="text"]:focus { border-color: #5062c7; }
.comm-compose button[type="submit"] {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: #5062c7;
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}
.comm-compose button[type="submit"]:hover { background: #6172d9; }
.comm-attach {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: #9aa0c0;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}
.comm-attach:hover { color: #c9cce8; background: #1f2345; }

.comm-bar.is-dragover {
  outline: 2px dashed #5062c7;
  outline-offset: -4px;
}

/* Attachments inside bubbles */
.bubble-img-wrap { display: block; margin-bottom: 6px; border-radius: 10px; overflow: hidden; line-height: 0; }
.bubble-img { max-width: 100%; max-height: 280px; display: block; }
.bubble-video, .bubble-audio { max-width: 100%; margin-bottom: 6px; border-radius: 10px; }
.bubble-file {
  display: inline-block;
  margin-bottom: 6px;
  padding: 6px 10px;
  background: rgba(255,255,255,.08);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 13px;
}
.bubble-file:hover { background: rgba(255,255,255,.12); }

/* ─── Call card (rendered when message.call is set) ─── */
.bubble-call { background: transparent !important; padding: 0 !important; }
.bubble-call .call-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(80, 98, 199, 0.18), rgba(60, 74, 138, 0.28));
  border: 1px solid rgba(80, 98, 199, 0.55);
  min-width: 220px;
  max-width: 320px;
}
.bubble-call .call-card-row { display: flex; align-items: center; gap: 10px; }
.bubble-call .call-card-icon { font-size: 24px; line-height: 1; }
.bubble-call .call-card-meta { flex: 1; min-width: 0; }
.bubble-call .call-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #eaecff;
  margin-bottom: 2px;
}
.bubble-call .call-card-sub {
  font-size: 12px;
  color: #9aa0c0;
}
.bubble-call .call-card-join {
  display: block;
  text-align: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3bbf6f, #2a8a4b);
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
  font-size: 14px;
  transition: filter 120ms, transform 120ms;
}
.bubble-call .call-card-join:hover { filter: brightness(1.1); }
.bubble-call .call-card-join:active { transform: scale(0.98); }

.ci-badge-green { background: #2a8a4b !important; box-shadow: 0 0 0 2px #0c0f1e; }
.ci-badge-blue { background: #3c62c8 !important; box-shadow: 0 0 0 2px #0c0f1e; }

/* DMs-tab row previews: flex-wrap on the row lets preview drop to its
   own line (flex-basis:100% claims full width). Grid was wrong here —
   .person-row / .person-row-btn are flex containers. */
.comm-sheet .person-row-btn.dm-row { flex-wrap: wrap; row-gap: 4px; }
.dm-preview { color: #9aa0c0; font-size: 12px; }
.dm-row-preview {
  flex-basis: 100%;
  padding-left: 22px;
  margin-top: 2px;
  font-size: 12px;
  color: #9aa0c0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sheet view inside comm panel (People / Invite / etc) */
.comm-sheet {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  font-size: 14px;
  color: #e9eaf2;
}
.comm-sheet .person-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid #1a1f3a;
  border-radius: 6px;
}
.comm-sheet .person-row-btn {
  width: 100%;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.comm-sheet .person-row-btn:hover { background: #1f2345; }
.person-chev { color: #5062c7; font-size: 20px; opacity: .7; padding-left: 6px; }
.bot-tag {
  display: inline-block;
  padding: 1px 6px;
  margin-left: 6px;
  background: #3c4a8a;
  color: #c9cce8;
  border-radius: 4px;
  font-size: 9px;
  letter-spacing: 0.1em;
  font-weight: 700;
  vertical-align: middle;
}
.person-poke {
  background: transparent;
  border: 1px solid #2d3463;
  color: #ffd166;
  border-radius: 6px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.person-poke:hover { background: rgba(255,209,102,.1); }
.person-poke:disabled { opacity: .5; cursor: default; }
.comm-sheet .person-row:last-child { border-bottom: 0; }
.person-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.person-dot.is-on      { background: #7bd89a; box-shadow: 0 0 4px rgba(123,216,154,.5); }
.person-dot.is-idle    { background: #ffd166; }
.person-dot.is-off     { background: #555; }
.person-dot.is-unknown { background: #3c4a8a; border: 1px solid #5062c7; }
.person-row.is-self {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(80,98,199,0.10);
  margin-bottom: 4px;
}
.self-tag {
  display: inline-block;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  background: rgba(80,98,199,.35);
  color: #eaecff;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.person-stale {
  font-size: 11px;
  opacity: .6;
  text-align: right;
  padding: 0 4px 6px;
}
.person-name { flex: 1; }
.person-status { font-size: 12px; opacity: .6; }
.person-empty { opacity: .6; text-align: center; padding: 24px 0; }

/* Local-first roster additions (v72) */
.person-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 4px 8px;
  font-size: 11px;
  min-height: 24px;
}
.person-state { opacity: .6; }
.person-state-cache   { color: #8ca0ff; }
.person-state-offline { color: #ffb070; }
.person-refresh {
  margin-left: auto;
  background: transparent;
  color: inherit;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  cursor: pointer;
}
.person-refresh:hover { background: rgba(255,255,255,.06); }
.person-refresh:disabled { opacity: .5; cursor: default; }
.person-row.is-tombstone { opacity: .45; }
.person-row.is-tombstone .person-name { text-decoration: line-through; }
.person-dot.is-gone { background: #555; border: 1px dashed #888; }
.person-gone-label {
  margin-top: 8px;
  padding: 6px 4px 2px;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .5;
  border-top: 1px solid rgba(255,255,255,.08);
}
.person-remove {
  flex: 0 0 auto;
  padding: 0 6px;
  opacity: .55;
  font-size: 14px;
}
.person-remove:hover { opacity: 1; color: #ff9090; }

.invite-url {
  display: block;
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  background: #14172b;
  border: 1px solid #2d3463;
  border-radius: 8px;
  color: #e9eaf2;
  font-family: monospace;
  font-size: 13px;
  outline: none;
}
.invite-copy {
  padding: 8px 14px;
  background: #5062c7;
  color: #fff;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}