/* ============================================================
   StreamPen — styles.css
   A real-time whiteboard for streams.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&display=swap');

/* === Reset === */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* === Theme: Dark (default) === */
[data-theme="dark"] {
  --bg: #121214;
  --bg-subtle: #1a1a1f;
  --toolbar-bg: rgba(24, 24, 28, 0.78);
  --toolbar-border: rgba(255, 255, 255, 0.06);
  --toolbar-shadow: 0 8px 32px rgba(0, 0, 0, 0.5),
                    0 2px 8px rgba(0, 0, 0, 0.3),
                    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --btn-bg: transparent;
  --btn-hover: rgba(255, 255, 255, 0.07);
  --btn-text: rgba(255, 255, 255, 0.72);
  --btn-text-hover: rgba(255, 255, 255, 0.95);
  --accent: #e8a84c;
  --accent-glow: rgba(232, 168, 76, 0.15);
  --accent-ring: rgba(232, 168, 76, 0.5);
  --separator: rgba(255, 255, 255, 0.06);
  --swatch-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);
  --watermark: rgba(255, 255, 255, 0.3);
  --size-dot: rgba(255, 255, 255, 0.55);
  --size-dot-active: #e8a84c;
  --gradient-line: linear-gradient(90deg, transparent 0%, rgba(232, 168, 76, 0.3) 30%, rgba(232, 168, 76, 0.5) 50%, rgba(232, 168, 76, 0.3) 70%, transparent 100%);
}

/* === Theme: Light === */
[data-theme="light"] {
  --bg: #f5f3f0;
  --bg-subtle: #eae7e3;
  --toolbar-bg: rgba(255, 255, 255, 0.82);
  --toolbar-border: rgba(0, 0, 0, 0.06);
  --toolbar-shadow: 0 8px 32px rgba(0, 0, 0, 0.08),
                    0 2px 8px rgba(0, 0, 0, 0.04),
                    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --btn-bg: transparent;
  --btn-hover: rgba(0, 0, 0, 0.05);
  --btn-text: rgba(0, 0, 0, 0.5);
  --btn-text-hover: rgba(0, 0, 0, 0.8);
  --accent: #c4872e;
  --accent-glow: rgba(196, 135, 46, 0.1);
  --accent-ring: rgba(196, 135, 46, 0.45);
  --separator: rgba(0, 0, 0, 0.06);
  --swatch-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
  --watermark: rgba(0, 0, 0, 0.3);
  --size-dot: rgba(0, 0, 0, 0.35);
  --size-dot-active: #c4872e;
  --gradient-line: linear-gradient(90deg, transparent 0%, rgba(196, 135, 46, 0.2) 30%, rgba(196, 135, 46, 0.35) 50%, rgba(196, 135, 46, 0.2) 70%, transparent 100%);
}

/* === Body === */
body {
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  transition: background 0.4s ease;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* === Canvas === */
#canvas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-touch-callout: none;
  overflow: hidden;
  cursor: crosshair;
}

/* Tool-specific cursors (pen/eraser set dynamically via JS) */
#canvas-container[data-tool="select"] { cursor: default; }
#canvas-container[data-tool="laser"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3' fill='%23ff4444' opacity='0.8'/%3E%3Ccircle cx='12' cy='12' r='6' fill='none' stroke='%23ff4444' stroke-width='1' opacity='0.4'/%3E%3C/svg%3E") 12 12, crosshair;
}

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

/* === Toolbar === */
#toolbar {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--toolbar-bg);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid var(--toolbar-border);
  border-radius: 18px;
  padding: 7px 10px;
  display: flex;
  gap: 3px;
  align-items: center;
  z-index: 100;
  box-shadow: var(--toolbar-shadow);
  animation: toolbar-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.15s;
}

/* Warm accent line across the top */
#toolbar::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 18px;
  right: 18px;
  height: 1px;
  background: var(--gradient-line);
  border-radius: 1px;
}

