/* Infinite canvas composer: shared light surface for both domains. */
.nano-infinite-canvas {
    color-scheme: light;
    color: #172033 !important;
    background: #f6f8fc !important;
}

/* v21: shared context-menu icons and connected secondary-creation nodes */
.nic-context-menu button svg{width:16px;height:16px;flex:0 0 16px;display:block}
.nic-context-menu button span{min-width:0;flex:1;text-align:left}
.nic-context-menu button b{font-size:16px;line-height:1;font-weight:700;color:#94a3b8}
.nic-context-submenu{position:relative;z-index:1}
.nic-context-submenu::after{content:"";position:absolute;left:100%;top:0;width:12px;height:100%;display:block}
.nic-context-submenu-panel{position:absolute;left:calc(100% + 6px);top:-6px;z-index:3;display:none;min-width:150px;padding:6px;border:1px solid rgba(15,23,42,.1);border-radius:14px;background:rgba(255,255,255,.97);box-shadow:0 18px 40px rgba(15,23,42,.16);backdrop-filter:blur(16px)}
.nic-context-submenu-panel.is-left{left:auto;right:calc(100% + 6px)}
.nic-context-submenu:hover .nic-context-submenu-panel,.nic-context-submenu:focus-within .nic-context-submenu-panel{display:block}
.nic-connection-layer{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;pointer-events:none}
.nic-connection-layer path.nic-connection-line{fill:none;stroke:#9aaef0;stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke;opacity:.68}
.nic-connection-layer path.nic-connection-line.is-active{stroke:#4d72e8;stroke-width:3;opacity:1}
.nic-connection-layer path.nic-connection-line-flow{fill:none;stroke:rgba(255,255,255,.96);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1 22;vector-effect:non-scaling-stroke;opacity:.95;animation:nic-connection-flow 1s linear infinite;filter:drop-shadow(0 0 2px rgba(255,255,255,.8))}
@keyframes nic-connection-flow{to{stroke-dashoffset:-46}}
.nic-node{z-index:2}
.nic-node-toolbar,.nic-result-toolbar{background:rgba(255,255,255,.3)!important;border-color:rgba(255,255,255,.48)!important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.nic-node-toolbar .nic-node-tool,.nic-result-toolbar .nic-tool-btn{background:rgba(255,255,255,.3)!important;border-color:rgba(255,255,255,.42)!important}
.nic-node-toolbar .nic-node-tool:hover,.nic-result-toolbar .nic-tool-btn:hover{background:rgba(255,255,255,.58)!important}
.nic-connection-handle{position:absolute;z-index:7;width:26px;height:26px;padding:0;border:1px solid rgba(37,99,235,.24);border-radius:999px;background:#fff;color:#2563eb;font:700 18px/24px system-ui,sans-serif;box-shadow:0 7px 18px rgba(15,23,42,.16);opacity:0;visibility:hidden;pointer-events:none;cursor:pointer;transform:translate(-50%,-50%) scale(.86);transition:opacity .14s ease,visibility .14s ease,transform .14s ease,background .14s ease}
.nic-connection-handle.is-visible{opacity:1;visibility:visible;pointer-events:auto}
.nic-connection-handle:hover{transform:translate(-50%,-50%) scale(1.12);background:#eff6ff}
.nic-connection-draft{position:absolute;z-index:6;width:calc(var(--nic-connection-width,560px) * var(--nic-node-zoom));min-height:calc(var(--nic-connection-height,300px) * var(--nic-node-zoom));box-sizing:border-box;padding:calc(16px * var(--nic-node-zoom));border:1px solid rgba(37,99,235,.22);border-radius:calc(22px * var(--nic-node-zoom));background:rgba(255,255,255,.98);box-shadow:0 calc(18px * var(--nic-node-zoom)) calc(44px * var(--nic-node-zoom)) rgba(15,23,42,.16);cursor:grab;user-select:text}
.nic-connection-draft.is-dragging{cursor:grabbing}
.nic-connection-draft-head{display:flex;align-items:center;justify-content:flex-end;height:24px;margin-bottom:8px;color:#0f172a;font-size:13px;font-weight:780;cursor:grab}
.nic-connection-draft-head button{width:24px;height:24px;border:0;border-radius:999px;background:#f1f5f9;color:#64748b;font-size:17px;line-height:1;cursor:pointer}
.nic-connection-draft textarea{cursor:text}
.nic-connection-draft button{cursor:pointer}
.nic-connection-draft-refs{display:flex;gap:10px;margin-bottom:12px;max-width:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:2px;scrollbar-width:thin}
.nic-connection-draft-thumb,.nic-connection-draft-upload{position:relative;width:86px;height:70px;flex:0 0 86px;overflow:hidden;border-radius:13px;display:grid;place-items:center;background:#f4f6fa;color:#64748b}
.nic-connection-draft-ref{border:2px solid #4e7cff}
.nic-connection-draft-uploaded{border:1px solid #d5ddea}
.nic-connection-draft-thumb img{width:100%;height:100%;object-fit:cover}
.nic-connection-draft-ref img{width:100%;height:100%;object-fit:cover}
.nic-connection-draft-index{position:absolute;left:6px;bottom:5px;padding:2px 6px;border-radius:5px;background:rgba(49,79,210,.92);color:#fff;font-size:11px;line-height:1.2}
.nic-connection-draft-upload{border:1px dashed #b8c2d3;cursor:pointer}
.nic-connection-draft-upload input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.nic-connection-draft-upload span{font-size:26px;line-height:1}
.nic-connection-draft-upload small{position:absolute;left:5px;bottom:4px;padding:2px 5px;border-radius:5px;background:rgba(15,23,42,.65);color:#fff;font-size:11px}
.nic-connection-draft-uploaded.is-dragging{opacity:.46;outline:2px solid #4e7cff;outline-offset:2px}
.nic-connection-draft-remove{position:absolute;right:4px;top:4px;width:19px;height:19px;padding:0;border:0;border-radius:999px;background:rgba(15,23,42,.78);color:#fff;font:700 15px/18px system-ui,sans-serif;cursor:pointer;opacity:0;transition:opacity .14s ease,transform .14s ease}
.nic-connection-draft-uploaded:hover .nic-connection-draft-remove,.nic-connection-draft-remove:focus-visible{opacity:1}
.nic-connection-draft-remove:hover{transform:scale(1.1);background:#dc2626}
.nic-connection-draft textarea{display:block;width:100%;min-height:calc(104px * var(--nic-node-zoom));box-sizing:border-box;resize:vertical;padding:calc(10px * var(--nic-node-zoom));border:0;border-radius:11px;background:transparent;color:#0f172a;font:inherit;font-size:calc(16px * var(--nic-node-zoom));outline:none}
.nic-connection-draft textarea:focus{border-color:#7c9cff;box-shadow:0 0 0 3px rgba(124,156,255,.16)}
.nic-connection-draft-footer{display:flex;align-items:center;gap:8px;margin-top:8px;color:#526078;font-size:calc(12px * var(--nic-node-zoom));font-weight:700}
.nic-connection-draft,.nic-connection-draft-footer,.nic-connection-draft-footer button{filter:none!important;backface-visibility:visible;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased}
.nic-connection-draft:has(textarea:focus) .nic-connection-draft-footer{transform:none;filter:none!important}
.nic-connection-model,.nic-connection-visual,.nic-connection-count,.nic-connection-credit{display:inline-flex;align-items:center;gap:5px;padding:7px 10px;border:1px solid #dbe3ef;border-radius:999px;background:#fff;color:#34435a;font:inherit;font-size:calc(12px * var(--nic-node-zoom));white-space:nowrap}
.nic-connection-model,.nic-connection-visual{cursor:pointer}
.nic-connection-model:hover,.nic-connection-visual:hover{border-color:#9bb4f7;background:#f7f9ff}
.nic-connection-credit{border-color:transparent;background:#f7f8fb}
.nic-connection-submit{margin-left:auto}
.nic-connection-submit{width:calc(42px * var(--nic-node-zoom));height:calc(42px * var(--nic-node-zoom));margin-left:auto;border:0;border-radius:999px;background:#4054d8;color:#fff;font:700 calc(20px * var(--nic-node-zoom))/1 inherit;cursor:pointer}
.nic-connection-submit:disabled{opacity:.62;cursor:wait}
.nic-connection-menu{position:absolute;z-index:9;left:calc(16px * var(--nic-node-zoom));right:auto;bottom:calc(70px * var(--nic-node-zoom));width:min(300px,calc(100% - 32px));max-height:calc(300px * var(--nic-node-zoom));overflow:auto;box-sizing:border-box}
.nic-connection-menu .nic-composer-visual-section{padding:calc(10px * var(--nic-node-zoom))}
.nic-connection-menu .nic-composer-menu-head{padding:calc(10px * var(--nic-node-zoom)) calc(12px * var(--nic-node-zoom))}
.nic-node-frame{aspect-ratio:var(--nic-node-aspect,3 / 4)}
.nic-node.is-pending .nic-node-card{animation:nic-canvas-pending-breathe 1.9s ease-in-out infinite}
.nic-node.is-pending .nic-node-pending{animation:nic-node-pending-surface 1.9s ease-in-out infinite}
@keyframes nic-canvas-pending-breathe{
  0%,100%{box-shadow:0 calc(16px * var(--nic-node-zoom)) calc(38px * var(--nic-node-zoom)) rgba(15,23,42,.13),0 0 0 calc(1px * var(--nic-node-zoom)) rgba(64,84,216,.12),0 0 calc(16px * var(--nic-node-zoom)) rgba(64,84,216,.12)}
  50%{box-shadow:0 calc(19px * var(--nic-node-zoom)) calc(44px * var(--nic-node-zoom)) rgba(15,23,42,.16),0 0 0 calc(5px * var(--nic-node-zoom)) rgba(64,84,216,.2),0 0 calc(30px * var(--nic-node-zoom)) rgba(64,84,216,.22)}
}
@keyframes nic-node-pending-surface{0%,100%{background-position:50% 38%,0 0;filter:saturate(.96)}50%{background-position:50% 44%,0 0;filter:saturate(1.05)}}
.nic-node-progress i,.nic-chat-progress i{will-change:transform,opacity;background:linear-gradient(90deg,#2563eb,#7c9cff,#2563eb);background-size:200% 100%;animation:nic-pending-progress-breathe 1.7s ease-in-out infinite}
.nic-node-progress.is-indeterminate i,.nic-chat-progress.is-indeterminate i{width:36%!important;animation:nic-pending-progress-slide 1.8s ease-in-out infinite}
@keyframes nic-pending-progress-breathe{0%,100%{opacity:.66;background-position:0 0;transform:scaleY(.85)}50%{opacity:1;background-position:100% 0;transform:scaleY(1.2)}}
@keyframes nic-pending-progress-slide{0%{opacity:.48;transform:translateX(-55%) scaleX(.7)}50%{opacity:1;transform:translateX(90%) scaleX(1.15)}100%{opacity:.48;transform:translateX(240%) scaleX(.7)}}
@media (prefers-reduced-motion:reduce){.nic-node.is-pending .nic-node-card{animation:nic-canvas-pending-breathe 1.9s ease-in-out infinite!important}.nic-node.is-pending .nic-node-pending{animation:nic-node-pending-surface 1.9s ease-in-out infinite!important}.nic-node-progress i,.nic-chat-progress i{animation:nic-pending-progress-slide 1.8s ease-in-out infinite!important}}
@media (max-width:720px){
 .nic-connection-handle{width:30px;height:30px}
 .nic-node .nic-connection-handle.is-visible{opacity:1;visibility:visible;pointer-events:auto}
 .nic-connection-draft{max-width:calc(100vw - 32px)}
 .nic-context-submenu-panel{left:auto;right:calc(100% + 7px)}
}

/* Agent replies are revealed progressively before the generation state is shown. */
.nic-chat-response.is-typing,
.ncc-live p{white-space:pre-wrap}
.nic-agent-typing-caret{display:inline-block;width:.52em;height:1.05em;margin-left:3px;vertical-align:-.16em;background:currentColor;opacity:.72;animation:nic-agent-typing-caret 1s steps(1,end) infinite}
@keyframes nic-agent-typing-caret{0%,45%{opacity:.72}46%,100%{opacity:0}}

.nano-infinite-canvas .nic-shell,
.nano-infinite-canvas .nic-topbar,
.nano-infinite-canvas .nic-panel,
.nano-infinite-canvas .nic-panel-head,
.nano-infinite-canvas .nic-panel-body,
.nano-infinite-canvas .nic-viewport,
.nano-infinite-canvas .nic-chat-feed {
    background: #f6f8fc !important;
    color: #172033 !important;
}

.nano-infinite-canvas .nic-panel,
.nano-infinite-canvas .nic-composer {
    border-color: #dce3ef !important;
    box-shadow: 0 16px 40px rgba(41, 62, 91, .10) !important;
}

.nano-infinite-canvas .nic-composer,
.nano-infinite-canvas .nic-chat-bubble,
.nano-infinite-canvas .nic-chat-result,
.nano-infinite-canvas .nic-local-asset-panel {
    background: #fff !important;
    color: #172033 !important;
}

/* Keep text and vector controls readable while the canvas is continuously zoomed. */
#infinite-canvas-world .nic-node{will-change:width;backface-visibility:visible;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
#infinite-canvas-world .nic-node-card,#infinite-canvas-world .nic-node-pending,#infinite-canvas-world .nic-node-body{backface-visibility:visible;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
#infinite-canvas-world .nic-node svg{shape-rendering:geometricPrecision}

.nano-infinite-canvas .nic-composer-input,
.nano-infinite-canvas .nic-composer-input:focus {
    color: #172033 !important;
    caret-color: #4f46e5 !important;
}

.nano-infinite-canvas .nic-composer-input::placeholder {
    color: #98a3b5 !important;
}

/* Make the upload affordance a visible reference-image tile. */
#infinite-canvas-composer .nic-composer-round[data-nic-composer-action="upload"] {
    width: 104px !important;
    min-width: 104px !important;
    height: 72px !important;
    border: 1px dashed #aebbd0 !important;
    border-radius: 16px !important;
    background: #f7f9fd !important;
    color: #64748b !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
}

#infinite-canvas-composer .nic-composer-round[data-nic-composer-action="upload"]::after {
    content: '参考图';
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

#infinite-canvas-composer .nic-composer-round[data-nic-composer-action="upload"] svg {
    width: 25px !important;
    height: 25px !important;
}

#infinite-canvas-composer .nic-composer-round[data-nic-composer-action="upload"]:hover {
    background: #eef2ff !important;
    border-color: #818cf8 !important;
    color: #4f46e5 !important;
}

#infinite-canvas-composer .nic-composer-round[data-nic-composer-action="optimize"] {
    order: 20;
}

/* Keep credit and submit controls centered as one visual unit. */
#infinite-canvas-composer .nic-composer-footer {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 58px;
}

#infinite-canvas-composer #nic-submit-area {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 2;
}

#infinite-canvas-composer .nic-composer-options {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

#infinite-canvas-composer .nic-composer-options [data-nic-composer-action="optimize"] {
    margin-left: 2px !important;
}

/* @参考图 menu, using the same uploaded files as ordinary generation. */
#infinite-canvas-composer .nic-reference-mention-menu {
    position: absolute;
    left: 16px;
    bottom: 112px;
    z-index: 30;
    width: min(280px, calc(100% - 32px));
    max-height: 260px;
    overflow: auto;
    padding: 7px;
    border: 1px solid #dbe3ef;
    border-radius: 14px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 14px 36px rgba(35,50,75,.16);
}

#infinite-canvas-composer .nic-reference-mention-option {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #26344b;
    text-align: left;
    cursor: pointer;
}

#infinite-canvas-composer .nic-reference-mention-option:hover,
#infinite-canvas-composer .nic-reference-mention-option.is-active {
    background: #eef2ff;
    color: #4338ca;
}

#infinite-canvas-composer .nic-reference-mention-option img {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    object-fit: cover;
    border-radius: 7px;
}

#infinite-canvas-composer .nic-reference-mention-empty {
    padding: 12px;
    color: #7b8799;
    font-size: 12px;
}

body.xcg-night .nano-infinite-canvas .nic-composer,
body.xcg-night .nano-infinite-canvas .nic-composer-menu,
body.xcg-night .nano-infinite-canvas .nic-composer-menu-option,
body.xcg-night .nano-infinite-canvas .nic-composer-pill,
body.xcg-night .nano-infinite-canvas .nic-composer-round,
body.xcg-night .nano-infinite-canvas .nic-composer-send {
    background-color: #fff !important;
    color: #172033 !important;
    border-color: #dce3ef !important;
}

body.xcg-night .nano-infinite-canvas .nic-composer-send,
.nano-infinite-canvas .nic-composer-send {
    background: #4f46e5 !important;
    color: #fff !important;
    border-color: #4f46e5 !important;
}

/* The canvas has one JS floating tooltip; suppress the duplicate CSS pseudo-tooltip. */
.nano-infinite-canvas [data-nic-tip]::after {
    content: none !important;
    display: none !important;
}

/* Agent results keep the ordinary generation image/action proportions. */
#infinite-canvas-modal.has-canvas-chat .ncc-result {
    margin: 10px 0 !important;
    border: 1px solid #dce3ef !important;
    border-radius: 13px !important;
    background: #fff !important;
    overflow: hidden !important;
}

#infinite-canvas-modal.has-canvas-chat .ncc-result > img {
    display: block !important;
    width: 100% !important;
    max-height: 420px !important;
    object-fit: contain !important;
    background: #f8fafc !important;
}

#infinite-canvas-modal.has-canvas-chat .ncc-result > div {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 7px 8px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

#infinite-canvas-modal.has-canvas-chat .ncc-result > div :is(button, a) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 30px !important;
    padding: 0 11px !important;
    border: 1px solid #d4ddea !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #26344b !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}

#infinite-canvas-modal.has-canvas-chat .ncc-result > div :is(button, a):hover {
    background: #eef2ff !important;
    border-color: #a5b4fc !important;
    color: #4338ca !important;
}

body.xcg-night #infinite-canvas-modal.has-canvas-chat .ncc-result,
body.xcg-night #infinite-canvas-modal.has-canvas-chat .ncc-result > div :is(button, a) {
    background: #fff !important;
    color: #26344b !important;
    border-color: #d4ddea !important;
}

@media (max-width: 720px) {
    #infinite-canvas-composer .nic-composer-round[data-nic-composer-action="upload"] {
        width: 88px !important;
        min-width: 88px !important;
        height: 64px !important;
    }

    #infinite-canvas-composer .nic-reference-mention-menu {
        left: 10px;
        bottom: 102px;
        width: calc(100% - 20px);
    }
}

/* Composer alignment: settings left, action controls right. */
#infinite-canvas-composer .nic-composer-footer {
    justify-content: flex-start !important;
    gap: 10px !important;
}

#infinite-canvas-composer .nic-composer-options {
    margin-left: 0 !important;
    margin-right: auto !important;
}

#infinite-canvas-composer #nic-submit-area {
    margin-left: auto !important;
    margin-right: 8px !important;
}

/* The upload tile is intentionally flat and aligned to the composer edge. */
#infinite-canvas-composer .nic-composer-upload-dock {
    align-self: flex-start !important;
    margin-left: 8px !important;
    box-shadow: none !important;
}

/* Agent is a normal highlighted button, not a switch. */
#infinite-canvas-composer #nic-canvas-agent-toggle {
    border-radius: 999px !important;
    background: #fff !important;
    color: #344054 !important;
    border: 1px solid #d8e0eb !important;
}

#infinite-canvas-composer #nic-canvas-agent-toggle[aria-pressed="true"] {
    background: #e0e7ff !important;
    color: #3730a3 !important;
    border-color: #818cf8 !important;
    box-shadow: none !important;
}

#infinite-canvas-composer #nic-canvas-agent-toggle i {
    display: none !important;
}

/* Mention suggestions belong below the editor, never over the typed text. */
#infinite-canvas-composer .nic-reference-mention-menu {
    top: auto;
    bottom: auto;
    margin-top: 0;
}

