.chat-list-page,.conversation-page{max-width:980px;margin:0 auto;padding:34px 20px 70px}.chat-title h1{font-size:40px;margin:5px 0}.chat-title p{color:var(--muted)}.chat-list{display:grid;gap:10px;margin-top:24px}.chat-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:18px;background:#180e13}.chat-person{display:flex;align-items:center;gap:13px;min-width:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer}.chat-avatar,.mini-avatar{display:grid;place-items:center;overflow:hidden;border-radius:50%;background:#321827;color:#ff7d9f}.chat-avatar{width:68px;height:68px;font-size:28px}.chat-avatar img,.mini-avatar img{width:100%;height:100%;object-fit:cover}.chat-copy{min-width:0;flex:1}.chat-copy>div{display:flex;justify-content:space-between;gap:10px}.chat-copy h2{margin:0;font-size:18px}.chat-copy span,.chat-copy p{font-size:11px;color:var(--muted)}.chat-copy p{margin:6px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unread{min-width:23px;height:23px;border-radius:999px;display:grid;place-items:center;background:#e94373;color:white;font-size:10px}.chat-row-actions{display:flex;gap:7px}.conversation-card{height:calc(100vh - 145px);min-height:570px;display:grid;grid-template-rows:auto 1fr auto auto;overflow:hidden;border:1px solid var(--line);border-radius:22px;background:#140b10}.conversation-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}.conversation-head>a{font-size:24px;color:white;text-decoration:none}.chat-head-person{display:flex;align-items:center;gap:10px;border:0;background:none;color:white;text-align:left;cursor:pointer}.chat-head-person div:last-child{display:grid}.chat-head-person span{font-size:9px;color:#d09aaa}.mini-avatar{width:44px;height:44px}.message-list{overflow:auto;padding:18px;display:flex;flex-direction:column;gap:8px}.bubble{max-width:72%;padding:10px 12px;border-radius:16px;background:#2a1820;align-self:flex-start}.bubble.mine{align-self:flex-end;background:#5a2037}.bubble small{display:block;margin-top:5px;text-align:right;color:#d4a8b6;font-size:8px}.message-form{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}.message-form textarea{flex:1;resize:none;border:1px solid #593044;border-radius:13px;background:#0f080c;color:white;padding:11px}.locked-chat{place-items:center;text-align:center;padding:22px;border-top:1px solid var(--line)}.locked-chat p,.chat-usage{color:var(--muted);font-size:10px}.chat-usage{text-align:center;padding:0 10px 10px}.chat-empty{text-align:center;padding:60px}.chat-empty>div{font-size:45px;color:#ff6d91}@media(max-width:700px){.chat-row{grid-template-columns:1fr}.chat-row-actions{padding-left:81px}.chat-row-actions .btn{flex:1}.conversation-page{padding:10px}.conversation-card{height:calc(100vh - 95px);min-height:500px}.bubble{max-width:86%}}
/* ========================================
   BILDER I CHATTEN
======================================== */

.bubble .chat-message-image {
  display: block;
  width: auto;
  height: auto;

  max-width: 360px;
  max-height: 420px;

  object-fit: contain;

  border-radius: 14px;
  cursor: pointer;

  margin: 0 0 6px 0;
}

/* Bildbubblor ska inte bli jättestora */
.bubble:has(.chat-message-image) {
  width: fit-content;
  max-width: 380px;
  padding: 6px;
}

/* Bildtext/caption */
.chat-image-caption {
  padding: 5px 6px 2px;
  font-size: 14px;
  line-height: 1.35;
}

/* Om bilden inte kan laddas */
.chat-image-unavailable {
  padding: 12px;
  opacity: 0.75;
}


/* ========================================
   BILDKNAPP
======================================== */

.chat-image-btn {
  width: 44px;
  height: 44px;

  flex: 0 0 44px;

  border: 0;
  border-radius: 50%;

  background: rgba(255,255,255,.08);
  color: white;

  font-size: 21px;

  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: center;
}

.chat-image-btn:hover {
  background: rgba(255,255,255,.15);
}


/* ========================================
   FÖRHANDSVISNING INNAN SKICKA
======================================== */

