/* =====================================================================
   x-fix.css  -  loaded LAST (after glass.css)

   1. Pulse tabs (Trending / New / Almost / Migrated)
        flat X-style text tabs: no box, no outlines, accent underline on the active one
   2. Profile page
        X layout: wide banner, big avatar overlapping it, buttons on the right,
        name / @handle / bio / joined / following + followers underneath
   3. Chat
        the white "readability" panels are gone - chat now uses the same glass tokens
        as the rest of the site, so it follows the Themes panel
        (--tm-glass / --tm-hi / --tm-btn / --tm-btn-ink)
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. PULSE TABS
   --------------------------------------------------------------------- */
#s-feed .chipbar{
  padding:0!important;margin:0;border:0!important;box-shadow:none!important;
  background:transparent!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#s-feed .chipbar::after{display:none!important}

#s-feed .chipbar .seg,#s-feed #seg{
  display:flex;gap:0!important;padding:0!important;margin:0!important;max-width:none!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border-bottom:1px solid var(--gl-edge-2)!important;
  overflow-x:auto;scrollbar-width:none}
#s-feed #seg::-webkit-scrollbar{display:none}

#s-feed #seg button{
  flex:1 0 auto;position:relative;padding:14px 20px 15px;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
  color:var(--txt-2);font-size:15px;font-weight:600;white-space:nowrap;
  -webkit-tap-highlight-color:transparent;transition:color .15s}
#s-feed #seg button[aria-selected="true"]{
  color:var(--txt)!important;font-weight:800!important;
  background:transparent!important;box-shadow:none!important;border-radius:0!important}
