/* =====================
   7) Pages: Feed (basic)
===================== */

.feed-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.feed-card {
  padding: 14px;
}

.feed-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* =====================
   8) Pages: Dialog list
===================== */

.dialogs-tabs {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 14px;
}

.dialogs-tab {
  color: var(--text-muted);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: transparent;
  text-transform: lowercase;
}

.dialogs-tab.is-active {
  color: var(--text-main);
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.dialogs-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dialog-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  position: relative;
}

.dialog-card.unread {
  border-color: var(--accent-border);
}

.dialog-avatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--accent-soft);
  border: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.dialog-avatar-text {
  font-weight: 700;
  color: var(--text-main);
}

.dialog-content {
  flex: 1;
  min-width: 0;
}

.dialog-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dialog-title {
  font-weight: 700;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dialog-time {
  color: var(--text-muted);
  font-size: 13px;
  flex-shrink: 0;
}

.dialog-subtitle {
  margin-top: 4px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Hide confirm modal (если используется на странице) */
.hide-confirm {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

.hide-confirm-box {
  width: min(420px, calc(100% - 28px));
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  box-shadow: var(--shadow-popover);
  padding: 16px;
}

.hide-confirm-text { color: var(--text-main); margin: 0 0 12px; }
.hide-confirm-actions { display: flex; gap: 10px; justify-content: flex-end; }
.hide-confirm-yes { background: var(--accent); color: var(--text-invert); border: 1px solid transparent; }
.hide-confirm-no  { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--border-soft); }

/* =====================
   Pages: Messages (/messages/) — match FEED (no outer card)
===================== */

/* контейнер как на feed */
.dialogs-page{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1px 18px 0; /* как у feed */
}

/* УБИРАЕМ внешнюю "карточку", которая сжимает список */
.dialogs-page .feed-card{
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* табы пусть остаются, просто чуть воздуха */
.dialogs-page .dialogs-tabs{
  margin: 8px 0 16px;
}

/* список карточек */
.dialogs-page .dialog-list{
  gap: 14px; /* чуть просторнее */
}

/* сами карточки переписок — как у feed: без обводки, мягкая тень */
.dialogs-page .dialog-link{
  background: var(--bg-card);
  border: none;
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(0,0,0,.22);

  padding: 16px 18px;
  transform: none; /* убираем прыжок */
}

.dialogs-page .dialog-link:hover{
  border-color: transparent;
  background: var(--bg-card);
  transform: none;
}

/* =====================
   Dialog list — empty state
===================== */

.dialog-empty-card{
  max-width: 720px; /* можно подогнать */
  margin: 16px auto 0;

  background: var(--bg-card);
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(0,0,0,.22);

  padding: 18px 20px;
}

.dialog-empty-title{
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.dialog-empty-link{
  font-size: 14px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}

.dialog-empty-link:hover{
  text-decoration: underline;
}


/* =====================
   10) Misc
===================== */

hr {
  border: 0;
  border-top: 1px solid var(--border-subtle);
}

/* =====================
   Pages: Notes (unified)
===================== */

.notes-page { max-width: var(--container-max); margin: 0 auto; }

.page-head { margin: 4px 0 14px; }
.page-title { font-size: 22px; font-weight: 700; margin: 0; }

/*
  Унифицированная “страничная” колонка.
  В templates часто используется .page-shell (например /friends/).
*/
.page-shell{
  max-width: var(--container-max);
  margin: 0 auto;
}

.card--tight { padding: 14px; }

.form p { margin: 10px 0; }
.label { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }

.notes-compose { padding: 14px; }
.notes-compose .form-body p { margin: 10px 0; }

.notes-compose-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

.notes-submit { padding: 10px 16px; border-radius: 999px; }

.tabs.pills{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;      /* важно: не переносим на десктопе */
  margin:12px 0 14px;
}

.tabs-spacer{ flex: 1; }

/* На мобилке можно переносить */
@media (max-width: 520px){
  .tabs.pills{ flex-wrap:wrap; }
  .tabs-spacer{ display:none; }
}

.tabs-spacer { flex: 1; }

.pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--chip-text);
  text-decoration: none;
  font-size: 13px;
}

.pill.is-active {
  background: var(--accent);
  color: var(--text-invert);
  border-color: transparent;
}

.details-summary { cursor: pointer; color: var(--accent); }
.details-body { margin-top: 10px; display: grid; gap: 10px; }

.check-row { display: inline-flex; align-items: center; gap: 8px; }

.stack { display: grid; gap: 10px; }
.field .label { margin-bottom: 4px; }

.notes-list { margin-top: 10px; }
.notes-ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; }

.note-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
  margin-bottom: 12px;
  position: relative;
}

.note-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.note-time { font-size: 12px; color: var(--text-muted); }
.note-signature { color: var(--text-muted); }

.note-body {
  color: var(--text-main);
  line-height: 1.45;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Notes markdown spacing fix:
   убираем "пустой верх" от <p> и других блоков внутри текста записки */
.note-body p,
.note-body ul,
.note-body ol,
.note-body blockquote,
.note-body pre,
.note-body h1,
.note-body h2,
.note-body h3,
.note-body h4,
.note-body h5,
.note-body h6{
  margin: 0 0 10px;
}

.note-body :first-child{
  margin-top: 0 !important;
}

/* если используем обертку .note-text (после замены span->div) */
.note-text :first-child{
  margin-top: 0 !important;
}

.note-text-full { margin-top: 8px; }

.note-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.link-btn {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  font: inherit;
}
.link-btn:hover { text-decoration: underline; }

.expand-btn {
  display: inline-flex;
  margin-top: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--accent);
  padding: 0;
}

.note-corner{
  position: absolute;
  inset: 2px auto 2px 2px;
  width: 4px;
  border-radius: 16px 0 0 16px;
  background: var(--border-subtle);
  box-shadow: 0 0 0 1px var(--border-subtle); /* “заливка” щелей */
}
.note-corner.fresh{ box-shadow: 0 0 0 2px var(--note-fresh); }
.note-corner.mid  { box-shadow: 0 0 0 2px var(--note-mid); }
.note-corner.old  { box-shadow: 0 0 0 2px var(--note-old); }


/* Цвета "свежести" — под обе темы */
html[data-theme="light"] {
  --note-fresh: #22c55e;
  --note-mid:   #3b82f6;
  --note-old:   #a855f7;
}
html[data-theme="dark"] {
  --note-fresh: #34d399;
  --note-mid:   #60a5fa;
  --note-old:   #c4b5fd;
}

.note-corner.fresh { background: var(--note-fresh); }
.note-corner.mid   { background: var(--note-mid); }
.note-corner.old   { background: var(--note-old); }

.note-menu-wrapper { position: relative; }
.menu-btn {
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}
.menu-btn:hover { color: var(--text-main); }

.note-menu {
  position: absolute;
  right: 0;
  top: 22px;
  min-width: 170px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: var(--shadow-popover);
  padding: 8px;
  z-index: 30;
}

.menu-item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  color: var(--text-main);
  padding: 10px 10px;
  border-radius: 12px;
  cursor: pointer;
}

.menu-item:hover { background: var(--accent-soft); }
.menu-form { margin: 0; }

.report-box {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--accent-border);
  background: var(--accent-soft);
}

.reply-inline {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}

.reply-text { min-height: 70px; }
.reply-actions { margin-top: 8px; display: flex; justify-content: flex-end; gap: 10px; }

.status-inline {
  display: grid;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  color: var(--text-main);
}

.status-inline--ok   { border-color: rgba(34,197,94,.35); }
.status-inline--warn { border-color: var(--accent-border); }

.status-actions { display: flex; justify-content: flex-end; gap: 10px; }

.btn-sm { padding: 8px 12px; border-radius: 999px; }

/* Черновик */
#id_text.draft-saved {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

/* Mobile */
@media (max-width: 520px) {
  .notes-compose-footer { flex-direction: column; align-items: stretch; }
  .tabs-spacer { display: none; }
  .pill { flex: 0 0 auto; }
}

/* =====================
   Notes: forms & status
===================== */

.form-field {
  display: grid;
  gap: 4px;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 8px;
}

/* Inline report form */
.report-form-inline {
  display: grid;
  gap: 10px;
}

.report-form-inline textarea {
  min-height: 70px;
}

.note-cooldown {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font-size: 14px;
  white-space: nowrap;
}

/* Status screens */
.status-card {
  text-align: center;
  padding: 18px;
}

.status-card--ok {
  border-color: rgba(34,197,94,.35);
}

.status-title {
  margin: 0 0 6px;
  font-size: 20px;
}

.status-text {
  margin: 0;
  color: var(--text-muted);
}

/* Inline status already exists, but усилим консистентность */
.status-inline {
  background: var(--bg-elevated);
}

.status-inline--ok {
  background: var(--accent-soft);
}

/* Mobile */
@media (max-width: 520px) {
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* =====================
   Layout standard (global)
===================== */

.topbar-inner{
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.page-title{
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 18px;
}

@media (max-width: 768px){
  .page-title{
    font-size: 22px;
    margin-bottom: 14px;
  }
}

/* =====================
   Notes page (templates/notes/notes_list.html)
   (moved from inline <style>)
===================== */

.notes-page{
  width: 100%;
}

.notes-container{
  margin-top: 14px;
}

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

  padding: 16px 16px 14px;
  margin-bottom: 16px;

  outline: 1px solid rgba(255,255,255,0.03);
  outline-offset: -1px;
}

.new-note-card form p{
  margin: 8px 0 10px;
}

.new-note-card form label{
  display: block;
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.new-note-extra{
  margin-top: 10px;
}

.field-group{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.field-group select{
  min-width: 220px;
}

.notes-submit{
  margin-left: auto;
}

.ships-tabs{
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 10px 0 12px;
}

.ships-tab{
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.6);
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
}

.ships-tab.active{
  background: var(--accent-soft);
  border-color: rgba(124,77,255,0.35);
  color: var(--accent);
}

.ships-tab-18{
  margin-left: auto;
}

.note-item{
  background: var(--bg-card);          /* белый фон карточек */
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,0.05);
  margin-bottom: 10px;                 /* уменьшили расстояние между записями */
  position: relative;
}

.note-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--text-muted);
  font-size: 12px;
}

.note-body{
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-main);
}

.note-footer{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.note-corner{
  opacity: 0.7;
}

/* На мобилке — компактнее */
@media (max-width: 768px){
  .new-note-card{
    padding: 14px 14px 12px;
  }
  .note-item{
    padding: 12px 14px;
    margin-bottom: 8px;
  }
}

/* чтобы выпадающее меню не обрезалось краями карточки */
.note-card {
  position: relative;
  overflow: visible;
}

/* само меню поверх всего */
.note-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
}
/* ===== compose footer v2 ===== */
.notes-compose-footer--v2{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.notes-compose-footer--v2 .remember-row{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

.notes-compose-footer--v2 .send-row{
  display:flex;
  align-items:flex-end;
  gap:12px;
}

/* ===== Notes: channel select (compact) ===== */

.notes-compose-footer--v2 #id_channel{
  height: 38px;                 /* ↓ ниже стандартного */
  padding: 6px 36px 6px 12px;   /* компактнее по вертикали */
  border-radius: 14px;

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

  font-size: 14px;
  line-height: 1;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  transition:
    background var(--t-fast) var(--easing),
    border var(--t-fast) var(--easing),
    box-shadow var(--t-fast) var(--easing);
}

/* стрелка селекта */
.notes-compose-footer--v2 #id_channel{
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.notes-compose-footer--v2 #id_channel:focus{
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring);
}

/* ===== personal filter inside tabs ===== */
.details--inline{
  position:relative;
}

.details--inline > summary{
  list-style:none;
  cursor:pointer;
}

.details--inline > summary::-webkit-details-marker{
  display:none;
}

.details-body--inline{
  position:absolute;
  right:0;
  top:calc(100% + 10px);
  min-width:320px;
  z-index:60;
}

.notes-compose-footer--v2 .send-row{
  margin-left:auto;
}

.notes-compose-footer--v2 .field-group{
  display:flex;
  flex-direction:column;   /* label сверху */
  align-items:flex-start;
  gap:6px;
}

.notes-compose-footer--v2 #id_channel{
  min-width: 240px;
}

.notes-compose-footer--v2 .remember-row{
  margin-top: -56px;   /* можно -4px или -8px, если захочется */
  margin-left: 12px;
}

/* NOTE: feather_md уже сам расставляет <p>/<br>, поэтому тут НЕ нужно pre-line */
.note-body #preview,
.note-body [id^="preview-"],
.note-body [id^="full-"]{
  white-space: normal;
}

.live-preview{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(120,120,160,.35);
  background: rgba(120,120,160,.08);
  white-space: normal; /* br уже будет */
}

.live-preview:empty{
  display:none;
}

.feather-editor-wrap{
  position: relative;
}

.feather-editor-wrap textarea#id_text{
  color: transparent !important;   /* скрыть сырой текст */
  caret-color: #6f62ff;            /* курсор видим */
  background: transparent;
  position: relative;
  z-index: 2;
}

.feather-editor-overlay{
  position: absolute;
  inset: 0;
  padding: 10px 12px; /* совпадает с textarea */
  pointer-events: none;
  overflow: hidden;
  white-space: normal;
  z-index: 1;
}

/* чтобы overlay совпадал по шрифту */
.feather-editor-wrap textarea#id_text,
.feather-editor-overlay{
  font: inherit;
  line-height: inherit;
}

/* placeholder: когда пусто, показываем подсказку как в textarea */
.feather-editor-overlay.is-empty{
  opacity: .55;
}

.feather-editor-wrap textarea#id_text::placeholder{
  color: transparent !important;
}

/* ===== Feather WYSIWYG editor ===== */

.feather-ce-wrap{
  position: relative;
}

/* прячем настоящий textarea, но оставляем его в форме */
.feather-ce-wrap textarea#id_text{
  position: absolute !important;
  left: -99999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* красивое поле ввода */
.feather-ce{
  min-height: 120px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(120,120,160,.35);
  background: rgba(120,120,160,.08);
  outline: none;

  font: inherit;
  line-height: inherit;

  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* псевдо-placeholder */
.feather-ce:empty::before{
  content: attr(data-placeholder);
  opacity: .55;
}

/* чтобы <br> не схлопывались */
.feather-ce br{ content: ""; }

.feather-toolbar{
  display:flex;
  gap:6px;
  margin: 0 0 8px;
}

.ft-btn{
  width:24px;
  height:22px;
  border-radius: 9px;

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

  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 12px;
  line-height: 1;
  padding: 0;
  transition: background var(--t-fast) var(--easing),
              border var(--t-fast) var(--easing),
              transform var(--t-fast) var(--easing);
}

.ft-btn:hover{
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

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

/* чтобы буквы/знаки были одинаково читаемы */
.ft-btn strong,
.ft-btn em,
.ft-btn u,
.ft-btn s{
  color: inherit;
}

.feather-ce::selection{
  background: rgba(111,98,255,.25);
}

.feather-ce-wrap{
  margin-bottom: 6px;
}

.ft-btn.is-active{
  background: var(--accent-soft);
  border-color: var(--accent-border);
  color: var(--accent);
}

/* =====================
   Pages: Cauldron (unified like /feed)
===================== */

.cauldron-page{
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Заголовок в карточке */
.cauldron-page .feed-card-header h2{
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

/* Ссылочная кнопка "Сменить вопрос" */
.cauldron-page .link-button{
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  font: inherit;
}
.cauldron-page .link-button:hover{ text-decoration: underline; }

/* textarea ввода */
.cauldron-page #feed-text{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-input);
  background: var(--bg-elevated);
  color: var(--text-main);
  font: inherit;
  line-height: 1.35;
}

.cauldron-page #feed-text:focus{
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring);
}

/* Ряд с "Без тега..." + кнопки справа */
.cauldron-page .note-meta-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.cauldron-page .active-tag{
  font-size: 13px;
  color: var(--text-muted);
}

.cauldron-page .active-tag code{
  background: var(--chip-bg);
  color: var(--chip-text);
  border: 1px solid var(--border-soft);
  padding: 2px 6px;
  border-radius: 8px;
}

/* Кнопки: алиасы, чтобы не переписывать HTML */
.cauldron-page .primary-btn{
  background: var(--accent);
  color: var(--text-invert);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
}
.cauldron-page .primary-btn:hover{ background: var(--accent-hover); }

.cauldron-page .secondary-btn{
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 10px 14px;
  cursor: pointer;
}
.cauldron-page .secondary-btn:hover{ border-color: var(--accent-border); }

.cauldron-page .primary-btn,
.cauldron-page .secondary-btn{
  height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cauldron-page .note-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* Подсказки */
.cauldron-page .feed-hint{
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--text-muted);
}
.cauldron-page .feed-hint code{
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  padding: 2px 6px;
  border-radius: 8px;
}

/* Filters <details> */
.cauldron-page .feed-filters > summary{
  cursor: pointer;
  color: var(--accent);
  margin-top: 10px;
}
.cauldron-page .filters-grid{
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.cauldron-page .filters-grid label{
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--text-muted);
}

/* Tabs "Мои метки / ..." */
.cauldron-page .feed-tabs{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.cauldron-page .feed-tab{
  border: 1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--chip-text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  height: 30px;
  align-items:center;
  display:inline-flex;
}
.cauldron-page .feed-tab.active{
  background: var(--accent);
  color: var(--text-invert);
  border-color: transparent;
}

/* Теги */
.cauldron-page .tags-panel{ display:none; }
.cauldron-page .tags-panel.active{ display:block; }

.cauldron-page .tags-panel-hint{
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 8px;
}

.cauldron-page .tags-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.cauldron-page .tag-pill{
  border: 1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--chip-text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
.cauldron-page .tag-pill:hover{
  border-color: var(--accent-border);
  background: var(--accent-soft);
}
.cauldron-page .tag-pill-empty{
  opacity: .7;
  cursor: default;
}

/* caught-note box (пойманная записка) */
.cauldron-page .caught-note-box{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
}
.cauldron-page .caught-note-tag{
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cauldron-page .caught-note-text{
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
}

.cauldron-page .caught-note-reply{
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

/* Управление метками */
.cauldron-page .settings-list{
  list-style:none;
  padding:0;
  margin:0 0 10px;
}
.cauldron-page .settings-link{
  background:none;
  border:0;
  padding:0;
  cursor:pointer;
  color: var(--accent);
  font: inherit;
}
.cauldron-page .settings-link:hover{ text-decoration: underline; }
.cauldron-page .settings-note{
  display:block;
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.cauldron-page .tags-pulse{
  border-top: 1px solid var(--border-subtle);
  margin-top: 10px;
  padding-top: 10px;
}
.cauldron-page .pulse-title{
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 8px;
}

/* Inbox list */
.cauldron-page .inbox-list{
  display:flex;
  flex-direction:column;
  gap: 12px;
  margin-top: 10px;
}
.cauldron-page .inbox-item{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  padding: 12px 14px;
}
.cauldron-page .inbox-header{
  display:flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.cauldron-page .inbox-tag{
  font-weight: 600;
  color: var(--text-main);
}
.cauldron-page .inbox-text{
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  margin-bottom: 10px;
}
.cauldron-page .inbox-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

/* Cauldron: selects in filters (unified like feed) */
.cauldron-page .filters-grid select{
  height: 38px;
  padding: 6px 36px 6px 12px;
  border-radius: 14px;

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

  font: inherit;
  line-height: 1;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.cauldron-page .filters-grid select:focus{
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring);
}

/* =====================
   Pages: Messages (/messages/)
===================== */

.dialogs-page{
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Tabs — как pills из feed */
.dialogs-page .dialogs-tabs{
  display:flex;
  justify-content:center;
  gap:8px;
  margin: 8px 0 14px;
}

.dialogs-page .dialogs-tab{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--chip-text);
  text-decoration:none;
  font-size:13px;
}

.dialogs-page .dialogs-tab.is-active{
  background: var(--accent);
  color: var(--text-invert);
  border-color: transparent;
}

/* =====================
   Pages: Messages (/messages/) — cards like /feed
===================== */

.dialogs-page{
  max-width: var(--container-max);
  margin: 0 auto;
}

/* tabs (если уже есть — этот блок просто уточнит) */
.dialogs-page .dialogs-tabs{
  display:flex;
  justify-content:center;
  gap:8px;
  margin: 8px 0 14px;
}
.dialogs-page .dialogs-tab{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--chip-text);
  text-decoration:none;
  font-size:13px;
}
.dialogs-page .dialogs-tab.is-active{
  background: var(--accent);
  color: var(--text-invert);
  border-color: transparent;
}

/* list reset */
.dialogs-page .dialog-list{
  list-style:none;
  padding:0;
  margin: 0;
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.dialogs-page .dialog-item{
  margin:0;
}

/* card */
.dialogs-page .dialog-link{
  display:flex;
  gap: 12px;
  align-items:flex-start;

  padding: 14px 14px;
  border-radius: var(--radius-lg);

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

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

  transition:
    border var(--t-fast) var(--easing),
    background var(--t-fast) var(--easing),
    transform var(--t-fast) var(--easing);
  position: relative;
}

.dialogs-page .dialog-link:hover{
  border-color: var(--accent-border);
  background: var(--bg-elevated);
  transform: translateY(-1px);
}

/* avatar */
.dialogs-page .dialog-avatar{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;

  background: var(--chip-bg);
  border: 1px solid var(--border-soft);
  color: var(--chip-text);

  flex: 0 0 44px;
}
.dialogs-page .dialog-avatar-text{
  font-size: 12px;
  font-weight: 700;
}

/* main */
.dialogs-page .dialog-main{
  flex: 1;
  min-width: 0; /* чтобы preview нормально обрезался */
}

/* first line */
.dialogs-page .dialog-header-line{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 10px;
  margin-bottom: 6px;
}

.dialogs-page .dialog-title{
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
}

.dialogs-page .dialog-star{
  margin-left: 6px;
  color: var(--accent);
}

/* right column (time + X) */
.dialogs-page .dialog-right{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  flex: 0 0 auto;
}

.dialogs-page .dialog-meta-col{
  display:flex;
  align-items:center;
  gap: 8px;
}

.dialogs-page .dialog-time{
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.dialogs-page .dialog-main{ min-width: 0; }
.dialogs-page .dialog-title,
.dialogs-page .dialog-preview,
.dialogs-page .dialog-lastmsg{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* dialogs: не уезжаем вправо, но сохраняем центрирование контейнера */
.dialogs-page { overflow-x: hidden; } /* только страница, не container */

/* страницу по X можно прятать, но карточки не режем */
.dialogs-page { overflow-x: hidden; }
.dialogs-page .dialogs-card,
.dialogs-page .dialogs-list { overflow: visible; }


/* flex-дети обязаны уметь сжиматься */
.dialogs-page .dialog-link,
.dialogs-page .dialog-main,
.dialogs-page .dialog-header-line,
.dialogs-page .dialog-second-line,
.dialogs-page .dialog-third-line {
  min-width: 0;
}

/* длинные куски текста без пробелов — ломаем внутри, а не расширяем блок */
.dialogs-page .dialog-title,
.dialogs-page .dialog-preview,
.dialogs-page .dialog-lastmsg {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* превью и lastmsg — одной строкой с троеточием */
.dialogs-page .dialog-preview,
.dialogs-page .dialog-lastmsg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* заголовок тоже в одну строку */
.dialogs-page .dialog-title{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* ключевое для flex: иначе текст не сжимается */
.dialogs-page .dialog-link,
.dialogs-page .dialog-main,
.dialogs-page .dialog-header-line,
.dialogs-page .dialog-second-line,
.dialogs-page .dialog-third-line {
  min-width: 0;
}

/* длинные куски без пробелов: переносим/ломаем */
.dialogs-page .dialog-title,
.dialogs-page .dialog-preview,
.dialogs-page .dialog-lastmsg {
  overflow-wrap: anywhere;   /* лучше всего для "33333..." */
  word-break: break-word;
}

/* и при этом пусть остаётся в одну строку с троеточием, если возможно */
.dialogs-page .dialog-preview,
.dialogs-page .dialog-lastmsg {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dialogs-page .dialog-title{
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 720px){
  .container{ padding-left: 14px; padding-right: 14px; }
}

.dialogs-page .dialog-header-line{
  display: flex;
  align-items: center;
  gap: 12px;
}

.dialogs-page .dialog-title{
  flex: 1 1 auto;
  min-width: 0;
}

.dialogs-page .dialog-right{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.dialogs-page .dialog-preview,
.dialogs-page .dialog-lastmsg{
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* hide X button */
.dialogs-page .dialog-hide-x{
  width: 26px;
  height: 26px;
  border-radius: 10px;

  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-muted);

  cursor: pointer;
  line-height: 1;
  padding: 0;

  transition:
    background var(--t-fast) var(--easing),
    border var(--t-fast) var(--easing),
    color var(--t-fast) var(--easing);
}

.dialogs-page .dialog-hide-x:hover{
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--text-main);
}

/* second line: type + preview */
.dialogs-page .dialog-second-line{
  font-size: 13px;
  color: var(--text-muted);
  display:flex;
  gap: 6px;
  min-width: 0;
}

.dialogs-page .dialog-type{
  white-space: nowrap;
  color: var(--text-muted);
}

.dialogs-page .dialog-preview{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* third line: last message preview */
.dialogs-page .dialog-third-line{
  margin-top: 4px;
  font-size: 13px;
  min-width: 0;
  color: var(--text-main);
  opacity: .85;
}

.dialogs-page .dialog-lastmsg{
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


/* =====================
   Pages: Dialog detail (/messages/<id>/)
===================== */

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

/* FIX: never allow dialog card to grow wider than container */
.dialog-detail-page .dialog-card{
  width: 100%;
  box-sizing: border-box;
  overflow: hidden; /* прячет случайный горизонтальный overflow, чтобы не "тащило" весь блок */
}


/* card = как /feed */
.dialog-detail-page .dialog-card{
  padding: 16px 18px 14px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);

  display:flex;
  flex-direction:column;

  /* чтобы список сообщений был скроллящимся внутри */
  max-height: calc(100vh - 170px);
}

/* ---------- header ---------- */

.dialog-detail-page .dialog-header{
  padding: 0 0 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--border-subtle);
}

.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;
  color: var(--text-main);
  line-height: 1.2;
}

/* кнопка редактирования названия */
.dialog-detail-page .dialog-edit-btn{
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--bg-elevated);
  color: var(--text-muted);
  cursor: pointer;
}
.dialog-detail-page .dialog-edit-btn:hover{
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--text-main);
}

/* форма поиска */
.dialog-detail-page .dialog-search-form{
  margin: 0 0 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;
  line-height: 1;
}
.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-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);
  margin: 0 6px;
}

/* ---------- messages list ---------- */

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


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

/* message wrapper */
.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;
}

/* bubble */
.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.unread .dialog-message-bubble{
  box-shadow: 0 0 0 2px var(--accent-soft);
}

/* текст + переносы */
.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;
  gap: 10px;
  justify-content:flex-end;
}

/* ---------- input row ---------- */

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

/* textarea */
.dialog-detail-page .dialog-textarea{
  width: 100%;
  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);
}

/* send */
.dialog-detail-page .dialog-send-btn{
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;

  background: var(--accent);
  color: var(--text-invert);
  border: 1px solid transparent;

  cursor:pointer;
  white-space: nowrap;
}
.dialog-detail-page .dialog-send-btn:hover{
  background: var(--accent-hover);
}

/* меню ⋮ */
.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;
  z-index: 999;
}
.dialog-detail-page .dialog-menu-toggle:hover{
  border-color: var(--accent-border);
  background: var(--accent-soft);
}

/* выпадающее меню */
.dialog-detail-page .dialog-menu{
  margin-top: 8px;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
  box-shadow: var(--shadow-card);
  min-width: 220px;
}

.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;
}
/* =====================
   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);
}


/* =====================
   Pages: Diary (match FEED)
===================== */

/* контейнер как на feed: ширина + центр + внутренние поля */
.diary-page{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1px 18px 0; /* верхний отступ от навбара как у feed */
}

/* карточка как у feed: без обводки, мягкая тень */
.diary-page .diary-card{
  background: var(--bg-card);
  border: none;                 /* было: 1px solid ... */
  border-radius: 20px;          /* ближе к feed */
  box-shadow: 0 10px 34px rgba(0,0,0,.22); /* мягче/глубже как на feed */
  padding: 18px 20px;
  margin-bottom: 14px;
}

/* заголовки чуть “чище” */
.diary-page .diary-title{
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--text-main);
}

.diary-page .diary-subtitle{
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

/* поле ввода оставляем с обводкой (как на feed в textarea),
   но чуть мягче по радиусу */
.diary-page #diary-text{
  width: 100%;
  min-height: 140px;
  box-sizing: border-box;

  border-radius: 16px; /* было 14 */
  border: 1px solid var(--border-input);
  background: var(--bg-elevated);
  color: var(--text-main);

  padding: 10px 12px;
  font: inherit;
  line-height: 1.35;
  resize: vertical;
}
.diary-page #diary-text:focus{
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring);
}

