/*
  cottonin Messages UI
  - Designed to work with the cottonin theme tokens, but also has fallbacks.
*/

:root{
  --mbm-surface: var(--mb-surface, #ffffff);
  --mbm-surface-2: var(--mb-surface-2, #fbfcff);
  --mbm-bg: var(--mb-bg, #f7f8fb);
  --mbm-text-1: var(--mb-text-1, #121826);
  --mbm-text-2: var(--mb-text-2, #4b5563);
  --mbm-text-3: var(--mb-text-3, #6b7280);
  --mbm-border: var(--mb-border, rgba(17,24,39,.12));
  --mbm-border-2: var(--mb-border-2, rgba(17,24,39,.08));
  --mbm-radius: var(--mb-radius-md, 14px);
  --mbm-radius-sm: var(--mb-radius-sm, 10px);
  --mbm-shadow: var(--mb-shadow-1, 0 10px 26px rgba(17,24,39,.08));
  --mbm-accent: var(--mb-accent, #635bff);
  --mbm-accent-contrast: var(--mb-accent-contrast, #fff);
  --mbm-ease: var(--mb-ease, cubic-bezier(.2,.8,.2,1));
  --mbm-speed: var(--mb-speed, 180ms);
}

.mb-msg-app{
  display: grid;
  grid-template-columns: 360px 1fr;
  /* Avito-like: compact height with internal scroll (≈ 7–10 messages visible) */
  height: clamp(560px, 70vh, 760px);
  background: var(--mbm-surface);
}

.mb-msg-sidebar{
  border-right: 1px solid var(--mbm-border-2);
  background: var(--mbm-surface-2);
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.mb-msg-sidebar-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 16px 16px 12px;
}

.mb-msg-sidebar-head strong{
  font-size: 16px;
  letter-spacing: .2px;
}

.mb-msg-sidebar-search{
  padding: 0 16px 12px;
}

.mb-msg-threads{
  overflow:auto;
  padding: 6px 10px 12px;
}

.mb-msg-thread-item{
  width:100%;
  text-align:left;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 14px;
  padding: 10px;
  display:grid;
  grid-template-columns: 42px 1fr;
  gap: 10px;
  cursor:pointer;
  transition: background var(--mbm-speed) var(--mbm-ease), border-color var(--mbm-speed) var(--mbm-ease);
}

.mb-msg-thread-item:hover{
  background: color-mix(in oklab, var(--mbm-accent) 8%, transparent);
}

.mb-msg-thread-item[aria-current="true"]{
  background: color-mix(in oklab, var(--mbm-accent) 12%, transparent);
  border-color: color-mix(in oklab, var(--mbm-accent) 18%, transparent);
}

.mb-msg-avatar{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--mbm-accent) 70%, #00d4ff), var(--mbm-accent));
  box-shadow: 0 10px 22px rgba(99,91,255,.18);
}

.mb-msg-thread-body{
  display:grid;
  gap: 4px;
  min-width: 0;
}

.mb-msg-thread-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.mb-msg-thread-name{
  font-weight: 700;
  font-size: 14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mb-msg-thread-time{
  color: var(--mbm-text-3);
  font-size: 12px;
  white-space: nowrap;
}

.mb-msg-thread-sub{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.mb-msg-thread-preview{
  color: var(--mbm-text-2);
  font-size: 13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
}

.mb-msg-thread-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--mbm-accent);
  color: var(--mbm-accent-contrast);
  font-size: 12px;
  font-weight: 800;
}

.mb-msg-thread-adline{
  color: var(--mbm-text-3);
  font-size: 12px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mb-msg-main{
  display:grid;
  grid-template-rows: 1fr;
  min-width: 0;
}

.mb-msg-empty{
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height: 380px;
}

.mb-msg-thread{
  display:grid;
  grid-template-rows: auto 1fr auto;
  min-width: 0;
}


/* FIX: allow internal scroll inside grid (prevents composer disappearing) */
.mb-msg-app,
.mb-msg-main,
.mb-msg-thread{
  min-height: 0;
}
.mb-msg-list{
  min-height: 0;
  overflow-y: auto;
}

.mb-msg-thread-head{
  padding: 14px 16px;
  border-bottom: 1px solid var(--mbm-border-2);
  display:flex;
  align-items:center;
  gap: 12px;
}

.mb-msg-head-meta{
  display:flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.mb-msg-adthumb{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--mbm-bg);
  flex: 0 0 auto;
}

.mb-msg-back{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--mbm-border);
  background: var(--mbm-surface);
  cursor:pointer;
  display:none;
}

.mb-msg-thread-title{
  min-width:0;
  display:grid;
  gap: 2px;
}

.mb-msg-peer{
  font-weight: 800;
  font-size: 14px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mb-msg-ad{
  font-size: 12px;
  color: var(--mbm-text-2);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--mbm-accent) 55%, transparent);
  text-underline-offset: 2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.mb-msg-phone{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--mbm-border);
  background: var(--mbm-surface);
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  cursor:pointer;
  box-shadow: 0 10px 22px rgba(17,24,39,.06);
}

.mb-msg-phone:hover{
  border-color: color-mix(in oklab, var(--mbm-accent) 35%, var(--mbm-border));
}

.mb-msg-list{
  padding: 16px;
  overflow:auto;
  background: radial-gradient(1200px 600px at 20% 0%, color-mix(in oklab, var(--mbm-accent) 10%, transparent), transparent 60%),
              radial-gradient(900px 520px at 80% 30%, color-mix(in oklab, #00d4ff 8%, transparent), transparent 60%),
              var(--mbm-surface);
}

/* Avito-like plus button + menu */
.mb-msg-form{
  display:flex;
  align-items:flex-end;
  gap: 10px;
  padding: 12px 12px;
  border-top: 1px solid var(--mbm-border-2);
  background: var(--mbm-surface);
}

.mb-msg-plus-wrap{ position: relative; }

.mb-msg-plus{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--mbm-border);
  background: var(--mbm-surface);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 22px;
  line-height: 1;
  cursor:pointer;
}

.mb-msg-plus:hover{ border-color: color-mix(in oklab, var(--mbm-accent) 35%, var(--mbm-border)); }

.mb-msg-plus-menu{
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  width: 220px;
  background: var(--mbm-surface);
  border: 1px solid var(--mbm-border-2);
  border-radius: 14px;
  box-shadow: var(--mbm-shadow);
  padding: 8px;
  z-index: 20;
}

.mb-msg-plus-item{
  width: 100%;
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 12px;
  background: transparent;
  border: 0;
  cursor:pointer;
  text-align:left;
  font-size: 14px;
}

.mb-msg-plus-item:hover{
  background: color-mix(in oklab, var(--mbm-accent) 10%, transparent);
}

.mb-msg-bubble{
  max-width: min(520px, 92%);
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid var(--mbm-border-2);
  background: var(--mbm-surface);
  box-shadow: 0 8px 18px rgba(17,24,39,.06);
  margin: 0 0 10px;
}

.mb-msg-bubble .mb-msg-text{
  font-size: 14px;
  color: var(--mbm-text-1);
  white-space: pre-wrap;
  word-wrap: break-word;
}

.mb-msg-bubble .mb-msg-meta{
  margin-top: 6px;
  font-size: 11px;
  color: var(--mbm-text-3);
}

.mb-msg-in{
  margin-right: auto;
  border-top-left-radius: 10px;
}

.mb-msg-out{
  margin-left: auto;
  background: color-mix(in oklab, var(--mbm-accent) 12%, var(--mbm-surface));
  border-color: color-mix(in oklab, var(--mbm-accent) 20%, var(--mbm-border-2));
  border-top-right-radius: 10px;
}

.mb-msg-form{
  border-top: 1px solid var(--mbm-border-2);
  padding: 12px;
  display:flex;
  gap: 10px;
  align-items:flex-end;
  background: var(--mbm-surface);
}

.mb-msg-input{
  min-height: 44px;
  max-height: 140px;
  resize: none;
  line-height: 1.35;
}

/* Mobile layout */
@media (max-width: 920px){
  .mb-msg-app{grid-template-columns: 1fr; min-height: 72vh;}
  .mb-msg-sidebar{border-right: none;}
  .mb-msg-back{display:inline-flex; align-items:center; justify-content:center;}
}

/* Better scrollbars (optional) */
@supports (scrollbar-width: thin){
  .mb-msg-threads, .mb-msg-list{scrollbar-width: thin;}
}



/* -------------------------------------------------------------------------- */
/* Avito-like media message                                                   */
/* -------------------------------------------------------------------------- */

.mb-msg-has-image .mb-msg-attach-box{
  margin-top: 6px;
}

.mb-msg-media{
  display: block;
  /* Target preview size ~912x866 (Avito-like big photo card)
     Responsive: never exceed container width */
  width: min(912px, 100%);
  aspect-ratio: 912 / 866;
  max-height: 866px;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
  text-decoration: none;
  background: #eef2ff;
  box-shadow: 0 6px 18px rgba(17, 24, 39, .10);
}

.mb-msg-media-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 520px){
  /* keep big-card feel, but prevent overly tall images on small screens */
  .mb-msg-media{ max-height: 60vh; }
}

.mb-msg-media-time{
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
  background: rgba(17, 24, 39, .55);
  backdrop-filter: blur(6px);
}

.mb-msg-media-skel{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.0), rgba(255,255,255,.55), rgba(255,255,255,.0));
  transform: translateX(-100%);
  animation: mbm-shimmer 1.2s infinite;
}

@keyframes mbm-shimmer{
  to{ transform: translateX(100%); }
}

.mb-msg-media:hover{
  filter: brightness(.98);
}

/* Hide default meta under pure image message (JS clears text; this is extra safety) */
.mb-msg-has-image .mb-msg-meta:empty{
  display: none;
}

/* File chip (non-image) */
.mb-msg-file{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.65);
  text-decoration: none;
}

.mb-msg-file-ic{
  font-size: 18px;
}

.mb-msg-file-name{
  font-size: 14px;
  color: var(--mbm-text-1, #121826);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =========================================================
   Responsive text bubbles (Avito-like)
   - bubble width adapts to content (short = small, long = wider)
   - wraps safely on all devices
   ========================================================= */
.mb-msg-bubble{
  /* shrink-to-fit while keeping sensible max width */
  display: inline-block;
  width: fit-content;
  max-width: min(78%, 680px);
}
@supports not (width: fit-content){
  .mb-msg-bubble{ width: auto; }
}
@media (max-width: 768px){
  .mb-msg-bubble{ max-width: 86%; }
}
@media (max-width: 420px){
  .mb-msg-bubble{ max-width: 92%; }
}

/* Text wrapping: no overflow on long words/links */
.mb-msg-text{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* Keep bubbles tight for single-line short messages */
.mb-msg-text:empty{ display:none; }

/* Make meta (time/ticks) stay under the bubble without forcing width */
.mb-msg-meta{
  width: auto;
  max-width: 100%;
}



/* ===== Avito-like text bubbles (override) ===== */
.mb-msg-list, .mb-msg-scroll, .mb-messages-scroll, .mb-messages__list{
  min-height: 0;
}

.mb-msg-row{
  display:flex;
  align-items:flex-end;
  gap: 10px;
  margin: 10px 0;
}

.mb-msg-bubble{
  display:inline-block;
  width: fit-content;
  max-width: min(560px, 72%);
  padding: 12px 14px;
  border-radius: 18px;
  border: 0;
  box-shadow: none;
  margin: 0;
  background: #f1f2f4;
}

.mb-msg-in{ margin-right:auto; }
.mb-msg-out{
  margin-left:auto;
  background: #dff0ff;
}

.mb-msg-text{
  font-size: 15px;
  line-height: 1.35;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mb-msg-meta, .mb-msg-time{
  font-size: 12px;
  color: rgba(17,24,39,.55);
  white-space: nowrap;
}

/* If meta is inside bubble - make it sit at the bottom-right like in messengers */
.mb-msg-bubble .mb-msg-meta{
  margin-top: 6px;
  text-align: right;
}

/* If meta is a sibling (recommended markup), keep it outside bubble */
.mb-msg-row > .mb-msg-time,
.mb-msg-row > .mb-msg-meta{
  margin-bottom: 2px;
}

/* Mobile: allow wider bubbles */
@media (max-width: 768px){
  .mb-msg-bubble{
    max-width: 86%;
  }
}



/* === HOTFIX: ensure messages stack vertically (no single-row layout) === */
.mb-msg-list{
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}
.mb-msg-row{
  width: 100% !important;
  flex: 0 0 auto !important;
}
.mb-msg-row.mb-out{ justify-content: flex-end !important; }
.mb-msg-row.mb-in{ justify-content: flex-start !important; }
/* keep bubbles sized to content, not full width */
.mb-msg-bubble{
  width: auto !important;
  max-width: min(70%, 560px) !important;
}
@media (max-width: 720px){
  .mb-msg-bubble{ max-width: 86% !important; }
}