/* Rossoni X-Like Pro UI */
:root{
  --bg:#ffffff;
  --text:#0f1419;
  --muted:#536471;
  --border:#eff3f4;
  --card:#f7f9f9;
  --card2:#ffffff;
  --primary:#1d9bf0;
  --danger:#f91880;
  --good:#00ba7c;
  --radius:16px;
  --shadow: 0 6px 18px rgba(0,0,0,.06);
}

.xapp--dark{
  --bg:#000000;
  --text:#e7e9ea;
  --muted:#71767b;
  --border:#2f3336;
  --card:#0b0f14;
  --card2:#000000;
  --primary:#1d9bf0;
  --shadow: 0 6px 18px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block;border-radius:14px}
textarea{font-family:inherit}
.sr-only{position:absolute;left:-9999px}

.xcontainer{max-width:1260px;margin:0 auto;padding:0 16px}
.xgrid{
  display:grid;
  grid-template-columns: 260px minmax(0, 1fr) 360px;
  gap:24px;
  min-height:100vh;
}

/* Left / Right */
.xleft,.xright{position:sticky;top:0;height:100vh;overflow:auto;padding:16px 0}
.xleft__inner,.xright__inner{padding:0 4px}
.xmain{border-left:1px solid var(--border);border-right:1px solid var(--border);min-height:100vh;background:var(--card2)}

/* Brand */
.xbrand{padding:8px 12px}
.xlogo{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:999px;
  font-weight:900;letter-spacing:0.5px;
  border:1px solid var(--border);
}

/* Nav */
.xnav{padding:8px 6px}
.xnav__list{list-style:none;margin:0;padding:0}
.xnav__list li a{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:999px;
  font-weight:700;
}
.xnav__list li a:hover{background:var(--card)}

/* Buttons */
.xbtn{
  background:var(--primary);
  color:white;border:0;border-radius:999px;
  padding:12px 16px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.xbtn--full{width:100%}
.xbtn--small{padding:10px 14px;font-weight:800}
.xbtn--ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text);
}
.xbtn:hover{filter:brightness(0.95)}
.xbtn--ghost:hover{background:var(--card)}

/* Icon button */
.xiconbtn{
  border:1px solid var(--border);
  background:transparent;
  border-radius:999px;
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;
}
.xiconbtn:hover{background:var(--card)}

/* Theme toggle icon (modern) */
.xiconbtn--theme{position:relative}
.xiconbtn--theme{color:var(--text)}
.xiconbtn--theme svg{display:block}
.xapp--dark .xiconbtn--theme{color:var(--text)}

.xthemeicon{
  width:18px;height:18px;
  fill:none;
  stroke:currentColor;
  opacity:1;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/*
  Ensure ONLY ONE icon shows:
  - Light mode: show moon (switch to dark)
  - Dark mode: show sun (switch to light)
  Use high-specificity + !important to prevent CSS overrides.
*/
.xiconbtn--theme .xthemeicon--sun,
.xiconbtn--theme .xthemeicon--moon{display:none !important}
body:not(.xapp--dark) .xiconbtn--theme .xthemeicon--moon{display:block !important}
body.xapp--dark .xiconbtn--theme .xthemeicon--sun{display:block !important}


/* Tabs + top */
.xmain__top{padding:12px 16px;border-bottom:1px solid var(--border);position:sticky;top:0;background:rgba(255,255,255,.85);backdrop-filter:saturate(180%) blur(12px);z-index:3}
.xapp--dark .xmain__top{background:rgba(0,0,0,.75)}
.xmain__top--flat{position:static}
.xtopbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.xtabs{display:flex;gap:10px;font-weight:900}
.xtab{padding:10px 12px;border-radius:999px;color:var(--muted)}
.xtab--active{color:var(--text);background:var(--card)}

/* Composer */
.xcomposer{margin-top:10px}
.xcomposer__form{
  border:1px solid var(--border);
  background:var(--card2);
  border-radius:18px;
  padding:12px;
}
.xcomposer__row{display:flex;gap:10px}
.xcomposer__input{
  width:100%;
  border:0;
  outline:none;
  resize:none;
  font-size:16px;
  background:transparent;
  color:var(--text);
}
.xcomposer__actions{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px}
.xhint{color:var(--muted);font-size:13px}
.xcomposer__msg{margin-top:8px;color:var(--muted);font-size:13px}
.xcomposer__loggedout{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid var(--border);border-radius:18px;padding:12px;background:var(--card2)}

.xinput{
  flex:1;border:1px solid var(--border);border-radius:999px;
  padding:12px 14px;font-size:14px;background:transparent;color:var(--text)
}
.xinput:focus{outline:2px solid rgba(29,155,240,.25);border-color:rgba(29,155,240,.4)}

.xnotice{padding:12px 16px;color:var(--muted);border-bottom:1px solid var(--border)}

/* Feed posts */
.xfeed{display:flex;flex-direction:column}
.xpost{
  display:grid;grid-template-columns:48px minmax(0,1fr);
  gap:10px;padding:14px 16px;border-bottom:1px solid var(--border);
}
.xpost:hover{background:rgba(0,0,0,.02)}
.xapp--dark .xpost:hover{background:rgba(255,255,255,.03)}

.xavatar{
  width:40px;height:40px;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--card);border:1px solid var(--border);
  font-weight:900;color:var(--muted);
}
.xavatar--sm{width:36px;height:36px}
.xavatar--lg{width:54px;height:54px;font-size:20px}

.xpost__meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:13px}
.xpost__name{font-weight:900}
.xpost__handle,.xpost__time{color:var(--muted)}
.xpost__time:hover{text-decoration:underline}
.xpost__dot{color:var(--muted)}
.xpost__content{margin:6px 0 10px 0;font-size:15px;line-height:1.45}
.xpost__link:hover{text-decoration:underline}
.xpost__media{margin-top:6px;display:block}

/* Chips */
.xchip{
  margin-left:auto;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:999px;
  padding:6px 10px;
  font-weight:900;
  cursor:pointer;
}
.xchip:hover{background:var(--card)}
.xchip.is-active{background:var(--text);color:var(--bg);border-color:transparent}

/* Actions */
.xpost__actions{
  margin-top:10px;display:flex;gap:16px;color:var(--muted);font-size:13px;align-items:center
}
.xaction{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;border:0;background:transparent;color:inherit;cursor:pointer}
.xaction:hover{background:var(--card);color:var(--text)}
.xaction.is-active{color:var(--danger)}
.xaction[data-repost].is-active{color:var(--good)}
.xcount{min-width:16px;display:inline-block}

