/**
 * Hmeonot Accessibility — floating widget (RTL-first, no external resources).
 * Phase 2: button + dialog panel + focus styles. Feature styles arrive in Phase 3.
 */

.hma-root {
	--hma-primary: #0f5fa6;
	--hma-btn-size: 56px;
	--hma-gap: 16px;
	--hma-radius: 12px;
	--hma-text: #1a1a1a;
	--hma-bg: #ffffff;
	position: fixed;
	z-index: 2147483000;
	direction: rtl;
}

/* Positions (logical) */
/* Physical left/right so "left" is visually left even in RTL. */
.hma-pos-bottom-left  { bottom: var(--hma-offset, 16px); left: var(--hma-gap); right: auto; }
.hma-pos-bottom-right { bottom: var(--hma-offset, 16px); right: var(--hma-gap); left: auto; }
.hma-pos-top-left     { top: var(--hma-gap); left: var(--hma-gap); right: auto; }
.hma-pos-top-right    { top: var(--hma-gap); right: var(--hma-gap); left: auto; }

/* Toggle button */
.hma-toggle {
	width: var(--hma-btn-size);
	height: var(--hma-btn-size);
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--hma-primary);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
	padding: 0;
	transition: transform .15s ease, box-shadow .15s ease;
}

.hma-toggle:hover { transform: scale(1.05); }
.hma-icon { fill: currentColor; }

/* Panel (dialog) */
.hma-panel {
	position: absolute;
	inset-block-end: calc(var(--hma-btn-size) + 12px);
	left: 0;
	right: auto;
	width: min(360px, calc(100vw - 2 * var(--hma-gap)));
	max-height: min(70vh, 560px);
	overflow-y: auto;
	background: var(--hma-bg);
	color: var(--hma-text);
	border-radius: var(--hma-radius);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
	padding: 0;
}

.hma-pos-top-left .hma-panel,
.hma-pos-top-right .hma-panel {
	inset-block-end: auto;
	inset-block-start: calc(var(--hma-btn-size) + 12px);
}
.hma-pos-bottom-right .hma-panel,
.hma-pos-top-right .hma-panel {
	left: auto;
	right: 0;
}

.hma-panel[hidden] { display: none; }

.hma-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 16px;
	border-block-end: 1px solid #e3e3e3;
	background: var(--hma-primary);
	color: #fff;
	border-start-start-radius: var(--hma-radius);
	border-start-end-radius: var(--hma-radius);
}

.hma-panel-title { margin: 0; font-size: 1.125rem; line-height: 1.3; }

.hma-close {
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	width: 44px;
	height: 44px;
	cursor: pointer;
	border-radius: 8px;
}

.hma-panel-body { padding: 16px; display: flex; flex-direction: column; gap: 16px; }

