/* Liquid surfaces for controls. Content, prices and clinical forms keep a solid base. */
:root {
  --liquid-bar: rgba(248, 251, 255, .65);
  --liquid-control: rgba(255, 255, 255, .64);
  --liquid-lens: rgba(255, 255, 255, .72);
  --liquid-sheet: rgba(251, 253, 255, .9);
  --liquid-rim: rgba(255, 255, 255, .86);
  --liquid-outline: rgba(103, 131, 162, .2);
  --liquid-highlight: rgba(255, 255, 255, .9);
  --liquid-shade: rgba(38, 65, 94, .055);
  --liquid-shadow: 0 3px 8px rgba(30, 48, 70, .035), 0 18px 42px -22px rgba(30, 48, 70, .24);
  --liquid-lens-shadow: inset 0 1px 0 rgba(255, 255, 255, .96), inset 0 -1px 0 rgba(93, 121, 150, .12), 0 2px 8px rgba(34, 58, 85, .08);
  --liquid-ease: cubic-bezier(.16, .85, .25, 1);
}
:root[data-theme="dark"] {
  --liquid-bar: rgba(28, 35, 46, .63);
  --liquid-control: rgba(78, 95, 115, .23);
  --liquid-lens: rgba(158, 182, 209, .17);
  --liquid-sheet: rgba(25, 33, 44, .91);
  --liquid-rim: rgba(208, 225, 247, .22);
  --liquid-outline: rgba(172, 195, 221, .15);
  --liquid-highlight: rgba(232, 243, 255, .19);
  --liquid-shade: rgba(0, 8, 19, .18);
  --liquid-shadow: 0 4px 10px rgba(0, 0, 0, .14), 0 22px 48px -22px rgba(0, 0, 0, .55);
  --liquid-lens-shadow: inset 0 1px 0 rgba(224, 238, 255, .26), inset 0 -1px 0 rgba(0, 8, 19, .3), 0 2px 10px rgba(0, 0, 0, .17);
}

.topbar, .operator-command {
  background: linear-gradient(135deg, var(--liquid-highlight), transparent 45%), var(--liquid-bar);
  border-color: var(--liquid-outline);
  -webkit-backdrop-filter: blur(28px) saturate(1.45);
  backdrop-filter: blur(28px) saturate(1.45);
  box-shadow: inset 0 1px 0 var(--liquid-rim), inset 0 -1px 0 var(--liquid-shade), var(--liquid-shadow);
}
.topbar { box-shadow: inset 0 -1px 0 var(--liquid-outline); }
.side { background: linear-gradient(150deg, var(--edge-highlight), transparent 52%), var(--glass-bar); }
.operator-command { border-radius: 24px; }
.filter-tabs, .theme-picker, .auth-tabs, .cal-view-switch, .cal-unit-choice > div {
  background: var(--liquid-control);
  border-color: var(--liquid-outline);
  border-radius: 20px;
  box-shadow: inset 0 1px 0 var(--liquid-rim), inset 0 -1px 0 var(--liquid-shade);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}
.filter-tabs button, .theme-picker button, .auth-tabs button, .cal-view-switch button, .cal-unit-choice button { border-radius: 16px; }

/* The moving selection is empty and never owns input or focus. */
[data-glass-switcher] { isolation: isolate; }
[data-glass-switcher]:not(.mobile-nav) { position: relative; }
[data-glass-switcher] > button { position: relative; z-index: 1; }
.glass-selection {
  display: block;
  position: absolute;
  pointer-events: none;
  z-index: 0;
  box-sizing: border-box;
  border: 1px solid var(--liquid-rim);
  border-radius: 16px;
  background: linear-gradient(145deg, var(--liquid-highlight), transparent 52%), var(--liquid-lens);
  box-shadow: var(--liquid-lens-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.35);
  backdrop-filter: blur(16px) saturate(1.35);
  transform-origin: center;
}
.glass-selection[hidden] { display: none !important; }
[data-glass-switcher] > button.active,
[data-glass-switcher] > button.active:hover,
[data-glass-switcher] > button[aria-pressed="true"],
[data-glass-switcher] > button[aria-current="page"] {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--ink);
}
.mobile-nav[data-glass-switcher] > button.active { color: var(--accent-ink); }
.nav[data-glass-switcher] > .glass-selection { border-radius: 14px; }
.nav[data-glass-switcher] > button.active .icon { color: var(--accent-ink); }

