/* ===================================================================
   PhononIQ — Commercial Polish Overlay
   -------------------------------------------------------------------
   Loaded after acoustopredict.css and chat-modern.css. Adds the small
   set of visual touches that distinguish commercial engineering
   software from a research demo: layered depth, hover lift, refined
   focus rings, micro-press feedback, smooth transitions, premium
   loading states, and tighter typographic rhythm.

   Strategy: pure additive CSS, no layout-breaking changes. Where an
   existing rule's intent matches but the visual is too flat, we
   override the shadow and transition. Where an interaction is
   missing entirely (focus state, active-press), we add it.
   =================================================================== */

/* ── Design tokens (single source of truth) ──────────────────────── */
:root {
  /* Layered shadows — Material Design 3 / Apple HIG style, four levels */
  --shadow-sm:
      0 1px 2px rgba(15, 23, 42, 0.04),
      0 1px 3px rgba(15, 23, 42, 0.06);
  --shadow-md:
      0 2px 4px rgba(15, 23, 42, 0.04),
      0 6px 12px rgba(15, 23, 42, 0.08);
  --shadow-lg:
      0 4px 8px rgba(15, 23, 42, 0.05),
      0 12px 24px rgba(15, 23, 42, 0.10);
  --shadow-xl:
      0 8px 16px rgba(15, 23, 42, 0.06),
      0 24px 48px rgba(15, 23, 42, 0.14);
  /* Coloured halo for focus rings (3px ring at 30% opacity of brand) */
  --focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.30);
  --focus-ring-purple: 0 0 0 3px rgba(124, 58, 237, 0.30);
  /* Eased motion curves */
  --ease-out:  cubic-bezier(0.16, 1, 0.30, 1);
  --ease-in:   cubic-bezier(0.50, 0, 0.75, 0);
  --ease-snap: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Buttons: lift on hover, press on click, ring on focus ───────── */
.btn,
.demo-toggle,
.inverse-apply-btn,
.inverse-verify-btn,
.inverse-buildplate-btn,
.std-thick-btn,
.chat-send-btn,
.chat-mic-btn,
.chat-upload-btn,
.smart-chat-btn,
.chat-action-btn,
.preview-action-btn {
  transition:
    transform     0.18s var(--ease-out),
    box-shadow    0.18s var(--ease-out),
    background    0.18s var(--ease-out),
    border-color  0.18s var(--ease-out),
    color         0.18s var(--ease-out) !important;
  will-change: transform, box-shadow;
}
.btn:hover:not(:disabled),
.demo-toggle:hover:not(:disabled),
.inverse-apply-btn:hover:not(:disabled),
.inverse-verify-btn:hover:not(:disabled),
.inverse-buildplate-btn:hover:not(:disabled),
.std-thick-btn:hover:not(:disabled),
.chat-send-btn:hover:not(:disabled),
.smart-chat-btn:hover:not(:disabled),
.chat-action-btn:hover:not(:disabled),
.preview-action-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active:not(:disabled),
.demo-toggle:active:not(:disabled),
.inverse-apply-btn:active:not(:disabled),
.inverse-verify-btn:active:not(:disabled),
.inverse-buildplate-btn:active:not(:disabled),
.std-thick-btn:active:not(:disabled),
.chat-send-btn:active:not(:disabled),
.smart-chat-btn:active:not(:disabled),
.chat-action-btn:active:not(:disabled),
.preview-action-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
  transition-duration: 0.06s;
}
.btn:focus-visible,
.demo-toggle:focus-visible,
.inverse-apply-btn:focus-visible,
.inverse-verify-btn:focus-visible,
.inverse-buildplate-btn:focus-visible,
.std-thick-btn:focus-visible,
.chat-send-btn:focus-visible,
.smart-chat-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring) !important;
}

/* ── Panels: refined depth + smooth hover ────────────────────────── */
.ap-panel {
  transition:
    transform   0.22s var(--ease-out),
    box-shadow  0.22s var(--ease-out) !important;
}
.ap-panel:hover {
  box-shadow: var(--shadow-lg) !important;
}

/* ── Inverse-result cards: clear depth + subtle lift on hover ────── */
.inverse-result-card {
  transition:
    transform   0.22s var(--ease-out),
    box-shadow  0.22s var(--ease-out),
    border-color 0.22s var(--ease-out) !important;
  box-shadow: var(--shadow-sm) !important;
}
.inverse-result-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md) !important;
}

