/* Virtual Speaking Classroom — styled to match the MyIELTSWorld LMS theme.
   Bright & bubbly: Quicksand/Nunito, teal primary, coral + amber accents,
   white cards on a soft sky background, pill buttons, generous radii. */

.vc-app {
	--vc-primary: #2B84A0;
	--vc-primary-dark: #1F6882;
	--vc-primary-light: rgba(43, 132, 160, 0.07);
	--vc-primary-glow: rgba(43, 132, 160, 0.15);
	--vc-sky: #7BBFD0;
	--vc-violet: #5F8CBE;
	--vc-coral: #E07A5F;
	--vc-coral-soft: rgba(224, 122, 95, 0.35);
	--vc-amber: #E2A84B;
	--vc-text: #1E3A4A;
	--vc-text-soft: #4A6B7C;
	--vc-text-muted: #8FA8B8;
	--vc-bg: #EEF5F9;
	--vc-card: #ffffff;
	--vc-line: #C1D8E4;
	--vc-line-light: #D8EAF0;
	--vc-danger: #E25C5C;
	--vc-radius: 18px;
	--vc-radius-lg: 24px;
	--vc-radius-pill: 999px;
	--vc-shadow: 0 4px 20px rgba(43, 132, 160, 0.08), 0 1px 4px rgba(0, 0, 0, 0.03);
	--vc-shadow-lg: 0 12px 40px rgba(43, 132, 160, 0.12), 0 4px 12px rgba(0, 0, 0, 0.04);

	font-family: 'Quicksand', 'Nunito', system-ui, sans-serif;
	background:
		radial-gradient(1100px 600px at 50% -10%, #E1F0F6 0%, var(--vc-bg) 55%, #F5F8FA 100%);
	color: var(--vc-text);
	min-height: 100vh;
	min-height: 100dvh;
	border-radius: 0;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
}
/* Leave room for the WP admin bar when logged in */
body.admin-bar .vc-app { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); }
@media (max-width: 782px) {
	body.admin-bar .vc-app { min-height: calc(100vh - 46px); min-height: calc(100dvh - 46px); }
}
.vc-app.is-fullscreen { min-height: 100vh; }
.vc-app *, .vc-app *::before, .vc-app *::after { box-sizing: border-box; }

/* Defensive resets — themes love to style these. :where() keeps specificity
   at zero so our own component rules always win. */
.vc-app :where(h1, h2, h3, p, ul, form, section) { margin: 0; padding: 0; }
.vc-app :where(section) { background: none; border: none; }
.vc-app :where(input, button, select) {
	font-family: inherit; line-height: 1.4; box-shadow: none; text-transform: none; letter-spacing: normal;
}
.vc-app :where(button) { background-image: none; }
.vc-app :where(label) { display: block; }

/* Chrome autofill repaint — keep inputs white with dark text */
.vc-app input:-webkit-autofill,
.vc-app input:-webkit-autofill:hover,
.vc-app input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 1000px #ffffff inset;
	-webkit-text-fill-color: #1E3A4A;
	caret-color: #1E3A4A;
	transition: background-color 9999s ease-in-out 0s;
}

.vc-app .vc-screen { flex: 1; display: flex; flex-direction: column; }
.vc-app .vc-screen[hidden] { display: none; }

.vc-app .vc-eyebrow {
	font-size: 11px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--vc-primary);
	font-weight: 700;
}
.vc-app .vc-title {
	font-family: 'Quicksand', 'Nunito', system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(26px, 4vw, 40px);
	line-height: 1.15;
	margin: 10px 0 14px;
	color: var(--vc-text);
}

/* ---------------- Setup ---------------- */

