/**
 * Claymorphism - Soft, tactile 3D interface effects for Illuminate AI
 * Creates soft, extruded clay-like UI elements with dual shadows
 */

.clay {
  background: var(--surface, #0a0a0a);
  border-radius: var(--radius-xl, 24px);
  box-shadow: 
    8px 8px 16px rgba(0, 0, 0, 0.3),
    -8px -8px 16px rgba(255, 255, 255, 0.03);
  transition: all var(--transition-normal, 0.3s ease);
}

.clay-light {
  background: var(--surface-2, #111111);
  box-shadow: 
    6px 6px 12px rgba(0, 0, 0, 0.15),
    -6px -6px 12px rgba(255, 255, 255, 0.05);
}

.clay-card {
  background: var(--surface, #0a0a0a);
  border-radius: var(--radius-2xl, 32px);
  padding: 1.5rem;
  box-shadow: 
    10px 10px 20px rgba(0, 0, 0, 0.35),
    -10px -10px 20px rgba(255, 255, 255, 0.03);
  transition: all var(--transition-normal, 0.3s ease);
}

.clay-card:hover {
  transform: translateY(-4px);
  box-shadow: 
    15px 15px 30px rgba(0, 0, 0, 0.4),
    -15px -15px 30px rgba(255, 255, 255, 0.04);
}

.clay-card-pressed {
  box-shadow: 
    inset 6px 6px 12px rgba(0, 0, 0, 0.25),
    inset -6px -6px 12px rgba(255, 255, 255, 0.02);
}

.clay-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: var(--surface, #0a0a0a);
  border: none;
  border-radius: var(--radius-lg, 16px);
  color: var(--text-main, #fcfcfc);
  font-weight: 500;
  cursor: pointer;
  box-shadow: 
    6px 6px 12px rgba(0, 0, 0, 0.3),
    -6px -6px 12px rgba(255, 255, 255, 0.03);
  transition: all var(--transition-fast, 0.2s ease);
}

.clay-btn:hover {
  transform: translateY(-2px);
  box-shadow: 
    8px 8px 16px rgba(0, 0, 0, 0.35),
    -8px -8px 16px rgba(255, 255, 255, 0.04);
}

.clay-btn:active {
  transform: translateY(1px);
  box-shadow: 
    inset 4px 4px 8px rgba(0, 0, 0, 0.2),
    inset -4px -4px 8px rgba(255, 255, 255, 0.02);
}

.clay-btn-primary {
  background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-2, #8b5cf6));
  color: white;
}

.clay-btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-light, #818cf8), var(--accent, #6366f1));
}

.clay-btn-success {
  background: linear-gradient(135deg, var(--success, #10b981), #059669);
  color: white;
}

.clay-btn-danger {
  background: linear-gradient(135deg, var(--error, #ef4444), #dc2626);
  color: white;
}

.clay-input {
  width: 100%;
  padding: 0.875rem 1.25rem;
  background: var(--surface, #0a0a0a);
  border: none;
  border-radius: var(--radius-lg, 16px);
  color: var(--text-main, #fcfcfc);
  font-size: 1rem;
  box-shadow: 
    inset 4px 4px 8px rgba(0, 0, 0, 0.2),
    inset -4px -4px 8px rgba(255, 255, 255, 0.02);
  transition: all var(--transition-fast, 0.2s ease);
}

.clay-input:focus {
  outline: none;
  box-shadow: 
    inset 6px 6px 12px rgba(0, 0, 0, 0.25),
    inset -6px -6px 12px rgba(255, 255, 255, 0.03);
}

.clay-input::placeholder {
  color: var(--text-muted, #9ca3af);
}

.clay-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--surface, #0a0a0a);
  border-radius: var(--radius-lg, 16px);
  box-shadow: 
    4px 4px 8px rgba(0, 0, 0, 0.25),
    -4px -4px 8px rgba(255, 255, 255, 0.03);
}

.clay-icon:active {
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.2),
    inset -3px -3px 6px rgba(255, 255, 255, 0.02);
}

.clay-icon-primary {
  background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-2, #8b5cf6));
  color: white;
  box-shadow: 
    4px 4px 8px rgba(0, 0, 0, 0.3),
    -4px -4px 8px rgba(255, 255, 255, 0.1);
}

.clay-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.75rem;
  background: var(--surface, #0a0a0a);
  border-radius: var(--radius-full, 9999px);
  font-size: 0.75rem;
  font-weight: 600;
  box-shadow: 
    3px 3px 6px rgba(0, 0, 0, 0.2),
    -3px -3px 6px rgba(255, 255, 255, 0.02);
}

.clay-progress {
  width: 100%;
  height: 12px;
  background: var(--surface, #0a0a0a);
  border-radius: var(--radius-full, 9999px);
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.2),
    inset -3px -3px 6px rgba(255, 255, 255, 0.02);
  overflow: hidden;
}

.clay-progress-bar {
  height: 100%;
  background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-2, #8b5cf6));
  border-radius: var(--radius-full, 9999px);
  transition: width var(--transition-normal, 0.3s ease);
}

.clay-toggle {
  width: 60px;
  height: 32px;
  background: var(--surface, #0a0a0a);
  border-radius: var(--radius-full, 9999px);
  box-shadow: 
    inset 4px 4px 8px rgba(0, 0, 0, 0.25),
    inset -4px -4px 8px rgba(255, 255, 255, 0.02);
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast, 0.2s ease);
}

.clay-toggle::after {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 24px;
  height: 24px;
  background: var(--surface-2, #111111);
  border-radius: 50%;
  box-shadow: 
    2px 2px 4px rgba(0, 0, 0, 0.2),
    -2px -2px 4px rgba(255, 255, 255, 0.03);
  transition: all var(--transition-fast, 0.2s ease);
}

.clay-toggle.active {
  background: linear-gradient(135deg, var(--accent, #6366f1), var(--accent-2, #8b5cf6));
}

.clay-toggle.active::after {
  left: 32px;
}

.clay-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--surface, #0a0a0a);
  box-shadow: 
    6px 6px 12px rgba(0, 0, 0, 0.3),
    -6px -6px 12px rgba(255, 255, 255, 0.03);
  padding: 4px;
}

.clay-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.clay-hover-lift {
  transition: all var(--transition-normal, 0.3s ease);
}

.clay-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: 
    12px 12px 24px rgba(0, 0, 0, 0.4),
    -12px -12px 24px rgba(255, 255, 255, 0.04);
}

.clay-press:active {
  transform: scale(0.98);
  box-shadow: 
    inset 6px 6px 12px rgba(0, 0, 0, 0.3),
    inset -6px -6px 12px rgba(255, 255, 255, 0.02);
}

.clay-float {
  animation: clay-float 4s ease-in-out infinite;
}

@keyframes clay-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

.clay-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background: var(--surface, #0a0a0a);
  border: none;
  border-radius: 50%;
  color: var(--text-main, #fcfcfc);
  cursor: pointer;
  box-shadow: 
    8px 8px 16px rgba(0, 0, 0, 0.3),
    -8px -8px 16px rgba(255, 255, 255, 0.03);
  transition: all var(--transition-fast, 0.2s ease);
}

.clay-icon-btn:hover {
  transform: scale(1.05);
  box-shadow: 
    10px 10px 20px rgba(0, 0, 0, 0.35),
    -10px -10px 20px rgba(255, 255, 255, 0.04);
}

.clay-icon-btn:active {
  transform: scale(0.95);
  box-shadow: 
    inset 6px 6px 12px rgba(0, 0, 0, 0.25),
    inset -6px -6px 12px rgba(255, 255, 255, 0.02);
}

.clay-search {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.25rem;
  background: var(--surface, #0a0a0a);
  border-radius: var(--radius-full, 9999px);
  box-shadow: 
    inset 4px 4px 8px rgba(0, 0, 0, 0.15),
    inset -4px -4px 8px rgba(255, 255, 255, 0.02);
}

.clay-search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-main, #fcfcfc);
  font-size: 0.95rem;
  outline: none;
}

.clay-search-input::placeholder {
  color: var(--text-muted, #9ca3af);
}

.clay-search-icon {
  color: var(--text-muted, #9ca3af);
  margin-right: 0.75rem;
}

[data-theme="light"] .clay,
[data-theme="light"] .clay-card,
[data-theme="light"] .clay-btn,
[data-theme="light"] .clay-input,
[data-theme="light"] .clay-icon,
[data-theme="light"] .clay-badge,
[data-theme="light"] .clay-progress,
[data-theme="light"] .clay-avatar {
  background: #f0f2f5;
  box-shadow: 
    8px 8px 16px rgba(0, 0, 0, 0.1),
    -8px -8px 16px rgba(255, 255, 255, 0.8);
}

[data-theme="light"] .clay-btn:active,
[data-theme="light"] .clay-card-pressed,
[data-theme="light"] .clay-input:focus,
[data-theme="light"] .clay-icon:active {
  box-shadow: 
    inset 4px 4px 8px rgba(0, 0, 0, 0.08),
    inset -4px -4px 8px rgba(255, 255, 255, 0.6);
}