/* 69world Beta 1.0 — phone layout refinements. Desktop unchanged. */
@media (max-width: 600px) {
  :root { --unified-sidebar-width: 164px !important; }
  #unifiedSidebar {
    width: var(--unified-sidebar-width) !important;
    padding: 18px 11px max(22px,env(safe-area-inset-bottom)) !important;
    background: rgba(14,29,41,.97) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    backdrop-filter: blur(12px) !important;
    border-left: 1px solid #456377 !important;
    box-shadow: -12px 0 26px #0006 !important;
  }
  #unifiedSidebar nav { margin-top: 108px !important; gap: 8px !important; }
  #unifiedSidebar nav a,
  #unifiedSidebar nav a .nav-text {
    font-size: 15px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
  }
  #unifiedSidebar nav a {
    justify-content: flex-start !important;
    padding: 13px 12px !important;
    min-height: 49px !important;
    white-space: normal !important;
  }
  #unifiedSidebar nav a::before { content: none !important; display: none !important; }
  #unifiedSidebar .unified-footer { padding: 16px 0 0 !important; }
  #unifiedSidebar .unified-language {
    width: 100% !important;
    min-height: 52px !important;
    padding: 11px 10px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }
  #navCollapseToggle {
    right: var(--unified-sidebar-width) !important;
    top: 56% !important;
    padding: 15px 10px !important;
    min-width: 34px !important;
    min-height: 58px !important;
  }
  body.nav-collapsed #navCollapseToggle { right: 0 !important; }
  /* The ribbon should be visible on the left, below the fixed header. */
  body > a.site-bookmark,
  body > .site-bookmark {
    left: 12px !important;
    right: auto !important;
    top: 78px !important;
    transform: none !important;
    width: 58px !important;
    height: 90px !important;
    padding: 7px 6px 24px !important;
    z-index: 9700 !important;
  }
  body > a.site-bookmark img,
  body > .site-bookmark img { width: 100% !important; height: 50px !important; }
  /* Keep sign-in and registration panels within the phone viewport. */
  body main { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
  #authView, #authView .card { max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; }
  #authView { margin: 26px auto 0 !important; }
  #authView .card { padding: 20px 16px !important; overflow: hidden !important; border-radius: 18px !important; }
  #authView .tabs { display: flex !important; gap: 8px !important; }
  #authView .tabs button { min-width: 0 !important; flex: 1 1 0 !important; overflow-wrap: anywhere !important; padding: 12px 7px !important; font-size: 14px !important; }
  #authView input, #authView .field { min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; }
  #authView .auth-heading { font-size: clamp(26px, 7vw, 36px) !important; overflow-wrap: anywhere !important; }
}

/* Beta 1.0 mobile v3: restore 89% transparency and correct sign-in geometry. */
@media (max-width: 600px) {
  #unifiedSidebar {
    background: rgba(16,28,39,.11) !important; /* 89% transparent, matching desktop */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: none !important;
    border-left: 1px solid rgba(145,194,212,.35) !important;
  }
  /* Bookmark flush with the top of the content header, not floating below it. */
  body > a.site-bookmark, body > .site-bookmark {
    top: 0 !important;
    left: 12px !important;
    right: auto !important;
    width: 58px !important;
    height: 90px !important;
    transform: none !important;
  }
  /* Override legacy fixed widths and desktop spacing on the sign-in page. */
  body[data-page="profile"] main {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100vw !important;
    padding: 112px 14px 42px !important;
    margin: 0 auto !important;
  }
  body[data-page="profile"] #authView.auth {
    width: 100% !important;
    max-width: 520px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }
  body[data-page="profile"] #authView .auth-heading {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 18px !important;
    font-size: clamp(24px, 7vw, 32px) !important;
    line-height: 1.18 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
  }
  body[data-page="profile"] #authView .card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 18px 14px 20px !important;
    border-radius: 18px !important;
    overflow: visible !important;
  }
  body[data-page="profile"] #authView .tabs {
    width: 100% !important;
    min-width: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
  }
  body[data-page="profile"] #authView .tabs .btn {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 9px 6px !important;
    font-size: clamp(12px, 3.7vw, 15px) !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    text-align: center !important;
  }
  body[data-page="profile"] #authView form,
  body[data-page="profile"] #authView .field,
  body[data-page="profile"] #authView .field input,
  body[data-page="profile"] #authView #submitBtn {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body[data-page="profile"] #authView #submitBtn { min-height: 50px !important; }
}