@keyframes toolbar-enter {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* === Separator === */
.separator {
  width: 1px;
  height: 22px;
  background: var(--separator);
  margin: 0 5px;
  flex-shrink: 0;
}

/* === Tool Buttons (Pen, Eraser) === */
.tool-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 12px;
  background: var(--btn-bg);
  color: var(--btn-text);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.tool-btn:hover {
  background: var(--btn-hover);
  color: var(--btn-text-hover);
}

.tool-btn:active {
  transform: scale(0.9);
}

.tool-btn.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 12px var(--accent-glow),
              0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.tool-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tool-btn:hover svg {
  transform: scale(1.05);
}

/* === Color Swatches === */
#color-palette {
  display: flex;
  gap: 5px;
  align-items: center;
  padding: 0 2px;
}

.color-swatch {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  box-shadow: var(--swatch-shadow);
  position: relative;
}

.color-swatch::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.color-swatch:hover {
  transform: scale(1.15);
}

.color-swatch.active::after {
  border-color: var(--accent-ring);
}

.color-swatch.active {
  transform: scale(1.12);
  box-shadow: var(--swatch-shadow), 0 0 8px var(--accent-glow);
}

/* Visibility fix for edge-case swatches */
[data-theme="dark"] .color-swatch[data-color="#000000"],
[data-theme="dark"] .color-swatch[data-color="#1c1c1e"] {
  box-shadow: var(--swatch-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .color-swatch[data-color="#ffffff"],
[data-theme="light"] .color-swatch[data-color="#f5f3f0"] {
  box-shadow: var(--swatch-shadow), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
}

/* === Size Buttons === */
.size-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: var(--btn-bg);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.size-btn:hover {
  background: var(--btn-hover);
}

.size-btn:active {
  transform: scale(0.9);
}

/* Size indicator dots */
.size-btn .dot {
  border-radius: 50%;
  background: var(--size-dot);
  transition: all 0.2s ease;
}

.size-btn[data-size="3"] .dot {
  width: 5px;
  height: 5px;
}

.size-btn[data-size="8"] .dot {
  width: 8px;
  height: 8px;
}

.size-btn[data-size="16"] .dot {
  width: 12px;
  height: 12px;
}

.size-btn.active .dot {
  background: var(--size-dot-active);
  box-shadow: 0 0 6px var(--accent-glow);
}

.size-btn.active {
  background: var(--btn-hover);
}

/* === Action Buttons (Undo, Clear, Theme) === */
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--btn-text);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.action-btn:hover {
  background: var(--btn-hover);
  color: var(--btn-text-hover);
}

.action-btn:active {
  transform: scale(0.88);
}

.action-btn svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.action-btn:hover svg {
  transform: scale(1.08);
}

/* === Brand === */
#brand {
  position: fixed;
  top: 16px;
  right: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 50;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  animation: brand-enter 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s forwards;
}

@keyframes brand-enter {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.brand-logo {
  width: 22px;
  height: 22px;
  color: var(--watermark);
  transition: color 0.4s ease;
}

.brand-text {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: 0.06em;
  color: var(--watermark);
  transition: color 0.4s ease;
}

.brand-accent {
  font-weight: 500;
  color: var(--accent);
}

/* Connection dot - tiny indicator after the brand name */
#connection-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 6px rgba(48, 209, 88, 0.4);
  transition: background 0.3s ease, box-shadow 0.3s ease;
  margin-left: -2px;
}

#connection-dot.disconnected {
  background: #ff453a;
  box-shadow: 0 0 6px rgba(255, 69, 58, 0.4);
}

.bottom-menu-btn.copied {
  color: #30d158;
}