/* Cards */
.xcard{
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:12px 12px;margin:12px 0;
  box-shadow: var(--shadow);
}
.xcard__title{margin:0 0 8px 0;font-size:16px}
.xcard__body{color:var(--muted);font-size:14px;line-height:1.4}
.xlist{margin:0;padding-left:18px}
.xlist li{margin:8px 0}

/* Search */
.xsearch{padding:6px 0}
.xsearch__form{display:flex;gap:10px;align-items:center}

/* Pager */
.xpager{display:flex;justify-content:space-between;padding:14px 16px}
.xpager a{color:var(--primary);font-weight:900}
.xempty{padding:16px;color:var(--muted)}

/* Profile */
.xprofile__top{display:flex;gap:14px;align-items:center}
.xprofile__name{margin:0;font-size:20px}
.xprofile__handle{color:var(--muted);font-weight:800}
.xprofile__bio{margin-top:10px;color:var(--text);opacity:.9}
.xbtn--ghost{font-weight:900}

/* Prose */
.xprose p{margin:0 0 10px 0}
.xprose a{text-decoration:underline}

/* Mobile nav */
.xmobile{display:none;position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.9);backdrop-filter: blur(12px);border-top:1px solid var(--border);z-index:10}
.xapp--dark .xmobile{background:rgba(0,0,0,.75)}
.xmobile__list{list-style:none;display:flex;justify-content:space-around;margin:0;padding:10px 8px}
.xmobile__list li a{font-weight:900;color:var(--text);padding:10px 12px;border-radius:999px}
.xmobile__list li a:hover{background:var(--card)}

/* Responsive */
@media (max-width: 1100px){
  .xgrid{grid-template-columns: 86px minmax(0,1fr) 320px}
  .xnav__list li a{justify-content:center}
}
@media (max-width: 900px){
  .xgrid{grid-template-columns: 86px minmax(0,1fr)}
  .xright{display:none}
  .xmain{border-right:none}
  .xmobile{display:block}
  body{padding-bottom:64px}
}
@media (max-width: 620px){
  .xgrid{grid-template-columns: 1fr}
  .xleft{display:none}
  .xmain{border-left:none;border-right:none}
  .xmobile{display:block}
}


/* v2 additions */
.xbadge{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:999px;
  background:var(--primary);color:#fff;font-size:12px;font-weight:900;
  margin-left:4px;
}

.xlink{color:var(--primary)}
.xlink:hover{text-decoration:underline}

.xaction.is-active{color:var(--primary)}
.xaction[data-bookmark].is-active{color:var(--primary)}
.xaction[data-repost].is-active{color:var(--good)}
.xaction[data-like].is-active{color:var(--danger)}

.xcomposer__media{margin-top:8px}
.xchip--sm{padding:6px 10px;font-size:12px}
.xchip--file{display:inline-flex;gap:8px;align-items:center}
.xchip--file input{display:none}
.xcomposer__quote{margin-bottom:8px;color:var(--muted);font-size:13px;display:flex;align-items:center;justify-content:space-between;gap:10px}

.xquote{
  display:block;
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  background:var(--card);
  margin-top:8px;
}
.xquote:hover{filter:brightness(0.98)}
.xquote__meta{display:flex;gap:6px;align-items:center;font-size:13px}
.xquote__name{font-weight:900}
.xquote__handle{color:var(--muted)}
.xquote__text{margin-top:6px;color:var(--text);opacity:.95;font-size:14px;line-height:1.35}

.xloadmore{padding:12px 16px;border-bottom:1px solid var(--border)}

.xpage__head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.xnotif{list-style:none;margin:0;padding:0}
.xnotif__item a{display:block;padding:12px;border-radius:14px;border:1px solid var(--border);margin:10px 0;background:var(--card2)}
.xnotif__item.is-unread a{border-color:rgba(29,155,240,.35);box-shadow:0 0 0 3px rgba(29,155,240,.12)}
.xnotif__type{color:var(--muted);margin-left:6px}
.xnotif__msg{display:inline-block;margin-left:8px;color:var(--text);opacity:.9}
.xnotif__time{display:block;margin-top:6px;color:var(--muted);font-size:12px}

.xmessages__cols{display:grid;grid-template-columns: 320px minmax(0,1fr);gap:16px}
@media (max-width: 900px){ .xmessages__cols{grid-template-columns: 1fr} }
.xthread{list-style:none;margin:0;padding:0}
.xthread li a{display:block;padding:10px;border-radius:14px}
.xthread li a:hover{background:var(--card)}
.xthread li.is-active a{background:rgba(29,155,240,.12)}
.xmuted{color:var(--muted);margin-left:6px}

.xchat{display:flex;flex-direction:column;gap:10px;max-height:60vh;overflow:auto;padding:6px}
.xchat__msg{display:flex}
.xchat__msg.is-mine{justify-content:flex-end}
.xchat__bubble{max-width:78%;padding:10px 12px;border-radius:16px;border:1px solid var(--border);background:var(--card)}
.xchat__msg.is-mine .xchat__bubble{background:rgba(29,155,240,.18);border-color:rgba(29,155,240,.25)}
.xchat__form{display:flex;gap:10px;align-items:flex-end;margin-top:10px}


/* ===== Modern X-like action buttons ===== */
.xpost__actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
}
.xaction{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:13px;
  cursor:pointer;
  appearance:none;
  -webkit-appearance:none;
}
.xaction__iconwrap{
  width:34px;height:34px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}
.xaction svg{width:18px;height:18px}
.xaction:hover .xaction__iconwrap{transform: translateY(-1px)}
.xaction:active .xaction__iconwrap{transform: translateY(0)}

.xaction--reply:hover{color:var(--primary)}
.xaction--reply:hover .xaction__iconwrap{background: rgba(29,155,240,.12)}

.xaction--repost:hover{color:var(--good)}
.xaction--repost:hover .xaction__iconwrap{background: rgba(0,186,124,.12)}
.xaction--repost.is-active{color:var(--good)}

.xaction--like:hover{color:var(--danger)}
.xaction--like:hover .xaction__iconwrap{background: rgba(249,24,128,.12)}
.xaction--like.is-active{color:var(--danger)}

.xaction--bookmark:hover{color:var(--primary)}
.xaction--bookmark:hover .xaction__iconwrap{background: rgba(29,155,240,.12)}
.xaction--bookmark.is-active{color:var(--primary)}

.xaction--share:hover{color:var(--primary)}
.xaction--share:hover .xaction__iconwrap{background: rgba(29,155,240,.12)}

