/* Hamrah Group 11.4 Dev3 R2 — precision mobile UI repair */

/* The desktop-only welcome card must never leak into mobile Settings. */
.g114d3-desktop-welcome{display:none}
@media(min-width:920px){html[data-hamrah-desktop="windows"] .g114d3-desktop-welcome{display:grid}}

/* Login auxiliary controls: same logic, calmer spacing and geometry. */
.login-card #preloginTestButton,
.login-card #p2pLoginButton{
  min-height:50px;
  border-radius:18px!important;
  padding-inline:16px;
  margin-inline:0!important;
  box-shadow:none;
}
.login-card #preloginTestButton{
  margin-top:22px!important;
  border:1px solid color-mix(in srgb,var(--primary) 25%,var(--line));
  background:color-mix(in srgb,var(--primary) 10%,var(--surface));
}
.login-card #preloginTestResult{
  min-height:18px;
  margin:7px 4px 0;
  line-height:1.6;
}
.login-card #p2pLoginButton{
  margin-top:12px!important;
  margin-bottom:3px!important;
}
@media(hover:hover){
  .login-card #preloginTestButton:hover,
  .login-card #p2pLoginButton:hover{
    border-color:color-mix(in srgb,var(--primary) 48%,var(--line));
    transform:translateY(-1px);
  }
}

