/* ==========================================================================
   Device frame, status bar, screen container, tab bar, floating action button
   ========================================================================== */

.device {
  --device-scale: 1;
  position: relative;
  width: calc(var(--device-w) + 24px);
  height: calc(var(--device-h) + 24px);
  transform: scale(var(--device-scale));
  transform-origin: center center;
  transition: transform var(--dur-normal) var(--ease-out-expo);
  /* transform leaves the layout box at full size, so claw the difference back */
  margin:
    calc((var(--device-scale) - 1) * (var(--device-h) + 24px) / 2)
    calc((var(--device-scale) - 1) * (var(--device-w) + 24px) / 2);
}

.device__frame {
  position: absolute;
  inset: 0;
  border-radius: 62px;
  padding: 12px;
  background: linear-gradient(160deg, #fdfdff 0%, #e7ebf6 46%, #cfd6e8 100%);
  box-shadow: var(--shadow-device);
}

/* Thin inner bezel line, like the mockup renders. */
.device__frame::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 54px;
  border: 1px solid rgba(120, 140, 190, 0.22);
  pointer-events: none;
  z-index: 4;
}

.app {
  position: relative;
  width: var(--device-w);
  height: var(--device-h);
  border-radius: 50px;
  overflow: hidden;
  background: var(--canvas);
  isolation: isolate;
}

/* Scrolled content dissolves under the status bar instead of colliding with it. */
.app::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 52px;
  z-index: 29;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(252, 253, 255, 0.94) 46%, rgba(252, 253, 255, 0));
}

/* --- notch + status bar --------------------------------------------------- */

.statusbar {
  position: absolute;
  inset: 0 0 auto;
  height: 54px;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px 0 34px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  pointer-events: none;
}

.statusbar__notch {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: 164px;
  height: 30px;
  border-radius: 0 0 20px 20px;
  background: linear-gradient(180deg, #dfe4f3, #eef1f9);
}

.statusbar__notch::after {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  translate: -50% 0;
  width: 52px;
  height: 6px;
  border-radius: var(--r-pill);
  background: #c3cadd;
}

.statusbar__icons {
  display: flex;
  align-items: center;
  gap: 6px;
}

.homebar {
  position: absolute;
  bottom: 9px;
  left: 50%;
  translate: -50% 0;
  width: 138px;
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--ink-900);
  z-index: 30;
  pointer-events: none;
}

/* --- screens -------------------------------------------------------------- */

.screens {
  position: absolute;
  inset: 0;
}

.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px) scale(0.995);
  transition:
    opacity var(--dur-normal) ease,
    transform var(--dur-normal) var(--ease-out-expo),
    visibility 0s linear var(--dur-normal);
}

.screen.is-active {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.screen__scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 62px 20px 26px;
  scrollbar-width: none;
}

.screen__scroll::-webkit-scrollbar {
  display: none;
}

.screen--tabbed .screen__scroll {
  padding-bottom: calc(var(--tabbar-h) + 18px);
}

.screen--flush .screen__scroll {
  padding-inline: 0;
}

/* Screens that carry their own app bar don't need the status-bar inset. */
.screen--bar .screen__scroll {
  padding-top: 8px;
}

/* --- app bar (back + title) ----------------------------------------------- */

.appbar {
  position: relative;
  z-index: 20;
  flex: none;
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
  gap: 8px;
  padding: 58px 20px 12px;
  background: var(--surface);
}

.appbar--plain {
  background: transparent;
}

.appbar--onCanvas {
  background: var(--canvas);
}

.appbar__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--ink-900);
  text-align: center;
  letter-spacing: -0.01em;
}

.appbar__sub {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 9px;
  color: var(--ink-400);
  margin-top: -4px;
}

.iconbtn {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  color: var(--ink-800);
  transition:
    background var(--dur-fast) ease,
    transform var(--dur-fast) var(--ease-spring);
}

.iconbtn:hover {
  background: var(--ink-100);
}

.iconbtn:active {
  transform: scale(0.9);
}

/* --- tab bar -------------------------------------------------------------- */