/* repost menu */
.xrepostwrap{position:relative;display:inline-flex;align-items:center}
.xmenu{
  position:absolute;
  top:40px;
  left:0;
  min-width:160px;
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow: var(--shadow);
  padding:6px;
  z-index:9;
}
.xmenu__item{
  width:100%;
  text-align:left;
  border:0;
  background:transparent;
  padding:10px 10px;
  border-radius:12px;
  font-weight:800;
  cursor:pointer;
  color:var(--text);
}
.xmenu__item:hover{background:var(--card)}

/* Comment form modern */
.comment-respond textarea,
.xcommentform textarea,
.comment-form textarea{
  width:100%;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px 14px;
  background:transparent;
  color:var(--text);
  font-size:15px;
  outline:none;
}
.comment-respond textarea:focus,
.xcommentform textarea:focus,
.comment-form textarea:focus{
  border-color: rgba(29,155,240,.4);
  box-shadow: 0 0 0 3px rgba(29,155,240,.12);
}
.comment-respond input[type="submit"],
.comment-form .submit,
.xcommentform input[type="submit"]{
  background:var(--primary);
  color:#fff;
  border:0;
  border-radius:999px;
  padding:10px 16px;
  font-weight:900;
  cursor:pointer;
}
.comment-respond input[type="submit"]:hover,
.comment-form .submit:hover,
.xcommentform input[type="submit"]:hover{filter:brightness(.97)}


/* ===== Composer toolbar (Image / GIF / Poll / Emoji) ===== */
.xcomposer__col{width:100%}
.xtoolbar{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
}
.xtoolbtn{
  border:0;
  background:transparent;
  color:var(--primary);
  cursor:pointer;
  padding:0;
  border-radius:999px;
  appearance:none;
}
.xtoolbtn__icon{
  width:36px;height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  transition: background-color .15s ease, transform .15s ease;
}
.xtoolbtn__icon svg{width:18px;height:18px}
.xtoolbtn__pill{
  height:36px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:900;
  border:1px solid transparent;
  transition: background-color .15s ease, transform .15s ease;
}
.xtoolbtn:hover .xtoolbtn__icon,
.xtoolbtn:hover .xtoolbtn__pill{background: rgba(29,155,240,.12)}
.xtoolbtn:active .xtoolbtn__icon,
.xtoolbtn:active .xtoolbtn__pill{transform: translateY(1px)}

.xhiddenfile{display:none}

/* extras panels */
.xcomposer__extras{
  margin-top:10px;
}
.xinput--flat{
  border-radius:14px;
}
.xgif__row{display:flex;gap:10px;align-items:center}
.xpoll__title{font-weight:900;margin:4px 0 10px 0}
.xpoll__opts{display:flex;flex-direction:column;gap:8px}
.xpoll__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:10px}
.xselect{
  border:1px solid var(--border);
  border-radius:999px;
  padding:10px 12px;
  background:transparent;
  color:var(--text);
  font-weight:800;
}

.xemoji{margin-top:10px}
.xemoji__grid{
  display:grid;
  grid-template-columns: repeat(10, 1fr);
  gap:6px;
}
@media (max-width: 620px){
  .xemoji__grid{grid-template-columns: repeat(8, 1fr);}
}
.xemoji__btn{
  border:1px solid var(--border);
  background:transparent;
  border-radius:12px;
  height:34px;
  cursor:pointer;
  font-size:18px;
}
.xemoji__btn:hover{background:var(--card)}
.xcomposer__preview{
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
}
.xcomposer__preview img{width:100%;border-radius:0}

/* Poll display */
.xpollbox{
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px;
  background:var(--card);
  margin-top:10px;
}
.xpollbox__opt{
  width:100%;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
  cursor:pointer;
  text-align:left;
  margin:8px 0;
  position:relative;
  overflow:hidden;
}
.xpollbox__opt:hover{background:rgba(29,155,240,.08)}
.xpollbox__bar{
  position:absolute;left:0;top:0;bottom:0;
  background:rgba(29,155,240,.18);
  width:0%;
  pointer-events:none;
}
.xpollbox__label{position:relative;display:flex;justify-content:space-between;gap:10px}
.xpollbox__meta{margin-top:8px;color:var(--muted);font-size:12px;display:flex;gap:10px;flex-wrap:wrap}


/* Put toolbar + Post button on one row like X */
.xcomposer__actions--bar{margin-top:10px}
.xcomposer__actions--bar .xtoolbar{margin-top:0;flex:1}


/* ===== Emoji picker (X-like) ===== */
.xcomposer__form{position:relative}

/* position the picker above toolbar */
.xemoji[data-emoji-panel]{
  position:absolute;
  left:52px; /* avatar width + gap */
  bottom:64px;
  z-index:30;
  pointer-events:auto;
}
@media (max-width: 620px){
  .xemoji[data-emoji-panel]{left:12px; right:12px;}
}

