/* =========================================================
   Общая обвязка демо для кейсов: телефон с перепиской, панель
   рядом и плитки с итогами. Три кейса показывают разное, но
   выглядят как одна студия, а не как три подрядчика.
   ========================================================= */

/* ---------- сцена: телефон и кабинет рядом ---------- */
.stage { display: grid; gap: var(--gap); align-items: start; }
@media (min-width: 940px) {
  .stage { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
}

.phone-col { display: grid; gap: 12px; justify-items: center; }

.phone {
  width: 100%;
  max-width: 360px;
  border: 10px solid #232322;
  border-radius: 34px;
  overflow: hidden;
  background: #17171a;
  box-shadow: 0 24px 60px rgba(35, 35, 34, 0.18);
}
.phone-bar { display: flex; align-items: center; gap: 11px; padding: 14px 18px; background: #2c2c2a; }
.phone-av {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--lime);
  color: #232322;
  font-weight: 700;
  font-size: 15px;
}
.phone-who { display: grid; line-height: 1.25; color: #f0efe9; }
.phone-who b { font-size: 14px; font-weight: 600; }
.phone-who i { font-style: normal; font-size: 11px; color: #9a9a94; }

.chat {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 470px;
  padding: 18px 16px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.msg { max-width: 88%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.4; }
.msg-bot { align-self: flex-start; background: #2c2c2a; color: #efeee8; border-bottom-left-radius: 5px; }
.msg-me { align-self: flex-end; background: var(--lime); color: #232322; border-bottom-right-radius: 5px; font-weight: 500; }
.msg b { font-weight: 600; }
.msg .dim { color: #a3a39c; }
.msg-me .dim { color: #4a5c1c; }

.keys { align-self: flex-start; display: flex; flex-wrap: wrap; gap: 7px; max-width: 94%; }
.key {
  padding: 8px 13px;
  border: 1px solid #3d3d38;
  border-radius: 999px;
  background: #232322;
  color: #efeee8;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.key:hover { background: #3a3a35; }
.key-main { background: var(--lime); border-color: var(--lime); color: #232322; font-weight: 600; }
.key-main:hover { background: #b6e341; border-color: #b6e341; }
.key-time { font-family: 'JetBrains Mono', monospace; font-weight: 500; }

.admin { align-self: stretch; display: grid; grid-template-rows: auto 1fr auto; padding: 0; }
.card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 22px clamp(20px, 3vw, 28px);
  border-bottom: 1px solid var(--rule);
}
.card-head h2 { margin: 0; font-family: var(--f-caps); font-weight: 700; font-size: 18px; }
.hint { margin: 0; font-size: 13px; color: var(--muted); }

.admin-body { overflow: hidden; }

.tiles { display: flex; flex-wrap: wrap; margin: 0; border-top: 1px solid var(--rule); }
.tiles > div { flex: 1 1 120px; padding: 16px clamp(20px, 3vw, 28px); border-right: 1px solid var(--rule); }
.tiles > div:last-child { border-right: 0; }
.tiles dt { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); }
.tiles dd { margin: 5px 0 0; font-family: var(--f-caps); font-weight: 700; font-size: 20px; }