/* Chat messages container: flex column for alignment */
#chat-messages {
  display: flex;
  flex-direction: column;
}
/* Chat messages container: flex column for alignment */
#chat-messages {
  display: flex;
  flex-direction: column;
}
.chat-msg {
  padding: 8px;
  border-radius: 8px;
  max-width: 80%;
  margin: 4px 0;
}
.chat-msg.mine {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(76,175,80,0.12), rgba(76,175,80,0.06));
  margin-left: auto;
}
.chat-msg.theirs {
  align-self: flex-start;
  background: rgba(255,255,255,0.02);
  margin-right: auto;
}

    :root{
      --bg:#0f1724;
      --card:#0b1220;
      --muted:#94a3b8;
      --accent:#2563eb;
      --glass: rgba(255,255,255,0.04);
      --glass-2: rgba(255,255,255,0.02);
      --accent-2: #06b6d4;
      color-scheme: dark;
    }
    *{box-sizing:border-box}
    html,body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; background:linear-gradient(180deg,#071029 0%, #071827 60%); color:#e6eef8}

    /* Layout */
    .app{display:grid;grid-template-columns:260px 1fr ;gap:20px;padding:24px}

    /* Left nav */
    .side{
      background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
      background: #0a1b2a;
      border-radius:14px;padding:18px;box-shadow:0 8px 30px rgba(2,6,23,0.6);display:flex;flex-direction:column;min-height:0;height:100%;}
    /* Privacy link in side menu always at the bottom */
    .privacy-link-side {
      font-size:0.85rem;
      color:var(--muted,#666);
      margin-top:10px;
      display:block;
      text-align:center;
      margin-bottom:0;
      margin-top:auto;
    }
    .brand{display:flex;align-items:center;gap:12px}
    .logo{width:48px;height:48px;border-radius:10px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));font-weight:800;color:white}
    .title{font-size:18px;font-weight:700}
    .subtitle{font-size:12px;color:var(--muted)}

    .channels{margin-top:18px}
    .channels h3 , .chats h3{font-size:13px;margin:0 0 8px 0;color:var(--muted)}
    .chan-list{display:flex;flex-direction:column;gap:8px}
    .chan{padding:10px;border-radius:10px;cursor:pointer;color:var(--muted);display:flex;align-items:center;gap:10px}
    .chan:hover{background:var(--glass);color:#fff}
    .chan.active{background:linear-gradient(90deg, rgba(37,99,235,0.12), rgba(6,182,212,0.06));color:white;box-shadow:0 6px 18px rgba(3,7,18,0.6)}

    .search{margin-top:14px;padding:8px;background:var(--glass-2);border-radius:10px;font-size:14px;color:var(--muted);border:1px solid rgba(255,255,255,0.02)}

    /* Middle feed */
    .feed{display:flex;flex-direction:column;gap:18px;padding:8px;}
    .feed-header{align-items:center;justify-content:space-between}
    .feed-title{font-size:20px;font-weight:700}
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,0.03);}

    .composer{display:flex;gap:12px;align-items:flex-start}
    .avatar{width:44px;height:44px;border-radius:10px;background:linear-gradient(135deg,#334155,#0ea5e9);display:grid;place-items:center;font-weight:700}
    .composer textarea{flex:1;background:transparent;border:1px dashed rgba(255,255,255,0.03);min-height:68px;padding:10px;border-radius:10px;color:inherit;font-size:14px}
    .btn-row{display:flex;gap:8px;margin-top:8px;justify-content:flex-end}
    .btn{background:var(--accent);border:none;padding:8px 12px;border-radius:10px;color:white;font-weight:600;cursor:pointer}
    .btn.ghost{background:transparent;border:1px solid rgba(255,255,255,0.04)}

    textarea{
      width: 100%;
    }
    /* Post */
    .post{display:flex;gap:12px}
    .post .body{flex:1}
    .meta{display:flex;align-items:center;gap:10px;margin-bottom:8px}
    .name{font-weight:700}
    .post .meta .name{cursor:pointer}
    .time{color:var(--muted);font-size:13px}
    .post-text{white-space:pre-wrap;margin-bottom:10px;    max-height: 300px;
    overflow: auto;}

    .actions{display:flex;gap:16px;color:var(--muted);font-size:14px}
    .actions button{background:transparent;border:none;color:inherit;cursor:pointer}

    .comments{margin-top:12px;border-left:2px solid rgba(255,255,255,0.02);padding-left:12px;display:flex;flex-direction:column;gap:8px}
    .comment{display:flex;gap:8px}
    .comment .c-body{background:rgba(255,255,255,0.02);padding:8px;border-radius:8px ;width: 100%;}

    /* Right area - Projects / Channels (per your request right-side channels like Slack) */
    .right{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:14px;padding:14px;border:1px solid rgba(255,255,255,0.03)}
    .right h3{margin:0 0 8px 0}
    .project{padding:10px;border-radius:10px;background:rgba(255,255,255,0.01);display:flex;justify-content:space-between;align-items:center}
    .tag{font-size:12px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.02)}

    /* Responsive */
    @media (max-width:1100px){.app{grid-template-columns:220px 1fr}.right{display:none}}

/* Desktop: make left sidebar sticky/fixed and searchable area pinned */
@media (min-width:721px){
  .side{position:sticky;top:10px;align-self:start;height:calc(100vh - 106px);overflow:auto}
  .side .search{position:sticky;top:12px;z-index:20;background:transparent}
}

/* Mobile: hide side by default and provide a toggle button that slides it in */
@media (max-width:720px){
  .side{position:fixed;left:-320px;top:58px;bottom:0;width:260px;padding:18px;z-index:12000;border-radius:0;border-right:1px solid rgba(255,255,255,0.03);transition:left .28s ease}
  .side.open{left:0}
  #mobile-open-side{display:block;position:fixed;left:12px;top:14px;z-index:13000}
  /* dim overlay when side is open */
  .side-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:11900}
  .side.open + .side-overlay{display:block}
}