.xemoji__picker{
  width:360px;
  max-width: calc(100vw - 40px);
  background: var(--card2);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.xemoji__searchbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px;
  border-bottom:1px solid var(--border);
}
.xemoji__searchicon{color:var(--muted);font-size:14px}
.xemoji__searchinput{
  flex:1;
  border:1px solid rgba(29,155,240,.55);
  border-radius:999px;
  padding:10px 12px;
  background: transparent;
  color: var(--text);
  font-weight:800;
  outline:none;
}
.xemoji__searchinput:focus{
  box-shadow: 0 0 0 3px rgba(29,155,240,.14);
}
.xemoji__close{
  border:0;
  background:transparent;
  width:34px;height:34px;
  border-radius:999px;
  cursor:pointer;
  color:var(--muted);
}
.xemoji__close:hover{background:var(--card);color:var(--text)}
.xemoji__tabs{
  display:flex;
  gap:4px;
  padding:6px 8px;
  border-bottom:1px solid var(--border);
  overflow:auto;
}
.xemoji__tab{
  border:0;
  background:transparent;
  width:34px;height:34px;
  border-radius:12px;
  cursor:pointer;
  color:var(--muted);
  font-size:16px;
  display:flex;align-items:center;justify-content:center;
}
.xemoji__tab:hover{background:var(--card);color:var(--text)}
.xemoji__tab.is-active{
  background: rgba(29,155,240,.12);
  color: var(--primary);
}
.xemoji__section{display:flex;flex-direction:column}
.xemoji__label{
  padding:10px 12px 6px 12px;
  font-weight:900;
}
.xemoji__body{
  padding:8px 10px 12px 10px;
  overflow:auto;
  max-height: 320px;
}
.xemoji__grid{
  display:grid;
  grid-template-columns: repeat(8, 1fr);
  gap:6px;
}
.xemoji__btn{
  border:0;
  background:transparent;
  border-radius:12px;
  height:34px;
  cursor:pointer;
  font-size:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.xemoji__btn:hover{background:var(--card)}


/* ===== GIF picker (GIPHY) ===== */
.xgif{margin-top:10px}
.xgif__search{
  display:flex;
  gap:10px;
  align-items:center;
}
.xgif__searchinput{
  flex:1;
  border:1px solid rgba(29,155,240,.55);
  border-radius:999px;
  padding:10px 12px;
  background:transparent;
  color:var(--text);
  font-weight:800;
  outline:none;
}
.xgif__searchinput:focus{box-shadow: 0 0 0 3px rgba(29,155,240,.14)}
.xgif__grid{
  margin-top:10px;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
  max-height: 340px;
  overflow:auto;
  padding-right:4px;
}
@media (max-width: 620px){
  .xgif__grid{grid-template-columns: repeat(3, 1fr);}
}
.xgif__item{
  border:0;
  padding:0;
  cursor:pointer;
  border-radius:14px;
  overflow:hidden;
  background:var(--card);
  position:relative;
  aspect-ratio: 1 / 1;
}
.xgif__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0;
}
.xgif__item:after{
  content:'';
  position:absolute;inset:0;
  border:1px solid rgba(255,255,255,.0);
  border-radius:14px;
  pointer-events:none;
}
.xgif__item:hover:after{border-color: rgba(29,155,240,.35)}
.xgif__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
}
.xgif__brand{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.xgif__msg{margin-top:8px;color:var(--muted);font-size:12px}

/* GIF render in feed */
.xgifvideo{
  width:100%;
  border-radius:14px;
  border:1px solid var(--border);
  background:#000;
}


/* Status page full text */
.xpost__text{
  font-size: 16px;
  line-height: 1.45;
  color: var(--text);
}
.xpost__text p{margin:0 0 10px 0}
.xpost__text p:last-child{margin-bottom:0}


/* ===== Profile (X-like) ===== */
.xprofilepage{min-height:60vh}
.xprofilehead{border-bottom:1px solid var(--border)}
.xprofilehead__toprow{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  position:sticky;top:0;z-index:5;
  background:rgba(255,255,255,.85);backdrop-filter: blur(12px);
}
.xapp--dark .xprofilehead__toprow{background:rgba(0,0,0,.75)}
.xback{width:34px;height:34px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center}
.xback:hover{background:var(--card)}
.xprofilehead__title{display:flex;flex-direction:column;line-height:1.1}
.xprofilehead__name{font-weight:900}
.xprofilehead__sub{color:var(--muted);font-size:12px;margin-top:2px}
.xprofilehead__spacer{flex:1}

.xbanner{
  height:200px;
  background-size:cover;
  background-position:center;
  background-color:rgba(29,155,240,.18);
  position:relative;
}
.xbanner__grad{
  position:absolute;inset:0;
  background: linear-gradient(135deg, rgba(29,155,240,.28), rgba(249,24,128,.12));
}

.xprofilebar{
  display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 16px;
  transform: translateY(-36px);
}
.xprofilebar__avatar{width:132px;height:132px;border-radius:999px;background:var(--bg);padding:4px}
.xpfp{width:124px;height:124px;border-radius:999px;object-fit:cover;border:1px solid var(--border);background:var(--card)}
.xprofilebar__actions{display:flex;gap:10px;align-items:center;padding-bottom:10px}

.xprofilemeta{padding:0 16px 10px 16px;margin-top:-26px}
.xprofilemeta__name{font-size:20px;font-weight:900;display:flex;align-items:center;gap:6px}
.xprofilemeta__handle{color:var(--muted);font-weight:800;margin-top:2px}
.xprofilemeta__bio{margin-top:10px;font-size:15px;line-height:1.35}
.xprofilemeta__row{margin-top:10px;display:flex;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:13px}
.xmetaitem{display:inline-flex;gap:6px;align-items:center}
.xprofilemeta__stats{margin-top:10px;display:flex;gap:16px;flex-wrap:wrap}
.xstat{color:var(--muted)}
.xstat strong{color:var(--text);font-weight:900}
.xstat:hover{text-decoration:underline}

.xprofiletabs{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:0 8px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  background:var(--card2);
}
.xptab{
  flex:1;
  text-align:center;
  padding:14px 6px;
  color:var(--muted);
  font-weight:900;
  position:relative;
}
.xptab:hover{background:var(--card)}
.xptab.is-active{color:var(--text)}
.xptab.is-active::after{
  content:"";
  position:absolute;left:22%;right:22%;bottom:0;
  height:4px;border-radius:999px;background:var(--primary);
}

.xpost__avatar{width:40px;height:40px}
.xavatarimg{width:40px;height:40px;border-radius:999px;object-fit:cover;border:1px solid var(--border);background:var(--card)}

.xvideo{width:100%;max-height:520px;border-radius:14px;border:1px solid var(--border);background:#000}
.xpreviewvideo{width:100%;max-height:320px;border-radius:0}

.xreplycard{margin:12px 16px}
.xcomposer__form--reply .xcomposer__actions--bar{padding-top:8px}


/* ===== X-like Edit Profile Modal ===== */
body.xmodal-open{overflow:hidden}
.xmodal[hidden]{display:none}
.xmodal{position:fixed;inset:0;z-index:1000}
.xmodal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.xmodal__dialog{
  position:relative;
  width:600px;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  margin:12px auto;
  background:var(--card2);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow: var(--shadow);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.xmodal__top{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
}
.xmodal__title{font-weight:900;font-size:18px}
.xiconbtn--sm{width:34px;height:34px}

.xmodal__form{display:flex;flex-direction:column;min-height:0}
.xmodal__banner{
  height:200px;
  background-size:cover;
  background-position:center;
  background-color: rgba(29,155,240,.18);
  position:relative;
}
.xmodal__avatarrow{
  padding:0 16px;
  transform: translateY(-34px);
  display:flex;
  justify-content:flex-start;
}
.xmodal__avatarwrap{
  width:132px;height:132px;
  border-radius:999px;
  background:var(--bg);
  padding:4px;
  position:relative;
}
.xpfp--edit{width:124px;height:124px}

.xcam{
  position:absolute;
  width:38px;height:38px;
  border-radius:999px;
  background: rgba(0,0,0,.55);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.25);
}
.xcam input{display:none}
.xcam--banner{top:12px;left:12px}
.xcam--avatar{right:6px;bottom:6px}

.xmodal__fields{
  padding:0 16px 16px 16px;
  margin-top:-18px;
  overflow:auto;
}
.xfield{display:block;margin:12px 0}
.xfield__label{display:block;color:var(--muted);font-weight:900;font-size:13px;margin-bottom:6px}
.xfield__input{
  width:100%;
  border:1px solid var(--border);
  border-radius:14px;
  padding:12px 12px;
  background:transparent;
  color:var(--text);
  font-size:15px;
  outline:none;
}
.xfield__input:focus{
  border-color: rgba(29,155,240,.45);
  box-shadow: 0 0 0 3px rgba(29,155,240,.12);
}
.xfield__textarea{resize:none}
.xmodal__msg{margin-top:10px;color:var(--muted);font-size:13px}


/* ===== Modal redesign (more modern X-like) ===== */
.xmodal__backdrop{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
}

.xmodal__dialog{
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
}

.xmodal__top{
  padding: 12px 14px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}
.xapp--dark .xmodal__top{
  background: rgba(0,0,0,.82);
}

.xmodal__title{font-size:18px;letter-spacing:.1px}

.xiconbtn--sm{
  width:36px;height:36px;
  border-radius:999px;
  border:1px solid transparent;
  background:transparent;
}
.xiconbtn--sm svg{width:18px;height:18px}
.xiconbtn--sm:hover{background:var(--card);border-color:var(--border)}

.xmodal__banner{
  height: 210px;
}
.xmodal__banner::after{
  content:"";
  position:absolute;inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.35));
  pointer-events:none;
}

