/* =========================================================
   vsos-messenger.css — Chats-View als Messenger
   14.10.2026 (Eric): "aufgebaut wie ein typischer messenger
   aber integriert innerhalb des dashboards"
   15.10.2026 (Eric): Fix-1 Icon auf 20px verkleinert;
   vspm-contact-room für Zimmername ergänzt.
   ========================================================= */

/* ── Wrapper ─────────────────────────────────────────────── */
.vspm-wrap {
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
}

/* ── Top filter bar ──────────────────────────────────────── */
.vspm-topbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px 6px;
  border-bottom: 1px solid rgba(176,122,46,.18);
  flex-shrink: 0;
}
.vspm-chips {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.vspm-chips::-webkit-scrollbar { display: none; }
.vspm-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid #E8DCC5;
  background: linear-gradient(170deg,#FFF,#FBEFD3);
  font-size: 10.5px;
  font-weight: 700;
  color: #8a6a45;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.vspm-chip.active {
  border-color: rgba(120,60,10,.35);
  background: linear-gradient(135deg,#F6C667,#E08A3C);
  color: #fff;
}
.vspm-chip svg { width: 13px; height: 13px; flex-shrink: 0; }
.vspm-search {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #E8DCC5;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #4A3728;
  background: #FFFDF6;
  outline: none;
}
.vspm-search:focus { border-color: #EFA94E; }

/* ── Content area (contact + conversation) ───────────────── */
.vspm-content {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* ── Contact list ────────────────────────────────────────── */
.vspm-contacts {
  width: 36%;
  min-width: 120px;
  border-right: 1px solid rgba(176,122,46,.18);
  overflow-y: auto;
  overflow-x: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}
/* 15.10.2026 (Eric): Fix-2/R2 gap 8px — kleines Icon, mehr Platz für Namenstext */
.vspm-contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid rgba(176,122,46,.1);
  transition: background .1s;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
}
.vspm-contact-row:active { background: #F4EDE0; }
.vspm-contact-row.active { background: #FFF6E0; border-left: 3px solid #E08A3C; padding-left: 7px; }
.vspm-contact-row.unread { background: #FFF8E8; }

/* 15.10.2026 (Eric): Fix-2/R2 Icon auf 14px — nur kleiner Farb-/Kanal-Marker, Fokus auf Name */
.vspm-ch-icon {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vspm-ch-icon svg { width: 9px; height: 9px; fill: #fff; stroke: #fff; }

.vspm-contact-info { min-width: 0; flex: 1; overflow: hidden; }
/* 15.10.2026 (Eric): Fix-2/R2 Gastname mind. 13px — klar lesbar, prominent */
.vspm-contact-name {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a1a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
/* 15.10.2026 (Eric): Zimmername-Zeile für room_name / room_number (Fix-1) */
.vspm-contact-room {
  font-size: 9.5px;
  font-weight: 600;
  color: #8C7A5F;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0;
  line-height: 1.2;
  letter-spacing: .01em;
}
.vspm-contact-preview {
  font-size: 10.5px;
  color: #8a7a6a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.vspm-contact-time {
  font-size: 9.5px;
  color: #B0A090;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 4px;
  white-space: nowrap;
}
.vspm-contact-empty {
  padding: 20px 10px;
  text-align: center;
  color: #B0A090;
  font-size: 12.5px;
}

/* ── Conversation view ───────────────────────────────────── */
.vspm-convo {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.vspm-convo-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid rgba(176,122,46,.18);
  flex-shrink: 0;
}
.vspm-back-btn {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #8C7A5F;
  padding: 2px 4px;
  font-size: 18px;
}
.vspm-convo-title {
  font-size: 13px;
  font-weight: 700;
  color: #4A3728;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.vspm-convo-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #B0A090;
  font-size: 13px;
  text-align: center;
  padding: 16px;
}
.vspm-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 0;
}
.vspm-bubble {
  max-width: 90%;
  padding: 7px 10px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.45;
  word-break: break-word;
  box-sizing: border-box;
}
.vspm-bubble.theirs {
  align-self: flex-start;
  background: #F4EDE0;
  color: #1a1a1a;
  border-bottom-left-radius: 3px;
}
.vspm-bubble.mine {
  align-self: flex-end;
  background: #C8956A;
  color: #fff;
  border-bottom-right-radius: 3px;
}
.vspm-bubble.has-media { max-width: 90%; }
.vspm-bubble-time {
  display: block;
  font-size: 9.5px;
  opacity: .6;
  margin-top: 3px;
  text-align: right;
}
/* Photo inside bubble — 14.10.2026 (Eric): Foto-Bug fix:
   loading=lazy, referrerpolicy=no-referrer, click-to-open, alt=Photo */
.vspm-img {
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-top: 4px;
  display: block;
  cursor: pointer;
}
.vspm-video {
  max-width: 100%;
  border-radius: 8px;
  margin-top: 4px;
  display: block;
  background: #1a1a1a;
}

/* ── Reply composer ──────────────────────────────────────── */
.vspm-composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 7px 10px;
  border-top: 1px solid rgba(176,122,46,.18);
  flex-shrink: 0;
}
.vspm-composer-input {
  min-width: 0;
  flex: 1;
  border: 1px solid #E8DCC5;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #4A3728;
  background: #FFFDF6;
  resize: none;
  min-height: 34px;
  max-height: 80px;
  overflow-y: auto;
  outline: none;
  box-sizing: border-box;
}
.vspm-composer-input:focus { border-color: #EFA94E; }
.vspm-photo-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid #E8DCC5;
  background: linear-gradient(170deg,#FFF,#FBEFD3);
  cursor: pointer;
  flex-shrink: 0;
}
.vspm-photo-label svg { width: 18px; height: 18px; stroke: #8C7A5F; stroke-width: 2; fill: none; }
.vspm-send-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(120,60,10,.3);
  background: linear-gradient(135deg,#F6C667,#E08A3C);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.vspm-send-btn svg { width: 18px; height: 18px; stroke: #fff; stroke-width: 2.2; fill: none; }
.vspm-send-btn:disabled { opacity: .45; cursor: default; }
.vspm-send-status { font-size: 11px; text-align: center; color: #C8956A; min-height: 12px; padding: 0 10px 4px; flex-shrink: 0; }
.vspm-photo-preview {
  max-width: 100%;
  max-height: 60px;
  border-radius: 6px;
  display: none;
  margin: 4px 10px 0;
}

/* ── Mobile: full-width panels with slide ────────────────── */
@media (max-width: 600px) {
  .vspm-contacts {
    width: 100%;
    border-right: none;
    display: flex;
  }
  .vspm-contacts.vspm-hidden { display: none; }
  .vspm-convo { display: none; }
  .vspm-convo.vspm-visible { display: flex; }
  .vspm-back-btn { display: block; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   17.10.2026 (Eric): sunny-os Design-Runde — 3D-Kartenkontakte, Avatar mit
   Kanal-Badge, Archiv-Aktion, bessere Platzausnutzung. Überschreibt die
   Flachlisten-Styles oben (Cascade). Neue Struktur: .vspm-avatar(+badge),
   .vspm-row-main > .vspm-row-top(name+time) / .vspm-row-bottom(pill+preview),
   .vspm-unread-dot, .vspm-arch-btn, .vspm-arch-toggle.
   ═══════════════════════════════════════════════════════════════════════════ */
.vspm-contacts {
  width: 36%;
  min-width: 260px;
  max-width: 420px;
  padding: 8px 8px 12px;
  gap: 8px;
  scrollbar-width: thin;
}
.vspm-contact-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  min-height: 62px;
  cursor: pointer;
  border: 1px solid rgba(110,65,10,.14);
  border-top-color: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(110,65,10,.18);
  border-radius: 14px;
  background: linear-gradient(172deg,#FFFFFF 0%,#FFFCF4 45%,#FBF0D8 100%);
  box-shadow: 0 1px 2px rgba(90,60,20,.07), 0 4px 14px rgba(90,60,20,.07);
  transition: transform .08s ease, box-shadow .12s ease, background .12s ease;
  -webkit-tap-highlight-color: transparent;
  min-width: 0;
  text-align: left;
  font: inherit;
  color: inherit;
}
.vspm-contact-row:active { transform: scale(.985); background: linear-gradient(172deg,#FFFFFF 0%,#FFFCF4 45%,#FBF0D8 100%); }
.vspm-contact-row.active {
  background: linear-gradient(135deg,#FFF3D2,#FBE3AE);
  border: 1px solid rgba(190,120,30,.5);
  border-top-color: rgba(255,255,255,.85);
  padding-left: 10px;
  box-shadow: 0 1px 2px rgba(150,90,20,.2), 0 6px 18px rgba(150,90,20,.18), inset 0 1px 0 rgba(255,255,255,.7);
}
.vspm-contact-row.unread {
  background: linear-gradient(172deg,#FFFFFF 0%,#FFF9EA 45%,#FCEBC4 100%);
  box-shadow: 0 1px 2px rgba(90,60,20,.07), 0 4px 14px rgba(90,60,20,.07), inset 3px 0 0 #E08A3C;
}

.vspm-avatar {
  position: relative;
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #fff;
  background: linear-gradient(135deg, hsl(var(--h,35) 62% 52%), hsl(var(--h,35) 55% 38%));
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.45), 0 2px 5px rgba(60,35,10,.25);
  letter-spacing: .02em;
}
.vspm-avatar-badge {
  position: absolute; right: -3px; bottom: -3px;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #FFFDF6;
  box-shadow: 0 1px 3px rgba(60,35,10,.3);
}
.vspm-avatar-badge svg { width: 10px; height: 10px; fill: #fff; stroke: #fff; }

.vspm-row-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.vspm-row-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.vspm-contact-name {
  font-size: 14px;
  font-weight: 700;
  color: #2E2419;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
}
.vspm-contact-time {
  font-size: 10.5px;
  color: #A89377;
  margin-left: 0;
  padding-left: 0;
  white-space: nowrap;
  flex-shrink: 0;
}
.vspm-row-bottom { display: flex; align-items: center; gap: 6px; min-width: 0; }
.vspm-pill {
  font-size: 9.5px; font-weight: 700; letter-spacing: .02em;
  color: var(--pc, #8C7A5F);
  background: color-mix(in srgb, var(--pc, #8C7A5F) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pc, #8C7A5F) 30%, transparent);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap; flex-shrink: 0;
}
.vspm-contact-preview {
  font-size: 11.5px;
  color: #8a7a6a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0;
  min-width: 0;
  flex: 1;
}
.vspm-contact-row.unread .vspm-contact-name { color: #1A1208; }
.vspm-contact-row.unread .vspm-contact-preview { color: #5A4A38; font-weight: 600; }
.vspm-unread-dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: radial-gradient(circle at 30% 30%, #FFD97A, #E08A3C);
  box-shadow: 0 0 0 2px rgba(224,138,60,.25), 0 1px 3px rgba(190,110,20,.5);
}
.vspm-arch-btn {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 9px; color: #A89377; cursor: pointer;
  opacity: .55; transition: opacity .12s, background .12s, color .12s;
}
.vspm-arch-btn svg { width: 16px; height: 16px; }
.vspm-arch-btn:hover { opacity: 1; background: rgba(224,138,60,.14); color: #B06A10; }
@media (hover: none) { .vspm-arch-btn { opacity: .85; } }

.vspm-topbar-side { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; }
.vspm-topbar-side .vspm-search { flex: 1; min-width: 0; }
.vspm-arch-toggle {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #E8DCC5; border-radius: 10px;
  background: #FFFDF6; color: #8C7A5F; cursor: pointer; transition: all .12s;
}
.vspm-arch-toggle svg { width: 16px; height: 16px; }
.vspm-arch-toggle:hover { border-color: #EFA94E; color: #B06A10; }
.vspm-arch-toggle.active {
  background: linear-gradient(135deg,#F6C667,#E08A3C);
  color: #fff;
  border-color: rgba(120,60,10,.4);
  box-shadow: 0 1px 3px rgba(150,90,20,.4), inset 0 1px 0 rgba(255,255,255,.4);
}

@media (max-width: 600px) {
  .vspm-contacts { width: 100%; min-width: 0; max-width: none; padding: 8px 8px 14px; box-sizing: border-box; }
}

/* The dashboard card can stay narrow in landscape. Size the two panels by
   their host, not the phone viewport; preserve the approved R3 card design. */
.vspm-contacts, .vspm-convo { box-sizing: border-box; }
.vspm-contact-row { flex-shrink: 0; }
@container (max-width: 600px) {
  .vspm-contacts { width: 100%; min-width: 0; max-width: none; border-right: none; }
  .vspm-contacts.vspm-hidden { display: none; }
  .vspm-convo { display: none; }
  .vspm-convo.vspm-visible { display: flex; width: 100%; }
  .vspm-back-btn { display: block; }
}
.vspm-bubble-sender { display: block; font-size: 10px; font-weight: 700; opacity: .8; }
.vspm-earlier { align-self: center; border: 1px solid #E8DCC5; border-radius: 10px; padding: 7px 12px; background: #FFFDF6; color: #4A3728; cursor: pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   28.10.2026 (Eric): Gast-Profilbild. Das Bild liegt als <img> ueber den bestehenden Initialen im
   selben Kreis (gleiche Groesse und Form, keine neuen Farben). Bei Fehler/404 entfernt das Skript das
   <img>, die Initialen bleiben. .vspm-avatar-sm = derselbe Avatar im Thread-Kopf.
   ═══════════════════════════════════════════════════════════════════════════ */
.vspm-avatar-img {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.vspm-avatar.vspm-has-img { color: transparent; }
.vspm-avatar.vspm-has-img .vspm-avatar-badge { color: #fff; }
/* 28.10.2026: Der kleine Avatar im Thread-Kopf darf die Kopfhoehe nicht aendern (vorher 40 px Handy / 37 px Desktop).
   -3px oben/unten = Layout-Hoehe 22 px, der Kreis selbst bleibt 28 px. */
.vspm-avatar-sm { width: 28px; height: 28px; font-size: 11px; margin: -3px 0; }
/* Kopf: der Kreis ist nur sichtbar, wenn ein Profilbild geladen ist (ohne Bild bleibt der Kopf wie vorher). */
.vspm-convo-head .vspm-avatar-sm:not(.vspm-has-img) { display: none; }