/* Link menu (copy viewer/editor link) */
.link-menu {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 200;
  background: var(--toolbar-bg);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid var(--toolbar-border);
  border-radius: 12px;
  box-shadow: var(--toolbar-shadow);
  padding: 6px;
  animation: bottom-menu-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
  min-width: 180px;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .link-menu {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

.link-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  color: var(--btn-text);
  font-size: 13px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.link-menu-item:hover {
  background: var(--btn-hover);
}

.link-menu-item.copied {
  color: #30d158;
}

/* Editor username labels above active strokes */
#editor-labels {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
}

.editor-label {
  position: absolute;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Outfit', system-ui, sans-serif;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  transform: translate(-50%, -100%);
  margin-top: -8px;
  opacity: 0.85;
  letter-spacing: 0.02em;
}

/* === View Mode (OBS Browser Source) === */
body.view-mode {
  cursor: default;
  background: var(--bg);
  margin: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

html {
  background: var(--bg);
  overscroll-behavior: none;
}

/* Transparent background for OBS overlay mode */
body.transparent-bg {
  background: transparent !important;
}

html:has(.transparent-bg) {
  background: transparent !important;
}

body.transparent-bg::after {
  display: none;
}

/* Semi-transparent background - blurred overlay for OBS */
body.semi-transparent-bg {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

html:has(.semi-transparent-bg) {
  background: transparent !important;
}

body.semi-transparent-bg::after {
  display: none;
}

/* === iPad Safe Area === */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #toolbar {
    bottom: calc(28px + env(safe-area-inset-bottom));
  }
}

/* === Subtle canvas dot grid (draw mode only) === */
body:not(.view-mode) #canvas-container::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.25;
  background-image: radial-gradient(circle, var(--separator) 0.6px, transparent 0.6px);
  background-size: calc(32px * var(--grid-zoom, 1)) calc(32px * var(--grid-zoom, 1));
  background-position: var(--grid-x, 0px) var(--grid-y, 0px);
  transition: opacity 0.4s ease;
}

/* === Debug Overlay === */
.debug-overlay {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 200;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  min-width: 180px;
}

.debug-overlay[hidden] {
  display: none;
}

.debug-overlay .debug-label {
  color: rgba(255, 255, 255, 0.35);
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.08em;
}

.debug-overlay .debug-value {
  color: var(--accent);
  font-weight: 500;
}

.debug-overlay .debug-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* === Snap Menu (Position Bookmarks) === */
#snap-menu {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--toolbar-bg);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid var(--toolbar-border);
  border-radius: 18px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  z-index: 100;
  box-shadow: var(--toolbar-shadow);
  animation: snap-menu-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.25s;
}

/* Vertical accent line on the left edge */
#snap-menu::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(232, 168, 76, 0.3) 30%, rgba(232, 168, 76, 0.5) 50%, rgba(232, 168, 76, 0.3) 70%, transparent 100%);
  border-radius: 1px;
}

@keyframes snap-menu-enter {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/* Editor peer buttons — snap to another editor's position */
#editor-peers {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

#editor-peers:not(:empty) {
  border-bottom: 1px solid var(--separator);
  padding-bottom: 4px;
  margin-bottom: 1px;
}

.editor-peer-btn {
  position: relative;
}

.editor-peer-btn:hover {
  background: var(--btn-hover);
}

.editor-peer-btn.following {
  background: var(--btn-hover);
  outline: 1.5px solid currentColor;
  outline-offset: -1.5px;
  animation: follow-pulse 2s ease-in-out infinite;
}

@keyframes follow-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Snap list — vertical scrollable area between + and delete */
#snap-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 260px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}

#snap-list::-webkit-scrollbar {
  display: none;
}

/* Separators appear when the list has items */
#snap-list:not(:empty) {
  border-top: 1px solid var(--separator);
  border-bottom: 1px solid var(--separator);
  padding: 4px 0;
  margin: 1px 0;
}

/* Position buttons — identical to action-btn with number label */
.snap-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  color: var(--btn-text);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.snap-item:hover {
  background: var(--btn-hover);
  color: var(--btn-text-hover);
}

.snap-item:active {
  transform: scale(0.88);
}

/* Active snap — the currently selected bookmark */
.snap-item.selected {
  background: var(--btn-hover);
  outline: 1.5px solid var(--accent);
  outline-offset: -1.5px;
}

/* Snaps after the active one get dimmed */
.snap-item.after-active {
  opacity: 0.35;
}

/* Rollback button — hidden when no snap is active */
.snap-rollback-btn.hidden {
  display: none;
}

.snap-rollback-btn.active {
  background: #ff9f0a;
  color: #fff;
  box-shadow: 0 2px 12px rgba(255, 159, 10, 0.25),
              0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Delete mode: position buttons turn red on hover */
#snap-menu.delete-mode .snap-item:hover {
  background: rgba(255, 69, 58, 0.12);
  color: #ff453a;
}