.diary-page .diary-form-footer{
  margin-top: 10px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  flex-wrap: wrap;
}

.diary-page .diary-counter{
  font-size: 12px;
  color: var(--text-muted);
}

/* кнопка можно оставить pill — это ок и совпадает с feed */
.diary-page .diary-submit{
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;

  background: var(--accent);
  color: var(--text-invert);
  cursor:pointer;
}
.diary-page .diary-submit:hover{
  background: var(--accent-hover);
}

.diary-page .diary-block-title{
  font-size: 16px;
  margin: 0 0 8px;
  color: var(--text-main);
}

.diary-page .diary-empty{
  font-size: 14px;
  color: var(--text-muted);
}
.diary-page .diary-hint{
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
}

/* =====================
   Pages: Friends (match FEED)
===================== */

/* контейнер как на feed: ширина + центр + внутренние поля */
.friends-page{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1px 18px 0; /* верхний “зазор” как у feed */
}

/* панель (на будущее можно расширять под 2 колонки, пока одна) */
.friends-page .friends-panels{
  display: block;
}

/* карточка друзей — как у feed/diary: без border, мягкая тень */
.friends-page .friends-list-card{
  background: var(--bg-card);
  border: none !important;              /* перебиваем .card/.card-pad */
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(0,0,0,.22);
  padding: 18px 20px;
  margin-bottom: 14px;
}

/* если у .card / .card-pad есть свои границы — добиваем точечно */
.friends-page .card{
  border: none !important;
  box-shadow: none; /* тень даём именно .friends-list-card */
}

/* пустое состояние */
.friends-page .muted{
  color: var(--text-muted);
  font-size: 14px;
  opacity: .9;
}

/* список друзей (когда появится) */
.friends-page .friends-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

/* строка друга */
.friends-page .friend-row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;

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

/* лёгкий ховер (аккуратно, как в feed) */
.friends-page .friend-row:hover{
  background: rgba(255,255,255,.03);
}

/* левый блок (ава + текст) */
.friends-page .friend-main{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}

.friends-page .friend-ava{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 42px;
  background: rgba(255,255,255,.04);
}

.friends-page .friend-ava img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}

.friends-page .friend-text{
  min-width: 0;
}

.friends-page .friend-name{
  font-weight: 600;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friends-page .friend-meta{
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

/* правые кнопки-иконки */
.friends-page .friend-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.friends-page .icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: var(--text-main);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
}

.friends-page .icon-btn:hover{
  background: rgba(255,255,255,.06);
}

.friends-page .icon-btn.danger{
  border-color: rgba(255,80,80,.25);
  background: rgba(255,80,80,.08);
}


/* =====================
   Pages: Settings
===================== */
.settings-page{
  max-width: 900px;
  margin: 0 auto;
  display:flex;
  flex-direction: column;
  gap: 16px;
}

.settings-page .settings-card{
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 16px 18px;
}

.settings-page .settings-title{
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--text-main);
}
.settings-page .settings-subtitle{
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 12px;
}

.settings-page .settings-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.1fr);
  gap: 12px;
}
@media (max-width: 900px){
  .settings-page .settings-grid{ grid-template-columns: 1fr; }
}

.settings-page .settings-label{
  display:block;
  font-size: 14px;
  margin: 10px 0 6px;
  color: var(--text-main);
}

.settings-page input[type="text"],
.settings-page input[type="email"],
.settings-page input[type="password"]{
  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;
  box-sizing: border-box;
}
.settings-page input:focus{
  outline:none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring);
}

.settings-page .settings-submit-btn{
  margin-top: 10px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--text-invert);
  cursor:pointer;
}
.settings-page .settings-submit-btn:hover{
  background: var(--accent-hover);
}

.settings-page .settings-hint{
  font-size: 12px;
  color: var(--text-muted);
  margin: 6px 0 0;
}

.settings-page .settings-block-title{
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--text-main);
}
.settings-page .settings-block-subtitle{
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.settings-page .settings-toggle{
  display:flex;
  align-items:center;
  gap: 8px;
  margin: 6px 0 10px;
}

/* =====================
   Pages: Profile (match FEED)
===================== */

/* контейнер как на feed */
.profile-page{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1px 18px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* карточки как у feed: без обводки, мягкая тень */
.profile-page .profile-card{
  background: var(--bg-card);
  border: none;
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(0,0,0,.22);
  padding: 18px 20px;
}

/* заголовок/подзаголовок */
.profile-page .profile-title{
  font-size: 22px;
  margin: 0 0 6px;
  color: var(--text-main);
}
.profile-page .profile-subtitle{
  font-size: 14px;
  color: var(--text-muted);
  margin: 0;
}

/* сетка блоков (если где-то используется) */
.profile-page .profile-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1050px){
  .profile-page .profile-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 800px){
  .profile-page .profile-grid{ grid-template-columns: 1fr; }
}

.profile-page .profile-block-title{
  font-size: 16px;
  margin: 0 0 6px;
  color: var(--text-main);
}
.profile-page .profile-block-subtitle{
  font-size: 13px;
  color: var(--text-muted);
  margin: 0 0 10px;
}

.profile-page .profile-label{
  display:block;
  font-size: 14px;
  margin: 10px 0 6px;
  color: var(--text-main);
}

/* поля/select: оставить обводку как на feed у инпутов */
.profile-page select{
  width: 100%;
  height: 38px;
  padding: 6px 36px 6px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-input);
  background: var(--bg-elevated);
  color: var(--text-main);
  font: inherit;
  appearance: none;
}
.profile-page select:focus{
  outline:none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring);
}

.profile-page .profile-toggle{
  display:flex;
  align-items:center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-main);
}
.profile-page .profile-hint{
  font-size: 12px;
  color: var(--text-muted);
  margin: 4px 0 0;
}

/* кнопки: pill оставляем */
.profile-page .profile-submit-btn{
  margin-top: 10px;
  height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--accent);
  color: var(--text-invert);
  cursor:pointer;
}
.profile-page .profile-submit-btn:hover{
  background: var(--accent-hover);
}

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

/* табы стены */
.profile-page .profile-wall-tabs{
  display:flex;
  gap: 8px;
  margin-bottom: 10px;
}
.profile-page .profile-wall-tab{
  height: 30px;
  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;
}
.profile-page .profile-wall-tab.active{
  background: var(--accent);
  color: var(--text-invert);
  border-color: transparent;
}

/* textarea на стене */
.profile-page .profile-notes-form textarea{
  width: 100%;
  min-height: 140px;
  padding: 10px 12px;
  border-radius: 16px; /* чуть мягче */
  border: 1px solid var(--border-input);
  background: var(--bg-elevated);
  color: var(--text-main);
  font: inherit;
  line-height: 1.35;
  resize: vertical;
  box-sizing: border-box;
}
.profile-page .profile-notes-form textarea:focus{
  outline:none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring);
}

/* =====================
   Friends page
===================== */

.friends-page { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }

.page-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin: 12px 0 14px;
}

.page-title{
  margin:0;
  font-size: 28px;
  letter-spacing: -0.02em;
}

.friends-top-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.chip-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-main);
  cursor:pointer;
  transition: transform var(--t-fast) var(--easing), background var(--t-fast) var(--easing);
}
.chip-btn:hover{ transform: translateY(-1px); }
.chip-btn[aria-expanded="true"]{
  background: var(--chip-bg);
  border-color: rgba(139,108,255,0.45);
}
.chip-count{
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size: 12px;
  background: rgba(139,108,255,0.16);
  color: var(--text-main);
}

.friends-panels{ margin-bottom: 12px; }

.card{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card-pad{ padding: 14px; }
.card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 12px;
}
.card-title{ font-weight: 700; }
.muted{ color: var(--text-muted); font-size: 13px; }

.friends-list-card{ margin-top: 12px; }

.friends-list{ display:flex; flex-direction:column; gap:10px; }

.friend-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
}

.friend-main{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;
}

.friend-ava, .mini-ava{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(139,108,255,0.35);
  background: rgba(139,108,255,0.10);
  flex: 0 0 auto;
}

.friend-text{ min-width:0; }
.friend-name{
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.friend-meta{
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.friend-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 0 0 auto;
}

.icon-btn{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-main);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  text-decoration:none;
}
.icon-btn:hover{ background: rgba(139,108,255,0.10); }
.icon-btn.danger{ color: #ff6b6b; border-color: rgba(255,107,107,0.35); }
.icon-btn.danger:hover{ background: rgba(255,107,107,0.10); }

.requests-list{ display:flex; flex-direction:column; gap:10px; }
.request-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
}
.request-main{ display:flex; align-items:center; gap:10px; min-width:0; }
.request-text{ min-width:0; }
.request-name{ font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.request-meta{ font-size:12px; color: var(--text-muted); }

.btn{ border: 1px solid var(--border); border-radius: 999px; padding: 8px 12px; background: transparent; color: var(--text-main); cursor:pointer; }
.btn-sm{ padding: 6px 10px; font-size: 13px; }
.btn-primary{ background: rgba(139,108,255,0.18); border-color: rgba(139,108,255,0.45); }
.btn-ghost:hover{ background: rgba(139,108,255,0.10); }

/* === Friends: выравниваем под общую колонку === */
.friends-page{
  max-width: var(--container-max);
  margin: 0 auto;
}

/* === Friends: чуть более круглые карточки/строки === */
.friends-page .card{
  border-radius: 22px;
}

.friends-page .friend-row,
.friends-page .request-row{
  border-radius: 18px;
}

.friends-page .icon-btn{
  border-radius: 12px;
}

/* ===== Topbar: user avatar + stacked name/logout ===== */

.user-panel{
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.user-identity{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.user-ava{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid var(--border-soft);
  background: var(--chip-bg);
  display: block;
}

.user-ava--placeholder{
  background: var(--accent-soft);
  border-color: var(--accent-border);
}

.user-meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}

.user-name{
  font-weight: 700;
  color: var(--text-main);
  text-decoration: none;
}

.user-name:hover{
  text-decoration: underline;
}

.user-logout{
  color: var(--text-muted);
  text-decoration: none;
  padding: 0;              /* чтобы не выглядело как отдельная “кнопка” */
  border-radius: 10px;
}

.user-logout:hover{
  color: var(--text-main);
  text-decoration: underline;
}

/* ===== Profile: fix huge avatar ===== */

.profile-main{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.profile-main-left{
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.profile-avatar-circle{
  width: 96px;
  height: 96px;
  border-radius: 999px;
  overflow: hidden;
  flex: 0 0 96px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.06);
}

/* если это <img>, чтобы оно не ломало блок */
img.profile-avatar-circle{
  display: block;
  object-fit: cover;
}

/* на мобилках чуть меньше */
@media (max-width: 640px){
  .profile-avatar-circle{
    width: 72px !important;
    height: 72px !important;
    flex-basis: 72px;
  }
  .profile-main{
    flex-direction: column;
    align-items: flex-start;
  }
  .profile-main-meta{
    width: 100%;
  }
}

.profile-avatar-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== Profile: new structure ===== */

.profile-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.profile-wall-panels{
  margin-top: 12px;
}

.wall-draft-box{
  display:flex;
  flex-direction: column;
  gap: 10px;
}

.wall-draft-textarea{
  width: 100%;
  min-height: 160px;
  resize: vertical;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.04);
  color: var(--text-main);
  outline: none;
}

.wall-draft-textarea:focus{
  border-color: var(--accent-border);
}

.wall-draft-footer{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wall-draft-actions{
  display:flex;
  align-items:center;
  gap: 8px;
}

.profile-diary-scroll{
  margin-top: 10px;
  max-height: 520px;
  overflow: auto;
  padding-right: 6px;
}

.profile-diary-scroll::-webkit-scrollbar{
  width: 10px;
}

.profile-diary-scroll::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
}

/* diary text inside profile */
.diary-text{
  margin-top: 8px;
  white-space: normal;
}

.wall-draft-dest{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

.dest-radio, .dest-check{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--chip-text);
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

.dest-radio:hover, .dest-check:hover{
  border-color: var(--accent-border);
  background: var(--accent-soft);
  color: var(--text-main);
}

.dest-radio input, .dest-check input{
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: var(--accent);
}

#entry-visibility-wrap{
  margin-left: 4px;
}

/* Tabs panels */
.profile-wall-panel { display: none; }
.profile-wall-panel.active { display: block; }

.feather-ce,
.diary-text {
  background: rgba(255,255,255,0.03);
  border-radius: 14px;
  padding: 14px 16px;
  line-height: 1.5;
  font-size: 14px;
}

.diary-card {
  margin-bottom: 14px;
}

.diary-text {
  margin-top: 6px;
}

/* ===== Diary cards (profile) ===== */

.diary-card{
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 12px;
}

.diary-meta{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 13px;
}

.diary-text{
  margin-top: 10px;
  line-height: 1.55;
  font-size: 15px;
  white-space: normal;
}

.diary-actions{
  margin-top: 12px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.diary-actions form{
  margin: 0;
}

/* ===== Feather toolbar buttons (match feed style) ===== */
.feather-toolbar{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 0;
}

.feather-toolbar button{
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 1px solid var(--border-soft);
  background: transparent;
  color: var(--text-main);
  cursor: pointer;
}

.feather-toolbar button:hover{
  border-color: var(--accent-border);
  background: rgba(255,255,255,0.04);
}

.feather-toolbar button.active{
  border-color: var(--accent-border);
  background: rgba(255,255,255,0.06);
}

/* =========================
   SETTINGS PAGE (final UI)
   ========================= */

.settings-page{
  max-width: 980px;
  margin: 0 auto;
}

.settings-card{
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.03);
  border-radius: 18px;
  padding: 18px;
}

.settings-main-card{
  padding: 18px;
}

.settings-title{
  font-size: 22px;
  margin: 0 0 6px 0;
}

.settings-subtitle{
  margin: 0 0 16px 0;
  color: var(--text-muted);
}

.settings-main{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.settings-avatar-row{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 16px;
  align-items: start;
}

.settings-avatar-preview{
  width: 100%;
}

.settings-avatar-circle{
  width: 220px;
  height: 220px;
  border-radius: 16px; /* вместо огромного круга */
  object-fit: cover;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.04);
  display: block;
}

.settings-avatar-meta{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-avatar-title{
  font-weight: 700;
}

.settings-avatar-subtitle{
  color: var(--text-muted);
  font-size: 13px;
}


.settings-avatar-remove-form{
  display: inline-block;
  margin: 0;
}

.settings-hint{
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 6px;
}

.settings-label{
  display: block;
  margin: 10px 0 6px 0;
  color: var(--text-muted);
  font-size: 13px;
}

.settings-name-block input,
.settings-email-form input,
.settings-password-form input{
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.03);
  padding: 10px 12px;
  color: var(--text-main);
}

.settings-submit-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: rgba(255,255,255,0.06);
  color: var(--text-main);
  cursor: pointer;
}

.settings-grid{
  margin-top: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* чтобы карточки в сетке были одинаковой высоты и не “плясали” */
.settings-grid .settings-card{
  height: 100%;
}

.settings-block-title{
  margin: 0 0 6px 0;
  font-size: 16px;
}

.settings-badge-new{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.2;
  background: var(--accent-soft);
  border: 1px solid var(--accent-border);
  color: var(--text-main);
  text-transform: lowercase;
  vertical-align: middle;
}

.settings-block-subtitle{
  margin: 0 0 10px 0;
  color: var(--text-muted);
  font-size: 13px;
}

.settings-toggle,
.checkbox-line{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.settings-toggle input,
.checkbox-line input{
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--accent);
}

/* адаптив: на узких экранах сетка 1 колонка */
@media (max-width: 900px){
  .settings-avatar-row{
    grid-template-columns: 1fr;
  }
  .settings-avatar-circle{
    width: 100%;
    height: 260px;
  }
  .settings-grid{
    grid-template-columns: 1fr;
  }
}
.settings-avatar-fallback{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 56px;
  font-weight: 800;
  color: var(--text-muted);
}

/* Compact header (avatar + nickname) */
.settings-page .settings-main{
  display:flex;
  flex-direction: column;
  gap: 12px;
}

.settings-page .settings-avatar-row{
  display:grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.settings-page .settings-avatar-circle{
  width: 96px;
  height: 96px;
  border-radius: 18px;
  border: 1px solid var(--border-input);
  background: var(--bg-elevated);
  object-fit: cover;
  display:block;
}

.settings-page .settings-avatar-meta{
  display:flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.settings-page .settings-avatar-title{
  font-size: 14px;
  color: var(--text-main);
  margin: 0 0 2px;
}

.settings-page .settings-avatar-subtitle{
  font-size: 12px;
  color: var(--text-muted);
  margin: 0;
}


.settings-page .settings-name-block input[type="text"]{
  max-width: 520px;
}

/* Make "Удалить" look more dangerous but still in style */
.settings-page .settings-danger-btn{
  background: var(--danger-soft);
  color: var(--danger);
  border-color: var(--danger-border);
}
.settings-page .settings-danger-btn:hover{
  filter: brightness(1.05);
}

/* Privacy form spacing */
.settings-page .settings-privacy-form .checkbox-line{
  margin-top: 8px;
}

/* ===== Settings top compact layout ===== */
.settings-top-grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: start;
}

.settings-top-avatar{
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: start;
}

.settings-avatar-circle{
  width: 96px;
  height: 96px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,0.03);
}

.settings-avatar-meta{
  display:flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.settings-avatar-title{
  font-weight: 700;
  font-size: 14px;
}

.settings-avatar-subtitle{
  font-size: 12px;
  color: var(--text-muted);
}

.settings-avatar-actions{
  margin-top: 6px;
  display:flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.settings-inline{
  display:flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.settings-inline input[type="text"]{
  flex: 1 1 260px;
  max-width: 420px;
}

.settings-danger-btn{
  background: rgba(255, 72, 72, 0.10);
  border-color: rgba(255, 72, 72, 0.35);
  color: rgba(255, 120, 120, 1);
}

.settings-danger-btn:hover{
  background: rgba(255, 72, 72, 0.14);
}

/* hint tighter */
.settings-hint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

/* responsive */
@media (max-width: 900px){
  .settings-top-grid{
    grid-template-columns: 1fr;
  }
}

.settings-avatar-actions .settings-danger-btn{
  text-decoration: none !important;
  font-weight: 600;
}

/* dialogs page title alignment like other pages */
.dialogs-page-title{
  max-width: var(--container-max);
  margin: 4px auto 14px;
  padding: 0;
  font-size: 22px;
  font-weight: 700;
}

/* Плейсхолдер для nav-icons, чтобы шапка не "ездила" без меню */
.nav-icons--placeholder {
  visibility: hidden;   /* место занимает, но не видно */
  pointer-events: none;
}

/* =====================
   Auth pages (login/signup)
===================== */

.auth-wrap{
  display: flex;
  justify-content: center;
  padding: 40px 16px 56px;
}

.auth-card{
  width: min(520px, 100%);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 22px 22px 18px;
}

.auth-title{
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.auth-subtitle{
  margin: 0 0 16px;
  color: var(--text-muted);
  font-size: 13px;
  line-height: 1.35;
}

.auth-form{
  display: grid;
  gap: 12px;
}

.form-row{
  display: grid;
  gap: 6px;
}

.form-label{
  font-size: 13px;
  color: var(--text-muted);
}

.help-text{
  font-size: 12px;
  color: var(--text-muted);
  opacity: 0.95;
}

.field-errors,
.form-errors{
  font-size: 13px;
  color: var(--danger);
}

.field-errors ul,
.form-errors ul{
  margin: 0;
  padding-left: 18px;
}

.check-row{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-main);
}

.btn-wide{
  width: 100%;
}

.auth-footer{
  margin-top: 10px;
  text-align: center;
}

/* ===== Auth: rules checkbox link must be clickable ===== */
.auth-card .checkbox-line--auth{
  justify-content: center;
}

.auth-card .checkbox-line--auth label{
  cursor: pointer;
}

/* Важно: ссылка должна быть кликабельной даже внутри строки с label */
.auth-card .checkbox-line--auth .rules-link{
  position: relative;
  z-index: 2;
  pointer-events: auto;
  display: inline-block;
}

/* =========================
   AUTH: checkbox rows (final)
========================= */

.auth-card .check-wrap{
  display: block;
  margin-top: 8px;
}

/* сам label становится “пилюлей” по ширине текста и центрируется */
.auth-card label.check-row{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;

  width: fit-content !important;
  max-width: 100%;
  margin: 0 auto !important;

  flex-wrap: nowrap !important;       /* НЕ переносим */
  white-space: nowrap;                /* НЕ переносим текст */
}

/* чекбокс фиксированного размера и НЕ растягивается */
.auth-card label.check-row input[type="checkbox"]{
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 16px !important;

  display: inline-block !important;
  vertical-align: middle !important;

  accent-color: var(--accent);
}

/* текст рядом — строго inline */
.auth-card label.check-row span{
  display: inline !important;
}

/* ===== Signup checkboxes: FINAL FIX ===== */

/* центрируем строку целиком */
.auth-card .check-wrap{
  display: flex !important;
  justify-content: center !important;
  margin-top: 8px;
}

/* лейбл НЕ должен быть на всю ширину */
.auth-card label.check-row{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  width: auto !important;          /* ключевое */
  max-width: 100%;
  padding: 0 !important;
  margin: 0 !important;

  gap: 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* сам чекбокс: убиваем width:100% и любые авто-отступы */
.auth-card label.check-row input[type="checkbox"]{
  width: 16px !important;          /* ключевое */
  height: 16px !important;

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

  flex: 0 0 16px !important;
  display: inline-block !important;
  position: static !important;

  accent-color: var(--accent);
}

/* если где-то было "инпут вправо" через auto-margin */
.auth-card label.check-row input[type="checkbox"]{
  margin-left: 0 !important;
}

/* текст рядом с квадратиком */
.auth-card label.check-row span{
  display: inline !important;
  white-space: nowrap;             /* чтобы не переносилось на новую строку */
}

/* убираем огромную фокус-рамку на всю ширину */
.auth-card label.check-row:focus,
.auth-card label.check-row:focus-within{
  outline: none !important;
  box-shadow: none !important;
}

/* checkbox inside form-row: force inline layout */
.form-row input[type="checkbox"]{
  width: 16px !important;
  height: 16px !important;
  margin-top: 0px;
  margin-left: 0 !important;
}

.form-row{
  position: relative;
}

.form-row:has(input[type="checkbox"]){
  display: flex !important;
  align-items: left center !important;
  justify-content: left center !important;
  gap: 10px !important;
}

.form-row:has(input[type="checkbox"]) .form-label{
  margin: 0 !important;
}

/* ===== Modal: Rules ===== */

.rules-link{
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-window{
  width: min(520px, 90%);
  max-height: 80vh;
  overflow-y: auto;

  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  position: relative;

  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.modal-window h2{
  margin-top: 0;
}

.modal-content{
  font-size: 14px;
  line-height: 1.5;
}

.modal-content .muted{
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 12px;
}

.modal-close{
  position: absolute;
  top: 10px;
  right: 12px;

  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--text-muted);
}

.rules-link{
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

/* Rules link inside signup checkbox */
.auth-card .rules-link{
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-weight: 600;
}

.auth-card .rules-link:hover{
  text-decoration-thickness: 2px;
}

.modal-overlay{ z-index: 9999; }

/* Flash messages */
.flash-wrap{
  position: fixed;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  width: min(520px, calc(100% - 24px));
  display: grid;
  gap: 10px;
}

.flash{
  position: relative;
  padding: 12px 44px 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  color: var(--glass-text);
  font-size: 14px;
  line-height: 1.35;

  box-shadow: 0 18px 45px rgba(0,0,0,0.18);
  transform: translateY(0);
  opacity: 1;
  transition: opacity .18s ease, transform .18s ease;
}

.flash__body{ color: inherit; }

.flash__close{
  position: absolute;
  top: 6px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  opacity: .75;
}
.flash__close:hover{ opacity: 1; }

.flash--out{
  opacity: 0;
  transform: translateY(-6px);
}

.flash--error{
  border-color: rgba(255, 80, 80, 0.35);
}

.flash--success{
  border-color: rgba(80, 255, 160, 0.28);
}

.flash--warning{
  border-color: rgba(255, 200, 80, 0.35);
}

/* В записках с HTML-маркапом не показываем переносы из шаблона */
.note-body { white-space: normal; }

/* --- Signature bank (dropdown + popup) --- */

.sig-input-wrap{ position: relative; }

.sig-dropdown{
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + 6px);
  z-index: 1200;

  max-height: 240px;
  overflow: auto;

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

  backdrop-filter: blur(10px);
}

.sig-dd-item{
  width: 100%;
  text-align: left;
  padding: 10px 10px;
  border: 0;
  background: transparent;
  color: var(--text-main);
  border-radius: 12px;
  cursor: pointer;
}
.sig-dd-item:hover{ background: var(--accent-soft); }

/* Modal shell */
.sig-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.sig-modal[hidden]{ display: none; }

.sig-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
}

/* Panel */
.sig-modal__panel{
  position: relative;
  width: min(560px, calc(100% - 24px));
  margin: 10vh auto;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-popover);
  padding: 16px;
}

/* Close button */
.sig-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;

  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid transparent;

  background: transparent;
  color: var(--text-muted);
  font-size: 18px;
  cursor: pointer;

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

  transition: background var(--t-fast) var(--easing), border var(--t-fast) var(--easing), color var(--t-fast) var(--easing);
}
.sig-modal__close:hover{
  background: var(--accent-soft);
  border-color: var(--border-subtle);
  color: var(--text-main);
}

/* Popup content */
.sig-popup-title{
  font-size: 18px;
  font-weight: 800;
  color: var(--text-main);
  margin: 0;
}

.sig-popup-fandom{
  color: var(--text-muted);
  font-size: 13px;
  margin-top: 2px;
}

.sig-popup-photo{
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 8px;
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  background: var(--bg-elevated);
  overflow: hidden;
}

.sig-popup-photo img{
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(56vh, 420px);

  object-fit: contain;
  object-position: center;
  border-radius: 10px;
}

.sig-popup-bio{
  margin-top: 10px;
  color: var(--text-main);
  opacity: 0.95;
  line-height: 1.45;
}

.sig-popup-tags{
  margin-top: 12px;
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
}

.sig-popup-tags .tag{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-subtle);
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 12px;
}

/* Light theme tweak: чуть мягче подложка */
html[data-theme="light"] .sig-modal__backdrop{
  background: rgba(10,12,20,0.35);
}

@media (max-width: 520px){
  .sig-modal__panel{ margin: 6vh auto; padding: 14px; }
  .sig-popup-photo img{ max-height: 280px; }
}

/* --- Signature bank layout (10 slots) --- */
.sig-bank{
  width: 100%;
  padding: 18px 14px;
}

.sig-bank__inner{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1px 18px 0; /* как feed/diary */
}

/* контейнер слотов (уже НЕ card) */
.sig-slots{
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;          /* расстояние между слотами (можешь 26–40px) */
  margin-top: 14px;
}

/* каждая карточка-слот */
.sig-card{
  background: var(--bg-card);
  border: none;
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(0,0,0,.22);
  padding: 18px 20px;
}

/* “шапка слота” (если есть отдельный заголовок внутри) */
.sig-card h3,
.sig-card .sig-title{
  margin: 0 0 10px;
}

/* Поля в слоте — в 2 колонки только на широких экранах */
.sig-card .sig-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* На узких — одна колонка */
@media (max-width: 820px){
  .sig-card .sig-grid-2{
    grid-template-columns: 1fr;
  }
}

/* Нормальная ширина инпутов внутри слота */
.sig-card input[type="text"],
.sig-card input[type="url"],
.sig-card textarea,
.sig-card select{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}


/* --- Footer (quiet) --- */
.site-footer{
  margin-top: 0;
  padding: 14px 14px 18px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: transparent;
}

.site-footer__inner{
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.site-footer__row{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  justify-content: center;
  align-items: center;
  padding: 4px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  backdrop-filter: blur(8px);
}

/* Вместо “капсул” — спокойные ссылки */
.footer-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 13px;
  line-height: 1;
  transition: color var(--t-fast) var(--easing), background var(--t-fast) var(--easing);
}

.footer-link:hover{
  color: var(--text-main);
  background: rgba(255,255,255,.04);
}

.footer-link--small{
  font-size: 12px;
  padding: 4px 8px;
  opacity: .9;
}

/* Другое: раскрывашка */
/* Другое: выпадающее окно без раздвигания футера */
.footer-more{
  position: relative;
}

/* чтобы summary был по центру и выглядел как остальные ссылки */
.footer-more > summary{
  list-style: none;
}
.footer-more > summary::-webkit-details-marker{ display: none; }

/* панель — абсолютная, не влияет на поток */
.footer-more__panel{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 10px);

  margin: 0;
  padding: 10px;

  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(20,22,32,.92);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);

  display: flex;
  flex-direction: column;
  gap: 6px;

  min-width: 230px;
  width: max-content;

  text-align: left;
  z-index: 50;
}

/* маленький “хвостик” */
.footer-more__panel::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -6px;
  width: 12px;
  height: 12px;
  background: rgba(20,22,32,.92);
  border-left: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  transform: translateX(-50%) rotate(45deg);
}

