/*
 * sheet.css — Modal im iOS-Stil (<dialog class="sheet">): Glas-Karte mit
 * Titelleiste und "Fertig" rechts, scrollender Inhalt. Dazu .legal fuer
 * Rechtstexte (Impressum) und die Anschrift als Bild.
 */

.sheet {
  width: min(680px, calc(100vw - 2 * var(--gutter)));
  max-height: min(84vh, 900px);
  padding: 0;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  background: var(--surface-1);
  color: var(--bar-fg);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  overflow: hidden;
}

.sheet[open] {
  display: flex;
  flex-direction: column;
  animation: sheet-in 320ms cubic-bezier(0.2, 0.9, 0.25, 1) both;
}

.sheet::backdrop {
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

.sheet-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--sp-4);
  border-bottom: 0.5px solid var(--separator);
  background: var(--surface-2);
}

.sheet-title {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: 600;
}

.sheet-done {
  position: absolute;
  right: var(--sp-2);
  appearance: none;
  border: 0;
  background: transparent;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  color: var(--accent);
  font-weight: 600;
  cursor: pointer;
}

.sheet-done:hover,
.sheet-done:focus-visible {
  background: var(--bar-hover);
  outline: none;
}

.sheet-body {
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-6) var(--sp-8);
}

/* ---------- Rechtstext ---------- */

.legal {
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--bar-fg-dim);
}

.legal h3 {
  margin: var(--sp-6) 0 var(--sp-2);
  font-size: var(--fs-md);
  color: var(--bar-fg);
}

.legal h4 {
  margin: var(--sp-4) 0 var(--sp-1);
  font-size: var(--fs-sm);
  color: var(--bar-fg);
}

.legal p {
  margin: 0 0 var(--sp-3);
}

.legal b {
  color: var(--bar-fg);
}

.legal-note {
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius);
  background: var(--surface-2);
}

.legal-note:empty {
  display: none;
}

/* Anschrift als Bild (wie mattern.band/impressum, Schutz vor Scrapern) */
.imprint-address {
  display: block;
  width: 172px;
  height: 112px;
  margin: var(--sp-2) 0 var(--sp-3);
  background: url("../images/imprint/1.png"), url("../images/imprint/2.png"), url("../images/imprint/3.png"), url("../images/imprint/4.png");
  background-size: contain;
  background-repeat: no-repeat;
}

/* ---------- Anfrageformular (Werbespiele) ---------- */

.sheet-form {
  width: min(560px, calc(100vw - 2 * var(--gutter)));
}

.inquiry {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
}

.inquiry-intro {
  margin: 0 0 var(--sp-1);
  line-height: 1.5;
  color: var(--bar-fg-dim);
}

.inquiry-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.inquiry-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--bar-fg-dim);
}

.inquiry-field input,
.inquiry-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 11px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--bar-fg);
  font: inherit;
  font-size: 16px;
}

.inquiry-field textarea {
  resize: vertical;
  min-height: 110px;
}

.inquiry-field input:focus,
.inquiry-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* Bot-Falle: fuer Menschen unsichtbar */
.inquiry-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.inquiry-privacy {
  margin: 0;
  font-size: 12px;
  color: var(--bar-fg-faint);
}

.inquiry-status {
  margin: 0;
}

.inquiry-status:empty {
  display: none;
}

.inquiry-status.is-ok { color: var(--ok); }
.inquiry-status.is-error { color: var(--bar-danger); }

.inquiry-send {
  align-self: flex-end;
}

@media (max-width: 520px) {
  .inquiry-row {
    grid-template-columns: 1fr;
  }

  .sheet-body.inquiry {
    padding: var(--sp-4);
  }
}

/* ---------- Problem melden (js/report.js) ---------- */

.report {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.report-text {
  width: 100%;
  min-height: 90px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--separator);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--bar-fg);
  font: inherit;
  font-size: var(--fs-md);
  resize: vertical;
}

.report-text:focus {
  outline: none;
  border-color: var(--accent);
}

.report-info {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
}

.report-image {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 12px;
  color: var(--text-2);
  cursor: pointer;
}

.report-image img {
  width: 64px;
  height: 40px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--separator);
}

.report-types {
  display: flex;
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--surface-2);
}

.report-type {
  flex: 1;
  appearance: none;
  border: 0;
  padding: 6px;
  border-radius: 8px;
  background: transparent;
  color: var(--bar-fg-dim);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.report-type.is-active {
  background: var(--surface-3);
  color: var(--bar-fg);
}

/* ---------- Team: Messenger als Dock-App + Fenster links unten (js/team.js, nur Admins) ---------- */

.team-app .app-tile {
  position: relative;
}

/* Status rechts oben auf der Kachel: rot = niemand online, gruen = online (blinkt beim Online-Kommen) */
.team-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  background: #ff3b30;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  visibility: hidden;
}

.team-app.is-known .team-dot {
  visibility: visible;
}

.team-app.is-online .team-dot {
  background: #34c759;
}

.team-app.is-blink .team-dot {
  animation: team-blink 0.45s ease-in-out 4;
}

@keyframes team-blink {
  50% { opacity: 0.15; transform: scale(1.25); }
}

.team-app.is-open .app-label {
  color: var(--bar-fg);
}

.team-badge {
  /* links oben, damit der Status-Punkt rechts oben frei bleibt */
  position: absolute;
  top: -6px;
  left: calc(50% - var(--dock-icon) / 2 - 8px);
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background: var(--bar-danger);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

/* Fenster ohne Abdunkeln: links, knapp ueber der Impressum-Zeile */
.sheet-team {
  position: fixed;
  inset: auto auto calc(var(--safe-bottom) + 34px) var(--gutter);
  z-index: 20;
  margin: 0;
  width: min(380px, calc(100vw - 2 * var(--gutter)));
  height: min(62vh, 560px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  transform-origin: bottom left;
}

.team-status {
  padding: var(--sp-2) var(--sp-4);
  font-size: 12px;
  color: var(--bar-fg-faint);
  text-align: center;
  border-bottom: 0.5px solid var(--separator);
}

.team-status.is-online {
  color: var(--ok);
}

.team-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-4);
}

.team-empty {
  margin: auto;
  color: var(--bar-fg-faint);
  font-size: var(--fs-sm);
}

.team-msg {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 80%;
  padding: 7px 12px;
  border-radius: 16px 16px 16px 4px;
  background: var(--surface-3);
}

.team-msg.is-mine {
  align-self: flex-end;
  border-radius: 16px 16px 4px 16px;
  background: #0a84ff;
  color: #fff;
}

.team-msg-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--bar-fg-dim);
}

.team-msg-text {
  font-size: var(--fs-sm);
  line-height: 1.4;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.team-msg-time {
  align-self: flex-end;
  font-size: 10px;
  opacity: 0.6;
}

.team-compose {
  display: flex;
  align-items: flex-end;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-top: 0.5px solid var(--separator);
  background: var(--surface-2);
}

.team-input {
  flex: 1;
  min-height: 40px;
  max-height: 140px;
  padding: 9px 12px;
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  background: var(--surface-1);
  color: var(--bar-fg);
  font: inherit;
  font-size: 16px;
  resize: none;
  field-sizing: content;
}

.team-input:focus {
  outline: none;
  border-color: var(--accent);
}