/* v1024 Messaging screen module. */
html[data-design-authority="v1024"] body.chat-open{height:100dvh;overflow:hidden}
html[data-design-authority="v1024"] #messages-view:not(.hidden){display:grid!important;grid-template-rows:auto auto minmax(0,1fr) auto;height:100%;min-height:0;overflow:hidden!important}
html[data-design-authority="v1024"] #messages-list{min-height:0;overflow-y:auto!important;overscroll-behavior:contain}
html[data-design-authority="v1024"] .chat-heading{background:var(--surface-elevated)!important;border-color:var(--border-subtle)!important;box-shadow:var(--shadow-1)!important}
html[data-design-authority="v1024"] .message-form{background:color-mix(in srgb,var(--surface-elevated) 94%,transparent)!important;border-color:var(--border-subtle)!important;box-shadow:var(--shadow-2)!important}
html[data-design-authority="v1024"] .attachment-quick-actions .attachment-quick-action{background:var(--surface-elevated)!important;border-color:var(--border-subtle)!important;box-shadow:var(--shadow-1)!important}

/* Chat menus own their foreground as well as their surface. Legacy menu rules
   used inverse text and became unreadable when v1024 introduced light surfaces. */
html[data-design-authority="v1024"] :is(#chat-menu,#community-chat-menu).premium-menu{
  background:var(--surface-elevated)!important;color:var(--text-primary)!important;
  border:1px solid var(--border-subtle)!important;box-shadow:var(--shadow-3)!important;
}
html[data-design-authority="v1024"] :is(#chat-menu,#community-chat-menu).premium-menu button{
  min-height:var(--target-min)!important;padding:11px 13px!important;
  background:var(--surface-subtle)!important;color:var(--text-high-contrast)!important;
  -webkit-text-fill-color:var(--text-high-contrast)!important;border:1px solid transparent!important;
  opacity:1!important;filter:none!important;transition:none!important;
}
html[data-design-authority="v1024"] :is(#chat-menu,#community-chat-menu).premium-menu button:is(:hover,:focus-visible){
  background:color-mix(in srgb,var(--action-primary) 10%,var(--surface-elevated))!important;
  color:var(--action-primary-strong)!important;-webkit-text-fill-color:var(--action-primary-strong)!important;
  border-color:var(--border-strong)!important;
}
html[data-design-authority="v1024"] :is(#chat-menu,#community-chat-menu).premium-menu button:disabled{
  background:var(--surface-subtle)!important;color:var(--text-secondary)!important;
  -webkit-text-fill-color:var(--text-secondary)!important;opacity:.72!important;
}
html[data-design-authority="v1024"] :is(#clear-messages-both,#report-chat,#community-chat-clear-all){
  color:var(--state-danger)!important;-webkit-text-fill-color:var(--state-danger)!important;
}
html[data-design-authority="v1024"] :is(#chat-menu,#community-chat-menu).premium-menu label{
  color:var(--action-primary-strong)!important;-webkit-text-fill-color:var(--action-primary-strong)!important;
}
html[data-design-authority="v1024"] :is(#chat-menu,#community-chat-menu).premium-menu select{
  min-height:var(--target-min)!important;background:var(--action-secondary)!important;
  color:var(--surface-elevated)!important;-webkit-text-fill-color:var(--surface-elevated)!important;
  border:1px solid var(--border-strong)!important;
}
html[data-design-authority="v1024"] :is(#chat-menu,#community-chat-menu).premium-menu small{
  color:var(--text-secondary)!important;-webkit-text-fill-color:var(--text-secondary)!important;
  font-size:var(--supporting-min)!important;
}

/* Outgoing messages use the same certified text/surface pairing as the chat
   menu: 18.43:1 in light mode and 15.12:1 in dark mode. Alignment, border and
   tail shape identify ownership without sacrificing readable foregrounds. */
