/* Keep writing space consistent in ordinary and continuous reading views. */
.comment-composer #commentInput,.reader-inline-form textarea{
  box-sizing:border-box;width:100%;min-width:0;min-height:128px;max-height:280px;
  padding:12px;resize:none;font-family:inherit;font-size:16px;line-height:1.6;
  overflow-y:auto;scroll-margin-block:12px;
}
.comment-composer #commentVisibilityNote,.reader-inline-form>.reader-inline-note{
  margin:0 0 8px;font-size:12px;line-height:1.5;
}
.comment-composer #replyingTo{
  display:flex;align-items:center;gap:8px;min-width:0;margin:0 0 8px;padding:0;
  font-size:12px;line-height:1.5;
}
#replyingTo .reply-target-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.comment-composer #replyingTo button{
  flex:none;min-height:36px;padding:6px 10px;border:0;border-radius:8px;
  background:#edf1f7;color:#425572;font:inherit;cursor:pointer;
}
.reader-inline-form{gap:8px}
.reader-inline-form>.reader-inline-note{margin:0}
.reader-inline-form .reader-reply-cancel{
  min-width:0;max-width:100%;min-height:36px;padding:6px 10px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;
}
body:not(.card-reading) #detailView .comments-section{
  padding-bottom:calc(var(--comment-composer-height,220px) + 28px);
}
@media(max-width:900px){
  .comment-composer .composer-row{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
  .comment-composer #commentSubmit{justify-self:end;min-width:72px;min-height:44px;padding:10px 18px}
  body.card-reading .comment-composer{padding:12px 16px 16px}
  body.comment-keyboard-open:not(.card-reading) .comment-composer{
    bottom:var(--comment-keyboard-offset,0px);padding-bottom:10px;
  }
  body.card-reading.comment-keyboard-open #detailView{
    top:var(--comment-viewport-top,0px);height:var(--comment-viewport-height,100dvh);bottom:auto;
  }
  body.card-reading.comment-keyboard-open #subHeader{top:var(--comment-viewport-top,0px)}
  body.card-reading.comment-keyboard-open .reader-toolbar{display:none}
}


/* Reading first: reveal writing controls only after an explicit action. */
.comment-composer.composer-collapsed>:not(.composer-trigger){display:none!important}
.comment-composer:not(.composer-collapsed)>.composer-trigger{display:none}
.comment-composer.composer-collapsed{padding:8px 14px max(8px,env(safe-area-inset-bottom));background:#fff;box-shadow:0 -3px 16px #1b31500a}
.comment-composer .composer-trigger{display:flex;align-items:center;gap:10px;width:100%;height:44px;padding:0 13px;text-align:left;background:#f3f5f8;color:#556279;border:1px solid #e4e8ef;border-radius:22px;font-size:14px;font-weight:500}
.composer-trigger>span:first-child{font-size:20px;color:#77849a}
.composer-trigger-label{flex:1}
.composer-trigger-hint{font-size:11px;font-weight:400;color:#788498}
.composer-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 10px;color:#27344b;font-size:14px}
.comment-composer .composer-heading button{background:transparent;color:#68758a;min-height:36px;padding:6px 8px;font-size:12px;font-weight:500}
.comment-composer:not(.composer-collapsed){background:#fff;max-height:min(65dvh,480px);overflow-y:auto;overscroll-behavior:contain;border-radius:16px 16px 0 0;box-shadow:0 -5px 24px #1b315012}
body.card-reading .comment-composer.composer-collapsed{padding:10px 16px;background:#fff}
body.card-reading .comment-composer:not(.composer-collapsed){max-height:none;overflow:visible}
.comment-composer button:focus-visible{outline:2px solid #4269ae;outline-offset:2px}
@media(max-width:900px){.comment-composer:not(.composer-collapsed){max-height:min(65dvh,480px)}body.comment-keyboard-open .comment-composer:not(.composer-collapsed){max-height:calc(var(--comment-viewport-height,100dvh) - 70px)}}