/* Farb-, Schatten- und Radius-Werte 1:1 aus dem Claude-Design-Projekt
   "Piratenchat-Regelerklärungen" übernommen (tokens/colors.css,
   tokens/shadows.css, tokens/radius.css). Texturen (Papier, Metall,
   Ecken-Ornamente) liegen jetzt als echte Bild-Assets unter assets/. */

:root {
  --sand: #f5f0e6;
  --brown: #6b4c27;
  --orange: #e88e2a;
  --green: #3d5a40;
  --text-black: #4a2e00;
  --headline: #cf3b21;
  --ink-900: #222222;

  --input-top: #f3f0ea;
  --input-bottom: #f8d499;
  --input-focus-border: #ff944d;
  --placeholder: rgb(74, 46, 0);

  --btn-secondary-top: #ffe0b2;
  --btn-secondary-bottom: #ffd699;
  --btn-disabled-top: #ffffff;
  --btn-disabled-bottom: #e8dcc9;
  --btn-disabled-text: #cdc7c7;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-full: 900px;

  --shadow-sticker-sm: -2px 2px 0px rgba(0, 0, 0, 0.9);
  --shadow-input-inset: inset 4px 2px 4px rgba(0, 0, 0, 0.1), inset -3px 3px 4px rgba(0, 0, 0, 0.6);

  --font-body: 'Enriqueta', Georgia, serif;
  --font-pirate: 'Pirata One', 'IM Fell English', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: #2a2016;
  font-family: var(--font-body);
  color: var(--text-black);
}

.pirate-font {
  font-family: var(--font-pirate);
  font-weight: 400;
}

