/* =============================================================================
   Реальный UI Зарубки (ui-reference.html) — стили под префиксом .uir,
   чтобы не конфликтовать с site.css. Токены тёмной темы приложения
   совпадают с палитрой лендинга (#0F1116 / #181B22 / #F2F5F9 / #3F84F6).
   ========================================================================== */
.uir {
  --page:#0F1116; --surface:#181B22; --muted:#1E222A; --elevated:#21262F; --accented:#2A3039;
  --ink:#F2F5F9; --legend:#D6DBE3; --desc:#9097A3; --faint:#6B7480; --dim:#4A515C;
  --line:#2C323C; --line-soft:#232830;
  --flash:rgba(255,255,255,.085);
  --primary:#3F84F6; --primary-strong:#5A97F8; --primary-soft:#1A2740;
  --our-bubble:#2F6FE0; --our-ink:#FFFFFF;
  --success:#27B978; --success-soft:#16301F; --warning:#DE972F; --warning-soft:#33270F;
  --danger:#F0594F; --danger-soft:#371F1D;
  --tg:#34AEEE; --tg-soft:#11293A; --max:#8C6EFF; --max-soft:#221C3E;
  --collab:#34B3E8; --collab-soft:#0E2A33;
  --filechip:rgba(255,255,255,.08);
  --shadow:0 1px 2px rgba(0,0,0,.35),0 12px 30px rgba(0,0,0,.4);
  --shadow-pop:0 10px 32px rgba(0,0,0,.5);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-align: left;
}
.uir *, .uir *::before, .uir *::after { box-sizing: border-box; }
.uir p { margin: 0; }
.uir button { font-family: inherit; }
.uir input, .uir textarea { font-family: inherit; }
.uir svg { display: block; }

/* line icons: stroke currentColor */
.uir svg[data-icon]:not([data-icon="tg-logo"]):not([data-icon="max-logo"]):not([data-icon="collab-logo"]):not([data-icon="app-logo"]) {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.uir .scrolly::-webkit-scrollbar { width:8px; height:8px; }
.uir .scrolly::-webkit-scrollbar-thumb { background: var(--dim); border-radius:8px; }
.uir .scrolly::-webkit-scrollbar-track { background: transparent; }

/* ---- шелл ---- */
.uir .shell {
  display: flex;
  flex-direction: column;
  height: clamp(520px, 62vh, 620px);
  min-height: 0;
  background: var(--page);
}
.uir .shell__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
  height: 56px;
  padding: 0 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.uir .shell__brand { display: flex; align-items: center; gap: 9px; min-width: 0; }
.uir .shell__logo { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.uir .shell__title { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; white-space: nowrap; }
.uir .shell__actions { display: flex; align-items: center; gap: 8px; }
.uir .shell__action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0;
  border: none; border-radius: 9px;
  background: transparent; color: var(--legend); cursor: pointer;
}
.uir .shell__panes {
  display: grid;
  grid-template-columns: 348px minmax(0, 1fr);
  flex: 1;
  min-height: 0;
}
.uir .shell__sidebar { border-right: 1px solid var(--line); min-height: 0; }
.uir .shell__detail { min-width: 0; min-height: 0; overflow: hidden; background: var(--page); }

/* ---- сайдбар диалогов ---- */
.uir .dialog-sidebar {
  display: flex; flex-direction: column;
  height: 100%; min-height: 0;
  background: var(--surface);
}
.uir .dialog-sidebar__head { flex: none; padding: 12px 14px 0; background: var(--surface); }
.uir .ui-segmented { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: var(--muted); }
.uir .ui-segment {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 5px 4px;
  border: none; border-radius: 8px;
  background: transparent; color: var(--desc);
  font-size: 12.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.uir .ui-segment.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.uir .ui-segment__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px;
  background: var(--warning); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
}
.uir .dialog-sidebar__search { margin: 12px 0; }
.uir .ui-input { position: relative; display: flex; align-items: center; }
.uir .ui-input svg { position: absolute; left: 11px; color: var(--faint); pointer-events: none; }
.uir .ui-input input {
  width: 100%; height: 38px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--elevated); color: var(--ink);
  padding: 0 12px 0 34px; font-size: 13px; outline: none;
}
.uir .ui-input input::placeholder { color: var(--faint); }
.uir .dialog-sidebar__body {
  flex: 1; min-height: 0; overflow-y: auto;
  padding-bottom: 14px;
  background: var(--surface);
}
.uir .dialog-sidebar__group-title {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 6px;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--desc);
}
.uir .dialog-sidebar__group-title svg { color: var(--faint); }

