/* Shared loading language for interface pages: one motion, one neutral palette. */
:root {
  --interface-ink:#41464d;
  --interface-muted:#858b93;
  --interface-line:#e2e5e8;
  --interface-surface:rgba(255,255,255,.96);
  --interface-shadow:0 4px 18px rgba(25,32,41,.055);
  --interface-motion:1.05s;
}
.interface-loading { display:flex; align-items:center; justify-content:center; gap:12px; min-width:0; color:var(--interface-ink); font-size:12px; line-height:1.6; font-family:inherit; }
.interface-loading-copy { display:grid; gap:3px; min-width:0; text-align:left; }
.interface-loading-copy strong { font-size:12px; line-height:1.6; font-weight:500; color:var(--interface-ink); overflow-wrap:anywhere; }
.interface-loading-copy small { font-size:11px; line-height:1.6; color:var(--interface-muted); overflow-wrap:anywhere; }
.interface-loading--panel { width:max-content; max-width:calc(100% - 40px); box-sizing:border-box; padding:16px 20px; border:1px solid var(--interface-line); border-radius:12px; background:var(--interface-surface); box-shadow:var(--interface-shadow); }
.interface-loading--page { min-height:180px; padding:32px 20px; }
.interface-loading--inline { padding:10px 0; --interface-ring-size:14px; }
.interface-startup { display:grid; place-items:center; min-height:100dvh; padding:24px; box-sizing:border-box; background:#f8f9fb; }
.interface-startup-error { width:min(340px,100%); padding:24px; border:1px solid var(--interface-line); border-radius:12px; background:var(--interface-surface); color:var(--interface-ink); text-align:center; }
.interface-startup-error strong { font-size:14px; font-weight:500; }
.interface-startup-error p { font-size:12px; line-height:1.7; color:var(--interface-muted); overflow-wrap:anywhere; }
.interface-startup-error button { border:1px solid var(--interface-line); border-radius:7px; background:#fff; color:var(--interface-ink); padding:8px 14px; font-size:12px; cursor:pointer; }

/* Existing components share these tokens without changing their data lifecycle. */
body :is(.interface-spinner,.avatar-spinner,.photo-spinner),
body .cbct-background-upload:not(.is-complete):not(.is-error) .cbct-upload-indicator,
body .cbct-3d-state.is-loading > span,
body .analysis-task-card:is([data-status=running],[data-status=submitting]) .task-status-icon,
body .cbct-plane.is-loading .cbct-slice-frame > small::before,
body .cbct-mask-status.is-loading::before,
body :is(.interface-inline-loading,.scan-ortho-loading)::before,
body :is(#scan-status,#perio-mesh-status).is-loading::before,
body button[aria-busy=true]::before {
  content:''; display:inline-block; box-sizing:border-box; flex:0 0 var(--interface-ring-size,22px);
  width:var(--interface-ring-size,22px); height:var(--interface-ring-size,22px);
  border:1.5px solid var(--interface-line); border-top-color:var(--interface-ink); border-radius:50%;
  background:transparent; margin:0; animation:interface-spin var(--interface-motion) linear infinite;
}
@keyframes interface-spin { to { transform:rotate(360deg); } }
body .interface-inline-loading,body .scan-ortho-loading { display:flex; justify-content:center; align-items:center; gap:9px; --interface-ring-size:14px; color:var(--interface-muted); font-size:11px; line-height:1.6; }
body button[aria-busy=true] { display:inline-flex; align-items:center; justify-content:center; gap:8px; --interface-ring-size:13px; cursor:progress; }
body button[aria-busy=true] > svg { display:none; }
body button[aria-busy=true][hidden] { display:none!important; }
body :is(.photo-wait,.avatar-task,.analysis-task-card,.cbct-background-upload,.cbct-mask-status,.cbct-slice-frame) { --interface-ring-size:14px; }
body :is(.photo-wait,.avatar-task) { color:var(--interface-muted); font-size:11px; gap:10px; }
body .task-track { display:none; }

/* Full asset loads sit in the centre of their own viewport, never bottom-right. */
body.online-page #viewer-loading,body.online-page #avatar-loading {
  position:absolute; inset:0; width:auto; min-width:0; z-index:7; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(247,248,250,.64); backdrop-filter:blur(2px); color:var(--interface-ink); cursor:wait;
}
body.online-page #viewer-loading .viewer-loading-card { display:grid; grid-template-columns:22px minmax(0,1fr); column-gap:13px; align-items:center; width:min(320px,100%); padding:16px 20px; box-sizing:border-box; border:1px solid var(--interface-line); border-radius:12px; background:var(--interface-surface); box-shadow:var(--interface-shadow); }
.viewer-loading-card > .interface-spinner { grid-row:1 / span 2; }
body #viewer-loading .viewer-loading-top { min-width:0; gap:12px; }
body #viewer-loading strong { font-size:12px; font-weight:500; line-height:1.6; color:var(--interface-ink); white-space:normal; }
body #viewer-loading #loading-detail { grid-column:2; margin:3px 0 0; font-size:11px; line-height:1.6; color:var(--interface-muted); }
body #viewer-loading #viewer-loading-value { flex:none; color:var(--interface-muted); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; }
body #viewer-loading .viewer-loading-track { grid-column:2; height:3px; margin:10px 0 0; background:var(--interface-line); }
body #viewer-loading .viewer-loading-track:not(.has-progress) { display:none; }
body #viewer-loading .viewer-loading-track::after { display:none; animation:none; }
body #viewer-loading .viewer-loading-bar { background:#717981; animation:none; transition:width .2s ease; }
body #avatar-loading > .interface-loading--panel { max-width:100%; }
body #avatar-view-state.is-loading { padding:20px; z-index:6; }
body #avatar-view-state.is-loading .interface-loading--panel { max-width:100%; }

body :is(#scan-status,#perio-mesh-status).is-loading {
  position:absolute; inset:50% auto auto 50%; transform:translate(-50%,-50%); display:flex; align-items:center; justify-content:center; gap:12px;
  width:max-content; max-width:calc(100% - 40px); box-sizing:border-box; padding:16px 20px; margin:0;
  border:1px solid var(--interface-line); border-radius:12px; background:var(--interface-surface); color:var(--interface-ink); box-shadow:var(--interface-shadow); font-size:12px; line-height:1.6; pointer-events:none;
}
body :is(#scan-status,#perio-mesh-status):empty { display:none; }
body .cbct-3d-state.is-loading { padding:16px 20px; border-color:var(--interface-line); border-radius:12px; background:var(--interface-surface); box-shadow:var(--interface-shadow); color:var(--interface-muted); }
body .cbct-3d-state.is-loading:not(.has-models) { display:grid; grid-template-columns:22px minmax(0,1fr); gap:3px 13px; text-align:left; }
body .cbct-3d-state.is-loading:not(.has-models) > span { grid-row:1 / span 2; align-self:center; }
body .cbct-3d-state.is-loading strong { color:var(--interface-ink); font-size:12px; font-weight:500; line-height:1.6; }
body .cbct-3d-state.is-loading small { color:var(--interface-muted); font-size:11px; margin:0; line-height:1.6; }
body .cbct-3d-state.has-models { inset:auto auto 12px 50%; transform:translateX(-50%); --interface-ring-size:14px; padding:9px 12px; }
body .cbct-plane.is-loading .cbct-slice-frame > small { left:50%; top:50%; bottom:auto; transform:translate(-50%,-50%); width:max-content; max-width:calc(100% - 24px); padding:10px 12px; border-color:var(--interface-line); color:var(--interface-ink); background:var(--interface-surface); box-shadow:var(--interface-shadow); }
body .cbct-mask-status { border-color:var(--interface-line); color:var(--interface-muted); background:var(--interface-surface); box-shadow:var(--interface-shadow); }
body .cbct-background-upload.is-processing .cbct-upload-track { display:none; }
body .cbct-upload-track i { background:#717981; animation:none; }
body .perio-visual-empty.interface-inline-loading { padding:16px 20px; border:1px solid var(--interface-line); border-radius:12px; background:var(--interface-surface); box-shadow:var(--interface-shadow); color:var(--interface-ink); }
body .insights-history-empty.interface-inline-loading { min-height:100px; }

/* Small feedback stays in its owning page/dialog; no corner toast. */
body :is(.online-toast,.toast,.account-toast,.docs-feedback) { display:none!important; }
.interface-feedback { min-width:0; flex:none; }
.interface-feedback[hidden] { display:none!important; }
.interface-notice { display:flex; align-items:flex-start; gap:9px; padding:10px 12px; border:1px solid var(--interface-line); border-radius:9px; background:#fafbfc; color:var(--interface-ink); font-size:11px; line-height:1.7; }
.interface-notice > span:nth-child(2) { flex:1; min-width:0; overflow-wrap:anywhere; white-space:pre-line; }
.interface-notice-icon { display:grid; place-items:center; flex:none; width:16px; height:16px; margin-top:1px; border:1px solid #bdc3ca; border-radius:50%; color:#606873; font-size:10px; }
.interface-notice button { flex:none; display:grid; place-items:center; width:22px; height:22px; padding:0; margin:-1px -4px -1px 0; border:0; border-radius:5px; background:transparent; color:#818891; font-size:17px; line-height:1; cursor:pointer; }
.interface-notice button:hover { background:#eceef1; color:#353b43; }
.interface-notice button:focus-visible { outline:2px solid #737b86; outline-offset:2px; }
.online-page #interface-feedback { margin:12px var(--analysis-gutter,16px) 0; }
.main-area > #interface-feedback { margin:22px 24px 0; }
.docs-content > #interface-feedback { margin-bottom:20px; }
dialog > .interface-feedback,.modal-card > .interface-feedback,.account-modal-card > .interface-feedback { margin:12px 18px 18px; }
body :is(#viewer-loading,#avatar-loading,.interface-loading,.interface-startup,#avatar-view-state)[hidden] { display:none!important; }
@media(max-width:600px) {
  body #viewer-loading .viewer-loading-card { padding:14px 16px; }
  .interface-loading--panel { padding:14px 16px; }
  body .cbct-3d-state.has-models { max-width:calc(100% - 20px); flex-wrap:wrap; justify-content:center; }
}
@media(prefers-reduced-motion:reduce) {
  body :is(.interface-spinner,.avatar-spinner,.photo-spinner,.cbct-upload-indicator,.task-status-icon),
  body .cbct-3d-state.is-loading > span,
  body .cbct-plane.is-loading .cbct-slice-frame > small::before,
  body .cbct-mask-status.is-loading::before,
  body :is(.interface-inline-loading,.scan-ortho-loading,#scan-status,#perio-mesh-status)::before,
  body button[aria-busy=true]::before { animation:none!important; }
  body #viewer-loading .viewer-loading-bar,body .cbct-upload-track i { transition:none; }
}