/* Light theme */
html[data-theme="light"] .footer-more__panel{
  background: rgba(255,255,255,.94);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}
html[data-theme="light"] .footer-more__panel::after{
  background: rgba(255,255,255,.94);
  border-color: rgba(0,0,0,.08);
}

/* Подпись снизу */
.site-footer__sub{
  margin-top: 10px;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  opacity: .85;
}

.site-footer__sub .dot{ opacity: .45; }

/* Light theme: чуть темнее бордеры */
html[data-theme="light"] .site-footer__row{
  border-color: rgba(0,0,0,.06);
  background: rgba(0,0,0,.02);
}
html[data-theme="light"] .footer-link:hover{
  background: rgba(0,0,0,.04);
}
html[data-theme="light"] .footer-more__panel{
  background: rgba(255,255,255,.94);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
}

/* --- Sticky footer layout --- */
html, body { height: 100%; }

body{
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

main{
  flex: 1 0 auto;
}

.site-footer{
  flex-shrink: 0;
}

/* --- Static pages layout (rules/help/contacts/terms/privacy) --- */
.page-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 14px 26px;
}

.page-card{
  padding: 18px 18px 16px;
}

.page-card h1{
  margin: 0 0 12px;
  font-size: 34px;
  line-height: 1.1;
}

.page-card h2{
  margin: 18px 0 10px;
  font-size: 18px;
}

.page-card p,
.page-card li{
  color: var(--text-main);
  opacity: .95;
  line-height: 1.55;
  margin: 0 0 10px;
}

.page-card .muted{
  color: var(--text-muted);
  opacity: .95;
}

.page-card ul{
  margin: 8px 0 12px 18px;
}

.page-card a{
  color: var(--text-main);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: .95;
}
.page-card a:hover{ opacity: 1; }

/* contacts form */
.page-card .form-stack{
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.page-card .form-row{
  display: grid;
  gap: 6px;
}

.page-card input[type="text"],
.page-card input[type="email"],
.page-card textarea{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.rules-table-wrap {
  margin-top: 1.5em;
  overflow-x: auto;
}

.rules-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--card-bg, #111827);
  border: 1px solid var(--border-color, #2a2f3a);
  border-radius: 10px;
  overflow: hidden;
}

.rules-table th,
.rules-table td {
  padding: 0.9em 1em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-color, #2a2f3a);
}

.rules-table th {
  background: rgba(255, 255, 255, 0.04);
  font-weight: 600;
  font-size: 0.95rem;
}

.rules-table tr:last-child td {
  border-bottom: none;
}

/* Ненавязчивые акценты уровней */
.rules-table tr.level-light td:first-child {
  border-left: 4px solid #4ade80;
}

.rules-table tr.level-medium td:first-child {
  border-left: 4px solid #facc15;
}

.rules-table tr.level-serious td:first-child {
  border-left: 4px solid #fb923c;
}

.rules-table tr.level-critical td:first-child {
  border-left: 4px solid #f87171;
}

.rules-note {
  margin-top: 1em;
}

.rules-summary {
  margin-top: 0.5em;
}

/* --- Cauldron unified layout --- */
.cauldron-wrap{
  max-width: 980px;
  margin: 0 auto;
  padding: 18px 14px 0;
}
.cauldron-card{
  padding: 16px 16px 12px;
}
.cauldron-head{
  padding: 22px 0 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.cauldron-title{
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
}
.cauldron-sub{
  text-align: right;
  max-width: 420px;
  font-size: 13px;
}

/* content block under tabs */
.cauldron-body{
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 14px 26px;
}

/* --- Cauldron caught/inbox blocks --- */
.caught-note-box{
  margin-top:16px;
  padding:12px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}
.caught-note-tag{
  font-size:12px;
  opacity:.75;
  margin-bottom:4px;
}
.caught-note-text{
  font-size:14px;
  line-height:1.4;
  white-space:pre-wrap;
}
.caught-note-reply{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.caught-note-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.inbox-list{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.inbox-item{
  border-radius:10px;
  border:1px solid rgba(255,255,255,.08);
  padding:10px 12px;
  background: rgba(255,255,255,.02);
}
.inbox-header{ display:flex; justify-content:space-between; align-items:center; font-size:12px; margin-bottom:6px; }
.inbox-tag{ font-weight:600; opacity:.9; }
.inbox-expire{ opacity:.65; }
.inbox-text{ font-size:13px; margin-bottom:8px; white-space:pre-wrap; opacity:.95; }
.inbox-actions{ display:flex; gap:8px; flex-wrap:wrap; }

#my-tags-list.editing .my-tag-pill{ position:relative; padding-right:18px; }
#my-tags-list.editing .my-tag-pill::after{
  content:'✕';
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  opacity:.7;
}
.check-row{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }

/* ===== Cauldron layout ===== */
.cauldron-shell{
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
}

.cauldron-head{
  padding: 18px 0 10px;
}

.cauldron-title{
  font-size: 44px;
  letter-spacing: .2px;
  margin: 0 0 6px;
}

@media (max-width: 520px){
  .cauldron-head{ padding: 14px 0 8px; }
  .cauldron-title{ font-size: 30px; }
}

.cauldron-subtitle{
  margin: 0;
  opacity: .78;
  font-size: 14px;
}

.cauldron-tabs{
  display: flex;
  justify-content: center;   /* ЦЕНТР */
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;

  margin-top: 12px;
  padding: 6px;

  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.025);
  backdrop-filter: blur(6px);
}

.cauldron-tab{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 12px;
  border-radius: 999px;

  font-size: 13px;
  font-weight: 400;
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;

  opacity: .75;
  border: 1px solid transparent;
  background: transparent;

  transition: background .15s ease, opacity .15s ease;
}

.cauldron-tab:hover{
  opacity: .95;
  background: rgba(255,255,255,.04);
}


.cauldron-tab.is-active{
  opacity: 1;
  background: rgba(140,120,255,.18);
  border-color: rgba(140,120,255,.35);
}


.cauldron-body{
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 14px 0 24px;
}

/* Cookie banner */
.cookie-banner{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
}

.cookie-banner__inner{
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;

  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.18);
}
.cookie-banner__text{
  font-size: 13px;
  line-height: 1.35;
  color: var(--glass-text);
}

.cookie-banner__link{
  color: var(--accent);
  text-decoration: underline;
  margin-left: 6px;
}

.cookie-banner__actions{
  flex: 0 0 auto;
}

@media (max-width: 520px){
  .cookie-banner__inner{
    flex-direction: column;
    align-items: stretch;
  }
  .cookie-banner__actions{
    display: flex;
    justify-content: flex-end;
  }
}

/* =========================================================
   Responsive system (mobile-first overrides)
   ========================================================= */

/* <= 900px: чуть плотнее общий ритм */
@media (max-width: 900px) {
  :root { --container-pad: 12px; }
  .page-container { padding-top: 14px; padding-bottom: 18px; }
  .btn, .btn-primary, .btn-secondary { padding: 9px 12px; border-radius: 14px; }
  input[type="text"], input[type="search"], input[type="password"], input[type="email"], textarea, select {
    padding: 9px 11px;
    border-radius: 14px;
  }
}

/* <= 640px: шапка перестаёт ломаться — перенос и горизонтальный скролл иконок */
@media (max-width: 640px) {
  :root { --header-h: 52px; }

  .topbar-inner {
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .logo span { display: none; } /* остаётся знак + иконки */
  .theme-btn { margin-left: auto; }

  /* иконки в одну линию, если не помещаются — можно прокручивать */
  .nav-icons {
    order: 3;
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    gap: 10px;
  }

  .nav-link { padding: 6px; }
  .nav-icon { width: 24px; height: 24px; }

  /* справа остаётся только аватар (и выход), ник прячем */
  .user-meta { display: none; }
  .user-panel { gap: 8px; }
}

/* <= 520px: карточки/таб-строки/хедеры страниц становятся вертикальными */
@media (max-width: 520px) {
  :root { --container-pad: 10px; }

  .page-wrap { padding: 14px var(--container-pad) 20px; }

  .card, .feed-card, .dialog-card { border-radius: 14px; }
}

.dialog-message-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Разрешаем нормальное выделение текста в ленте */
.note-card, .note-body, .note-text {
  -webkit-user-select: text;
  user-select: text;
}

/* Но кнопки/иконки не должны выделяться */
.note-actions, .expand-btn, .link-btn, .menu-btn, .note-menu {
  -webkit-user-select: none;
  user-select: none;
}

.rules-link {
  color: #9b8cff;
  text-decoration: underline;
}

.rules-link:hover {
  color: #c1b8ff;
  text-decoration: none;
}

/* Signup: link inside checkbox label */
.checkbox-line .rules-link {
  color: #9b8cff;
  text-decoration: underline;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.checkbox-line .rules-link:hover {
  color: #c1b8ff;
  text-decoration: none;
}

/* если вдруг где-то стоит pointer-events:none на span внутри label */
.checkbox-line span,
.checkbox-line a {
  pointer-events: auto;
}

/* --- password eye toggle --- */
.pw-wrap{ position: relative; }
.pw-wrap input{ padding-right: 44px; }

.pw-toggle{
  position:absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.70);
  cursor: pointer;
  padding: 6px;
  line-height: 1;
}
.pw-toggle:hover{ color: rgba(255,255,255,0.95); }

/* =====================
   Char counter
===================== */
.char-counter{
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  opacity: .9;
  display: flex;
  justify-content: flex-end;
}

.char-counter--warn{
  color: #ffb020; /* мягкое предупреждение */
}

.char-counter{
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted, rgba(255,255,255,.65)); /* fallback! */
  opacity: .95;
  display: flex;
  justify-content: flex-end;
}

.reply-inline .char-counter{
  margin-top: 6px;
  text-align: right;
  width: 100%;
}

/* =====================
   Collapsible long text
===================== */
.text-fold{
  position: relative;
}

.text-fold.is-collapsed{
  max-height: 7.2em;          /* примерно 4 строки при line-height 1.8 */
  overflow: hidden;
}

.text-fold-fade{
  display: none;
}

.text-fold.is-collapsed + .text-fold-fade{
  display: block;
  margin-top: -2.2em;
  padding-top: 2.2em;
  background: linear-gradient(to bottom, rgba(0,0,0,0), rgba(10,12,24,0.95));
}

html[data-theme="light"] .text-fold.is-collapsed + .text-fold-fade{
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.98));
}

.text-fold-btn{
  margin-top: 6px;
  font-size: 13px;
  background: transparent;
  border: 0;
  color: rgba(155,140,255,0.95);
  cursor: pointer;
  padding: 0;
}

.text-fold-btn:hover{
  color: rgba(193,184,255,0.95);
  text-decoration: underline;
}

/* Notes: разрешаем общее сворачивание длинного текста */
body[data-page="notes"] .note-card .text-fold{
  position: relative;
}

body[data-page="notes"] .note-card .text-fold.is-collapsed{
  max-height: 14.5em;
  overflow: hidden;
}
 
body[data-page="notes"] .note-card .text-fold-fade{
  display: none;
}

body[data-page="notes"] .note-card .text-fold.is-collapsed + .text-fold-fade{
  display: block;
  margin-top: -72px;
  height: 72px;
  background: linear-gradient(
    to bottom,
    rgba(10,12,24,0) 0%,
    rgba(10,12,24,0.10) 34%,
    rgba(10,12,24,0.34) 58%,
    rgba(10,12,24,0.64) 80%,
    rgba(10,12,24,0.90) 100%
  );
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  overflow: hidden;
  pointer-events: none;
}

body[data-page="notes"] .note-card .text-fold-btn{
  display: inline-flex !important;
  margin-top: 8px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent, #a78bfa);
  font-size: 13px;
  cursor: pointer;
}

body[data-page="notes"] .note-card .text-fold.is-collapsed{
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

html[data-theme="light"] body[data-page="notes"] .note-card .text-fold.is-collapsed + .text-fold-fade{
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.12) 34%,
    rgba(255,255,255,0.36) 58%,
    rgba(255,255,255,0.68) 80%,
    rgba(255,255,255,0.96) 100%
  );
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  overflow: hidden;
}

/* =====================
   IBB image embeds
===================== */
.ibb-embed{
  display: inline-block;
  margin-top: 8px;
  max-width: 100%;
}

.ibb-embed__img{
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,.22);
}

/* =====================
   IBB image embeds (mini preview)
===================== */
.ibb-embed{
  display: inline-block;
  margin-top: 8px;
  max-width: 100%;
}

/* само изображение — миниатюра */
.ibb-embed__img{
  display: block;

  /* 🔽 ключевые ограничения */
  max-width: 220px;     /* ширина мини-превью */
  max-height: 160px;    /* высота мини-превью */

  width: auto;
  height: auto;
  object-fit: contain;  /* не обрезаем */

  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);

  cursor: zoom-in;
}

/* =====================
   Allow text selection
===================== */

/* Основной текст */
.note-body,
.msg-text,
.cauldron-text,
.js-fold-text{
  user-select: text !important;
  -webkit-user-select: text !important;
  -ms-user-select: text !important;
}

/* чтобы кнопки не выделялись */
button,
.reply-btn,
.text-fold-btn,
.action-btn{
  user-select: none;
}

/* Notes: quote button */
.note-menu-wrapper{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.quote-btn{
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
  transform: translateY(-1px);
}

.quote-btn:hover{
  color: var(--text-main);
}

/* Подсветка найденной записки (по цитате) */
.note-card.note-highlight{
  outline: 2px solid var(--accent);
  box-shadow: 0 0 0 6px rgba(124,58,237,.12);
}

/* Quote button */
.quote-btn{
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--text-muted, rgba(255,255,255,.65));
  font-size: 16px;
  line-height: 1;
  padding: 0 4px;
}
.quote-btn:hover{ color: var(--text-main, rgba(255,255,255,.92)); }

/* Quote chip inside text */
.note-quote-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(155,140,255,.35);
  background: rgba(155,140,255,.12);
  color: rgba(220,215,255,.95);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.note-quote-chip:hover{
  background: rgba(155,140,255,.18);
  border-color: rgba(155,140,255,.55);
}

.note-highlight{
  outline: 2px solid rgba(155,140,255,.8);
  box-shadow: 0 0 0 6px rgba(155,140,255,.12);
  transition: box-shadow .2s ease;
}

/* Mini popup */
.quote-pop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.quote-pop.is-open{ display: flex; }

.quote-pop__card{
  width: min(560px, calc(100vw - 24px));
  border-radius: 16px;
  background: rgba(20,22,40,.98);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding: 14px 14px 12px;
}

.quote-pop__top{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.quote-pop__title{
  font-weight: 600;
  font-size: 14px;
  color: rgba(255,255,255,.9);
}
.quote-pop__close{
  background: none;
  border: 0;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  font-size: 18px;
}
.quote-pop__text{
  color: rgba(255,255,255,.88);
  line-height: 1.55;
  font-size: 14px;
  max-height: 55vh;
  overflow: auto;
}
.quote-pop__meta{
  margin-top: 10px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
}

/* IBB image embeds (mini preview) */
.ibb-embed{ display:inline-block; margin-top:8px; max-width:100%; }
.ibb-embed__img{
  display:block;
  max-width:220px;
  max-height:160px;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:10px;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  cursor: zoom-in;
}

/* Quote chip */
.note-quote-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(155,140,255,.35);
  background: rgba(155,140,255,.12);
  color: rgba(220,215,255,.95);
  font-size:12px;
  text-decoration:none;
  cursor:pointer;
}
.note-quote-chip:hover{
  background: rgba(155,140,255,.18);
  border-color: rgba(155,140,255,.55);
}

/* Highlight target note */
.note-card.note-highlight{
  outline: 2px solid rgba(155,140,255,.8);
  box-shadow: 0 0 0 6px rgba(155,140,255,.12);
}

.dialog-menu-wrapper{
  position: relative;
}

.dialog-menu{
  position: absolute;
  right: 0;
  bottom: 44px;          /* чтобы открывалось над панелью ввода */
  min-width: 240px;
  z-index: 80;

  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-item{
  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-item:hover{
  background: rgba(139, 108, 255, 0.14);
}

.dialog-menu-item[disabled]{
  opacity: .6;
  cursor: not-allowed;
}

.dialog-menu-item.danger{
  color: #ffb4b4;
}

/* ВАЖНО: меню должно выходить "поверх", не участвовать в потоке */
.dialog-menu-wrapper{
  position: relative;
  overflow: visible;
}

/* dropdown */
.dialog-menu{
  position: absolute;
  right: 0;
  bottom: 46px;          /* над кнопкой/полем ввода */
  z-index: 200;

  min-width: 240px;
  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 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);
}

/* signatures bank: кнопка сохранения в шапке каждой карточки */
.sig-card-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.sig-card-actions{
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-sm{
  padding: 8px 12px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
}

/* ===== URL INPUT (под фото) ===== */

input[type="url"],
input[name$="photo_url"]{

  background: rgba(8, 12, 28, 0.55);
  border: 1px solid var(--border-subtle);

  border-radius: 12px;

  padding: 10px 12px;

  color: var(--text-primary);
  font-size: 14px;

  transition: all .18s ease;
}

/* placeholder */
input[type="url"]::placeholder{
  color: var(--text-muted);
}

/* hover */
input[type="url"]:hover{
  border-color: rgba(140, 120, 255, 0.35);
}

/* focus — самое важное */
input[type="url"]:focus{

  outline: none;
  border-color: var(--accent);

  box-shadow:
    0 0 0 2px rgba(140,120,255,0.15),
    0 4px 18px rgba(90,70,255,0.12);

  background: rgba(12, 16, 36, 0.75);
}

/* верхние чекбоксы — 3 в ряд */
.sig-check-grid-top{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 8px 18px;
  margin-top: 12px;
}

/* нижний — отдельный */
.sig-check-single{
  margin-top: 10px;
}

/* строки */
.sig-check-grid-top .check-row,
.sig-check-single .check-row{
  display:flex;
  align-items:center;
  gap:8px;

  padding:6px 8px;
  border-radius:10px;
  transition:.15s;
}

.sig-check-grid-top .check-row:hover,
.sig-check-single .check-row:hover{
  background: rgba(140,120,255,0.08);
}

@media (max-width: 720px){
  .sig-check-grid-top{
    grid-template-columns: 1fr;
  }
}

.sig-check-single{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

/* нижняя зона карточки подписи */
.sig-card-footer{
  display:flex;
  justify-content:flex-end; /* ← ВОТ ЭТА СТРОКА */
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
}

.sig-card.is-disabled{
  opacity:.55;
}

/* ===== Cropper modal ===== */
.fl-cropper{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.fl-cropper.is-open{ display:block; }

.fl-cropper__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(4px);
}

.fl-cropper__dialog{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  width: min(420px, 92vw);

  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.35);
  padding: 14px;
}

.fl-cropper__title{
  font-weight: 700;
  margin-bottom: 10px;
}

.fl-cropper__stage{
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 10px 0 6px;
}

#flCropCanvas{
  border-radius: 12px;
  border: 1px solid var(--border-subtle);
  background: rgba(0,0,0,0.18);
  touch-action: none;
  cursor: grab;
}
#flCropCanvas:active{ cursor: grabbing; }

.fl-cropper__controls{
  padding: 8px 0 2px;
}
.fl-cropper__controls input[type="range"]{
  width:100%;
}

.fl-cropper__actions{
  display:flex;
  justify-content: space-between;
  gap:10px;
  margin-top: 10px;
}

.dialog-attention-badge{
  position:absolute;
  bottom: 12px;      /* аккуратно в угол */
  right: 16px;

  display:inline-flex;
  align-items:center;
  gap:6px;

  padding: 2px 8px;   /* ← ВАЖНО: уменьшили */
  border-radius:999px;

  font-size:11px;     /* ← меньше = аккуратнее */
  line-height:14px;
  font-weight:600;

  background: rgba(162,120,255,0.16);
  border: 1px solid rgba(162,120,255,0.45);

  box-shadow:
    0 4px 14px rgba(0,0,0,0.18);
  transform: translateY(2px);
}


.dialog-attention-badge::before{
  content:"";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(190, 155, 255, 0.95);
  box-shadow: 0 0 10px rgba(190,155,255,0.35);
}

/* если показываем бейдж "новое", точку рядом не рисуем */
.dialogs-page .dialog-link .dialog-unread-dot{
  display:none !important;
}

.dialog-unread-dot{
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: relative;
  top: -1px;
  background: #a78bfa;
  box-shadow:
    0 0 0 2px rgba(20,24,45,0.9), /* обводка под тёмную тему */
    0 0 10px rgba(167,139,250,0.6);
  margin-left: 6px;
}

.dialogs-page .dialog-link{
  position: relative;
  overflow: visible;
}

/* ===== 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);
}

/* ===== Notification dot ===== */

.has-dot{
  position: relative;
}

.has-dot::after{
  content: "";
  position: absolute;

  width: 8px;
  height: 8px;
  border-radius: 50%;

  background: var(--accent);
  box-shadow: 0 0 8px var(--focus-ring);

  top: 6px;
  right: 6px;
}

.dialogs-tab.has-dot{
    border-color: var(--accent-border);
}

/* ===== Modal (reports) ===== */
body.modal-open { overflow: hidden; }

.fl-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 22, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 16px;
}
 
/* IMPORTANT: allow modal to actually hide when attribute [hidden] is set */
.fl-modal-backdrop[hidden]{
  display: none !important;
}

.fl-modal {
  width: min(520px, 100%);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(18, 20, 36, 0.92);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
}

.fl-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.fl-modal-title {
  font-weight: 700;
  font-size: 16px;
}

.fl-modal-x {
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.8;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.fl-modal-x:hover { opacity: 1; }

.fl-modal-body { padding: 14px 16px 16px; }

.fl-field { display: block; margin-bottom: 12px; }
.fl-label { display: block; font-size: 12px; opacity: 0.85; margin-bottom: 6px; }

.fl-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 14px;
}

.fl-btn {
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: inherit;
  cursor: pointer;
}
.fl-btn:hover { background: rgba(255,255,255,0.10); }

.fl-btn-primary {
  background: rgba(140, 120, 255, 0.35);
  border-color: rgba(140, 120, 255, 0.55);
}
.fl-btn-primary:hover { background: rgba(140, 120, 255, 0.45); }

.fl-btn-ghost {
  background: transparent;
}

.fl-hint {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.9;
}

/* widgets from Django forms inside modal */
.fl-modal select,
.fl-modal textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.18);
  color: inherit;
  padding: 10px 12px;
}

/* =========================
   Notes: Personal filter modal — LIGHT THEME
   (mobile modal used by #pf-details)
   ========================= */
html[data-theme="light"] .fl-modal-backdrop{
  background: rgba(10, 12, 22, 0.18);
}

html[data-theme="light"] .fl-modal{
  border: 1px solid rgba(10, 12, 22, 0.10);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 20px 60px rgba(10, 12, 22, 0.18);
  backdrop-filter: blur(10px);
}

html[data-theme="light"] .fl-modal-header{
  border-bottom: 1px solid rgba(10, 12, 22, 0.10);
}

html[data-theme="light"] .fl-btn{
  border: 1px solid rgba(10, 12, 22, 0.12);
  background: rgba(10, 12, 22, 0.04);
}
html[data-theme="light"] .fl-btn:hover{
  background: rgba(10, 12, 22, 0.07);
}

html[data-theme="light"] .fl-btn-primary{
  background: rgba(140, 120, 255, 0.28);
  border-color: rgba(140, 120, 255, 0.45);
}
html[data-theme="light"] .fl-btn-primary:hover{
  background: rgba(140, 120, 255, 0.35);
}

/* поля внутри модалки */
html[data-theme="light"] .fl-modal select,
html[data-theme="light"] .fl-modal textarea{
  border: 1px solid rgba(10, 12, 22, 0.14);
  background: rgba(10, 12, 22, 0.04);
}

.fl-modal textarea { min-height: 92px; resize: vertical; }

/* ===== Toast ===== */
.fl-toast {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%) translateY(10px);
  opacity: 0;
  transition: 0.25s ease;
  z-index: 10000;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(18, 20, 36, 0.92);
  box-shadow: 0 12px 35px rgba(0,0,0,0.35);
  font-size: 13px;
}
.fl-toast.is-show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ===== Report UI (match Notes look) ===== */

/* контейнер репорта в диалоге */
.dialog-report-backdrop{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(10, 12, 22, 0.55);
}

.dialog-report-modal{
  width: min(720px, 100%);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(18, 20, 36, 0.92);
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.dialog-report-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dialog-report-title{
  font-weight: 800;
  font-size: 16px;
  color: rgba(245,242,255,0.96);
}

.dialog-report-x{
  width: 30px;
  height: 30px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.78);
  cursor: pointer;
}
.dialog-report-x:hover{
  background: rgba(255,255,255,0.09);
  color: rgba(255,255,255,0.95);
}

.dialog-report-body{
  padding: 14px 16px 16px;
}

/* фиолетовая карточка как в notes (второе фото) */
.dialog-report-card{
  border-radius: 16px;
  background: rgba(132, 96, 255, 0.22);
  border: 1px solid rgba(162,120,255,0.28);
  padding: 14px;
}

/* поля */
.dialog-report-card label{
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  color: rgba(245,242,255,0.90);
}

.dialog-report-card select,
.dialog-report-card textarea{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
  color: rgba(245,242,255,0.95);
  padding: 10px 12px;
  outline: none;
}

.dialog-report-card textarea{
  min-height: 120px;
  resize: vertical;
}

/* кнопки снизу справа как в notes */
.dialog-report-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

.dialog-report-btn{
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(245,242,255,0.94);
  cursor: pointer;
}
.dialog-report-btn:hover{
  background: rgba(255,255,255,0.10);
}

.dialog-report-btn.primary{
  background: rgba(140, 120, 255, 0.35);
  border-color: rgba(140, 120, 255, 0.55);
}
.dialog-report-btn.primary:hover{
  background: rgba(140, 120, 255, 0.45);
}

/* FIX: modal report must be clickable above all */
.dialog-report-backdrop{
  z-index: 2147483000; /* выше всего */
  pointer-events: auto;
}

.dialog-report-modal{
  pointer-events: auto;
}

.dialog-report-modal *{
  pointer-events: auto;
}

/* ===== Dialog report (fallback/inline) — make it look like Notes card ===== */

#dialog-report-form{
  border-radius: 16px;
  background: rgba(132, 96, 255, 0.22);
  border: 1px solid rgba(162,120,255,0.28);
  padding: 14px;
}

/* Заголовок "Пожаловаться" (если он просто текстом рядом) — чуть жирнее */
#dialog-report-form + * {}

/* Подписи (Причина/Комментарий) */
#dialog-report-form label,
#dialog-report-form .fl-label,
#dialog-report-form .dialog-report-label{
  display: block;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  color: rgba(245,242,255,0.90);
}

/* Поля */
#dialog-report-form select,
#dialog-report-form textarea,
#dialog-report-form input[type="text"]{
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.20);
  color: rgba(245,242,255,0.95);
  padding: 10px 12px;
  outline: none;
}

#dialog-report-form textarea{
  min-height: 120px;
  resize: vertical;
}

/* Кнопки — вправо, как в notes */
#dialog-report-form .dialog-report-actions,
#dialog-report-form .fl-modal-actions,
#dialog-report-form .actions,
#dialog-report-form .form-actions{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