html[data-design-authority="v1024"] :is(.messages .msg.me,.community-message.mine){
  background:var(--surface-subtle)!important;background-image:none!important;
  color:var(--text-high-contrast)!important;-webkit-text-fill-color:var(--text-high-contrast)!important;
  border-color:var(--border-strong)!important;text-shadow:none!important;transition:none!important;
}
html[data-design-authority="v1024"] :is(.messages .msg.me,.community-message.mine) :where(.message-text,.message-time,.delivery-state,.forwarded-label,.message-translation,.message-translation b,.message-translation span,.message-translation small,.attachment small){
  color:var(--text-high-contrast)!important;-webkit-text-fill-color:var(--text-high-contrast)!important;
  opacity:1!important;text-shadow:none!important;
}
html[data-design-authority="v1024"] :is(.messages .msg.me,.community-message.mine) a{
  color:var(--text-high-contrast)!important;-webkit-text-fill-color:var(--text-high-contrast)!important;
  font-weight:850!important;text-decoration:underline!important;text-decoration-thickness:1.5px!important;
  text-underline-offset:3px!important;
}
html[data-design-authority="v1024"] :is(.messages .msg.me,.community-message.mine) .delivery-state::before{
  color:var(--action-primary-strong)!important;-webkit-text-fill-color:var(--action-primary-strong)!important;
}
html[data-design-authority="v1024"] :is(.messages .msg.me,.community-message.mine) :is(.status-queued,.status-sent,.status-delivered,.status-read){
  min-height:22px!important;padding:2px 7px!important;border:1px solid color-mix(in srgb,var(--status-success-text) 22%,transparent)!important;
  border-radius:999px!important;background:var(--status-success-surface)!important;
  color:var(--status-success-text)!important;-webkit-text-fill-color:var(--status-success-text)!important;
  font-size:max(.7rem,var(--supporting-min))!important;font-weight:900!important;line-height:1.2!important;
}

/* v1034 Media Atelier: the image defines the message bubble instead of sitting
   inside a generic wide text card. This removes the unused side column while
   preserving Fline's Preview, Download and Share actions below the media. */
html[data-design-authority="v1024"] :is(.messages .msg.media-message,.community-message.media-message){
  width:min(78vw,380px)!important;
  max-width:calc(100vw - 58px)!important;
  min-width:0!important;
  padding:5px 5px 7px!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  border-radius:17px!important;
}
html[data-design-authority="v1024"] :is(.messages .msg.media-message,.community-message.media-message)>.image-attachment{
  display:grid!important;width:100%!important;min-width:0!important;gap:7px!important;margin:0!important;
}
html[data-design-authority="v1024"] :is(.messages .msg.media-message,.community-message.media-message)>.image-attachment>img{
  display:block!important;width:100%!important;max-width:none!important;height:auto!important;
  max-height:min(58dvh,480px)!important;margin:0!important;border:0!important;
  border-radius:13px!important;object-fit:cover!important;background:var(--surface-subtle)!important;
}
html[data-design-authority="v1024"] :is(.messages .msg.media-message,.community-message.media-message) .attachment-quick-actions{
  width:100%!important;margin:1px 0 0!important;gap:5px!important;
}
html[data-design-authority="v1024"] :is(.messages .msg.media-message,.community-message.media-message)>.message-time{
  margin:4px 4px 0!important;text-align:end!important;
}
@media(max-width:380px){
  html[data-design-authority="v1024"] :is(.messages .msg.media-message,.community-message.media-message){width:min(80vw,300px)!important}
  html[data-design-authority="v1024"] :is(.messages .msg.media-message,.community-message.media-message) .attachment-quick-actions .attachment-quick-action>b{font-size:.68rem!important}
}

/* v1077 Premium conversation-header spacing authority. Every element owns a
   protected layout cell, so identity and actions remain calm and separated. */
