/* ==========================================================================
   solinity-web app - what a REAL call needs and the landing page's preview does
   not.

   ../landing/landing.css is loaded first and owns everything shared: the sky,
   the glass pane, the frame head, the dock and its three states. Nothing here
   restates any of it. A visual change to the pane belongs there and reaches
   both surfaces.

   THE ONE RESERVED COLOUR IS USED HERE, AND ONLY HERE. signal.capture-true
   (#f5443b) is the open-mic signal. landing.css deliberately does not define
   it, so a marketing surface cannot reference it even by accident; this shell
   actually opens a microphone, so this is the file that is allowed to say so.
   It means one thing. It must never be used for an error, an accent, a hover,
   or anything else, however convenient.
   ========================================================================== */
:root {
	--signal-capture-true: #f5443b;
}

/* ==========================================================================
   1. THE OPEN-MICROPHONE INDICATOR
   Deliberately OUTSIDE the pane and above everything, pinned to the top edge
   of the viewport. It is not a decoration of the call view: it has to be
   visible whenever the microphone is open, including while a call is failing
   to connect, while the pane is showing an error, and while a sheet or dialog
   is over the frame.
   ========================================================================== */
.capture-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 40;
	background: var(--signal-capture-true);
	box-shadow: 0 0 18px rgba(245, 68, 59, 0.55);
	animation: capture-breathe 2.6s var(--ease-breathe) infinite;
}

@keyframes capture-breathe {
	0%, 100% { opacity: 0.85; }
	50% { opacity: 1; }
}

/* Reduced motion loses the pulse and keeps the bar. The bar is the fact; the
   pulse is only emphasis, and emphasis is the part that is safe to drop. */
@media (prefers-reduced-motion: reduce) {
	.capture-bar { animation: none; opacity: 1; }
}

/* ==========================================================================
   2. THE VIEWS INSIDE THE PANE
   Two, and no navigation between them beyond signed-in or not.
   ========================================================================== */
.view {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.view[hidden] { display: none; }

/* ---------- 2.1 Auth ---------------------------------------------------- */
.view-auth {
	justify-content: center;
	gap: var(--space-4);
	padding-bottom: var(--space-6);
	text-align: left;
}

.auth-step[hidden] { display: none; }

.auth-label {
	display: block;
	margin-bottom: var(--space-4);
	font-family: var(--font-surface);
	font-size: var(--type-lead);
	line-height: var(--leading-lead);
	letter-spacing: var(--tracking-display);
	color: var(--ink-paper);
	text-shadow: 0 1px 3px rgba(9, 10, 15, 0.9), 0 0 16px rgba(9, 10, 15, 0.7);
}

.auth-row {
	display: flex;
	align-items: stretch;
	gap: var(--space-3);
}

/* The field is a dark well rather than a light one: it sits on glass over
   moving water, and a pale fill would be the one opaque card on the page. */
.auth-row input {
	flex: 1;
	min-width: 0;
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-apparatus);
	font-size: var(--type-ui);
	color: var(--ink-paper);
	background: rgba(12, 14, 21, 0.5);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--radius-md);
	outline: none;
	transition: border-color var(--dur-settle) var(--ease-settle), background var(--dur-settle) var(--ease-settle);
}

.auth-row input::placeholder { color: var(--ink-mist-faint); }

.auth-row input:focus {
	border-color: var(--temp-present);
	background: rgba(12, 14, 21, 0.66);
}

.auth-row input:disabled { opacity: 0.55; }

/* The six digits get the same tabular treatment as the call timer, so a code
   does not reflow as it is typed. */
#authCode {
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.34em;
	text-align: center;
	padding-right: calc(var(--space-4) - 0.34em);
}

.auth-go {
	flex: 0 0 auto;
	width: 46px;
	display: grid;
	place-items: center;
	appearance: none;
	border: 0;
	border-radius: var(--radius-md);
	cursor: pointer;
	color: #17110a;
	background: linear-gradient(180deg, var(--temp-emphasis) 0%, var(--temp-present) 55%, var(--temp-attend) 100%);
	transition: transform var(--dur-settle) var(--ease-settle), opacity var(--dur-settle) var(--ease-settle);
}

.auth-go svg { width: 20px; height: 20px; }
.auth-go:hover { transform: translateY(-1px); }
.auth-go:active { transform: none; }
.auth-go:disabled { opacity: 0.5; cursor: default; transform: none; }

