/* =========================
   NAXCORE TIMELINE (Optimized)
   ========================= */

:root {
  /* Renk Paleti - Kolay düzenleme için */
  --tl-border-color: rgba(255, 255, 255, 0.08);
  --tl-bg-hover: rgba(255, 255, 255, 0.03);
  --tl-bg-element: rgba(0, 0, 0, 0.2);
  --tl-text-primary: #ffffff;
  --tl-text-secondary: rgba(255, 255, 255, 0.7);
  --tl-radius-md: 12px;
  --tl-radius-lg: 14px;
  --tl-transition: all 0.2s ease;
}

/* Kapsayıcı Temelleri */
.timeline-panel,
#timeline-panel,
.timeline-view {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px; /* Elemanlar arası boşluk */
}

/* --- Header --- */
.timeline-header,
#timeline-header,
.tl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

.tl-title {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* Flex içinde text taşmasını önler */
}

.tl-title h2,
.tl-title .title {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--tl-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tl-sub,
.tl-title .sub {
  color: var(--tl-text-secondary);
  font-size: 12px;
  white-space: nowrap;
}

/* --- Composer (Yazı Alanı) --- */
.tl-composer,
#timeline-composer {
  width: 100%;
  border: 1px solid var(--tl-border-color);
  border-radius: var(--tl-radius-md);
  background: rgba(255, 255, 255, 0.01);
  overflow: hidden;
  transition: var(--tl-transition);
}

.tl-composer:focus-within {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.02);
}

.tl-composer textarea,
#timeline-composer textarea,
.tl-textarea {
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px;
  color: var(--tl-text-primary);
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
  outline: none;
  display: block;
}

/* Composer Alt Bar & Dosyalar */
.tl-composer-footer {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tl-file-row,
.tl-selected-media {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tl-file-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  border: 1px solid var(--tl-border-color);
  background: var(--tl-bg-element);
  color: var(--tl-text-secondary);
}

.tl-composer-actions,
.tl-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* --- Post Card --- */
.tl-post,
.timeline-post,
.tl-card {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--tl-border-color);
  border-radius: var(--tl-radius-lg);
  background: rgba(20, 20, 20, 0.4); /* Hafif koyu zemin */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--tl-transition);
}

.tl-post:hover {
  background: var(--tl-bg-hover);
  border-color: rgba(255, 255, 255, 0.12);
}

.tl-post-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tl-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.tl-name {
  font-weight: 700;
  color: var(--tl-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tl-verified {
  flex-shrink: 0;
  color: #1d9bf0; /* Örnek mavi tik rengi */
  display: flex;
}

/* Media Content */
.tl-post-media {
  width: 100%;
  border-radius: var(--tl-radius-md);
  overflow: hidden;
  background: #000; /* Resim yüklenmezse veya boşluk kalırsa */
}

.tl-post-media img,
.tl-post-media video {
  width: 100%;
  height: auto;
  max-height: 600px; /* Aşırı uzun görselleri engeller */
  object-fit: contain;
  display: block;
}

/* Code Blocks */
.tl-code {
  display: block;
  padding: 12px;
  border-radius: var(--tl-radius-md);
  background: #1e1e1e;
  border: 1px solid var(--tl-border-color);
  overflow-x: auto;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  color: #d4d4d4;
}

/* Action Bar (Like, RT, etc.) */
.tl-post-actions,
.tl-actionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 4px;
}

.tl-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 8px;
  color: var(--tl-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: var(--tl-transition);
  font-size: 13px;
}

.tl-action:hover {
  background: var(--tl-bg-hover);
  color: var(--tl-text-primary);
}

.tl-action .count {
  font-size: 12px;
  font-weight: 500;
}

/* =========================
   MOBILE BREAKPOINTS
   ========================= */

/* Tablet & Küçük Laptoplar */
@media (max-width: 900px) {
  .tl-sub {
    display: none; /* Kalabalığı azalt */
  }
}

/* Gerçek Mobil (Telefonlar) */
@media (max-width: 600px) {
  /* Kartları biraz daralt */
  .tl-post {
    padding: 12px;
    border-radius: var(--tl-radius-md);
  }

  /* Composer butonları alt alta veya grid */
  .tl-composer-actions {
    display: grid;
    grid-template-columns: 1fr auto; /* Sol ikonlar yayılır, sağ buton sabit */
    gap: 12px;
  }
  
  /* Gönder butonunu genişletmek istersen: */
  .tl-actions-right {
    grid-column: 1 / -1; /* Tam genişlik */
    width: 100%;
  }
  
  .tl-actions-right button {
    width: 100%; /* Butonu fulle */
  }

  /* Post aksiyonları - Mobilde daha rahat basılması için */
  .tl-post-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 buton varsa eşit dağıt */
    gap: 4px;
  }

  .tl-action {
    justify-content: center;
    padding: 10px 0; /* Dokunmatik alanını artır */
    background: rgba(255, 255, 255, 0.02); /* Mobilde sınırları belli olsun */
  }

  .tl-title h2 {
    font-size: 14px;
  }
}
/* =========================================================
   TIMELINE MOBILE + BTN WIDTH FIX (v2)
   Bu blok timeline içindeki global .btn width:100% çakışmasını kırar
   ve mobilde composer + actionbar'ı toparlar.
   ========================================================= */

