/* OW Onboarding Tool 0.77.0
 * Responsive inspector, direct map-based prompt assignments and protected
 * 60-minute customer access.
 */

/* --------------------------------------------------------------------------
   Responsive/collapsible right inspector
   -------------------------------------------------------------------------- */
body.content-editor-mode .cm-editor-body {
  grid-template-columns: clamp(252px, 19vw, 300px) minmax(0, 1fr) clamp(330px, 27vw, 430px);
  transition: grid-template-columns 180ms ease;
}

body.content-editor-mode .cm-editor.inspector-collapsed .cm-editor-body {
  grid-template-columns: clamp(252px, 19vw, 300px) minmax(0, 1fr);
}

body.content-editor-mode .cm-editor.inspector-collapsed .cm-inspector {
  display: none;
}

.cm-inspector-reopen {
  position: fixed;
  z-index: 74;
  right: 0;
  top: 50%;
  min-height: 74px;
  padding: 10px 7px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #5548d4;
  background: #fff;
  border: 1px solid #dcd8ff;
  border-right: 0;
  border-radius: 12px 0 0 12px;
  box-shadow: 0 10px 32px rgba(41, 41, 41, .12);
  cursor: pointer;
  transform: translateY(-50%);
}

.cm-inspector-reopen[hidden] { display: none !important; }
.cm-inspector-reopen svg { width: 15px; height: 15px; }
.cm-inspector-reopen span { font-size: 10px; font-weight: 700; writing-mode: vertical-rl; transform: rotate(180deg); }
.cm-inspector-reopen:hover { background: #f8f7ff; }

.cm-inspector-header {
  min-width: 0;
}

.cm-inspector-header-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 5px;
}

.cm-inspector-header-actions .cm-icon-button {
  width: 34px;
  height: 34px;
}