/* Если кнопки просто лежат подряд без контейнера — тоже выровняем */
#dialog-report-form button{
  border-radius: 999px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  color: rgba(245,242,255,0.94);
  cursor: pointer;
}

#dialog-report-form button:hover{
  background: rgba(255,255,255,0.10);
}

/* "Отправить жалобу" — сделать primary (если это submit) */
#dialog-report-form button[type="submit"]{
  background: rgba(140, 120, 255, 0.35);
  border-color: rgba(140, 120, 255, 0.55);
}

#dialog-report-form button[type="submit"]:hover{
  background: rgba(140, 120, 255, 0.45);
}

/* FIX: уважать hidden у репорт-оверлея (иначе он "липнет" и перекрывает клики) */
.dialog-report-backdrop[hidden]{
  display: none !important;
}

html[data-theme="light"] .dialog-report-backdrop{
  background: rgba(10, 12, 22, 0.18);
}

html[data-theme="light"] .dialog-report-modal{
  border: 1px solid rgba(18, 22, 38, 0.10);
  background: rgba(255, 255, 255, 0.97);
  box-shadow: 0 20px 60px rgba(10, 12, 22, 0.16);
  backdrop-filter: blur(10px);
}

html[data-theme="light"] .dialog-report-head{
  border-bottom: 1px solid rgba(18, 22, 38, 0.10);
}

html[data-theme="light"] .dialog-report-title{
  color: #1f2433;
}

html[data-theme="light"] .dialog-report-x{
  border: 1px solid rgba(18, 22, 38, 0.10);
  background: rgba(18, 22, 38, 0.04);
  color: rgba(31, 36, 51, 0.78);
}

html[data-theme="light"] .dialog-report-x:hover{
  background: rgba(18, 22, 38, 0.08);
  color: #1f2433;
}

html[data-theme="light"] .dialog-report-card,
html[data-theme="light"] #dialog-report-form{
  background: rgba(118, 86, 255, 0.10);
  border: 1px solid rgba(118, 86, 255, 0.20);
}

html[data-theme="light"] .dialog-report-card label,
html[data-theme="light"] #dialog-report-form label,
html[data-theme="light"] #dialog-report-form .fl-label,
html[data-theme="light"] #dialog-report-form .dialog-report-label{
  color: #2b3040;
}

html[data-theme="light"] .dialog-report-card select,
html[data-theme="light"] .dialog-report-card textarea,
html[data-theme="light"] #dialog-report-form select,
html[data-theme="light"] #dialog-report-form textarea,
html[data-theme="light"] #dialog-report-form input[type="text"]{
  border: 1px solid rgba(18, 22, 38, 0.12);
  background: #ffffff;
  color: #222838;
}

html[data-theme="light"] .dialog-report-card textarea::placeholder,
html[data-theme="light"] #dialog-report-form textarea::placeholder,
html[data-theme="light"] #dialog-report-form input[type="text"]::placeholder{
  color: rgba(34, 40, 56, 0.55);
}

html[data-theme="light"] .dialog-report-btn,
html[data-theme="light"] #dialog-report-form button{
  border: 1px solid rgba(18, 22, 38, 0.12);
  background: rgba(18, 22, 38, 0.04);
  color: #2b3040;
}

html[data-theme="light"] .dialog-report-btn:hover,
html[data-theme="light"] #dialog-report-form button:hover{
  background: rgba(18, 22, 38, 0.08);
}

html[data-theme="light"] .dialog-report-btn.primary,
html[data-theme="light"] #dialog-report-form button[type="submit"]{
  background: rgba(118, 86, 255, 0.18);
  border-color: rgba(118, 86, 255, 0.34);
  color: #31245c;
}

html[data-theme="light"] .dialog-report-btn.primary:hover,
html[data-theme="light"] #dialog-report-form button[type="submit"]:hover{
  background: rgba(118, 86, 255, 0.26);
}

.dialog-report-card select,
#dialog-report-form select{
  color-scheme: dark;
  background-color: #2a2254;
  color: #f3f0ff;
}

.dialog-report-card select option,
#dialog-report-form select option{
  background-color: #2a2254;
  color: #f3f0ff;
}

/* У репорта в диалоге мы управляем показом через hidden на backdrop,
   поэтому НЕ прячем .dialog-report-modal через display:none */
body.modal-open { overflow: hidden; }

.dialog-closed-box{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  text-align: center;
  opacity: .85;
}

/* =========================================================
   Friends page — keep the empty state strip full-width
   (prevents accidental grid/column layouts from shrinking the card)
   ========================================================= */
.friends-page{ max-width: var(--container-max); margin: 0 auto; }
.friends-panel{ width: 100%; }
.friends-panel .card{ width: 100%; }
.friends-page .muted{ display:block; width:100%; }

/* Mobile: keep comfy paddings, do not overflow */
@media (max-width: 520px){
  .friends-page{ max-width: var(--container-max); }
}

/* Friends: empty state should match Diary card visually */
.friends-page.friends-empty{
  display: block; /* вместо grid, чтобы было “в одну колонку” */
}

/* Принудительно подтягиваем карточку /friends/ к базовому стилю card (на случай каскадных переопределений ниже по файлу) */
.friends-page .card{
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Как в дневнике: аккуратный отступ под заголовком */
.friends-page .friends-panels{
  margin-top: 12px;
}

/* Карточка создания записи */
.notes-form,
.note-create,
.create-note,
.post-form {
    border-radius: 16px; !important;
}

:root {
    --radius-card: 16px;
}

.notes-form,
.note-create,
.create-note,
.post-form {
    border-radius: var(--radius-card);
}

/* Карточка создания записи */
.notes-form,
.note-create,
.create-note,
.post-form {
    border-radius: 16px;

    border: 1px solid rgba(180, 160, 255, 0.15); 
    background: linear-gradient(
        180deg,
        rgba(30, 34, 64, 0.95),
        rgba(18, 20, 44, 0.95)
    );

    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.02),
        0 8px 24px rgba(0, 0, 0, 0.35);
}

.notes-form:hover,
.note-create:hover,
.create-note:hover,
.post-form:hover {
    border-color: rgba(180, 160, 255, 0.25);
}

/* =========================================
   Cauldron: FIX dropdown overlap for tag groups (e.g. "Другое")
   - ensures popover is above everything
   - prevents parent containers from clipping it
   ========================================= */

.cauldron-page,
.cauldron-page .feed-card,
.cauldron-page .tags-panel,
.cauldron-page .tags-list {
  overflow: visible;
}

/* если "Другое" сделано через details--inline (как у тебя выше по файлу) */
.cauldron-page .details--inline{
  position: relative;   /* якорь для absolute-панели */
  z-index: 1;
}

/* сама выпадающая панель */
.cauldron-page .details-body--inline{
  position: absolute;
  left: 0;              /* чтобы открывалось от левого края кнопки */
  right: auto;
  top: calc(100% + 10px);

  z-index: 5000;        /* поверх всех фильтров/пилюль */
}

/* на всякий случай — чтобы summary/пилюля была кликабельна и не "тонуло" */
.cauldron-page .details--inline > summary{
  position: relative;
  z-index: 2;
}

/* если внутри панели есть карточка/обертка без фона — даём ей "popover" вид */
.cauldron-page .details-body--inline{
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  box-shadow: var(--shadow-popover);
  padding: 12px;
  min-width: 320px;
}

/* =========================================
   Search input — unified style (like dialogs)
   ========================================= */

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;

  height: 40px;
  padding: 0 14px;

  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;

  transition: 
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

/* сам input */
.search-wrap input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;

  color: #fff;
  font-size: 14px;
  line-height: 1;

  padding: 0;
}

/* placeholder */
.search-wrap input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

/* hover */
.search-wrap:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}

/* focus-within — как в сообщениях */
.search-wrap:focus-within {
  background: rgba(120, 110, 255, 0.08);
  border-color: rgba(120, 110, 255, 0.45);
  box-shadow: 0 0 0 1px rgba(120, 110, 255, 0.35);
}

/* компактная версия (если вдруг понадобится) */
.search-wrap--sm {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

/* Mini popup — theme aware */
.quote-pop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.quote-pop.is-open{ display: flex; }

.quote-pop__card{
  width: min(560px, calc(100vw - 24px));
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  padding: 14px 14px 12px;
}

.quote-pop__title{
  font-weight: 600;
  font-size: 14px;
  color: var(--text-main);
}
.quote-pop__close{
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 18px;
}
.quote-pop__text{
  color: var(--text-main);
  line-height: 1.55;
  font-size: 14px;
  max-height: 55vh;
  overflow: auto;
}
.quote-pop__meta{
  margin-top: 10px;
  color: var(--text-muted);
  font-size: 12px;
}
.quote-pop__actions{
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* Quote chip inside text — theme aware */
.note-quote-chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--accent-border);
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 12px;
  text-decoration: none;
  cursor: pointer;
}
.note-quote-chip:hover{
  filter: brightness(0.98);
}

/* =========================================================
   Cauldron / Composer tags (mini-details + mini-panel)
   Compact centered popover for ALL tag groups
   - no overlay stacking (handled by JS)
   - no off-screen overflow
   - compact rows (less empty space)
   - centered popover (fixed), same UX for all groups
   ========================================================= */

/* чтобы выпадашки не резались карточками */
.composer-shell { overflow: visible !important; }

/* базовое */
details.mini-details { position: relative; }
details.mini-details > summary { cursor: pointer; }

/* ===== Panel: centered popover ===== */
details.mini-details .mini-panel{
  /* центрируем относительно окна, а не кнопки */
  position: fixed;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);

  z-index: 9999;

  /* размеры: как "Направленность" (компактно) */
  width: min(520px, calc(100vw - 24px));
  max-height: min(60vh, 520px);
  overflow: auto;

  padding: 12px;
  border-radius: 16px;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(10,12,20,.96);
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
  backdrop-filter: blur(10px);

  /* анимация лёгкая, без "шторки" */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease, visibility .12s ease;
}

/* открыто */
details.mini-details[open] .mini-panel{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* ===== compact title inside panel ===== */
.mini-panel .panel-title{
  font-weight: 700;
  font-size: 13px;
  margin: 0 0 10px 0;
  opacity: .92;
}

/* ===== compact rows ===== */
.mini-panel .check-row{
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 7px 10px;         /* меньше воздуха */
  border-radius: 11px;

  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);

  font-size: 13px;
  line-height: 1.2;
}

.mini-panel .check-row:hover{
  background: rgba(255,255,255,.05);
}

/* чекбокс чуть компактнее */
.mini-panel .check-row input{
  margin: 0;
  width: 16px;
  height: 16px;
}

/* ===== grids: default 1 column; allow 2 for "Другое" if нужно ===== */
.mini-panel .check-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;                  /* компактнее */
}

/* 3 колонки для "Другое" (на больших экранах), чтобы не было внутреннего скролла */
@media (min-width: 980px){
  .mini-panel .check-grid.cols-3{
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 641px) and (max-width: 979px){
  .mini-panel .check-grid.cols-3{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px){
  .mini-panel .check-grid.cols-3{
    grid-template-columns: 1fr;
  }
}


/* если у "Другое" уже есть сетка — оставим 2 колонки только на больших экранах */
@media (min-width: 980px){
  .mini-panel .check-grid.cols-2{
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 979px){
  .mini-panel .check-grid.cols-2{
    grid-template-columns: 1fr;
  }
}

/* ===== hide inner scrollbar (scroll works, but no ugly bar) ===== */
.mini-panel{
  scrollbar-width: none;        /* Firefox */
}
.mini-panel::-webkit-scrollbar{
  width: 0;
  height: 0;
}

@media (max-width: 640px){
  details.mini-details .mini-panel{
    left: 50%;
    top: calc(100% + 6px);
    bottom: auto;
    transform: translateX(-50%);

    width: calc(100vw - 20px);
    max-height: 75vh;

    border-radius: 16px;
    padding: 12px;
  }
}

details.mini-details{
  position: relative;
}

/* Базово: панель под кнопкой, без центрирования. Позицию уточнит JS. */
details.mini-details .mini-panel{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  transform: none;

  z-index: 1200;
  width: min(92vw, 380px);

  max-height: 60vh; /* JS перезапишет на реальное доступное */
  overflow-y: auto;

  padding: 10px 10px 12px;
  border-radius: 14px;

  background: rgba(8, 12, 24, 0.95);
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
  backdrop-filter: blur(14px);
}

/* на мобиле — шире, чтобы не “вылезать” */
@media (max-width: 640px){
  details.mini-details .mini-panel{
    width: calc(100vw - 20px);
  }
}


  /* чуть крупнее зоны клика на мобиле */
  .mini-panel .check-row{
    padding: 10px 12px;
    font-size: 14px;
  }


/* reduce motion */
@media (prefers-reduced-motion: reduce){
  details.mini-details .mini-panel{ transition: none; }
}

/* общий контейнер выпадающего блока */
.mini-dropdown-host{
  display: none;
  margin-top: 12px;

  padding: 12px 12px 14px;
  border-radius: 16px;

  background: rgba(8, 12, 24, 0.95);
  border: 1px solid var(--border);
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
  backdrop-filter: blur(14px);
}

.mini-dropdown-host.is-open{
  display: block;
}

/* в выпадашке скролла внутри не делаем — пусть скроллится страница */
.mini-dropdown-host{
  max-height: none;
  overflow: visible;
}

/* Сетки чеков остаются, но для "Другое" делаем 3/2/1 колонки */
.mini-dropdown-host .check-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 980px){
  .mini-dropdown-host .check-grid.cols-3{ grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 641px) and (max-width: 979px){
  .mini-dropdown-host .check-grid.cols-3{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .mini-dropdown-host .check-grid.cols-3{ grid-template-columns: 1fr; }
}

/* ===============================
   Composer: Tag dropdown rows (tag-dd)
   =============================== */

.tag-dd-list{
  display: grid;
  gap: 10px;

  grid-template-columns: 1fr 1fr;   /* 2 столбца */
  align-items: start;
}

@media (max-width: 820px){
  .tag-dd-list{
    grid-template-columns: 1fr;     /* планшеты/телефоны — 1 столбец */
  }
}

.tag-dd[open]{
  grid-column: 1 / -1; /* раскрытый — на всю ширину */
}

.tag-dd{
  border-radius: 12px;
}

.tag-dd__summary{
  list-style: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

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

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
}

.tag-dd__summary::-webkit-details-marker{ display:none; }

.tag-dd[open] .tag-dd__summary{
  background: rgba(255,255,255,.05);
}

.tag-dd__chev{
  width: 16px;
  height: 16px;
  display: inline-block;
  opacity: .85;
  transform: rotate(0deg);
  transition: transform .12s ease;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tag-dd[open] .tag-dd__chev{
  transform: rotate(180deg);
}

.tag-dd__body{
  margin-top: 8px;
  padding: 0 2px 2px;
}

/* чтобы чекбоксы были удобны на телефоне */
@media (max-width: 640px){
  .tag-dd__summary{ padding: 12px 12px; }
  .tag-dd-list{ gap: 12px; }
}

/* ==========================================
   Featherline — Custom Checkboxes (global)
   ========================================== */

input[type="checkbox"]{
  -webkit-appearance: none;
  appearance: none;

  width: 18px;
  height: 18px;

  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.18);

  background: rgba(255,255,255,.04);
  cursor: pointer;

  display: inline-grid;
  place-content: center;

  transition:
    background .15s ease,
    border-color .15s ease,
    box-shadow .15s ease,
    transform .06s ease;
}

/* hover */
input[type="checkbox"]:hover{
  border-color: rgba(160,130,255,.6);
  background: rgba(160,130,255,.06);
}

/* active click */
input[type="checkbox"]:active{
  transform: scale(.96);
}

/* checked */
input[type="checkbox"]:checked{
  background: linear-gradient(135deg, #8b7cff, #bca9ff);
  border-color: #9c8dff;
  box-shadow: 0 0 0 2px rgba(155,140,255,.18);
}

/* галочка */
input[type="checkbox"]::after{
  content: "";
  width: 10px;
  height: 10px;
  transform: scale(0);
  transition: transform .12s ease;

  background: white;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9.55 16.2 4.8 11.45l1.4-1.4 3.35 3.35 8.25-8.25 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M9.55 16.2 4.8 11.45l1.4-1.4 3.35 3.35 8.25-8.25 1.4 1.4z'/%3E%3C/svg%3E") center/contain no-repeat;
}

input[type="checkbox"]:checked::after{
  transform: scale(1);
}

/* focus (доступность) */
input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(155,140,255,.35),
    0 0 0 4px rgba(155,140,255,.15);
}

/* ==========================================
   Cauldron Hub: cards in "Мои объявления/посты"
   ========================================== */

.inbox-item{
  padding: 16px 16px 18px !important; /* больше воздуха */
  margin-top: 12px;
  border-radius: 18px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10) !important; /* перебиваем inline border-top */

  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* убрать “полосу” сверху, если она задана inline как border-top */
.inbox-item{
  border-top: none !important;
}

/* строки внутри карточки */
.inbox-item .muted{
  margin-bottom: 8px;
  display: block;
}

/* текст объявления не прилипает */
.inbox-item > div{
  margin-top: 6px;
}

/* кнопки внутри карточки */
.inbox-item .secondary-btn{
  padding: 9px 14px;
  border-radius: 999px;
}

/* ряд кнопок — чуть ниже текста */
.inbox-item .secondary-btn.js-toggle-ad-edit,
.inbox-item .secondary-btn.js-delete-my-ad,
.inbox-item .secondary-btn.js-toggle-board-edit,
.inbox-item .secondary-btn.js-delete-my-board{
  margin-top: 10px;
}

/* если у тебя кнопки в flex-контейнере (как на скрине из инспектора) */
.inbox-item > div[style*="display:flex"]{
  margin-top: 12px !important;
  gap: 12px !important;
}

/* ==========================================
   Cauldron — Expired cards styling
   ========================================== */

/* контейнер "Истёкшие" */
.expired-list{
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

/* сама карточка */
.expired-list .inbox-item{
  padding: 16px 16px 18px !important;
  border-radius: 18px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10) !important;
  border-top: none !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* дата/статус */
.expired-list .muted{
  font-size: 12px;
  opacity: .65;
  margin-bottom: 6px;
  display: block;
}

/* текст объявления */
.expired-list .inbox-item > div{
  margin-top: 6px;
}

/* если есть теги (как dragonball) */
.expired-list .tag,
.expired-list .badge{
  display: inline-block;
  margin-top: 6px;
  margin-bottom: 4px;
}
 
.passive-slot-filters{ margin-top: 6px; }
.passive-slot-filters > summary{
  cursor: pointer;
  user-select: none;
  opacity: .7;
  font-size: 12px;
  margin-left: 2px;
}
.passive-slot-filters__row{
  margin-top: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 720px){
  .passive-slot-filters__row{ grid-template-columns: 1fr; }
}

/* ===== Игровой котелок — воздух между строками ===== */

.cauldron-headline {
  margin-bottom: 10px;
}

.cauldron-catch-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px; /* ← добавляем воздуха */
}

#catch-msg {
  opacity: 0.7;
  font-size: 14px;
}

/* Разлепить информационный блок и первые карточки */
#panel-catch > div:first-of-type {
  margin-bottom: 16px;
}

/* =========================================
   Игровой котелок — аккуратные отступы
   ========================================= */

/* Воздух под строкой с кнопками */
#panel-catch .btn,
#panel-delayed .btn,
#panel-incoming .btn {
  margin-bottom: 14px;
}

/* Воздух под первой информационной строкой */
#panel-catch > div:first-child,
#panel-delayed > div:first-child,
#panel-incoming > div:first-child {
  margin-bottom: 16px;
}

/* Небольшой интервал между карточками */
#panel-catch > div + div,
#panel-delayed > div + div,
#panel-incoming > div + div {
  margin-top: 12px;
}

/* --- Passive inbox filters: same feel as "Create" (2 columns dropdowns) --- */
.passive-filters {
  margin-top: 8px;
}

.passive-filters__summary {
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  opacity: .9;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 2px;
}

.passive-filters__body {
  margin-top: 10px;
}

.tag-dd-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* ===== Tag dropdown (как в "Создать") ===== */

.tag-dd-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 640px){
  .tag-dd-list{ grid-template-columns: 1fr; }
}

details.tag-dd{
  border: 1px solid var(--border-soft);
  background: rgba(255,255,255,.02);
  border-radius: 16px;
  overflow: hidden;
}

details.tag-dd > summary{
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

details.tag-dd > summary::-webkit-details-marker{ display: none; }

.tag-dd__chev{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.55);
  border-bottom: 2px solid rgba(255,255,255,.55);
  transform: rotate(45deg);
  transition: transform .15s ease;
  flex: 0 0 auto;
}

details.tag-dd[open] .tag-dd__chev{
  transform: rotate(-135deg);
}

.tag-dd__body{
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 10px 12px 12px;
}

/* сетка чеков внутри dropdown */
.tag-dd__body .check-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 760px){
  .tag-dd__body .check-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* "Другое" — более плотная сетка */
@media (min-width: 980px){
  .tag-dd__body .check-grid.cols-3{ grid-template-columns: 1fr 1fr 1fr; }
}
@media (min-width: 641px) and (max-width: 979px){
  .tag-dd__body .check-grid.cols-3{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px){
  .tag-dd__body .check-grid.cols-3{ grid-template-columns: 1fr; }
}

/* =========================================================
   PASSIVE INBOX filters: раскрытие как в "Создать"
   (исправляет "пустое" раскрытие + убирает наслаивание/обрезку)
   ========================================================= */

/* ВАЖНО: правим только внутри панели "Входящие" котелка */
#panel-passive .tag-dd-list{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 640px){
  #panel-passive .tag-dd-list{ grid-template-columns: 1fr; }
}

/* Само поле (summary) — выглядит как select */
#panel-passive details.tag-dd{
  position: relative;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  border-radius: 16px;
  overflow: hidden; /* чтобы тело было аккуратно "внутри" */
}

#panel-passive details.tag-dd > summary{
  list-style: none;
  cursor: pointer;
  user-select: none;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 12px 14px;
  color: rgba(255,255,255,.90);
}

#panel-passive details.tag-dd > summary::-webkit-details-marker{ display:none; }

/* Стрелка как в "создать" */
#panel-passive .tag-dd__chev{
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.55);
  border-bottom: 2px solid rgba(255,255,255,.55);
  transform: rotate(45deg);
  transition: transform .15s ease;
  flex: 0 0 auto;
  opacity: .9;
}

#panel-passive details.tag-dd[open] .tag-dd__chev{
  transform: rotate(-135deg);
}

/* ГЛАВНОЕ: тело dropdown НЕ absolute, а обычный поток
   => ничего не "пропадает" и не обрезается */
#panel-passive .tag-dd__body{
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;

  border-top: 1px solid rgba(255,255,255,.08);
  padding: 10px 12px 12px;
  background: rgba(0,0,0,.10);

  max-height: 220px;        /* чтобы не раздувало страницу */
  overflow: auto;           /* появляется аккуратный внутренний скролл */
}

/* Сетка чекбоксов внутри dropdown */
#panel-passive .tag-dd__body .check-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

@media (min-width: 760px){
  #panel-passive .tag-dd__body .check-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* "Другое" может быть плотнее (опционально) */
#panel-passive .tag-dd__body .check-grid.cols-3{
  grid-template-columns: 1fr;
}
@media (min-width: 980px){
  #panel-passive .tag-dd__body .check-grid.cols-3{
    grid-template-columns: 1fr 1fr 1fr;
  }
}
@media (min-width: 760px) and (max-width: 979px){
  #panel-passive .tag-dd__body .check-grid.cols-3{
    grid-template-columns: 1fr 1fr;
  }
}

/* Чек-строки: чтобы было как в "создать" (мягкие плашки) */
#panel-passive .check-row{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}

/* Убираем случайное наслаивание от внешних контейнеров */
#panel-passive,
#panel-passive .note-box{
  overflow: visible !important;
}

/* ===== Cauldron: компактнее верх (убрать большие разрывы) ===== */

/* Заголовок "Котёл" */
.page-title,
h1.page-title,
.cauldron-title,
h1 {
  margin-bottom: 0px !important;
}

/* Линия вкладок (Мои записи / Поиск соигрока / ...) */
.cauldron-tabs,
.cauldron-nav,
.tabs-row {
  margin-bottom: -20px !important;
}

/* Кнопки "Создать / Активные / Истёкшие" */
.cauldron-subtabs,
.cauldron-actions,
.subtabs-row {
  margin: 10px 0 -20px !important;
}

/* Карточка с формой создания */
.cauldron-card,
.composer-card,
.note-box {
  margin-top: -40px !important;
  padding-top: 0px !important;
}

/* ===== Мои записи: визуальное разделение секций ===== */

.section-block {
  margin-top: 36px;
}

.section-block:first-child {
  margin-top: 0;
}

/* дополнительный воздух после блока */
.section-divider {
  margin: 28px 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(255,255,255,.06),
    transparent
  );
}

/* =========================================
   Cauldron / Мои записи / Активные
   - убрать "рябь" от мелких полосок
   - выровнять ширину всех 3 блоков
   ========================================= */

/* 1) если где-то остались тонкие разделители внутри карточек */
.cauldron-page .section-divider{
  display: none !important;
}

/* 2) убрать "полосатость" от border-top у элементов списка (если они ещё используются) */
.cauldron-page .inbox-item{
  border-top: 0 !important;
}

/* 3) вместо линий — даём аккуратный отступ между элементами */
.cauldron-page .inbox-item + .inbox-item{
  margin-top: 10px;
}

/* 4) на всякий — одинаковая ширина карточек (в т.ч. "Доска объявлений") */
.cauldron-page .feed-card{
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* 5) если "Доска объявлений" почему-то стала full-bleed из-за внешних обёрток */
.cauldron-body,
.cauldron-body > .feed-layout{
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
}

