:root {
  --paper: hsl(var(--background));
  --ink: hsl(var(--foreground));
  --muted-ink: hsl(var(--muted-foreground));
  --lime: hsl(var(--primary));
  --line: hsl(var(--border));
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  letter-spacing: -0.025em;
}
button,
input,
a {
  font: inherit;
}
button,
a,
input {
  -webkit-tap-highlight-color: transparent;
}
button {
  cursor: pointer;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 3px solid #607c12;
  outline-offset: 3px;
}
[hidden] {
  display: none !important;
}
.shell {
  max-width: 720px;
  margin: auto;
  padding: 0 28px;
}
.masthead {
  height: 98px;
  display: flex;
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid var(--line);
}
.brand {
  text-decoration: none;
  color: var(--ink);
  font-size: 40px;
  font-weight: 800;
  letter-spacing: -3px;
}
.brand span {
  color: #778d2c;
  font-size: 25px;
  margin-left: 4px;
  vertical-align: top;
}
.edition {
  font-size: 12px;
  font-weight: 600;
  flex: 1;
}
.edition span {
  display: block;
  color: var(--muted-ink);
  font-size: 8px;
  letter-spacing: 1.5px;
  margin-top: 5px;
}
.small-button {
  border: 1px solid var(--line);
  border-radius: 30px;
  background: transparent;
  padding: 10px 17px;
  font-size: 12px;
}
.intro {
  padding: 40px 0 32px;
  position: relative;
}
.eyebrow {
  font-size: 9px;
  letter-spacing: 1.6px;
  font-weight: 700;
  color: #6c7660;
}
h1 {
  font-size: 48px;
  line-height: 1.22;
  letter-spacing: -2.5px;
  margin: 15px 0;
}
h2 {
  letter-spacing: -1px;
}
.intro p {
  position: absolute;
  right: 0;
  bottom: 33px;
  line-height: 1.9;
  font-size: 13px;
  color: var(--muted-ink);
}
.session {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.session-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 20px;
  font-size: 12px;
}
.status {
  display: flex;
  align-items: center;
  gap: 7px;
}
.status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a7ab9e;
}
.status i.connected {
  background: #65a039;
  box-shadow: 0 0 0 4px #eff6e9;
}
.timer {
  color: var(--muted-ink);
  font-size: 12px;
}
.camera-stage {
  aspect-ratio: 4/3;
  background: #252b24;
  position: relative;
  overflow: hidden;
}
.camera-stage > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.camera-stage > video.mirrored {
  transform: scaleX(-1);
}
/* Digital zoom (--cam-zoom set by app.js). The clip-path is in the element's own space, so
   insetting by (1 - 1/zoom)/2 and then scaling by zoom lands exactly on the original frame box. */
.camera-stage > #local-video {
  transform: scale(var(--cam-zoom, 1));
  clip-path: inset(calc((1 - 1 / var(--cam-zoom, 1)) * 50%));
}
.camera-stage > #local-video.mirrored {
  transform: scale(calc(var(--cam-zoom, 1) * -1), var(--cam-zoom, 1));
}
/* "This one" tap (guide-ping.js): same colours as map markings — mine blue, the peer's orange. */
.guide-ping {
  --ping: #1d4ed8;
  position: absolute;
  z-index: 6;
  width: 56px;
  height: 56px;
  margin: -28px 0 0 -28px;
  border-radius: 50%;
  border: 3px solid var(--ping);
  box-shadow: 0 0 0 3px #fff, inset 0 0 0 3px #fff;
  pointer-events: none;
  animation: guide-ping 1.2s ease-out 2;
}
.guide-ping[data-who="peer"] {
  --ping: #ea580c;
}
.guide-ping::after {
  content: "";
  position: absolute;
  inset: 21px;
  border-radius: 50%;
  background: var(--ping);
  box-shadow: 0 0 0 2px #fff;
}
@keyframes guide-ping {
  from { transform: scale(0.4); opacity: 1; }
  70% { transform: scale(1); opacity: 1; }
  to { transform: scale(1.15); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .guide-ping { animation: none; }
}
/* As the small inset (peer is the main picture) the local video is not zoomable. */
.camera-stage[data-video-main="peer"] {
  --cam-zoom: 1 !important;
}
.session-active .camera-stage {
  touch-action: none; /* two-finger pinch must reach the page, not scroll or zoom it */
}
.camera-zoom-reset {
  position: absolute;
  bottom: 10px; /* the top edge carries the place-title and brand chips */
  left: 50%;
  transform: translateX(-50%);
  z-index: 8;
  min-width: 52px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid #ffffff55;
  border-radius: 999px;
  background: rgba(14, 22, 48, 0.66);
  color: white;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.camera-wide {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 8;
  min-width: 52px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid #ffffff55;
  border-radius: 999px;
  background: rgba(14, 22, 48, 0.66);
  color: white;
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.camera-wide[aria-pressed="true"] {
  background: #fff;
  color: #0e1630;
}
.camera-wide[hidden],
.camera-stage[data-video-main="peer"] .camera-wide {
  display: none;
}
.camera-zoom-reset[hidden],
.camera-stage[data-video-main="peer"] .camera-zoom-reset {
  display: none;
}
.camera-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  background: radial-gradient(ellipse at 65% 30%, #414a35, #252b24 65%);
  color: var(--paper);
}
.camera-symbol {
  font-size: 26px;
  color: var(--lime);
  border: 1px solid #67704d;
  border-radius: 50%;
  height: 56px;
  width: 56px;
  display: grid;
  place-items: center;
}
.camera-empty h2 {
  font-size: 26px;
  line-height: 1.4;
  font-weight: 500;
  margin: 18px 0 8px;
}
.camera-empty p {
  font-size: 12px;
  line-height: 1.8;
  color: #b6bdab;
  margin-bottom: 22px;
}
.primary {
  background: var(--lime);
  color: var(--ink);
  border: 0;
  padding: 14px 20px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.video-top {
  position: absolute;
  top: 17px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  color: white;
  font-size: 12px;
  text-shadow: 0 1px 8px black;
}
.video-top span {
  background: #252b2470;
  padding: 7px 10px;
  border-radius: 20px;
}
.remote-wrap {
  position: absolute;
  width: 27%;
  aspect-ratio: 3/4;
  right: 16px;
  top: 55px;
  border: 2px solid #ffffffae;
  border-radius: 12px;
  overflow: hidden;
  background: #252b24;
}
.remote-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.remote-wrap > span {
  position: absolute;
  bottom: 7px;
  left: 7px;
  color: white;
  font-size: 8px;
  text-shadow: 0 1px 5px black;
}
.remote-wrap button {
  position: absolute;
  inset: auto 5px 20px;
  border: 0;
  padding: 8px;
  font-size: 12px;
}
.camera-controls {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 9px;
}
.camera-controls button {
  background: #232822b5;
  color: white;
  border: 1px solid #ffffff25;
  border-radius: 14px;
  padding: 9px 15px;
  min-width: 62px;
  font-size: 23px;
  backdrop-filter: blur(10px);
}
.camera-controls span {
  display: block;
  font-size: 8px;
  margin-top: 3px;
}
.notice {
  padding: 13px 20px;
  color: #795129;
  background: #fff6e8;
  font-size: 12px;
  line-height: 1.6;
}
.network-note {
  padding: 10px 20px;
  background: #f7f8ef;
  color: #687248;
  font-size: 12px;
  line-height: 1.6;
}
.map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 23px 20px 0;
}
.map-header h2 {
  font-size: 20px;
  margin: 5px 0;
}
.toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  cursor: pointer;
}
.toggle input {
  position: absolute;
  opacity: 0;
}
.toggle-track {
  height: 22px;
  width: 38px;
  border-radius: 20px;
  background: #dbded3;
  position: relative;
}
.toggle-track:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  top: 3px;
  left: 3px;
  background: white;
  border-radius: 50%;
  transition: transform 0.2s;
}
.toggle input:checked + .toggle-track {
  background: #90ab3f;
}
.toggle input:checked + .toggle-track:before {
  transform: translateX(16px);
}
.toggle input:focus-visible + .toggle-track {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
  box-shadow: 0 0 0 5px hsl(var(--card));
}
.consent {
  font-size: 9px;
  line-height: 1.7;
  color: var(--muted-ink);
  padding: 0 20px;
  margin: 7px 0 15px;
}
.map-stage {
  height: 245px;
  position: relative;
  background: #edf0e7;
  margin: 0 20px;
  border-radius: 12px;
  overflow: hidden;
}
#map {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
}
.map-tools {
  position: absolute;
  right: 10px;
  top: 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.map-tools button[hidden] {
  display: none;
}
.map-tools button svg {
  display: block;
  margin: auto;
}
.map-tools button {
  width: 31px;
  height: 31px;
  background: white;
  border: 1px solid #dee1d7;
  border-radius: 7px;
  font-size: 19px;
}
.attribution {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #ffffffdf;
  padding: 3px 5px;
  color: #42503a;
  font-size: 8px;
  letter-spacing: 0;
}
.map-message {
  position: absolute;
  left: 12px;
  bottom: 23px;
  right: 48px;
  pointer-events: none;
  background: #ffffffed;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: #687248;
}
.coordinates {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 11px 20px 22px;
  font-size: 9px;
  color: #7f8478;
}
.coordinates > span {
  display: flex;
  align-items: center;
  gap: 4px;
}
.coordinates strong {
  font-size: 9px;
  font-weight: 500;
  color: #3d4635;
}
.marker {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.marker.local {
  background: #1D4ED8;
}
.marker.peer {
  background: #6D28D9;
}
.card-action {
  padding: 20px;
  border-top: 1px solid var(--line);
  background: #fafbf5;
}
.card-action > label {
  font-size: 12px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.card-action label span {
  color: #878e7b;
  font-size: 9px;
  font-weight: 400;
}
.card-action input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #d4d9c8;
  background: transparent;
  font-size: 15px;
  padding: 12px 0;
  margin-bottom: 18px;
  color: var(--ink);
  border-radius: 0;
}
.capture {
  width: 100%;
  border: 0;
  background: var(--lime);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  text-align: left;
  gap: 13px;
  font-size: 14px;
  font-weight: 700;
}
.capture-icon {
  font-size: 29px;
}
.capture > span:last-child {
  margin-left: auto;
  font-size: 23px;
}
.card-action > p {
  font-size: 9px;
  color: var(--muted-ink);
  text-align: center;
  margin: 10px 0 0;
}
footer {
  display: flex;
  justify-content: space-between;
  color: #8a907f;
  padding: 28px 0 35px;
  font-size: 9px;
}
footer > span:first-child {
  letter-spacing: 1.3px;
  font-size: 8px;
}
dialog {
  border: 1px solid var(--line);
  border-radius: 22px;
  max-width: 440px;
  width: calc(100% - 30px);
  padding: 24px;
  color: var(--ink);
  background: var(--paper);
  max-height: 92dvh;
  overflow: auto;
}
dialog::backdrop {
  background: #17201899;
  backdrop-filter: blur(5px);
}
.dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.dialog-head button {
  border: 0;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  font-size: 25px;
  padding: 0 5px;
}
dialog h2 {
  font-size: 24px;
  margin: 12px 0;
}
dialog p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted-ink);
}
#qr {
  display: block;
  margin: 23px auto;
  border-radius: 12px;
}
#invite-url {
  width: 100%;
  font-size: 12px;
  padding: 12px;
  background: white;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.dialog-actions {
  display: flex;
  gap: 8px;
  margin-top: 15px;
}
.dialog-actions > * {
  flex: 1;
}
.secondary {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--ink);
  background: white;
  border: 1px solid var(--line);
  padding: 13px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.fine {
  font-size: 9px !important;
  text-align: center;
}
#card-preview {
  display: block;
  width: 100%;
  border-radius: 12px;
  margin-top: 18px;
}
.busy {
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width: 520px) {
  .shell {
    padding: 0 18px;
  }
  .masthead {
    height: 79px;
    gap: 18px;
  }
  .brand {
    font-size: 35px;
  }
  .edition {
    font-size: 12px;
  }
  .intro {
    padding: 28px 0 22px;
  }
  h1 {
    font-size: 38px;
    margin: 12px 0;
  }
  .intro p {
    position: static;
    margin: 12px 0 0;
    font-size: 12px;
  }
  .eyebrow {
    font-size: 8px;
  }
  .session-heading {
    padding: 14px;
    font-size: 12px;
  }
  .timer {
    font-size: 9px;
  }
  .camera-stage {
    aspect-ratio: 1/1.02;
  }
  .camera-empty h2 {
    font-size: 24px;
  }
  .camera-empty p {
    font-size: 12px;
  }
  .map-header {
    padding: 19px 15px 0;
  }
  .consent {
    padding: 0 15px;
  }
  .map-stage {
    margin: 0 15px;
    height: 215px;
  }
  .coordinates {
    margin: 11px 15px 19px;
    flex-wrap: wrap;
    gap: 8px;
  }
  .card-action {
    padding: 17px 15px;
  }
  .session {
    border-radius: 17px;
  }
  footer {
    font-size: 8px;
    gap: 12px;
  }
  .camera-controls button {
    padding: 8px 13px;
  }
  .remote-wrap {
    width: 29%;
    top: 53px;
    right: 12px;
  }
}

