/*
 * bot-unified.css — CSS overlay for rly.tg
 * Подключается ПОСЛЕ основного index-*.css
 * Унифицирует border-radius, padding, font-size
 * B-PG-020-UI | 2026-06-02
 */

:root {
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-full: 999px;

  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  20px;
  --space-2xl: 24px;

  --font-h1:    24px;
  --font-h2:    20px;
  --font-h3:    16px;
  --font-body:  15px;
  --font-small: 14px;
  --font-xs:    13px;

  --btn-h:     44px;
  --btn-h-sm:  36px;
  --icon-btn:  36px;
  --icon-btn-sm: 30px;
  --input-h:   44px;
}

/* ── Cards — unified radius & padding ── */
.card,
.invites-card,
.sessions-card,
.chat-list {
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}
.card-tight {
  padding: var(--space-lg);
}

/* ── List rows — unified radius & padding ── */
.rule-row,
.invite-row,
.session-row,
.key-row,
.chat-item {
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

/* ── Buttons ── */
.btn {
  border-radius: var(--radius-md);
  height: var(--btn-h);
  font-size: var(--font-body);
}
.btn-sm {
  border-radius: var(--radius-sm);
  height: var(--btn-h-sm);
  font-size: var(--font-small);
}
.invite-create-btn {
  border-radius: var(--radius-md);
}

/* ── Inputs ── */
.inp,
.invite-inp,
.settings-form .inp {
  border-radius: var(--radius-md);
  height: var(--input-h);
  font-size: var(--font-body);
}
textarea.inp {
  height: auto;
}

/* ── Icon buttons ── */
.icon-btn {
  width: var(--icon-btn);
  height: var(--icon-btn);
  border-radius: var(--radius-md);
}
.icon-btn-square {
  width: var(--icon-btn-sm);
  height: var(--icon-btn-sm);
  border-radius: var(--radius-sm);
}

/* ── Typography ── */
.section-title {
  font-size: var(--font-h1);
}
.page-title {
  font-size: var(--font-h2);
}
.card-head h3,
.rule-title,
.settings-section-title {
  font-size: var(--font-h3);
}
.card-title {
  font-size: var(--font-body);
}

/* ── Badges / chips — consolidate ── */
.badge,
.meta-chip {
  font-size: var(--font-xs);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
}
.chip,
.pill,
.peer-chip {
  border-radius: var(--radius-full);
}

/* ── Modal ── */
.modal-box {
  border-radius: var(--radius-2xl);
}

/* ── Settings hub ── */
.settings-hub-row {
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
}

/* ── Callout ── */
.callout {
  border-radius: var(--radius-md);
  font-size: var(--font-small);
}

/* ── Empty state (new pattern) ── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: 48px var(--space-xl);
  text-align: center;
}
.empty-state-icon {
  width: 48px;
  height: 48px;
  color: var(--color-dim);
  opacity: .5;
}
.empty-state-text {
  font-size: var(--font-body);
  color: var(--color-muted);
  max-width: 280px;
}
.empty-state .btn {
  margin-top: var(--space-sm);
}

/* ── Mobile overrides ── */
@media (max-width: 640px) {
  :root {
    --font-h1: 20px;
    --font-h2: 18px;
    --radius-xl: 14px;
    --space-xl: 16px;
    --icon-btn: 32px;
  }
  .modal-box {
    border-radius: 0;
  }
  .invite-create-btn {
    width: 100%;
  }
}