/* Black River v50 — stable Discord-style call stage, compact chat rows, Together timer. */

/* Relationship tracker: always visible in the active conversation header. */
html body.river-chat .conversation-tools .together-launch{
  display:flex!important;align-items:center!important;gap:7px!important;
  min-height:34px!important;padding:0 12px!important;margin-right:4px!important;
  border:1px solid #f0a9bd4a!important;border-radius:999px!important;
  background:#f0a9bd12!important;color:#f4bfd0!important;
  white-space:nowrap!important;font-size:10px!important;font-weight:600!important;
}
html body.river-chat .conversation-tools .together-launch svg{width:15px!important;height:15px!important;flex:0 0 auto!important}
html body.river-chat .conversation-tools .together-launch b{font-weight:800!important;color:#ffd6e2!important}
@media(max-width:980px){html body.river-chat .conversation-tools .together-launch span{max-width:120px!important;overflow:hidden!important;text-overflow:ellipsis!important}}
@media(max-width:700px){html body.river-chat .conversation-tools .together-launch{width:34px!important;min-width:34px!important;padding:0!important;justify-content:center!important}html body.river-chat .conversation-tools .together-launch span{display:none!important}}

/* Message rows never become giant full-width bars. */
html body.river-chat .message-list .message{
  display:flex!important;align-items:flex-end!important;gap:9px!important;
  width:auto!important;max-width:min(760px,84%)!important;min-width:0!important;
  margin:5px 0!important;padding:0!important;background:transparent!important;
  border:0!important;box-shadow:none!important;
}
html body.river-chat .message-list .message.own{margin-left:auto!important;margin-right:0!important;flex-direction:row-reverse!important}
html body.river-chat .message-list .message:not(.own){margin-left:0!important;margin-right:auto!important}
html body.river-chat .message-list .message>.avatar{
  flex:0 0 30px!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;
  border-radius:50%!important;overflow:hidden!important;margin:0 0 2px!important;background:#17191d!important;
}
html body.river-chat .message-list .message>.avatar img{width:100%!important;height:100%!important;object-fit:cover!important}
html body.river-chat .message-list .message.message-grouped>.avatar{visibility:hidden!important}
html body.river-chat .message-list .message-content{
  display:inline-block!important;flex:0 1 auto!important;width:auto!important;max-width:100%!important;min-width:0!important;
  margin:0!important;padding:7px 10px!important;border:0!important;border-radius:10px!important;
  background:transparent!important;box-shadow:none!important;
}
html body.river-chat .message-list .message:hover .message-content{background:#ffffff06!important}
html body.river-chat .message-list .message.own .message-content{background:#ffffff04!important}
html body.river-chat .message-list .message.own:hover .message-content{background:#ffffff08!important}
html body.river-chat .message-list .message-text{width:auto!important;max-width:100%!important;overflow-wrap:anywhere!important;white-space:pre-wrap!important}
html body.river-chat .message-list .message::before,html body.river-chat .message-list .message::after{display:none!important;content:none!important}

/* Typing indicator sits exactly where it belongs: directly above the composer. */
html body.river-chat #typingIndicator{
  position:relative!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;top:auto!important;
  flex:0 0 auto!important;align-self:flex-start!important;display:flex!important;align-items:center!important;gap:7px!important;
  width:max-content!important;max-width:calc(100% - 48px)!important;min-height:0!important;height:auto!important;
  margin:0 24px 6px!important;padding:5px 9px!important;
  border:1px solid #ffffff10!important;border-radius:999px!important;background:#111214e8!important;
  color:#b5bac1!important;font-size:10px!important;line-height:1.2!important;box-shadow:none!important;pointer-events:none!important;
}
html body.river-chat #typingIndicator:empty{display:none!important;margin:0!important;padding:0!important;border:0!important;height:0!important}
html body.river-chat #typingIndicator .avatar{flex:0 0 20px!important;width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;border-radius:50%!important}
html body.river-chat #typingIndicator .typing-dots{margin:0!important;letter-spacing:2px!important}

/* Stable call surface. Participant changes never alter stage height. */
html body.river-chat .conversation-surface.group-call-docked{--call-dock-height:420px}
html body.river-chat .group-call-panel.group-call-dock{
  flex:0 0 var(--call-dock-height,420px)!important;height:var(--call-dock-height,420px)!important;
  min-height:280px!important;max-height:min(68vh,620px)!important;padding:8px!important;
  background:#111214!important;border-bottom:1px solid #ffffff10!important;overflow:hidden!important;
}
html body.river-chat .group-call-panel.group-call-dock .group-call-workspace{
  position:relative!important;display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important;
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;gap:8px!important;
}
html body.river-chat .group-call-panel.group-call-dock .group-call-grid{
  grid-column:1!important;grid-row:1!important;display:grid!important;align-items:center!important;justify-items:stretch!important;
  width:100%!important;height:100%!important;min-width:0!important;min-height:0!important;padding:0 0 58px!important;gap:8px!important;
  background:#111214!important;overflow:hidden!important;
}
html body.river-chat .group-call-panel.group-call-dock .group-call-card{
  position:relative!important;min-width:0!important;min-height:0!important;width:100%!important;height:100%!important;
  max-width:100%!important;max-height:100%!important;overflow:hidden!important;border:0!important;outline:0!important;
  border-radius:10px!important;background:#0b0c0e!important;box-shadow:none!important;isolation:isolate!important;
}
html body.river-chat .group-call-panel.group-call-dock .group-call-card::after{display:none!important;content:none!important;border:0!important;box-shadow:none!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-card video{
  position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
  object-fit:cover!important;object-position:center!important;background:#050607!important;transform:none!important;
}
html body.river-chat .group-call-panel.group-call-dock .group-call-card.self video{transform:scaleX(-1)!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-card.screen-sharing video,
html body.river-chat .group-call-panel.group-call-dock .group-call-grid.focus-mode>.group-call-card.is-focused video,
html body.river-chat .group-call-panel.group-call-dock .group-call-card:fullscreen video{object-fit:contain!important;transform:none!important;background:#000!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-fallback{position:absolute!important;inset:0!important;display:grid!important;place-items:center!important;background:#15171a!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-fallback .avatar{width:76px!important;height:76px!important;border-radius:50%!important;overflow:hidden!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-name{position:absolute!important;left:9px!important;bottom:9px!important;z-index:6!important;padding:4px 7px!important;border-radius:6px!important;background:#000b!important;color:#fff!important;font-size:10px!important}
html body.river-chat .group-call-panel.group-call-dock .group-peer-state{position:absolute!important;left:9px!important;top:9px!important;z-index:6!important;padding:4px 7px!important;border-radius:6px!important;background:#000a!important;color:#c9cdd3!important;font-size:9px!important}

/* 1/2/3 participant geometry remains stable and bounded. */
html body.river-chat .group-call-panel.group-call-dock .group-call-grid[data-count="1"]{grid-template-columns:minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-grid[data-count="1"]>.group-call-card{max-width:min(100%,960px)!important;justify-self:center!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:minmax(0,1fr)!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-grid[data-count="3"]{grid-template-columns:minmax(0,1.55fr) minmax(230px,.75fr)!important;grid-template-rows:repeat(2,minmax(0,1fr))!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-grid[data-count="3"]>.group-call-card:first-child{grid-column:1!important;grid-row:1/-1!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-grid[data-count="3"]>.group-call-card:nth-child(2){grid-column:2!important;grid-row:1!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-grid[data-count="3"]>.group-call-card:nth-child(3){grid-column:2!important;grid-row:2!important}

/* Clicking a participant = real focus mode. Others disappear until clicked again. */
html body.river-chat .group-call-panel.group-call-dock .group-call-grid.focus-mode{display:grid!important;grid-template-columns:1fr!important;grid-template-rows:1fr!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-grid.focus-mode>.group-call-card:not(.is-focused){display:none!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-grid.focus-mode>.group-call-card.is-focused{display:grid!important;grid-column:1!important;grid-row:1!important;width:100%!important;height:100%!important;max-width:100%!important}

/* No blue Arnie/focus outline anywhere in a call. */
html body.river-chat .group-call-grid>.arnie-call-tile.group-call-card,
html body.river-chat .group-call-grid>.arnie-call-tile.group-call-card:hover,
html body.river-chat .group-call-grid>.arnie-call-tile.group-call-card:focus-within{
  border:0!important;outline:0!important;box-shadow:none!important;background:#0b0c0e!important;
}

/* Participant tile actions never collide with call-level fullscreen/minimize. */
html body.river-chat .group-call-panel.group-call-dock .group-card-actions{
  position:absolute!important;z-index:20!important;top:8px!important;right:8px!important;display:flex!important;gap:6px!important;opacity:0!important;
}
html body.river-chat .group-call-panel.group-call-dock .group-call-card:hover .group-card-actions,
html body.river-chat .group-call-panel.group-call-dock .group-call-card:focus-within .group-card-actions{opacity:1!important}
html body.river-chat .group-call-panel.group-call-dock .group-card-actions button{
  position:static!important;width:30px!important;height:30px!important;min-width:30px!important;min-height:30px!important;padding:0!important;
  border:0!important;border-radius:7px!important;background:#111214e8!important;color:#fff!important;display:grid!important;place-items:center!important;
}
html body.river-chat .group-call-panel.group-call-dock .group-call-head-actions{top:10px!important;left:10px!important;right:auto!important;gap:6px!important}

/* Controls stay centered, separated from the resize handle and card actions. */
html body.river-chat .group-call-panel.group-call-dock .group-call-controls{
  left:50%!important;bottom:10px!important;translate:-50% 0!important;z-index:50!important;gap:6px!important;padding:5px!important;
  border:1px solid #ffffff12!important;border-radius:15px!important;background:#111214eb!important;box-shadow:0 8px 24px #0009!important;
}
html body.river-chat .group-call-panel.group-call-dock .group-call-control{width:38px!important;height:38px!important;min-width:38px!important;min-height:38px!important;border-radius:10px!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-status-pill{top:10px!important;left:50%!important;transform:translateX(-50%)!important;border:0!important;background:#111214d8!important;color:#cfd2d7!important}

/* Apps dock consumes spare call width instead of sitting on top of buttons/video. */
html body.river-chat .group-call-panel.group-call-dock.apps-open .group-call-workspace{grid-template-columns:minmax(0,1fr) minmax(290px,350px)!important}
html body.river-chat .group-call-panel.group-call-dock.apps-open .group-call-grid{grid-column:1!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-app-dock{
  position:relative!important;inset:auto!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;
  grid-column:2!important;grid-row:1!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;
  margin:0!important;padding:12px!important;border:1px solid #ffffff12!important;border-radius:12px!important;background:#17181c!important;overflow:auto!important;
  box-shadow:none!important;backdrop-filter:none!important;
}
html body.river-chat .group-call-panel.group-call-dock .group-call-app-dock[hidden]{display:none!important}
html body.river-chat .group-call-panel.group-call-dock.apps-open .group-call-app-dock{display:block!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-app-grid{grid-template-columns:1fr!important;gap:7px!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-app-grid>button{min-height:58px!important;padding:9px 10px!important}

/* Collapse is deterministic: a single 64px strip. */
html body.river-chat .group-call-panel.group-call-dock.minimized{height:64px!important;min-height:64px!important;max-height:64px!important;flex-basis:64px!important}
html body.river-chat .group-call-panel.group-call-dock.minimized .group-call-grid,
html body.river-chat .group-call-panel.group-call-dock.minimized .group-call-controls,
html body.river-chat .group-call-panel.group-call-dock.minimized .group-call-app-dock{display:none!important}

/* Real fullscreen participant view. */
html body.river-chat .group-call-panel.group-call-dock .group-call-card:fullscreen{
  width:100vw!important;height:100vh!important;max-width:none!important;max-height:none!important;border-radius:0!important;background:#000!important;
}
html body.river-chat .group-call-panel.group-call-dock .group-call-card:fullscreen .group-card-actions{opacity:1!important;top:16px!important;right:16px!important}

/* Side-by-side chat remains usable and call height/width only change by explicit drag. */
html body.river-chat .conversation-surface.call-docked.call-side-chat>.group-call-panel.group-call-dock{height:auto!important;min-height:0!important;max-height:none!important;flex-basis:auto!important}
html body.river-chat .conversation-surface.call-docked>.call-chat-region #messageList{overscroll-behavior:contain!important}

@media(max-width:900px){
  html body.river-chat .group-call-panel.group-call-dock.apps-open .group-call-workspace{grid-template-columns:1fr!important}
  html body.river-chat .group-call-panel.group-call-dock .group-call-app-dock{
    position:absolute!important;z-index:90!important;left:12px!important;right:12px!important;bottom:64px!important;width:auto!important;height:auto!important;max-height:calc(100% - 82px)!important;
    box-shadow:0 18px 60px #000c!important;
  }
  html body.river-chat .group-call-panel.group-call-dock .group-call-app-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media(max-width:700px){
  html body.river-chat .group-call-panel.group-call-dock{min-height:260px!important}
  html body.river-chat .group-call-panel.group-call-dock .group-call-grid[data-count="2"]{grid-template-columns:1fr!important;grid-template-rows:repeat(2,minmax(0,1fr))!important}
  html body.river-chat .group-call-panel.group-call-dock .group-call-grid[data-count="3"]{grid-template-columns:1fr!important;grid-template-rows:repeat(3,minmax(0,1fr))!important}
  html body.river-chat .group-call-panel.group-call-dock .group-call-grid[data-count="3"]>.group-call-card{grid-column:1!important;grid-row:auto!important}
}

/* Direct calls use the same fixed-size stage instead of changing height while media changes. */
html body.river-chat #callPanel.discord-call-dock{
  flex:0 0 var(--call-dock-height,420px)!important;height:var(--call-dock-height,420px)!important;
  min-height:280px!important;max-height:min(68vh,620px)!important;overflow:hidden!important;background:#111214!important;
}
html body.river-chat #callPanel.discord-call-dock .call-stage{height:100%!important;min-height:0!important;background:#0b0c0e!important}
html body.river-chat #callPanel.discord-call-dock #remoteParticipant,
html body.river-chat #callPanel.discord-call-dock #remoteVideo,
html body.river-chat #callPanel.discord-call-dock .remote-placeholder{object-fit:cover!important;transform:none!important}
html body.river-chat #callPanel.discord-call-dock .local-tile{max-width:220px!important;max-height:132px!important;aspect-ratio:16/9!important;overflow:hidden!important}
html body.river-chat #callPanel.discord-call-dock .local-tile video{width:100%!important;height:100%!important;object-fit:cover!important}
html body.river-chat #callStage>.arnie-call-tile.direct{border:0!important;outline:0!important;box-shadow:none!important}

/* v51 camera-state hotfix: never let avatar fallback cover a live camera. */
html body.river-chat .group-call-panel.group-call-dock .group-call-card.video-connected>.group-call-fallback{display:none!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-card:not(.video-connected)>video{visibility:hidden!important;opacity:0!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-card.video-connected>video{visibility:visible!important;opacity:1!important;z-index:2!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-card>.group-call-fallback{z-index:1!important}
html body.river-chat .group-call-panel.group-call-dock .group-call-card>.group-call-name,
html body.river-chat .group-call-panel.group-call-dock .group-call-card>.group-peer-state,
html body.river-chat .group-call-panel.group-call-dock .group-call-card>.group-card-actions{z-index:6!important}

/* v52: movable media panel so it can be pulled off camera tiles. */
html body.river-chat .soundboard-popover.media-panel-draggable>header{cursor:grab!important;user-select:none!important;touch-action:none!important}
html body.river-chat .soundboard-popover.media-panel-draggable.dragging>header{cursor:grabbing!important}
html body.river-chat .soundboard-popover.media-panel-draggable>header button{cursor:pointer!important}