/* Timeline içinde butonlar full-width olmasın */
#timeline-panel .btn{
  width: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}

/* Topbar (yenile) butonu şişmesin */
#timeline-panel .timeline-topbar{
  min-width: 0;
}
#timeline-panel .timeline-topbar .title{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#timeline-panel #tl-refresh-btn{
  width: 36px !important;
  height: 34px;
  padding: 0 !important;
  border-radius: 10px;
}

/* Composer alanı taşmasın */
#timeline-panel .timeline-composer,
#timeline-panel .timeline-wrap,
#timeline-panel .timeline-feed{
  min-width: 0;
}

#timeline-panel #tl-post-text,
#timeline-panel #tl-post-code{
  max-width: 100%;
}

/* File chip boşken görünmesin, dolunca otomatik çıksın */
#timeline-panel #tl-file-chip{
  display: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#timeline-panel #tl-file-chip:not(:empty){
  display: inline-flex;
}

/* Desktop/tablet composer actions: düzgün hizalama */
#timeline-panel .timeline-composer-actions{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
#timeline-panel #tl-post-btn{
  min-width: 130px;
}

/* Timeline post action bar: timeline içinde daha stabil */
#timeline-panel .media-post-actions{
  width: 100%;
  min-width: 0;
}

/* ======================
   MOBILE FIX
   ====================== */
@media (max-width: 900px){
  /* composer + feed padding küçülsün */
  #timeline-panel .timeline-composer{
    margin: 10px 10px 8px 10px;
    padding: 10px;
    border-radius: 14px;
  }
  #timeline-panel .timeline-feed{
    padding: 0 10px 14px 10px;
  }

  /* Sub yazı mobilde kalabalık yapıyor */
  #timeline-panel .timeline-topbar .sub{
    display: none !important;
  }
}

@media (max-width: 560px){
  /* Composer action bar mobilde grid: 2 sütun + Paylaş full */
  #timeline-panel .timeline-composer-actions{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    align-items: stretch;
  }

  /* Index'teki <div style="flex:1"></div> gridde saçmalamasın */
  #timeline-panel .timeline-composer-actions > div[style*="flex:1"]{
    display: none !important;
  }

  /* File chip tam satır */
  #timeline-panel #tl-file-chip{
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }

  /* Paylaş tam satır */
  #timeline-panel #tl-post-btn{
    grid-column: 1 / -1;
    width: 100% !important;
    justify-content: center;
  }

  /* Post action bar: 2x2 tappable */
  #timeline-panel .media-post-actions{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    justify-content: initial !important;
  }

  #timeline-panel .media-act{
    justify-content: center;
    padding: 10px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.16);
  }
}



/* ===== NAXCORE Patch v3 - Timeline Panel polish ===== */

/* panel should be hidden until JS opens it */
#timeline-panel{ display:none; }

/* fill the chat area cleanly */
#timeline-panel{
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  border-left: 1px solid rgba(255,255,255,.04);
}

#timeline-panel .timeline-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 10px 14px;
  background: rgba(20,22,28,.65);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
}

