:root{
  --layer-content:0;
  --layer-app-shell:1000;
  --layer-sticky-actions:200;
  --layer-global-status-panel:9000;
  --layer-modal-backdrop:100000;
  --layer-modal:100010;
  --layer-modal-critical:100020;
  --global-status-panel-height:0px;
  --global-status-panel-gap:16px;
  --global-status-panel-clearance:calc(var(--global-status-panel-height) + var(--global-status-panel-gap) * 2 + env(safe-area-inset-bottom));
}

body .startup-screen{z-index:var(--layer-app-shell)}

.global-session-footer-slot{
  position:fixed;
  z-index:var(--layer-global-status-panel);
  right:0;
  bottom:0;
  left:0;
  display:flex;
  justify-content:flex-end;
  padding:0 max(var(--global-status-panel-gap),env(safe-area-inset-right)) max(var(--global-status-panel-gap),env(safe-area-inset-bottom)) max(var(--global-status-panel-gap),env(safe-area-inset-left));
  pointer-events:none;
  box-sizing:border-box;
  transition:opacity .14s ease,visibility .14s ease;
}

.global-session-footer-slot[data-position="left"]{justify-content:flex-start}
.global-session-footer-slot[data-obscured]{opacity:0;visibility:hidden;pointer-events:none}

.session-badge{
  position:relative;
  display:none;
  width:max-content;
  max-width:min(520px,calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)));
  min-width:280px;
  overflow:hidden;
  border:1px solid #c7d3e0;
  border-radius:8px;
  background:rgba(255,255,255,.98);
  color:#0b2545;
  box-shadow:0 7px 20px rgba(11,37,69,.16);
  font-size:12px;
  font-weight:800;
  pointer-events:auto;
  box-sizing:border-box;
}

.session-version{
  display:block;
  width:100%;
  padding:7px 10px 6px;
  border-bottom:1px solid #dce5ee;
  background:#f5f8fb;
  color:#53657a;
  font-size:11px;
  font-weight:750;
  line-height:1.2;
  letter-spacing:0;
  white-space:nowrap;
  box-sizing:border-box;
}

.session-actions{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:0;
  padding:7px 8px;
  flex-wrap:wrap;
}

.session-user{
  min-width:0;
  max-width:120px;
  overflow:hidden;
  color:#0b2545;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.session-badge button{
  min-height:40px;
  min-width:40px;
  margin:0;
  padding:7px 10px;
  border-radius:6px;
  font-size:12px;
  line-height:1.1;
}

.session-badge button:focus-visible{outline:3px solid #2f80ed;outline-offset:2px}

.sync-state-button{
  display:grid!important;
  place-items:center!important;
  width:40px!important;
  height:40px!important;
  min-height:40px!important;
  padding:0!important;
  border:2px solid #fff!important;
  border-radius:50%!important;
  background:#2f80ed!important;
  color:#fff!important;
  box-shadow:0 0 0 2px rgba(11,37,69,.14)!important;
}

.sync-state-button svg{width:19px;height:19px;stroke:currentColor;stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sync-state-button.synced{background:#1f9d55!important}
.sync-state-button.failed,.sync-state-button.conflict,.sync-state-button.auth_required,.sync-state-button.error{background:#d93025!important}
.sync-state-button.syncing,.sync-state-button.running{background:#f2b705!important;color:#082044!important;animation:syncPulse 1.1s ease-in-out infinite}
.sync-state-button.offline{background:#7b8794!important}
.sync-state-button.pending,.sync-state-button.retrying,.sync-state-button.limited{background:#f2b705!important;color:#082044!important}
.sync-state-button.idle{background:#64748b!important}

.sync-retry-button{
  min-height:40px!important;
  padding:7px 10px!important;
  border:1px solid #b42318!important;
  border-radius:6px!important;
  background:#fff!important;
  color:#b42318!important;
  font-size:11px!important;
  font-weight:800!important;
  line-height:1.1!important;
  white-space:nowrap;
}

.sync-retry-button:hover,.sync-retry-button:focus-visible{background:#fff1f0!important}

body.session-panel-active{
  min-height:100%;
  padding-bottom:var(--global-status-panel-clearance)!important;
  box-sizing:border-box;
}

body.session-panel-active .startup-body{
  padding-bottom:var(--global-status-panel-clearance)!important;
  scroll-padding-bottom:var(--global-status-panel-clearance);
  box-sizing:border-box;
}

body.session-panel-active .startup-screen{
  padding-bottom:calc(10px + var(--global-status-panel-clearance));
}

body.session-panel-active .toolbar:not(.diary-toolbar-inline){bottom:var(--global-status-panel-clearance)}

@keyframes syncPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

@media(max-width:560px){
  :root{--global-status-panel-gap:8px}
  .global-session-footer-slot{justify-content:stretch}
  .global-session-footer-slot[data-position="left"]{justify-content:stretch}
  .session-badge{width:100%;max-width:none;min-width:0;border-radius:7px}
  .session-actions{display:grid;grid-template-columns:40px minmax(0,1fr) max-content max-content;gap:6px}
  .session-user{max-width:none}
  .sync-retry-button{grid-column:1/-1;width:100%}
}

@media(max-width:370px){
  .session-actions{grid-template-columns:40px minmax(0,1fr) max-content}
  .session-actions #passkeyManageButton{grid-column:1/3;grid-row:2}
  .session-actions #sessionSignOutButton{grid-column:3;grid-row:2}
}

@media print{
  #globalSessionFooterSlot,#sessionBadge{display:none!important}
  body.session-panel-active{padding-bottom:0!important}
}