/* ==========================================================================
   AZRA Experience layer  (Community + Community Hub)
   Additive only: loaded LAST, changes presentation and interaction feel.
   No markup, data, API or database behaviour is touched. Dark / black / gold kept.
   Breakpoints follow the existing app: 1180 (compact rail), 1020 (mobile), 640 (edge-to-edge).
   ========================================================================== */
:root{
  --azx-line:rgba(255,255,255,.08);
  --azx-line-2:rgba(255,255,255,.15);
  --azx-card:#060606;
  --azx-card-2:#0a0a0a;
  --azx-gold:#ffd500;
  --azx-top:var(--topbar,64px);
  --azx-bar:58px;
  --azx-ease:cubic-bezier(.2,.8,.2,1);
}

/* ---------------------------------------------------------------- global details */
html body :focus-visible{outline:2px solid var(--azx-gold);outline-offset:2px;border-radius:10px}
html body .post{scroll-margin-top:calc(var(--azx-top) + 64px)}
/* usernames and handles are always LTR; stops "@name" flipping in RTL lines */
html body .who .u a[href^="/u/"],html body .mini-profile span,html body .person .pi span,html body .results .u{unicode-bidi:isolate}
html body .who .u a[href^="/u/"]{direction:ltr;display:inline-block}
html body .tabular,html body .act span,html body .cnt,html body .dot{font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- brand mark (real logo, no broken image) */
html body .brand .mark{width:auto;height:34px}
html body .brand .mark img{width:auto!important;height:30px!important;border-radius:0!important;object-fit:contain}

/* ---------------------------------------------------------------- search: "/" hint + calmer field */
html body .gsearch input{height:44px;background:#0a0a0a;border-color:var(--azx-line-2)}
html body .gsearch::after{
  content:"/";position:absolute;inset-inline-end:14px;top:50%;translate:0 -50%;
  min-width:22px;height:22px;display:grid;place-items:center;font:700 12px/1 Manrope,system-ui,sans-serif;
  color:#8a8a8a;border:1px solid var(--azx-line-2);border-radius:6px;background:#101010;pointer-events:none
}
html body .gsearch:focus-within::after{display:none}
html body .results{border-radius:18px;background:#080808}

/* ---------------------------------------------------------------- desktop shell */
@media (min-width:1181px){
  html body .layout{
    grid-template-columns:260px minmax(0,680px) 340px;
    justify-content:center;gap:34px;max-width:1500px;padding:20px 28px 90px;
  }
  html body .layout.no-right{grid-template-columns:260px minmax(0,820px)}
  html body .rail{top:calc(var(--azx-top) + 14px);max-height:calc(100vh - var(--azx-top) - 28px);padding-bottom:24px}

  /* left rail = app sidebar, not a boxed card */
  html body .rail-left .navcard{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
  html body .navlist{padding:0;gap:2px}
  html body .navlist button{padding:9px 14px;font-size:15.5px;font-weight:650;border-radius:14px!important;color:#cfcfcf}
  html body .navlist button .ico{width:21px;height:21px}
  html body .navlist button:hover{background:rgba(255,255,255,.06)!important;color:#fff;transform:none!important}
  html body .navlist button.active{
    color:var(--azx-gold)!important;font-weight:750;
    background:linear-gradient(90deg,rgba(255,213,0,.14),rgba(255,213,0,.03))!important;
  }
  html body .navlist .nav-group{padding:20px 14px 7px;color:#6f6f6f}
  html body .navlist .nav-group:first-child{padding-top:2px}
  html body .navlist .cnt{font-size:11px;min-width:20px;text-align:center}
}

/* ---------------------------------------------------------------- feed column */
html body #view>.card.row[data-act="compose"]{
  padding:14px 16px;border-radius:18px;background:var(--azx-card);border-color:var(--azx-line);
  transition:border-color .2s,background .2s
}
html body #view>.card.row[data-act="compose"]:hover{border-color:rgba(255,213,0,.35);background:var(--azx-card-2)}
html body #view>.card.row[data-act="compose"] .muted{font-size:15px;color:#7d7d7d}

/* feed tabs: sticky, equal width, like every major social app */
html body #homeTabs{
  position:sticky;top:var(--azx-top);z-index:30;margin-inline:0;margin-bottom:12px;
  background:rgba(0,0,0,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--azx-line);transition:top .28s var(--azx-ease)
}
html body #homeTabs button{flex:1 1 0;padding:15px 8px;font-size:14.5px;border-radius:0;text-align:center}
html body #homeTabs button:hover{background:rgba(255,255,255,.04)}
html body #homeTabs button.active::after{inset-inline:22%;height:3px;border-radius:3px 3px 0 0}

html body #homeTypes{gap:8px;margin-bottom:14px}
html body #homeTypes .chip{padding:6px 14px;font-size:13px;border-color:transparent;background:rgba(255,255,255,.055);color:#c4c4c4}
html body #homeTypes .chip:hover{background:rgba(255,255,255,.09);color:#fff}
html body #homeTypes .chip.active{background:var(--azx-gold);color:#000;border-color:var(--azx-gold)}

html body .feed-items{display:flex;flex-direction:column;gap:12px}
html body .feed-items>.post+.post,html body .post+.post{margin-top:0}

/* ---------------------------------------------------------------- post card */
html body .post{
  background:var(--azx-card)!important;background-image:none!important;
  border:1px solid var(--azx-line)!important;border-radius:20px!important;
  padding:18px 20px 8px!important;box-shadow:none!important;transform:none!important;
  transition:border-color .2s,background-color .2s!important
}
html body .post:hover{border-color:var(--azx-line-2)!important;background:var(--azx-card-2)!important;box-shadow:none!important;transform:none!important}
html body .post.az-current{border-color:rgba(255,213,0,.5)!important}
html body .post-head{align-items:center;gap:12px}
html body .post-head .avatar{width:46px;height:46px}
html body .who b{font-size:15.5px}
html body .who .u{font-size:13px;color:#8b8b8b}
html body .post h2{font-size:21px;line-height:1.4;margin:14px 0 8px;letter-spacing:-.005em}
html body .post h3.pt{font-size:18px}
html body .post .md.compact{font-size:15.5px;line-height:1.8;color:#e9e9e9}
html body .post .excerpt{font-size:15px;line-height:1.75;color:#bdbdbd}
html body .post .cover{border-radius:16px;border-color:var(--azx-line);margin:14px 0 6px}
html body .post .projcard{border-radius:16px}
html body .post .more{display:inline-block;margin-top:4px;font-weight:700;color:var(--azx-gold)}

/* action bar: evenly spread, bigger targets, meaningful hover colours */
html body .post .actions{
  margin:12px -10px 0;padding-top:6px;border-top:1px solid rgba(255,255,255,.06);
  justify-content:space-between;gap:0;flex-wrap:nowrap
}
html body .post .act{min-height:40px;padding:8px 13px;gap:8px;font-size:13.5px}
html body .post .act .ico{width:20px;height:20px}
html body .post .act.push{margin-inline-start:0}
html body .post .act:hover{background:rgba(255,255,255,.07)}
html body .post .act.like:hover{color:#ff5365;background:rgba(255,83,101,.12)}
html body .post .act.rp:hover{color:#35d399;background:rgba(53,211,153,.12)}
html body .post .act.save:hover,html body .post .act.push:hover{color:var(--azx-gold);background:rgba(255,213,0,.10)}
html body .post a.act:hover{color:#5b8cff;background:rgba(91,140,255,.12)}
@keyframes azxPop{0%{transform:scale(1)}35%{transform:scale(1.38)}70%{transform:scale(.92)}100%{transform:scale(1)}}
html body .act.az-pop .ico{animation:azxPop .5s var(--azx-ease)}

/* ---------------------------------------------------------------- right rail */
html body .rail:not(.rail-left) .card{background:var(--azx-card);border-color:var(--azx-line);border-radius:20px;padding:16px 18px}
html body .rail:not(.rail-left) .card h3{font-size:14.5px;display:flex;align-items:center;gap:8px;margin-bottom:10px}
html body .mini-profile .avatar.lg{width:54px;height:54px}
html body .mini-profile b{font-size:15.5px}
html body .tagrow{padding:10px 10px;margin-inline:-10px;border-radius:12px;border-bottom:0;transition:background .15s}
html body .tagrow:hover{background:rgba(255,255,255,.05)}
html body .side-list .person{background:transparent;border:0;border-radius:12px;padding:10px;margin-inline:-10px;transition:background .15s}
html body .side-list .person:hover{background:rgba(255,255,255,.05)}
html body .person .pi b{display:flex;align-items:center;gap:5px;min-width:0}
html body .person .pi b a{overflow:hidden;text-overflow:ellipsis}

/* ---------------------------------------------------------------- back to top (injected) */
.az-top{
  position:fixed;inset-inline-end:26px;bottom:30px;z-index:80;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;color:#fff;background:rgba(14,14,14,.92);
  border:1px solid var(--azx-line-2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;pointer-events:none;translate:0 12px;transition:opacity .25s,translate .25s var(--azx-ease),border-color .2s
}
.az-top.show{opacity:1;pointer-events:auto;translate:0 0}
.az-top:hover{border-color:rgba(255,213,0,.6);color:var(--azx-gold)}
.az-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ==========================================================================
   MOBILE  (<= 1020px)
   ========================================================================== */
@media (max-width:1020px){
  /* top bar: one clean row, search icon actually visible */
  html body .topbar{height:56px;gap:4px;padding:0 10px;transition:transform .28s var(--azx-ease)}
  html body{--azx-top:56px}
  html.az-hide-top body{--azx-top:0px}
  html.az-hide-top body .topbar{transform:translateY(-100%)}
  html body .brand{font-size:18px;gap:7px}
  html body .brand .mark{height:30px}
  html body .brand .mark img{height:26px!important}
  html body #mSearchBtn{
    display:grid;place-items:center;width:42px;height:42px;margin-inline-start:auto;border-radius:50%;
    color:#e8e8e8;position:relative
  }
  html body #mSearchBtn::before{
    content:"";width:21px;height:21px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center/contain no-repeat;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E") center/contain no-repeat
  }
  html body .top-actions{margin-inline-start:0;gap:4px}
  html body #msgBtn{display:none}            /* Messages already live in the bottom bar */
  html body .az-lang{height:34px}
  html body .az-lang button{min-width:30px;height:26px;padding:0 9px;font-size:11px}
  html body .topbar .icon-btn{width:38px;height:38px}
  html body .gsearch{top:7px}
  html body .gsearch::after{display:none}
  html body .gsearch input{height:42px}

  /* composer: one slim row */
  html body #view>.card.row[data-act="compose"]{padding:10px 14px;gap:10px;border-radius:0;border-inline:0;margin-bottom:0!important}
  html body #view>.card.row[data-act="compose"] .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px}
  html body #view>.card.row[data-act="compose"] .btn{display:none}

  /* tabs / chips */
  html body #homeTabs{margin-bottom:0}
  html body #homeTabs button{padding:14px 4px;font-size:14px}
  html body #homeTypes{margin:10px 14px 10px;padding-bottom:0}
  html body #homeTypes .chip{padding:6px 13px}

  /* posts become a continuous, divided timeline */
  html body .feed-items{gap:0}
  html body .post{
    background:#000!important;border:0!important;border-bottom:1px solid var(--azx-line)!important;
    border-radius:0!important;padding:14px 16px 2px!important
  }
  html body .post:hover{background:#000!important}
  html body .post .cover{border-radius:14px;margin-inline:0}
  html body .post-head .avatar{width:42px;height:42px}
  html body .post h2{font-size:19px}
  html body .post .actions{margin:8px -8px 0;border-top:0;padding-top:0}
  html body .post .act{padding:8px 11px}

  /* content stays clear of the floating glass bar (bar itself is untouched: liquid glass, floating) */
  html body .layout,html body .layout.no-right{padding:0 0 calc(var(--bottombar,60px) + 76px + env(safe-area-inset-bottom))!important}
  /* soft fade behind the floating bar so text never collides with the glass */
  html::after{
    content:"";position:fixed;inset-inline:0;bottom:0;height:calc(110px + env(safe-area-inset-bottom));z-index:60;pointer-events:none;
    background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.55) 45%,rgba(0,0,0,0))
  }
  .az-top{inset-inline-end:16px;bottom:calc(100px + env(safe-area-inset-bottom));width:42px;height:42px}
}

@media (max-width:640px){
  html body #homeTabs{margin-inline:0}
}

/* ==========================================================================
   COMMUNITY HUB  (page.css + community-hub-ui.css)
   ========================================================================== */
@media (max-width:900px){
  /* header was overflowing the screen: keep brand + compact icon row */
  html body .hub-head.hub-top{gap:4px!important;padding:0 10px 0 0!important}
  html body .hub-brand{flex:0 1 auto!important;padding:0 14px!important}
  html body .hub-search{flex:0 0 38px!important;width:38px!important;min-width:38px!important;padding:0!important;justify-content:center;margin-inline-start:auto;margin-left:auto}
  html body .hub-search span,html body .hub-search kbd{display:none!important}
  html body .hub-top-actions{flex:0 0 auto;gap:2px!important}
  html body .hub-top-actions .hub-ic{width:36px!important;height:36px!important}
}
html body .hub-main section h2{letter-spacing:-.01em}


@media (max-width:900px){
  /* hub: floating glass bar kept; just fade + clearance */
  html body .hub-main{padding-bottom:calc(120px + env(safe-area-inset-bottom))!important}
  html:has(.hxm-bar)::after{
    content:"";position:fixed;inset-inline:0;bottom:0;height:calc(110px + env(safe-area-inset-bottom));z-index:900;pointer-events:none;
    background:linear-gradient(to top,rgba(0,0,0,.88),rgba(0,0,0,.55) 45%,rgba(0,0,0,0))
  }
}

/* ---------------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html body .act.az-pop .ico{animation:none}
  html body .topbar,html body #homeTabs,.az-top{transition:none!important}
}