#timeline-panel .timeline-wrap{
  display:flex;
  flex-direction:column;
  gap: 12px;
  padding: 14px;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

#timeline-panel .timeline-composer{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  padding: 12px;
  background: rgba(18,20,28,.55);
  border: 1px solid rgba(120,90,255,.16);
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
}

#timeline-panel .timeline-composer textarea{
  flex: 1 1 320px;
  width: 100%;
  min-height: 56px;
  max-height: 180px;
  resize: vertical;
  background: rgba(10,12,18,.55);
  color: rgba(236,238,255,.92);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 10px 12px;
  outline: none;
}
#timeline-panel .timeline-composer textarea:focus{
  border-color: rgba(88,101,242,.55);
  box-shadow: 0 0 0 3px rgba(88,101,242,.18);
}

/* code box should start closed (JS toggle works correctly) */
#timeline-panel #tl-post-code{ display:none; }

/* actions row */
#timeline-panel .timeline-composer-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  width:100%;
}

#timeline-panel .timeline-composer-actions .left-actions{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap:wrap;
}

#timeline-panel .timeline-composer-actions button{
  background: rgba(255,255,255,.06);
  color: rgba(236,238,255,.88);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 9px 12px;
  cursor:pointer;
}
#timeline-panel .timeline-composer-actions button:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.14);
}

#timeline-panel .timeline-composer-actions .primary{
  background: linear-gradient(135deg, rgba(88,101,242,.95), rgba(168,85,247,.95));
  border-color: rgba(255,255,255,.10);
  color: #fff;
  padding: 10px 14px;
  min-width: 160px;
}
#timeline-panel .timeline-composer-actions .primary:hover{
  filter: brightness(1.05);
}

/* feed */
#timeline-panel .timeline-feed{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y:auto;
  padding: 4px 2px 24px;
}

/* small screens: stack tighter */
@media (max-width: 520px){
  #timeline-panel .timeline-wrap{ padding: 10px; }
  #timeline-panel .timeline-composer{ padding: 10px; border-radius: 14px; }
  #timeline-panel .timeline-composer-actions{
    flex-direction:column;
    align-items:stretch;
  }
  #timeline-panel .timeline-composer-actions .primary{
    width: 100%;
  }
}

/* when timeline is open, hide chat input area spacing issues */
body.mode-timeline #chat-input-area{ display:none !important; }

/* PC: Timeline medya görselleri merkezde yüzmesin, sola yaslansın */
@media (min-width: 901px){
  #timeline-panel .media-post-media{ justify-content:flex-start !important; }
  #timeline-panel .media-post-media .media-fit,
  #timeline-panel .media-post-media img,
  #timeline-panel .media-post-media video{
    object-position: left center !important;
  }
}


/* === Timeline: avatar + edit/delete tools === */
#timeline-panel .media-post-user.tl-userline{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

#timeline-panel .tl-avatar{
  width:38px;
  height:38px;
  border-radius:999px;
  overflow:hidden;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.06);
}

#timeline-panel .tl-avatar.tl-avatar-sm{
  width:30px;
  height:30px;
}

#timeline-panel .tl-avatar-img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

#timeline-panel .tl-avatar-fallback{
  font-weight:900;
  font-size:14px;
  opacity:.9;
}

#timeline-panel .tl-user-meta{
  display:flex;
  flex-direction:column;
  min-width:0;
}

#timeline-panel .tl-post-tools{
  position:relative;
  display:flex;
  align-items:center;
}

#timeline-panel .tl-more{
  padding:8px 10px;
}

#timeline-panel .tl-menu{
  position:absolute;
  top:44px;
  right:0;
  min-width:180px;
  z-index:9999;
  background: rgba(20,20,28,0.98);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  padding:6px;
  box-shadow: 0 16px 50px rgba(0,0,0,0.45);
}

#timeline-panel .tl-menu-item{
  width:100%;
  text-align:left;
  display:flex;
  gap:10px;
  align-items:center;
  border:0;
  background: transparent;
  color: rgba(255,255,255,0.92);
  padding:10px 10px;
  border-radius:10px;
  font-weight:800;
  cursor:pointer;
}

#timeline-panel .tl-menu-item:hover{
  background: rgba(255,255,255,0.07);
}

