:root {
  --pwa-green: #1F4938;
  --pwa-deep: #10271E;
  --pwa-lime: #C9F269;
  --pwa-cream: #F5F1E9;
  --pwa-ink: #18221D;
}

.pwa-toast,
.pwa-network-toast {
  position: fixed;
  z-index: 1000;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  left: max(16px, env(safe-area-inset-left));
  width: min(520px, calc(100% - 32px));
  margin-inline: auto;
  color: var(--pwa-cream);
  background: rgba(16, 39, 30, .97);
  border: 1px solid rgba(201, 242, 105, .38);
  border-radius: 18px;
  box-shadow: 0 18px 46px rgba(16, 39, 30, .24);
  backdrop-filter: blur(18px);
}

.pwa-toast[hidden],
.pwa-network-toast[hidden] { display: none; }

.pwa-toast {
  min-height: 72px;
  padding: 13px 14px 13px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.pwa-toast strong,
.pwa-toast span { display: block; }
.pwa-toast strong { font-size: 14px; }
.pwa-toast span { margin-top: 3px; color: rgba(245,241,233,.76); font-size: 12px; line-height: 1.4; }
.pwa-toast-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.pwa-toast button,
.pwa-network-toast button {
  min-height: 42px;
  border-radius: 12px;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
}

.pwa-primary { padding: 0 16px; color: var(--pwa-ink); background: var(--pwa-lime); border: 0; }
.pwa-secondary { min-width: 42px; padding: 0 11px; color: var(--pwa-cream); background: transparent; border: 1px solid rgba(245,241,233,.28); }
.pwa-toast button:focus-visible,
.pwa-network-toast button:focus-visible { outline: 3px solid var(--pwa-lime); outline-offset: 2px; }
.pwa-toast button:disabled { opacity: .6; cursor: wait; }

.pwa-network-toast {
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  font-size: 12px;
}
.pwa-network-toast button { padding: 0 15px; color: var(--pwa-ink); background: var(--pwa-lime); border: 0; }

body.pwa-install-visible .composer-wrap,
body.pwa-update-visible .composer-wrap,
body.pwa-network-offline .composer-wrap {
  bottom: max(100px, calc(84px + env(safe-area-inset-bottom)));
}

@media (max-width: 520px) {
  .pwa-toast { align-items: flex-start; }
  .pwa-toast-actions { flex-direction: column; align-items: stretch; }
  .pwa-primary { min-width: 78px; }
  .app-header .back-home { display: grid; flex: 0 0 36px; }
}

@media (display-mode: standalone) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }

  .app-header {
    height: calc(68px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
  }

  .studio-layout {
    height: calc(100dvh - 68px - env(safe-area-inset-top));
  }

  .pwa-install-toast { display: none !important; }
}

@media (display-mode: standalone) and (max-width: 1100px) {
  .studio-menu-button,
  .studio-sidebar,
  .mobile-nav-bar { display: none !important; }

  .composer-wrap {
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }

  .chat-workspace {
    padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important;
  }
}

@media (display-mode: standalone) and (max-width: 820px) {
  .app-header { height: calc(58px + env(safe-area-inset-top)); }
  .studio-layout { height: calc(100dvh - 58px - env(safe-area-inset-top)); }
}

@media (display-mode: standalone) and (max-height: 520px) {
  .workspace-intro { min-height: auto; align-content: start; }
}