/* Remove the inherited footer inset so the settings group starts at the composer edge. */
#infinite-canvas-composer .nic-composer-footer {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

#infinite-canvas-composer .nic-composer-options {
    margin-left: 0 !important;
}

/* Agent conversation content uses the same left boundary as ordinary conversation results. */
#infinite-canvas-modal.has-canvas-chat .ncc-message.is-assistant,
#infinite-canvas-modal.has-canvas-chat .ncc-result,
#infinite-canvas-modal.has-canvas-chat .nic-result-grid {
    margin-left: 0 !important;
}

#infinite-canvas-modal.has-canvas-chat .ncc-message.is-assistant {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* x-cg night mode must keep its original dark palette; the light composer rules above are opt-out. */
.nano-infinite-canvas.xcg-canvas-night,
.nano-infinite-canvas.xcg-canvas-night .nic-shell,
.nano-infinite-canvas.xcg-canvas-night .nic-topbar {
    background: #191d22 !important;
    color: #f4f6f8 !important;
}

.nano-infinite-canvas.xcg-canvas-night .nic-topbar,
.nano-infinite-canvas.xcg-canvas-night .nic-panel,
.nano-infinite-canvas.xcg-canvas-night .nic-panel-head,
.nano-infinite-canvas.xcg-canvas-night .nic-composer {
    background: #20252b !important;
    color: #f4f6f8 !important;
    border-color: #414852 !important;
}