/* Delete toggle — uses tool-btn active pattern when engaged */
.snap-delete-toggle.active {
  background: #ff453a;
  color: #fff;
  box-shadow: 0 2px 12px rgba(255, 69, 58, 0.25),
              0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

/* Hide delete button when no snaps exist */
.snap-delete-toggle.hidden {
  display: none;
}

.snap-delete-toggle.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* === Snap Edit Toggle (cog button) === */
.snap-edit-toggle.hidden {
  display: none;
}

.snap-edit-toggle.active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 12px var(--accent-glow),
              0 0 0 1px rgba(255, 255, 255, 0.05) inset;
}

.snap-edit-toggle.disabled {
  opacity: 0.3;
  pointer-events: none;
}

/* === Snap Color Picker === */
.snap-color-picker {
  position: fixed;
  right: 68px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--toolbar-bg);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid var(--toolbar-border);
  border-radius: 14px;
  padding: 8px;
  z-index: 101;
  box-shadow: var(--toolbar-shadow);
  animation: snap-color-picker-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.snap-color-picker[hidden] {
  display: none;
}

@keyframes snap-color-picker-enter {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(8px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

.snap-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.snap-color-item {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.snap-color-item:hover {
  transform: scale(1.2);
}

.snap-color-item:active {
  transform: scale(0.9);
}

/* Bookmark icon inside snap-item button */
.snap-bookmark {
  width: 20px;
  height: 20px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  transition: transform 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.snap-item.selected .snap-bookmark {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.3));
}

/* === Overlay Controls (immediately left of toolbar) === */
#overlay-controls {
  position: fixed;
  bottom: 28px;
  z-index: 100;
  background: var(--toolbar-bg);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid var(--toolbar-border);
  border-radius: 18px;
  padding: 7px 10px;
  display: flex;
  gap: 3px;
  align-items: center;
  box-shadow: var(--toolbar-shadow);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#overlay-controls.hidden {
  display: none;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  #overlay-controls {
    bottom: calc(28px + env(safe-area-inset-bottom));
  }
}

.overlay-live-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.overlay-live-btn:hover {
  background: var(--btn-hover);
}

.overlay-live-btn:active {
  transform: scale(0.88);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.overlay-live-btn.active .live-dot {
  background: #ff453a;
  box-shadow: 0 0 6px rgba(255, 69, 58, 0.5),
              0 0 12px rgba(255, 69, 58, 0.2);
  animation: live-pulse 2s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255, 69, 58, 0.5), 0 0 12px rgba(255, 69, 58, 0.2); }
  50% { box-shadow: 0 0 8px rgba(255, 69, 58, 0.7), 0 0 18px rgba(255, 69, 58, 0.3); }
}

.overlay-timer-btn {
  width: 36px;
  height: 36px;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
}

.overlay-timer-label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.overlay-timer-btn.active {
  color: var(--accent);
}

.overlay-bg-btn svg {
  width: 17px;
  height: 17px;
}

.overlay-bg-btn.active {
  color: var(--accent);
}

.bg-slash {
  transition: opacity 0.2s ease;
}

/* === View Overlay Fade === */
#canvas-container {
  transition: opacity 0.5s ease;
}

#canvas-container.overlay-hidden {
  opacity: 0;
}

body.view-mode {
  transition: background 0.5s ease;
}

body.view-mode.overlay-hidden {
  background: transparent !important;
}

html:has(body.view-mode.overlay-hidden) {
  background: transparent !important;
}


/* Standalone debug toggle for view page */
.debug-toggle {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 200;
}