/* Убрать внутреннюю линию под заголовком в блоках "Активные" */
.cauldron-page .feed-card .section-title{
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

.cauldron-page .feed-card .section-divider{
  display: none !important;
}

.cauldron-page .feed-card{
  border-top: none !important;
}

/* Добить линию под заголовком внутри карточек (если она сделана через псевдоэлементы/инсет) */
.cauldron-page .feed-card .section-title::before,
.cauldron-page .feed-card .section-title::after{
  content: none !important;
  display: none !important;
}

.cauldron-page .feed-card .section-title{
  border: 0 !important;
  box-shadow: none !important; /* если линия сделана inset-shadow */
}

/* На всякий случай: любые hr/разделители внутри карточки */
.cauldron-page .feed-card hr{
  display: none !important;
  border: 0 !important;
  height: 0 !important;
}

.cauldron-page .feed-card .section-block{ box-shadow:none !important; border-top:0 !important; }

/* === Cauldron HUB / Active: убираем "рябь" у правого края и выравниваем ширины === */
.hub-active .feed-card {
  /* чтобы внутренние линии не "протыкали" скругление */
  overflow: hidden;
}

.hub-active .feed-card,
.hub-active .section-block {
  /* единая ширина всех карточек как у верхних */
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* Внутренние разделители НЕ должны упираться в края карточки */
.hub-active .section-divider,
.hub-active hr {
  margin-left: 16px !important;
  margin-right: 16px !important;
}

/* На всякий случай: если где-то разделитель сделан border-top’ом */
.hub-active .section-divider {
  border: 0 !important;
  height: 1px;
  background: rgba(255,255,255,.08);
}

/* Если внутри карточек есть элементы с border-top, тоже "внутрь" */
.hub-active .inbox-item {
  border-top-color: rgba(255,255,255,.08);
}

.exchange-card .searchdivider{
  height: 1px;
  background: rgba(255,255,255,.08);
  margin: 10px 0 16px;
}

.settings-avatar-circle {
    width: 120px;
    height: 120px;
    border-radius: 50%;          /* ← ключевой момент */
    overflow: hidden;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-avatar-circle {
    border-radius: 50% !important;
}

.exchange-topbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin-top:10px;
}

.exchange-left{
  display:flex;
  align-items:center;
  gap:10px;
}

.tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* === Cauldron: Exchange tabs fix (click + overlaps) === */
.exchange-card .tabs.pills {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;            /* чтобы не давило на узких экранах */
}

.exchange-card .tabs.pills .tabs-spacer {
  flex: 1 1 auto;
  min-width: 140px;
  opacity: .78;
  pointer-events: none;       /* важно: текст статуса не перехватывает клики */
}

.exchange-card .tabs.pills .tab {
  position: relative;
  z-index: 2;                 /* важно: кнопки всегда поверх */
}

/* === Caught box layout (убрать наложения текста/дат/кнопок) === */
.caught-box {
  margin-top: 12px;
}

.caught-box .note-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.caught-box .note-meta {
  margin-left: auto;
  font-size: 12px;
  opacity: .8;
  white-space: nowrap;        /* дата не ломает строку */
}

.caught-box .note-text {
  margin-top: 6px;
  overflow-wrap: anywhere;    /* длинные строки не рвут верстку */
  word-break: break-word;
}

.caught-box .note-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

.caught-box .caught-reply textarea.input {
  width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===== Fix overlap on "Игровой котелок" (cauldron_exchange) ===== */
body[data-page="cauldron_exchange"] .note-box{
  margin-top: 0 !important;
  padding-top: 14px !important; /* возвращаем нормальную внутреннюю отбивку */
}

/* ===== Cauldron / My notes: create form spacing + clean layout ===== */

.cauldron-page .composer-shell{
  padding: 18px 18px 16px;
  border-radius: 18px;
}

/* Заголовки/лейблы аккуратнее и компактнее */
.cauldron-page .composer-shell label,
.cauldron-page .composer-shell .field-label{
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
  opacity: .92;
}

/* Select + input — чуть ниже по высоте, более “ровные” */
.cauldron-page .composer-shell select,
.cauldron-page .composer-shell input[type="text"],
.cauldron-page .composer-shell input[type="search"]{
  height: 42px;
  border-radius: 14px;
}

/* Тулбар (B I U S) — меньше, ровнее, не распирает */
.cauldron-page .composer-shell .format-toolbar{
  display: flex;
  gap: 8px;
  margin: 10px 0 12px;
}

.cauldron-page .composer-shell .format-toolbar button{
  width: 32px;
  height: 32px;
  border-radius: 10px;
  padding: 0;
}

/* Поле текста — визуально ближе к макету */
.cauldron-page .composer-shell textarea,
.cauldron-page .composer-shell .textarea{
  min-height: 220px;
  border-radius: 16px;
}

/* Нижняя панель (Метки / Публикация / Дополнительно) — компактнее */
.cauldron-page .composer-shell .composer-bottom{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Кнопка публикации — чуть “плотнее” и без огромного отступа */
.cauldron-page .composer-shell .btn-primary,
.cauldron-page .composer-shell button[type="submit"]{
  margin-top: 10px;
  height: 40px;
  border-radius: 14px;
}

/* ===== Cauldron: centered top navigation everywhere ===== */

/* Общая “колонка” котла — одинаковая ширина и центр */
.cauldron-shell,
.cauldron-shell .cauldron-tabs,
.cauldron-shell .cauldron-tabs nav,
.cauldron-shell .cauldron-tabs .tabs,
.cauldron-shell .cauldron-tabs .pills{
  width: min(660px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

/* Главные табы котла (Мои записи / Поиск соигрока / ...) — центр */
.cauldron-shell .cauldron-tabs nav,
.cauldron-shell .cauldron-tabs .tabs{
  display: flex;
  justify-content: center;
}

/* Чтобы сами “пилюли” не растягивались и сидели аккуратно */
.cauldron-shell .cauldron-tabs a,
.cauldron-shell .cauldron-tabs button{
  flex: 0 0 auto;
}

/* Вторичные табы (Создать / Активные / Истёкшие) — центр в “Моих записях” */
.cauldron-body .cauldron-page > nav.tabs.pills{
  justify-content: center;
  width: min(860px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

/* ===== Cauldron top tabs — typography-based active state ===== */

.cauldron-shell .cauldron-tabs a{
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.65);
  transition: all .18s ease;
  padding: 8px 18px;
  border-radius: 8px;
  background: transparent;
  border: none;
}

/* hover */
.cauldron-shell .cauldron-tabs a:hover{
  color: rgba(255,255,255,.9);
}

.cauldron-shell .cauldron-tabs a.active,
.cauldron-shell .cauldron-tabs a[aria-current="page"]{
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;

  /* мягкое свечение текста */
  text-shadow: 0 0 8px rgba(165,140,255,.35);

  /* лёгкий контраст */
  letter-spacing: 0.25px;
}

.cauldron-shell .cauldron-tabs a.active::after,
.cauldron-shell .cauldron-tabs a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:20%;
  right:20%;
  bottom:-4px;
  height:2px;
  border-radius:2px;
  background:rgba(165,140,255,.7);
}

/* ===== Светлая тема ===== */

html[data-theme="light"] .cauldron-shell .cauldron-tabs a{
  color: rgba(0,0,0,.55);
}

html[data-theme="light"] .cauldron-shell .cauldron-tabs a:hover{
  color: rgba(0,0,0,.85);
}

html[data-theme="light"] .cauldron-shell .cauldron-tabs a.active,
html[data-theme="light"] .cauldron-shell .cauldron-tabs a[aria-current="page"]{
  color: #000;
}

/* ===== Cauldron top tabs — stronger active (uses .is-active) ===== */

.cauldron-shell .cauldron-tabs .cauldron-tab{
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.60);
  transition: all .18s ease;
  padding: 8px 18px;
  border-radius: 8px; /* не капсула */
  background: transparent;
  border: none;
}

.cauldron-shell .cauldron-tabs .cauldron-tab:hover{
  color: rgba(255,255,255,.88);
}

/* активная — заметнее */
.cauldron-shell .cauldron-tabs .cauldron-tab.is-active{
  font-size: 15px;
  font-weight: 650;
  color: #f0e6f7;
  letter-spacing: 0.25px;
  text-shadow: 0 0 10px rgba(165,140,255,.35);
}

/* Светлая тема */
html[data-theme="light"] .cauldron-shell .cauldron-tabs .cauldron-tab{
  color: rgba(0,0,0,.55);
}
html[data-theme="light"] .cauldron-shell .cauldron-tabs .cauldron-tab:hover{
  color: rgba(0,0,0,.85);
}
html[data-theme="light"] .cauldron-shell .cauldron-tabs .cauldron-tab.is-active{
  color: #000;
  text-shadow: 0 0 10px rgba(110,120,255,.25);
}

/* ===== Cauldron: My notes → Create (composer) compact layout ===== */

/* Карточка формы */
.cauldron-page .composer-shell{
  padding: 18px 18px 16px;
  border-radius: 18px;
}

/* Убираем влияние inline-margin из шаблона */
.cauldron-page .composer-shell[style]{
  margin-top: -px !important;
}

/* label "Куда отправить" — компактнее */
.cauldron-page .composer-shell .filters-grid{
  margin-bottom: 10px !important;
}
.cauldron-page .composer-shell .filters-grid label{
  display: block;
  font-size: 13px;
  line-height: 1.2;
  color: rgba(255,255,255,.78);
}
.cauldron-page .composer-shell .filters-grid select.input{
  margin-top: 8px;
  height: 40px;
  border-radius: 14px;
}

/* Тулбар B I U S — компактный */
.cauldron-page .composer-shell .feather-toolbar{
  display: flex;
  gap: 8px;
  margin-bottom: 10px !important;
}
.cauldron-page .composer-shell .ft-btn{
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 10px;
  line-height: 1;
}

/* Редактор — ключ: уменьшаем высоту */
.cauldron-page .composer-shell .feather-ce{
  min-height: 190px;         /* было слишком большим */
  max-height: 260px;         /* чтобы не раздувало карточку */
  overflow: auto;
  border-radius: 16px;
  padding: 14px 14px;
}

/* Счётчик символов справа снизу */
.cauldron-page .composer-shell .char-counter{
  display: flex;
  justify-content: flex-end;
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.55);
}

/* Аккордеоны (Метки/Публикация/Дополнительно) — как компактные строки */
.cauldron-page .composer-shell details.feed-filters{
  margin-top: 10px !important;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.cauldron-page .composer-shell details.feed-filters summary{
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: rgba(165,140,255,.95);
  list-style: none;
}
.cauldron-page .composer-shell details.feed-filters summary::-webkit-details-marker{
  display:none;
}

/* Кнопка "Опубликовать" — плотнее */
.cauldron-page .composer-shell button[type="submit"],
.cauldron-page .composer-shell .btn-primary{
  margin-top: 12px;
  height: 40px;
  border-radius: 14px;
}

/* ===== Composer: remove divider lines ===== */

.cauldron-page .composer-shell details.feed-filters{
  border-top: none !important;
  padding-top: 6px !important;
  margin-top: 6px !important;
}

/* убираем возможную линию над блоком аккордеонов */
.cauldron-page .composer-shell .char-counter{
  border-bottom: none !important;
}

/* если где-то есть hr или псевдолинии */
.cauldron-page .composer-shell hr{
  display: none !important;
}

/* ===== Cauldron → My notes → Active: tighten search block ===== */

/* общий контейнер активных */
.cauldron-page.cauldron-active,
body[data-page="cauldron_active"] .cauldron-page{
  /* на случай разных оберток — не критично */
}

/* поисковая строка под табами: уменьшаем верхний отступ */
.cauldron-page .active-search,
.cauldron-page .search-row,
.cauldron-page form.cauldron-search{
  margin-top: 8px !important;   /* было слишком далеко */
  margin-bottom: 14px !important;
}

/* если инпут сидит в карточке — убираем лишний padding сверху */
.cauldron-page .active-search .feed-card,
.cauldron-page .search-row .feed-card{
  padding-top: 12px !important;
}

/* ===== Cauldron: tighten spacing under secondary tabs (Create/Active/Expired) ===== */

/* 1) Между верхним меню котла и вторичными табами */
.cauldron-shell .cauldron-tabs{
  margin-bottom: -10px !important;
}

/* 2) Вторичные табы (Создать/Активные/Истёкшие) */
.cauldron-body .cauldron-page > nav.tabs.pills{
  margin-top: 6px !important;
  margin-bottom: 10px !important;
}

/* 3) Подтяжка первого контентного блока после вторичных табов — перечисляем типовые блоки */
.cauldron-body .cauldron-page > nav.tabs.pills + .composer-shell,
.cauldron-body .cauldron-page > nav.tabs.pills + form,
.cauldron-body .cauldron-page > nav.tabs.pills + .feed-card,
.cauldron-body .cauldron-page > nav.tabs.pills + .search-row,
.cauldron-body .cauldron-page > nav.tabs.pills + .active-search,
.cauldron-body .cauldron-page > nav.tabs.pills + .expired-header,
.cauldron-body .cauldron-page > nav.tabs.pills + .expired-search,
.cauldron-body .cauldron-page > nav.tabs.pills + .toolbar,
.cauldron-body .cauldron-page > nav.tabs.pills + .filters-grid{
  margin-top: -4px !important;
}

.cauldron-body .cauldron-page > nav.tabs.pills + div{
  margin-top: -16px !important;
}

/* ===== Cauldron Active: equal spacing between cards ===== */

/* если это именно карточки */
.cauldron-page .feed-card{
  margin-bottom: 10px !important;
}

/* чтобы у последней не было лишнего хвоста */
.cauldron-page .feed-card:last-child{
  margin-bottom: 0 !important;
}

/* ===== Активные — выровнять расстояния и убрать полоски ===== */

/* убираем возможные старые нижние отступы */
.cauldron-page .feed-card{
  margin-bottom: 0 !important;
  border-top: none !important;
}

/* равное расстояние ТОЛЬКО между карточками */
.cauldron-page .feed-card + .feed-card{
  margin-top: 16px !important;
  margin-bottom: 10px !important;
}

/* если используются псевдо-разделители */
.cauldron-page .feed-card::before,
.cauldron-page .feed-card::after{
  display: none !important;
}

/* Заголовки секций */
.section-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 14px;
  padding-bottom: 10px;
}

/* =====================
   FEED/NOTES: поднять счётчик символов наверх + убрать дубль
===================== */

/* контейнер редактора делаем якорем для абсолютного позиционирования */
.notes-page .notes-compose .feather-ce-wrap{
  position: relative;
}

/* основной счётчик (тот, который реально обновляется JS) — вверх/вправо */
.notes-page .notes-compose #notes-compose-counter{
  position: absolute;
  top: 20px;
  right: 12px;
  margin: 0 !important;
  width: auto;
  z-index: 2;
  pointer-events: none;
}

/* если нужно чуть “воздуха”, чтобы не лип к границе */
.notes-page .notes-compose #feather-note-editor{
  padding-top: 22px; /* можно 18-26px по вкусу */
}

/* скрываем второй (лишний) .char-counter после {{ form.text }} */
.notes-page .notes-compose .feather-ce-wrap > .char-counter:not(#notes-compose-counter){
  display: none !important;
}

/* =====================
   Pages: Settings (match FEED) — FINAL OVERRIDE
   Вставить в самый конец pages.css
===================== */

.settings-page{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1px 18px 0; /* как feed */
}

/* Общая карточка как у feed: без обводки, мягкая тень */
.settings-card{
  background: var(--bg-card);
  border: none !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 34px rgba(0,0,0,.22) !important;
  padding: 18px 20px !important;
}

/* Верхняя большая карточка (аватар + ник) чуть “воздушнее” */
.settings-main-card{
  padding: 20px 22px !important;
}

/* Сетка карточек ниже: 2 колонки как на скрине */
.settings-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

@media (max-width: 980px){
  .settings-grid{ grid-template-columns: 1fr; }
}

/* Верхняя раскладка */
.settings-top-grid{
  grid-template-columns: 340px 1fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 900px){
  .settings-top-grid{ grid-template-columns: 1fr; }
}

/* Аватар/кнопки */
.settings-avatar-circle{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

/* Поля/селекты в настройках — “как в feed” */
.settings-page input[type="text"],
.settings-page input[type="email"],
.settings-page input[type="password"],
.settings-page select{
  height: 38px;
  border-radius: 16px;
  border: 1px solid var(--border-input);
  background: var(--bg-elevated);
  color: var(--text-main);
}

.settings-page input:focus,
.settings-page select:focus{
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring);
}

/* Чуть аккуратнее отступы внутри карточек */
.settings-card .settings-title{
  margin: 0 0 6px;
}

.settings-card .settings-subtitle{
  margin: 0 0 10px;
}

.settings-hint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
}

/* =====================
   Settings: link-button fix
===================== */

.settings-link-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 38px;
  padding: 0 16px;
  border-radius: 999px;

  text-decoration: none; /* убираем underline */
  line-height: 1;
}

.settings-link-btn:hover{
  text-decoration: none;
}

/* =====================
   Cauldron / My notes: light+dark tweaks
   (forms, blocks, sliders)
===================== */

/* 1) Локальные переменные котла (не трогаем глобальную палитру) */
.cauldron-page{
  --cz-card-bg: var(--bg-card);
  --cz-elev-bg: var(--bg-elevated);
  --cz-border:  var(--border-subtle);
  --cz-input-border: var(--border-input);
  --cz-shadow:  0 10px 34px rgba(0,0,0,.18);
}

/* Светлая тема: добавляем “объём” и границы (иначе всё белое) */
html[data-theme="light"] .cauldron-page{
  --cz-card-bg: rgba(255,255,255,.92);
  --cz-elev-bg: rgba(255,255,255,.98);
  --cz-border:  rgba(15, 23, 42, .10);
  --cz-input-border: rgba(15, 23, 42, .16);
  --cz-shadow:  0 12px 36px rgba(15, 23, 42, .10);
}

/* Тёмная тема: чуть мягче границы, чтобы не “резало” */
html[data-theme="dark"] .cauldron-page{
  --cz-border: rgba(255,255,255,.07);
  --cz-input-border: rgba(255,255,255,.10);
  --cz-shadow: 0 10px 34px rgba(0,0,0,.22);
}

/* 2) Главная карточка композера (Создать) — как feed: без обводки, мягкая тень */
.cauldron-page .feed-card,
.cauldron-page .composer-shell,
.cauldron-page .notes-compose-card{
  background: var(--cz-card-bg);
  border: none;
  border-radius: 20px;
  box-shadow: var(--cz-shadow);
}

/* 3) Внутренние “секции” (Метки/Публикация/Дополнительно) — читаемые в light */
.cauldron-page .section-block,
.cauldron-page .compose-section,
.cauldron-page .notes-compose-section{
  background: transparent;          /* чтобы не было “второй белой подложки” */
  border: 0;
}

/* Заголовки секций */
.cauldron-page .compose-section-title,
.cauldron-page .section-title,
.cauldron-page h3.section-title{
  color: var(--text-main);
  margin: 16px 0 10px;
}

/* 4) Инпуты/селекты/textarea в котле */
.cauldron-page input[type="text"],
.cauldron-page input[type="url"],
.cauldron-page textarea,
.cauldron-page select{
  background: var(--cz-elev-bg);
  color: var(--text-main);
  border: 1px solid var(--cz-input-border);
  border-radius: 16px;
  box-shadow: none;
}

.cauldron-page input[type="text"]:focus,
.cauldron-page input[type="url"]:focus,
.cauldron-page textarea:focus,
.cauldron-page select:focus{
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring);
}

/* Плейсхолдер — чтобы в light не был “слишком бледным” */
html[data-theme="light"] .cauldron-page ::placeholder{
  color: rgba(15, 23, 42, .45);
}
html[data-theme="dark"] .cauldron-page ::placeholder{
  color: rgba(255,255,255,.38);
}

/* 5) Чипы/кнопки (если в котле используются табы/пилюли) */
.cauldron-page .chip,
.cauldron-page .pill,
.cauldron-page .tab-pill{
  border: 1px solid var(--cz-border);
}

/* 6) Слайдеры в блоке “Публикация” — одинаковый вид в обеих темах */
.cauldron-page input[type="range"]{
  width: 100%;
  accent-color: var(--accent); /* и в light, и в dark */
}

/* Подписи/описания около слайдеров — чтобы читались в light */
html[data-theme="light"] .cauldron-page .muted,
html[data-theme="light"] .cauldron-page .hint,
html[data-theme="light"] .cauldron-page .small{
  color: rgba(15, 23, 42, .62);
}

/* 7) Небольшая унификация отступов внутри формы (чтобы было как на тёмной) */
.cauldron-page .notes-compose-footer,
.cauldron-page .compose-footer{
  margin-top: 12px;
  gap: 12px;
}

/* =====================
   Cauldron / My Notes — LIGHT theme contrast fix
   (бордеры, подложки, тексты, разделители)
===================== */
html[data-theme="light"] .cauldron-page .composer-shell{
  --c-surface: rgba(255,255,255,.92);
  --c-elev:    rgba(255,255,255,.98);
  --c-border:  rgba(0,0,0,.10);
  --c-border2: rgba(0,0,0,.14);
  --c-text:    rgba(0,0,0,.90);
  --c-muted:   rgba(0,0,0,.60);

  background: var(--c-surface);
  border: 1px solid var(--c-border);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  color: var(--c-text);
}

/* Текст/подсказки/счётчики */
html[data-theme="light"] .cauldron-page .composer-shell .hint,
html[data-theme="light"] .cauldron-page .composer-shell .char-counter,
html[data-theme="light"] .cauldron-page .composer-shell .meta,
html[data-theme="light"] .cauldron-page .composer-shell .small{
  color: var(--c-muted);
}

/* Поля ввода внутри композера */
html[data-theme="light"] .cauldron-page .composer-shell input[type="text"],
html[data-theme="light"] .cauldron-page .composer-shell input[type="url"],
html[data-theme="light"] .cauldron-page .composer-shell input[type="search"],
html[data-theme="light"] .cauldron-page .composer-shell textarea,
html[data-theme="light"] .cauldron-page .composer-shell select{
  background: var(--c-elev);
  border-color: var(--c-border2);
  color: var(--c-text);
}

html[data-theme="light"] .cauldron-page .composer-shell input::placeholder,
html[data-theme="light"] .cauldron-page .composer-shell textarea::placeholder{
  color: rgba(0,0,0,.42);
}

/* Разделители/линии/нижние границы */
html[data-theme="light"] .cauldron-page .composer-shell hr,
html[data-theme="light"] .cauldron-page .composer-shell .divider,
html[data-theme="light"] .cauldron-page .composer-shell .composer-bottom,
html[data-theme="light"] .cauldron-page .composer-shell .row,
html[data-theme="light"] .cauldron-page .composer-shell .line{
  border-color: var(--c-border) !important;
}

/* details/accordion (если у тебя “Метки/Публикация/Дополнительно” на details/summary) */
html[data-theme="light"] .cauldron-page .composer-shell details{
  border-color: var(--c-border) !important;
}
html[data-theme="light"] .cauldron-page .composer-shell summary{
  color: var(--c-text);
}

/* “Другое” (чекбоксы/группы) — лёгкая подложка, чтобы блок читался */
html[data-theme="light"] .cauldron-page .composer-shell .filter-group,
html[data-theme="light"] .cauldron-page .composer-shell .checkbox-grid,
html[data-theme="light"] .cauldron-page .composer-shell .extra-box{
  background: rgba(0,0,0,.02);
  border: 1px solid var(--c-border);
}

/* маленькие “квадраты” чекбоксов часто теряются на светлом — усиливаем обводку */
html[data-theme="light"] .cauldron-page .composer-shell input[type="checkbox"]{
  accent-color: var(--accent);
}
html[data-theme="light"] .cauldron-page .composer-shell label{
  color: var(--c-text);
}

/* Верхний поиск/селект в котле (если есть отдельная обёртка search-wrap) */
html[data-theme="light"] .cauldron-page .search-wrap{
  background: rgba(0,0,0,.02);
  border: 1px solid var(--c-border);
}
html[data-theme="light"] .cauldron-page .search-wrap input{
  color: var(--c-text);
}

/* =====================
   Pages: Rules (pretty + readable)
===================== */
.rules-page .page-card{
  /* ближе к feed-ощущению: мягче, чище */
  padding: 22px 22px 18px;
}

.rules-page .page-card h1{
  margin: 0 0 10px;
  font-size: 32px;
  line-height: 1.12;
  letter-spacing: -0.2px;
}

.rules-page .page-card .muted{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--chip-text);
  font-size: 13px;
  opacity: 1;
}

.rules-page .page-card hr{
  border: 0;
  height: 1px;
  margin: 16px 0;
  background: var(--border-subtle);
  opacity: .7;
  
}

.rules-page .page-card h2{
  margin: 18px 0 10px;
  font-size: 18px;
}

.rules-page .page-card h3{
  margin: 16px 0 8px;
  font-size: 15px;
  line-height: 1.25;
}

.rules-page .page-card p,
.rules-page .page-card li{
  line-height: 1.65;
  margin: 0 0 10px;
}

/* “Краткое содержание” — чтобы выглядело как аккуратная вставка,
   не меняя HTML (таргетим по первому ul после h2) */
.rules-page .page-card h2 + ul{
  margin: 10px 0 14px;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  list-style: none;
}

.rules-page .page-card h2 + ul li{
  position: relative;
  padding-left: 18px;
  margin: 8px 0;
}

.rules-page .page-card h2 + ul li::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  opacity: .9;
}

/* Обычные списки дальше по тексту — компактнее и ровнее */
.rules-page .page-card ul{
  margin: 8px 0 12px 18px;
}
.rules-page .page-card ul li{
  margin: 6px 0;
}

/* Ссылки: спокойные, но заметные */
.rules-page .page-card a{
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.rules-page .page-card a:hover{
  text-decoration-thickness: 2px;
}

/* Таблица нарушений — чуть визуально “встроить” в страницу */
.rules-page .rules-table-wrap{
  margin-top: 14px;
  border-radius: 16px;
}

/* Мобильная адаптация */
@media (max-width: 520px){
  .rules-page .page-card{
    padding: 16px 14px 14px;
  }

  .rules-page .page-card h1{
    font-size: 24px;
  }

  .rules-page .page-card h2{
    font-size: 16px;
    margin-top: 16px;
  }

  .rules-page .page-card h3{
    font-size: 14px;
  }

  /* summary-box становится плотнее */
  .rules-page .page-card h2 + ul{
    padding: 10px 12px;
    border-radius: 14px;
  }
}

/* =======================
   HELP PAGE (isolated)
   <div class="page-wrap help-page">
======================= */

.page-wrap.help-page {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 32px 18px 42px;
}

/* Основная карточка */
.page-wrap.help-page .page-card {
  background: var(--bg-card);
  border-radius: 22px;
  padding: 28px 30px;
  box-shadow: 0 12px 40px rgba(0,0,0,.25);
  border: 1px solid var(--border-subtle);
}

/* Заголовок */
.page-wrap.help-page h1 {
  margin: 0 0 12px;
  font-size: 28px;
  color: var(--text-main);
}

/* Подзаголовок / описание */
.page-wrap.help-page .muted {
  color: var(--text-muted);
  font-size: 14px;
  margin-bottom: 18px;
}

/* Разделители */
.page-wrap.help-page hr {
  border: none;
  height: 1px;
  background: var(--border-subtle);
  margin: 26px 0;
}

/* Заголовки разделов */
.page-wrap.help-page h2 {
  font-size: 18px;
  margin: 24px 0 14px;
  color: var(--text-main);
}

/* =======================
   FAQ ACCORDION
======================= */

.page-wrap.help-page details {
  background: var(--bg-elevated);
  border-radius: 16px;
  border: 1px solid var(--border-subtle);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: background .2s ease, border-color .2s ease;
}

.page-wrap.help-page details[open] {
  background: var(--bg-card);
  border-color: var(--accent-border);
}

.page-wrap.help-page summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: var(--text-main);
  list-style: none;
  position: relative;
  padding-right: 22px;
}

/* убираем стандартный маркер */
.page-wrap.help-page summary::-webkit-details-marker {
  display: none;
}

/* стрелка */
.page-wrap.help-page summary::after {
  content: "›";
  position: absolute;
  right: 0;
  top: 0;
  transition: transform .2s ease;
  color: var(--text-muted);
}

.page-wrap.help-page details[open] summary::after {
  transform: rotate(90deg);
}

/* текст внутри */
.page-wrap.help-page details p {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* списки */
.page-wrap.help-page ul {
  margin: 10px 0 0 18px;
}

.page-wrap.help-page li {
  margin-bottom: 6px;
  line-height: 1.5;
}

/* =======================
   MOBILE
======================= */

@media (max-width: 768px) {

  .page-wrap.help-page .page-card {
    padding: 20px 18px;
    border-radius: 18px;
  }

  .page-wrap.help-page h1 {
    font-size: 22px;
  }

  .page-wrap.help-page h2 {
    font-size: 16px;
  }

  .page-wrap.help-page summary {
    font-size: 14px;
  }

  .page-wrap.help-page details p {
    font-size: 13px;
  }
}

/* =====================
   Pages: Terms (match RULES)
===================== */

.terms-page{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1px 18px 0; /* как feed/rules */
}

.terms-page .page-card{
  background: var(--bg-card);
  border: none;
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(0,0,0,.22);
  padding: 22px 22px 26px;
}

.terms-page h1{
  font-size: 30px;
  margin: 0 0 6px;
  color: var(--text-main);
  letter-spacing: .2px;
}

.terms-page .muted,
.terms-page .meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 18px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--text-muted);
  font-size: 12px;
}

.terms-page h2{
  margin: 20px 0 10px;
  font-size: 18px;
  color: var(--text-main);
}

.terms-page h3{
  margin: 14px 0 8px;
  font-size: 15px;
  color: var(--text-main);
}

.terms-page p{
  margin: 0 0 10px;
  color: var(--text-muted);
  line-height: 1.65;
}

.terms-page ul,
.terms-page ol{
  margin: 10px 0 14px;
  padding-left: 20px;
  color: var(--text-muted);
}

.terms-page li{
  margin: 6px 0;
  line-height: 1.55;
}

.terms-page hr{
  margin: 18px 0;
  border: none;
  height: 1px;
  background: var(--border-subtle);
}

.terms-page a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.terms-page a:hover{
  color: var(--accent-hover);
}

/* =====================
   Pages: Privacy (match RULES)
===================== */

.privacy-page{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 1px 18px 0; /* как feed/rules */
}

.privacy-page .page-card{
  background: var(--bg-card);
  border: none;
  border-radius: 20px;
  box-shadow: 0 10px 34px rgba(0,0,0,.22);
  padding: 22px 22px 26px;
}

.privacy-page h1{
  font-size: 30px;
  margin: 0 0 6px;
  color: var(--text-main);
  letter-spacing: .2px;
}

.privacy-page .muted,
.privacy-page .meta{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 18px;
  padding: 6px 10px;
  border-radius: 20px;
  border: 1px solid var(--border-soft);
  background: var(--chip-bg);
  color: var(--text-muted);
  font-size: 12px;
}

