/* Separate floating windows follow the chat popup's body-mounted lifecycle.
   Explicit palette foregrounds stay readable in both site themes. */
html[data-theme] .color-note-window,.color-note-window{--note-bg:#fff1b8;--note-ink:#292720;position:fixed;z-index:200;display:flex;flex-direction:column;box-sizing:border-box;max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);background:var(--note-bg);color:var(--note-ink);border:1px solid #8c8771;border-radius:10px;box-shadow:0 12px 36px #0003;overflow:hidden;font-size:14px;line-height:1.5}
html[data-theme] .color-note-window[data-color=mint],.color-note-window[data-color=mint]{--note-bg:#d9f2e3;--note-ink:#173c2c}
html[data-theme] .color-note-window[data-color=blue],.color-note-window[data-color=blue]{--note-bg:#deedff;--note-ink:#203a5b}
html[data-theme] .color-note-window[data-color=pink],.color-note-window[data-color=pink]{--note-bg:#ffe1e9;--note-ink:#562638}
html[data-theme] .color-note-window[data-color=lavender],.color-note-window[data-color=lavender]{--note-bg:#eee3ff;--note-ink:#412e61}
.color-note-head{position:static!important;display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:4px 10px;border-bottom:1px solid #0002;cursor:move;touch-action:none;background:transparent!important;color:inherit!important;flex-shrink:0}
html[data-theme] .color-note-window .color-note-close,.color-note-window .color-note-close{position:relative;display:grid;place-items:center;width:36px;height:36px;min-width:36px;min-height:36px;padding:0;border:0;background:transparent;color:#686c74;font:400 16px/1 Arial,sans-serif;box-shadow:none;isolation:isolate}
.color-note-close::before{content:"";position:absolute;z-index:-1;inset:7px;background:#f0f1f3;border-radius:5px}
.color-note-content,.color-note-list{padding:12px;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:8px;flex:1}
html[data-theme] .color-note-window :is(input,textarea,select,button),.color-note-window :is(input,textarea,select,button){font-family:inherit;color:var(--note-ink);border:1px solid #0004;background:#ffffff80;border-radius:6px;font-size:14px;line-height:1.5;box-sizing:border-box}
html[data-theme] .color-note-window :is(input,textarea,select),.color-note-window :is(input,textarea,select){width:100%;padding:8px}
html[data-theme] .color-note-window textarea,.color-note-window textarea{min-height:100px;flex:1;resize:none;font-size:16px;line-height:1.65;white-space:pre-wrap}
.color-note-window :is(input,textarea,select,button):disabled{opacity:.8;cursor:default;-webkit-text-fill-color:currentColor}
.color-note-window button{min-height:36px;padding:6px 10px;cursor:pointer}
.color-note-window :focus-visible{outline:2px solid #295f9c;outline-offset:2px}
.color-note-status{font-size:13px;line-height:1.5;margin:0;color:inherit!important;overflow-wrap:anywhere}
.color-note-actions,.color-note-confirm{display:flex;flex-wrap:wrap;gap:6px;flex-shrink:0}
.color-note-list-rows{display:flex;flex-direction:column;gap:7px;overflow:auto}
.color-note-list-rows button{text-align:left;overflow-wrap:anywhere}
.color-note-resize{height:14px;min-height:14px;cursor:nwse-resize;touch-action:none;background:linear-gradient(135deg,transparent 45%,#0003 46%,#0003 54%,transparent 55%) bottom right/12px 12px no-repeat}
.color-note-sharing{padding-top:8px;border-top:1px solid #0003;display:flex;flex-direction:column;gap:8px}
.color-note-sharing h3,.color-note-sharing p{margin:0;color:inherit!important}
.color-note-grant{display:flex;gap:6px;align-items:center;flex-wrap:wrap;overflow-wrap:anywhere}
.color-note-window [hidden]{display:none!important}
.rail [data-color-notes][hidden]{display:none!important}
@media(max-width:760px){.color-note-window button,.color-note-window select{min-height:44px}.color-note-head{min-height:48px}.color-note-window .color-note-close,html[data-theme] .color-note-window .color-note-close{width:44px;height:44px;min-width:44px;min-height:44px}.color-note-close::before{inset:11px}.color-note-resize{height:24px;min-height:24px}.rail:has([data-color-notes]:not([hidden])){display:flex;position:fixed;left:auto;right:0;top:82px;bottom:auto;width:44px;padding:0;z-index:90}.rail:has([data-color-notes]:not([hidden]))>button:not([data-color-notes]){display:none}.rail [data-color-notes]{min-width:44px;min-height:44px}}
/* Compact list and sticky-note editor chrome. */
html[data-theme] .color-note-list-window{background:var(--ps-surface,#fff);color:var(--ps-ink,#202124);border-color:var(--ps-line,#ddd)}
.color-note-list-window .color-note-list{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto minmax(0,1fr);align-content:start;gap:8px;padding:10px 12px}
.color-note-list>p{margin:0;align-self:center;font-size:12px;line-height:1.4}
html[data-theme] .color-note-list .color-note-list-create{display:grid;place-items:center;min-width:36px;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:10px;background:var(--ps-mint-soft,#e7faf5);color:var(--ps-ink,#202124);font-size:24px;line-height:1}
.color-note-list-window .color-note-list-rows{grid-column:1/-1;gap:6px;align-self:start;max-height:100%}
.color-note-list-rows>[data-note-list-id]{display:flex;align-items:center;gap:6px;min-height:36px;padding:7px 8px}
.color-note-list-rows>[data-note-list-id]>span:first-of-type{font-size:11px;flex-shrink:0}
.color-note-list-rows>[data-note-list-id]>span:last-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.color-note-list-swatch{flex:0 0 8px;width:8px;height:8px;border-radius:2px;background:#f1ce5b}
[data-color=mint]>.color-note-list-swatch{background:#86c9ab}[data-color=blue]>.color-note-list-swatch{background:#8ebce9}[data-color=pink]>.color-note-list-swatch{background:#de7bb2}[data-color=lavender]>.color-note-list-swatch{background:#b69bdd}
.color-note-editor{--note-bar:#f3d374}.color-note-editor[data-color=mint]{--note-bar:#98d4b8}.color-note-editor[data-color=blue]{--note-bar:#9dc7f1}.color-note-editor[data-color=pink]{--note-bar:#e987c4}.color-note-editor[data-color=lavender]{--note-bar:#c6a5e7}
html[data-theme] .color-note-editor .color-note-head{min-height:36px;height:36px;padding:0 4px;gap:2px;border-bottom:0;background:var(--note-bar)!important;color:#202020!important}
.color-note-editor .color-note-head>strong{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html[data-theme] .color-note-editor .color-note-head button{display:grid;place-items:center;min-width:30px;width:30px;min-height:30px;height:30px;padding:0;border:0;border-radius:4px;background:transparent;color:#202020;line-height:1;box-shadow:none}
html[data-theme] .color-note-editor .color-note-head .color-note-new{margin-right:auto}
html[data-theme] .color-note-editor .color-note-head svg{display:block;width:18px;height:18px;color:inherit}
.color-note-editor .color-note-close::before{background:transparent}
.color-note-editor .color-note-content{gap:4px;padding:10px 12px}
html[data-theme] .color-note-editor textarea,html[data-theme] .color-note-editor textarea:focus-visible{flex:1;min-height:80px;padding:0;border:0;border-radius:0;background:transparent!important;color:inherit!important;box-shadow:none;outline:none!important;text-decoration:none;line-height:1.6}
.color-note-editor .color-note-status{font-size:11px;line-height:1.4;opacity:.75;flex-shrink:0}
.color-note-options{display:flex;flex-direction:column;gap:8px;flex-shrink:0;max-height:55%;overflow:auto;border-top:1px solid #0002;padding-top:8px}
html[data-theme=dark] .color-note-editor{background:#303030;color:#f2f2f2;border-color:#484848}
html[data-theme=dark] .color-note-editor .color-note-content :is(input,select,button){background:#424242;color:#f2f2f2;border-color:#ffffff35}
html[data-theme=dark] .color-note-editor .color-note-options{border-color:#ffffff30}
@media(max-width:760px){html[data-theme] .color-note-editor .color-note-head{min-height:44px;height:44px}html[data-theme] .color-note-editor .color-note-head button{width:44px;min-width:44px;height:44px;min-height:44px}html[data-theme] .color-note-list .color-note-list-create{width:44px;min-width:44px;height:44px;min-height:44px}}

.color-note-editor .color-note-status[data-problem=true]{font-size:12px;opacity:1}