/* === Left Sidebar (Two-Panel: Icon Rail + Workbook Panel) === */
.sidebar {
  position: fixed;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 120;
  display: flex;
  gap: 6px;
  /* Closed state */
  opacity: 0;
  transform: translateY(-50%) translateX(-16px);
  pointer-events: none;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.sidebar.open {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

/* --- Panel 1: Project Icon Rail --- */
.project-rail {
  background: var(--toolbar-bg);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid var(--toolbar-border);
  border-radius: 18px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  max-height: 70vh;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  box-shadow: var(--toolbar-shadow);
}

.project-rail::-webkit-scrollbar {
  display: none;
}

/* Accent line on the right */
.project-rail::before {
  content: '';
  position: absolute;
  right: -1px;
  top: 18px;
  bottom: 18px;
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, rgba(232, 168, 76, 0.3) 30%, rgba(232, 168, 76, 0.5) 50%, rgba(232, 168, 76, 0.3) 70%, transparent 100%);
  border-radius: 1px;
}

/* Rail items — project avatars */
.rail-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.rail-item:hover {
  transform: scale(1.08);
}

.rail-item:active {
  transform: scale(0.92);
}

/* Selected project — pill shape like Slack */
.rail-item.selected .rail-avatar {
  border-radius: 10px;
}

/* Colored circle avatar */
.rail-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  transition: border-radius 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.rail-avatar.two-char {
  font-size: 12px;
  letter-spacing: -0.02em;
}

.rail-item:hover .rail-avatar {
  border-radius: 10px;
}

/* Active indicator bar — left side of rail item */
.rail-active-bar {
  position: absolute;
  left: -4px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--accent-glow);
}

/* Add project button */
.rail-add-btn {
  color: var(--btn-text);
}

.rail-add-btn:hover {
  background: var(--btn-hover);
  color: var(--btn-text-hover);
}

.rail-add-btn svg {
  width: 16px;
  height: 16px;
}

/* Separator between projects and add button */
.rail-item.rail-add-btn {
  margin-top: 2px;
  border-top: 1px solid var(--separator);
  padding-top: 6px;
  border-radius: 10px;
}

/* --- Panel 2: Workbook Panel --- */
.workbook-panel {
  background: var(--toolbar-bg);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid var(--toolbar-border);
  border-radius: 18px;
  width: 0;
  max-height: 70vh;
  overflow: hidden;
  box-shadow: var(--toolbar-shadow);
  opacity: 0;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.workbook-panel.open {
  width: 180px;
  opacity: 1;
}

.workbook-panel-content {
  width: 180px;
  padding: 7px;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 70vh;
  scrollbar-width: none;
}

.workbook-panel-content::-webkit-scrollbar {
  display: none;
}

/* Workbook panel header */
.wb-panel-header {
  padding: 4px 3px 6px 5px;
  border-bottom: 1px solid var(--separator);
  margin-bottom: 4px;
}

.wb-panel-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.wb-panel-color-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 0 0 2px transparent;
}

.wb-panel-color-dot:hover {
  transform: scale(1.25);
  box-shadow: 0 0 0 2px var(--btn-text);
}

.wb-panel-title {
  flex: 1;
  min-width: 0;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--btn-text-hover);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
  padding: 1px 3px;
  border-radius: 4px;
  transition: background 0.15s ease;
}

.wb-panel-title:hover {
  background: var(--btn-hover);
}

/* Inline color picker */
.wb-color-picker {
  display: flex;
  gap: 4px;
  padding: 5px 2px 3px;
  flex-wrap: wrap;
}

.wb-color-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  transition: all 0.15s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

.wb-color-swatch:hover {
  transform: scale(1.2);
  border-color: rgba(255, 255, 255, 0.4);
}

.wb-color-swatch.active {
  border-color: #fff;
  transform: scale(1.15);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2), 0 0 6px rgba(255, 255, 255, 0.15);
}

.wb-panel-actions {
  display: flex;
  gap: 2px;
}

.wb-panel-title-row .drawer-icon-btn.small {
  opacity: 1;
}

/* Workbook list */
.wb-panel-list {
  padding: 0;
}

/* Workbook row */
.wb-panel-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 4px 4px 8px;
  min-height: 28px;
  border-radius: 8px;
  margin: 1px 0;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease;
}

.wb-panel-row:hover {
  background: var(--btn-hover);
}

.wb-panel-row:hover .drawer-icon-btn.small {
  opacity: 1;
}

.wb-panel-row.active {
  background: var(--accent-glow);
}

.wb-panel-row.active .wb-panel-name {
  color: var(--accent);
  font-weight: 500;
}