.nano-infinite-canvas.xcg-canvas-night .nic-viewport {
    background-color: #181c21 !important;
    border-color: #414852 !important;
}

.nano-infinite-canvas.xcg-canvas-night .nic-panel-body,
.nano-infinite-canvas.xcg-canvas-night .nic-composer-input,
.nano-infinite-canvas.xcg-canvas-night .nic-composer-prompt-highlight {
    color: #f4f6f8 !important;
}

.nano-infinite-canvas.xcg-canvas-night .nic-composer-input {
    caret-color: #fff !important;
}

.nano-infinite-canvas.xcg-canvas-night .nic-composer-upload-dock {
    background: #272c33 !important;
    color: #d7e0ea !important;
    border-color: #617184 !important;
}

.nano-infinite-canvas.xcg-canvas-night .nic-composer-prompt-highlight .nic-reference-mention-chip {
    background: #35456b !important;
    color: #eef2ff !important;
    box-shadow: 0 0 0 2px #35456b !important;
}

.nano-infinite-canvas.xcg-canvas-night #nic-canvas-agent-toggle,
.nano-infinite-canvas.xcg-canvas-night .nic-composer-pill {
    background: #303944 !important;
    color: #edf2f7 !important;
    border-color: #617184 !important;
}

.nano-infinite-canvas.xcg-canvas-night #nic-canvas-agent-toggle[aria-pressed="true"] {
    background: #35456b !important;
    color: #eef2ff !important;
    border-color: #c7d2fe !important;
}