html[data-design-authority="v1024"] .chat-open #messages-view>.chat-heading{
  grid-template-columns:42px minmax(72px,1fr) 44px 44px!important;
  column-gap:10px!important;
  padding-inline:12px!important;
}
html[data-design-authority="v1024"] .chat-open .chat-heading .contact-avatar{grid-column:1!important;grid-row:1!important}
html[data-design-authority="v1024"] .chat-open .chat-heading .chat-identity{grid-column:2!important;grid-row:1!important;min-width:0;margin-left:2px!important;padding-right:3px!important}
html[data-design-authority="v1024"] .chat-open .chat-heading .chat-identity #chat-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-design-authority="v1024"] .chat-open .chat-heading .chat-call-actions{
  position:relative;grid-column:3!important;grid-row:1!important;display:grid;place-items:center;
  width:44px!important;min-width:44px!important;max-width:44px!important;justify-self:center!important
}
html[data-design-authority="v1024"] .chat-open .chat-heading .overflow-wrap{
  grid-column:4!important;grid-row:1!important;width:44px!important;min-width:44px!important;max-width:44px!important;
  margin:0!important;justify-self:end!important
}
html[data-design-authority="v1024"] .chat-call-trigger{
  box-sizing:border-box!important;display:grid;place-items:center;width:42px!important;height:42px!important;
  min-width:42px!important;min-height:42px!important;max-width:42px!important;max-height:42px!important;padding:0!important;
  border:1px solid color-mix(in srgb,var(--action-primary) 22%,var(--border-subtle));border-radius:15px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--action-primary) 9%,var(--surface-elevated)),var(--surface-elevated));color:var(--action-primary-strong);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 6px 16px rgba(15,23,42,.08);touch-action:manipulation
}
html[data-design-authority="v1024"] .chat-call-trigger .ui-icon{width:18px;height:18px;transform:translateX(-2px)}
html[data-design-authority="v1024"] .chat-call-chevron{position:absolute;right:5px;bottom:6px;font-size:.58rem;font-weight:900;line-height:1}
html[data-design-authority="v1024"] .chat-call-actions button:active{transform:scale(.94)}
html[data-design-authority="v1024"] .chat-call-actions button:focus-visible{outline:2px solid color-mix(in srgb,var(--action-primary) 48%,transparent)!important;outline-offset:2px!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--action-primary) 10%,transparent),0 7px 18px rgba(15,23,42,.1)!important}
html[data-design-authority="v1024"] .chat-open .chat-heading #chat-menu-button{
  box-sizing:border-box!important;width:42px!important;height:42px!important;min-width:42px!important;min-height:42px!important;
  max-width:42px!important;max-height:42px!important;padding:0!important
}
html[data-design-authority="v1024"] .chat-call-actions button:disabled{opacity:.45;transform:none}
html[data-design-authority="v1024"] .chat-call-actions.hidden{display:none!important}
html[data-design-authority="v1024"] .chat-call-menu{
  position:absolute;top:calc(100% + 9px);right:0;z-index:24050;display:flex;gap:6px;padding:7px;
  border:1px solid color-mix(in srgb,var(--action-primary) 20%,var(--border-subtle));border-radius:18px;
  background:color-mix(in srgb,var(--surface-elevated) 97%,transparent);box-shadow:0 18px 42px rgba(15,23,42,.2),inset 0 1px 0 rgba(255,255,255,.8)
}
html[data-design-authority="v1024"] .chat-call-menu button{
  display:grid;grid-template-columns:20px auto;place-items:center;gap:7px;width:auto;min-width:82px;min-height:46px;padding:7px 11px;
  border:1px solid var(--border-subtle);border-radius:13px;background:var(--surface-subtle);color:var(--text-primary);font-size:.75rem;font-weight:850;touch-action:manipulation
}
html[data-design-authority="v1024"] .chat-call-menu button .ui-icon{width:18px;height:18px;color:var(--action-primary-strong)}
html[data-design-authority="v1024"] .chat-call-menu.hidden{display:none!important}
html[data-design-authority="v1024"] .chat-avatar-back{position:relative;cursor:pointer;touch-action:manipulation}
@media(max-width:720px){
  html[data-design-authority="v1024"] body.chat-open #back{display:none!important}
  html[data-design-authority="v1024"] .chat-open #messages-view>.chat-heading{
    grid-template-columns:42px minmax(54px,1fr) 44px 44px!important;padding:8px 10px!important;column-gap:8px!important
  }
  html[data-design-authority="v1024"] .chat-avatar-back:after{content:"‹";position:absolute;left:-4px;bottom:-3px;display:grid;place-items:center;width:17px;height:17px;border:1px solid var(--border-subtle);border-radius:50%;background:var(--surface-elevated);color:var(--action-primary-strong);font-size:1rem;font-weight:950;box-shadow:0 3px 8px rgba(15,23,42,.16)}
}
@media(max-width:370px){
  html[data-design-authority="v1024"] .chat-open #messages-view>.chat-heading{grid-template-columns:38px minmax(44px,1fr) 42px 40px!important;padding:7px 8px!important;column-gap:6px!important}
}