.privacy-page h2{
  margin: 20px 0 10px;
  font-size: 18px;
  color: var(--text-main);
}

.privacy-page h3{
  margin: 14px 0 8px;
  font-size: 15px;
  color: var(--text-main);
}

.privacy-page p{
  margin: 0 0 10px;
  color: var(--text-muted);
  line-height: 1.65;
}

.privacy-page ul,
.privacy-page ol{
  margin: 10px 0 14px;
  padding-left: 20px;
  color: var(--text-muted);
}

.privacy-page li{
  margin: 6px 0;
  line-height: 1.55;
}

.privacy-page hr{
  margin: 18px 0;
  border: none;
  height: 1px;
  background: var(--border-subtle);
}

.privacy-page a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.privacy-page a:hover{
  color: var(--accent-hover);
}

/* =====================
   Mobile tweaks (match RULES)
===================== */
@media (max-width: 640px){
  .terms-page,
  .privacy-page{
    padding: 1px 14px 0;
  }

  .terms-page .page-card,
  .privacy-page .page-card{
    padding: 18px 16px 22px;
    border-radius: 18px;
  }

  .terms-page h1,
  .privacy-page h1{
    font-size: 22px;
  }

  .terms-page h2,
  .privacy-page h2{
    font-size: 16px;
  }
}


/* =====================
   Pages: Contacts
===================== */

.contacts-page{
  max-width: 640px;
  margin: 0 auto;
  padding: 0 18px 40px;
}

.contacts-page .page-card{
  padding: 24px 26px 30px;
  border-radius: 22px;
}

.contacts-page h1{
  font-size: 24px;
  margin-bottom: 14px;
}

.contacts-page .muted{
  display: block;
  margin-bottom: 18px;
  line-height: 1.5;
}

.contacts-page .form-stack{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.contacts-page .form-row{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contacts-page input,
.contacts-page textarea{
  width: 100%;
  border-radius: 14px;
  padding: 10px 12px;
  border: 1px solid var(--border-input);
  background: var(--bg-elevated);
  color: var(--text-main);
  font: inherit;
}

.contacts-page textarea{
  min-height: 120px;
  resize: vertical;
}

.contacts-page input:focus,
.contacts-page textarea:focus{
  outline: none;
  border-color: var(--accent-border);
  box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-ring);
}

@media (max-width: 640px){

  .terms-page,
  .privacy-page,
  .help-page,
  .rules-page{
    padding: 0 14px 30px;
  }

  .terms-page .page-card,
  .privacy-page .page-card,
  .help-page .page-card,
  .rules-page .page-card{
    padding: 20px 18px 24px;
  }

  .terms-page h1,
  .privacy-page h1{
    font-size: 22px;
  }

}

/* =========================
   Rules table — LIGHT THEME
========================= */

[data-theme="light"] .rules-table {
  background: #ffffff;
  border: 1px solid #e3e6ef;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

[data-theme="light"] .rules-table thead {
  background: #f4f6fb;
}

[data-theme="light"] .rules-table th {
  color: #1f2430;
  border-bottom: 1px solid #e3e6ef;
}

[data-theme="light"] .rules-table td {
  color: #2a2f3a;
  border-bottom: 1px solid #eef0f6;
}

[data-theme="light"] .rules-table tr:last-child td {
  border-bottom: none;
}

/* =========================================================
   Cauldron — LIGHT THEME fixes (overrides inline dark rgba)
   Вставить в самый низ pages.css
========================================================= */

html[data-theme="light"] .cauldron-shell .cauldron-tabs{
  background: rgba(0,0,0,.035) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 10px 26px rgba(10,15,30,.06) !important;
}

html[data-theme="light"] .cauldron-shell .cauldron-tabs a.active::after,
html[data-theme="light"] .cauldron-shell .cauldron-tabs a[aria-current="page"]::after{
  background: rgba(125,105,255,.65) !important;
}

/* общие “карточки котла” */
html[data-theme="light"] body[data-page^="cauldron"] .feed-card{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 14px 34px rgba(10,15,30,.07) !important;
}

/* composer shell (создание/мои записи) */
html[data-theme="light"] body[data-page^="cauldron"] .composer-shell{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
}

/* tag dropdowns (Метки) — перебиваем тёмные rgba из .tag-dd__summary */
html[data-theme="light"] .tag-dd__summary{
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(0,0,0,.02) !important;
  color: rgba(0,0,0,.88) !important;
}
html[data-theme="light"] .tag-dd[open] .tag-dd__summary{
  background: rgba(0,0,0,.035) !important;
}

/* чекбоксы в сетках (check-grid/check-row) — делаем читаемо на светлой */
html[data-theme="light"] .check-row{
  color: rgba(0,0,0,.86) !important;
}
html[data-theme="light"] .check-row input[type="checkbox"]{
  accent-color: var(--accent);
}
html[data-theme="light"] .check-row input[type="checkbox"]:not(:checked){
  filter: saturate(.9);
}

/* pills в фильтрах доски (label.pill > input) */
html[data-theme="light"] .pill{
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(0,0,0,.02) !important;
  color: rgba(0,0,0,.86) !important;
}
html[data-theme="light"] .pill:hover{
  border-color: rgba(125,105,255,.35) !important;
  background: rgba(125,105,255,.08) !important;
}
html[data-theme="light"] .pill input[type="checkbox"]{
  accent-color: var(--accent);
}

html[data-theme="light"] body[data-page="notes"] .tabs.pills .pill.is-active,
html[data-theme="light"] body[data-page="notes"] .tabs.pills .pill.active,
html[data-theme="light"] body[data-page="notes"] .tabs.pills .pill[aria-current="page"]{
  background: #c8a8ff !important;
  border-color: #c8a8ff !important;
  color: #20183a !important;
}

html[data-theme="light"] body[data-page="notes"] .tabs.pills .pill.is-active:hover,
html[data-theme="light"] body[data-page="notes"] .tabs.pills .pill.active:hover,
html[data-theme="light"] body[data-page="notes"] .tabs.pills .pill[aria-current="page"]:hover{
  background: #c8a8ff !important;
  border-color: #c8a8ff !important;
  color: #20183a !important;
}

/* “Другое” блок (fieldset/рамка) — если он выглядит слишком “пусто” */
html[data-theme="light"] body[data-page^="cauldron"] .mini-dropdown-host,
html[data-theme="light"] body[data-page^="cauldron"] details.tag-dd{
  color: rgba(0,0,0,.86) !important;
}

/* ===== Board (Доска объявлений) — перебиваем inline dark styles ===== */
/* элементы списка */
html[data-theme="light"] body[data-page="cauldron_board"] .item{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 24px rgba(10,15,30,.06) !important;
}
html[data-theme="light"] body[data-page="cauldron_board"] .item .meta,
html[data-theme="light"] body[data-page="cauldron_board"] .subtle{
  color: rgba(0,0,0,.62) !important;
}

/* badge (дата) */
html[data-theme="light"] body[data-page="cauldron_board"] .badge{
  background: rgba(0,0,0,.035) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: rgba(0,0,0,.70) !important;
}

/* меню (кнопка ⇁ и выпадашка) — в шаблоне они тёмные */
html[data-theme="light"] body[data-page^="cauldron"] .menu-btn{
  border: 1px solid rgba(0,0,0,.12) !important;
  background: rgba(0,0,0,.03) !important;
  color: rgba(0,0,0,.70) !important;
}
html[data-theme="light"] body[data-page^="cauldron"] .note-menu{
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.92) !important;
  box-shadow: 0 18px 40px rgba(10,15,30,.18) !important;
  backdrop-filter: blur(10px);
}
html[data-theme="light"] body[data-page^="cauldron"] .menu-item{
  color: rgba(0,0,0,.86) !important;
}
html[data-theme="light"] body[data-page^="cauldron"] .menu-item:hover{
  background: rgba(0,0,0,.04) !important;
}

/* btn-soft из шаблонов доски/объявлений (inline) */
html[data-theme="light"] body[data-page^="cauldron"] .btn-soft{
  background: rgba(0,0,0,.03) !important;
  border: 1px solid rgba(0,0,0,.12) !important;
  color: rgba(0,0,0,.78) !important;
}

/* ===== Exchange (Игровой котелок) — note-box/caught-box/caught-empty из cauldron.html ===== */
html[data-theme="light"] body[data-page="cauldron_exchange"] .note-box,
html[data-theme="light"] body[data-page="cauldron_exchange"] .caught-box{
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(0,0,0,.02) !important;
}
html[data-theme="light"] body[data-page="cauldron_exchange"] .caught-empty{
  border: 1px dashed rgba(0,0,0,.18) !important;
  background: rgba(0,0,0,.018) !important;
  color: rgba(0,0,0,.55) !important;
}
html[data-theme="light"] body[data-page="cauldron_exchange"] .note-meta{
  color: rgba(0,0,0,.55) !important;
}

/* tabs pills в котелке (если “бледные”) */
html[data-theme="light"] body[data-page="cauldron_exchange"] .tabs.pills .tab{
  background: rgba(0,0,0,.03) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: rgba(0,0,0,.72) !important;
}
html[data-theme="light"] body[data-page="cauldron_exchange"] .tabs.pills .tab.is-active,
html[data-theme="light"] body[data-page="cauldron_exchange"] .tabs.pills .tab.active{
  background: rgba(125,105,255,.16) !important;
  border-color: rgba(125,105,255,.25) !important;
  color: rgba(0,0,0,.88) !important;
}

/* инпуты/текстарии внутри котла — чтобы не “проваливались” в белое */
html[data-theme="light"] body[data-page^="cauldron"] .input,
html[data-theme="light"] body[data-page^="cauldron"] textarea.input,
html[data-theme="light"] body[data-page^="cauldron"] input.input,
html[data-theme="light"] body[data-page^="cauldron"] select{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(0,0,0,.10) !important;
  color: rgba(0,0,0,.86) !important;
}
html[data-theme="light"] body[data-page^="cauldron"] .input::placeholder{
  color: rgba(0,0,0,.45) !important;
}

/* ===== Cauldron/Board: light theme — make search placeholder readable ===== */
html[data-theme="light"] .cauldron-shell .search-wrap input{
  color: rgba(0,0,0,.88);
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
}

html[data-theme="light"] .cauldron-shell .search-wrap input::placeholder{
  color: rgba(0,0,0,.45);
  opacity: 1; /* важно: в некоторых браузерах placeholder “приглушается” */
}

/* =========================================================
   Cauldron (общие правки светлой темы)
   ========================================================= */

/* 1–2) Подложка/плашка под названиями (верхние табы котла) */
html[data-theme="light"] .cauldron-shell .cauldron-tabs{
  background: rgba(0,0,0,.03);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 10px 24px rgba(10,15,30,.05);
}

/* Чтобы активное подчёркивание не терялось на светлой */
html[data-theme="light"] .cauldron-shell .cauldron-tabs a.active::after,
html[data-theme="light"] .cauldron-shell .cauldron-tabs a[aria-current="page"]::after{
  background: rgba(125,105,255,.75);
}

/* 3–4) Чекбоксы (чуть контрастнее в светлой теме) */
html[data-theme="light"] input[type="checkbox"]{
  accent-color: var(--accent);
}
html[data-theme="light"] .check-row input[type="checkbox"]:not(:checked){
  filter: brightness(.85) contrast(1.15);
}


/* =========================================================
   Cauldron Ads (Поиск соигрока) — светлая тема
   body_page = cauldron_ads
   ========================================================= */

html[data-theme="light"] body[data-page="cauldron_search"] .search-card{
  /* feed-card уже светлый, но на всякий случай даём “карточный” вид */
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 34px rgba(10,15,30,.06);
}

html[data-theme="light"] body[data-page="cauldron_search"] .search-item{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 24px rgba(10,15,30,.06) !important;
}

html[data-theme="light"] body[data-page="cauldron_search"] .search-meta,
html[data-theme="light"] body[data-page="cauldron_search"] .search-subtle{
  color: rgba(0,0,0,.62) !important;
}

html[data-theme="light"] body[data-page="cauldron_search"] .search-badge{
  background: rgba(0,0,0,.035) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: rgba(0,0,0,.70) !important;
}

html[data-theme="light"] body[data-page="cauldron_search"] .tag-pill{
  background: rgba(125,105,255,.08) !important;
  border: 1px solid rgba(125,105,255,.22) !important;
  color: rgba(0,0,0,.78) !important;
}

html[data-theme="light"] body[data-page="cauldron_search"] .searchdivider{
  border-top: 1px solid rgba(0,0,0,.08) !important;
}

html[data-theme="light"] body[data-page="cauldron_search"] .empty{
  background: rgba(0,0,0,.02) !important;
  border: 1px dashed rgba(0,0,0,.16) !important;
  color: rgba(0,0,0,.62) !important;
}

/* Внутренние “ads-item” с inline background:rgba(255,255,255,02) (ожидающие отклики) */
html[data-theme="light"] body[data-page="cauldron_search"] .search-item[style*="background:rgba(255,255,255,02)"]{
  background: rgba(0,0,0,.02) !important;
}

/* Reply-box разделители в светлой */
html[data-theme="light"] body[data-page="cauldron_search"] .reply-box{
  border-top: 1px dashed rgba(0,0,0,.14) !important;
}


/* =========================================================
   Cauldron Exchange (Игровой котелок) — светлая тема
   body_page = cauldron_exchange
   ========================================================= */

html[data-theme="light"] body[data-page="cauldron_exchange"] .exchange-card{
  background: rgba(255,255,255,.82) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 14px 34px rgba(10,15,30,.06) !important;
}

html[data-theme="light"] body[data-page="cauldron_exchange"] .subtle,
html[data-theme="light"] body[data-page="cauldron_exchange"] .note-meta{
  color: rgba(0,0,0,.62) !important;
}

html[data-theme="light"] body[data-page="cauldron_exchange"] .tab{
  background: rgba(0,0,0,.02) !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  color: rgba(0,0,0,.78) !important;
}
html[data-theme="light"] body[data-page="cauldron_exchange"] .tab.is-active{
  background: rgba(125,105,255,.12) !important;
  border-color: rgba(125,105,255,.28) !important;
  color: rgba(0,0,0,.86) !important;
}

html[data-theme="light"] body[data-page="cauldron_exchange"] .note-box,
html[data-theme="light"] body[data-page="cauldron_exchange"] .caught-box{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 10px 24px rgba(10,15,30,.06) !important;
}

html[data-theme="light"] body[data-page="cauldron_exchange"] .caught-empty{
  background: rgba(0,0,0,.02) !important;
  border: 1px dashed rgba(0,0,0,.16) !important;
  color: rgba(0,0,0,.62) !important;
}

/* ===== Cauldron/Board: light theme — make search placeholder readable ===== */
html[data-theme="light"] .cauldron-shell .search-wrap input{
  color: rgba(0,0,0,.88);
  border-color: rgba(0,0,0,.14);
  background: rgba(0,0,0,.03);
}

html[data-theme="light"] .cauldron-shell .search-wrap input::placeholder{
  color: rgba(0,0,0,.45);
  opacity: 1; /* важно: в некоторых браузерах placeholder “приглушается” */
}

/* =========================================================
   CHECKBOXES — Light theme boost (contrast + “volume”)
   Вставить в самый низ pages.css (ниже остальных light overrides)
========================================================= */

/* 1) Глобальные кастом-чекбоксы в светлой теме
   (у нас checkbox = appearance:none, поэтому accent-color почти не влияет) */
html[data-theme="light"] input[type="checkbox"]{
  border-color: rgba(15, 23, 42, .22);
  background: rgba(15, 23, 42, .035);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset;
}

html[data-theme="light"] input[type="checkbox"]:hover{
  border-color: rgba(125,105,255,.55);
  background: rgba(125,105,255,.10);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 2px rgba(125,105,255,.10);
}

html[data-theme="light"] input[type="checkbox"]:checked{
  /* оставляем твою фирменную “фиолетовую” заливку, но чуть плотнее */
  background: linear-gradient(135deg, #7d69ff, #bca9ff);
  border-color: rgba(125,105,255,.70);
  box-shadow: 0 0 0 2px rgba(125,105,255,.22);
}

html[data-theme="light"] input[type="checkbox"]::after{
  /* галочка на светлой тоже ок, но пусть будет чуть менее “жёстко белой” */
  background: rgba(255,255,255,.95);
}

html[data-theme="light"] input[type="checkbox"]:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(125,105,255,.28),
    0 0 0 4px rgba(125,105,255,.14);
}

/* 2) Строки чеков внутри выпадающих “Меток”
   Сейчас они тёмные (rgba по белому) — делаем светлую карточность */
html[data-theme="light"] #panel-passive .check-row{
  background: rgba(15, 23, 42, .03);
  border: 1px solid rgba(15, 23, 42, .10);
  color: rgba(0,0,0,.82);
}

html[data-theme="light"] #panel-passive .check-row:hover{
  border-color: rgba(125,105,255,.28);
  background: rgba(125,105,255,.08);
}

/* (опционально) чтобы вся “коробка” dropdown не была пустой */
html[data-theme="light"] .tag-dd__body{
  padding: 10px 8px 8px;
  border-radius: 14px;
}

/* 3) Если чек-лейблы где-то без #panel-passive — добавим лёгкий hover на общий случай */
html[data-theme="light"] .check-row:hover{
  background: rgba(125,105,255,.06);
}

/* =========================================================
   Search input (.search-wrap) — LIGHT theme override
   Для "Поиск соигрока" и "Доска объявлений"
========================================================= */

html[data-theme="light"] .search-wrap{
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.10);

  /* чуть “дороже”, как в тёмной: объём + мягкая подсветка */
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 10px 30px rgba(15, 23, 42, 0.06);

  color: rgba(0,0,0,.85);
}

html[data-theme="light"] .search-wrap input{
  color: rgba(0,0,0,.85);
}

html[data-theme="light"] .search-wrap input::placeholder{
  color: rgba(0,0,0,.45);
}

/* hover */
html[data-theme="light"] .search-wrap:hover{
  background: rgba(15, 23, 42, 0.045);
  border-color: rgba(125, 105, 255, 0.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 12px 34px rgba(15, 23, 42, 0.08);
}

/* focus-within — фирменная фиолетовая подсветка как в тёмной */
html[data-theme="light"] .search-wrap:focus-within{
  background: rgba(125, 105, 255, 0.08);
  border-color: rgba(125, 105, 255, 0.42);
  box-shadow:
    0 0 0 1px rgba(125, 105, 255, 0.22),
    0 14px 38px rgba(125, 105, 255, 0.10);
}

/* =========================================================
   Cauldron searchbar: make .search-wrap work even with input.input
   (Ads + Board) — fixes light-theme override that forces .input bg/border
========================================================= */

/* 1) Возвращаем input внутри .search-wrap к прозрачному виду (иначе .input rules ломают пилюлю) */
body[data-page="cauldron_search"] .search-wrap > input.input,
body[data-page="cauldron_board"] .search-wrap > input.input{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 2) Light theme: красим именно ОБЁРТКУ .search-wrap (как в тёмной — “пилюля”) */
html[data-theme="light"] body[data-page="cauldron_search"] .search-wrap,
html[data-theme="light"] body[data-page="cauldron_board"] .search-wrap{
  background: rgba(15, 23, 42, 0.03) !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.85) inset,
    0 10px 30px rgba(15, 23, 42, 0.06) !important;
}

html[data-theme="light"] body[data-page="cauldron_search"] .search-wrap:hover,
html[data-theme="light"] body[data-page="cauldron_board"] .search-wrap:hover{
  background: rgba(15, 23, 42, 0.045) !important;
  border-color: rgba(125, 105, 255, 0.22) !important;
}

html[data-theme="light"] body[data-page="cauldron_search"] .search-wrap:focus-within,
html[data-theme="light"] body[data-page="cauldron_board"] .search-wrap:focus-within{
  background: rgba(125, 105, 255, 0.08) !important;
  border-color: rgba(125, 105, 255, 0.42) !important;
  box-shadow:
    0 0 0 1px rgba(125, 105, 255, 0.22),
    0 14px 38px rgba(125, 105, 255, 0.10) !important;
}

/* 3) Light theme: текст + плейсхолдер (чтобы читалось) */
html[data-theme="light"] body[data-page="cauldron_search"] .search-wrap input,
html[data-theme="light"] body[data-page="cauldron_board"] .search-wrap input{
  color: rgba(0,0,0,.85) !important;
}
html[data-theme="light"] body[data-page="cauldron_search"] .search-wrap input::placeholder,
html[data-theme="light"] body[data-page="cauldron_board"] .search-wrap input::placeholder{
  color: rgba(0,0,0,.45) !important;
  opacity: 1;
}

/* Fix: white inner strip inside .search-wrap (light theme) */
body[data-page="cauldron_search"] .search-wrap input,
body[data-page="cauldron_board"] .search-wrap input{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* если браузер автозаполняет и рисует белым */
body[data-page="cauldron_search"] .search-wrap input:-webkit-autofill,
body[data-page="cauldron_board"] .search-wrap input:-webkit-autofill{
  -webkit-text-fill-color: rgba(0,0,0,.85) !important;
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  transition: background-color 999999s ease-in-out 0s;
}

/* FIX: remove inner light strip inside .search-wrap (Ads + Board) */
html[data-theme="light"] body[data-page="cauldron_search"] .search-wrap input,
html[data-theme="light"] body[data-page="cauldron_board"] .search-wrap input{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
 
/* =========================================================
   Ads + Board: FILTER PANELS — nice “card” underlay (LIGHT)
   + fix fandom search input
   + emphasize whitelist/blacklist textarea in light
========================================================= */

/* 1) Общая “карточная” подложка для всех панелей (фильтры/белый/чёрный) */
html[data-theme="light"] body[data-page="cauldron_search"] #search-filters-panel,
html[data-theme="light"] body[data-page="cauldron_search"] #search-whitelist-panel,
html[data-theme="light"] body[data-page="cauldron_search"] #search-blacklist-panel,
html[data-theme="light"] body[data-page="cauldron_board"] #board-filters-panel,
html[data-theme="light"] body[data-page="cauldron_board"] #board-whitelist-panel,
html[data-theme="light"] body[data-page="cauldron_board"] #board-blacklist-panel{
  padding: 14px 14px 16px;
  border-radius: 18px;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 14px 34px rgba(10,15,30,.06);

  /* чтобы внутри было “воздуха” как в тёмной */
  backdrop-filter: blur(10px);
}

/* 2) “Поиск по фэндому…” — делаем нормальный инпут, на всю ширину */
html[data-theme="light"] body[data-page="cauldron_search"] #search-filters-panel .input[name="fandom"],
html[data-theme="light"] body[data-page="cauldron_board"] #board-filters-panel .input[name="fandom"]{
  width: 100% !important;
  height: 38px;
  padding: 8px 12px;

  border-radius: 14px;
  background: rgba(15, 23, 42, 0.03) !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;

  box-shadow: 0 1px 0 rgba(255,255,255,.85) inset;
}

html[data-theme="light"] body[data-page="cauldron_search"] #search-filters-panel .input[name="fandom"]:focus,
html[data-theme="light"] body[data-page="cauldron_board"] #board-filters-panel .input[name="fandom"]:focus{
  outline: none;
  border-color: rgba(125,105,255,.42) !important;
  box-shadow:
    0 0 0 1px rgba(125,105,255,.22),
    0 10px 26px rgba(125,105,255,.10);
}

/* 3) Белый/чёрный списки: textarea делаем заметнее (light) */
html[data-theme="light"] body[data-page="cauldron_search"] textarea#search-whitelist.input,
html[data-theme="light"] body[data-page="cauldron_search"] textarea#search-blacklist.input,
html[data-theme="light"] body[data-page="cauldron_board"] textarea#board-whitelist.input,
html[data-theme="light"] body[data-page="cauldron_board"] textarea#board-blacklist.input{
  width: 100% !important;

  background: rgba(15, 23, 42, 0.025) !important;
  border: 1px solid rgba(15, 23, 42, 0.14) !important;
  border-radius: 14px;

  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 10px 26px rgba(10,15,30,.06);

  padding: 10px 12px;
  line-height: 1.35;
}

html[data-theme="light"] body[data-page="cauldron_search"] textarea#search-whitelist.input:focus,
html[data-theme="light"] body[data-page="cauldron_search"] textarea#search-blacklist.input:focus,
html[data-theme="light"] body[data-page="cauldron_board"] textarea#board-whitelist.input:focus,
html[data-theme="light"] body[data-page="cauldron_board"] textarea#board-blacklist.input:focus{
  outline: none;
  border-color: rgba(125,105,255,.42) !important;
  box-shadow:
    0 0 0 1px rgba(125,105,255,.22),
    0 14px 34px rgba(125,105,255,.10);
}

/* 4) Чуть аккуратнее код-примеры внутри подсказки (в белом списке ads) */
html[data-theme="light"] body[data-page="cauldron_search"] #search-whitelist-panel code{
  background: rgba(125,105,255,.10);
  border: 1px solid rgba(125,105,255,.18);
  border-radius: 8px;
  padding: 1px 6px;
}

/* =========================================================
   DARK: Ads + Board — filters panel underlay + fandom search look
========================================================= */

/* 1) Тёмная “карточная” подложка панелей */
html:not([data-theme="light"]) body[data-page="cauldron_search"] #search-filters-panel,
html:not([data-theme="light"]) body[data-page="cauldron_search"] #search-whitelist-panel,
html:not([data-theme="light"]) body[data-page="cauldron_search"] #search-blacklist-panel,
html:not([data-theme="light"]) body[data-page="cauldron_board"] #board-filters-panel,
html:not([data-theme="light"]) body[data-page="cauldron_board"] #board-whitelist-panel,
html:not([data-theme="light"]) body[data-page="cauldron_board"] #board-blacklist-panel{
  padding: 14px 14px 16px;
  border-radius: 18px;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);

  box-shadow:
    0 18px 50px rgba(0,0,0,.22),
    0 1px 0 rgba(255,255,255,.03) inset;
}

/* 2) “Поиск по фэндому…” — делаем как аккуратную пилюлю (темная) */
html:not([data-theme="light"]) body[data-page="cauldron_search"] #search-filters-panel .input[name="fandom"],
html:not([data-theme="light"]) body[data-page="cauldron_board"] #board-filters-panel .input[name="fandom"]{
  width: 100% !important;
  height: 38px;
  padding: 0 14px;

  border-radius: 999px !important;
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;

  box-shadow: none !important;
  color: #fff !important;
}

html:not([data-theme="light"]) body[data-page="cauldron_search"] #search-filters-panel .input[name="fandom"]::placeholder,
html:not([data-theme="light"]) body[data-page="cauldron_board"] #board-filters-panel .input[name="fandom"]::placeholder{
  color: rgba(255,255,255,.45) !important;
  opacity: 1;
}

html:not([data-theme="light"]) body[data-page="cauldron_search"] #search-filters-panel .input[name="fandom"]:hover,
html:not([data-theme="light"]) body[data-page="cauldron_board"] #board-filters-panel .input[name="fandom"]:hover{
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

html:not([data-theme="light"]) body[data-page="cauldron_search"] #search-filters-panel .input[name="fandom"]:focus,
html:not([data-theme="light"]) body[data-page="cauldron_board"] #board-filters-panel .input[name="fandom"]:focus{
  outline: none !important;
  background: rgba(120,110,255,0.08) !important;
  border-color: rgba(120,110,255,0.45) !important;
  box-shadow: 0 0 0 1px rgba(120,110,255,0.35) !important;
}

/* =========================================================
   Unified SELECT dropdowns (native) — Cauldron pages
   Works for: "Куда отправить", "Видимость" и т.п.
========================================================= */

/* 1) Общая база: select выглядит как ваши поля */
.cauldron-page select,
.cauldron-page select.input,
body[data-page^="cauldron"] select,
body[data-page^="cauldron"] select.input{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 16px;
  padding-right: 38px; /* место под стрелку */
  background-repeat: no-repeat;

  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
}

