/* RU: Экран звонков — compact pass, меньше промо-карточности и больше product UI. */
/* EN: Calls screen — compact pass, less promo-card feel and more product UI. */

.calls-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.call-panel {
  padding: 16px;
  border-radius: 18px;
  min-height: 100%;
}

.call-panel.wide {
  grid-column: span 2;
}

.call-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.call-stage {
  min-height: 168px;
  padding: 14px;
  border-radius: 16px;
  display: flex;
  align-items: end;
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(6,8,10,.14), rgba(6,8,10,.42)),
    radial-gradient(circle at 24% 20%, rgba(103,185,181,.18), transparent 30%),
    linear-gradient(135deg, rgba(20,28,31,.88), rgba(34,45,49,.92));
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.call-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.call-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.call-actions .primary-btn,
.call-actions .secondary-btn {
  min-height: 34px;
  padding: 0.56rem 0.8rem;
  border-radius: 11px;
  font-size: 0.82rem;
}

.scene-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.scene-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.scene-screen {
  min-height: 126px;
  border-radius: 16px;
  padding: 12px;
  display: flex;
  align-items: end;
  font-size: 0.86rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.scene-screen.dark {
  color: #fff;
  background:
    linear-gradient(180deg, rgba(6,8,10,.18), rgba(6,8,10,.44)),
    radial-gradient(circle at 24% 18%, rgba(103,185,181,.16), transparent 30%),
    linear-gradient(135deg, rgba(24,31,36,.92), rgba(36,44,52,.94));
}

.scene-screen.locked {
  color: var(--color-text);
  background:
    linear-gradient(180deg, rgba(214,167,108,.08), rgba(214,167,108,.03)),
    rgba(255,255,255,.02);
}

.meeting-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meeting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.04);
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)),
    rgba(255,255,255,.012);
}

.meeting-item strong {
  font-size: 0.88rem;
  line-height: 1.25;
}

@media (max-width: 980px) {
  .calls-grid {
    grid-template-columns: 1fr;
  }

  .call-panel.wide {
    grid-column: span 1;
  }

  .scene-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .meeting-item {
    align-items: flex-start;
    flex-direction: column;
  }

  .call-stage {
    min-height: 148px;
  }

  .scene-screen {
    min-height: 112px;
  }
}