/* Atlas Day 4.9.1: mobile-first messenger and role-specific navigation. */

[data-atlas-role-hidden="true"] {
  display: none !important;
}

.atlas-role-context {
  align-items: center;
  color: #9deffa;
  display: flex;
  font: 650 9px/1.3 Inter, sans-serif;
  gap: 6px;
  letter-spacing: .035em;
  margin-top: 8px;
}

.atlas-role-context::before {
  background: #00c77b;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(0, 199, 123, .14);
  content: "";
  flex: 0 0 6px;
  height: 6px;
  width: 6px;
}

@media (width <= 760px) {
  :root {
    --atlas-chat-viewport-height: 100dvh;
    --atlas-chat-viewport-top: 0px;
  }

  body.atlas-mobile-chat-open {
    height: 100%;
    overflow: hidden !important;
    overscroll-behavior: none;
    touch-action: pan-y;
  }

  body.atlas-mobile-chat-open .sidebar {
    pointer-events: none;
  }

  body.atlas-mobile-chat-open .neo-chat.chat-panel {
    background: #0f111a;
    border: 0;
    border-radius: 0;
    bottom: auto;
    display: flex;
    flex-direction: column;
    height: var(--atlas-chat-viewport-height);
    left: 0;
    margin: 0;
    max-height: none;
    max-width: none;
    min-height: 0;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: var(--atlas-chat-viewport-top);
    width: 100%;
    z-index: 2001;
  }

  body.atlas-mobile-chat-open .neo-chat-cover {
    align-items: center;
    background: rgba(20, 27, 44, .96);
    border-bottom: 1px solid rgba(96, 239, 255, .16);
    display: flex;
    flex: 0 0 auto;
    min-height: calc(58px + env(safe-area-inset-top));
    padding: calc(8px + env(safe-area-inset-top)) 142px 8px 68px;
    position: relative;
  }

  body.atlas-mobile-chat-open .neo-chat-cover > * {
    margin-bottom: 0;
    margin-top: 0;
  }

  body.atlas-mobile-chat-open .neo-chat-cover h2 {
    font-size: 16px;
    line-height: 1.2;
  }

  body.atlas-mobile-chat-open .neo-chat-cover p,
  body.atlas-mobile-chat-open .neo-chat-cover small {
    font-size: 9px;
    line-height: 1.25;
  }

  body.atlas-mobile-chat-open .neo-chat-cover > button:not(.atlas-group-back) {
    min-height: 40px;
    min-width: 40px;
    padding: 8px;
  }

  body.atlas-mobile-chat-open .neo-chat-layout {
    display: flex;
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
  }

  body.atlas-mobile-chat-open .neo-chat-main {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    min-width: 0;
    overflow: hidden;
    width: 100%;
  }

  body.atlas-mobile-chat-open .neo-chat .chat-messages {
    -webkit-overflow-scrolling: touch;
    flex: 1 1 auto;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overscroll-behavior: contain;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 8px 14px;
    scroll-behavior: smooth;
  }

  body.atlas-mobile-chat-open .neo-chat .chat-compose {
    background: rgba(20, 27, 42, .98);
    border-top: 1px solid rgba(96, 239, 255, .14);
    bottom: auto;
    flex: 0 0 auto;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    position: relative;
    z-index: 4;
  }

  body.atlas-mobile-chat-open .neo-chat .compose-row {
    align-items: end;
    gap: 6px;
  }

  body.atlas-mobile-chat-open .neo-chat textarea,
  body.atlas-mobile-chat-open .neo-chat input,
  .atlas-direct-compose textarea,
  .atlas-conversation-search {
    font-size: 16px !important;
  }

  body.atlas-mobile-chat-open .neo-chat .compose-row textarea {
    border-radius: 20px;
    max-height: 112px;
    min-height: 44px;
    padding: 11px 14px;
  }

  body.atlas-mobile-chat-open .neo-chat .compose-row button,
  body.atlas-mobile-chat-open .neo-chat .chat-send {
    flex: 0 0 44px;
    height: 44px;
    min-height: 44px;
    min-width: 44px;
    padding: 0;
  }

  body.atlas-mobile-chat-open .neo-chat .chat-message {
    max-width: 84%;
  }

  body.atlas-mobile-chat-open .neo-chat .chat-message.media-audio {
    max-width: 82vw;
    min-width: min(238px, 82vw);
    width: min(300px, 82vw);
  }

  body.atlas-mobile-chat-open .neo-chat .chat-message.media-video,
  body.atlas-mobile-chat-open .neo-chat .chat-message.media-video.own {
    width: min(68vw, 270px);
  }

  body.atlas-mobile-chat-open .neo-chat-members {
    display: none !important;
  }

  body.atlas-mobile-chat-open > .atlas-group-back {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    display: flex !important;
    font-size: 0;
    height: 44px;
    justify-content: center;
    left: 8px;
    min-height: 44px;
    padding: 0;
    top: calc(var(--atlas-chat-viewport-top) + 7px + env(safe-area-inset-top));
    width: 44px;
    z-index: 2004;
  }

  body.atlas-mobile-chat-open > .atlas-group-back::before {
    content: "‹";
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
    transform: translateY(-2px);
  }

  .atlas-messenger-nav,
  .atlas-direct-view {
    height: var(--atlas-chat-viewport-height) !important;
    min-height: 0 !important;
    top: var(--atlas-chat-viewport-top) !important;
  }

  .atlas-messenger-nav {
    bottom: auto !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  .atlas-direct-view {
    bottom: auto !important;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  .atlas-direct-header {
    min-height: calc(58px + env(safe-area-inset-top));
    padding: calc(7px + env(safe-area-inset-top)) 142px 7px 7px;
  }

  .atlas-direct-messages {
    -webkit-overflow-scrolling: touch;
    min-height: 0;
    overscroll-behavior: contain;
    padding: 10px 8px 14px;
  }

  .atlas-direct-compose {
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
  }

  .atlas-direct-compose textarea {
    border-radius: 20px;
    padding: 11px 14px;
  }

  .atlas-direct-message {
    max-width: 86%;
  }

  body.atlas-mobile-chat-open .kap-widget,
  body.atlas-messenger-direct.atlas-messenger-thread-open .kap-widget {
    bottom: auto;
    display: block;
    height: 44px;
    right: max(7px, env(safe-area-inset-right));
    top: calc(var(--atlas-chat-viewport-top) + 7px + env(safe-area-inset-top));
    width: 44px;
    z-index: 2005;
  }

  body.atlas-mobile-chat-open .kap-main,
  body.atlas-messenger-direct.atlas-messenger-thread-open .kap-main {
    background: rgba(15, 17, 26, .42);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    display: block;
    height: 44px;
    min-height: 44px;
    overflow: hidden;
    padding: 1px;
    width: 44px;
  }

  body.atlas-mobile-chat-open .kap-main .kap-body,
  body.atlas-messenger-direct.atlas-messenger-thread-open .kap-main .kap-body {
    bottom: auto;
    height: 42px;
    left: auto;
    position: relative;
    transform: none;
    width: 42px;
  }

  body.atlas-mobile-chat-open .kap-main > :not(.kap-body):not(.kap-event-badge),
  body.atlas-messenger-direct.atlas-messenger-thread-open .kap-main > :not(.kap-body):not(.kap-event-badge) {
    display: none;
  }

  body.atlas-mobile-chat-open .kap-event-badge,
  body.atlas-messenger-direct.atlas-messenger-thread-open .kap-event-badge {
    border-width: 2px;
    height: 16px;
    right: -1px;
    top: -1px;
    width: 16px;
  }

  body.atlas-mobile-chat-open .kap-popover,
  body.atlas-messenger-direct.atlas-messenger-thread-open .kap-popover {
    max-height: calc(var(--atlas-chat-viewport-height) - 76px - env(safe-area-inset-top));
    overflow-y: auto;
    position: fixed;
    right: 8px;
    top: calc(var(--atlas-chat-viewport-top) + 58px + env(safe-area-inset-top));
    width: min(310px, calc(100vw - 16px));
  }

  body.atlas-mobile-chat-open .kap-widget.message-pulse::after,
  body.atlas-messenger-direct.atlas-messenger-thread-open .kap-widget.message-pulse::after {
    bottom: 0;
    height: 44px;
    right: 0;
    width: 44px;
  }
}

@media (width <= 390px) {
  body.atlas-mobile-chat-open .neo-chat .chat-message {
    max-width: 88%;
  }

  body.atlas-mobile-chat-open .neo-chat-cover {
    padding-left: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.atlas-mobile-chat-open .neo-chat .chat-messages {
    scroll-behavior: auto;
  }
}