/* Loading uses the final navigation and field dimensions, without a page overlay. */
html[data-support-page] { overflow-y: scroll; }
html[data-support-shell] :is(.support-public-header, .ph-header) { display: none !important; }
html[data-support-shell] body .support-main { margin-top: 72px; padding-top: 32px; }
html[data-support-shell] body.mint-public-help #helpCenter { margin-top: 72px; }
#supportShellPlaceholder { display: none; }
html[data-support-shell][data-support-pending] #supportShellPlaceholder {
  position: fixed; inset: 0 0 auto; height: 72px; z-index: 999;
  display: flex; align-items: center; justify-content: space-between; padding: 0 32px 0 24px;
  background: #fff; box-sizing: border-box; pointer-events: none;
}
#supportShellPlaceholder > img { width: auto; height: 30px; }
.support-account-placeholder { display: flex; align-items: center; gap: 12px; width: 148px; }
.support-avatar-placeholder { width: 32px; height: 32px; border-radius: 6px; background: #edf1f0; }
.support-name-placeholder { display: grid; gap: 7px; }
.support-name-placeholder i { width: 80px; height: 11px; border-radius: 3px; background: #edf1f0; }
.support-name-placeholder i + i { width: 42px; height: 9px; }
.support-fallback-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #fff; }
.support-fallback-header .topbar-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 24px; }
.support-fallback-header #navbarLinks { display: none; }
.support-fallback-header a { color: #00645f; text-decoration: none; }
.support-fallback-header .logo { display: inline-flex; align-items: center; }
html[data-support-pending] [data-identity-field] { animation: supportLoading 1.4s ease-in-out infinite alternate; }
html[data-support-pending] #submitBtn { color: transparent !important; background: #e7eeec !important; opacity: 1; }
.support-rail-placeholder-top { display: flex; align-items: center; justify-content: center; height: 92px; flex: none; }
.support-rail-placeholder-top i { width: 18px; height: 18px; border-radius: 3px; background: #87c6c3; }
.support-rail-placeholder-links { display: grid; gap: 16px; width: 100%; }
.support-rail-placeholder-links span { display: flex; align-items: center; justify-content: center; height: 44px; gap: 12px; }
.support-rail-placeholder-links i { width: 18px; height: 18px; border-radius: 4px; background: #87c6c3; }
.support-rail-placeholder-links b { display: none; height: 10px; width: 92px; border-radius: 3px; background: #87c6c3; }
.cs-rail-open .support-rail-placeholder-top { justify-content: flex-end; padding-right: 14px; }
.cs-rail-open .support-rail-placeholder-links { gap: 4px; }
.cs-rail-open .support-rail-placeholder-links span { justify-content: flex-start; padding-left: 12px; }
.cs-rail-open .support-rail-placeholder-links b { display: block; }
@keyframes supportLoading { to { opacity: .5; } }
@media(max-width:768px) {
  html[data-support-shell][data-support-pending] #supportShellPlaceholder { padding: 0 20px; }
  .support-account-placeholder { width: 32px; }
  .support-name-placeholder { display: none; }
  html[data-support-shell] body .support-main { padding-top: 24px; }
}
@media(prefers-reduced-motion:reduce) { html[data-support-pending] [data-identity-field] { animation: none; } }

/* Same scrollbar as Mint workspaces, including overflow in the message field. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb {
  background-color: rgba(18, 88, 83, .20);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background-color: rgba(18, 88, 83, .36); }
::-webkit-scrollbar-thumb:active { background-color: rgba(31, 143, 136, .55); }

/* Firefox has no pseudo-elements for this, only the two properties. thin is
   its own idea of narrow, which lands close to the 11px above. */
html[data-support-page] { scrollbar-width: thin; scrollbar-color: rgba(18, 88, 83, .24) transparent; }


html[data-support-page] { scrollbar-gutter:stable; }
html[data-support-page] textarea { scrollbar-width:thin; scrollbar-color:rgba(18,88,83,.24) transparent; }