.uir .dialog-row {
  display: flex; align-items: flex-start; gap: 11px;
  cursor: pointer; padding: 11px 14px;
  transition: background-color 0.12s ease;
}
.uir .dialog-row:hover { background: var(--muted); }
.uir .dialog-row.is-active { background: var(--primary-soft); }
.uir .dialog-row__avatar { position: relative; flex: none; }
.uir .avatar {
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px; font-weight: 700; line-height: 1; user-select: none;
}
.uir .avatar--round { border-radius: 50%; }
.uir .avatar--tg     { background: var(--tg-soft);     color: var(--tg); }
.uir .avatar--max    { background: var(--max-soft);    color: var(--max); }
.uir .avatar--collab { background: var(--collab-soft); color: var(--collab); }
.uir .avatar--neutral{ background: var(--accented);    color: var(--legend); }
.uir .channel-badge {
  position: absolute; right: -3px; bottom: -3px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--surface);
}
.uir .channel-badge svg { border-radius: 50%; }
.uir .dialog-row__main { min-width: 0; flex: 1; }
.uir .dialog-row__title-line { display: flex; align-items: center; gap: 8px; line-height: 16px; }
.uir .dialog-row__title {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.uir .dialog-row__preview-line { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.uir .ui-tag {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 6px;
  background: var(--primary-soft); color: var(--primary);
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  max-width: 160px; overflow: hidden; text-overflow: ellipsis; flex: none;
}
.uir .dialog-row__preview {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
  font-size: 12.5px; line-height: 15px; color: var(--desc);
}
.uir .dialog-row__aside { display: flex; flex: none; flex-direction: column; align-items: flex-end; }
.uir .dialog-row__aside-time { display: flex; align-items: center; justify-content: flex-end; height: 16px; }
.uir .dialog-row__time { flex: none; font-size: 11px; color: var(--faint); }
.uir .dialog-row__aside-badge { display: flex; align-items: center; justify-content: flex-end; height: 15px; margin-top: 3px; }
.uir .ui-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--primary); color: var(--our-ink);
  font-size: 11px; font-weight: 800; line-height: 1;
  transition: transform 300ms var(--ez);
}
.uir .unbound-card {
  margin: 8px; padding: 13px;
  border: 1px solid var(--line); border-radius: 13px;
  background: var(--muted); box-shadow: var(--shadow); cursor: pointer;
}
.uir .unbound-card:hover { border-color: var(--primary); }
.uir .unbound-card__head { display: flex; align-items: center; gap: 11px; }
.uir .unbound-card__main { min-width: 0; flex: 1; }
.uir .unbound-card__title {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
}
.uir .unbound-card__subtitle { margin-top: 2px; font-size: 12px; color: var(--desc); }
.uir .icon-btn {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 32px; height: 32px; padding: 0;
  border: none; border-radius: 10px;
  background: var(--primary); color: var(--our-ink); cursor: pointer;
}

/* ---- детальная панель ---- */
.uir .dialog-detail {
  position: relative; display: flex; flex-direction: column;
  height: 100%; min-height: 0; background: var(--page);
}
.uir .dialog-detail__header {
  display: flex; flex: none; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line); background: var(--surface);
  padding: 10px 14px;
}
.uir .dialog-back { display: none; }
.uir .dialog-detail__identity {
  display: flex; flex: 1; min-width: 0; align-items: center; gap: 12px;
  margin: -6px -8px; padding: 6px 8px; border-radius: 10px; cursor: pointer;
}
.uir .dialog-detail__identity:hover { background: var(--muted); }
.uir .dialog-detail__avatar { position: relative; display: flex; flex: none; }
.uir .dialog-detail__channel { position: absolute; right: -3px; bottom: -3px; }
.uir .dialog-detail__meta { min-width: 0; flex: 1; }
.uir .dialog-detail__title {
  display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; font-weight: 800; color: var(--ink);
}
.uir .dialog-detail__subtitle {
  display: flex; align-items: center; gap: 6px;
  margin: 2px 0 0; overflow: hidden;
  font-size: 11.5px; color: var(--desc);
}
.uir .dialog-detail__folder { flex: none; color: var(--faint); }
.uir .dialog-detail__subtitle-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.uir .dialog-detail__action {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; padding: 0;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); color: var(--desc); cursor: pointer;
}
.uir .dialog-detail__body { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; }