.text-button {
  border: 0;
  background: transparent;
  color: #d4dcc5;
  font-size: 12px;
  text-decoration: underline;
  padding: 10px;
}
.camera-empty input {
  background: #ffffff10;
  border: 1px solid #ffffff30;
  border-radius: 8px;
  color: white;
  padding: 9px 12px;
  max-width: 210px;
  font-size: 12px;
  margin-bottom: 10px;
}
.camera-empty input::placeholder {
  color: #b6bdab;
}
.full-button {
  width: 100%;
  margin-top: 12px;
}
.waiting-panel {
  display: flex;
  gap: 8px;
  padding: 12px 15px;
  align-items: center;
  background: #f1f5e7;
  font-size: 12px;
}
.waiting-panel > span {
  flex: 1;
}
.waiting-panel .small-button {
  padding: 7px 9px;
  font-size: 12px;
}
.ended-panel {
  padding: 22px;
  text-align: center;
}
.ended-panel h2 {
  font-size: 20px;
}
.ended-panel p {
  font-size: 12px;
  color: var(--muted-ink);
}
.ended-panel a {
  text-decoration: none;
}
.camera-stage.audio-only > video {
  visibility: hidden;
}
.camera-stage.audio-only:after {
  content: "음성으로 함께하는 중";
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  text-align: center;
  color: hsl(var(--primary));
  font-size: 20px;
  pointer-events: none;
}

/* Keep the live camera and map in one mobile view after explicit participation. */
.session-active .intro {
  display: none;
}
.session-active .session {
  margin-top: 16px;
}
@media (max-width: 520px) {
  .session-active .masthead {
    height: 60px;
  }
  .session-active .session {
    margin-top: 10px;
  }
  .session-active .camera-stage {
    aspect-ratio: 4 / 3;
  }
  .session-active .camera-controls {
    bottom: 10px;
    gap: 6px;
  }
  .session-active .camera-controls button {
    padding: 6px 10px;
    min-width: 55px;
    font-size: 19px;
  }
  .session-active .map-header {
    padding-top: 15px;
  }
  .session-active .camera-empty .camera-symbol {
    display: none;
  }
  .session-active .camera-empty h2 {
    font-size: 20px;
    margin: 8px 0;
  }
  .session-active .camera-empty p {
    margin: 0 12px 12px;
  }
}

/* Live viewport layout changes only the presentation, never the media tracks. */
.splitter,
.live-controls,
.compact-consent {
  display: none;
}
#session-details-content .card-action {
  border: 0;
  padding: 8px 0;
  background: transparent;
}
#session-details-content .coordinates {
  margin: 18px 0;
  flex-wrap: wrap;
}
#session-details-content .consent {
  padding: 0;
  font-size: 12px;
}
#session-details-content .network-note {
  padding: 10px 0;
  background: transparent;
  font-size: 12px;
}

body.split-active {
  height: 100dvh;
  height: var(--app-height, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
}
.split-active .shell {
  height: 100%;
  max-width: none;
  padding: env(safe-area-inset-top) max(8px, env(safe-area-inset-right))
    env(safe-area-inset-bottom) max(8px, env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.split-active .masthead {
  height: 54px;
  min-height: 54px;
  border: 0;
  padding: 0 8px;
}
.split-active .brand {
  font-size: 31px;
}
.split-active .edition {
  font-size: 12px;
}
.split-active .intro,
.split-active .shell > footer {
  display: none;
}
.split-active .session {
  flex: 1;
  min-height: 0;
  margin: 0;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.split-active .session-heading {
  padding: 10px 12px;
  flex: none;
  min-height: 35px;
  order: 0;
  font-size: 12px;
}
.split-active #waiting-panel {
  order: 1;
  flex: none;
  padding: 5px 10px;
  font-size: 9px;
  min-height: 29px;
}
.split-active #waiting-panel .small-button {
  padding: 4px 8px;
  font-size: 9px;
}
.split-active #notice {
  order: 2;
  flex: none;
  font-size: 9px;
  line-height: 1.4;
  padding: 5px 10px;
  max-height: 36px;
  overflow: auto;
}
.split-active .live-workspace {
  order: 3;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.split-active .camera-stage {
  height: var(--camera-size, 45%);
  flex: 0 0 var(--camera-size, 45%);
  min-height: 0;
  aspect-ratio: auto;
}
.split-active .remote-wrap {
  height: min(62%, 140px);
  max-height: calc(100% - 48px);
  width: auto;
  aspect-ratio: 3/4;
  top: 40px;
  right: 10px;
}
.split-active .video-top {
  top: 9px;
  left: 12px;
  right: 12px;
}
.split-active .splitter {
  display: flex;
  flex: none;
  height: 30px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: row-resize;
  touch-action: none;
  user-select: none;
  background: #f5f6ed;
  border-block: 1px solid #dce2cd;
  color: #7b856b;
}
.splitter > span {
  width: 34px;
  height: 4px;
  border-radius: 6px;
  background: #9eab88;
}
.splitter small {
  font-size: 8px;
}
.splitter.dragging,
.splitter:focus-visible {
  background: #e5efc7;
}
.splitter:focus-visible {
  outline: 2px solid #71883a;
  outline-offset: -2px;
}
.split-active .map-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: white;
}
.split-active .map-header {
  flex: none;
  min-height: 37px;
  padding: 5px 12px;
  align-items: center;
}
.split-active .map-header .eyebrow {
  display: none;
}
.split-active .map-header h2 {
  font-size: 14px;
  margin: 0;
}
.split-active .map-stage {
  flex: 1;
  min-height: 0;
  height: auto;
  margin: 0 8px;
  border-radius: 8px;
}
.split-active .compact-consent {
  display: block;
  flex: none;
  margin: 0;
  padding: 4px 12px;
  font-size: 8px;
  line-height: 1.4;
  color: #757e67;
}
.split-active .attribution {
  font-size: 8px;
}
.split-active .map-tools {
  flex-direction: row;
}
.split-active .map-message {
  font-size: 9px;
  padding: 5px;
}
.split-active .live-controls {
  order: 4;
  display: flex;
  flex: none;
  gap: 6px;
  align-items: center;
  min-height: 66px;
  padding: 7px 9px;
  background: hsl(var(--card));
  border-top: 1px solid hsl(var(--border));
}
.split-active #camera-controls {
  position: static;
  transform: none;
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
}
.split-active #camera-controls button {
  flex: 1;
  min-width: 0;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border: 0;
  padding: 6px 3px;
  border-radius: 10px;
  font-size: 20px;
}
.split-active #camera-controls span {
  font-size: 8px;
  white-space: nowrap;
}
.split-active #leave {
  background: hsl(var(--destructive)) !important;
  color: hsl(var(--destructive-foreground)) !important;
}
.split-active #capture {
  width: 49px;
  height: 49px;
  flex: none;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  gap: 0;
}
.split-active #capture > span:not(:first-child) {
  display: none;
}
.split-active #capture .capture-icon {
  font-size: 31px;
}
.split-active .details-button {
  flex: none;
  width: 36px;
  height: 44px;
  font-size: 12px;
  border: 0;
  background: transparent;
  color: hsl(var(--foreground));
  padding: 0;
}
.split-active .camera-empty .camera-symbol {
  display: none;
}
.split-active .camera-empty h2 {
  font-size: 16px;
  margin: 5px;
}
.split-active .camera-empty p {
  font-size: 9px;
  margin: 3px 10px 8px;
  line-height: 1.5;
}
.split-active .camera-empty .primary {
  padding: 9px 14px;
  font-size: 12px;
}
.split-active .camera-empty .text-button {
  padding: 6px;
  font-size: 9px;
}
@media (max-height: 500px) {
  .split-active .masthead {
    height: 36px;
    min-height: 36px;
  }
  .split-active .brand {
    font-size: 25px;
  }
  .split-active .edition span {
    display: none;
  }
  .split-active .session-heading {
    padding: 6px 10px;
    min-height: 27px;
  }
  .split-active .splitter {
    height: 24px;
  }
  .split-active .map-header {
    min-height: 29px;
    padding: 3px 10px;
  }
  .split-active .map-header h2 {
    font-size: 12px;
  }
  .split-active .live-controls {
    min-height: 52px;
    padding: 4px 8px;
  }
  .split-active #capture {
    height: 40px;
    width: 40px;
  }
  .split-active #camera-controls button {
    padding: 4px;
    font-size: 16px;
  }
  .split-active #camera-controls span {
    font-size: 7px;
  }
  .split-active .map-tools {
    top: 5px;
    right: 5px;
    gap: 1px;
  }
  .split-active .map-tools button {
    width: 24px;
    height: 24px;
    font-size: 16px;
  }
  .split-active .remote-wrap {
    top: 30px;
    max-height: calc(100% - 36px);
  }
  .split-active .compact-consent {
    padding: 2px 10px;
    font-size: 7px;
  }
}

/* Tablets and desktops use the same viewport with a left/right divider. */
.split-active.split-horizontal .live-workspace {
  flex-direction: row;
}
.split-active.split-horizontal .camera-stage {
  width: var(--camera-size, 45%);
  height: auto;
  flex: 0 0 var(--camera-size, 45%);
}
.split-active.split-horizontal .splitter {
  width: 30px;
  height: auto;
  flex: 0 0 30px;
  flex-direction: column;
  cursor: col-resize;
  border-block: 0;
  border-inline: 1px solid #dce2cd;
}
.split-horizontal .splitter > span {
  width: 4px;
  height: 34px;
}
.split-horizontal .splitter small {
  writing-mode: vertical-rl;
  letter-spacing: 1px;
}
.split-active.split-horizontal .map-panel {
  min-width: 0;
  height: 100%;
}
.split-active.split-horizontal .map-header {
  min-height: 48px;
  padding: 10px 15px;
}
.split-active.split-horizontal .compact-consent {
  font-size: 9px;
  padding: 8px 15px;
}
.split-active.split-horizontal .remote-wrap {
  height: min(30%, 180px);
  top: 45px;
  right: 15px;
}
.split-active.split-horizontal .live-controls {
  justify-content: center;
}
.split-active.split-horizontal #camera-controls {
  max-width: 420px;
}
.split-active.split-horizontal #capture {
  width: 170px;
  border-radius: 12px;
  padding: 7px 15px;
  gap: 9px;
}
.split-active.split-horizontal #capture > span:nth-child(2) {
  display: block;
  font-size: 12px;
}
.split-active.split-horizontal #capture small {
  display: none;
}
.split-active.split-horizontal .details-button {
  width: 55px;
}

