/* ============================================================================
   NUIT NOIRE INTERNATIONAL — salon.css
   Der Salon, wie der Gast ihn sieht: die geschlossene Seite mit der Passphrase
   und der offene Raum mit dem Gespräch.

   Alle Farben, Masse und Zeiten kommen aus tokens.css. Die wenigen lokalen
   Werte tragen das Präfix --nnis-, damit sie nie mit einem Design-Token
   verwechselt werden. Nichts hier erfindet eine Komponente neu — Eyebrow,
   Display, Lede, Button, Link und Regel stammen unverändert aus
   components.css.

   Formensprache: keine Sprechblase hat eine Ecke, weil keine Sprechblase eine
   Rundung hat. Das Haus spricht aus einer tiefen Fläche, der Gast spricht ohne
   Fläche und wird nur von einer Haarlinie gehalten. Zustände sind Punkt und
   Strich, nie Farbe, nie Haken.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1 · Rahmen
   ------------------------------------------------------------------------ */

.nni-salon {
	--nnis-house: #0C0B0A;
	--nnis-line: var(--nni-hair) solid var(--nni-line-soft);
	--nnis-bubble: min(34rem, 82%);
	--nnis-rail: clamp(10px, 1.4vw, 16px);
	--nnis-gap: clamp(18px, 2.2vw, 26px);

	min-width: 0;
}

.nni-salon :where(p, li, span, label, dd, dt) {
	overflow-wrap: break-word;
}

.nni-salon__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Der offene Raum nimmt die Sicht ein: Kopf oben, Fuss unten, dazwischen
   scrollt allein das Gespräch. Ohne :has() bleibt es beim gewöhnlichen
   Seitenfluss — bedienbar, nur weniger geschlossen. */
.nni-body:has(.nni-salon--open) {
	height: var(--nnis-vh, 100svh);
	overflow: hidden;
}

.nni-body:has(.nni-salon--open) .nni-main {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	padding-bottom: 0;
}

.nni-body:has(.nni-salon--open) .nni-foot {
	padding-block: clamp(10px, 1.4vw, 16px);
}

/* Der Fuss der Seite, solange der Salon auf einem Telefon offen steht.

   Gemessen bei 390 × 844 (Gastsitzung, Stufe 3, ausgelaufenes Layout): der
   Seitenfuss nahm 168,5 px — ein Fünftel der Sicht —, und dem Gespräch
   blieben 372,4 px, also 44,1 %. Die Vorgabe lautet mindestens 45 %; sie war
   damit nicht mehr erfüllt, sondern knapp unterschritten.

   Weggenommen wird nur, was doppelt dasteht: das Siegel und der Name des
   Hauses stehen in derselben Sicht schon oben in der Kopfleiste. Was der Fuss
   an eigenen Pflichten hat, bleibt vollständig und in voller Antippfläche
   stehen — Impressum, Datenschutz und der Weg aus dem privaten Bereich.

   Nur unter 48em, nur bei offenem Salon. Am Schreibtisch steht der Fuss
   ohnehin in einer Zeile, und das Gespräch hat dort 50,3 %. */
@media (max-width: 47.99em) {
	.nni-body:has(.nni-salon--open) .nni-foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 0 clamp(16px, 4vw, 28px);
		padding-block: 0 clamp(6px, 1vw, 10px);
	}

	.nni-body:has(.nni-salon--open) .nni-foot .nni-mark,
	.nni-body:has(.nni-salon--open) .nni-foot .nni-foot__name {
		display: none;
	}
}

.nni-salon--open {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	min-height: 0;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------
   2 · Der geschlossene Zustand — Passphrase vergeben oder eingeben
   ------------------------------------------------------------------------ */

.nni-salon__gate {
	display: grid;
	gap: clamp(28px, 3.4vw, 46px);
	width: 100%;
	max-width: 46rem;
	min-width: 0;
	padding-block-end: clamp(40px, 6vw, 88px);
}

.nni-salon__intro {
	gap: clamp(16px, 2.2vw, 28px);
}

.nni-salon__intro .nni-lede {
	max-width: 42ch;
}

.nni-salon__prose {
	display: grid;
	gap: clamp(16px, 1.9vw, 24px);
	max-width: 54ch;
}

.nni-salon__prose p {
	margin: 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-base);
	line-height: var(--nni-lh-body);
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-cream-soft);
}

.nni-salon__reset {
	margin: 0;
	max-width: 52ch;
	padding-inline-start: clamp(16px, 1.8vw, 24px);
	border-inline-start: var(--nni-hair) solid var(--nni-bronze);
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-sm);
	line-height: 1.8;
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-muted);
}

.nni-salon__form {
	display: grid;
	gap: clamp(24px, 3vw, 38px);
	width: 100%;
	max-width: 34rem;
	min-width: 0;
}

.nni-salon__field {
	display: grid;
	gap: 10px;
	min-width: 0;
}

.nni-salon__label {
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-micro);
	line-height: 1.5;
	letter-spacing: var(--nni-ls-fine);
	text-transform: uppercase;
	color: var(--nni-faint);
	transition: color var(--nni-t-fast) var(--nni-ease);
}

.nni-salon__field:focus-within .nni-salon__label {
	color: var(--nni-muted);
}