/* 2) Стрелка (единая для всех, не только filters-grid) */
.cauldron-page select,
body[data-page^="cauldron"] select{
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

/* 3) DARK: фон/бордер/текст + “правильная” схема для нативных меню */
html:not([data-theme="light"]) .cauldron-page select,
html:not([data-theme="light"]) body[data-page^="cauldron"] select{
  color-scheme: dark; /* важно для нативного меню */
  background-color: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
}

html:not([data-theme="light"]) .cauldron-page select:hover{
  background-color: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
}

html:not([data-theme="light"]) .cauldron-page select:focus{
  outline: none;
  border-color: rgba(120,110,255,.50);
  box-shadow: 0 0 0 3px rgba(120,110,255,.22);
}

/* 4) LIGHT: фон/бордер/текст + “правильная” схема */
html[data-theme="light"] .cauldron-page select,
html[data-theme="light"] body[data-page^="cauldron"] select{
  color-scheme: light;
  background-color: rgba(15, 23, 42, .03);
  border-color: rgba(15, 23, 42, .12);
  color: rgba(0,0,0,.88);
}

html[data-theme="light"] .cauldron-page select:hover{
  background-color: rgba(15, 23, 42, .045);
  border-color: rgba(125,105,255,.22);
}

html[data-theme="light"] .cauldron-page select:focus{
  outline: none;
  border-color: rgba(125,105,255,.42);
  box-shadow: 0 0 0 3px rgba(125,105,255,.18);
}

/* 5) Выпадающий список (option/optgroup) — best effort */
html:not([data-theme="light"]) .cauldron-page select option,
html:not([data-theme="light"]) body[data-page^="cauldron"] select option{
  background: #0f1224;
  color: rgba(255,255,255,.92);
}
html:not([data-theme="light"]) .cauldron-page select optgroup{
  background: #0f1224;
  color: rgba(255,255,255,.70);
}

html[data-theme="light"] .cauldron-page select option,
html[data-theme="light"] body[data-page^="cauldron"] select option{
  background: #ffffff;
  color: rgba(0,0,0,.88);
}
html[data-theme="light"] .cauldron-page select optgroup{
  background: #ffffff;
  color: rgba(0,0,0,.62);
}

/* =========================================================
   Friends — LIGHT theme: bring back extra underlay (rows + card)
========================================================= */

html[data-theme="light"] .friends-page .friends-list-card{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 14px 34px rgba(10,15,30,.07) !important;
}

/* внутренняя “вторая подложка” у строк (как в тёмной, но светлая) */
html[data-theme="light"] .friends-page .friend-row{
  background: rgba(15, 23, 42, 0.03);
  border: 1px solid rgba(15, 23, 42, 0.10);
}

/* hover — аккуратный фиолетовый акцент */
html[data-theme="light"] .friends-page .friend-row:hover{
  background: rgba(125,105,255,0.06);
  border-color: rgba(125,105,255,0.22);
}

/* кнопки-иконки справа — чтобы не “терялись” на белом */
html[data-theme="light"] .friends-page .icon-btn{
  background: rgba(15, 23, 42, 0.03);
  border-color: rgba(15, 23, 42, 0.12);
}

html[data-theme="light"] .friends-page .icon-btn:hover{
  background: rgba(125,105,255,0.10);
  border-color: rgba(125,105,255,0.22);
}

/* =========================================================
   Dialogs / Messages — fix clipped shadow
========================================================= */

/* 1. Если родитель режет тень */
.dialogs-page .card,
.dialogs-page .dialogs-card,
.dialogs-page .dialogs-wrapper{
  overflow: visible !important;
}

/* 2. Добавим воздуха снизу, чтобы тень не упиралась */
.dialogs-page .card{
  margin-bottom: 18px;
}

/* 3. Сделаем тень мягче, чтобы не выглядела "рубленной" */
html[data-theme="light"] .dialogs-page .card{
  box-shadow: 
    0 10px 28px rgba(10,15,30,.08),
    0 2px 6px rgba(10,15,30,.04);
}

/* =========================================================
   /messages/ — shadow is clipped: real selectors by template
========================================================= */

/* 1) секция не должна резать тени внутренних карточек */
.dialogs-page > .feed-card{
  overflow: visible !important;
}

/* 2) у самой страницы добавляем “воздух” снизу,
      чтобы тень .dialog-empty-card не упиралась в низ блока */
.dialogs-page{
  padding-bottom: 22px; /* можно 18–28 по вкусу */
}

/* 3) на всякий: пустая карточка тоже пусть не режется */
.dialogs-page .dialog-empty-card{
  overflow: visible;
}

/* =========================================================
   /messages/ — softer shadow (LIGHT)
========================================================= */

html[data-theme="light"] .dialogs-page .dialog-empty-card{
  box-shadow:
    0 6px 16px rgba(10,15,30,.05),
    0 18px 48px rgba(10,15,30,.06);
}

/* =========================================================
   Cauldron exchange — passive inbox spacing (safe)
========================================================= */

/* Чуть опустить “инбокс” после настроек */
body[data-page="cauldron_exchange"] #panel-passive .note-box{
  margin-bottom: 20px; /* было визуально тесно */
}

/* Пустые слоты “Пусто.” — сделать ниже и раздвинуть */
body[data-page="cauldron_exchange"] #panel-passive .caught-empty{
  margin-top: 10px;
  padding: 16px 16px;     /* больше воздуха */
  border-radius: 16px;
}

/* Раздвинуть блоки инбокса между собой (и пустые, и заполненные) */
body[data-page="cauldron_exchange"] #panel-passive > div[style*="flex-direction: column"]{
  gap: 16px !important;   /* было 12px инлайном */
}

/* =========================================================
   Cauldron Exchange (panel-passive) — LIGHT theme fixes for tag-dd dropdowns
   (перебиваем тёмные стили #panel-passive ...)
========================================================= */

html[data-theme="light"] body[data-page="cauldron_exchange"] #panel-passive details.tag-dd{
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(0,0,0,.02) !important;
}

html[data-theme="light"] body[data-page="cauldron_exchange"] #panel-passive details.tag-dd > summary{
  color: rgba(0,0,0,.88) !important;
}

/* стрелка */
html[data-theme="light"] body[data-page="cauldron_exchange"] #panel-passive .tag-dd__chev{
  border-right-color: rgba(0,0,0,.35) !important;
  border-bottom-color: rgba(0,0,0,.35) !important;
}

/* тело dropdown (вот где была “очень тёмная подложка”) */
html[data-theme="light"] body[data-page="cauldron_exchange"] #panel-passive .tag-dd__body{
  border-top: 1px solid rgba(0,0,0,.08) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 12px 26px rgba(10,15,30,.06) !important;
}

/* плашки-строки чеков внутри раскрытия */
html[data-theme="light"] body[data-page="cauldron_exchange"] #panel-passive .tag-dd__body .check-row{
  background: rgba(15,23,42,.03) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}

html[data-theme="light"] body[data-page="cauldron_exchange"] #panel-passive .tag-dd__body .check-row:hover{
  background: rgba(125,105,255,.07) !important;
  border-color: rgba(125,105,255,.22) !important;
}

/* =========================================================
   Cauldron Exchange — remove inner scroll in passive filters
========================================================= */

body[data-page="cauldron_exchange"] #panel-passive .tag-dd__body{
  max-height: none !important;
  overflow: visible !important;
}

/* =========================================================
   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; /* чуть воздуха справа */
}

/* скрываем скроллбар, но прокрутка работает */
.dialog-detail-page .dialog-scroll{
  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 LIST — FIX RIGHT OVERFLOW
========================================== */

/* контейнеры обязаны уметь сжиматься */
.dialogs-page .feed-card,
.dialogs-page .dialog-list,
.dialogs-page .dialog-item,
.dialogs-page .dialog-link,
.dialogs-page .dialog-main,
.dialogs-page .dialog-header-line,
.dialogs-page .dialog-second-line,
.dialogs-page .dialog-third-line{
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

/* запрещаем горизонтальный overflow */
.dialogs-page .feed-card{
  overflow-x: hidden;
}

/* строка заголовка */
.dialogs-page .dialog-header-line{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

/* левый блок с названием */
.dialogs-page .dialog-title{
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* правый блок с датой и крестиком */
.dialogs-page .dialog-right{
  flex: 0 0 auto;
  min-width: 0;
}

/* preview и last message не должны распирать */
.dialogs-page .dialog-preview,
.dialogs-page .dialog-lastmsg{
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* если feather_md где-то вставляет длинную строку */
.dialogs-page .dialog-main *{
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* точка-уведомление на вкладке */
.inbox-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:999px;
  margin-left:8px;
  background: #ff4d6d;
  box-shadow: 0 0 0 3px rgba(255,77,109,.15);
  vertical-align: middle;
}

/* метки: компактно, не “кричат”, внизу карточки */
.tag-row{ margin-top:0px; display:flex; gap:6px; flex-wrap:wrap; opacity:.72; }
.tag-pill{
  font-size:11px; padding:1px 7px; border-radius:999px;
  border:1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.02);
  color: rgba(255,255,255,.72);
  white-space:nowrap;
}

.empty-hint{
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px dashed rgba(0,0,0,.12);
  background: rgba(0,0,0,.03);
  color: rgba(0,0,0,.55);
  font-size: 13px;
}

.dialog-participant-avatar img {
    opacity: 0;
    transform: scale(0.9);
    animation: avatarFade 0.25s ease forwards;
}

@keyframes avatarFade {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.dialog-participant-avatar.small img {
    animation-delay: 0s;
}

/* Контейнер кружка */
.dialog-participant-avatar{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;               /* ВАЖНО: обрезка в круг */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}

/* Размеры (если у тебя big/small уже есть — оставь только width/height) */
.dialog-participant-avatar.big{
  width: 46px;
  height: 46px;
}

.dialog-participant-avatar.small{
  width: 38px;
  height: 38px;
}

/* Сама картинка внутри */
.dialog-participant-avatar img{
  width: 100%;
  height: 100%;
  object-fit: cover;              /* заполняет круг без искажений */
  object-position: center;
  display: block;
}

.dialog-avatar{
  border-radius: 50%;
  overflow: hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dialog-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================
   NOTES / FEED — Mobile fixes
   ========================= */

@media (max-width: 520px){
  .notes-compose-footer--v2{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .notes-compose-footer--v2 .send-row{
    /* превращаем детей send-row в прямых flex-детей футера,
       чтобы поставить чекбокс МЕЖДУ селектом и кнопкой (без правок HTML) */
    display: contents;
  }

  .notes-compose-footer--v2 .field-group{
    width: 100%;
    order: 1;
  }

  @media (min-width: 521px){
    .notes-compose-footer--v2 .field-group{ margin-top: -6px; }
  }

  .notes-compose-footer--v2 .remember-row{
    margin-top: 0 !important;
    margin-left: 0 !important;
    white-space: normal;
    order: 2;
  }

  .notes-compose-footer--v2 #id_channel{
    width: 100%;
    min-width: 0 !important;
  }

  .notes-submit{
    width: 100%;
    order: 3;
  }
}

/* 2) Personal filter: на мобилке НЕ показываем absolute-панель (она улетает за экран).
      Её будет показывать JS, перенося внутрь модалки. */
@media (max-width: 520px){
  #pf-details .details-body--inline{
    display: none;
    position: static !important;
    min-width: 0 !important;
    right: auto !important;
    top: auto !important;
  }

  /* Когда панель перенесена в модалку — показываем */
  #pf-details .details-body--inline.pf-panel--in-modal{
    display: block;
  }
}

/* 3) Вид панели внутри модалки (убираем "карточные" рамки, чтобы не было двойной рамки) */
.details-body--inline.pf-panel--in-modal{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* =========================
   Topbar — MOBILE: one row, like desktop (no wrap, no x-scroll)
   Paste at the VERY END of pages.css
   ========================= */

/* перебиваем legacy <=640 (там wrap + nav-icons вниз) */
@media (max-width: 640px){

  /* 0) страховка от “лишнего” горизонтального скролла именно в шапке */
  .topbar{
    overflow-x: clip !important; /* лучше чем hidden: не создаёт скроллбар */
  }

  /* 1) шапка всегда одной строкой */
  .topbar-inner{
    flex-wrap: nowrap !important;
    padding: 0 10px !important;

    /* legacy добавляет padding-top/bottom — сбрасываем */
    padding-top: 0 !important;
    padding-bottom: 0 !important;

    gap: 8px !important;
 
    max-width: 100% !important;
    box-sizing: border-box !important;

    overflow: clip !important;
  }
 
  /* 2) логотип слева — компактно */
  .logo{ gap: 8px !important; flex: 0 0 auto !important; }
  .logo span{ display: none !important; } /* как у тебя и было на мобилке */

  /* 3) ИКОНКИ — в той же строке, НЕ вниз, НЕ 100% ширины, умеют сжиматься */
  .nav-icons{
    order: 0 !important;
    width: auto !important;
    margin-left: auto !important;   /* ключевое */
    margin-right: 2px !important;   /* чуть ближе к теме */
    flex: 0 1 auto !important;      /* не растягивать на всю доступную ширину */
    min-width: 0 !important;

    justify-content: flex-end !important;  /* вместо center */
    gap: 3px !important;

    overflow: hidden !important;
  }

  /* 4) размеры клика/иконок — плотнее */
  .nav-link{
    padding: 4px !important;
    border-radius: 12px !important;
    flex: 0 0 auto !important;
  }
  .nav-icon{
    width: 24px !important;
    height: 24px !important;
  }

  /* 5) кнопка темы — справа, но без legacy margin-left:auto (он ломает ряд) */
  .theme-btn{
    margin-left: 0 !important;
    margin-right: 2px !important;
    padding: 4px 6px !important;
    flex: 0 0 auto !important;
  }

  .user-panel{
    flex: 0 0 auto !important;
    gap: 3px !important;
    margin-left: 0 !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }

  .user-name{
    max-width: 74px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

/* совсем узкие (iPhone SE) — ещё плотнее */
@media (max-width: 390px){
  .topbar-inner{ padding: 0 8px !important; gap: 6px !important; }
  .nav-icons{ gap: 10px !important; }
  .nav-link{ padding: 3px !important; }
  .nav-icon{ width: 22px !important; height: 22px !important; }
  .user-name{ max-width: 58px !important; }
}  

/* =========================
   Footer — mobile single row (anchor dropdown to "Другое")
   ========================= */
@media (max-width: 520px){

  /* Футер НЕ должен резать выпадашку */
  .site-footer,
  .site-footer__inner{
    overflow: visible !important;
    position: relative !important;
    z-index: 50 !important;
  }

  .site-footer__row{
    display: inline-flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 3px !important;
    padding: 4px 4px !important;
    max-width: 100% !important;

    overflow: visible !important;   /* важно для панели */
    position: relative !important;
    z-index: 51 !important;
  }

  .footer-link{
    flex: 0 0 auto !important;
    font-size: 10px !important;
    line-height: 1 !important;
    padding: 3px 6px !important;
    white-space: nowrap !important;
  }

  /* Поддержать проект → Поддержать */
  .site-footer__row a.footer-link[href="https://boosty.to/featherline/donate"]{
    font-size: 0 !important;
    line-height: 0 !important;
  }
  .site-footer__row a.footer-link[href="https://boosty.to/featherline/donate"]::after{
    content: "Поддержать";
    font-size: 10px;
    line-height: 1;
  }

  /* details "Другое" — держим в одной линии и как обычную кнопку */
  .site-footer__row .footer-more{
    display: inline-flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;  /* якорь для absolute-панели */
    z-index: 200 !important;
  }

  .site-footer__row .footer-more > summary{
    display: inline-flex !important;
    align-items: center !important;
    cursor: pointer !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 3px 6px !important;     /* чтобы по высоте совпало с ссылками */
    border-radius: 10px !important;
    line-height: 1 !important;
  }
  .site-footer__row .footer-more > summary::-webkit-details-marker{ display: none !important; }

  /* ВЫПАДАШКА — рядом с "Другое", а не fixed */
  .site-footer__row .footer-more > .footer-more__panel{
    position: absolute !important;
    right: 0 !important;
    left: auto !important;
    bottom: calc(100% + 10px) !important;
    transform: none !important;

    z-index: 9999 !important;

    max-width: min(260px, calc(100vw - 24px)) !important;
    min-width: 210px !important;
  }

  /* хвостик ставим вправо, ближе к кнопке */
  .site-footer__row .footer-more > .footer-more__panel::after{
    left: auto !important;
    right: 14px !important;
    transform: rotate(45deg) !important;
  }
} 


/* =========================
   Notes tabs — mobile like desktop (one row, right-side pills)
   ========================= */
@media (max-width: 520px){

  .tabs.pills{
    flex-wrap: nowrap !important;
    gap: 6px !important;
    align-items: center !important; /* ← чтобы все пилюли по одной высоте */
  }

  .tabs-spacer{
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .tabs.pills .pill{
    font-size: 12px !important;
    padding: 5px 10px !important;
    line-height: 1 !important;
  }

  /* ФИЛЬТР: summary выравниваем как обычную pill-кнопку */
  #pf-details{
    display: inline-flex !important;     /* ← сам details не ломает высоту строки */
    align-items: center !important;
  }

  #pf-details > summary.pill{
    display: inline-flex !important;     /* ← главное */
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;

    list-style: none !important;         /* убираем маркер */
    margin: 0 !important;

    font-size: 0 !important;
    padding: 5px 10px !important;
    line-height: 1 !important;
  }
  #pf-details > summary.pill::-webkit-details-marker{ display: none !important; }

  #pf-details > summary.pill::after{
    content: "Фильтр";
    font-size: 12px;
    line-height: 1;
  }

  .tabs.pills .pill[href*="adult="]{
    padding: 5px 9px !important;
    font-size: 12px !important;
  }
}

/* совсем узкие (iPhone SE) */
@media (max-width: 390px){
  .tabs.pills{ gap: 5px !important; }
  .tabs.pills .pill{ font-size: 11.5px !important; padding: 5px 9px !important; }

  #pf-details > summary.pill{ padding: 5px 9px !important; }
  #pf-details > summary.pill::after{ font-size: 11.5px; }
}


/* =========================
   Tabs pills — ultra small screens tweaks
   ========================= */
@media (max-width: 420px){

  .tabs.pills{
    flex-wrap: nowrap !important;
    gap: 5px !important;
    align-items: center !important; /* ← выравнивание по высоте */
  }

  .tabs-spacer{
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .tabs.pills .pill{
    font-size: 11.5px !important;
    padding: 5px 9px !important;
    line-height: 1 !important;
  }

  .tabs.pills a.pill[href="?tab=my"]{
    font-size: 0 !important;
    padding: 5px 9px !important;
  }
  .tabs.pills a.pill[href="?tab=my"]::after{
    content: "От меня";
    font-size: 11.5px;
    line-height: 1;
  }

  /* ФИЛЬТР: ещё компактнее, но по высоте ровно */
  #pf-details{
    display: inline-flex !important;
    align-items: center !important;
  }

  #pf-details > summary.pill{
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;

    list-style: none !important;
    margin: 0 !important;

    font-size: 0 !important;
    padding: 5px 8px !important;
    line-height: 1 !important;
  }
  #pf-details > summary.pill::-webkit-details-marker{ display: none !important; }

  #pf-details > summary.pill::after{
    content: "Фильтр";
    font-size: 11.5px;
    line-height: 1;
  }

  .tabs.pills .pill[href*="adult="]{
    padding: 5px 7px !important;
    font-size: 11.5px !important;
  }
}

/* =========================
   Notes: Personal filter panel — fix in mobile modal
   (panel is moved into .fl-modal-body, must NOT stay absolute)
   ========================= */

.pf-panel--in-modal{
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;

  margin: 0 !important;
  box-sizing: border-box !important;
}

/* если карточные стили "перетягивают" капсулу — делаем ровно как надо внутри модалки */
.fl-modal-body .pf-panel--in-modal.card{
  box-shadow: none !important;
}

/* чтобы содержимое не упиралось и не вылезало по ширине */
.fl-modal-body{
  max-height: min(72vh, 620px);
  overflow: auto;
}

.fl-modal-body textarea,
.fl-modal-body input,
.fl-modal-body button{
  max-width: 100%;
  box-sizing: border-box;
} 

/* =========================
   Notes compose — signature row compact on narrow mobile
   ========================= */
@media (max-width: 420px){

  /* делаем обёртку подписи флексом */
  #sig-field .sig-input-wrap{
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* инпут подписи ужимаем, но даём ему занимать всё доступное */
  #sig-field .sig-input-wrap > input[type="text"],
  #sig-field .sig-input-wrap > input[type="search"],
  #sig-field .sig-input-wrap > input:not([type]){
    flex: 1 1 auto;
    min-width: 0;
  }

  /* чекбокс рядом, компактно */
  #sig-field .sig-input-wrap .remember-row{
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
    white-space: nowrap;
  }

  #sig-field .sig-input-wrap .remember-row span{
    font-size: 12px;
    line-height: 1;
  }

  /* чтобы дропдаун подсказок подписи не занимал место во флексе */
  #sig-field #sig-dropdown{
    position: absolute;
    left: 0;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
  }
}

 /* =========================
   Notes compose — reduce gap between signature row and footer (mobile)
   ========================= */
@media (max-width: 520px){

  /* главный источник зазора */
  .notes-compose-footer{
    margin-top: 4px !important; /* было 8px */
  }

  /* на случай если signature_cards включены и вставляется <br> */
  #sig-field br{
    display: none !important;
  }

  /* дополнительно: чуть плотнее после поля подписи */
  #sig-field{
    margin-bottom: 4px !important;
  }
}

/* =========================
   Cauldron top bubble — MOBILE like DESKTOP (one row)
   ========================= */
