/* Ofisu Step 10 conference UI */
.crm-conference-summary{display:none;margin-top:8px;padding:8px 9px;border:1px solid #dbe9e0;border-radius:10px;background:#f6faf7;color:#52645a;font-size:9px}.crm-conference-summary.show{display:block}.crm-conference-summary b{color:#143c28}.crm-conference-add{border:1px solid #cbe7d5!important;background:#edf9f1!important;color:#0c8140!important}.crm-conference-modal{position:fixed;inset:0;z-index:100060;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(8,20,13,.52);backdrop-filter:blur(4px)}.crm-conference-modal.open{display:flex}.crm-conference-card{width:min(440px,94vw);max-height:82vh;overflow:auto;padding:18px;border-radius:17px;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.28)}.crm-conference-card h3{margin:0 0 5px;color:#113b27;font-size:18px}.crm-conference-card p{margin:0 0 14px;color:#738178;font-size:10px}.crm-conference-person{display:flex;align-items:center;gap:9px;padding:10px 0;border-top:1px solid #edf2ef}.crm-conference-person:first-of-type{border-top:0}.crm-conference-person-main{min-width:0;flex:1}.crm-conference-person-name{color:#173d2a;font-size:11px;font-weight:850}.crm-conference-person-meta{margin-top:2px;color:#819087;font-size:8px}.crm-conference-person button{width:auto;margin:0;padding:7px 10px;border:1px solid #bfe3cd;border-radius:9px;background:#edf9f1;color:#087c3c;font-size:9px;font-weight:850}.crm-conference-person button:disabled{opacity:.48}.crm-conference-close{width:100%;margin-top:12px;padding:9px;border:1px solid #d9e3dd;border-radius:10px;background:#f7f9f8;color:#5c6a62;font-weight:800}.crm-conference-invite-overlay{position:fixed;inset:0;z-index:100070;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(8,20,13,.58);backdrop-filter:blur(5px)}.crm-conference-invite-overlay.open{display:flex}.crm-conference-invite-card{width:min(390px,92vw);padding:24px;border-radius:18px;background:#fff;text-align:center;box-shadow:0 24px 70px rgba(0,0,0,.30)}.crm-conference-invite-icon{width:62px;height:62px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#eaf8ef;font-size:27px}.crm-conference-invite-card h3{margin:0;color:#153d2a;font-size:20px}.crm-conference-invite-card p{margin:8px 0 16px;color:#728078;font-size:11px}.crm-conference-invite-actions{display:flex;gap:10px;justify-content:center}.crm-conference-invite-actions button{width:auto;min-width:110px;margin:0;padding:10px 14px;border-radius:10px;font-size:10px;font-weight:900}.crm-conference-accept{border:0;background:#18a957;color:#fff}.crm-conference-decline{border:1px solid #efc7c7;background:#fff2f2;color:#b23232}.crm-conference-gallery{position:fixed;left:245px;top:95px;z-index:99968;display:none;width:286px;max-height:70vh;overflow:auto;padding:8px;border:1px solid rgba(255,255,255,.2);border-radius:15px;background:#101713;box-shadow:0 18px 48px rgba(0,0,0,.3);cursor:grab;touch-action:none;user-select:none}.crm-conference-gallery.active{display:block}.crm-conference-gallery.dragging{cursor:grabbing}.crm-conference-gallery-title{padding:3px 5px 8px;color:#dbe6df;font-size:8px;font-weight:900;letter-spacing:.55px;text-transform:uppercase}.crm-conference-video-tile{position:relative;height:150px;margin-top:7px;overflow:hidden;border-radius:11px;background:#17211b}.crm-conference-video-tile video{width:100%;height:100%;object-fit:cover;background:#111914}.crm-conference-video-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:15px;text-align:center;color:#cdd9d1;font-size:9px}.crm-conference-video-placeholder.hidden{display:none}.crm-conference-video-name{position:absolute;left:7px;bottom:7px;padding:4px 7px;border-radius:999px;background:rgba(8,16,11,.72);color:#fff;font-size:8px;font-weight:850}.crm-conference-audio{display:none}.crm-remote-target-modal .crm-conference-person button{background:#18a957;border-color:#18a957;color:#fff}


/* Step 10.3 ------------------------------------------------ */

/* 1. Prevent a second normal Call while the Admin is already in a call. */
.crm-call-open:disabled{
  opacity:.42!important;
  cursor:not-allowed!important;
  filter:grayscale(.35)
}

/* 3. Mic / Speaker status visible to the other participants. */
.crm-peer-media-state{
  display:none;
  margin-top:7px;
  gap:5px;
  flex-wrap:wrap;
  align-items:center;
  color:#718078;
  font-size:8px;
  font-weight:850
}
.crm-peer-media-state.show{display:flex}

.crm-media-badge{
  display:inline-flex;
  align-items:center;
  padding:4px 7px;
  border-radius:999px;
  font-size:8px;
  font-weight:900;
  white-space:nowrap
}
.crm-media-badge.mic{
  background:#fff0f0;
  border:1px solid #efc1c1;
  color:#b52c2c
}
.crm-media-badge.speaker{
  background:#fff7e8;
  border:1px solid #eed3a1;
  color:#9b6408
}
.crm-conference-media-badges{
  position:absolute;
  top:7px;
  right:7px;
  z-index:6;
  display:flex;
  gap:4px;
  flex-wrap:wrap;
  justify-content:flex-end;
  max-width:84%
}
.crm-conference-summary-person{
  display:inline-flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap
}
.crm-conference-summary-separator{
  margin:0 3px;
  color:#a1ada6
}

/* 2. Additional conference users: their own local camera fills the complete
      draggable camera box instead of staying as a tiny self-preview over
      a large black unused remote-camera area. */
.crm-call-camera-dock.conference-self-full .crm-call-camera-remote{
  display:none!important
}
.crm-call-camera-dock.conference-self-full .crm-call-camera-local{
  display:block!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important
}
.crm-call-camera-dock.conference-self-full .crm-call-camera-local video{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transform:scaleX(-1)
}
.crm-call-camera-dock.conference-self-full .crm-call-camera-local span{
  left:7px!important;
  bottom:7px!important;
  right:auto!important;
  top:auto!important;
  padding:4px 7px!important;
  font-size:8px!important
}


/* ==========================================================
   STEP 10.4 — separate base-call cameras
   Admin and base User1 no longer share one picture-in-picture frame.
   ========================================================== */

/* Hide the old little local picture-in-picture for Admin/base User1.
   Additional conference users keep the Step 10.3 full-self layout. */
body.step10-separate-base-camera .crm-call-camera-dock:not(.conference-self-full)
  .crm-call-camera-local{
  display:none!important
}

/* Separate local self-camera frame: same dimensions as base remote camera. */
.crm-self-camera-dock{
  position:fixed;
  left:540px;
  top:95px;
  z-index:99969;
  display:none;
  width:270px;
  height:166px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.24);
  border-radius:16px;
  background:#101713;
  box-shadow:0 18px 48px rgba(0,0,0,.30);
  cursor:grab;
  touch-action:none;
  user-select:none
}
.crm-self-camera-dock.active{
  display:block
}
.crm-self-camera-dock.dragging{
  cursor:grabbing
}
.crm-self-camera-dock video{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scaleX(-1);
  background:#101713
}
.crm-self-camera-drag-hint{
  position:absolute;
  top:7px;
  left:50%;
  z-index:5;
  transform:translateX(-50%);
  pointer-events:none;
  padding:3px 7px;
  border-radius:999px;
  background:rgba(9,17,12,.65);
  color:#fff;
  font-size:7px;
  font-weight:900;
  letter-spacing:.35px;
  white-space:nowrap
}
.crm-self-camera-name{
  position:absolute;
  left:8px;
  bottom:7px;
  z-index:5;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(9,17,12,.72);
  color:#fff;
  font-size:8px;
  font-weight:850
}