.cm-inspector-collapse { color: #777; }
.cm-inspector-collapse:hover { color: #4e42cf; background: #f2efff; }

.cm-inspector,
.cm-inspector-scroll,
.cm-inspector .cm-form-section,
.cm-inspector .cm-prompt-inspector-card,
.cm-inspector .cm-field,
.cm-inspector .cm-field > *,
.cm-inspector-header > div:first-child {
  min-width: 0;
  max-width: 100%;
}

.cm-inspector-scroll {
  width: 100%;
  overflow-x: hidden;
}

.cm-inspector :is(h2, h3, p, b, strong, small, span, label) {
  overflow-wrap: anywhere;
}

.cm-inspector .cm-field input,
.cm-inspector .cm-field select,
.cm-inspector .cm-field textarea {
  min-width: 0;
  max-width: 100%;
}

.cm-inspector-empty-state {
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 10px;
  color: #6b6b68;
}

.cm-inspector-empty-state > div:first-child {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: #5c4fe0;
  background: #f0edff;
  border-radius: 13px;
}

.cm-inspector-empty-state > div:first-child svg { width: 20px; height: 20px; }
.cm-inspector-empty-state h3 { margin: 3px 0 0; }
.cm-inspector-empty-state p { margin: 0 0 8px; line-height: 1.5; }
.cm-inspector-empty-state .cm-inspector-stats { width: 100%; }

/* The screenshot showed the prompt summary pushing beyond the inspector width. */
.cm-prompt-inspector-card {
  width: 100%;
  padding: 14px !important;
  border-radius: 13px;
  overflow: hidden;
}

.cm-prompt-inspector-head {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

.cm-prompt-inspector-head > div {
  width: auto !important;
  min-width: 0;
}

.cm-prompt-inspector-head span:not(.cm-prompt-inspector-icon),
.cm-prompt-inspector-head strong,
.cm-prompt-inspector-card p,
.cm-prompt-inspector-card p b {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.cm-prompt-inspector-card .cm-button-full {
  width: 100%;
  max-width: 100%;
  white-space: normal;
  text-align: center;
}

.cm-prompt-inspector-chips {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cm-prompt-inspector-chip {
  min-width: 0;
  max-width: 100%;
  min-height: 30px;
  padding: 5px 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #5145c9;
  background: #f4f2ff;
  border: 1px solid #d9d4ff;
  border-radius: 999px;
  cursor: grab;
}

.cm-prompt-inspector-chip:active { cursor: grabbing; }
.cm-prompt-inspector-chip:hover { border-color: #aa9ffb; background: #ebe8ff; }
.cm-prompt-inspector-chip svg { width: 12px; height: 12px; flex: 0 0 auto; }
.cm-prompt-inspector-chip span { min-width: 0; font-size: 10px !important; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.cm-prompt-inspector-more { padding: 6px 8px; color: #6a637e; background: #f2f1f5; border-radius: 999px; font-size: 10px !important; }
.cm-prompt-drag-help { display: block; margin: 8px 0 12px; color: #817b90; line-height: 1.45; }

/* --------------------------------------------------------------------------
   Direct prompt assignment on the mindmap
   -------------------------------------------------------------------------- */
.cm-node.prompt-assignment-target {
  cursor: copy;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: 0 0 0 calc(3px / var(--map-scale, 1)) rgba(93, 75, 226, .34), 0 16px 42px rgba(82, 68, 190, .13);
  animation: cmPromptTargetPulse 1.35s ease-in-out infinite;
}

.cm-node.prompt-assignment-source {
  box-shadow: 0 0 0 calc(4px / var(--map-scale, 1)) rgba(238, 163, 51, .55);
}

.cm-node.prompt-drop-hover {
  background: #f2efff !important;
  box-shadow: 0 0 0 calc(7px / var(--map-scale, 1)) rgba(87, 70, 225, .45), 0 20px 48px rgba(64, 50, 171, .2) !important;
  transform: translate(-50%, -50%) scale(1.045);
}

@keyframes cmPromptTargetPulse {
  50% { box-shadow: 0 0 0 calc(6px / var(--map-scale, 1)) rgba(93, 75, 226, .16), 0 16px 42px rgba(82, 68, 190, .08); }
}

.cm-prompt-assignment-tray {
  position: fixed;
  z-index: 160;
  left: 50%;
  bottom: 22px;
  width: min(760px, calc(100vw - 34px));
  min-height: 72px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 36px;
  align-items: center;
  gap: 11px;
  color: #26223d;
  background: rgba(255,255,255,.97);
  border: 1px solid #cfc9ff;
  border-radius: 17px;
  box-shadow: 0 20px 65px rgba(40, 31, 105, .22);
  transform: translateX(-50%);
  backdrop-filter: blur(18px);
}

.cm-prompt-assignment-tray[hidden] { display: none !important; }
.cm-assignment-tray-icon { width: 42px; height: 42px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,#6b3df2,#355cf3); border-radius: 13px; }
.cm-assignment-tray-icon svg { width: 20px; height: 20px; }
.cm-assignment-tray-copy { min-width: 0; display: grid; gap: 2px; }
.cm-assignment-tray-copy > span { color: #6d61d8; font-size: 9px !important; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.cm-assignment-tray-copy > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-assignment-tray-copy > small { color: #6d6977; }
.cm-assignment-mode { padding: 3px; display: flex; gap: 2px; background: #efedf7; border-radius: 10px; }
.cm-assignment-mode button { height: 31px; padding: 0 10px; color: #666074; background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 11px !important; }
.cm-assignment-mode button.active { color: #4e42cd; background: #fff; box-shadow: 0 2px 7px rgba(38,31,82,.1); }
.cm-editor.prompt-dragging .cm-stage { cursor: copy; }

.cm-prompt-unassign {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: #8b6570;
  background: #fff;
  border: 1px solid #ded5d9;
  border-radius: 8px;
  cursor: pointer;
}
.cm-prompt-unassign:hover { color: #bd3040; background: #fff1f2; }
.cm-prompt-unassign svg { width: 13px; height: 13px; }
.cm-prompt-map-one { color: #584bd3; }
.cm-prompt-map-one:hover { background: #eeebff; }

.cm-prompt-cluster-card > summary > div:last-child {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Secure share modal
   -------------------------------------------------------------------------- */
.cm-share-entry { position: relative; }
.cm-share-entry.has-request { background: #3f329f; border-color: #3f329f; }
.cm-share-request-dot { position: absolute; right: -2px; top: -2px; width: 9px; height: 9px; background: #ffbd4a; border: 2px solid #fff; border-radius: 50%; }

.cm-modal.cm-share-modal { width: min(690px, calc(100vw - 28px)); }
.cm-share-modal .cm-modal-body { display: grid; gap: 14px; }
.cm-share-callout { padding: 12px 13px; display: grid; grid-template-columns: 30px minmax(0,1fr); gap: 10px; border-radius: 11px; }
.cm-share-callout > svg { width: 19px; height: 19px; margin: 2px auto 0; }
.cm-share-callout > div { min-width: 0; display: grid; gap: 3px; }
.cm-share-callout span { color: #625d69; font-size: 11px !important; line-height: 1.45; }
.cm-share-callout.request { color: #7a4f02; background: #fff7e5; border: 1px solid #efd49b; }
.cm-share-callout.active { color: #16714a; background: #edf9f2; border: 1px solid #c9e8d6; }
.cm-share-callout.error { color: #ae3944; background: #fff1f2; border: 1px solid #efc9cd; }

.cm-share-explainer { padding: 15px; display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 12px; background: #f7f6fb; border: 1px solid #e2dff0; border-radius: 13px; }
.cm-share-explainer > div:first-child { width: 44px; height: 44px; display: grid; place-items: center; color: #5d4edb; background: #ece9ff; border-radius: 12px; }
.cm-share-explainer svg { width: 19px; height: 19px; }
.cm-share-explainer p { margin: 5px 0 0; color: #686371; font-size: 12px; line-height: 1.5; }

.cm-share-password-field > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.cm-share-password-field input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important; font-size: 16px !important; letter-spacing: .08em !important; }

.cm-share-success { padding: 17px; display: grid; grid-template-columns: 46px minmax(0,1fr); gap: 13px; color: #176d48; background: #edf9f2; border: 1px solid #c8e7d5; border-radius: 14px; }
.cm-share-success > svg { width: 24px; height: 24px; margin: 4px auto; }
.cm-share-success span { font-size: 10px !important; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.cm-share-success h3 { margin: 3px 0 5px; }
.cm-share-success p { margin: 0; color: #5f6d64; font-size: 12px; line-height: 1.45; }

.cm-share-value { display: grid; gap: 5px; }
.cm-share-value > span { color: #76717c; font-size: 10px !important; font-weight: 750; text-transform: uppercase; }
.cm-share-value > div { min-width: 0; min-height: 46px; padding: 6px 7px 6px 12px; display: grid; grid-template-columns: minmax(0,1fr) 34px; align-items: center; gap: 8px; background: #f7f7f8; border: 1px solid #dedde2; border-radius: 10px; }
.cm-share-value code { min-width: 0; overflow: hidden; color: #36323c; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.cm-share-value.password code { font-size: 18px; font-weight: 700; letter-spacing: .12em; }
.cm-share-validity { padding: 11px 12px; display: flex; flex-wrap: wrap; gap: 8px 16px; color: #645d70; background: #f5f3fb; border-radius: 10px; }
.cm-share-validity span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px !important; }
.cm-share-validity svg { width: 14px; height: 14px; color: #5b4ed5; }

/* --------------------------------------------------------------------------
   Public one-time-password gate
   -------------------------------------------------------------------------- */
body.presenter-access-mode { overflow: auto !important; background: #f4f5f7; }
body.presenter-access-mode #app-root { min-height: 100vh; height: auto; }
.ow-access-page { min-height: 100vh; padding: 28px 16px; display: grid; place-items: center; background: radial-gradient(circle at 15% 10%, rgba(92,74,222,.1), transparent 34%), radial-gradient(circle at 86% 82%, rgba(39,148,96,.08), transparent 36%), #f5f6f8; }
.ow-access-card { width: min(480px, 100%); padding: clamp(25px, 5vw, 42px); color: #25252a; background: rgba(255,255,255,.96); border: 1px solid #e0e1e6; border-radius: 24px; box-shadow: 0 24px 75px rgba(32,35,48,.12); }
.ow-access-brand { margin-bottom: 30px; display: flex; align-items: center; gap: 8px; color: #4f5058; font-size: 12px; font-weight: 700; }
.ow-access-brand i { width: 9px; height: 9px; background: #14a263; border-radius: 50%; box-shadow: 0 0 0 5px rgba(20,162,99,.1); }
.ow-access-icon { width: 54px; height: 54px; margin-bottom: 18px; display: grid; place-items: center; color: #5b4bd9; background: #efedff; border-radius: 16px; }
.ow-access-icon svg { width: 24px; height: 24px; }
.ow-access-kicker { color: #6558db; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ow-access-card h1 { margin: 7px 0 9px; font-size: clamp(25px, 6vw, 34px); line-height: 1.12; overflow-wrap: anywhere; }
.ow-access-copy { margin: 0 0 22px; color: #686a73; line-height: 1.55; }
.ow-access-form { display: grid; gap: 12px; }
.ow-access-form label { display: grid; gap: 6px; }
.ow-access-form label > span { color: #666873; font-size: 11px; font-weight: 700; }
.ow-access-form input { width: 100%; height: 48px; padding: 0 13px; color: #25252a; background: #fff; border: 1px solid #cfd1da; border-radius: 11px; outline: 0; font-size: 16px; }
.ow-access-form input:focus { border-color: #6556df; box-shadow: 0 0 0 4px rgba(101,86,223,.13); }
.ow-access-primary,
.ow-access-secondary { width: 100%; min-height: 46px; margin-top: 10px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; }
.ow-access-primary { color: #fff; background: #29292c; border: 1px solid #29292c; }
.ow-access-primary:hover:not(:disabled) { background: #111; }
.ow-access-secondary { color: #5e5968; background: #fff; border: 1px solid #d8d8df; }
.ow-access-secondary:hover:not(:disabled) { background: #f8f8fa; }
.ow-access-primary:disabled,
.ow-access-secondary:disabled { opacity: .55; cursor: default; }
.ow-access-primary svg,
.ow-access-secondary svg { width: 17px; height: 17px; }
.ow-access-empty { padding: 14px; color: #665f6f; background: #f6f4fa; border: 1px solid #e2deeb; border-radius: 11px; }
.ow-access-empty p { margin: 5px 0 0; font-size: 12px; line-height: 1.45; }
.ow-access-notice { margin: 0 0 14px; padding: 11px 12px; border-radius: 10px; font-size: 12px; line-height: 1.45; }
.ow-access-notice.success { color: #176d48; background: #edf9f2; border: 1px solid #c8e7d5; }
.ow-access-notice.error { color: #a93742; background: #fff1f2; border: 1px solid #efc9cd; }
.ow-access-footnote { margin-top: 20px; padding-top: 17px; color: #8a8b92; border-top: 1px solid #ececf0; font-size: 10px; line-height: 1.45; }
.ow-access-loading { min-height: 92px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #676873; }
.ow-access-loading > span,
.ow-access-spinner { width: 16px; height: 16px; display: inline-block; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: owAccessSpin .75s linear infinite; }
@keyframes owAccessSpin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  body.content-editor-mode .cm-editor-body { grid-template-columns: minmax(240px, 272px) minmax(0,1fr) minmax(326px, 370px); }
  body.content-editor-mode .cm-editor.inspector-collapsed .cm-editor-body { grid-template-columns: minmax(240px, 272px) minmax(0,1fr); }
}

@media (max-width: 1120px) {
  body.content-editor-mode .cm-editor-body { grid-template-columns: minmax(0,1fr) minmax(320px, 360px); }
  body.content-editor-mode .cm-editor.inspector-collapsed .cm-editor-body { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 900px) {
  body.content-editor-mode .cm-editor-body,
  body.content-editor-mode .cm-editor.inspector-collapsed .cm-editor-body { grid-template-columns: minmax(0,1fr); }
  body.content-editor-mode .cm-inspector {
    position: fixed;
    z-index: 86;
    right: 10px;
    top: 74px;
    bottom: 10px;
    width: min(420px, calc(100vw - 20px));
    border: 1px solid var(--cm-border);
    border-radius: 16px;
    box-shadow: var(--cm-shadow-float);
  }
  .cm-inspector-reopen { top: auto; bottom: 92px; min-height: 64px; }
  .cm-prompt-assignment-tray { bottom: 12px; grid-template-columns: 38px minmax(0,1fr) 34px; }
  .cm-assignment-mode { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
  .cm-assignment-mode button { flex: 1; }
}

@media (max-width: 620px) {
  .cm-inspector-header { min-height: 96px; padding: 16px 14px; }
  .cm-inspector-scroll { padding: 14px 14px 28px; }
  .cm-prompt-inspector-card { padding: 12px !important; }
  .cm-prompt-inspector-head { grid-template-columns: 34px minmax(0,1fr); }
  .cm-share-password-field > div { grid-template-columns: 1fr; }
  .cm-share-password-field .cm-button { width: 100%; }
  .cm-share-modal footer { align-items: stretch; }
  .cm-share-modal footer > div { width: 100%; display: grid; grid-template-columns: 1fr; }
  .cm-share-modal footer .cm-button { width: 100%; }
  .cm-prompt-assignment-tray { width: calc(100vw - 18px); }
  .cm-assignment-tray-copy > strong { white-space: normal; max-height: 38px; overflow: hidden; }
  .ow-access-card { border-radius: 18px; }
}