/**
 * Kreboo App Layer - Shell
 * Presentation-only PWA/mobile layer. It must not replace backend/core logic.
 */
:root{
  --ga-app-safe-top: env(safe-area-inset-top, 0px);
  --ga-app-safe-bottom: env(safe-area-inset-bottom, 0px);
  --ga-app-shell-bg: rgba(15,23,42,.94);
  --ga-app-shell-border: rgba(255,255,255,.12);
  --ga-app-shell-shadow: 0 18px 48px rgba(15,23,42,.24);
  --ga-app-accent: #2563eb;
  --ga-app-radius: 22px;
}

html.ga-kreboo-standalone,
body.ga-kreboo-standalone{
  overscroll-behavior-y: contain;
}

body.ga-kreboo-app-ready{
  -webkit-tap-highlight-color: transparent;
}

/* Installed-app premium header. It is activated only by JS in standalone mode. */
.ga-kreboo-app-header[hidden]{display:none!important}
.ga-kreboo-app-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100001;
  min-height:calc(62px + var(--ga-app-safe-top));
  padding:calc(8px + var(--ga-app-safe-top)) 12px 8px;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  background:linear-gradient(135deg, rgba(15,23,42,.97), rgba(15,43,71,.96));
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 36px rgba(15,23,42,.18);
  backdrop-filter:blur(18px);
  box-sizing:border-box;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.ga-kreboo-app-menu,
.ga-kreboo-app-icon-link{
  width:42px;
  height:42px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.09);
  color:#fff!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none!important;
  font-size:19px;
  line-height:1;
  box-shadow:none;
  cursor:pointer;
  touch-action:manipulation;
}

.ga-kreboo-app-menu:active,
.ga-kreboo-app-icon-link:active{
  transform:scale(.97);
  background:rgba(255,255,255,.15);
}

.ga-kreboo-app-brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  color:#fff!important;
  text-decoration:none!important;
}

.ga-kreboo-app-logo{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:15px;
  background:#fff;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#0f172a;
  font-weight:950;
  box-shadow:0 10px 26px rgba(56,189,248,.22);
}

.ga-kreboo-app-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.ga-kreboo-app-titlewrap{
  min-width:0;
  display:block;
}

.ga-kreboo-app-titlewrap strong{
  display:block;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:15px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:-.01em;
}

.ga-kreboo-app-titlewrap small{
  display:block;
  margin-top:3px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#bfdbfe;
  font-size:10.5px;
  line-height:1.1;
  font-weight:800;
}

.ga-kreboo-app-actions{
  display:flex;
  align-items:center;
  gap:7px;
}

.ga-kreboo-app-icon-link{
  position:relative;
  font-size:18px;
}

.ga-kreboo-app-notification-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#ef4444;
  color:#fff;
  border:2px solid #0f172a;
  font-size:10px;
  font-weight:950;
  line-height:14px;
  text-align:center;
}

.ga-kreboo-connection-badge{
  position: fixed;
  right: 14px;
  bottom: calc(92px + var(--ga-app-safe-bottom));
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(15,23,42,.92);
  color: #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.22);
  font: 800 11px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, background .18s ease;
}

.ga-kreboo-connection-badge.is-visible{
  opacity: 1;
  transform: translateY(0);
}

.ga-kreboo-connection-badge::before{
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
}

.ga-kreboo-connection-badge.is-offline{
  background: rgba(127,29,29,.94);
}

.ga-kreboo-connection-badge.is-offline::before{
  background: #f97316;
  box-shadow: 0 0 0 4px rgba(249,115,22,.2);
}

.ga-kreboo-install-card{
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(96px + var(--ga-app-safe-bottom));
  z-index: 100000;
  display: none;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(15,23,42,.97), rgba(30,41,59,.96));
  color: #fff;
  box-shadow: 0 24px 60px rgba(15,23,42,.35);
  backdrop-filter: blur(18px);
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.ga-kreboo-install-card.is-visible{
  display: flex;
}

.ga-kreboo-install-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.12);
  font-size: 22px;
  flex: 0 0 auto;
}

.ga-kreboo-install-content{min-width:0;flex:1}.ga-kreboo-install-title{margin:0 0 3px;font-size:14px;line-height:1.25;font-weight:900}.ga-kreboo-install-text{margin:0;color:rgba(255,255,255,.76);font-size:12px;line-height:1.35}.ga-kreboo-install-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.ga-kreboo-install-btn,.ga-kreboo-install-dismiss{border:0;border-radius:999px;padding:9px 12px;font:900 12px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;cursor:pointer}.ga-kreboo-install-btn{background:#fff;color:#0f172a}.ga-kreboo-install-dismiss{background:rgba(255,255,255,.1);color:#fff}

@media (min-width: 783px){
  .ga-kreboo-app-header,
  .ga-kreboo-install-card,
  .ga-kreboo-connection-badge{display:none!important}
}