/* Quiet, icon-first call controls; permission, errors and settings remain explicit. */
.intro,
.edition,
.shell > footer {
  display: none;
}
.masthead .brand {
  margin-right: auto;
}
.control-icon {
  display: block;
  flex: none;
  margin: auto;
}
.state-slash {
  display: none;
}
.is-off .state-slash {
  display: block;
}
.split-active .masthead {
  display: none;
}
.split-active .session-heading {
  min-height: 30px;
  padding: 7px 12px;
}
.split-active #status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.split-active .timer {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  letter-spacing: 0.1em;
}
.split-active #live-label,
.split-active .splitter small,
.split-active .map-header > div,
.split-active .compact-consent {
  display: none;
}
.split-active .map-header {
  justify-content: flex-end;
  min-height: 34px;
  padding: 4px 10px;
}
.split-active .toggle {
  gap: 8px;
}
.split-active .toggle .control-icon {
  width: 20px;
  height: 20px;
}
.split-active .location-label,
.split-active #camera-controls button > span,
.split-active #session-details > span,
.split-active #capture > span:not(:first-child),
.split-active #waiting-panel > span,
.split-active #waiting-panel button > span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  display: block;
}
.split-active #camera-controls button {
  height: 44px;
  padding: 10px;
  border-radius: 12px;
}
.split-active #camera-controls button.is-off {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}
.split-active .live-controls {
  min-height: 62px;
  padding: 7px 9px;
}
.split-active #session-details {
  height: 44px;
}
.split-active #session-details .control-icon {
  width: 22px;
  height: 22px;
}
.split-active #capture {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  padding: 0;
}
.split-active #capture .control-icon {
  width: 32px;
  height: 32px;
}
.split-active #local-label {
  padding: 5px;
  background: #252b2470;
}
.split-active #local-label .control-icon {
  width: 14px;
  height: 14px;
}
.split-active .remote-wrap > span .control-icon {
  width: 13px;
  height: 13px;
}
.split-active #waiting-panel {
  justify-content: flex-end;
  min-height: 34px;
  padding: 3px 10px;
  background: transparent;
}
.split-active #waiting-panel button {
  width: 32px;
  height: 28px;
  padding: 4px;
  border: 0;
  background: #f1f4e9;
}
.split-active #waiting-panel .control-icon {
  width: 18px;
  height: 18px;
}
.split-active #waiting-panel:before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: auto;
  background: #a9b38e;
  border-radius: 50%;
  animation: waiting-pulse 1.5s ease-in-out infinite;
}
@keyframes waiting-pulse {
  50% {
    opacity: 0.25;
  }
}
@media (prefers-reduced-motion: reduce) {
  .split-active #waiting-panel:before {
    animation: none;
  }
}
.split-active.split-horizontal #capture {
  width: 48px;
}
.split-active.split-horizontal .map-header {
  min-height: 34px;
  padding: 4px 10px;
}
.split-active.split-horizontal .compact-consent {
  display: none;
}
.camera-stage.audio-only:after {
  content: "";
}
.session-ended .intro,
.session-ended #live-workspace,
.session-ended .session-heading,
.session-ended .card-action {
  display: none;
}
.session-ended .session {
  margin-top: 12px;
}
.session-ended .ended-panel {
  padding: 26px 20px;
}
@media (max-height: 500px) {
  .split-active .live-controls {
    min-height: 52px;
    padding: 4px 8px;
  }
  .split-active #camera-controls button {
    height: 40px;
    padding: 8px;
  }
  .split-active #capture {
    height: 40px;
    width: 40px;
  }
  .split-active .map-header,
  .split-active.split-horizontal .map-header {
    min-height: 30px;
  }
}
.split-active .map-message:not(.has-error) {
  font-size: 0;
  width: 14px;
  height: 14px;
  padding: 0;
  right: auto;
  bottom: 10px;
  background: transparent;
  border: 2px solid #c9d1ba;
  border-top-color: #788b57;
  border-radius: 50%;
  animation: map-spin 0.9s linear infinite;
}
@keyframes map-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .split-active .map-message:not(.has-error) {
    animation: none;
  }
}
.dialog-head .eyebrow {
  display: none;
}
.dialog-head {
  justify-content: flex-end;
}
.audio-indicator {
  display: none;
}
.camera-stage.audio-only .audio-indicator {
  display: grid;
  position: absolute;
  inset: 0;
  place-items: center;
  color: hsl(var(--brand-ivory));
}
.audio-indicator .control-icon {
  width: 42px;
  height: 42px;
}
.split-active.split-horizontal #capture {
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 50%;
  gap: 0;
}

/* Continuous video/map surface: the separator is an overlay, never a gutter. */
.split-active .live-workspace {
  position: relative;
}
.split-active .map-panel {
  position: relative;
}
.split-active .map-stage {
  margin: 0;
  border-radius: 0;
  min-width: 0;
}
.split-active .map-header,
.split-active.split-horizontal .map-header {
  position: absolute;
  z-index: 4;
  top: 20px;
  left: 20px;
  right: auto;
  min-height: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
}
.split-active .toggle {
  height: 44px;
  gap: 8px;
  border-radius: 12px;
  padding: 0 2px;
  background: #fffffff0;
  box-shadow: 0 1px 6px #25311e18;
}
.split-active .map-tools {
  top: 20px;
  right: 12px;
  gap: 3px;
}
.split-active .map-tools button {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #fffffff0;
  font-size: 20px;
  box-shadow: 0 1px 6px #25311e18;
}
.split-active .attribution {
  font-size: 9px;
  line-height: 1.2;
  padding: 3px 5px;
  background: #ffffffed;
}
.split-active .splitter,
.split-active.split-horizontal .splitter {
  position: absolute;
  z-index: 5;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  gap: 0;
}
.split-active.split-vertical .splitter {
  top: var(--camera-size, 45%);
  left: 0;
  right: 0;
  width: 100%;
  height: 32px;
  transform: translateY(-50%);
  cursor: row-resize;
}
.split-active.split-horizontal .splitter {
  top: 0;
  bottom: 0;
  left: var(--camera-size, 45%);
  width: 32px;
  height: 100%;
  transform: translateX(-50%);
  cursor: col-resize;
}
.split-active .splitter > span {
  opacity: 0;
  background: #f7f9ef;
  border: 1px solid #53644380;
  box-shadow: 0 1px 7px #10200d50;
  transition: opacity 0.15s ease;
  position: relative;
  z-index: 1;
}
.split-active .splitter:before {
  content: "";
  position: absolute;
  opacity: 0;
  background: #ffffffbf;
  box-shadow: 0 0 2px #18231060;
  transition: opacity 0.15s ease;
}
.split-active.split-vertical .splitter:before {
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
}
.split-active.split-horizontal .splitter:before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
}
.split-active .splitter.dragging,
.split-active .splitter:focus-visible {
  background: transparent;
  outline: none;
}
.split-active .splitter.dragging > span,
.split-active .splitter:focus-visible > span,
.split-active .splitter.dragging:before,
.split-active .splitter:focus-visible:before {
  opacity: 1;
}
.split-active .splitter:focus-visible > span {
  border-color: #6c862b;
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.2);
}
@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
  .split-active .splitter:hover > span,
  .split-active .splitter:hover:before {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .split-active .splitter > span,
  .split-active .splitter:before {
    transition: none;
  }
}
.split-active .live-controls {
  min-height: 64px;
  padding: 7px 9px;
}
.split-active #camera-controls button {
  height: 44px;
  padding: 10px;
}
.split-active #session-details {
  width: 44px;
  height: 44px;
}
.split-active #capture,
.split-active.split-horizontal #capture {
  width: 48px;
  height: 48px;
}
.split-active #waiting-panel button {
  width: 44px;
  height: 44px;
  border-radius: 12px;
}
.map-view-switch {
  display: none;
}
.split-active .map-view-switch {
  display: flex;
  position: absolute;
  z-index: 4;
  left: 12px;
  bottom: 24px;
  gap: 3px;
}
.split-active .map-view-switch button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #dbe1d2;
  border-radius: 12px;
  background: #fffffff0;
  color: #435039;
  box-shadow: 0 1px 6px #25311e18;
  cursor: pointer;
}
.split-active .map-view-switch button[aria-pressed="true"] {
  background: hsl(var(--primary));
  border-color: hsl(var(--border));
  color: hsl(var(--primary-foreground));
}
.split-active .map-view-switch button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-height: 400px) {
  .split-active.split-vertical .map-view-switch {
    bottom: 8px;
  }
}

/* Short, wide phone maps keep every 44px control in a single overlay row. */
@media (max-height: 400px) and (min-width: 520px) {
  .split-active.split-vertical .map-view-switch {
    top: 20px;
    bottom: auto;
    left: 12px;
  }
  .split-active.split-vertical .map-header {
    top: 20px;
    left: 174px;
  }
}

/* Status belongs on the video surface, with no reserved header row. */
.split-active .session-heading {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 12px;
  right: 12px;
  min-height: 0;
  height: 20px;
  padding: 0;
  background: transparent;
  color: white;
  pointer-events: none;
}
.split-active .session-heading .status {
  height: 20px;
  padding: 5px;
  background: #1d281ca8;
  border-radius: 20px;
}
.split-active .session-heading .timer {
  display: block;
  min-width: 44px;
  height: 20px;
  padding: 3px 8px;
  border-radius: 20px;
  color: #fff;
  background: #1d281ca8;
  font-size: 12px;
  line-height: 14px;
}
.split-active #local-label {
  display: none;
}

/* Keep the functional entry header compact before joining. */
body:not(.split-active) .masthead {
  height: 56px;
  gap: 16px;
}
body:not(.split-active) .masthead .brand {
  font-size: 30px;
}
@media (max-width: 767px) {
  body:not(.split-active) .masthead {
    height: 48px;
  }
}

/* Waiting actions also float on the video, without another external toolbar. */
.split-active #waiting-panel {
  position: absolute;
  z-index: 4;
  top: 40px;
  right: 12px;
  left: auto;
  width: auto;
  min-height: 44px;
  height: 44px;
  padding: 0;
  gap: 6px;
  background: transparent;
}
.split-active #waiting-panel:before {
  display: none;
}
.split-active.split-horizontal #waiting-panel {
  right: 20px;
}
.split-active #waiting-panel button {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  box-shadow: 0 1px 6px #25311e18;
}

/* The entire card fits the inspection area; actions never scroll out of reach. */
#card-dialog {
  width: min(520px, calc(100vw - 16px));
  height: min(920px, calc(100dvh - 16px));
  max-height: calc(100dvh - 16px);
  padding: 12px;
  border-radius: 18px;
  overflow: hidden;
}
#card-dialog[open] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.card-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: none;
  min-height: 44px;
}
#card-dialog h2 {
  font-size: 17px;
  margin: 0;
}
.card-preview-tools {
  display: flex;
  gap: 4px;
}
.card-preview-tools button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  cursor: pointer;
}
#card-close {
  font-size: 28px;
}
.card-title-editor {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  min-height: 44px;
  border-bottom: 1px solid #dce1d2;
}
.card-title-editor label {
  font-size: 12px;
  color: var(--muted-ink);
  flex: none;
}
#card-title-input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  padding: 9px 0;
}
.card-inspection {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  display: block;
  border-radius: 10px;
  background: #e7ebdf;
}
#card-dialog #card-preview {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  max-height: 100%;
  margin: 0;
  border-radius: 0;
}
#card-dialog.is-zoomed #card-preview {
  width: 1080px;
  height: var(--card-image-height, 1560px);
  max-width: none;
  max-height: none;
  object-fit: fill;
}
.card-preview-footer {
  flex: none;
  padding: 0;
  margin: 0;
}
#card-dialog .dialog-actions {
  margin-top: 4px;
  gap: 8px;
}
#card-dialog .dialog-actions > * {
  min-height: 44px;
}
#card-progress {
  min-height: 18px;
  font-size: 12px;
  line-height: 18px;
  color: var(--muted-ink);
}
#card-dialog[aria-busy="true"] #card-progress:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border: 2px solid #c1cdb1;
  border-top-color: #5e7741;
  border-radius: 50%;
  animation: map-spin 0.9s linear infinite;
}
#card-dialog #share-note {
  margin: 5px 0 0;
  text-align: left;
  font-size: 10px !important;
  line-height: 1.45;
}
#download-card[aria-disabled="true"] {
  opacity: 0.45;
  cursor: wait;
}
#capture[aria-busy="true"] .capture-icon {
  animation: waiting-pulse 1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  #capture[aria-busy="true"] .capture-icon,
  #card-dialog[aria-busy="true"] #card-progress:before {
    animation: none;
  }
}
@media (max-height: 400px) {
  #card-dialog {
    padding: 8px;
    gap: 4px;
    border-radius: 14px;
  }
  .card-title-editor {
    min-height: 36px;
  }
  #card-progress {
    min-height: 15px;
    line-height: 15px;
  }
  #card-dialog .dialog-actions {
    margin-top: 2px;
  }
  .card-preview-header {
    min-height: 44px;
  }
}
#card-dialog {
  position: fixed;
  inset: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  margin: auto;
  max-width: none;
  width: min(
    520px,
    calc(100vw - 16px - env(safe-area-inset-left) - env(safe-area-inset-right))
  );
  height: min(
    920px,
    calc(100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom))
  );
  max-height: calc(
    100dvh - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom)
  );
}
#card-title-input {
  font-size: 16px;
  min-height: 44px;
}
#capture {
  position: relative;
}
#capture[aria-busy="true"]:after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 2px solid hsl(var(--primary-foreground) / 0.35);
  border-top-color: hsl(var(--primary-foreground));
  border-radius: 50%;
  animation: map-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  #capture[aria-busy="true"]:after {
    animation: none;
  }
}
.card-preview-footer {
  display: block;
  color: var(--ink);
  font-size: 12px;
}

