/* Dialog detail (/messages/<id>/) — extracted from pages.css */

/* =====================
   Pages: Dialog detail — style to match /feed
===================== */

.dialog-detail-page{
  max-width: 720px;
  margin: 0 auto;
}

/* card */
.dialog-detail-page .dialog-card{
  display:flex;
  flex-direction:column;

  max-height: calc(100vh - 170px);
  padding: 16px 18px 14px;

  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);

  overflow: visible; /* ← ВОТ ЭТО ДОБАВЬ */
}


/* header box inside card */
.dialog-detail-page .feed-card-header.dialog-header{
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);

  padding: 0 0 12px;
  margin: 0 0 12px;

  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 14px;
}

.dialog-detail-page .dialog-header-main{
  min-width: 0;
  flex: 1;
}

.dialog-detail-page .dialog-title-row{
  display:flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 10px;
}

.dialog-detail-page .dialog-title{
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-main);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* pencil button */
.dialog-detail-page .dialog-title-edit-btn{
  width: 30px;
  height: 30px;
  border-radius: 10px;

  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  cursor: pointer;
}
.dialog-detail-page .dialog-title-edit-btn:hover{
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

/* title edit area */
.dialog-detail-page .dialog-title-edit{
  margin: 0 0 10px;
}
.dialog-detail-page .dialog-title-input{
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  border-radius: 14px;

  border: 1px solid var(--border-input);
  background: var(--bg-elevated);
  color: var(--text-main);
  font: inherit;
}
.dialog-detail-page .dialog-title-input:focus{
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring);
}

.dialog-detail-page .dialog-title-actions{
  display:flex;
  gap: 10px;
  margin-top: 10px;
}

.dialog-detail-page .dialog-title-save{
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--text-invert);
  cursor:pointer;
}
.dialog-detail-page .dialog-title-save:hover{ background: var(--accent-hover); }

.dialog-detail-page .dialog-title-clear{
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  cursor:pointer;
}
.dialog-detail-page .dialog-title-clear:hover{
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

/* participants row */
.dialog-detail-page .dialog-participants-row{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 13px;
  margin-bottom: 6px;
}

.dialog-detail-page .dialog-participant-avatar{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--chip-text);
  font-weight: 700;
}

.dialog-detail-page .dialog-participant-time{
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}

.dialog-detail-page .dialog-subtitle{
  font-size: 13px;
  color: var(--text-muted);
}

/* right header column (search + important/mute) */
.dialog-detail-page .dialog-header-actions{
  width: 260px;
  flex: 0 0 260px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.dialog-detail-page .dialog-search-input{
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-input);
  background: var(--bg-elevated);
  color: var(--text-main);
  font: inherit;
}
.dialog-detail-page .dialog-search-input:focus{
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring);
}

.dialog-detail-page .dialog-important-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.dialog-detail-page .dialog-header-btn{
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--chip-text);
  cursor:pointer;
  font-size: 13px;
}
.dialog-detail-page .dialog-header-btn:hover{
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.dialog-detail-page .dialog-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 13px;
}
.dialog-detail-page .dialog-chip-important{
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}

.dialog-detail-page .dialog-toggle-sep{
  color: var(--text-muted);
}

/* seed card */
.dialog-detail-page .dialog-seed-card{
  margin: 0 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}
.dialog-detail-page .dialog-seed-title{
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.dialog-detail-page .dialog-seed-text{
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* messages */
.dialog-detail-page .dialog-messages{
  flex: 1;
  overflow: auto;
  padding-right: 6px;
}

.dialog-detail-page .dialog-date-divider{
  display:flex;
  justify-content:center;
  margin: 10px 0;
  font-size: 12px;
  color: var(--text-muted);
}

.dialog-detail-page .dialog-message{
  display:flex;
  margin: 8px 0;
}
.dialog-detail-page .dialog-message.from-me{ justify-content:flex-end; }
.dialog-detail-page .dialog-message.from-other{ justify-content:flex-start; }

.dialog-detail-page .dialog-message-bubble{
  max-width: min(520px, 86%);
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-main);
}
.dialog-detail-page .dialog-message.from-me .dialog-message-bubble{
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.dialog-detail-page .dialog-message-text{
  margin:0;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
}

.dialog-detail-page .dialog-message-meta{
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  display:flex;
  justify-content:flex-end;
}

/* input row + menu */
.dialog-detail-page .dialog-input-row{
  margin-top: 12px;
  display:flex;
  align-items:flex-end;
  gap: 10px;
}

.dialog-detail-page .dialog-input-form{
  flex: 1;
  display:flex;
  align-items:flex-end;
  gap: 10px;
}

.dialog-detail-page .dialog-textarea{
  flex: 1;
  min-height: 42px;
  max-height: 180px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-input);
  background: var(--bg-elevated);
  color: var(--text-main);
  font: inherit;
  line-height: 1.35;
}
.dialog-detail-page .dialog-textarea:focus{
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring);
}

.dialog-detail-page .dialog-send-btn{
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--text-invert);
  cursor:pointer;
  white-space: nowrap;
}
.dialog-detail-page .dialog-send-btn:hover{ background: var(--accent-hover); }

/* menu */
.dialog-detail-page .dialog-menu-wrapper{
  position: relative;
}

.dialog-detail-page .dialog-menu-toggle{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-main);
  cursor: pointer;
}
.dialog-detail-page .dialog-menu-toggle:hover{
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

.dialog-detail-page .dialog-menu{
  display: none;
  position: absolute;
  right: 0;
  bottom: 52px;

  min-width: 240px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
}
.dialog-detail-page .dialog-menu.is-open{ display: block; }

.dialog-detail-page .dialog-menu-item{
  width: 100%;
  text-align:left;
  padding: 10px 10px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: var(--text-main);
  cursor:pointer;
  font: inherit;
  font-size: 13px;
}
.dialog-detail-page .dialog-menu-item:hover{
  background: var(--accent-soft);
}
.dialog-detail-page .dialog-menu-item:disabled{
  opacity: .6;
  cursor: default;
}
.dialog-detail-page .dialog-menu-item.danger{
  color: var(--danger);
}

/* =====================
   Dialog detail — compact like old layout
   (overrides global .dialog-* rules)
===================== */

.dialog-detail-page .dialog-card{
  max-width: 760px;
  padding: 16px 20px 12px;
  border-radius: 12px;
  max-height: calc(100vh - 160px);
}

/* header: tighter + right column neat */
.dialog-detail-page .feed-card-header.dialog-header{
  gap: 16px;
  padding: 0 0 12px;
  margin: 0 0 12px;
}

.dialog-detail-page .dialog-header-actions{
  min-width: 260px;
  width: 260px;
  align-items: flex-end;
  gap: 8px;
}

/* search pill like old */
.dialog-detail-page .dialog-search-input{
  height: 34px;
  padding: 6px 10px;
  border-radius: 999px;
}

/* important/mute: keep on one line */
.dialog-detail-page .dialog-important-actions{
  gap: 8px;
  flex-wrap: nowrap;
}
.dialog-detail-page .dialog-toggle-sep{
  margin: 0 6px;
}

/* buttons in header: smaller pills */
.dialog-detail-page .dialog-header-btn{
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
}

/* seed card: make it flatter & not “huge block” */
.dialog-detail-page .dialog-seed-card{
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
}
.dialog-detail-page .dialog-seed-title{
  font-size: 12px;
  margin-bottom: 6px;
}
.dialog-detail-page .dialog-seed-text{
  font-size: 14px;
  line-height: 1.45;
}

/* messages area: remove “big inner frame” feeling */
.dialog-detail-page .dialog-messages{
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 12px;

  /* перебиваем глобальный .dialog-messages (он сейчас делает большую коробку) */
  border: 0;
  background: transparent;

  overflow: auto;
  flex: 1;
}

/* make bubbles a bit smaller */
.dialog-detail-page .dialog-message-bubble{
  border-radius: 12px;
  padding: 10px 12px;
}

/* input row: old-like top separator */
.dialog-detail-page .dialog-input-row{
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--border-subtle);
}

/* textarea + send sizes */
.dialog-detail-page .dialog-textarea{
  min-height: 44px;
  border-radius: 14px;
}
.dialog-detail-page .dialog-send-btn{
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
}

/* menu button: compact circle like old */
.dialog-detail-page .dialog-menu-toggle{
  width: 32px;
  height: 32px;
  border-radius: 999px;
  padding: 0;
}

/* menu position: closer to old */
.dialog-detail-page .dialog-menu{
  bottom: 36px;
  right: 0;
  border-radius: 12px;
  min-width: 200px;
}

.dialog-menu{
  position: absolute;
  right: 12px;
  top: 44px;
  min-width: 220px;
  z-index: 50;

  display: none;
  padding: 8px;
  border-radius: 14px;

  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--glass-text);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}

.dialog-menu.is-open{ display: block; }

.dialog-menu a,
.dialog-menu button{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 10px;
  border-radius: 12px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-size: 14px;
}