.nni-salon__input {
	width: 100%;
	max-width: 100%;
	min-height: 46px;
	padding: 10px 0 12px;
	background-color: transparent;
	border: 0;
	border-bottom: var(--nni-hair) solid var(--nni-line);
	border-radius: 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: max(1rem, 16px);
	line-height: 1.6;
	letter-spacing: .12em;
	color: var(--nni-cream);
	caret-color: var(--nni-cream);
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--nni-t-med) var(--nni-ease);
}

.nni-salon__input:hover {
	border-bottom-color: var(--nni-muted);
}

.nni-salon__input:focus,
.nni-salon__input:focus-visible {
	border-bottom-color: var(--nni-cream);
	outline-offset: 6px;
}

.nni-salon__input:-webkit-autofill,
.nni-salon__input:-webkit-autofill:hover,
.nni-salon__input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--nni-cream);
	box-shadow: 0 0 0 1000px var(--nni-black) inset;
	transition: background-color 100000s ease-in-out 0s;
}

.nni-salon .nni-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.nni-salon__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 3vw, 34px);
	min-width: 0;
}

.nni-salon__actions .nni-btn {
	min-height: 46px;
}

.nni-salon__form.is-busy .nni-btn {
	opacity: .5;
	pointer-events: none;
}

.nni-salon__msg {
	flex: 1 1 16ch;
	min-width: 0;
	min-height: 1.4em;
	margin: 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-sm);
	line-height: 1.6;
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-muted);
	opacity: 0;
	transform: translateY(4px);
	transition:
		opacity var(--nni-t-med) var(--nni-ease),
		transform var(--nni-t-med) var(--nni-ease);
}

.nni-salon__msg.is-in {
	opacity: 1;
	transform: translateY(0);
}

.nni-salon__msg.is-error {
	color: var(--nni-danger);
}

.nni-salon__hint,
.nni-salon__note {
	margin: 0;
	max-width: 46ch;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-sm);
	line-height: 1.75;
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-faint);
}

/* ---------------------------------------------------------------------------
   3 · Der offene Raum
   ------------------------------------------------------------------------ */

.nni-salon__room {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr) auto auto auto;
	flex: 1 1 auto;
	width: 100%;
	max-width: min(68rem, 100%);
	min-height: 0;
	margin-inline: auto;
	padding-inline: var(--nni-gutter);
}

.nni-salon__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px clamp(20px, 3vw, 44px);
	padding-block: clamp(14px, 2vw, 24px) clamp(12px, 1.6vw, 18px);
	border-bottom: var(--nnis-line);
}

.nni-salon__who {
	display: flex;
	align-items: baseline;
	gap: clamp(12px, 1.8vw, 22px);
	min-width: 0;
}

.nni-salon__who .nni-eyebrow {
	font-size: var(--nni-fs-micro);
	color: var(--nni-faint);
}

.nni-salon__title {
	margin: 0;
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: var(--nni-fs-lg);
	line-height: var(--nni-lh-tight);
	letter-spacing: var(--nni-ls-display);
	color: var(--nni-cream);
}

.nni-salon__line {
	margin: 0;
	flex: 1 1 22ch;
	min-width: 0;
	text-align: end;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-micro);
	line-height: 1.6;
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-faint);
}

/* ---------------------------------------------------------------------------
   4 · Das Gespräch — der einzige Bereich, der scrollt
   ------------------------------------------------------------------------ */

.nni-salon__thread {
	position: relative;
	min-height: 0;
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--nni-line) transparent;
	padding-block: clamp(20px, 3vw, 40px);
}

.nni-salon__thread::-webkit-scrollbar {
	width: 6px;
}

.nni-salon__thread::-webkit-scrollbar-thumb {
	background-color: var(--nni-line);
}

.nni-salon__thread::-webkit-scrollbar-track {
	background-color: transparent;
}

.nni-salon__thread:focus-visible {
	outline: var(--nni-hair) solid var(--nni-cream);
	outline-offset: -2px;
}

.nni-salon__empty {
	margin: 0;
	padding-block: clamp(28px, 6vw, 72px);
	max-width: 34ch;
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: var(--nni-fs-lg);
	line-height: 1.4;
	letter-spacing: var(--nni-ls-display);
	color: var(--nni-faint);
}

.nni-salon__empty[hidden] {
	display: none;
}

.nni-salon__list {
	display: grid;
	gap: var(--nnis-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}

/* ---------------------------------------------------------------------------
   5 · Tagestrenner — eine Haarlinie mit dem Datum in der Mitte
   ------------------------------------------------------------------------ */

.nni-salon__day {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2vw, 24px);
	padding-block: clamp(10px, 1.6vw, 20px);
}

.nni-salon__day::before,
.nni-salon__day::after {
	content: "";
	flex: 1 1 0;
	height: var(--nni-hair);
	background-color: var(--nni-line-soft);
}

.nni-salon__day span {
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-micro);
	line-height: 1;
	letter-spacing: var(--nni-ls-fine);
	text-transform: uppercase;
	color: var(--nni-faint);
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   6 · Nachrichten
   ------------------------------------------------------------------------ */

.nni-salon__msg-item {
	display: flex;
	flex-direction: column;
	min-width: 0;
	max-width: 100%;
}

.nni-salon__msg-item--house {
	align-items: flex-start;
}

.nni-salon__msg-item--mine {
	align-items: flex-end;
}