/* Short landscape keeps the portrait card tall, with editing/actions beside it. */
@media (max-height: 500px) and (min-width: 520px) {
  #card-dialog[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 200px;
    grid-template-rows: 44px 44px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
  }
  .card-preview-header {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .card-title-editor {
    grid-column: 2;
    grid-row: 2;
    min-width: 0;
  }
  #card-inspection {
    grid-column: 1;
    grid-row: 2 / 4;
    min-width: 0;
    height: 100%;
  }
  .card-preview-footer {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    min-width: 0;
  }
  #card-dialog .dialog-actions > * {
    padding: 10px 8px;
  }
}

/* Follow the visible viewport, including OS keyboard changes after the call ends. */
#card-dialog {
  inset: auto;
  left: calc(
    var(--card-vv-left, 0px) + env(safe-area-inset-left) +
      (
        var(--card-vv-width, 100vw) - env(safe-area-inset-left) -
          env(safe-area-inset-right)
      ) /
      2
  );
  top: calc(
    var(--card-vv-top, 0px) + env(safe-area-inset-top) +
      (
        var(--card-vv-height, 100dvh) - env(safe-area-inset-top) -
          env(safe-area-inset-bottom)
      ) /
      2
  );
  transform: translate(-50%, -50%);
  margin: 0;
  width: min(
    520px,
    calc(
      var(--card-vv-width, 100vw) - 16px - env(safe-area-inset-left) -
        env(safe-area-inset-right)
    )
  );
  height: min(
    920px,
    calc(
      var(--card-vv-height, 100dvh) - 16px - env(safe-area-inset-top) -
        env(safe-area-inset-bottom)
    )
  );
  max-height: calc(
    var(--card-vv-height, 100dvh) - 16px - env(safe-area-inset-top) -
      env(safe-area-inset-bottom)
  );
}
/* Extremely shallow landscape keyboard views keep all actions on one row. */
#card-dialog.keyboard-compact[open] {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px 88px;
  grid-template-rows: 44px minmax(0, 1fr) 18px;
  gap: 4px;
  padding: 8px;
}
.keyboard-compact .card-preview-header {
  grid-column: 3;
  grid-row: 1;
  min-width: 0;
}
.keyboard-compact #card-dialog-title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.keyboard-compact .card-preview-tools {
  gap: 0;
}
.keyboard-compact .card-title-editor {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.keyboard-compact .card-title-editor label {
  display: none;
}
#card-dialog.keyboard-compact #card-inspection {
  grid-column: 1 / -1;
  grid-row: 2;
  min-height: 0;
}
.keyboard-compact .card-preview-footer {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  min-width: 0;
}
#card-dialog.keyboard-compact .dialog-actions {
  margin: 0;
  gap: 4px;
}
#card-dialog.keyboard-compact .dialog-actions > * {
  padding: 8px 4px;
  min-height: 44px;
}
.keyboard-compact #card-progress {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  height: 18px;
}
#card-dialog.keyboard-compact #share-note {
  position: absolute;
  bottom: 8px;
  left: 8px;
  right: 8px;
  max-height: 32px;
  overflow: auto;
  background: var(--paper);
}

/* Quiet map icons keep full touch targets without large visible tiles. */
.split-active .map-tools button,
.split-active .map-view-switch button {
  position: relative;
  isolation: isolate;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 18px;
  color: hsl(var(--card-foreground));
  display: grid;
  place-items: center;
}
.split-active .map-tools button:focus-visible,
.split-active .map-view-switch button:focus-visible {
  box-shadow: 0 0 0 7px hsl(var(--card));
}
.split-active .map-tools button:before,
.split-active .map-view-switch button:before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 30px;
  height: 30px;
  top: 7px;
  left: 7px;
  border: 1px solid hsl(var(--border));
  border-radius: 9px;
  background: hsl(var(--card));
  box-shadow: 0 1px 5px #25311e18;
}
.split-active .map-view-switch button[aria-pressed="true"] {
  background: transparent;
}
.split-active .map-view-switch button[aria-pressed="true"]:before {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}
.split-active .map-view-switch .control-icon {
  width: 17px;
  height: 17px;
}
.split-active .toggle {
  position: relative;
  isolation: isolate;
  gap: 6px;
  padding: 0 6px;
  border-radius: 9px;
  background: transparent;
  box-shadow: none;
  color: hsl(var(--card-foreground));
}
.split-active .toggle:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7px 0;
  border: 1px solid hsl(var(--border));
  border-radius: 9px;
  background: hsl(var(--card));
  box-shadow: 0 1px 5px #25311e18;
}
.split-active .toggle .control-icon {
  width: 17px;
  height: 17px;
}
.split-active .toggle-track {
  width: 30px;
  height: 18px;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--foreground) / 0.65);
}
.split-active .toggle-track:before {
  width: 12px;
  height: 12px;
  background: hsl(var(--foreground));
}
.split-active .toggle input:checked + .toggle-track {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}
.split-active .toggle input:checked + .toggle-track:before {
  transform: translateX(12px);
  background: hsl(var(--primary-foreground));
}
@media (hover: hover) and (pointer: fine) and (not (any-pointer: coarse)) {
  .split-active[data-ui-mode="desktop"] .map-tools,
  .split-active[data-ui-mode="desktop"] .map-view-switch,
  .split-active[data-ui-mode="desktop"] .map-header {
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
  }
  .split-active[data-ui-mode="desktop"] .map-panel:hover .map-tools,
  .split-active[data-ui-mode="desktop"] .map-panel:hover .map-view-switch,
  .split-active[data-ui-mode="desktop"] .map-panel:hover .map-header,
  .split-active[data-ui-mode="desktop"] .map-panel:focus-within .map-tools,
  .split-active[data-ui-mode="desktop"]
    .map-panel:focus-within
    .map-view-switch,
  .split-active[data-ui-mode="desktop"] .map-panel:focus-within .map-header {
    opacity: 1;
    pointer-events: auto;
  }
}
@media (prefers-reduced-motion: reduce) {
  .split-active .map-tools,
  .split-active .map-view-switch,
  .split-active .map-header {
    transition: none;
  }
}

/* Responsive call presentation: a single JS mode drives every active layout. */
.split-active[data-ui-mode="mobile"] .live-workspace {
  flex-direction: column;
}
.split-active[data-ui-mode="tablet"] .live-workspace,
.split-active[data-ui-mode="desktop"] .live-workspace {
  flex-direction: row;
}
.split-active .live-controls {
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  min-height: 64px;
}
.split-active #camera-controls {
  flex: 0 0 auto;
  display: flex;
  gap: 8px;
  max-width: none;
}
.split-active #camera-controls[hidden] {
  display: none;
}
.split-active #camera-controls button,
.split-active #session-details,
.split-active #capture {
  flex: none;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}
.split-active #capture {
  width: 48px;
  height: 48px;
}
.split-active[data-ui-mode="desktop"] .live-controls {
  gap: 12px;
  min-height: 68px;
}
.split-active[data-ui-mode="mobile"] .live-controls {
  gap: 6px;
  padding-inline: 8px;
}
.split-active[data-ui-mode="mobile"] #camera-controls {
  gap: 6px;
}
.split-active[data-ui-mode="tablet"] .live-controls {
  gap: 12px;
  min-height: 72px;
}
.split-active #local-video {
  object-fit: cover;
  background: #171b17;
}
.split-active .remote-wrap {
  top: 40px;
  right: 24px;
  width: clamp(88px, 26%, 170px);
  height: min(28%, 140px);
  max-height: calc(100% - 56px);
}
.split-active[data-ui-mode="mobile"] .remote-wrap {
  width: clamp(80px, 25%, 120px);
  height: min(30%, 110px);
  right: 12px;
  top: 36px;
  max-height: calc(100% - 58px);
}
.split-active[data-ui-mode="desktop"] .remote-wrap {
  width: clamp(120px, 25%, 190px);
  height: min(26%, 160px);
}
.split-active .remote-wrap video {
  object-fit: cover;
  background: #171b17;
}
.video-swap {
  position: absolute;
  z-index: 7;
  top: 40px;
  left: 12px;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 1px solid #ffffff44;
  border-radius: 12px;
  background: #202820b8;
  color: white;
}
.video-swap[hidden] {
  display: none;
}
.split-active[data-video-main="peer"] #remote-wrap,
.split-active .camera-stage[data-video-main="peer"] #remote-wrap {
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  aspect-ratio: auto;
  z-index: 1;
}
.split-active .camera-stage[data-video-main="peer"] #local-video {
  position: absolute;
  top: 40px;
  right: 24px;
  left: auto;
  bottom: auto;
  width: clamp(88px, 26%, 170px);
  height: min(28%, 140px);
  max-height: calc(100% - 56px);
  z-index: 3;
  border: 1px solid #ffffff99;
  border-radius: 10px;
  box-shadow: 0 2px 12px #0004;
}
.split-active[data-ui-mode="mobile"]
  .camera-stage[data-video-main="peer"]
  #local-video {
  width: clamp(80px, 25%, 120px);
  height: min(30%, 110px);
  top: 36px;
  right: 12px;
  max-height: calc(100% - 58px);
}
.split-active[data-ui-mode="desktop"]
  .camera-stage[data-video-main="peer"]
  #local-video {
  width: clamp(120px, 25%, 190px);
  height: min(26%, 160px);
}
.split-active .camera-stage[data-video-main="peer"] #remote-wrap > span {
  display: none;
}
.split-active.split-horizontal #waiting-panel {
  right: 24px;
}
@media (any-pointer: coarse) {
  .split-active.split-vertical .splitter {
    height: 44px;
  }
  .split-active.split-horizontal .splitter {
    width: 44px;
  }
  .split-active.split-horizontal .map-header {
    left: 24px;
  }
}
@media (any-pointer: coarse) and (max-height: 400px) and (min-width: 520px) {
  .split-active[data-ui-mode="mobile"] .map-header {
    left: 174px;
  }
}
body[data-ui-mode="mobile"] #card-dialog {
  border-radius: 18px;
}
body[data-ui-mode="tablet"] #card-dialog {
  width: min(560px, calc(var(--card-vv-width, 100vw) - 24px));
}
body[data-ui-mode="desktop"] #card-dialog {
  width: min(600px, calc(var(--card-vv-width, 100vw) - 32px));
}

/* Wide call controls belong to the video pane; phones retain their bottom dock. */
.split-active[data-ui-mode="tablet"] .session,
.split-active[data-ui-mode="desktop"] .session {
  position: relative;
}
.split-active[data-ui-mode="tablet"] #live-controls,
.split-active[data-ui-mode="desktop"] #live-controls {
  position: absolute;
  z-index: 8;
  left: 0;
  bottom: 0;
  width: var(--camera-size, 48%);
  min-height: 64px;
  height: 64px;
  padding: 8px 12px;
  gap: 8px;
  background: transparent;
  border: 0;
  pointer-events: none;
}
.split-active[data-ui-mode="tablet"] #live-controls:before,
.split-active[data-ui-mode="desktop"] #live-controls:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 4px;
  transform: translateX(-50%);
  width: calc(100% - 16px);
  max-width: 332px;
  height: 56px;
  border-radius: 16px;
  background: #1c241cd9;
}
.split-active[data-ui-mode="tablet"] #live-controls > *,
.split-active[data-ui-mode="desktop"] #live-controls > * {
  pointer-events: auto;
}
.split-active #remote-wrap[role="button"] {
  cursor: pointer;
}
.split-active #remote-wrap:focus-visible {
  outline: 3px solid hsl(var(--primary));
  outline-offset: -3px;
}
@media (any-pointer: coarse) {
  .split-active .map-tools,
  .split-active .map-header,
  .split-active.split-horizontal .map-header {
    top: 24px;
  }
  .split-active[data-ui-mode="mobile"] .map-view-switch {
    bottom: 24px;
  }
}
@media (any-pointer: coarse) and (max-height: 400px) and (min-width: 520px) {
  .split-active[data-ui-mode="mobile"] .map-view-switch {
    top: 24px;
    bottom: auto;
  }
}