/* Hide mobile toggle on desktop */
#mobile-open-side{display:none}


    /* small touches */
    .muted{color:var(--muted)}
    a{color:inherit}
  
    .dropzone {
  border: 2px dashed var(--muted);
  padding: 12px;
  text-align: center;
  color: var(--muted);
  border-radius: 6px;
  margin-top: 8px;
  cursor: pointer;
  transition: background 0.2s;
  font-size: 10px;
}
.dropzone.dragover {
  background: rgba(0,0,0,0.05);
}
.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.attachments .file {
  background: rgba(0,0,0,0.05);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.attachments .file {
  position: relative;
  width: 60px;
  height: 60px;
  background: rgba(0,0,0,0.05);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-transform: uppercase;
  cursor: default;
  transition: background 0.2s;
}

.attachments .file:hover {
  background: rgba(0,0,0,0.1);
}

.attachments .file .remove {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: rgba(255,0,0,0.8);
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  border-radius: 50%;
  cursor: pointer;
  display: none;
}

.attachments .file:hover .remove {
  display: block;
}



/* NAVBAR DESKTOP */
.topnav{
position:fixed;
top:0;
left:0;
width:100%;
height:58px;
display:flex;
align-items:center;
justify-content:center;
gap:40px;
background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,0.05);
z-index:999;
}
.topnav .nav-item{
color:#e6eef8;
font-weight:600;
text-decoration:none;
padding:8px 14px;
border-radius:10px;
transition:0.2s;
}
.topnav .nav-item:hover{
background:rgba(255,255,255,0.06);
}


/* NAVBAR MOBILE (sempre visibile e fissata in basso) */
.bottomnav{
position:fixed;
bottom:0;
left:0;
width:100%;
height:64px;
background:linear-gradient(0deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02));
border-top:1px solid rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
z-index:9999;
display:flex;
align-items:center;
justify-content:space-around;
}


.bnav-item{
color:#e6eef8;
font-size:22px;
text-decoration:none;
display:flex;
flex-direction:column;
align-items:center;
gap:2px;
}
.bnav-item span{
font-size:11px;
}