/* Highlight the #1 ranked card so the eye lands on it first */
.inverse-result-card:first-of-type {
  border-left: 3px solid #0d9488 !important;
  box-shadow: var(--shadow-md) !important;
}

/* ── Chat design cards: refined depth + clear hierarchy ──────────── */
#chatDesigner.chat-light .chat-design-card {
  box-shadow: var(--shadow-md) !important;
  border-radius: 14px !important;
}
#chatDesigner.chat-light .preview-grid {
  background: linear-gradient(180deg, rgba(241,245,249,0.5) 0%, rgba(255,255,255,1) 100%) !important;
  border-radius: 10px !important;
}
#chatDesigner.chat-light .preview-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── Chat bubbles: layered shadow + tighter radius ───────────────── */
#chatDesigner.chat-light .chat-bubble {
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.18s var(--ease-out);
}
#chatDesigner.chat-light .chat-msg:hover .chat-bubble {
  box-shadow: var(--shadow-md);
}

/* ── Form inputs: consistent focus, premium feel ─────────────────── */
input[type="text"],
input[type="number"],
select,
textarea {
  transition:
    border-color 0.18s var(--ease-out),
    box-shadow   0.18s var(--ease-out) !important;
}
input[type="text"]:focus-visible,
input[type="number"]:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none !important;
  border-color: #0d9488 !important;
  box-shadow: var(--focus-ring) !important;
}

/* ── Range sliders: premium track + thumb ────────────────────────── */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(90deg, #0d9488 0%, #0d9488 var(--val, 50%), #e2e8f0 var(--val, 50%), #e2e8f0 100%);
  border-radius: 3px;
  outline: none;
  transition: background 0.10s var(--ease-out);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #0d9488;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: var(--shadow-md);
}
input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.05);
}
input[type="range"]:focus-visible::-webkit-slider-thumb {
  box-shadow: var(--focus-ring), var(--shadow-sm);
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #0d9488;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s var(--ease-out);
}

/* ── Loading shimmer for cMDN / CNN runs ─────────────────────────── */
@keyframes commercial-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.cmdn-loading,
.cnn-loading,
[id^="verifyBandPlot"]:empty::before,
.smart-chat-progress-bar {
  background:
    linear-gradient(90deg,
      rgba(13,148,136,0.06) 0%,
      rgba(13,148,136,0.18) 50%,
      rgba(13,148,136,0.06) 100%);
  background-size: 200% 100%;
  animation: commercial-shimmer 1.6s var(--ease-in) infinite;
}

/* Progress bar fill: smooth not jumpy */
#smartChatBarFill {
  transition: width 0.30s var(--ease-out) !important;
  background: linear-gradient(90deg, #0d9488 0%, #14b8a6 100%) !important;
}

/* ── Tab toggles (Forward/Inverse, method buttons): pill-style ──── */
.demo-toggle {
  font-feature-settings: "ss01" 1;
  letter-spacing: -0.01em;
}
.demo-toggle.active,
.demo-toggle[data-active="true"],
#inverseMethod .demo-toggle.active {
  background: linear-gradient(180deg, #0d9488 0%, #0f766e 100%) !important;
  color: #ffffff !important;
  border-color: #0f766e !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    var(--shadow-sm);
}

/* ── Tooltips / hover badges: clean dark pill ────────────────────── */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #0f172a;
  color: #f1f5f9;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s var(--ease-out), transform 0.15s var(--ease-out);
  box-shadow: var(--shadow-md);
  z-index: 9999;
}
[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Plotly plot frames: subtle border + inner padding ───────────── */
.plotly-plot-container,
[id$="Plot"]:not([id="verifyBandPlot"]),
#verifyBandPlot,
#verifyVgPlot {
  border-radius: 10px;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

/* ── Section headers: tighter typographic rhythm ─────────────────── */
.ap-panel-header {
  letter-spacing: -0.01em;
  font-feature-settings: "ss01" 1, "cv01" 1;
}

/* ── Result-card param values: tabular numerics for alignment ────── */
.param-value,
.preview-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "ss01" 1;
}

