/* APPICS Pro — Messages-Konsole (B720 an KIMI, 23.09.2026, Stempel 0923vipmsg).
   Vorlage: Winchester-Bild photo_1790176680.jpg (Creator-Messages-Konsole,
   drei Spalten: Liste | Chat | Fan file). Tokens GEMESSEN aus css/app.css:
   Grund #14141e, Panels #1b1d2a/#232537, Teal #35d0c5, Geist (seit 0925geist), Radius 18/12.
   Eigener Praefix pmsg- (Kollisions-Check gegen app.css/pro.css: 0 Treffer).
   Emoji-Farbe: Emoji-Fonts VOR system-ui im Stack (emoji-fontstack-linux). */

:root {
  --pmsg-bg: #14141e;
  --pmsg-panel: #1b1d2a;
  --pmsg-panel-2: #232537;
  --pmsg-line: rgba(255, 255, 255, .07);
  --pmsg-teal: #35d0c5;
  --pmsg-teal-soft: rgba(53, 208, 197, .14);
  --pmsg-ink: #f2f4f8;
  --pmsg-muted: #9aa0b4;
  --pmsg-pink: rgba(232, 127, 158, .16);
  --pmsg-pink-ink: #e87f9a;
  --pmsg-font: "Outfit", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", system-ui, sans-serif;
}

/* Die Shell stellt Nav + Flaeche; die Konsole fuellt sie ohne Extra-Padding. */
.pro-page--messages .pro-content { padding: 0; }
.pro-page--messages { background: var(--pmsg-bg); }

.pmsg-mount { min-height: 320px; display: grid; place-items: center; }
.pmsg-mount-loading { display: flex; align-items: center; gap: 10px; color: var(--pmsg-muted); font: 500 13px/1.4 var(--pmsg-font); }

.pmsg {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 330px;
  gap: 12px;
  padding: 14px;
  height: calc(100dvh - 132px);
  min-height: 540px;
  background: var(--pmsg-bg);
  color: var(--pmsg-ink);
  font: 400 13px/1.5 var(--pmsg-font);
}
.pmsg *, .pmsg *::before, .pmsg *::after { box-sizing: border-box; }
.pmsg button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.pmsg :focus-visible { outline: 2px solid var(--pmsg-teal); outline-offset: 2px; }
.pmsg svg { width: 18px; height: 18px; }

.pmsg-col {
  min-width: 0; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--pmsg-panel);
  border: 1px solid var(--pmsg-line);
  border-radius: 18px;
  overflow: hidden;
}

/* ---------- Hinweis-Zeile (ehrliche Notizen, nie still) ---------- */
.pmsg-note {
  position: absolute; z-index: 30; top: 18px; left: 50%; transform: translateX(-50%);
  max-width: min(520px, 90%);
  margin: 0; padding: 9px 14px;
  background: var(--pmsg-panel-2); border: 1px solid var(--pmsg-line); border-radius: 12px;
  color: var(--pmsg-ink); font-size: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}

/* ---------- Spalte 1: Liste ---------- */
.pmsg-list-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px; }
.pmsg-list-head h2 { margin: 0; font: 600 19px/1.2 var(--pmsg-font); letter-spacing: .01em; }
.pmsg-cbtn {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; color: var(--pmsg-muted); transition: background-color .15s, color .15s;
}
.pmsg-cbtn:hover { background: var(--pmsg-panel-2); color: var(--pmsg-ink); }

.pmsg-tabs { display: flex; gap: 4px; padding: 4px 16px 10px; }
.pmsg-tab {
  padding: 6px 10px; border-radius: 999px;
  color: var(--pmsg-muted); font: 500 12.5px/1 var(--pmsg-font);
  border-bottom: 2px solid transparent; border-radius: 10px 10px 0 0;
}
.pmsg-tab b { color: var(--pmsg-teal); font-weight: 600; margin-left: 4px; }
.pmsg-tab.is-on { color: var(--pmsg-ink); border-bottom-color: var(--pmsg-teal); background: var(--pmsg-teal-soft); }

.pmsg-search {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px 10px; padding: 0 12px;
  background: var(--pmsg-panel-2); border: 1px solid var(--pmsg-line); border-radius: 12px;
}
.pmsg-search svg { width: 15px; height: 15px; color: var(--pmsg-muted); flex: none; }
.pmsg-search input {
  flex: 1; min-width: 0; height: 36px; background: none; border: 0; color: var(--pmsg-ink);
  font: 400 12.5px/1 var(--pmsg-font); outline: none;
}
.pmsg-search input::placeholder { color: var(--pmsg-muted); }

