/**
 * TAO TTS Player — Frontend Styles
 * @package TaoTtsPlayer
 */

.tao-tts-player {
	position: fixed;
	z-index: 9998;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.tao-tts-bottom-right { bottom: 20px; right: 20px; }
.tao-tts-bottom-left  { bottom: 20px; left: 20px; }

/* Toggle button */
.tao-tts-toggle {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.5rem;
	background: linear-gradient(135deg, #3b82f6, #8b5cf6);
	color: #fff;
	border: none;
	border-radius: 50px;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(59,130,246,.4);
	transition: transform .3s, box-shadow .3s;
}
.tao-tts-toggle:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(59,130,246,.5); }
.tao-tts-toggle:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.tao-tts-toggle .tts-icon { font-size: 1.25rem; animation: tao-tts-pulse 2s ease-in-out infinite; }
@keyframes tao-tts-pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.1)} }

/* Controls panel */
.tao-tts-controls {
	position: fixed;
	width: 380px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 60px rgba(0,0,0,.3);
	overflow: hidden;
	animation: tao-tts-up .3s ease-out;
}
.tao-tts-bottom-right .tao-tts-controls { bottom: 20px; right: 20px; }
.tao-tts-bottom-left  .tao-tts-controls { bottom: 20px; left: 20px; }
@keyframes tao-tts-up { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }
.tao-tts-controls.is-minimised .tts-controls-body { display: none; }

/* Header */
.tts-controls-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1rem 1.25rem;
	background: linear-gradient(135deg, #3b82f6, #8b5cf6);
	color: #fff;
}
.tts-title { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: 1rem; }
.tts-engine-badge {
	font-size: .7rem; font-weight: 700; padding: 2px 7px;
	background: rgba(255,255,255,.25); border-radius: 20px; letter-spacing: .03em;
}
.tts-minimize,.tts-close {
	width: 32px; height: 32px; border: none;
	background: rgba(255,255,255,.2); color: #fff;
	border-radius: 8px; font-size: 1.25rem; cursor: pointer;
	transition: background .2s; display: flex; align-items: center; justify-content: center;
}
.tts-minimize:hover,.tts-close:hover { background: rgba(255,255,255,.35); }
.tts-minimize:focus-visible,.tts-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Body */
.tts-controls-body { padding: 1.25rem; }

.tts-progress-bar { width:100%; height:6px; background:#e5e7eb; border-radius:3px; overflow:hidden; margin-bottom:1.25rem; }
.tts-progress-fill { height:100%; background:linear-gradient(90deg,#3b82f6,#8b5cf6); width:0%; transition:width .3s; }

.tts-controls-row { display:flex; align-items:center; gap:1rem; margin-bottom:1rem; }

.tts-btn {
	width:48px; height:48px; border:none; background:#f3f4f6;
	border-radius:12px; font-size:1.25rem; cursor:pointer;
	transition:background .2s,transform .2s; display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.tts-btn:hover { background:#e5e7eb; transform:scale(1.05); }
.tts-btn:focus-visible { outline:3px solid #3b82f6; outline-offset:2px; }
.tts-play { background:linear-gradient(135deg,#3b82f6,#8b5cf6); color:#fff; }
.tts-play:hover { background:linear-gradient(135deg,#2563eb,#7c3aed); }

.tts-speed-control { flex:1; display:flex; align-items:center; gap:.5rem; }
.tts-speed-control label { font-size:.875rem; font-weight:600; color:#6b7280; white-space:nowrap; }
.tts-speed-control select {
	flex:1; padding:.5rem .75rem; border:2px solid #e5e7eb; border-radius:8px;
	font-size:.875rem; font-weight:600; cursor:pointer; background:#fff; transition:border-color .2s;
}
.tts-speed-control select:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }

.tts-pitch-control { display:flex; align-items:center; gap:.5rem; margin-bottom:1rem; }
.tts-pitch-control label { font-size:.875rem; font-weight:600; color:#6b7280; white-space:nowrap; }
.tts-pitch-control input[type=range] {
	flex:1; height:6px; border-radius:3px;
	background:linear-gradient(to right,#3b82f6,#8b5cf6);
	outline:none; -webkit-appearance:none; appearance:none; cursor:pointer;
}
.tts-pitch-control input[type=range]::-webkit-slider-thumb {
	-webkit-appearance:none; appearance:none; width:20px; height:20px;
	border-radius:50%; background:#fff; border:3px solid #3b82f6; cursor:pointer;
	box-shadow:0 2px 8px rgba(59,130,246,.4);
}
.tts-pitch-control input[type=range]::-moz-range-thumb {
	width:20px; height:20px; border-radius:50%; background:#fff;
	border:3px solid #3b82f6; cursor:pointer; box-shadow:0 2px 8px rgba(59,130,246,.4);
}
#tts-pitch-value { font-size:.875rem; font-weight:700; color:#3b82f6; min-width:2.5rem; text-align:right; }

.tts-voice-control { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.tts-voice-control label { font-size:.875rem; font-weight:600; color:#6b7280; }
.tts-voice-control select {
	width:100%; padding:.75rem 1rem; border:2px solid #e5e7eb; border-radius:8px;
	font-size:.875rem; cursor:pointer; background:#fff; transition:border-color .2s;
}
.tts-voice-control select:focus { outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.15); }

.tts-status {
	text-align:center; padding:.75rem; background:#f9fafb; border-radius:8px;
	font-size:.875rem; color:#6b7280; font-weight:500; transition:background .3s,color .3s;
}
.tts-status.is-speaking {
	background:linear-gradient(135deg,rgba(59,130,246,.1),rgba(139,92,246,.1));
	color:#3b82f6; font-weight:600;
}
.tts-status.is-loading { color:#f59e0b; font-weight:600; }

@media (max-width:768px) {
	.tao-tts-bottom-right,.tao-tts-bottom-left { bottom:80px; }
	.tao-tts-bottom-right { right:10px; }
	.tao-tts-bottom-left  { left:10px; }
	.tao-tts-toggle { padding:.875rem 1.125rem; }
	.tao-tts-toggle .tts-label { display:none; }
	.tao-tts-toggle .tts-icon { font-size:1.5rem; }
	.tao-tts-bottom-right .tao-tts-controls { width:calc(100vw - 20px); right:10px; bottom:80px; }
	.tao-tts-bottom-left  .tao-tts-controls { width:calc(100vw - 20px); left:10px;  bottom:80px; }
	.tts-controls-body { padding:1rem; }
	.tts-btn { width:44px; height:44px; }
}