/* ── Smart chat enable button: refined active state ──────────────── */
#chatDesigner.chat-light .smart-chat-btn.smart-chat-active {
  background: linear-gradient(180deg, #0d9488 0%, #0f766e 100%) !important;
  color: #ffffff !important;
  border-color: #0f766e !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 1px 3px rgba(15,23,42,0.10) !important;
}

/* ── Selection: brand-coloured (instead of default browser blue) ── */
::selection {
  background: rgba(13, 148, 136, 0.20);
  color: #0f172a;
}

/* ── Scrollbar: thin, branded (WebKit; Firefox uses default) ─────── */
.chat-feed::-webkit-scrollbar,
.ap-panel-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.chat-feed::-webkit-scrollbar-track,
.ap-panel-body::-webkit-scrollbar-track {
  background: transparent;
}
.chat-feed::-webkit-scrollbar-thumb,
.ap-panel-body::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.20);
  border-radius: 4px;
  transition: background 0.18s var(--ease-out);
}
.chat-feed::-webkit-scrollbar-thumb:hover,
.ap-panel-body::-webkit-scrollbar-thumb:hover {
  background: rgba(15, 23, 42, 0.35);
}

/* ── Keyboard-focus discipline: no outline on mouse, ring on tab ── */
:focus:not(:focus-visible) {
  outline: none;
}

/* ── Reduce motion when the user has asked for it ────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:   0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration:  0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print: clean, no shadows, no animations ─────────────────────── */
@media print {
  .ap-panel,
  .inverse-result-card,
  .chat-design-card {
    box-shadow: none !important;
    border: 1px solid #cbd5e1;
  }
}

/* =====================================================================
   SECOND PASS — dashboard, sidebar, empty states, status badges
   ===================================================================== */

/* ── Dashboard hero: premium gradient + KPI tiles ────────────────── */
.home-hero {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: linear-gradient(135deg, #0f766e 0%, #134e4a 50%, #1e1b4b 100%);
  position: relative;
}
.home-hero::after {
  /* Soft radial glow in the upper-right corner — gives the hero
     visual weight without competing with the title. */
  content: "";
  position: absolute;
  top: -40%;
  right: -10%;
  width: 60%;
  height: 140%;
  background: radial-gradient(circle, rgba(94,234,212,0.25) 0%, transparent 60%);
  pointer-events: none;
}
.home-hero-title {
  letter-spacing: -0.025em;
  font-feature-settings: "ss01" 1, "cv01" 1;
}
.home-hero-stat {
  transition: transform 0.18s var(--ease-out);
}
.home-hero-stat:hover {
  transform: translateY(-2px);
}
.home-hero-stat-val {
  font-variant-numeric: tabular-nums;
}

/* ── Sidebar: tighter type, refined hover ────────────────────────── */
.sidebar-history-chips .history-chip,
.sidebar-nav-item,
.sidebar a {
  transition:
    background 0.18s var(--ease-out),
    transform  0.18s var(--ease-out),
    color      0.18s var(--ease-out);
}
.sidebar-history-chips .history-chip:hover {
  transform: translateX(2px);
  background: rgba(13, 148, 136, 0.08);
}
.sidebar-history-header {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
  font-weight: 600;
}

/* ── Empty states: typographic placeholder, not blank ────────────── */
#inverseResults:empty::before {
  content: "Top-ranked designs will appear here once you run an inverse search.";
  display: block;
  padding: 28px 20px;
  text-align: center;
  color: rgba(15, 23, 42, 0.45);
  font-size: 13px;
  font-style: italic;
  border: 1px dashed rgba(15, 23, 42, 0.10);
  border-radius: 10px;
  background:
    repeating-linear-gradient(135deg,
      rgba(15,23,42,0.015) 0 12px,
      transparent          12px 24px);
}