/* The settings row begins at the panel edge; the send cluster remains on the right. */
.nano-infinite-canvas #infinite-canvas-composer {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.nano-infinite-canvas #infinite-canvas-composer .nic-composer-footer {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* x-cg chat theme adds a focus ring to the textarea; the composer already has its own boundary. */
.nano-infinite-canvas #infinite-canvas-composer .nic-composer-input:focus,
.nano-infinite-canvas #infinite-canvas-composer .nic-composer-input:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Match the x-cg night stylesheet's selector weight so later chat/theme rules cannot repaint controls. */
body.xcg-night .nano-infinite-canvas.xcg-canvas-night #infinite-canvas-composer .nic-composer-upload-dock {
    background: #272c33 !important;
    color: #d7e0ea !important;
    border-color: #617184 !important;
    box-shadow: none !important;
    margin-left: 0 !important;
}

body.xcg-night .nano-infinite-canvas.xcg-canvas-night #infinite-canvas-composer .nic-composer-input,
body.xcg-night .nano-infinite-canvas.xcg-canvas-night #infinite-canvas-composer .nic-composer-prompt-highlight {
    color: #f4f6f8 !important;
}

body.xcg-night .nano-infinite-canvas.xcg-canvas-night #infinite-canvas-composer .nic-composer-input {
    caret-color: #fff !important;
}