/* Zwei Nachrichten derselben Seite rücken enger zusammen. */
.nni-salon__msg-item--tight {
	margin-top: calc(var(--nnis-gap) * -0.55);
}

.nni-salon__said {
	max-width: var(--nnis-bubble);
	min-width: 0;
	border-radius: 0;
}

.nni-salon__msg-item--house .nni-salon__said {
	background-color: var(--nnis-house);
	padding: clamp(14px, 1.7vw, 20px) clamp(16px, 2vw, 24px);
	border-inline-start: var(--nni-hair) solid var(--nni-line-soft);
}

.nni-salon__msg-item--mine .nni-salon__said {
	background-color: transparent;
	padding: clamp(2px, .5vw, 6px) 0 clamp(2px, .5vw, 6px) clamp(16px, 2vw, 22px);
	border-inline-start: var(--nni-hair) solid var(--nni-cream-soft);
	text-align: start;
}

.nni-salon__body {
	margin: 0;
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: clamp(1.06rem, 1.02rem + .22vw, 1.22rem);
	line-height: 1.52;
	letter-spacing: .002em;
	color: var(--nni-cream-soft);
	white-space: pre-wrap;
	overflow-wrap: break-word;
	hyphens: auto;
}

.nni-salon__msg-item--house .nni-salon__body {
	color: var(--nni-cream);
}

.nni-salon__body--gone {
	font-style: italic;
	color: var(--nni-faint);
}

/* Zeit und Zustand */
.nni-salon__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 6px 0 0;
	padding-inline: clamp(16px, 2vw, 24px);
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-micro);
	line-height: 1;
	letter-spacing: var(--nni-ls-fine);
	text-transform: uppercase;
	color: var(--nni-faint);
	font-variant-numeric: lining-nums tabular-nums;
}

.nni-salon__msg-item--mine .nni-salon__meta {
	padding-inline-end: 0;
}

/* Zustände: Punkt, Strich, hellerer Strich. Keine Farbe, kein Haken. */
.nni-salon__tick {
	display: inline-block;
	flex: 0 0 auto;
}

.nni-salon__tick--pending {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--nni-faint);
	animation: nnis-breathe 2.4s var(--nni-ease-soft) infinite;
}

.nni-salon__tick--sent {
	width: 14px;
	height: var(--nni-hair);
	background-color: var(--nni-faint);
}

.nni-salon__tick--read {
	width: 14px;
	height: var(--nni-hair);
	background-color: var(--nni-cream-soft);
}

@keyframes nnis-breathe {
	0%, 100% { opacity: .35; }
	50% { opacity: 1; }
}

/* Systemzeile (Verlauf gelöscht, Gerät beendet) — mittig, ohne Fläche */
.nni-salon__msg-item--system {
	align-items: center;
}

.nni-salon__msg-item--system .nni-salon__said {
	border: 0;
	background: transparent;
	padding: 0;
	max-width: 44ch;
	text-align: center;
}

.nni-salon__msg-item--system .nni-salon__body {
	font-family: var(--nni-sans);
	font-size: var(--nni-fs-sm);
	line-height: 1.7;
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-faint);
}

/* ---------------------------------------------------------------------------
   7 · Medien in einer Nachricht
   ------------------------------------------------------------------------ */

.nni-salon__shot {
	display: block;
	position: relative;
	width: min(22rem, 100%);
	aspect-ratio: var(--nnis-ratio, 4 / 3);
	overflow: hidden;
	background-color: var(--nni-ink);
	border: 0;
	padding: 0;
	cursor: zoom-in;
}

.nni-salon__shot img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity var(--nni-t-med) var(--nni-ease);
}

.nni-salon__shot img.is-in {
	opacity: 1;
}

.nni-salon__shot:focus-visible {
	outline: var(--nni-hair) solid var(--nni-cream);
	outline-offset: 3px;
}

.nni-salon__said > .nni-salon__shot + .nni-salon__body,
.nni-salon__said > .nni-salon__doc + .nni-salon__body,
.nni-salon__said > .nni-salon__voice + .nni-salon__body {
	margin-top: clamp(10px, 1.4vw, 14px);
}

/* Datei */
.nni-salon__doc {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.6vw, 16px);
	min-width: 0;
	padding: clamp(10px, 1.4vw, 14px) 0;
	color: var(--nni-cream-soft);
	text-decoration: none;
	border-bottom: var(--nni-hair) solid var(--nni-line-soft);
}

.nni-salon__doc svg {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .8;
}

.nni-salon__doc-name {
	min-width: 0;
	flex: 1 1 auto;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-sm);
	line-height: 1.5;
	letter-spacing: var(--nni-ls-body);
	overflow-wrap: anywhere;
}

.nni-salon__doc-size {
	flex: 0 0 auto;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-micro);
	letter-spacing: var(--nni-ls-fine);
	text-transform: uppercase;
	color: var(--nni-faint);
	font-variant-numeric: lining-nums tabular-nums;
}

@media (hover: hover) {
	.nni-salon__doc:hover {
		color: var(--nni-cream);
		border-bottom-color: var(--nni-line);
	}
}

.nni-salon__doc:focus-visible {
	outline: var(--nni-hair) solid var(--nni-cream);
	outline-offset: 3px;
}

