/* FP Digital Portal 10.6 — auto-hiding stream overlay + repaired DM composer */

/* --------------------------------------------------------------------------
   Shared-screen controls live on top of the stream instead of consuming space
   or colliding with the voice control dock.
   -------------------------------------------------------------------------- */
.voice-stream-viewer-v103{
  isolation:isolate!important;
}
.voice-stream-viewer-v103[hidden]{display:none!important}
.voice-stream-viewer-v103:not([hidden]){display:block!important}
.voice-stream-video-host-v103{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
}
.voice-stream-toolbar-v103,
.voice-stream-audio-footer-v105{
  position:absolute!important;
  left:12px!important;
  right:12px!important;
  z-index:6!important;
  width:auto!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(7,10,17,.78)!important;
  -webkit-backdrop-filter:blur(18px) saturate(1.25)!important;
  backdrop-filter:blur(18px) saturate(1.25)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.36)!important;
  transition:opacity .2s ease,transform .2s ease,visibility .2s ease!important;
}
.voice-stream-toolbar-v103{
  top:12px!important;
  min-height:52px!important;
  border-radius:15px!important;
  cursor:default!important;
}
.voice-stream-audio-footer-v105{
  bottom:12px!important;
  min-height:50px!important;
  border-radius:15px!important;
}
.voice-stream-viewer-v103.stream-controls-hidden-v106 .voice-stream-toolbar-v103{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(-10px)!important;
}
.voice-stream-viewer-v103.stream-controls-hidden-v106 .voice-stream-audio-footer-v105{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(10px)!important;
}
.voice-stream-viewer-v103:hover .voice-stream-toolbar-v103,
.voice-stream-viewer-v103:hover .voice-stream-audio-footer-v105,
.voice-stream-viewer-v103:focus-within .voice-stream-toolbar-v103,
.voice-stream-viewer-v103:focus-within .voice-stream-audio-footer-v105,
.voice-stream-viewer-v103.stream-controls-visible-v106 .voice-stream-toolbar-v103,
.voice-stream-viewer-v103.stream-controls-visible-v106 .voice-stream-audio-footer-v105{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
}
.voice-stream-toolbar-actions-v103.voice-stream-overlay-actions-v106{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  flex-wrap:nowrap!important;
  min-width:0!important;
}
.voice-stream-overlay-button-v106,
.voice-stream-overlay-icon-v106,
.voice-stream-overlay-hangup-v106{
  flex:0 0 auto!important;
  min-width:40px!important;
  height:38px!important;
  padding:0 11px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border:1px solid rgba(255,255,255,.15)!important;
  border-radius:11px!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  box-shadow:none!important;
  white-space:nowrap!important;
}
.voice-stream-overlay-button-v106:hover,
.voice-stream-overlay-icon-v106:hover{
  background:rgba(255,255,255,.16)!important;
  border-color:rgba(255,255,255,.28)!important;
}
.voice-stream-overlay-button-v106 span{font-size:.45rem!important;color:rgba(255,255,255,.65)!important;text-transform:uppercase!important;letter-spacing:.08em!important}
.voice-stream-overlay-button-v106 b{font-size:.55rem!important;color:#fff!important}
.voice-stream-overlay-icon-v106{width:40px!important;padding:0!important;font-size:.9rem!important}
.voice-stream-overlay-hangup-v106{
  width:42px!important;
  padding:0!important;
  border-color:rgba(255,76,102,.58)!important;
  background:#ed4245!important;
  font-size:.85rem!important;
  transform:rotate(135deg)!important;
}
.voice-stream-overlay-hangup-v106:hover{background:#ff5960!important}
.voice-stream-quality-wrap-v106{position:relative!important;flex:0 0 auto!important}
.voice-stream-quality-menu-v106{
  position:absolute!important;
  top:calc(100% + 8px)!important;
  right:0!important;
  z-index:10!important;
  width:190px!important;
  padding:7px!important;
  display:grid!important;
  gap:4px!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:13px!important;
  background:rgba(11,14,22,.96)!important;
  box-shadow:0 18px 55px rgba(0,0,0,.5)!important;
  -webkit-backdrop-filter:blur(18px)!important;
  backdrop-filter:blur(18px)!important;
}
.voice-stream-quality-menu-v106[hidden]{display:none!important}
.voice-stream-quality-menu-v106 button{
  width:100%!important;
  padding:9px 10px!important;
  display:block!important;
  border:0!important;
  border-radius:9px!important;
  background:transparent!important;
  color:#fff!important;
  text-align:left!important;
}
.voice-stream-quality-menu-v106 button:hover,
.voice-stream-quality-menu-v106 button.active{background:rgba(255,255,255,.1)!important}
.voice-stream-quality-menu-v106 b,
.voice-stream-quality-menu-v106 small{display:block!important}
.voice-stream-quality-menu-v106 b{font-size:.58rem!important}
.voice-stream-quality-menu-v106 small{margin-top:3px!important;color:rgba(255,255,255,.58)!important;font-size:.46rem!important}
.voice-stream-viewer-v103:fullscreen .voice-stream-toolbar-v103{top:16px!important;left:16px!important;right:16px!important}
.voice-stream-viewer-v103:fullscreen .voice-stream-audio-footer-v105{bottom:16px!important;left:16px!important;right:16px!important}
.voice-stream-viewer-v103.minimized .voice-stream-toolbar-v103{top:7px!important;left:7px!important;right:7px!important;padding:5px 7px!important}
.voice-stream-viewer-v103.minimized .voice-stream-audio-footer-v105{display:none!important}
.voice-stream-viewer-v103.minimized .voice-stream-ident-v103 small,
.voice-stream-viewer-v103.minimized .voice-stream-overlay-button-v106 span,
.voice-stream-viewer-v103.minimized #voiceScreenFitV103,
.voice-stream-viewer-v103.minimized #voiceCloseScreen{display:none!important}

/* --------------------------------------------------------------------------
   Direct Messages composer: four visible controls need four grid columns.
   This fixes the textarea being forced into a tiny right-side column and the
   Send button dropping to another row.
   -------------------------------------------------------------------------- */
.dm-conversation-panel-v10 .chat-composer-v2{
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:36px 36px minmax(0,1fr) auto!important;
  grid-template-areas:"attach emoji message send"!important;
  align-items:end!important;
  gap:7px!important;
  padding:8px!important;
}
.dm-conversation-panel-v10 #chatAttachActionV103{grid-area:attach!important}
.dm-conversation-panel-v10 #emojiButton{grid-area:emoji!important}
.dm-conversation-panel-v10 #chatInput{
  grid-area:message!important;
  min-width:0!important;
  width:100%!important;
  height:auto!important;
  min-height:36px!important;
  margin:0!important;
  padding:8px 7px!important;
  direction:ltr!important;
  text-align:left!important;
  unicode-bidi:plaintext!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  caret-color:var(--accent)!important;
}
.dm-conversation-panel-v10 #chatSend{grid-area:send!important;align-self:end!important}
.dm-conversation-panel-v10 .chat-compose-wrap{min-width:0!important}
.dm-conversation-panel-v10 .chat-message-list{scrollbar-gutter:stable!important}
.dm-conversation-panel-v10 .chat-message-row{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:42px minmax(0,1fr)!important;
  align-items:start!important;
}
.dm-conversation-panel-v10 .message-content,
.dm-conversation-panel-v10 .message-body{
  min-width:0!important;
  max-width:100%!important;
  text-align:left!important;
  direction:ltr!important;
}
.dm-conversation-panel-v10 .message-body p{margin:0!important}
.dm-conversation-panel-v10 .chat-media-tools{display:flex!important;align-items:center!important;gap:6px!important;min-height:30px!important}

@media(max-width:760px){
  .voice-stream-toolbar-v103,
  .voice-stream-audio-footer-v105{left:7px!important;right:7px!important}
  .voice-stream-toolbar-v103{top:7px!important}
  .voice-stream-audio-footer-v105{bottom:7px!important}
  .voice-stream-ident-v103 small{display:none!important}
  .voice-stream-overlay-button-v106 span{display:none!important}
  .voice-stream-overlay-button-v106{min-width:38px!important;padding:0 9px!important}
  .voice-stream-overlay-actions-v106{gap:5px!important}
  .voice-stream-overlay-icon-v106,
  .voice-stream-overlay-hangup-v106{width:37px!important;min-width:37px!important;height:37px!important}
  .voice-stream-audio-footer-v105{padding:6px 8px!important}
  .voice-stream-health-v105{display:none!important}
  .voice-stream-audio-controls-v105{width:100%!important;justify-content:space-between!important}
  .voice-stream-audio-controls-v105 label{grid-template-columns:minmax(70px,1fr) 34px!important;flex:1!important}
  .voice-stream-audio-controls-v105 label>span,
  .voice-stream-output-v105{display:none!important}
  .dm-conversation-panel-v10 .chat-composer-v2{
    grid-template-columns:34px 34px minmax(0,1fr) auto!important;
    gap:5px!important;
    padding:6px!important;
  }
  .dm-conversation-panel-v10 #chatInput{font-size:16px!important;min-height:34px!important;padding:7px 5px!important}
  .dm-conversation-panel-v10 #chatSend{height:34px!important;padding:0 11px!important}
}


/* --------------------------------------------------------------------------
   Audio attachments: compact, branded players that mix cleanly with portal
   notification sounds instead of looking like raw browser controls.
   -------------------------------------------------------------------------- */
.message-audio-card-v106{
  position:relative;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  width:min(560px,100%);
  min-width:0;
  padding:11px 12px;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));
  border-radius:16px;
  background:
    radial-gradient(circle at 18% 10%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 36%),
    linear-gradient(145deg,color-mix(in srgb,var(--surface) 92%,#000),color-mix(in srgb,var(--panel2) 94%,#000));
  box-shadow:0 10px 28px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.025);
  overflow:hidden;
}
.message-audio-card-v106::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:3px;
  background:linear-gradient(var(--accent),var(--accent2));
  opacity:.7;
}
.message-audio-card-v106.is-playing{
  border-color:color-mix(in srgb,var(--accent) 62%,var(--border));
  box-shadow:0 12px 34px rgba(0,0,0,.26),0 0 28px color-mix(in srgb,var(--accent) 11%,transparent);
}
.message-audio-engine-v106{display:none!important}
.message-audio-play-v106{
  position:relative;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 58%,var(--border));
  border-radius:16px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 24%,var(--panel2)),color-mix(in srgb,var(--accent2) 15%,var(--surface)));
  color:var(--bright);
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 8px 20px rgba(0,0,0,.22);
}
.message-audio-play-v106 span{font-size:.9rem;transform:translateX(1px)}
.message-audio-play-v106.playing span{transform:none;font-size:.72rem;font-weight:900;letter-spacing:-.08em}
.message-audio-play-v106:hover{transform:translateY(-1px);border-color:var(--accent);background:color-mix(in srgb,var(--accent) 30%,var(--panel2))}
.message-audio-main-v106{min-width:0;display:grid;gap:7px}
.message-audio-title-row-v106{display:flex;align-items:flex-start;justify-content:space-between;gap:9px;min-width:0}
.message-audio-title-row-v106>div{min-width:0}
.message-audio-title-row-v106 b,.message-audio-title-row-v106 small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-audio-title-row-v106 b{font-size:.62rem;line-height:1.25}
.message-audio-title-row-v106 small{margin-top:3px;color:var(--muted);font-size:.43rem}
.message-audio-badge-v106{flex:0 0 auto;padding:4px 7px;border:1px solid color-mix(in srgb,var(--accent) 34%,var(--border));border-radius:999px;background:color-mix(in srgb,var(--accent) 9%,var(--panel2));color:var(--accent);font-size:.38rem;font-weight:950;letter-spacing:.08em}
.message-audio-timeline-v106{position:relative;height:25px;display:grid;align-items:center}
.message-audio-wave-v106{position:absolute;inset:1px 0;display:flex;align-items:center;gap:2px;overflow:hidden;pointer-events:none;opacity:.63}
.message-audio-wave-v106 i{flex:1 1 2px;min-width:2px;height:var(--audio-bar);max-height:100%;border-radius:99px;background:linear-gradient(to top,color-mix(in srgb,var(--accent) 74%,transparent),color-mix(in srgb,var(--accent2) 74%,transparent));transform-origin:center}
.message-audio-card-v106.is-playing .message-audio-wave-v106 i{animation:fpAudioPulseV106 .9s ease-in-out infinite alternate;animation-delay:calc(var(--audio-bar) * -7ms)}
@keyframes fpAudioPulseV106{to{transform:scaleY(.58);opacity:.72}}
.message-audio-progress-v106{
  position:relative;
  z-index:2;
  width:100%;
  height:25px;
  margin:0;
  opacity:.01;
  cursor:pointer;
}
.message-audio-timeline-v106::before{content:"";position:absolute;z-index:1;left:0;bottom:0;width:var(--audio-progress,0%);height:2px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 10px color-mix(in srgb,var(--accent) 45%,transparent);pointer-events:none}.message-audio-timeline-v106::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:color-mix(in srgb,var(--border) 75%,transparent)}
.message-audio-controls-v106{display:flex;align-items:center;gap:7px;min-width:0}
.message-audio-time-v106{min-width:74px;color:var(--muted);font-size:.42rem;font-variant-numeric:tabular-nums}
.message-audio-mute-v106{width:25px;height:25px;border:0;border-radius:7px;background:transparent;color:var(--text);font-size:.66rem}
.message-audio-mute-v106:hover{background:var(--hover)}
.message-audio-volume-v106{width:76px;height:16px;accent-color:var(--accent)}
.message-audio-actions-v106{display:grid;gap:6px}
.message-audio-actions-v106 a{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--border);border-radius:9px;background:color-mix(in srgb,var(--surface) 88%,transparent);color:var(--muted);font-size:.65rem;font-weight:900;text-decoration:none}
.message-audio-actions-v106 a:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--bright)}

/* Keep DM text and attachments inside the natural reading column. */
.dm-conversation-panel-v10 .message-attachments-v103{margin-left:0!important;margin-right:auto!important}
.dm-conversation-panel-v10 .chat-message-row,.dm-conversation-panel-v10 .message-content,.dm-conversation-panel-v10 .message-body{direction:ltr!important;text-align:left!important}
.dm-conversation-panel-v10 #chatInput::placeholder{text-align:left!important;direction:ltr!important}

@media(max-width:620px){
  .message-audio-card-v106{grid-template-columns:46px minmax(0,1fr);padding:9px;gap:9px;border-radius:13px}
  .message-audio-play-v106{width:44px;height:44px;border-radius:13px}
  .message-audio-actions-v106{grid-column:1/-1;grid-row:2;display:flex;justify-content:flex-end;margin-top:-3px}
  .message-audio-title-row-v106{padding-right:0}
  .message-audio-badge-v106{display:none}
  .message-audio-volume-v106{width:58px}
  .message-audio-time-v106{min-width:68px}
}

@media(prefers-reduced-motion:reduce){
  .message-audio-card-v106.is-playing .message-audio-wave-v106 i{animation:none}
}