/* Absolute last override: the legacy mention block appears later in the stylesheet chain. */
#infinite-canvas-composer .nic-composer-prompt-highlight .nic-reference-mention-chip {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 3px !important;
    background: #e0e7ff !important;
    color: #3730a3 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: inherit !important;
    box-shadow: 0 0 0 2px #e0e7ff !important;
}

body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-composer {
    background: #20252b !important;
    color: #f4f6f8 !important;
}

body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-composer-prompt-highlight .nic-reference-mention-chip {
    background: #35456b !important;
    color: #eef2ff !important;
    box-shadow: 0 0 0 2px #35456b !important;
}

/* Connected generation nodes must inherit the x-cg dark surface instead of the light draft card. */
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-connection-draft {
    background:rgba(31,36,43,.98)!important;
    color:#edf2f7!important;
    border-color:rgba(148,163,184,.34)!important;
    box-shadow:0 18px 44px rgba(0,0,0,.38)!important;
}
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-connection-draft-head,
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-connection-draft textarea,
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-connection-draft-footer{color:#edf2f7!important}
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-connection-draft textarea::placeholder{color:#9aa8b8!important}
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-connection-draft-head button,
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-connection-model,
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-connection-visual,
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-connection-credit{
    background:#303944!important;color:#edf2f7!important;border-color:#617184!important
}
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-connection-draft-thumb,
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-connection-draft-upload{
    background:#252b32!important;color:#d7e0ea!important;border-color:#617184!important
}
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-connection-draft-upload small{background:rgba(15,23,42,.82)!important;color:#fff!important}
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-connection-menu{
    background:#20252b!important;color:#edf2f7!important;border-color:#617184!important
}

/* The Agent pill is also highlighted when the later x-cg night stylesheet is present. */
#infinite-canvas-modal #infinite-canvas-composer #nic-canvas-agent-toggle[aria-pressed="true"]{
    background:#e0e7ff!important;color:#3730a3!important;border-color:#818cf8!important;box-shadow:none!important
}
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night #infinite-canvas-composer #nic-canvas-agent-toggle[aria-pressed="true"]{
    background:#35456b!important;color:#eef2ff!important;border-color:#c7d2fe!important;box-shadow:0 0 0 2px rgba(199,210,254,.18)!important
}
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night .nic-node-toolbar,
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night .nic-result-toolbar{
    background:rgba(255,255,255,.3)!important;border-color:rgba(255,255,255,.45)!important
}

/* Night theme for both the right composer picker and connected-node pickers. */
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night #infinite-canvas-composer .nic-composer-menu,
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night .nic-connection-menu{
    background:#20252b!important;color:#edf2f7!important;border:1px solid #617184!important;box-shadow:0 18px 40px rgba(0,0,0,.38)!important
}
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night #infinite-canvas-composer .nic-composer-menu-head,
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night .nic-composer-menu-head{
    background:#20252b!important;color:#edf2f7!important;border-color:#414852!important
}
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night #infinite-canvas-composer .nic-composer-menu-option,
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night .nic-composer-menu-option{
    background:#20252b!important;color:#edf2f7!important;border-color:transparent!important
}
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night #infinite-canvas-composer .nic-composer-menu-option:hover,
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night #infinite-canvas-composer .nic-composer-menu-option.is-active,
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night .nic-composer-menu-option:hover,
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night .nic-composer-menu-option.is-active{
    background:#35456b!important;color:#eef2ff!important;border-color:#617184!important
}
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night .nic-composer-menu-label,
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night .nic-composer-menu-note,
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night .nic-composer-menu-check,
body.xcg-night.infinite-canvas-open #infinite-canvas-modal.xcg-canvas-night .nic-composer-menu-copy{
    color:inherit!important
}