/* Sprachnachricht — eigener, sehr karger Spieler */
.nni-salon__voice {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.6vw, 16px);
	width: min(19rem, 100%);
	min-width: 0;
	padding-block: 4px;
}

.nni-salon__play {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	background: transparent;
	border: var(--nni-hair) solid var(--nni-line);
	border-radius: 50%;
	color: var(--nni-cream-soft);
	cursor: pointer;
	transition:
		border-color var(--nni-t-fast) var(--nni-ease-soft),
		color var(--nni-t-fast) var(--nni-ease-soft);
}

/* Der Knopf verschwindet, solange die Aufnahme noch nicht geöffnet ist — und
   für immer, wenn sie sich nicht öffnen lässt. salon.js setzt dafür das
   Attribut `hidden`; ohne diese Zeile bliebe es wirkungslos, weil das
   `display: inline-flex` darüber aus dem Autorenstil kommt und damit die
   Regel `[hidden] { display: none }` des Browsers schlägt. Ein Abspielknopf,
   der nichts abspielt, ist genau das, was der Salon nicht haben will. */
.nni-salon__play[hidden] {
	display: none;
}

.nni-salon__play svg {
	width: 12px;
	height: 12px;
	fill: currentColor;
	stroke: none;
}

@media (hover: hover) {
	.nni-salon__play:hover {
		border-color: var(--nni-cream);
		color: var(--nni-cream);
	}
}

.nni-salon__play:focus-visible {
	outline: var(--nni-hair) solid var(--nni-cream);
	outline-offset: 3px;
}

.nni-salon__bar {
	position: relative;
	flex: 1 1 auto;
	height: var(--nni-hair);
	min-width: 0;
	background-color: var(--nni-line);
}

.nni-salon__bar i {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: block;
	width: var(--nnis-played, 0%);
	background-color: var(--nni-cream-soft);
}

.nni-salon__voice-time {
	flex: 0 0 auto;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-micro);
	letter-spacing: var(--nni-ls-fine);
	color: var(--nni-faint);
	font-variant-numeric: lining-nums tabular-nums;
}

/* Läuft gerade: der Kreis füllt sich, statt ein zweites Zeichen zu zeigen. */
.nni-salon__play.is-playing {
	border-color: var(--nni-cream-soft);
	background-color: var(--nni-cream-soft);
	color: var(--nni-black);
}

/* ---------------------------------------------------------------------------
   7b · Was noch unterwegs ist
   ------------------------------------------------------------------------ */

/* Ein Bild, das noch auf dem Gerät liegt: dieselbe Fläche wie ein
   angekommenes, aber ohne Lupe — es gibt noch nichts zu vergrössern. */
.nni-salon__shot--local {
	cursor: default;
}

.nni-salon__shot--local img {
	opacity: .72;
}

/* Fortschritt und Abbruch. Der Balken ist dieselbe Haarlinie wie beim
   Sprachspieler; das Haus kennt nur eine Formensprache. */
.nni-salon__wait {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.6vw, 16px);
	min-width: 0;
	margin-top: clamp(8px, 1.2vw, 12px);
}

.nni-salon__wait-bar {
	position: relative;
	flex: 1 1 auto;
	height: var(--nni-hair);
	min-width: 0;
	background-color: var(--nni-line);
}

.nni-salon__wait-bar i {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	display: block;
	width: var(--nnis-done, 0%);
	background-color: var(--nni-cream-soft);
	transition: width var(--nni-t-fast) linear;
}

.nni-salon__wait-stop,
.nni-salon__snag-again,
.nni-salon__snag-drop {
	flex: 0 0 auto;
	padding: 0;
	background: transparent;
	border: 0;
	border-bottom: var(--nni-hair) solid var(--nni-line);
	color: var(--nni-muted);
	cursor: pointer;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-micro);
	line-height: 1.6;
	letter-spacing: var(--nni-ls-fine);
	text-transform: uppercase;
	transition: color var(--nni-t-fast) var(--nni-ease-soft);
}

@media (hover: hover) {
	.nni-salon__wait-stop:hover,
	.nni-salon__snag-again:hover,
	.nni-salon__snag-drop:hover {
		color: var(--nni-cream);
		border-bottom-color: var(--nni-cream-soft);
	}
}

.nni-salon__wait-stop:focus-visible,
.nni-salon__snag-again:focus-visible,
.nni-salon__snag-drop:focus-visible {
	outline: var(--nni-hair) solid var(--nni-cream);
	outline-offset: 3px;
}

/* Etwas ist hängen geblieben — mit Grund und zwei Auswegen. */
.nni-salon__snag {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px clamp(14px, 2vw, 20px);
	margin: clamp(8px, 1.2vw, 12px) 0 0;
	padding-top: clamp(8px, 1.2vw, 12px);
	border-top: var(--nni-hair) solid var(--nni-line-soft);
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-sm);
	line-height: 1.6;
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-danger);
}

.nni-salon__snag span {
	flex: 1 1 14ch;
	min-width: 0;
}

/* Der Zustand „liegt und wartet": ein Strich, der offen bleibt. */
.nni-salon__tick--parked {
	width: 14px;
	height: var(--nni-hair);
	background-color: var(--nni-danger);
}

/* ---------------------------------------------------------------------------
   8 · Bild gross ansehen
   ------------------------------------------------------------------------ */