/* v1079 Group conversation header and overlay authority. The avatar owns the
   back action, matching direct chat, while the menu has an independent cell. */
html[data-design-authority="v1024"] #community-chat-modal .community-chat-back{display:none!important}
html[data-design-authority="v1024"] #community-chat-modal .chat-heading.community-chat-head{
  grid-template-columns:44px minmax(0,1fr) 44px!important;gap:10px!important;padding:8px 12px!important
}
html[data-design-authority="v1024"] #community-chat-modal .community-chat-avatar{
  grid-column:1!important;grid-row:1!important;width:44px!important;height:44px!important;min-width:44px!important;
  cursor:pointer;touch-action:manipulation
}
html[data-design-authority="v1024"] #community-chat-modal .community-chat-identity{grid-column:2!important;grid-row:1!important;margin-left:2px!important}
html[data-design-authority="v1024"] #community-chat-modal .community-chat-head-actions{
  grid-column:3!important;grid-row:1!important;width:44px!important;min-width:44px!important;justify-self:end!important
}
html[data-design-authority="v1024"] #community-chat-modal .community-avatar-back:after{
  content:"‹";position:absolute;left:-3px;bottom:-3px;display:grid;place-items:center;width:17px;height:17px;
  border:1px solid var(--border-subtle);border-radius:50%;background:var(--surface-elevated);color:var(--action-primary-strong);
  font-size:1rem;font-weight:950;box-shadow:0 3px 8px rgba(15,23,42,.16)
}
html[data-design-authority="v1024"] #community-chat-modal .community-avatar-back:focus-visible{
  outline:2px solid color-mix(in srgb,var(--action-primary) 52%,transparent);outline-offset:3px
}
html[data-design-authority="v1024"] body>#community-chat-menu[data-menu-open="true"]{
  display:grid!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important
}

/* v1083 Media Attachment Authority. Audio and video remain readable and
   hardware-friendly inside a message without expanding the conversation. */
.attachment.video-attachment{display:grid;gap:7px;width:min(360px,76vw)}
.attachment.video-attachment video{
  display:block;width:100%;max-height:52vh;aspect-ratio:16/9;object-fit:contain;background:#080b12;border-radius:17px;
  border:1px solid color-mix(in srgb,var(--border-subtle) 76%,#d4af37);box-shadow:none
}
.attachment.video-attachment>small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-secondary);font-size:.75rem;font-weight:800}
.attachment.audio-attachment audio{max-width:100%}
@media(max-width:390px){
  html[data-design-authority="v1024"] #community-chat-modal .chat-heading.community-chat-head{
    grid-template-columns:40px minmax(0,1fr) 40px!important;gap:8px!important;padding:8px 10px!important
  }
  html[data-design-authority="v1024"] #community-chat-modal .community-chat-avatar{width:40px!important;height:40px!important;min-width:40px!important}
  html[data-design-authority="v1024"] #community-chat-modal .community-chat-head-actions{width:40px!important;min-width:40px!important}
}