/* Keep highlighted mentions metrically identical to the textarea text. */
#infinite-canvas-composer .nic-composer-prompt-highlight .nic-reference-mention-chip {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 4px !important;
    background: #e0e7ff !important;
    color: #3730a3 !important;
    font: inherit !important;
    font-size: inherit !important;
    font-weight: 400 !important;
    line-height: inherit !important;
    box-shadow: 0 0 0 2px #e0e7ff !important;
}

/* Final composer layout: upload sits above the editor, while options stay in the footer. */
#infinite-canvas-composer .nic-composer-upload-dock {
    order: 1 !important;
    align-self: flex-start !important;
    margin: 8px 12px 2px !important;
}

#infinite-canvas-composer .nic-composer-input-wrap {
    position: relative !important;
    order: 2 !important;
    min-height: 74px;
}

#infinite-canvas-composer .nic-composer-input-wrap .nic-composer-input {
    position: relative !important;
    z-index: 2 !important;
    background: transparent !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    caret-color: #4f46e5 !important;
}

#infinite-canvas-composer .nic-composer-input-wrap .nic-composer-input::placeholder {
    color: #98a3b5 !important;
    -webkit-text-fill-color: #98a3b5 !important;
}

#infinite-canvas-composer .nic-composer-prompt-highlight {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    overflow: hidden !important;
    padding: 14px 16px !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    color: #172033 !important;
    pointer-events: none !important;
    font: inherit !important;
    line-height: inherit !important;
}

#infinite-canvas-composer .nic-composer-prompt-highlight .nic-reference-mention-chip {
    display: inline-block !important;
    padding: 1px 6px !important;
    border-radius: 6px !important;
    background: #e0e7ff !important;
    color: #3730a3 !important;
    font-weight: 650 !important;
    text-decoration: none !important;
}

#infinite-canvas-composer .nic-composer-footer {
    order: 3 !important;
    justify-content: initial !important;
}

#infinite-canvas-composer #nic-submit-area {
    position: static !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: auto !important;
}

#infinite-canvas-composer .nic-composer-toolrow[hidden] {
    display: none !important;
}

@media (max-width: 720px) {
    #infinite-canvas-composer .nic-composer-upload-dock {
        margin: 6px 10px 0 !important;
    }
}

/* Last cascade guard: the legacy highlight block above must not enlarge @reference chips. */
#infinite-canvas-composer .nic-composer-input-wrap .nic-composer-prompt-highlight .nic-reference-mention-chip {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 3px !important;
    background: #e0e7ff !important;
    color: #3730a3 !important;
    font: inherit !important;
    font-weight: 400 !important;
    line-height: inherit !important;
    text-decoration: none !important;
    box-shadow: 0 0 0 2px #e0e7ff !important;
}

body.xcg-night .nano-infinite-canvas.xcg-canvas-night #infinite-canvas-composer .nic-composer-input-wrap .nic-composer-prompt-highlight .nic-reference-mention-chip {
    background: #35456b !important;
    color: #eef2ff !important;
    box-shadow: 0 0 0 2px #35456b !important;
}

