/* Pulse Phase 55: iPhone safe areas + compact, unique reactions */
:root{--phase55-safe-top:env(safe-area-inset-top,0px);--phase55-safe-right:env(safe-area-inset-right,0px);--phase55-safe-bottom:env(safe-area-inset-bottom,0px);--phase55-safe-left:env(safe-area-inset-left,0px)}
[hidden]{display:none!important}

/* Installed iPhone/iPad web app: keep branding and controls below the notch/Dynamic Island. */
html.phase55-ios.phase55-standalone .topbar,
html.phase55-ios.phase54-is-installed .topbar{padding-top:calc(.58rem + var(--phase55-safe-top))!important;padding-left:max(.75rem,var(--phase55-safe-left))!important;padding-right:max(.75rem,var(--phase55-safe-right))!important}
html.phase55-ios.phase55-standalone .nav-drawer,
html.phase55-ios.phase54-is-installed .nav-drawer{top:calc(64px + var(--phase55-safe-top))!important;max-height:calc(100dvh - 148px - var(--phase55-safe-top) - var(--phase55-safe-bottom))!important}
.phase47-media-brand{top:calc(1rem + var(--phase55-safe-top))!important;left:calc(1rem + var(--phase55-safe-left))!important}
.phase32-media-close{top:calc(1rem + var(--phase55-safe-top))!important}
.phase32-media-prev{left:calc(1rem + var(--phase55-safe-left))!important}
.phase47-media-stage{padding-top:calc(4.5rem + var(--phase55-safe-top))!important}
.phase49-zoom-controls{bottom:calc(18px + var(--phase55-safe-bottom))!important;max-width:calc(100vw - var(--phase55-safe-left) - var(--phase55-safe-right) - 24px)!important}

