/* SpeechBubble editor: full-screen canvas plus a floating panel, chrome from the --lab-* tokens. */
html, body { overflow: hidden; }

#sb-canvas {
  position: fixed; inset: 0; display: block;
  width: 100vw; height: 100vh; touch-action: none;
}
#sb-canvas.is-dragging { cursor: grabbing !important; }

#sb-panel {
  position: fixed; z-index: 20; top: 8px; right: 8px;
  width: 240px; max-width: calc(100vw - 16px); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 8px;
  font: var(--lab-font-size)/1.3 var(--lab-font);
}
#sb-panel h1 { margin: 0; color: var(--lab-ink); font-size: 14px; font-weight: 800; }
#sb-panel textarea { width: 100%; box-sizing: border-box; min-height: 64px; resize: vertical; font: 14px/1.35 var(--lab-font); }
.sb-row { display: grid; grid-template-columns: 5.5em 1fr 2.2em; align-items: center; gap: 6px; }
.sb-row input { width: 100%; }
.sb-row output { color: var(--lab-ink); font-family: var(--lab-mono); text-align: right; }
.sb-buttons { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-buttons .lab-button { padding: 0 10px; }
.sb-seg { display: inline-flex; }
.sb-seg .lab-button { border-radius: 0; padding: 0 9px; }
.sb-seg .lab-button:first-child { border-radius: var(--lab-radius-sm) 0 0 var(--lab-radius-sm); }
.sb-seg .lab-button:last-child { border-radius: 0 var(--lab-radius-sm) var(--lab-radius-sm) 0; }
.sb-seg .lab-button[aria-pressed=true] { background: var(--lab-accent); color: var(--lab-accent-ink); }
#sb-delete { margin-left: auto; color: var(--lab-red); }

/* With nothing selected the editing controls step aside */
.sb-edit { display: flex; flex-direction: column; gap: 8px; }
#sb-panel.is-empty :is(.sb-edit, .sb-sel) { display: none; }
.sb-empty { display: none; color: var(--lab-dim); }
#sb-panel.is-empty .sb-empty { display: block; }

@media (max-width: 600px) {
  #sb-panel { top: auto; bottom: calc(40px + env(safe-area-inset-bottom)); right: 8px; left: 8px; width: auto; }
  #sb-panel h1, .sb-hide-small { display: none; }
  #sb-panel textarea { min-height: 44px; }
  #sb-hint { top: calc(16px + env(safe-area-inset-top)); bottom: auto; }
}