.icon-button, .close, .secondary, .cal-small-button, .cal-today {
  background: linear-gradient(150deg, var(--liquid-highlight), transparent 58%), var(--liquid-control);
  border-color: var(--liquid-outline);
  box-shadow: inset 0 1px 0 var(--liquid-rim), inset 0 -1px 0 var(--liquid-shade), 0 2px 4px rgba(20, 37, 58, .025);
  transition: transform 220ms var(--liquid-ease), background-color 180ms ease, box-shadow 220ms ease, border-color 180ms ease;
}
.close, .top-actions > .icon-button { border-radius: 50%; }
.icon-button:active:not(:disabled), .close:active:not(:disabled), .secondary:active:not(:disabled),
.cal-small-button:active:not(:disabled), .cal-today:active:not(:disabled) {
  transform: scale(.94);
  box-shadow: inset 0 1px 4px var(--liquid-shade), inset 0 0 0 1px var(--liquid-outline);
}
.primary { transition: transform 230ms var(--liquid-ease), box-shadow 230ms ease, background-color 180ms ease; }

.modal-backdrop {
  background: rgba(16, 29, 47, .22);
  -webkit-backdrop-filter: blur(10px) saturate(.92);
  backdrop-filter: blur(10px) saturate(.92);
}
:root[data-theme="dark"] .modal-backdrop { background: rgba(0, 5, 12, .4); }
.modal, .context-popover, .cal-month-popover, .msg-attachment-menu {
  background: linear-gradient(140deg, var(--liquid-highlight), transparent 38%), var(--liquid-sheet);
  border: 1px solid var(--liquid-rim);
  -webkit-backdrop-filter: blur(26px) saturate(1.45);
  backdrop-filter: blur(26px) saturate(1.45);
  box-shadow: inset 0 1px 0 var(--liquid-highlight), inset 0 -1px 0 var(--liquid-shade), var(--shadow-dialog);
}
.modal { border-radius: 30px; }
.modal[data-glass-sheet-motion] { animation: none; }
.modal-header { background: var(--liquid-control); border-bottom-color: var(--liquid-outline); }
.modal.order-modal { border-radius: 30px; }
.context-popover, .cal-month-popover { border-radius: 22px; }
.context-popover { color: var(--ink); }
.modal .input, .modal .search, .modal .date-input, .modal textarea { background: var(--surface); }
.msg-attachment-menu { border-radius: 28px; transform-origin: 24px bottom; animation: liquid-popover-in 320ms var(--liquid-ease) both; }
.msg-attachment-menu > button { background: var(--liquid-control); box-shadow: inset 0 1px 0 var(--liquid-rim); border-radius: 19px; }
.msg-capture-voice { background: var(--liquid-sheet); -webkit-backdrop-filter: blur(18px) saturate(1.25); backdrop-filter: blur(18px) saturate(1.25); }
.msg-capture-fullscreen .msg-capture-close, .msg-capture-fullscreen .msg-capture-switch {
  background: linear-gradient(145deg, #ffffff20, #ffffff06);
  border: 1px solid #ffffff25;
  box-shadow: inset 0 1px 0 #ffffff25, 0 4px 18px #00000014;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.msg-capture-fullscreen .msg-capture-send { box-shadow: inset 0 1px 0 #ffffffb0, 0 4px 18px #00000020; }

.glass-dismiss-layer { position: fixed; inset: 0; z-index: 101; pointer-events: none; }
[data-glass-dismiss], [data-glass-dismiss] * { pointer-events: none !important; animation: none !important; transition: none !important; }
.glass-dismiss-poster { display: block; width: 100%; height: auto; object-fit: contain; background: #0b1115; border-radius: 14px; }
@keyframes liquid-popover-in {
  0% { opacity: 0; transform: translateY(8px) scale(.91); }
  78% { opacity: 1; transform: translateY(-1px) scale(1.005); }
  100% { opacity: 1; transform: none; }
}

@media (max-width: 680px) {
  .mobile-nav {
    left: 12px;
    right: 12px;
    width: auto;
    max-width: 560px;
    margin: 0 auto;
    padding: 6px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    border: 1px solid var(--liquid-outline);
    border-radius: 38px;
    background: linear-gradient(150deg, var(--liquid-highlight), transparent 48%), var(--liquid-bar);
    box-shadow: inset 0 1px 0 var(--liquid-rim), inset 0 -1px 0 var(--liquid-shade), 0 8px 28px rgba(17, 36, 59, .13);
    -webkit-backdrop-filter: blur(28px) saturate(1.6);
    backdrop-filter: blur(28px) saturate(1.6);
  }
  .mobile-nav button { min-height: 54px; padding: 7px 2px; border-radius: 30px; gap: 4px; line-height: 1.2; }
  .mobile-nav button.active { background: var(--liquid-lens); }
  .mobile-nav[data-glass-switcher] > button.active { background: transparent; }
  .mobile-nav .glass-selection { border-radius: 30px; }
  .mobile-nav .icon { width: 22px; height: 22px; }
  .modal-backdrop { padding: 10px; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
  .modal, .modal.compact, .modal.order-modal { width: 100%; border-radius: 29px; max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 28px); }
  .modal-header, .order-modal .modal-header { border-radius: 28px 28px 0 0; }
  .theme-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; min-width: 0; overflow: visible; }
  .theme-picker button { min-width: 0; min-height: 56px; padding: 8px 4px; flex-direction: column; justify-content: center; gap: 4px; }
  .operator-command { border-radius: 22px; }
}
@media (max-width: 380px) {
  .mobile-nav { left: 8px; right: 8px; padding: 5px; }
  .mobile-nav button { font-size: 9px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .operator-command, .mobile-nav, .modal, .modal-header, .context-popover,
  .cal-month-popover, .msg-attachment-menu, .msg-capture-voice, .glass-selection,
  .filter-tabs, .theme-picker, .auth-tabs, .cal-view-switch, .cal-unit-choice > div { background: var(--surface); }
}
@media (prefers-reduced-motion: reduce) {
  .glass-selection, .modal, .modal-backdrop, .msg-attachment-menu, .icon-button, .close,
  .secondary, .primary, .cal-small-button, .cal-today { animation: none !important; transition: none !important; }
  .icon-button:active, .close:active, .secondary:active, .cal-small-button:active, .cal-today:active { transform: none !important; }
  .glass-dismiss-layer { display: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  :root, :root[data-theme="dark"] {
    --liquid-bar: var(--surface-2);
    --liquid-control: var(--surface);
    --liquid-lens: var(--surface-3);
    --liquid-sheet: var(--surface);
    --liquid-highlight: transparent;
  }
  .topbar, .operator-command, .mobile-nav, .modal, .modal-header, .context-popover,
  .cal-month-popover, .msg-attachment-menu, .msg-capture-voice, .glass-selection,
  .filter-tabs, .theme-picker, .auth-tabs, .cal-view-switch, .cal-unit-choice > div,
  .msg-capture-fullscreen .msg-capture-close, .msg-capture-fullscreen .msg-capture-switch { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .msg-capture-fullscreen .msg-capture-close, .msg-capture-fullscreen .msg-capture-switch { background: #293640; }
  .modal-backdrop { background: rgba(12, 21, 34, .58); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .glass-selection { display: none !important; }
  [data-glass-switcher] > button.active, [data-glass-switcher] > button[aria-pressed="true"],
  [data-glass-switcher] > button[aria-current="page"] { color: HighlightText !important; background: Highlight !important; border: 2px solid Highlight; }
  .topbar, .operator-command, .mobile-nav, .modal, .modal-header, .context-popover,
  .cal-month-popover, .msg-attachment-menu, .msg-capture-voice, .filter-tabs,
  .theme-picker, .auth-tabs, .cal-view-switch, .cal-unit-choice > div {
    background: Canvas; color: CanvasText; border-color: CanvasText; box-shadow: none;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .glass-dismiss-layer { display: none !important; }
}

/* Neutral glass for conversation routes; the lens remains an empty moving layer. */
body.msg-route{--liquid-bar:rgba(249,249,249,.82);--liquid-control:rgba(255,255,255,.66);--liquid-lens:rgba(255,255,255,.8);--liquid-sheet:rgba(250,250,250,.94);--liquid-rim:rgba(255,255,255,.8);--liquid-outline:rgba(110,110,110,.2);--liquid-highlight:rgba(255,255,255,.7);--liquid-shade:rgba(0,0,0,.06);--liquid-shadow:0 4px 18px rgba(0,0,0,.07);--liquid-lens-shadow:inset 0 1px 0 #fff9,inset 0 -1px 0 #0001,0 2px 8px #0001}
:root[data-theme=dark] body.msg-route{--liquid-bar:rgba(24,24,24,.77);--liquid-control:rgba(70,70,70,.3);--liquid-lens:rgba(160,160,160,.23);--liquid-sheet:rgba(24,24,24,.94);--liquid-rim:rgba(240,240,240,.18);--liquid-outline:rgba(200,200,200,.17);--liquid-highlight:rgba(255,255,255,.12);--liquid-shade:rgba(0,0,0,.2);--liquid-shadow:0 4px 20px #0004;--liquid-lens-shadow:inset 0 1px 0 #fff3,inset 0 -1px 0 #0004,0 2px 8px #0003}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]) body.msg-route{--liquid-bar:rgba(24,24,24,.77);--liquid-control:rgba(70,70,70,.3);--liquid-lens:rgba(160,160,160,.23);--liquid-sheet:rgba(24,24,24,.94);--liquid-rim:rgba(240,240,240,.18);--liquid-outline:rgba(200,200,200,.17);--liquid-highlight:rgba(255,255,255,.12);--liquid-shade:rgba(0,0,0,.2);--liquid-shadow:0 4px 20px #0004;--liquid-lens-shadow:inset 0 1px 0 #fff3,inset 0 -1px 0 #0004,0 2px 8px #0003}}
body.msg-route .mobile-nav,body.msg-route .topbar{backdrop-filter:blur(28px) saturate(.8);-webkit-backdrop-filter:blur(28px) saturate(.8)}
:root[data-motion=reduced] .glass-selection,:root[data-motion=reduced] .modal,:root[data-motion=reduced] .modal-backdrop,:root[data-motion=reduced] .msg-attachment-menu{animation:none!important;transition:none!important}
:root[data-motion=reduced] .glass-dismiss-layer{display:none!important}
@media(prefers-reduced-transparency:reduce){body.msg-route{--liquid-bar:var(--surface);--liquid-control:var(--surface-2);--liquid-lens:var(--surface-3);--liquid-sheet:var(--surface);--liquid-highlight:transparent}body.msg-route .mobile-nav,body.msg-route .topbar{backdrop-filter:none;-webkit-backdrop-filter:none}.msg-capture-fullscreen .msg-capture-close,.msg-capture-fullscreen .msg-capture-switch{background:#292929}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){body.msg-route .mobile-nav,body.msg-route .topbar{background:var(--surface)}}
@media(forced-colors:active){body.msg-route .mobile-nav,body.msg-route .topbar{background:Canvas;color:CanvasText;backdrop-filter:none;-webkit-backdrop-filter:none}}