.wb-panel-row.active .wb-panel-icon svg {
  color: var(--accent);
}

.wb-panel-active-bar {
  position: absolute;
  left: -2px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 1px;
  background: var(--accent);
}

.wb-panel-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
}

.wb-panel-icon svg {
  width: 12px;
  height: 12px;
  color: var(--btn-text);
  transition: color 0.15s ease;
}

.wb-panel-name {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 400;
  color: var(--btn-text);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.15s ease;
}

.wb-panel-row-actions {
  display: flex;
  gap: 0;
  flex-shrink: 0;
  margin-left: auto;
}

.wb-visibility-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--btn-text);
  opacity: 0.45;
  border-radius: 4px;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.wb-visibility-btn:hover {
  opacity: 1;
  background: var(--btn-hover);
}

/* Add workbook button */
.wb-panel-add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 5px 8px;
  margin-top: 4px;
  border: 1px dashed var(--separator);
  border-radius: 8px;
  background: transparent;
  color: var(--btn-text);
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.wb-panel-add-btn:hover {
  background: var(--btn-hover);
  color: var(--btn-text-hover);
  border-color: var(--btn-text);
}

.wb-panel-add-btn svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

/* Shared icon buttons (used in both panels) */
.drawer-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--btn-text);
  cursor: pointer;
  transition: all 0.15s ease;
}

.drawer-icon-btn:hover {
  background: var(--btn-hover);
  color: var(--btn-text-hover);
}

.drawer-icon-btn svg {
  width: 11px;
  height: 11px;
}

.drawer-icon-btn.small {
  width: 20px;
  height: 20px;
  opacity: 0;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.drawer-icon-btn.small svg {
  width: 10px;
  height: 10px;
}

.drawer-icon-btn.danger:hover {
  background: rgba(255, 69, 58, 0.12);
  color: #ff453a;
}

/* Rename input (shared) */
.drawer-rename-input {
  flex: 1;
  min-width: 0;
  background: var(--bg-subtle);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 2px 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  color: var(--btn-text-hover);
  outline: none;
}

/* === Broadcast Guide Overlays === */
#guide-overlays {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  pointer-events: none;
}

.guide-frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 2px dashed;
  border-radius: 4px;
  opacity: 0.5;
}

.guide-frame.guide-extends {
  border-style: solid;
  opacity: 0.3;
}

.guide-frame.guide-editor {
  border-style: dotted;
  opacity: 0.4;
}

.guide-label {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-family: 'Outfit', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.03em;
  opacity: 0.8;
  white-space: nowrap;
}

.guide-dims {
  opacity: 0.6;
  font-weight: 400;
}

/* Selection overlay — pointer-events: none on everything.
   All interaction goes through the canvas pointerdown handler. */
#selection-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 45;
  pointer-events: none;
}

.selection-bbox {
  position: absolute;
  border: 1px solid #48dbfb;
  border-radius: 2px;
  pointer-events: none;
}

.selection-handle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: #48dbfb;
  border: 1px solid #1a1a2e;
  border-radius: 2px;
}

/* Corner handles */
.selection-handle.tl { top: -4px; left: -4px; }
.selection-handle.tr { top: -4px; right: -4px; }
.selection-handle.bl { bottom: -4px; left: -4px; }
.selection-handle.br { bottom: -4px; right: -4px; }

/* Edge midpoint handles */
.selection-handle.tm { top: -4px; left: calc(50% - 4px); }
.selection-handle.bm { bottom: -4px; left: calc(50% - 4px); }
.selection-handle.ml { top: calc(50% - 4px); left: -4px; }
.selection-handle.mr { top: calc(50% - 4px); right: -4px; }

.selection-delete-btn {
  position: absolute;
  top: -28px;
  right: -4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 69, 58, 0.9);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
  transition: background 0.15s ease;
}

.selection-delete-btn:hover {
  background: rgba(255, 69, 58, 1);
}

.selection-delete-btn svg {
  width: 14px;
  height: 14px;
}

/* === Bottom-Right Menu === */
.bottom-right-menu {
  position: fixed;
  bottom: 28px;
  right: 16px;
  z-index: 100;
  display: flex;
  gap: 4px;
  animation: bottom-menu-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.3s;
}