/* ── Status badges: in-distribution / OOD / running ──────────────── */
.status-badge,
[data-status] {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-feature-settings: "ss01" 1;
  white-space: nowrap;
}
.status-badge.success,
[data-status="in-dist"]    { background: rgba(34,197,94,0.12); color: #166534; }
.status-badge.warning,
[data-status="ood"]        { background: rgba(245,158,11,0.14); color: #92400e; }
.status-badge.error,
[data-status="failed"]     { background: rgba(239,68,68,0.12); color: #991b1b; }
.status-badge.info,
[data-status="running"]    { background: rgba(13,148,136,0.12); color: #115e59; }
.status-badge.neutral,
[data-status="cached"]     { background: rgba(15,23,42,0.06); color: #475569; }

/* Dot prefix on running badges for activity feel */
[data-status="running"]::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #0d9488;
  animation: status-pulse 1.4s var(--ease-in) infinite;
}
@keyframes status-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ── Result-card grid: single-column on small, masonry-feel on wide */
@media (min-width: 1100px) {
  #inverseResults {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
  }
  #inverseResults > * { margin: 0 !important; }
}

/* ── Param value typography: numeric emphasis ────────────────────── */
.preview-value,
.param-value {
  letter-spacing: -0.01em;
  font-feature-settings: "tnum" 1, "ss01" 1, "cv01" 1;
}
.preview-unit,
.param-unit {
  font-size: 0.62em;
  font-weight: 500;
  color: rgba(15, 23, 42, 0.55);
  margin-left: 2px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

/* ── Skeleton placeholder for in-flight cards ────────────────────── */
.skeleton-card {
  border-radius: 12px;
  height: 140px;
  background:
    linear-gradient(90deg,
      rgba(15,23,42,0.04) 0%,
      rgba(15,23,42,0.10) 50%,
      rgba(15,23,42,0.04) 100%);
  background-size: 200% 100%;
  animation: commercial-shimmer 1.6s var(--ease-in) infinite;
}

/* ── Top-bar / page-header refinement ────────────────────────────── */
.ap-page-header,
.workspace-header {
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(248,250,252,1) 100%);
  backdrop-filter: blur(6px);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* ── Cards inside the dashboard: hover lift + clean depth ────────── */
.home-hero ~ * .ap-panel,
#page-dashboard .ap-panel {
  border: 1px solid rgba(15, 23, 42, 0.06);
  box-shadow: var(--shadow-sm);
}

/* ── Chat input row: refined focus on the textarea ───────────────── */
#chatDesigner.chat-light .chat-input-row textarea,
#chatDesigner.chat-light .chat-input-row input[type="text"] {
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background: #ffffff;
  transition: border-color 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
#chatDesigner.chat-light .chat-input-row textarea:focus-visible,
#chatDesigner.chat-light .chat-input-row input[type="text"]:focus-visible {
  outline: none;
  border-color: #0d9488;
  box-shadow: var(--focus-ring);
}

/* ── Code blocks inside chat / panels: monospace + tabular feel ──── */
code, kbd {
  font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.92em;
  font-feature-settings: "tnum" 1;
  background: rgba(15, 23, 42, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
  color: #115e59;
}

/* ── Modal / drawer container, if any ────────────────────────────── */
.modal,
.drawer,
.popover {
  border-radius: 14px;
  box-shadow: var(--shadow-xl);
}

/* ── Smooth page-tab transitions ─────────────────────────────────── */
.ap-page {
  animation: page-fade-in 0.30s var(--ease-out);
}
@keyframes page-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Anchor styling: branded, no underline by default ────────────── */
a:not(.btn):not(.demo-toggle):not([class*="-btn"]) {
  color: #0d9488;
  text-decoration: none;
  border-bottom: 1px solid rgba(13, 148, 136, 0.30);
  transition: border-color 0.15s var(--ease-out), color 0.15s var(--ease-out);
}
a:not(.btn):not(.demo-toggle):not([class*="-btn"]):hover {
  color: #115e59;
  border-bottom-color: rgba(13, 148, 136, 0.85);
}

/* ── Disabled state polish: not just greyed out, also non-clickable */
:disabled,
[disabled],
.is-disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: saturate(0.65);
}

/* =====================================================================
   THIRD PASS — bigger icons, bigger type, 3D depth
   ===================================================================== */

/* ── Global type scale-up (≈ +12% across the board) ──────────────── */
html { font-size: 15px; }
body  { font-size: 1rem; line-height: 1.55; letter-spacing: -0.005em; }

h1 { font-size: 1.85rem; letter-spacing: -0.025em; line-height: 1.18; }
h2 { font-size: 1.45rem; letter-spacing: -0.020em; line-height: 1.25; }
h3 { font-size: 1.20rem; letter-spacing: -0.015em; line-height: 1.30; }
h4 { font-size: 1.05rem; letter-spacing: -0.010em; line-height: 1.35; }

/* Panel headers carry the visual weight of section dividers */
.ap-panel-header,
.ap-panel-title {
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
}

/* Param values — the numbers users actually read — get noticeably
   larger so they read across the room on a presentation screen. */
.preview-value,
.param-value {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  /* Subtle letterpress: tiny dark below + tinier light above, gives
     a chiselled-into-the-card feel without screaming "skeuomorphic". */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.55),
    0 -1px 0 rgba(15, 23, 42, 0.04);
}
.preview-label,
.param-label {
  font-size: 0.70rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.55);
}

