/* Der Chat einer Online-Partie. Das Fenster liegt über dem Spiel, sperrt es aber nicht. Die Seite scrollt nie, nur die Liste darin. */

.chat-btn { position: relative; flex: none; }
.chat-count {
  position: absolute; top: -5px; inset-inline-end: -5px; min-width: 18px; height: 18px; padding: 0 4px; line-height: 18px; text-align: center;
  font-family: var(--label); font-weight: 700; font-size: .72rem; color: #2a1c08; background: var(--gold-300); border-radius: 9px;
}
.chat-count[hidden] { display: none; }

#chat-bubbles {
  position: fixed; z-index: 30; inset-inline-start: calc(.8rem + var(--safe-l)); bottom: calc(1rem + var(--safe-b));
  display: flex; flex-direction: column; gap: .3rem; width: min(360px, calc(100vw - 1.6rem)); pointer-events: none;
}
.chat-bubble {
  margin: 0; padding: .4rem .7rem; font-size: .95rem; line-height: 1.3; color: var(--paper-50); overflow-wrap: anywhere; overflow: hidden;
  background: rgba(11, 21, 36, .92); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: var(--shadow);
}
.chat-bubble.new { animation: sheet-in .2s ease-out; }
.chat-bubble b { color: var(--gold-100); }

#chat {
  position: fixed; z-index: 30; inset-inline-start: calc(.8rem + var(--safe-l)); bottom: calc(.8rem + var(--safe-b));
  display: flex; flex-direction: column; width: min(400px, calc(100vw - 1.6rem)); height: min(520px, 62vh); height: min(520px, 62dvh);
  color: var(--paper-100); background: linear-gradient(180deg, var(--lapis-700), var(--lapis-900));
  border: 1px solid var(--gold-700); border-radius: 8px; box-shadow: var(--shadow);
}
#chat[hidden] { display: none; }
.chat-head { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem .35rem .75rem; border-bottom: 1px solid var(--line); flex: none; }
.chat-head h2 { margin: 0; font-family: var(--display); font-size: 1.35rem; color: var(--gold-100); }
.chat-tabs { display: flex; gap: .25rem; margin-inline-start: auto; }
.chat-tabs .small { padding: .1rem .5rem; font-size: .85rem; }
.chat-tabs .small[aria-pressed="true"] { color: #2a1c08; background: var(--gold-300); }

.chat-body { flex: 1; min-height: 0; overflow-y: auto; padding: .5rem .75rem; }
.chat-body h3 { margin: .3rem 0 .35rem; font-family: var(--label); font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-300); }
.chat-hint { margin: .2rem 0 .5rem; font-size: .9rem; color: var(--paper-300); }
.chat-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .3rem; }

.chat-log, .chat-people { list-style: none; margin: 0; padding: 0; }
.chat-log li { position: relative; padding: .12rem 1.9rem .12rem 0; font-size: .96rem; line-height: 1.3; overflow-wrap: anywhere; overflow: hidden; }
.chat-log li b { color: var(--gold-100); }
.chat-log li.fixed span { color: var(--paper-300); font-style: italic; }
.chat-flag {
  position: absolute; top: 0; inset-inline-end: 0; display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  color: var(--paper-300); background: none; border: 0; opacity: .55;
}
.chat-flag:hover, .chat-flag:focus-visible { color: var(--ember-soft); opacity: 1; }
.chat-flag .ic { width: 15px; height: 15px; }
.chat-people li { display: flex; align-items: center; gap: .3rem; padding: .15rem 0; }
.chat-people li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }

#chat-write { flex: none; border-top: 1px solid var(--line); padding: .4rem .5rem .5rem; }
#chat-write[hidden] { display: none; }
.chat-phrases { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: thin; }
.chat-phrases .small { flex: none; padding: .1rem .5rem; font-size: .85rem; white-space: nowrap; }
.chat-note { margin: 0 0 .2rem; font-size: .88rem; color: var(--ember-soft); }
.chat-note:empty { display: none; }
.chat-form { display: flex; gap: .3rem; }
.chat-form input {
  flex: 1; min-width: 0; padding: .35rem .55rem; font: inherit; font-size: 1rem; color: var(--paper-50);
  background: rgba(7, 13, 24, .6); border: 1px solid var(--line); border-radius: 6px;
}
.chat-form input:focus { outline: 2px solid var(--gold-500); outline-offset: 0; }
.chat-form input:disabled { opacity: .7; }

.sheet .report-line { margin: 0 0 .6rem; padding: .4rem .7rem; border-inline-start: 3px solid var(--gold-700); background: var(--paper-50); overflow-wrap: anywhere; }

/* Bei breiter Anzeige neben dem Pult, darunter über der unteren Leiste und so breit wie der Bildschirm. */
@media (max-width: 979px) {
  /* Oben über der Stadt: Unten stünden die Blasen über den Antworten eines Ereignisses. */
  #chat-bubbles { inset-inline-start: calc(.5rem + var(--safe-l)); top: calc(104px + var(--safe-t)); bottom: auto; width: calc(100vw - 1rem); }
  #chat { inset-inline: 0; bottom: 0; width: auto; height: min(70vh, 460px); height: min(70dvh, 460px); padding-bottom: var(--safe-b); border-inline: 0; border-end-start-radius: 0; border-end-end-radius: 0; z-index: 30; }
  .chat-btn { min-width: 38px; min-height: 38px; padding: 0; }
}
/* Uhr und Chat brauchen oben Platz: Am schmalen Handy weichen die Werte, die am seltensten zählen. */
@media (max-width: 460px) { .topline:has(.chat-btn) .res[title="Einwohner"] { display: none; } }
@media (max-width: 370px) { .topline:has(.chat-btn) .res[title="Zakat-Fonds"] { display: none; } }