/* Media queries and responsive styles */

/* Mobile responsive layouts */
@media (max-width: 768px) {
	.modal-content {
		width: 100% !important;
		height: 100% !important;
		max-width: 100% !important;
		max-height: 100% !important;
		border-radius: 0 !important;
		flex-direction: column !important;
	}
	
	.command-sidebar {
		width: 100% !important;
		height: auto !important;
		border-right: none !important;
		border-bottom: 1px solid var(--border-color);
	}
	
	.sidebar-section {
		display: none;
	}
	
	.sidebar-account {
		display: none;
	}
	
	.command-main {
		height: 100%;
	}
	
	.auth-btn {
		padding: 6px 16px;
		font-size: 13px;
	}
	
	.plans-grid { 
		grid-template-columns: 1fr !important; 
	}
}

/* AI Animations */
@keyframes aiPopupShow {
	0% {
		transform: scale(0.8) translateY(-10px);
		opacity: 0;
	}
	60% {
		transform: scale(1.05) translateY(2px);
	}
	100% {
		transform: scale(1) translateY(0);
		opacity: 1;
	}
}

@keyframes aiChatShow {
	0% {
		transform: translateY(100px) scale(0.9);
		opacity: 0;
	}
	60% {
		transform: translateY(-10px) scale(1.02);
		opacity: 0.8;
	}
	100% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
}

@keyframes aiChatHide {
	0% {
		transform: translateY(0) scale(1);
		opacity: 1;
	}
	100% {
		transform: translateY(50px) scale(0.95);
		opacity: 0;
	}
}

@keyframes aiProcessing {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes aiTextHighlight {
	0% { background: transparent; }
	50% { background: rgba(0, 123, 255, 0.1); }
	100% { background: transparent; }
}

.ai-processing {
	animation: aiProcessing 1s linear infinite;
}

.ai-text-highlight {
	animation: aiTextHighlight 0.5s ease-in-out;
}

@keyframes aiToastShow {
	0% {
		transform: translateX(100%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes aiToastHide {
	0% {
		transform: translateX(0);
		opacity: 1;
	}
	100% {
		transform: translateX(100%);
		opacity: 0;
	}
}

/* 新しいAIアニメーションパターン */
@keyframes aiGlowPulse {
	0%, 100% {
		box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
		transform: scale(1);
	}
	50% {
		box-shadow: 0 0 20px rgba(0, 123, 255, 0.6), 0 0 30px rgba(0, 123, 255, 0.4);
		transform: scale(1.02);
	}
}

@keyframes aiMatrix {
	0% {
		opacity: 0;
		transform: translateY(-20px) rotateX(90deg);
	}
	25% {
		opacity: 0.3;
		transform: translateY(-10px) rotateX(45deg);
	}
	50% {
		opacity: 0.7;
		transform: translateY(-5px) rotateX(15deg);
	}
	100% {
		opacity: 1;
		transform: translateY(0) rotateX(0deg);
	}
}

@keyframes aiWaveform {
	0%, 100% {
		transform: scaleY(1);
	}
	25% {
		transform: scaleY(1.5);
	}
	50% {
		transform: scaleY(0.8);
	}
	75% {
		transform: scaleY(1.3);
	}
}

@keyframes aiHologram {
	0% {
		opacity: 0;
		transform: scale(0.3) rotateY(180deg);
		filter: hue-rotate(0deg);
	}
	30% {
		opacity: 0.7;
		transform: scale(0.8) rotateY(90deg);
		filter: hue-rotate(90deg);
	}
	60% {
		opacity: 0.9;
		transform: scale(1.1) rotateY(30deg);
		filter: hue-rotate(180deg);
	}
	100% {
		opacity: 1;
		transform: scale(1) rotateY(0deg);
		filter: hue-rotate(270deg);
	}
}

@keyframes aiQuantumFlicker {
	0%, 100% {
		opacity: 1;
		transform: scale(1) rotate(0deg);
		filter: brightness(1);
	}
	10% {
		opacity: 0.8;
		transform: scale(1.02) rotate(1deg);
		filter: brightness(1.2);
	}
	20% {
		opacity: 0.9;
		transform: scale(0.98) rotate(-1deg);
		filter: brightness(0.9);
	}
	30% {
		opacity: 1.0;
		transform: scale(1.01) rotate(0.5deg);
		filter: brightness(1.1);
	}
	40% {
		opacity: 0.85;
		transform: scale(0.99) rotate(-0.5deg);
		filter: brightness(1.0);
	}
	50% {
		opacity: 1.0;
		transform: scale(1.0) rotate(0deg);
		filter: brightness(1.0);
	}
}

@keyframes aiNeonScan {
	0% {
		background-position: -100% 0;
	}
	100% {
		background-position: 100% 0;
	}
}

@keyframes aiDataStream {
	0% {
		transform: translateX(-100%);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	90% {
		opacity: 1;
	}
	100% {
		transform: translateX(100%);
		opacity: 0;
	}
}

/* アニメーションクラス */
.ai-glow-pulse {
	animation: aiGlowPulse 2s ease-in-out infinite;
}

.ai-matrix {
	animation: aiMatrix 0.8s ease-out;
}

.ai-waveform {
	animation: aiWaveform 1.5s ease-in-out infinite;
}

.ai-hologram {
	animation: aiHologram 1.2s ease-in-out;
}

.ai-quantum-flicker {
	animation: aiQuantumFlicker 3s ease-in-out infinite;
}

.ai-neon-scan {
	background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.4), transparent);
	background-size: 200% 100%;
	animation: aiNeonScan 2s linear infinite;
}

.ai-data-stream::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.6), transparent);
	animation: aiDataStream 1.5s linear infinite;
}

/* Board selector responsive */
@media (max-width: 600px) {
	.board-selector {
		top: 5px;
		left: 5px;
		padding: 6px 10px;
		gap: 8px;
	}
	
	.board-selector label {
		font-size: 12px;
	}
	
	.board-selector select {
		font-size: 12px;
		padding: 3px 6px;
	}
	
	.board-btn {
		font-size: 11px;
		padding: 3px 6px;
	}
}

/* Timer responsive */
@media (max-width: 768px) {
	.countdown-timer {
		right: 10px;
		top: 10px;
		padding: 10px 15px;
		gap: 10px;
	}
	
	.timer-display {
		font-size: 16px;
	}
	
	.progress-bars {
		height: 16px;
	}
	
	.progress-bar {
		width: 2px;
	}
}