/* Hero KPIs read like a billboard */
.home-hero-stat-val {
  font-size: 1.80rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.030em;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.10);
}
.home-hero-stat-label {
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.82;
}
.home-hero-title {
  font-size: 2.30rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.030em;
  text-shadow:
    0 4px 12px rgba(0, 0, 0, 0.30),
    0 1px 0 rgba(255, 255, 255, 0.06);
}
.home-hero-sub {
  font-size: 0.95rem !important;
  line-height: 1.50;
  opacity: 0.92;
}

/* Chat bubbles: bigger and more legible */
#chatDesigner.chat-light .chat-bubble {
  font-size: 0.92rem !important;
  line-height: 1.50 !important;
}
#chatDesigner.chat-light .chat-who {
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Icons: globally bigger, with subtle 3D drop shadow ──────────── */
svg:not(.icon-sm):not(.preserve-size),
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands,
[class^="fa-"], [class*=" fa-"] {
  filter:
    drop-shadow(0 1px 1px rgba(15, 23, 42, 0.12))
    drop-shadow(0 0 0.5px rgba(15, 23, 42, 0.10));
  transition: filter 0.18s var(--ease-out), transform 0.18s var(--ease-out);
}
button:hover svg:not(.preserve-size),
.btn:hover svg:not(.preserve-size),
.demo-toggle:hover svg:not(.preserve-size),
[class^="fa-"]:hover, [class*=" fa-"]:hover {
  filter:
    drop-shadow(0 2px 3px rgba(15, 23, 42, 0.18))
    drop-shadow(0 0 0.5px rgba(15, 23, 42, 0.15));
  transform: scale(1.08);
}

/* Default SVG sizing bump in nav and panel headers */
.ap-panel-header svg,
.sidebar-nav-item svg,
.btn svg,
.demo-toggle svg {
  width: 18px !important;
  height: 18px !important;
}
.home-hero svg {
  width: 26px !important;
  height: 26px !important;
}

/* FontAwesome inline icons: text-shadow gives them a 3D plate look */
i[class^="fa-"], i[class*=" fa-"],
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands {
  font-size: 1.0em !important;
  text-shadow:
    0 1px 1px rgba(15, 23, 42, 0.20),
    0 0 1px rgba(15, 23, 42, 0.12);
}

/* ── 3D buttons: gradient + inset highlight + outer drop shadow ──── */
.btn,
.demo-toggle.active,
.inverse-apply-btn,
.inverse-buildplate-btn,
.chat-send-btn,
.smart-chat-btn.smart-chat-active {
  background-image:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(255, 255, 255, 0.00) 35%,
      rgba(0,   0,   0, 0.04) 100%);
  background-blend-mode: overlay, normal;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 1px 2px rgba(15, 23, 42, 0.08),
    0 4px 8px rgba(15, 23, 42, 0.10) !important;
  border: 1px solid rgba(15, 23, 42, 0.10);
  font-weight: 600 !important;
  letter-spacing: 0.005em;
}
.btn:hover:not(:disabled),
.inverse-apply-btn:hover:not(:disabled),
.inverse-buildplate-btn:hover:not(:disabled),
.chat-send-btn:hover:not(:disabled),
.smart-chat-btn.smart-chat-active:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 2px 4px rgba(15, 23, 42, 0.10),
    0 8px 16px rgba(15, 23, 42, 0.14) !important;
  transform: translateY(-1px);
}
.btn:active:not(:disabled),
.inverse-apply-btn:active:not(:disabled),
.inverse-buildplate-btn:active:not(:disabled),
.chat-send-btn:active:not(:disabled) {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.12),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10),
    0 1px 1px rgba(15, 23, 42, 0.06) !important;
  transform: translateY(0);
}