#main-video-placeholder {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #c0c9b8;
  pointer-events: none;
}
#main-video-placeholder[hidden] {
  display: none;
}
.split-active .camera-stage[data-peer-video="off"] #remote-video {
  opacity: 0;
}
.split-active .camera-stage[data-peer-video="off"] #remote-wrap {
  background: #242d25;
}
body[data-ui-mode="tablet"] #card-dialog {
  width: min(
    560px,
    calc(
      var(--card-vv-width, 100vw) - 24px - env(safe-area-inset-left) -
        env(safe-area-inset-right)
    )
  );
}
body[data-ui-mode="desktop"] #card-dialog {
  width: min(
    600px,
    calc(
      var(--card-vv-width, 100vw) - 32px - env(safe-area-inset-left) -
        env(safe-area-inset-right)
    )
  );
}

.split-active .camera-stage[data-local-video="off"] #local-video {
  opacity: 0;
}
#card-dialog.keyboard-compact[open] {
  grid-template-columns: minmax(0, 1fr) 148px 88px;
}

/* Keep every wide-toolbar and map target outside the separator's hit strip. */
.split-active.split-horizontal .map-view-switch {
  left: 24px;
}
.split-active[data-ui-mode="tablet"] #live-controls,
.split-active[data-ui-mode="desktop"] #live-controls {
  padding-right: 24px;
}

/* Settings stays legible on the wide video toolbar. */
.split-active[data-ui-mode="tablet"] #session-details,
.split-active[data-ui-mode="desktop"] #session-details {
  color: hsl(var(--brand-ivory));
}

/* Visual-viewport keyboard width, independent of the wider layout viewport. */
#card-dialog.keyboard-narrow[open] {
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-template-rows: 44px 44px minmax(0, 1fr) 18px;
  column-gap: 4px;
  row-gap: 4px;
  padding: 8px;
  overflow: hidden;
}
.keyboard-narrow .card-preview-header {
  grid-column: 2;
  grid-row: 1;
}
.keyboard-narrow .card-preview-tools {
  gap: 0;
  width: 44px;
}
.keyboard-narrow #card-zoom {
  display: none;
}
.keyboard-narrow .card-title-editor {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}
.keyboard-narrow #card-title-input {
  width: 100%;
  min-width: 0;
}
.keyboard-narrow .card-preview-footer {
  grid-column: 1/-1;
  grid-row: 2;
  width: 100%;
  align-self: stretch;
}
#card-dialog.keyboard-narrow .dialog-actions {
  display: flex;
  width: 100%;
  gap: 4px;
}
#card-dialog.keyboard-narrow .dialog-actions > * {
  flex: 1 1 0;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 4px;
}
#card-dialog.keyboard-narrow #card-inspection {
  grid-column: 1/-1;
  grid-row: 3;
  min-width: 0;
  min-height: 0;
}

/* Smaller modes keep map controls discoverable for every input device. */
.split-active:is([data-ui-mode="mobile"], [data-ui-mode="tablet"])
  :is(.map-tools, .map-view-switch, .map-header) {
  opacity: 1;
  pointer-events: auto;
}

/* Standalone scene cards use camera and local-only optional location. */
.scene-only #mute,
.scene-only #waiting-panel,
.scene-only #invite,
.scene-only #network-note,
.scene-only .session-heading {
  display: none !important;
}
.scene-only:not(.scene-has-map) #map {
  visibility: hidden;
}
.scene-only:not(.scene-has-map) #map-message {
  display: none;
}
.scene-only:not(.scene-has-map) .attribution {
  display: none;
}
.card-options {
  position: relative;
  flex: none;
  min-width: 0;
}
.card-options summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 44px;
  border: 1px solid #d9dfcf;
  border-radius: 10px;
  background: hsl(var(--secondary));
  font-size: 14px;
  color: hsl(var(--foreground));
}
.card-options summary::-webkit-details-marker {
  display: none;
}
.card-options summary:after {
  content: "⌄";
  margin-left: 12px;
}
.card-options-body {
  position: absolute;
  z-index: 12;
  bottom: 48px;
  left: 0;
  right: 0;
  padding: 8px;
  border: 1px solid #cbd6bd;
  border-radius: 12px;
  background: hsl(var(--background));
  box-shadow: 0 4px 24px #24341c33;
  max-height: calc(var(--card-vv-height, 100dvh) - 64px);
  overflow: auto;
}
.card-choice {
  display: flex;
  gap: 4px;
}
.card-choice + .card-choice {
  margin-top: 4px;
}
.card-choice button {
  flex: 1 1 0;
  min-width: 0;
  min-height: 44px;
  padding: 4px;
  font-size: 12px;
  border: 1px solid #d9dfcf;
  border-radius: 8px;
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
}
.card-choice button[aria-pressed="true"] {
  background: hsl(var(--primary));
  border-color: hsl(var(--border));
}
#card-preview[hidden] {
  display: none;
}
@media (max-height: 500px) and (min-width: 520px) {
  #card-dialog[open]:not(.keyboard-compact) {
    grid-template-rows: 44px 44px 44px minmax(0, 1fr);
  }
  #card-dialog:not(.keyboard-compact) #card-options {
    grid-column: 2;
    grid-row: 3;
  }
  #card-dialog:not(.keyboard-compact) #card-inspection {
    grid-row: 2/5;
  }
  #card-dialog:not(.keyboard-compact) .card-preview-footer {
    grid-row: 4;
  }
}
#card-dialog.keyboard-compact:not(.keyboard-narrow)[open] {
  grid-template-rows: 44px 44px minmax(0, 1fr) 18px;
}
.keyboard-compact:not(.keyboard-narrow) #card-options {
  grid-column: 1/-1;
  grid-row: 2;
}
#card-dialog.keyboard-compact:not(.keyboard-narrow) #card-inspection {
  grid-row: 3;
}
#card-dialog.keyboard-narrow[open] {
  grid-template-rows: 44px 44px 44px minmax(0, 1fr) 18px;
}
.keyboard-narrow #card-options {
  grid-column: 1/-1;
  grid-row: 3;
}
#card-dialog.keyboard-narrow #card-inspection {
  grid-row: 4;
}

.scene-preparing
  #camera-empty
  > :is(input, button, a):not(#scene-mode):not(#scene-cancel) {
  display: none;
}
#card-narrow-options {
  display: none;
}
.keyboard-narrow #card-options {
  display: none;
}
.keyboard-narrow #card-narrow-options {
  display: flex;
  gap: 4px;
  grid-column: 1/-1;
  grid-row: 2;
  min-width: 0;
}
#card-narrow-options select {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  font-size: 16px;
  border: 1px solid #cbd6bd;
  border-radius: 8px;
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
}
.keyboard-narrow .card-preview-footer {
  grid-row: 3;
}

.scene-only #map-view-peer,
.scene-only #map-view-both {
  display: none;
}

#reopen-scene-card {
  min-height: 44px;
}

/* Open card choices use preview space, never cover the essential controls. */
.card-options-body {
  position: static;
  max-height: none;
  margin-top: 4px;
  box-shadow: none;
}
@media (max-height: 500px) and (min-width: 520px) {
  #card-dialog:not(.keyboard-compact) #card-options {
    position: static;
  }
  #card-dialog:not(.keyboard-compact) .card-options-body {
    position: absolute;
    left: 12px;
    right: 226px;
    top: 60px;
    bottom: auto;
    max-height: calc(var(--card-vv-height, 100dvh) - 92px);
    margin: 0;
    overflow: auto;
    box-shadow: 0 4px 18px #24341c26;
  }
}
.keyboard-compact #card-options {
  display: none;
}
.keyboard-compact #card-narrow-options {
  display: flex;
  gap: 4px;
  grid-column: 1/-1;
  grid-row: 2;
  min-width: 0;
}

/* Permission-free entry is content-sized; live video geometry begins only after participation. */
body:not(.session-active):not(.session-ended) .shell {
  max-width: 640px;
  padding: 0 20px;
}
body:not(.session-active):not(.session-ended) .session {
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}
body:not(.session-active):not(.session-ended)
  :is(
    #live-workspace,
    #session-heading,
    .card-action,
    #live-controls,
    #network-note
  ) {
  display: none;
}
#entry-panel {
  padding: 40px 0 max(32px, env(safe-area-inset-bottom));
}
#entry-panel .entry-content {
  position: static;
  inset: auto;
  min-height: 0;
  height: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
#entry-panel h2 {
  font-size: 24px;
  margin: 0;
  grid-column: 1 / -1;
}
#entry-panel p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 16px;
  grid-column: 1 / -1;
  color: var(--muted-ink);
}
#entry-panel :is(button, a, input, summary) {
  min-height: 48px;
  font-size: 16px;
  border-radius: 6px;
}
#entry-panel #create-room {
  grid-column: 1;
  grid-row: 3;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
#entry-panel #scene-mode {
  grid-column: 2;
  grid-row: 3;
}
#entry-panel #invite-options {
  grid-column: 1 / -1;
  grid-row: 4;
}
#entry-panel summary {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: var(--muted-ink);
  font-size: 14px;
}
#entry-panel #host-name {
  width: 100%;
  max-width: none;
  background: hsl(var(--card));
  border-color: var(--line);
  color: var(--ink);
  font-size: 16px;
}
#entry-panel #reopen-scene-card {
  grid-column: 1 / -1;
}
#entry-panel
  :is(
    #enter,
    #audio-only,
    #decline,
    #retry-invitation,
    #new-invitation,
    #scene-cancel
  ) {
  grid-column: 1 / -1;
}
#entry-panel .primary {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
}
body:not(.split-active) .masthead {
  height: 56px;
  border-bottom: 1px solid var(--line);
}
body:not(.split-active) .masthead .brand {
  font-size: 22px;
  letter-spacing: -0.04em;
}
body:not(.split-active) #invite {
  display: none;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline-color: hsl(var(--ring));
}
@media (max-width: 767px) {
  #entry-panel .entry-content {
    grid-template-columns: 1fr;
  }
  #entry-panel #create-room {
    grid-column: 1;
    grid-row: 3;
  }
  #entry-panel #scene-mode {
    grid-column: 1;
    grid-row: 4;
  }
  #entry-panel #invite-options {
    grid-row: 5;
  }
}

/* Shared Habitus surfaces and compact initial choice hierarchy. */
body[data-entry-kind="landing"] #entry-panel .entry-content :is(h2, p) {
  display: none;
}
body[data-entry-kind="landing"].scene-preparing #entry-panel .scene-location-disclosure {
  display: block;
}
#entry-panel .entry-content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start;
}
#entry-panel
  :is(
    h2,
    p,
    #invite-options,
    #reopen-scene-card,
    #enter,
    #audio-only,
    #decline,
    #retry-invitation,
    #new-invitation,
    #scene-cancel
  ) {
  width: 100%;
}
#entry-panel :is(#create-room, #scene-mode) {
  width: calc(50% - 6px);
}
#entry-panel #create-room {
  order: 1;
}
#entry-panel #scene-mode {
  order: 2;
}
#entry-panel #invite-options {
  order: 3;
}
#entry-panel #reopen-scene-card {
  order: 4;
}
#entry-panel
  :is(
    #enter,
    #audio-only,
    #decline,
    #retry-invitation,
    #new-invitation,
    #scene-cancel
  ) {
  order: 5;
}
.scene-preparing #invite-options {
  display: none;
}
.primary,
.capture {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.secondary {
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
.map-view-switch button[aria-pressed="true"],
.card-choice button[aria-pressed="true"] {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}
.toggle-track {
  background: hsl(var(--muted));
}
.toggle input:checked + .toggle-track {
  background: hsl(var(--primary));
}
dialog {
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border-color: hsl(var(--border));
}
#card-dialog,
#details-dialog,
#invite-dialog {
  border-radius: 8px;
}
@media (max-width: 767px) {
  #entry-panel :is(#create-room, #scene-mode) {
    width: 100%;
  }
}

/* A scene shows the live picture edge to edge. The card crop is marked on top of it: the
   overlay is the crop rectangle (it may extend past the stage) and its shadow dims the rest. */
#scene-frame-overlay {
  display: none;
}
.scene-only #camera-panel #local-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene-only #scene-frame-overlay {
  display: block;
  position: absolute;
  left: var(--scene-frame-left, 0px);
  top: var(--scene-frame-top, 0px);
  width: var(--scene-frame-width, 100%);
  height: var(--scene-frame-height, 100%);
  pointer-events: none;
  z-index: 6;
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.42), inset 0 0 0 1px rgb(255 255 255 / 0.55);
}
#scene-frame-title {
  color: white;
  background: rgba(14, 22, 48, 0.66);
  border-radius: var(--scene-title-radius);
  padding: var(--scene-title-pad-y) var(--scene-title-pad-x);
  font-size: var(--scene-title-font);
  font-weight: 600;
  line-height: 1;
}
#scene-frame-title {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--scene-title-font) !important;
}
#card-fit-select {
  min-width: 0;
}
.scene-only .video-top {
  display: none;
}


