/* Mobile Chat R2 — selected chat-first Lounge direction */

.mobile-home-hub,
.chat-mobile-tools,
.chat-ai-compose-shortcut {
  display: none;
}

@media (max-width: 920px) {
  .layout-cohesive-v1 .app-shell {
    padding: 0 10px 104px;
  }

  .layout-cohesive-v1 .mobile-home-hub {
    position: relative;
    display: grid;
    gap: 14px;
    min-height: 286px;
    padding: 22px 18px;
    overflow: hidden;
    border: 1px solid rgba(109, 173, 202, 0.26);
    border-radius: 16px;
    background: rgba(3, 16, 25, 0.94) url("/assets/hero-launch-v2.png") 68% 18% / auto 115% no-repeat;
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34);
  }

  .layout-cohesive-v1 .mobile-home-hub::before {
    position: absolute;
    inset: 0;
    content: "";
    background: rgba(2, 11, 18, 0.66);
    pointer-events: none;
  }

  .layout-cohesive-v1 .mobile-home-copy,
  .layout-cohesive-v1 .mobile-home-actions,
  .layout-cohesive-v1 .mobile-home-quick {
    position: relative;
    z-index: 1;
  }

  .layout-cohesive-v1 .mobile-home-copy {
    align-self: end;
    max-width: 300px;
  }

  .layout-cohesive-v1 .mobile-home-copy > span {
    color: #68d8e9;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.14em;
  }

  .layout-cohesive-v1 .mobile-home-copy h1 {
    margin: 6px 0 3px;
    color: #f3f7f8;
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.04;
  }

  .layout-cohesive-v1 .mobile-home-copy p {
    max-width: 32ch;
    margin: 0;
    color: #a0b2bb;
    font-size: 12px;
    line-height: 1.55;
  }

  .layout-cohesive-v1 .mobile-home-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
  }

  .layout-cohesive-v1 .mobile-home-primary,
  .layout-cohesive-v1 .mobile-home-secondary,
  .layout-cohesive-v1 .mobile-home-quick button {
    min-height: 46px;
    border: 1px solid rgba(224, 177, 73, 0.5);
    border-radius: 10px;
    color: #221706;
    background: #e8b956;
    font: inherit;
    font-size: 13px;
    font-weight: 900;
  }

  .layout-cohesive-v1 .mobile-home-secondary {
    width: 48px;
    padding: 0;
    color: #83dbe9;
    border-color: rgba(94, 194, 218, 0.3);
    background: rgba(5, 25, 36, 0.9);
  }

  .layout-cohesive-v1 .mobile-home-quick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  .layout-cohesive-v1 .mobile-home-quick button {
    min-height: 42px;
    color: #c2d2d9;
    border-color: rgba(112, 169, 195, 0.2);
    background: rgba(4, 20, 30, 0.86);
    font-size: 11px;
  }

  .layout-cohesive-v1 [data-home-view] .main-stack,
  .layout-cohesive-v1 [data-home-view] .content-grid,
  .layout-cohesive-v1 [data-home-view] .right-stack .event-grid,
  .layout-cohesive-v1 [data-home-view] .right-stack .mission-panel,
  .layout-cohesive-v1 [data-home-view] .right-stack .guild-panel,
  .layout-cohesive-v1 [data-home-view] .right-stack .party-panel,
  .layout-cohesive-v1 [data-home-view] .boss-tracker-panel {
    display: none;
  }

  .layout-cohesive-v1 [data-home-view] .right-stack {
    display: block;
    margin-top: 10px;
  }

  .layout-cohesive-v1 [data-home-view] .ranking-panel {
    min-height: 0;
    padding: 12px;
    border-radius: 14px;
    background: rgba(3, 16, 25, 0.92);
  }

  .layout-cohesive-v1 [data-home-view] .ranking-list > :nth-child(n + 4) {
    display: none;
  }

  .layout-cohesive-v1 .lounge-page {
    width: 100%;
    margin: 0;
    padding: 8px 0 10px;
  }

  .layout-cohesive-v1 .lounge-heading {
    align-items: center;
    min-height: 62px;
    margin: 0 2px 8px;
    padding: 2px 2px 10px;
  }

  .layout-cohesive-v1 .lounge-heading h1 {
    margin-top: 3px;
    font-size: clamp(27px, 8vw, 34px);
  }

  .layout-cohesive-v1 .lounge-heading .lounge-status {
    display: grid;
    min-width: 68px;
    padding: 8px 10px;
  }

  .layout-cohesive-v1 .lounge-heading .lounge-status strong {
    display: none;
  }

  .layout-cohesive-v1 .lounge-heading .lounge-status small {
    grid-column: 2;
    font-size: 10px;
  }

  .layout-cohesive-v1 .lounge-layout {
    gap: 10px;
  }

  .layout-cohesive-v1 .lounge-chat-column .chat-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    height: min(70svh, 720px);
    min-height: 530px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(2, 13, 21, 0.96);
  }

  .layout-cohesive-v1 .lounge-chat-column .chat-panel .panel-head {
    min-height: 38px;
    margin-bottom: 7px;
    padding-bottom: 7px;
  }

  .layout-cohesive-v1 .chat-mobile-tools {
    display: flex;
    gap: 6px;
    align-items: center;
  }

  .layout-cohesive-v1 .chat-mobile-tools button {
    display: inline-flex;
    min-width: 38px;
    min-height: 34px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(112, 169, 195, 0.22);
    border-radius: 9px;
    color: #91a8b4;
    background: rgba(4, 20, 30, 0.88);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
  }

  .layout-cohesive-v1 .chat-mobile-tools button.is-following,
  .layout-cohesive-v1 .chat-mobile-tools button[aria-expanded="true"] {
    color: #f0cb72;
    border-color: rgba(225, 176, 67, 0.48);
  }

  .layout-cohesive-v1 .chat-mobile-tools .ui-glyph {
    width: 17px;
    height: 17px;
  }

  .layout-cohesive-v1 .chat-panel .tab-row {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(82px, auto);
    gap: 6px;
    margin: 0 0 7px;
    padding: 2px 1px 5px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    background: transparent;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  .layout-cohesive-v1 .chat-panel .tab-row::-webkit-scrollbar {
    display: none;
  }

  .layout-cohesive-v1 .chat-panel .tab-row button,
  .layout-cohesive-v1 .chat-tab-combo {
    min-width: 82px;
    height: 36px;
    padding: 0 13px;
    border: 1px solid rgba(111, 167, 194, 0.22);
    border-radius: 18px;
    color: #a7bac4;
    background: rgba(3, 18, 28, 0.86);
    scroll-snap-align: start;
  }

  .layout-cohesive-v1 .chat-panel .tab-row button.active {
    color: #f2ca67;
    border-color: rgba(226, 177, 67, 0.62);
    border-radius: 18px;
    background: rgba(71, 50, 13, 0.64);
  }

  .layout-cohesive-v1 .chat-ai-note {
    display: flex;
    min-height: 28px;
    margin: 0 2px 7px;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    color: #748b97;
    font-size: 9px;
    white-space: nowrap;
  }

  .layout-cohesive-v1 .chat-ai-note .chat-ai-copy {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .layout-cohesive-v1 .chat-ai-note .chat-ai-service {
    margin-left: auto;
    flex: 0 0 auto;
  }

  .layout-cohesive-v1 .chat-list {
    padding: 0;
    border-radius: 10px;
    background: rgba(0, 8, 14, 0.9);
    overscroll-behavior: contain;
  }

  .layout-cohesive-v1 .chat-row:not(.tone-announcement) {
    display: block;
    min-height: 0;
    padding: 11px 12px;
    background: rgba(3, 15, 24, 0.42);
  }

  .layout-cohesive-v1 .chat-identity {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 9px;
    padding: 0 0 5px;
    border: 0;
  }

  .layout-cohesive-v1 .chat-identity .chat-avatar {
    width: 38px;
    height: 38px;
  }

  .layout-cohesive-v1 .chat-identity .chat-speaker {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
  }

  .layout-cohesive-v1 .chat-row:not(.tone-announcement) .chat-body {
    padding: 0 0 0 47px;
  }

  .layout-cohesive-v1 .chat-row:not(.tone-announcement) .chat-meta {
    min-height: 16px;
    margin: -22px 0 5px;
  }

  .layout-cohesive-v1 .chat-row:not(.tone-announcement) .chat-channel {
    visibility: hidden;
  }

  .layout-cohesive-v1 .chat-row:not(.tone-announcement) .chat-body > p {
    color: #d5e0e5;
    font-size: 13px;
    line-height: 1.55;
  }

  .layout-cohesive-v1 .chat-compose {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 38px 48px;
    gap: 6px;
    min-height: 52px;
    margin-top: 7px;
    padding: 6px;
    border-radius: 11px;
    background: rgba(2, 13, 21, 0.98);
  }

  .layout-cohesive-v1 .chat-ai-compose-shortcut {
    display: inline-flex;
    min-width: 58px;
    height: 38px;
    padding: 0 8px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(69, 198, 225, 0.32);
    border-radius: 8px;
    color: #74d7e8;
    background: rgba(5, 30, 42, 0.9);
    font: inherit;
    font-size: 9px;
    font-weight: 900;
  }

  .layout-cohesive-v1 .chat-compose input {
    min-width: 0;
    height: 38px;
  }

  .layout-cohesive-v1 .chat-emoji-toggle,
  .layout-cohesive-v1 .send-button {
    width: 38px;
    min-width: 38px;
    height: 38px;
  }

  .layout-cohesive-v1 .send-button {
    width: 48px;
    min-width: 48px;
  }

  .layout-cohesive-v1 .lounge-activity {
    min-height: 0;
    padding: 8px;
    border-radius: 14px;
  }

  .layout-cohesive-v1 .lounge-activity-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .layout-cohesive-v1 .lounge-activity-tabs button {
    grid-template-columns: 19px minmax(0, 1fr);
    min-height: 48px;
    padding: 6px 8px;
    justify-items: start;
    text-align: left;
  }

  .layout-cohesive-v1 .lounge-activity-tabs .ui-glyph {
    display: block;
    width: 18px;
    height: 18px;
  }

  .layout-cohesive-v1 .lounge-activity-tabs small {
    display: block;
  }

  .layout-cohesive-v1 .mobile-bottom {
    right: 10px;
    bottom: calc(8px + env(safe-area-inset-bottom));
    left: 10px;
    width: auto;
    padding: 6px 7px;
    overflow: hidden;
    border: 1px solid rgba(110, 171, 200, 0.28);
    border-radius: 24px;
    background: rgba(2, 13, 21, 0.94);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(18px);
  }

  .layout-cohesive-v1 .mobile-bottom button {
    height: 58px;
    border: 0;
    border-radius: 18px;
    color: #879eaa;
  }

  .layout-cohesive-v1 .mobile-bottom button::before {
    width: 21px;
    height: 21px;
    background-image: none;
    background-color: #8fb2bf;
    -webkit-mask-image: var(--mobile-icon);
    mask-image: var(--mobile-icon);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    filter: none;
  }

  .layout-cohesive-v1 .mobile-bottom .mobile-primary-tab {
    color: #f0ca69;
    background: rgba(69, 49, 13, 0.52);
  }

  .layout-cohesive-v1 .mobile-bottom .mobile-primary-tab::before {
    background-color: #f0ca69;
    filter: drop-shadow(0 0 6px rgba(240, 202, 105, 0.34));
  }

  .layout-cohesive-v1 .mobile-bottom [data-action="mobile-home"]::before {
    --mobile-icon: url("/assets/icons-modern/house.svg");
  }

  .layout-cohesive-v1 .mobile-bottom [data-action="mobile-chat"]::before {
    --mobile-icon: url("/assets/icons-modern/messages-square.svg");
  }

  .layout-cohesive-v1 .mobile-bottom [data-action="mobile-market"]::before {
    --mobile-icon: url("/assets/icons-modern/scale.svg");
  }

  .layout-cohesive-v1 .mobile-bottom [data-action="mobile-ranking"]::before {
    --mobile-icon: url("/assets/icons-modern/trophy.svg");
  }

  .layout-cohesive-v1 .mobile-bottom [data-action="mobile-profile"]::before {
    --mobile-icon: url("/assets/icons-modern/user-round.svg");
  }

  body.mobile-chat-focus {
    overflow: hidden;
  }

  body.mobile-chat-focus .lounge-heading,
  body.mobile-chat-focus .lounge-activity,
  body.mobile-chat-focus .mobile-bottom {
    display: none;
  }

  body.mobile-chat-focus .lounge-page {
    position: fixed;
    z-index: 120;
    inset: 0;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom));
    background: #020b12;
  }

  body.mobile-chat-focus .lounge-layout,
  body.mobile-chat-focus .lounge-chat-column,
  body.mobile-chat-focus .lounge-chat-column .chat-panel {
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
  }

  body.mobile-chat-focus .lounge-chat-column .chat-panel {
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    border-radius: 14px;
  }
}

