/* Bouteilles à la mer (bottles.js) : la fenêtre qui en écrit une, celle qui la débouche (la bouteille
   tangue sur une vaguelette, le bouchon saute, le mot roulé sort du goulot et se déroule), ses
   bouteilles à relire, et les signalements des admins. Le papier reste clair, même en thème
   sombre : c'est une feuille. */

.bottle-big {
  display: block;
  image-rendering: pixelated;
}

/* --- Écrire --- */
.bottle-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.bottle-mini {
  flex: none;
  padding: 10px 6px;
  border-radius: var(--r-md);
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--teal) 22%, transparent) 55%), var(--fill);
  animation: bottle-rock 3.2s ease-in-out infinite;
}
.bottle-sub {
  color: var(--text-2);
  font-size: var(--fs-sub);
  margin-top: 2px;
  font-weight: 400;
}
.bottle-quote {
  margin: 0;
  padding: 8px 12px;
  border-radius: var(--r-md);
  background: var(--fill);
  color: var(--text-2);
  font-size: var(--fs-sub);
  font-style: italic;
  overflow-wrap: anywhere;
}
.bottle-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bottle-starter {
  border: 0;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: var(--fill);
  font: inherit;
  font-size: var(--fs-sub);
  color: var(--text);
  cursor: pointer;
  transition: transform var(--dur-slow) var(--ease-spring), background var(--dur-fast) var(--ease-out);
}
.bottle-starter:hover {
  background: color-mix(in srgb, var(--accent) 12%, var(--fill));
}
.bottle-starter:active {
  transform: scale(0.95);
  transition-duration: var(--dur-press);
}
.bottle-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: var(--fs-sub);
  font-weight: 600;
  color: var(--text-2);
}
.bottle-count {
  font-weight: 500;
  font-size: var(--fs-caption);
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.bottle-field .bottle-input {
  min-height: 110px;
  resize: none;
  font-size: var(--fs-callout);
  line-height: 1.45;
}
.bottle-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.bottle-signed {
  flex: 1 1 140px;
  font-size: var(--fs-footnote);
  color: var(--text-3);
}
.bottle-signed b {
  color: var(--text-2);
  font-weight: 650;
}
/* Boutons avec une icône : l'icône et le texte sur la même ligne, centrés. */
.bottle-composer .btn,
.bottle-actions .btn,
.bottle-report-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.bottle-composer .btn .ic,
.bottle-actions .btn .ic,
.bottle-report-actions .btn .ic {
  display: inline-flex;
}
.bottle-composer .btn .ic svg,
.bottle-actions .btn .ic svg,
.bottle-report-actions .btn .ic svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* --- Déboucher --- */
.modal.bottle-reader {
  width: min(440px, 100%);
  overflow: hidden;
}
.bottle-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 230px;
}
.bottle-stage > * {
  grid-area: 1 / 1;
}
.bottle-stage.sheet {
  min-height: 0;
  padding: 4px 0;
}
/* La vaguelette sous la bouteille (hors du flux : elle ne compte pas dans la hauteur). */
.bottle-sea {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 56%;
  height: 34%;
  border-radius: 50% 50% var(--r-xl) var(--r-xl) / 22% 22% var(--r-xl) var(--r-xl);
  /* L'eau de la plage (ses bleus), une ligne d'écume au bord. */
  background:
    radial-gradient(ellipse 62% 14% at 50% 5%, rgba(255, 255, 255, 0.75), transparent 72%),
    radial-gradient(ellipse 40% 10% at 30% 45%, rgba(255, 255, 255, 0.25), transparent 70%),
    linear-gradient(rgba(79, 195, 232, 0.7), rgba(47, 155, 216, 0.18));
  animation: bottle-swell 3.2s ease-in-out infinite;
  pointer-events: none;
}
.bottle-tap {
  position: relative;
  border: 0;
  padding: 12px;
  background: none;
  border-radius: var(--r-xl);
  cursor: pointer;
  outline: none;
  z-index: 2;
  animation: bottle-rock 3.2s ease-in-out infinite;
}
.bottle-tap:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.bottle-tap.open {
  animation: bottle-lift 620ms var(--ease-out) forwards;
  pointer-events: none;
  box-shadow: none;
}
/* Le bouchon, posé sur le goulot (à droite), qui saute en tournant. */
.bottle-tap .bottle-cork {
  position: absolute;
  right: 12px;
  top: calc(12px + 16px);
  animation: bottle-cork 720ms cubic-bezier(0.2, 0.7, 0.4, 1) forwards;
}
/* Le mot roulé qui sort du goulot avant de se dérouler. */
.bottle-roll {
  width: 46px;
  height: 14px;
  border-radius: 7px;
  background: linear-gradient(#fffaf0, #e9dcbc);
  box-shadow: inset -6px 0 0 #7944c0, 0 4px 10px -4px rgba(31, 23, 53, 0.35);
  z-index: 3;
  opacity: 0;
  animation: bottle-roll-out 520ms var(--ease-spring) 380ms forwards;
}
.bottle-hint {
  margin: 0;
  text-align: center;
  font-size: var(--fs-sub);
  color: var(--text-2);
}

/* La feuille : elle part du goulot, roulée, et se déroule de haut en bas. */
.bottle-paper {
  position: relative;
  width: min(340px, 100%);
  z-index: 3;
}
.bottle-paper.unrolling {
  animation: bottle-unroll 760ms var(--ease-sheet) both;
}
.bottle-face {
  box-sizing: border-box;
  padding: 22px 24px 16px;
  border-radius: 6px;
  color: #2a2140;
  background:
    linear-gradient(90deg, rgba(166, 128, 72, 0.16), transparent 9%, transparent 91%, rgba(166, 128, 72, 0.16)),
    repeating-linear-gradient(transparent 0 25px, rgba(121, 68, 192, 0.07) 25px 26px),
    #fbf4e2;
  box-shadow:
    0 18px 34px -16px rgba(31, 23, 53, 0.45),
    0 2px 6px -2px rgba(31, 23, 53, 0.18);
}
.bottle-reply-to {
  margin-bottom: 10px;
  font-size: var(--fs-footnote);
  color: rgba(42, 33, 64, 0.6);
}
.bottle-reply-to q {
  font-style: italic;
}
.bottle-text {
  margin: 0;
  font-size: 16px;
  line-height: 26px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bottle-sign {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  font-size: var(--fs-footnote);
  color: rgba(42, 33, 64, 0.6);
}
.bottle-sign b {
  color: #2a2140;
  font-weight: 650;
}
.bottle-sign b::before {
  content: "— ";
  font-weight: 400;
}
.bottle-actions {
  align-items: center;
}
.bottle-actions .grow {
  flex: 1;
}
.bottle-actions.later {
  animation: bottle-actions-in 420ms var(--ease-out) 700ms backwards;
}
.bottle-actions .btn:first-child {
  color: var(--text-2);
}
.bottle-replied {
  font-size: var(--fs-footnote);
  color: var(--text-3);
}

/* --- Ses bouteilles --- */
.modal.bottle-list-modal {
  width: min(460px, 100%);
}
.bottle-today {
  margin: 0;
  color: var(--text-2);
  font-size: var(--fs-sub);
}
.bottle-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bottle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  padding: 7px 8px;
  border-radius: var(--r-sm);
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.bottle-row:hover {
  background: var(--fill);
}
.bottle-row-icon {
  flex: none;
}
.bottle-row-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.bottle-row-first {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bottle-row small {
  color: var(--text-2);
  font-size: var(--fs-caption);
}

/* --- Signalements (admins) --- */
.modal.bottle-reports {
  width: min(500px, 100%);
}
.bottle-report-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bottle-report {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: var(--fill);
  animation: bottle-actions-in var(--dur-slow) var(--ease-out) backwards;
}
.bottle-report .bottle-text {
  font-size: var(--fs-callout);
  line-height: 1.45;
}
.bottle-report-meta {
  font-size: var(--fs-footnote);
  color: var(--text-2);
}
.bottle-report-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}

@keyframes bottle-rock {
  0%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }
  50% {
    transform: translateY(5px) rotate(3deg);
  }
}
@keyframes bottle-swell {
  0%,
  100% {
    transform: translateY(0) scaleX(1);
  }
  50% {
    transform: translateY(4px) scaleX(1.03);
  }
}
@keyframes bottle-lift {
  to {
    transform: translateY(-6px) rotate(-14deg);
    opacity: 0.92;
  }
}
@keyframes bottle-cork {
  30% {
    transform: translate(16px, -46px) rotate(160deg);
    opacity: 1;
  }
  to {
    transform: translate(40px, -10px) rotate(400deg);
    opacity: 0;
  }
}
@keyframes bottle-roll-out {
  from {
    opacity: 1;
    transform: translate(34px, -12px) rotate(-14deg) scale(0.5);
  }
  to {
    opacity: 1;
    transform: translate(0, -4px) rotate(0) scale(1);
  }
}
@keyframes bottle-unroll {
  from {
    clip-path: inset(0 0 calc(100% - 16px) 0 round 6px);
    transform: translateY(-10px) scaleX(0.4);
  }
  35% {
    clip-path: inset(0 0 calc(100% - 16px) 0 round 6px);
    transform: translateY(-6px) scaleX(1);
  }
  to {
    clip-path: inset(0 0 0 0 round 6px);
    transform: none;
  }
}
@keyframes bottle-actions-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bottle-mini,
  .bottle-tap,
  .bottle-sea {
    animation: none;
  }
}