/* Location recovery is separate from map-tile loading and never blocks controls. */
.location-status {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 80px;
  max-width: 360px;
  padding: 7px 9px;
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 1.4;
  pointer-events: none;
}
.map-stage:has(#location-status:not([hidden])) .map-message {
  bottom: 126px;
}

/* Short landscape maps put their controls on the top row. */
@media (max-height: 400px) and (min-width: 520px) {
  .location-status {
    bottom: 26px;
  }
  .map-stage:has(#location-status:not([hidden])) .map-message {
    bottom: 72px;
  }
}

.scene-location-disclosure {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 1.5;
}
body[data-entry-kind="invitation"] .scene-location-disclosure {
  display: none;
}
/* Adjacent zoom targets share one compact surface. */
.map-tools,
.split-active .map-tools {
  right: 8px;
  gap: 0;
  flex-direction: row;
  border: 1px solid hsl(var(--border));
  border-radius: 9px;
  background: hsl(var(--card));
  overflow: hidden;
}
.map-tools button,
.split-active .map-tools button {
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.split-active .map-tools button:before {
  content: none;
}
#zoom-out {
  border-left: 1px solid hsl(var(--border));
}
.map-tools button:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: -3px;
}


.call-location-disclosure {
  color: hsl(var(--muted-foreground));
  font-size: 12px;
  line-height: 1.5;
}

#card-retry {
  width: 100%;
  min-height: 44px;
  margin: 4px 0;
}

/* The two annotation tools stay visible above the map on every layout. */
.map-markup-tools {
  position: absolute;
  z-index: 5;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  border: 1px solid hsl(var(--border));
  border-radius: 9px;
  background: hsl(var(--card));
  overflow: hidden;
}
.map-markup-tools button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: hsl(var(--foreground));
  transition: background 150ms, color 150ms;
  padding: 0;
}
.map-markup-tools button + button { border-left: 1px solid hsl(var(--border)); }
.map-markup-tools button[aria-pressed="true"] { background: hsl(var(--secondary)); color: hsl(var(--primary)); }
.map-markup-tools button:hover:not(:disabled) { background: hsl(var(--muted)); }
.map-markup-tools button:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -3px; }
#map:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -3px; }
/* The visible countdown lives in the shutter button; this is only the live region. */
.capture-countdown {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.capture-countdown[hidden] { display: none; }

#map-markup-help {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The hero drawing itself is shared: see hero-motion.css. Here it only follows the entry state. */
#entry-panel .hero-motion { max-width: 420px; margin: 0 auto 20px; }
body:not([data-entry-kind="landing"]) #entry-panel .hero-motion { display: none; }

/* Map overlays: the view switch is one surface like the zoom and markup groups. */
.split-active .map-view-switch {
  gap: 0;
  border: 1px solid hsl(var(--border));
  border-radius: 9px;
  background: hsl(var(--card));
  overflow: hidden;
}
.split-active .map-view-switch button {
  border-radius: 0;
}
.split-active .map-view-switch button:before {
  content: none;
}
.split-active .map-view-switch button + button {
  border-left: 1px solid hsl(var(--border));
}
.split-active .map-view-switch button[aria-pressed="true"] {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.split-active .map-view-switch button:focus-visible {
  box-shadow: none;
  outline: 2px solid hsl(var(--ring));
  outline-offset: -3px;
}

/* Drawing tools sit on the zoom group's row in every mode (same top as .map-tools). */
.split-active .map-markup-tools {
  top: 20px;
}
@media (max-height: 500px) {
  .split-active .map-markup-tools {
    top: 5px;
  }
}
@media (any-pointer: coarse) {
  .split-active .map-markup-tools {
    top: 24px;
  }
}

/* Phones: drawing tools and zoom share one row below the splitter's 44px hit strip. */
.split-active[data-ui-mode="mobile"] .map-markup-tools,
.split-active[data-ui-mode="mobile"] .map-tools {
  top: 24px;
}
.split-active[data-ui-mode="mobile"] .map-tools {
  right: 8px;
}

/* Portrait phones keep the map visible: compact surfaces (36px buttons, 38px
   groups) whose touch targets still reach 44px through an invisible ::after, a
   12px inset, drawing tools left / zoom right, the view switch above the credit
   line, and no view switch while alone and centered (app.js sets .is-idle). */
@media (max-width: 519px) {
  .split-active[data-ui-mode="mobile"]
    :is(.map-markup-tools, .map-tools, .map-view-switch) {
    overflow: visible;
    border-radius: 8px;
    box-shadow: 0 1px 4px #25311e26;
  }
  .split-active[data-ui-mode="mobile"]
    :is(.map-markup-tools, .map-tools, .map-view-switch)
    button {
    position: relative;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }
  .split-active[data-ui-mode="mobile"]
    :is(.map-markup-tools, .map-tools, .map-view-switch)
    button::after {
    content: "";
    position: absolute;
    inset: -4px;
  }
  /* The 1px divider sits outside the padding box the ::after is measured from. */
  .split-active[data-ui-mode="mobile"]
    :is(.map-markup-tools, .map-tools, .map-view-switch)
    button
    + button::after {
    left: -5px;
  }
  .split-active[data-ui-mode="mobile"]
    :is(.map-markup-tools, .map-tools, .map-view-switch)
    button:first-child {
    border-radius: 7px 0 0 7px;
  }
  .split-active[data-ui-mode="mobile"]
    :is(.map-markup-tools, .map-tools, .map-view-switch)
    button:last-child {
    border-radius: 0 7px 7px 0;
  }
  .split-active[data-ui-mode="mobile"] :is(.map-markup-tools, .map-view-switch) svg {
    width: 20px;
    height: 20px;
  }
  .split-active[data-ui-mode="mobile"] .map-tools button {
    font-size: 20px;
  }
  .split-active[data-ui-mode="mobile"] .map-markup-tools,
  .split-active[data-ui-mode="mobile"] .map-tools {
    top: 28px;
  }
  .split-active[data-ui-mode="mobile"] .map-markup-tools {
    left: 12px;
    transform: none;
  }
  .split-active[data-ui-mode="mobile"] .map-tools {
    right: 12px;
  }
  .split-active[data-ui-mode="mobile"] .map-view-switch {
    left: 12px;
    bottom: 28px;
  }
  .split-active[data-ui-mode="mobile"] .map-view-switch.is-idle {
    display: none;
  }
}

/* Phone dock by role: [camera flip, camera, mic] — [capture] — [leave, settings].
   The invisible ::after keeps both sides the same width so capture sits centered;
   it is the first thing to give way on narrow screens. */
.split-active[data-ui-mode="mobile"] #live-controls {
  justify-content: flex-start;
  gap: 4px;
  padding-inline: 8px;
}
.split-active[data-ui-mode="mobile"] #camera-controls:not([hidden]) {
  display: contents;
}
.split-active[data-ui-mode="mobile"] #live-controls::after {
  content: "";
  order: 5;
  flex: 0 1000 44px;
  min-width: 0;
  height: 44px;
}
.split-active[data-ui-mode="mobile"] #switch-camera {
  order: 1;
}
.split-active[data-ui-mode="mobile"] #camera-toggle {
  order: 2;
}
.split-active[data-ui-mode="mobile"] #mute {
  order: 3;
}
.split-active[data-ui-mode="mobile"] #capture {
  order: 4;
  margin-inline: auto;
}
.split-active[data-ui-mode="mobile"] #leave {
  order: 6;
}
.split-active[data-ui-mode="mobile"] #session-details {
  order: 7;
}
@media (max-width: 340px) {
  .split-active[data-ui-mode="mobile"] #live-controls {
    gap: 2px;
  }
}
@media (max-width: 299px) {
  .split-active[data-ui-mode="mobile"] #live-controls {
    padding-inline: 4px;
  }
  .split-active[data-ui-mode="mobile"] #live-controls::after {
    min-width: 12px;
  }
  .split-active[data-ui-mode="mobile"] #capture {
    width: 44px;
    height: 44px;
  }
  .split-active[data-ui-mode="mobile"] :is(#camera-controls button, #session-details) {
    flex: 0 1 44px;
    min-width: 0;
  }
}

/* ---- UX audit round (2026-10-04) ---- */

/* Camera stage: the live picture always fills the stage (cover), so there are no empty bars. */
.camera-stage { isolation: isolate; }
.split-active #local-video,
.split-active .remote-wrap video,
.scene-only #camera-panel #local-video { background: #171b17; }

/* Countdown: the number sits inside the shutter button; the view only gets a quiet frame pulse. */
#capture .capture-count { display: none; }
#capture[data-count] .capture-count {
  display: block;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
#capture[data-count] .capture-icon { animation: none; }
#capture[data-count] .capture-icon svg { display: none; }
#camera-panel[data-counting]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border: 3px solid rgb(255 255 255 / 0.85);
  pointer-events: none;
  animation: capture-frame-pulse 1s ease-in-out infinite;
}
.scene-only #camera-panel[data-counting] #scene-frame-overlay {
  box-shadow: 0 0 0 100vmax rgb(0 0 0 / 0.42), inset 0 0 0 3px rgb(255 255 255 / 0.9);
}
@keyframes capture-frame-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  #camera-panel[data-counting]::after { animation: none; }
}

/* Secondary text actions were still dark-theme pale green on the light page. */
#entry-panel .text-button {
  color: var(--muted-ink);
  font-size: 14px;
  text-underline-offset: 3px;
}

/* Entering the live view eases in instead of cutting. */
@keyframes session-in {
  from { opacity: 0; transform: translateY(10px) scale(0.992); }
  to { opacity: 1; transform: none; }
}
.split-active .session { animation: session-in 280ms cubic-bezier(0.22, 0.8, 0.3, 1) both; }
@keyframes layout-switch { from { opacity: 0.35; } to { opacity: 1; } }
.split-active .live-workspace.is-switching { animation: layout-switch 220ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .split-active .session,
  .split-active .live-workspace.is-switching { animation: none; }
}

/* Camera preparing: keep the landing composition and show progress on the button itself. */
.scene-preparing #scene-mode:disabled { position: relative; }
.scene-preparing #scene-mode:disabled::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 10px;
  vertical-align: -2px;
  border: 2px solid hsl(var(--muted-foreground) / 0.35);
  border-top-color: hsl(var(--foreground));
  border-radius: 50%;
  animation: map-spin 0.9s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .scene-preparing #scene-mode:disabled::after { animation: none; }
}

/* Ended screen: infrastructure notes are not for the visitor. */
.session-ended .network-note { display: none; }

/* Phone on its side: video | map | vertical button rail along the right edge. */
body.split-active[data-rail="on"] .session { padding-right: 64px; }
body.split-active[data-rail="on"] #live-controls {
  left: auto;
  right: 0;
  top: 0;
  bottom: 0;
  width: 64px;
  height: auto;
  min-height: 0;
  padding: 8px 0;
  gap: 8px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: hsl(var(--card));
  border-left: 1px solid hsl(var(--border));
  border-radius: 0;
}
body.split-active[data-rail="on"] #live-controls:before { content: none; }
body.split-active[data-rail="on"] #camera-controls { display: contents; }
body.split-active[data-rail="on"] #camera-controls[hidden] { display: none; }
body.split-active[data-rail="on"] #switch-camera { order: 1; }
body.split-active[data-rail="on"] #camera-toggle { order: 2; }
body.split-active[data-rail="on"] #mute { order: 3; }
body.split-active[data-rail="on"] #capture { order: 4; margin-block: auto; }
body.split-active[data-rail="on"] #leave { order: 5; }
body.split-active[data-rail="on"] #session-details { order: 6; color: hsl(var(--foreground)); }

/* Very short landscape (small phones, toolbars, page zoom): six buttons still fit the rail. */
@media (max-height: 339px) {
  body.split-active[data-rail="on"] #live-controls { gap: 6px; padding: 6px 0; }
  body.split-active[data-rail="on"] #camera-controls button,
  body.split-active[data-rail="on"] #session-details {
    width: 38px;
    height: 38px;
    min-width: 38px;
    min-height: 38px;
    padding: 7px;
  }
  body.split-active[data-rail="on"] #capture {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    padding: 8px;
  }
  body.split-active[data-rail="on"] #capture[data-count] .capture-count { font-size: 18px; }
}

