/* Pulse Phase 60 — authoritative viewer layout + compact Messenger Studio. */

/* --------------------------------------------------------------------------
   Immersive viewer: the right side is one tall conversation, not a nested box.
   Header = auto, conversation = remaining height. Conversation itself is
   title = auto, comments = remaining height, composer = stationary bottom row.
   -------------------------------------------------------------------------- */
:root{--phase60-viewer-panel-width:clamp(420px,34vw,500px)}
body.phase32-media-open{overflow:hidden!important}
.phase32-media-modal,.phase32-media-shell.phase47-media-shell,.phase32-media-modal-body{overflow:hidden!important}
@media(min-width:821px){
  .phase47-media-viewer{display:grid!important;grid-template-columns:minmax(0,1fr) var(--phase60-viewer-panel-width)!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;overflow:hidden!important}
  .phase47-media-stage{height:100dvh!important;min-height:0!important;max-height:100dvh!important;overflow:hidden!important;padding:4.5rem 2.25rem 1.5rem!important}
  .phase47-media-panel{display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;overflow:hidden!important;padding:0!important;border-left:1px solid rgba(255,255,255,.1)!important}
  .phase47-media-panel-head{min-height:0!important;max-height:38dvh!important;overflow:auto!important;overscroll-behavior:contain!important;scrollbar-width:thin!important}
  .phase47-media-conversation.phase59-conversation-stack{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;min-height:0!important;height:100%!important;max-height:none!important;overflow:hidden!important}
  .phase47-media-conversation.phase59-conversation-stack>.phase47-media-comment-scroll.phase60-viewer-comments,
  .phase47-media-conversation.phase59-conversation-stack>.phase47-media-comment-scroll{display:block!important;min-height:0!important;height:100%!important;max-height:none!important;overflow-y:auto!important;overflow-x:hidden!important;margin:0!important;padding:.9rem 1rem 1.45rem!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;scrollbar-gutter:stable!important;overscroll-behavior:contain!important}
  .phase47-media-conversation.phase59-conversation-stack>.phase47-media-composer{position:relative!important;inset:auto!important;bottom:auto!important;flex:none!important;margin:0!important;z-index:20!important;border-radius:0!important;background:rgba(7,9,21,.995)!important;box-shadow:0 -12px 34px rgba(0,0,0,.28)!important}
  /* Put the next arrow safely inside the media stage, never over the comments. */
  .phase32-media-next{right:calc(var(--phase60-viewer-panel-width) + 28px)!important}
  .phase32-media-prev{left:28px!important}
  .phase32-media-close{right:calc(var(--phase60-viewer-panel-width) + 22px)!important}
}

