/* =====================================================================
   Canvas Sharing — layout and interaction geometry.
   Visual ownership: design-system/adapters/canvas-sharing-theme.css.
   Dynamic collaboration colors remain owned by presence logic.
   ===================================================================== */

/* --- Share Modal Overlay --- */
.share-modal-overlay {
  position:fixed;
  inset:0;
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(4px);
}

/* --- Share Modal --- */
.share-modal {
  border-radius:24px;
  border:1px solid transparent;
  max-width:620px;
  width:92vw;
  max-height:85vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.share-modal__header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 24px 0;
  flex-shrink:0;
}
.share-modal__title {
  font-size:18px;
  font-weight:700;
}
.share-modal__close {
  border:none;
  cursor:pointer;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  transition:background .15s,color .15s;
}

.share-modal__body {
  padding:16px 24px 24px;
  overflow-y:auto;
  overflow-x:hidden;
  flex:1;
  min-height:0;
  scrollbar-width:thin;
}
.share-modal__body::-webkit-scrollbar { width:5px; }
.share-modal__body::-webkit-scrollbar-track { background:transparent; }
.share-modal__body::-webkit-scrollbar-thumb { border-radius:4px; }

/* --- Section --- */
.share-section {
  margin-bottom:20px;
  padding-bottom:16px;
  border-bottom:1px solid transparent;
}
.share-section:last-child {
  border-bottom:none;
  margin-bottom:0;
  padding-bottom:0;
}
.share-section__label {
  font-size:13px;
  font-weight:600;
  margin-bottom:10px;
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* --- Invite link --- */
.share-invite-row {
  display:flex;
  gap:8px;
  margin-bottom:8px;
}
.share-invite-input {
  flex:1;
  border:1px solid transparent;
  border-radius:10px;
  padding:8px 12px;
  font-size:13px;
  font-family:'JetBrains Mono',monospace;
  outline:none;
}
.share-copy-btn {
  width:38px;
  height:38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:10px;
  cursor:pointer;
  transition:background .15s;
}
.share-invite-meta {
  font-size:12px;
  margin-bottom:8px;
}
.share-generate-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid transparent;
  border-radius:8px;
  padding:6px 14px;
  font-size:12px;
  cursor:pointer;
  transition:color .15s,border-color .15s;
}

