/* root.css — RootView, PaneContainer, dock, presentation layers */

/* ── Pane container ── */
.pane-container {
  position: absolute;
  inset: 0;
  overflow: clip; /* not a scroll container: scrollIntoView() inside a plane can't shift the pager */
  touch-action: pan-y;
  transform-origin: 50% 0%;
  transition: transform 0.45s var(--ease-glide), border-radius 0.45s var(--ease-glide), filter 0.45s ease;
}
.pane-track { position: absolute; top: 0; bottom: 0; left: 0; display: flex; will-change: transform; }
.plane { position: relative; height: 100%; flex: none; overflow: clip; }
.pane-container.dragging { cursor: grabbing; }

/* Large sheets push the app back (UIKit page sheet). */
.pm-app.has-large-sheet .pane-container,
.pm-app.has-large-sheet .palace-dock-wrap {
  transform: translateY(calc(var(--safe-top) - 16px)) scale(0.915);
  border-radius: 28px;
  filter: brightness(0.62);
}
.pm-app.has-large-sheet .palace-dock-wrap { transform: translateY(8px) scale(0.915); }

/* ── Floating navigation dock ── */
.palace-dock-wrap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--safe-bottom);
  padding: 6px 16px;
  display: flex;
  justify-content: center;
  z-index: 40;
  transition: opacity var(--dur-settle) var(--ease-settle), transform 0.45s var(--ease-glide), filter 0.45s ease;
}
.palace-dock-wrap.hidden { opacity: 0; pointer-events: none; }
.palace-dock {
  width: 100%;
  max-width: 540px;
  padding: 5px;
  transition: width var(--dur-settle) var(--ease-settle), padding var(--dur-settle) var(--ease-settle), border-radius var(--dur-settle) var(--ease-settle), transform var(--dur-settle) var(--ease-settle);
}
.palace-dock-row { position: relative; display: flex; gap: 4px; transition: gap var(--dur-settle) var(--ease-settle); }

/* design (Quiet Session): in Chat the dock minimizes to one bubble beside the composer. */
.palace-dock-wrap.narrow { justify-content: flex-start; }
/* The wrap still spans the row: let taps through to the composer beside the bubble. */
.palace-dock-wrap.minimized { pointer-events: none; }
.palace-dock-wrap.minimized .palace-dock { width: 52px; padding: 4px; pointer-events: auto; }
.palace-dock-wrap.minimized .palace-dock-row { gap: 0; }
.palace-dock-wrap .dock-item { transition: color var(--dur-settle) var(--ease-settle), flex-grow var(--dur-settle) var(--ease-settle), opacity 0.2s ease, min-height var(--dur-settle) var(--ease-settle), gap var(--dur-settle) var(--ease-settle); }
.palace-dock-wrap.minimized .dock-item { min-height: 44px; gap: 0; overflow: hidden; }
.palace-dock-wrap.minimized .dock-item:not(.selected) { flex-grow: 0; opacity: 0; pointer-events: none; }
.dock-label { transition: opacity 0.2s ease, max-height var(--dur-settle) var(--ease-settle); max-height: 14px; overflow: hidden; }
.palace-dock-wrap.minimized .dock-label { opacity: 0; max-height: 0; }
.dock-item {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  min-height: 52px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--ink-soft);
  transition: color var(--dur-settle) var(--ease-settle);
}
.dock-item.selected { color: var(--accent); }
.dock-item:active .sf { transform: scale(0.9); }
.dock-item .sf { transition: transform 0.2s var(--ease-settle); }
.dock-label { font-size: 11px; line-height: 13px; font-weight: 500; letter-spacing: 0.07px; white-space: nowrap; }
.dock-lens {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
  pointer-events: none;
  transition: transform var(--dur-settle) var(--ease-settle), width var(--dur-settle) var(--ease-settle);
  --lg-drop: 0 4px 14px -6px rgb(0 0 0 / 0.35);
}
.dock-lens[data-wobble="0"] { animation: lens-jelly-a 0.42s var(--ease-settle); }
.dock-lens[data-wobble="1"] { animation: lens-jelly-b 0.42s var(--ease-settle); }
@keyframes lens-jelly-a { 0% { scale: 1 1; } 40% { scale: 1.07 0.93; } 100% { scale: 1 1; } }
@keyframes lens-jelly-b { 0% { scale: 1 1; } 40% { scale: 1.07 0.93; } 100% { scale: 1 1; } }

