/* A quiet writing card and three aligned actions for task and chat messages. */
html:root :is(#task-comment-form,#chat-compose,.message-inline-editor).message-composer {
  position:relative; display:flex; flex-direction:column; gap:8px; min-width:0;
  margin:12px 14px; padding:12px 14px; border:1px solid var(--border); border-radius:18px;
  background:var(--surface); box-shadow:0 2px 8px color-mix(in srgb,var(--text-primary) 4%,transparent);
}
html:root .message-composer :is(#task-comment,#chat-text,.message-composer-input) {
  width:100%; min-width:0; min-height:46px; max-height:150px; margin:0; padding:2px 3px;
  border:0; border-radius:0; background:transparent; box-shadow:none; outline:0;
  resize:vertical; color:var(--text-primary); font:inherit; font-size:.95rem; line-height:1.5;
}
html:root .message-composer:focus-within { border-color:color-mix(in srgb,var(--accent) 45%,var(--border)); }
html:root .message-composer.message-drag-over { border:1px dashed var(--accent); background:var(--accent-soft); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent); }
html:root .message-composer :is(.message-composer-actions,.task-comment-actions,.chat-compose-actions) {
  display:flex; flex-direction:row; align-items:center; justify-content:flex-end; flex-wrap:nowrap; gap:8px; margin:0; padding:0; min-height:44px;
}
html:root #task-comment-form .message-composer-actions { position:sticky; bottom:0; z-index:2; background:var(--surface); }
html:root .message-composer .message-composer-actions :is(button.message-attach-button,button.message-emoji-button) {
  display:inline-grid; place-items:center; align-self:center; flex:0 0 44px; width:44px; height:44px; min-width:44px; min-height:44px;
  margin:0; padding:10px; border:0; border-radius:50%; color:var(--text-secondary); background:transparent; box-shadow:none;
}
html:root .message-composer .message-composer-actions button.message-send-button {
  display:inline-grid; place-items:center; align-self:center; flex:0 0 46px; width:46px; height:46px; min-width:46px; min-height:46px;
  margin:0; padding:11px; border:0; border-radius:50%; color:var(--theme-on-accent); background:var(--accent); box-shadow:none;
}
html:root .message-composer .message-composer-actions :is(button.message-attach-button,button.message-emoji-button):hover { background:var(--accent-soft); color:var(--accent); }
html:root .message-composer .message-send-button:hover { filter:brightness(1.08); }
html:root .message-composer.message-composer-empty .message-send-button { background:color-mix(in srgb,var(--text-secondary) 60%,var(--surface)); color:var(--surface); }
html:root .message-composer .message-composer-actions svg { width:24px; height:24px; }
html:root .message-composer button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
html:root .message-composer :is(#task-file-fields,#chat-image-fields) { padding:0; margin:0; border:0; border-radius:0; background:transparent; }
html:root :is(#task-file-selection,#chat-image-selection,.message-pending-files).message-pending-files { display:grid; grid-template-columns:minmax(0,1fr); gap:4px; min-width:0; max-height:216px; overflow:auto; }
html:root .message-pending-files .attachment-feedback:empty { display:none; }
html:root .message-file-row { display:flex; align-items:center; gap:8px; min-width:0; padding:6px 0; }
html:root :is(#task-activity,#chat-messages) .content-files { display:flex; flex-direction:column; align-items:stretch; gap:2px; margin:6px 0 10px; }
html:root :is(.message-composer,.content-files) .message-file-open { display:flex; flex:1 1 auto; align-items:center; gap:12px; min-width:0; padding:0; margin:0; border:0; border-radius:8px; background:transparent; color:var(--text-primary); text-align:left; text-decoration:none; box-shadow:none; }
html:root .content-files a.message-file-open:hover { background:transparent; color:var(--accent); }
html:root .message-file-open:hover .message-file-name { color:var(--accent); }
html:root .message-file-copy { display:grid; gap:3px; min-width:0; }
html:root .message-file-name { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text-primary); font-size:.92rem; font-weight:600; line-height:1.4; }
html:root .message-file-size { color:var(--text-secondary); font-size:.8rem; }
html:root .message-file-state { color:var(--text-secondary); font-size:.75rem; }
html:root .message-file-row[data-upload-state="failed"] .message-file-state { color:var(--theme-danger); }
html:root .message-file-badge { position:relative; display:grid; place-items:center; flex:0 0 42px; width:42px; height:48px; border-radius:6px; overflow:hidden; color:var(--text-secondary); }
html:root .message-file-badge > svg { width:40px; height:46px; }
html:root .message-file-badge > svg path { fill:color-mix(in srgb,var(--text-secondary) 15%,var(--surface)); stroke:none; }
html:root .message-file-badge > span { position:absolute; left:0; bottom:8px; padding:2px 4px; border-radius:3px; background:var(--accent); color:var(--theme-on-accent); font-size:.65rem; font-weight:700; line-height:1.2; }
html:root .message-file-badge[data-extension^="XLS"] > span { background:#42a928; color:white; }
html:root .message-file-badge[data-extension="PDF"] > span { background:#db454a; color:white; }
html:root .message-file-badge > img { width:100%; height:100%; object-fit:cover; }
html:root :is(.message-composer,.content-files) :is(.message-file-remove,.message-file-download) { display:grid; place-items:center; flex:0 0 40px; width:40px; height:44px; min-height:44px; padding:8px; margin:0; border:0; border-radius:10px; background:transparent; color:var(--text-secondary); box-shadow:none; }
html:root :is(.message-file-remove,.message-file-download) svg { width:22px; height:22px; }
html:root .message-file-remove:hover { color:var(--theme-danger); background:color-mix(in srgb,var(--theme-danger) 8%,var(--surface)); }
html:root .message-file-download:hover { color:var(--accent); background:var(--accent-soft); }
html:root .message-composer :is(.news-emoji-panel,.chat-emojis) { position:absolute; right:12px; bottom:66px; z-index:8; width:min(280px,calc(100% - 24px)); max-height:180px; overflow:auto; padding:10px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:0 8px 30px #0002; }
html:root .message-emoji-popup { position:fixed; z-index:230; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:4px; width:min(280px,calc(100% - 24px)); max-height:180px; overflow:auto; margin:0; padding:10px; border:1px solid var(--border); border-radius:14px; background:var(--surface); box-shadow:var(--shadow-dropdown); }
html:root .message-emoji-popup button { display:grid; place-items:center; width:100%; min-width:0; min-height:36px; margin:0; padding:0; border:0; border-radius:8px; background:transparent; font-size:1.3rem; color:var(--text-primary); box-shadow:none; }
html:root .message-emoji-popup button:hover { background:var(--accent-soft); }
html:root .message-composer .message-edit-cancel { margin-right:auto; padding:6px 0; min-height:44px; border:0; background:transparent; color:var(--text-secondary); box-shadow:none; }
html:root :is(#task-activity .is-editing,#chat-messages .is-editing) { width:100%; }
html:root :is(#task-activity,#chat-messages) .message-inline-editor { margin:12px 0; padding:12px; }
html:root .message-inline-editor .message-composer-input { min-height:180px; max-height:360px; }
@media(max-width:700px) {
  html:root :is(#task-comment-form,#chat-compose).message-composer { margin:10px; padding:10px 12px; }
  html:root .message-composer .message-composer-actions { gap:4px; }
  html:root .message-file-open { gap:8px; }
}
html:root .message-action-items { display:flex;align-items:center;gap:0; }
html:root button.message-actions-trigger { display:none;align-items:center;justify-content:center;width:44px;min-width:44px;height:44px;min-height:44px;margin:0;padding:0;border:0;border-radius:7px;background:transparent;color:var(--text-secondary);box-shadow:none; }
html:root button.message-actions-trigger svg { width:18px;height:18px;fill:currentColor;stroke:none; }
html:root button.message-actions-trigger:is(:hover,:focus-visible) { background:var(--theme-soft);color:var(--accent); }
html:root .message-action-popup { position:fixed;inset:auto;margin:0;padding:5px;width:max-content;min-width:190px;overflow:auto;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-dropdown); }
html:root .message-action-popup:popover-open { display:flex;flex-direction:column; }
html:root .message-action-popup .message-action-choice { display:flex;align-items:center;gap:9px;width:100%;min-height:44px;margin:0;padding:8px 11px;border:0;border-radius:7px;background:transparent;color:var(--text-primary);box-shadow:none;font-size:13px;font-weight:400;text-align:left; }
html:root .message-action-popup .message-action-choice svg { width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7; }
html:root .message-action-popup .message-action-choice:is(:hover,:focus-visible) { background:var(--theme-soft);color:var(--accent); }
html:root :is(button.message-actions-trigger,.message-action-choice):focus-visible { outline:2px solid var(--accent);outline-offset:1px; }
@media(max-width:700px),(pointer:coarse) {
  html:root .message-action-items { display:none; }
  html:root button.message-actions-trigger { display:inline-flex; }
}