.xcam{
  width:40px;height:40px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(15,20,25,.70);
  color:#fff;
  border: 1px solid rgba(255,255,255,.25);
  backdrop-filter: blur(8px);
  transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}
.xcam svg{width:18px;height:18px}
.xcam:hover{filter:brightness(1.05);transform: translateY(-1px)}
.xcam:active{transform: translateY(0px)}

.xcam--banner{top:14px;left:14px}
.xcam--avatar{right:8px;bottom:8px}

.xmodal__avatarwrap{
  width:140px;height:140px;
  padding:5px;
  box-shadow: 0 10px 24px rgba(0,0,0,.20);
}
.xpfp--edit{width:130px;height:130px}

.xmodal__fields{
  padding: 0 16px 16px 16px;
}

.xfield__input{
  border-radius: 16px;
  padding: 12px 14px;
}
.xfield__label{font-size:12px;letter-spacing:.2px}

.xbtn.xbtn--small{
  padding: 10px 14px;
  font-size: 14px;
}

/* Mobile: full-screen modal like X */
@media (max-width: 620px){
  .xmodal__dialog{
    width: calc(100vw - 12px);
    height: calc(100vh - 12px);
    max-height: none;
    margin: 6px auto;
    border-radius: 18px;
  }
  .xmodal__fields{padding-bottom:24px}
}


/* ===== Left nav icons (modern) ===== */
.xnav__list{list-style:none;margin:0;padding:0}
.xnav__item{margin:2px 0}
.xnav__link{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px;
  border-radius:999px;
  font-weight:900;
  color:var(--text);
}
.xnav__icon{
  width:26px;height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text);
}
.xnav__icon svg{width:24px;height:24px}
.xnav__label{font-size:18px;line-height:1}
.xnav__link:hover{background:var(--card)}
.xnav__link:active{transform: translateY(1px)}

@media (max-width: 1100px){
  .xnav__link{justify-content:center;gap:0}
  .xnav__label{display:none}
  .xnav__icon{width:28px;height:28px}
}



/* ===== Chat (X-like) ===== */
.xchatapp{padding:0}
.xchatapp__cols{
  display:grid;
  grid-template-columns: 360px minmax(0,1fr);
  min-height: calc(100vh - 20px);
}
@media (max-width: 900px){
  .xchatapp__cols{grid-template-columns: 1fr}
}

.xchatlist{
  border-right:1px solid var(--border);
  background:var(--card2);
  min-height:100vh;
}
.xchatlist__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px 10px 14px;
}
.xchatlist__title{font-weight:900;font-size:20px}
.xchatlist__actions{display:flex;gap:8px}
.xchatlist__search{padding:0 14px 10px 14px}
.xsearchpill{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--border);
  background:var(--card);
  border-radius:999px;
  padding:10px 12px;
}
.xsearchpill__icon{color:var(--muted);font-size:14px}
.xsearchpill__input{
  border:0;background:transparent;outline:none;
  color:var(--text);font-weight:800;width:100%;
}
.xchatlist__tabs{
  display:flex;gap:10px;
  padding:0 14px 10px 14px;
}
.xchattab{
  padding:8px 12px;
  border-radius:999px;
  font-weight:900;
  color:var(--muted);
  background:transparent;
}
.xchattab.is-active{color:var(--text);background:var(--card)}
.xchattab:hover{background:var(--card)}