#timeline-panel .tl-menu-item.danger{
  color: var(--danger, #ff4d6d);
}

#timeline-panel .tl-edit-box{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 10px;
}

#timeline-panel .tl-edit-text,
#timeline-panel .tl-edit-code{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.92);
  padding: 10px 12px;
  outline:none;
  resize: vertical;
}

#timeline-panel .tl-edit-code{
  margin-top: 10px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
}

#timeline-panel .tl-edit-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top: 10px;
}

#timeline-panel .tl-edit-note{
  margin-top: 10px;
  font-size: 12px;
  opacity: .75;
  font-weight: 800;
}

#timeline-panel .tl-comment-meta{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

#timeline-panel .tl-comment-meta-text{
  flex: 1 1 auto;
  min-width:0;
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

#timeline-panel .tl-comment-author{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

#timeline-panel .tl-comment-author .tl-time{
  opacity:.7;
  font-size:12px;
  font-weight:800;
}

#timeline-panel .tl-c-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex:0 0 auto;
  user-select:none;
}

#timeline-panel .tl-c-act{
  cursor:pointer;
  font-weight:800;
  opacity:.9;
}

#timeline-panel .tl-c-act:hover{
  text-decoration: underline;
}

#timeline-panel .tl-c-act.danger{
  color: var(--danger, #ff4d6d);
}

@media (max-width: 520px){
  #timeline-panel .tl-menu{ right:0; left:auto; }
  #timeline-panel .tl-edit-actions{ flex-direction:column; align-items:stretch; }
  #timeline-panel .tl-edit-actions .btn{ width:100%; }
}


/* Patch: Timeline üst bar (fazlalık) gizlendi; Yenile butonu composer içine taşınır */
#timeline-panel .timeline-topbar{ display:none !important; }


/* =========================================================
   HOTFIX: Timeline spacing + no nested scroll + composer big avatar
   (Does NOT remove any features)
   ========================================================= */

/* 1) Feed: postlar arası boşluk */
#timeline-panel .timeline-feed,
#timeline-panel #timeline-feed{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Eski margin'ler varsa da garanti */
#timeline-panel .tl-post,
#timeline-panel .media-post,
#timeline-panel .timeline-post{
  margin: 0;
}

/* 2) Post içinde dikey scroll kesinlikle olmasın */
#timeline-panel .tl-post,
#timeline-panel .media-post,
#timeline-panel .timeline-post{
  max-height: none !important;
  overflow: visible !important;
}
#timeline-panel .tl-post * ,
#timeline-panel .media-post * ,
#timeline-panel .timeline-post *{
  max-height: none;
}

/* Eğer içerik alanlarına özel overflow verilmişse override */
#timeline-panel .tl-post .post-body,
#timeline-panel .tl-post .post-content,
#timeline-panel .tl-post .post-text,
#timeline-panel .tl-post .post-media,
#timeline-panel .tl-post .post-code,
#timeline-panel .media-post .post-body,
#timeline-panel .media-post .post-content,
#timeline-panel .media-post .post-text,
#timeline-panel .media-post .post-media,
#timeline-panel .media-post .post-code{
  overflow: visible !important;
  max-height: none !important;
}

/* Kod blokları sadece yatay taşsın */
#timeline-panel .tl-post pre,
#timeline-panel .media-post pre,
#timeline-panel .tl-post code,
#timeline-panel .media-post code{
  overflow-x: auto !important;
  overflow-y: visible !important;
  max-height: none !important;
}

/* 3) Composer: devasa kare profil foto geri gelsin (sadece composer içinde) */
/* Muhtemel yapılar: .media-composer-top / .media-composer-title / img.avatar */
#timeline-panel .timeline-composer .media-composer-title img,
#timeline-panel .timeline-composer .media-composer-title .avatar,
#timeline-panel .timeline-composer .media-composer-title .user-avatar,
#timeline-panel .timeline-composer .media-composer-top img,
#timeline-panel .timeline-composer .media-composer-top .avatar,
#timeline-panel .timeline-composer .media-composer-top .user-avatar{
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
}