.dialog-menu a:hover,
.dialog-menu button:hover{
  background: rgba(139, 108, 255, 0.14);
}


/* =========================================
   Dialog detail: FIX ⋮ dropdown (overlay, no scrollbars)
   ========================================= */

.dialog-detail-page .dialog-card{
  overflow: visible !important; /* чтобы попап не обрезался карточкой */
}

.dialog-detail-page .dialog-input-row{
  overflow: visible !important; /* чтобы попап не попадал в "скролл" */
}

.dialog-detail-page .dialog-menu-wrapper{
  position: relative !important;
  overflow: visible !important;
}

/* меню всегда должно быть абсолютным попапом, а не блоком в потоке */
.dialog-detail-page .dialog-menu{
  position: absolute !important;
  right: 0 !important;
  bottom: 46px !important;      /* открываем над кнопкой ⋮ */
  top: auto !important;

  z-index: 9999 !important;

  display: none !important;     /* скрыто по умолчанию */
  min-width: 240px;
  max-height: 60vh;
  overflow: auto;

  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--glass-text);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
}

.dialog-detail-page .dialog-menu.is-open{
  display: block !important;
}

/* =========================================
   Dialog detail: ONLY ⋮ button (.dialog-menu-btn)
   ========================================= */

.dialog-detail-page .dialog-menu-btn{
  width: 40px;
  height: 40px;

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

  padding: 0;
  margin: 0;

  border-radius: 12px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--glass-text);

  cursor: pointer;
  user-select: none;

  backdrop-filter: blur(8px);
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}

/* сам символ ⋮ */
.dialog-detail-page .dialog-menu-btn{
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0;
  opacity: 0.9;
}

.dialog-detail-page .dialog-menu-btn:hover{
  background: var(--glass-bg-hover);
  border-color: var(--accent);
}

.dialog-detail-page .dialog-menu-btn:active{
  transform: scale(0.96);
}

.dialog-detail-page .dialog-menu-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(160,140,255,0.20);
}

/* =========================================
   Dialog detail: Telegram-like sticky input
   ========================================= */

/* карточка занимает высоту экрана, чтобы скроллились только сообщения */
.dialog-detail-page .dialog-card{
  height: calc(100dvh - 170px); /* было max-height; делаем "высоту чата" */
  max-height: none !important;
  min-height: 0;
}

/* важно для flex-скролла: иначе overflow у детей может не заработать как надо */
.dialog-detail-page .dialog-messages{
  min-height: 0;
}

/* поле ввода всегда снизу и поверх контента (если вдруг будет общий скролл) */
.dialog-detail-page .dialog-input-row{
  position: sticky;
  bottom: 0;
  z-index: 50;

  background: var(--bg-card);
  padding-top: 10px;
  margin-top: 10px;

  /* тонкая линия как разделитель, чтобы выглядело "прибито" */
  border-top: 1px solid var(--border-subtle);
}

/* =========================================
   Dialog header: nudge download icon down
   ========================================= */

/* только кнопка экспорта */
.dialog-detail-page .dialog-header-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* опускаем символ вниз на 1–2px */
.dialog-detail-page .dialog-header-btn{
  transform: translateY(1.5px);
}
/* ===== Dialog dropdown menu ===== */
.dialog-menu {
  position: absolute;
  right: 0;
  bottom: 56px;
  min-width: 260px;

  background: rgba(18, 22, 44, 0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  box-shadow: 0 18px 55px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);

  padding: 8px;
  z-index: 50;
}

.dialog-menu__title {
  padding: 8px 10px 6px;
  font-size: 12px;
  opacity: .75;
}

.dialog-menu__sep {
  height: 1px;
  background: rgba(255,255,255,0.07);
  margin: 6px 6px;
}

.dialog-menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 10px 10px;
  border-radius: 12px;
  border: 1px solid transparent;

  color: rgba(240,235,255,0.92);
  text-decoration: none;
  background: transparent;

  cursor: pointer;
  transition: .12s ease;
}

.dialog-menu-item:hover {
  background: rgba(162, 120, 255, 0.12);
  border-color: rgba(162, 120, 255, 0.22);
}

.dialog-menu-item:active {
  transform: translateY(1px);
}

.dialog-menu-item__icon {
  width: 22px;
  height: 22px;
  border-radius: 9px;

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

  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.07);
  font-size: 12px;
}

.dialog-menu-item__text { flex: 1; }

.dialog-menu-item__sub {
  font-size: 12px;
  opacity: .7;
}

.dialog-menu-item.is-disabled {
  opacity: .45;
  cursor: default;
  pointer-events: none;
}

.dialog-menu-item.is-primary {
  background: rgba(162, 120, 255, 0.14);
  border-color: rgba(162, 120, 255, 0.26);
}

.dialog-menu-item.is-danger {
  color: rgba(255, 140, 140, 0.95);
}
.dialog-menu-item.is-danger:hover {
  background: rgba(255, 90, 90, 0.10);
  border-color: rgba(255, 90, 90, 0.18);
}

/* формы внутри меню */
.dialog-menu form { margin: 0; }
.dialog-menu button { font: inherit; }

.dialog-inline-notices{ margin: 10px 0; }
.dialog-inline-notice{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: rgba(240,235,255,0.92);
  font-size: 13px;
}
.dialog-inline-notice.notice-success{
  border-color: rgba(130,255,190,0.18);
  background: rgba(130,255,190,0.06);
}
.dialog-inline-notice.notice-warning{
  border-color: rgba(255,200,120,0.18);
  background: rgba(255,200,120,0.06);
}
.dialog-inline-notice.notice-info{
  border-color: rgba(160,180,255,0.18);
  background: rgba(160,180,255,0.06);
}

/* ===== In-chat action cards (acquaint / friend / restore) ===== */
.dialog-action-card{
  position: relative;
  margin: 12px 0 14px;
  padding: 14px 14px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
  box-shadow: 0 10px 28px rgba(0,0,0,0.22);
}

.dialog-action-card__title{
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 6px;
  color: rgba(240,235,255,0.96);
}

.dialog-action-card__text{
  font-size: 13px;
  line-height: 1.35;
  opacity: .85;
}

.dialog-action-card__actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.dialog-action-btn{
  appearance: none;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(240,235,255,0.94);

  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 650;
  font-size: 13px;
  cursor: pointer;

  transition: .12s ease;
}

.dialog-action-btn:hover{
  background: rgba(162,120,255,0.14);
  border-color: rgba(162,120,255,0.22);
}

.dialog-action-btn:active{ transform: translateY(1px); }

.dialog-action-btn.primary{
  background: rgba(162,120,255,0.18);
  border-color: rgba(162,120,255,0.30);
}

.dialog-action-btn.danger{
  color: rgba(255,160,160,0.96);
}

.dialog-action-btn.danger:hover{
  background: rgba(255,90,90,0.10);
  border-color: rgba(255,90,90,0.18);
}

/* ===== System cards inside dialog (acquaint / friends / restore) ===== */
.dialog-syscard {
  position: relative;
  margin: 12px 0 14px;
  padding: 14px 14px 12px;

  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.045);
  box-shadow: 0 14px 34px rgba(0,0,0,0.24);
  backdrop-filter: blur(6px);
}

.dialog-syscard__title{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 6px;
  color: rgba(245,242,255,0.98);
}

.dialog-syscard__text{
  font-size: 13px;
  line-height: 1.35;
  color: rgba(235,230,255,0.82);
}

.dialog-syscard__actions{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.dialog-sysbtn{
  appearance:none;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
  color: rgba(245,242,255,0.96);

  padding: 8px 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: .12s ease;
}

.dialog-sysbtn:hover{
  background: rgba(162,120,255,0.16);
  border-color: rgba(162,120,255,0.26);
}

.dialog-sysbtn.primary{
  background: rgba(162,120,255,0.20);
  border-color: rgba(162,120,255,0.34);
}

.dialog-sysbtn.danger{
  color: rgba(255,170,170,0.98);
}

.dialog-sysbtn.danger:hover{
  background: rgba(255,90,90,0.11);
  border-color: rgba(255,90,90,0.18);
}

.dialog-syscard__close{
  position:absolute;
  top: 10px;
  right: 10px;

  width: 26px;
  height: 26px;
  border-radius: 9px;

  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.70);
  cursor:pointer;
}

.dialog-syscard__close:hover{
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.92);
}
/* =========================================================
   Dialog detail: mobile layout + unbroken text safety
   (template: dialog_detail.html)
========================================================= */