.chat-image-preview {
  padding: 10px 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.chat-image-preview-inner {
  position: relative;
  display: inline-block;
}

.chat-image-preview img {
  display: block;

  max-width: 180px;
  max-height: 180px;

  object-fit: cover;

  border-radius: 12px;
}

.chat-image-remove {
  position: absolute;

  top: -8px;
  right: -8px;

  width: 27px;
  height: 27px;

  border: 0;
  border-radius: 50%;

  background: #111;
  color: white;

  font-size: 20px;
  line-height: 25px;

  cursor: pointer;
}

.chat-image-preview-text {
  margin-top: 6px;

  font-size: 12px;
  opacity: .65;
}


/* ========================================
   MOBIL
======================================== */

@media (max-width: 600px) {

  .bubble .chat-message-image {
    max-width: min(280px, 72vw);
    max-height: 380px;
  }

  .bubble:has(.chat-message-image) {
    max-width: 76vw;
  }

}
/* =====================================================
   SINGELMATCH BILDVISARE - SKA LIGGA ÖVER HELA SIDAN
===================================================== */

#chatLightbox {
  position: fixed !important;
  inset: 0 !important;

  width: 100vw !important;
  height: 100vh !important;

  margin: 0 !important;
  padding: 70px 30px 30px !important;

  box-sizing: border-box !important;

  z-index: 2147483647 !important;

  background: rgba(5, 2, 5, 0.94) !important;

  display: none !important;

  align-items: center !important;
  justify-content: center !important;

  overflow: hidden !important;
}


/* NÄR BILDVISAREN ÄR ÖPPEN */

#chatLightbox.open {
  display: flex !important;
}


/* SJÄLVA STORA BILDEN */

#chatLightboxImage {
  display: block !important;

  position: relative !important;

  width: auto !important;
  height: auto !important;

  max-width: 90vw !important;
  max-height: 85vh !important;

  margin: auto !important;

  object-fit: contain !important;

  border-radius: 14px !important;

  box-shadow:
    0 25px 80px rgba(0,0,0,.75) !important;
}


/* X-KNAPP */

#chatLightboxClose {
  position: fixed !important;

  top: 22px !important;
  right: 28px !important;

  width: 50px !important;
  height: 50px !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 2147483647 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 50% !important;

  background: rgba(20, 8, 14, .95) !important;

  color: #fff !important;

  font-size: 36px !important;
  font-family: Arial, sans-serif !important;
  font-weight: 300 !important;
  line-height: 1 !important;

  cursor: pointer !important;

  box-shadow:
    0 5px 25px rgba(0,0,0,.45) !important;
}


#chatLightboxClose:hover {
  background: #e83d72 !important;
}


/* CHATTBILDER */

.chat-message-image {
  cursor: zoom-in !important;
}


/* LÅS SIDAN NÄR BILDEN ÄR ÖPPEN */

html:has(body.chat-lightbox-open),
body.chat-lightbox-open {
  overflow: hidden !important;
}


/* MOBIL */

@media (max-width: 600px) {

  #chatLightbox {
    padding:
      70px 12px
      20px !important;
  }

  #chatLightboxImage {
    max-width: 96vw !important;
    max-height: 82vh !important;

    border-radius: 10px !important;
  }

  #chatLightboxClose {
    top: 12px !important;
    right: 12px !important;

    width: 46px !important;
    height: 46px !important;

    font-size: 32px !important;
  }
}
/* =====================================================
   KOMPAKT BILDFÖRHANDSVISNING
===================================================== */

#chatImagePreview {
  display: none;
  padding: 10px 14px !important;
  margin: 0 !important;

  min-height: 0 !important;
  height: auto !important;

  border-top: 1px solid rgba(255,255,255,.08);

  background: rgba(15,7,11,.96);
}

#chatImagePreview[style*="block"] {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}


/* BILD + X */

#chatImagePreview .chat-image-preview-inner {
  position: relative !important;

  display: block !important;

  width: 100px !important;
  height: 100px !important;

  flex: 0 0 100px !important;

  margin: 0 !important;
}


/* SJÄLVA MINIATYREN */

#chatImagePreviewImg {
  display: block !important;

  width: 100px !important;
  height: 100px !important;

  max-width: 100px !important;
  max-height: 100px !important;

  object-fit: cover !important;

  border-radius: 12px !important;

  margin: 0 !important;
}


