body {
  margin: 0;
  background: #181b1e;
  color: #f3f3f3;
  font-family: 'Segoe UI', Verdana, sans-serif;
  height: 100vh;
}
body.ctrscreen {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
body.ctrscreen>div {
  height:auto;
  display:block;
  position:relative;
  width:auto;
  padding:50px;
  background-color:#ffffff18;
  border: 2px solid #88a487;
  border-radius: 3px;
}
.l{
  text-align: left;
}
.li{
  text-align: left!important;
}
.r{
  text-align: left;
}
.ri{
  text-align: left!important;
}
.m{
  text-align: center;
}
.mi{
  text-align: center!important;
}
button,input,textarea{
  background-color: #181b1e;
  color:white;
  border: 2px solid #88a487;
  border-radius: 3px;
  padding:7px;
}
*{
  font-family: 'Segoe UI', Verdana, sans-serif;
}
textarea{
  resize: none;
}
.sub{
  color:#bbb;
}
.top-nav {
  background: repeating-linear-gradient(174deg, #ededed, #7b7b7b 40px, #5d5d5d 80px);
  color: #fff;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  height: 58px;
  justify-content: space-between;
  box-shadow: 0 2px 5px #000a;
  gap: 1rem;
}
.nav-links {
  display: flex;
  gap: 2rem;
}
.nav-item {
  font-size: 1.15rem;
  cursor: pointer;
}
.nav-search {
  position: relative;
  width: 240px;
  max-width: 240px;
}
.nav-search input {
  width: 100%;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 2px solid #fff;          /* <-- 2px white border */
  background: rgba(0,0,0,0.60);    /* <-- increased opacity */
  color: #fff;                     /* <-- white text */
  box-sizing: border-box;
}
.nav-search input:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.nav-search-results {
  position: absolute;
  top: 110%;
  left: 0;
  right: 0;
  background: #0f1413;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45);
  max-height: 280px;
  overflow: auto;
  z-index: 2500;
}
.nav-search-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
}
.nav-search-item img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.08);
}
.nav-search-item .nav-search-message {
  margin-left: auto;
  font-size: 0.85rem;
  padding: 0.35rem 0.8rem;
}
.nav-search-results .nav-search-empty {
  padding: 0.65rem 0.8rem;
  color: #bbb;
  font-size: 0.9rem;
}
.contact.active {
  background: rgba(136,164,135,0.25);
}
.dm-active-meta {
  font-size: 0.85rem;
  color: #96c08e;
  margin-bottom: 0.4rem;
}
.main-wrap {
  display: flex;
  height: calc(100vh - 58px);
}
.side-nav {
  min-width: 170px;
  background: #23272c;
  display: flex;
  flex-direction: column;
  padding: 1.5em 0.5em;
  gap: 0.8em;
}
.side-tab {
  background: none;
  color: #f3f3f3;
  border: none;
  text-align: left;
  padding: 0.8em 1.2em;
  font-size: 1em;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.23s, color 0.2s;
}
.side-tab:focus, .side-tab.selected {
  background: #88a487;
  color: #222;
  outline: none;
}
.main-content {
  flex: 1;
  padding: 2rem;
  overflow-y: auto;
  font-size: 1.2rem;
}
.main-content.no-padding {
  padding: 0;
}
.chat-modal-overlay {
  position: fixed;
  right: 1.3em;
  bottom: 1.3em;
  z-index: 1003;
  background: rgba(16,20,16,0.80);
  height: 630px;
  max-width: 1040px;
  min-width: 560px; /* increased from 520px */
  width: 760px;     /* NEW: set a slightly larger default width */
  max-height: calc(100vh - 2.6em); /* keep inside viewport */
  display: flex;
  align-items: flex-start;
  resize: both;
  overflow: hidden;
  box-sizing: border-box;

  /* NEW: respond to overlay size changes using container queries */
  container-type: size;

  /* expose scaling variables (defaults for a medium/large overlay) */
  --cm-font: 14px;              /* base font size inside chat modal */
  --contact-width: 160px;       /* contacts column width */
  --avatar-size: 2.2em;         /* contact avatar (em relative to .chat-modal font) */
  --message-avatar-size: 1.6em; /* message avatar size */
  --modal-gap: 1rem;            /* dm-flex gap */
}
.chat-modal-overlay.minimized {
  left: 1.3em;
  top: 1.3em;
  right: auto;
  bottom: auto;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  width: 240px !important;
  min-width: 240px;
  overflow: hidden;
}
.chat-modal-overlay.minimized .chat-modal {
  /* allow clicks on the header / buttons when minimized */
  pointer-events: auto;
  /* keep the small height for the minimized chrome */
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  overflow: visible;
}
/* hide the large inner chat areas while leaving header interactive */
.chat-modal-overlay.minimized .chat-modal .dm-flex,
.chat-modal-overlay.minimized .chat-modal .chat-input {
  display: none;
}
.chat-modal {
  width: 100%;
  height: 100%;
  max-height: 100%;
  background: #222925;
  border-radius: 18px 18px 0 0;
  padding-bottom: 1em;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden; /* keep scrolling inside child */
  box-sizing: border-box;

  /* NEW - base font inherits from overlay variables, so child em units scale with container */
  font-size: var(--cm-font);
}
.chat-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1em;
  font-weight: bold;
  border-bottom: 1px solid #333;
  cursor: grab; /* hint draggable */
}
.chat-modal-header.dragging,
.chat-modal-header:active {
  cursor: grabbing;
}
.chat-modal-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
.chat-icon-btn {
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
}
.chat-icon-btn:hover { color: #88a487; }
.dm-flex {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  flex: 1;            /* fill remaining modal height */
  min-height: 0;      /* allow children to scroll correctly */
  /* stop the entire flex area from scrolling; make messages the only scroll container */
  overflow: visible;  /* was 'auto' - changed so messages scroll, not the whole panel */
  box-sizing: border-box;
}
.dm-flex > aside {
  width: var(--contact-width);
  background: #1f2223;
  border-radius: 8px;
  padding: 0.6rem;
  overflow: auto;
}
.dm-flex > section {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #161a18;
  border-radius: 8px;
  padding: 0.6rem;
  min-height: 0; /* required so flex children can overflow correctly */
  box-sizing: border-box;
}
.dm-flex > section .chat-input { padding: 0; }

.hidden {
  display: none;
}

/* DM-specific styles */
.dms-wrap {
  display:flex;
  gap:1rem;
  height: calc(100vh - 64px);
  padding:1rem;
  box-sizing:border-box;
}
.dms-sidebar {
  width:240px;
  background:#121316;
  border-radius:8px;
  padding:0.6rem;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  box-sizing:border-box;
  overflow:auto;
}
.dms-search {
  display:flex;
  gap:0.5rem;
  align-items:center;
}
.new-msg-btn {
  background:#2b6a8a;
  border:none;
  color:#fff;
  padding:0.5rem 0.6rem;
  border-radius:6px;
  cursor:pointer;
}
.contact {
  display:flex;
  gap:0.6rem;
  align-items:flex-start;
  padding:0.5rem;
  border-radius:6px;
  cursor:pointer;
}
.contact:hover { background:rgba(255,255,255,0.03); }
.contact .avatar {
  width:var(--avatar-size);
  height:var(--avatar-size);
  border-radius:50%;
  background:#2b2f31;
  display:inline-block;
  flex-shrink:0;
  object-fit:cover;
}
.contact .meta { color:#ddd; font-size:0.95rem; }
.contact .name { font-weight:600; margin-bottom:0.12rem; color:#fff; }
.contact .sub { font-size:0.82rem; color:#aaa; }

/* pending request badge */
.pending { font-size:0.78rem; color:#ffd96b; }

/* chat area */
.dms-chat {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
}
.chat-header {
  padding:0.6rem;
  background:#0f1413;
  border-radius:8px;
  color:#fff;
  font-weight:600;
  display:flex;
  gap:0.6rem;
  align-items:center;
}
.chat-messages {
  flex: 1;
  overflow-y: auto; /* vertical scroll only */
  overflow-x: hidden;
  padding: 0.6rem;
  background: linear-gradient(#0a0c0b,#0b0d0c);
  border-radius: 8px;
  box-sizing: border-box;
}

.chat-btn {
  background: #88a487;
  color: white;
  border: none;
  border-radius: 18px;
  padding: 0.6em 1.5em;
  font-size: 1em;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.23s;
}
.chat-btn:hover {
  background: #708960;
}

.message {
  display:flex;
  gap:0.6rem;
  align-items:flex-start;
  padding:0.5rem;
  border-radius:6px;
  transition:background 120ms;
  max-width:80%;
  margin-bottom:0.4rem;
}
.message:hover { background: rgba(255,255,255,0.2); }
.message .avatar { width:var(--message-avatar-size); height:var(--message-avatar-size); border-radius:50%; background:#333; flex-shrink:0; }
.message .body { display:flex; flex-direction:column; gap:0.18rem; }
.message .sender { font-size:0.82rem; color:#eaeaea; font-weight:600; }
.message .text { font-size:0.95rem; color:#ddd; background:transparent; padding:0; }
.message.me {
  margin-left: auto;
  flex-direction: row-reverse;
  text-align: right;
  background: rgba(112,137,96,0.12);
}
.message.me .body {
  align-items: flex-end;
}
.message.me .sender {
  color: #b9ddaf;
}

/* input area */
.chat-input {
  display:flex;
  gap:0.5rem;
  margin-top:0.5rem;
  align-items: center;
  padding: 0.6rem;
  background: linear-gradient(rgba(16,20,16,0.08), rgba(16,20,16,0.02));
  border-top: 1px solid rgba(255,255,255,0.02);
  box-sizing: border-box;
  /* remove sticky + position so input remains at bottom inside the flex column */
  position: static; /* was sticky */
  bottom: auto;
  z-index: auto;
  box-shadow: 0 -6px 18px rgba(0,0,0,0.28);
}
.chat-input input[type="text"] {
  padding: 0.6rem;
  font-size: 1rem;
  border-radius:8px;
  border:none;
  background:#0e1312;
  color:#fff;
}
.chat-send-btn {
  padding:0.55rem 0.8rem;
  border-radius:8px;
  background:#2b6a8a;
  color:#fff;
  border:none;
  cursor:pointer;
}

/* small accept button for pending */
.accept-btn {
  margin-left:auto;
  background:#3a8a3a;
  color:#fff;
  border:none;
  padding:0.28rem 0.5rem;
  border-radius:6px;
  cursor:pointer;
  font-size:0.82rem;
}

/* Avatar button */
.avatar-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid rgba(255,255,255,0.08);
  background: #222;
  display: inline-block;
}

/* dropdown menu */
.user-menu {
  position: absolute;
  right: 0;
  top: 48px;
  width:350px;
  background: #0f1413;
  border-radius: 8px;
  padding: 0.4rem 0.2rem;
  min-width: 140px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  z-index: 2000;
  padding: 0.6rem;
  display:flex;
  flex-direction:column;
  gap:0.6rem;
  box-sizing:border-box;
  justify-items: center;
  align-items: center;
}
.user-menu.hidden { display: none; }
.user-menu-item {
  padding: 0.6rem 0.8rem;
  color: #eee;
  cursor: pointer;
  font-size: 0.95rem;
  align-items: center;
  width: 50px;
}
.user-menu-item:hover { background: rgba(255,255,255,0.03); }
.menu-section { display:flex; flex-direction:column; gap:0.25rem; padding:0.15rem 0.25rem; justify-items: center;}
.menu-input { background:#0e1312; border:1px solid #2f3b34; color:#fff; padding:0.45rem; border-radius:6px; width:100%; box-sizing:border-box; }
.avatar-preview-container { position:relative; width:72px; height:72px; }
.avatar-preview-container .avatar-btn { width:72px; height:72px; border-radius:50px; }
.avatar-overlay {
  position:absolute; inset:-3px; display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.35); opacity: 0; color:#fff; border-radius:50px; cursor:pointer; transition:opacity 160ms;
}
.avatar-preview-container:hover .avatar-overlay { background:rgba(0,0,0,0.35); opacity: 1;}
.menu-actions { display:flex; gap:0.5rem; align-items:center; justify-content:flex-end; }

.dm-page {
  margin: 0;           /* removed top margin so it can be edge-to-edge */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
.dm-page.hidden { display: none; }
.dm-page .chat-modal-header {
  border-bottom: none;
  padding-left: 0;
}
.dm-page .dm-flex {
  padding: 0;
  background: #111312;
  border-radius: 12px;
  flex: 1 1 auto;
  min-height: 0; /* allow child scroll containers to behave in flexbox */
  overflow: auto;
}

/* For-you section horizontal spacing */
.for-you-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0 0.6rem; /* small left/right margin */
}

/* Post avatar: same size/style as nav avatar (40x40) */
.post-card .avatar,
.post-card img.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.08);
  display: inline-block;
}

/* ensure the post header aligns items vertically */
.post-card header img {
  width: 40px;
  height: 40px;
  margin-right: 0.6rem;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,0.08);
}

/* Post form controls: restore compact, consistent styling */
.post-form input,
.post-form textarea,
.post-form button {
  background: #0e1312;
  border: 1px solid #2d342f;
  color: #fff;
  padding: 0.6rem;
  border-radius: 8px;
  box-sizing: border-box;
  font-size: 1rem;
  width: 100%;
}
.post-form textarea {
  resize: vertical;
  min-height: 72px;
}

/* Make the post submit button match .chat-btn but confined inside the form */
.post-form .chat-btn {
  align-self: flex-start;
  margin-top: 0.35rem;
  padding: 0.5rem 0.9rem;
}

/* Post card container - avoid content overflow */
.post-card {
  overflow: hidden;
  box-sizing: border-box;
}

/* Ensure the timeline/feed stacks posts vertically and allows each post (and video) to size correctly */
.post-feed {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

/* tighten video rendering (already mostly handled) */
.post-card video {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Responsive video: maintain aspect-ratio, don't crop; allow taller videos up to viewport height */
.post-card video {
  width: 100%;
  max-width: 100%;
  height: auto;                  /* keep proportional to width */
  max-height: 100vh;             /* reasonable cap: no taller than the viewport */
  border-radius: 12px;
  margin-top: 0.8rem;
  display: block;
  object-fit: contain;           /* avoid cropping; letterbox if needed */
}

/* Post form layout tweaks */
.post-video-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  margin-top: 0.5rem;
  flex-direction: column;
}

/* preview container inside form */
.post-preview {
  width: 100%;
  margin-top: 0.5rem;
  background: rgba(255,255,255,0.02);
  padding: 0.5rem;
  border-radius: 8px;
  box-sizing: border-box;
}
.post-preview.hidden { display: none; }

/* preview video in the form (match feed behavior) */
.post-video-preview {
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: 100vh;
  border-radius: 8px;
  object-fit: contain;
  display: block;
}

/* media row in post form */
.post-media-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

/* preview image in the form */
.post-image-preview {
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* final feed image styling */
.post-card .post-image,
.post-card img.post-image {
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  margin-top: 0.8rem;
  display: block;
  object-fit: cover;
}

/* status styling */
.post-form #post-status {
  margin-top: 0.45rem;
  font-size: 0.92rem;
  color: #cbd8c6;
}

/* keep remove button small when next to preview */
.post-preview .chat-btn {
  padding: 0.35rem 0.7rem;
  font-size: 0.9rem;
}

/* Post form container (visual card) */
.post-form {
  background: rgba(8,12,10,0.6);
  border: 1px solid rgba(255,255,255,0.04);
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 900px;
  box-sizing: border-box;
}

/* Make sure post cards are visible and separated */
.post-card {
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
  padding: 0.9rem;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

/* cap videos so a single video doesn't fill entire viewport */
.post-card video {
  max-height: 48vh;   /* allow tall videos but not fullscreen */
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* ensure images and previews don't collapse */
.post-card .post-image,
.post-card img.post-image,
.post-image-preview,
.post-video-preview {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Responsive scaling for chat modal and contacts
   - base font-size on viewport (clamped) so rem-based sizes scale
   - use clamp for overlay dimensions, contact column, avatar and paddings
*/
.chat-modal {
  /* smaller on small screens, a bit larger on desktop */
  font-size: clamp(12px, 1.2vw + 0.2rem, 15px);
  /* ensure descendants use this sizing context */
  box-sizing: border-box;
}

/* make overlay width/height adapt */
.chat-modal-overlay {
  max-width: clamp(320px, 60vw, 1040px);
  min-width: clamp(280px, 40vw, 320px); /* slightly increased min clamp */
  /* NEW: default width scales with viewport but prefers a wider base */
  width: clamp(560px, 50vw, 960px);
  height: clamp(220px, 48vh, 630px);
}

/* contact column scales with viewport */
.dm-flex > aside {
  width: clamp(110px, 18vw, 220px);
  padding: clamp(0.35rem, 0.8vw, 0.6rem);
}

/* scale contact row spacing and avatar size (use rem so it follows .chat-modal font-size) */
.contact {
  gap: clamp(0.35rem, 0.9vw, 0.6rem);
  padding: clamp(0.25rem, 0.6vw, 0.45rem);
}
.contact .avatar {
  width: 2.2rem;   /* scales with .chat-modal font-size */
  height: 2.2rem;
  border-radius: 50%;
}

/* message avatar slightly smaller relative to chat font */
.message .avatar {
  width: 1.6rem;
  height: 1.6rem;
}

/* ensure buttons and inputs use relative padding that scales */
.chat-btn {
  padding: clamp(0.35rem, 0.8vw, 0.9rem);
  font-size: 0.95rem;
}

/* chat input scales */
.chat-input input[type="text"] {
  padding: clamp(0.45rem, 0.9vw, 0.6rem);
  font-size: 1rem; /* relative to .chat-modal font-size */
}

/* reduce header padding at small sizes for compactness */
.chat-modal-header {
  padding: clamp(0.5rem, 1vw, 1rem);
  font-size: 1rem;
}

/* keep dm-flex internal gaps proportional */
.dm-flex {
  gap: clamp(0.6rem, 1.4vw, 1rem);
  padding: clamp(0.6rem, 1.2vw, 1rem);
}

/* very small screens: make overlay full-width bottom sheet style */
@media (max-width: 520px) {
  .chat-modal-overlay {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px 10px 0 0;
    height: clamp(160px, 50vh, 420px);
  }
  .dm-flex > aside { display: none; } /* hide contacts column in the compact bottom sheet */
}

/* container query breakpoints — they adapt to the overlay size after user resizes it */

/* Narrow overlay: hide contacts, make controls compact */
@container (max-width: 420px) {
  .chat-modal {
    font-size: 12px; /* smaller text when overlay narrow */
  }
  .chat-modal-overlay {
    --cm-font: 12px;
    --contact-width: 0px;
    --avatar-size: 1.2em;
    --message-avatar-size: 1.0em;
  }
  .dm-flex > aside {
    display: none;
  }
  .chat-modal .chat-input { gap: 0.35rem; }
  .dm-flex { gap: 0.4rem; padding: 0.4rem; }
  .chat-messages { padding: 0.45rem; }
}

/* Medium overlay: a compact but usable layout */
@container (min-width: 421px) and (max-width: 760px) {
  .chat-modal {
    font-size: 13px;
  }
  .chat-modal-overlay {
    --cm-font: 13px;
    --contact-width: 120px;
    --avatar-size: 1.6em;
    --message-avatar-size: 1.25em;
  }
  .dm-flex > aside { width: var(--contact-width); }
  .chat-modal .chat-input { gap: 0.5rem; }
  .dm-flex { gap: 0.6rem; padding: 0.6rem; }
}

/* Large overlay: full layout */
@container (min-width: 761px) {
  .chat-modal {
    font-size: 14px;
  }
  .chat-modal-overlay {
    --cm-font: 14px;
    --contact-width: 160px;
    --avatar-size: 2.2em;
    --message-avatar-size: 1.6em;
  }
  .dm-flex > aside { width: var(--contact-width); }
  .dm-flex { gap: var(--modal-gap); padding: 1rem; }
}

/* Ensure each chat section is a positioned container so overlays/fabs can be absolute within it */
.dm-flex > section { position: relative; }

/* Floating Compose FAB (visible even when chat-input is hidden) */
.compose-fab {
  position: absolute;
  right: 1rem;
  bottom: 1.1rem; /* sits above the bottom area */
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #88a487;
  color: #0f1413;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: none;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  cursor: pointer;
}
.compose-fab:hover { background: #708960; }

/* Full conversation compose overlay */
.compose-overlay {
  position: absolute;
  inset: 0; /* cover the section content */
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: rgba(8,10,8,0.86);
  padding: 0.8rem;
  box-sizing: border-box;
  border-radius: 8px;
}

/* hidden helper to toggle overlay */
.compose-overlay.hidden { display: none; }

/* The textarea should take all available vertical space */
.compose-textarea {
  flex: 1;
  resize: none;
  padding: 0.9rem;
  border-radius: 8px;
  border: none;
  background: #0e1312;
  color: #fff;
  font-size: 1rem;
  box-sizing: border-box;
  min-height: 180px;
  outline: none;
}

/* bottom row for actions in the overlay */
.compose-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  align-items: center;
}

/* Close control in the overlay */
.compose-actions .chat-icon-btn {
  background: transparent;
  color: #fff;
  font-size: 1.05rem;
}

/* make the overlay textarea look good at smaller container widths via container queries (already present) */
@container (max-width: 420px) {
  .compose-fab { right: 0.6rem; bottom: 0.6rem; width: 40px; height: 40px; }
  .compose-overlay { padding: 0.5rem; }
  .compose-textarea { min-height: 120px; font-size: 0.95rem; }
}

/* Remove hiding of the bottom chat input; keep it visible */
.dm-flex > section .chat-input { /* was display: none; */ display: flex; }

/* Frame wrapper for the input field */
.input-frame {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(8,10,8,0.6);
  box-sizing: border-box;
}

/* make the inner input borderless and expand to fill frame */
.input-frame input[type="text"] {
  background: transparent;
  border: 0;
  padding: 0.45rem;
  color: #fff;
  flex: 1;
  outline: none;
  font-size: 1rem;
}

/* Make the send button sit to the right of the framed input */
.chat-input .chat-btn {
  margin-left: 0.4rem;
}

/* Frame message text within each message bubble to emphasize the content */
.message .text {
  display: inline-block;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.02);
  max-width: 100%;
  box-sizing: border-box;
}

/* Slightly reduce message bubble outer padding to emphasize framed text */
.message {
  padding: 0.25rem;
}

/* Tag pill styling for posts */
.post-tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.6rem;
  align-items: center;
}
.tag-pill {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: rgba(136,164,135,0.08); /* subtle green background */
  color: #cfe6d0; /* light green text */
  border: 1px solid rgba(136,164,135,0.12);
  font-size: 0.82rem;
  line-height: 1;
  white-space: nowrap;
  text-transform: lowercase;
}
.tag-pill:hover {
  background: rgba(136,164,135,0.14);
  color: #ffffff;
  border-color: rgba(136,164,135,0.18);
}

/* Post-tags in smaller cards: tighten spacing */
.post-card .post-tags { gap: 0.35rem; margin-top: 0.45rem; }

/* Simple composer UI (compact text composer) */
.post-simple {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: rgba(10,12,10,0.6);
  border-radius: 12px;
  padding: 0.9rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.16);
}
.post-simple textarea {
  min-height: 80px;
  resize: vertical;
  padding: 0.6rem;
  border-radius: 8px;
  box-sizing: border-box;
  background: #0e1312;
  border: 1px solid rgba(255,255,255,0.03);
  color: #fff;
}

/* advanced options hidden by default (toggle shows) */
.post-advanced {
  display: none;
}

/* when open, show advanced */
.post-advanced.open {
  display: block;
}

/* upload progress */
.upload-progress {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin-top: 0.45rem;
}
.upload-progress progress {
  width: 100%;
  height: 10px;
  appearance: none;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
}

/* progress percentage text */
.upload-progress-label {
  min-width: 56px;
  text-align: right;
  font-size: 0.9rem;
  color: #cfe6d0;
}

/* size info row */
.size-info {
  display:flex;
  gap: 0.6rem;
  align-items:center;
  color: #bbb;
  font-size: 0.9rem;
}
.size-info .muted { color:#9bbf9a; }

.post-delete-btn {
  background: transparent;
  border: 1px solid rgba(255, 0, 0, 0.12);
  color: #ff9b9b;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 120ms, color 120ms, border-color 120ms;
}
.post-delete-btn:hover {
  background: rgba(255, 0, 0, 0.06);
  border-color: rgba(255, 0, 0, 0.28);
  color: #ffb3b3;
}
#post-res-auto-desc {
  margin-left: 0.4rem;
  font-size: 0.9rem;
  color: #cfe6d0; /* match existing tag color */
}

/* 3-dot post menu */
.post-menu {
  display: inline-block;
}
.post-menu-btn {
  width: 36px;
  height: 30px;
  font-size: 1.05rem;
  line-height: 1;
  border-radius: 8px;
  background: transparent;
  color: #eaeaea;
  border: 0;
  cursor: pointer;
  padding: 0.15rem 0.4rem;
}
.post-menu-content {
  display: block; /* toggled hidden by JS; layout handled inline */
}
.post-menu-content.hidden {
  display: none;
}
/* ensure the time is grey and not clickable */
.post-menu-content .post-menu-time {
  color: #888;
  font-size: 0.85rem;
  margin-bottom: 0.45rem;
  pointer-events: none; /* not clickable */
}

/* make delete button match site style inside the menu */
.post-menu-content .post-menu-delete {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.45rem 0.55rem;
  border-radius: 6px;
  background: rgba(136,164,135,0.06);
  color: #f3f3f3;
  border: none;
  cursor: pointer;
}
.post-menu-content .post-menu-delete:hover {
  background: rgba(136,164,135,0.12);
}