/* Composer üst satır: avatar + textarea düzgün dursun */
#timeline-panel .timeline-composer .media-composer-top,
#timeline-panel .timeline-composer .media-composer-title{
  align-items: flex-start !important;
}

/* Eğer avatar wrapper'ı varsa */
#timeline-panel .timeline-composer .tl-avatar{
  width: 42px !important;
  height: 42px !important;
  border-radius: 999px !important;
}
#timeline-panel .timeline-composer .tl-avatar img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display:block;
}

/* 4) Post içindeki küçük avatarlar (userline) dar olsun (postlara özel) */
#timeline-panel .media-post-user.tl-userline .tl-avatar{
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
}
#timeline-panel .media-post-user.tl-userline .tl-avatar img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* =========================================================
   PATCH: Post medya boyutu (ekranı kaplamasın)
   - Görsel/video sabit bir çerçevede, kırpma yok (contain)
   ========================================================= */
#timeline-panel .media-post-media,
#timeline-panel .post-media,
#timeline-panel .timeline-media{
  width: 100%;
  max-width: 100%;
}

#timeline-panel .media-post-media img,
#timeline-panel .media-post-media video,
#timeline-panel .post-media img,
#timeline-panel .post-media video,
#timeline-panel .timeline-media img,
#timeline-panel .timeline-media video{
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;          /* desktop limit */
  object-fit: contain;         /* kırpma yok */
  border-radius: 12px;
  background: rgba(0,0,0,0.25);
}

/* Mobilde daha iyi: ekranın yarısından fazla kaplamasın */
@media (max-width: 900px){
  #timeline-panel .media-post-media img,
  #timeline-panel .media-post-media video,
  #timeline-panel .post-media img,
  #timeline-panel .post-media video,
  #timeline-panel .timeline-media img,
  #timeline-panel .timeline-media video{
    max-height: 55vh;
  }
}

/* =========================================================
   PATCH: Paylaşımlar arası boşluk (feed gap)
   ========================================================= */
#timeline-panel #timeline-feed,
#timeline-panel .timeline-feed,
#timeline-panel .media-feed,
#timeline-panel .posts,
#timeline-panel .post-list{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Eğer post'lar direkt child ise, margin bottom da ekle */
#timeline-panel .timeline-post,
#timeline-panel .media-post{
  margin-bottom: 14px;
}


/* =========================================================
   PATCH 2026-02-22: Composer scroll + küçük yuvarlak avatar
   - Composer sabit kalmasın: scroll container feed değil, wrap
   - Composer avatar: küçük yuvarlak
   ========================================================= */

/* Timeline'da tek scroll: timeline-wrap scroll etsin, feed kendi scroll'unu kapatsın */
#timeline-panel .timeline-wrap{
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
#timeline-panel .timeline-feed{
  overflow: visible !important;
  flex: 0 0 auto !important;
  min-height: auto !important;
}

/* Composer'daki profil foto (tl-compose-avatar) küçük + yuvarlak olsun */
#timeline-panel .tl-compose-avatar,
#timeline-panel #tl-compose-avatar{
  width: 54px !important;
  height: 54px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  flex: 0 0 54px !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  background: rgba(255,255,255,0.06) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#timeline-panel .tl-compose-avatar img,
#timeline-panel #tl-compose-avatar img,
#timeline-panel .tl-compose-avatar .tl-avatar-img,
#timeline-panel #tl-compose-avatar .tl-avatar-img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display:block !important;
}

/* ===== GOLD TIMELINE POSTS ===== */
.media-post-gold{
  position:relative;
  border:1px solid rgba(212,167,44,.30);
  background: linear-gradient(180deg, rgba(46,35,8,.40), rgba(20,20,20,.46));
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 14px 32px rgba(0,0,0,.18);
}
.media-post-gold::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow: inset 0 0 0 1px rgba(212,167,44,.08);
}
.tl-gold-ribbon{
  position:absolute;
  top:12px;
  right:14px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
  color:#f7e2a7;
  background: rgba(92,64,9,.78);
  border:1px solid rgba(212,167,44,.28);
  box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
.media-post-gold .media-post-header{
  padding-right:84px;
}
.media-post-gold .media-post-actions{
  border-top:1px solid rgba(212,167,44,.10);
  padding-top:10px;
}