@keyframes bottom-menu-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bottom-menu-btn {
  background: var(--toolbar-bg);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid var(--toolbar-border);
  border-radius: 14px;
  box-shadow: var(--toolbar-shadow);
  width: 42px;
  height: 42px;
}

.bottom-menu-btn:hover {
  background: var(--btn-hover);
}

.bottom-menu-btn.active {
  color: var(--accent);
}

.bottom-menu-btn svg {
  width: 18px;
  height: 18px;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .bottom-right-menu {
    bottom: calc(28px + env(safe-area-inset-bottom));
  }
}

/* --- Presence --- */
.presence-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--accent);
  color: #000;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  line-height: 16px;
  border-radius: 8px;
  text-align: center;
  padding: 0 4px;
  pointer-events: none;
}

.presence-panel {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 200;
  width: 200px;
  background: var(--toolbar-bg);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid var(--toolbar-border);
  border-radius: 14px;
  box-shadow: var(--toolbar-shadow);
  padding: 12px 0;
  animation: bottom-menu-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .presence-panel {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

.presence-panel-header {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--btn-text);
  padding: 0 14px 8px;
}

.presence-section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--btn-text);
  padding: 8px 14px 4px;
  opacity: 0.6;
}

.presence-section-label:first-child {
  padding-top: 0;
}

.presence-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--btn-text-hover);
}

.presence-row-self {
  background: rgba(76, 217, 100, 0.12);
  border-radius: 6px;
  color: #4cd964;
}

.presence-row-self .presence-role-icon {
  opacity: 0.8;
  color: #4cd964;
}

.presence-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.presence-make-host {
  font-family: 'Outfit', sans-serif;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--btn-text);
  border: 1px solid var(--separator);
  padding: 1px 5px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.presence-make-host:hover {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
}

.presence-kick {
  font-family: 'Outfit', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  background: transparent;
  color: var(--btn-text);
  border: 1px solid var(--separator);
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s ease;
  padding: 0;
}

.presence-kick:hover {
  background: #ff453a;
  color: #fff;
  border-color: #ff453a;
}

.presence-role-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0.5;
}

.presence-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.presence-host-badge {
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  background: var(--accent);
  color: #000;
  padding: 1px 5px;
  border-radius: 4px;
  flex-shrink: 0;
}

.presence-empty {
  font-family: 'Outfit', sans-serif;
  font-size: 12px;
  color: var(--btn-text);
  padding: 4px 14px;
  opacity: 0.6;
}

#btn-presence-toggle {
  position: relative;
}

/* Follow dot — shows which editor a viewer follows */
.presence-follow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-left: auto;
}

/* === Editor Picker (view page — choose which editor to follow) === */
#editor-picker {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
}

.editor-pick-btn {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
}

.editor-pick-btn:hover {
  transform: scale(1.3);
}

.editor-pick-btn.active {
  border-color: #fff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

/* === Editor Help HUD (view page — ? key) === */
#editor-help-hud {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 300;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  animation: help-hud-enter 0.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes help-hud-enter {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.help-hud-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 4px;
  border-radius: 6px;
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}

.help-hud-row.active {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.help-hud-key {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
}

.help-hud-row.active .help-hud-key {
  background: rgba(255, 255, 255, 0.18);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.help-hud-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.help-hud-name {
  white-space: nowrap;
}

/* === Laser Canvas (stacks between committed and active) === */
#canvas-laser {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  pointer-events: none;
  z-index: 1;
}

/* ============================================================
   Settings Panel
   ============================================================ */

.settings-panel {
  position: fixed;
  bottom: 80px;
  right: 16px;
  z-index: 200;
  width: 280px;
  background: var(--toolbar-bg);
  backdrop-filter: blur(40px) saturate(1.4);
  -webkit-backdrop-filter: blur(40px) saturate(1.4);
  border: 1px solid var(--toolbar-border);
  border-radius: 14px;
  box-shadow: var(--toolbar-shadow);
  padding: 14px;
  animation: bottom-menu-enter 0.25s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .settings-panel {
    bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

.settings-panel-header {
  font-family: 'Outfit', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--btn-text);
  margin-bottom: 12px;
}

.settings-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--toolbar-border);
}