/* X PÅ VALD BILD */

#chatImageRemove {
  position: absolute !important;

  top: -7px !important;
  right: -7px !important;

  width: 25px !important;
  height: 25px !important;

  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: #191116 !important;
  color: white !important;

  font-size: 20px !important;
  line-height: 1 !important;

  cursor: pointer !important;
}


/* TEXTEN BREDVID */

#chatImagePreview .chat-image-preview-text {
  margin: 0 !important;
  padding: 0 !important;

  font-size: 12px !important;
  opacity: .65 !important;
}


/* MOBIL */

@media (max-width: 600px) {

  #chatImagePreview {
    padding: 9px 12px !important;
  }

  #chatImagePreview .chat-image-preview-inner {
    width: 82px !important;
    height: 82px !important;

    flex-basis: 82px !important;
  }

  #chatImagePreviewImg {
    width: 82px !important;
    height: 82px !important;

    max-width: 82px !important;
    max-height: 82px !important;
  }
}
/* =====================================================
   SINGELMATCH VATTENSTÄMPEL
===================================================== */

/*
  Wrapper runt liten chattbild.
*/

.chat-watermarked-image {
  position: relative !important;
  display: block !important;

  width: fit-content !important;
  max-width: 100% !important;

  overflow: hidden !important;

  border-radius: 14px !important;

  cursor: zoom-in !important;

  user-select: none !important;
  -webkit-user-select: none !important;
}


/*
  Bilden själv.
*/

.chat-watermarked-image .chat-message-image {
  display: block !important;

  margin: 0 !important;

  user-select: none !important;
  -webkit-user-select: none !important;

  -webkit-user-drag: none !important;
}


/*
  Gemensamt lager.
*/

.sm-watermark-layer {
  position: absolute !important;
  inset: 0 !important;

  z-index: 5 !important;

  pointer-events: none !important;

  overflow: hidden !important;

  display: grid !important;

  align-items: center !important;
  justify-items: center !important;

  user-select: none !important;
}


/*
  Texten.
*/

.sm-watermark-text {
  display: block !important;

  color: rgba(255,255,255,.32) !important;

  font-family:
    Arial,
    sans-serif !important;

  font-weight: 700 !important;

  letter-spacing: 1.4px !important;

  text-shadow:
    0 1px 3px rgba(0,0,0,.65) !important;

  white-space: nowrap !important;

  transform: rotate(-24deg) !important;
}


/* =====================================================
   LITEN BILD I CHATTEN
===================================================== */

.sm-watermark-small {
  grid-template-columns:
    repeat(2, 1fr) !important;

  grid-template-rows:
    repeat(2, 1fr) !important;

  padding: 6px !important;
}


.sm-watermark-small
.sm-watermark-text {
  font-size: 10px !important;
}


/* =====================================================
   STOR BILD / LIGHTBOX
===================================================== */

.sm-lightbox-watermark {
  position: fixed !important;

  inset: 0 !important;

  z-index: 2147483646 !important;

  pointer-events: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/*
  Begränsa vattenstämpeln ungefär
  till samma område som bilden.
*/

.sm-lightbox-watermark
.sm-watermark-layer {
  position: relative !important;

  width: min(90vw, 1100px) !important;
  height: 85vh !important;

  max-width: 90vw !important;
  max-height: 85vh !important;

  grid-template-columns:
    repeat(3, 1fr) !important;

  grid-template-rows:
    repeat(6, 1fr) !important;
}


.sm-watermark-large
.sm-watermark-text {
  font-size:
    clamp(
      12px,
      1.3vw,
      18px
    ) !important;

  color:
    rgba(
      255,
      255,
      255,
      .27
    ) !important;
}


/*
  X måste ligga ovanför
  vattenstämpeln.
*/

#chatLightboxClose {
  z-index: 2147483647 !important;
}


/* =====================================================
   MOBIL
===================================================== */

