footer{position:absolute;inset-inline:0;bottom:0;z-index:5;padding:4px 0 env(safe-area-inset-bottom);pointer-events:none}
footer>*{pointer-events:auto}
footer>:not(.row){margin-inline:10px}
footer::before{content:"";position:absolute;inset:-60px 0 0;z-index:-1;pointer-events:none;background:linear-gradient(to bottom,#0000,#0007 60%,#000a)}

#replybar{display:none;align-items:center;gap:8px;background:var(--panel);border-radius:10px;padding:4px 10px;margin-bottom:6px;font-size:14px}
#replybar.on{display:flex}
#replyic{font-style:normal;color:var(--send)}
#replytxt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#replybar button{border:0;background:none;cursor:pointer;color:var(--muted)}

#upbar{display:none;align-items:center;gap:8px;margin-bottom:6px;border-radius:10px;padding:5px 10px;font-size:15px;color:#fff;background:#777}
#upbar.on{display:flex}
#uptx{flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#upx{flex:none;border:0;background:#0003;color:#fff;border-radius:50%;width:24px;height:24px;cursor:pointer;padding:0}

.row{display:flex;align-items:flex-end;gap:0;background:var(--panel);padding:3px 6px;border-top:1px solid #8882}
.pill{flex:1;min-width:0;display:flex;align-items:flex-end;gap:2px}
#mes{flex:1;min-width:0;min-height:44px;max-height:140px;resize:none;overflow-y:hidden;line-height:1.5;border:0;border-radius:0;background:transparent;padding:8px 6px;font-size:18px;scrollbar-width:thin;scrollbar-color:var(--accent) transparent}
#mes:focus-visible{outline:0}
#mes::placeholder{color:var(--muted)}
.ib{flex:none;width:40px;height:44px;border:0;border-radius:8px;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;padding:0}
.ib:hover:not(:disabled){color:var(--ink)}
.ib:disabled{opacity:.4;cursor:not-allowed}
.ib:focus-visible,#send:focus-visible{outline:3px solid #fff}

#send{position:relative;flex:none;width:46px;height:44px;border:0;border-radius:8px;background:none;color:var(--send);display:grid;place-items:center;cursor:pointer;padding:0;font:700 15px Tahoma,sans-serif;transition:opacity .15s,transform .15s;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#send.cool::before{content:"";position:absolute;inset:auto 8px 5px;height:3px;border-radius:2px;background:linear-gradient(to left,currentColor calc(var(--p)*1%),#8884 0)}
#send.cool svg,#send:not(.cool) #sendt{display:none}
#send .i-mic{display:none}
#send.empty:not(.cool) .i-send{display:none}
#send.empty:not(.cool) .i-mic{display:block}
#send.holding{transform:scale(1.35);background:var(--send);color:#fff;border-radius:50%;z-index:2}

#rec{display:none;flex:1;min-width:0;align-items:center;gap:10px;padding:0 4px;height:44px}
.row.recording .pill{display:none}
.row.recording #rec{display:flex}
.rdot{width:11px;height:11px;border-radius:50%;background:var(--bad);animation:rp 1s infinite;flex:none}
@keyframes rp{50%{opacity:.25}}
#rect{font:16px Tahoma,sans-serif;direction:ltr;font-variant-numeric:tabular-nums}
#recl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:14px;transition:transform .05s}
#recx{flex:none;border:0;background:none;color:var(--bad);cursor:pointer;width:40px;height:44px;display:none;place-items:center;padding:0}
.row.locked #recx{display:grid}
#lock{flex:none;width:30px;height:30px;display:grid;place-items:center;color:var(--muted);border-radius:50%;background:#8882;transition:transform .1s,background .15s}
.row.locked #lock{background:var(--send);color:#fff}