.nni-salon__view {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(18px, 4vw, 56px);
	background-color: var(--nni-black);
	opacity: 0;
	transition: opacity var(--nni-t-fast) var(--nni-ease-soft);
}

.nni-salon__view[hidden] {
	display: none;
}

.nni-salon__view.is-in {
	opacity: 1;
}

.nni-salon__view-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.nni-salon__view-close {
	position: absolute;
	top: max(14px, env(safe-area-inset-top));
	inset-inline-end: clamp(14px, 3vw, 32px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--nni-muted);
	cursor: pointer;
	transition: color var(--nni-t-fast) var(--nni-ease-soft);
}

.nni-salon__view-close svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	stroke-linecap: round;
}

@media (hover: hover) {
	.nni-salon__view-close:hover {
		color: var(--nni-cream);
	}
}

.nni-salon__view-close:focus-visible {
	outline: var(--nni-hair) solid var(--nni-cream);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   9 · „schreibt gerade"
   ------------------------------------------------------------------------ */

.nni-salon__typing {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding-block: clamp(6px, 1vw, 10px);
	min-height: 1.6em;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-micro);
	letter-spacing: var(--nni-ls-fine);
	text-transform: uppercase;
	color: var(--nni-faint);
}

.nni-salon__typing[hidden] {
	display: none;
}

.nni-salon__typing-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background-color: var(--nni-bronze);
	animation: nnis-breathe 2.4s var(--nni-ease-soft) infinite;
}

/* ---------------------------------------------------------------------------
   10 · Eingabezeile
   ------------------------------------------------------------------------ */

.nni-salon__compose {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: grid;
	gap: clamp(8px, 1.2vw, 12px);
	padding-block: clamp(12px, 1.6vw, 18px);
	padding-bottom: calc(clamp(12px, 1.6vw, 18px) + env(safe-area-inset-bottom));
	background-color: var(--nni-black);
	border-top: var(--nnis-line);
}

.nni-salon__row {
	display: flex;
	align-items: flex-end;
	gap: clamp(8px, 1.4vw, 14px);
	min-width: 0;
}

.nni-salon__attach {
	display: flex;
	align-items: center;
	gap: 2px;
	flex: 0 0 auto;
}

.nni-salon__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--nni-muted);
	cursor: pointer;
	transition: color var(--nni-t-fast) var(--nni-ease-soft);
	-webkit-tap-highlight-color: transparent;
}

/* Nur das Mikrofon fängt die Geste ab — auf den beiden anderen soll man
   weiterhin scrollen dürfen. */
.nni-salon__icon--mic {
	touch-action: none;
}

.nni-salon__icon svg {
	width: 21px;
	height: 21px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

@media (hover: hover) {
	.nni-salon__icon:hover {
		color: var(--nni-cream);
	}
}

.nni-salon__icon:focus-visible {
	outline: var(--nni-hair) solid var(--nni-cream);
	outline-offset: -2px;
}

.nni-salon__icon[aria-pressed="true"],
.nni-salon__icon.is-live {
	color: var(--nni-cream);
}

.nni-salon__field-line {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
}

.nni-salon__write {
	display: block;
	width: 100%;
	min-height: 44px;
	max-height: 9.5em;
	padding: 11px 0 12px;
	background-color: transparent;
	border: 0;
	border-bottom: var(--nni-hair) solid var(--nni-line);
	border-radius: 0;
	font-family: var(--nni-serif);
	font-weight: 300;
	font-size: max(1.06rem, 16px);
	line-height: 1.5;
	letter-spacing: .002em;
	color: var(--nni-cream);
	caret-color: var(--nni-cream);
	resize: none;
	overflow-y: auto;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color var(--nni-t-med) var(--nni-ease);
}

.nni-salon__write::placeholder {
	font-family: var(--nni-sans);
	font-size: var(--nni-fs-sm);
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-faint);
	opacity: 1;
}

.nni-salon__write:focus,
.nni-salon__write:focus-visible {
	border-bottom-color: var(--nni-cream);
	outline: 0;
}

.nni-salon__send {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--nni-cream-soft);
	cursor: pointer;
	opacity: .35;
	pointer-events: none;
	transition:
		opacity var(--nni-t-fast) var(--nni-ease-soft),
		color var(--nni-t-fast) var(--nni-ease-soft);
}

.nni-salon__send svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.nni-salon__send.is-ready {
	opacity: 1;
	pointer-events: auto;
}

@media (hover: hover) {
	.nni-salon__send.is-ready:hover {
		color: var(--nni-cream);
	}
}

.nni-salon__send:focus-visible {
	outline: var(--nni-hair) solid var(--nni-cream);
	outline-offset: -2px;
}