.hma-group { display: flex; flex-direction: column; gap: 8px; }
.hma-group-title { font-weight: 700; font-size: .95rem; color: #1a1a1a; }
.hma-btns { display: flex; flex-wrap: wrap; gap: 8px; }

.hma-ctrl,
.hma-reset {
	min-height: 44px;
	padding: 8px 14px;
	border: 1px solid #c7c7c7;
	border-radius: 8px;
	background: #f5f7fa;
	color: #1a1a1a;
	font-size: .95rem;
	cursor: pointer;
	flex: 1 1 auto;
}

.hma-ctrl:hover,
.hma-reset:hover { background: #e9eef5; }

.hma-ctrl[aria-pressed="true"] {
	background: var(--hma-primary);
	color: #fff;
	border-color: var(--hma-primary);
	font-weight: 700;
}

.hma-group-reset { margin-block-start: 4px; }
html.hma-no-tts .hma-tts-group { display: none !important; }
html.hma-no-voice .hma-voice-group { display: none !important; }
.hma-voice-note { font-size: .78rem; color: #555; margin: 6px 0 0; line-height: 1.4; }
.hma-color-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hma-color-row label { display: flex; align-items: center; gap: 6px; font-size: .9rem; }
.hma-color-row input[type="color"] { width: 40px; height: 36px; padding: 0; border: 1px solid #c7c7c7; border-radius: 6px; cursor: pointer; }

.hma-lens { position: fixed; z-index: 2147483000; width: 240px; height: 240px; border-radius: 50%; border: 3px solid #0f5fa6; overflow: hidden; display: none; box-shadow: 0 6px 24px rgba(0,0,0,.4); background: #fff; pointer-events: none; }
.hma-lens-inner { position: absolute; top: 0; inset-inline-start: 0; transform-origin: 0 0; }

.hma-distress-btn { width: 100%; min-height: 48px; border: 0; border-radius: 8px; background: #c62828; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; }
.hma-distress-btn:hover { background: #a91e1e; }
.hma-distress-modal { position: fixed; inset: 0; z-index: 2147483002; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); }
.hma-distress-modal[hidden] { display: none; }
.hma-distress-card { background: #fff; color: #1a1a1a; border-radius: 12px; padding: 20px; width: min(360px, 92vw); position: relative; display: flex; flex-direction: column; gap: 10px; }
.hma-distress-title { margin: 0 0 4px; font-size: 1.15rem; }
.hma-distress-close { position: absolute; inset-inline-end: 8px; inset-block-start: 8px; background: transparent; border: 0; font-size: 1.5rem; width: 44px; height: 44px; cursor: pointer; }
.hma-distress-opt { display: block; min-height: 48px; line-height: 48px; padding: 0 14px; border-radius: 8px; background: #f1f5fb; color: #0f3f73; text-decoration: none; font-weight: 600; border: 1px solid #cfe0f3; text-align: center; }
.hma-distress-opt:hover { background: #e3edf9; }

.hma-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hma-feedback-form { display: flex; flex-direction: column; gap: 8px; }
.hma-fb-label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }
.hma-feedback-form select,
.hma-feedback-form textarea,
.hma-feedback-form input[type="email"] { width: 100%; padding: 6px 8px; border: 1px solid #c7c7c7; border-radius: 6px; font: inherit; }
.hma-feedback-msg { font-size: .9rem; color: #1a1a1a; min-height: 1.2em; }

.hma-sign-player {
	position: fixed;
	inset-block-end: 16px;
	inset-inline-end: 16px;
	z-index: 2147483001;
	width: min(320px, 90vw);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 8px 30px rgba(0,0,0,.4);
	overflow: hidden;
}
.hma-sign-player[hidden] { display: none; }
.hma-sign-head { display: flex; justify-content: space-between; align-items: center; background: #0f5fa6; color: #fff; padding: 8px 12px; }
.hma-sign-close { background: transparent; border: 0; color: #fff; font-size: 1.4rem; cursor: pointer; width: 44px; height: 44px; }
.hma-sign-player video { width: 100%; display: block; }
.hma-reset { width: 100%; background: #fff5f5; border-color: #e0b4b4; }


/* Visible focus for keyboard users (WCAG 2.4.7) */
.hma-root :focus-visible {
	outline: 3px solid #ffb300;
	outline-offset: 2px;
}

/* ===== Immunity to page colour/contrast features =====
   High-contrast, dark (night) and light contrast repaint `body *`, and the
   monochrome filter desaturates everything — both would make our own UI
   invisible (white-on-white) or grey. Re-assert the widget's own palette with
   higher specificity so it stays legible no matter what the user toggled. */
html[class*="hma-filter"] .hma-root,
html[class*="hma-filter"] .hma-root * { filter: none !important; }

html[class*="hma-contrast"] .hma-toggle { background: var(--hma-primary, #0f5fa6) !important; color: #fff !important; }
html[class*="hma-contrast"] .hma-icon { fill: #fff !important; }

html[class*="hma-contrast"] .hma-panel,
html[class*="hma-contrast"] .hma-panel-body,
html[class*="hma-contrast"] .hma-group,
html[class*="hma-contrast"] .hma-group-title,
html[class*="hma-contrast"] .hma-voice-note { background-color: #fff !important; color: #1a1a1a !important; border-color: #c7c7c7 !important; }

html[class*="hma-contrast"] .hma-panel-header,
html[class*="hma-contrast"] .hma-panel-header * { background-color: var(--hma-primary, #0f5fa6) !important; color: #fff !important; }

html[class*="hma-contrast"] .hma-ctrl,
html[class*="hma-contrast"] .hma-reset { background-color: #f5f7fa !important; color: #1a1a1a !important; border-color: #c7c7c7 !important; }
html[class*="hma-contrast"] .hma-ctrl[aria-pressed="true"] { background-color: var(--hma-primary, #0f5fa6) !important; color: #fff !important; border-color: var(--hma-primary, #0f5fa6) !important; }

/* Always-visible double ring (white + black) so the launcher stands out on any
   background — including an all-white high-contrast page. box-shadow only, so no
   layout shift. */
.hma-toggle { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1a1a1a, 0 3px 12px rgba(0, 0, 0, .45) !important; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.hma-toggle { transition: none; }
	.hma-toggle:hover { transform: none; }
}