/* Shared metallic interface language for the selected new BoloSite website. */
:root {
  --robotic-ink: #121212;
  --robotic-graphite: #3d3d3d;
  --robotic-steel: #929292;
  --robotic-silver: #d7d7d7;
  --robotic-mist: #f2f2f2;
  --robotic-glint: linear-gradient(135deg, #ffffff 0%, #e7e7e7 38%, #b8b8b8 52%, #f8f8f8 70%, #c8c8c8 100%);
  --robotic-dark-glint: linear-gradient(135deg, #111111 0%, #3a3a3a 45%, #191919 68%, #535353 100%);
}

html[data-theme="dark"] {
  --robotic-ink: #f7f7f7;
  --robotic-graphite: #c5c5c5;
  --robotic-steel: #888888;
  --robotic-silver: #4e4e4e;
  --robotic-mist: #202020;
  --robotic-glint: linear-gradient(135deg, #333333 0%, #1c1c1c 42%, #535353 56%, #202020 76%, #4a4a4a 100%);
}

/* Only interactive elements get the machine-like edge treatment. */
.btn,
.lab-button,
.backend-lab-tabs button,
.backend-history-head button,
.backend-history-card button,
html body .btn,
html body .portal-select-trigger {
  position: relative;
  isolation: isolate;
  border-color: var(--robotic-silver) !important;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.btn::after,
.lab-button::after,
.backend-lab-tabs button::after,
.backend-history-head button::after,
.backend-history-card button::after,
html body .btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 28%, rgba(255,255,255,.6) 48%, transparent 68%);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}

.btn:hover:not(:disabled),
.lab-button:hover,
.backend-lab-tabs button:hover,
.backend-history-head button:hover,
.backend-history-card button:hover,
html body .btn:hover:not(:disabled) {
  border-color: var(--robotic-steel) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.10) !important;
  transform: translateY(-1px);
}

.btn:hover::after,
.lab-button:hover::after,
.backend-lab-tabs button:hover::after,
.backend-history-head button:hover::after,
.backend-history-card button:hover::after,
html body .btn:hover::after { opacity: 1; }

.btn-primary,
.btn.primary,
.lab-button-primary,
html body .btn.primary,
html body .btn.dark {
  color: #ffffff !important;
  background: var(--robotic-dark-glint) !important;
  border-color: #1b1b1b !important;
  box-shadow: inset 0 1px rgba(255,255,255,.16), 0 7px 18px rgba(0,0,0,.12) !important;
}

.btn-primary :is(svg, path),
.btn.primary :is(svg, path),
.lab-button-primary :is(svg, path),
html body .btn.primary :is(svg, path),
html body .btn.dark :is(svg, path) { color: currentColor; stroke: currentColor; }

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .lab-button-primary,
html[data-theme="dark"] body .btn.primary,
html[data-theme="dark"] body .btn.dark {
  color: #f2f2f2 !important;
  background: var(--robotic-dark-glint) !important;
  border-color: #5a5a5a !important;
  box-shadow: inset 0 1px rgba(255,255,255,.12), 0 8px 20px rgba(0,0,0,.32) !important;
}

.portal-cta,
.floating-chat {
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 10px 26px rgba(0,0,0,.14) !important;
}

.content-card,
.feature-card,
.audience-card,
.quote-panel,
.backend-contact-panel,
.backend-lab,
.backend-metrics article,
.backend-history-card,
.lab-check,
html body #dashView .card,
html body #dashView .panel,
html body #dashView details,
html body #authView .auth-card {
  border-color: var(--robotic-silver) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.68), 0 16px 38px rgba(0,0,0,.055) !important;
}

html[data-theme="dark"] .content-card,
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .backend-contact-panel,
html[data-theme="dark"] .backend-lab,
html[data-theme="dark"] #dashView .card,
html[data-theme="dark"] #authView .auth-card {
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 18px 42px rgba(0,0,0,.30) !important;
}

.blue-text,
.lab-kicker,
.eyebrow,
.backend-section-heading > span { color: var(--robotic-graphite) !important; }

.auth-reference-art,
.founder-avatar,
.brand-image {
  box-shadow: inset 0 1px rgba(255,255,255,.5), 0 12px 30px rgba(0,0,0,.10);
}

/* Keep the homepage robot and its controls, without an added frame or shadow. */
.apple-hero .robot-intro,
.apple-hero .robot-video {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.brand-image,
.founder-avatar { background: var(--robotic-glint); }

/* Active work communicates progress without an unnecessary bright accent. */
.backend-notice,
.intent-build-progress,
.content-builder-progress,
.backend-job-status.status-preparing,
.backend-job-status.status-running {
  position: relative;
  overflow: hidden;
  border-color: var(--robotic-steel) !important;
  background: var(--robotic-mist) !important;
}

.backend-notice:not(.error)::before,
.intent-build-progress.show::before,
.content-builder-progress:not([hidden])::before,
.backend-job-status.status-preparing::before,
.backend-job-status.status-running::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 22%, rgba(145,145,145,.14) 46%, rgba(255,255,255,.58) 50%, rgba(145,145,145,.14) 54%, transparent 78%);
  transform: translateX(-110%);
  animation: robotic-scan 1.8s ease-in-out infinite;
  pointer-events: none;
}

.backend-notice > *,
.intent-build-progress > *,
.content-builder-progress > *,
.backend-job-status { position: relative; }

.backend-lab progress,
progress {
  accent-color: var(--robotic-graphite);
  border-radius: 999px;
  overflow: hidden;
}

progress::-webkit-progress-bar { background: var(--robotic-silver); }
progress::-webkit-progress-value { background: var(--robotic-dark-glint); }

.btn.is-loading::before,
.intent-build-spinner {
  border-color: currentColor !important;
  border-right-color: transparent !important;
  box-shadow: 0 0 0 3px rgba(128,128,128,.12);
}

@keyframes robotic-scan {
  to { transform: translateX(110%); }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .lab-button,
  .backend-lab-tabs button,
  .backend-history-head button,
  .backend-history-card button { transition: none !important; }
  .backend-notice:not(.error)::before,
  .intent-build-progress.show::before,
  .content-builder-progress:not([hidden])::before,
  .backend-job-status.status-preparing::before,
  .backend-job-status.status-running::before { animation: none; opacity: .35; transform: none; }
}