/* The original draggable camera frame now represents ONLY the other person
   for Admin/base User1. Do not keep it visible just because local camera is on. */
body.step10-separate-base-camera
  .crm-call-camera-dock.base-peer-camera-only
  .crm-call-camera-local{
  display:none!important
}

@media(max-width:900px){
  .crm-self-camera-dock{
    left:10px;
    top:285px;
    width:220px;
    height:136px
  }
}


/* ==========================================================
   STEP 10.6 — draggable compact call/control window
   ========================================================== */

/*
 * When the connected-call modal is minimized, or when Remote Support
 * automatically puts it into compact mode, the call card is independent
 * from the page layout and can be positioned anywhere in the viewport.
 */
.crm-call-overlay.call-minimized-mode .crm-call-card,
.crm-call-overlay.remote-support-mode .crm-call-card{
  position:fixed!important;
  margin:0!important;
  z-index:100080!important
}

/* Small explicit handle so buttons remain fully clickable and only this
   handle starts a drag operation. */
.crm-compact-call-drag-handle{
  display:none;
  width:max-content;
  max-width:100%;
  margin:0 0 7px;
  padding:3px 8px;
  border-radius:999px;
  background:#e9f5ed;
  color:#34724e;
  font-size:7px;
  font-weight:900;
  letter-spacing:.55px;
  text-transform:uppercase;
  cursor:grab;
  touch-action:none;
  user-select:none
}

.crm-call-overlay.call-minimized-mode
  .crm-compact-call-drag-handle,
.crm-call-overlay.remote-support-mode
  .crm-compact-call-drag-handle{
  display:block
}

.crm-compact-call-drag-handle.dragging{
  cursor:grabbing;
  background:#dff2e6
}

/* Prevent accidental text selection while the compact card is moving. */
body.crm-compact-call-dragging{
  user-select:none!important
}