/* Keep the mirrored text layer exactly aligned with the textarea. */
#infinite-canvas-composer .nic-composer-input-wrap .nic-composer-prompt-highlight {
    padding: 4px 0 8px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 20.15px !important;
}

#infinite-canvas-composer .nic-composer-input-wrap .nic-composer-prompt-highlight .nic-reference-mention-chip {
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 20.15px !important;
}

/* Selecting the transparent textarea must not paint a second copy over the mirrored text layer. */
#infinite-canvas-composer .nic-composer-input::selection {
    background: transparent !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

/* x-cg night mode: chat bubbles/results are part of the canvas panel too. */
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-chat-bubble,
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-chat-result {
    background: #20252b !important;
    color: #edf2f7 !important;
    border-color: #414852 !important;
}

body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-chat-bubble strong,
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-chat-bubble p,
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-chat-bubble span,
body.xcg-night .nano-infinite-canvas.xcg-canvas-night .nic-chat-bubble time {
    color: inherit !important;
}

/* Restore native textarea behavior; only reference tokens remain on the mirror layer. */
#infinite-canvas-composer .nic-composer-input-wrap .nic-composer-input {
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
    caret-color: #4f46e5 !important;
    user-select: text !important;
}

#infinite-canvas-composer .nic-composer-input-wrap .nic-composer-prompt-highlight {
    color: transparent !important;
}

#infinite-canvas-composer .nic-composer-input-wrap .nic-prompt-mirror-text {
    color: transparent !important;
}

#infinite-canvas-composer .nic-composer-input::selection {
    background: rgba(79, 70, 229, .26) !important;
    color: #172033 !important;
    -webkit-text-fill-color: #172033 !important;
}

body.xcg-night .nano-infinite-canvas.xcg-canvas-night #infinite-canvas-composer .nic-composer-input-wrap .nic-composer-input {
    color: #edf2f7 !important;
    -webkit-text-fill-color: #edf2f7 !important;
    caret-color: #ffffff !important;
}

body.xcg-night .nano-infinite-canvas.xcg-canvas-night #infinite-canvas-composer .nic-composer-input::selection {
    background: rgba(199, 210, 254, .35) !important;
    color: #edf2f7 !important;
    -webkit-text-fill-color: #edf2f7 !important;
}

/* The settings group starts at the usable composer edge; the send button keeps its own right slot. */
#infinite-canvas-composer .nic-composer-input-wrap .nic-composer-prompt-highlight .nic-reference-mention-chip,
body.xcg-night .nano-infinite-canvas.xcg-canvas-night #infinite-canvas-composer .nic-composer-input-wrap .nic-composer-prompt-highlight .nic-reference-mention-chip {
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
}

#infinite-canvas-composer .nic-composer-options {
    justify-content: flex-start !important;
    margin-left: 0 !important;
}

/* Keep the editor and settings aligned with the reference-image tile. */
#infinite-canvas-composer .nic-composer-upload-dock,
body.xcg-night .nano-infinite-canvas.xcg-canvas-night #infinite-canvas-composer .nic-composer-upload-dock {
    margin-left: 12px !important;
}

#infinite-canvas-composer .nic-composer-input-wrap {
    margin-left: 12px !important;
}

.nano-infinite-canvas #infinite-canvas-composer .nic-composer-footer {
    padding-left: 12px !important;
    padding-right: 8px !important;
}

/* The mention list must keep a usable scroll box instead of being clipped by the viewport. */
#infinite-canvas-composer .nic-reference-mention-menu {
    z-index: 1000 !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    scrollbar-gutter: stable !important;
}

/* Credit is centered over the send button, not over the whole footer. */
#infinite-canvas-composer #nic-submit-area {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin-left: auto !important;
    margin-right: 8px !important;
}

#infinite-canvas-composer #nic-submit-credit {
    position: absolute !important;
    top: -24px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    white-space: nowrap !important;
}

/* x-cg desktop chat used an older three-column footer. Keep its night theme, but start settings at the upload edge. */
@media (min-width: 721px) {
    body.xcg-night .nano-infinite-canvas.xcg-canvas-night #infinite-canvas-composer .nic-composer-footer {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 42px !important;
        grid-template-areas: "tools tools" "options send" !important;
        column-gap: 8px !important;
        row-gap: 10px !important;
        align-items: center !important;
    }

    body.xcg-night .nano-infinite-canvas.xcg-canvas-night #infinite-canvas-composer .nic-composer-options {
        grid-area: options !important;
        justify-self: stretch !important;
        width: 100% !important;
        margin-left: 0 !important;
    }

    body.xcg-night .nano-infinite-canvas.xcg-canvas-night #infinite-canvas-composer .nic-composer-toolrow {
        grid-area: tools !important;
        justify-self: start !important;
    }
}

/* v34 (2026-09-25): connection draft is laid out once at a design zoom and scaled as a whole (core v51).
   Pin the transform origin so scaling keeps the box anchored at its top-left next to the connection line. */
