/* A0X194 CODE — Material 3 Expressive reskin of CloudCLI.
   Colours come from /a0x-shared/theme.js (Material You from theme.css); shapes/fonts/motion from theme.css. */
:root { --radius: var(--md-shape-md, 14px); --nav-glass-blur: var(--a0x-glass-blur, 18px); }
html, body { background: var(--md-surface) !important; color: var(--md-on-surface); transition: background-color .4s var(--md-ease); }
body, button, input, textarea, select { font-family: var(--md-font) !important; }
code, pre, kbd, .font-mono, .xterm, .cm-editor, .cm-content { font-family: var(--md-font-mono) !important; }
h1, h2, h3, .text-2xl, .text-3xl, .text-xl { font-weight: var(--a0x-display-weight, 500) !important; letter-spacing: var(--a0x-display-tracking, 0); }
h1, h2, h3, h4, .font-serif, [class*="font-serif"] { font-family: var(--md-font) !important; }
::selection { background: var(--md-primary-container); color: var(--md-on-primary-container); }
* { scrollbar-width: thin; scrollbar-color: var(--md-outline-variant) transparent; }

/* ---------- shape: rounder, softer ---------- */
.rounded-sm { border-radius: var(--md-shape-xs) !important; }
.rounded, .rounded-md { border-radius: var(--md-shape-md) !important; }
.rounded-lg { border-radius: var(--md-shape-lg) !important; }
.rounded-xl, .rounded-2xl { border-radius: var(--md-shape-xl) !important; }
.shadow-sm, .shadow { box-shadow: var(--md-elev-1) !important; }
.shadow-md, .shadow-lg { box-shadow: var(--md-elev-2) !important; }
.shadow-xl, .shadow-2xl { box-shadow: var(--md-elev-3) !important; }
.border, .border-b, .border-t, .border-r, .border-l { border-color: var(--md-outline-variant) !important; }

/* ---------- buttons: pill shape + expressive press ---------- */
button { transition: background-color var(--md-dur-short) var(--md-ease), color var(--md-dur-short), border-radius var(--md-dur-medium) var(--md-ease),
  transform var(--md-dur-medium) cubic-bezier(.34, 1.56, .64, 1), box-shadow var(--md-dur-short) !important; }
button:active:not(:disabled) { transform: scale(.94); }
button.bg-primary, a.bg-primary, button[type=submit] { border-radius: var(--md-shape-full) !important; }
button.bg-primary:active, button[type=submit]:active { border-radius: var(--md-shape-md) !important; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--md-secondary) !important; outline-offset: 2px; }

/* ---------- inputs: Material filled style ---------- */
input:not([type=checkbox]):not([type=radio]):not([type=range]), textarea, select {
  border-radius: var(--md-shape-lg) !important; background: var(--md-surface-container-highest) !important; color: var(--md-on-surface) !important;
  border-color: transparent !important; transition: box-shadow var(--md-dur-short), background-color var(--md-dur-short) !important; }
input:focus, textarea:focus, select:focus { outline: none !important; box-shadow: 0 0 0 2px var(--md-primary) !important; }

/* ---------- sidebar & lists: rounded pills like Android ---------- */
aside, [class*="sidebar"] { background: var(--md-surface-container-low) !important; }
[class*="sidebar"] button, aside button, [role=listitem], [role=option] { border-radius: var(--md-shape-full) !important; }
[data-state=active], [aria-selected=true], [aria-current=page] { background: var(--md-secondary-container) !important; color: var(--md-on-secondary-container) !important; }

/* ---------- mobile bottom nav: Material navigation bar ---------- */
@media (max-width: 767px) {
  nav[class*="fixed"][class*="bottom"], [class*="mobile-nav"] { background: color-mix(in srgb, var(--md-surface-container) 88%, transparent) !important;
    backdrop-filter: blur(var(--a0x-glass-blur)) saturate(1.4); border-radius: var(--md-shape-xl) var(--md-shape-xl) 0 0 !important; box-shadow: var(--md-elev-2) !important; }
}

/* ---------- motion: dialogs, menus, messages ---------- */
@keyframes a0x-pop { from { opacity: 0; transform: scale(.92) translateY(10px); filter: blur(calc(6px * var(--a0x-cinematic, 1))); } to { opacity: 1; transform: none; filter: none; } }
@keyframes a0x-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes a0x-fade { from { opacity: 0; filter: blur(calc(8px * var(--a0x-cinematic, 1))); } to { opacity: 1; filter: none; } }
[role=dialog], [role=menu], [role=listbox], [data-radix-popper-content-wrapper] > * { animation: a0x-pop calc(var(--md-dur-medium) / var(--a0x-motion-speed, 1)) cubic-bezier(.34, 1.4, .64, 1) both; border-radius: var(--md-shape-xl) !important; }
[role=dialog] { background: var(--md-surface-container-high) !important; }
main > * { animation: a0x-fade calc(var(--md-dur-long) / var(--a0x-motion-speed, 1)) var(--md-ease-decel) both; }
[class*="message"], [class*="chat"] > div > div { animation: a0x-rise calc(var(--md-dur-medium) / var(--a0x-motion-speed, 1)) var(--md-ease-decel) both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }