/* =============================================================
   Демонстрация кабинета.

   Не выдуманный интерфейс «в стиле», а тот же самый, что видит
   риэлтор: тёмный сайдбар с теми же разделами и счётчиками,
   светлая рабочая область, те же цвета и скругления. Значения
   взяты прямо из кабинета — синий #3b6cf5, фон #f6f7f9,
   граница #e8eaef, радиус 10 пикселей, шрифт Inter.

   Курсор ходит сам и кликает: человек видит не картинку, а
   работу — и понимает, что за продукт получит.
   ============================================================= */

/* Явное правило появления. Общее .up.in по каскаду до этого блока
   не доходило, и демонстрация оставалась невидимой при полностью
   рабочей анимации внутри — самая обидная поломка из возможных. */
.demo.up { opacity: 0; transform: translateY(26px) }
.demo.up.in { opacity: 1; transform: none }

.demo {
  position: relative;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(14,18,32,.09);
  box-shadow: 0 60px 130px -60px rgba(14,18,32,.55),
              0 20px 50px -35px rgba(14,18,32,.35);
  overflow: hidden;
  font-family: Inter, Onest, sans-serif;
}

/* Полоса окна браузера — рамка, в которой всё это живёт */
.demo-bar {
  height: 42px; display: flex; align-items: center; gap: 7px;
  padding: 0 15px; background: #F3F4F7;
  border-bottom: 1px solid rgba(14,18,32,.07);
}
.demo-bar i { width: 10px; height: 10px; border-radius: 50%; background: #D9DCE4 }
.demo-bar span {
  margin-left: 12px; font-size: 12px; color: #8A90A0;
  background: #fff; padding: 4px 14px; border-radius: 999px;
  border: 1px solid rgba(14,18,32,.06);
}

.demo-body { display: grid; grid-template-columns: 176px 1fr; min-height: 372px }

/* ── Сайдбар: копия настоящего ───────────────────────────────── */
.demo-nav {
  background: #0A0F1F;
  padding: 14px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.demo-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 8px 14px;
}
.demo-brand b {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(140deg, #4C7BFF, #3b6cf5);
  display: grid; place-items: center; color: #fff; font-size: 13px;
}
.demo-brand span { color: #fff; font-size: 13px; font-weight: 600; letter-spacing: -.01em }
.demo-brand em { display: block; font-style: normal; font-size: 10px; color: rgba(255,255,255,.35) }

.demo-nav a {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 9px;
  font-size: 12.5px; color: rgba(255,255,255,.62);
  transition: background .35s var(--ease), color .35s var(--ease);
}
.demo-nav a i {
  width: 14px; height: 14px; flex: 0 0 auto; opacity: .8;
  background: currentColor;
  -webkit-mask: var(--ic) center/contain no-repeat;
  mask: var(--ic) center/contain no-repeat;
}
.demo-nav a em {
  margin-left: auto; font-style: normal; font-size: 10.5px;
  padding: 1px 6px; border-radius: 999px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.6);
}
.demo-nav a em.hot { background: #FF4D6A; color: #fff }
.demo-nav a.on { background: rgba(255,255,255,.1); color: #fff }
.demo-nav a.on i { opacity: 1 }

/* ── Рабочая область ─────────────────────────────────────────── */
.demo-main { background: #F6F7F9; position: relative; overflow: hidden }

.demo-head {
  height: 46px; display: flex; align-items: center; justify-content: flex-end;
  gap: 8px; padding: 0 16px; border-bottom: 1px solid #E8EAEF; background: #fff;
}
.demo-head .pill {
  font-size: 11.5px; color: #5B6275; background: #F2F4F8;
  padding: 5px 11px; border-radius: 999px;
}
.demo-head .ava {
  width: 26px; height: 26px; border-radius: 8px;
  background: linear-gradient(140deg, #4C7BFF, #3b6cf5);
  color: #fff; font-size: 10.5px; font-weight: 600;
  display: grid; place-items: center;
}

.demo-view { position: relative; height: 326px }

.pane {
  position: absolute; inset: 0; padding: 16px 18px;
  opacity: 0; transform: translateY(12px);
  /* Уходит быстро, приходит плавно. При одинаковой длительности
     обе панели держатся на экране вместе, и текст читается
     наложением — грязь, которую замечают сразу. */
  visibility: hidden;
  transition: opacity .22s var(--ease-soft), transform .22s var(--ease-soft),
              visibility 0s linear .22s;
  pointer-events: none;
}
.pane.on {
  opacity: 1; transform: none; visibility: visible; pointer-events: auto;
  transition: opacity .5s var(--ease) .12s, transform .6s var(--ease) .12s,
              visibility 0s;
}

.pane-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.pane-h b { font-size: 15px; font-weight: 600; color: #0F172A; letter-spacing: -.01em }
.pane-h span { font-size: 12px; color: #8A90A0 }

/* карточки объектов — как плитки в кабинете */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px }
.tile {
  background: #fff; border: 1px solid #E8EAEF; border-radius: 10px;
  overflow: hidden;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
}
.tile:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(14,18,32,.28) }
.tile-img {
  height: 62px; position: relative;
  background: linear-gradient(140deg, #EEF1FA, #E3E8F6);
}
.tile-img em {
  position: absolute; left: 7px; top: 7px;
  font-style: normal; font-size: 9.5px; font-weight: 600;
  color: #3b6cf5; background: #fff; padding: 2px 7px; border-radius: 999px;
}
.tile-b { padding: 8px 9px 10px }
.tile-b b { display: block; font-size: 11.5px; font-weight: 600; color: #0F172A }
.tile-b i { display: block; font-style: normal; font-size: 10px; color: #8A90A0; margin-top: 2px }
.tile-b u { display: block; text-decoration: none; font-size: 12px; font-weight: 700; color: #3b6cf5; margin-top: 5px }

/* список диалогов */
.chat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px; border-radius: 10px; background: #fff;
  border: 1px solid #E8EAEF; margin-bottom: 7px;
}
.chat-row .av {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  display: grid; place-items: center; color: #fff; font-size: 11px; font-weight: 600;
}
.chat-row div { flex: 1; min-width: 0 }
.chat-row b { display: block; font-size: 12px; font-weight: 600; color: #0F172A }
.chat-row i { display: block; font-style: normal; font-size: 11px; color: #8A90A0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.chat-row em {
  font-style: normal; font-size: 10px; font-weight: 600; white-space: nowrap;
  padding: 4px 8px; border-radius: 999px; background: #EAF7E4; color: #3F7A22;
}
.chat-row em.wait { background: #FFF3E0; color: #9A6100 }

/* календарь */
.slot {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px; border-radius: 10px; background: #fff;
  border: 1px solid #E8EAEF; margin-bottom: 7px;
}
.slot b { font-size: 13px; font-weight: 700; color: #0F172A; min-width: 44px }
.slot span { font-size: 12px; color: #5B6275 }
.slot u { margin-left: auto; text-decoration: none; font-size: 10.5px; color: #8A90A0 }
.slot.new {
  border-color: #3b6cf5; background: #F2F6FF;
  opacity: 0; transform: translateX(-10px);
}
.slot.new.show { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .6s var(--ease) }
.slot.new u { color: #3b6cf5; font-weight: 600 }

/* Курсор: узнаваемая точка, а не системная стрелка */
.cursor {
  position: absolute; z-index: 9; left: 0; top: 0;
  width: 18px; height: 18px; border-radius: 50%;
  background: rgba(14,18,32,.92);
  box-shadow: 0 0 0 6px rgba(14,18,32,.1), 0 6px 18px rgba(14,18,32,.35);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .85s var(--ease), left .85s var(--ease), top .85s var(--ease);
  pointer-events: none;
}
.cursor.on { transform: translate(-50%, -50%) scale(1) }
.cursor.click { transform: translate(-50%, -50%) scale(.6) }
/* волна от нажатия — то, чего не хватает, чтобы клик читался */
.cursor::after {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(59,108,245,.65);
  transform: scale(.5); opacity: 0;
}
.cursor.click::after { animation: ring .6s var(--ease) }
@keyframes ring {
  from { transform: scale(.5); opacity: 1 }
  to   { transform: scale(2.6); opacity: 0 }
}

@media (max-width: 980px) {
  .demo-body { grid-template-columns: 1fr }
  .demo-nav { flex-direction: row; overflow-x: auto; gap: 4px; padding: 10px }
  .demo-brand { display: none }
  .demo-nav a { white-space: nowrap; font-size: 12px }
  .demo-nav a em { display: none }
  .grid-3 { grid-template-columns: 1fr 1fr }
  .demo-view { height: 300px }
}