/* UmrahRoom Community Live Chat — preview parity refinement (V5).
   This stylesheet only affects the public Live Chat UI; it does not alter
   chat authentication, API calls, persistence, moderation, or message data. */

@media (max-width:900px) {
  /* The preview is a 55px brand header + 75px room header + 60px bottom nav. */
  html body.community-live-v5 .urc-live-main {
    grid-template-rows:75px minmax(0,1fr)!important;
    background:#fff!important;
  }
  html body.community-live-v5 .ur-global-header .nav-row {
    min-height:55px!important;
    gap:6px!important;
  }
  html body.community-live-v5 .ur-global-header .ur-brand-word {
    font-size:16px!important;
    letter-spacing:-.6px!important;
  }

  /* Matching circular hashtag, heading, online count and menu controls. */
  html body.community-live-v5 .urc-live-header {
    height:75px!important;
    min-height:75px!important;
    gap:9px!important;
    padding:0 11px!important;
    border-bottom:0!important;
    background-color:#f8fcff!important;
    background-image:linear-gradient(rgba(251,253,255,.74),rgba(251,253,255,.74)),url('../ui/live-chat/doodles/umrahroom-geometric-chat-pattern.svg')!important;
    background-size:auto,54px 54px!important;
    background-repeat:repeat!important;
  }
  html body.community-live-v5 .urc-live-header-title {gap:9px!important}
  html body.community-live-v5 .urc-live-title-icon {
    width:47px!important;
    height:47px!important;
    flex:0 0 47px!important;
    border-radius:50%!important;
    background:#0874f9!important;
    box-shadow:none!important;
  }
  html body.community-live-v5 .urc-live-title-icon .ur-live-icon {font-size:29px!important}
  html body.community-live-v5 .urc-live-title-copy h1 {
    margin:0!important;
    font:800 16px/1.1 Inter,system-ui,sans-serif!important;
    letter-spacing:-.55px!important;
    color:#081c57!important;
    white-space:nowrap!important;
  }
  html body.community-live-v5 .urc-live-title-copy p {
    margin:6px 0 0!important;
    font:500 11px/1.2 Inter,system-ui,sans-serif!important;
    color:#446b9c!important;
  }
  html body.community-live-v5 .urc-live-presence,
  html body.community-live-v5 .urc-live-more-button {
    border:1px solid #dce8f8!important;
    border-radius:12px!important;
    background:#fff!important;
    color:#11336d!important;
    box-shadow:none!important;
  }
  html body.community-live-v5 .urc-live-header-status {gap:6px!important}

  /* One seamless wallpaper across both messages and empty chat space. */
  html body.community-live-v5 .urc-live-scroll-region {
    min-height:0!important;
    background-color:#fbfdff!important;
    background-image:linear-gradient(rgba(251,253,255,.68),rgba(251,253,255,.68)),url('../ui/live-chat/doodles/umrahroom-geometric-chat-pattern.svg')!important;
    background-size:auto,54px 54px!important;
    background-position:center top!important;
    background-repeat:repeat!important;
    scrollbar-width:thin!important;
    scrollbar-color:#d0e2f7 transparent!important;
  }
  html body.community-live-v5 .urc-live-messages {
    min-height:180px!important;
    padding:8px 11px 16px!important;
    background:transparent!important;
    background-image:none!important;
  }

  /* Pinned announcement card in the preview's soft blue treatment. */
  html body.community-live-v5 .urc-live-pinned {
    min-height:68px!important;
    margin:10px 11px 14px!important;
    padding:10px 12px!important;
    gap:10px!important;
    border:1px solid #c8dfff!important;
    border-radius:17px!important;
    background:linear-gradient(110deg,#e6f2ff,#e5f2ff)!important;
    box-shadow:none!important;
  }
  html body.community-live-v5 .urc-live-pinned b {
    font:800 13px/1.2 Inter,system-ui,sans-serif!important;
    color:#0864db!important;
  }
  html body.community-live-v5 .urc-live-pinned small {
    font:500 11px/1.35 Inter,system-ui,sans-serif!important;
    color:#245391!important;
  }
  html body.community-live-v5 .urc-live-pin-symbol {
    width:26px!important;
    height:30px!important;
    color:#0870f5!important;
  }
  html body.community-live-v5 .urc-live-pin-symbol svg {width:24px!important;height:24px!important}
  html body.community-live-v5 .urc-live-joined {
    margin:0 11px 15px!important;
    gap:8px!important;
    color:#2e6cd0!important;
  }
  html body.community-live-v5 .urc-live-joined>span {height:1px!important;background:#d6e6f9!important}

  /* Message rows, profile pictures, topic pills and readable bubbles. */
  html body.community-live-v5 .urc-live-messages .ur-chat-message {
    display:grid!important;
    grid-template-columns:38px minmax(0,1fr)!important;
    align-items:start!important;
    gap:8px!important;
    margin:0 0 15px!important;
    padding:0!important;
  }
  html body.community-live-v5 .urc-live-messages .urc-message-body {
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    padding:0!important;
    margin:0!important;
    background:transparent!important;
    border:0!important;
  }
  html body.community-live-v5 .urc-live-messages .ur-community-avatar {
    width:38px!important;
    height:38px!important;
    border-radius:50%!important;
    border:2px solid #fff!important;
    background:linear-gradient(135deg,#c9defa,#f0f7ff)!important;
    color:#2161b3!important;
    font:800 12px Inter,system-ui,sans-serif!important;
  }
  html body.community-live-v5 .urc-live-messages .ur-community-avatar img {
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    border-radius:50%!important;
  }
  html body.community-live-v5 .urc-live-messages .ur-chat-message-head {
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    height:24px!important;
    min-height:24px!important;
    gap:7px!important;
    padding:0!important;
  }
  html body.community-live-v5 .urc-live-messages .ur-chat-message-head b {
    color:#081c57!important;
    font:800 12px/1.2 Inter,system-ui,sans-serif!important;
    max-width:55%!important;
    text-overflow:ellipsis!important;
    overflow:hidden!important;
    white-space:nowrap!important;
  }
  html body.community-live-v5 .urc-live-messages .urc-message-topic {
    margin:0!important;
    margin-inline-start:0!important;
    flex:0 0 auto!important;
    padding:4px 9px!important;
    border-radius:999px!important;
    background:#e2f0ff!important;
    color:#0768e4!important;
    font:750 10px/1 Inter,system-ui,sans-serif!important;
  }
  html body.community-live-v5 .urc-live-messages .ur9-chat-more {
    display:grid!important;
    place-items:center!important;
    margin-left:auto!important;
    margin-inline-start:auto!important;
    flex:0 0 24px!important;
    width:24px!important;
    height:24px!important;
    border:0!important;
    background:transparent!important;
  }
  html body.community-live-v5 .urc-live-messages .urc-message-line {
    display:flex!important;
    align-items:flex-end!important;
    width:100%!important;
    gap:6px!important;
    min-width:0!important;
  }
  html body.community-live-v5 .urc-live-messages .urc-message-bubble {
    width:fit-content!important;
    max-width:min(calc(100% - 45px),340px)!important;
    min-width:0!important;
    padding:10px 12px!important;
    border:1px solid #e3eefa!important;
    border-radius:5px 16px 16px 16px!important;
    background:#fff!important;
    box-shadow:0 3px 10px rgba(24,72,118,.035)!important;
  }
  html body.community-live-v5 .urc-live-messages .urc-message-bubble>p {
    margin:0!important;
    padding:0!important;
    background:none!important;
    border:0!important;
    color:#10275c!important;
    font:500 13px/1.46 Inter,system-ui,sans-serif!important;
    white-space:pre-wrap!important;
    overflow-wrap:anywhere!important;
  }
  html body.community-live-v5 .urc-live-messages .urc-message-time {
    font:500 9px/1.2 Inter,system-ui,sans-serif!important;
    color:#5374a5!important;
    padding-bottom:3px!important;
    white-space:nowrap!important;
  }
  html body.community-live-v5 .urc-live-messages .urc-live-message-actions {
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    padding:4px 2px 0!important;
  }
  html body.community-live-v5 .urc-live-messages .urc-live-message-actions button {
    min-height:24px!important;
    padding:3px 8px!important;
    gap:4px!important;
    border:1px solid #e0eafb!important;
    border-radius:30px!important;
    background:#fff!important;
    color:#2960a9!important;
    font:700 10px Inter,system-ui,sans-serif!important;
  }
  html body.community-live-v5 .urc-live-messages .urc-live-message-actions .ur-live-icon {
    font-size:15px!important;
  }
  html body.community-live-v5 .urc-live-messages .ur-chat-message.is-mine {
    grid-template-columns:minmax(0,1fr)!important;
    padding-left:42px!important;
  }
  html body.community-live-v5 .urc-live-messages .ur-chat-message.is-mine .urc-message-body {
    justify-self:end!important;
    align-items:flex-end!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
  }
  html body.community-live-v5 .urc-live-messages .ur-chat-message.is-mine .ur-chat-message-head,
  html body.community-live-v5 .urc-live-messages .ur-chat-message.is-mine .urc-message-line,
  html body.community-live-v5 .urc-live-messages .ur-chat-message.is-mine .urc-live-message-actions {
    justify-content:flex-end!important;
  }
  html body.community-live-v5 .urc-live-messages .ur-chat-message.is-mine .urc-message-bubble {
    order:0!important;
    margin:0!important;
  }
  html body.community-live-v5 .urc-live-messages .ur-chat-message.is-mine .urc-message-time {
    order:1!important;
  }
  html body.community-live-v5 .urc-live-messages .ur-chat-message.is-mine .urc-message-bubble {
    background:#dbecff!important;
    border-color:#cce3ff!important;
    border-radius:16px 5px 16px 16px!important;
  }

  /* Fixed input bar matches the preview; keeps the real send/emoji handlers. */
  html body.community-live-v5 .urc-live-composer {
    min-height:59px!important;
    padding:8px 10px!important;
    border-top:1px solid #e5eefb!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  html body.community-live-v5 .urc-live-composer form {
    grid-template-columns:40px minmax(0,1fr) 43px!important;
    gap:8px!important;
    align-items:center!important;
  }
  html body.community-live-v5 .urc-composer-tool {width:40px!important;height:43px!important}
  html body.community-live-v5 .urc-composer-field {
    height:44px!important;
    border:1px solid #d2e2f7!important;
    border-radius:14px!important;
    background:#fff!important;
  }
  html body.community-live-v5 .urc-composer-field textarea {
    min-height:42px!important;
    font:500 13px/1.25 Inter,system-ui,sans-serif!important;
  }
  html body.community-live-v5 .urc-composer-send {
    width:43px!important;
    height:43px!important;
    border-radius:13px!important;
    background:#0874f9!important;
    box-shadow:none!important;
  }
  html body.community-live-v5 .mobile-sticky-actions.ur-mobile-bottom-nav.ur-global-mobile-nav {
    height:60px!important;
    min-height:60px!important;
    background:#fff!important;
    border-top:1px solid #e1eaf5!important;
  }
}

/* Smaller handsets match the preview's 375px breakpoint. */
@media (max-width:375px) {
  html body.community-live-v5 .urc-live-header {gap:6px!important;padding:0 8px!important}
  html body.community-live-v5 .urc-live-title-icon {width:43px!important;height:43px!important;flex-basis:43px!important}
  html body.community-live-v5 .urc-live-title-copy h1 {font-size:14px!important}
  html body.community-live-v5 .urc-live-messages .urc-message-bubble>p {font-size:12px!important}
}

/* Keep outgoing alignment correct in Arabic as well. */
@media (max-width:900px) {
  html[dir="rtl"] body.community-live-v5 .urc-live-messages .ur-chat-message.is-mine {
    padding-left:0!important;
    padding-right:42px!important;
  }
  html[dir="rtl"] body.community-live-v5 .urc-live-messages .ur-chat-message:not(.is-mine) .urc-message-bubble {
    border-radius:16px 5px 16px 16px!important;
  }
  html[dir="rtl"] body.community-live-v5 .urc-live-messages .ur-chat-message.is-mine .urc-message-bubble {
    border-radius:5px 16px 16px 16px!important;
  }
}

/* Bottom Navigation precision pass (V6): same five 60px preview tabs.
   Only the live-chat page is affected; the five destinations and auth
   actions continue to come from includes/global-mobile-nav.php. */
@media (max-width:900px) {
  html body.community-live-v5 .mobile-sticky-actions.ur-mobile-bottom-nav.ur-global-mobile-nav {
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    align-items:stretch!important;
    gap:0!important;
    box-sizing:border-box!important;
    height:calc(60px + env(safe-area-inset-bottom))!important;
    min-height:calc(60px + env(safe-area-inset-bottom))!important;
    padding:4px 3px calc(4px + env(safe-area-inset-bottom))!important;
    background:#fff!important;
    border-top:1px solid #e1eaf5!important;
    box-shadow:none!important;
  }
  html body.community-live-v5 .mobile-sticky-actions.ur-mobile-bottom-nav.ur-global-mobile-nav>a,
  html body.community-live-v5 .mobile-sticky-actions.ur-mobile-bottom-nav.ur-global-mobile-nav>button {
    position:relative!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:49px!important;
    margin:0!important;
    padding:2px 0!important;
    gap:3px!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    color:#667e9e!important;
    text-decoration:none!important;
    font:700 9.5px/1.1 Inter,system-ui,sans-serif!important;
  }
  html body.community-live-v5 .mobile-sticky-actions.ur-mobile-bottom-nav.ur-global-mobile-nav>a.active,
  html body.community-live-v5 .mobile-sticky-actions.ur-mobile-bottom-nav.ur-global-mobile-nav>button.active {
    color:#0874f9!important;
    font-weight:850!important;
  }
  html body.community-live-v5 .mobile-sticky-actions.ur-mobile-bottom-nav.ur-global-mobile-nav svg.ur-nav-icon {
    display:block!important;
    flex:0 0 21px!important;
    width:21px!important;
    height:21px!important;
    margin:0!important;
    color:inherit!important;
  }
  html body.community-live-v5 .mobile-sticky-actions.ur-mobile-bottom-nav.ur-global-mobile-nav span {
    display:block!important;
    margin:0!important;
    padding:0!important;
    color:inherit!important;
    white-space:nowrap!important;
    font:inherit!important;
    line-height:1.1!important;
  }
  html body.community-live-v5 .mobile-sticky-actions.ur-mobile-bottom-nav.ur-global-mobile-nav>a::before,
  html body.community-live-v5 .mobile-sticky-actions.ur-mobile-bottom-nav.ur-global-mobile-nav>button::before {
    content:none!important;
    display:none!important;
  }
  html body.community-live-v5 .mobile-sticky-actions.ur-mobile-bottom-nav.ur-global-mobile-nav>a:focus-visible,
  html body.community-live-v5 .mobile-sticky-actions.ur-mobile-bottom-nav.ur-global-mobile-nav>button:focus-visible {
    outline:2px solid #0874f9!important;
    outline-offset:-3px!important;
    border-radius:8px!important;
  }
}