/* Shared Chat-style composition surface; controls stay inside the input. */
html body .chat-form { --chat-fill:#edf3fc; }
html body .chat-shell { position:relative; min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:8px; border:0; border-radius:24px; background:var(--chat-fill); padding:7px 14px; }
html body .chat-shell:focus-within { border:0; box-shadow:none; }
html body .chat-form textarea { display:block; grid-column:1; width:100%; height:auto; min-height:44px; max-height:180px; padding:8px 2px; border:0; border-radius:0; background:transparent; color:#30343b; box-shadow:none; font:400 15px/28px var(--ui-font); resize:none; overflow-x:hidden; overflow-y:auto; white-space:pre-wrap; overflow-wrap:anywhere; transition:height .2s cubic-bezier(.2,.8,.2,1); }
html body .chat-form textarea,
.chat-rich-editor .ql-editor { scrollbar-width:thin; scrollbar-color:#9db8ca transparent; }
html body .chat-form textarea::-webkit-scrollbar,
.chat-rich-editor .ql-editor::-webkit-scrollbar { width:6px; height:6px; }
html body .chat-form textarea::-webkit-scrollbar-track,
.chat-rich-editor .ql-editor::-webkit-scrollbar-track { background:transparent; }
html body .chat-form textarea::-webkit-scrollbar-thumb,
.chat-rich-editor .ql-editor::-webkit-scrollbar-thumb { min-height:28px; border-radius:999px; background:#9db8ca; }
html body .chat-form textarea::-webkit-scrollbar-thumb:hover,
.chat-rich-editor .ql-editor::-webkit-scrollbar-thumb:hover { background:#789caf; }
html body .chat-form textarea::-webkit-scrollbar-button,
.chat-rich-editor .ql-editor::-webkit-scrollbar-button { display:none; width:0; height:0; }
html body .chat-form:focus-within textarea,
html body .chat-form textarea:focus { border:0; outline:0; box-shadow:none; background:transparent; }
html body .chat-form textarea.chat-native-hidden { display:none; }
html body .chat-controls { grid-column:2; align-self:end; display:flex; align-items:center; justify-content:flex-end; gap:8px; margin:0; min-height:36px; }
html body .chat-controls > [hidden] { display:none; }
.chat-tools { display:flex; align-items:center; gap:4px; margin-right:0; margin-left:auto; }
html body .chat-format-toggle { display:grid; place-items:center; width:32px; height:32px; border:0; border-radius:50%; background:transparent; color:#5f6368; font-size:17px; text-decoration:underline; cursor:pointer; }
html body .chat-format-toggle[aria-expanded="true"], html body .chat-format-toggle:hover { background:#c2e7fc; color:#174661; }
html body .chat-format-toggle[aria-busy="true"] { background:#d9edf8; color:#547486; cursor:wait; }
html body .chat-counter { font-size:11px; font-weight:400; color:#6b7280; white-space:nowrap; }
.chat-counter.over-limit { color:#b42318; }
html body .chat-counter strong { font-weight:400; }
html body .chat-controls :is(.memo-submit,.submit,.memo-edit-save,.save) { min-width:64px; min-height:34px; padding:7px 14px; font-size:12px; }
.chat-toolbar { grid-column:1 / -1; display:flex; align-items:center; flex-wrap:nowrap; gap:3px; width:100%; max-width:100%; max-height:0; padding:0; margin:0; border-bottom:1px solid transparent; overflow:hidden; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(5px); transition:max-height .24s cubic-bezier(.2,.8,.2,1),padding .24s cubic-bezier(.2,.8,.2,1),margin .24s cubic-bezier(.2,.8,.2,1),border-color .2s,opacity .16s,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s; }
.chat-toolbar.is-open { max-height:38px; padding:0 0 7px; margin:0 0 3px; border-color:#dce5ef; overflow-x:auto; overflow-y:hidden; opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0); transition:max-height .24s cubic-bezier(.2,.8,.2,1),padding .24s cubic-bezier(.2,.8,.2,1),margin .24s cubic-bezier(.2,.8,.2,1),border-color .2s,opacity .18s .04s,transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s; }
html body .chat-toolbar button { width:28px; height:28px; padding:0; border:0; border-radius:6px; color:#4c535a; background:transparent; cursor:pointer; font-size:14px; }
.chat-toolbar button[data-format="bold"] { font-weight:700; }
.chat-toolbar button[data-format="italic"] { font-style:italic; }
.chat-toolbar button[data-format="underline"] { text-decoration:underline; }
.chat-toolbar button[data-format="strike"] { text-decoration:line-through; }
html body .chat-toolbar button[aria-pressed="true"] { background:#c2e7fc; color:#174661; }
.chat-toolbar select { max-width:70px; border:0; border-radius:6px; background:transparent; color:#4c535a; font-size:12px; padding:5px 0; }
.chat-toolbar button:focus-visible,.chat-format-toggle:focus-visible { outline:2px solid #6caccd; outline-offset:2px; }
.chat-editor-status { margin:4px 10px; color:#b42318; font-size:12px; line-height:1.5; }
.chat-editor-status:empty { display:none; }
.chat-collapsed-preview { display:none; }
.chat-rich-editor { position:relative; grid-column:1; min-width:0; }
html body :is(.memo-edit-form,.edit-form) .chat-rich-editor,
html body :is(.memo-edit-form,.edit-form) .chat-rich-editor.ql-container,
html body :is(.memo-edit-form,.edit-form) .chat-rich-editor .ql-editor { border:0 !important; outline:0; box-shadow:none !important; }
.chat-form.chat-multiline :is(textarea,.chat-rich-editor) { grid-column:1 / -1; }
.chat-form.chat-multiline .chat-controls { grid-column:1 / -1; }
.chat-rich-editor .ql-editor { box-sizing:border-box; outline:0; height:auto; min-height:44px; max-height:180px; overflow-x:hidden; overflow-y:auto; padding:8px 2px; white-space:pre-wrap; overflow-wrap:anywhere; font:400 15px/28px var(--ui-font); color:#30343b; transition:height .2s cubic-bezier(.2,.8,.2,1); }
.chat-rich-editor .ql-editor.ql-blank::before { content:attr(data-placeholder); position:absolute; pointer-events:none; color:#94a3b8; }
.chat-rich-editor .ql-editor :is(p,ol,ul,blockquote) { margin:0; }
.chat-rich-editor .ql-editor ol { padding-left:1.5em; }
.chat-rich-editor .ql-editor li[data-list="bullet"] { list-style-type:disc; }
.chat-rich-editor .ql-editor li[data-list="ordered"] { list-style-type:decimal; }
.chat-rich-editor .ql-ui { display:none; }
.chat-rich-editor .ql-clipboard { position:absolute; left:-10000px; top:50%; height:1px; overflow:hidden; }
.memo-rich-text { white-space:pre-wrap; overflow-wrap:anywhere; font-size:15px; line-height:1.75; color:#30343b; }
.memo-rich-text :is(ul,ol) { padding-left:1.5em; margin:0; }
:is(.memo-rich-text,.ql-editor) blockquote { border-left:3px solid #aec9dc; padding-left:10px; margin:0; color:#5f6368; }
:is(.memo-rich-text,.ql-editor) code { font-family:ui-monospace,monospace; background:#e2e8f0; padding:1px 4px; border-radius:4px; }
.memo-rich-text pre { white-space:pre-wrap; background:#e2e8f0; padding:8px; border-radius:8px; }
.memo-rich-text a { color:#2457a7; text-decoration:underline; }
.chat-form.is-replying .chat-shell { animation:chat-reply-open .28s cubic-bezier(.2,.8,.2,1); }
.chat-form.is-replying .memo-reply-context { animation:chat-reply-label .24s .06s cubic-bezier(.2,.8,.2,1) both; }
@keyframes chat-reply-open { 0% { transform:scale(.985); } 60% { transform:scale(1.006); } 100% { transform:scale(1); } }
@keyframes chat-reply-label { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:720px) {
    body :is(header,.memo-list,.sidebar,.toc) { transition:opacity .18s; }
    body:has(:is(.memo-composer,.composer).chat-form:focus-within) :is(header,.memo-list,.sidebar,.toc),
    body:has(:is(.memo-composer,.composer).chat-form.emoji-open) :is(header,.memo-list,.sidebar,.toc),
    body:has(:is(.memo-composer,.composer).chat-form .chat-format-toggle[aria-expanded="true"]) :is(header,.memo-list,.sidebar,.toc) { opacity:.72; }
    html body :is(.memo-composer,.composer).chat-form:focus-within,
    html body :is(.memo-composer,.composer).chat-form.emoji-open,
    html body :is(.memo-composer,.composer).chat-form:has(.chat-format-toggle[aria-expanded="true"]) { position:fixed !important; z-index:76 !important; right:0; bottom:env(keyboard-inset-height,0px); left:0; width:auto; max-height:min(76dvh,620px); margin:0 !important; overflow-y:auto; overscroll-behavior:contain; border-radius:20px 20px 0 0; background:#fff; box-shadow:0 -14px 42px rgba(15,23,42,.18); }
    .chat-controls, .chat-toolbar { position:relative; z-index:4; }
    html body :is(.memo-composer,.composer).chat-form { padding:9px 13px max(9px,env(safe-area-inset-bottom)); }
    html body :is(.memo-composer,.composer).chat-form::before { display:block; }
    html body :is(.memo-composer,.composer).chat-form .chat-shell { border-radius:999px; background:#f4f5f6; padding:0; transition:border-radius .18s,background .18s,padding .18s; }
    html body :is(.memo-composer,.composer).chat-form textarea,
    html body :is(.memo-composer,.composer).chat-form .chat-rich-editor .ql-editor { min-height:38px; max-height:160px; padding:6px 14px 8px 34px; overflow-x:hidden; overflow-y:hidden; font-size:16px; line-height:24px; white-space:pre-wrap; overflow-wrap:anywhere; }
    html body :is(.memo-composer,.composer).chat-form.chat-has-preview:not(.is-replying):not(:focus-within):not(.emoji-open):not(:has(.chat-format-toggle[aria-expanded="true"])) :is(textarea,.chat-rich-editor) { opacity:0; }
    html body :is(.memo-composer,.composer).chat-form.chat-has-preview:not(.is-replying):not(:focus-within):not(.emoji-open):not(:has(.chat-format-toggle[aria-expanded="true"])) .chat-collapsed-preview { position:absolute; z-index:1; inset:0; display:block; box-sizing:border-box; height:38px; padding:6px 14px 8px 34px; overflow:hidden; color:#30343b; font:400 16px/24px var(--ui-font); white-space:nowrap; text-overflow:ellipsis; pointer-events:none; }
    html body :is(.memo-composer,.composer).chat-form .chat-controls { display:none; margin-top:3px; }
    html body :is(.memo-composer,.composer).chat-form:is(:focus-within,.emoji-open,.is-replying),
    html body :is(.memo-composer,.composer).chat-form:has(.chat-format-toggle[aria-expanded="true"]) { padding-top:11px; }
    html body :is(.memo-composer,.composer).chat-form:is(:focus-within,.emoji-open,.is-replying)::before,
    html body :is(.memo-composer,.composer).chat-form:has(.chat-format-toggle[aria-expanded="true"])::before { opacity:0; }
    html body :is(.memo-composer,.composer).chat-form:is(:focus-within,.emoji-open,.is-replying) .chat-shell,
    html body :is(.memo-composer,.composer).chat-form:has(.chat-format-toggle[aria-expanded="true"]) .chat-shell { border-radius:22px; background:var(--chat-fill); padding:7px 12px; }
    html body :is(.memo-composer,.composer).chat-form:is(:focus-within,.emoji-open,.is-replying) textarea,
    html body :is(.memo-composer,.composer).chat-form:has(.chat-format-toggle[aria-expanded="true"]) textarea,
    html body :is(.memo-composer,.composer).chat-form:is(:focus-within,.emoji-open,.is-replying) .chat-rich-editor .ql-editor,
    html body :is(.memo-composer,.composer).chat-form:has(.chat-format-toggle[aria-expanded="true"]) .chat-rich-editor .ql-editor { min-height:38px; max-height:160px; padding:6px 2px 8px; overflow-x:hidden; overflow-y:auto; line-height:24px; }
    html body :is(.memo-composer,.composer).chat-form:is(:focus-within,.emoji-open,.is-replying) .chat-controls,
    html body :is(.memo-composer,.composer).chat-form:has(.chat-format-toggle[aria-expanded="true"]) .chat-controls { display:flex; }
    html body :is(.memo-composer,.composer).chat-form:is(:focus-within,.emoji-open,.is-replying) { background:#fff; }
    html body :is(.memo-composer,.composer).chat-form.is-replying { padding-top:40px; }
    html body :is(.memo-composer,.composer).chat-form:is(:focus-within,.emoji-open,.is-replying) .chat-shell { grid-template-columns:minmax(0,1fr); gap:0; border-radius:0; background:#fff; padding:0; }
    html body :is(.memo-composer,.composer).chat-form:is(:focus-within,.emoji-open,.is-replying) :is(textarea,.chat-rich-editor) { grid-column:1; }
    html body :is(.memo-composer,.composer).chat-form:is(:focus-within,.emoji-open,.is-replying) textarea,
    html body :is(.memo-composer,.composer).chat-form:is(:focus-within,.emoji-open,.is-replying) .chat-rich-editor .ql-editor { min-height:58px; max-height:132px; padding:10px 12px; border:0; border-radius:16px; background:#f5f5f6; line-height:24px; box-shadow:none; }
    html body :is(.memo-composer,.composer).chat-form:is(:focus-within,.emoji-open,.is-replying) .chat-controls { grid-column:1; width:100%; min-height:42px; margin-top:4px; padding:0 2px; }
    html body .chat-form:not(.memo-composer):not(.composer) .chat-shell { border-radius:22px; padding:7px 12px; }
    html body .chat-form:not(.memo-composer):not(.composer) textarea,
    html body .chat-form:not(.memo-composer):not(.composer) .chat-rich-editor .ql-editor { font-size:16px; max-height:160px; min-height:38px; }
    html body .chat-form:not(.memo-composer):not(.composer) .chat-controls { display:flex; margin-top:3px; }
    .chat-toolbar { gap:1px; }
    html body .chat-toolbar button { width:26px; }
    .memo-list { padding-bottom:calc(var(--chat-composer-height,112px) + 14px); }
    .memo-rich-text { font-size:16px; }
}