.tabbar {
  position: absolute;
  inset: auto 0 0;
  height: var(--tabbar-h);
  z-index: 25;
  pointer-events: none;
}

/* Detail screens (reports, chat) run full-bleed without the app chrome. */
.app[data-chrome="none"] .tabbar,
.app[data-chrome="none"] .fab {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-fast) ease,
    visibility 0s linear var(--dur-fast);
}

.tabbar__shape {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 -6px 18px rgba(28, 42, 80, 0.06));
}

.tabbar__items {
  position: absolute;
  inset: 0;
  pointer-events: auto;
}

.tab {
  position: absolute;
  bottom: 22px;
  translate: -50% 0;
  display: grid;
  justify-items: center;
  gap: 5px;
  width: 64px;
  color: var(--ink-500);
  transition:
    color var(--dur-fast) ease,
    scale var(--dur-fast) var(--ease-spring);
}

/* The fourth slot sits under the FAB, so it carries a label only — the FAB is
   its icon. */
.tab--1 { left: 40px; }
.tab--2 { left: 119px; }
.tab--3 { left: 200px; }
.tab--4 { left: 309px; }

/* Centring uses the `translate` property, so state changes must use the other
   individual properties — a `transform` here would re-apply the -50% shift and
   slide the button out from under the pointer. */
.tab:active {
  scale: 0.92;
}

.tab__label {
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
}

.tab[aria-current="page"] {
  color: var(--ink-800);
}

.tab[aria-current="page"] .tab__label {
  font-weight: 600;
}

/* Icon swaps between outline and filled with the active state. */
.tab .icon--fill {
  display: none;
}

.tab[aria-current="page"] .icon--fill {
  display: block;
}

.tab[aria-current="page"] .icon--line {
  display: none;
}

/* --- floating action button ----------------------------------------------- */

.fab {
  position: absolute;
  left: 309px;
  bottom: 60px;
  translate: -50% 0;
  width: 58px;
  height: 58px;
  z-index: 28;
  border-radius: 50%;
  display: grid;
  place-items: center;
  /* White face inside a brand-gradient ring, painted with the border trick. */
  border: 3px solid transparent;
  background:
    linear-gradient(var(--surface), var(--surface)) padding-box,
    var(--grad-brand) border-box;
  box-shadow: var(--shadow-fab);
  transition:
    translate var(--dur-normal) var(--ease-spring),
    rotate var(--dur-normal) var(--ease-spring);
}

.fab:hover {
  translate: -50% -3px;
}

.fab.is-open {
  translate: -50% 0;
  rotate: 135deg;
}

.fab__mark,
.fab__close {
  width: 30px;
  height: 30px;
  transition: opacity var(--dur-fast) ease;
}

.fab__close {
  position: absolute;
  opacity: 0;
  color: var(--ink-800);
}

.fab.is-open .fab__mark {
  opacity: 0;
}

.fab.is-open .fab__close {
  opacity: 1;
}

/* --- fab menu ------------------------------------------------------------- */

.fabmenu {
  position: absolute;
  inset: 0;
  z-index: 27;
  /* Never let the invisible backdrop swallow taps meant for the screen. */
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 12px;
  padding: 0 34px 134px 0;
  background: rgba(96, 104, 128, 0.34);
  backdrop-filter: blur(1px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-normal) ease,
    visibility 0s linear var(--dur-normal);
}

.fabmenu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.fabmenu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 14px;
  border-radius: var(--r-pill);
  background: var(--surface);
  box-shadow: var(--shadow-raised);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--ink-900);
  transform: translateY(14px);
  opacity: 0;
  transition:
    transform var(--dur-normal) var(--ease-out-expo),
    opacity var(--dur-normal) ease;
}

.fabmenu.is-open .fabmenu__item {
  transform: none;
  opacity: 1;
}

.fabmenu.is-open .fabmenu__item:nth-child(2) {
  transition-delay: 60ms;
}

.fabmenu__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  flex: none;
}

.fabmenu__icon--book {
  background: var(--blue-050);
  color: var(--blue-500);
}

.fabmenu__icon--sos {
  background: var(--red-100);
  color: var(--red-500);
}