/* ── Message in a bottle — the letter (client/src/ui/bottle_letter.js).
   The sheet itself is the shared paper overlay (css/paper.css); this file
   only lays out what is written on it: the notes, each in its writer's own
   ink and slightly crooked, older ones more faded (set inline by the JS),
   separated by a little hand-drawn wave, and the writing space at the
   bottom. Reading AND writing work on phones too. ── */

#bottle-notes {
	flex: 1 1 auto;
	min-height: 60px;
	display: flex;
	flex-direction: column;
	padding: 2px 4px 4px;
}

.bottle-empty {
	font: 400 22px/1.3 'Caveat', cursive;
	color: var(--ink-faded);
	text-align: center;
	padding: 18px 8px;
	transform: rotate(-1deg);
}

.bottle-note {
	--note-ink: var(--ink);
	color: var(--note-ink);
	transform: rotate(-0.7deg);
}

.bottle-note:nth-child(even) {
	transform: rotate(0.6deg);
	padding-left: 10px;
}

/* A small hand-drawn wave between two writers. */
.bottle-note + .bottle-note {
	margin-top: 12px;
	padding-top: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='8'%3E%3Cpath d='M2 4 Q 9 0, 16 4 T 30 4 T 44 4 T 58 4' fill='none' stroke='%237a6546' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E") top center / 60px 8px no-repeat;
}

.bottle-note-body {
	font: 400 23px/1.2 'Caveat', cursive;
	white-space: pre-wrap;
	word-break: break-word;
}

.bottle-note-sig {
	margin-top: 4px;
	font: 600 19px/1.1 'Caveat', cursive;
	text-align: right;
	opacity: 0.85;
}

#bottle-compose {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 8px;
	border-top: 1px dashed rgba(110, 80, 40, 0.3);
}

#bottle-compose.hidden {
	display: none;
}

.bottle-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

#bottle-own-last {
	padding-top: 8px;
	border-top: 1px dashed rgba(110, 80, 40, 0.3);
	font-size: 21px;
	text-align: center;
}

#bottle-own-last.hidden {
	display: none;
}

#bottle-status {
	min-height: 18px;
}

/* Short "why not" line when the server refuses to hand over a bottle —
   a scrap of the same paper. */
#bottle-notice {
	position: fixed;
	left: 50%;
	bottom: 110px;
	transform: translateX(-50%) rotate(-1deg);
	z-index: 20001;
	max-width: calc(100vw - 32px);
	padding: 6px 16px 8px;
	background: linear-gradient(170deg, #f4e9cc, #e6d2a4);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
	color: #2f2616;
	font: 600 21px/1.15 'Caveat', 'Segoe Print', cursive;
	pointer-events: none;
	box-sizing: border-box;
	text-align: center;
}

#bottle-notice.hidden {
	display: none;
}