/* ── 3D cards: edge highlight + deeper shadow + gradient base ────── */
.inverse-result-card,
#chatDesigner.chat-light .chat-design-card,
.ap-panel,
.home-hero-stat {
  background-image:
    linear-gradient(180deg,
      rgba(255, 255, 255, 1.0) 0%,
      rgba(248, 250, 252, 1.0) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.65),    /* top edge highlight  */
    inset 0 -1px 0 rgba(15, 23, 42, 0.04),       /* bottom edge shadow  */
    0 1px 2px rgba(15, 23, 42, 0.05),             /* close shadow        */
    0 8px 24px rgba(15, 23, 42, 0.08) !important; /* far shadow          */
  border: 1px solid rgba(15, 23, 42, 0.06) !important;
}
.inverse-result-card:hover,
#chatDesigner.chat-light .chat-msg:hover .chat-design-card,
.ap-panel:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    inset 0 -1px 0 rgba(15, 23, 42, 0.06),
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 16px 36px rgba(15, 23, 42, 0.14) !important;
}

/* ── Hero stat tiles: embossed glassy look on the dark gradient ──── */
.home-hero-stat {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 100%) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 4px 16px rgba(0, 0, 0, 0.18) !important;
  padding: 18px 22px !important;
  border-radius: 12px !important;
}
.home-hero-stat:hover {
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0.06) 100%) !important;
  transform: translateY(-3px);
}

/* ── 3D toggle pills (Forward/Inverse, methods) ──────────────────── */
.demo-toggle {
  font-size: 0.84rem !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  border-radius: 10px !important;
}
.demo-toggle.active,
#inverseMethod .demo-toggle.active {
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.20);
}

/* ── Range slider thumb scaled up + 3D ───────────────────────────── */
input[type="range"]::-webkit-slider-thumb {
  width: 22px !important; height: 22px !important;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f1f5f9 100%);
  border-width: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    0 2px 4px rgba(15, 23, 42, 0.20),
    0 0 0 1px rgba(13, 148, 136, 0.10);
}
input[type="range"]::-moz-range-thumb {
  width: 22px !important; height: 22px !important;
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f1f5f9 100%);
  border-width: 3px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.80),
    0 2px 4px rgba(15, 23, 42, 0.20);
}

/* ── Panel header divider with subtle gradient (depth cue) ───────── */
.ap-panel-header {
  background:
    linear-gradient(180deg,
      rgba(241, 245, 249, 1.0) 0%,
      rgba(248, 250, 252, 1.0) 100%);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  padding: 14px 18px !important;
}

/* ── Status badges: 3D pill ──────────────────────────────────────── */
.status-badge,
[data-status] {
  font-size: 0.72rem !important;
  padding: 3px 9px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    0 1px 2px rgba(15, 23, 42, 0.08);
}

/* ── Bigger sidebar chips ────────────────────────────────────────── */
.sidebar-history-chips .history-chip {
  font-size: 0.82rem !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
}

/* ── Chat input: more comfortable size ───────────────────────────── */
#chatDesigner.chat-light .chat-input-row textarea,
#chatDesigner.chat-light .chat-input-row input[type="text"] {
  font-size: 0.92rem !important;
  padding: 9px 12px !important;
}
#chatDesigner.chat-light .chat-send-btn,
#chatDesigner.chat-light .chat-mic-btn,
#chatDesigner.chat-light .chat-upload-btn,
#chatDesigner.chat-light .smart-chat-btn {
  font-size: 0.86rem !important;
  padding: 8px 13px !important;
  min-height: 36px !important;
}

/* =====================================================================
   FOURTH PASS — chat panel deep 3D treatment
   ===================================================================== */

/* ── Outer chat panel: deep raised look ──────────────────────────── */
#chatDesigner.chat-light {
  border-radius: 16px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 1.0) 0%,
      rgba(248, 250, 252, 1.0) 100%) !important;
  /* Stack of 5 shadows: top-edge highlight, bottom-edge dark line,
     close shadow, mid shadow, far ambient. Reads as a substantial
     physical card lifted off the page. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(15, 23, 42, 0.04),
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 6px 14px rgba(15, 23, 42, 0.08),
    0 24px 48px rgba(15, 23, 42, 0.10) !important;
  overflow: hidden;
  position: relative;
}
#chatDesigner.chat-light::before {
  /* Subtle top accent strip — teal gradient bar that reads like the
     spine of a hardback book or the top edge of a premium device. */
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #14b8a6 0%, #0d9488 50%, #7c3aed 100%);
  z-index: 5;
  pointer-events: none;
}

