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

:root {
  --bg-canvas: #f5f5f0;
  --toolbar-bg: rgba(24, 24, 27, 0.85);
  --toolbar-border: rgba(255, 255, 255, 0.08);
  --toolbar-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 2px 8px rgba(0, 0, 0, 0.2);
  --btn-hover: rgba(255, 255, 255, 0.1);
  --btn-active: rgba(99, 102, 241, 0.35);
  --btn-active-border: rgba(99, 102, 241, 0.6);
  --accent: #818cf8;
  --accent-glow: rgba(99, 102, 241, 0.4);
  --text-primary: #f4f4f5;
  --text-secondary: #a1a1aa;
  --divider: rgba(255, 255, 255, 0.08);
  --status-connected: #34d399;
  --status-disconnected: #f87171;
  --status-connecting: #fbbf24;
  --radius: 14px;
  --radius-sm: 8px;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg-canvas);
  cursor: crosshair;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
}

/* ─── Canvas ────────────────────────────────────────────────────────────────── */
#canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

/* ─── Toolbar ───────────────────────────────────────────────────────────────── */
#toolbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  background: var(--toolbar-bg);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid var(--toolbar-border);
  border-radius: var(--radius);
  box-shadow: var(--toolbar-shadow);
  z-index: 1000;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#toolbar:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

/* ─── Toolbar Groups ────────────────────────────────────────────────────────── */
.toolbar-group {
  display: flex;
  align-items: center;
  gap: 2px;
}

.toolbar-divider {
  width: 1px;
  height: 28px;
  background: var(--divider);
  margin: 0 6px;
}

/* ─── Tool Buttons (Pen / Eraser) ───────────────────────────────────────────── */
.tool-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

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

.tool-btn.active {
  background: var(--btn-active);
  border-color: var(--btn-active-border);
  color: var(--text-primary);
  box-shadow: 0 0 12px var(--accent-glow);
}

.tool-btn svg {
  flex-shrink: 0;
}

/* ─── Color Picker ──────────────────────────────────────────────────────────── */
.color-picker {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 2px;
}

.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker::-webkit-color-swatch {
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

.color-picker::-moz-color-swatch {
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

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

/* ─── Size Buttons ──────────────────────────────────────────────────────────── */
.size-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  width: 42px;
  height: 42px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.5px;
}

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

.size-btn.active {
  background: var(--btn-active);
  border-color: var(--btn-active-border);
  color: var(--text-primary);
  box-shadow: 0 0 12px var(--accent-glow);
}

.size-dot {
  display: block;
  background: currentColor;
  border-radius: 50%;
}

.size-dot-small {
  width: 4px;
  height: 4px;
}

.size-dot-medium {
  width: 8px;
  height: 8px;
}

.size-dot-large {
  width: 12px;
  height: 12px;
}

/* ─── Zoom Buttons ──────────────────────────────────────────────────────────── */
.zoom-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-family: inherit;
  cursor: pointer;
  transition: all 0.2s ease;
}

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

.zoom-btn:active {
  transform: scale(0.92);
}

.zoom-btn.zoom-label {
  width: auto;
  padding: 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--text-primary);
}

.zoom-btn.zoom-label:hover {
  color: var(--accent);
}

/* ─── Connection Status ─────────────────────────────────────────────────────── */
#status-indicator {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--toolbar-bg);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  border: 1px solid var(--toolbar-border);
  border-radius: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: opacity 0.3s ease;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--status-connecting);
  transition: background 0.3s ease;
}

.status-dot.connected {
  background: var(--status-connected);
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.5);
}

.status-dot.disconnected {
  background: var(--status-disconnected);
  box-shadow: 0 0 8px rgba(248, 113, 113, 0.5);
}

/* ─── Animations ────────────────────────────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.status-dot:not(.connected):not(.disconnected) {
  animation: pulse 1.5s ease-in-out infinite;
}

/* ─── Canvas cursor overrides ───────────────────────────────────────────────── */
body.tool-eraser,
body.tool-eraser #canvas {
  cursor: cell;
}

body.panning,
body.panning #canvas {
  cursor: grab;
}

body.panning-active,
body.panning-active #canvas {
  cursor: grabbing;
}

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  #toolbar {
    bottom: 12px;
    padding: 2px 4px;
    gap: 1px;
    border-radius: 8px;
    width: fit-content;
    max-width: 96%;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  .tool-btn {
    padding: 2px 4px;
    font-size: 9px;
    min-width: 28px;
  }

  .tool-btn svg {
    width: 12px;
    height: 12px;
  }

  .tool-btn span {
    display: none;
  }

  .color-picker {
    width: 24px;
    height: 24px;
  }

  .size-btn {
    width: 24px;
    height: 24px;
    font-size: 7px;
  }

  .size-dot-small { width: 2px; height: 2px; }
  .size-dot-medium { width: 4px; height: 4px; }
  .size-dot-large { width: 6px; height: 6px; }

  .zoom-btn {
    width: 20px;
    height: 20px;
  }

  .zoom-btn svg {
    width: 12px;
    height: 12px;
  }

  .zoom-btn.zoom-label {
    display: none;
  }

  .toolbar-divider {
    margin: 0 2px;
    height: 14px;
  }

  #status-indicator {
    top: 4px;
    right: 4px;
    padding: 2px 6px;
    font-size: 8px;
  }
}

/* ─── Remote Cursors ───────────────────────────────────────────────────────── */
#cursors-container {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 900;
  overflow: hidden;
}

.remote-cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  transition: transform 0.1s linear;
  pointer-events: none;
  z-index: 901;
}

.cursor-pointer {
  width: 16px;
  height: 16px;
  fill: var(--accent);
  stroke: white;
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.cursor-label {
  position: absolute;
  top: 18px;
  left: 12px;
  padding: 3px 8px;
  background: var(--toolbar-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--toolbar-border);
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
}