.nic-connection-draft{transform-origin:0 0}
.nic-connection-draft .nic-connection-menu.nic-composer-menu,.nic-connection-draft .nic-connection-menu.nic-composer-menu.open{transform-origin:left bottom;transform:scale(var(--nic-connection-menu-scale,1))}
/* v36: canvas placeholders breathe from the inside (soft blurred colour field); no sliding line, no spinner, no outer glow pulse. */
#infinite-canvas-world .nic-node-pending .nic-node-progress{display:none!important}
#infinite-canvas-world .nic-node.is-pending .nic-node-card{animation:none!important}
#infinite-canvas-world .nic-node.is-pending .nic-node-pending{position:relative;overflow:hidden;isolation:isolate;animation:none!important}
#infinite-canvas-world .nic-node.is-pending .nic-node-pending .nic-chat-spinner{display:none!important}
#infinite-canvas-world .nic-node.is-pending .nic-node-pending::before{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;background:radial-gradient(34% 30% at 28% 32%,rgba(165,180,252,.85),transparent 72%),radial-gradient(36% 32% at 72% 36%,rgba(216,180,254,.7),transparent 72%),radial-gradient(40% 34% at 40% 74%,rgba(147,197,253,.75),transparent 72%),radial-gradient(30% 28% at 78% 78%,rgba(203,213,225,.9),transparent 72%);filter:blur(calc(22px * var(--nic-node-zoom)));animation:nic-pending-inner-breathe 3.6s ease-in-out infinite;will-change:transform,opacity}
body.xcg-night #infinite-canvas-world .nic-node.is-pending .nic-node-pending::before{background:radial-gradient(34% 30% at 28% 32%,rgba(99,102,241,.55),transparent 72%),radial-gradient(36% 32% at 72% 36%,rgba(168,85,247,.42),transparent 72%),radial-gradient(40% 34% at 40% 74%,rgba(59,130,246,.5),transparent 72%),radial-gradient(30% 28% at 78% 78%,rgba(148,163,184,.35),transparent 72%)}
#infinite-canvas-world .nic-node.is-pending .nic-node-pending strong{animation:nic-pending-label-breathe 3.6s ease-in-out infinite}
@keyframes nic-pending-inner-breathe{0%,100%{opacity:.4;transform:translate(-4%,-3%) scale(.94) rotate(0deg)}50%{opacity:1;transform:translate(4%,3%) scale(1.08) rotate(8deg)}}
@keyframes nic-pending-label-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){#infinite-canvas-world .nic-node.is-pending .nic-node-pending::before,#infinite-canvas-world .nic-node.is-pending .nic-node-pending strong{animation:none!important}#infinite-canvas-world .nic-node.is-pending .nic-node-pending::before{opacity:.75}}
/* v36: Img number / pixel size badges show on hover for unselected cards; selected cards keep them. */
#infinite-canvas-world .nic-node:not(.is-selected) .nic-node-pixel-badge{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .12s ease,visibility .12s ease}
#infinite-canvas-world .nic-node:not(.is-selected):hover .nic-node-pixel-badge{opacity:1;visibility:visible}
#infinite-canvas-world .nic-node-pixel-badge:empty{display:none}
/* v37: connection-draft model menu: a single scrollbar (the list) and room for about six models. */
#infinite-canvas-world .nic-connection-draft .nic-connection-menu[data-type="mode"]{max-height:none;overflow:visible}
#infinite-canvas-world .nic-connection-draft .nic-connection-menu[data-type="mode"] .nic-composer-menu-list{max-height:calc(400px * var(--nic-node-zoom));overflow-y:auto;overscroll-behavior:contain}
#infinite-canvas-world .nic-connection-draft .nic-connection-menu.is-below{bottom:auto!important;top:calc(100% + 8px * var(--nic-node-zoom))!important;transform-origin:left top!important}
/* polish-38 (canvas-v56): zoom without blur-then-sharp popping. With will-change:transform the world layer keeps the
   bitmap it had when the wheel started and stretches it (blurry), then snaps sharp when the cards are re-laid out;
   while zooming the layer is repainted at the live scale instead. Panning keeps the composited layer. */
#infinite-canvas-viewport.is-zooming #infinite-canvas-world{will-change:auto!important}
/* polish-39: the v56 rule that hid the selection frame / badges / toolbar while zooming is removed (it blinked on
   every wheel notch). Canvas images decode synchronously from core v57 on. */
/* polish-40 (canvas-v58): no backdrop-filter inside the zoomed canvas layer (hover toolbars ghosted while zooming). */
#infinite-canvas-world .nic-node-toolbar,#infinite-canvas-world .nic-result-toolbar{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.86)!important;border-color:rgba(226,232,240,.95)!important}
#infinite-canvas-world .nic-node-toolbar .nic-node-tool,#infinite-canvas-world .nic-result-toolbar .nic-tool-btn{background:rgba(241,245,249,.9)!important;border-color:rgba(226,232,240,.95)!important}

/* The world transform and node layout are committed together. Never interpolate camera transforms via theme/reduced-motion transitions. */
#infinite-canvas-world,#infinite-canvas-world .nic-node,#infinite-canvas-world .nic-creation-draft,#infinite-canvas-world .nic-connection-draft,#infinite-canvas-world .nic-connection-layer{transition-property:none!important;transition-duration:0s!important;transition-delay:0s!important}