.hearpost-widget {
	position: fixed;
	z-index: 9999;
}
.hearpost-widget.hearpost-pos-top-left     { top: 20px; left: 20px; }
.hearpost-widget.hearpost-pos-top-right    { top: 20px; right: 20px; }
.hearpost-widget.hearpost-pos-middle-left  { top: 50%; left: 20px; transform: translateY(-50%); }
.hearpost-widget.hearpost-pos-middle-right { top: 50%; right: 20px; transform: translateY(-50%); }
.hearpost-widget.hearpost-pos-bottom-left  { bottom: 20px; left: 20px; }
.hearpost-widget.hearpost-pos-bottom-right { bottom: 20px; right: 20px; }

.hearpost-toggle-btn {
	width: 52px; height: 52px; border-radius: 50%;
	border: none; background: var(--hearpost-color, #007f96); color: #FAF9F6;
	font-size: 22px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.hearpost-toggle-btn:hover { filter: brightness(0.85); }
.hearpost-widget.hearpost-open .hearpost-toggle-btn { display: none; }

.hearpost-panel {
	display: none;
	position: relative;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	width: 150px;
	padding: 16px 14px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.15);
	font-size: 13px;
	text-align: center;
}
.hearpost-widget.hearpost-open .hearpost-panel { display: flex; }

.hearpost-close-btn {
	position: absolute; top: 4px; right: 8px;
	border: none; background: transparent; cursor: pointer;
	font-size: 20px; line-height: 1; color: #999; padding: 0;
}
.hearpost-close-btn:hover { color: #333; }

.hearpost-widget-title { font-weight: 600; line-height: 1.3; padding-right: 12px; }
.hearpost-play-btn {
	width: 52px; height: 52px; border-radius: 50%;
	border: none; background: var(--hearpost-color, #007f96); color: #fff;
	font-size: 18px; line-height: 1; cursor: pointer;
	display: flex; align-items: center; justify-content: center;
}
.hearpost-play-btn:hover { filter: brightness(0.85); }
.hearpost-voice-label {
	display: flex; flex-direction: column; gap: 4px;
	width: 100%; font-size: 12px; color: #444;
}
.hearpost-voice-label select { width: 100%; padding: 2px 4px; }
.hearpost-speed-control {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	width: 100%; font-size: 12px; color: #444;
}
.hearpost-speed-control input[type="range"] { width: 100%; accent-color: var(--hearpost-color, #007f96); }
.hearpost-speed-value { font-weight: 600; color: var(--hearpost-color, #007f96); }
.hearpost-status { font-style: italic; color: #666; min-height: 14px; }
@media (max-width: 782px) {
	.hearpost-panel { width: 128px; padding: 12px 10px; }
	.hearpost-widget.hearpost-pos-top-left, .hearpost-widget.hearpost-pos-middle-left, .hearpost-widget.hearpost-pos-bottom-left { left: 10px; }
	.hearpost-widget.hearpost-pos-top-right, .hearpost-widget.hearpost-pos-middle-right, .hearpost-widget.hearpost-pos-bottom-right { right: 10px; }
}