.vc-app .vc-setup, .vc-app .vc-login { align-items: center; justify-content: center; padding: 48px 20px; }
.vc-app .vc-setup-card {
	width: min(540px, 100%); max-width: 540px; margin: 0 auto; text-align: left;
	background: var(--vc-card);
	border: 1px solid var(--vc-line-light);
	border-radius: var(--vc-radius-lg);
	box-shadow: var(--vc-shadow-lg);
	padding: 36px 34px 32px;
}
.vc-app .vc-sub { color: var(--vc-text-soft); line-height: 1.65; margin: 0 0 26px; }
.vc-app .vc-sub em { color: var(--vc-text); font-style: normal; border-bottom: 2px solid var(--vc-amber); }

.vc-app .vc-field { display: block; margin-bottom: 18px; }
.vc-app .vc-field span {
	display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--vc-text-soft); font-weight: 700; margin-bottom: 7px;
}
.vc-app .vc-field input {
	width: 100%; padding: 13px 15px; font-size: 16px; font-weight: 500;
	background: #fff; color: var(--vc-text);
	border: 1px solid var(--vc-line); border-radius: 12px; outline: none;
	font-family: inherit;
	transition: border-color 0.15s, box-shadow 0.15s;
}
.vc-app .vc-field input::placeholder { color: var(--vc-text-muted); }
.vc-app .vc-field input:focus { border-color: var(--vc-primary); box-shadow: 0 0 0 3px var(--vc-primary-glow); }

.vc-app .vc-drop {
	display: flex; flex-direction: column; align-items: center; gap: 5px;
	padding: 30px 18px; margin-bottom: 24px; cursor: pointer;
	border: 2px dashed var(--vc-line); border-radius: var(--vc-radius);
	background: #FAFDFE;
	transition: border-color 0.2s, background 0.2s;
	text-align: center;
}
.vc-app .vc-drop:hover, .vc-app .vc-drop.is-over { border-color: var(--vc-primary); background: var(--vc-primary-light); }
.vc-app .vc-drop.has-file { border-style: solid; border-color: var(--vc-primary); background: var(--vc-primary-light); }
.vc-app .vc-drop-icon { font-size: 22px; color: var(--vc-primary); }
.vc-app .vc-drop-label { font-weight: 600; }
.vc-app .vc-drop-hint { font-size: 12px; color: var(--vc-text-muted); }

.vc-app .vc-btn {
	font-family: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
	border: 2px solid transparent; border-radius: var(--vc-radius-pill); padding: 13px 26px;
	transition: transform 0.12s, box-shadow 0.12s, opacity 0.2s, background 0.15s, color 0.15s;
}
.vc-app .vc-btn:active { transform: translateY(1px); }
.vc-app .vc-btn-primary { background: var(--vc-primary); border-color: var(--vc-primary); color: #fff; width: 100%; }
.vc-app .vc-btn-primary:hover:not(:disabled) { background: var(--vc-primary-dark); border-color: var(--vc-primary-dark); box-shadow: 0 6px 22px rgba(43, 132, 160, 0.3); }
.vc-app .vc-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }
.vc-app .vc-setup-note { color: var(--vc-danger); font-size: 14px; font-weight: 600; min-height: 20px; margin-top: 12px; }

/* ---------------- Room ---------------- */