.phase47-media-comments-title{flex:0 0 auto!important}
.phase47-media-comment-scroll.phase48-media-comment-flow{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.phase47-media-comment-scroll .phase32-media-comments{width:100%!important;max-width:none!important;margin:0!important;padding:0 0 .25rem!important}
.phase47-media-comment-scroll .phase32-media-comment{width:100%!important;max-width:none!important}
.phase47-media-composer{flex:0 0 auto!important}
.phase47-media-composer textarea{resize:none!important}

@media(max-width:820px){
  .phase47-media-viewer{display:flex!important;flex-direction:column!important;height:100dvh!important;min-height:0!important;max-height:100dvh!important;overflow:hidden!important}
  .phase47-media-stage{position:relative!important;flex:0 0 40dvh!important;height:40dvh!important;min-height:40dvh!important;max-height:40dvh!important;overflow:hidden!important;padding:3.65rem .5rem .45rem!important}
  .phase47-media-stage img,.phase47-media-stage video,.phase44-photo-zoom-wrap img.phase44-zoom-target{max-height:34dvh!important}
  .phase47-media-panel{display:grid!important;grid-template-rows:auto minmax(0,1fr)!important;flex:1 1 auto!important;width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;overflow:hidden!important}
  .phase47-media-panel-head{max-height:24dvh!important;overflow:auto!important;padding:.62rem .72rem .52rem!important}
  .phase47-media-conversation.phase59-conversation-stack{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;height:100%!important;min-height:0!important;overflow:hidden!important}
  .phase47-media-conversation.phase59-conversation-stack>.phase47-media-comment-scroll{height:100%!important;min-height:0!important;max-height:none!important;overflow-y:auto!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:transparent!important;padding:.65rem .72rem .9rem!important}
  .phase47-media-conversation.phase59-conversation-stack>.phase47-media-composer{position:relative!important;inset:auto!important;margin:0!important;padding:.52rem .62rem calc(.58rem + env(safe-area-inset-bottom))!important;background:rgba(7,9,21,.995)!important;z-index:20!important}
  .phase32-media-next{right:.7rem!important;top:20dvh!important}
  .phase32-media-prev{left:.7rem!important;top:20dvh!important}
}

/* Reaction trays stay entirely inside the right viewer panel on desktop. */
@media(hover:hover) and (pointer:fine){
  .phase32-media-reaction-picker.phase32-fixed-ready,.phase32-media-comment-reaction-picker.phase32-fixed-ready{max-width:min(480px,calc(var(--phase60-viewer-panel-width) - 20px))!important;overflow:visible!important;white-space:nowrap!important}
}

/* --------------------------------------------------------------------------
   Profile hover card usability. The whole identity row is an actual link and
   the bottom-right three-dot control stays visible/clickable.
   -------------------------------------------------------------------------- */
.phase59-profile-hover-card{transition:opacity .12s ease,transform .12s ease!important}
.phase59-hover-identity.phase60-hover-profile-link{color:inherit!important;text-decoration:none!important;border-radius:16px!important;padding:.18rem!important;margin:-.18rem!important}
.phase59-hover-identity.phase60-hover-profile-link:hover{background:rgba(255,255,255,.055)!important}
.phase59-hover-actions{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 44px!important}
.phase59-hover-actions>[data-phase59-more-toggle]{display:flex!important;visibility:visible!important;opacity:1!important;position:relative!important;z-index:5!important;font-size:1rem!important;letter-spacing:.06em!important}
.phase59-hover-more{z-index:8!important}

/* --------------------------------------------------------------------------
   Compact Messenger Studio.
   -------------------------------------------------------------------------- */
.phase59-floating-messenger{width:min(430px,calc(100vw - 24px))!important;height:min(680px,calc(100dvh - 112px))!important}
.phase59-mini-chat-stream{padding:.7rem!important;gap:.42rem!important}
.phase59-mini-message{max-width:86%!important}
.phase60-mini-compose{flex:0 0 auto;border-top:1px solid rgba(255,255,255,.085);background:rgba(7,9,22,.995);position:relative;z-index:4}
.phase60-mini-tools{display:flex;align-items:center;gap:.22rem;padding:.45rem .5rem .15rem;overflow-x:auto;scrollbar-width:none}
.phase60-mini-tools::-webkit-scrollbar{display:none}
.phase60-mini-tool,.phase60-mini-file-label{flex:0 0 auto;width:34px;height:34px;border:0!important;border-radius:11px!important;background:transparent!important;color:#e9e2f7!important;display:grid!important;place-items:center!important;font:inherit!important;font-size:1rem!important;cursor:pointer!important;transition:.13s ease!important}
.phase60-mini-tool:hover,.phase60-mini-file-label:hover,.phase60-mini-tool.active{background:rgba(139,92,246,.18)!important;color:#fff!important;transform:translateY(-1px)}
.phase60-mini-tool.like{font-size:1.18rem!important;color:#d8b4fe!important}
.phase60-mini-tool.recording{background:rgba(239,68,68,.2)!important;color:#fecaca!important;animation:phase60RecordPulse 1s ease-in-out infinite alternate}
@keyframes phase60RecordPulse{to{box-shadow:0 0 0 6px rgba(239,68,68,.08)}}
.phase60-mini-file-label input{display:none!important}
.phase60-mini-input-row{display:grid;grid-template-columns:minmax(0,1fr) 42px;gap:.42rem;padding:.22rem .52rem .55rem;align-items:end}
.phase60-mini-input-row textarea{min-height:42px!important;max-height:110px!important;resize:none!important;border-radius:16px!important;padding:.58rem .68rem!important;margin:0!important}
.phase60-mini-send{width:42px;height:42px;border:0!important;border-radius:13px!important;background:linear-gradient(135deg,#7c3aed,#a855f7)!important;color:#fff!important;font-size:1.05rem!important;font-weight:900!important;cursor:pointer!important}
.phase60-mini-send:disabled{opacity:.55!important;cursor:wait!important}
.phase60-mini-panel{margin:.22rem .5rem .35rem;padding:.55rem;border:1px solid rgba(196,181,253,.16);border-radius:16px;background:linear-gradient(155deg,rgba(28,22,49,.985),rgba(12,13,28,.99));box-shadow:0 16px 42px rgba(0,0,0,.34);max-height:245px;overflow:auto}
.phase60-mini-panel[hidden]{display:none!important}
.phase60-panel-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem;margin-bottom:.5rem;position:sticky;top:-.55rem;padding-top:.1rem;background:rgba(18,16,36,.98);z-index:2}
.phase60-panel-search input{min-height:36px!important;padding:.42rem .55rem!important;border-radius:11px!important;font-size:.75rem!important}
.phase60-panel-search button{border:0;border-radius:10px;background:#7c3aed;color:#fff;padding:0 .7rem;font-size:.7rem;font-weight:850;cursor:pointer}
.phase60-emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:.16rem}
.phase60-emoji-grid button{border:0;background:transparent;border-radius:9px;min-height:34px;font-size:1.25rem;cursor:pointer}.phase60-emoji-grid button:hover{background:rgba(255,255,255,.08);transform:scale(1.13)}
.phase60-sticker-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}
.phase60-sticker-grid button{min-height:74px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(255,255,255,.045);color:#fff;display:grid;place-items:center;gap:.15rem;padding:.42rem;cursor:pointer}.phase60-sticker-grid button:hover{background:rgba(139,92,246,.16)}.phase60-sticker-grid b{font-size:1.65rem}.phase60-sticker-grid span{font-size:.58rem;color:#c3b8d4;font-weight:800;text-align:center}
.phase60-gif-results{display:grid;grid-template-columns:repeat(3,1fr);gap:.36rem}.phase60-gif-results button{position:relative;aspect-ratio:1.1;border:0;border-radius:11px;padding:0;overflow:hidden;background:#0d0d19;cursor:pointer}.phase60-gif-results img{width:100%;height:100%;object-fit:cover;display:block}.phase60-gif-results span{position:absolute;left:.25rem;right:.25rem;bottom:.25rem;padding:.18rem .25rem;border-radius:8px;background:rgba(0,0,0,.68);font-size:.5rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.phase60-attachment-preview{display:flex;align-items:center;gap:.5rem;margin:.2rem .5rem .35rem;padding:.48rem .55rem;border:1px solid rgba(167,139,250,.18);border-radius:13px;background:rgba(139,92,246,.08)}.phase60-attachment-preview[hidden]{display:none!important}.phase60-attachment-preview>span{font-size:1.1rem}.phase60-attachment-preview>div{display:grid;min-width:0;flex:1}.phase60-attachment-preview strong,.phase60-attachment-preview small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phase60-attachment-preview strong{font-size:.7rem}.phase60-attachment-preview small{font-size:.57rem;color:#b7acc9}.phase60-attachment-preview button{width:28px;height:28px;border:0;border-radius:9px;background:rgba(255,255,255,.07);color:#fff;cursor:pointer}
.phase60-recording-state{display:flex;align-items:center;gap:.45rem;margin:.2rem .5rem .35rem;padding:.42rem .55rem;border-radius:12px;background:rgba(239,68,68,.09);border:1px solid rgba(248,113,113,.18);font-size:.68rem;color:#fecaca}.phase60-recording-state[hidden]{display:none!important}.phase60-recording-state b{width:8px;height:8px;border-radius:99px;background:#ef4444;animation:phase60RecordPulse 1s ease-in-out infinite alternate}.phase60-recording-state span{flex:1}
.phase60-selected-rich{display:flex;align-items:center;gap:.5rem;margin:.2rem .5rem .35rem;padding:.42rem .5rem;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.phase60-selected-rich[hidden]{display:none!important}.phase60-selected-rich img{width:46px;height:38px;object-fit:cover;border-radius:8px}.phase60-selected-rich b{font-size:1.5rem}.phase60-selected-rich span{flex:1;min-width:0;font-size:.65rem;color:#d8d0e5}.phase60-selected-rich button{border:0;background:transparent;color:#fff;font-size:1rem;cursor:pointer}

.phase60-message-sticker{font-size:3.2rem;line-height:1.05;padding:.2rem .15rem;max-width:220px;overflow-wrap:anywhere}
.phase60-message-media img{display:block;max-width:240px;max-height:260px;border-radius:14px;object-fit:cover}
.phase60-message-video{display:block;width:min(260px,100%);max-height:270px;border-radius:14px;background:#020617}
.phase60-message-audio{display:grid;gap:.35rem;min-width:min(250px,70vw)}.phase60-message-audio span{font-size:.64rem;font-weight:850;opacity:.8}.phase60-message-audio audio{width:100%;height:34px}
.phase60-message-file{display:grid;grid-template-columns:30px minmax(0,1fr);gap:.15rem .5rem;align-items:center;min-width:210px;max-width:290px;padding:.52rem;border-radius:12px;background:rgba(255,255,255,.065);color:inherit;text-decoration:none}.phase60-message-file>span{grid-row:1/3;font-size:1.2rem}.phase60-message-file b{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phase60-message-file small{font-size:.55rem;opacity:.65}
.phase59-mini-message .phase60-message-sticker{font-size:2.8rem}.phase59-mini-message .phase60-message-media img{max-width:210px;max-height:220px}.phase59-mini-message .phase60-message-file{min-width:190px;max-width:240px}

@media(max-width:680px){
  .phase59-floating-messenger{height:min(76dvh,690px)!important}
  .phase60-emoji-grid{grid-template-columns:repeat(7,1fr)}
  .phase60-sticker-grid{grid-template-columns:repeat(3,1fr)}
}