/* One compact Like button plus a small reaction chooser. */
.phase55-like-split{display:inline-flex;align-items:stretch;position:relative;isolation:isolate}
.phase55-like-button{display:inline-flex!important;align-items:center!important;justify-content:center;gap:.38rem;min-width:82px;border-radius:999px 0 0 999px!important;padding:.48rem .68rem!important;box-shadow:none!important}
.phase55-like-button span,.phase55-comment-like span{font-size:1.05em;line-height:1}.phase55-like-button b,.phase55-comment-like b{font:inherit;font-weight:850}
.phase55-reaction-menu-button{display:grid!important;place-items:center;width:32px;min-width:32px;padding:0!important;border-radius:0 999px 999px 0!important;border-left:1px solid rgba(255,255,255,.12)!important;font-size:.85rem;box-shadow:none!important}
.phase55-like-button.reacted,.phase55-comment-like.reacted{color:#f5eaff;background:linear-gradient(135deg,rgba(139,92,246,.28),rgba(236,72,153,.18));border-color:rgba(192,132,252,.35)}
.phase55-short-menu{width:34px!important;height:34px!important;min-height:34px!important;padding:0!important;font-size:.8rem!important}

/* Compact people-who-reacted control: stacked icons + one count. */
button.phase55-reaction-summary,.phase55-reaction-summary{appearance:none;border:0!important;background:transparent!important;box-shadow:none!important;margin:.32rem 0 .2rem!important;padding:.16rem .08rem!important;min-height:25px!important;width:max-content;max-width:100%;display:inline-flex;align-items:center;gap:.32rem;color:var(--muted,#b9b3c9);font-size:.78rem;font-weight:850;line-height:1;cursor:pointer}
button.phase55-reaction-summary:hover,.phase55-reaction-summary:hover{color:var(--text,#fff);transform:none!important}
.phase55-reaction-icons{display:inline-flex;align-items:center;padding-left:.12rem}.phase55-reaction-icons i{display:grid;place-items:center;width:21px;height:21px;margin-left:-5px;border-radius:999px;background:#171126;border:1.5px solid rgba(255,255,255,.78);font-style:normal;font-size:.76rem;box-shadow:0 2px 8px rgba(0,0,0,.28)}.phase55-reaction-icons i:first-child{margin-left:0}
.phase55-reaction-total{font-size:.78rem;min-width:.7rem}.phase55-reaction-summary:after{content:' reacted';font-weight:700;opacity:.72}
.phase55-comment-summary{margin:0 .25rem!important;padding:0!important;vertical-align:middle}.phase55-comment-summary:after{content:''}
.phase49-grid-reactors.phase55-reaction-summary{position:absolute!important;right:.38rem!important;bottom:.38rem!important;margin:0!important;padding:.2rem .38rem!important;border-radius:999px!important;background:rgba(9,7,20,.88)!important;border:1px solid rgba(255,255,255,.16)!important;color:#fff!important;backdrop-filter:blur(10px);z-index:4}

/* Comment actions stay lightweight instead of becoming a second button bar. */
.phase55-comment-reaction-form{display:inline-flex!important;align-items:center;position:relative;gap:0!important}
.phase55-comment-like{display:inline-flex!important;align-items:center;gap:.25rem;padding:.16rem .28rem!important;border:0!important;background:transparent!important;color:var(--muted);font-size:.78rem;font-weight:850;border-radius:8px 0 0 8px!important;cursor:pointer}
.phase55-comment-menu{padding:.14rem .26rem!important;min-width:24px;border-radius:0 8px 8px 0!important;font-size:.68rem!important}
.phase55-comment-like:hover,.phase55-comment-menu:hover{background:rgba(139,92,246,.12)!important;color:#fff}

/* Reaction chooser is touch-safe and floats above cards/viewers. */
.phase55-reaction-form .reaction-picker,.phase55-comment-reaction-form .reaction-picker{z-index:2147483600!important}
.phase55-reaction-form.picker-open .reaction-picker,.phase55-comment-reaction-form.open .reaction-picker{pointer-events:auto!important}

/* Smaller, clearer reactor panel. */
.phase42-reactor-backdrop{padding:max(.65rem,var(--phase55-safe-top)) max(.65rem,var(--phase55-safe-right)) max(.65rem,var(--phase55-safe-bottom)) max(.65rem,var(--phase55-safe-left))!important;place-items:center!important}
.phase42-reactor-drawer{width:min(500px,calc(100vw - 1.3rem))!important;max-height:min(72dvh,620px)!important;border-radius:22px!important;padding:.75rem!important;overflow:hidden!important;display:flex;flex-direction:column}
.phase42-reactor-drawer header{padding:.15rem .15rem .62rem!important;flex:0 0 auto}.phase42-reactor-drawer header strong{font-size:1.02rem!important}.phase42-reactor-drawer header small{font-size:.74rem!important}.phase42-reactor-drawer header .btn{padding:.4rem .62rem!important}
.phase42-reaction-cloud{gap:.35rem!important;margin:.35rem 0 .55rem!important;flex:0 0 auto;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:.15rem}.phase42-cloud-pill{padding:.34rem .56rem!important;font-size:.76rem!important;white-space:nowrap}
.phase42-reactor-list{gap:.22rem!important;overflow-y:auto;padding-right:.12rem}.phase42-reactor-row{grid-template-columns:34px minmax(0,1fr) auto!important;gap:.55rem!important;padding:.46rem .5rem!important;border-radius:13px!important;background:transparent!important;border-color:transparent!important}.phase42-reactor-row:hover{background:rgba(139,92,246,.12)!important}.phase42-reactor-row .avatar{width:34px!important;height:34px!important}.phase42-reactor-row strong{font-size:.86rem}.phase42-reactor-row small{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phase42-reactor-row em{font-size:1rem!important}

@media(max-width:760px){
  .phase47-media-brand{top:calc(.65rem + var(--phase55-safe-top))!important;left:calc(.65rem + var(--phase55-safe-left))!important}
  .phase32-media-close{top:calc(.65rem + var(--phase55-safe-top))!important;right:calc(.65rem + var(--phase55-safe-right))!important;width:44px!important;height:44px!important;display:grid!important;place-items:center!important}
  .phase47-media-stage{padding-top:calc(3.9rem + var(--phase55-safe-top))!important}
  .phase42-reactor-backdrop{place-items:end center!important;padding:0!important}
  .phase42-reactor-drawer{width:100vw!important;max-width:100vw!important;max-height:min(70dvh,620px)!important;border-radius:22px 22px 0 0!important;padding:.72rem .72rem calc(.72rem + var(--phase55-safe-bottom))!important}
  .phase55-reaction-summary:after{content:''}
}