.settings-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.settings-display-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--btn-text);
  line-height: 1.2;
}

.settings-email {
  font-size: 11px;
  color: var(--btn-text);
  opacity: 0.5;
  line-height: 1.2;
  margin-top: 2px;
}

.settings-section {
  margin-bottom: 14px;
}

.settings-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--btn-text);
  opacity: 0.6;
  margin-bottom: 6px;
}

.settings-username-row {
  display: flex;
  gap: 6px;
}

.settings-input {
  flex: 1;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--toolbar-border);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--btn-text);
  outline: none;
  font-family: inherit;
}

.settings-input:focus {
  border-color: var(--accent);
}

.settings-save-btn {
  background: var(--accent);
  color: #000;
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.settings-save-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.settings-feedback {
  font-size: 11px;
  margin-top: 4px;
  min-height: 16px;
  color: var(--btn-text);
  opacity: 0.6;
}

.settings-feedback.error { color: #ff6b6b; opacity: 1; }
.settings-feedback.available { color: #0abf53; opacity: 1; }

.settings-url-section {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--toolbar-border);
  margin-bottom: 14px;
}

.settings-url {
  font-size: 11px;
  color: var(--btn-text);
  opacity: 0.5;
  word-break: break-all;
  font-family: monospace;
}

.settings-sign-out-btn {
  width: 100%;
  background: none;
  border: 1px solid rgba(255,100,100,0.3);
  border-radius: 8px;
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #ff6b6b;
  cursor: pointer;
  transition: background 0.15s ease;
}

.settings-sign-out-btn:hover {
  background: rgba(255,100,100,0.1);
}

/* ============================================================
   Auth Pages (login + username picker)
   ============================================================ */

body.auth-page {
  overflow: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  -webkit-user-select: auto;
  user-select: auto;
}

.auth-card {
  background: var(--toolbar-bg);
  border: 1px solid var(--toolbar-border);
  box-shadow: var(--toolbar-shadow);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 48px 40px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 400px;
  margin: 24px;
}

.auth-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--btn-text-hover);
}

.auth-brand .brand-logo {
  width: 36px;
  height: 36px;
}

.auth-brand .brand-text {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.3px;
}

.auth-brand .brand-accent {
  color: var(--accent);
}

.auth-tagline {
  color: var(--btn-text);
  font-size: 14px;
  text-align: center;
  margin-top: -8px;
}

/* Google sign-in button */
.btn-google {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--btn-hover);
  border: 1px solid var(--toolbar-border);
  border-radius: 10px;
  padding: 12px 20px;
  color: var(--btn-text-hover);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
  width: 100%;
  justify-content: center;
}

.btn-google:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.btn-google:active {
  transform: scale(0.98);
}

.google-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Username picker specifics */
.auth-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.auth-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--toolbar-border);
  flex-shrink: 0;
}

.auth-profile-name {
  font-size: 15px;
  font-weight: 500;
  color: var(--btn-text-hover);
}

.auth-divider {
  width: 100%;
  height: 1px;
  background: var(--separator);
}

.auth-input-group {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-input-label {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--btn-text);
}

.auth-input {
  background: var(--btn-hover);
  border: 1px solid var(--toolbar-border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--btn-text-hover);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s ease;
  width: 100%;
  -webkit-user-select: auto;
  user-select: auto;
}

.auth-input:focus {
  border-color: var(--accent-ring);
}

.username-feedback {
  font-size: 13px;
  min-height: 18px;
  color: var(--btn-text);
  transition: color 0.15s ease;
}

.username-feedback.available {
  color: #30d158;
}

.username-feedback.error,
.username-feedback.taken {
  color: #ff453a;
}

.btn-claim {
  background: var(--accent);
  border: none;
  border-radius: 10px;
  padding: 13px 20px;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
  width: 100%;
}

.btn-claim:hover:not(:disabled) {
  opacity: 0.9;
}

.btn-claim:active:not(:disabled) {
  transform: scale(0.98);
}

.btn-claim:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}