/* VOXGAB Patch 46 — dedicated authenticated mobile shell.
   Desktop is intentionally untouched: every rule is scoped to <= 768px. */
@media (max-width:768px) {
  html, body { width:100%; max-width:100%; min-height:100%; overflow-x:hidden !important; background:#061421 !important; }
  body { overscroll-behavior-x:none; }
  #external_wrap { width:100%; max-width:100%; min-height:100dvh; overflow:hidden !important; }
  .voxgab-dashboard {
    width:100%; max-width:100%; height:100dvh; min-height:0 !important; overflow:hidden !important;
    padding:0 0 calc(62px + env(safe-area-inset-bottom)) !important;
    background:linear-gradient(180deg,#061421 0%,#06111d 100%) !important;
  }

  /* Mobile app bar */
  .voxgab-appbar {
    position:relative !important; top:auto !important; z-index:70 !important;
    height:58px !important; min-height:58px !important;
    display:grid !important;
    grid-template-columns:40px minmax(0,1fr) auto !important;
    grid-template-areas:"menu logo actions" "search search search" !important;
    gap:0 10px !important;
    padding:0 12px !important;
    border-bottom:1px solid rgba(53,145,226,.23) !important;
    background:rgba(4,18,30,.98) !important;
    box-shadow:none !important;
  }
  .voxgab-mobile-menu-button {
    grid-area:menu; display:flex !important; width:38px; height:38px; align-items:center; justify-content:center;
    border:1px solid rgba(77,160,218,.34); border-radius:10px; background:rgba(10,38,59,.84); color:#a9d9f5;
    font-size:17px; cursor:pointer;
  }
  .voxgab-app-logo { grid-area:logo; justify-self:start; font-size:21px !important; letter-spacing:-.8px !important; }
  .voxgab-topnav, .voxgab-app-tagline { display:none !important; }
  .voxgab-app-actions { grid-area:actions; justify-self:end !important; gap:7px !important; }
  .voxgab-app-actions > .voxgab-icon-button { display:none !important; }
  .voxgab-mobile-search-toggle { display:flex !important; width:38px; height:38px; align-items:center; justify-content:center; }
  .voxgab-user-orb { width:38px !important; height:38px !important; }
  .voxgab-top-search {
    grid-area:search; display:none !important; position:absolute !important; left:10px; right:10px; top:52px;
    height:44px !important; z-index:95; padding:0 12px !important;
    background:#092033 !important; border:1px solid rgba(55,170,241,.45) !important;
    box-shadow:0 12px 30px rgba(0,0,0,.36);
  }
  .voxgab-dashboard.voxgab-mobile-search-open .voxgab-top-search { display:flex !important; }
  .voxgab-search-results { top:49px !important; }

  /* The mobile experience is chat-first; desktop rails are replaced by nav/drawer. */
  .voxgab-workspace {
    width:100%; max-width:100%; height:calc(100dvh - 58px - 62px - env(safe-area-inset-bottom)) !important;
    min-height:0 !important; display:block !important; padding:0 !important; overflow:hidden !important;
  }
  .voxgab-left-rail, .voxgab-right-rail { display:none !important; }
  .voxgab-chat-column {
    width:100%; max-width:100%; height:100% !important; min-height:0 !important;
    display:grid !important; grid-template-rows:auto minmax(0,1fr) !important; gap:0 !important;
    overflow:hidden !important; background:#061421;
  }

  /* Compact room header inspired by the approved mobile mockup. */
  .voxgab-room-card {
    width:100%; min-height:68px !important; max-height:82px; margin:0 !important; padding:10px 12px !important;
    display:grid !important; grid-template-columns:minmax(0,1fr) auto !important; gap:8px !important; align-items:center !important;
    border:0 !important; border-bottom:1px solid rgba(59,151,219,.22) !important; border-radius:0 !important;
    background:linear-gradient(180deg,rgba(7,31,50,.98),rgba(6,24,39,.98)) !important; box-shadow:none !important;
  }
  .voxgab-room-card::after, .voxgab-room-visual { display:none !important; }
  .voxgab-room-heading { min-width:0 !important; }
  .voxgab-room-titleline { display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:nowrap !important; }
  .voxgab-room-titleline h1 { min-width:0; margin:0 !important; font-size:18px !important; line-height:1.15 !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .voxgab-room-titleline > span { flex:0 0 auto; margin:0 !important; color:#90abc0 !important; font-size:10px !important; }
  .voxgab-room-heading > p { margin:4px 0 0 !important; font-size:10px !important; color:#82a2ba !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .voxgab-room-card #wrap_topic { display:none !important; }
  .voxgab-room-actions { gap:6px !important; }
  .voxgab-room-actions .voxgab-outline-button { display:none !important; }
  .voxgab-room-actions .voxgab-icon-button { width:36px !important; height:36px !important; border-radius:9px !important; }
  .voxgab-room-notice { display:none !important; }

  /* Mobile chat stage */
  .voxgab-chat-stage,
  .voxgab-dashboard #container_chat.voxgab-chat-stage {
    width:100% !important; max-width:100% !important; height:100% !important; min-height:0 !important;
    margin:0 !important; border:0 !important; border-radius:0 !important; overflow:hidden !important;
    background:#061421 !important;
  }
  .voxgab-chat-stage #wrap_chat { height:100% !important; min-height:0 !important; grid-template-rows:minmax(0,1fr) auto !important; }
  .voxgab-chat-stage #warp_show_chat,
  .voxgab-chat-stage #container_show_chat,
  .voxgab-chat-stage #inside_wrap_chat,
  .voxgab-chat-stage #show_chat { min-height:0 !important; height:100% !important; overflow:hidden !important; }
  .voxgab-chat-stage #show_chat > ul {
    height:100% !important; overflow-y:auto !important; overflow-x:hidden !important;
    padding:14px 10px 16px !important; -webkit-overflow-scrolling:touch;
  }
  .voxgab-chat-stage .ch_logs { gap:8px !important; margin-bottom:12px !important; min-height:46px !important; }
  .voxgab-chat-stage .chat_avatar_wrap { width:34px !important; min-width:34px !important; height:34px !important; margin-top:3px !important; }
  .voxgab-chat-stage .avatar_chat { width:34px !important; height:34px !important; }
  .voxgab-chat-stage .my_text { max-width:calc(100% - 48px) !important; }
  .voxgab-chat-stage .my_text p {
    min-width:0 !important; max-width:100% !important; padding:20px 10px 9px !important;
    border-radius:12px !important; font-size:13px !important; line-height:1.38 !important; overflow-wrap:anywhere;
  }
  .voxgab-chat-stage .username { top:5px !important; left:10px !important; font-size:9px !important; }
  .voxgab-chat-stage .ch_logs.voxgab-own-message .username { left:auto !important; right:10px !important; }
  .voxgab-chat-stage .logs_date {
    position:static !important; display:block !important; width:auto !important; margin-top:5px !important;
    color:#718ea4 !important; font-size:8px !important; line-height:1.2 !important;
  }
  .voxgab-chat-stage .delete_log { position:absolute; right:7px; bottom:5px; margin:0 !important; font-size:10px; }
  .voxgab-chat-stage .ch_logs.voxgab-own-message .delete_log { right:7px; }
  .voxgab-chat-stage #show_chat .chat_image,
  .voxgab-chat-stage .chat_video_wrap,
  .voxgab-chat-stage .chat_video_embed { max-width:min(400px,100%) !important; width:100% !important; }
  .voxgab-chat-stage .chat_video_social_wrap .chat_video_x { height:min(400px,55vh) !important; }

  /* Mobile composer: one compact row, always reachable above bottom nav. */
  .voxgab-chat-stage #main_emoticon { display:none !important; }
  .voxgab-chat-stage #top_chat_container {
    min-height:60px !important; padding:8px 8px calc(8px + env(safe-area-inset-bottom)*0) !important;
    border-top:1px solid rgba(54,150,219,.22) !important; background:#071a2a !important;
  }
  .voxgab-chat-stage #input_table, .voxgab-chat-stage #inside_group { height:44px !important; }
  .voxgab-chat-stage #inside_group { border-radius:12px !important; }
  .voxgab-chat-stage #emo_item, .voxgab-chat-stage #send_image { width:38px !important; min-width:38px !important; height:42px !important; font-size:16px !important; }
  .voxgab-chat-stage #content { height:42px !important; padding:0 8px !important; font-size:13px !important; }
  .voxgab-chat-stage #inputt_right { width:48px !important; }
  .voxgab-chat-stage #submit_button {
    width:46px !important; min-width:46px !important; height:44px !important; margin-left:6px !important;
    border-radius:12px !important; font-size:0 !important;
  }
  .voxgab-chat-stage #submit_button i { font-size:17px !important; }
  .voxgab-chat-utility { display:none !important; }

  /* Fixed bottom navigation — only existing, real VOXGAB actions. */
  .voxgab-mobile-bottom-nav {
    position:fixed; left:0; right:0; bottom:0; z-index:90; height:calc(62px + env(safe-area-inset-bottom));
    display:grid !important; grid-template-columns:repeat(5,1fr); align-items:start;
    padding:5px 6px env(safe-area-inset-bottom); border-top:1px solid rgba(53,145,226,.28);
    background:rgba(4,18,30,.985); box-shadow:0 -10px 30px rgba(0,0,0,.18);
  }
  .voxgab-mobile-bottom-nav button {
    min-width:0; height:52px; border:0; border-radius:10px; background:transparent; color:#789cb7;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:9px; cursor:pointer;
  }
  .voxgab-mobile-bottom-nav button i { font-size:17px; }
  .voxgab-mobile-bottom-nav button.is-active,
  .voxgab-mobile-bottom-nav button:hover { color:#58cbff; background:rgba(24,130,207,.10); }
  .voxgab-mobile-bottom-nav .voxgab-mobile-nav-badge {
    position:absolute; transform:translate(10px,-12px); min-width:16px; height:16px; line-height:16px; padding:0 4px;
    border-radius:999px; background:#e7355f; color:#fff; font-size:8px; font-weight:800;
  }

  /* Full-screen More drawer from the approved mobile pattern. */
  .voxgab-mobile-drawer {
    position:fixed; inset:0; z-index:220; display:flex !important; flex-direction:column;
    padding:calc(16px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#071c2e 0%,#05131f 100%);
    transform:translateX(105%); transition:transform .18s ease; pointer-events:none; overflow-y:auto;
  }
  .voxgab-dashboard.voxgab-mobile-menu-open .voxgab-mobile-drawer { transform:translateX(0); pointer-events:auto; }
  .voxgab-mobile-drawer-head { display:grid; grid-template-columns:58px 1fr 40px; gap:12px; align-items:center; padding:8px 0 18px; border-bottom:1px solid rgba(63,151,217,.22); }
  .voxgab-mobile-drawer-head img { width:58px; height:58px; object-fit:cover; border-radius:50%; border:1px solid #22b8ff; }
  .voxgab-mobile-drawer-head strong { display:block; font-size:18px; color:#fff; }
  .voxgab-mobile-drawer-head span { display:block; margin-top:3px; color:#89a8be; font-size:11px; }
  .voxgab-mobile-drawer-close { width:38px; height:38px; border:1px solid rgba(77,160,218,.30); border-radius:10px; background:rgba(10,38,59,.76); color:#dff3ff; font-size:18px; }
  .voxgab-mobile-drawer-nav { display:flex; flex-direction:column; gap:4px; padding:14px 0; }
  .voxgab-mobile-drawer-nav button,
  .voxgab-mobile-drawer-nav a {
    min-height:48px; width:100%; display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:8px;
    padding:0 12px; border:0; border-radius:10px; background:transparent; color:#d5e8f6; text-decoration:none; text-align:left; font-size:14px;
  }
  .voxgab-mobile-drawer-nav i { color:#77c9f6; font-size:16px; text-align:center; }
  .voxgab-mobile-drawer-nav button:hover,
  .voxgab-mobile-drawer-nav a:hover { background:rgba(17,111,180,.16); color:#fff; }
  .voxgab-mobile-drawer-nav .is-danger i { color:#ff7e8d; }
  .voxgab-mobile-drawer-foot { margin-top:auto; padding-top:16px; border-top:1px solid rgba(63,151,217,.18); color:#6f92aa; font-size:10px; text-align:center; line-height:1.5; }
  .voxgab-mobile-drawer-foot strong { display:block; margin-bottom:4px; color:#46c8ff; font-size:16px; letter-spacing:-.3px; }

  /* Existing right-side panels become genuine mobile screens. Do not change their movement contract. */
  .panels.panelone, .panels.paneltwo, #main_option.panelone,
  #chat_panel.panelone, #tools_panel.panelone, #profile_panel.panelone,
  #history_panel.panelone, #matching_panel.panelone, #help_panel.panelone,
  #rules_panel.panelone, #addon_panel.panelone, #private_panel.paneltwo {
    width:100vw !important; max-width:100vw !important; margin-right:-100vw !important;
    height:100dvh !important; max-height:100dvh !important; border-left:0 !important; box-shadow:none !important;
  }
  .panels .panel_element, #main_option .panel_element { min-height:calc(100dvh - 64px); }
  #main_option .top_option { width:calc(100% - 24px) !important; margin:0 12px !important; }
  #main_option .voxgab-admin-heading { padding:14px 14px 5px !important; }
  #main_option .panel_element { padding:6px 14px 28px !important; }
  #main_option #top_setting_option { grid-template-columns:1fr 1fr !important; gap:7px !important; }

  /* Legacy Fancybox / upload UI must not exceed the viewport. */
  #upload_box, .fancybox-wrap, .fancybox-inner { max-width:calc(100vw - 20px) !important; }
}

@media (max-width:390px) {
  .voxgab-appbar { padding:0 9px !important; gap:0 7px !important; }
  .voxgab-app-logo { font-size:19px !important; }
  .voxgab-mobile-menu-button, .voxgab-mobile-search-toggle, .voxgab-user-orb { width:36px !important; height:36px !important; }
  .voxgab-room-card { padding-left:10px !important; padding-right:10px !important; }
  .voxgab-room-titleline h1 { font-size:17px !important; }
  .voxgab-chat-stage .my_text { max-width:calc(100% - 42px) !important; }
  .voxgab-chat-stage .chat_avatar_wrap,
  .voxgab-chat-stage .avatar_chat { width:31px !important; min-width:31px !important; height:31px !important; }
  .voxgab-mobile-bottom-nav button { font-size:8px; }
  .voxgab-mobile-bottom-nav button i { font-size:16px; }
  #main_option #top_setting_option { grid-template-columns:1fr !important; }
}

@media (min-width:769px) {
  .voxgab-mobile-menu-button,
  .voxgab-mobile-search-toggle,
  .voxgab-mobile-bottom-nav,
  .voxgab-mobile-drawer { display:none !important; }
}

/* VOXGAB Patch 47 — mobile correction pass.
   These overrides intentionally remain inside the mobile breakpoint so Patch 45 desktop geometry stays unchanged. */
@media (max-width:768px) {
  /* Text bubbles: keep compact content sizing without allowing flex min-content collapse. */
  .voxgab-chat-stage .ch_logs .my_text {
    flex:0 1 82% !important;
    width:auto !important;
    min-width:0 !important;
    max-width:82% !important;
  }
  .voxgab-chat-stage .ch_logs .my_text > p {
    display:block !important;
    width:fit-content !important;
    min-width:min(132px,100%) !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    white-space:normal !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-own-message .my_text {
    margin-left:auto !important;
    align-items:flex-end !important;
  }
  .voxgab-chat-stage .ch_logs:not(.voxgab-own-message) .my_text > p { margin-right:auto !important; }
  .voxgab-chat-stage .ch_logs.voxgab-own-message .my_text > p { margin-left:auto !important; }

  /* Rich media gets a deliberately wider parent than ordinary shrink-to-content text. */
  .voxgab-chat-stage .ch_logs.voxgab-media-message .my_text {
    flex:1 1 auto !important;
    width:auto !important;
    max-width:calc(100% - 42px) !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-media-message .my_text > p {
    width:min(400px,100%) !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-media-message .my_text a.fancybox,
  .voxgab-chat-stage .ch_logs.voxgab-media-message .chat_video_wrap {
    display:block !important;
    width:100% !important;
    max-width:400px !important;
    box-sizing:border-box !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-media-message .chat_image,
  .voxgab-chat-stage .ch_logs.voxgab-media-message .chat_video_embed {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    box-sizing:border-box !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-media-message .chat_video_embed { aspect-ratio:16/9; }
  .voxgab-chat-stage .ch_logs.voxgab-media-message .chat_video_social_wrap .chat_video_x {
    width:100% !important;
    height:min(400px,56vh) !important;
    aspect-ratio:auto !important;
  }

  /* Similar Rooms is a real mobile screen, not a stretched desktop sheet. */
  #matching_panel.panelone {
    background:linear-gradient(180deg,#061b2c 0%,#061421 100%) !important;
  }
  #matching_panel .top_option {
    min-height:58px !important;
    height:58px !important;
    padding:9px 12px !important;
    border-bottom:1px solid rgba(53,145,226,.26) !important;
    background:#071a2a !important;
  }
  #matching_panel .close_option,
  #matching_panel .top_icon_close {
    width:40px !important;
    height:40px !important;
  }
  #matching_panel .top_icon_close {
    border-radius:10px !important;
    font-size:17px !important;
  }
  #matching_panel .inner_top_option { min-height:40px !important; margin-left:50px !important; }
  #matching_panel .voxgab-matching-panel-body {
    height:calc(100dvh - 58px) !important;
    min-height:0 !important;
    overflow-y:auto !important;
    -webkit-overflow-scrolling:touch;
    padding:18px 14px calc(28px + env(safe-area-inset-bottom)) !important;
  }
  #matching_panel .voxgab-matching-head {
    margin:0 0 14px !important;
    padding:0 2px 15px !important;
    border-bottom:1px solid rgba(65,152,216,.18);
  }
  #matching_panel .voxgab-matching-head .change_avatar { margin:0 0 8px !important; }
  #matching_panel .voxgab-matching-head .change_avatar .sub_color {
    color:#35c8ff !important;
    font-size:20px !important;
    font-weight:800 !important;
    letter-spacing:-.35px;
  }
  #matching_panel .voxgab-matching-head .small_text {
    margin:0 !important;
    color:#93aec2 !important;
    font-size:12px !important;
    line-height:1.5 !important;
  }
  #matching_panel .voxgab-matching-context {
    margin:0 0 12px !important;
    padding:12px !important;
    border:1px solid rgba(56,189,248,.22) !important;
    border-radius:12px !important;
    background:rgba(12,54,80,.55) !important;
    color:#b8d4e6 !important;
    font-size:11px !important;
    line-height:1.5 !important;
  }
  #matching_panel .voxgab-matching-context:empty { display:none !important; }
  #matching_panel .voxgab-matching-results { display:grid !important; gap:10px !important; }
  #matching_panel .voxgab-matching-results > .small_text,
  #matching_panel .voxgab-matching-results > .error,
  #matching_panel .voxgab-match-empty {
    margin:0 !important;
    padding:18px 14px !important;
    border:1px solid rgba(77,160,218,.18) !important;
    border-radius:12px !important;
    background:rgba(9,38,58,.62) !important;
    color:#9db7c9 !important;
    text-align:left !important;
    line-height:1.45 !important;
  }
  #matching_panel .voxgab-match-card {
    padding:13px !important;
    border:1px solid rgba(71,165,229,.22) !important;
    border-radius:13px !important;
    background:linear-gradient(180deg,rgba(12,48,73,.92),rgba(8,35,55,.92)) !important;
    box-shadow:none !important;
  }
  #matching_panel .voxgab-match-card-head { align-items:flex-start !important; gap:8px !important; }
  #matching_panel .voxgab-match-room-name {
    padding:0 !important; border:0 !important; background:transparent !important;
    color:#eef8ff !important; font:inherit; font-weight:800; text-align:left; cursor:pointer;
  }
  #matching_panel .voxgab-match-score {
    flex:0 0 auto; padding:3px 7px; border-radius:999px;
    background:rgba(44,184,255,.10); color:#64d5ff !important; opacity:1 !important;
  }
  #matching_panel .voxgab-match-meta { color:#8eacbf !important; opacity:1 !important; }
  #matching_panel .voxgab-match-tags span {
    border:1px solid rgba(73,173,234,.16); background:rgba(42,157,225,.10) !important; color:#b5d8ec;
  }
  #matching_panel .voxgab-match-reason { color:#a1bdcf !important; opacity:1 !important; }
  #matching_panel .voxgab-match-enter.sub_button {
    min-height:42px !important; border-radius:10px !important; font-weight:800 !important;
  }
}

@media (max-width:390px) {
  .voxgab-chat-stage .ch_logs .my_text { max-width:80% !important; flex-basis:80% !important; }
  .voxgab-chat-stage .ch_logs.voxgab-media-message .my_text { max-width:calc(100% - 39px) !important; }
  #matching_panel .voxgab-matching-panel-body { padding-left:12px !important; padding-right:12px !important; }
}

/* VOXGAB Phase 1 Patch 48 — approved mobile mockup conformance layer.
   All rules remain mobile-only. Desktop/Patch 45 geometry is intentionally untouched. */
@media (max-width:768px) {
  :root { --vox48-bg:#061421; --vox48-panel:#08243a; --vox48-panel2:#0a2c46; --vox48-line:rgba(55,169,241,.32); --vox48-cyan:#35c8ff; --vox48-blue:#0b8ff5; --vox48-text:#eef8ff; --vox48-muted:#8db0c9; }
  * { box-sizing:border-box; }
  button, a { -webkit-tap-highlight-color:transparent; }

  .voxgab-dashboard { padding-bottom:calc(62px + env(safe-area-inset-bottom)) !important; }
  .voxgab-workspace { height:calc(100dvh - 58px - 62px - env(safe-area-inset-bottom)) !important; }

  /* Main must retain the desktop room information hierarchy. */
  .voxgab-chat-column { grid-template-rows:auto minmax(0,1fr) !important; }
  .voxgab-room-card {
    max-height:none !important; min-height:176px !important; align-items:start !important;
    grid-template-columns:minmax(0,1fr) auto !important; padding:13px 12px 12px !important;
    background:linear-gradient(180deg,#08243a 0%,#071f33 100%) !important;
  }
  .voxgab-room-heading > p { margin:5px 0 0 !important; font-size:11px !important; white-space:normal !important; overflow:visible !important; color:#91aec4 !important; }
  .voxgab-room-titleline h1 { font-size:19px !important; }
  .voxgab-room-titleline > span { font-size:10px !important; }
  .voxgab-room-actions { align-self:start !important; display:flex !important; }
  .voxgab-room-actions .voxgab-outline-button { display:inline-flex !important; height:38px !important; padding:0 12px !important; font-size:11px !important; align-items:center; justify-content:center; }
  .voxgab-room-actions .voxgab-icon-button { height:38px !important; width:38px !important; }
  .voxgab-room-card #wrap_topic { display:block !important; position:absolute !important; width:1px !important; height:1px !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; }
  .voxgab-mobile-room-meta { display:flex !important; flex-direction:column; gap:7px; margin-top:8px; padding-right:2px; }
  .voxgab-mobile-topic { color:#abc3d5; font-size:10.5px; line-height:1.35; white-space:normal; }
  .voxgab-mobile-meta-label { color:#39caff; font-weight:800; margin-right:4px; }
  .voxgab-mobile-similar-button { width:max-content; max-width:100%; min-height:36px; padding:0 12px; border-radius:10px; border:1px solid #168dd0; background:#0a2a42; color:#64d3ff; font-weight:800; font-size:10.5px; display:flex; align-items:center; gap:7px; }
  .voxgab-mobile-interest-row { display:flex; align-items:center; gap:7px; min-width:0; font-size:9.5px; color:#8ca8bb; }
  .voxgab-mobile-interest-row > strong { flex:0 0 auto; }
  .voxgab-mobile-interest-chips { min-width:0; display:flex; flex-wrap:wrap; gap:5px; }
  .voxgab-mobile-interest-chips span { padding:4px 8px; border:1px solid rgba(115,167,203,.28); border-radius:999px; background:rgba(95,142,177,.10); color:#b7cee0; white-space:nowrap; }

  /* Mockup chat proportions, readable text and media. */
  .voxgab-chat-stage .ch_logs { width:100% !important; display:flex !important; align-items:flex-start !important; gap:8px !important; }
  .voxgab-chat-stage .my_text { flex:0 1 auto !important; min-width:0 !important; width:auto !important; max-width:78% !important; }
  .voxgab-chat-stage .my_text p { width:auto !important; min-width:76px !important; max-width:100% !important; overflow-wrap:break-word !important; word-break:normal !important; white-space:normal !important; }
  .voxgab-chat-stage .ch_logs.voxgab-media-message .my_text { width:min(82%, 420px) !important; max-width:82% !important; }
  .voxgab-chat-stage .ch_logs.voxgab-media-message .my_text p { width:100% !important; min-width:0 !important; }
  .voxgab-chat-stage .chat_image, .voxgab-chat-stage .chat_video_wrap, .voxgab-chat-stage .chat_video_embed, .voxgab-chat-stage iframe { max-width:100% !important; width:100% !important; height:auto; }
  .voxgab-chat-stage .chat_video_social_wrap { max-width:100% !important; overflow:hidden !important; }
  .voxgab-chat-stage .ch_logs.voxgab-own-message { flex-direction:row-reverse !important; }
  .voxgab-chat-stage .ch_logs.voxgab-own-message .my_text { margin-left:auto !important; }

  /* Shared mobile screen shell. */
  .voxgab-mobile-screen {
    position:fixed; top:58px; left:0; right:0; bottom:calc(62px + env(safe-area-inset-bottom)); z-index:165;
    display:none; flex-direction:column; min-width:0; background:linear-gradient(180deg,#061827 0%,#061421 100%); color:var(--vox48-text); overflow:hidden;
  }
  .voxgab-mobile-screen.is-open { display:flex; }
  .voxgab-mobile-screen-head { height:54px; min-height:54px; display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; border-bottom:1px solid var(--vox48-line); padding:0 10px; background:#061827; }
  .voxgab-mobile-screen-head > strong { text-align:center; font-size:14px; }
  .voxgab-mobile-screen-head button, .voxgab-mobile-head-icon { width:40px; height:40px; border:0; background:transparent; color:#bce3f7; display:flex; align-items:center; justify-content:center; border-radius:9px; font-size:18px; }
  .voxgab-mobile-screen-head > div { display:flex; align-items:center; justify-content:flex-end; gap:3px; }
  .voxgab-mobile-screen-head.voxgab-mobile-rooms-head { grid-template-columns:42px minmax(0,1fr) auto; }
  .voxgab-mobile-wordmark { text-align:left !important; font-size:16px !important; letter-spacing:-.5px; }
  .voxgab-mobile-wordmark span { color:#30c7ff; }
  .voxgab-mobile-head-avatar { overflow:hidden; border:1px solid #1fa8f3 !important; border-radius:50% !important; padding:2px !important; }
  .voxgab-mobile-head-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
  .voxgab-mobile-scroll { min-height:0; flex:1 1 auto; overflow-y:auto; overflow-x:hidden; padding:10px 11px 18px; -webkit-overflow-scrolling:touch; }
  .voxgab-mobile-loading { padding:25px 12px; text-align:center; color:#83a8bf; font-size:11px; }
  .voxgab-mobile-empty { padding:30px 16px; text-align:center; color:#88a8bd; }

  .voxgab-mobile-tabs { display:grid; min-height:44px; padding:6px 10px; gap:6px; background:#061827; border-bottom:1px solid rgba(55,169,241,.20); }
  .voxgab-room-tabs, .voxgab-discover-tabs { grid-template-columns:1fr 1fr; }
  .voxgab-notification-tabs { grid-template-columns:repeat(4,1fr); }
  .voxgab-mobile-tabs button { min-height:32px; border:1px solid rgba(44,145,207,.48); border-radius:8px; background:#092137; color:#9dbbd0; font-size:10px; }
  .voxgab-mobile-tabs button.is-active { background:linear-gradient(180deg,#087bd2,#0867af); border-color:#19b9ff; color:#fff; box-shadow:0 0 16px rgba(0,159,255,.15); }

  /* Card 2 — room list. */
  .voxgab-mobile-room-list { display:flex; flex-direction:column; gap:7px; }
  .voxgab-mobile-room-row { width:100%; min-height:58px; display:grid; grid-template-columns:42px minmax(0,1fr) 22px; align-items:center; gap:9px; border:1px solid rgba(33,136,200,.45); border-radius:10px; padding:6px 8px; background:#09233a; color:#fff; text-align:left; }
  .voxgab-mobile-room-icon { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#1b9df2,#3652cf); display:flex; align-items:center; justify-content:center; font-size:17px; }
  .voxgab-mobile-room-copy { min-width:0; }
  .voxgab-mobile-room-copy strong { display:block; font-size:11px; color:#f2f9ff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .voxgab-mobile-room-copy span { display:block; margin-top:2px; color:#57c9ff; font-size:8px; }
  .voxgab-mobile-room-row > i { color:#64d5ff; }
  .voxgab-mobile-fab { position:absolute; right:16px; bottom:16px; width:48px; height:48px; border:0; border-radius:50%; background:linear-gradient(180deg,#2ab7ff,#0878e9); color:#fff; font-size:20px; box-shadow:0 8px 22px rgba(0,119,255,.30); }

  /* Card 7 — Discover. */
  .voxgab-discover-pane { display:none; }
  .voxgab-discover-pane.is-active { display:block; }
  .voxgab-mobile-card { border:1px solid rgba(42,151,217,.50); border-radius:12px; background:linear-gradient(180deg,#09243a,#071d31); padding:13px; }
  .voxgab-mobile-card h2 { margin:0; font-size:16px; color:#49d4ff; }
  .voxgab-mobile-card > p { margin:4px 0 12px; color:#8fb2c9; font-size:10px; }
  .voxgab-mobile-people-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px 8px; margin:10px 0 14px; }
  .voxgab-mobile-person { border:0; padding:0; background:transparent; color:#fff; min-width:0; text-align:center; }
  .voxgab-mobile-person img { width:54px; height:54px; border-radius:50%; object-fit:cover; border:1.5px solid #51d7ff; display:block; margin:0 auto 5px; }
  .voxgab-mobile-person strong { display:block; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .voxgab-mobile-person span { display:block; margin-top:2px; font-size:8px; color:#59cfff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .voxgab-mobile-primary, .voxgab-mobile-primary-outline { width:100%; min-height:42px; border-radius:8px; font-weight:800; font-size:11px; }
  .voxgab-mobile-primary { border:1px solid #35d4ff; background:linear-gradient(180deg,#20b9ff,#0878eb); color:#fff; }
  .voxgab-mobile-primary-outline { border:1px solid #1ca7ef; background:#0a2b43; color:#e8f8ff; }
  .voxgab-mobile-similar-list { display:flex; flex-direction:column; gap:8px; }
  .voxgab-mobile-similar-room { width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; border:1px solid rgba(51,158,222,.42); border-radius:10px; background:#09233a; color:#fff; padding:10px; text-align:left; }
  .voxgab-mobile-similar-room strong { display:block; font-size:12px; }
  .voxgab-mobile-similar-room p { margin:3px 0 0; color:#8caec4; font-size:9px; line-height:1.3; }
  .voxgab-mobile-similar-room span { color:#48d1ff; font-size:9px; white-space:nowrap; }

  /* Cards 8/9 — messages and notifications. */
  .voxgab-mobile-message-list, .voxgab-mobile-notification-list { display:flex; flex-direction:column; }
  .voxgab-mobile-message-row, .voxgab-mobile-notification-row { width:100%; min-height:58px; border:0; border-bottom:1px solid rgba(68,143,190,.26); background:transparent; color:#fff; display:grid; grid-template-columns:44px minmax(0,1fr) auto; gap:9px; align-items:center; padding:7px 4px; text-align:left; }
  .voxgab-mobile-message-row img, .voxgab-mobile-notification-row img, .voxgab-mobile-notification-icon { width:40px; height:40px; border-radius:50%; object-fit:cover; border:1px solid #48cfff; background:#0b2b45; display:flex; align-items:center; justify-content:center; color:#75d9ff; }
  .voxgab-mobile-row-copy { min-width:0; }
  .voxgab-mobile-row-copy strong { display:block; font-size:10.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .voxgab-mobile-row-copy p { margin:3px 0 0; color:#9db6c9; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .voxgab-mobile-row-meta { align-self:start; padding-top:2px; text-align:right; color:#7c9db4; font-size:8px; }
  .voxgab-mobile-unread { display:inline-flex; min-width:18px; height:18px; padding:0 5px; align-items:center; justify-content:center; border-radius:999px; background:#098cff; color:#fff; font-size:8px; margin-top:5px; }
  .voxgab-mobile-notification-row[data-type="system"] .voxgab-mobile-notification-icon { background:#1758dc; color:#fff; }

  /* Card 6 — profile. */
  .voxgab-mobile-profile { max-width:420px; margin:0 auto; text-align:center; padding:12px 10px 24px; }
  .voxgab-mobile-profile-avatar { width:88px; height:88px; border-radius:50%; object-fit:cover; border:2px solid #54d9ff; }
  .voxgab-mobile-profile h2 { margin:9px 0 1px; font-size:16px; }
  .voxgab-mobile-profile > span { display:block; color:#86a8be; font-size:10px; }
  .voxgab-mobile-profile > small { display:block; margin-top:3px; color:#68e6a6; font-size:9px; }
  .voxgab-mobile-profile > small i { display:inline-block; width:6px; height:6px; margin-right:4px; background:#68e66e; border-radius:50%; }
  .voxgab-mobile-profile > p { max-width:270px; margin:13px auto; color:#b5ccdc; font-size:10px; line-height:1.45; }
  .voxgab-mobile-profile-stats { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(55,155,213,.27); border-bottom:1px solid rgba(55,155,213,.27); margin:12px 0; padding:10px 0; }
  .voxgab-mobile-profile-stats > div + div { border-left:1px solid rgba(55,155,213,.27); }
  .voxgab-mobile-profile-stats strong { display:block; font-size:15px; }
  .voxgab-mobile-profile-stats span { display:block; color:#a5bfd0; font-size:9px; margin-top:2px; }
  .voxgab-mobile-profile .voxgab-mobile-primary-outline { margin-top:7px; }

  /* Card 5 — settings. */
  .voxgab-mobile-settings { padding-top:9px; }
  .voxgab-settings-group { margin-bottom:10px; border:1px solid rgba(45,151,216,.45); border-radius:11px; overflow:hidden; background:#08233a; }
  .voxgab-settings-group h3 { margin:0; padding:7px 9px 4px; color:#41d4ff; font-size:10px; }
  .voxgab-settings-group > button { width:100%; min-height:43px; display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:5px; border:0; border-top:1px solid rgba(59,139,192,.25); background:transparent; color:#ecf8ff; padding:0 9px; text-align:left; }
  .voxgab-settings-group > button > i:first-child { color:#8fd8ff; text-align:center; }
  .voxgab-settings-group > button > span { font-size:10px; }
  .voxgab-settings-group > button > span small { display:block; margin-top:1px; color:#6989a0; font-size:7.5px; }
  .voxgab-settings-group > button > b { color:#25c8ff; font-size:18px; font-weight:400; }
  .voxgab-settings-group > button.is-disabled { opacity:.55; }
  .voxgab-switch { width:34px; height:19px; border-radius:999px; background:#27485f; padding:2px; display:flex; justify-content:flex-start; transition:.15s ease; }
  .voxgab-switch i { width:15px; height:15px; background:#fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.3); }
  .voxgab-switch.is-on { justify-content:flex-end; background:#10aaff; }
  .voxgab-switch.is-disabled { background:#345064; }

  /* More drawer: mockup side-menu hierarchy. */
  .voxgab-mobile-drawer { background:linear-gradient(90deg,#061827 0%,#071b2b 84%,rgba(0,0,0,.50) 84%) !important; padding-right:16% !important; }
  .voxgab-mobile-drawer-head { padding:22px 18px 15px !important; border-bottom:1px solid rgba(54,152,213,.26); }
  .voxgab-mobile-drawer-head img { width:64px !important; height:64px !important; }
  .voxgab-mobile-drawer-nav { padding:8px 10px !important; }
  .voxgab-mobile-drawer-nav a, .voxgab-mobile-drawer-nav button { min-height:44px !important; border-radius:8px !important; }
  .voxgab-mobile-drawer-foot { margin-top:auto; display:flex !important; flex-direction:column; align-items:center; gap:2px; color:#8faabd; padding:18px 0 28px !important; }
  .voxgab-mobile-drawer-foot strong { color:#fff; font-size:16px; }
  .voxgab-mobile-drawer-foot span { font-size:9px; }
  .voxgab-mobile-drawer-foot small { color:#42ccff; font-size:8px; }

  /* Legacy panels opened from mobile Settings are intentionally modal, not giant draggable desktop cards. */
  #tools_panel.voxgab-mobile-legacy-open, #help_panel.voxgab-mobile-legacy-open, #rules_panel.voxgab-mobile-legacy-open {
    position:fixed !important; z-index:260 !important; top:0 !important; right:0 !important; bottom:0 !important; left:0 !important; width:100% !important; height:100dvh !important; max-width:none !important; margin:0 !important; border-radius:0 !important; transform:none !important;
  }

  /* Bottom nav must match approved wording/order. */
  .voxgab-mobile-bottom-nav button { position:relative; min-height:52px; }
}

@media (min-width:769px) {
  .voxgab-mobile-room-meta,
  .voxgab-mobile-screen { display:none !important; }
}

@media (max-width:768px) {
  /* Keep the Patch 47 authenticated app bar on the main chat view.
     Patch 48 screens may still open as full-screen overlays. */
  .voxgab-dashboard > .voxgab-appbar { display:grid !important; }
  .voxgab-workspace { height:calc(100dvh - 58px - 62px - env(safe-area-inset-bottom)) !important; }
  .voxgab-mobile-screen { top:0 !important; }

  /* Card 1 — mobile login/welcome mockup. */
  #wrap_login { min-height:100dvh !important; padding:0 !important; align-items:stretch !important; background:linear-gradient(180deg,#061421,#061827) !important; }
  #container_login.background_login { width:100% !important; max-width:none !important; min-height:100dvh !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; padding:74px 28px 34px !important; background:radial-gradient(circle at 50% 15%,rgba(0,160,235,.10),transparent 27%),linear-gradient(180deg,#061421,#061827) !important; }
  #container_login:before { display:none !important; }
  #header_login { height:auto !important; padding:0 0 12px !important; border:0 !important; display:flex; justify-content:center; }
  #header_login .voxgab-login-logo { width:min(230px,72vw) !important; max-width:none !important; margin:0 auto; }
  #header_login:after { content:'Real People. Real Conversations.'; display:block; position:absolute; top:54px; left:0; right:0; text-align:center; color:#a8c6da; font-size:11px; }
  #content_login { display:block !important; max-width:360px !important; margin:24px auto 0 !important; padding:0 !important; }
  #content_login_left { width:100% !important; }
  #content_login_right { display:none !important; }
  #login_error_inside { text-align:center; font-size:11px !important; }
  .login_label { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .login_form .input_data { min-height:52px !important; margin-bottom:10px !important; padding-left:42px !important; border-color:#0b76ae !important; background:#08243a !important; }
  #user_username { background-image:linear-gradient(transparent,transparent) !important; }
  .forgot_password { display:block !important; text-align:center; margin:14px 0 20px !important; font-size:10px !important; }
  #login_control { gap:12px !important; }
  #login_button { min-height:52px !important; order:0; }
  #login_register { min-height:50px !important; order:2; background:#08243a !important; border-color:#138dca !important; }
  #login_control:before { content:'or'; order:1; display:block; text-align:center; color:#829eb2; font-size:10px; line-height:18px; background:linear-gradient(90deg,rgba(90,135,165,.35),rgba(90,135,165,.35)) left center/42% 1px no-repeat,linear-gradient(90deg,rgba(90,135,165,.35),rgba(90,135,165,.35)) right center/42% 1px no-repeat; }
}
@media (max-width:768px) {
  .voxgab-mobile-searchbar { display:none; height:46px; padding:6px 10px; align-items:center; gap:8px; border-bottom:1px solid rgba(55,169,241,.22); background:#061827; }
  .voxgab-mobile-searchbar.is-open { display:flex; }
  .voxgab-mobile-searchbar > i { color:#67cfff; }
  .voxgab-mobile-searchbar input { flex:1; min-width:0; height:34px; border:1px solid rgba(44,145,207,.48); border-radius:8px; background:#092137; color:#fff; padding:0 10px; outline:0; }
  .voxgab-mobile-searchbar input:focus { border-color:#27c7ff; box-shadow:0 0 0 2px rgba(39,199,255,.08); }
  .voxgab-room-card { padding-top:calc(13px + env(safe-area-inset-top)) !important; min-height:calc(176px + env(safe-area-inset-top)) !important; }
  .voxgab-mobile-screen-head { height:calc(54px + env(safe-area-inset-top)); min-height:calc(54px + env(safe-area-inset-top)); padding-top:env(safe-area-inset-top); }
}
@media (max-width:768px) {
  #private_panel {
    width:100vw !important; max-width:100vw !important; height:100dvh !important; max-height:100dvh !important;
    margin-right:-100vw !important; border-left:0 !important; box-shadow:none !important;
  }
  #private_panel .panel_element { min-height:calc(100dvh - 64px) !important; }
}

/* Patch 48 Hotfix 2 — external social embeds need their own mobile geometry.
   X posts are document-style embeds, not 16:9 video players. Give them the
   full usable message width and enough viewport-aware height to render media
   without clipping the card into a narrow column. Uploaded images keep the
   existing protected-media rules above. */
@media (max-width:768px) {
  .voxgab-chat-stage .ch_logs .my_text:has(.chat_video_social_wrap) {
    flex:1 1 auto !important;
    width:calc(100% - 48px) !important;
    max-width:calc(100% - 48px) !important;
    min-width:0 !important;
  }
  .voxgab-chat-stage .ch_logs .my_text:has(.chat_video_social_wrap) > p {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding-left:8px !important;
    padding-right:8px !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  .voxgab-chat-stage .chat_video_social_wrap {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    border-radius:11px !important;
    box-sizing:border-box !important;
  }
  .voxgab-chat-stage .chat_video_social_wrap .chat_video_x {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:clamp(500px,70dvh,680px) !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    border:0 !important;
    box-sizing:border-box !important;
    background:#061421 !important;
  }
  .voxgab-chat-stage .chat_video_social_wrap .chat_video_fallback {
    display:flex !important;
    min-height:40px !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
}



/* Patch 48 Hotfix 3 — X/social posts use the complete-width scaled document
   renderer from chat27.js. Mobile gives social posts virtually all usable row
   width instead of applying ordinary 82% media-bubble geometry. */
@media (max-width:768px) {
  .voxgab-chat-stage .ch_logs.voxgab-social-message .my_text {
    flex:1 1 auto !important;
    width:calc(100% - 44px) !important;
    max-width:calc(100% - 44px) !important;
    min-width:0 !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-social-message .my_text > p {
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding-left:5px !important;
    padding-right:5px !important;
    overflow:hidden !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-social-message .chat_video_social_wrap {
    width:100% !important;
    max-width:100% !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-social-message .chat_x_viewport {
    width:100% !important;
    min-height:340px;
    max-height:65dvh;
  }
}

/* Patch 48 Hotfix 4 — mobile X embeds render natively at the phone's available
   message width. Do NOT transform-scale the 550px desktop canvas on mobile. */
@media (max-width:768px) {
  .voxgab-chat-stage .ch_logs.voxgab-social-message {
    width:100% !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-social-message .my_text {
    flex:0 0 auto !important;
    min-width:250px !important;
    width:calc(100% - 62px) !important;
    max-width:calc(100% - 62px) !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-social-message .my_text > p {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    padding-left:5px !important;
    padding-right:5px !important;
    overflow:hidden !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-social-message .chat_video_social_wrap,
  .voxgab-chat-stage .ch_logs.voxgab-social-message .chat_x_viewport {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-social-message .chat_x_viewport {
    height:clamp(520px,72dvh,700px) !important;
    max-height:none !important;
    overflow:hidden !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-social-message .chat_x_viewport .chat_video_x {
    position:static !important;
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-height:none !important;
    transform:none !important;
    transform-origin:initial !important;
  }
}

/* Patch 48 Hotfix 5 — MOBILE ONLY X/social embed correction.
   Desktop remains entirely under chat27.css/chat27.js.  On phones the X post
   gets a native-width canvas instead of inheriting the generic 78/82% media
   bubble or the 550px desktop document geometry. */
@media (max-width:768px) {
  .voxgab-chat-stage .ch_logs.voxgab-x-message,
  .voxgab-chat-stage .ch_logs.voxgab-social-message {
    width:100% !important;
    max-width:100% !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-x-message .my_text,
  .voxgab-chat-stage .ch_logs.voxgab-social-message .my_text {
    flex:0 0 auto !important;
    width:auto !important; /* exact px width is set by mobile48.js */
    max-width:calc(100% - 52px) !important;
    min-width:280px !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-x-message .my_text > p,
  .voxgab-chat-stage .ch_logs.voxgab-social-message .my_text > p {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    padding-left:5px !important;
    padding-right:5px !important;
    overflow:visible !important;
    box-sizing:border-box !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-x-message .chat_video_social_wrap,
  .voxgab-chat-stage .ch_logs.voxgab-x-message .chat_x_viewport,
  .voxgab-chat-stage .ch_logs.voxgab-x-message .chat_video_x,
  .voxgab-chat-stage .ch_logs.voxgab-social-message .chat_video_social_wrap,
  .voxgab-chat-stage .ch_logs.voxgab-social-message .chat_x_viewport,
  .voxgab-chat-stage .ch_logs.voxgab-social-message .chat_video_x {
    box-sizing:border-box !important;
    transform:none !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-x-message .chat_video_social_wrap,
  .voxgab-chat-stage .ch_logs.voxgab-social-message .chat_video_social_wrap {
    display:block !important;
    overflow:hidden !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-x-message .chat_x_viewport,
  .voxgab-chat-stage .ch_logs.voxgab-social-message .chat_x_viewport {
    position:relative !important;
    display:block !important;
    height:clamp(500px,68dvh,650px) !important;
    max-height:none !important;
    overflow:hidden !important;
  }
  .voxgab-chat-stage .ch_logs.voxgab-x-message .chat_video_x,
  .voxgab-chat-stage .ch_logs.voxgab-social-message .chat_video_x {
    position:static !important;
    display:block !important;
    height:100% !important;
    max-height:none !important;
    aspect-ratio:auto !important;
    transform:none !important;
    transform-origin:initial !important;
  }
}

/* Phase 2 / Patch 1 Hotfix 2: mobile plain-text bubbles favor horizontal space.
   Give text a practical minimum width so formatted spans and short word groups cannot
   collapse into narrow/tall columns. Media, protected images, video and X/social cards
   retain their dedicated sizing rules. */
@media (max-width:768px) {
  .voxgab-chat-stage .ch_logs:not(.voxgab-media-message):not(.voxgab-social-message):not(.voxgab-x-message) .my_text {
    width:fit-content !important;
    min-width:min(46vw, 220px) !important;
    max-width:calc(100% - 48px) !important;
    flex:0 1 auto !important;
  }
  .voxgab-chat-stage .ch_logs:not(.voxgab-media-message):not(.voxgab-social-message):not(.voxgab-x-message) .my_text > p {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    white-space:normal !important;
  }
  .voxgab-chat-stage .ch_logs:not(.voxgab-media-message):not(.voxgab-social-message):not(.voxgab-x-message) .my_text > p > span {
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
  }
}

/* Phase 2 / Patch 1 Hotfix 3: mobile plain-text bubbles use a desktop-like
   horizontal footprint before wrapping.  The previous 46vw floor still let
   ordinary sentences break every 2-3 words on 390-464px phones.  Keep short
   text compact enough, but reserve roughly two-thirds of the phone width so
   normal sentences carry about 5-8 words per line.  Media/social messages are
   excluded and keep their dedicated geometry. */
@media (max-width:768px) {
  .voxgab-chat-stage .ch_logs:not(.voxgab-media-message):not(.voxgab-social-message):not(.voxgab-x-message) .my_text {
    width:fit-content !important;
    min-width:min(68vw, 320px) !important;
    max-width:calc(100% - 48px) !important;
    flex:0 1 auto !important;
  }
  .voxgab-chat-stage .ch_logs:not(.voxgab-media-message):not(.voxgab-social-message):not(.voxgab-x-message) .my_text > p {
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow-wrap:break-word !important;
    word-break:normal !important;
    white-space:normal !important;
  }
}

/* Phase 2 / Patch 6 Hotfix 2 — mobile PM notification + conversation polish. */
@media (max-width:768px) {
  .voxgab-mobile-bottom-nav .voxgab-dm-notify-target,
  .voxgab-mobile-drawer-nav .voxgab-dm-notify-target { position:relative; }
  .voxgab-mobile-bottom-nav .voxgab-dm-notify-target.voxgab-dm-unread > i,
  .voxgab-mobile-drawer-nav .voxgab-dm-notify-target.voxgab-dm-unread > i { color:#45cbff !important; text-shadow:0 0 10px rgba(69,203,255,.6); }
  .voxgab-mobile-bottom-nav .voxgab-dm-badge,
  .voxgab-mobile-drawer-nav .voxgab-dm-badge { position:absolute; right:12px; top:5px; min-width:18px; height:18px; padding:0 5px; line-height:18px; border-radius:10px; font-size:9px; text-align:center; }

  #private_panel.panelthree {
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    max-height:100dvh !important;
    right:0 !important;
    bottom:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
  }
  #private_panel .top_option { min-height:66px !important; padding:10px 12px !important; }
  #private_panel .panel_element { height:calc(100dvh - 66px) !important; min-height:0 !important; padding:10px !important; }
  #private_panel #show_private { padding:12px 10px !important; }
  #private_panel #show_private li { max-width:86% !important; font-size:14px !important; }
  #logout_box.voxgab-logout-modal { width:calc(100vw - 28px) !important; padding:20px !important; }
}