.nni-salon__file {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   10b · Die Ablage — was ausgewählt, aber noch nicht gesendet ist
   ------------------------------------------------------------------------ */

.nni-salon__tray {
	display: flex;
	align-items: center;
	gap: clamp(12px, 2vw, 20px);
	min-width: 0;
	padding-block: clamp(10px, 1.4vw, 14px);
	border-bottom: var(--nni-hair) solid var(--nni-line-soft);
}

.nni-salon__tray[hidden] {
	display: none;
}

.nni-salon__tray-what {
	flex: 1 1 auto;
	min-width: 0;
}

/* In der Ablage ist das Bild eine Briefmarke, keine Fläche. */
.nni-salon__tray .nni-salon__shot {
	width: min(9rem, 40%);
}

.nni-salon__tray .nni-salon__shot--local img {
	opacity: 1;
}

.nni-salon__tray .nni-salon__doc {
	padding-block: 0;
	border-bottom: 0;
}

/* Die Aufnahme in der Ablage trägt einen eigenen Namen, weil salon.js sie so
   ausweist — und weil sie hier die volle Breite bekommt, während dieselbe
   Aufnahme in der Blase auf 19rem gedeckelt bleibt. Beide Wege sind
   aufgeführt: der Nachbarschafts-Weg für den Fall, dass die Ablage einmal
   etwas anderes einhängt, und der Name für den Regelfall. */
.nni-salon__tray .nni-salon__voice,
.nni-salon__voice--tray {
	width: 100%;
}

/* Der Abspielknopf erscheint erst, wenn die Aufnahme geöffnet ist — das dauert
   einen Wimpernschlag. Ohne feste Höhe rutschte die Eingabezeile in diesem
   Moment nach unten, während der Gast schon tippt. Die Höhe des Knopfes wird
   deshalb von Anfang an freigehalten. */
.nni-salon__voice--tray {
	min-height: 34px;
}

.nni-salon__tray-drop {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: transparent;
	border: 0;
	color: var(--nni-muted);
	cursor: pointer;
	transition: color var(--nni-t-fast) var(--nni-ease-soft);
}

.nni-salon__tray-drop svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
	stroke-linecap: round;
}

@media (hover: hover) {
	.nni-salon__tray-drop:hover {
		color: var(--nni-cream);
	}
}

.nni-salon__tray-drop:focus-visible {
	outline: var(--nni-hair) solid var(--nni-cream);
	outline-offset: -2px;
}

/* Solange etwas in der Ablage liegt, ist der Sendeknopf auch ohne Text wach —
   das erledigt salon.js über is-ready. Die Eingabezeile sagt es zusätzlich. */
.nni-salon__compose.is-holding .nni-salon__write {
	border-bottom-color: var(--nni-line-strong);
}

/* ---------------------------------------------------------------------------
   11 · Sprachaufnahme
   ------------------------------------------------------------------------ */

.nni-salon__rec {
	display: flex;
	align-items: center;
	gap: clamp(12px, 1.8vw, 20px);
	min-width: 0;
	padding-block: clamp(6px, 1vw, 10px);
}

.nni-salon__rec[hidden] {
	display: none;
}

.nni-salon__wave {
	flex: 1 1 auto;
	width: 100%;
	height: 32px;
	min-width: 0;
	display: block;
}

.nni-salon__rec-time,
.nni-salon__rec-hint {
	flex: 0 0 auto;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-micro);
	letter-spacing: var(--nni-ls-fine);
	text-transform: uppercase;
	color: var(--nni-muted);
	font-variant-numeric: lining-nums tabular-nums;
	white-space: nowrap;
}

.nni-salon__rec-hint {
	color: var(--nni-faint);
}

.nni-salon__rec.is-dropping .nni-salon__rec-hint {
	color: var(--nni-danger);
}

@media (max-width: 34em) {
	.nni-salon__rec-hint {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   12 · Fuss des Raums
   ------------------------------------------------------------------------ */

.nni-salon__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: clamp(14px, 3vw, 30px);
	padding-block: 0 clamp(8px, 1.2vw, 14px);
}

.nni-salon__foot form {
	margin: 0;
}

.nni-salon__foot .nni-link {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--nni-sans);
	font-size: var(--nni-fs-micro);
}

/* ---------------------------------------------------------------------------
   13 · Rufname und Schlüssel ändern

   Zwei Zeilen am Fuss des Gesprächs, sonst nichts. Wer sie sucht, findet sie;
   wer sie nicht sucht, liest über sie hinweg. Aufgeklappt wird mit <details>,
   also ohne eine Zeile Skript — deshalb muss hier nur das Dreieck des Browsers
   weichen, damit die Zeile aussieht wie jeder andere Verweis des Hauses.

   Das Formular darunter ist eine Spur enger gesetzt als das grosse am Eingang:
   es steht im Fuss eines Raums, dessen Höhe feststeht, und darf dem Gespräch
   nicht die halbe Fläche nehmen. Am Schreibtisch nachgemessen, 390 × 844:
   beide Formulare zugleich offen drücken das Gespräch auf 40 Pixel und schieben
   den Verweis zum Schliessen aus dem Bild — und weil der Rumpf im offenen Raum
   nicht scrollt, wäre er dann gar nicht mehr zu erreichen.

   Zwei Riegel dagegen. Die Vorlage gibt beiden <details> denselben Namen; ein
   neuerer Browser lässt daraufhin immer nur eines offen. Und der Fuss selbst
   bekommt weiter unten eine Obergrenze: was darüber hinausgeht, scrollt in ihm,
   gleichgültig was darin steht. Der Verweis zum Schliessen bleibt so unter
   allen Umständen erreichbar.
   ------------------------------------------------------------------------ */

.nni-salon__keep {
	display: grid;
	gap: clamp(4px, .7vw, 8px);
	flex: 1 1 100%;
	justify-items: start;
	min-width: 0;
}

.nni-salon__keep-item {
	width: 100%;
	min-width: 0;
}