/* ── Header: gradient + inset divider + raised title ─────────────── */
#chatDesigner.chat-light .chat-header {
  background:
    linear-gradient(180deg,
      #ffffff 0%,
      #f8fafc 70%,
      #f1f5f9 100%) !important;
  padding: 14px 18px !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10) !important;
  /* Inset shadow at the bottom edge gives the header a "raised plate"
     feel — sits on top of the conversation feed instead of being flush. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(15, 23, 42, 0.03),
    0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  /* Letterpress effect on the title text inside */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 -1px 0 rgba(15, 23, 42, 0.03);
  color: #0f172a !important;
}

/* Status dot: bigger, with depth and stronger halo pulse */
#chatDesigner.chat-light .chat-header::before {
  width: 12px !important;
  height: 12px !important;
  background: radial-gradient(circle at 30% 25%,
    #34d399 0%, #10b981 60%, #059669 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 0 0 4px rgba(16, 185, 129, 0.20),
    0 1px 2px rgba(0, 0, 0, 0.10) !important;
  animation: chatStatusPulse3D 2.4s ease-in-out infinite !important;
}
@keyframes chatStatusPulse3D {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 0 0 4px rgba(16, 185, 129, 0.22),
      0 1px 2px rgba(0, 0, 0, 0.10);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 0 0 9px rgba(16, 185, 129, 0.05),
      0 1px 2px rgba(0, 0, 0, 0.10);
  }
}

/* Subhead: right-aligned with vertical separator */
#chatDesigner.chat-light .chat-subhead {
  font-size: 0.74rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  margin-left: auto !important;
  padding-left: 14px !important;
  border-left: 1px solid rgba(15, 23, 42, 0.10);
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-shadow: none;
}

/* ── Body container under header: recessed feel ──────────────────── */
#chatDesigner.chat-light .chat-split,
#chatDesigner.chat-light .chat-single {
  background: linear-gradient(180deg,
    #f8fafc 0%,
    #ffffff 100%) !important;
  /* Inset top shadow makes the body sit recessed under the header. */
  box-shadow: inset 0 6px 12px -6px rgba(15, 23, 42, 0.10);
}

/* ── Conversation feed: deeper recessed canvas ───────────────────── */
#chatDesigner.chat-light .chat-feed {
  background:
    linear-gradient(180deg,
      #f8fafc 0%,
      #f1f5f9 100%) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  border-radius: 12px !important;
  /* Recessed feel: inset shadow at top + no outer shadow */
  box-shadow:
    inset 0 2px 4px rgba(15, 23, 42, 0.06),
    inset 0 -1px 0 rgba(255, 255, 255, 0.8);
  padding: 18px 20px !important;
}

/* ── Hover: panel lifts very subtly to feel responsive ───────────── */
#chatDesigner.chat-light:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(15, 23, 42, 0.04),
    0 2px 4px rgba(15, 23, 42, 0.06),
    0 10px 20px rgba(15, 23, 42, 0.10),
    0 32px 64px rgba(15, 23, 42, 0.12) !important;
}

/* ── Same depth treatment for any other ap-panel on the page ─────── */
.ap-panel {
  border-radius: 14px !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  background:
    linear-gradient(180deg,
      rgba(255, 255, 255, 1.0) 0%,
      rgba(252, 253, 254, 1.0) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(15, 23, 42, 0.04),
    0 1px 2px rgba(15, 23, 42, 0.05),
    0 6px 12px rgba(15, 23, 42, 0.07),
    0 18px 36px rgba(15, 23, 42, 0.08) !important;
  overflow: hidden;
  position: relative;
}
.ap-panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #14b8a6 0%, #0d9488 100%);
  pointer-events: none;
  z-index: 5;
}
.ap-panel-header {
  background:
    linear-gradient(180deg,
      #ffffff 0%,
      #f8fafc 70%,
      #f1f5f9 100%) !important;
  padding: 14px 18px !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 -1px 0 rgba(15, 23, 42, 0.03);
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7),
    0 -1px 0 rgba(15, 23, 42, 0.03);
  color: #0f172a !important;
}