.vc-app .vc-room-bar {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 22px;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid var(--vc-line-light);
}
.vc-app .vc-room-topic {
	font-size: 17px; font-weight: 700; color: var(--vc-text);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vc-app .vc-room-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.vc-app .vc-icon-btn {
	background: #fff; border: 1px solid var(--vc-line); color: var(--vc-text-soft);
	width: 38px; height: 38px; border-radius: 12px; cursor: pointer; font-size: 16px;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.vc-app .vc-icon-btn:hover { border-color: var(--vc-primary); color: var(--vc-primary); background: var(--vc-primary-light); }
.vc-app .vc-btn-end { background: transparent; color: var(--vc-danger); border: 2px solid var(--vc-danger); padding: 7px 16px; font-size: 13px; }
.vc-app .vc-btn-end:hover { background: var(--vc-danger); color: #fff; }

/* ---------------- Whiteboard ---------------- */

.vc-app .vc-board {
	width: min(720px, calc(100% - 36px));
	margin: 18px auto 0;
	flex-shrink: 0;
}
.vc-app .vc-board-frame {
	position: relative;
	background:
		linear-gradient(160deg, #ffffff 0%, #FBFDFE 100%);
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius);
	box-shadow: var(--vc-shadow);
	padding: 14px 20px 16px;
	min-height: 68px;
}
.vc-app .vc-board-label {
	position: absolute; top: -9px; left: 18px;
	font-size: 10px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--vc-primary);
	background: var(--vc-card);
	border: 1px solid var(--vc-line-light);
	border-radius: var(--vc-radius-pill);
	padding: 2px 10px;
}
.vc-app .vc-board-lines {
	display: flex; flex-direction: column; gap: 2px;
	max-height: 132px; overflow-y: auto;
	font-family: 'Caveat', 'Quicksand', cursive;
	font-size: clamp(19px, 2.6vmin, 24px);
	font-weight: 600;
	line-height: 1.35;
	color: var(--vc-primary-dark);
}
.vc-app .vc-board-line { display: flex; gap: 9px; align-items: baseline; animation: vc-board-in 0.45s ease-out; }
.vc-app .vc-board-line::before { content: '—'; color: var(--vc-coral); flex-shrink: 0; }
.vc-app .vc-board-line:nth-child(3n)   { color: #205F76; transform: rotate(-0.3deg); }
.vc-app .vc-board-line:nth-child(3n+2) { transform: rotate(0.25deg); }
.vc-app .vc-board-empty {
	font-family: 'Quicksand', system-ui, sans-serif;
	font-size: 13px; font-weight: 600; color: var(--vc-text-muted);
	padding: 6px 0;
}
@keyframes vc-board-in {
	from { opacity: 0; transform: translateY(5px); }
	to   { opacity: 1; transform: none; }
}
.vc-app .vc-board-tray {
	width: 62%; height: 7px; margin: 0 auto;
	background: linear-gradient(180deg, var(--vc-line-light), var(--vc-line));
	border-radius: 0 0 8px 8px;
	box-shadow: 0 4px 10px rgba(43, 132, 160, 0.12);
}

/* ---------------- Table ---------------- */

.vc-app .vc-table-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 20px 24px 24px; min-height: 0; }
.vc-app .vc-table {
	position: relative;
	width: min(66vmin, 520px);
	aspect-ratio: 1;
}
/* The seminar table itself */
.vc-app .vc-table::before {
	content: '';
	position: absolute; inset: 18%;
	border-radius: 50%;
	background:
		radial-gradient(circle at 35% 30%, #ffffff, #E6F2F7 72%);
	border: 1px solid var(--vc-line);
	box-shadow: inset 0 2px 22px rgba(43, 132, 160, 0.1), var(--vc-shadow-lg);
}
.vc-app .vc-table-center {
	position: absolute; inset: 24%;
	display: flex; align-items: center; justify-content: center;
	text-align: center; border-radius: 50%;
}
.vc-app .vc-status {
	font-size: clamp(13px, 1.8vmin, 16px);
	font-weight: 600;
	color: var(--vc-text-soft);
	max-width: 85%; line-height: 1.5;
}

/* Seats orbit the table — left/top percentages are parent-relative */
.vc-app .vc-seat {
	position: absolute;
	left: calc(50% + cos(var(--angle)) * 44%);
	top: calc(50% + sin(var(--angle)) * 44%);
	transform: translate(-50%, -50%);
	display: flex; flex-direction: column; align-items: center; gap: 7px;
	width: 92px; text-align: center;
}
.vc-app .vc-avatar {
	--amp: 1;
	position: relative; width: clamp(46px, 9vmin, 66px); aspect-ratio: 1;
	display: flex; align-items: center; justify-content: center;
}
.vc-app .vc-avatar-face {
	width: 100%; height: 100%; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: clamp(14px, 2.4vmin, 19px);
	background: hsl(var(--hue), 55%, 92%);
	color: hsl(var(--hue), 45%, 32%);
	border: 2px solid hsl(var(--hue), 45%, 74%);
	box-shadow: var(--vc-shadow);
	position: relative; z-index: 1;
	transition: box-shadow 0.25s;
}
.vc-app .vc-avatar-ring {
	position: absolute; inset: -7px; border-radius: 50%;
	border: 2.5px solid transparent;
	transition: border-color 0.25s;
}
.vc-app .vc-seat.is-speaking .vc-avatar-ring {
	border-color: var(--vc-coral);
	transform: scale(var(--amp));
	box-shadow: 0 0 24px var(--vc-coral-soft);
}
.vc-app .vc-seat.is-speaking .vc-avatar-face { box-shadow: 0 0 0 3px var(--vc-coral-soft); }
.vc-app .vc-seat-name {
	font-size: clamp(11px, 1.6vmin, 13px); font-weight: 700; color: var(--vc-text);
	display: flex; flex-direction: column; line-height: 1.3;
}
.vc-app .vc-seat-name em {
	font-style: normal; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--vc-primary); font-weight: 700;
}
.vc-app .vc-seat-you .vc-avatar-face { border-style: dashed; }

/* Footer / mic */
.vc-app .vc-room-foot {
	display: flex; flex-direction: column; align-items: center; gap: 10px;
	padding: 10px 20px 26px;
}
.vc-app .vc-mic {
	position: relative; width: 72px; height: 72px; border-radius: 50%;
	border: 2px solid var(--vc-primary); background: #fff;
	color: var(--vc-primary); cursor: pointer;
	box-shadow: var(--vc-shadow);
	display: flex; align-items: center; justify-content: center;
	transition: background 0.2s, color 0.2s, transform 0.12s;
}
.vc-app .vc-mic:hover { background: var(--vc-primary-light); }
.vc-app .vc-mic:active { transform: scale(0.96); }
.vc-app .vc-mic.is-live { background: var(--vc-primary); color: #fff; }
.vc-app .vc-mic-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; }
.vc-app .vc-mic.is-live .vc-mic-ring { border-color: var(--vc-primary-glow); animation: vc-pulse 1.4s ease-out infinite; }
@keyframes vc-pulse {
	0% { transform: scale(1); opacity: 1; }
	100% { transform: scale(1.45); opacity: 0; }
}
.vc-app .vc-mic:disabled { opacity: 0.35; cursor: not-allowed; }
.vc-app .vc-mic-hint { font-size: 13px; font-weight: 600; color: var(--vc-text-soft); margin: 0; text-align: center; }

/* ---------------- Report ---------------- */

.vc-app .vc-report { overflow-y: auto; }
.vc-app .vc-report-inner { width: min(700px, 100%); margin: 0 auto; padding: 48px 24px 64px; }
.vc-app .vc-report-loading { text-align: center; padding-top: 18vh; color: var(--vc-text-soft); font-weight: 600; }
.vc-app .vc-spinner {
	width: 42px; height: 42px; margin: 0 auto 18px; border-radius: 50%;
	border: 3px solid var(--vc-line-light); border-top-color: var(--vc-primary);
	animation: vc-spin 0.9s linear infinite;
}
@keyframes vc-spin { to { transform: rotate(360deg); } }
.vc-app .vc-report-summary { color: var(--vc-text-soft); line-height: 1.7; font-size: 16px; margin: 0 0 34px; }

.vc-app .vc-cats { display: flex; flex-direction: column; gap: 18px; }
.vc-app .vc-cat {
	background: var(--vc-card); border: 1px solid var(--vc-line-light);
	border-radius: var(--vc-radius); box-shadow: var(--vc-shadow); padding: 22px 24px;
}
.vc-app .vc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; }
.vc-app .vc-cat-head h2 { font-family: inherit; font-size: 19px; font-weight: 700; color: var(--vc-text); }
.vc-app .vc-dial { position: relative; width: 58px; height: 58px; flex-shrink: 0; }
.vc-app .vc-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vc-app .vc-dial circle { fill: none; stroke-width: 3.2; }
.vc-app .vc-dial-track { stroke: var(--vc-line-light); }
.vc-app .vc-dial-fill {
	stroke: var(--vc-primary); stroke-linecap: round;
	stroke-dasharray: calc(var(--score) * 10) 100;
	/* r=15.9 → circumference ≈ 100 */
}
.vc-app .vc-dial span {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 16px; color: var(--vc-text);
}
.vc-app .vc-dial small { font-size: 10px; color: var(--vc-text-muted); margin-left: 1px; }
.vc-app .vc-cat-comment { color: var(--vc-text); line-height: 1.65; margin: 0 0 12px; }
.vc-app .vc-cat-sugg h3 {
	font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--vc-coral); margin: 0 0 8px; font-weight: 700;
}
.vc-app .vc-cat-sugg ul { margin: 0; padding-left: 18px; color: var(--vc-text-soft); line-height: 1.65; }
.vc-app .vc-cat-sugg li { margin-bottom: 4px; }
.vc-app .vc-report-again { margin-top: 34px; }
.vc-app .vc-report-error { text-align: center; padding-top: 16vh; }
.vc-app .vc-report-error p { color: var(--vc-danger); font-weight: 600; margin-bottom: 22px; }

