/* Pulse Phase 61 — oriented feed media, compact immersive conversation, comment studio + sharing. */
:root{--phase61-panel-gap:10px}

/* Browser-side safety for original JPEGs; server thumbnails are also corrected in Phase 61. */
.media-grid img,.phase11-media-card img,.profile-photo-thumb img,.phase12-album-card img{image-orientation:from-image}

/* --------------------------------------------------------------------------
   Immersive viewer: make the top identity/media block compact so comments win
   more vertical space. The comment composer remains stationary at the bottom.
   -------------------------------------------------------------------------- */
@media(min-width:821px){
  .phase47-media-panel-head{
    max-height:min(22dvh,180px)!important;
    padding:.62rem .78rem .52rem!important;
    gap:.38rem!important;
    overflow:auto!important;
  }
  .phase61-media-owner{display:grid!important;grid-template-columns:38px minmax(0,1fr)!important;gap:.58rem!important;align-items:center!important;padding-right:0!important}
  .phase61-media-owner .avatar{width:38px!important;height:38px!important;border-width:1px!important}
  .phase61-media-owner>div{min-width:0!important}
  .phase61-owner-name{display:inline-block;color:inherit;text-decoration:none;font-size:.89rem;font-weight:900;line-height:1.15}
  .phase61-owner-name:hover{text-decoration:underline;text-decoration-color:rgba(196,181,253,.55)}
  .phase61-owner-meta{display:flex;align-items:center;gap:.25rem;min-width:0;color:var(--muted,#aab0c0);font-size:.69rem;line-height:1.2}
  .phase61-owner-meta a{color:inherit;text-decoration:none;max-width:58%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .phase61-owner-meta a:hover{color:#ddd6fe;text-decoration:underline}
  .phase61-media-owner h2{font-size:.86rem!important;line-height:1.18!important;margin:.13rem 0 0!important;color:rgba(255,255,255,.78)!important;font-weight:700!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
  .phase47-media-caption{font-size:.79rem!important;line-height:1.35!important;max-height:2.75em!important;overflow:hidden!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important}
  .phase32-media-reaction-strip{font-size:.7rem!important;min-height:25px!important;padding:.2rem .45rem!important;margin:0!important;width:max-content!important;max-width:100%!important}
  .phase61-viewer-actions{display:flex!important;align-items:center!important;gap:.38rem!important;min-height:32px!important}
  .phase61-viewer-actions .phase32-media-reaction-form{margin:0!important}
  .phase61-viewer-actions .btn.small{min-height:31px!important;padding:.32rem .52rem!important;font-size:.73rem!important}
  .phase59-conversation-stack>.phase47-media-comments-title{padding:.38rem .72rem .34rem!important;min-height:42px!important}
  .phase47-media-comments-title span{font-size:.58rem!important;letter-spacing:.1em!important}
  .phase47-media-comments-title h3{font-size:.91rem!important;margin:.04rem 0 0!important}
  .phase47-media-comments-title>.phase59-comment-count-trigger{min-height:27px!important;padding:.22rem .48rem!important;font-size:.7rem!important}
  .phase47-media-conversation.phase59-conversation-stack>.phase47-media-comment-scroll{padding:.62rem .78rem 1rem!important}
}

@media(max-width:820px){
  .phase47-media-panel-head{max-height:18dvh!important;padding:.42rem .58rem .36rem!important;gap:.3rem!important}
  .phase61-media-owner{display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;gap:.48rem!important;align-items:center!important;padding-right:0!important}
  .phase61-media-owner .avatar{width:34px!important;height:34px!important}
  .phase61-owner-name{font-size:.82rem!important;color:inherit!important;text-decoration:none!important}
  .phase61-owner-meta{display:flex;gap:.22rem;font-size:.64rem;color:var(--muted,#aab0c0)}
  .phase61-owner-meta a{color:inherit;text-decoration:none}
  .phase61-media-owner h2{font-size:.76rem!important;margin:.08rem 0 0!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .phase47-media-caption{display:none!important}
  .phase32-media-reaction-strip{font-size:.65rem!important;min-height:23px!important;padding:.16rem .4rem!important}
  .phase61-viewer-actions{display:flex!important;gap:.28rem!important;align-items:center!important}
  .phase61-viewer-actions .btn.small{min-height:29px!important;padding:.27rem .45rem!important;font-size:.69rem!important}
  .phase59-conversation-stack>.phase47-media-comments-title{padding:.3rem .56rem .28rem!important;min-height:38px!important}
  .phase47-media-comments-title span{display:none!important}
  .phase47-media-comments-title h3{font-size:.86rem!important;margin:0!important}
}

/* --------------------------------------------------------------------------
   AUTHORITATIVE reaction picker position. Older style.css has desktop
   position:absolute!important rules. These variables are calculated by app.js
   and this last-loaded stylesheet intentionally wins with fixed !important.
   -------------------------------------------------------------------------- */
.phase32-media-reaction-picker.phase32-fixed-ready,
.phase32-media-comment-reaction-picker.phase32-fixed-ready,
.phase32-media-reaction-form.picker-open .phase32-media-reaction-picker.phase32-fixed-ready,
.phase32-media-comment-reaction-form.picker-open .phase32-media-comment-reaction-picker.phase32-fixed-ready{
  position:fixed!important;
  left:var(--phase61-picker-left,10px)!important;
  top:var(--phase61-picker-top,10px)!important;
  right:auto!important;
  bottom:auto!important;
  transform:none!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  width:max-content!important;
  max-width:min(var(--phase61-picker-width,390px),calc(100vw - 20px))!important;
  overflow:visible!important;
  white-space:nowrap!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  z-index:2147483646!important;
  border-radius:999px!important;
  padding:.38rem .44rem!important;
  gap:.22rem!important;
  background:rgba(12,10,28,.99)!important;
  border:1px solid rgba(216,180,254,.25)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.52),0 0 0 1px rgba(124,58,237,.12)!important;
  backdrop-filter:blur(18px)!important;
}
.phase32-media-comment-reaction-picker.phase32-fixed-ready .reaction-choice,
.phase32-media-reaction-picker.phase32-fixed-ready .reaction-choice{
  width:36px!important;height:36px!important;min-width:36px!important;
  font-size:1.24rem!important;display:grid!important;place-items:center!important;
  transition:transform .13s ease,background .13s ease!important;
}
.phase32-media-comment-reaction-picker.phase32-fixed-ready .reaction-choice:hover,
.phase32-media-reaction-picker.phase32-fixed-ready .reaction-choice:hover{transform:translateY(-5px) scale(1.2)!important;background:rgba(255,255,255,.1)!important}
@media(max-width:520px){
  .phase32-media-reaction-picker.phase32-fixed-ready,.phase32-media-comment-reaction-picker.phase32-fixed-ready{max-width:calc(100vw - 16px)!important;overflow-x:auto!important;scrollbar-width:none!important}
}

/* Keep comment/reply controls compact and give body text more horizontal room. */
.phase32-media-comment{gap:.48rem!important;padding:.5rem 0!important}
.phase32-media-comment .avatar.small{width:33px!important;height:33px!important}
.phase32-media-comment-body{min-width:0!important;overflow:visible!important}
.phase32-comment-author{display:inline-flex!important;max-width:100%!important;color:inherit!important;text-decoration:none!important}
.phase32-comment-author:hover strong{text-decoration:underline;text-decoration-color:rgba(196,181,253,.55)}
.phase32-media-comment-body>p{margin:.16rem 0 .24rem!important;line-height:1.38!important;font-size:.9rem!important}
.phase32-media-comment-meta{gap:.34rem!important}
.phase32-media-comment-actions{gap:.12rem!important;margin-top:.08rem!important;overflow:visible!important}
.phase32-media-comment-actions .comment-link-btn{font-size:.7rem!important;padding:.2rem .36rem!important;min-height:25px!important}
.phase32-media-replies{margin-top:.24rem!important;padding-left:.58rem!important}

/* --------------------------------------------------------------------------
   Rich comment/reply studio: searchable emoji, stickers, GIFs, avatar sticker,
   photo/video attachment preview. Works in top-level comments and replies.
   -------------------------------------------------------------------------- */
.phase61-comment-studio{margin-top:.28rem!important;position:relative!important}
.phase61-comment-toolbar{display:flex!important;align-items:center!important;gap:.18rem!important;overflow-x:auto!important;padding:.12rem 0!important;scrollbar-width:none!important}
.phase61-comment-toolbar::-webkit-scrollbar{display:none}
.phase61-comment-toolbar button,.phase61-comment-toolbar label{min-height:30px!important;border-radius:10px!important;padding:.28rem .42rem!important;font-size:.7rem!important;white-space:nowrap!important;display:inline-flex!important;align-items:center!important;gap:.25rem!important}
.phase61-toolbar-avatar{width:20px!important;height:20px!important;border-radius:50%!important;object-fit:cover!important}
.phase61-comment-studio .phase44-tool-panel{position:absolute!important;left:0!important;right:0!important;bottom:calc(100% + .36rem)!important;z-index:2147483200!important;max-height:250px!important;overflow:auto!important;padding:.52rem!important;border-radius:15px!important;background:rgba(13,12,30,.995)!important;border:1px solid rgba(196,181,253,.2)!important;box-shadow:0 18px 52px rgba(0,0,0,.48)!important}
.phase61-comment-emoji-search{position:sticky;top:-.52rem;z-index:2;background:rgba(13,12,30,.99);padding:0 0 .4rem}
.phase61-comment-emoji-search input{width:100%!important;min-height:34px!important;border-radius:11px!important;padding:.4rem .55rem!important;font-size:.75rem!important}
.phase61-comment-emoji-grid{display:grid!important;grid-template-columns:repeat(9,minmax(30px,1fr))!important;gap:.16rem!important}
.phase61-comment-emoji-grid button{min-height:34px!important;border:0!important;background:transparent!important;border-radius:9px!important;font-size:1.22rem!important;cursor:pointer!important}
.phase61-comment-emoji-grid button:hover{background:rgba(139,92,246,.18)!important;transform:scale(1.12)}
.phase61-comment-emoji-empty{padding:.65rem;text-align:center;color:var(--muted,#aab0c0);font-size:.76rem}
.phase61-sticker-panel{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:.3rem!important}
.phase61-sticker-panel[hidden],.phase61-gif-panel[hidden],.phase61-emoji-panel[hidden]{display:none!important}
.phase61-sticker-panel button{display:flex!important;align-items:center!important;gap:.45rem!important;min-height:42px!important;padding:.4rem .5rem!important;text-align:left!important}
.phase61-sticker-panel button b{font-size:1.32rem!important}
.phase61-comment-media-preview{margin:.28rem 0 0;padding:.34rem .44rem;border-radius:11px;background:rgba(139,92,246,.1);border:1px solid rgba(167,139,250,.15);font-size:.7rem;color:#ddd6fe}
.phase61-comment-media-preview span{display:inline-flex;margin:.1rem .24rem .1rem 0;padding:.18rem .34rem;border-radius:999px;background:rgba(255,255,255,.065)}
@media(max-width:520px){
  .phase61-comment-toolbar span{display:none}
  .phase61-comment-toolbar button,.phase61-comment-toolbar label{min-width:32px!important;justify-content:center!important;padding:.28rem .36rem!important}
  .phase61-comment-emoji-grid{grid-template-columns:repeat(7,minmax(30px,1fr))!important}
  .phase61-sticker-panel{grid-template-columns:1fr!important}
}

/* Composer remains stationary; expanded tool panels grow upward into conversation. */
.phase47-media-composer{overflow:visible!important}
.phase47-media-composer .phase32-media-comment-form{position:relative!important;margin:0!important;padding:.5rem .62rem!important}
.phase47-media-composer textarea{min-height:42px!important;max-height:86px!important}

/* --------------------------------------------------------------------------
   Share controls on Lifeline cards and immersive viewer.
   -------------------------------------------------------------------------- */
.phase61-post-share,.phase61-viewer-share{cursor:pointer!important}
.phase61-share-popover{position:fixed;z-index:2147483647;width:min(290px,calc(100vw - 20px));padding:.5rem;border-radius:17px;background:rgba(13,12,29,.99);border:1px solid rgba(196,181,253,.21);box-shadow:0 22px 65px rgba(0,0,0,.55);backdrop-filter:blur(18px);display:grid;gap:.24rem}
.phase61-share-popover[hidden]{display:none!important}
.phase61-share-popover header{padding:.2rem .34rem .42rem;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:.1rem}
.phase61-share-popover header strong{display:block;font-size:.86rem}.phase61-share-popover header small{color:var(--muted,#aab0c0);font-size:.68rem}
.phase61-share-popover button,.phase61-share-popover a{width:100%;min-height:38px;border:0;border-radius:11px;background:transparent;color:#f4efff;text-decoration:none;padding:.46rem .58rem;font:inherit;font-size:.76rem;font-weight:800;display:flex;align-items:center;gap:.5rem;cursor:pointer;text-align:left}
.phase61-share-popover button:hover,.phase61-share-popover a:hover{background:rgba(139,92,246,.16)}
.phase61-share-toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:2147483647;background:#171329;color:#fff;border:1px solid rgba(196,181,253,.2);border-radius:999px;padding:.48rem .8rem;font-size:.75rem;box-shadow:0 15px 40px rgba(0,0,0,.4)}

@media(max-width:700px){
  .pulse-actions{grid-template-columns:1fr 1fr 1fr auto!important}
  .pulse-actions>.phase61-post-share{width:100%!important;justify-content:center!important}
}