#tr-comms .tr-rich-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:5px;padding:9px 11px;border:1px solid #c6d1e1;border-radius:6px 6px 0 0;background:#fff;color:#52617a}
#tr-comms .tr-rich-toolbar button,#tr-comms .tr-note-color{position:relative;display:grid;place-items:center;flex:none;width:34px;height:32px;padding:4px;background:transparent;border:0;border-radius:4px;color:inherit;font:20px/1 system-ui;cursor:pointer}
#tr-comms .tr-rich-toolbar button:hover,#tr-comms .tr-note-color:hover{background:#f0f4fa}
#tr-comms .tr-rich-toolbar button[aria-pressed=true]{background:#e9f0fc;color:#285fbc}
#tr-comms .tr-rich-toolbar button:focus-visible{outline:2px solid #326dd9;outline-offset:2px}
#tr-comms .tr-rich-toolbar button:disabled{opacity:.5;cursor:default}
#tr-comms .tr-rich-toolbar svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#tr-comms .tr-note-color{padding:0}
#tr-comms .tr-color-palette{position:absolute;top:calc(100% + 8px);right:0;z-index:12;width:176px;padding:10px;background:#fff;border:1px solid #c6d1e1;border-radius:8px;box-shadow:0 7px 24px #26354d24}
#tr-comms .tr-swatch-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
#tr-comms .tr-rich-toolbar button.tr-note-swatch{width:32px;height:32px;padding:5px;background:var(--swatch-color);border:1px solid #52617a35;border-radius:5px;color:var(--swatch-ink)}
#tr-comms .tr-rich-toolbar button.tr-note-swatch:hover{box-shadow:0 0 0 2px #7f9abe;transform:scale(1.06)}
#tr-comms .tr-rich-toolbar button.tr-note-swatch[aria-pressed=true]{background:var(--swatch-color);outline:2px solid #52617a;outline-offset:1px;color:var(--swatch-ink)}
#tr-comms .tr-rich-toolbar button.tr-note-swatch:focus-visible{outline:2px solid #0567ee;outline-offset:2px}
#tr-comms .tr-note-swatch svg{width:18px;height:18px;stroke-width:2.5;visibility:hidden}
#tr-comms .tr-note-swatch[aria-pressed=true] svg{visibility:visible}
#tr-comms .tr-rich-toolbar button.tr-palette-reset{width:100%;height:auto;min-height:32px;margin-top:10px;padding:7px 3px;border-top:1px solid #e3e8f0;border-radius:0;font:12px/1.4 system-ui;white-space:normal}
#tr-comms .tr-color-symbol,#tr-comms .tr-highlight-symbol{display:block;width:22px;text-align:center;border-bottom:4px solid var(--note-color,#52617a);padding-bottom:3px;font-size:18px;line-height:18px}
#tr-comms .tr-highlight-symbol{transform:rotate(-12deg)}
#tr-comms .tr-rich-divider{width:1px;height:22px;background:#e3e8f0;margin:0 4px}
#tr-comms #tr-note-input{height:auto;min-height:250px;border:1px solid #c6d1e1;border-top:0;border-radius:0 0 6px 6px;background:#fff;color:#465266;font:14px/1.7 system-ui}
#tr-comms #tr-note-input:focus-within{box-shadow:0 0 0 2px #326dd926}
#tr-comms #tr-note-input .ql-editor{min-height:250px;padding:14px;overflow-wrap:anywhere;line-height:1.7}
#tr-comms #tr-note-text{white-space:normal;overflow-wrap:anywhere;margin:0}
#tr-comms #tr-note-text p,#tr-comms #tr-note-text li{white-space:pre-wrap;margin:0;min-height:1.7em;line-height:1.7}
#tr-comms #tr-note-text ul,#tr-comms #tr-note-text ol{margin:0;padding-left:1.7em}
#tr-comms #tr-note-text ul{list-style:disc outside}
#tr-comms #tr-note-text ol{list-style:decimal outside}
#tr-comms .tr-notes{overflow:auto}
@media(max-width:650px){#tr-comms .tr-rich-toolbar{gap:3px;padding:7px}#tr-comms .tr-rich-toolbar button,#tr-comms .tr-note-color{width:32px;height:36px}#tr-comms .tr-rich-divider{margin:0 2px}}