@media (max-width: 600px) {

  .sm-watermark-small {
    grid-template-columns:
      repeat(2, 1fr) !important;

    grid-template-rows:
      repeat(2, 1fr) !important;
  }


  .sm-watermark-small
  .sm-watermark-text {
    font-size: 8px !important;
  }


  .sm-lightbox-watermark
  .sm-watermark-layer {

    width: 96vw !important;
    height: 82vh !important;

    grid-template-columns:
      repeat(2, 1fr) !important;

    grid-template-rows:
      repeat(6, 1fr) !important;
  }


  .sm-watermark-large
  .sm-watermark-text {
    font-size: 11px !important;
  }
}
/* =====================================================
   PRIVATA BILDER
===================================================== */

.chat-private-image-btn {
  position: relative;
}


/* Förhandsvisning */

.chat-image-preview-mode {
  margin-bottom: 4px;

  font-size: 13px;
  font-weight: 700;
}

#chatImagePreview.private-preview {
  border-top:
    1px solid rgba(232,61,114,.4) !important;

  background:
    rgba(35,10,22,.96) !important;
}


/* =====================================================
   LÅST PRIVAT BILD I CHATTEN
===================================================== */

.private-chat-image {
  position: relative !important;

  width: 300px !important;
  max-width: 72vw !important;
  min-height: 180px !important;

  padding: 25px !important;

  overflow: hidden !important;

  display: flex !important;
  flex-direction: column !important;

  align-items: center !important;
  justify-content: center !important;

  gap: 7px !important;

  border:
    1px solid rgba(255,255,255,.13) !important;

  border-radius:
    16px !important;

  background:
    radial-gradient(
      circle at center,
      rgba(232,61,114,.16),
      rgba(20,8,15,.97)
    ) !important;

  color:
    #fff !important;

  cursor:
    pointer !important;

  text-align:
    center !important;

  user-select:
    none !important;

  -webkit-user-select:
    none !important;
}


.private-chat-image:hover {
  border-color:
    rgba(232,61,114,.55) !important;

  background:
    radial-gradient(
      circle at center,
      rgba(232,61,114,.25),
      rgba(20,8,15,.98)
    ) !important;
}


/* LÅS */

.private-image-lock {
  position: relative !important;

  z-index: 10 !important;

  display: block !important;

  font-size:
    38px !important;

  margin-bottom:
    3px !important;
}


/* RUBRIK */

.private-chat-image strong {
  position: relative !important;

  z-index: 10 !important;

  display: block !important;

  font-size:
    16px !important;
}


/* STATUS */

.private-image-status {
  position: relative !important;

  z-index: 10 !important;

  display: block !important;

  font-size:
    12px !important;

  color:
    rgba(255,255,255,.65) !important;
}


/* =====================================================
   MOBIL
===================================================== */

@media (max-width:600px) {

  .private-chat-image {
    width:
      min(270px,72vw) !important;

    min-height:
      155px !important;

    padding:
      20px !important;
  }

  .private-image-lock {
    font-size:
      34px !important;
  }
}
/* =====================================================
   SINGELMATCH – RAPPORTERA UNDER CHATTBILD
   Lägg detta SIST i chat-v4.css
===================================================== */

.bubble .chat-message-actions {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  margin: 5px 0 1px 0;
  padding: 0;
}

.bubble .chat-report-btn {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;
  align-items: center;
  gap: 5px;

  width: auto !important;
  min-width: 0 !important;
  height: auto !important;

  margin: 0 !important;
  padding: 3px 5px !important;

  border: 0 !important;
  border-radius: 6px !important;

  background: transparent !important;
  box-shadow: none !important;

  color: rgba(255,255,255,.48) !important;

  font-family: inherit !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;

  text-decoration: none !important;

  cursor: pointer;
  transition:
    color .15s ease,
    background .15s ease;
}

.bubble .chat-report-btn:hover {
  background: rgba(255,255,255,.04) !important;
  color: #ff6f9a !important;
}

.bubble .chat-report-btn:focus {
  outline: none !important;
  box-shadow:
    0 0 0 2px rgba(235,59,112,.20) !important;
}

.bubble .chat-report-btn:active {
  background: rgba(235,59,112,.08) !important;
  color: #ff7da4 !important;
}


/* Mottagna meddelanden – vänsterjustera */
.bubble.theirs .chat-message-actions {
  justify-content: flex-start;
}


/* Egna meddelanden om funktionen används senare */
.bubble.mine .chat-message-actions {
  justify-content: flex-end;
}


