/* Request-bound feedback. Motion ends with the request; displayed data is retained. */
.workspace-load-progress { position:fixed; inset:0 0 auto; height:2px; z-index:10050; overflow:hidden; background:transparent; pointer-events:none; }
.workspace-load-progress:after { content:''; display:block; width:28%; height:100%; background:var(--text-secondary); animation:ui-request-progress 1.3s var(--ease-out) infinite; }
.ui-spinner,.ui-load-caption:before,
.dashboard-page :is(.task-detail-loading,[data-customer-detail-loading],.country-sync-state,.mobile-directory-empty[role="status"]):before,
.dashboard-page .map-activity-status [aria-busy="true"]:before {
  display:inline-block; content:''; flex:0 0 16px; width:16px; height:16px; margin:0; border:0; border-radius:0;
  color:var(--text-tertiary); background:currentColor; mask:var(--spinner-mask) center/contain no-repeat;
  -webkit-mask:var(--spinner-mask) center/contain no-repeat; animation:interaction-spin .8s steps(8) infinite;
}
[data-load-state] { position:relative; }
[data-load-state="initial"]>:not([data-load-placeholder]) { display:none!important; }
.ui-load-state { grid-column:1/-1; min-width:0; list-style:none; }
.ui-load-state.is-initial { width:100%; min-height:170px; padding:6px 0 12px; }
.ui-load-caption { display:flex; align-items:center; gap:9px; color:var(--text-secondary); font-size:var(--font-small); line-height:1.7; margin:0 0 18px; }
.ui-load-state.is-refresh { position:absolute; right:8px; top:8px; z-index:3; border:1px solid var(--border-subtle); border-radius:7px; background:#ffffffed; padding:7px 10px; pointer-events:none; }
.ui-load-state.is-refresh .ui-load-caption { margin:0; font-size:var(--font-caption); }
.ui-skeleton-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.ui-skeleton-card { position:relative; overflow:hidden; min-width:0; border:1px solid var(--border-subtle); border-radius:var(--radius-panel); background:#fff; padding:24px; min-height:170px; }
.ui-skeleton-card:after,.customer-list-skeleton>div:after { content:''; position:absolute; inset:0; transform:translateX(-110%); background:linear-gradient(90deg,transparent,#ffffffb3,transparent); animation:ui-shimmer 1.8s ease-in-out infinite; }
.ui-skeleton-icon,.ui-skeleton-line { display:block; background:var(--surface-hover); border-radius:4px; height:12px; width:67%; margin-bottom:14px; }
.ui-skeleton-icon { height:30px; width:30px; border-radius:8px; margin-bottom:24px; }
.ui-skeleton-line.is-short { width:42%; }
.ui-skeleton-line.is-wide { width:90%; height:10px; margin:20px 0 0; }
.ui-skeleton-grid.is-metrics { grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; border:1px solid var(--border-default); border-radius:12px; padding:6px; }
.is-metrics .ui-skeleton-card { min-height:128px; border:0; padding:22px; }
.is-metrics .ui-skeleton-card+.ui-skeleton-card { border-left:1px solid var(--border-subtle); border-radius:0; }
.is-metrics .ui-skeleton-icon { display:none; }
.ui-skeleton-grid.is-rows,.ui-skeleton-grid.is-form,.ui-skeleton-grid.is-conversation { grid-template-columns:1fr; }
.ui-skeleton-grid.is-rows { gap:0; border-top:1px solid var(--border-subtle); }
.is-rows .ui-skeleton-card { display:grid; grid-template-columns:2fr .65fr .9fr; gap:24px; align-items:center; min-height:94px; padding:22px 16px; border:0; border-bottom:1px solid var(--border-subtle); border-radius:0; }
.is-rows .ui-skeleton-icon { display:none; }
.is-rows .ui-skeleton-line { height:12px; width:72%; max-width:300px; margin:0; }
.is-rows .ui-skeleton-line.is-wide { display:block; height:12px; width:88%; }
.is-conversation .ui-skeleton-card { border:0; background:#fff; min-height:126px; max-width:85%; padding:22px 0; }
.is-conversation .ui-skeleton-card:nth-child(2) { width:58%; margin-left:auto; background:var(--surface-subtle); border-radius:16px 16px 4px 16px; padding:22px; }
.is-conversation .ui-skeleton-icon { display:none; }
.is-form .ui-skeleton-card { min-height:96px; }
.is-form .ui-skeleton-icon { display:none; }
.is-form .ui-skeleton-line { height:12px; max-width:250px; }
.is-form .ui-skeleton-line.is-wide { height:36px; max-width:none; margin-top:14px; }
.dashboard-page .agent-thread .ui-load-state { padding:28px 0; max-width:760px; width:100%; margin:0 auto; }
.dashboard-page .agent-contacts .ui-load-state { padding:10px; }
.agent-contacts .ui-skeleton-card { padding:12px 0; min-height:64px; border:0; background:transparent; }
.agent-contacts .ui-load-caption { font-size:var(--font-caption); }
.agent-contacts .ui-skeleton-grid { gap:6px; }
.customer-list-skeleton>div { position:relative; overflow:hidden; border-color:var(--border-subtle); background-color:#fff; }
.dashboard-page :is(.task-detail-loading,[data-customer-detail-loading],.country-sync-state,.mobile-directory-empty[role="status"]) { display:flex; align-items:center; gap:9px; font-size:var(--font-small); color:var(--text-secondary); }
.dashboard-page .country-detail:not([aria-busy="true"]) .country-sync-state:before { display:none; }
.dashboard-page .country-detail[aria-busy="true"] .country-metrics dd { border-radius:5px; background:var(--surface-hover); color:var(--text-tertiary); animation:ui-breathe 1.4s ease-in-out infinite alternate; }
.dashboard-page .map-activity-status [aria-busy="true"] { display:flex; align-items:center; gap:7px; }
.dashboard-page .map-activity-status [aria-busy="true"]:before { width:13px; height:13px; flex-basis:13px; }
.portal-page .portal-toast { display:flex; align-items:center; gap:10px; border:1px solid var(--border-default); border-radius:10px; background:#fff; box-shadow:var(--shadow-floating); color:var(--text-primary); animation:ui-toast-enter .2s var(--ease-out); max-width:min(92vw,560px); text-align:left; }
.portal-page .portal-toast:before { content:''; width:16px; height:16px; flex:0 0 16px; background:var(--text-secondary); mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M12 11v5m0-8h.01' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.ui-route-enter { animation:interaction-arrive var(--duration-normal) var(--ease-out); }
@keyframes ui-request-progress { from { transform:translateX(-110%); } to { transform:translateX(470%); } }
@keyframes ui-shimmer { to { transform:translateX(110%); } }
@keyframes ui-breathe { from { opacity:.6; } to { opacity:1; } }
@keyframes ui-toast-enter { from { opacity:0; transform:translate(-50%,6px); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes ui-menu-enter { from { opacity:0; transform:translateY(-3px) scale(.99); } to { opacity:1; transform:none; } }
@media(max-width:1100px) { .ui-skeleton-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) {
  .ui-skeleton-grid { grid-template-columns:minmax(0,1fr); }
  .ui-skeleton-grid.is-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .is-metrics .ui-skeleton-card:nth-child(3) { border-left:0; }
  .is-metrics .ui-skeleton-card:nth-child(n+3) { border-top:1px solid var(--border-subtle); }
  .ui-skeleton-card { min-height:140px; }
  .is-rows .ui-skeleton-card { grid-template-columns:1.5fr .7fr; gap:18px; }
  .is-rows .ui-skeleton-line.is-wide { display:none; }
  .ui-load-state.is-refresh { right:6px; top:6px; }
  .portal-page .portal-toast { padding:12px 14px; font-size:var(--font-small); }
}
@media(prefers-reduced-motion:reduce) {
  .workspace-load-progress:after { width:100%; animation:none; opacity:.5; }
  .ui-skeleton-card:after,.customer-list-skeleton>div:after { display:none; }
  .ui-spinner,.ui-load-caption:before,.portal-page button[aria-busy="true"]:before,
  .dashboard-page :is(.task-detail-loading,[data-customer-detail-loading],.country-sync-state,.mobile-directory-empty[role="status"]):before,
  .dashboard-page .map-activity-status [aria-busy="true"]:before { animation:none; }
  .portal-page .portal-toast,.dashboard-page .workspace-more[open]>div,.ui-route-enter { animation:none; }
  .portal-page .portal-button:not(:disabled):active { transform:none; }
}
@media(forced-colors:active) {
  .workspace-load-progress:after { background:Highlight; }
  .ui-skeleton-card,.ui-skeleton-line,.ui-skeleton-icon { border:1px solid CanvasText; }
  .ui-spinner,.ui-load-caption:before { background:CanvasText; }
  .ui-load-state.is-refresh { background:Canvas; border-color:CanvasText; }
  .portal-page .portal-toast:before { background:CanvasText; }
}