.pmsg-rows { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 8px 10px; scrollbar-width: thin; }
.pmsg-conv {
  display: flex; gap: 10px; width: 100%; text-align: left;
  padding: 9px 10px; border-radius: 14px; transition: background-color .15s;
}
.pmsg-conv:hover { background: var(--pmsg-panel-2); }
.pmsg-conv.is-active { background: var(--pmsg-panel-2); box-shadow: inset 0 0 0 1px rgba(53, 208, 197, .35); }
.pmsg-conv-in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pmsg-conv-top { display: flex; align-items: center; gap: 6px; }
.pmsg-conv-top b { font: 600 13px/1.2 var(--pmsg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmsg-conv-time { margin-left: auto; color: var(--pmsg-muted); font-size: 11px; flex: none; }
.pmsg-conv-sub { display: flex; align-items: center; gap: 6px; }
.pmsg-conv-prev { color: var(--pmsg-muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmsg-crown { display: inline-grid; place-items: center; color: var(--pmsg-teal); flex: none; }
.pmsg-crown svg { width: 13px; height: 13px; }
.pmsg-paid {
  flex: none; padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(53, 208, 197, .55); color: var(--pmsg-teal);
  font: 600 10.5px/1.4 var(--pmsg-font);
}
.pmsg-unread {
  flex: none; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-grid; place-items: center; border-radius: 999px;
  background: var(--pmsg-teal); color: #0b1c1a; font: 700 10.5px/1 var(--pmsg-font);
}
.pmsg-list-empty { padding: 28px 18px; color: var(--pmsg-muted); font-size: 12.5px; text-align: center; }
.pmsg-list-empty svg { width: 26px; height: 26px; margin-bottom: 8px; color: var(--pmsg-teal); }
.pmsg-list-empty p { margin: 0; }

/* ---------- Spalte 2: Chat ---------- */
.pmsg-chathead {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-bottom: 1px solid var(--pmsg-line);
}
.pmsg-chathead-in { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pmsg-chathead-in b { display: flex; align-items: center; gap: 6px; font: 600 14px/1.25 var(--pmsg-font); }
.pmsg-chathead-in span { color: var(--pmsg-muted); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmsg-back { display: none; }

.pmsg-body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding: 16px 16px 8px; display: flex; flex-direction: column; gap: 10px;
  scrollbar-width: thin;
}
.pmsg-day { text-align: center; margin: 4px 0; }
.pmsg-day span {
  padding: 3px 12px; border-radius: 999px; background: var(--pmsg-panel-2);
  color: var(--pmsg-muted); font-size: 11px;
}
.pmsg-row { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.pmsg-row.is-fan { align-self: flex-start; }
.pmsg-row.is-me { align-self: flex-end; flex-direction: row-reverse; }
.pmsg-miniava {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--pmsg-teal-soft); color: var(--pmsg-teal);
  font: 600 10px/1 var(--pmsg-font);
}
.pmsg-bubble {
  position: relative; padding: 9px 13px 7px; border-radius: 14px;
  background: var(--pmsg-panel-2); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.pmsg-row.is-me .pmsg-bubble { background: var(--pmsg-teal); color: #0b1c1a; border-bottom-right-radius: 4px; }
.pmsg-row.is-fan .pmsg-bubble { border-bottom-left-radius: 4px; }
.pmsg-meta {
  display: inline-flex; align-items: center; gap: 3px; float: right;
  margin: 8px 0 0 10px; font-size: 10.5px; opacity: .72;
}
.pmsg-tick svg { width: 13px; height: 13px; }
.pmsg-tick.is-read { color: #157f77; }
.pmsg-row.is-fan .pmsg-tick { color: var(--pmsg-teal); }

/* Paket-Karte im Chat (Vorlage: "Studio Session Video $45.00 · Bought") */
.pmsg-row:has(.pmsg-pkg), .pmsg-row:has(.pmsg-tip) { max-width: min(420px, 88%); }
.pmsg-pkg {
  display: flex; gap: 12px; align-items: flex-start; width: 100%;
  padding: 12px; border-radius: 14px; background: var(--pmsg-panel-2);
  border: 1px solid var(--pmsg-line);
}
.pmsg-pkg-img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.pmsg-pkg-in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pmsg-pkg-in > b { font: 600 13px/1.3 var(--pmsg-font); }
.pmsg-pkg-in > span { color: var(--pmsg-muted); font-size: 11.5px; }
.pmsg-pkg-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; }
.pmsg-pkg-price { font: 700 14px/1 var(--pmsg-font); }
.pmsg-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: 999px; font: 600 11px/1 var(--pmsg-font);
  border: 1px solid var(--pmsg-line); color: var(--pmsg-muted);
}
.pmsg-status svg { width: 12px; height: 12px; }
.pmsg-status.is-bought { background: var(--pmsg-teal-soft); border-color: rgba(53, 208, 197, .5); color: var(--pmsg-teal); }
.pmsg-status.is-sent { border-color: rgba(53, 208, 197, .35); color: var(--pmsg-teal); }
.pmsg-status.is-open { color: var(--pmsg-muted); }
.pmsg-pkg .pmsg-meta, .pmsg-tip .pmsg-meta { position: absolute; right: 10px; bottom: 6px; float: none; margin: 0; }
.pmsg-pkg { position: relative; padding-bottom: 22px; }

/* Tip-Karte (Vorlage: pink, Herz links, Betrag rechts) */
.pmsg-tip {
  position: relative; display: flex; gap: 12px; align-items: center; width: 100%;
  padding: 12px 14px 22px; border-radius: 14px;
  background: var(--pmsg-pink); border: 1px solid rgba(232, 127, 158, .3);
}
.pmsg-tip-heart {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(232, 127, 158, .22); color: var(--pmsg-pink-ink);
}
.pmsg-tip-heart svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.pmsg-tip-in { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pmsg-tip-in > b { display: flex; justify-content: space-between; gap: 10px; font: 600 12.5px/1.3 var(--pmsg-font); }
.pmsg-tip-amount { font-weight: 700; }
.pmsg-tip-in > span { color: #d9bcc6; font-size: 12px; }

.pmsg-chat-empty {
  flex: 1; display: grid; place-content: center; justify-items: center; gap: 6px;
  color: var(--pmsg-muted); text-align: center; padding: 30px;
}
.pmsg-chat-empty svg { width: 34px; height: 34px; color: var(--pmsg-teal); }
.pmsg-chat-empty h3 { margin: 4px 0 0; font: 600 15px/1.3 var(--pmsg-font); color: var(--pmsg-ink); }
.pmsg-chat-empty p { margin: 0; font-size: 12.5px; }

/* ---------- Composer ---------- */
.pmsg-composer {
  position: relative; display: flex; align-items: center; gap: 6px;
  margin: 10px 12px 12px; padding: 6px 8px;
  background: var(--pmsg-panel-2); border: 1px solid var(--pmsg-line); border-radius: 14px;
}
.pmsg-input {
  flex: 1; min-width: 0; height: 36px; background: none; border: 0; outline: none;
  color: var(--pmsg-ink); font: 400 13px/1.4 var(--pmsg-font);
}
.pmsg-input::placeholder { color: var(--pmsg-muted); }
.pmsg-send {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--pmsg-teal); color: #0b1c1a; transition: opacity .15s, transform .15s;
}
.pmsg-send svg { width: 17px; height: 17px; }
.pmsg-send:disabled { opacity: .38; cursor: default; }
.pmsg-send:not(:disabled):hover { transform: translateY(-1px); }
.pmsg-emojirow {
  position: absolute; bottom: calc(100% + 8px); right: 8px; z-index: 20;
  display: grid; grid-template-columns: repeat(6, 34px); gap: 2px;
  padding: 8px; border-radius: 12px;
  background: var(--pmsg-panel-2); border: 1px solid var(--pmsg-line);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.pmsg-emojirow button {
  width: 34px; height: 34px; border-radius: 8px; font-size: 18px; line-height: 1;
  font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}
.pmsg-emojirow button:hover { background: var(--pmsg-panel); }

/* ---------- Spalte 3: Fan file ---------- */
.pmsg-file {
  min-width: 0; min-height: 0; overflow-y: auto;
  padding: 16px; display: flex; flex-direction: column; gap: 14px;
  background: var(--pmsg-panel); border: 1px solid var(--pmsg-line); border-radius: 18px;
  scrollbar-width: thin;
}
.pmsg-file-head { display: flex; align-items: center; justify-content: space-between; }
.pmsg-file-head h3 { margin: 0; font: 600 16px/1.2 var(--pmsg-font); }
.pmsg-edit {
  display: inline-flex; align-items: center; gap: 5px;
  color: var(--pmsg-muted); font: 500 11.5px/1 var(--pmsg-font);
  padding: 6px 9px; border-radius: 8px;
}
.pmsg-edit:hover { background: var(--pmsg-panel-2); color: var(--pmsg-ink); }
.pmsg-edit svg { width: 13px; height: 13px; }

.pmsg-file-fan { display: flex; align-items: center; gap: 12px; }
.pmsg-file-fan > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pmsg-file-fan b { display: flex; align-items: center; gap: 6px; font: 600 14.5px/1.2 var(--pmsg-font); }
.pmsg-file-fan span:not(.pmsg-crown) { color: var(--pmsg-muted); font-size: 11.5px; }
.pmsg-warm {
  flex: none; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(233, 196, 106, .5); color: #e9c46a;
  font: 600 11px/1 var(--pmsg-font);
}

.pmsg-stats {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px;
  padding: 12px; background: var(--pmsg-panel-2); border-radius: 14px;
}
.pmsg-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pmsg-stat b { font: 700 12.5px/1.15 var(--pmsg-font); }
.pmsg-stat b.is-accent { color: #e9c46a; }
.pmsg-stat span { color: var(--pmsg-muted); font-size: 10.5px; line-height: 1.25; }

.pmsg-soon-note {
  display: flex; gap: 8px; align-items: flex-start;
  margin: 0; padding: 10px 12px; border-radius: 12px;
  background: rgba(53, 208, 197, .07); border: 1px dashed rgba(53, 208, 197, .3);
  color: var(--pmsg-muted); font-size: 11.5px; line-height: 1.45;
}
.pmsg-soon-note svg { flex: none; width: 14px; height: 14px; margin-top: 1px; color: var(--pmsg-teal); }

.pmsg-file-sec { display: flex; flex-direction: column; gap: 8px; }
.pmsg-file-sechead { display: flex; align-items: center; justify-content: space-between; }
.pmsg-file-sechead h4 { margin: 0; font: 600 13px/1.2 var(--pmsg-font); }
.pmsg-link { color: var(--pmsg-teal); font: 500 11.5px/1 var(--pmsg-font); padding: 4px 6px; border-radius: 6px; }
.pmsg-link:hover { background: var(--pmsg-teal-soft); }

.pmsg-pkgrow {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-rows: auto auto;
  column-gap: 10px; align-items: center;
  padding: 8px; border-radius: 12px; background: var(--pmsg-panel-2);
}
.pmsg-pkgrow-img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; grid-row: 1 / 3; }
.pmsg-pkgrow-ph { display: grid; place-items: center; background: var(--pmsg-panel); color: var(--pmsg-muted); }
.pmsg-pkgrow-in { min-width: 0; display: flex; flex-direction: column; gap: 1px; grid-row: 1 / 3; }
.pmsg-pkgrow-in b { font: 600 12px/1.25 var(--pmsg-font); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmsg-pkgrow-in span { color: var(--pmsg-muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmsg-pkgrow .pmsg-status { justify-self: end; }
.pmsg-pkgrow-meta { color: var(--pmsg-muted); font-size: 10px; justify-self: end; text-align: right; }
.pmsg-chevr { display: none; }
.pmsg-empty-line { margin: 0; color: var(--pmsg-muted); font-size: 12px; }

.pmsg-calls { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pmsg-call {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 10px 12px; border-radius: 12px; background: var(--pmsg-panel-2);
}
.pmsg-call-ic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--pmsg-panel); color: var(--pmsg-teal); }
.pmsg-call-ic svg { width: 15px; height: 15px; }
.pmsg-call b { font: 600 12.5px/1.2 var(--pmsg-font); }
.pmsg-call > span { color: var(--pmsg-muted); font-size: 10.5px; line-height: 1.35; }

.pmsg-noteview {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px; border-radius: 12px; background: var(--pmsg-panel-2);
}
.pmsg-note-ic { flex: none; color: var(--pmsg-muted); margin-top: 1px; }
.pmsg-note-ic svg { width: 13px; height: 13px; }
.pmsg-note-text { font-size: 12px; line-height: 1.45; }
.pmsg-noteedit textarea {
  width: 100%; resize: vertical; min-height: 64px;
  padding: 9px 11px; border-radius: 10px; border: 1px solid var(--pmsg-line);
  background: var(--pmsg-panel-2); color: var(--pmsg-ink); font: 400 12.5px/1.45 var(--pmsg-font);
  outline: none;
}
.pmsg-noteedit textarea:focus { border-color: var(--pmsg-teal); }
.pmsg-noteedit-btns { display: flex; gap: 8px; margin-top: 8px; }
.pmsg-mini-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 10px;
  background: var(--pmsg-teal); color: #0b1c1a; font: 600 11.5px/1 var(--pmsg-font);
}
.pmsg-mini-btn svg { width: 13px; height: 13px; }
.pmsg-mini-btn.is-ghost { background: var(--pmsg-panel-2); color: var(--pmsg-ink); border: 1px solid var(--pmsg-line); }

.pmsg-vip {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: 12px; background: var(--pmsg-panel-2);
}
.pmsg-vip-ic { flex: none; color: var(--pmsg-teal); display: grid; place-items: center; }
.pmsg-vip-ic svg { width: 15px; height: 15px; }
.pmsg-vip-label { flex: 1; min-width: 0; font: 500 12px/1.3 var(--pmsg-font); }
.pmsg-switch {
  flex: none; width: 40px; height: 22px; border-radius: 999px; padding: 2px;
  background: var(--pmsg-panel); border: 1px solid var(--pmsg-line);
  display: flex; justify-content: flex-start; transition: background-color .18s;
}
.pmsg-switch span { width: 16px; height: 16px; border-radius: 50%; background: var(--pmsg-muted); transition: transform .18s, background-color .18s; }
.pmsg-switch.is-on { background: var(--pmsg-teal); border-color: var(--pmsg-teal); }
.pmsg-switch.is-on span { transform: translateX(18px); background: #0b1c1a; }

.pmsg-agent {
  padding: 12px; border-radius: 14px;
  background: var(--pmsg-teal-soft); border: 1px solid rgba(53, 208, 197, .25);
}
.pmsg-agent-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pmsg-agent-head b { font: 600 12.5px/1 var(--pmsg-font); }
.pmsg-ai {
  padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(53, 208, 197, .5);
  color: var(--pmsg-teal); font: 600 10px/1.4 var(--pmsg-font); font-style: italic;
}
.pmsg-agent-body { display: flex; align-items: center; gap: 10px; }
.pmsg-agent-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--pmsg-panel); color: var(--pmsg-teal); }
.pmsg-agent-ic svg { width: 15px; height: 15px; }
.pmsg-agent-body p { flex: 1; min-width: 0; margin: 0; font-size: 11.5px; line-height: 1.4; color: #cdeae6; }
.pmsg-insert {
  flex: none; padding: 8px 14px; border-radius: 10px;
  background: var(--pmsg-teal); color: #0b1c1a; font: 600 11.5px/1 var(--pmsg-font);
}

/* ---------- Avatare ---------- */
.pmsg-ava {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--pmsg-panel-2); color: var(--pmsg-teal);
  font: 600 13px/1 var(--pmsg-font);
}
.pmsg-ava.is-big { width: 46px; height: 46px; font-size: 14px; }
.pmsg-ava-img, .pmsg-avaimg { object-fit: cover; background: var(--pmsg-panel-2); }
.pmsg .pl-ava { width: 40px; height: 40px; flex: none; }
.pmsg .pl-ava.is-big { width: 46px; height: 46px; }

/* ---------- Fan-View (#/messages/<id>) ---------- */
.pmsg-fan { grid-template-columns: minmax(0, 1fr) 340px; max-width: 1080px; margin: 0 auto; }
.pmsg-fan-rail { min-height: 0; }

/* ---------- Mittlere Breiten: Fan file als Overlay ---------- */
@media (max-width: 1199px) {
  .pmsg { grid-template-columns: 280px minmax(0, 1fr); }
  .pmsg-file {
    position: absolute; z-index: 25; top: 14px; right: 14px; bottom: 14px;
    width: min(340px, calc(100% - 28px));
    display: none; box-shadow: -18px 0 44px rgba(0, 0, 0, .5);
  }
  .pmsg-file-open .pmsg-file { display: flex; }
  .pmsg-fan { grid-template-columns: minmax(0, 1fr); }
  .pmsg-fan .pmsg-fan-rail { position: static; display: flex; width: auto; box-shadow: none; }
}

/* ---------- Mobil (390): eine Spalte, Liste <-> Chat ---------- */
@media (max-width: 767px) {
  .pmsg { grid-template-columns: minmax(0, 1fr); height: calc(100dvh - 118px); padding: 10px; gap: 10px; }
  .pmsg-list { display: flex; }
  .pmsg-chat { display: none; }
  .pmsg-chat-open .pmsg-list { display: none; }
  .pmsg-chat-open .pmsg-chat { display: flex; }
  .pmsg-back { display: inline-grid; }
  .pmsg-row { max-width: 92%; }
  .pmsg-fan .pmsg-chat { display: flex; }
  .pmsg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pmsg-calls { grid-template-columns: 1fr; }
  .pmsg-fan .pmsg-fan-rail { display: flex; }
  .pmsg-fan.pmsg-chat-open .pmsg-fan-rail { display: none; }
}