#shell { --col-chat:820px; --mark:36px; --tuck:44px; --fade:0px; }

#scroll { flex:1; min-height:0; overflow:auto; padding:var(--s5) 0 var(--tuck);
          scrollbar-gutter:stable both-edges;
          -webkit-mask-image:linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent);
          mask-image:linear-gradient(to bottom, #000 calc(100% - var(--fade)), transparent); }
.col { position:relative; min-height:100%; }
.thread { position:relative; width:min(var(--col-chat),100%); margin:0 auto; }


.msg { position:relative; margin:0 0 var(--s4); padding:var(--s4) var(--s5);
       border:var(--bd) solid var(--line); background:var(--panel); }

.msg:last-child { margin-bottom:0; }
.msg.user { width:max-content; max-width:80%; margin-left:auto; }

.msg.user:has(.editbox) { width:100%; max-width:100%; }

.msg.assistant { background:rgba(var(--bg0-rgb),.50); border-color:var(--line2);
                 border-left-color:var(--acc); padding-left:var(--s3);
                 display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--s3); }
.msg.assistant .body { font-family:var(--mono); font-size:14px; line-height:21px; }
.msg.assistant .body code { font-size:1em; }
.msg .body { overflow-wrap:anywhere; }   

.msg .logo { width:var(--mark); height:var(--mark); flex:none; color:var(--acc); }

.msg .stack { min-width:0; display:flex; flex-direction:column; }


.msg .acts { position:absolute; top:var(--s2); right:var(--s2); display:flex;
             gap:var(--s1); opacity:0; transition:opacity .12s; }

.msg.user .acts { top:var(--s3); right:100%; margin-right:var(--s2); }
.msg:hover .acts, .msg:focus-within .acts { opacity:1; }

@media (hover:none) {
  .msg .acts { position:static; opacity:1; justify-content:flex-end; }
  .msg.user { display:flex; flex-direction:column; }
  .msg.user .acts { order:1; margin:var(--s2) 0 0; }
  .msg.assistant .acts { grid-column:2; grid-row:2; }
}

.msg .acts .btn { padding:4px; line-height:0; }

@media (pointer:coarse) { .msg .acts .btn { min-width:44px; display:flex; align-items:center;
                                            justify-content:center; } }
.msg .acts .ai { width:14px; height:14px; display:block; }
.editbox { display:flex; flex-direction:column; gap:var(--s2); }
.editbox textarea { font:var(--fs-body)/1.5 var(--ui); min-height:90px; }
.editbox .row { display:flex; gap:var(--s2); align-items:center; }
.editbox .hint { font:var(--fs-micro) var(--mono); color:var(--faint); }


.notice { border:var(--bd) solid var(--line2); border-left-color:var(--red);
          background:var(--bg1); padding:var(--s3) var(--s4); margin:0 0 var(--s6);
          font-size:var(--fs-ui); display:flex; align-items:center; gap:var(--s3); }
.notice .spacer { flex:1; }

.notice-x { background:none; border:0; color:var(--muted); cursor:pointer;
            font:600 var(--fs-ui)/1 var(--ui); padding:var(--s1) var(--s2); margin:0 -6px 0 0;
            flex:none; }
.notice-x:hover { color:var(--text); }

.placeholder { text-align:center; color:var(--faint); padding:var(--s6) 0; }
.placeholder .big { font:500 var(--fs-lg)/1.3 var(--mono); color:var(--muted);
                    margin-bottom:var(--s2); }
@media (max-width:720px) {
  .msg { padding:var(--s4) var(--s3); }
  
  #scroll { padding-inline:var(--s3); }
  
  .msg.user { max-width:88%; }
  .msg.user .acts { top:var(--s2); right:var(--s2); margin-right:0; }
}