/* MOSTRA SOLO SU MOBILE */
@media(max-width:720px){
.topnav{display:none;}
.bottomnav{display:flex;}
.app{padding-bottom:80px !important;}
} /* desktop hidden */
.bottomnav{display:flex;} /* mobile visible */


/* aggiustamento layout perché ora navbar top scompare */
.app{padding-top:0 !important;}

/* Wrapper dell'editor */
.trumbowyg-box {
  /*transition: all 0.3s ease;*/
  height: 150px; /* altezza iniziale */
  min-height: 150px!important; /* altezza iniziale */
  overflow: hidden;
}

/* Quando focus */
.trumbowyg-box.focused {
  height: 150px; /* altezza ingrandita */
  min-height: 150px!important; /* altezza ingrandita */
}
#composer-input {
  display: none; /* nasconde il textarea originale */
}
#composer-attachments{
      background-color: #ffffff40;
    border-radius: 10px;
}

/* Search overlay */
.search-overlay{
  position:fixed;left:0;top:0;width:100%;height:100%;background:rgba(3,7,18,0.7);display:none;align-items:flex-start;justify-content:center;padding-top:80px;z-index:10010;
}
.search-overlay.show{display:flex}
.search-panel{
  width:760px;
  max-width:96%;
  background:black;
  border-radius:12px;
  padding:18px;
  border:1px solid rgba(255,255,255,0.04);
  box-shadow:0 24px 60px rgba(2,6,23,0.7)
}
.search-panel .row{display:flex;gap:8px;margin-bottom:10px}
.search-panel input[type="search"]{flex:1;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.search-results{max-height:60vh;overflow:auto}
.search-item{padding:10px;border-radius:8px;margin-bottom:8px;background:rgba(255,255,255,0.01);border:1px solid rgba(255,255,255,0.02)}
.search-close{cursor:pointer;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,0.02)}

/* temporary highlight ring for post/comment when navigated from search */
.card.post.highlight {
  position: relative;
  box-shadow: 0 0 0 4px rgba(37,99,235,0.18), 0 8px 30px rgba(2,6,23,0.45);
  transition: box-shadow 0.18s ease;
}

.card.post.highlight::after{
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 12px;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.28);
  pointer-events: none;
}

/* comment highlight */
.comment.highlight{ /* smaller ring */
  position: relative;
  transition: box-shadow 0.18s ease;
  box-shadow: 0 0 0 3px rgba(99,102,241,0.12);
}
.comment.highlight::after{ content: ''; position: absolute; inset: -4px; border-radius:10px; box-shadow: 0 0 0 2px rgba(99,102,241,0.22); pointer-events:none; }

 /* Like button */
    .like-btn{
      padding:6px 10px;
      border-radius:8px;
      background:transparent;
      border:1px solid rgba(255,255,255,0.04);
      color:var(--muted);
      cursor:pointer;
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .like-btn:hover{ border-color:rgba(255,255,255,0.08); }
    .like-btn .like-icon{
      color: var(--muted);
      transition: color .18s ease, transform .12s ease;
      display:inline-block;
      line-height:1;
    }
    .like-btn.liked{
      /* keep button visuals unchanged; only the heart will turn red */
      border-color: rgba(255,107,107,0.12);
    }
    .like-btn.liked .like-icon{
      color: #d00;
      transform: scale(1.08);
    }

    .search-item:hover {
    background: rgb(5 111 160 / 83%);
    }

      /* Hamburger button for mobile */
    .hamburger {
        display: none;
        position: fixed;
        top: 16px;
        left: 16px;
        z-index: 10060;
        width: 44px;
        height: 44px;
        background: rgba(0,0,0,0.08);
        border: none;
        border-radius: 8px;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .hamburger span {
        display: block;
        width: 26px;
        height: 3px;
        margin: 5px auto;
        background: white;
        display: block;
        border-radius: 2px;
        transition: all 0.2s;
    }
    @media (max-width: 800px) {
        .hamburger { display: block; }
      .search{margin-left: 50px;}
    }