/* --- Members list --- */
.share-members-list {
  display:flex;
  flex-direction:column;
  gap:2px;
}
.member-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 4px;
  border-radius:8px;
  transition:background .15s;
}
.member-online-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.member-avatar {
  width:32px;
  height:32px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  flex-shrink:0;
}
.member-avatar--img {
  object-fit:cover;
  background:none;
}
.member-name {
  flex:1;
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.share-you-tag {
  font-size:11px;
  font-weight:400;
}
.member-role { flex-shrink:0; }
.share-member-role-label {
  font-size:12px;
  padding:4px 10px;
  border-radius:6px;
}
.share-role-select {
  border:1px solid transparent;
  border-radius:8px;
  padding:4px 8px;
  font-size:12px;
  cursor:pointer;
  outline:none;
}
.share-remove-btn {
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  cursor:pointer;
  border-radius:6px;
  transition:color .15s,background .15s;
  flex-shrink:0;
}

/* --- Leave button --- */
.share-section--leave { text-align:center; }
.share-leave-btn {
  border:1px solid transparent;
  border-radius:10px;
  padding:8px 24px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s;
}

/* =====================================================================
   Presence bar
   ===================================================================== */
.presence-bar {
  display:flex;
  align-items:center;
  gap:4px;
}
.presence-avatar {
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid var(--user-color,var(--aidc-cyan-500));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:transform .15s;
}
.presence-avatar:hover { transform:scale(1.12); }
.presence-more {
  width:28px;
  height:28px;
  border-radius:50%;
  font-size:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
}

/* =====================================================================
   Share button
   ===================================================================== */
.share-topbar-btn {
  display:inline-flex;
  align-items:center;
  gap:6px;
  border:1px solid transparent;
  border-radius:10px;
  padding:6px 16px;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:background .15s,border-color .15s;
}
.share-topbar-btn svg {
  width:16px;
  height:16px;
}

/* =====================================================================
   Remote cursors and lock overlays.
   User colors/backgrounds are supplied dynamically by presence logic.
   ===================================================================== */
.remote-cursor-label {
  font-size:11px;
  padding:2px 6px;
  border-radius:4px;
  white-space:nowrap;
  pointer-events:none;
  position:absolute;
  font-weight:600;
}

.remote-cursor {
  position:absolute;
  top:0;
  left:0;
  pointer-events:none;
  z-index:9990;
  will-change:transform;
  transition:transform 80ms linear;
}
.remote-cursor svg {
  display:block;
  filter:none;
}
.remote-cursor .remote-cursor-label {
  display:inline-block;
  margin-left:2px;
  margin-top:12px;
  padding:2px 7px;
  border-radius:5px;
  font-size:11px;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
  pointer-events:none;
  vertical-align:top;
  position:static;
  box-shadow:0 1px 4px rgba(0,0,0,.3);
}

.element-lock-overlay {
  position:absolute;
  pointer-events:none;
  z-index:9980;
  border-radius:4px;
  transition:all 100ms linear;
  box-sizing:border-box;
}
.element-lock-overlay span {
  position:absolute;
  top:-20px;
  left:0;
  padding:2px 6px;
  border-radius:4px;
  font-size:10px;
  font-weight:600;
  color:#fff;
  white-space:nowrap;
  pointer-events:none;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}

/* =====================================================================
   View Only badge
   ===================================================================== */
.view-only-badge {
  position:fixed;
  top:60px;
  left:50%;
  transform:translateX(-50%);
  padding:6px 16px;
  border-radius:20px;
  font-size:13px;
  font-weight:600;
  border:1px solid transparent;
  z-index:100;
  pointer-events:none;
  backdrop-filter:blur(8px);
}

/* =====================================================================
   Settings Section
   ===================================================================== */
.share-section--settings {
  border-top:1px solid transparent;
  padding-top:12px;
  margin-top:4px;
}
.share-section--settings .share-section__label {
  display:flex;
  align-items:center;
  gap:6px;
}
.share-setting-row {
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
  font-size:13.5px;
  cursor:pointer;
}
.share-setting-cb {
  width:16px;
  height:16px;
  cursor:pointer;
}

/* =====================================================================
   Transfer Ownership Section
   ===================================================================== */
.share-section--transfer {
  border-top:1px solid transparent;
  padding-top:12px;
  margin-top:4px;
}
.share-transfer-row {
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
  min-width:0;
}
.share-transfer-row .share-role-select {
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}
.share-transfer-btn {
  border:1px solid transparent;
  border-radius:8px;
  padding:6px 14px;
  font-size:13px;
  cursor:pointer;
  transition:background .15s,border-color .15s;
  white-space:nowrap;
}

/* =====================================================================
   Activity Log Section
   ===================================================================== */
.share-section--activity {
  border-top:1px solid transparent;
  padding-top:12px;
  margin-top:4px;
}
.share-activity-row {
  display:flex;
  align-items:baseline;
  gap:8px;
  padding:4px 0;
  font-size:12.5px;
  min-width:0;
}
.share-activity-name {
  font-weight:500;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:55%;
  flex-shrink:1;
}
.share-activity-action { flex:1; }
.share-activity-time {
  font-size:11.5px;
  flex-shrink:0;
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width:640px) {
  .share-modal {
    width:96vw;
    max-width:none;
    border-radius:18px;
  }
  .share-modal__body { padding:12px 16px 20px; }
  .member-row { gap:8px; }
  .member-name { font-size:13px; }
}