.module-shell {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  flex: 1;
  background: #f7f8fb;
}

.module-shell[hidden],
.studio-layout[hidden] {
  display: none;
}

.module-scroll {
  width: 100%;
  height: 100%;
  padding: 28px 30px 50px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #d4d1dc transparent;
}

.module-page {
  width: min(1380px, 100%);
  margin: 0 auto;
}

.module-page-head {
  display: flex;
  min-height: 74px;
  margin-bottom: 23px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.module-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: var(--purple);
  font-size: 8px;
  font-weight: 760;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.module-page-head h1 {
  margin: 0;
  color: #282431;
  font-size: 24px;
  font-weight: 760;
  letter-spacing: -.045em;
}

.module-page-head p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 10px;
}

.module-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.module-quiet-button,
.text-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #625d6b;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
  font-size: 9px;
  font-weight: 600;
}

.module-quiet-button {
  min-height: 34px;
  padding: 0 11px;
  box-shadow: 0 1px 3px rgba(25, 20, 36, .04);
}

.module-quiet-button .icon,
.text-action .icon {
  width: 13px;
  height: 13px;
}

.module-quiet-button .icon:last-child {
  width: 11px;
  height: 11px;
  margin-left: 3px;
}

.module-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(25, 20, 36, .035);
}

.card-head {
  display: flex;
  min-height: 61px;
  padding: 15px 17px;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #efedf2;
}

.card-head b,
.card-head small {
  display: block;
}

.card-head b {
  color: #37313f;
  font-size: 11px;
  font-weight: 680;
}

.card-head small {
  margin-top: 4px;
  color: var(--muted-2);
  font-size: 8px;
}