.auth-back {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	margin-top: var(--space-4);
	cursor: pointer;
	font-family: var(--font-apparatus);
	font-size: var(--type-caption);
	color: var(--ink-mist-mute);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.auth-back:hover { color: var(--ink-paper-soft); }

.auth-status {
	margin: var(--space-4) 0 0;
	min-height: 2.6em;
	font-size: var(--type-caption);
	line-height: var(--leading-body);
	color: var(--ink-paper-soft);
	text-shadow: 0 1px 3px rgba(9, 10, 15, 0.9);
	opacity: 0;
	transition: opacity var(--dur-settle) var(--ease-settle);
}

.auth-status.show { opacity: 1; }

/* ---------- 2.2 Call ---------------------------------------------------- */
.view-call {
	justify-content: space-between;
}

/* THE STATUS LINE CARRIES SENTENCES HERE, NOT LABELS. The preview next door
   only ever shows one short word in this slot, so landing.css styles it as
   uppercase letter-spaced micro-type, which is right for a label. This shell
   puts real tells in it - a microphone that would not open, a connection that
   dropped - and uppercase letter-spaced prose at four lines is punishing to
   read. Measured against the real string: "this browser could not open a
   microphone - check its microphone permission in your system settings".

   The strings themselves stay lowercase in call.js, because they are also log
   lines and a log line should not shout; ::first-letter does the capital, so
   no string has to carry presentation. */
.view-call .frame-status {
	max-width: 32ch;
	margin: 0 auto;
	text-transform: none;
	letter-spacing: 0;
	font-size: var(--type-ui);
	line-height: var(--leading-body);
	color: var(--ink-paper-soft);
	text-wrap: pretty;
}

.view-call .frame-status::first-letter { text-transform: uppercase; }

/* The one-click browser extension button (docs/design/plugin-distribution.md).
   Reuses .auth-back's plain-text-button look rather than a new visual
   weight - this is a secondary affordance, not a second call-to-action next
   to .dock-action. Centred under .frame-status, same alignment rule. */
.extension-action {
	display: block;
	margin: var(--space-3) auto 0;
	text-align: center;
}
.extension-action:disabled { opacity: 0.6; cursor: default; }
.extension-action[hidden] { display: none; }

/* ==========================================================================
   3. THE ACCOUNT CONTROL
   landing.css's .chip is a static ornament in the preview. Here it is a real
   button, so it gains the affordances a button needs and nothing else.
   ========================================================================== */
.chip-button {
	appearance: none;
	/* landing.css's .chip was a decorative <span> and never needed this; the
	   real button here inherits Chromium's default `border: 2px outset` for
	   <button> regardless of appearance: none (that property drops the native
	   widget rendering, not the border box), and that beveled border is what
	   flipped to `inset` on press and read as unevenly lit on a circle - one
	   side highlighted, one shaded, like a stray focus ring. */
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: background var(--dur-settle) var(--ease-settle), color var(--dur-settle) var(--ease-settle),
		transform var(--dur-settle) var(--ease-settle);
}

.chip-button:hover {
	background: rgba(255, 255, 255, 0.22);
	color: var(--ink-paper);
	transform: translateY(-1px);
}

/* Same press as .dock-action: a brighter fill and a small scale-down,
   rather than nothing (there was no :active rule here at all). */
.chip-button:active {
	background: rgba(255, 255, 255, 0.22);
	transform: translateY(0) scale(0.97);
}

.chip-button[hidden] { display: none; }

/* ==========================================================================
   3.1 THE ACCOUNT MENU
   Stands in for window.confirm() (boot.js), which read as the browser
   interrupting rather than as this product asking a question. Positioned by
   UI.account.open() (ui.js) in fixed viewport coordinates read off
   accountButton's own box, since it lives outside .glass (index.html) and
   so is never clipped by that pane's own overflow: hidden.
   ========================================================================== */
.account-menu {
	position: fixed;
	z-index: 50;
	min-width: 220px;
	max-width: min(300px, calc(100vw - var(--space-5) * 2));
	padding: var(--space-2);
	border-radius: var(--radius-md);
	background:
		linear-gradient(165deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.015) 100%),
		rgba(18, 20, 28, 0.82);
	border: 1px solid var(--glass-edge);
	backdrop-filter: blur(var(--glass-blur));
	-webkit-backdrop-filter: blur(var(--glass-blur));
	box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.account-menu[hidden] { display: none; }

.account-menu-email {
	margin: 0;
	padding: var(--space-2) var(--space-3) var(--space-1);
	font-size: var(--type-caption);
	line-height: var(--leading-body);
	color: var(--ink-mist-mute);
	word-break: break-word;
}

.account-menu-signout {
	appearance: none;
	display: block;
	width: 100%;
	padding: var(--space-2) var(--space-3);
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--state-error);
	font-family: var(--font-apparatus);
	font-size: var(--type-ui);
	text-align: left;
	cursor: pointer;
	transition: background var(--dur-settle) var(--ease-settle);
}

.account-menu-signout:hover { background: rgba(255, 255, 255, 0.08); }

/* ==========================================================================
   3.5 THE PREFLIGHT FAILURE
   What the pane shows when a file it needs did not load. Deliberately styled
   like the rest rather than like a browser error: it is a real state of this
   product, it names the one command that fixes it, and it replaces the pane's
   contents entirely so nothing behind it looks operable.
   ========================================================================== */
.preflight {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
	gap: var(--space-3);
	text-align: left;
}

.preflight-title {
	margin: 0;
	font-family: var(--font-surface);
	font-size: var(--type-body);
	line-height: var(--leading-lead);
	color: var(--ink-paper);
}

.preflight p {
	margin: 0;
	font-size: var(--type-caption);
	line-height: var(--leading-body);
	color: var(--ink-paper-soft);
}

.preflight pre {
	margin: var(--space-2) 0;
	padding: var(--space-3);
	overflow-x: auto;
	font-size: var(--type-caption);
	color: var(--temp-emphasis);
	background: rgba(9, 10, 15, 0.62);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-sm);
}

/* ==========================================================================
   5. THE DOCK, WHERE THIS SHELL DIFFERS FROM THE PREVIEW
   The preview animates the timer and mute control in and out by width, which
   is right for a scripted loop that always has both. Here they genuinely do
   not exist outside a call, so they are `hidden` and the animation has
   nothing to interpolate - these two rules stop a hidden element reserving
   the space the preview's width transition would have given it.
   ========================================================================== */
.dock-timer[hidden],
.dock-mute[hidden] { display: none; }

.view-call .dock-timer {
	width: auto;
	margin: 0 var(--space-3);
	opacity: 1;
}

.view-call .dock-mute {
	width: 48px;
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

/* A disabled control must not look pressable. */
.dock-action:disabled,
.dock-mute:disabled { opacity: 0.55; cursor: default; transform: none; }