@media(hover:hover){#s-feed #seg button:not([aria-selected="true"]):hover{color:var(--txt);background:rgba(var(--tm-hi,255,255,255),.05)!important}}

/* the active underline (glass.css hides .seg button::after - this wins on the feed only) */
#s-feed #seg button::after{
  content:"";display:block!important;position:absolute;left:50%;bottom:0;
  width:0;height:4px;border-radius:4px 4px 0 0;transform:translateX(-50%);
  background:var(--tm-btn,#f3f3f5);transition:width .2s ease}
#s-feed #seg button[aria-selected="true"]::after{width:min(56px,64%)}

/* phone: the sticky strip needs a body so rows don't show through it */
@media(max-width:1023px){
  #s-feed .chipbar{
    background:rgba(var(--tm-glass-bar,0,0,0),calc(var(--tm-a-bar,.5) + .32))!important;
    -webkit-backdrop-filter:blur(var(--tm-blur,0px))!important;backdrop-filter:blur(var(--tm-blur,0px))!important}
  #s-feed #seg button{padding:13px 14px 14px}
}
@media(min-width:1024px){
  #s-feed .chipbar{padding:0 24px!important}
  #s-feed #seg button{flex:0 0 auto;padding:14px 24px 15px}
}


/* ---------------------------------------------------------------------
   2. PROFILE  (X layout)
   --------------------------------------------------------------------- */
/* PC: the banner runs the FULL width of the screen (right of the side bar);
   everything under it stays in a readable centred column. */
@media(min-width:1024px){
  /* --pc = the empty space on each side of the 760px column (screen minus the 84px side bar).
     The body gets that as padding (so every block keeps its own margins and lines up),
     and the banner pulls itself back out by the same amount to touch both edges. */
  #prof-body{max-width:none;--pc:max(0px,calc((100vw - 84px - 760px)/2));padding-inline:var(--pc)}
  #prof-body>.xp-banner{width:auto;margin-inline:calc(-1 * var(--pc))}
  #s-prof .ptop{left:84px;right:0;width:auto}
}

/* banner: full width, shown at the picture's OWN shape - nothing is cropped.
   (Only a banner with no picture keeps the 3:1 gradient strip.) */
.xp-banner{
  position:relative;overflow:hidden;width:100%;margin:0;
  background:linear-gradient(135deg,var(--accent,#3a3d4a),rgba(0,0,0,.55))}
/* A fixed height, not aspect-ratio + max-height: with those two the browser also caps the WIDTH
   (250px x 3 = 750px), which left the empty banner stopping short of the right edge on wide screens. */
/* No banner picture = no banner: transparent, so the theme background shows through.
   Only a small spacer is kept so the avatar clears the back/menu buttons. */
.xp-banner:not(:has(img)){height:98px;background:none}
@media(min-width:700px){.xp-banner:not(:has(img)){height:116px}}
/* the theme's auto banner: always a 3:1-ish strip that covers the width, whatever shape the picture is */
.xp-banner.auto{height:clamp(112px,33.4vw,250px)}
.xp-banner.auto .pbanner-clip{height:100%}
.xp-banner.auto .pbanner-img{height:100%;max-height:none;object-fit:cover;object-position:center}
.xp-banner .pbanner-clip{position:relative;inset:auto;display:block}
.xp-banner .pbanner-img{display:block;width:100%;height:auto;max-height:90vh;object-fit:contain;
  image-rendering:auto}
@media(min-width:1024px){.xp-banner .pbanner-img{max-height:none}}   /* PC: always edge to edge, never letterboxed */

.xp-head{position:relative;z-index:2;padding:0 16px}
.xp-row{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;min-height:58px}

/* avatar sits half on the banner - no ring, just the picture */
.xp-av{flex:none;width:84px;height:84px;margin-top:-42px}
.xp-av .pav{
  width:100%;height:100%;font-size:40px;
  background:rgb(var(--tm-glass,8,8,10));
  border:0!important;
  box-shadow:none!important}
@media(min-width:700px){
  .xp-av{width:120px;height:120px;margin-top:-60px}
  .xp-av .pav{font-size:56px}
  .xp-row{min-height:70px}
}

/* buttons: round pills on the right, just under the banner */
.xp-row .pact{padding-top:12px;flex-wrap:wrap;justify-content:flex-end}
.xp-row .pbtn{height:36px;padding:0 18px;border-radius:999px;font-size:14.5px;font-weight:700;box-shadow:none}
.xp-row .pbtn.soft,.xp-row .pbtn.on{box-shadow:inset 0 0 0 1px var(--gl-edge)!important}

/* identity block: no boxes, just text on the page */
.xp-id{padding:10px 0 6px;min-width:0}
.xp-id .pid-name{font-size:22px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--txt)!important}
.xp-id .pid-name .rank-badge{width:28px;height:28px}
.xp-id .pid-handle{margin-top:2px;font-size:15px;font-weight:400;color:var(--txt-2)!important}
.xp-id .pbio{
  margin:12px 0 0!important;padding:0!important;border-radius:0!important;border:0!important;
  background:none!important;box-shadow:none!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  font-size:15px;line-height:1.4;color:var(--txt)!important;white-space:pre-wrap;word-break:break-word}
.xp-meta{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:10px;font-size:14.5px;color:var(--txt-2)}
.xp-meta span{display:inline-flex;align-items:center;gap:5px}
.xp-meta i{display:grid;place-items:center;color:var(--txt-2)}
.xp-id .pid-stats{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:10px;font-size:14.5px;color:var(--txt-2)!important}
.xp-id .pid-stats b{margin-right:4px;font-weight:800;color:var(--txt)!important}

/* the section under the header starts a little closer */
#s-prof .xp-head+.wchip,#s-prof .xp-head+.pchips{margin-top:8px!important}


/* ---------------------------------------------------------------------
   3. CHAT  -  follows the theme
      (chat.css forced white frosted panels + dark ink with !important;
       same selectors here, loaded later, put it back on the glass tokens)
   --------------------------------------------------------------------- */
body #s-chat .ch-main,
body #s-chat .ch-staff,
body #s-chat .ch-voice,
body #s-chat .ch-search,
body #s-chat .hotchip,
body #s-chat .stf{
  background-color:var(--gl-fill)!important;
  border-color:var(--gl-edge-2)!important;
  color:var(--txt);
  -webkit-backdrop-filter:var(--gl-blur);backdrop-filter:var(--gl-blur)}
body #s-chat .ch-main{box-shadow:inset 0 0 0 1px var(--gl-edge-2),var(--gl-shadow)}

/* messages */
.cm .ctx{color:var(--txt)}
.cm .cts{color:var(--txt-3)}
.cm .cnm .rank-name{background:none;padding:0;gap:6px}
.cm.me{background:rgba(var(--tm-hi,255,255,255),.06)}
.cm.me .cnm{color:var(--tm-btn,#f3f3f5)}
@media(hover:hover){.cm:hover{background:rgba(var(--tm-hi,255,255,255),.04)}.cm.me:hover{background:rgba(var(--tm-hi,255,255,255),.09)}}
.cm-mod button{background:var(--gl-fill-2);color:var(--txt-1);border-color:var(--gl-edge)}

/* direct messages */
body #s-chat .dmb{background-color:var(--gl-fill-2)!important;color:var(--txt);border-color:var(--gl-edge-2)!important}
body #s-chat .dmb.me{background-color:var(--tm-btn,#f3f3f5)!important;color:var(--tm-btn-ink,#0a0a0c)!important;border-color:transparent!important}
.dmr.un{background:rgba(var(--tm-hi,255,255,255),.07)}
@media(hover:hover){.dmr:hover{background:rgba(var(--tm-hi,255,255,255),.06)}}
.dmav{color:var(--txt-2)}
.dmr-tx em,.dm-nm em{color:var(--txt-2);background:rgba(var(--tm-hi,255,255,255),.10)}
.dmr-r i{background:var(--tm-btn,#f3f3f5);color:var(--tm-btn-ink,#0a0a0c)}

/* suggested texts */
.dm-quick-cap{color:var(--txt-3)}
body #s-chat .dm-quick button,body #s-chat .stf-quick button{
  background-color:var(--gl-fill-2)!important;border:1px solid var(--gl-edge)!important;
  color:var(--txt)!important;box-shadow:none}
@media(hover:hover){
  body #s-chat .dm-quick button:hover,body #s-chat .stf-quick button:hover{
    background-color:rgba(var(--tm-hi,255,255,255),.16)!important;border-color:var(--tm-btn,#f3f3f5)!important}}

/* input + send + "new messages" pill use the theme accent */
.ch-compose textarea{background:var(--gl-fill);border-color:var(--gl-edge-2);color:var(--txt)}
.ch-compose textarea:focus{border-color:var(--tm-btn,#f3f3f5);box-shadow:0 0 0 3px rgba(var(--tm-hi,255,255,255),.14)}
.ch-search:focus-within{border-color:var(--tm-btn,#f3f3f5)}
.ch-send,.ch-new{background:var(--tm-btn,#f3f3f5);color:var(--tm-btn-ink,#0a0a0c)}


/* ---- DMs: always readable ----------------------------------------------------------
   Bubbles used the theme's see-through glass fill, so on a busy background (or with the
   Opacity slider turned down) text blended into the artwork. DMs now sit on a solid-ish
   dark panel with opaque bubbles; the theme tint is kept, the transparency is not. */
body #s-chat .ch-dmp{
  /* always dark enough for white text, even on a light theme tint */
  --dm-bg:rgba(14,15,19,.9);
  --dm-in:#23252d;
}
@supports (background:color-mix(in srgb,red 50%,blue)){
  body #s-chat .ch-dmp{
    --dm-bg:color-mix(in srgb,rgba(var(--tm-glass-bar,10,10,12),1) 30%,rgba(14,15,19,.9));
    --dm-in:color-mix(in srgb,rgb(var(--tm-glass-2,34,34,40)) 30%,#1e2027);
  }
}
body #s-chat .dm-inbox,
body #s-chat .dm-thread{
  background:var(--dm-bg);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(var(--tm-hi,255,255,255),.12);
  border-radius:16px;padding:8px;
}
body #s-chat .dm-thread{padding:10px 10px 8px}
body #s-chat .dm-log{padding:6px 4px 10px}

/* received */
body #s-chat .dm-log .dmb{
  background-color:var(--dm-in)!important;
  background-image:none!important;
  color:#fff!important;
  border:1px solid rgba(var(--tm-hi,255,255,255),.22)!important;
  font-size:15px;line-height:1.45;
  box-shadow:0 1px 3px rgba(0,0,0,.35);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
/* sent: solid accent, readable ink */
body #s-chat .dm-log .dmb.me{
  background-color:var(--tm-btn,#f3f3f5)!important;
  color:var(--tm-btn-ink,#0a0a0c)!important;
  border-color:transparent!important;
}
body #s-chat .dm-log .dmb .dmt,
body #s-chat .dm-log .dmb .dmt *{color:inherit!important}
body #s-chat .dm-log .dmb .dmts{opacity:.75}

/* inbox rows + headers + empty state */
body #s-chat .dmr{background-color:transparent!important;border:0!important;box-shadow:none!important}
body #s-chat .dmr .dmr-tx b,body #s-chat .dm-nm b{color:#fff}
body #s-chat .dmr .dmr-tx small{color:rgba(255,255,255,.78)}
body #s-chat .dmr.un{background-color:rgba(var(--tm-hi,255,255,255),.10)!important}
body #s-chat .dmr-r time,body #s-chat .dm-nm small{color:rgba(255,255,255,.7)}
body #s-chat .dm-empty{color:rgba(255,255,255,.82)}
body #s-chat .dm-empty b{color:#fff}
body #s-chat .dm-quick-cap{color:rgba(255,255,255,.7)}
body #s-chat .dm-quick button{color:#fff!important;background-color:var(--dm-in)!important;border:1px solid rgba(var(--tm-hi,255,255,255),.28)!important}