/* Das Dreieck fällt weg — in Safari über den eigenen Pseudo-Elementnamen, in
   allen anderen über list-style. Der Rest kommt aus .nni-link. */
.nni-salon__keep-link {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	list-style: none;
	cursor: pointer;
}

.nni-salon__keep-link::-webkit-details-marker {
	display: none;
}

.nni-salon__keep-form {
	display: grid;
	gap: clamp(14px, 1.8vw, 22px);
	width: 100%;
	max-width: 34rem;
	min-width: 0;
	margin-block: clamp(10px, 1.4vw, 16px) clamp(6px, 1vw, 10px);
	padding-inline-start: clamp(14px, 1.6vw, 22px);
	border-inline-start: var(--nni-hair) solid var(--nni-line);
}

/* Die Obergrenze des Fusses. Sie steht hier und nicht am Formular, damit sie
   auch dann trägt, wenn ausser dem Formular noch der Hinweis zum Ablegen im
   Fuss steht — und damit der Verweis zum Schliessen notfalls durch Scrollen
   erreichbar bleibt statt hinter dem Rand zu verschwinden. */
.nni-salon--open .nni-salon__foot {
	max-height: 72svh;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--nni-line) transparent;
}

.nni-salon--open .nni-salon__foot::-webkit-scrollbar {
	width: 6px;
}

.nni-salon--open .nni-salon__foot::-webkit-scrollbar-thumb {
	background-color: var(--nni-line);
}

.nni-salon--open .nni-salon__foot::-webkit-scrollbar-track {
	background-color: transparent;
}

/* Dieselbe Bremse wie am grossen Formular: solange gesendet wird, ist der
   Knopf ausser Betrieb. salon.js setzt is-busy auf das Formular selbst. */
.nni-salon__keep-form.is-busy .nni-btn {
	opacity: .5;
	pointer-events: none;
}

/* Der Satz aus der Adresse, wenn er zu keinem der beiden Formulare gehört. */
.nni-salon__foot-note {
	flex: 1 1 100%;
	max-width: 52ch;
	margin: 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-sm);
	line-height: 1.75;
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-muted);
}

.nni-salon__foot-note.is-error {
	color: var(--nni-danger);
}

/* ---------------------------------------------------------------------------
   14 · Auf den Startbildschirm legen

   Kein Banner. Eine Haarlinie am Rand, zwei Zeilen daneben, zwei Verweise
   darunter — dieselbe Sprache, in der weiter oben die zurückgesetzte
   Passphrase steht. Sichtbar wird der Kasten allein durch salon.js; ohne
   Skript bleibt er, wo er ist: aus.
   ------------------------------------------------------------------------ */

.nni-salon__install {
	display: grid;
	gap: clamp(8px, 1vw, 12px);
	max-width: 52ch;
	padding-inline-start: clamp(14px, 1.6vw, 22px);
	border-inline-start: var(--nni-hair) solid var(--nni-line);
}

/* Die eigene Regel schlägt das display: grid — ohne sie stünde der Kasten
   auch dann da, wenn das Skript ihn verborgen hat. */
.nni-salon__install[hidden] {
	display: none;
}

.nni-salon__install-why,
.nni-salon__install-how {
	margin: 0;
	font-family: var(--nni-sans);
	font-weight: 300;
	font-size: var(--nni-fs-sm);
	line-height: 1.75;
	letter-spacing: var(--nni-ls-body);
	color: var(--nni-faint);
}

/* Die Geste ist das, worauf es ankommt: sie steht eine Spur heller. */
.nni-salon__install-how {
	color: var(--nni-muted);
}

.nni-salon__install-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(16px, 2.4vw, 30px);
	margin: 0;
}

.nni-salon__install .nni-link {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: var(--nni-sans);
	font-size: var(--nni-fs-micro);
}

/* Im offenen Raum sitzt der Kasten im Fuss und nimmt dort eine eigene Zeile,
   damit der Verweis zum Schliessen rechts stehen bleibt, wo er war.

   Die Laufweite wandert dabei von der Hülle auf die Zeilen darin: bliebe sie
   an der Hülle, wäre diese nur 52ch breit — und der Umbruch im Flex rechnet
   mit genau dieser Breite. Der Verweis zum Schliessen rutschte daneben statt
   darunter, am Schreibtisch nachgemessen. */
.nni-salon__foot .nni-salon__install {
	flex: 1 1 100%;
	max-width: none;
	padding-block-end: clamp(6px, 1vw, 10px);
}

.nni-salon__foot .nni-salon__install > * {
	max-width: 52ch;
}

/* ---------------------------------------------------------------------------
   14b · Die Lade — der Fuss auf einer eigenen Ebene

   Alles oben Beschriebene galt, solange der Fuss im Raum stand: eine
   Obergrenze, ein Riegel gegen zwei offene Formulare, ein Verweis, der
   notfalls erscrollt werden musste. Nachgemessen war das Ergebnis trotzdem
   nicht tragbar — der Fuss nahm 436,7 px am Schreibtisch und 369,1 px auf dem
   Telefon, und für das Gespräch, den eigentlichen Raum dieses Hauses, blieben
   80 px. Von zwölf Nachrichten eine, oben und unten angeschnitten.

   Also wandert der Fuss hinaus. salon.js legt seinen Inhalt in eine Lade und
   setzt .nni-salon--tucked; im Raum bleibt eine einzige ruhige Zeile. Die Lade
   liegt fest am unteren Rand, hat ihre eigene Höhe und ihr eigenes Scrollen —
   der Weg hinaus ist damit immer erreichbar, ohne dem Gespräch etwas zu
   nehmen.

   Ohne Skript passiert nichts von alledem: dann fehlt die Klasse, alles oben
   gilt weiter, und beide Formulare stehen im gewöhnlichen Seitenfluss.
   ------------------------------------------------------------------------ */