/* Landscape rail: the map pane is narrow, so the drawing tools sit at the left (clear of the
   splitter strip) and the zoom group at the right instead of both crowding the centre. */
body.split-active[data-rail="on"] .map-markup-tools {
  left: 24px;
  transform: none;
}

/* Phones (portrait stack up to 519px, and the landscape rail): the drawing tools and the zoom
   group are a little smaller and sit higher on the map. The 32px buttons keep a 44px touch target
   through an invisible ::after. They also stack above the splitter's invisible drag strip, so the
   top of each button is never swallowed by it. */
body.split-active[data-rail="on"] :is(.map-markup-tools, .map-tools) { top: 14px; z-index: 6; overflow: visible; border-radius: 8px; box-shadow: 0 1px 4px #25311e26; }
body.split-active[data-rail="on"] :is(.map-markup-tools, .map-tools) button { position: relative; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; border-radius: 0; }
body.split-active[data-rail="on"] :is(.map-markup-tools, .map-tools) button:first-child { border-radius: 7px 0 0 7px; }
body.split-active[data-rail="on"] :is(.map-markup-tools, .map-tools) button:last-child { border-radius: 0 7px 7px 0; }
body.split-active[data-rail="on"] :is(.map-markup-tools, .map-tools) button::after { content: ""; position: absolute; inset: -6px; }
body.split-active[data-rail="on"] :is(.map-markup-tools, .map-tools) button + button::after { left: -7px; }
body.split-active[data-rail="on"] :is(.map-markup-tools, .map-tools) svg { width: 18px; height: 18px; }
body.split-active[data-rail="on"] .map-tools button { font-size: 18px; }
body.split-active[data-rail="on"] .map-tools { right: 12px; }
@media (max-width: 519px) {
  .split-active[data-ui-mode="mobile"] :is(.map-markup-tools, .map-tools) { top: 14px; z-index: 6; overflow: visible; border-radius: 8px; box-shadow: 0 1px 4px #25311e26; }
  .split-active[data-ui-mode="mobile"] :is(.map-markup-tools, .map-tools) button { position: relative; width: 32px; height: 32px; min-width: 32px; min-height: 32px; padding: 0; border-radius: 0; }
  .split-active[data-ui-mode="mobile"] :is(.map-markup-tools, .map-tools) button:first-child { border-radius: 7px 0 0 7px; }
  .split-active[data-ui-mode="mobile"] :is(.map-markup-tools, .map-tools) button:last-child { border-radius: 0 7px 7px 0; }
  .split-active[data-ui-mode="mobile"] :is(.map-markup-tools, .map-tools) button::after { content: ""; position: absolute; inset: -6px; }
  .split-active[data-ui-mode="mobile"] :is(.map-markup-tools, .map-tools) button + button::after { left: -7px; }
  .split-active[data-ui-mode="mobile"] :is(.map-markup-tools, .map-tools) svg { width: 18px; height: 18px; }
  .split-active[data-ui-mode="mobile"] .map-tools button { font-size: 18px; }
  .split-active[data-ui-mode="mobile"] .map-markup-tools { left: 12px; transform: none; }
  .split-active[data-ui-mode="mobile"] .map-tools { right: 12px; }
}

/* ---- Scene dock and title dropdown (2026-10-05) ----
   In a scene the card shutter is the centre of the bottom row and rises out of it over the
   map; the camera-off and settings buttons are gone. The title chip on the picture is the way
   into the title, the location notice and the coordinates. Calls keep their existing dock. */
.scene-only #camera-toggle,
.scene-only #session-details { display: none !important; }
.leave-close-icon { display: none; }
.scene-only #leave .leave-hangup-icon { display: none; }
.scene-only #leave .leave-close-icon { display: block; }
.scene-only #leave {
  background: hsl(var(--secondary)) !important;
  color: hsl(var(--secondary-foreground)) !important;
}

/* The chip stays a faithful preview of the card title; the pen beside it is only the way in. */
.scene-only #scene-title-button {
  position: absolute;
  left: var(--scene-chip-left, 0px);
  top: var(--scene-chip-top, 0px);
  max-width: var(--scene-chip-room, 100%);
  display: flex;
  align-items: center;
  gap: calc(var(--scene-title-font, 14px) * 0.45);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: white;
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}
.scene-only #scene-title-button::before { content: ""; position: absolute; inset: -14px -10px; }
.scene-title-pen {
  flex: none;
  display: grid;
  place-items: center;
  width: calc(var(--scene-title-font, 14px) * 1.7);
  height: calc(var(--scene-title-font, 14px) * 1.7);
  border-radius: 50%;
  background: rgba(14, 22, 48, 0.66);
  color: white;
}
.scene-title-pen svg { width: 58%; height: 58%; }
#scene-title-button:focus-visible { outline: none; }
#scene-title-button:focus-visible :is(#scene-frame-title, .scene-title-pen) { box-shadow: 0 0 0 3px white; }
.scene-only #camera-panel[data-counting] #scene-title-button { pointer-events: none; }

/* The shutter: larger, ringed in the card colour, centred, overlapping the map above it. */
body.scene-only:not([data-rail="on"]) #capture {
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translateX(-50%);
  width: 76px;
  height: 76px;
  min-width: 76px;
  min-height: 76px;
  padding: 0;
  z-index: 3;
  border: 4px solid hsl(var(--card));
  box-shadow: 0 0 0 1.5px hsl(var(--primary)), 0 10px 22px -6px hsl(var(--primary) / 0.5);
}
body.scene-only:not([data-rail="on"]) #capture .control-icon { width: 38px; height: 38px; }
body.scene-only[data-ui-mode="mobile"]:not([data-rail="on"]) #live-controls {
  position: relative;
  z-index: 7;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  justify-items: center;
  gap: 0;
  min-height: 88px;
  padding: 12px 16px 14px;
}
body.scene-only[data-ui-mode="mobile"]:not([data-rail="on"]) #live-controls::after { content: none; }
body.scene-only[data-ui-mode="mobile"]:not([data-rail="on"]) #switch-camera { grid-column: 1; grid-row: 1; }
body.scene-only[data-ui-mode="mobile"]:not([data-rail="on"]) #leave { grid-column: 2; grid-row: 1; }
body.scene-only:not([data-rail="on"]) #camera-controls:not([hidden]) { display: contents; }
body.scene-only:not([data-rail="on"]) #camera-controls button {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  flex: none;
}
/* Wide layouts: the pill stays centred on the video pane, like the call dock, so dragging the
   video | map divider never moves the buttons. The shutter rises out of the pill over the picture. */
body.scene-only:is([data-ui-mode="tablet"], [data-ui-mode="desktop"]):not([data-rail="on"]) #live-controls {
  min-height: 56px;
  height: 56px;
  bottom: 18px;
  padding: 0;
  display: grid;
  grid-template-columns: 140px 140px;
  justify-content: center;
  align-items: center;
  justify-items: center;
  gap: 0;
}
body.scene-only:is([data-ui-mode="tablet"], [data-ui-mode="desktop"]):not([data-rail="on"]) #live-controls:before {
  bottom: 0;
  width: 280px;
  max-width: calc(100% - 16px);
  height: 56px;
  border-radius: 28px;
}
body.scene-only:is([data-ui-mode="tablet"], [data-ui-mode="desktop"]):not([data-rail="on"]) #switch-camera { grid-column: 1; grid-row: 1; }
body.scene-only:is([data-ui-mode="tablet"], [data-ui-mode="desktop"]):not([data-rail="on"]) #leave { grid-column: 2; grid-row: 1; }

/* Title dropdown: the settings sheet, hung under the title chip instead of centred. */
#details-dialog.is-dropdown {
  position: fixed;
  inset: auto;
  margin: 0;
  left: var(--drop-left, 12px);
  top: var(--drop-top, 64px);
  width: min(340px, calc(100vw - 16px));
  max-height: var(--drop-room, 60dvh);
  padding: 12px 16px 16px;
  border-radius: 14px;
  box-shadow: 0 18px 40px -12px rgb(10 16 32 / 0.45);
}
#details-dialog.is-dropdown::backdrop { background: rgb(0 0 0 / 0.18); backdrop-filter: none; }
#details-dialog.is-dropdown .dialog-head { position: absolute; top: 8px; right: 8px; z-index: 1; }
#details-dialog.is-dropdown .dialog-head .eyebrow,
#details-dialog.is-dropdown h2,
#details-dialog.is-dropdown #session-details-content .card-action label span { display: none; }
#details-dialog.is-dropdown #session-details-content .card-action { padding-top: 6px; }
#details-dialog.is-dropdown #place-label { margin-top: 8px; }
.scene-only #session-details-content .coordinates > span:nth-child(2) { display: none; }

/* Answering by link: a note stands where the camera would be (the photo is in the chat) and the
   shutter sends the answer. Camera-only controls and the title pen step aside. */
.reply-card #local-video,
.reply-card #switch-camera,
.reply-card #camera-toggle,
.reply-card #camera-wide,
.reply-card #camera-zoom-reset,
.reply-card #scene-frame-overlay,
.reply-card .audio-indicator {
  display: none !important;
}
.reply-card #map-view-peer,
.reply-card #map-view-both {
  display: revert;
}


/* Shared card viewer. Edge to edge like a photo viewer: the main picture fills the whole screen
   (no frame, no dock band), controls float on it, and nothing shows as dead black — the photo's
   letterbox is filled with a blurred copy of itself, and the small window takes the shape of what
   it holds. Close sits top-left as in any viewer; the one action, "Send reply", bottom centre. */
.reply-card .session {
  position: fixed !important;
  inset: 0 !important;
  z-index: 20;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
  height: 100dvh !important;
  background: #0d0f0d;
}
.reply-card .live-workspace {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  height: auto !important;
  border-radius: 0 !important;
}
.reply-card #splitter,
.reply-card .map-header,
.reply-card .consent,
.reply-card .card-action > label,
.reply-card #place-label {
  display: none !important;
}
.reply-card #camera-panel,
.reply-card #map-panel {
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  z-index: 1;
}
.reply-card #camera-panel { background: #0d0f0d; }
.reply-photo,
.reply-photo-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.reply-photo { object-fit: contain; }
/* Ambient fill: the same photo, tiny and blurred, behind the sharp one. */
.reply-photo-bg {
  object-fit: cover;
  filter: blur(28px) saturate(1.15) brightness(0.62);
  transform: scale(1.15);
}
.reply-expiry {
  position: absolute;
  z-index: 7;
  top: calc(env(safe-area-inset-top, 0px) + 14px);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(10, 14, 12, 0.52);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 13px;
  white-space: nowrap;
}
.reply-expiry a {
  color: #d9f99d;
  font-weight: 700;
}
/* The small window: bottom-right, clear of the send button. */
.reply-card:not(.reply-map-main) #map-panel,
.reply-card.reply-map-main #camera-panel {
  inset: auto 14px calc(env(safe-area-inset-bottom, 0px) + 96px) auto !important;
  height: auto !important;
  z-index: 8;
  border-radius: 16px !important;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.reply-card:not(.reply-map-main) #map-panel {
  width: min(34vw, 200px) !important;
  aspect-ratio: 1 / 1;
}
/* The photo as the small window keeps its own 4:3 shape and fills it (no letterbox). */
.reply-card.reply-map-main #camera-panel {
  width: min(46vw, 260px) !important;
  aspect-ratio: 4 / 3;
}
.reply-card.reply-map-main .reply-photo { object-fit: cover; }
.reply-card.reply-map-main .reply-photo-bg { display: none; }
.reply-card:not(.reply-map-main) #map-panel > *,
.reply-card.reply-map-main #camera-panel > :not(.reply-photo) {
  pointer-events: none;
}
.reply-card:not(.reply-map-main) #map-panel :is(.map-markup-tools, .map-tools, .map-view-switch, .location-status, .attribution, #heading-enable),
.reply-card.reply-map-main #camera-panel .reply-expiry {
  display: none !important;
}
/* Floating controls. splitter.js moves the shutter and the camera buttons into #live-controls,
   the footer band; in the viewer that band becomes a transparent overlay with a soft scrim. */