/* ---- лента сообщений ---- */
.uir .chat-feed { position: relative; height: 100%; min-height: 0; background: var(--page); }
.uir .chat-feed__sticky { pointer-events: none; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 5; }
.uir .sticky-pill {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 6px;
  border: none; border-radius: 20px; background: var(--accented);
  padding: 5px 12px 5px 11px;
  font-size: 11px; font-weight: 700; color: var(--desc);
  box-shadow: var(--shadow); cursor: pointer;
}
.uir .chat-feed__scroll {
  height: 100%; overflow-x: hidden; overflow-y: auto;
  padding: 0 18px 14px; /* воздух между последним сообщением и композером */
  display: flex; flex-direction: column; justify-content: flex-end;
}
.uir .unread-divider { display: flex; align-items: center; gap: 10px; padding: 12px 2px 6px; }
.uir .unread-divider__line { flex: 1; height: 1px; background: var(--primary); opacity: 0.35; }
.uir .unread-divider__label {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--primary);
}
.uir .message-row { position: relative; display: flex; align-items: flex-start; gap: 8px; padding: 3px 0; }
.uir .message-row.is-client { flex-direction: row; }
.uir .message-row.is-us { flex-direction: row-reverse; }
.uir .message-row__avatar { flex: none; }
.uir .message-row__col {
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; max-width: calc(100% - 80px);
}
.uir .message-row.is-client .message-row__col { align-items: flex-start; }
.uir .message-row.is-us .message-row__col { align-items: flex-end; }
.uir .message-row__sig { margin: 0 8px 3px; font-size: 11px; font-weight: 700; color: var(--desc); }
.uir .bubble { min-width: 0; width: fit-content; max-width: 100%; padding: 6px 10px; font-size: 13px; line-height: 1.4; }
.uir .bubble__text { white-space: pre-wrap; overflow-wrap: anywhere; }
.uir .message-row.is-client .bubble {
  border: 1px solid var(--line-soft);
  border-radius: 15px 15px 15px 5px;
  background: var(--surface); color: var(--ink);
}
.uir .message-row.is-us .bubble {
  border: 1px solid transparent;
  border-radius: 15px 15px 5px 15px;
  background: var(--our-bubble); color: var(--our-ink);
}
.uir .bubble__meta {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  margin-top: 2px; font-size: 10px; opacity: 0.65;
}
.uir .bubble__edited {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-style: italic;
  text-decoration: underline; text-underline-offset: 2px;
}
.uir .bubble__time { font-size: 10.5px; }
.uir .bubble__check { display: inline-flex; align-items: center; color: inherit; }

/* ---- композер ---- */
.uir .composer { flex: none; border-top: 1px solid var(--line); background: var(--surface); padding: 8px 4px; }
.uir .composer__row { display: flex; align-items: flex-end; gap: 6px; }
.uir .composer__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex: none; padding: 0;
  border-radius: 50%; border: 1px solid var(--line);
  background: var(--elevated); color: var(--desc); cursor: pointer;
}
.uir .composer__field { flex: 1; min-width: 0; position: relative; display: flex; }
.uir .composer__input {
  flex: 1; min-height: 36px; resize: none;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--elevated); color: var(--ink);
  padding: 8px 40px 8px 10px;
  font-family: inherit; font-size: 14px; line-height: 1.35;
  overflow-y: hidden; outline: none;
}
.uir .composer__input::placeholder { color: var(--faint); }
.uir .composer__fbtn {
  position: absolute; bottom: 4px; right: 4px;
  width: 28px; height: 28px;
  border: none; border-radius: 8px; background: transparent; color: var(--faint);
  display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
}
.uir .composer__micwrap { flex: none; width: 36px; height: 36px; overflow: hidden; }

/* ---- анимация живого цикла демо ---- */
.uir .msg-live {
  opacity: 0;
  transform: translateY(12px) scale(0.94);
  transition: opacity 420ms var(--ez), transform 520ms var(--ease-spring);
}
.uir .msg-live.shown { opacity: 1; transform: none; }
.uir .msg-live.away { opacity: 0; transform: translateY(-6px); transition-duration: 300ms; transition-timing-function: var(--ez); }
.uir .typing-dots { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.uir .typing-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--desc);
  animation: tdots 1.2s ease-in-out infinite;
}
.uir .typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.uir .typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes tdots { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.uir .dialog-row__preview.is-typing { color: var(--primary); font-style: italic; }
.uir .ui-badge.bump { transform: scale(1.18); }
/* морфинг «печатает…» → сообщение: баббл растёт из индикатора лёгким пульсом */
.uir .msg-live.morph-in { animation: morph-pulse 380ms var(--ez); }
@keyframes morph-pulse { from { transform: scale(0.96); } to { transform: scale(1); } }

/* ---- адаптив реального UI (как в приложении) ---- */
@media (max-width: 880px) {
  .uir .shell__panes { grid-template-columns: minmax(0, 1fr); }
  .uir .shell__sidebar { display: none; }
  .uir .dialog-back { display: flex; }
}
@media (max-width: 720px) {
  .uir .shell__header { display: none; }
}
@media (max-width: 920px) {
  .uir .shell { height: 540px; }
}
@media (prefers-reduced-motion: reduce) {
  .uir .msg-live { transition: none; opacity: 1; transform: none; }
  .uir .typing-dots i { animation: none; }
  .uir .ui-badge { transition: none; }
}