.app {
  max-width: 460px;
  margin: 0 auto;
  /* 100svh statt 100vh: nimmt garantiert den tatsächlich sichtbaren Bereich
     (kleinstmögliche Viewport-Höhe bei voll ausgeklappter Browser-UI), damit
     die Eingabezeile auf Android/iOS nie unterhalb des Screens landet. */
  height: 100vh;
  height: 100svh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-image:
    radial-gradient(ellipse at 50% 20%, rgba(255, 224, 178, 0.12), transparent 60%),
    linear-gradient(rgba(10, 7, 4, 0.4), rgba(10, 7, 4, 0.6)),
    url('assets/background.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Eck-Ornamente: fester Bestandteil des Rahmens, bündig in den vier
   Bildschirmecken der .app-Fläche verankert (nicht am Header-Schild). */
.corner {
  position: absolute;
  z-index: 5;
  width: clamp(48px, 16vw, 96px);
  aspect-ratio: 153 / 149;
  background-image: url('assets/corner.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
}
.corner-tl { top: 0; left: 0; transform: scale(-1, -1); }
.corner-tr { top: 0; right: 0; transform: scaleY(-1); }
.corner-bl { bottom: 0; left: 0; transform: scaleX(-1); }
.corner-br { bottom: 0; right: 0; }

/* ---------- Header ---------- */

.header {
  position: relative;
  padding: 20px 28px 14px;
  text-align: center;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.plaque {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 34px;
  background-image:
    linear-gradient(160deg, rgba(255,255,255,.35) 0%, transparent 30%),
    linear-gradient(20deg, rgba(0,0,0,.25) 0%, transparent 40%),
    url('assets/metal-plaque-texture.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 3px solid #2b1c0d;
  border-radius: 10px;
  box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.6), inset 0 -3px 5px rgba(0,0,0,.35);
}


.rivet {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff8, #8a6d2e 55%, #3a2c10 100%);
  border: 1px solid #2b1c0d;
}
.rivet-left { left: 9px; }
.rivet-right { right: 9px; }

.plaque-title {
  font-family: var(--font-pirate);
  font-size: 28px;
  color: #3a2409;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 -1px 1px rgba(0,0,0,.25);
}

.subtitle {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 15px;
  color: #fff8e0;
  margin-top: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.85), 0 0 6px rgba(0,0,0,0.6);
}

.mute-btn {
  position: absolute;
  z-index: 6;
  top: 18px;
  right: 20px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
  background: radial-gradient(circle at 38% 32%, #454037 0%, #201d18 55%, #0a0908 100%);
  border: 2px solid #6b5a34;
  box-shadow: 0 0 0 2px rgba(0,0,0,.55), inset 0 2px 4px rgba(0,0,0,.85), inset 0 -1px 1px rgba(255,235,180,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #f0d68a;
}

/* ---------- Chat ---------- */

.chat {
  position: relative;
  flex: 1;
  overflow-y: auto;
  padding: 8px 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.chat::-webkit-scrollbar { width: 8px; }
.chat::-webkit-scrollbar-thumb { background: rgba(74,46,0,.35); border-radius: 8px; }

.empty-hint {
  align-self: center;
  max-width: 82%;
  padding: 14px 18px;
  border-radius: var(--radius-md);
  box-shadow: 2px 4px 10px rgba(0,0,0,.3);
  font-size: 14px;
  text-align: center;
  background-color: var(--sand);
  background-image: url('assets/paper.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: var(--text-black);
}

.msg-row {
  max-width: 80%;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.msg-row.user { align-self: flex-end; flex-direction: row-reverse; }
.msg-row.kaptain, .msg-row.polly { align-self: flex-start; }

.avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-full);
  border: solid 2px #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  box-shadow: var(--shadow-sticker-sm);
}
.avatar.user { background: var(--sand); }
.avatar.kaptain { background: var(--orange); width: 42px; height: 42px; font-size: 21px; }
.avatar.polly { background: var(--green); }
.avatar-spacer { visibility: hidden; }

.avatar-img {
  background-size: cover;
  background-position: center;
}
.avatar.kaptain.avatar-img { background-image: url('assets/kaptain-avatar.png'); }
.avatar.polly.avatar-img { background-image: url('assets/polly-avatar.png'); }

/* Pergamentzettel: paper.png liefert die Struktur (ein per JS zufälliger
   Ausschnitt pro Nachricht, --paper-pos), eine der 5 mask-N.png-Varianten
   (--mask-img) liefert die ausgefranste Kontur als CSS-Maske. Der
   Schlagschatten folgt über den Filter automatisch der so entstehenden
   (Masken-)Silhouette. Lange Antworten werden in app.js auf mehrere Zettel
   aufgeteilt statt hier zu scrollen. */
.bubble {
  position: relative;
  z-index: 0;
  padding: 18px 22px 22px;
  background-image: url('assets/paper.png');
  background-size: 260% 260%;
  background-position: var(--paper-pos);
  background-repeat: no-repeat;
  -webkit-mask-image: var(--mask-img);
  mask-image: var(--mask-img);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: contrast(1.12) brightness(1.02) drop-shadow(3px 5px 3px rgba(0, 0, 0, .45));
}

.bubble-name {
  font-family: var(--font-pirate);
  font-size: 17px;
  line-height: 1;
  margin-bottom: 8px;
}
.msg-row.user .bubble-name { color: var(--headline); text-align: right; }
.msg-row.kaptain .bubble-name { color: var(--headline); font-size: 19px; }
.msg-row.polly .bubble-name { color: var(--green); }

.bubble-text {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-black);
}
.msg-row.polly .bubble-text { font-size: 15px; line-height: 1.65; }

.typing-dots {
  display: flex;
  gap: 5px;
  align-items: center;
  height: 18px;
  padding: 2px 0;
}
.typing-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
  background: var(--brown);
  animation: sv-dot 1s infinite;
}
.msg-row.polly .typing-dots span { background: var(--green); width: 6px; height: 6px; }
.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes sv-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------- Composer ---------- */

.composer {
  position: relative;
  flex-shrink: 0;
  padding: 12px 18px calc(34px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 8px;
  align-items: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,.12), transparent 60%);
}

.input-field {
  flex: 1;
  height: 52px;
  border-radius: var(--radius-sm);
  padding: 0 1rem;
  font-size: 1rem;
  font-family: var(--font-body);
  font-weight: 700;
  color: var(--ink-900);
  border: solid 3px #000;
  box-shadow: var(--shadow-input-inset);
  outline: none;
  background: linear-gradient(135deg, var(--input-top), var(--input-bottom));
}
.input-field::placeholder { color: var(--placeholder); opacity: .75; }
.input-field:focus { border-color: var(--input-focus-border); }
.input-field:disabled { opacity: .6; }

.send-btn {
  flex-shrink: 0;
  height: 40px;
  min-width: 110px;
  border-radius: var(--radius-md);
  border: solid 3px #000;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .05em;
  color: var(--ink-900);
  cursor: pointer;
  box-shadow: var(--shadow-sticker-sm);
  background: linear-gradient(to bottom, var(--btn-secondary-top), var(--btn-secondary-bottom));
}
.send-btn:disabled {
  cursor: not-allowed;
  color: var(--btn-disabled-text);
  background: linear-gradient(to bottom, var(--btn-disabled-top), var(--btn-disabled-bottom));
}

.error-text {
  color: #b00020;
  font-weight: 700;
}

/* ---------- Feedback (👍/👎) ---------- */

.feedback-row {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.feedback-btn {
  border: solid 2px #000;
  border-radius: var(--radius-full);
  width: 32px;
  height: 32px;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  background: #fffdf7;
  box-shadow: var(--shadow-sticker-sm);
}
.feedback-btn:hover:not(:disabled) { background: #fff; }
/* Grün/Rot statt Gelb/Orange im aktiven Zustand: das gelbliche Emoji geht
   auf gelb-orangem Grund optisch unter, auf Grün/Rot hebt es sich klar ab. */
.feedback-btn.active[data-rating="up"] {
  background: var(--green);
  border-color: #1c2a1e;
}
.feedback-btn.active[data-rating="down"] {
  background: var(--headline);
  border-color: #5c150c;
}