/* Recording type selector popover */
.fcr-record-type-popover {
  max-width: none;
}

.fcr-record-type-popover .fcr-tooltip-inner {
  padding: 0 !important;
}

.fcr-record-type-selector {
  padding: 12px;
  min-width: 330px;
}

.fcr-record-type-selector__divider {
  height: 1px;
  background-color: var(--fcr_ui_scene_line1, rgba(255, 255, 255, 0.1));
  margin: 8px 0;
}

.fcr-record-type-selector__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-radius: var(--fcr_cornerradius_xs, 4px);
}

.fcr-record-type-selector__item-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fcr-record-type-selector__item-icon--cloud {
  background-color: var(--fcr_ui_scene_card4);
}

.fcr-record-type-selector__item-icon--local {
  background-color: var(--fcr_ui_scene_card5);
}

.fcr-record-type-selector__item-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.fcr-record-type-selector__item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fcr_ui_scene_icontext1, rgba(255, 255, 255, 1));
  line-height: 1.4;
}

.fcr-record-type-selector__item-desc {
  font-size: 12px;
  color: var(--fcr_ui_scene_icontext2, rgba(255, 255, 255, 0.5));
  line-height: 1.4;
  margin-top: 2px;
}

.fcr-record-type-selector__item-btn {
  flex-shrink: 0;
  padding: 4px 16px;
  border-radius: 4px;
  background-color: var(--fcr_ui_scene_ramp_brand6, #357bf6);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  line-height: 22px;
}

.fcr-record-type-selector__item-btn:hover {
  opacity: 0.85;
}

/* Cloud recording active: pause + stop buttons */
.fcr-record-type-selector__item-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.fcr-record-type-selector__item-btn--pause.fcr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--fcr_cornerradius_s, 4px);
  background: var(--fcr_web_ui_scene_fill2, #fff);
  color: var(--fcr_ui_scene_icontext1, #1d2129);
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--fcr_ui_scene_line1, #e5e6eb);
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  flex-wrap: nowrap;
  transition: all 0.2s ease;
}

.fcr-record-type-selector__item-btn--pause.fcr-button:hover {
  background: var(--fcr_web_ui_scene_hover, #f2f3f5);
}

.fcr-record-type-selector__item-btn--stop.fcr-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--fcr_cornerradius_s, 4px);
  background: var(--fcr_ui_scene_ramp_red6, #f53f3f);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border: none !important;
  cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  flex-wrap: nowrap;
  transition: all 0.2s ease;
}

.fcr-record-type-selector__item-btn--stop.fcr-button:hover {
  background: var(--fcr_ui_scene_ramp_red7, #e04848);
}

.fcr-record-type-selector__item-btn--stop > div,
.fcr-record-type-selector__item-btn--pause > div {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  gap: 4px;
}
/* Local recording permission selector popover */
.fcr-record-permission-popover {
  max-width: none;
}

.fcr-record-permission-popover .fcr-tooltip-inner {
  padding: 0 !important;
}

.fcr-record-permission-selector {
  min-width: 220px;
}

.fcr-record-permission-selector__title {
  padding: 14px 16px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--fcr_ui_scene_icontext1, #1d2129);
  line-height: 1.4;
  text-align: left;
}

.fcr-record-permission-selector__divider {
  height: 1px;
  background-color: var(--fcr_ui_scene_line1, rgba(0, 0, 0, 0.06));
  margin: 0;
}

.fcr-record-permission-selector__options {
  padding: 8px 0;
}

.fcr-record-permission-selector__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--fcr_ui_scene_icontext1, #1d2129);
  line-height: 1.4;
}

.fcr-record-permission-selector__option:hover {
  background-color: var(--fcr_web_ui_scene_hover, rgba(0, 0, 0, 0.04));
}

.fcr-record-permission-selector__option-label {
  flex: 1;
}