@media (max-width: 640px){

  /* отменяем “узкую капсулу” и возвращаем нормальную ширину */
  .cauldron-tabs,
  .cauldron-nav{
    max-width: none !important;
    width: min(660px, calc(100% - 32px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 10px 10px !important;
    border-radius: 999px !important;
  }

  /* главное: один ряд */
  .cauldron-shell .cauldron-tabs nav,
  .cauldron-shell .cauldron-tabs .tabs{
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }

  /* чтобы 4 пункта влезли как на ПК */
  .cauldron-shell .cauldron-tabs a,
  .cauldron-shell .cauldron-tabs .cauldron-tab{
    padding: 10px 12px !important;
    font-size: 12.5px !important;
    white-space: nowrap !important;
    text-align: center;
    border-radius: 999px !important;
  }
}

 /* =========================
   Cauldron top bubble — force ONE ROW on mobile (no wrap)
   ========================= */
@media (max-width: 520px){

  /* сам ряд вкладок: без переносов */
  .cauldron-shell .cauldron-tabs nav,
  .cauldron-shell .cauldron-tabs .tabs,
  .cauldron-tabs,
  .cauldron-nav{
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 6px !important;

    overflow-x: auto;                 /* если вдруг не влезет — скролл вместо 2-й строки */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cauldron-shell .cauldron-tabs nav::-webkit-scrollbar,
  .cauldron-shell .cauldron-tabs .tabs::-webkit-scrollbar,
  .cauldron-tabs::-webkit-scrollbar,
  .cauldron-nav::-webkit-scrollbar{
    display: none;
  }

  /* сами пункты: компактнее, чтобы чаще влезали без скролла */
  .cauldron-shell .cauldron-tabs a,
  .cauldron-shell .cauldron-tabs .cauldron-tab{
    flex: 0 0 auto !important;
    white-space: nowrap !important;

    font-size: 12.5px !important;
    padding: 8px 12px !important;
  }
}  

/* =========================
   Cauldron top bubble — 2x2 grid on mobile
   ========================= */
@media (max-width: 520px){

  /* пузырь */
  .cauldron-tabs,
  .cauldron-nav{
    padding: 12px 12px !important;
    border-radius: 28px !important;
    overflow: hidden;              /* чтобы сетка не "вылезала" */
  }

  /* контейнер вкладок: делаем 2 колонки */
  .cauldron-shell .cauldron-tabs nav,
  .cauldron-shell .cauldron-tabs .tabs,
  .cauldron-tabs,
  .cauldron-nav{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px 4px !important;

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

    overflow: visible !important;  /* отключаем твой горизонтальный скролл */
  }

  /* сами пункты: растягиваем на ячейку */
  .cauldron-shell .cauldron-tabs a,
  .cauldron-shell .cauldron-tabs .cauldron-tab{
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;

    white-space: nowrap !important;   /* в одну строку внутри ячейки */
    overflow: hidden !important;
    text-overflow: ellipsis !important;

    font-size: 11.5px !important;
    padding: 6px 8px !important;
    border-radius: 999px !important;
  }
}    

/* =========================
   Cauldron — Expired: header/search layout
   ========================= */

/* desktop/tablet: заголовок + поиск в одну линию */
.expired-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.expired-search{
  display:flex;
  gap:10px;
  align-items:center;
}

/* чтобы инпут не был “прямоугольником в прямоугольнике” */
.expired-search .search-wrap{
  display:flex;
  align-items:center;
}

.expired-search .search-wrap > input.input{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  width: 100%;
}

/* mobile: как на других вкладках — всё в столбик */
@media (max-width: 520px){
  .expired-header{
    display:block !important;
  }

  .expired-search{
    display:block !important;
    width:100% !important;
    margin-top:10px !important;
  }

  .expired-search .search-wrap{
    width:100% !important;
  }

  .expired-search button,
  .expired-search .secondary-btn{
    width:100% !important;
    margin-top:10px !important;
  }
}  

/* =========================
   Cauldron Board/Ads — empty-state visible in LIGHT theme
   ========================= */
html[data-theme="light"] .cauldron-body .empty,
html[data-theme="light"] .cauldron-body .empty-hint{
  color: rgba(20, 24, 40, 0.78) !important;
  border-color: rgba(20, 24, 40, 0.16) !important;
  background: rgba(20, 24, 40, 0.03) !important;
}

/* мелкие подсказки внутри этих страниц (в шаблоне они тоже белые) */
html[data-theme="light"] .cauldron-body .subtle,
html[data-theme="light"] .cauldron-body .meta{
  color: rgba(20, 24, 40, 0.70) !important;
}  

/* =========================================================
   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);
}

/* -------------------------------------------------
   Soft disabled submit button (less "dead")
--------------------------------------------------*/

button:disabled,
.btn:disabled,
.btn-primary:disabled{
  opacity: 0.75;
  cursor: not-allowed;

  /* оставляем фирменный цвет, но приглушаем */
  background: linear-gradient(
      180deg,
      rgba(162,120,255,0.55),
      rgba(162,120,255,0.45)
  );

  border: 1px solid rgba(162,120,255,0.45);
  color: rgba(255,255,255,0.85);

  filter: saturate(0.8);
}

.btn-send:disabled{
  opacity: 0.75;
  background: rgba(162,120,255,0.45);
  border: 1px solid rgba(162,120,255,0.45);
  color: rgba(255,255,255,0.85);
}

/* Notes: submit button looks too "inactive" in normal state */
.notes-compose .notes-submit.btn-primary{
  opacity: 1;                 /* убираем "задушенность" */
  filter: none;               /* если где-то есть desaturate/brightness */
  background: rgba(162,120,255,0.28);
  border: 1px solid rgba(162,120,255,0.42);
  color: var(--text-main);
  box-shadow: 0 6px 16px rgba(0,0,0,.16);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.notes-compose .notes-submit.btn-primary:hover{
  background: rgba(162,120,255,0.40);
  border-color: rgba(162,120,255,0.58);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
}

/* на всякий — если где-то реально disabled */
.notes-compose .notes-submit.btn-primary:disabled{
  opacity: .78;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}


/* =========================
   Spoiler (||text||) — Telegram-like
========================= */
.spoiler{
  display: inline-block;
  position: relative;
  border-radius: 10px;
  padding: 2px 8px;
  cursor: pointer;
  user-select: none;

  /* "затемнение" текста */
  color: transparent !important;
  text-shadow: 0 0 10px rgba(255,255,255,.35);
  background: rgba(162,120,255,0.22);
  border: 1px solid rgba(162,120,255,0.20);
}

.spoiler.is-revealed{
  user-select: text;
  color: var(--text-main) !important;
  text-shadow: none;
  background: rgba(162,120,255,0.12);
  border-color: rgba(162,120,255,0.16);
}

/* =========================
   Adult (18+) censor — blur text & images until revealed
========================= */
.note-card--adult{
  position: relative;
}

.note-card--adult.is-censored .note-text{
  filter: none;
  opacity: 1;
}
.note-card--adult.is-censored .note-text::before{
  content: "18+";
  display: inline-block;
  margin-right: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 18px;
  background: rgba(162,120,255,0.14);
  border: 1px solid rgba(162,120,255,0.18);
  color: var(--text-muted);
}

/* Блюрим любые вставленные картинки (ibb) */
.note-card--adult.is-censored img,
.note-card--adult.is-censored .ibb-embed__img{
  filter: blur(8px) brightness(0.94);
  transform: none;
}

.note-card--adult:not(.is-censored) img,
.note-card--adult:not(.is-censored) .ibb-embed__img{
  filter: none !important;
}

/* overlay показываем только если JS поставил класс "has-adult-media" */
.note-card--adult .adult-overlay{
  display: none;
}

.note-card--adult.has-adult-media .adult-overlay{
  display: flex;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.note-card--adult.has-adult-media .adult-reveal-btn{
  pointer-events: auto;
}

/* контейнер картинки, куда JS переносит оверлей */
.adult-media-wrap{
  position: relative;
  display: inline-block;
}

/* In editor: spoilers are visible (editing удобнее) */
.feather-ce .spoiler{
  color: var(--text-main) !important;
  text-shadow: none !important;
  background: rgba(162,120,255,0.16);
  border: 1px dashed rgba(162,120,255,0.22);
}

.note-card--adult:not(.is-censored) img{
  filter: none !important;
}

.note-card--adult:not(.is-censored) img,
.note-card--adult:not(.is-censored) .ibb-embed__img{
  filter: none !important;
}

.note-card--adult.is-censored img{
  cursor: pointer;
}

/* Adult with image: hide duplicate "18+" badge near the photo */
.note-card--adult.has-adult-media .note-badge-adult,
.note-card--adult.has-adult-media .badge-adult,
.note-card--adult.has-adult-media .tag-18,
.note-card--adult.has-adult-media .note-tag-adult{
  display: none !important;
}

/* если бейдж просто выглядит как маленькая пилюля "18+" без класса —
   часто это .chip/.pill внутри меты */
.note-card--adult.has-adult-media .note-meta .chip,
.note-card--adult.has-adult-media .note-meta .pill{
  /* безопасно: скрываем только если это именно "18+" через attr селекторы нельзя,
     поэтому лучше оставить этот блок выключенным.
     Если у тебя именно chip — скажи класс, сделаю точнее. */
}

/* Button text should be neutral */
.note-card--adult.has-adult-media .adult-reveal-btn{
  font-weight: 600;
}

/* если карточка 18+ содержит изображение — скрываем текстовый бейдж 18+ */
.note-card--adult.has-adult-media .note-tag-adult,
.note-card--adult.has-adult-media .tag-adult,
.note-card--adult.has-adult-media .badge-adult,
.note-card--adult.has-adult-media .chip-adult{
  display:none !important;
}

/* =========================
   Adult (18+) — если есть картинка, НЕ показываем бейдж "18+" возле контента
   (оставляем только кнопку "Показать" на самой картинке)
========================= */
.note-card--adult.has-adult-media.is-censored .note-text::before{
  content: none !important;
  display: none !important;
}

/* Adult image: hide reveal button completely */
.note-card--adult.has-adult-media .adult-overlay{
  display: none !important;
}

/* ==========================================
   Auth (Register) mobile layout fix
   чекбоксы/текст/ссылка "Правила" не перекрываются
========================================== */
@media (max-width: 720px){

  /* если у тебя есть общий контейнер авторизации — хорошо.
     Если нет, правила ниже всё равно сработают по form/checkbox */
  .auth-card, .auth-box, .auth-container{
    width: min(520px, calc(100% - 22px));
    margin: 12px auto 0;
    padding: 18px 14px;
  }

  /* Каждая строка чекбокса */
  .form-check,
  .checkbox-row,
  .auth-checkbox,
  form .field-checkbox{
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 10px 0;
  }

  /* Текст чекбокса */
  .form-check label,
  .checkbox-row label,
  .auth-checkbox label,
  form .field-checkbox label{
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.2;
    white-space: normal;   /* разрешаем перенос */
    word-break: break-word;
  }

  /* Ссылка "Правила" — не должна выпадать/наезжать */
  .form-check label a,
  .checkbox-row label a,
  .auth-checkbox label a,
  form .field-checkbox label a{
    display: inline;
    white-space: nowrap;
  }

  /* Сам чекбокс — справа, фикс размера */
  .form-check input[type="checkbox"],
  .checkbox-row input[type="checkbox"],
  .auth-checkbox input[type="checkbox"],
  form .field-checkbox input[type="checkbox"]{
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0 !important;
  }

  /* На случай, если где-то чекбокс/лейбл позиционируются странно */
  .form-check input[type="checkbox"],
  .form-check label{
    position: static !important;
  }
}

/* =========================================================
   Mobile: Notes composer — NO fixed, NO jumps, NO disappearing bg
========================================================= */
@media (max-width: 720px){

  /* НИКОГДА не фиксируем composer целиком на мобилке */
  .notes-page .notes-compose:focus-within{
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;

    margin: 0 !important;
    border-radius: inherit !important;

    /* важно: НЕ initial, иначе "подложка" может визуально исчезать */
    background: transparent !important;
    border-top: 0 !important;
    box-shadow: none !important;

    padding-bottom: 0 !important;
  }

  .notes-page{
    padding-bottom: 0 !important;
  }

  /* Тулбар: без переноса в 2 строки = без скачков */
  .feather-ce-wrap{
    padding-top: 0 !important;   /* <-- убираем "широко наверху" */
  }

  .feather-ce-wrap .feather-toolbar{
    margin: 0 0 12px;            /* <-- чуть воздуха между кнопками и полем */
    gap: 10px;

    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;

    min-height: 34px;            /* фикс высоты тулбара */
  }
  .feather-ce-wrap .feather-toolbar::-webkit-scrollbar{ display:none; }

  .feather-toolbar .ft-btn{
    min-width: 34px;
    height: 34px;
    border-radius: 10px;
  }

  /* На всякий: чтобы фон поля не "пропадал" при фокусе */
  .feather-ce:focus{
    outline: none !important;
    background: rgba(120,120,160,.08) !important;
  }
}

/* =========================
   NOTES — footer mobile order
========================= */
@media (max-width: 520px){

  .notes-compose-footer--v2{
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  /* 1) Чекбокс сразу под подписью */
  .notes-compose-footer--v2 .remember-row{
    margin: 0 !important;          /* перебиваем -56px */
    white-space: nowrap;
    order: 1;

    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* 2) Ряд "куда отправить" + кнопка рядом */
  .notes-compose-footer--v2 .send-row{
    order: 2;
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-left: 0;               /* на мобилке не нужно auto */
  }

  .notes-compose-footer--v2 .field-group{
    flex: 1 1 auto;
    min-width: 0;
  }

  .notes-compose-footer--v2 #id_channel{
    width: 100%;
    min-width: 0 !important;
  }

  .notes-submit{
    flex: 0 0 auto;
    width: auto;                  /* не во всю ширину */
    white-space: nowrap;
  }
}

/* =========================================================
   NOTES — Mobile final: grow editor + keep card background
   Paste at the VERY END of pages.css
========================================================= */
@media (max-width: 720px){

  /* 1) НИКОГДА не фиксируем composer на мобилке — иначе редактор упирается и скроллится */
  .notes-page .notes-compose,
  .notes-page .notes-compose:focus-within{
    position: static !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;

    /* 2) Подложка карточки должна быть всегда, и в фокусе тоже */
    background: var(--bg-card) !important;
    border-top: 0 !important;
    box-shadow: var(--shadow-soft) !important;

    margin: 0 !important;
    border-radius: 18px !important;
    padding-bottom: 0 !important;
  }

  /* если ранее добавляли компенсацию под fixed composer */
  .notes-page{ padding-bottom: 0 !important; }

  /* 3) Редактор должен РАСТИ, а не превращаться в внутренний скролл */
  .notes-page .feather-ce{
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;      /* важное: убираем внутреннюю прокрутку */
  }

  /* 4) На всякий — убираем "пустое место сверху", если где-то осталось */
  .notes-page .feather-ce-wrap{ padding-top: 0 !important; }
}

/* =========================================
   Notes editor — grow like dialogs
========================================= */

.notes-page .feather-ce{
  min-height: 110px;      /* стартовая высота */
  max-height: 45vh;       /* мягкий лимит роста */
  overflow-y: auto;       /* после лимита появляется скролл */
}

.notes-page .feather-ce-wrap{
  height: auto;
}

.notes-page .notes-compose{
  height: auto;
  max-height: none !important;
}

.notes-page .feather-ce[contenteditable]{
  max-height: none !important;
  overflow: visible !important;
}

/* блок подписи */
.signature-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* поле ввода подписи */
.signature-row input[type="text"] {
    flex: 1;
}

/* чекбокс "запомнить подпись" */
.signature-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    font-size: 13px;
    opacity: 0.9;
}

.remember-row{
    display:flex;
    align-items:flex-start;
    gap:6px;
    padding-top:20px;
}

.remember-row input[type="checkbox"]{
    margin-top:0;
}

.remember-row span{
    margin-top:-4px;
}

/* =========================
   NOTES — Mobile: signature row + remember checkbox inline
   ========================= */
@media (max-width: 520px){

  /* 1) "Подпись" + чекбокс в одну строку */
  #sig-field .sig-input-wrap{
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  #sig-field .sig-input-wrap > input[type="text"],
  #sig-field .sig-input-wrap > input[type="search"],
  #sig-field .sig-input-wrap > input:not([type]){
    flex: 1 1 auto;
    min-width: 0;
  }

  /* чекбокс рядом: компактный и по центру */
  #sig-field .sig-input-wrap .remember-row{
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px;
    white-space: nowrap;
  }

  #sig-field .sig-input-wrap .remember-row span{
    font-size: 12px;
    line-height: 1.1;
    margin: 0 !important;        /* убираем твой span margin-top:-4px */
  }

  /* если где-то остались старые хаки */
  .remember-row{ padding-top: 0 !important; }
  .remember-row input[type="checkbox"]{ margin-top: 0 !important; }

  /* 2) "Куда отправить" + "Отправить" в одну строку */
  .notes-compose-footer--v2{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .notes-compose-footer--v2 .send-row{
    display: flex !important;
    align-items: flex-end !important;
    gap: 12px !important;
  }

  .notes-compose-footer--v2 .field-group{
    flex: 1 1 auto;
    min-width: 0;
  }

  .notes-compose-footer--v2 #id_channel{
    width: 100%;
    min-width: 0 !important;
  }

  .notes-submit{
    flex: 0 0 auto;
    width: auto;
    white-space: nowrap;
  }
}

@media (max-width: 520px){
  .notes-compose-footer--v2 .field-group > label.label[for="id_channel"]{
    display: none !important;
  }
}

@media (max-width: 520px){

  .notes-compose-footer--v2{
    padding-bottom: 10px;
  }

  .notes-compose-footer--v2 .send-row{
    margin-bottom: 8px;
  }

}

.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);
}



/* ===== 0.1.0 polish: mobile dialog header / mobile avatar menu / cauldron card alignment ===== */
.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%;
  }

  .topbar .nav-icons .nav-link[title="Профиль"],
  .topbar .nav-icons .nav-link[title="Настройки"]{
    display:none;
  }
  .user-panel{
    position:relative;
  }
  .user-panel .user-meta{
    display:none;
  }
  .user-identity-toggle{
    appearance:none;
    border:0;
    background:transparent;
    padding:0;
    margin:0;
    cursor:pointer;
  }

  .mobile-user-wrap{
    position: relative;
    z-index: 1001;
  }

  .mobile-user-menu{
    position:absolute;
    right:0;
    top:calc(100% + 10px);
    min-width:170px;
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:8px;
    border-radius:16px;
    background:var(--card-bg, rgba(14,17,39,.96));
    border:1px solid var(--stroke-soft, rgba(255,255,255,.12));
    box-shadow:0 16px 38px rgba(0,0,0,.24);
    z-index:1000;
  }
  .mobile-user-menu[hidden]{ display:none !important; }
  .mobile-user-menu__item{
    display:block;
    padding:10px 12px;
    border-radius:12px;
    text-decoration:none;
    color:var(--text-main);
    background:transparent;
  }
  .mobile-user-menu__item:hover{
    background:rgba(127,127,127,.10);
  }
  .mobile-user-menu__item--danger{
    color:var(--danger, #d66);
  }
}

html[data-theme="light"] .mobile-user-menu{
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(125, 99, 210, .18);
  box-shadow: 0 16px 38px rgba(32, 20, 64, .14);
}

html[data-theme="light"] .mobile-user-menu__item{
  color: #241f3f;
}

html[data-theme="light"] .mobile-user-menu__item:hover{
  background: rgba(125, 99, 210, .10);
}

html[data-theme="light"] .mobile-user-menu__item--danger{
  color: #d3224a;
}

@media (max-width: 760px){
  body[data-page="cauldron_search"] .search-item,
  body[data-page="cauldron_board"] .item{
    position:relative;
    padding-bottom:16px;
  }
  body[data-page="cauldron_search"] .search-top,
  body[data-page="cauldron_board"] .top{
    align-items:flex-start;
    gap:8px;
  }
  body[data-page="cauldron_search"] .search-top > :last-child,
  body[data-page="cauldron_board"] .top > :last-child{
    margin-left:auto;
    display:flex;
    align-items:flex-start;
    gap:6px;
    flex-shrink:0;
  }
  body[data-page="cauldron_search"] .search-badge,
  body[data-page="cauldron_board"] .badge{
    font-size:11px;
    line-height:1.15;
    padding:5px 8px;
    white-space:nowrap;
  }
  body[data-page="cauldron_search"] .menu-btn,
  body[data-page="cauldron_board"] .menu-btn{
    min-width:30px;
    height:30px;
    padding:0 8px;
  }
  body[data-page="cauldron_search"] .tag-line,
  body[data-page="cauldron_board"] .tag-line{
    font-size:12px;
  }
  body[data-page="cauldron_search"] .tag-text,
  body[data-page="cauldron_board"] .tag-text{
    font-size:12px;
  }
  body[data-page="cauldron_search"] .search-actions,
  body[data-page="cauldron_board"] .actions{
    justify-content:flex-end;
  }
  body[data-page="cauldron_search"] .js-toggle-reply,
  body[data-page="cauldron_board"] .js-board-reply-toggle{
    position:static;
    right:auto;
    bottom:auto;
    margin-left:auto;
  }
}


/* =========================================================
   0.1.0 polish hotfixes: topbar, dialog header, cauldron desktop
   ========================================================= */

/* reset avatar button chrome on all breakpoints */
.user-identity-toggle{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  margin:0;
  cursor:pointer;
  box-shadow:none;
  border-radius:999px;
  line-height:0;
  flex:0 0 auto;
}
.user-identity-toggle::-moz-focus-inner{ border:0; padding:0; }
.user-identity-toggle:focus-visible{
  outline:none;
  box-shadow:0 0 0 var(--focus-ring-size) var(--focus-ring);
}

@media (min-width: 761px){
  .topbar-inner{
    gap:14px;
  }
  .nav-icons{
    margin-left:auto;
  }
  .user-panel{
    margin-left:4px;
  }
  .mobile-user-menu{
    display:none !important;
  }
}

@media (max-width: 760px){
  .user-panel{
    position: relative;
    z-index: 2100;
  }

  .mobile-user-wrap{
    position: relative;
    z-index: 2101;
  }

  .mobile-user-menu{
    right: 0;
    top: calc(100% + 10px);
    z-index: 2102;
  }
}

/* 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;
  }
}

/* cauldron cards: desktop composition closer to target */
@media (min-width: 761px){
  body[data-page="cauldron_search"] #search-list > .search-item,
  body[data-page="cauldron_board"] #board-list > .item{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:10;
    padding:14px 18px 18px;
  }

  body[data-page="cauldron_search"] .search-top,
  body[data-page="cauldron_board"] .top{
    align-items:flex-start;
    gap:10px;
  }

  body[data-page="cauldron_search"] .cauldron-item-head-actions,
  body[data-page="cauldron_board"] .cauldron-item-head-actions{
    margin-left:auto;
    display:flex;
    align-items:flex-start;
    gap:8px;
    flex:0 0 auto;
  }

  body[data-page="cauldron_search"] .search-badge,
  body[data-page="cauldron_board"] .badge{
    font-size:12px;
    line-height:1.1;
    padding:6px 10px;
    white-space:nowrap;
  }

  body[data-page="cauldron_search"] .menu-btn,
  body[data-page="cauldron_board"] .menu-btn{
    min-width:30px;
    width:30px;
    height:30px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
  }

  body[data-page="cauldron_search"] #search-list > .search-item .search-text,
  body[data-page="cauldron_board"] #board-list > .item .text{
    flex:0 1 auto;
    margin-top:10px;
    line-height:1.4;
  }

  body[data-page="cauldron_search"] #search-list > .search-item .tag-line,
  body[data-page="cauldron_board"] #board-list > .item .tag-line{
    font-size:12px;
    line-height:1.35;
  }

  body[data-page="cauldron_search"] #search-list > .search-item .tag-text,
  body[data-page="cauldron_board"] #board-list > .item .tag-text{
    font-size:12px;
  }

  body[data-page="cauldron_search"] #search-list > .search-item .tag-line--meta,
  body[data-page="cauldron_board"] #board-list > .item .tag-line--meta{
    margin-top:18px;
  }

  body[data-page="cauldron_search"] .search-actions,
  body[data-page="cauldron_board"] .actions{
    justify-content:flex-end;
  }

  body[data-page="cauldron_search"] #search-list > .search-item .search-actions,
  body[data-page="cauldron_board"] #board-list > .item .actions{
    margin-top:14px;
  }

  body[data-page="cauldron_search"] .js-toggle-reply,
  body[data-page="cauldron_board"] .js-board-reply-toggle{
    position:static;
    right:auto;
    bottom:auto;
    margin:0;
  }
}

@media (max-width: 760px){
  .topbar, .topbar-inner{
    overflow: visible !important;
  }
}

/* ===== 0.1.0 hotfix: убрать лишнюю полоску у верхних вкладок котла ===== */
.cauldron-shell .cauldron-tabs .cauldron-tab,
.cauldron-shell .cauldron-tabs .cauldron-tab:hover,
.cauldron-shell .cauldron-tabs .cauldron-tab.is-active{
  text-decoration: none !important;
}

.cauldron-shell .cauldron-tabs .cauldron-tab::after,
.cauldron-shell .cauldron-tabs .cauldron-tab.is-active::after{
  content: none !important;
  display: none !important;
}

/* Мобильная коррекция навбара */
@media (max-width: 768px) {

  .navbar-icons,
  .nav-icons,
  .top-nav-icons {
    margin-right: 6px;
    gap: 8px;
  }

  .theme-toggle {
    margin-left: 4px;
  }

}

@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;
  }
}

.quote-preview-card{
  border-left: 3px solid var(--accent, #b89cff);
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,.04);
}

.quote-preview-card__author{
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 4px;
  color: var(--accent, #b89cff);
}

.quote-preview-card__text{
  font-size: 13px;
  line-height: 1.35;
  color: var(--text-main);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

html[data-theme="light"] .quote-preview-card{
  background: rgba(15,23,42,.04);
} 

/* ===== Notes quotes refresh ===== */
.note-quote-block{
  margin: 0 0 10px;
}

.note-quote-block__inner{
  width: 100%;
  text-align: left;
  display: block;
  border: 1px solid rgba(167, 139, 250, .22);
  border-left: 3px solid var(--accent, #a78bfa);
  border-radius: 16px;
  background: rgba(255,255,255,.035);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  padding: 10px 12px;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.note-quote-block__inner:hover{
  background: rgba(255,255,255,.05);
  border-color: rgba(167, 139, 250, .34);
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
}

.note-quote-block__head,
.quote-preview-card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}

.note-quote-block__author,
.quote-preview-card__author{
  font-size:10px;
  font-weight:700;
  color: var(--accent, #c4b5fd);
  line-height:1.2;
}

.note-quote-block__arrow,
.quote-preview-card__jump{
  flex:0 0 auto;
  font-size:12px;
  color: var(--text-muted);
  text-decoration:none;
}

.note-quote-block__text,
.quote-preview-card__text{
  font-size:13px;
  line-height:1.45;
  color: var(--text-main);
  overflow:hidden;
}

.note-quote-block__text.is-collapsed,
.quote-preview-card__text.is-collapsed{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}

.note-quote-block__text.is-expanded,
.quote-preview-card__text.is-expanded{
  display:block;
  -webkit-line-clamp:unset;
}

.note-quote-block__toggle,
.quote-preview-card__toggle{
  display:inline-flex;
  align-items:center;
  margin-top:8px;
  padding:0;
  border:0;
  background:none;
  color: var(--text-muted);
  font-size:12px;
  cursor:pointer;
}

.note-quote-block__toggle:hover,
.quote-preview-card__toggle:hover{
  color: var(--text-main);
}

.note-quote-block__inner--multi{
  cursor: default;
}

.note-quote-block__head--multi{
  margin-bottom: 8px;
}

.note-quote-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.note-quote-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:32px;
  padding:7px 12px;
  border:1px solid rgba(167, 139, 250, .24);
  border-radius:999px;
  background: rgba(167,139,250,.10);
  color: var(--accent, #c4b5fd);
  font-size:13px;
  font-weight:700;
  line-height:1;
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease, color .18s ease;
}

.note-quote-pill:hover{
  background: rgba(167,139,250,.16);
  border-color: rgba(167,139,250,.40);
  color: var(--text-main, rgba(255,255,255,.95));
  transform: translateY(-1px);
}

.note-quote-pill.is-own-quote{
  background: rgba(167,139,250,.18);
  border-color: rgba(167,139,250,.44);
}

/* своё цитирование — тоже в общей фиолетовой палитре сайта */
.note-card--quoted-me .note-quote-block__inner,
.note-quote-block.is-own-quote .note-quote-block__inner,
.quote-preview-card.is-own-quote{
  border-left-color: var(--accent, #a78bfa);
  border-color: rgba(167,139,250,.34);
  background: rgba(167,139,250,.10);
}

/* маленькая плашка на самой карточке */
.note-quote-alert{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-right:auto;
  border:1px solid rgba(167,139,250,.28);
  border-radius:999px;
  background: rgba(167,139,250,.12);
  color: var(--text-main);
  padding:6px 10px;
  font-size:12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.12);
  cursor:pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.note-quote-alert:hover{
  background: rgba(167,139,250,.16);
  border-color: rgba(167,139,250,.40);
}

.note-quote-alert__icon{
  line-height:1;
}

/* плавающая кнопка "Цитаты" */
.notes-quote-fab{
  position: fixed;
  right: 115px;        /* левее для ПК */
  bottom: 118px;      /* выше для ПК */
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(180px, calc(100vw - 40px));
  border: 1px solid rgba(167,139,250,.26);
  border-radius: 999px;
  background: rgba(18,22,34,.94);
  box-shadow: 0 18px 45px rgba(0,0,0,.30);
  color: rgba(245,240,255,.98);
  padding: 10px 14px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.notes-quote-fab:hover{
  transform: translateY(-1px);
  border-color: rgba(167,139,250,.40);
  box-shadow: 0 22px 52px rgba(0,0,0,.34);
}

.notes-quote-fab__icon{
  line-height:1;
}

.notes-quote-fab__label{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:13px;
}

.notes-quote-fab__count{
  flex:0 0 auto;
  min-width:20px;
  height:20px;
  border-radius:999px;
  background: rgba(167,139,250,.20);
  color: #f6f1ff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 6px;
  font-size:16px;
  font-weight:700;
}

/* светлая тема */
html[data-theme="light"] .note-quote-block__inner{
  background: rgba(91, 62, 191, .04);
  border-color: rgba(124, 96, 214, .20);
  box-shadow: 0 10px 26px rgba(39, 23, 94, .08);
}

html[data-theme="light"] .note-quote-block__inner:hover{
  background: rgba(91, 62, 191, .06);
  border-color: rgba(124, 96, 214, .30);
}

html[data-theme="light"] .note-card--quoted-me .note-quote-block__inner,
html[data-theme="light"] .note-quote-block.is-own-quote .note-quote-block__inner,
html[data-theme="light"] .quote-preview-card.is-own-quote{
  background: rgba(124, 96, 214, .08);
  border-color: rgba(124, 96, 214, .28);
}

html[data-theme="light"] .note-quote-alert{
  background: rgba(124, 96, 214, .10);
  border-color: rgba(124, 96, 214, .22);
  color: #352564;
}

html[data-theme="light"] .note-quote-alert:hover{
  background: rgba(124, 96, 214, .14);
  border-color: rgba(124, 96, 214, .30);
}

html[data-theme="light"] .note-quote-pill{
  background: rgba(124,58,237,.08);
  border-color: rgba(124,58,237,.18);
  color: #6d28d9;
}

html[data-theme="light"] .note-quote-pill:hover{
  background: rgba(124,58,237,.14);
  border-color: rgba(124,58,237,.28);
  color: #4c1d95;
}

html[data-theme="light"] .notes-quote-fab{
  background: rgba(255,255,255,.96);
  color: #352564;
  border-color: rgba(124,96,214,.24);
  box-shadow: 0 18px 40px rgba(60, 40, 120, .14);
}

html[data-theme="light"] .notes-quote-fab:hover{
  border-color: rgba(124,96,214,.34);
  box-shadow: 0 20px 46px rgba(60, 40, 120, .18);
}

html[data-theme="light"] .notes-quote-fab__count{
  background: rgba(124,96,214,.14);
  color: #4b35a0;
}

/* мобильные — наоборот чуть правее и компактнее */
@media (max-width: 640px){
  .notes-quote-fab{
    left: auto;
    right: 12px;
    bottom: 96px;
    max-width: min(170px, calc(100vw - 20px));
    justify-content: flex-start;
    padding: 10px 12px;
  }

  .notes-quote-fab__label{
    max-width: 84px;
  }
}

/* =========================================
   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;
  }
}

/* ===== Notes admin moderation ===== */

.note-admin-star{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  color:#f4d47a;
  background:rgba(244,212,122,.12);
  border:1px solid rgba(244,212,122,.22);
  vertical-align:middle;
}

.note-menu-divider{
  height:1px;
  margin:8px 0;
  background:rgba(255,255,255,.08);
}

.note-menu-caption{
  margin:0 0 8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
}

.menu-form--admin{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.menu-form--admin .menu-item{
  width:100%;
  text-align:left;
}

.menu-item--danger{
  color:#ffb4b4;
}

.menu-item--danger:hover{
  background:rgba(255,90,90,.12);
}

.menu-field-label{
  margin-top:2px;
  font-size:12px;
  color:rgba(255,255,255,.62);
}

.menu-select,
.menu-textarea{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  color:inherit;
}

.menu-select{
  min-height:38px;
  padding:8px 10px;
}

.menu-textarea{
  min-height:80px;
  padding:10px 12px;
  resize:vertical;
}

.menu-check{
  display:flex;
  align-items:flex-start;
  gap:8px;
  font-size:13px;
  color:rgba(255,255,255,.78);
}

.admin-star-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

@media (max-width: 720px){
  .notes-compose-footer--v2 .send-row{
    align-items:stretch;
  }

  .admin-star-toggle{
    width:100%;
  }
}

html[data-theme="light"] .note-admin-star{
  color:#7a4f00;
  background:#fff4cf;
  border:1px solid #e7c46a;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset;
}

/* ===== Notes self-hides / settings ===== */

.settings-hidden-signatures-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:12px;
}

.settings-hidden-signature-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.settings-hidden-signature-meta{
  min-width:0;
}

.settings-hidden-signature-title{
  font-weight:600;
  line-height:1.25;
  word-break:break-word;
}

.settings-hidden-signature-sub{
  margin-top:4px;
  font-size:12px;
  color:rgba(255,255,255,.58);
}

.settings-hidden-signature-form{
  flex:0 0 auto;
  margin:0;
}

.note-menu .menu-form{
  margin:0;
}

.note-menu .menu-form + .menu-form{
  margin-top:4px;
}

html[data-theme="light"] .settings-hidden-signature-item{
  background:#fffdf8;
  border-color:rgba(120,95,40,.12);
}

html[data-theme="light"] .settings-hidden-signature-sub{
  color:rgba(88,72,40,.66);
}

@media (max-width: 720px){
  .settings-hidden-signature-item{
    align-items:flex-start;
    flex-direction:column;
  }

  .settings-hidden-signature-form{
    width:100%;
  }

  .settings-hidden-signature-form .settings-submit-btn{
    width:100%;
  }
}

/* ===== Settings: notes feed + autoedit ===== */

.settings-autoedit-list{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:14px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}

.settings-autoedit-list code{
  padding:1px 6px;
  border-radius:8px;
  background:rgba(255,255,255,.06);
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.95em;
}

html[data-theme="light"] .settings-autoedit-list{
  border-top-color:rgba(120,95,40,.12);
}

html[data-theme="light"] .settings-autoedit-list code{
  background:#fff7e8;
}