
/* BTB Social: clean, native-feeling comments without permanently visible report buttons. */
#creator-comments-layer .creator-comments-sheet {
  height:min(81dvh,760px);background:#171b20;border:1px solid #343c46;border-bottom:0;
  border-radius:24px 24px 0 0;color:#f7f8fb;
}
#creator-comments-layer .creator-comments-sheet-heading {
  position:relative;justify-content:center;min-height:69px;padding-top:23px;
  border-bottom:1px solid #2c333c;background:#171b20;
}
#creator-comments-layer .creator-comments-sheet-heading::before {
  position:absolute;content:"";top:10px;left:50%;transform:translateX(-50%);
  height:4px;width:42px;border-radius:9px;background:#808890;
}
#creator-comments-layer .creator-comments-sheet-heading strong{font-size:16px;font-weight:750}
#creator-comments-layer .creator-comments-sheet-heading button {
  position:absolute;right:10px;top:20px;min-width:34px;min-height:34px;
  background:transparent;color:#a8b4c1;font-size:20px;
}
#creator-comments-layer .creator-comments-slot{padding:0 12px max(9px,env(safe-area-inset-bottom,0px))}
#creator-comments-layer .comments{
  display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden;
  background:transparent;padding:0;margin:0;
}
.btb-comment-list {
  min-height:0;flex:1;overflow-x:hidden;overflow-y:auto;padding:8px 1px 18px;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;touch-action:pan-y;
  scrollbar-width:thin;scrollbar-color:#4a525c transparent;
}
.btb-comment-row {
  display:flex;align-items:flex-start;gap:10px;position:relative;
  padding:14px 3px 9px;border:0;border-radius:9px;min-width:0;
  touch-action:pan-y;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
}
.btb-comment-row:focus-visible{outline:2px solid #91bcff;outline-offset:-2px}
.btb-comment-avatar{flex:0 0 35px}
.btb-comment-avatar .avatar{height:35px!important;width:35px!important;min-width:35px!important;border-radius:50%!important;font-size:13px}
.btb-comment-message{flex:1;min-width:0;overflow-wrap:anywhere}
.btb-comment-meta{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.btb-comment-meta button{color:#eef2f7;background:transparent;border:0;padding:0;font-size:13px;font-weight:800;min-height:25px}
.btb-comment-meta small{font-size:11px;color:#9da5ae}
.btb-comment-message p{margin:1px 0 0;color:#f2f3f5;font-size:14px;line-height:1.48;white-space:pre-wrap}
.btb-comment-hint{display:none}
.btb-comment-heart {
  flex:0 0 36px;display:flex;align-items:center;flex-direction:column;justify-content:center;
  min-width:36px;min-height:43px;margin:0;padding:0;border:0;border-radius:9px;
  background:transparent;color:#c8ced6;gap:0;
}
.btb-comment-heart span{font-size:25px;line-height:26px;font-family:Arial,sans-serif}
.btb-comment-heart small{font-size:11px;color:#99a5b1;min-height:12px}
.btb-comment-heart.active span{color:#ff5d74}
.btb-comment-compose {
  position:relative!important;display:flex!important;align-items:center;
  background:#171b20!important;border-top:1px solid #303842!important;
  margin:0!important;padding:10px 1px 6px!important;gap:8px!important;flex-wrap:nowrap!important;
}
.btb-comment-compose input{
  flex:1;min-width:0;min-height:46px;background:#252b32!important;
  border:1px solid #414853!important;border-radius:30px!important;padding:11px 15px!important;
  color:#fff;font-size:16px!important;
}
.btb-comment-compose button{
  min-height:43px!important;min-width:55px!important;padding:9px 12px!important;
  border:0!important;background:#316fe0!important;border-radius:25px!important;color:#fff!important;
}
.btb-no-comments{padding:22px 10px;text-align:center}
#btb-comment-actions[hidden],#btb-comment-share-preview[hidden]{display:none!important}
#btb-comment-actions,#btb-comment-share-preview{
  position:fixed;inset:0;z-index:2600;display:flex;align-items:flex-end;justify-content:center;
  color:#f3f6fa;
}
.btb-comment-action-backdrop,.btb-comment-share-backdrop{
  position:absolute;inset:0;width:100%;height:100%;border:0;
  background:rgba(1,4,10,.79);
}
.btb-comment-action-sheet,.btb-comment-share-dialog{
  position:relative;z-index:1;width:min(100%,540px);
  border-radius:23px 23px 0 0;border:1px solid #343e4b;border-bottom:0;
  background:#1b2028;padding:13px 16px max(20px,env(safe-area-inset-bottom,0px));
  max-height:82dvh;overflow-y:auto;box-shadow:0 -12px 45px #0009;
}
.btb-comment-action-handle{width:38px;height:4px;margin:0 auto 18px;border-radius:7px;background:#8b929b}
#btb-comment-action-preview{padding:0 2px 13px;border-bottom:1px solid #343c46}
#btb-comment-action-preview strong{font-size:13px}
#btb-comment-action-preview p{font-size:14px;line-height:1.45;margin:7px 0 0;white-space:pre-wrap}
#btb-comment-action-buttons{padding:8px 0;display:grid}
#btb-comment-action-buttons button{
  display:flex;align-items:center;gap:13px;text-align:left;
  width:100%;min-height:43px;padding:9px;border:0;border-radius:10px;
  background:transparent;color:#e8ebf1;font-size:14px;font-weight:640;
}
#btb-comment-action-buttons button span{width:22px;font-size:20px;text-align:center}
#btb-comment-action-buttons .is-danger{color:#ff7e87}
.btb-comment-action-cancel{width:100%;min-height:43px;background:#303741;color:#fff;border:0;border-radius:12px}
.btb-comment-share-dialog{display:grid;gap:12px}
.btb-comment-share-dialog header{display:flex;align-items:center;justify-content:space-between;font-size:16px}
.btb-comment-share-dialog header button{border:0;background:transparent;color:#dce3eb;min-width:36px;min-height:36px;font-size:20px}
.btb-comment-share-card{
  background:#252d37;border:1px solid #3d4654;border-radius:15px;
  overflow:hidden;max-height:47dvh;overflow-y:auto;
}
.btb-comment-share-card>video,.btb-comment-share-card>img{display:block;max-height:29dvh;width:100%;object-fit:contain;background:#070b12}
.btb-comment-share-text{padding:18px 12px}
.btb-comment-share-quote{display:flex;gap:10px;background:#f5f7fa;color:#1d2330;padding:11px;border-radius:12px;margin:9px}
.btb-comment-share-quote .avatar{flex:0 0 31px;width:31px;height:31px}
.btb-comment-share-quote strong{font-size:12px}
.btb-comment-share-quote p{margin:3px 0 0;line-height:1.4;white-space:pre-wrap}
.btb-comment-share-card>small{display:block;padding:4px 11px 11px;color:#bbc4d0}
.btb-comment-share-dialog label{font-size:13px;font-weight:700}
#btb-comment-share-caption{min-height:55px;max-height:90px;border-radius:12px;border:1px solid #576474;padding:11px;color:#fff;background:#151d27;font-size:16px;resize:vertical}
.btb-comment-share-submit{min-height:46px;border:0;border-radius:12px;background:#337bed;color:#fff;font-weight:750}
.btb-story-quoted-post{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;overflow:hidden}
.btb-story-quoted-post>img,.btb-story-quoted-post>video{display:block;width:100%;height:100%;max-height:100%;object-fit:contain;background:#06080b}
.btb-story-quoted-text{padding:20px;text-align:center;max-width:100%;overflow-wrap:anywhere}
.btb-story-quote-overlay{
  position:absolute;bottom:67px;left:6%;width:88%;max-height:36%;overflow-y:auto;
  border-radius:16px;background:#f6f7fa;color:#171c24;padding:12px 14px;
  text-align:left;box-shadow:0 7px 23px #0007;
}
.btb-story-quote-overlay strong{font-size:12px;color:#414c5c}
.btb-story-quote-overlay p{margin:5px 0 0;font-size:14px;line-height:1.4;white-space:pre-wrap}
.btb-story-original-link{
  position:absolute;bottom:17px;left:8%;right:8%;color:#fff!important;
  border-radius:15px;background:#242c37cc;padding:10px;text-align:center;
  font-size:12px;font-weight:750;text-decoration:none;
}
@media(max-width:780px){
 #creator-comments-layer .creator-comments-sheet{height:min(82dvh,760px)}
 .btb-comment-action-sheet,.btb-comment-share-dialog{width:100%}
}


/* Shared comment is a moment, not a permanent half-screen sticker. */
.btb-story-quote-overlay.btb-story-quote-moment{
 left:50%;bottom:18%;transform:translateX(-50%);
 width:min(80%,340px);max-height:min(23%,156px);
 border-radius:14px;padding:9px 11px;
 box-shadow:0 6px 22px rgba(0,0,0,.35);
 animation:btb-comment-appear .18s ease-out both;
}
.btb-story-quote-moment strong{font-size:11px}
.btb-story-quote-moment p{font-size:13px;line-height:1.35}
.btb-story-quote-moment[hidden]{display:none!important}
@keyframes btb-comment-appear{
 from{opacity:0;transform:translate(-50%,14px)}
 to{opacity:1;transform:translate(-50%,0)}
}
@media(prefers-reduced-motion:reduce){
 .btb-story-quote-overlay.btb-story-quote-moment{animation:none}
}