/* 1) Защита от "длинного слова без пробелов" (и заголовок, и сообщения) */
.dialog-detail-page .dialog-title,
.dialog-detail-page .dialog-message-text,
.dialog-detail-page .dialog-message-bubble,
.dialog-detail-page .dialog-seed-text{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* на всякий — если feather_md генерит вложенные элементы */
.dialog-detail-page .dialog-message-text *{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* чтобы пузырь не пытался расширять контейнер */
.dialog-detail-page .dialog-message-bubble{
  max-width: min(560px, 86%);
}

/* 2) Мобильная вёрстка: шапка + поиск + кнопки + поле ввода */
@media (max-width: 640px){

  /* карточка по ширине/отступам */
  .dialog-detail-page .dialog-card{
    padding-left: 14px;
    padding-right: 14px;
  }

  /* шапку делаем вертикальной, чтобы не распирало вправо */
  .dialog-detail-page .dialog-header{
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }

  /* блок действий (поиск + иконки) — на всю ширину */
  .dialog-detail-page .dialog-header-actions{
    width: 100%;
    align-items: stretch;
  }

  /* поиск — не узкая пилюля справа, а нормальная строка */
  .dialog-detail-page .dialog-search-input{
    width: 100%;
    max-width: 100%;
  }

  /* иконки/кнопки — перенос, без распирания */
  .dialog-detail-page .dialog-important-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
  }

  /* разделители | на мобиле только мешают */
  .dialog-detail-page .dialog-toggle-sep{
    display: none;
  }

  /* зона сообщений — не должна "вылезать", добавим ограничение по высоте */
  .dialog-detail-page #dialog-messages{
    max-height: calc(100svh - 270px);
    overflow-y: auto;
  }

  /* нижний инпут-ряд: в столбик (или плотнее), чтобы не уезжало */
  .dialog-detail-page .dialog-input-row{
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding-bottom: 10px;
    background: inherit;
  }

  .dialog-detail-page #dialog-send-form{
    display: flex;
    gap: 10px;
    align-items: flex-end;
  }

  .dialog-detail-page .dialog-textarea{
    min-height: 42px;
    max-height: 34svh;
    overflow-y: auto;
  }

  .dialog-detail-page .dialog-send-btn{
    white-space: nowrap;
  }
}

/* =========================================================
   Dialog detail — mobile: content under sticky input fix
   (dialog_detail.html)
========================================================= */

@media (max-width: 640px){

  /* 1) Лента сообщений: добавляем нижний отступ под sticky-панель */
  .dialog-detail-page #dialog-messages{
    padding-bottom: 92px; /* под высоту textarea+кнопки; можно 80–110 */
  }

  /* 2) Сама липкая панель ввода должна иметь фон, чтобы не было "наезда" визуально */
  .dialog-detail-page .dialog-input-row{
    background: rgba(15, 18, 36, 0.92); /* под тёмную тему */
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.06);
  }

  /* 3) Чтобы не появлялись странные горизонтальные "вылеты" от внутренних блоков */
  .dialog-detail-page .dialog-card,
  .dialog-detail-page #dialog-messages{
    overflow-x: hidden;
  }
}

/* =========================================================
   Dialog seed (Записка): sticky + collapsible
========================================================= */