.xchatlist__items{padding:0 6px 14px 6px}
.xthreadrow{
  display:flex;gap:12px;align-items:center;
  padding:10px 10px;border-radius:16px;
}
.xthreadrow:hover{background:var(--card)}
.xthreadrow.is-active{background:rgba(29,155,240,.10)}
.xthreadrow__av{width:44px;height:44px;border-radius:999px;object-fit:cover;border:1px solid var(--border);background:var(--card)}
.xthreadrow__meta{flex:1;min-width:0}
.xthreadrow__top{display:flex;justify-content:space-between;gap:10px;align-items:center}
.xthreadrow__name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xthreadrow__time{color:var(--muted);font-size:12px;white-space:nowrap}
.xthreadrow__bottom{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-top:4px}
.xthreadrow__preview{color:var(--muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xthreadrow__badge{
  min-width:20px;height:20px;border-radius:999px;
  background:var(--primary);color:#fff;font-weight:900;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:12px;padding:0 6px;
}

.xemptybox{padding:30px 18px;text-align:center;color:var(--muted)}
.xemptybox__icon{font-size:44px;margin-bottom:10px}
.xemptybox__title{color:var(--text);font-weight:900;font-size:18px}
.xemptybox__sub{font-size:13px;margin-top:4px}

.xchatpane{
  min-height:100vh;
  background:var(--card2);
  display:flex;
  flex-direction:column;
}
.xchatblank{
  margin:auto;
  text-align:center;
  padding:40px 18px;
  color:var(--muted);
}
.xchatblank__icon{font-size:54px;margin-bottom:12px}
.xchatblank__title{color:var(--text);font-weight:900;font-size:22px}
.xchatblank__sub{font-size:13px;margin-top:6px;margin-bottom:16px}

.xchatpane__head{
  display:flex;align-items:center;gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.xchatpane__av{width:40px;height:40px;border-radius:999px;border:1px solid var(--border);object-fit:cover;background:var(--card)}
.xchatpane__who{flex:1;min-width:0}
.xchatpane__name{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xchatpane__handle{color:var(--muted);font-weight:800;font-size:12px}

.xchatpane__msgs{
  flex:1;
  overflow:auto;
  padding:14px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.xmsg{display:flex}
.xmsg.is-mine{justify-content:flex-end}
.xmsg__bubble{
  max-width: 70%;
  padding:10px 12px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--card);
  font-size:14px;
}
.xmsg.is-mine .xmsg__bubble{
  background: rgba(29,155,240,.18);
  border-color: rgba(29,155,240,.22);
}

.xchatpane__form{
  padding:12px 14px;
  border-top:1px solid var(--border);
}
.xchatinput{display:flex;gap:10px;align-items:flex-end}
.xchatinput__ta{
  flex:1;
  border:1px solid var(--border);
  border-radius:18px;
  padding:10px 12px;
  background:transparent;
  color:var(--text);
  outline:none;
  resize:none;
  max-height: 140px;
}
.xchatinput__ta:focus{
  border-color: rgba(29,155,240,.45);
  box-shadow: 0 0 0 3px rgba(29,155,240,.12);
}

.xmodal__dialog--small{width:520px}


/* ===== Report modal (X-like) ===== */
.xmodal__dialog--report{width:640px}
.xbtn[disabled],.xbtn:disabled{opacity:.55;cursor:not-allowed;filter:none}

.xreport{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:hidden;
}
.xreport__intro{
  padding:14px 16px;
  color:var(--muted);
  font-size:13px;
  border-bottom:1px solid var(--border);
}
.xreport__picked{
  padding:10px 16px 0 16px;
  color:var(--muted);
  font-size:13px;
}
.xreport__list{
  flex:1;
  overflow:auto;
}
.xreport__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  cursor:pointer;
  font-weight:900;
  border-bottom:1px solid var(--border);
}
.xreport__row:hover{background:var(--card)}
.xreport__right{position:relative;display:inline-flex;align-items:center}
.xreport__input{position:absolute;opacity:0;pointer-events:none}
.xreport__radio{
  width:20px;height:20px;
  border-radius:999px;
  border:2px solid var(--border);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
.xreport__input:checked + .xreport__radio{
  border-color:var(--primary);
}
.xreport__input:checked + .xreport__radio:after{
  content:"";
  width:10px;height:10px;
  border-radius:999px;
  background:var(--primary);
  display:block;
}
.xreport__footer{
  padding:14px 16px;
  border-top:1px solid var(--border);
  background:var(--card2);
}
.xreport__footer--two{display:flex;gap:12px}
.xreport__footer--two .xbtn{flex:1}
.xreport__done{
  padding:18px 16px;
  font-weight:900;
}
/* Report "Submitted" screen (X-like) */
.xbtn--contrast{
  background:var(--text);
  color:var(--bg);
}
.xbtn--contrast:hover{filter:brightness(0.92)}

.xreportdone{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.xreportdone__bar{
  height:3px;
  background:var(--primary);
  flex:0 0 auto;
}
.xreportdone__scroll{
  flex:1;
  overflow:auto;
}
.xreportdone__pad{
  padding:18px 16px 12px 16px;
}
.xreportdone__h1{
  font-size:28px;
  line-height:1.15;
  font-weight:900;
  margin:0 0 10px 0;
}
.xreportdone__h2{
  font-size:18px;
  line-height:1.25;
  font-weight:900;
  margin:18px 0 8px 0;
}
.xreportdone__p{
  color:var(--muted);
  font-size:14px;
  line-height:1.45;
  margin:0 0 10px 0;
}
.xreportdone__small{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  margin:12px 0 10px 0;
}
.xreportdone .xbtn--ghost{
  background:var(--card2);
}
.xuserresults{margin-top:12px}
.xuserrow{
  display:flex;gap:12px;align-items:center;
  padding:10px 10px;border-radius:16px;
  cursor:pointer;
}
.xuserrow:hover{background:var(--card)}
.xuserrow__av{width:42px;height:42px;border-radius:999px;border:1px solid var(--border);object-fit:cover;background:var(--card)}
.xuserrow__name{font-weight:900}
.xuserrow__handle{color:var(--muted);font-weight:800;font-size:12px}


/* ===== Chat page layout: left icons only + no right widgets ===== */
body.page-template-page-messages .xright{
  display:none !important;
}
body.page-template-page-messages .xgrid{
  grid-template-columns: 86px minmax(0, 1fr) !important;
}
body.page-template-page-messages .xmain{
  border-right: none !important;
}
body.page-template-page-messages .xleft{
  padding-right: 6px;
}

/* Force left nav to icon-only (even on desktop) */
body.page-template-page-messages .xnav__label{
  display:none !important;
}
body.page-template-page-messages .xnav__link{
  justify-content:center !important;
  gap:0 !important;
  padding:12px 10px !important;
}
body.page-template-page-messages .xnav__icon{
  width:28px;height:28px;
}
body.page-template-page-messages .xnav__icon svg{
  width:24px;height:24px;
}

/* Make the big "Post" button into a circular compose button */
body.page-template-page-messages .xleft__cta .xbtn--full{
  width:52px;
  height:52px;
  border-radius:999px;
  padding:0;
  font-size:0; /* hide text */
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
body.page-template-page-messages .xleft__cta .xbtn--full::before{
  content:"✎";
  font-size:22px;
  line-height:1;
}
body.page-template-page-messages .xleft__cta{
  display:flex;
  justify-content:center;
}

/* Optional: hide any left-side extra sections so it looks like X */
body.page-template-page-messages .xleft .xleft__user{
  display:none;
}


/* ===== Follow page ===== */
.xfollowpage{padding:0 0 24px 0}
.xfollow__search{padding:12px 16px}
.xfollow__results{
  margin-top:10px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card2);
  overflow:hidden;
}
.xfollowresults__list{padding:6px}
.xfollowcard{margin:0 16px}

.xfollowlist{display:flex;flex-direction:column;gap:0}
.xfollowrow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:12px 6px;
  border-radius:16px;
}
.xfollowrow:hover{background:var(--card)}
.xfollowrow__left{display:flex;gap:12px;min-width:0;flex:1}
.xfollowrow__av{
  width:48px;height:48px;border-radius:999px;
  border:1px solid var(--border);object-fit:cover;background:var(--card);
}
.xfollowrow__meta{min-width:0}
.xfollowrow__name{font-weight:900}
.xfollowrow__handle{color:var(--muted);font-weight:800;font-size:13px;margin-top:2px}
.xfollowrow__bio{color:var(--text);opacity:.86;font-size:13px;margin-top:6px;line-height:1.25}
.xfollowrow__right{display:flex;align-items:center}
.xbtn--pill{border-radius:999px}


/* ===== Chat: GIF + Emoji controls ===== */
.xchatinput .xtoolbtn{color:var(--primary)}
.xchatinput .xtoolbtn__icon{width:34px;height:34px}
.xchatinput .xtoolbtn__pill{height:34px}
.xchatinput{gap:8px}
.xchatpreview{margin-bottom:10px}
.xmsg__gif{
  width:100%;
  max-width:320px;
  border-radius:16px;
  margin-top:8px;
  border:1px solid var(--border);
  background:#000;
}

.xiconbtn svg{width:18px;height:18px}


/* ===== Chat info popup (X-like) ===== */
.xchatinfo{
  position:relative;
  width:720px;
  max-width: calc(100vw - 24px);
  height: 560px;
  max-height: calc(100vh - 24px);
  margin: 12px auto;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  overflow: hidden;
  display:flex;
  flex-direction:column;
}
.xchatinfo__top{
  display:flex;
  align-items:center;
  padding: 10px 12px;
}
.xchatinfo__spacer{flex:1}

.xchatinfo__user{
  padding: 18px 16px 10px 16px;
  text-align:center;
}
.xchatinfo__av{
  width:84px;height:84px;border-radius:999px;
  border:1px solid var(--border);
  object-fit:cover;background:var(--card);
}
.xchatinfo__name{margin-top:10px;font-weight:900;font-size:20px}
.xchatinfo__handle{margin-top:4px;color:var(--muted);font-weight:800}

.xchatinfo__actions{
  display:flex;
  justify-content:center;
  gap:22px;
  padding: 12px 16px 18px 16px;
}
.xchatinfo__act{
  width:86px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  color: var(--text);
}
.xchatinfo__acticon{
  width:48px;height:48px;
  border-radius:999px;
  background: var(--card);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
}
.xchatinfo__acticon svg{width:22px;height:22px}
.xchatinfo__actlabel{color:var(--muted);font-weight:900;font-size:12px}
.xchatinfo__act:hover .xchatinfo__acticon{background: rgba(29,155,240,.10);border-color: rgba(29,155,240,.22)}

.xchatinfo__list{
  margin: 0 14px 14px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  overflow:hidden;
  background: var(--card);
}
.xchatinfo__row{
  width:100%;
  border:0;
  background:transparent;
  padding: 14px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-weight:900;
  cursor:pointer;
}
.xchatinfo__row + .xchatinfo__row{border-top:1px solid var(--border)}
.xchatinfo__rowleft{color:var(--text)}
.xchatinfo__rowright{color:var(--muted);font-weight:900}
.xchatinfo__row:hover{background: rgba(0,0,0,.03)}
.xapp--dark .xchatinfo__row:hover{background: rgba(255,255,255,.04)}
.xchatinfo__row--danger{color: #f4212e;justify-content:flex-start}


/* ===== Chat info actions: darker icon background (match X) ===== */
.xchatinfo__acticon{
  background: rgba(15,20,25,.06);
  border: 1px solid rgba(15,20,25,.10);
}
.xapp--dark .xchatinfo__acticon{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.xchatinfo__act:hover .xchatinfo__acticon{
  background: rgba(29,155,240,.10);
  border-color: rgba(29,155,240,.22);
}





/* ===== Chat info actions: NO background for ALL icons ===== */
.xchatinfo__actions .xchatinfo__act,
.xchatinfo__actions .xchatinfo__act:visited{
  background: transparent !important;
  border: 0 !important;
}
.xchatinfo__actions .xchatinfo__acticon{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.xchatinfo__actions .xchatinfo__act:hover .xchatinfo__acticon,
.xchatinfo__actions .xchatinfo__act:active .xchatinfo__acticon{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* Also make sure buttons don't get focus rings that look like backgrounds */
.xchatinfo__actions button.xchatinfo__act:focus-visible,
.xchatinfo__actions a.xchatinfo__act:focus-visible{
  outline: 2px solid rgba(29,155,240,.35);
  outline-offset: 4px;
  border-radius: 14px;
}


/* ===== Chat "More" menu inside chat info modal ===== */
.xchatinfo__more{position:relative}
.xchatmenu{
  position:absolute;
  top: 56px;
  right: -12px;
  width: 220px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 6px;
  z-index: 30;
}
.xchatmenu__item{
  width:100%;
  display:flex;
  gap:10px;
  align-items:center;
  border:0;
  background:transparent;
  padding:12px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:900;
  color: var(--text);
}
.xchatmenu__icon{width:18px;display:inline-flex;justify-content:center}
.xchatmenu__item:hover{background: var(--card)}
.xchatmenu__item--danger{color:#f4212e}
.xchatmenu__item--danger:hover{background: rgba(244,33,46,.08)}
/* Ensure emoji icons don't look huge */
.xchatmenu__icon{font-size:15px}

/* Conversation search row */
.xchatsearch{padding:10px 14px;border-bottom:1px solid var(--border)}

.xchatmenu__icon.xsvg svg{width:18px;height:18px}


/* ===== Confirm popup (X-like) ===== */
.xconfirm[hidden]{display:none}
.xconfirm{position:fixed;inset:0;z-index:1400}
.xconfirm__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter: blur(6px)}
.xconfirm__dialog{
  position:relative;
  width: 420px;
  max-width: calc(100vw - 24px);
  margin: 12vh auto;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
  overflow:hidden;
}
.xconfirm__top{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px 8px 16px;
}
.xconfirm__title{font-weight:900;font-size:18px}
.xconfirm__close{
  width:36px;height:36px;border-radius:999px;
  border:0;background:transparent;cursor:pointer;
  color:var(--muted);
}
.xconfirm__close:hover{background:var(--card);color:var(--text)}
.xconfirm__body{padding:0 16px 12px 16px;color:var(--muted);font-weight:800}
.xconfirm__actions{padding:0 16px 16px 16px;display:flex;flex-direction:column;gap:10px}
.xconfirm__confirm{
  width:100%;
  border:0;
  background:#f4212e;
  color:#fff;
  padding:12px 14px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
.xconfirm__confirm:hover{filter:brightness(1.02)}
.xconfirm__cancel{
  width:100%;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  padding:12px 14px;
  border-radius:999px;
  font-weight:900;
  cursor:pointer;
}
.xconfirm__cancel:hover{background:var(--card)}


/* Fix: ensure confirm dialog is above its backdrop and clickable */
.xconfirm__backdrop{z-index:0}
.xconfirm__dialog{z-index:1}


/* Chat info list icons */
.xchatinfo__rowleft{
  display:flex;
  align-items:center;
  gap:12px;
}
.xchatinfo__rowicon{
  width:22px;height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
  flex:0 0 22px;
}
.xchatinfo__rowicon svg{width:20px;height:20px}
.xchatinfo__rowicon--danger{color:#f4212e}
.xchatinfo__rowright{
  display:flex;
  align-items:center;
  gap:10px;
}
.xchatinfo__state{color:var(--muted);font-weight:900}
.xchatinfo__chev{
  width:18px;height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--muted);
}
.xchatinfo__chev svg{width:18px;height:18px}


/* ===== Post 3-dot menu ===== */
.xpost__menuwrap{margin-left:auto;display:inline-flex;align-items:center;gap:8px;position:relative}
.xpost__menuwrap .xchip{margin-left:0}
.xpost__more{color:var(--muted)}
.xpost__more svg{width:18px;height:18px}
.xmenu--post{left:auto;right:0;top:42px;min-width:240px;z-index:20}
.xmenu__link{display:block;text-decoration:none}

/* Icons in post 3-dot menu */
.xmenu--post .xmenu__item,
.xmenu--post .xmenu__link{
  position:relative;
  padding-left:42px;
}
.xmenu--post .xmenu__item::before,
.xmenu--post .xmenu__link::before{
  content:"";
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  background:var(--muted);
  opacity:.95;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:contain;
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:contain;
}
.xmenu--post .xmenu__item:hover::before,
.xmenu--post .xmenu__link:hover::before{background:var(--text)}

.xmenu--post [data-post-not-interested]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15%209L9%2015M9%209l6%206%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%2022a10%2010%200%201%201%200-20%2010%2010%200%200%201%200%2020z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M15%209L9%2015M9%209l6%206%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M12%2022a10%2010%200%201%201%200-20%2010%2010%200%200%201%200%2020z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3C%2Fsvg%3E");
}
.xmenu--post [data-post-follow]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M19%208v6M22%2011h-6%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9%2011a4%204%200%201%200%200-8%204%204%200%200%200%200%208z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M19%208v6M22%2011h-6%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.xmenu--post [data-post-lists]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%206h13M8%2012h13M8%2018h13%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%206h.01M3%2012h.01M3%2018h.01%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%206h13M8%2012h13M8%2018h13%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M3%206h.01M3%2012h.01M3%2018h.01%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.xmenu--post [data-post-mute]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11%205L6%209H2v6h4l5%204V5z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M23%209l-6%206M17%209l6%206%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11%205L6%209H2v6h4l5%204V5z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M23%209l-6%206M17%209l6%206%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.xmenu--post [data-post-block]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2022a10%2010%200%201%201%200-20%2010%2010%200%200%201%200%2020z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M5.5%205.5l13%2013%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%2022a10%2010%200%201%201%200-20%2010%2010%200%200%201%200%2020z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M5.5%205.5l13%2013%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.xmenu--post [data-post-activity]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2019V5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%2019h16%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2017v-6M12%2017V7M16%2017v-3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2019V5%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%2019h16%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%2017v-6M12%2017V7M16%2017v-3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.xmenu--post [data-post-embed]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%209l-3%203%203%203M16%209l3%203-3%203M14%207l-4%2010%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M8%209l-3%203%203%203M16%209l3%203-3%203M14%207l-4%2010%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.xmenu--post a[href*="action=edit"]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%204h16v16H4z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2014l2-2%203%203%204-5%203%204%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%208h.01%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%204h16v16H4z%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M8%2014l2-2%203%203%204-5%203%204%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M8%208h.01%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%224%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.xmenu--post [data-post-report]::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2022V3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%204h14l-2%204%202%204H4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M4%2022V3%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M4%204h14l-2%204%202%204H4%22%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}


/* ===== Reply modal (X-like) ===== */
.xreplymodal{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.xreplymodal__context{padding:12px 16px;border-bottom:1px solid var(--border);overflow:auto;max-height:240px}
.xreplymodal__tweet{display:flex;gap:12px}
.xreplymodal__av{width:40px;height:40px;flex:0 0 auto}
.xreplymodal__av .xavatarimg{width:40px;height:40px;border-radius:999px;object-fit:cover}
.xreplymodal__head{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.xreplymodal__name{font-weight:900}
.xreplymodal__handle,.xreplymodal__time{color:var(--muted);font-size:13px}
.xreplymodal__text{margin-top:4px}
.xreplymodal__hint{padding:8px 16px 0 16px;color:var(--muted);font-size:13px}
.xreplymodal__composer{padding:6px 16px 16px 16px;overflow:auto}


/* ===== Reply modal (X-like) ===== */
.xmodal__dialog--reply{width:640px}
.xmodal__top--compose{border-bottom:0;padding:8px 12px}
.xmodal__drafts{color:var(--primary);font-weight:900;font-size:14px;padding:8px 10px;border-radius:999px}
.xmodal__drafts:hover{background:rgba(29,155,240,.12)}
.xreplymodal{flex:1;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.xreplymodal__thread{padding:10px 16px 16px 16px;overflow:auto;min-height:0}
.xreplymodal__row{display:flex;gap:12px}
.xreplymodal__avwrap{width:40px;flex:0 0 40px;position:relative}
.xreplymodal__avwrap .xavatarimg{width:40px;height:40px;border-radius:999px;object-fit:cover}
.xreplymodal__row--original .xreplymodal__avwrap:after{
  content:'';
  position:absolute;
  left:19px;
  top:44px;
  width:2px;
  height:calc(100% + 16px);
  background:var(--border);
  border-radius:2px;
}
.xreplymodal__col{flex:1;min-width:0}
.xreplymodal__head{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.xreplymodal__name{font-weight:900}
.xreplymodal__handle,.xreplymodal__time{color:var(--muted);font-size:13px}
.xreplymodal__text{margin-top:4px;white-space:pre-wrap;word-break:break-word}
.xreplymodal__replying{margin:8px 0 6px;color:var(--muted);font-size:13px}
.xreplymodal__input{font-size:18px;line-height:1.35;border:0;outline:none;resize:none;padding:8px 0;background:transparent}
.xreplymodal__actions{display:flex;align-items:center;justify-content:space-between;margin-top:10px;gap:10px}
.xreplymodal__form{margin-top:10px}
.xreplymodal__form .xcomposer__msg{margin-top:10px}
.xreplymodal__loggedout{border-top:1px solid var(--border);padding-top:12px;margin-top:10px}