/* Getuckt trägt der Fuss nur noch die eine Zeile. Die Obergrenze aus
   Abschnitt 13 gilt hier ausdrücklich nicht mehr — sie ist eine Regel für
   einen Fuss, der Inhalt hat. */
.nni-salon--open.nni-salon--tucked .nni-salon__foot {
	max-height: none;
	overflow: visible;
	padding-block: 0 clamp(8px, 1.2vw, 14px);
}

/* 44 px, nicht die 34 der übrigen Fusszeilen: auf dem Telefon ist das jetzt
   der einzige Weg zu Rufname, Schlüssel und Ausgang, und eine Antippfläche
   unter 44 px wäre an dieser Stelle nicht zu verantworten. */
.nni-salon__foot .nni-salon__more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	font-family: var(--nni-sans);
	font-size: var(--nni-fs-micro);
	text-align: start;
}

/* Der stille Punkt: es liegt etwas in der Lade, das noch niemand gesehen hat
   — der Hinweis, wie man den Salon ablegt. Keine Farbe, kein Wort, kein
   Ausrufezeichen. */
.nni-salon__foot .nni-salon__more[data-nni-mark]::after {
	content: "";
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	margin-inline-start: 10px;
	border-radius: 50%;
	background-color: var(--nni-bronze);
}

.nni-salon__aside {
	display: grid;
	gap: clamp(14px, 2.2vw, 24px);
	width: 100%;
	min-width: 0;
}

/* Die eigene Regel schlägt das display: grid — sonst stünde die Lade offen,
   sobald salon.js sie verborgen hat. */
.nni-salon__aside[hidden] {
	display: none;
}

.nni-salon--tucked .nni-salon__aside {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 30;
	justify-items: start;
	max-height: min(76svh, 640px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--nni-line) transparent;

	/* Dieselbe Bahn wie der Raum darüber: 68rem, mittig, mit dem Rinnstein
	   des Hauses. Bleibt die Sicht darunter, gilt der Rinnstein allein. */
	padding-inline: max(var(--nni-gutter), calc((100% - 68rem) / 2 + var(--nni-gutter)));
	padding-block: clamp(20px, 2.6vw, 30px)
		calc(clamp(20px, 2.6vw, 30px) + env(safe-area-inset-bottom));
	background-color: var(--nni-black);
	border-top: var(--nnis-line);
	box-shadow: 0 -22px 48px rgba(0, 0, 0, .58);
	animation: nnis-lift var(--nni-t-med) var(--nni-ease) both;
}

.nni-salon--tucked .nni-salon__aside::-webkit-scrollbar {
	width: 6px;
}

.nni-salon--tucked .nni-salon__aside::-webkit-scrollbar-thumb {
	background-color: var(--nni-line);
}

.nni-salon--tucked .nni-salon__aside::-webkit-scrollbar-track {
	background-color: transparent;
}

/* In der Lade steht der Inhalt untereinander, nicht nebeneinander: sie ist
   breit genug, dass ein Umbruch nur Löcher risse. */
.nni-salon--tucked .nni-salon__aside > * {
	width: 100%;
	min-width: 0;
}

.nni-salon--tucked .nni-salon__aside .nni-salon__install {
	max-width: none;
	padding-block-end: 0;
}

@keyframes nnis-lift {
	from {
		opacity: 0;
		transform: translateY(10px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------------------
   15 · Kleine Geräte
   ------------------------------------------------------------------------ */

@media (max-width: 47.99em) {
	.nni-salon {
		--nnis-bubble: min(30rem, 88%);
	}

	.nni-salon__room {
		padding-inline: clamp(16px, 4.6vw, 26px);
	}

	.nni-salon__line {
		flex-basis: 100%;
		text-align: start;
	}

	.nni-salon__head {
		padding-block: clamp(10px, 2vw, 16px) 10px;
	}

	.nni-salon__foot {
		justify-content: flex-start;
	}
}

@media (max-height: 34em) and (orientation: landscape) {
	.nni-salon__head .nni-salon__line {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
   16 · Weniger Bewegung
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.nni-salon__label,
	.nni-salon__input,
	.nni-salon__msg,
	.nni-salon__write,
	.nni-salon__icon,
	.nni-salon__send,
	.nni-salon__play,
	.nni-salon__doc,
	.nni-salon__view,
	.nni-salon__shot img,
	.nni-salon__tray-drop,
	.nni-salon__wait-bar i,
	.nni-salon__wait-stop,
	.nni-salon__snag-again,
	.nni-salon__snag-drop {
		transition: none;
	}

	.nni-salon__msg {
		transform: none;
	}

	.nni-salon__tick--pending,
	.nni-salon__typing-dot {
		animation: none;
		opacity: .8;
	}

	.nni-salon--tucked .nni-salon__aside {
		animation: none;
	}

	.nni-salon__shot img {
		opacity: 1;
	}
}