.dialog-detail-page .dialog-seed-card{
  position: sticky;
  top: 0;                 /* закрепили вверху внутри карточки */
  z-index: 6;

  /* чтобы при прилипании выглядело цельно */
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.dialog-detail-page .dialog-seed-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.dialog-detail-page .dialog-seed-toggle{
  height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
} 
.dialog-detail-page .dialog-seed-toggle:hover{
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

/* collapsed state */
.dialog-detail-page .dialog-seed-card.is-collapsed .dialog-seed-text{
  max-height: 140px;      /* сколько показываем в свернутом виде */
  overflow: hidden;

  /* мягкое “затухание” снизу */
  -webkit-mask-image: linear-gradient(#000 70%, transparent 100%);
          mask-image: linear-gradient(#000 70%, transparent 100%);
}

/* expanded state */
.dialog-detail-page .dialog-seed-card.is-expanded .dialog-seed-text{
  max-height: none;
  overflow: visible;
  -webkit-mask-image: none;
          mask-image: none;
}

/* важно: длинные строки без пробелов не должны распирать */
.dialog-detail-page .dialog-seed-text,
.dialog-detail-page .dialog-seed-text *{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* =========================================================
   Dialog seed — tighten spacing
========================================================= */

.dialog-detail-page .dialog-seed-head{
  margin-bottom: 4px;   /* было больше */
}

.dialog-detail-page .dialog-seed-title{
  margin: 0;            /* убрать лишний margin */
  line-height: 1.2;
}

.dialog-detail-page .dialog-seed-text{
  margin-top: 4px;      /* было ~10–14px */
}

/* =========================================================
   Dialog seed — make toggle button easier to click
========================================================= */

.dialog-detail-page .dialog-seed-head{
  position: relative; /* чтобы z-index работал локально */
}

.dialog-detail-page .dialog-seed-toggle{
  position: relative;
  z-index: 20;          /* выше текста/маски */
  padding: 6px 12px;    /* больше зона */
  min-height: 32px;
  line-height: 1;
}

/* чтобы свернутый текст с маской не мешал кликам по шапке */
.dialog-detail-page .dialog-seed-card.is-collapsed .dialog-seed-text{
  pointer-events: none;
}

/* но при раскрытии снова разрешаем выделение/копирование текста */
.dialog-detail-page .dialog-seed-card.is-expanded .dialog-seed-text{
  pointer-events: auto;
}

/* =========================================================
   Dialog seed — expanded: inner scroll + hidden scrollbar
========================================================= */

/* В раскрытом виде делаем внутреннюю прокрутку, чтобы не раздувало страницу */
.dialog-detail-page .dialog-seed-card.is-expanded .dialog-seed-text{
  max-height: min(52vh, 420px);
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px; /* чтобы текст не прилипал к краю при скролле */
}

/* Скрыть скроллбар, но оставить прокрутку */
.dialog-detail-page .dialog-seed-card.is-expanded .dialog-seed-text{
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* IE/old Edge */
}
.dialog-detail-page .dialog-seed-card.is-expanded .dialog-seed-text::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* На мобиле можно чуть больше высоту */
@media (max-width: 640px){
  .dialog-detail-page .dialog-seed-card.is-expanded .dialog-seed-text{
    max-height: min(46svh, 360px);
  }
}

/* =========================================================
   Dialog detail — one common scroll area (seed + messages)
   + hide scrollbar
========================================================= */

/* диалог-карта: держим layout */
.dialog-detail-page .dialog-card{
  overflow: hidden; /* важно: чтобы скрытый скроллбар не “торчал” */
}

/* общий скролл-контейнер (красная зона) */
.dialog-detail-page .dialog-scroll{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: 6px; /* чуть воздуха справа */
  scrollbar-width: none;        /* Firefox */
  -ms-overflow-style: none;     /* old Edge/IE */
}
.dialog-detail-page .dialog-scroll::-webkit-scrollbar{
  width: 0;
  height: 0;
}

/* у messages больше НЕ должно быть собственного скролла */
.dialog-detail-page .dialog-messages{
  overflow: visible !important;
  flex: 0 0 auto !important;
  padding-right: 0 !important;
}

/* seed в раскрытом виде больше не скроллим внутри */
.dialog-detail-page .dialog-seed-card.is-expanded .dialog-seed-text{
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

/* =========================================================
   Dialog seed — stop sticking, scroll together with dialog
========================================================= */

.dialog-detail-page .dialog-seed-card{
  position: static !important; /* было sticky */
  top: auto !important;
  z-index: auto !important;
  box-shadow: none; /* по желанию: чтобы не выглядело “плавающим” */
}

/* если хочешь оставить лёгкую тень как у обычной карточки */
.dialog-detail-page .dialog-seed-card{
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
}

/* =========================================================
   Dialog — system / proposal cards color schemes
========================================================= */

/* ---------- DARK ---------- */

html:not([data-theme="light"]) .dialog-detail-page .dialog-sys-card,
html:not([data-theme="light"]) .dialog-detail-page .dialog-proposal-card{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  color: rgba(255,255,255,.88);
}

html:not([data-theme="light"]) .dialog-detail-page .dialog-sys-card p,
html:not([data-theme="light"]) .dialog-detail-page .dialog-proposal-card p{
  color: rgba(255,255,255,.70);
}


/* ---------- LIGHT ---------- */

html[data-theme="light"] .dialog-detail-page .dialog-sys-card,
html[data-theme="light"] .dialog-detail-page .dialog-proposal-card{
  background: rgba(125,105,255,0.06);        /* лёгкий фиолетовый акцент */
  border: 1px solid rgba(125,105,255,0.18);
  box-shadow: 0 14px 32px rgba(10,15,30,.06);
  color: rgba(0,0,0,.85);
}

html[data-theme="light"] .dialog-detail-page .dialog-sys-card p,
html[data-theme="light"] .dialog-detail-page .dialog-proposal-card p{
  color: rgba(0,0,0,.65);
}

/* кнопки внутри */
html[data-theme="light"] .dialog-detail-page .dialog-sys-card .btn-secondary{
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.08);
  color: rgba(0,0,0,.8);
}

html[data-theme="light"] .dialog-detail-page .dialog-sys-card .btn-secondary:hover{
  background: rgba(125,105,255,.12);
  border-color: rgba(125,105,255,.25);
}

/* FIX: message bubbles never overflow container */
.dialog-detail-page .dialog-message{
  min-width: 0;
}

.dialog-detail-page .dialog-message-bubble{
  min-width: 0;
  box-sizing: border-box;
  max-width: min(560px, calc(100% - 16px));
  overflow: hidden; /* страховка от редких “вылетов” */
}

.dialog-detail-page .dialog-message-text,
.dialog-detail-page .dialog-message-text *{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* если внутри попадаются картинки/медиа */
.dialog-detail-page .dialog-message-text img,
.dialog-detail-page .dialog-message-text video{
  max-width: 100%;
  height: auto;
}

/* если вдруг есть pre/code */
.dialog-detail-page .dialog-message-text pre,
.dialog-detail-page .dialog-message-text code{
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 640px){
  .dialog-detail-page .dialog-message-bubble{
    max-width: calc(100% - 8px);
  }

  .dialog-detail-page .dialog-title{
    /* чтобы на мобиле было аккуратно, без разъезда */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* FIX: bubble must include padding/border in max-width (prevents right overflow) */
.dialog-detail-page .dialog-message,
.dialog-detail-page .dialog-message-bubble{
  min-width: 0;
}

.dialog-detail-page .dialog-message-bubble{
  box-sizing: border-box;
  max-width: min(560px, calc(86% - 2px)); /* -2px на границы, чтобы вообще не цепляло */
  overflow: hidden; /* страховка от редких артефактов */
}

/* mobile: пузырь может быть шире */
@media (max-width: 640px){
  .dialog-detail-page .dialog-message-bubble{
    max-width: calc(100% - 8px);
  }
}
 

.dialog-detail-page .dialog-messages{
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden; /* ключевое: не даём горизонтальному overflow раздвигать карточку */
  padding-right: 6px;
  min-width: 0;
}

.dialog-detail-page .dialog-message{
  display:flex;
  margin: 8px 0;
  min-width: 0; /* чтобы flex-строка не раздувала контейнер */
}

.dialog-detail-page .dialog-message-bubble{
  box-sizing: border-box;          /* КЛЮЧ */
  min-width: 0;
  max-width: min(520px, calc(100% - 18px)); /* вместо "86%" — гарантированно влезает */
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-main);
  overflow: hidden; /* страховка */
}

.dialog-detail-page .dialog-message-text,
.dialog-detail-page .dialog-message-text *{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 640px){
  .dialog-detail-page .dialog-message-bubble{
    max-width: calc(100% - 10px);
  }
}

/* ==========================================
   DIALOG HARD WIDTH FIX (REAL FIX)
========================================== */

/* 1. Все flex-узлы должны уметь сжиматься */
.dialog-detail-page .dialog-card,
.dialog-detail-page .dialog-scroll,
.dialog-detail-page .dialog-messages,
.dialog-detail-page .dialog-message,
.dialog-detail-page .dialog-input-row,
.dialog-detail-page .dialog-input-form{
  min-width: 0;
  max-width: 100%;
}

/* 2. Убираем возможность горизонтального overflow */
.dialog-detail-page .dialog-scroll{
  overflow-x: hidden;
}

.dialog-detail-page .dialog-messages{
  overflow-x: hidden;
}

/* 3. Пузырь не может быть шире контейнера */
.dialog-detail-page .dialog-message-bubble{
  box-sizing: border-box;
  max-width: min(560px, calc(100% - 20px));
}

/* 4. Контент внутри не может распирать */
.dialog-detail-page .dialog-message-text,
.dialog-detail-page .dialog-message-text *{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* 5. textarea тоже не должна распирать */
.dialog-detail-page .dialog-textarea{
  box-sizing: border-box;
  max-width: 100%;
}

/* =========================================================
   Dialog detail — FIX layout (PC + Mobile)
   ========================================================= */

/* Карточка диалога должна быть колонкой с нормальной высотой */
.dialog-detail-page .dialog-card{
  display: flex !important;
  flex-direction: column !important;
  max-height: calc(100vh - 170px) !important;
}

/* Сообщения — главный скролл внутри карточки */
.dialog-detail-page .dialog-messages{
  flex: 1 1 auto !important;
  min-height: 0 !important;          /* критично для flex-скролла */
  overflow: auto !important;
  padding-right: 6px !important;
}

/* Пузырям запрещаем ломать контейнер */
.dialog-detail-page .dialog-message{
  min-width: 0 !important;
}
.dialog-detail-page .dialog-message-bubble{
  max-width: min(520px, 86%) !important;
  word-break: break-word !important;
}

/* ---------- MOBILE: шапку перестраиваем в одну колонку ---------- */
@media (max-width: 640px){

  .dialog-detail-page{
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 1px 18px 0;
  }

  .dialog-detail-page .feed-card-header.dialog-header{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  /* правая колонка (поиск + кнопки) становится строкой */
  .dialog-detail-page .dialog-header-actions{
    width: 100% !important;
    flex: 0 0 auto !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .dialog-detail-page .dialog-search-input{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .dialog-detail-page .dialog-important-actions{
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
  }

  /* чтобы карточка нормально помещалась по высоте экрана на мобилке */
  .dialog-detail-page .dialog-card{
    max-height: calc(100dvh - 170px) !important;
  }
}

.dialog-detail-page .dialog-scroll{
  overflow: visible !important;
}

/* =========================================================
   Dialog detail — MOBILE: messages must scroll INSIDE the card
   Make #dialog-scroll the only scroll container (JS uses it)
========================================================= */

/* карточка — фиксируем “высоту чата”, чтобы не было скролла body */
.dialog-detail-page .dialog-card{
  display: flex !important;
  flex-direction: column !important;

  height: calc(100dvh - 170px) !important;   /* современный viewport */
  max-height: none !important;
  min-height: 0 !important;
}

/* fallback для браузеров без dvh */
@supports not (height: 100dvh){
  .dialog-detail-page .dialog-card{
    height: calc(100svh - 170px) !important;
  }
}

/* ВАЖНО: главный скролл — именно dialog-scroll (его слушает JS) */
.dialog-detail-page .dialog-scroll{
  flex: 1 1 auto !important;
  min-height: 0 !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* чтобы контент не прилипал к краю */
  padding-right: 6px;
}

/* dialog-messages больше НЕ должен быть отдельным scroll-area */
.dialog-detail-page #dialog-messages,
.dialog-detail-page .dialog-messages{
  overflow: visible !important;
  max-height: none !important;
  padding-right: 0 !important;
  min-height: 0 !important;
}

/* нижняя панель ввода остаётся “прибитой” к низу карточки */
.dialog-detail-page .dialog-input-row{
  position: sticky;
  bottom: 0;
  z-index: 50;

  background: var(--bg-card);
  border-top: 1px solid var(--border-subtle);
}

/* =====================================================
   Dialog — pin messages to bottom inside scroll container
   (fix "last message too high" on mobile)
===================================================== */

/* scroll-контейнер становится flex-колонкой */
.dialog-detail-page .dialog-scroll{
  display: flex !important;
  flex-direction: column !important;
}

/* сам список сообщений прижимаем к низу */
.dialog-detail-page #dialog-messages,
.dialog-detail-page .dialog-messages{
  margin-top: auto !important;      /* ключ: толкаем вниз */
  display: flex !important;
  flex-direction: column !important;
  gap: 10px;                        /* если не хочешь — убери */
}

/* на всякий: убираем любые “растягивания” */
.dialog-detail-page #dialog-messages > :last-child{
  margin-bottom: 0 !important;
}

/* =========================================================
   Dialog header: mobile order (title → actions → avatars)
========================================================= */
@media (max-width: 640px){

  /* делаем header колонкой */
  .dialog-detail-page .dialog-header{
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  /* MAIN тоже колонкой */
  .dialog-detail-page .dialog-header-main{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* ===== ПОРЯДОК ===== */

  /* 1️⃣ Название диалога — ПЕРВЫМ */
  .dialog-detail-page .dialog-title-row{
    order: 1 !important;
    margin: 0 !important;
  }

  /* уменьшаем немного шрифт */
  .dialog-detail-page .dialog-title{
    font-size: 16px !important;   /* было крупнее */
    line-height: 1.2 !important;
  }

  /* 2️⃣ Панель поиска + кнопки */
  .dialog-detail-page .dialog-header-actions{
    order: 2 !important;
  }

  /* 3️⃣ Аватары + дата */
  .dialog-detail-page .dialog-participants-row{
    order: 3 !important;
    margin-bottom: 0 !important;
  }

  /* 4️⃣ Подпись "Вы и ..." */
  .dialog-detail-page .dialog-subtitle{
    order: 4 !important;
    margin-top: 0 !important;
  }

  /* кнопка редактирования */
  .dialog-detail-page .dialog-title-edit{
    order: 1 !important;
  }

}  

/* =========================================================
   Dialog — compact mobile layout
   (more space for messages)
========================================================= */
@media (max-width: 640px){

  /* ---------- HEADER СЖИМАЕМ ---------- */

  .dialog-detail-page .dialog-header{
    padding: 14px 16px !important;
    gap: 8px !important;
  }

  .dialog-detail-page .dialog-title{
    font-size: 15px !important;
  }

  .dialog-detail-page .dialog-participants-row{
    gap: 8px !important;
  }

  .dialog-detail-page .dialog-subtitle{
    font-size: 13px !important;
  }

  .dialog-detail-page .dialog-header-actions{
    margin-top: 4px !important;
  }

  .dialog-detail-page .dialog-search{
    height: 34px !important;
    font-size: 13px !important;
  }

  .dialog-detail-page .dialog-header-actions .icon-btn{
    width: 34px !important;
    height: 34px !important;
  }


  /* ---------- НИЖНЯЯ ПАНЕЛЬ СЖИМАЕМ ---------- */

  .dialog-detail-page .dialog-input-row{
    padding: 10px 14px !important;
  }

  .dialog-detail-page .dialog-input-row textarea{
    height: 42px;           /* старт, дальше растит JS */
    min-height: 42px;
    max-height: 34svh;      /* твой лимит */
    font-size: 14px !important;

    overflow-y: hidden;     /* до лимита без скролла */
    box-sizing: border-box;
    resize: none;
  }

  .dialog-detail-page .dialog-input-row input{
    height: 36px !important;
    font-size: 14px !important;
  }

  .dialog-detail-page .dialog-input-row .send-btn{
    height: 36px !important;
    padding: 0 14px !important;
    font-size: 14px !important;
  }

  .dialog-detail-page .dialog-input-row .icon-btn{
    width: 36px !important;
    height: 36px !important;
  }

}  

/* =========================================================
   Ultra small mobile — replace "Отправить" with ↺
   (actual button class: .dialog-send-btn)
========================================================= */
@media (max-width: 400px){

  .dialog-detail-page .dialog-send-btn{
    /* прячем текст */
    font-size: 0 !important;
    letter-spacing: 0 !important;

    /* делаем кнопку компактной */
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;

    /* на всякий — центрируем содержимое */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: relative;
  }

  .dialog-detail-page .dialog-send-btn::after{
    content: "➤";
    font-size: 18px;
    line-height: 1;
  }

} 

/* =========================================================
   DIALOG MOBILE (Telegram-like)
   - mobile-only, desktop unaffected
   - search opens via .dialog-header.is-search-open
   - important/mute/export visible on mobile
========================================================= */

/* базовые мобильные правила */
@media (max-width: 640px){

  /* скрываем футер именно на странице диалога */
  body.is-dialog-page .site-footer{
    display:none;
  }

  body.is-dialog-page .page-container{
    padding-bottom:0;
  }

  /* контейнер страницы */
  .dialog-detail-page{
    padding:1px 10px 0 !important;
  }

  /* высота карточки чата */
  .dialog-detail-page .dialog-card{
    height:calc(100dvh - 110px) !important;
  }

  @supports not (height:100dvh){
    .dialog-detail-page .dialog-card{
      height:calc(100svh - 110px) !important;
    }
  }

  /* ================================
     Sticky header
  ================================ */

  .dialog-detail-page .dialog-header{
    position:sticky;
    top:0;
    z-index:60;

    background:var(--bg-card);
    border-bottom:1px solid var(--border-subtle);

    padding:10px 12px !important;
  }

  .dialog-detail-page .dialog-title-row{
    display:flex;
    align-items:center;
    gap:10px;
  }

  .dialog-detail-page .dialog-title{
    flex:1 1 auto;
    min-width:0;
    margin:0;
    font-size:16px !important;
  }

  /* "назад" */
  .dialog-detail-page .dialog-back-btn{
    width:36px;
    height:36px;
    border-radius:999px;

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

    text-decoration:none;
    color:var(--text-main);

    border:1px solid var(--border-subtle);
    background:var(--bg-elevated);
  }

  /* кнопка поиска (если есть) */
  .dialog-detail-page .dialog-search-toggle-btn{
    width:36px;
    height:36px;
    border-radius:12px;

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

    border:1px solid var(--border-subtle);
    background:var(--bg-elevated);
    color:var(--text-main);

    padding:0;
    cursor:pointer;
  }

  /* кнопка редактирования названия */
  .dialog-detail-page .dialog-title-edit-btn{
    width:36px;
    height:36px;
    border-radius:999px;

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

    border:1px solid var(--border-subtle);
    background:var(--bg-elevated);
    color:var(--text-main);

    padding:0;
  }

  /* ================================
     Search + actions
     Поиск скрыт по умолчанию, открывается через .is-search-open
  ================================ */

  .dialog-detail-page .dialog-header-actions{
    display:none;
    margin-top:8px;
  }

  .dialog-detail-page .dialog-header.is-search-open .dialog-header-actions{
    display:block;
  }

  /* ВАЖНО: НЕ скрываем важное/беззвучку/скачать */
  .dialog-detail-page .dialog-important-actions{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:8px;
  }

  /* вместо палочек — просто gap */
  .dialog-detail-page .dialog-toggle-sep{
    display:none;
  }

  .dialog-detail-page .dialog-header-btn{
    height:32px;
    min-width:32px;
    padding:0 10px;

    border-radius:999px;
    font-size:14px;
  }

  .dialog-detail-page a.dialog-header-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
  }

  .dialog-detail-page .dialog-search-input{
    height:38px;
    border-radius:14px;
  }

  /* ================================
     Messages
  ================================ */

  .dialog-detail-page .dialog-scroll{
    padding:10px 6px 12px 6px !important;
  }

  .dialog-detail-page .dialog-date-divider{
    align-self:center;

    font-size:12px;
    padding:4px 10px;
    border-radius:999px;

    background:rgba(0,0,0,.15);
    color:rgba(255,255,255,.85);
  }

  html[data-theme="light"] .dialog-detail-page .dialog-date-divider{
    background:rgba(0,0,0,.06);
    color:rgba(0,0,0,.65);
  }

  /* ================================
     Input panel
  ================================ */

  .dialog-detail-page .dialog-input-row{
    padding:10px 10px !important;

    background:rgba(20,24,38,.92);
    backdrop-filter:blur(10px);
  }

  html[data-theme="light"] .dialog-detail-page .dialog-input-row{
    background:rgba(255,255,255,.92);
  }

  .dialog-detail-page .dialog-input-form{
    display:flex;
    align-items:flex-end;
    gap:10px;
    width:100%;
  }

  .dialog-detail-page .dialog-textarea{
    flex:1 1 auto;

    min-height:40px;
    max-height:140px;

    resize:none;

    padding:10px 12px;
    border-radius:18px;
  }

  .dialog-detail-page .dialog-send-btn{
    width:44px;
    height:44px;
    min-width:44px;

    border-radius:999px;

    padding:0;
    font-size:18px;
    line-height:1;
  }

  .dialog-detail-page .dialog-menu-btn{
    width:44px;
    height:44px;

    border-radius:999px;

    border:1px solid var(--border-subtle);
    background:var(--bg-elevated);
    color:var(--text-main);
  }

}

/* дополнительная оптимизация для маленьких телефонов */
@media (max-width: 420px){

  /* мягкий edge-to-edge */
  .dialog-detail-page{
    max-width:100%;
    margin:0;
    padding:0 6px !important;
  }

  .dialog-detail-page .dialog-card{
    border-radius:16px;
    padding:12px 12px 12px;
  }

  /* скрываем “кружочки” аватаров и подстроку "Личное сообщение · ..." */
  .dialog-detail-page .dialog-participants-row{
    display:none;
  }

  .dialog-detail-page .dialog-subtitle{
    display:none;
  }

  /* шапка компактнее */
  .dialog-detail-page .feed-card-header.dialog-header{
    padding-bottom:10px !important;
    margin-bottom:10px;
  }

  /* "назад" компактнее */
  .dialog-detail-page .dialog-back-btn{
    width:28px;
    height:28px;
    font-size:16px;
    line-height:1;
    border:1px solid var(--border-soft);
  }

  /* поиск-кнопка компактнее (если есть) */
  .dialog-detail-page .dialog-search-toggle-btn{
    width:30px;
    height:30px;
    border-radius:10px;
    border:1px solid var(--border-soft);
  }

  .dialog-detail-page .dialog-search-toggle-btn:hover{
    border-color:var(--accent-border);
    background:var(--accent-soft);
  }

  /* кнопки важное/уведомления/скачать компактнее */
  .dialog-detail-page .dialog-header-btn{
    height:30px;
    padding:0 10px;
    border-radius:999px;
    font-size:13px;
  }

  .dialog-detail-page .dialog-search-input{
    height:36px;
    border-radius:14px;
  }

}

/* скрываем кнопку поиска в шапке диалога на ПК */
@media (min-width: 641px){

  .dialog-search-toggle-btn{
    display:none !important;
  }

}

/* =========================
   Dialog: Back button on desktop (make it neat)
   Desktop only, mobile unaffected
========================= */

@media (min-width: 641px){

  .dialog-detail-page .dialog-back-btn{
    width: 34px;
    height: 34px;
    border-radius: 999px;

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

    text-decoration: none;

    border: 1px solid var(--border-subtle);
    background: var(--bg-elevated);

    color: var(--text-main);
    font-size: 16px;
    line-height: 1;

    transition: transform .08s ease, background .12s ease, border-color .12s ease;
  }

  .dialog-detail-page .dialog-back-btn:hover{
    border-color: var(--accent-border);
    background: var(--accent-soft);
    transform: translateY(-1px);
  }

  .dialog-detail-page .dialog-back-btn:active{
    transform: translateY(0);
  }

  .dialog-detail-page .dialog-back-btn:focus-visible{
    outline: 2px solid var(--accent-border);
    outline-offset: 2px;
  }

}

/* ==========================================
   Dialog: tighter mobile layout (fixes)
   - removes extra vertical space
   - search row doesn't "fall out"
   - smaller send button
   - move menu (⋮) to header on mobile
========================================== */

@media (max-width: 640px){

  /* 1) Шапка компактнее */
  .dialog-detail-page .dialog-header{
    padding: 8px 10px !important;
  }

  /* меньше зазор между шапкой и контентом */
  .dialog-detail-page .dialog-scroll{
    padding-top: 8px !important;
  }

  /* 2) В одну линию: назад + заголовок + кнопки */
  .dialog-detail-page .dialog-title-row{
    gap: 8px;
  }

  .dialog-detail-page .dialog-title{
    font-size: 15px !important;
  }

  /* 3) Кнопки в шапке чуть меньше */
  .dialog-detail-page .dialog-back-btn{
    width: 32px;
    height: 32px;
  }

  .dialog-detail-page .dialog-search-toggle-btn,
  .dialog-detail-page .dialog-title-edit-btn,
  .dialog-detail-page .dialog-menu-btn--top{
    width: 32px;
    height: 32px;
    border-radius: 12px;
  }

  /* 4) Поиск НЕ должен занимать место, пока закрыт */
  .dialog-detail-page .dialog-header-actions{
    display: none;
    margin-top: 6px;
  }

  /* Открываем только при is-search-open */
  .dialog-detail-page .dialog-header.is-search-open .dialog-header-actions{
    display: block;
  }

  /* 5) Когда поиск открыт — делаем его одной строкой, без раздувания */
  .dialog-detail-page .dialog-search-form{
    width: 100%;
  }

  .dialog-detail-page .dialog-search-input{
    width: 100%;
    height: 34px;
    border-radius: 14px;
  }

  /* 6) Важное/уведомления/скачать — в одну линию, компактнее */
  .dialog-detail-page .dialog-important-actions{
    margin-top: 6px;
    gap: 8px;
    flex-wrap: nowrap;
  }

  .dialog-detail-page .dialog-header-btn{
    height: 30px;
    min-width: 30px;
    padding: 0 8px;
    font-size: 13px;
  }

  /* 7) Нижняя панель ввода компактнее */
  .dialog-detail-page .dialog-input-row{
    padding: 8px 10px !important;
  }

  .dialog-detail-page .dialog-textarea{
    min-height: 36px;
    padding: 9px 12px;
    border-radius: 16px;
  }

  /* 8) Уменьшаем кнопку отправки */
  .dialog-detail-page .dialog-send-btn{
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 17px;
  }

  /* 9) Меню ⋮: на мобилке кнопка внизу скрыта,
        но сам wrapper НЕ прячем (внутри него лежит #dialog-menu) */
  .dialog-detail-page .dialog-menu-wrapper{
    display: block !important;
    position: static !important;
    width: 0 !important;
    height: 0 !important;
    overflow: visible !important;
  }

  /* скрываем только нижнюю кнопку ⋮ возле отправки */
  .dialog-detail-page .dialog-input-row .dialog-menu-toggle{
    display: none !important;
  }

}

/* супер-компакт для маленьких экранов */
@media (max-width: 420px){

  .dialog-detail-page .dialog-header{
    padding: 8px 10px !important;
  }

  .dialog-detail-page .dialog-title{
    font-size: 14px !important;
  }

  .dialog-detail-page .dialog-back-btn{
    width: 28px;
    height: 28px;
  }

  .dialog-detail-page .dialog-search-toggle-btn,
  .dialog-detail-page .dialog-title-edit-btn,
  .dialog-detail-page .dialog-menu-btn--top{
    width: 30px;
    height: 30px;
    border-radius: 10px;
  }

  .dialog-detail-page .dialog-send-btn{
    width: 38px;
    height: 38px;
    min-width: 38px;
  }

}

/* =========================
   Dialog mobile search toggle
========================= */

@media (max-width: 640px){

  /* строка поиска скрыта по умолчанию */
  .dialog-detail-page .dialog-header-actions{
    display: none !important;
  }

  /* показывается только после нажатия на 🔍 */
  .dialog-detail-page .dialog-header.is-search-open .dialog-header-actions{
    display: block !important;
    margin-top: 8px;
  }

}

/* ПК: скрываем верхние ⋮ в шапке (они только для мобилки) */
@media (min-width: 641px){
  .dialog-detail-page .dialog-menu-btn--top{
    display: none !important;
  }
}

/* мобильная версия — убрать разделитель у поля ответа */
@media (max-width: 640px){

  .dialog-detail-page .dialog-input-row::after{
    display: none !important;
  }

}

/* чтобы не было "прыжков" и выглядело как мессенджер */
.dialog-detail-page .dialog-textarea{
  overflow-y: hidden; /* JS сам переключит на auto, когда надо */
} 

/* ПК: скрыть scrollbar в поле ввода, но оставить прокрутку */
@media (min-width: 641px){

  .dialog-detail-page .dialog-textarea{
    scrollbar-width: none;      /* Firefox */
    -ms-overflow-style: none;   /* старый Edge */
  }

  .dialog-detail-page .dialog-textarea::-webkit-scrollbar{
    display: none;              /* Chrome / Safari */
  }

}

.dialog-detail-page .dialog-textarea{
  transition: height .08s ease;
}

@media (max-width: 640px){
  #dialog-menu{
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    overflow: auto;
  }
}

/* верхняя ⋮ — чтобы она была стабильной точкой для fixed-меню */
.dialog-detail-page .dialog-menu-btn--top{
  position: relative;
  z-index: 60;
}

/* =========================================================
   Dialog system cards (acquaint / friends / restore) — theme-safe
   Fix: readable in BOTH light & dark themes + mobile
========================================================= */

.dialog-syscard{
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: var(--shadow-popover);

  /* чтобы крестик не наезжал на текст */
  padding-right: 46px;

  /* если где-то включён blur — пусть будет мягко, но не “выбеливает” */
  backdrop-filter: blur(10px);
}

.dialog-syscard__title{
  color: var(--text-main);
}

.dialog-syscard__text{
  color: var(--text-muted);
}

.dialog-sysbtn{
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-main);
}

.dialog-sysbtn:hover{
  background: var(--accent-soft);
  border-color: rgba(162,120,255,0.26);
}

.dialog-sysbtn.primary{
  background: rgba(162,120,255,0.18);
  border-color: rgba(162,120,255,0.30);
}

.dialog-sysbtn.danger{
  color: rgba(255,110,110,0.95);
}

.dialog-sysbtn.danger:hover{
  background: rgba(255,90,90,0.10);
  border-color: rgba(255,90,90,0.18);
}

.dialog-syscard__close{
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  color: var(--text-muted);
}

.dialog-syscard__close:hover{
  background: var(--accent-soft);
  color: var(--text-main);
}
.dialog-scroll {
  position: relative;
}

.dialog-new-messages-btn {
  position: sticky;
  top: 8px;
  z-index: 5;
  margin: 8px auto 12px;
  display: block;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.dialog-title-inline-actions--mobile{ display:none; }

@media (max-width: 760px){
  .dialog-detail-page .dialog-title-row{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }
  .dialog-detail-page .dialog-title{
    flex:1 1 auto;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    position:relative;
  }
  .dialog-detail-page .dialog-title > *{ white-space:nowrap; }
  .dialog-title-inline-actions--mobile{
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-left:auto;
    flex:0 0 auto;
  }
  .dialog-title-inline-actions--mobile .dialog-header-btn{
    min-width:32px;
    height:32px;
    padding:0 8px;
    border-radius:12px;
  }
  .dialog-detail-page .dialog-important-actions{
    display:none;
  }
  .dialog-detail-page .dialog-header-actions{
    display:none;
    width:100%;
    margin-top:10px;
  }
  .dialog-detail-page .dialog-header.is-search-open .dialog-header-actions{
    display:block;
  }
  .dialog-detail-page .dialog-search-form{
    width:100%;
  }
  .dialog-detail-page .dialog-search-input{
    width:100%;
  }
}

/* dialog title: give text more space and keep buttons compact */
.dialog-detail-page .dialog-title-row{
  gap:8px;
}
.dialog-detail-page .dialog-title-marquee-wrap{
  flex:1 1 auto;
  min-width:0;
}
.dialog-detail-page .dialog-title-toolbar{
  display:flex;
  align-items:center;
  gap:6px;
  flex:0 0 auto;
}
.dialog-detail-page .dialog-title-inline-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.dialog-detail-page .dialog-title-inline-actions .dialog-inline-form{
  display:flex;
}
.dialog-detail-page .dialog-title-inline-actions .dialog-header-btn,
.dialog-detail-page .dialog-search-toggle-btn,
.dialog-detail-page .dialog-title-edit-btn,
.dialog-detail-page .dialog-menu-btn--top{
  width:34px;
  min-width:34px;
  height:34px;
  padding:0;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.dialog-detail-page .dialog-title-row .dialog-title{
  display:block;
  width:100%;
}

@media (min-width: 641px){
  .dialog-detail-page .dialog-title-row{
    align-items:center;
  }
  .dialog-detail-page .dialog-title{
    font-size:17px;
  }
  .dialog-detail-page .dialog-title-toolbar{
    gap:5px;
  }
  .dialog-detail-page .dialog-search-toggle-btn,
  .dialog-detail-page .dialog-title-edit-btn,
  .dialog-detail-page .dialog-title-inline-actions .dialog-header-btn{
    width:32px;
    min-width:32px;
    height:32px;
    font-size:14px;
  }
}

@media (max-width: 640px){
  .dialog-detail-page .dialog-title-row{
    align-items:center;
  }
  .dialog-detail-page .dialog-title{
    font-size:14px !important;
  }
  .dialog-detail-page .dialog-title-toolbar{
    gap:4px;
  }
  .dialog-detail-page .dialog-search-toggle-btn,
  .dialog-detail-page .dialog-title-edit-btn,
  .dialog-detail-page .dialog-title-inline-actions .dialog-header-btn,
  .dialog-detail-page .dialog-menu-btn--top{
    width:30px;
    min-width:30px;
    height:30px;
    border-radius:10px;
    font-size:13px;
  }
  .dialog-detail-page .dialog-title-marquee-wrap{
    overflow:hidden;
  }
  .dialog-detail-page .dialog-title-marquee-wrap .dialog-title{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
}
@media (min-width: 641px){
  .dialog-detail-page .dialog-menu-mobile-tools{
    display: none !important;
  }
}

@media (max-width: 640px){
  .dialog-detail-page #dialog-menu,
  .dialog-detail-page .dialog-menu{
    max-width: min(320px, calc(100vw - 16px)) !important;
    max-height: min(70dvh, 520px) !important;
    overflow: auto !important;
  }
}

@media (max-width: 640px) {
  .dialog-title-row {
    min-width: 0;
  }

  .dialog-title-marquee-wrap {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
  }

  .dialog-title {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
/* =========================================
   Dialog final pass:
   - live notices
   - mobile Telegram-like layout
   ========================================= */

.dialog-live-notices{
  display:none;
  gap:8px;
  margin:0 0 10px;
}

.dialog-live-notice{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

.dialog-live-notice--warning{
  background:rgba(245, 158, 11, .10);
  border-color:rgba(245, 158, 11, .28);
}

.dialog-live-notice--info{
  background:rgba(96, 165, 250, .10);
  border-color:rgba(96, 165, 250, .24);
}

.dialog-live-notice--success{
  background:rgba(34, 197, 94, .10);
  border-color:rgba(34, 197, 94, .24);
}

.dialog-live-notice__text{
  min-width:0;
  font-size:13px;
  line-height:1.35;
  color:var(--text-main);
}

.dialog-live-notice__btn{
  flex:0 0 auto;
  height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid var(--border-soft);
  background:var(--bg-elevated);
  color:var(--text-main);
  cursor:pointer;
  font:inherit;
  font-size:12px;
}

.dialog-live-notice__btn:hover{
  border-color:var(--accent-border);
  background:var(--accent-soft);
}

/* ---------- mobile dialog polish ---------- */
@media (max-width: 760px){

  .dialog-detail-page{
    max-width:100%;
    margin:0;
    padding:0 !important;
  }

  .dialog-detail-page .dialog-card{
    max-width:none !important;
    width:100%;
    height:calc(100dvh - 86px) !important;
    min-height:0;
    margin:0;
    padding:0;
    border-radius:0;
    border:0;
    box-shadow:none;
    background:transparent;
  }

  .dialog-detail-page .feed-card-header.dialog-header{
    position:sticky;
    top:0;
    z-index:70;
    gap:8px;
    padding:8px 10px 10px !important;
    margin:0 !important;
    background:var(--bg-base);
    border-bottom:1px solid var(--border-subtle);
  }

  .dialog-detail-page .dialog-header-main{
    min-width:0;
  }

  .dialog-detail-page .dialog-title-row{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
  }

  .dialog-detail-page .dialog-title{
    min-width:0;
    flex:1 1 auto;
    font-size:15px !important;
    line-height:1.25;
  }

  .dialog-detail-page .dialog-participants-row{
    display:none;
  }

  .dialog-detail-page .dialog-subtitle{
    margin-top:2px;
    font-size:12px;
    line-height:1.25;
  }

  .dialog-detail-page .dialog-header-actions{
    display:none !important;
  }

  .dialog-detail-page .dialog-back-btn,
  .dialog-detail-page .dialog-search-toggle-btn,
  .dialog-detail-page .dialog-title-edit-btn,
  .dialog-detail-page .dialog-menu-btn--top{
    width:36px;
    height:36px;
    min-width:36px;
    border-radius:12px;
  }

  .dialog-detail-page .dialog-live-notices{
    position:sticky;
    top:58px;
    z-index:65;
    margin:0;
    padding:8px 10px 0;
    background:linear-gradient(to bottom, var(--bg-base), rgba(0,0,0,0));
  }

  .dialog-detail-page .dialog-live-notice{
    padding:9px 10px;
    border-radius:12px;
  }

  .dialog-detail-page .dialog-live-notice__text{
    font-size:12px;
  }

  .dialog-detail-page .dialog-scroll{
    padding:8px 10px 10px !important;
    min-height:0;
  }

  .dialog-detail-page .dialog-seed-card,
  .dialog-detail-page .dialog-syscard{
    margin-bottom:10px;
    border-radius:14px;
  }

  .dialog-detail-page .dialog-messages{
    padding:2px 0 0 !important;
    margin-top:0 !important;
    background:transparent !important;
    border:0 !important;
  }

  .dialog-detail-page .dialog-message{
    margin:6px 0;
  }

  .dialog-detail-page .dialog-message-bubble{
    max-width:88%;
    padding:10px 12px;
    border-radius:18px;
  }

  .dialog-detail-page .dialog-message.from-me .dialog-message-bubble{
    border-radius:18px 18px 8px 18px;
  }

  .dialog-detail-page .dialog-message.from-other .dialog-message-bubble{
    border-radius:18px 18px 18px 8px;
  }

  .dialog-detail-page .dialog-message-text{
    font-size:14px;
    line-height:1.42;
  }

  .dialog-detail-page .dialog-date-divider{
    margin:8px auto;
  }

  .dialog-detail-page .dialog-new-messages-btn{
    top:4px;
  }

  .dialog-detail-page .dialog-input-row{
    position:sticky;
    bottom:0;
    z-index:70;
    gap:8px;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    margin-top:8px;
    background:rgba(20,24,38,.94);
    backdrop-filter:blur(10px);
    border-top:1px solid var(--border-subtle);
  }

  html[data-theme="light"] .dialog-detail-page .dialog-input-row{
    background:rgba(255,255,255,.94);
  }

  .dialog-detail-page .dialog-input-form{
    gap:8px;
    width:100%;
  }

  .dialog-detail-page .dialog-textarea{
    min-height:40px;
    max-height:132px;
    padding:10px 14px;
    border-radius:20px;
    resize:none;
  }

  .dialog-detail-page .dialog-send-btn{
    width:42px;
    height:42px;
    min-width:42px;
    padding:0;
    border-radius:999px;
    font-size:18px;
  }

  .dialog-detail-page .dialog-menu-wrapper{
    flex:0 0 auto;
  }

  .dialog-detail-page .dialog-menu{
    left:10px !important;
    right:10px !important;
    bottom:58px !important;
    min-width:0 !important;
    max-width:none !important;
    border-radius:16px;
  }
}

/* =========================================================
   Featherline: dialog_detail final mobile shell override
   Safe final layer — keep desktop stable, rebuild mobile chat UX
========================================================= */

.dialog-detail-page{
  min-width: 0;
}

.dialog-detail-page .dialog-card,
.dialog-detail-page .dialog-header,
.dialog-detail-page .dialog-header-main,
.dialog-detail-page .dialog-title-row,
.dialog-detail-page .dialog-title-marquee-wrap,
.dialog-detail-page .dialog-title-toolbar,
.dialog-detail-page .dialog-header-actions,
.dialog-detail-page .dialog-scroll,
.dialog-detail-page .dialog-messages,
.dialog-detail-page .dialog-message,
.dialog-detail-page .dialog-input-row,
.dialog-detail-page .dialog-input-form{
  min-width: 0;
  max-width: 100%;
}

.dialog-detail-page .dialog-card{
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

.dialog-detail-page .dialog-title-marquee-wrap{
  flex: 1 1 auto;
}

.dialog-detail-page .dialog-scroll{
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain;
}

.dialog-detail-page .dialog-messages{
  flex: 0 0 auto !important;
  overflow: visible !important;
  max-height: none !important;
  padding-right: 0 !important;
}

.dialog-detail-page .dialog-message{
  min-width: 0;
}

.dialog-detail-page .dialog-message-bubble{
  box-sizing: border-box;
  min-width: 0;
  max-width: min(560px, calc(100% - 12px)) !important;
}

.dialog-detail-page .dialog-title,
.dialog-detail-page .dialog-message-text,
.dialog-detail-page .dialog-message-text *,
.dialog-detail-page .dialog-seed-text,
.dialog-detail-page .dialog-seed-text *{
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dialog-detail-page .dialog-message-text img,
.dialog-detail-page .dialog-message-text video,
.dialog-detail-page .dialog-message-text iframe{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}

.dialog-detail-page .dialog-new-messages-btn{
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(20,24,38,0.94);
  color: rgba(245,242,255,0.95);
  box-shadow: 0 14px 32px rgba(0,0,0,0.28);
  backdrop-filter: blur(10px);
}

html[data-theme="light"] .dialog-detail-page .dialog-new-messages-btn{
  background: rgba(255,255,255,0.94);
  color: var(--text-main);
  border-color: rgba(0,0,0,0.08);
}

.dialog-detail-page .dialog-search-toggle-btn{
  display: none;
}

@media (min-width: 761px){
  .dialog-detail-page .dialog-card{
    height: calc(100dvh - 170px) !important;
  }

  @supports not (height: 100dvh){
    .dialog-detail-page .dialog-card{
      height: calc(100vh - 170px) !important;
    }
  }

  .dialog-detail-page .dialog-input-row{
    position: sticky;
    bottom: 0;
    z-index: 30;
    background: var(--bg-card);
  }
}

@media (max-width: 760px){

  .dialog-detail-page{
    max-width: 100%;
    margin: 0;
    padding: 0 !important;
  }

  .dialog-detail-page .dialog-card{
    width: 100%;
    max-width: none !important;
    height: calc(100dvh - 86px) !important;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  @supports not (height: 100dvh){
    .dialog-detail-page .dialog-card{
      height: calc(100vh - 86px) !important;
    }
  }

  .dialog-detail-page .feed-card-header.dialog-header{
    position: sticky;
    top: 0;
    z-index: 80;
    display: block !important;
    padding: 10px 12px 8px !important;
    margin: 0 !important;
    background: rgba(17,22,38,0.94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-subtle);
  }

  html[data-theme="light"] .dialog-detail-page .feed-card-header.dialog-header{
    background: rgba(255,255,255,0.94);
  }

  .dialog-detail-page .dialog-title-row{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
  }

  .dialog-detail-page .dialog-title-toolbar{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
  }

  .dialog-detail-page .dialog-title{
    min-width: 0;
    font-size: 15px !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dialog-detail-page .dialog-participants-row{
    display: none !important;
  }

  .dialog-detail-page .dialog-subtitle{
    margin: 4px 0 0 44px;
    font-size: 12px;
    line-height: 1.25;
    opacity: .78;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .dialog-detail-page .dialog-title-edit{
    margin-top: 8px;
  }

  .dialog-detail-page .dialog-header-actions{
    display: none !important;
    padding-top: 8px;
  }

  .dialog-detail-page .dialog-header.is-search-open .dialog-header-actions{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }

  .dialog-detail-page .dialog-search-form{
    width: 100%;
  }

  .dialog-detail-page .dialog-search-input{
    width: 100% !important;
    max-width: 100% !important;
    height: 38px;
    border-radius: 16px;
  }

  .dialog-detail-page .dialog-important-actions{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px;
    align-items: center;
  }

  .dialog-detail-page .dialog-toggle-sep{
    display: none !important;
  }

  .dialog-detail-page .dialog-header-btn{
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 13px;
    transform: none;
  }

  .dialog-detail-page .dialog-back-btn,
  .dialog-detail-page .dialog-search-toggle-btn,
  .dialog-detail-page .dialog-title-edit-btn,
  .dialog-detail-page .dialog-menu-btn--top{
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .dialog-detail-page .dialog-search-toggle-btn{
    display: inline-flex;
    border: 1px solid var(--border-soft);
    background: var(--bg-elevated);
    color: var(--text-main);
  }

  .dialog-detail-page .dialog-search-toggle-btn:hover,
  .dialog-detail-page .dialog-search-toggle-btn:focus-visible,
  .dialog-detail-page .dialog-title-edit-btn:hover,
  .dialog-detail-page .dialog-menu-btn--top:hover{
    border-color: var(--accent-border);
    background: var(--accent-soft);
  }

  .dialog-detail-page .dialog-scroll{
    padding: 8px 10px 10px !important;
    scroll-padding-top: 88px;
  }

  .dialog-detail-page .dialog-live-notices{
    position: sticky;
    top: 62px;
    z-index: 72;
    display: grid;
    gap: 8px;
    margin: 0 0 8px;
    padding: 2px 0 6px;
    background: linear-gradient(to bottom, rgba(17,22,38,0.96) 0%, rgba(17,22,38,0) 100%);
  }

  html[data-theme="light"] .dialog-detail-page .dialog-live-notices{
    background: linear-gradient(to bottom, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0) 100%);
  }

  .dialog-detail-page .dialog-live-notice{
    padding: 10px 12px;
    border-radius: 14px;
    backdrop-filter: blur(8px);
  }

  .dialog-detail-page .dialog-live-notice__text{
    font-size: 12px;
    line-height: 1.35;
  }

  .dialog-detail-page .dialog-seed-card,
  .dialog-detail-page .dialog-syscard{
    margin-bottom: 10px;
    border-radius: 16px;
  }

  .dialog-detail-page .dialog-date-divider{
    margin: 10px auto;
    padding: 4px 10px;
    border-radius: 999px;
    width: fit-content;
    background: rgba(255,255,255,0.06);
  }

  html[data-theme="light"] .dialog-detail-page .dialog-date-divider{
    background: rgba(0,0,0,0.05);
  }

  .dialog-detail-page .dialog-message{
    margin: 6px 0;
  }

  .dialog-detail-page .dialog-message-bubble{
    max-width: min(90%, 34rem) !important;
    padding: 10px 12px;
    border-radius: 18px;
  }

  .dialog-detail-page .dialog-message.from-me .dialog-message-bubble{
    border-radius: 18px 18px 8px 18px;
  }

  .dialog-detail-page .dialog-message.from-other .dialog-message-bubble{
    border-radius: 18px 18px 18px 8px;
  }

  .dialog-detail-page .dialog-message-text{
    font-size: 14px;
    line-height: 1.42;
  }

  .dialog-detail-page .dialog-message-meta{
    margin-top: 6px;
    font-size: 11px;
  }

  .dialog-detail-page .dialog-new-messages-btn{
    position: fixed;
    right: 12px;
    bottom: calc(74px + env(safe-area-inset-bottom));
    z-index: 85;
    padding: 11px 14px;
    border-radius: 999px;
  }

  .dialog-detail-page .dialog-input-row{
    position: sticky;
    bottom: 0;
    z-index: 75;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)) !important;
    margin: 0;
    background: rgba(17,22,38,0.94);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border-subtle);
  }

  html[data-theme="light"] .dialog-detail-page .dialog-input-row{
    background: rgba(255,255,255,0.94);
  }

  .dialog-detail-page .dialog-input-form{
    display: flex;
    align-items: flex-end;
    gap: 8px;
    width: 100%;
  }

  .dialog-detail-page .dialog-menu-wrapper{
    order: -1;
    flex: 0 0 auto;
  }

  .dialog-detail-page .dialog-menu-btn:not(.dialog-menu-btn--top){
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 999px;
  }

  .dialog-detail-page .dialog-textarea{
    min-height: 42px;
    max-height: min(132px, 30dvh);
    padding: 11px 14px;
    border-radius: 22px;
    resize: none;
  }

  .dialog-detail-page .dialog-send-btn{
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0;
    border-radius: 999px;
    font-size: 18px;
  }

  .dialog-detail-page .dialog-menu{
    max-height: min(70vh, 520px);
  }

  .dialog-detail-page .dialog-menu-item{
    padding: 12px;
    border-radius: 14px;
  }

  .dialog-detail-page .dialog-menu__title{
    padding: 8px 10px 6px;
  }
}

@media (max-width: 420px){
  .dialog-detail-page .feed-card-header.dialog-header{
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .dialog-detail-page .dialog-scroll{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .dialog-detail-page .dialog-input-row{
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .dialog-detail-page .dialog-message-bubble{
    max-width: calc(100% - 6px) !important;
  }

  .dialog-detail-page .dialog-textarea{
    font-size: 16px;
  }
}