/* Canvas conversation UI uses the same theme tokens as the nodes. */
.canvas-chat-root { --chat-top: 64px; color: var(--text-primary, #e5e7eb); font-family: inherit; font-size: 13px; line-height: 1.5; }
.canvas-chat-root *, .canvas-chat-root *::before, .canvas-chat-root *::after { box-sizing: border-box; }
.canvas-chat-root [hidden] { display: none !important; }
.canvas-chat-toggle, .canvas-chat-panel { position: fixed; right: 16px; top: var(--chat-top); z-index: 700; }
.canvas-chat-root button, .canvas-chat-root select, .canvas-chat-root textarea { font-family: inherit; font-size: 13px; }
.canvas-chat-root button { cursor: pointer; color: inherit; border: 1px solid var(--white-10, #ffffff1a); background: var(--bg-panel-card, #ffffff08); border-radius: 8px; }
.canvas-chat-root button:disabled { opacity: .45; cursor: not-allowed; }
.canvas-chat-root button:hover:not(:disabled) { background: var(--white-10, #ffffff1a); }
.canvas-chat-root :focus-visible { outline: 2px solid var(--blue, #6d7dff); outline-offset: 2px; }
.canvas-chat-toggle { display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: var(--bg-panel, #15161e) !important; box-shadow: 0 4px 18px #0002; }
.canvas-chat-toggle svg { width: 17px; height: 17px; }
.canvas-chat-panel { width: min(var(--chat-width, 380px), 50vw); bottom: 12px; display: flex; flex-direction: column; background: var(--bg-panel, #15161e); border: 1px solid var(--white-10, #ffffff1a); border-radius: 14px; box-shadow: 0 10px 40px #0003; overflow: hidden; }
.canvas-chat-resize { position: absolute; left: 0; top: 14px; bottom: 14px; width: 10px; z-index: 2; cursor: ew-resize; touch-action: none; }
.canvas-chat-resize::after { content: ''; position: absolute; left: 1px; top: calc(50% - 22px); width: 3px; height: 44px; border-radius: 3px; background: var(--white-10, #ffffff1a); }
.canvas-chat-resize:hover::after, .canvas-chat-resize:focus-visible::after, .canvas-chat-resizing .canvas-chat-resize::after { background: var(--blue, #6d7dff); }
.canvas-chat-resizing, .canvas-chat-resizing * { cursor: ew-resize !important; user-select: none !important; }
.canvas-chat-header { display: flex; align-items: center; gap: 8px; padding: 14px; border-bottom: 1px solid var(--white-08, #ffffff14); flex-shrink: 0; }
.canvas-chat-heading { flex: 1; min-width: 0; }
.canvas-chat-heading h2 { font-size: 15px; font-weight: 650; margin: 0; color: inherit; }
.canvas-chat-heading p { font-size: 11px; color: var(--text-secondary, #9094a0); margin: 3px 0 0; }
.canvas-chat-history { flex: 0 1 auto; max-height: 42%; min-height: 0; overflow: auto; padding: 12px 14px; border-bottom: 1px solid var(--white-08, #ffffff14); scrollbar-width: thin; }
.canvas-chat-history-heading { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 9px; font-weight: 600; }
.canvas-chat-history-heading span, .canvas-chat-history p { font-size: 11px; color: var(--text-secondary, #9094a0); font-weight: 400; }
.canvas-chat-history-item { display: flex; flex-direction: column; gap: 5px; width: 100%; padding: 10px !important; margin-bottom: 7px; text-align: left; }
.canvas-chat-history-item strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 500; }
.canvas-chat-history-item span { color: var(--text-secondary, #9094a0); font-size: 10px; }
.canvas-chat-history-item[aria-current="true"] { border-color: var(--blue, #5265b4) !important; background: var(--blue-10, #6573df1a) !important; }
.canvas-chat-header button { min-height: 30px; padding: 4px 9px; white-space: nowrap; }
.canvas-chat-messages { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 16px 14px; scrollbar-width: thin; }
.canvas-chat-welcome { padding: 14px; border: 1px solid var(--white-08, #ffffff14); border-radius: 10px; background: var(--bg-panel-card, #ffffff08); color: var(--text-secondary, #a0a5b2); line-height: 1.75; }
.canvas-chat-message { margin-bottom: 18px; min-width: 0; }
.canvas-chat-message header { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; color: var(--text-secondary, #a0a5b2); font-size: 11px; }
.canvas-chat-message header span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.canvas-chat-message header button { border: 0; background: transparent; padding: 2px 5px; font-size: 11px; }
.canvas-chat-message p { margin: 0; padding: 11px 12px; background: var(--bg-panel-card, #ffffff08); border: 1px solid var(--white-08, #ffffff14); border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; line-height: 1.7; }
.canvas-chat-message.user p { background: var(--blue-10, #6573df1a); }
.canvas-chat-message.error p { color: var(--red, #ff666b); border-color: #ff666b44; }
.canvas-chat-message.pending p, .canvas-chat-message.cancelled p { color: var(--text-secondary, #a0a5b2); }
.canvas-chat-composer { padding: 12px; border-top: 1px solid var(--white-08, #ffffff14); flex-shrink: 0; }
.canvas-chat-composer textarea { width: 100%; min-height: 82px; max-height: 180px; resize: vertical; padding: 10px 11px; border: 1px solid var(--white-10, #ffffff1a); border-radius: 9px; color: var(--text-primary, #e5e7eb); background: var(--bg-input, #ffffff08); line-height: 1.6; }
.canvas-chat-composer textarea::placeholder { color: var(--text-secondary, #a0a5b2); }
.canvas-chat-attachments { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; padding: 2px 1px; scrollbar-width: thin; }
.canvas-chat-attachment { position: relative; flex: 0 0 58px; width: 58px; height: 58px; border: 1px solid var(--white-10, #ffffff1a); border-radius: 8px; overflow: hidden; background: #090a0f; }
.canvas-chat-attachment img { display: block; width: 100%; height: 100%; object-fit: cover; }
.canvas-chat-attachment button { position: absolute; right: 3px; top: 3px; width: 19px; height: 19px; min-width: 0; padding: 0; border-radius: 50%; line-height: 16px; color: #fff; background: #000b; }
.canvas-chat-message-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 7px; }
.canvas-chat-message-images img { display: block; width: 100%; max-height: 180px; object-fit: contain; border: 1px solid var(--white-08, #ffffff14); border-radius: 9px; background: #090a0f; }
.canvas-chat-models { display: flex; gap: 7px; margin-top: 8px; }
.canvas-chat-models select { min-width: 0; color: var(--text-primary, #e5e7eb); background: var(--bg-dropdown, #242426); border: 1px solid var(--white-10, #ffffff1a); border-radius: 7px; height: 31px; padding: 0 6px; }
.canvas-chat-provider { width: 95px; }
.canvas-chat-model { flex: 1; width: 100px; }
.canvas-chat-send-row { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 9px; }
.canvas-chat-send { min-height: 32px; min-width: 55px; padding: 4px 12px; background: var(--blue, #5265b4) !important; color: #fff !important; border-color: transparent !important; }
.canvas-chat-status { min-height: 16px; font-size: 11px; color: var(--text-secondary, #a0a5b2); margin-top: 7px; overflow-wrap: anywhere; }
.canvas-chat-status:empty { display: none; }
@media (max-width: 760px) { .canvas-chat-panel { width: min(380px, calc(100vw - 24px)); } .canvas-chat-resize { display: none; } }
@media (max-width: 600px) { .canvas-chat-panel, .canvas-chat-toggle { right: 12px; } .canvas-chat-panel { bottom: 8px; } }