/* Mobil */
@media (max-width: 600px) {

  .bubble .chat-report-btn {
    padding: 5px !important;
    font-size: 11px !important;
  }
}
/* =====================================================
   SINGELMATCH – RAPPORTMODAL
   Lägg SIST i chat-v4.css
===================================================== */

.chat-report-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  display: none !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 20px !important;

  background: rgba(0, 0, 0, 0.82) !important;
  backdrop-filter: blur(5px);
}

.chat-report-modal.open {
  display: flex !important;
}

.chat-report-card {
  position: relative !important;

  width: min(480px, 100%) !important;
  max-height: 90vh !important;
  overflow-y: auto !important;

  padding: 28px !important;

  border: 1px solid rgba(235, 59, 112, 0.35) !important;
  border-radius: 22px !important;

  background: #160b10 !important;
  color: #fff !important;

  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.65) !important;
}

.chat-report-card h2 {
  margin: 0 40px 8px 0 !important;
  color: #fff !important;
  font-size: 24px !important;
}

.chat-report-card p {
  margin: 0 0 22px !important;
  color: rgba(255, 255, 255, 0.68) !important;
  line-height: 1.5 !important;
}

.chat-report-close {
  position: absolute !important;
  top: 14px !important;
  right: 14px !important;

  width: 38px !important;
  height: 38px !important;

  padding: 0 !important;

  border: 1px solid rgba(255,255,255,.15) !important;
  border-radius: 50% !important;

  background: rgba(255,255,255,.05) !important;
  color: #fff !important;

  font-size: 25px !important;
  line-height: 1 !important;

  cursor: pointer !important;
}

.chat-report-close:hover {
  background: rgba(235,59,112,.15) !important;
  border-color: rgba(235,59,112,.5) !important;
}

.chat-report-label {
  display: block !important;

  margin: 15px 0 7px !important;

  color: rgba(255,255,255,.82) !important;

  font-size: 13px !important;
  font-weight: 700 !important;
}

#chatReportReason,
#chatReportComment {
  box-sizing: border-box !important;

  display: block !important;
  width: 100% !important;

  border: 1px solid rgba(235,59,112,.30) !important;
  border-radius: 12px !important;

  background: #0d080b !important;
  color: #fff !important;

  font: inherit !important;

  outline: none !important;
}

#chatReportReason {
  min-height: 46px !important;
  padding: 0 12px !important;
}

#chatReportComment {
  min-height: 110px !important;
  padding: 12px !important;

  resize: vertical !important;
}

#chatReportReason:focus,
#chatReportComment:focus {
  border-color: #eb3b70 !important;
  box-shadow: 0 0 0 3px rgba(235,59,112,.12) !important;
}

.chat-report-block {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;

  margin: 18px 0 !important;

  color: rgba(255,255,255,.82) !important;

  cursor: pointer !important;
}

.chat-report-block input {
  width: 18px !important;
  height: 18px !important;

  accent-color: #eb3b70 !important;
}

.chat-report-error {
  min-height: 18px !important;

  margin: 8px 0 !important;

  color: #ff789c !important;
  font-size: 13px !important;
}

.chat-report-actions {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 10px !important;

  margin-top: 12px !important;
}

.chat-report-cancel,
.chat-report-submit {
  min-height: 44px !important;

  padding: 0 18px !important;

  border-radius: 12px !important;

  font-family: inherit !important;
  font-weight: 700 !important;

  cursor: pointer !important;
}

.chat-report-cancel {
  border: 1px solid rgba(255,255,255,.15) !important;

  background: transparent !important;
  color: rgba(255,255,255,.8) !important;
}

.chat-report-submit {
  border: 0 !important;

  background: #eb3b70 !important;
  color: #fff !important;
}

.chat-report-submit:disabled {
  opacity: .55 !important;
  cursor: wait !important;
}

@media (max-width: 600px) {

  .chat-report-modal {
    padding: 12px !important;
  }

  .chat-report-card {
    padding: 22px 18px !important;
    border-radius: 18px !important;
  }

  .chat-report-actions {
    flex-direction: column-reverse !important;
  }

  .chat-report-cancel,
  .chat-report-submit {
    width: 100% !important;
  }
}