.chat-colorpicker{display:grid;gap:10px;width:100%}.chat-cp-drawer{display:grid;gap:10px}.chat-cp-swatch{cursor:pointer}.chat-cp-sv{position:relative;height:92px;border-radius:var(--radius-sm);border:1px solid var(--border);cursor:crosshair;touch-action:none}.chat-cp-sv-thumb{position:absolute;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #00000080;pointer-events:none}.chat-cp-hue{position:relative;height:14px;border-radius:999px;border:1px solid var(--border);cursor:pointer;touch-action:none;background:linear-gradient(to right,red,#ff0 17%,#0f0 33%,#0ff,#00f 67%,#f0f 83%,red)}.chat-cp-hue-thumb{position:absolute;top:50%;width:14px;height:14px;transform:translate(-50%,-50%);border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #00000080;pointer-events:none}.chat-cp-foot{display:flex;align-items:center;gap:8px}.chat-cp-swatch{width:30px;height:30px;flex:none;border-radius:var(--radius-xs);border:1px solid var(--border-2)}.chat-cp-hex{flex:1;min-width:0;height:32px;padding:0 10px;border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--surface-2);color:var(--text);font-family:ui-monospace,Menlo,monospace;font-size:12px;text-transform:uppercase;outline:none}.chat-cp-hex:focus{border-color:var(--border-2)}