/* Motion sensitivity */
@media (prefers-reduced-motion: reduce) {
	.vc-app .vc-mic.is-live .vc-mic-ring { animation: none; }
	.vc-app .vc-seat.is-speaking .vc-avatar-ring { transform: none; }
	.vc-app .vc-spinner { animation-duration: 2s; }
	.vc-app .vc-board-line { animation: none; }
}

/* Small screens */
@media (max-width: 560px) {
	.vc-app .vc-seat { width: 70px; }
	.vc-app .vc-room-topic { font-size: 14px; }
	.vc-app .vc-btn-end { padding: 6px 12px; font-size: 12px; }
	.vc-app .vc-setup-card { padding: 26px 20px 24px; }
	.vc-app .vc-board { width: calc(100% - 24px); margin-top: 14px; }
	.vc-app .vc-board-lines { max-height: 96px; }
}

/* Fixed classroom document notice on the setup screen */
.vc-app .vc-docnote {
	display: flex; flex-direction: column; gap: 4px;
	padding: 20px 20px; margin-bottom: 24px;
	border: 2px solid var(--vc-amber); border-radius: var(--vc-radius);
	background: rgba(226, 168, 75, 0.08);
}
.vc-app .vc-docnote-label {
	font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--vc-amber); font-weight: 700;
}
.vc-app .vc-docnote-name { font-size: 17px; font-weight: 700; color: var(--vc-text); }
.vc-app .vc-docnote-empty { border-color: var(--vc-line); background: #FAFDFE; }
.vc-app .vc-docnote-empty .vc-docnote-name { font-size: 15px; font-weight: 600; color: var(--vc-text-soft); }

/* Class picker */
.vc-app .vc-class-list { display: flex; flex-direction: column; gap: 12px; }
.vc-app .vc-class-btn {
	display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
	width: 100%; text-align: left; padding: 18px 20px;
	background: #fff; color: var(--vc-text);
	border: 2px solid var(--vc-line-light); border-radius: var(--vc-radius);
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.vc-app .vc-class-btn:hover { border-color: var(--vc-primary); background: var(--vc-primary-light); box-shadow: var(--vc-shadow); }
.vc-app .vc-class-btn strong { font-size: 18px; font-weight: 700; }
.vc-app .vc-class-btn span { font-size: 13px; font-weight: 600; color: var(--vc-text-soft); }

/* Optional logo on the sign-in screen and feedback report */
.vc-app .vc-logo {
	display: block;
	margin: 0 auto 26px;
	max-height: 72px;
	max-width: min(220px, 60%);
	width: auto;
	height: auto;
	object-fit: contain;
}

/* The hidden attribute must always win over component display rules */
.vc-app [hidden] { display: none !important; }