.reply-card .live-controls {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  z-index: 25;
  display: flex !important;
  justify-content: center !important;
  align-items: center;
  min-height: 0 !important;
  width: auto !important;
  max-width: none !important;
  transform: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 32px 16px calc(env(safe-area-inset-bottom, 0px) + 18px) !important;
  border: 0 !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0)) !important;
  pointer-events: none;
}
.reply-card .live-controls > :not(#capture):not(#camera-controls),
.reply-card #camera-controls > :not(#leave),
.reply-card .card-action {
  display: none !important;
}
.reply-card #camera-controls {
  display: contents !important;
}
/* Close: a glass circle top-left, out of the way of every other control. */
.reply-card #leave {
  pointer-events: auto;
  position: fixed !important;
  top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  left: 12px !important;
  z-index: 30;
  width: 40px !important;
  height: 40px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 9px !important;
  border-radius: 50% !important;
  background: rgba(10, 14, 12, 0.52) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff !important;
  border: 0 !important;
}
/* With the map as main, its markup tools step down below the close button. */
.reply-card.reply-map-main .map-markup-tools {
  top: calc(env(safe-area-inset-top, 0px) + 64px) !important;
}
.reply-card .map-view-switch {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 92px) !important;
}
.reply-card #capture {
  pointer-events: auto;
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  width: auto !important;
  height: 50px !important;
  min-height: 0 !important;
  max-height: 50px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 22px 0 18px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: #d9f99d !important;
  color: #1a2e05 !important;
  font-size: 16px;
  font-weight: 700;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35) !important;
}
.reply-card #capture::before,
.reply-card #capture::after { display: none !important; }
.reply-card #capture .capture-icon {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
.reply-card #capture .capture-icon::after {
  content: attr(data-label);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
/* In a shared card the shutter sends the answer: a send arrow, not a camera ring. */
.reply-send-icon { display: none; }
.reply-card #capture .capture-icon > svg:not(.reply-send-icon) { display: none; }
.reply-card #capture .reply-send-icon { display: block; width: 20px; height: 20px; }
.reply-card #capture[aria-busy="true"] { opacity: 0.6; }
/* A card link is loading: a quiet dark screen instead of the bare entry panel. Lifted when the
   card opens (body.reply-card) or when the visit falls back to the landing (expired, failed). */
html[data-entry="reply"] body:not(.reply-card) {
  background: #171b17;
}
html[data-entry="reply"] body:not(.reply-card) > :not(script):not(#notice) {
  visibility: hidden;
}
html[data-entry="reply"] body:not(.reply-card)::after {
  content: "";
  position: fixed;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: #d9f99d;
  animation: reply-loading 0.9s linear infinite;
}
@keyframes reply-loading { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html[data-entry="reply"] body:not(.reply-card)::after { animation: none; }
}
/* Receiver: working chrome stays icon-first; the photo handle owns its gesture. */
.reply-photo-controls, .reply-photo-restore { display: none; }
.reply-card.reply-map-main #camera-panel {
  inset: var(--reply-photo-top, 144px) auto auto var(--reply-photo-left, 12px) !important;
  width: var(--reply-photo-width, min(46vw, 260px)) !important;
  aspect-ratio: auto;
  height: calc(var(--reply-photo-height, min(46vw, 260px) * var(--reply-photo-ratio, .75)) + var(--reply-photo-chrome-height, 44px)) !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px #0f172a26;
  background: hsl(var(--card));
}
.reply-card.reply-map-main #camera-panel .reply-photo {
  top: var(--reply-photo-chrome-height, 44px);
  height: calc(100% - var(--reply-photo-chrome-height, 44px));
  object-fit: contain;
}
.reply-card.reply-map-main #camera-panel .reply-photo-controls {
  position: absolute;
  inset: 0 0 auto;
  z-index: 9;
  display: flex;
  height: 44px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  pointer-events: auto;
  cursor: default;
}
.reply-photo-controls button, .reply-card .reply-photo-restore {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  transition: background 150ms;
  pointer-events: auto;
}
.reply-photo-controls #reply-photo-handle {
  flex: 1;
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.reply-photo-controls #reply-photo-handle.is-dragging { cursor: grabbing; }
.reply-photo-controls button + button { border-left: 1px solid hsl(var(--border)); }
.reply-photo-controls button:hover { background: hsl(var(--muted)); }
.reply-photo-controls button:focus-visible, .reply-card .reply-photo-restore:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: -3px;
}
.reply-card.reply-photo-collapsed.reply-map-main #camera-panel { visibility: hidden; pointer-events: none; }
.reply-card .reply-photo-restore {
  position: absolute;
  z-index: 12;
  right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 108px);
  border: 1px solid hsl(var(--border));
  border-right: 0;
  border-radius: 10px 0 0 10px;
  background: hsl(var(--card));
  color: hsl(var(--foreground));
  box-shadow: 0 2px 8px #0f172a1a;
}
.reply-card .reply-photo-controls[hidden], .reply-card .reply-photo-restore[hidden] { display: none !important; }
.reply-card .reply-expiry {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 64px;
  right: 12px;
  width: fit-content;
  max-width: calc(100% - 76px);
  min-height: 44px;
  padding: 0 8px 0 12px;
  transform: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: -.02em;
  z-index: 12;
}
.reply-card .reply-expiry a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  white-space: nowrap;
}
.reply-card #reply-expiry[hidden] { display: none !important; }
.reply-card.reply-map-main .reply-expiry {
  background: hsl(var(--card) / .96);
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  backdrop-filter: none;
}
.reply-card.reply-map-main .reply-expiry a { color: hsl(var(--primary)); }
.reply-card #leave { width: 44px !important; height: 44px !important; }
.reply-card.reply-map-main #leave {
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  border: 1px solid hsl(var(--border)) !important;
}
.reply-card.reply-map-main .map-markup-tools {
  left: 12px !important;
  top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
  transform: none !important;
}
.reply-card.reply-map-main .map-tools {
  right: 12px !important;
  top: calc(env(safe-area-inset-top, 0px) + 68px) !important;
}
.reply-card.reply-map-main :is(.map-markup-tools,.map-tools,.map-view-switch) {
  opacity: 1 !important;
  visibility: visible !important;
}
.reply-card.reply-map-main :is(.map-markup-tools,.map-tools,.map-view-switch) button {
  width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
}
.reply-card.reply-map-main :is(.map-markup-tools,.map-tools,.map-view-switch) button::after { content: none; }
.reply-card.reply-map-main .map-view-switch {
  left: 12px !important;
  top: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 108px) !important;
}
.reply-card.reply-map-main .location-status { bottom: calc(env(safe-area-inset-bottom, 0px) + 164px); }
.reply-card #capture .capture-icon::after { font-size: 16px; }
.reply-card #capture {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  box-shadow: 0 3px 12px #0f172a26 !important;
}
.reply-card.reply-map-main .attribution {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 2px) !important;
  right: 8px !important;
  left: auto !important;
  max-width: calc(100% - 16px);
  padding: 0 4px;
  white-space: normal;
  line-height: 14px;
  font-size: 12px;
}
@media (max-height: 400px) and (min-width: 520px) {
  .reply-card.reply-map-main .map-view-switch { bottom: calc(env(safe-area-inset-bottom, 0px) + 16px) !important; }
  .reply-card.reply-map-main .location-status { bottom: calc(env(safe-area-inset-bottom, 0px) + 68px); max-width: 220px; }
}

/* Compact receiver photo: preserve the full received image and comfortable touch areas. */
.reply-card.reply-map-main #camera-panel[data-reply-photo-size="compact"] { box-sizing: content-box; }
.reply-card.reply-map-main #camera-panel[data-reply-photo-size="compact"] #reply-photo-expand {
  position: absolute;
  top: 44px;
  left: 0;
  width: 100%;
  height: var(--reply-photo-height);
  min-height: 44px;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.reply-card.reply-map-main #camera-panel[data-reply-photo-size="compact"] #reply-photo-expand svg { display: none; }

/* Phone receiver: two map actions by the thumb, plus a separate send icon. These rules and
   REPLY_MOBILE_QUERY have the same bounds; desktop, camera cards and calls keep their controls. */
.reply-mobile-rail { display: none; }
@media (max-width: 767px), (max-height: 500px) and (pointer: coarse) {
  .reply-card.reply-mobile .live-controls {
    display: contents !important;
    padding: 0 !important;
    background: none !important;
    box-shadow: none !important;
  }
  .reply-card.reply-mobile #capture {
    position: fixed !important;
    right: calc(env(safe-area-inset-right, 0px) + 12px) !important;
    left: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px) !important;
    top: auto !important;
    width: 44px !important;
    height: 44px !important;
    max-height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    display: grid !important;
    place-items: center;
    border-radius: 12px !important;
    z-index: 28;
  }
  .reply-card.reply-mobile #capture .capture-icon::after { content: none !important; }
  .reply-card.reply-mobile .reply-mobile-rail {
    position: absolute;
    z-index: 12;
    right: calc(env(safe-area-inset-right, 0px) + 12px);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 44px;
    background: none;
    pointer-events: auto;
  }
  .reply-card.reply-mobile .reply-mobile-rail[hidden] { display: none !important; }
  .reply-card.reply-mobile .reply-mobile-rail > button,
  .reply-card.reply-mobile #reply-map-pan {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid hsl(var(--border));
    border-radius: 10px;
    background: hsl(var(--card));
    color: hsl(var(--foreground));
    box-shadow: 0 1px 6px #0f172a12;
  }
  .reply-card.reply-mobile .reply-mobile-rail > button:focus-visible,
  .reply-card.reply-mobile #reply-map-pan:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: -3px;
  }
  .reply-card.reply-mobile #reply-draw-toggle svg { display: none; }
  .reply-card.reply-mobile #reply-draw-toggle[data-tool="pan"] .reply-draw-pan-icon,
  .reply-card.reply-mobile #reply-draw-toggle[data-tool="circle"] .reply-draw-circle-icon,
  .reply-card.reply-mobile #reply-draw-toggle[data-tool="arrow"] .reply-draw-arrow-icon { display: block; }
  .reply-card.reply-mobile #reply-draw-toggle:is([data-tool="circle"],[data-tool="arrow"]) {
    color: hsl(var(--primary));
    background: hsl(var(--secondary));
  }
  .reply-card.reply-mobile .reply-mobile-menu {
    position: absolute;
    right: 52px;
    bottom: 0;
    padding: 4px;
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    background: hsl(var(--card));
    box-shadow: 0 3px 14px #0f172a1a;
    pointer-events: auto;
  }
  .reply-card.reply-mobile #reply-draw-menu {
    bottom: 52px;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .reply-card.reply-mobile #reply-location-menu { display: flex; flex-direction: column; gap: 4px; }
  .reply-card.reply-mobile .reply-mobile-menu[hidden] { display: none !important; }
  .reply-card.reply-mobile .reply-mobile-menu :is(.map-markup-tools,.map-tools,.map-view-switch) {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    margin: 0;
    opacity: 1 !important;
    visibility: visible !important;
    border-radius: 8px;
    box-shadow: none;
    flex-shrink: 0;
  }
  .reply-card.reply-mobile #reply-map-pan[aria-pressed="true"] {
    background: hsl(var(--secondary));
    color: hsl(var(--primary));
  }
  .reply-card.reply-mobile #camera-panel { --reply-photo-chrome-height: 0px; }
  .reply-card.reply-mobile.reply-map-main #camera-panel .reply-photo {
    touch-action: none;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }
  .reply-card.reply-mobile.reply-map-main #camera-panel .reply-photo.is-dragging { cursor: grabbing; }
  .reply-card.reply-mobile.reply-map-main #camera-panel .reply-photo:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: -3px;
  }
  .reply-card.reply-mobile.reply-map-main #camera-panel .reply-photo-controls {
    inset: 0 0 auto auto;
    width: 44px;
    height: 44px;
    background: transparent;
    pointer-events: none;
  }
  .reply-card.reply-mobile.reply-map-main #camera-panel :is(#reply-photo-handle,#reply-photo-expand) { display: none !important; }
  .reply-card.reply-mobile.reply-map-main #camera-panel #reply-photo-collapse {
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #fff;
    pointer-events: auto;
    filter: drop-shadow(0 1px 2px #000b);
  }
  .reply-card.reply-mobile #reply-photo-restore {
    left: 0;
    right: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
    border: 1px solid hsl(var(--border));
    border-left: 0;
    border-radius: 0 10px 10px 0;
  }
  .reply-card.reply-mobile.reply-map-main .location-status {
    left: 12px;
    right: 68px;
    max-width: 300px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  }
}