/* Beta 1.0 mobile v4: one consistent left brand position and readable right navigation. */
@media (max-width:600px) {
  body > header { position:relative!important; z-index:9600!important; }
  body > header .brand, body > header .nav .brand {
    position:fixed!important; top:10px!important; left:12px!important; right:auto!important;
    z-index:9800!important; display:flex!important; align-items:center!important;
    max-width:calc(100vw - 110px)!important; margin:0!important;
  }
  body > header .brand img { width:43px!important; height:43px!important; object-fit:contain!important; }
  #unifiedSidebar { width:164px!important; }
  #unifiedSidebar nav { display:grid!important; margin-top:108px!important; gap:8px!important; }
  #unifiedSidebar nav a { display:flex!important; justify-content:flex-start!important; font-size:15px!important; min-height:49px!important; padding:13px 12px!important; }
  #unifiedSidebar nav a .nav-text { display:inline!important; visibility:visible!important; opacity:1!important; font-size:15px!important; line-height:1.25!important; }
  #unifiedSidebar nav a::before { content:none!important; display:none!important; }
  #navCollapseToggle { right:164px!important; }
  body.nav-collapsed #navCollapseToggle { right:0!important; }
}

@media(max-width:600px){.mobile-brand-header{position:fixed!important;top:0!important;left:0!important;z-index:9600!important;background:transparent!important;border:0!important}.mobile-brand-header .brand{position:fixed!important;left:12px!important;top:10px!important;display:flex!important;align-items:center!important;z-index:9800!important}.mobile-brand-header .brand img{width:43px!important;height:43px!important}}
@media(min-width:601px){.mobile-brand-header{display:none!important}}

/* Beta 1.0 mobile v5: remove duplicate brand marks and keep friends controls visible. */
@media (max-width:600px) {
  body[data-page="chat"] > .site-bookmark,
  body[data-page="chat"] > a.site-bookmark,
  body:has(.topbar .tabs) > .site-bookmark,
  body:has(.topbar .tabs) > .mobile-brand-header,
  body[data-page="chat"] > .mobile-brand-header { display:none!important; }
  body:has(.topbar .tabs) .topbar {
    padding: 92px 14px 16px!important;
    height:auto!important;
    min-height:0!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:12px!important;
  }
  body:has(.topbar .tabs) .topbar h1 { margin:0!important; font-size:22px!important; }
  body:has(.topbar .tabs) .topbar .tabs {
    display:flex!important;flex-wrap:wrap!important;gap:8px!important;
    width:100%!important;position:relative!important;z-index:1!important;
  }
  body:has(.topbar .tabs) .topbar .tab {flex:0 1 auto!important;margin:0!important;padding:10px 12px!important;font-size:14px!important;white-space:normal!important;}
  body:has(.topbar .tabs) .topbar .tab.add {flex-basis:100%!important;width:max-content!important;max-width:100%!important;}
  body:has(.topbar .tabs) .content {padding:22px 16px!important;}
  /* Account dock remains accessible but must not cover the friends heading and tabs. */
  body:has(.topbar .tabs) > .bookmarkDock {top:0!important;right:6px!important;}
  #unifiedSidebar nav a[aria-current="page"] {background:rgba(47,92,117,.83)!important;outline:2px solid rgba(176,233,246,.65)!important;color:#fff!important;}
}

/* Mobile v6: remove legacy purple 69 bookmark and highlight current navigation. */
@media(max-width:600px){
 body[data-page="chat"] .site-bookmark,body[data-page="chat"] a.site-bookmark,
 body:has(.topbar .tabs) .site-bookmark,body:has(.topbar .tabs) a.site-bookmark{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
 #unifiedSidebar nav a[aria-current="page"],#unifiedSidebar nav a.is-current-page{background:#365f77!important;color:#fff!important;outline:2px solid #b2ecf7!important;outline-offset:-2px!important;box-shadow:inset 4px 0 #b2ecf7,0 0 16px #7bd9ed44!important;font-weight:850!important}
}