@media (max-width: 430px) {
  .layout-cohesive-v1 .topbar {
    min-height: 58px;
  }

  .layout-cohesive-v1 .brand,
  .layout-cohesive-v1 .brand-art {
    height: 46px;
  }

  .layout-cohesive-v1 .brand-art {
    width: min(158px, 100%);
  }

  .layout-cohesive-v1 .server-strip {
    min-height: 48px;
  }

  .layout-cohesive-v1 .mobile-home-hub {
    min-height: 270px;
  }

  .layout-cohesive-v1 .lounge-chat-column .chat-panel {
    height: min(62svh, 560px);
    min-height: 500px;
  }

  .layout-cohesive-v1 .chat-mobile-tools button[data-action="chat-latest"] {
    padding: 0 8px;
  }

  .layout-cohesive-v1 .chat-compose {
    grid-template-columns: 52px minmax(0, 1fr) 36px 44px;
    gap: 4px;
    padding: 5px;
  }

  .layout-cohesive-v1 .chat-ai-compose-shortcut {
    min-width: 52px;
    padding: 0 5px;
  }

  .layout-cohesive-v1 .chat-emoji-toggle {
    width: 36px;
    min-width: 36px;
  }

  .layout-cohesive-v1 .send-button {
    width: 44px;
    min-width: 44px;
  }

  .layout-cohesive-v1 .lounge-activity-tabs small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .layout-cohesive-v1 .mobile-bottom,
  .layout-cohesive-v1 .chat-panel .tab-row {
    scroll-behavior: auto;
  }
}