@media(max-width:860px){
  html:not([data-hamrah-desktop="windows"]){
    --g114d3r2-mobile-header-base:78px;
    --g114d3r2-mobile-header-total:calc(var(--g114d3r2-mobile-header-base) + env(safe-area-inset-top));
  }
  html:not([data-hamrah-desktop="windows"]) body[data-g114-header="compact"]{
    --g114d3r2-mobile-header-base:66px;
  }
  html:not([data-hamrah-desktop="windows"]) body[data-g114-header="glass"]{
    --g114d3r2-mobile-header-base:74px;
  }

  /* One contained app header; the legacy detached pseudo-curve is removed. */
  html:not([data-hamrah-desktop="windows"]) .app>.topbar{
    box-sizing:border-box!important;
    height:var(--g114d3r2-mobile-header-total)!important;
    min-height:var(--g114d3r2-mobile-header-total)!important;
    padding:calc(9px + env(safe-area-inset-top)) 14px 10px!important;
    display:flex!important;
    align-items:center!important;
    gap:10px!important;
    overflow:hidden!important;
    isolation:isolate!important;
    border:0!important;
    border-radius:0 0 24px 24px!important;
    background:linear-gradient(135deg,
      color-mix(in srgb,var(--primary) 86%,#12375c),
      color-mix(in srgb,var(--primary-2) 82%,#102943))!important;
    box-shadow:0 9px 28px color-mix(in srgb,var(--primary) 24%,transparent)!important;
  }
  html:not([data-hamrah-desktop="windows"]) .app>.topbar::before{
    content:"";
    position:absolute;
    inset:auto -10% -45% -10%;
    height:62%;
    border-radius:50% 50% 0 0;
    background:linear-gradient(to top,rgba(0,0,0,.12),transparent);
    pointer-events:none;
    z-index:-1;
  }
  html:not([data-hamrah-desktop="windows"]) .app>.topbar::after{
    content:none!important;
    display:none!important;
  }
  html:not([data-hamrah-desktop="windows"]) body[data-g114-header="compact"] .app>.topbar{
    border-radius:0 0 16px 16px!important;
    background:var(--gradient)!important;
    box-shadow:0 5px 18px color-mix(in srgb,var(--primary) 18%,transparent)!important;
  }
  html:not([data-hamrah-desktop="windows"]) body[data-g114-header="compact"] .app>.topbar::before{content:none}
  html:not([data-hamrah-desktop="windows"]) body[data-g114-header="glass"] .app>.topbar{
    border-radius:0 0 22px 22px!important;
    background:color-mix(in srgb,var(--surface) 68%,transparent)!important;
    border-bottom:1px solid color-mix(in srgb,#fff 14%,var(--line))!important;
    backdrop-filter:blur(18px) saturate(145%)!important;
    -webkit-backdrop-filter:blur(18px) saturate(145%)!important;
  }
  html:not([data-hamrah-desktop="windows"]) .topbar-copy{
    min-width:0;
    flex:1 1 auto;
    gap:10px;
  }
  html:not([data-hamrah-desktop="windows"]) .topbar-copy>div:last-child{min-width:0}
  html:not([data-hamrah-desktop="windows"]) .topbar h1{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:1.08rem;
  }
  html:not([data-hamrah-desktop="windows"]) .topbar small{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  html:not([data-hamrah-desktop="windows"]) .topbar .mini-brand{
    width:42px;
    height:42px;
    flex:0 0 42px;
    border-radius:50%;
  }
  html:not([data-hamrah-desktop="windows"]) .topbar .mini-brand.logo-photo img{border-radius:50%}
  html:not([data-hamrah-desktop="windows"]) .topbar #topAction{
    width:42px;
    height:42px;
    flex:0 0 42px;
  }
  html:not([data-hamrah-desktop="windows"]) .app>.view{
    box-sizing:border-box;
    height:calc(100% - var(--g114d3r2-mobile-header-total))!important;
    padding-top:18px;
  }
  html:not([data-hamrah-desktop="windows"]) #chatsView .chat-tools{margin-top:2px}

  /* Chat header uses the same safe, contained geometry. */
  html:not([data-hamrah-desktop="windows"]) .chat-header{
    box-sizing:border-box;
    min-height:calc(66px + env(safe-area-inset-top))!important;
    padding:calc(8px + env(safe-area-inset-top)) 10px 8px!important;
    overflow:hidden;
    isolation:isolate;
    border-radius:0 0 20px 20px!important;
    box-shadow:0 7px 22px rgba(0,0,0,.16);
  }

  /* Main Settings: intro first, room entry second, search third. */
  html:not([data-hamrah-desktop="windows"]) #settingsView.settings-view{padding-inline:12px!important}
  html:not([data-hamrah-desktop="windows"]) #settingsView .g8-settings-home{
    display:flex;
    flex-direction:column;
    width:100%;
    min-width:0;
  }
  html:not([data-hamrah-desktop="windows"]) #settingsView .g8-settings-hero{
    order:0;
    width:100%;
    box-sizing:border-box;
    margin:0 0 12px!important;
    padding:17px 16px!important;
    border-radius:22px!important;
    overflow:hidden;
  }
  html:not([data-hamrah-desktop="windows"]) #settingsView #p2pSettingsGroup{
    order:1;
    width:100%;
    box-sizing:border-box;
    margin:0 0 12px!important;
    border-radius:22px!important;
  }
  html:not([data-hamrah-desktop="windows"]) #settingsView .g8-settings-search{order:2;margin:0 0 13px!important}
  html:not([data-hamrah-desktop="windows"]) #settingsView .g8-category-grid{order:3}
  html:not([data-hamrah-desktop="windows"]) #settingsView .g8-search-results{order:4}
  html:not([data-hamrah-desktop="windows"]) #settingsView .settings-intro{display:none!important}

  /* Profile avatar and camera are one component again. */
  html:not([data-hamrah-desktop="windows"]) #profileView .profile-hero-v473{
    box-sizing:border-box;
    min-height:320px;
    margin-top:4px;
    padding:34px 14px 22px!important;
    border-radius:26px;
  }
  html:not([data-hamrah-desktop="windows"]) #profileView .profile-hero-v473 .profile-pattern{z-index:-1}
  html:not([data-hamrah-desktop="windows"]) #profileView .profile-avatar-wrap{
    position:relative!important;
    display:grid!important;
    place-items:center!important;
    width:108px!important;
    height:108px!important;
    margin:0 auto 12px!important;
    z-index:3!important;
    animation:none!important;
  }
  html:not([data-hamrah-desktop="windows"]) #profileView .profile-avatar-wrap .avatar-xl{
    width:108px!important;
    height:108px!important;
    margin:0!important;
    border-radius:34px!important;
  }
  html:not([data-hamrah-desktop="windows"]) #profileView .profile-avatar-wrap .avatar-camera{
    position:absolute!important;
    inset-inline-start:auto!important;
    inset-inline-end:-7px!important;
    inset-block-start:auto!important;
    inset-block-end:5px!important;
    left:auto!important;
    bottom:auto!important;
    width:38px!important;
    height:38px!important;
    padding:0!important;
    border:3px solid rgba(255,255,255,.92)!important;
    border-radius:50%!important;
    background:var(--surface)!important;
    color:var(--primary)!important;
    box-shadow:0 8px 20px rgba(0,0,0,.25)!important;
    z-index:4!important;
  }
  html:not([data-hamrah-desktop="windows"]) #profileView .profile-avatar-wrap .avatar-camera svg{
    width:18px;
    height:18px;
  }
  html:not([data-hamrah-desktop="windows"]) #profileView .profile-hero-badges{margin-top:8px}

  /* Experience Studio mobile header and category rail. */
  html:not([data-hamrah-desktop="windows"]) .g114d3-topbar{
    position:relative;
    min-height:calc(82px + env(safe-area-inset-top));
    grid-template-columns:48px minmax(0,1fr)!important;
    align-items:center!important;
    gap:10px!important;
    padding:calc(10px + env(safe-area-inset-top)) 12px 11px!important;
    border-bottom:1px solid var(--line);
    background:color-mix(in srgb,var(--surface) 96%,transparent);
    z-index:12;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-topbar>div{min-width:0}
  html:not([data-hamrah-desktop="windows"]) .g114d3-topbar h2{
    margin:3px 0 0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:1.15rem;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-topbar>div>span{
    display:block;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:.5rem;
    letter-spacing:.11em;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-icon-btn{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    border-radius:15px!important;
    align-self:center;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-workspace{
    padding-bottom:18px!important;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-nav{
    order:0;
    position:relative!important;
    top:auto!important;
    z-index:4!important;
    display:flex!important;
    gap:9px!important;
    min-height:94px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:10px 12px 12px!important;
    border-bottom:1px solid var(--line)!important;
    background:var(--surface)!important;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-nav::-webkit-scrollbar{display:none}
  html:not([data-hamrah-desktop="windows"]) .g114d3-nav button{
    flex:0 0 112px!important;
    width:112px!important;
    min-width:112px!important;
    min-height:72px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr)!important;
    align-items:center!important;
    justify-content:initial!important;
    gap:8px!important;
    padding:10px!important;
    border:1px solid var(--line)!important;
    border-radius:18px!important;
    background:var(--surface-2)!important;
    color:var(--muted)!important;
    text-align:right!important;
    scroll-snap-align:start;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-nav button span{
    width:32px!important;
    height:32px!important;
    flex:0 0 32px!important;
    display:grid!important;
    place-items:center!important;
    border-radius:11px!important;
    background:var(--surface)!important;
    color:var(--primary)!important;
    font-size:1.05rem!important;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-nav button b{
    display:block!important;
    max-width:none!important;
    overflow:visible!important;
    text-overflow:clip!important;
    white-space:normal!important;
    font-size:.61rem!important;
    line-height:1.45!important;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-nav button.active{
    border-color:color-mix(in srgb,var(--primary) 55%,var(--line))!important;
    background:color-mix(in srgb,var(--primary) 12%,var(--surface))!important;
    color:var(--text)!important;
    box-shadow:0 7px 20px color-mix(in srgb,var(--primary) 12%,transparent)!important;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-nav button.active span{
    background:var(--primary)!important;
    color:#fff!important;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-preview-wrap{order:1!important}
  html:not([data-hamrah-desktop="windows"]) .g114d3-panel{order:2!important}
  html:not([data-hamrah-desktop="windows"]) .g114d3-footer{
    padding-block-end:max(9px,env(safe-area-inset-bottom))!important;
  }

  /* Mobile login keeps both auxiliary actions comfortably separated. */
  html:not([data-hamrah-desktop="windows"]) .login-card #preloginTestButton,
  html:not([data-hamrah-desktop="windows"]) .login-card #p2pLoginButton{
    min-height:52px;
    border-radius:19px!important;
  }
}

@media(max-width:350px){
  html:not([data-hamrah-desktop="windows"]) .g114d3-nav button{
    flex-basis:104px!important;
    width:104px!important;
    min-width:104px!important;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-nav button b{font-size:.57rem!important}
}

@media(prefers-reduced-motion:reduce){
  .login-card #preloginTestButton,
  .login-card #p2pLoginButton,
  .g114d3-nav button{transition:none!important}
}


/* E3 Theme Studio R1 — responsive theme-gallery completion */
@media(max-width:860px){
  html:not([data-hamrah-desktop="windows"]) .g114d3-theme-overview{
    grid-template-columns:minmax(0,1fr) 142px;
    gap:11px;
    margin:0 0 12px;
    padding:14px;
    border-radius:21px;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-theme-overview-ui{
    height:108px;
    border-radius:17px;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-featured{
    grid-template-columns:1fr!important;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-featured button{
    grid-template-columns:82px minmax(0,1fr) auto;
    min-height:96px;
    border-radius:17px;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-feature-art{
    width:82px;
    height:69px;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-feature-group{
    margin-top:15px;
  }
}

@media(max-width:560px){
  html:not([data-hamrah-desktop="windows"]) .g114d3-theme-overview{
    grid-template-columns:1fr;
    padding:13px;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-theme-overview-ui{
    height:116px;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-theme-token-row{
    margin-top:10px;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-featured button{
    grid-template-columns:76px minmax(0,1fr);
    grid-template-rows:auto auto;
    align-items:center;
    min-height:101px;
    padding:10px;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-feature-art{
    grid-row:1/3;
    width:76px;
    height:66px;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-featured button>em{
    grid-column:2;
    justify-self:start;
    align-self:start;
    margin-top:2px;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-feature-copy{
    grid-column:2;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-theme-tags{
    margin-top:5px;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-options.theme-family{
    grid-template-columns:1fr 1fr!important;
  }
}

@media(max-width:390px){
  html:not([data-hamrah-desktop="windows"]) .g114d3-options.theme-family{
    grid-template-columns:1fr!important;
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-featured button{
    grid-template-columns:70px minmax(0,1fr);
  }
  html:not([data-hamrah-desktop="windows"]) .g114d3-feature-art{
    width:70px;
    height:63px;
  }
}
/* R5_SHARED_CHAT_HEADER_PIN_ARROW_CLEANUP_HF1
   Remove the obsolete dark decorative header underlay. It was nearly
   invisible in dark appearance but becomes a gray/black strip in light mode.
*/
html:not([data-hamrah-desktop="windows"]) .app > .topbar::before,
html[data-hamrah-desktop="windows"] .app > .topbar::before {
  content: none !important;
  display: none !important;
  background: none !important;
  box-shadow: none !important;
  animation: none !important;
}