/* WOTTT 04.55.2 r16 — Shared dialogs, secondary workspaces & overlays.
   CSS only. Existing action/permission/moderation/send controls remain authoritative.
   No position/display changes to provider consent, confirmation or safeguard controls. */
:root{
  --r16-blue:#587fe1;--r16-violet:#9270ce;--r16-teal:#299d91;
  --r16-amber:#c98b37;--r16-rose:#be5b75;
  --r16-soft-line:color-mix(in srgb,var(--ui-line,#dce4ec) 86%,var(--r16-blue));
}
/* 1. Shared centered action dialogs (contact editing/merge, task forms,
      permissions, templates, channels and user-profile confirmation). */
.action-layer .action-backdrop{background:rgba(17,32,57,.47);backdrop-filter:blur(2px)}
.action-layer .action-dialog{
  border-radius:17px;border:1px solid var(--r16-soft-line);
  background:var(--ui-surface,#fff);color:var(--ui-ink,#203247);
  box-shadow:0 26px 80px rgba(22,37,68,.23),0 3px 12px rgba(22,37,68,.07);
}
.action-layer .action-dialog-head{
  position:relative;padding:19px 22px 18px;
  border-bottom:1px solid var(--ui-line,#e2e9f2);
  background:linear-gradient(100deg,color-mix(in srgb,var(--r16-blue) 7%,var(--ui-surface,#fff)),var(--ui-surface,#fff) 75%);
}
.action-layer .action-dialog-head::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--r16-blue),var(--r16-violet),var(--r16-teal))}
.action-layer .action-dialog-head h2{font-weight:780;letter-spacing:-.3px;line-height:1.35}
.action-layer .action-dialog-body{padding:22px 24px 26px;scrollbar-gutter:stable;overscroll-behavior:contain}
.action-layer .action-dialog-body>form,.action-layer .action-dialog-body>.wf-form{min-width:0}
.action-layer .action-dialog-body label{line-height:1.45}
.action-layer .action-dialog-body input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.action-layer .action-dialog-body select,.action-layer .action-dialog-body textarea{
  max-width:100%;border-radius:9px;border-color:var(--ui-line,#dbe4ec);
  background:var(--ui-surface,#fff);color:var(--ui-ink,#243445);
}
.action-layer .action-dialog-body textarea{line-height:1.55;resize:vertical}
.action-layer .action-dialog-body :is(input,select,textarea,button):focus-visible,
.action-layer .action-dialog-head button:focus-visible{outline:2px solid var(--r16-blue);outline-offset:2px}
.action-layer .action-dialog :is(.action-dialog-error,.wf-alert.error,.re-protected){border-left:4px solid var(--r16-rose);border-radius:10px}
.action-layer .action-dialog :is(.re-notice,.sw-form-note){border-radius:10px;line-height:1.6}
.action-layer .action-dialog :is(.wf-primary,.sw-primary):not(:disabled){border-radius:9px}
/* Existing red/danger button styling and confirmations are NOT overridden. */
/* 2. Side drawers and sub-workspace detail content. */
.global-panel:not(.social-detail-drawer){border-left:1px solid var(--r16-soft-line);box-shadow:-20px 0 70px rgba(22,37,68,.17);background:var(--ui-surface,#fff);color:var(--ui-ink,#1d2d3d)}
.global-panel:not(.social-detail-drawer)>header{
  background:linear-gradient(105deg,color-mix(in srgb,var(--r16-blue) 7%,var(--ui-surface,#fff)),var(--ui-surface,#fff) 77%);
  border-bottom:1px solid var(--r16-soft-line);gap:12px;
}
.global-panel:not(.social-detail-drawer)>header :is(h1,h2,h3){font-weight:770;letter-spacing:-.3px}
.global-panel-body{scrollbar-gutter:stable;overscroll-behavior:contain}
.global-panel-body :is(.wf-record,.wf-progress,.wf-callout,.wf-metrics>div){border-radius:11px}
.global-panel-body .wf-progress{background:color-mix(in srgb,var(--r16-blue) 7%,var(--ui-surface,#fff));border-color:var(--r16-soft-line)}
.global-panel-body .wf-step{border-bottom-color:var(--r16-soft-line)}
.global-panel-body .wf-step.complete .wf-marker{background:color-mix(in srgb,var(--r16-teal) 12%,var(--ui-surface,#fff));color:var(--r16-teal);border-color:color-mix(in srgb,var(--r16-teal) 32%,var(--ui-line,#ddd))}
.global-panel-body .wf-form{background:color-mix(in srgb,var(--r16-blue) 3%,var(--ui-surface,#fff));border-radius:12px}
.global-panel-body .wf-record{background:var(--ui-surface,#fff);border:1px solid var(--r16-soft-line)}
.global-panel-body .wf-record:nth-of-type(3n+2){border-left:3px solid var(--r16-violet)}
.global-panel-body .wf-record:nth-of-type(3n+3){border-left:3px solid var(--r16-teal)}
/* Lead/opportunity editing and contact data */
.re-record .re-hero{border-bottom-color:var(--r16-soft-line);padding-bottom:14px}
.re-record .re-hero h3{font-weight:780;font-size:19px;letter-spacing:-.4px}
.re-record .re-facts{gap:10px}
.re-record .re-facts>div{background:linear-gradient(125deg,color-mix(in srgb,var(--r16-blue) 6%,var(--ui-surface,#fff)),var(--ui-surface,#fff));border-color:var(--r16-soft-line);border-radius:11px;padding:13px}
.re-record .re-facts>div:nth-child(3n+2){background:linear-gradient(125deg,color-mix(in srgb,var(--r16-violet) 6%,var(--ui-surface,#fff)),var(--ui-surface,#fff))}
.re-record .re-facts>div:nth-child(3n+3){background:linear-gradient(125deg,color-mix(in srgb,var(--r16-teal) 6%,var(--ui-surface,#fff)),var(--ui-surface,#fff))}
.re-record :is(.re-section,.re-lineage,.re-protected){border-radius:12px;border-color:var(--r16-soft-line);background:var(--ui-surface,#fff)}
.re-record .re-protected{background:color-mix(in srgb,var(--r16-amber) 8%,var(--ui-surface,#fff));border-left:4px solid var(--r16-amber)}
.re-record .re-section p,.re-record .re-lineage p{color:var(--ui-muted,#62738a)}
.re-record .re-tags label,.re-record .re-tag{background:var(--ui-surface,#fff);color:var(--ui-ink,#223342);border-color:var(--r16-soft-line)}
.re-record .re-form :is(input,select,textarea):focus-visible{outline:2px solid var(--r16-blue);outline-offset:2px}
.cw-edit-form,.tw-action-form{min-width:0}
/* Task details, preserving priority/status/read-write boundaries. */
.tw-detail .tw-detail-summary{border-radius:12px;border-color:var(--r16-soft-line);background:linear-gradient(115deg,color-mix(in srgb,var(--r16-violet) 5%,var(--ui-surface,#fff)),var(--ui-surface,#fff))}
.tw-detail .tw-detail-summary>div{padding:12px 3px}
.tw-detail>h2{font-weight:780;letter-spacing:-.35px}
.tw-detail .tw-detail-meta{gap:12px;flex-wrap:wrap}
/* Preserve high-contrast labels and safeguards in dark mode. */
.re-record .re-form>label,.re-record .re-grid>label{color:var(--ui-ink,#25394a)}
.re-record .re-form label small,.re-record .re-grid label small,.re-record .re-protected p{color:var(--ui-muted,#687b8d)}
.re-record .re-notice{color:var(--ui-ink,#233544);background:color-mix(in srgb,var(--r16-teal) 7%,var(--ui-surface,#fff));border-color:color-mix(in srgb,var(--r16-teal) 25%,var(--ui-line,#dce4ec))}
/* 3. Workflow automation editor/confirm surfaces; do not enable rules. */
.wwa-editor,.wwa-confirm{border:1px solid var(--r16-soft-line);border-top:3px solid var(--r16-violet);border-radius:14px;background:var(--ui-surface,var(--surface,#fff));box-shadow:0 8px 22px rgba(32,49,81,.045)}
.wwa-confirm{border-top-color:var(--r16-amber)}
.wwa-editor h2,.wwa-confirm h2{letter-spacing:-.25px;font-weight:780}
.wwa-field input,.wwa-field select,.wwa-field textarea{border-radius:9px;min-width:0}
.wwa-form-error,.wwa-warning-callout{border-radius:10px;border-left-width:4px}
.wwa-field :is(input,select,textarea):focus-visible,.wwa-form-actions button:focus-visible{outline:2px solid var(--r16-blue);outline-offset:2px}
/* 4. Documents and attachments. No alteration of upload/permission behavior. */
.doc-workspace .doc-header{padding:12px 13px 16px;border-bottom:1px solid var(--r16-soft-line)}
.doc-workspace .doc-header h3{font-weight:780;letter-spacing:-.25px}
.doc-workspace .doc-row{border-color:var(--r16-soft-line);border-radius:13px;background:var(--ui-surface,#fff);box-shadow:0 4px 14px rgba(32,50,81,.04)}
.doc-workspace .doc-row:nth-child(3n+1){border-left:4px solid var(--r16-blue)}
.doc-workspace .doc-row:nth-child(3n+2){border-left:4px solid var(--r16-teal)}
.doc-workspace .doc-row:nth-child(3n){border-left:4px solid var(--r16-violet)}
.doc-workspace .doc-form{background:color-mix(in srgb,var(--r16-blue) 3%,var(--ui-surface,#fff));border:1px solid var(--r16-soft-line);border-radius:14px;padding:18px}
.doc-workspace .doc-form input[type=file]{width:100%;min-width:0}
.doc-workspace .doc-form :is(input,select,button):focus-visible{outline:2px solid var(--r16-blue);outline-offset:2px}
.doc-workspace .doc-error,.doc-workspace .doc-uncertain{border-left:4px solid var(--r16-rose);background:color-mix(in srgb,var(--r16-rose) 5%,var(--ui-surface,#fff))}
.crm-attach-list .crm-attach-item{border-radius:10px;border-color:var(--r16-soft-line);padding:11px 12px}
/* 5. Social candidate details: retain moderation visibility and provider warning colors. */
.social-detail-drawer .social-detail-section{border-radius:13px;border-color:var(--r16-soft-line)}
.social-detail-drawer .social-detail-section-head h3{letter-spacing:-.1px}
.social-detail-drawer .social-detail-datum{border-radius:10px;border-color:var(--r16-soft-line)}
.social-detail-drawer .social-detail-body{overscroll-behavior:contain}
/* 6. Account menu, floating popovers and notifications. */
.account-popover,.composer-popover{border:1px solid var(--r16-soft-line);border-radius:14px;background:var(--ui-surface,#fff);color:var(--ui-ink,#1d2d3d);box-shadow:0 18px 54px rgba(29,47,83,.16)}
.account-popover .account-popover-head{background:color-mix(in srgb,var(--r16-blue) 5%,var(--ui-surface,#fff));border-radius:10px}
.account-popover .account-popover-head strong{color:var(--ui-ink,#243448)}
.account-popover .account-popover-head span,.account-popover .account-popover-head small{color:var(--ui-muted,#748297)}
.account-popover>button{color:var(--ui-ink,#243448);border-radius:9px}
.account-popover>button:hover,.account-popover>button:focus-visible{background:color-mix(in srgb,var(--r16-blue) 8%,var(--ui-surface,#fff))}
.composer-popover .shared-reply-option{border-radius:9px}
.notice-stack .floating-toast{border:1px solid var(--r16-soft-line);border-left:3px solid var(--r16-blue);border-radius:11px;box-shadow:0 12px 28px rgba(25,45,75,.13)}
.notice-stack .floating-toast :is(button,a):focus-visible,.account-popover button:focus-visible,.composer-popover button:focus-visible{outline:2px solid var(--r16-blue);outline-offset:2px}
/* 7. Common keyboard focus, touch scrolling, and document-level dialogs. */
:where(.action-layer,.global-panel,.social-detail-drawer,.doc-workspace,.wwa-editor,.wwa-confirm) :is(button,input,select,textarea,a,summary):focus-visible{outline:2px solid var(--ui-focus,#4f85e6);outline-offset:2px}
:where(.action-dialog-body,.global-panel-body,.social-detail-body,.doc-workspace){overflow-wrap:anywhere}
@media(max-width:720px){
 .action-layer{padding:10px}
 .action-layer .action-dialog{width:100%;max-width:min(100%,560px);max-height:calc(100dvh - 20px);border-radius:14px}
 .action-layer .action-dialog-head{padding:15px 15px 13px}
 .action-layer .action-dialog-body{padding:16px 14px 18px;scrollbar-gutter:auto}
 .re-record .re-grid,.re-record .re-facts{grid-template-columns:minmax(0,1fr)}
 .wwa-form{grid-template-columns:1fr}
 .doc-workspace{padding:11px}
 .doc-workspace .doc-header{flex-wrap:wrap}
 .doc-workspace .doc-row{align-items:flex-start}
 .global-panel-body{scrollbar-gutter:auto}
 .notice-stack .floating-toast{max-width:calc(100vw - 28px)}
}
@media(prefers-reduced-motion:reduce){.action-layer *, .global-panel *, .account-popover *, .composer-popover *{scroll-behavior:auto!important;transition-duration:0s!important}}