/* ── Gesture hint ── */
.gesture-hint-host {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--safe-bottom) + 74px + 90px);
  display: flex;
  justify-content: center;
  z-index: 45;
  animation: hint-in 0.5s var(--ease-settle);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}
.gesture-hint-host.leaving { opacity: 0; transform: scale(0.96); }
@keyframes hint-in { from { opacity: 0; transform: scale(0.96); } }
.gesture-hint { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 26px; }
.gesture-hint-glyphs { display: flex; gap: 20px; color: var(--ink-soft); animation: hint-drift 1.4s var(--ease-in-out) infinite alternate; }
@keyframes hint-drift { from { transform: translateX(-5px); } to { transform: translateX(5px); } }
.gesture-hint-text { font-size: 13px; font-weight: 300; color: var(--ink-soft); text-align: center; }

/* ── Presentation ── */
.presentation-host { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
.presentation-host > * { pointer-events: auto; }
.sheet-layer { position: absolute; inset: 0; }
.sheet-scrim {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.0);
  transition: background 0.45s var(--ease-glide);
}
.sheet-layer.shown .sheet-scrim { background: rgb(0 0 0 / 0.28); }
.sheet-layer.detent-medium.shown .sheet-scrim { background: rgb(0 0 0 / 0.16); }
.sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 28px 28px 0 0;
  overflow: clip;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 40px rgb(0 0 0 / 0.35);
  transition: transform 0.5s var(--ease-glide), top 0.45s var(--ease-glide);
  transform-origin: 50% 0; /* a sheet under another large sheet recedes like the app does */
  touch-action: none;
}
.sheet-panel.dragging { transition: none; }
/* Zoom from a source rect (presentSheet … { origin }): the panel springs out of the tile and back into it. */
.sheet-panel.zoom { transition: transform 0.5s var(--ease-glide), top 0.45s var(--ease-glide), border-radius 0.5s var(--ease-glide), box-shadow 0.5s var(--ease-glide); }
.sheet-panel.zoom-prep { transition: none; }
.sheet-panel.zoom .sheet-content, .sheet-panel.zoom .sheet-grab-zone { transition: opacity 0.3s var(--ease-out) 0.08s; }
.sheet-panel.zoom-hidden .sheet-content, .sheet-panel.zoom-hidden .sheet-grab-zone { opacity: 0; transition: opacity 0.16s var(--ease-out); }
.sheet-panel.zoom-hidden { box-shadow: 0 10px 28px -8px rgb(0 0 0 / 0.3); }
.sheet-grab-zone { position: absolute; top: 0; left: 0; right: 0; z-index: 3; height: 20px; display: flex; justify-content: center; cursor: grab; }
.sheet-grabber {
  position: absolute;
  top: 5px;
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: rgb(var(--ink2-rgb) / 0.3);
}
.sheet-content { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; transition: padding-bottom 0.42s var(--ease-glide); }
.sheet-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }

.sheet-navbar { padding: 14px 16px 6px; position: relative; z-index: 2; flex: none; }
.sheet-navbar-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 44px; gap: 8px; }
.sheet-navbar-side { display: flex; align-items: center; gap: 8px; }
.sheet-navbar-side.trailing { justify-content: flex-end; }
.sheet-navbar-title { font-size: 17px; font-weight: 600; letter-spacing: -0.41px; color: var(--ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.sheet-navbar-subtitle { font-size: 12px; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.sheet-navbar-large-title { font: 700 34px/41px var(--font-display); letter-spacing: 0.37px; color: var(--ink); padding: 4px 4px 0; }

.toolbar-button {
  height: 44px;
  min-width: 44px;
  padding: 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.41px;
  color: var(--ink);
}
.toolbar-button.icon-only { padding: 0; width: 44px; }
.toolbar-button.confirm { font-weight: 600; color: #fff; --lg-tint: var(--toolbar-tint, rgb(var(--system-blue-rgb) / 0.95)); }
/* .confirmationAction is glass-prominent in the inherited tint: system blue unless a view applies
   .tint(Holo.accent) above its NavigationStack. Such views set --toolbar-tint (see .set-sheet). */
.toolbar-button:disabled { opacity: 0.4; }

/* ── Menus ── */
.menu-layer { position: absolute; inset: 0; z-index: 90; }
.menu-panel {
  position: absolute;
  min-width: 250px;
  max-width: 300px;
  padding: 8px 0;
  border-radius: 22px;
  background: var(--mat-regular-bg);
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
  box-shadow: 0 20px 50px -10px rgb(0 0 0 / 0.5), inset 0 0 0 0.5px rgb(var(--wash-rgb) / calc(0.14 * var(--wash-k))), inset 0 1px 0 var(--lg-inner-top);
  transform: scale(0.4);
  opacity: 0;
  transition: transform 0.36s var(--ease-picker), opacity 0.18s ease;
}
.menu-panel.shown { transform: scale(1); opacity: 1; }
.menu-title { padding: 6px 18px 8px; font-size: 13px; color: var(--ink-soft); }
.menu-item {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px 10px 14px;
  text-align: left;
  font-size: 17px;
  letter-spacing: -0.41px;
  color: var(--ink);
}
.menu-item:active, .menu-item:hover { background: rgb(var(--wash-rgb) / calc(0.10 * var(--wash-k))); }
.menu-item.destructive { color: var(--danger); }
.menu-item.disabled { opacity: 0.35; }
.menu-item-lead { width: 22px; display: grid; place-items: center; flex: none; }
.menu-item-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-item-sub { font-size: 13px; color: var(--ink-soft); }
.menu-divider { height: 0.5px; background: rgb(var(--wash-rgb) / calc(0.12 * var(--wash-k))); margin: 4px 0; }
.menu-divider.thick { height: 8px; background: rgb(var(--wash-rgb) / calc(0.05 * var(--wash-k))); margin: 4px 0; }

/* ── Simulated iOS 26 keyboard ── */
.ios-keyboard {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  padding: 0 3px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgb(36 36 40 / 0.72);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 0.5px 0 rgb(255 255 255 / 0.12);
  transform: translateY(100%);
  transition: transform 0.42s var(--ease-glide);
  border-radius: 26px 26px 0 0;
}
.ios-keyboard.shown { transform: none; }
.ios-keyboard.over-sheets { z-index: 70; } /* a field inside a sheet: the keyboard rises above the sheet stack */
/* The keyboard's safe area replaces the home-indicator inset for the sheet it covers. */
.sheet-content.keyboard-up { --safe-bottom: 0px; }
.ios-keyboard.light { background: rgb(214 217 224 / 0.8); }
.kb-suggestions { height: 42px; display: flex; align-items: center; justify-content: space-around; color: rgb(255 255 255 / 0.9); font-size: 17px; margin-bottom: -6px; }
.ios-keyboard.light .kb-suggestions { color: #111; }
.kb-suggestions i { width: 0.5px; height: 22px; background: rgb(255 255 255 / 0.2); }
.ios-keyboard.light .kb-suggestions i { background: rgb(0 0 0 / 0.15); }
.kb-row { display: flex; gap: 6px; justify-content: center; }
.kb-key {
  position: relative;
  flex: 1 1 0;
  max-width: 36px;
  height: 42px;
  border-radius: 8.5px;
  background: rgb(112 112 116 / 0.9);
  color: #fff;
  font: 400 22px/42px -apple-system, "SF Pro Text", "Inter", system-ui, sans-serif;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.35);
}
.ios-keyboard.light .kb-key { background: #fff; color: #111; box-shadow: 0 1px 0 rgb(0 0 0 / 0.3); }
.kb-key:active { background: rgb(160 160 166); }
.ios-keyboard.light .kb-key:active { background: #d0d3da; }
.kb-special { max-width: 44px; background: rgb(70 70 74 / 0.9); font-size: 16px; }
.ios-keyboard.light .kb-special { background: #abb0bc; }
.kb-special.on { background: #fff; color: #111; }
.kb-wide { max-width: 88px; font-size: 16px; }
.kb-space { max-width: none; flex: 5 1 0; font-size: 16px; }
.kb-return { max-width: 88px; flex: 2 1 0; font-size: 16px; }
.kb-pop {
  position: absolute;
  bottom: 46px;
  left: 50%;
  transform: translateX(-50%);
  width: 52px;
  height: 58px;
  border-radius: 10px;
  background: inherit;
  display: grid;
  place-items: center;
  font-size: 32px;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.35);
  pointer-events: none;
}
.kb-bottom { display: flex; justify-content: space-between; padding: 2px 22px 0; color: rgb(255 255 255 / 0.85); }
.ios-keyboard.light .kb-bottom { color: #333; }

/* ── Toast ── */
.holo-toast {
  position: absolute;
  top: calc(var(--safe-top) + 6px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  z-index: 95;
  animation: toast-in 0.45s var(--ease-glide);
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, -14px) scale(0.92); } }