/* Ruang Diskusi Verbindtech — pratinjau desain Tema B "Baja & Safety"
   Warna mengikuti theme-b.css. Berkas ini hanya untuk mockup lokal. */

@font-face{font-family:'Barlow';src:url('../assets/fonts/Barlow-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('../assets/fonts/Barlow-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('../assets/fonts/Barlow-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow';src:url('../assets/fonts/Barlow-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('../assets/fonts/BarlowCondensed-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('../assets/fonts/BarlowCondensed-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('../assets/fonts/BarlowCondensed-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('../assets/fonts/BarlowCondensed-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Barlow Condensed';src:url('../assets/fonts/BarlowCondensed-ExtraBold.ttf') format('truetype');font-weight:800;font-style:normal;font-display:swap;}

:root{
  --tb-steel:#1c1f24;
  --tb-steel2:#2a2f36;
  --tb-steel3:#3b424b;
  --tb-org:#ff6a13;
  --tb-org2:#e05300;
  --tb-con:#eeeeec;
  --tb-ink:#16181b;
  --tb-mut:#5a626c;
  --tb-line:#d9dbde;
  --tb-h:'Barlow Condensed','Arial Narrow',sans-serif;
  --tb-b:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ok:#1f9e4f;
  --ai:#2a2f36;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{height:100%}
body{
  font-family:var(--tb-b);
  color:var(--tb-ink);
  background:var(--tb-con);
  min-height:100%;
}
img{max-width:100%;height:auto;display:block}
button,input,textarea{font:inherit}
button{cursor:pointer}
a{color:var(--tb-org2)}

/* ---------- preview banner ---------- */
.preview-banner{
  background:var(--tb-org);
  color:#fff;
  font:700 13px/1.3 var(--tb-h);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  padding:7px 12px;
  position:relative;
  z-index:20;
}
.preview-banner b{font-weight:800}

.hazard{
  height:8px;
  background:repeating-linear-gradient(-45deg,var(--tb-org) 0 14px,var(--tb-steel) 14px 28px);
}

.contoh-tag{
  display:inline-block;
  font:700 11px/1 var(--tb-h);
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--tb-org);
  color:#fff;
  padding:3px 6px;
  vertical-align:middle;
}
.contoh-tag--ghost{
  background:transparent;
  color:var(--tb-org);
  border:1px solid var(--tb-org);
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:0;
  text-decoration:none!important;
  font:700 16px/1 var(--tb-h);
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:12px 18px;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  color:#fff;
  background:var(--tb-org);
}
.btn:hover{background:var(--tb-org2);color:#fff}
.btn-steel{background:var(--tb-steel)}
.btn-steel:hover{background:#000}
.btn-ghost{
  background:transparent;
  color:var(--tb-steel);
  clip-path:none;
  border:1.5px solid var(--tb-line);
  padding:10px 14px;
}
.btn-ghost:hover{border-color:var(--tb-org);color:var(--tb-org2);background:transparent}
.btn-sm{padding:8px 12px;font-size:14px}
.btn-block{width:100%;clip-path:none}

/* ---------- app header ---------- */
.app-top{
  background:var(--tb-steel);
  color:#fff;
  border-bottom:3px solid var(--tb-org);
}
.app-top-in{
  display:flex;
  align-items:center;
  gap:14px;
  min-height:62px;
  max-width:1200px;
  margin:0 auto;
  padding:0 20px;
}
.brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:#fff;
  min-width:0;
}
.brand-logo{
  background:#fff;
  height:44px;
  padding:5px 8px;
  flex:none;
}
.brand-logo img{height:34px;width:auto}
.brand-text{display:flex;flex-direction:column;line-height:1;gap:3px}
.brand-kicker{
  font:700 11px var(--tb-h);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tb-org);
}
.brand-name{
  font:800 22px/1 var(--tb-h);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#fff;
}
.app-top-nav{margin-left:auto;display:flex;align-items:center;gap:14px}
.who{
  display:flex;
  align-items:center;
  gap:8px;
  color:#d9dde2;
  font-size:13.5px;
}
.who small{display:block;color:#8b939c;font-size:11px}
.avatar{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  font:800 14px var(--tb-h);
  letter-spacing:.04em;
  color:#fff;
  background:var(--tb-steel3);
  flex:none;
  border:2px solid #ffffff22;
}
.avatar-ricky{background:#3b424b;border-color:var(--tb-org)}
.avatar-aya{background:#5a3d2b}
.avatar-maria{background:#2b4a5a}
.avatar-grok{background:var(--tb-org);color:#fff}
.avatar-lg{width:40px;height:40px;font-size:16px}

/* ---------- page head ---------- */
.pagehead{
  background:linear-gradient(90deg,rgba(28,31,36,.97),rgba(28,31,36,.86)),
    repeating-linear-gradient(0deg,#ffffff0d 0 1px,transparent 1px 40px),
    repeating-linear-gradient(90deg,#ffffff0d 0 1px,transparent 1px 40px);
  background-color:var(--tb-steel2);
  color:#fff;
  padding:22px 0 18px;
  border-bottom:4px solid var(--tb-org);
}
.pagehead-in{max-width:1200px;margin:0 auto;padding:0 20px;display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap}
.pagehead .kicker{
  font:700 13px var(--tb-h);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tb-org);
  margin:0 0 4px;
}
.pagehead h1{
  font:800 36px/1.05 var(--tb-h);
  text-transform:uppercase;
  margin:0;
  letter-spacing:.01em;
  color:#fff;
}
.pagehead p{margin:6px 0 0;color:#cfd4da;font-size:14.5px}
.pagehead-actions{margin-left:auto}

.wrap{max-width:1200px;margin:0 auto;padding:22px 20px 40px}

/* ---------- login ---------- */
body.page-login{
  background:var(--tb-steel);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
body.page-login .login-main{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 16px 40px;
  background:
    linear-gradient(180deg,rgba(20,22,26,.2),rgba(20,22,26,.55)),
    repeating-linear-gradient(0deg,#ffffff0a 0 1px,transparent 1px 40px),
    repeating-linear-gradient(90deg,#ffffff0a 0 1px,transparent 1px 40px);
  background-color:var(--tb-steel2);
}
.login-col{width:100%;max-width:440px}
.login-brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin-bottom:18px;
  color:#fff;
}
.login-brand .brand-logo{height:56px;padding:6px 10px;margin-bottom:14px}
.login-brand .brand-logo img{height:44px}
.login-brand .kicker{color:var(--tb-org);font:700 14px var(--tb-h);letter-spacing:.16em;text-transform:uppercase;margin:0 0 4px}
.login-brand h1{font:800 42px/1 var(--tb-h);text-transform:uppercase;margin:0;letter-spacing:.02em}
.login-brand p{color:#cfd4da;margin:8px 0 0;font-size:14.5px}

.card{
  background:#fff;
  border:1px solid var(--tb-line);
  border-bottom:4px solid var(--tb-org);
}
.login-card{padding:0}
.tabs{display:flex;border-bottom:2px solid var(--tb-line)}
.tab{
  flex:1;
  border:0;
  background:transparent;
  font:700 16px var(--tb-h);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:14px 10px;
  color:var(--tb-mut);
  border-bottom:3px solid transparent;
  margin-bottom:-2px;
}
.tab.is-on{color:var(--tb-ink);border-bottom-color:var(--tb-org);background:var(--tb-steel);color:#fff}
.panel{padding:22px 22px 24px;display:none}
.panel.is-on{display:block}
label{display:block;font:700 13px var(--tb-h);letter-spacing:.08em;text-transform:uppercase;color:var(--tb-mut);margin:0 0 6px}
.field{margin:0 0 14px}
input[type=text],input[type=email],input[type=password],textarea{
  width:100%;
  border:1px solid var(--tb-line);
  background:#fff;
  color:var(--tb-ink);
  padding:12px 12px;
  font:16px var(--tb-b);
  outline:0;
  border-radius:0;
}
input:focus,textarea:focus{border-color:var(--tb-org);box-shadow:0 0 0 3px #ff6a1326}
.hint{font-size:13px;color:var(--tb-mut);margin:12px 0 0;line-height:1.5}
.login-note{
  margin-top:16px;
  color:#cfd4da;
  font-size:13px;
  text-align:center;
  line-height:1.5;
}
.login-foot{
  color:#8b939c;
  font-size:12px;
  text-align:center;
  padding:16px;
}

/* ---------- rooms ---------- */
.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.toolbar p{margin:0;color:var(--tb-mut);font-size:14.5px;flex:1}
.room-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.room-card{
  background:#fff;
  border:1px solid var(--tb-line);
  border-bottom:4px solid var(--tb-org);
  display:flex;
  flex-direction:column;
  min-height:220px;
  text-decoration:none;
  color:inherit;
}
.room-card:hover{box-shadow:0 8px 20px #0000001f}
.room-card-h{padding:14px 16px 8px;display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.room-card h2{font:700 22px/1.15 var(--tb-h);margin:0;text-transform:uppercase;color:var(--tb-ink)}
.room-card p{margin:0;padding:0 16px;color:var(--tb-mut);font-size:14px;line-height:1.5;flex:1}
.room-meta{display:flex;flex-wrap:wrap;gap:8px 14px;padding:12px 16px 14px;font-size:13px;color:var(--tb-mut)}
.room-meta b{color:var(--tb-ink);font-family:var(--tb-h);font-weight:700;letter-spacing:.04em}
.room-card-f{padding:0 16px 16px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.invite-mini{
  flex:1;
  min-width:0;
  font-size:11.5px;
  color:var(--tb-mut);
  background:#f7f7f6;
  border:1px solid var(--tb-line);
  padding:6px 8px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.lock-flag{
  font:700 12px var(--tb-h);
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--tb-steel);
  color:var(--tb-org);
  padding:3px 7px;
  flex:none;
}
.room-card--new{
  border:2px dashed var(--tb-steel3);
  background:#f7f7f6;
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:220px;
  cursor:pointer;
  color:var(--tb-steel);
}
.room-card--new:hover{border-color:var(--tb-org);color:var(--tb-org2);background:#fff}
.room-card--new strong{
  font:800 22px var(--tb-h);
  letter-spacing:.06em;
  text-transform:uppercase;
  display:block;
  margin-top:8px;
}

/* modal */
.modal-back{
  display:none;
  position:fixed;inset:0;
  background:#00000073;
  z-index:50;
  align-items:center;
  justify-content:center;
  padding:16px;
}
.modal-back.is-on{display:flex}
.modal{
  background:#fff;
  width:100%;
  max-width:480px;
  border-bottom:4px solid var(--tb-org);
  box-shadow:0 16px 40px #00000040;
}
.modal-h{
  background:var(--tb-steel);
  color:#fff;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.modal-h h2{margin:0;font:800 22px var(--tb-h);text-transform:uppercase;letter-spacing:.04em}
.modal-x{background:none;border:0;color:#fff;font-size:22px;line-height:1;padding:4px}
.modal-b{padding:18px 18px 20px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--tb-ink);margin:4px 0 16px}
.check input{margin-top:3px}
.invite-box{
  display:none;
  background:#fff4ec;
  border-left:4px solid var(--tb-org);
  padding:12px;
  margin-top:8px;
}
.invite-box.is-on{display:block}
.invite-box code{
  display:block;
  background:#fff;
  border:1px solid var(--tb-line);
  padding:8px;
  font-size:12.5px;
  word-break:break-all;
  margin:8px 0;
}

/* ---------- chat ---------- */
body.page-chat{
  height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--tb-con);
}
.chat-shell{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 300px;
  grid-template-rows:auto 1fr auto;
}
.invite-bar{
  grid-column:1 / -1;
  background:#fff;
  border-bottom:1px solid var(--tb-line);
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 16px;
  font-size:13px;
  color:var(--tb-mut);
  min-width:0;
}
.invite-bar strong{color:var(--tb-ink);font:700 13px var(--tb-h);letter-spacing:.06em;text-transform:uppercase}
.invite-bar code{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:#f7f7f6;
  border:1px solid var(--tb-line);
  padding:5px 8px;
  font-size:12px;
}
.chat-col{
  grid-row:2;
  grid-column:1;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#e6e7e8;
}
.msgs{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:16px 18px 8px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.dayline{
  align-self:center;
  font:700 12px var(--tb-h);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--tb-mut);
  background:#d9dbde;
  padding:3px 10px;
}
.msg{display:flex;gap:10px;max-width:100%;width:auto;min-width:0;align-items:flex-start}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.bubble{
  overflow-wrap:break-word;
  background:#fff;
  border:1px solid var(--tb-line);
  padding:8px 12px 10px;
  min-width:0;
}
.msg.me .bubble{background:#fff8f3;border-color:#ffd8bf}
.msg-ai .bubble{
  background:var(--tb-steel);
  color:#eee;
  border-color:var(--tb-org);
  border-left:4px solid var(--tb-org);
}
.msg-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:2px}
.msg-h .name{font:700 15px var(--tb-h);letter-spacing:.04em;text-transform:uppercase;color:var(--tb-ink)}
.msg-ai .name{color:var(--tb-org)}
.msg-h .when{font-size:11.5px;color:var(--tb-mut)}
.msg-ai .when{color:#aab2bb}
.bubble p{margin:0 0 6px;font-size:14.5px;line-height:1.5}
.bubble p:last-child{margin:0}
.bubble ul{margin:6px 0 0;padding:0 0 0 18px;font-size:14px;line-height:1.5}
.bubble .ai-note{margin-top:8px;font-size:12px;color:#b9c0c8;border-top:1px solid #ffffff22;padding-top:6px}
.mention{color:var(--tb-org2);font-weight:600}

.composer{
  grid-column:1;
  grid-row:3;
  background:#fff;
  border-top:1px solid var(--tb-line);
  padding:10px 14px 12px;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  overflow:hidden;
}
.composer-row{display:flex;gap:8px;align-items:flex-end;min-width:0}
.composer-row textarea{min-width:0}
.composer textarea{
  flex:1;
  min-height:44px;
  max-height:120px;
  resize:none;
  padding:10px 12px;
  font-size:14.5px;
}
.composer .hint{margin:0;font-size:12px}
.poll-dot{color:var(--ok);font-weight:700}

/* members */
.members{
  grid-column:2;
  grid-row:2 / 4;
  background:var(--tb-steel2);
  color:#fff;
  border-left:4px solid var(--tb-org);
  display:flex;
  flex-direction:column;
  min-height:0;
  overflow:auto;
}
.members h2{
  margin:0;
  padding:12px 14px;
  font:800 18px var(--tb-h);
  letter-spacing:.08em;
  text-transform:uppercase;
  background:var(--tb-org);
  color:#fff;
}
.members h2 small{display:block;font:600 11px var(--tb-b);letter-spacing:.02em;opacity:.95;text-transform:none}
.member{
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 14px;
  border-bottom:1px solid #ffffff1a;
}
.member .meta{min-width:0}
.member .nm{font:700 15px var(--tb-h);letter-spacing:.04em;text-transform:uppercase}
.member .role{display:block;font-size:12px;color:#b9c0c8}
.dot{width:8px;height:8px;border-radius:50%;background:#5a626c;flex:none;margin-left:auto}
.dot.on{background:#3ddc84}
.members-note{padding:12px 14px;font-size:12.5px;color:#aab2bb;line-height:1.45;margin-top:auto}

.members-toggle{display:none}

/* ---------- footer note ---------- */
.foot-note{color:var(--tb-mut);font-size:12.5px;text-align:center;padding:8px 16px 24px}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .room-grid{grid-template-columns:1fr}
  .pagehead{padding:14px 0 14px}
  .pagehead h1{font-size:28px}
  .pagehead p{font-size:13.5px}
  .chat-shell{grid-template-columns:1fr}
  .members{
    display:none;
    position:fixed;
    top:0;right:0;bottom:0;
    width:min(300px,86vw);
    z-index:40;
    grid-column:auto;
    grid-row:auto;
  }
  .members.is-on{display:flex}
  .members-toggle{display:inline-flex}
  .composer{grid-column:1;padding:8px 10px 8px;gap:4px}
  .composer textarea{min-height:40px;font-size:14px;padding:8px 10px}
  .composer .hint{font-size:11px;line-height:1.35}
  .invite-bar{
    padding:6px 10px;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"label tag" "url copy";
    gap:4px 8px;
    align-items:center;
  }
  .invite-bar strong{grid-area:label}
  .invite-bar .contoh-tag{grid-area:tag;justify-self:end}
  .invite-bar code{grid-area:url;min-width:0}
  .invite-bar .btn{grid-area:copy;clip-path:none;padding:6px 10px;font-size:13px}
  .app-top-in{padding:0 12px;min-height:52px;gap:8px}
  .brand-kicker{display:none}
  .brand-name{font-size:17px;white-space:nowrap}
  .composer .hint{margin:0;font-size:11px;line-height:1.35}
  .composer .btn{clip-path:none;padding:10px 12px;flex:none}
  .hide-sm{display:none}
  .msgs{overflow-x:hidden}
  .who > span:not(.avatar){display:none}
  .login-brand h1{font-size:32px}
  .wrap{padding:16px 12px 32px}
  .msgs{padding:10px 10px 6px;gap:8px}
  .bubble{padding:7px 10px 8px}
  .bubble p{font-size:13.5px}
  .bubble ul{font-size:13px}
  .dayline{font-size:11px}
}
@media(max-width:420px){
  .brand-logo{height:38px;padding:4px 6px}
  .brand-logo img{height:30px}
  .pagehead{padding:14px 0 12px}
  .btn{font-size:15px;padding:11px 14px}
}

/* --- Tambahan aplikasi (bukan pratinjau statis) --- */
.flash {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.45;
}
.flash-ok { background: #e8f5e9; color: #1b5e20; border: 1px solid #a5d6a7; }
.flash-error, .flash-err { background: #fdecea; color: #8b1e1e; border: 1px solid #f5c2c0; }
.form-error {
  background: #fdecea;
  color: #8b1e1e;
  border: 1px solid #f5c2c0;
  padding: 10px 14px;
  border-radius: 6px;
  margin: 0 0 14px;
  font-size: 14px;
}
.role-flag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  background: #ece7df;
  color: #3d3a36;
}
.role-flag.admin { background: #ff6a00; color: #fff; }
.cap-box {
  background: var(--tb-card, #fff);
  border: 1px solid var(--tb-line, #ddd);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 16px 0;
  font-size: 14px;
}
.cap-box meter { width: 100%; height: 10px; margin-top: 6px; }
.invite-list { font-size: 13px; word-break: break-all; }
.invite-list li { margin: 6px 0; }
.ai-error-toast {
  background: #fff4e5;
  color: #6a3a00;
  border: 1px solid #ffcc80;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 8px 0;
  font-size: 13px;
}
.composer .hint .who-role { float: right; }
body.page-login .login-note { max-width: 42em; }
.copy-ok { font-size: 12px; color: #1b5e20; margin-left: 8px; }

/* ---------- v2: navigasi, unggahan, tampungan ide ---------- */
.app-links{
  display:flex;
  gap:4px;
  align-items:center;
  margin-right:8px;
}
.app-link{
  color:#fff;
  text-decoration:none;
  font:700 13px/1 var(--tb-h);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:8px 10px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.app-link:hover{color:#fff;border-bottom-color:var(--tb-org)}
.app-link.is-on{border-bottom-color:var(--tb-org);color:#fff}
.role-flag.sales{
  background:var(--tb-steel);
  color:#fff;
  border:1px solid var(--tb-org);
}
.chat-main{
  grid-column:1;
  grid-row:1 / 3;
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.msg-att{margin:6px 0}
.msg-att img{
  max-width:min(360px,100%);
  max-height:280px;
  height:auto;
  border:1px solid var(--tb-line);
  background:#fff;
}
.msg-ai .msg-att img{border-color:#ffffff33}
.attach-preview{
  display:flex;
  align-items:center;
  gap:10px;
  padding:6px 0;
}
.attach-preview[hidden]{display:none}
.attach-preview img{
  height:56px;
  width:auto;
  max-width:120px;
  border:1px solid var(--tb-line);
}
.attach-btn{flex:none;clip-path:none}
.composer-row .attach-btn{align-self:flex-end}

.team-h{
  margin:18px 0 6px;
  font:800 16px var(--tb-h);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.team-list{list-style:none;margin:0;padding:0}
.team-list li{border-top:1px solid var(--tb-line);padding:8px 0}
.team-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.team-name{flex:1;min-width:160px}
.team-name small{display:block;color:var(--tb-mut);font-weight:400}

.idea-layout{
  display:grid;
  grid-template-columns:minmax(260px,340px) 1fr;
  gap:20px;
  align-items:start;
}
.idea-form-card h2,
.idea-card h2{
  margin:0 0 12px;
  font:800 22px/1.15 var(--tb-h);
  letter-spacing:.04em;
  text-transform:uppercase;
}
.idea-form-card{
  background:#fff;
  border:1px solid var(--tb-line);
  padding:16px 18px 20px;
}
.idea-filters{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:flex-end;
  margin-bottom:14px;
}
.idea-filters label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--tb-mut)}
.idea-filters select,
.idea-form-card select,
.idea-admin select,
.team-row select{
  font:inherit;
  padding:8px 10px;
  border:1px solid var(--tb-line);
  background:#fff;
  min-width:140px;
}
.idea-grid{display:flex;flex-direction:column;gap:14px}
.idea-card{
  background:#fff;
  border:1px solid var(--tb-line);
  border-left:4px solid var(--tb-org);
  padding:14px 16px 16px;
}
.idea-card-h{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.idea-card-h h2{margin:0;flex:1}
.idea-meta{margin:4px 0 10px;color:var(--tb-mut);font-size:13px}
.idea-desc{margin:0 0 10px;font-size:14.5px;line-height:1.5;white-space:pre-wrap}
.idea-link{margin:0 0 10px;font-size:13.5px}
.idea-img img{max-width:min(420px,100%);border:1px solid var(--tb-line)}
.idea-notes{
  background:#f7f7f6;
  border:1px solid var(--tb-line);
  padding:10px 12px;
  margin:10px 0;
  font-size:13.5px;
}
.idea-notes strong{
  font:700 12px var(--tb-h);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tb-steel);
}
.idea-admin{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.status-flag{
  display:inline-block;
  font:700 11px/1 var(--tb-h);
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:4px 8px;
  white-space:nowrap;
}
.status-baru{background:#ece7df;color:#3d3a36}
.status-direview{background:#2a2f36;color:#fff}
.status-disetujui{background:#1f9e4f;color:#fff}
.status-ditolak{background:#8b1e1e;color:#fff}

@media(max-width:900px){
  .idea-layout{grid-template-columns:1fr}
  .app-links{margin-right:0}
  .app-link{padding:8px 6px;font-size:12px}
  .msg-att img{max-width:100%}
  .composer-row{flex-wrap:wrap}
  .attach-btn{order:3}
}
@media(max-width:420px){
  .app-top-nav{gap:4px}
  .who{display:none}
}

/* Perbaikan tampilan sempit + tombol admin ide */
.idea-admin .btn,
.team-row .btn{
  clip-path:none;
  width:auto;
  align-self:flex-start;
}
@media(max-width:900px){
  .app-top-in{
    flex-wrap:wrap;
    row-gap:4px;
  }
  .brand{
    min-width:0;
    flex:1 1 auto;
  }
  .brand-name{
    max-width:58vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .app-top-nav{
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:6px;
  }
  .app-links{
    order:5;
    flex:1 0 100%;
    margin:0 0 4px;
    padding-top:4px;
    border-top:1px solid #ffffff22;
    justify-content:flex-start;
  }
  .page-chat .brand-name{max-width:48vw}
}

/* ---------- v3: forum utas bergaya Slack ---------- */
.workspace{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:252px 1fr;
  background:var(--tb-con);
  overflow:hidden;
}
.workspace.has-thread{
  grid-template-columns:252px 1fr 400px;
}
.workspace.has-members:not(.has-thread){
  grid-template-columns:252px 1fr 280px;
}

.chan-side{
  background:var(--tb-steel);
  color:#fff;
  display:flex;
  flex-direction:column;
  min-height:0;
  border-right:1px solid #000;
  overflow:auto;
}
.chan-side-h{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:14px 14px 10px;
  font:800 16px var(--tb-h);
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#fff;
  border-bottom:1px solid #ffffff1a;
}
.chan-side-h .btn{clip-path:none;padding:6px 10px;font-size:13px}
.chan-list{display:flex;flex-direction:column;padding:8px 8px 12px;gap:2px}
.chan-item{
  display:flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  color:#cfd4da;
  text-decoration:none;
  font:600 15px/1.2 var(--tb-b);
  border-left:3px solid transparent;
  min-width:0;
}
.chan-item:hover{background:#ffffff12;color:#fff}
.chan-item.is-on{
  background:#ffffff14;
  color:#fff;
  border-left-color:var(--tb-org);
}
.chan-item.has-unread .chan-name{font-weight:700;color:#fff}
.chan-hash{color:var(--tb-org);font-weight:800;flex:none}
.chan-name{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.chan-badge{
  flex:none;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:9px;
  background:var(--tb-org);
  color:#fff;
  font:800 11px/18px var(--tb-h);
  text-align:center;
}
.chan-badge[hidden]{display:none}
.chan-ide{
  margin-top:auto;
  display:block;
  padding:14px 16px 18px;
  color:#fff;
  text-decoration:none;
  border-top:3px solid var(--tb-org);
  background:var(--tb-steel2);
  font:800 16px/1.15 var(--tb-h);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.chan-ide:hover{color:#fff;background:#32383f}
.chan-ide-kicker{
  display:block;
  font:700 11px var(--tb-h);
  letter-spacing:.12em;
  color:var(--tb-org);
  margin-bottom:3px;
}

.chan-main{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  background:#e6e7e8;
  overflow:hidden;
}
.chan-head{
  background:#fff;
  border-bottom:1px solid var(--tb-line);
  padding:10px 16px 8px;
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  align-items:flex-end;
  justify-content:space-between;
  flex:none;
  position:relative;
  z-index:2;
}
.chan-head h1{
  margin:0;
  font:800 22px/1 var(--tb-h);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--tb-ink);
}
.chan-head p{margin:3px 0 0;color:var(--tb-mut);font-size:13px}
.chan-invite{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-width:0}
.chan-invite code{
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  background:#f7f7f6;
  border:1px solid var(--tb-line);
  padding:5px 8px;
  font-size:11.5px;
}

.chan-main .msgs{flex:1;min-height:0}
.chan-main .composer{flex:none}

.msg-actions{margin-top:6px}
.btn-reply{
  background:none;
  border:0;
  padding:0;
  color:var(--tb-org2);
  font:700 12px var(--tb-h);
  letter-spacing:.06em;
  text-transform:uppercase;
}
.btn-reply:hover{text-decoration:underline}
.reply-bar{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  padding:4px 6px;
  border:1px solid var(--tb-line);
  background:#f7f7f6;
  color:var(--tb-org2);
  font:700 13px var(--tb-h);
  letter-spacing:.04em;
  text-transform:uppercase;
  width:100%;
  text-align:left;
  cursor:pointer;
}
.reply-bar:hover{border-color:var(--tb-org);background:#fff4ec}
.reply-bar[hidden]{display:none}
.reply-avs{display:flex;gap:2px}
.avatar-xs{
  width:20px;height:20px;font-size:9px;
  border-width:1px;
}
.reply-count{color:var(--tb-org2)}
.also-flag{
  font:700 10px var(--tb-h);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--tb-org2);
  background:#fff4ec;
  border:1px solid #ffd8bf;
  padding:1px 5px;
}
.msg-also{opacity:.98}
.mention{
  color:var(--tb-org2);
  font-weight:600;
  background:#fff4ec;
  padding:0 3px;
}

/* Thread panel */
.thread-panel{
  display:none;
  flex-direction:column;
  min-height:0;
  background:#fff;
  border-left:4px solid var(--tb-org);
}
.workspace.has-thread .thread-panel,
.thread-panel.is-on{display:flex}
.thread-h{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  background:var(--tb-steel);
  color:#fff;
  border-bottom:3px solid var(--tb-org);
}
.thread-h h2{
  margin:0;
  font:800 18px/1 var(--tb-h);
  letter-spacing:.08em;
  text-transform:uppercase;
}
.thread-h p{margin:2px 0 0;font-size:12px;color:#cfd4da}
.thread-h .btn{color:#fff;border-color:#ffffff44}
.thread-scroll{
  flex:1;
  min-height:0;
  overflow:auto;
  display:flex;
  flex-direction:column;
  background:#eee;
}
.thread-parent{
  padding:12px 12px 8px;
  background:#fff;
  border-bottom:2px solid var(--tb-line);
}
.thread-replies{
  padding:10px 12px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.thread-parent .msg,
.thread-replies .msg{max-width:100%}
.composer-thread{border-top:1px solid var(--tb-line);background:#fff}
.also-check{margin:0;padding:0 2px 4px;font-size:13px;color:var(--tb-ink)}

/* Members overlay stays a drawer; default hidden in workspace grid */
.page-chat .members{
  display:none;
  position:fixed;
  top:0;right:0;bottom:0;
  width:min(300px,86vw);
  z-index:40;
  grid-column:auto;
  grid-row:auto;
}
.page-chat .members.is-on{display:flex}

.btn-kanal-mobile{display:none}

/* Channel home list */
.channel-home{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:22px;
}
.channel-home-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  background:#fff;
  border:1px solid var(--tb-line);
  border-left:4px solid var(--tb-steel);
  padding:12px 14px;
  text-decoration:none;
  color:inherit;
}
.channel-home-item:hover{border-left-color:var(--tb-org);box-shadow:0 6px 16px #00000014}
.channel-home-item.has-unread{border-left-color:var(--tb-org)}
.channel-home-item .chan-hash{
  font:800 22px var(--tb-h);
  color:var(--tb-org);
  line-height:1;
  margin-top:2px;
}
.channel-home-main{flex:1;min-width:0}
.channel-home-slug{
  display:block;
  font:800 20px/1.1 var(--tb-h);
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--tb-ink);
}
.channel-home-title{display:block;font-size:14px;color:var(--tb-ink);margin-top:2px}
.channel-home-desc{display:block;font-size:13px;color:var(--tb-mut);margin-top:2px}
.channel-home-meta{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.channel-home-count{font-size:12px;color:var(--tb-mut);text-align:right}

.side-backdrop{
  display:none;
  position:fixed;inset:0;
  background:#00000066;
  z-index:35;
}
.side-backdrop.is-on{display:block}

@media(max-width:900px){
  .workspace,
  .workspace.has-thread,
  .workspace.has-members:not(.has-thread){
    grid-template-columns:1fr;
  }
  .chan-side{
    display:none;
    position:fixed;
    top:0;left:0;bottom:0;
    width:min(300px,88vw);
    z-index:42;
  }
  .chan-side.is-on{display:flex}
  .btn-kanal-mobile{display:inline-flex}
  .hide-on-mobile{display:none!important}
  body.thread-open .chan-main{display:none}
  .thread-panel{
    display:none;
    position:fixed;
    inset:0;
    z-index:46;
    width:100%;
    border-left:0;
  }
  body.thread-open .thread-panel,
  body.thread-open .thread-panel.is-on{display:flex}
  .chan-head h1{font-size:18px}
  .chan-invite code{max-width:42vw}
}
@media(min-width:901px){
  .hide-on-mobile{display:grid}
}