.card-menu {
  display: grid;
  width: 27px;
  height: 27px;
  padding: 0;
  place-items: center;
  color: var(--muted-2);
  background: transparent;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.card-menu:hover {
  color: var(--ink);
  background: #f3f2f6;
}

.card-menu .icon {
  width: 14px;
  height: 14px;
}

.status-banner {
  display: flex;
  min-height: 69px;
  margin-bottom: 17px;
  padding: 12px 16px;
  align-items: center;
  gap: 13px;
  background: #fff;
  border: 1px solid #dceee7;
  border-radius: 12px;
  box-shadow: 0 3px 10px rgba(25, 75, 58, .04);
}

.status-pulse {
  position: relative;
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  color: #188f69;
  background: var(--mint-soft);
  border-radius: 10px;
}

.status-pulse > i {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  background: #27c592;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(39, 197, 146, .13);
}

.status-pulse .icon {
  width: 17px;
  height: 17px;
}

.status-banner > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.status-banner b,
.status-banner p {
  display: block;
  margin: 0;
}

.status-banner b {
  font-size: 10px;
  font-weight: 680;
}

.status-banner p {
  overflow: hidden;
  margin-top: 5px;
  color: var(--muted);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-health {
  display: flex;
  align-items: center;
  gap: 14px;
}

.status-health > span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5d776e;
  font-size: 8px;
}

.status-health > span i {
  width: 6px;
  height: 6px;
  background: var(--mint);
  border-radius: 50%;
}

.status-health button {
  min-height: 30px;
  padding: 0 10px;
  color: #5b50aa;
  background: var(--purple-soft);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font-size: 8px;
  font-weight: 650;
}

.metric-grid {
  display: grid;
  margin-bottom: 17px;
  gap: 13px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.metric-card {
  min-width: 0;
  padding: 14px 15px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(25, 20, 36, .035);
}

.metric-top {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
  justify-content: space-between;
}

.metric-icon,
.settings-card-icon {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 8px;
}

.metric-icon .icon,
.settings-card-icon .icon {
  width: 15px;
  height: 15px;
}

.metric-icon.violet,
.settings-card-icon.violet { color: var(--purple); background: var(--purple-soft); }
.metric-icon.mint,
.settings-card-icon.mint { color: #15966f; background: var(--mint-soft); }
.metric-icon.blue,
.settings-card-icon.blue { color: var(--blue); background: var(--blue-soft); }
.metric-icon.amber,
.settings-card-icon.amber { color: #c88620; background: var(--amber-soft); }
.metric-icon.coral,
.settings-card-icon.coral { color: var(--coral); background: var(--coral-soft); }

.metric-trend {
  display: inline-flex;
  height: 20px;
  padding: 0 6px;
  align-items: center;
  gap: 2px;
  color: #178d67;
  background: #effaf6;
  border-radius: 6px;
  font-size: 7px;
  font-weight: 670;
}

.metric-trend.down {
  color: #bd7916;
  background: #fff8ea;
}

.metric-trend .icon {
  width: 10px;
  height: 10px;
}

.metric-label,
.metric-card strong,
.metric-card > small {
  display: block;
}

.metric-label {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 560;
}

.metric-card strong {
  color: #292431;
  font-size: 21px;
  font-weight: 760;
  letter-spacing: -.04em;
}

.metric-card > small {
  margin-top: 6px;
  color: var(--muted-2);
  font-size: 7px;
}

.overview-grid,
.overview-bottom-grid,
.analytics-main-grid,
.analytics-secondary-grid {
  display: grid;
  margin-bottom: 17px;
  gap: 13px;
}

.overview-grid,
.analytics-main-grid {
  grid-template-columns: minmax(0, 1.7fr) minmax(250px, .7fr);
}

.overview-bottom-grid {
  grid-template-columns: minmax(0, 1.55fr) minmax(270px, .65fr);
}

.chart-legend {
  display: flex;
  padding-top: 3px;
  align-items: center;
  gap: 11px;
}

.chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 7px;
}

.chart-legend i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

.chart-legend i.total { background: #dad6e8; }
.chart-legend i.leads { background: var(--purple); }

.activity-chart {
  display: flex;
  height: 224px;
  padding: 23px 17px 15px;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px;
  background-image: linear-gradient(to bottom, transparent calc(25% - 1px), #f0eef3 25%, transparent calc(25% + 1px)), linear-gradient(to bottom, transparent calc(50% - 1px), #f0eef3 50%, transparent calc(50% + 1px)), linear-gradient(to bottom, transparent calc(75% - 1px), #f0eef3 75%, transparent calc(75% + 1px));
}

.chart-column {
  display: flex;
  min-width: 18px;
  height: 100%;
  flex: 1;
  align-items: center;
  flex-direction: column;
  justify-content: flex-end;
  gap: 7px;
}

.chart-bars {
  display: flex;
  width: min(30px, 75%);
  height: calc(100% - 18px);
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
}

.chart-bars span {
  display: block;
  width: 42%;
  border-radius: 4px 4px 2px 2px;
  transition: height .3s;
}

.chart-bars .total { background: #ddd9e8; }
.chart-bars .leads { background: var(--purple); box-shadow: 0 4px 10px rgba(108, 92, 231, .2); }

.chart-column small {
  color: #9b96a3;
  font-size: 6px;
  white-space: nowrap;
}

.conversion-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.conversion-ring {
  --conversion: 0deg;
  position: relative;
  display: grid;
  width: 118px;
  height: 118px;
  margin: 21px auto 16px;
  place-items: center;
  background: conic-gradient(var(--mint) var(--conversion), #e9e7ed var(--conversion));
  border-radius: 50%;
}

.conversion-ring::before {
  position: absolute;
  width: 88px;
  height: 88px;
  background: #fff;
  border-radius: 50%;
  content: "";
}

.conversion-ring > div {
  position: relative;
  z-index: 1;
  text-align: center;
}

.conversion-ring strong,
.conversion-ring small {
  display: block;
}

.conversion-ring strong {
  font-size: 21px;
  font-weight: 760;
  letter-spacing: -.04em;
}

.conversion-ring small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 7px;
}

.conversion-stats {
  display: grid;
  margin: auto 15px 15px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(3, 1fr);
}

.conversion-stats > span {
  position: relative;
  text-align: center;
}

.conversion-stats i {
  position: absolute;
  top: 2px;
  left: calc(50% - 19px);
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.conversion-stats i.mint { background: var(--mint); }
.conversion-stats i.coral { background: var(--coral); }
.conversion-stats i.blue { background: var(--blue); }

.conversion-stats b,
.conversion-stats small {
  display: block;
}

.conversion-stats b { font-size: 10px; }
.conversion-stats small { margin-top: 3px; color: var(--muted-2); font-size: 6px; }

.recent-card,
.quick-card {
  min-width: 0;
}

.text-action {
  padding: 0;
  color: var(--purple);
  background: transparent;
  border: 0;
  font-size: 8px;
}

.recent-call-list {
  display: flex;
  flex-direction: column;
}

.recent-call-row {
  display: grid;
  min-height: 57px;
  padding: 7px 13px;
  align-items: center;
  color: inherit;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #f0eef3;
  cursor: pointer;
  grid-template-columns: 30px minmax(92px, .7fr) 86px minmax(130px, 1.5fr) 57px 15px;
  text-align: left;
}

.recent-call-row:last-child { border-bottom: 0; }
.recent-call-row:hover { background: #faf9fc; }

.caller-avatar {
  display: grid;
  width: 27px;
  height: 27px;
  place-items: center;
  color: #50495b;
  background: #ebe8f0;
  border-radius: 8px;
  font-size: 8px;
  font-style: normal;
  font-weight: 720;
}

.caller-avatar.large {
  width: 39px;
  height: 39px;
  border-radius: 10px;
  font-size: 11px;
}

.recent-caller b,
.recent-caller small,
.call-time b,
.call-time small {
  display: block;
}

.recent-caller b { font-size: 8px; }
.recent-caller small { margin-top: 3px; color: var(--muted-2); font-size: 7px; }

.call-kind {
  display: inline-flex;
  width: max-content;
  height: 20px;
  padding: 0 6px;
  align-items: center;
  gap: 4px;
  border-radius: 6px;
  font-size: 7px;
  font-style: normal;
  font-weight: 640;
}

.call-kind .icon { width: 10px; height: 10px; }
.call-kind.lead { color: #5e4bd1; background: var(--purple-soft); }
.call-kind.booking { color: #178965; background: var(--mint-soft); }
.call-kind.question { color: #3d6dd0; background: var(--blue-soft); }
.call-kind.missed { color: #c95f56; background: var(--coral-soft); }
.call-kind.spam { color: #8a8292; background: #f0eef2; }

.call-summary {
  overflow: hidden;
  padding-right: 12px;
  color: #6f6977;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.call-time { text-align: right; }
.call-time b { font-size: 8px; }
.call-time small { margin-top: 3px; color: var(--muted-2); font-size: 7px; }
.recent-call-row > .icon { width: 11px; height: 11px; color: #b1adb8; }

.quick-grid {
  display: flex;
  padding: 8px;
  flex-direction: column;
}

.quick-grid button {
  display: flex;
  width: 100%;
  min-height: 57px;
  padding: 7px 8px;
  align-items: center;
  gap: 10px;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 9px;
  cursor: pointer;
  text-align: left;
}

.quick-grid button:hover { background: #f8f7fa; }

.quick-icon {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border-radius: 8px;
}

.quick-icon.violet { color: var(--purple); background: var(--purple-soft); }
.quick-icon.mint { color: #178c68; background: var(--mint-soft); }
.quick-icon.blue { color: var(--blue); background: var(--blue-soft); }
.quick-icon .icon { width: 14px; height: 14px; }

.quick-grid button > span:nth-child(2) { min-width: 0; flex: 1; }
.quick-grid b,
.quick-grid small { display: block; }
.quick-grid b { font-size: 8px; }
.quick-grid small { margin-top: 4px; color: var(--muted-2); font-size: 7px; }
.quick-grid button > .icon { width: 11px; height: 11px; color: #aaa5b1; }

.calls-summary-strip {
  display: flex;
  min-height: 61px;
  margin-bottom: 14px;
  padding: 9px 15px;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
}

.calls-summary-strip > span:not(.summary-live) {
  min-width: 100px;
  padding: 2px 20px;
  border-right: 1px solid var(--line);
}

.calls-summary-strip > span:first-child { padding-left: 0; }
.calls-summary-strip b,
.calls-summary-strip small { display: block; }
.calls-summary-strip b { font-size: 13px; }
.calls-summary-strip small { margin-top: 3px; color: var(--muted); font-size: 7px; }

.summary-live {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 6px;
  color: #3f7966;
  font-size: 8px;
}

.summary-live i {
  width: 7px;
  height: 7px;
  background: var(--mint);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(33, 184, 136, .12);
}

.calls-table-card { overflow: visible; }

.calls-toolbar,
.knowledge-toolbar,
.integration-toolbar {
  display: flex;
  min-height: 59px;
  padding: 11px 13px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line);
}

.module-search {
  display: flex;
  width: min(310px, 31%);
  min-width: 200px;
  height: 34px;
  padding: 0 10px;
  align-items: center;
  gap: 7px;
  background: #f7f6f9;
  border: 1px solid #eeecf2;
  border-radius: 8px;
}

.module-search:focus-within {
  background: #fff;
  border-color: #c9c2f6;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, .08);
}

.module-search .icon {
  width: 13px;
  height: 13px;
  color: var(--muted-2);
}

.module-search input {
  min-width: 0;
  padding: 0;
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 8px;
}

.module-search.compact {
  width: 180px;
  min-width: 140px;
  height: 30px;
}

.filter-pills,
.period-switch {
  display: flex;
  padding: 3px;
  align-items: center;
  gap: 2px;
  background: #f4f3f7;
  border-radius: 8px;
}

.filter-pills button,
.period-switch button {
  min-height: 27px;
  padding: 0 9px;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-size: 7px;
  font-weight: 610;
}

.filter-pills button.active,
.period-switch button.active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 3px rgba(25, 20, 36, .1);
}

.filter-button {
  display: inline-flex;
  min-height: 33px;
  margin-left: auto;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  color: #625d6a;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  cursor: pointer;
  font-size: 8px;
  font-weight: 600;
}

.filter-button .icon { width: 13px; height: 13px; }
.filter-button i { display: grid; width: 16px; height: 16px; place-items: center; color: #fff; background: var(--purple); border-radius: 5px; font-size: 6px; font-style: normal; }

.calls-table-head,
.calls-table-row {
  display: grid;
  align-items: center;
  grid-template-columns: minmax(150px, 1fr) 120px 115px minmax(220px, 1.6fr) 115px 22px;
}

.calls-table-head {
  min-height: 35px;
  padding: 0 15px;
  color: #9b96a3;
  background: #faf9fc;
  border-bottom: 1px solid var(--line);
  font-size: 7px;
  font-weight: 680;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.calls-table-row {
  width: 100%;
  min-height: 67px;
  padding: 8px 15px;
  color: inherit;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #f0eef3;
  cursor: pointer;
  text-align: left;
}

.calls-table-row:hover { background: #fbfaff; }
.calls-table-row[hidden] { display: none; }

.table-caller {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.table-caller > span { min-width: 0; }
.table-caller b,
.table-caller small,
.table-summary b,
.table-summary small,
.table-date b,
.table-date small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-caller b { font-size: 9px; }
.table-caller small { margin-top: 4px; color: var(--muted-2); font-size: 7px; }
.table-summary { min-width: 0; padding-right: 20px; }
.table-summary b { color: #5f5967; font-size: 8px; font-weight: 530; }
.table-summary small { margin-top: 5px; color: #aaa5b1; font-size: 7px; }
.table-date b { font-size: 8px; font-weight: 590; }
.table-date small { margin-top: 4px; color: var(--muted-2); font-size: 7px; }
.row-arrow .icon { width: 12px; height: 12px; color: #aaa5b1; }

.table-footer {
  display: flex;
  min-height: 49px;
  padding: 0 14px;
  align-items: center;
  justify-content: space-between;
  color: var(--muted);
  font-size: 7px;
}

.table-footer > div { display: flex; gap: 3px; }
.table-footer button { display: grid; width: 25px; height: 25px; padding: 0; place-items: center; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 7px; }
.table-footer button.active { color: #fff; background: var(--purple); border-color: var(--purple); }
.table-footer button:disabled { opacity: .4; }
.table-footer .icon { width: 10px; height: 10px; }

.panel-scrim {
  position: fixed;
  inset: 61px 0 0 230px;
  z-index: 58;
  visibility: hidden;
  background: rgba(25, 21, 33, .22);
  opacity: 0;
  transition: opacity .2s, visibility .2s;
}

.panel-scrim.open { visibility: visible; opacity: 1; }

.call-detail-panel,
.knowledge-add-drawer,
.invite-panel,
.api-keys-panel {
  position: fixed;
  top: 61px;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(395px, 100vw);
  overflow: hidden auto;
  background: #fff;
  box-shadow: -20px 0 50px rgba(25, 20, 37, .14);
  transform: translateX(105%);
  transition: transform .23s ease;
}

.call-detail-panel.open,
.knowledge-add-drawer.open,
.api-keys-panel.open,
.invite-panel.open { transform: translateX(0); }

/* ключи API */
#apiKeysBody { padding: 4px 16px 20px; }
.api-key-row { display: flex; margin-bottom: 7px; padding: 9px 11px; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 9px; }
.api-key-row > span { min-width: 0; flex: 1; }
.api-key-row b { display: block; font-size: 8px; }
.api-key-row small { color: var(--muted); font-family: ui-monospace, monospace; font-size: 7px; }
.api-key-row button { padding: 5px 9px; color: var(--coral); background: transparent; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 7px; }
.api-key-form { display: grid; margin: 12px 0; padding: 10px; gap: 7px; background: #faf9fc; border: 1px dashed var(--line); border-radius: 9px; }
.api-key-form input { width: 100%; padding: 8px 9px; background: #fff; border: 1px solid var(--line); border-radius: 7px; box-sizing: border-box; font-size: 8px; }
.api-key-form button { display: flex; justify-self: start; min-height: 30px; padding: 0 12px; align-items: center; gap: 5px; color: #fff; background: var(--purple); border: 0; border-radius: 7px; cursor: pointer; font-size: 8px; font-weight: 650; }
.api-key-form button .icon { width: 11px; height: 11px; }
.api-key-fresh { margin: 10px 0; padding: 11px 12px; background: #f0fdf6; border: 1px solid #b5ebd0; border-radius: 9px; }
.api-key-fresh b { display: block; margin-bottom: 6px; font-size: 8px; }
.api-key-fresh code { display: block; margin-bottom: 8px; padding: 7px 9px; overflow-wrap: anywhere; background: #fff; border: 1px solid var(--line); border-radius: 7px; font-family: ui-monospace, monospace; font-size: 7px; }
.api-key-fresh button { padding: 5px 10px; color: var(--purple); background: transparent; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 7px; }
.api-docs-line { margin: 6px 0 0; font-size: 8px; }
.api-docs-line a { color: var(--purple); }
.integration-card.planned { opacity: .62; }
#webhooksBody { padding: 4px 16px 20px; }
.webhook-row b { overflow-wrap: anywhere; }
.webhook-actions { display: flex; flex-direction: column; gap: 5px; flex: none; }
.webhook-actions button { padding: 5px 9px; color: var(--purple); background: transparent; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 7px; }
.webhook-actions .webhook-delete { color: var(--coral); }
.webhook-off { color: var(--coral); font-style: normal; }
.webhook-events { display: flex; flex-direction: column; gap: 5px; }
.webhook-events label { display: flex; align-items: baseline; gap: 6px; color: #524c5b; font-size: 7px; }
.webhook-events input { width: auto; }
.integration-card.planned button:disabled { cursor: default; opacity: .7; }
.developer-strip .developer-docs { display: inline-flex; align-items: center; gap: 6px; color: var(--purple); font-size: 8px; font-weight: 650; text-decoration: none; }

.detail-head {
  display: flex;
  min-height: 71px;
  padding: 13px 16px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

.detail-head > div { display: flex; align-items: center; gap: 10px; }
.detail-head b,
.detail-head small { display: block; }
.detail-head b { font-size: 11px; }
.detail-head small { margin-top: 4px; color: var(--muted); font-size: 8px; }
.detail-head > button,
.drawer-mini-head > button { display: grid; width: 30px; height: 30px; padding: 0; place-items: center; color: var(--muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; }
.detail-head > button:hover,
.drawer-mini-head > button:hover { background: #f3f2f6; }
.detail-head .icon,
.drawer-mini-head > button .icon { width: 14px; height: 14px; }
.detail-body { padding: 14px 16px 28px; }
.detail-result { display: flex; margin-bottom: 13px; align-items: center; justify-content: space-between; color: var(--muted); font-size: 7px; }

.summary-box {
  display: flex;
  padding: 12px;
  align-items: flex-start;
  gap: 9px;
  background: #f5f2ff;
  border: 1px solid #e7e1ff;
  border-radius: 9px;
}

.summary-box > .icon { width: 15px; height: 15px; color: var(--purple); }
.summary-box b { font-size: 8px; }
.summary-box p { margin: 5px 0 0; color: #6d667a; font-size: 8px; line-height: 1.5; }

.recording-player {
  display: flex;
  min-height: 57px;
  margin: 12px 0;
  padding: 8px 9px;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.recording-player > button:first-child { display: grid; width: 31px; height: 31px; padding: 0; place-items: center; color: #fff; background: var(--purple); border: 0; border-radius: 50%; cursor: pointer; }
.recording-player > button:first-child.playing { background: var(--coral); }
.recording-player > button:first-child .icon { width: 13px; height: 13px; }
.recording-player > div { min-width: 0; flex: 1; }
.recording-player > div > span { display: flex; margin-bottom: 8px; justify-content: space-between; }
.recording-player b { font-size: 8px; }
.recording-player small { color: var(--muted); font-size: 7px; }
.recording-player > div > i { display: block; height: 5px; overflow: hidden; background: #e8e5ed; border-radius: 4px; cursor: pointer; }
.recording-player > div > i em { display: block; width: 0; height: 100%; background: var(--purple); border-radius: inherit; transition: width .1s linear; }
.recording-player > .player-download { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; color: var(--muted); background: transparent; border: 0; cursor: pointer; }
.recording-player > .player-download .icon { width: 13px; height: 13px; }
.recording-player audio { display: none; }
.recording-player.failed > button:first-child { background: #cfc9d6; cursor: default; }
.recording-player.failed small { color: var(--coral); }

.captured-data { margin: 17px 0; }
.captured-data > b { display: block; margin-bottom: 9px; font-size: 9px; }
.captured-data > div { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; grid-template-columns: repeat(3, 1fr); }
.captured-data > div span { min-width: 0; padding: 9px; border-right: 1px solid var(--line); }
.captured-data > div span:last-child { border-right: 0; }
.captured-data small,
.captured-data b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.captured-data small { margin-bottom: 5px; color: var(--muted-2); font-size: 6px; }
.captured-data b { font-size: 7px; }

.transcript-head { display: flex; margin-bottom: 12px; align-items: center; justify-content: space-between; }
.transcript-head > b { font-size: 9px; }
.transcript-head button { display: flex; padding: 0; align-items: center; gap: 5px; color: var(--purple); background: transparent; border: 0; cursor: pointer; font-size: 7px; }
.transcript-head .icon { width: 11px; height: 11px; }
.transcript-line { display: flex; margin-bottom: 9px; align-items: flex-start; gap: 8px; }
.transcript-line > span { display: grid; width: 23px; height: 23px; flex: 0 0 auto; place-items: center; color: #fff; background: var(--purple); border-radius: 7px; font-size: 6px; font-weight: 720; }
.transcript-line.user > span { color: #4e4857; background: #e8e5ec; }
.transcript-line p { margin: 0; padding: 8px 9px; color: #5f5966; background: #f6f5f8; border-radius: 3px 9px 9px 9px; font-size: 8px; line-height: 1.5; }
.transcript-line.user p { background: #f0edff; }
.empty-transcript { display: flex; padding: 30px 10px; align-items: center; flex-direction: column; text-align: center; }
.empty-transcript .icon { width: 23px; height: 23px; color: var(--muted-2); }
.empty-transcript b { margin-top: 9px; font-size: 9px; }
.empty-transcript small { margin-top: 4px; color: var(--muted); font-size: 7px; }

.analytics-metrics { margin-bottom: 14px; }
.analytics-main-grid { grid-template-columns: minmax(0, 1.55fr) minmax(270px, .75fr); }
.analytics-secondary-grid { grid-template-columns: 1fr 1fr; }
.analytics-volume .activity-chart { height: 250px; }

.module-empty { margin: 0; padding: 15px 16px 17px; color: var(--muted); font-size: 8px; line-height: 1.5; }

/* «Требуют внимания»: проблемные звонки, клик ведёт к карточке в журнале */
.attention-list { display: flex; padding: 4px 16px 8px; flex-direction: column; }
.attention-list > button { display: flex; width: 100%; padding: 9px 0; align-items: center; gap: 10px; text-align: left; background: none; border: 0; border-top: 1px solid var(--line); cursor: pointer; }
.attention-list > button:first-child { border-top: 0; }
.attention-when { display: flex; min-width: 96px; flex-direction: column; gap: 3px; }
.attention-when b { font-size: 8px; }
.attention-when small { color: var(--muted); font-size: 7px; }
.attention-reason { flex: 1; color: var(--coral); font-size: 8px; }
.attention-list > button > .icon { width: 11px; height: 11px; color: var(--muted); flex: none; }
.attention-list > button:hover .attention-reason { text-decoration: underline; }
.attention-more { margin: 0; padding: 0 16px 14px; color: var(--muted); font-size: 7px; }

.intent-list { display: flex; padding: 15px 16px 17px; flex-direction: column; gap: 14px; }
.intent-list > div { display: grid; align-items: center; gap: 10px; grid-template-columns: minmax(105px, 1fr) minmax(90px, 1.1fr) 30px; }
.intent-list > div > span { display: grid; align-items: center; column-gap: 7px; grid-template-columns: 7px 1fr; }
.intent-list > div > span i { width: 7px; height: 7px; border-radius: 2px; grid-row: 1 / 3; }
.intent-list i.violet { background: var(--purple); }
.intent-list i.blue { background: var(--blue); }
.intent-list i.mint { background: var(--mint); }
.intent-list i.coral { background: var(--coral); }
.intent-list i.amber { background: var(--amber); }
.intent-list b { font-size: 8px; }
.intent-list small { margin-top: 2px; color: var(--muted-2); font-size: 6px; }
.intent-list > div > div { height: 5px; overflow: hidden; background: #eeecf1; border-radius: 5px; }
.intent-list > div > div i { display: block; height: 100%; border-radius: inherit; }
.intent-list strong { font-size: 8px; text-align: right; }

.funnel { display: flex; padding: 23px 18px 25px; align-items: center; flex-direction: column; gap: 8px; }
.funnel > div { display: flex; width: var(--funnel-width); min-width: 42%; min-height: 48px; padding: 8px 12px; align-items: center; justify-content: space-between; color: #fff; background: var(--purple); border-radius: 7px; }
.funnel > div:nth-child(2) { background: #7a88ea; }
.funnel > div:nth-child(3) { background: #64ad9a; }
.funnel b,
.funnel small { display: block; }
.funnel b { font-size: 10px; }
.funnel small { margin-top: 3px; color: rgba(255,255,255,.72); font-size: 6px; }
.funnel em { font-size: 8px; font-style: normal; font-weight: 670; }

.ai-badge { display: inline-flex; height: 21px; padding: 0 7px; align-items: center; gap: 4px; color: var(--purple); background: var(--purple-soft); border-radius: 6px; font-size: 7px; font-weight: 720; }
.ai-badge .icon { width: 11px; height: 11px; }
.insight-list { padding: 12px; }
.insight-list > div { display: flex; min-height: 59px; margin-bottom: 9px; padding: 10px; align-items: flex-start; gap: 9px; border: 1px solid var(--line); border-radius: 9px; }
.insight-list > div > .icon { width: 19px; height: 19px; padding: 4px; color: #168d66; background: var(--mint-soft); border-radius: 6px; }
.insight-list > div.attention > .icon { color: #bd7917; background: var(--amber-soft); }
.insight-list b { font-size: 8px; }
.insight-list p { margin: 5px 0 0; color: var(--muted); font-size: 7px; line-height: 1.5; }
.insight-list > button { display: flex; width: 100%; min-height: 33px; align-items: center; justify-content: center; gap: 6px; color: var(--purple); background: var(--purple-soft); border: 0; border-radius: 8px; cursor: pointer; font-size: 8px; font-weight: 640; }
.insight-list > button .icon { width: 12px; height: 12px; }

.knowledge-health {
  display: flex;
  min-height: 76px;
  margin-bottom: 15px;
  padding: 13px 15px;
  align-items: center;
  gap: 13px;
  background: #fff;
  border: 1px solid #e2dffc;
  border-radius: 12px;
}

.knowledge-health-score {
  display: flex;
  width: 55px;
  height: 47px;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--purple);
  background: var(--purple-soft);
  border-radius: 10px;
}

.knowledge-health-score .icon { width: 14px; height: 14px; }
.knowledge-health-score strong { font-size: 13px; }
.knowledge-health > div:nth-child(2) { min-width: 0; flex: 1; }
.knowledge-health b,
.knowledge-health p { display: block; margin: 0; }
.knowledge-health b { font-size: 10px; }
.knowledge-health p { margin-top: 5px; color: var(--muted); font-size: 8px; }
.knowledge-health-meta { display: flex; align-items: center; gap: 18px; }
.knowledge-health-meta span { text-align: right; }
.knowledge-health-meta small,
.knowledge-health-meta b { display: block; }
.knowledge-health-meta small { margin-bottom: 4px; color: var(--muted-2); font-size: 6px; }
.knowledge-health-meta b { font-size: 7px; }
.knowledge-health-meta button { display: flex; min-height: 31px; padding: 0 10px; align-items: center; gap: 6px; color: var(--purple); background: var(--purple-soft); border: 0; border-radius: 7px; cursor: pointer; font-size: 7px; font-weight: 640; }
.knowledge-health-meta button .icon { width: 12px; height: 12px; }
.syncing .icon { animation: spin .7s linear infinite; }

.knowledge-layout,
.settings-layout {
  display: grid;
  min-height: 560px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  grid-template-columns: 205px minmax(0, 1fr);
}

.knowledge-nav,
.settings-nav {
  display: flex;
  padding: 14px 10px;
  flex-direction: column;
  background: #faf9fc;
  border-right: 1px solid var(--line);
}

.knowledge-nav > button,
.settings-nav > button {
  display: flex;
  width: 100%;
  min-height: 40px;
  padding: 0 9px;
  align-items: center;
  gap: 9px;
  color: #777180;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  font-size: 8px;
  font-weight: 590;
  text-align: left;
}

.knowledge-nav > button:hover,
.settings-nav > button:hover { background: #f2f0f5; }
.knowledge-nav > button.active,
.settings-nav > button.active { color: #473b9b; background: var(--purple-soft); font-weight: 650; }
.knowledge-nav > button .icon,
.settings-nav > button .icon { width: 14px; height: 14px; }
.knowledge-nav > button span:nth-child(2) { flex: 1; }
.knowledge-nav > button i { display: grid; width: 18px; height: 17px; place-items: center; color: #918a9c; background: #ebe9ef; border-radius: 5px; font-size: 6px; font-style: normal; }
.knowledge-nav > button.active i { color: #5b4bd1; background: #ddd7ff; }

.knowledge-tip { margin-top: auto; padding: 12px; color: #655d72; background: #f3f0fb; border: 1px solid #e8e3f3; border-radius: 9px; }
.knowledge-tip .icon { width: 17px; height: 17px; margin-bottom: 9px; color: var(--purple); }
.knowledge-tip b { display: block; font-size: 8px; }
.knowledge-tip p { margin: 5px 0 8px; font-size: 7px; line-height: 1.5; }
.knowledge-tip button { padding: 0; color: var(--purple); background: transparent; border: 0; cursor: pointer; font-size: 7px; font-weight: 650; }

.knowledge-content { min-width: 0; }
.knowledge-toolbar { min-height: 58px; }
.knowledge-toolbar .module-search { width: 280px; }
.source-grid { display: grid; padding: 14px; gap: 11px; grid-template-columns: repeat(3, minmax(190px, 1fr)); }
.source-card { display: flex; min-height: 206px; padding: 13px; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 10px; transition: border-color .16s, box-shadow .16s, transform .16s; }
.source-card:hover { border-color: #cfc9df; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.source-card[hidden] { display: none; }
.source-card-top { display: flex; align-items: flex-start; justify-content: space-between; }
.source-icon,
.integration-logo { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; }
.source-icon .icon,
.integration-logo .icon { width: 17px; height: 17px; }
.source-icon.blue,
.integration-logo.blue { color: var(--blue); background: var(--blue-soft); }
.source-icon.violet,
.integration-logo.violet { color: var(--purple); background: var(--purple-soft); }
.source-icon.mint,
.integration-logo.mint { color: #168d67; background: var(--mint-soft); }
.source-icon.coral,
.integration-logo.coral { color: var(--coral); background: var(--coral-soft); }
.integration-logo.amber { color: #bd7c1c; background: var(--amber-soft); }
.integration-logo.slate { color: #6e6877; background: #f0eef2; }
.source-card-top button { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; color: var(--muted-2); background: transparent; border: 0; cursor: pointer; }
.source-card-top button .icon { width: 13px; height: 13px; }
.source-type { margin-top: 13px; color: var(--muted-2); font-size: 6px; font-weight: 680; letter-spacing: .08em; text-transform: uppercase; }
.source-card h3 { overflow: hidden; margin: 5px 0 9px; font-size: 10px; font-weight: 660; text-overflow: ellipsis; white-space: nowrap; }
.source-status { display: flex; align-items: center; gap: 5px; color: #44816c; font-size: 7px; }
.source-status i { width: 6px; height: 6px; background: var(--mint); border-radius: 50%; }
.source-status.processing { color: #a9711a; }
.source-status.processing i { background: var(--amber); animation: status-pulse 1.3s infinite; }

@keyframes status-pulse { 50% { opacity: .35; } }

.source-card-foot { display: grid; margin-top: auto; padding-top: 10px; align-items: center; border-top: 1px solid var(--line); grid-template-columns: .7fr 1.2fr 24px; }
.source-card-foot b,
.source-card-foot small { display: block; }
.source-card-foot b { font-size: 7px; font-weight: 610; }
.source-card-foot small { margin-top: 3px; color: var(--muted-2); font-size: 6px; }
.source-card-foot button { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; color: var(--muted); background: #f6f5f8; border: 0; border-radius: 6px; cursor: pointer; }
.source-card-foot .icon { width: 12px; height: 12px; }
.add-source-card { display: flex; min-height: 206px; align-items: center; justify-content: center; color: #756a96; background: #faf9fd; border: 1px dashed #cac3e4; border-radius: 10px; cursor: pointer; flex-direction: column; }
.add-source-card:hover { color: var(--purple); background: var(--purple-soft); border-style: solid; }
.add-source-card .icon { width: 18px; height: 18px; margin-bottom: 9px; }
.add-source-card b { font-size: 8px; }
.add-source-card small { margin-top: 5px; color: var(--muted-2); font-size: 7px; }

.drawer-mini-head { display: flex; min-height: 72px; padding: 14px 16px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.drawer-mini-head > div { display: flex; align-items: center; gap: 9px; }
.drawer-mini-head > div > .icon { display: grid; width: 34px; height: 34px; padding: 9px; color: var(--purple); background: var(--purple-soft); border-radius: 9px; }
.drawer-mini-head b,
.drawer-mini-head small { display: block; }
.drawer-mini-head b { font-size: 10px; }
.drawer-mini-head small { margin-top: 4px; color: var(--muted); font-size: 7px; }
.source-type-switch { display: grid; margin: 16px; padding: 3px; background: #f3f2f6; border-radius: 8px; grid-template-columns: repeat(3, 1fr); }
.source-type-switch button { display: flex; min-height: 38px; align-items: center; justify-content: center; gap: 6px; color: var(--muted); background: transparent; border: 0; border-radius: 6px; cursor: pointer; font-size: 8px; }
.source-type-switch button.active { color: var(--purple); background: #fff; box-shadow: 0 1px 4px rgba(25,20,36,.1); }
.source-type-switch .icon { width: 13px; height: 13px; }
.knowledge-add-drawer form,
.invite-panel form { padding: 3px 16px 20px; }
.knowledge-add-drawer form label,
.invite-panel form label { display: block; margin: 13px 0 7px; color: #524c5b; font-size: 8px; font-weight: 650; }
.knowledge-add-drawer form input,
.invite-panel form input,
.invite-panel form select { display: block; width: 100%; height: 40px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; font-size: 9px; }
.knowledge-add-drawer form input:focus,
.invite-panel form input:focus,
.invite-panel form select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(108,92,231,.09); }
.knowledge-add-drawer form p { margin: 8px 0 17px; color: var(--muted); font-size: 7px; line-height: 1.5; }
.knowledge-add-drawer form button,
.invite-panel form button { display: flex; width: 100%; min-height: 39px; align-items: center; justify-content: center; gap: 6px; color: #fff; background: var(--purple); border: 0; border-radius: 8px; cursor: pointer; font-size: 8px; font-weight: 650; }
.knowledge-add-drawer form button .icon { width: 13px; height: 13px; }

.faq-list,
.gap-list { padding: 14px; }

/* Телеграм-уведомления: код линковки и привязанные чаты */
.telegram-link { padding: 4px 16px 16px; }
.telegram-chats { display: flex; margin-bottom: 12px; flex-direction: column; gap: 7px; }
.telegram-chat { display: flex; padding: 9px 11px; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 9px; }
.telegram-chat > .icon { width: 13px; height: 13px; color: var(--purple); flex: none; }
.telegram-chat > span:nth-child(2) { min-width: 0; flex: 1; }
.telegram-chat b { display: block; font-size: 8px; }
.telegram-chat small { color: var(--muted); font-size: 7px; }
.telegram-chat button { padding: 5px 9px; color: var(--coral); background: transparent; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 7px; }
.telegram-none { margin: 0 0 12px; color: var(--muted); font-size: 8px; }
.telegram-howto { padding: 12px; background: #faf9fc; border: 1px dashed var(--line); border-radius: 9px; }
.telegram-howto b { font-size: 8px; }
.telegram-howto ol { margin: 8px 0; padding-left: 16px; color: #655f6d; font-size: 8px; line-height: 1.7; }
.telegram-howto a { color: var(--purple); }
.telegram-code { display: flex; margin: 8px 0 10px; padding: 10px 12px; align-items: baseline; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.telegram-code strong { font-family: ui-monospace, monospace; font-size: 16px; letter-spacing: 4px; }
.telegram-code small { color: var(--muted); font-size: 7px; }

/* расширенные настройки агента */
.advanced-note { display: flex; margin-bottom: 13px; padding: 11px 13px; align-items: flex-start; gap: 8px; color: #7a5a1e; background: #fdf6e7; border: 1px solid #f0dfb7; border-radius: 9px; font-size: 8px; line-height: 1.5; }
.advanced-note .icon { width: 13px; height: 13px; flex: none; }
#advDialogForm, #advGuardForm, #advToolsForm, #advCoreForm { padding: 4px 16px 16px; }
.adv-group { margin-bottom: 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.adv-group:first-child { padding-top: 0; border-top: 0; }
.adv-group > b { display: block; margin-bottom: 8px; color: var(--purple); font-size: 8px; text-transform: uppercase; letter-spacing: .4px; }
.adv-group .setting-field { margin-bottom: 8px; }
.adv-group textarea, #advGuardForm textarea { width: 100%; padding: 8px 9px; resize: vertical; background: #faf9fc; border: 1px solid var(--line); border-radius: 7px; box-sizing: border-box; font-family: inherit; font-size: 8px; line-height: 1.5; }
#advCoreForm textarea { width: 100%; padding: 10px 11px; resize: vertical; background: #faf9fc; border: 1px solid var(--line); border-radius: 9px; box-sizing: border-box; font-family: ui-monospace, monospace; font-size: 8px; line-height: 1.6; }
.adv-meta { display: block; margin-top: 8px; color: var(--muted); font-size: 7px; }
.view-switcher-link { color: var(--muted); }

/* журнал действий */
#auditBody { padding: 4px 16px 20px; }
.audit-list { display: flex; flex-direction: column; }
.audit-row { display: flex; padding: 9px 0; align-items: baseline; gap: 10px; border-top: 1px solid var(--line); }
.audit-row:first-child { border-top: 0; }
.audit-when { min-width: 74px; color: var(--muted); font-size: 7px; }
.audit-row b { display: block; font-size: 8px; }
.audit-row small { color: var(--muted); font-size: 7px; overflow-wrap: anywhere; }

/* сайт компании: скрапинг в базу знаний */
.knowledge-site-card { margin-bottom: 17px; }
.site-scrape-row { display: flex; margin: 12px 16px 6px; gap: 8px; }
.site-scrape-row input { flex: 1; padding: 8px 10px; background: #faf9fc; border: 1px solid var(--line); border-radius: 8px; box-sizing: border-box; }
.site-scrape-row button { display: flex; padding: 0 13px; align-items: center; gap: 6px; color: #fff; background: var(--purple); border: 0; border-radius: 8px; cursor: pointer; font-weight: 650; }
.site-scrape-row button:disabled { opacity: .6; cursor: default; }
.site-scrape-row button .icon { width: 12px; height: 12px; }
.site-scrape-report { margin: 0 16px 10px; color: var(--muted); }
.site-scrape-report.ok { color: #1d9d6f; }
.site-scrape-report.fail { color: var(--coral); }
.site-facts-block { margin: 0 16px 16px; padding: 10px; background: #faf9fc; border: 1px solid var(--line); border-radius: 9px; }
.site-facts-block .card-head.compact { padding: 0 0 8px; border: 0; }
.site-facts-block textarea { width: 100%; padding: 9px 10px; resize: vertical; background: #fff; border: 1px solid var(--line); border-radius: 7px; box-sizing: border-box; font-family: inherit; line-height: 1.55; }

/* Маршрутизация: честная схема линии */
.routing-scheme { display: flex; margin: 14px 16px 8px; padding: 12px 14px; align-items: center; gap: 10px; background: #faf9fc; border: 1px solid var(--line); border-radius: 9px; font-size: 8px; }
.routing-scheme > span { display: flex; flex-direction: column; gap: 2px; }
.routing-scheme b { font-size: 9px; }
.routing-scheme small { color: var(--muted); font-size: 7px; }
.routing-scheme .icon { width: 12px; height: 12px; color: var(--muted); flex: none; }
.routing-note { margin: 0 16px 6px; color: var(--muted); font-size: 7px; line-height: 1.55; }

/* «База знаний» без витрины: справка + вопросы-ответы */
.knowledge-grid { display: grid; margin-bottom: 17px; gap: 13px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.knowledge-fact-card textarea { display: block; width: calc(100% - 32px); margin: 12px 16px 6px; padding: 10px 11px; resize: vertical; background: #faf9fc; border: 1px solid var(--line); border-radius: 9px; font-family: inherit; font-size: 8px; line-height: 1.6; }
.knowledge-fact-card textarea:disabled { color: var(--muted); background: #f3f1f6; }
.knowledge-hint { display: block; padding: 0 16px 14px; color: var(--muted); font-size: 7px; }
.faq-add-form { display: grid; margin: 12px 16px; padding: 10px; gap: 7px; background: #faf9fc; border: 1px dashed var(--line); border-radius: 9px; }
.faq-add-form input,
.faq-add-form textarea { width: 100%; padding: 8px 9px; background: #fff; border: 1px solid var(--line); border-radius: 7px; box-sizing: border-box; font-family: inherit; font-size: 8px; }
.faq-add-form textarea { resize: vertical; line-height: 1.5; }
.faq-add-form button { display: flex; justify-self: start; min-height: 30px; padding: 0 12px; align-items: center; gap: 5px; color: #fff; background: var(--purple); border: 0; border-radius: 7px; cursor: pointer; font-size: 8px; font-weight: 650; }
.faq-add-form button .icon { width: 11px; height: 11px; }
.knowledge-faq-card .faq-list { padding-top: 0; }
.faq-delete { color: var(--coral) !important; }
@media (max-width: 1100px) { .knowledge-grid { grid-template-columns: 1fr; } }
.faq-item { margin-bottom: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; }
.faq-item summary { display: flex; min-height: 48px; padding: 0 12px; align-items: center; gap: 10px; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary > span:first-child { color: var(--purple); font-size: 7px; font-weight: 720; }
.faq-item summary b { flex: 1; font-size: 8px; }
.faq-item summary .icon { width: 12px; height: 12px; color: var(--muted); transition: transform .2s; }
.faq-item[open] summary .icon { transform: rotate(180deg); }
.faq-item > div { padding: 11px 12px 13px 31px; background: #faf9fc; border-top: 1px solid var(--line); }
.faq-item p { margin: 0; color: #655f6d; font-size: 8px; line-height: 1.55; }
.faq-item > div button { display: flex; margin-top: 9px; padding: 0; align-items: center; gap: 5px; color: var(--purple); background: transparent; border: 0; cursor: pointer; font-size: 7px; }
.faq-item > div .icon { width: 11px; height: 11px; }
.faq-add { display: flex; width: 100%; min-height: 40px; align-items: center; justify-content: center; gap: 6px; color: var(--purple); background: var(--purple-soft); border: 0; border-radius: 8px; cursor: pointer; font-size: 8px; font-weight: 650; }
.faq-add .icon { width: 12px; height: 12px; }
.gap-intro { display: flex; margin-bottom: 10px; padding: 12px; align-items: flex-start; gap: 9px; color: #665d77; background: var(--purple-soft); border-radius: 9px; }
.gap-intro .icon { width: 16px; height: 16px; color: var(--purple); }
.gap-intro b { font-size: 8px; }
.gap-intro p { margin: 4px 0 0; font-size: 7px; }
.gap-list article { display: grid; min-height: 58px; padding: 8px 10px; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); grid-template-columns: 26px 1fr 100px 90px; }
.gap-rank { display: grid; width: 23px; height: 23px; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 6px; font-size: 7px; font-weight: 700; }
.gap-list article b,
.gap-list article small { display: block; }
.gap-list article b { font-size: 8px; }
.gap-list article small { margin-top: 4px; color: var(--muted); font-size: 7px; }
.gap-list article em { color: #9b6a1e; font-size: 7px; font-style: normal; }
.gap-list article button { min-height: 28px; color: var(--purple); background: #fff; border: 1px solid #d9d2ff; border-radius: 7px; cursor: pointer; font-size: 7px; }

.team-summary { display: grid; margin-bottom: 14px; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.team-summary article { display: flex; min-height: 65px; padding: 12px 14px; align-items: center; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.team-summary article > span:nth-child(2) { flex: 1; }
.team-summary b,
.team-summary small { display: block; }
.team-summary b { font-size: 14px; }
.team-summary small { margin-top: 3px; color: var(--muted); font-size: 7px; }
.team-summary em { color: var(--muted-2); font-size: 7px; font-style: normal; }
.team-grid { display: grid; gap: 13px; grid-template-columns: minmax(0, 1.45fr) minmax(250px, .55fr); }
.members-card { min-width: 0; }
.member-list { padding: 2px 0; }
.member-row { display: grid; min-height: 61px; padding: 8px 14px; align-items: center; border-bottom: 1px solid #f0eef3; grid-template-columns: 38px minmax(120px, 1.3fr) 105px 60px 24px; }
.member-row[hidden] { display: none; }
.member-avatar { position: relative; display: grid; width: 31px; height: 31px; place-items: center; color: #4d4656; border-radius: 9px; font-size: 8px; font-weight: 720; }
.member-avatar.peach { background: #ffe2c9; }
.member-avatar.lilac { background: #ddd7ff; }
.member-avatar.blue { background: #dbe6ff; }
.member-avatar.mint { background: #d7f4e9; }
.member-avatar.amber { background: #ffe9be; }
.member-avatar i { position: absolute; right: -1px; bottom: -1px; width: 8px; height: 8px; border: 2px solid #fff; border-radius: 50%; }
.member-avatar i.online { background: var(--mint); }
.member-avatar i.busy { background: var(--amber); }
.member-avatar i.offline { background: #bbb6c2; }
.member-copy { min-width: 0; }
.member-copy b,
.member-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-copy b { font-size: 8px; }
.member-copy small { margin-top: 4px; color: var(--muted-2); font-size: 7px; }
.member-role { display: inline-flex; width: max-content; height: 21px; padding: 0 7px; align-items: center; color: #655d70; background: #f4f2f6; border-radius: 6px; font-size: 7px; }
.member-workload b,
.member-workload small { display: block; text-align: center; }
.member-workload b { font-size: 8px; }
.member-workload small { margin-top: 3px; color: var(--muted-2); font-size: 6px; }
.member-row > button { display: grid; width: 24px; height: 24px; padding: 0; place-items: center; color: var(--muted-2); background: transparent; border: 0; cursor: pointer; }
.member-row > button .icon { width: 13px; height: 13px; }
.team-side { display: flex; flex-direction: column; gap: 13px; }
.invite-card { padding: 18px; text-align: center; }
.invite-visual { position: relative; display: grid; width: 49px; height: 49px; margin: 0 auto 13px; place-items: center; color: var(--purple); background: var(--purple-soft); border-radius: 14px; }
.invite-visual .icon { width: 20px; height: 20px; }
.invite-visual i { position: absolute; right: -3px; bottom: -3px; display: grid; width: 18px; height: 18px; place-items: center; color: #fff; background: var(--purple); border: 2px solid #fff; border-radius: 50%; font-size: 9px; font-style: normal; }
.invite-card h3 { margin: 0; font-size: 11px; }
.invite-card p { margin: 7px auto 13px; max-width: 210px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.invite-card > button { display: flex; width: 100%; min-height: 34px; align-items: center; justify-content: center; gap: 6px; color: #fff; background: var(--purple); border: 0; border-radius: 8px; cursor: pointer; font-size: 8px; font-weight: 650; }
.invite-card > button .icon { width: 12px; height: 12px; }
.access-card > div:not(.card-head) { display: flex; padding: 11px 14px; flex-direction: column; gap: 10px; }
.access-card > div:not(.card-head) > span { display: grid; align-items: center; gap: 7px; grid-template-columns: 7px 1fr auto; }
.access-card > div i { width: 7px; height: 7px; border-radius: 2px; }
.access-card > div i.violet { background: var(--purple); }
.access-card > div i.blue { background: var(--blue); }
.access-card > div i.mint { background: var(--mint); }
.access-card > div i.amber { background: var(--amber); }
.access-card > div b { font-size: 7px; }
.access-card > div small { color: var(--muted); font-size: 6px; }
.access-card > button { display: flex; margin: 2px 14px 13px; padding: 0; align-items: center; gap: 5px; color: var(--purple); background: transparent; border: 0; cursor: pointer; font-size: 7px; font-weight: 620; }
.access-card > button .icon { width: 11px; height: 11px; }
.invite-panel { width: min(355px, 100vw); }

.integration-feature { display: flex; min-height: 75px; margin-bottom: 15px; padding: 14px 16px; align-items: center; justify-content: space-between; color: #f2effb; background: #272231; border-radius: 12px; }
.integration-feature > div { display: flex; align-items: center; gap: 10px; }
.integration-feature > div > .icon { width: 20px; height: 20px; color: #b6aaff; }
.integration-feature b,
.integration-feature p { display: block; margin: 0; }
.integration-feature b { font-size: 10px; }
.integration-feature p { margin-top: 5px; color: #9e98a9; font-size: 8px; }
.integration-flow { display: flex; align-items: center; }
.integration-flow i { display: inline-flex; height: 25px; padding: 0 8px; align-items: center; color: #d9d5e2; background: #36313f; border: 1px solid rgba(255,255,255,.08); border-radius: 6px; font-size: 7px; font-style: normal; }
.integration-flow em { width: 18px; height: 1px; background: #5f5869; }
.integration-toolbar { padding: 0; border: 0; margin-bottom: 13px; }
.integration-grid { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(190px, 1fr)); }
.integration-card { display: flex; min-height: 218px; padding: 14px; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: 11px; transition: border-color .16s, transform .16s, box-shadow .16s; }
.integration-card:hover { border-color: #ccc6d8; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.integration-card.connected { border-color: #d6ece4; }
.integration-card[hidden] { display: none; }
.integration-card-head { display: flex; align-items: flex-start; justify-content: space-between; }
.integration-category { color: var(--muted-2); font-size: 6px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.connected-label { display: inline-flex; height: 20px; padding: 0 6px; align-items: center; gap: 5px; color: #37806a; background: var(--mint-soft); border-radius: 6px; font-size: 6px; font-weight: 650; }
.connected-label i { width: 5px; height: 5px; background: var(--mint); border-radius: 50%; }
.integration-card h3 { margin: 16px 0 6px; font-size: 11px; }
.integration-card p { margin: 0; color: var(--muted); font-size: 8px; line-height: 1.55; }
.integration-card-foot { display: flex; margin-top: auto; padding-top: 13px; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.integration-card-foot button:first-child { min-height: 28px; padding: 0 9px; color: var(--purple); background: var(--purple-soft); border: 0; border-radius: 7px; cursor: pointer; font-size: 7px; font-weight: 650; }
.integration-card.connected .integration-card-foot button:first-child { color: #5e5966; background: #f3f2f5; }
.integration-card-foot button:last-child { display: grid; width: 26px; height: 26px; padding: 0; place-items: center; color: var(--muted-2); background: transparent; border: 0; cursor: pointer; }
.integration-card-foot .icon { width: 12px; height: 12px; }
.developer-strip { display: flex; min-height: 72px; margin-top: 14px; padding: 12px 15px; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.developer-icon { display: grid; width: 37px; height: 37px; place-items: center; color: #6b6574; background: #f1eff3; border-radius: 9px; }
.developer-icon .icon { width: 17px; height: 17px; }
.developer-strip > div { min-width: 0; flex: 1; }
.developer-strip b,
.developer-strip p { display: block; margin: 0; }
.developer-strip b { font-size: 9px; }
.developer-strip p { margin-top: 5px; color: var(--muted); font-size: 7px; }
.developer-strip button { display: flex; padding: 0; align-items: center; gap: 6px; color: var(--purple); background: transparent; border: 0; cursor: pointer; font-size: 8px; font-weight: 620; }
.developer-strip .icon { width: 12px; height: 12px; }

.settings-layout { min-height: 600px; background: transparent; border: 0; border-radius: 0; gap: 15px; grid-template-columns: 195px minmax(0, 760px); overflow: visible; }
.settings-nav { height: max-content; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.settings-content { display: flex; flex-direction: column; gap: 13px; }
.settings-card { padding: 17px; background: #fff; border: 1px solid var(--line); border-radius: 11px; }
.settings-card-head { display: flex; margin-bottom: 19px; align-items: flex-start; gap: 10px; }
.settings-card-head h3,
.settings-card-head p { margin: 0; }
.settings-card-head h3 { font-size: 11px; }
.settings-card-head p { margin-top: 5px; color: var(--muted); font-size: 8px; }
.settings-form-grid { display: grid; gap: 13px; grid-template-columns: repeat(2, 1fr); }
.setting-field { display: block; margin-bottom: 13px; }
.setting-field.full { margin-top: 1px; }
.setting-field > span { display: block; margin-bottom: 7px; color: #4e4857; font-size: 8px; font-weight: 650; }
.setting-field input,
.setting-field select,
.setting-field textarea { display: block; width: 100%; min-height: 39px; padding: 9px 10px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; outline: 0; font-size: 9px; }
.setting-field textarea { min-height: 79px; resize: vertical; }
.setting-field input:focus,
.setting-field select:focus,
.setting-field textarea:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(108,92,231,.09); }
.setting-field small { display: block; margin-top: 6px; color: var(--muted-2); font-size: 7px; line-height: 1.45; }
.setting-toggle { display: flex; min-height: 54px; padding: 8px 0; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.setting-toggle:last-child { border-bottom: 0; }
.setting-toggle b,
.setting-toggle small { display: block; }
.setting-toggle b { font-size: 8px; }
.setting-toggle small { margin-top: 5px; color: var(--muted); font-size: 7px; }
.settings-divider { height: 1px; margin: 7px 0; background: var(--line); }
.danger-zone { display: flex; align-items: center; justify-content: space-between; }
.danger-zone h3,
.danger-zone p { margin: 0; }
.danger-zone h3 { font-size: 9px; }
.danger-zone p { margin-top: 5px; color: var(--muted); font-size: 7px; }
.danger-zone > div:last-child { display: flex; gap: 7px; }
.danger-zone button { display: inline-flex; min-height: 31px; padding: 0 9px; align-items: center; gap: 5px; color: #5e5866; background: #fff; border: 1px solid var(--line-strong); border-radius: 7px; cursor: pointer; font-size: 7px; }
.danger-zone button.danger { color: var(--coral); border-color: #ffd3cf; }
.danger-zone .icon { width: 11px; height: 11px; }
.voice-preview { display: flex; align-items: center; gap: 11px; }
.voice-preview > div { min-width: 0; flex: 1; }
.voice-preview h3,
.voice-preview p { margin: 0; }
.voice-preview h3 { font-size: 9px; }
.voice-preview p { overflow: hidden; margin-top: 5px; color: var(--muted); font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.voice-preview button { display: flex; min-height: 31px; padding: 0 10px; align-items: center; gap: 5px; color: var(--purple); background: var(--purple-soft); border: 0; border-radius: 7px; cursor: pointer; font-size: 7px; }
.voice-preview button.playing { color: #c95c54; background: var(--coral-soft); }
.voice-preview button .icon { width: 11px; height: 11px; }
.notification-events > b { display: block; margin-bottom: 10px; font-size: 8px; }
.notification-events { display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr); }
.notification-events > b { grid-column: 1 / -1; }
.notification-events label { display: flex; align-items: center; gap: 7px; color: #605a67; font-size: 8px; }
.notification-events input { width: 14px; height: 14px; accent-color: var(--purple); }
.retention-row { display: flex; align-items: center; justify-content: space-between; }
.retention-row b,
.retention-row small { display: block; }
.retention-row b { font-size: 8px; }
.retention-row small { margin-top: 5px; color: var(--muted); font-size: 7px; }
.retention-row select { min-width: 110px; height: 34px; padding: 0 9px; border: 1px solid var(--line-strong); border-radius: 7px; font-size: 8px; }
.security-note { display: flex; align-items: center; gap: 10px; color: #586b64; background: #f4fbf8; border-color: #dceee7; }
.security-note > .icon { width: 19px; height: 19px; color: #178a66; }
.security-note > div { min-width: 0; flex: 1; }
.security-note b,
.security-note p { display: block; margin: 0; }
.security-note b { font-size: 8px; }
.security-note p { margin-top: 4px; font-size: 7px; }
.security-note button { color: #177d5f; background: transparent; border: 0; cursor: pointer; font-size: 7px; font-weight: 620; }

/* ---------- «Обзор»: лента звонков ---------- */

.status-banner.demo {
  background: #fffdf7;
  border-color: #f2e3c4;
  box-shadow: 0 3px 10px rgba(96, 72, 25, .04);
}

.status-banner.demo .status-pulse {
  color: #b57d1c;
  background: var(--amber-soft);
}

.status-banner.demo .status-health button {
  color: #96691a;
  background: var(--amber-soft);
}

.feed-stats {
  display: grid;
  margin-bottom: 14px;
  gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.feed-stat {
  min-width: 0;
  padding: 12px 14px 13px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  box-shadow: 0 2px 8px rgba(25, 20, 36, .035);
}

.feed-stat b,
.feed-stat span,
.feed-stat em {
  display: block;
}

.feed-stat b {
  color: #292431;
  font-size: 21px;
  font-weight: 760;
  letter-spacing: -.04em;
}

.feed-stat span {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 560;
}

.feed-stat em {
  margin-top: 3px;
  color: var(--muted-2);
  font-size: 10px;
  font-style: normal;
}

.call-feed-card .card-head {
  flex-wrap: wrap;
  align-items: center;
}

.call-feed {
  display: flex;
  flex-direction: column;
}

.feed-item {
  min-width: 0;
  padding: 14px 17px 15px;
  border-bottom: 1px solid #f1eff4;
}

.feed-item:last-child {
  border-bottom: 0;
}

.feed-item:hover {
  background: #fcfbfe;
}

.feed-top {
  display: flex;
  margin-bottom: 9px;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 10px;
}

.feed-dir {
  display: inline-flex;
  height: 21px;
  padding: 0 7px;
  align-items: center;
  gap: 5px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 640;
}

.feed-dir .icon {
  width: 11px;
  height: 11px;
}

.feed-dir.inbound { color: #3d6dd0; background: var(--blue-soft); }
.feed-dir.outbound { color: #5e4bd1; background: var(--purple-soft); }

.feed-phone {
  color: #2c2735;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.feed-when {
  color: var(--muted);
  font-size: 11px;
}

.feed-marks {
  display: inline-flex;
  margin-left: auto;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.call-kind.answered { color: #178965; background: var(--mint-soft); }

.feed-outcome {
  display: inline-flex;
  height: 20px;
  padding: 0 7px;
  align-items: center;
  color: #6b6577;
  background: #f2f1f5;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
}

.feed-summary {
  margin: 0;
  color: #4d4859;
  font-size: 12px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.feed-summary.muted {
  color: var(--muted-2);
  font-style: italic;
}

.feed-request {
  margin-top: 10px;
  padding: 10px 12px 11px;
  background: #faf9fc;
  border: 1px solid #efedf4;
  border-radius: 9px;
}

.feed-request > b {
  display: inline-flex;
  margin-bottom: 8px;
  align-items: center;
  gap: 6px;
  color: #5e4bd1;
  font-size: 11px;
  font-weight: 660;
}

.feed-request > b .icon {
  width: 12px;
  height: 12px;
}

.feed-request dl {
  display: grid;
  margin: 0;
  gap: 7px 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.feed-request dl > div { min-width: 0; }

.feed-request dt {
  color: var(--muted-2);
  font-size: 10px;
}

.feed-request dd {
  margin: 2px 0 0;
  color: #443f52;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.feed-audio {
  display: block;
  width: min(420px, 100%);
  height: 34px;
  margin-top: 11px;
  /* кабинет светлый: плеер не должен внезапно почернеть от тёмной темы системы */
  color-scheme: light;
}

.feed-transcript { margin-top: 10px; }

.feed-transcript > summary {
  display: inline-flex;
  padding: 5px 9px;
  align-items: center;
  gap: 6px;
  color: #5b5667;
  background: #f4f3f7;
  border-radius: 7px;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  list-style: none;
  user-select: none;
}

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

.feed-transcript > summary:hover {
  color: var(--ink);
  background: #ece9f3;
}

.feed-transcript > summary .icon {
  width: 12px;
  height: 12px;
}

.feed-transcript > summary i {
  color: var(--muted-2);
  font-size: 10px;
  font-style: normal;
}

.feed-transcript[open] > summary { margin-bottom: 10px; }
.feed-transcript[open] > summary .feed-chevron { transform: rotate(180deg); }
.feed-close-label,
.feed-transcript[open] .feed-open-label { display: none; }
.feed-transcript[open] .feed-close-label { display: inline; }

.feed-transcript-body {
  max-height: 330px;
  padding: 11px 12px 3px;
  overflow-y: auto;
  background: #fbfafc;
  border: 1px solid #f0eef4;
  border-radius: 9px;
  scrollbar-width: thin;
}

.feed-empty,
.feed-nothing {
  padding: 34px 20px 36px;
  text-align: center;
}

.feed-empty .icon {
  width: 22px;
  height: 22px;
  margin-bottom: 10px;
  color: var(--muted-2);
}

.feed-empty b,
.feed-nothing b {
  display: block;
  color: #453f52;
  font-size: 12px;
  font-weight: 680;
}

.feed-empty small,
.feed-nothing small {
  display: block;
  max-width: 380px;
  margin: 6px auto 0;
  color: var(--muted-2);
  font-size: 11px;
  line-height: 1.5;
}

.feed-foot {
  display: flex;
  padding: 11px 15px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  border-top: 1px solid #efedf2;
  font-size: 11px;
}

@media (max-width: 1320px) {
  .module-scroll { padding-right: 22px; padding-left: 22px; }
  .integration-grid { grid-template-columns: repeat(3, minmax(190px, 1fr)); }
  .source-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
  .panel-scrim { left: 205px; }
}

@media (max-width: 1120px) {
  .panel-scrim { left: 72px; }
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .overview-grid,
  .analytics-main-grid { grid-template-columns: minmax(0, 1.3fr) minmax(230px, .7fr); }
  .recent-call-row { grid-template-columns: 30px minmax(85px, .8fr) 82px minmax(120px, 1.2fr) 55px 13px; }
  .call-summary { max-width: 190px; }
  .integration-grid { grid-template-columns: repeat(2, minmax(190px, 1fr)); }
}

@media (max-width: 900px) {
  .overview-grid,
  .overview-bottom-grid,
  .analytics-main-grid,
  .analytics-secondary-grid,
  .team-grid { grid-template-columns: 1fr; }
  .conversion-card { min-height: 300px; }
  .knowledge-layout { grid-template-columns: 175px minmax(0, 1fr); }
  .source-grid { grid-template-columns: 1fr; }
  .calls-table-head,
  .calls-table-row { grid-template-columns: minmax(135px, 1fr) 100px minmax(180px, 1.4fr) 100px 18px; }
  .integration-feature { align-items: flex-start; gap: 14px; flex-direction: column; }
  .settings-layout { grid-template-columns: 170px minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .module-scroll { padding: 20px 14px 40px; }
  .module-page-head { min-height: 65px; margin-bottom: 18px; align-items: flex-start; flex-direction: column; gap: 12px; }
  .module-page-head h1 { font-size: 20px; }
  .status-banner { align-items: flex-start; }
  .status-health { display: none; }
  .metric-grid,
  .team-summary { grid-template-columns: 1fr 1fr; }
  .activity-chart { height: 210px; }
  .recent-call-row { grid-template-columns: 30px 1fr 72px 14px; }
  .recent-call-row .call-summary,
  .recent-call-row .call-time { display: none; }
  .calls-summary-strip { overflow-x: auto; }
  .calls-summary-strip > span:not(.summary-live) { min-width: 85px; padding: 2px 13px; }
  .summary-live { display: none; }
  .calls-toolbar,
  .knowledge-toolbar { align-items: stretch; flex-wrap: wrap; }
  .module-search { width: 100%; min-width: 100%; }
  .filter-pills { overflow-x: auto; }
  .filter-button { margin-left: 0; }
  .calls-table-head { display: none; }
  .calls-table-row { min-height: 82px; grid-template-columns: 1fr 90px 16px; }
  .calls-table-row > span:nth-child(3),
  .calls-table-row > span:nth-child(4) { display: none; }
  .panel-scrim { left: 0; }
  .knowledge-health { align-items: flex-start; }
  .knowledge-health-meta { display: none; }
  .knowledge-layout { display: block; min-height: 0; }
  .knowledge-nav { overflow-x: auto; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--line); }
  .knowledge-nav > button { width: max-content; min-width: max-content; }
  .knowledge-tip { display: none; }
  .source-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .member-row { grid-template-columns: 38px minmax(110px, 1fr) 90px 24px; }
  .member-workload { display: none; }
  .integration-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); }
  .integration-flow { display: none; }
  .settings-layout { display: block; }
  .settings-nav { margin-bottom: 12px; overflow-x: auto; flex-direction: row; }
  .settings-nav > button { width: max-content; min-width: max-content; }
}

@media (max-width: 480px) {
  .metric-grid,
  .team-summary,
  .source-grid,
  .integration-grid,
  .settings-form-grid { grid-template-columns: 1fr; }
  .module-page-head p { line-height: 1.5; }
  .chart-column:nth-child(-n+3) { display: none; }
  .call-detail-panel,
  .knowledge-add-drawer,
  .invite-panel { width: 100%; }
  .filter-pills { width: 100%; }
  .calls-toolbar .filter-button { display: none; }
  .knowledge-health-score { width: 47px; }
  .member-row { grid-template-columns: 38px minmax(100px, 1fr) 24px; }
  .member-role { display: none; }
  .developer-strip { align-items: flex-start; flex-wrap: wrap; }
  .developer-strip button { margin-left: 48px; }
  .danger-zone { align-items: flex-start; flex-direction: column; gap: 14px; }
  .notification-events { grid-template-columns: 1fr; }
}

/* Лента звонков на узких экранах: чипы переносим, поля заявки — в одну колонку */
@media (max-width: 1120px) {
  .feed-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .feed-stats { gap: 10px; }
  .feed-stat b { font-size: 19px; }
  .call-feed-card .card-head { align-items: stretch; flex-direction: column; }
  .call-feed-card .filter-pills { overflow-x: auto; }
  .feed-item { padding: 13px 14px 14px; }
  .feed-marks { width: 100%; margin-left: 0; }
  .feed-request dl { grid-template-columns: 1fr; }
  .feed-audio { width: 100%; }
  .feed-foot { align-items: flex-start; flex-direction: column; gap: 8px; }
}

@media (max-width: 480px) {
  .feed-stats { grid-template-columns: 1fr 1fr; }
  .feed-top { gap: 6px 8px; }
  .feed-phone { font-size: 12px; }
}

/* Направление звонка: входящий от клиента или наш обзвон */
.call-direction {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-style: normal;
  white-space: nowrap;
  border: 1px solid transparent;
}
.call-direction .icon { width: 14px; height: 14px; }
.call-direction.inbound {
  color: var(--mint-ink, #0f7a5a);
  background: color-mix(in srgb, var(--mint, #21b888) 12%, transparent);
  border-color: color-mix(in srgb, var(--mint, #21b888) 26%, transparent);
}
.call-direction.outbound {
  color: var(--blue-ink, #35529d);
  background: color-mix(in srgb, var(--blue, #4f7ef7) 12%, transparent);
  border-color: color-mix(in srgb, var(--blue, #4f7ef7) 26%, transparent);
}
@media (max-width: 900px) {
  /* 6 ячеек: клиент, направление, результат, содержание, дата, стрелка.
     На узком экране прячем содержание разговора — остаётся 5 колонок. */
  .calls-table-row, .calls-table-head {
    grid-template-columns: minmax(130px, 1fr) 108px 104px 96px 22px;
  }
  .calls-table-row > :nth-child(4), .calls-table-head > :nth-child(4) { display: none; }
}
@media (max-width: 620px) {
  /* Совсем узко: только клиент, направление и стрелка */
  .calls-table-row, .calls-table-head { grid-template-columns: minmax(120px, 1fr) 104px 22px; }
  .calls-table-row > :nth-child(3), .calls-table-head > :nth-child(3),
  .calls-table-row > :nth-child(5), .calls-table-head > :nth-child(5) { display: none; }
}