@import url('./design-tokens.css');
/* Canvas title styling - clickable for mode toggle (accessible in fullscreen) */
.cw-title {
  transition: all 0.2s ease;
  padding: 6px 16px;
  border-radius: var(--radius-md);
  background: rgba(0, 191, 255, 0.15);
  border: 2px solid rgba(0, 191, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 191, 255, 0.2);
  position: relative;
}

/* Add visual indicator that it's toggleable */
.cw-title::after {
  content: '⇄';
  margin-left: 8px;
  opacity: 0.7;
  font-size: 14px;
}

.cw-title:hover {
  background: rgba(0, 191, 255, 0.25);
  border-color: rgba(0, 191, 255, 0.6);
  transform: translateX(-50%) scale(1.05);
  text-shadow: 0 2px 8px rgba(0, 191, 255, 0.8);
  box-shadow: 0 4px 12px rgba(0, 191, 255, 0.4);
}

.cw-title:hover::after {
  opacity: 1;
  animation: toggle-pulse 0.6s ease-in-out infinite;
}

.cw-title:active {
  transform: translateX(-50%) scale(0.98);
  background: rgba(0, 191, 255, 0.35);
}

@keyframes toggle-pulse {
  0%, 100% { 
    transform: translateX(0);
  }
  50% { 
    transform: translateX(3px);
  }
}