/* App shell: mobile single pane; desktop = 150px rail | 1fr pane. */

#app {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
}

/* ── Rail (desktop only) ─────────────────────────────────────────────── */

#rail {
  display: none;
}

@media (min-width: 900px) {
  #app {
    grid-template-columns: var(--rail-w) 1fr;
  }
  #rail {
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: var(--hairline-w) solid var(--hairline);
    padding: 12px 10px;
    min-height: 0;
  }
}

.rail-identity {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.rail-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--accent-disc);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
}
.rail-name {
  font-size: 12px;
  color: var(--text-1);
  font-weight: 500;
}
.rail-presence {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-2);
}
.rail-presence .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--online);
}
.rail-presence.on-call {
  color: var(--accent);
}
.rail-presence.on-call .dot {
  background: var(--accent);
}

.rail-label {
  font-size: 11px;
  color: var(--text-2);
  margin-bottom: 8px;
}

.rail-calls {
  min-height: 0;
  overflow-y: auto;
}
.rail-call {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  font-size: 11px;
  color: var(--text-1);
  width: 100%;
  text-align: left;
}
.rail-call .icon {
  font-size: 14px;
  color: var(--text-2);
}
.rail-call.missed {
  color: var(--text-2);
}
.rail-empty {
  font-size: 11px;
  color: var(--text-3);
  padding: 4px 0;
}

.rail-settings {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-2);
  padding: 8px 0 2px;
  min-height: 34px;
}
.rail-settings .icon {
  font-size: 15px;
}
.rail-settings:hover {
  color: var(--text-1);
}

/* ── Screens ─────────────────────────────────────────────────────────── */

#panes {
  position: relative;
  min-width: 0;
  min-height: 0;
}

.screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ── Thread header (mobile: centered identity; desktop: slim bar) ────── */

.thread-header {
  background: var(--surface);
  border-bottom: var(--hairline-w) solid var(--hairline);
  padding: 4px 8px 6px;
  padding-top: max(4px, env(safe-area-inset-top));
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  flex-shrink: 0;
}

.hdr-spacer {
  min-width: 40px;
}

.hdr-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding-bottom: 2px;
}
.hdr-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent-disc);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
}
.hdr-name {
  font-size: 13px;
  color: var(--text-1);
  font-weight: 500;
}
.hdr-presence {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-2);
}
.hdr-presence .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--online);
}
.hdr-presence.on-call {
  color: var(--accent);
}
.hdr-presence.on-call .dot {
  background: var(--accent);
}

.hdr-actions {
  display: flex;
  justify-content: flex-end;
  gap: 2px;
}
.hdr-actions .icon-btn .icon {
  font-size: 21px;
}

@media (min-width: 900px) {
  .thread-header {
    grid-template-columns: auto 1fr auto;
    padding: 0 8px 0 16px;
    min-height: 42px;
  }
  .hdr-spacer {
    display: none;
  }
  .hdr-center {
    flex-direction: row;
    gap: 8px;
    padding-bottom: 0;
    justify-self: start;
  }
  .hdr-avatar,
  .hdr-presence {
    display: none;
  }
  #btn-settings {
    display: none; /* the rail's Settings button covers desktop */
  }
  .hdr-actions .icon-btn .icon {
    font-size: 17px;
  }
}

/* ── Call screen placeholders (call workstream mounts here) ──────────── */

#screen-call-voice,
#screen-call-video {
  background: var(--bg);
}
#screen-call-video {
  background: var(--stage);
  position: relative;
}
#nova-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.call-placeholder {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.call-placeholder .back-to-chat {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text-2);
  min-height: 44px;
}
.call-placeholder .back-to-chat .icon {
  font-size: 16px;
}
.call-placeholder .ph-disc {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  border: 2px solid var(--accent-dim);
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-placeholder .ph-disc-inner {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}
.call-placeholder .ph-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--accent-disc);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
}
.call-placeholder .ph-name {
  font-size: 17px;
  color: var(--text-1);
  text-align: center;
}
.call-placeholder .ph-status {
  font-size: 12px;
  color: var(--text-2);
  margin-top: 3px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ── Call banner (active call, shown on the thread screen) ───────────── */

#call-banner {
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 500;
  padding: 6px 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  flex-shrink: 0;
  min-height: 32px;
}
#call-banner .icon {
  font-size: 14px;
}
#call-banner time {
  font-variant-numeric: tabular-nums;
}