._04e_pq_root {
  flex-shrink: 0;
  min-width: 0;
  position: relative;
}
._04e_pq_withExpand {
  margin-right: 36px;
}
._04e_pq_scrollArea {
  height: 24px;
}
._04e_pq_clip {
  position: relative;
}
._04e_pq_chips {
  -webkit-user-select: none;
  user-select: none;
  cursor: grab;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  width: max-content;
  min-width: 100%;
  display: flex;
}
._04e_pq_root[data-dragging] ._04e_pq_chips,
._04e_pq_root[data-dragging] ._04e_pq_chips * {
  cursor: grabbing !important;
}
._04e_pq_scrollArea ._04e_pq_scrollbar[data-orientation="horizontal"] {
  cursor: grab;
  height: 8px !important;
}
._04e_pq_scrollArea ._04e_pq_thumb {
  flex: 0 0 3px;
  height: 3px !important;
}
._04e_pq_chips > * {
  flex-shrink: 0;
}
._04e_pq_fade {
  pointer-events: none;
  width: 24px;
  height: 24px;
  position: absolute;
  bottom: 0;
}
._04e_pq_fadeLeft {
  background: linear-gradient(to left, transparent, var(--panel-background));
  left: 0;
}
._04e_pq_fadeRight {
  background: linear-gradient(to right, transparent, var(--panel-background));
  right: 0;
}
@property --glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes glow-spin {
  to {
    --glow-angle: 360deg;
  }
}
.node-glow-border {
  background: conic-gradient(
    from var(--glow-angle),
    #ffffff26 0%,
    #ffffff26 20%,
    #fff8eb40 30%,
    #fffaf080 38%,
    #fffdf8d9 44%,
    #fff 50%,
    #fffdf8d9 56%,
    #fffaf080 62%,
    #fff8eb40 70%,
    #ffffff26 80%,
    #ffffff26 100%
  );
  -webkit-mask-composite: xor;
  padding: 1px;
  animation: 1.2s linear infinite glow-spin;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-position:
    0 0,
    0 0;
  mask-position:
    0 0,
    0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}
.node-glow-diffuse {
  background: conic-gradient(
    from var(--glow-angle),
    transparent 0%,
    transparent 15%,
    #fffaf00a 25%,
    #fffcf51f 35%,
    #fffefa40 43%,
    #ffffff59 50%,
    #fffefa40 57%,
    #fffcf51f 65%,
    #fffaf00a 75%,
    transparent 85%,
    transparent 100%
  );
  filter: blur(6px);
  -webkit-mask-composite: xor;
  padding: 4px;
  animation: 1.2s linear infinite glow-spin;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-position:
    0 0,
    0 0;
  mask-position:
    0 0,
    0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}
.node-glow-ambient {
  filter: blur(4px);
  opacity: 0.6;
  background: 0 0;
  border: 1px solid #ffffff1f;
}
@keyframes node-glow-invalid-pulse {
  0%,
  to {
    border-color: #ffffff26;
    box-shadow: 0 0 #fff0;
  }
  50% {
    border-color: #ffffff80;
    box-shadow: 0 0 8px 2px #ffffff26;
  }
}
.node-glow-invalid-pulse {
  border: 1.5px solid #ffffff40;
  animation: 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite node-glow-invalid-pulse;
}
@keyframes connection-breathe {
  0%,
  to {
    filter: drop-shadow(0 0 3px #64b4ff66);
    opacity: 0.8;
  }
  50% {
    filter: drop-shadow(0 0 10px #64b4ffe6);
    opacity: 1;
  }
}
.connection-line-glow {
  animation: 1.5s ease-in-out infinite connection-breathe;
}
.react-flow__edges {
  z-index: 0 !important;
}
@keyframes scissors-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes scissors-fade-out {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.7);
  }
}
.scissors-enter {
  animation: 0.2s forwards scissors-fade-in;
}
.scissors-exit {
  animation: 0.15s forwards scissors-fade-out;
}
.node-skeleton {
  border-radius: var(--radius-xl, 12px);
  background: linear-gradient(135deg, #202020 0%, #484848 100%);
  position: relative;
  overflow: hidden;
}
.canvas-light .node-skeleton {
  background: linear-gradient(135deg, #e6e6e6 0%, #ededed 100%);
}
.node-skeleton-img {
  object-fit: cover;
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}
.node-skeleton.node-thumbnail-handoff {
  z-index: 20;
  pointer-events: none;
  transition: opacity 0.12s ease-out;
  position: absolute;
  top: 0;
  left: 0;
}
.node-thumbnail-handoff--fading {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .node-skeleton.node-thumbnail-handoff {
    transition: none;
  }
}
@keyframes node-fade-in {
  0% {
    opacity: 0;
  }
}
.node-first-appear {
  animation: 0.12s ease-out node-fade-in;
}
@keyframes scriptv2-run-group-hand-cue {
  0%,
  to {
    opacity: 0.82;
    transform: translate(8px, 8px) rotate(-40deg);
  }
  50% {
    opacity: 1;
    transform: translate(-4px, -4px) rotate(-40deg);
  }
}
.animate-scriptv2-run-group-hand-cue {
  animation: 1.15s ease-in-out infinite scriptv2-run-group-hand-cue;
}
@keyframes generating-breathing-dark {
  0%,
  to {
    background-color: #0003;
  }
  50% {
    background-color: #00000080;
  }
}
@keyframes generating-breathing-grey {
  0%,
  to {
    background-color: #45454533;
  }
  50% {
    background-color: #45454580;
  }
}
.generating-breathing-dark {
  animation: 2s ease-in-out infinite generating-breathing-dark;
}
.generating-breathing-grey {
  animation: 2s ease-in-out infinite generating-breathing-grey;
}
@keyframes workspace-layer-generating-breathing {
  0%,
  to {
    background-color: #0003;
  }
  50% {
    background-color: #00000080;
  }
}
@keyframes workspace-layer-generating-breathing-light {
  0%,
  to {
    background-color: #f2f3f5a6;
  }
  50% {
    background-color: #f2f3f5f2;
  }
}
.workspace-layer-generating-breathing {
  animation: 2s ease-in-out infinite workspace-layer-generating-breathing;
}
.canvas-light .workspace-layer-generating-breathing {
  animation-name: workspace-layer-generating-breathing-light;
}
@keyframes workspace-layer-progress-breathing {
  0%,
  to {
    background-color: #ffffff0a;
  }
  50% {
    background-color: #ffffff24;
  }
}
@keyframes workspace-layer-progress-breathing-light {
  0%,
  to {
    background-color: #00000008;
  }
  50% {
    background-color: #0000001a;
  }
}
.workspace-layer-progress-breathing {
  animation: 2s ease-in-out infinite workspace-layer-progress-breathing;
}
.canvas-light .workspace-layer-progress-breathing {
  animation-name: workspace-layer-progress-breathing-light;
}
@property --chat-sweep-start {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --chat-sweep-center-start {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 22.5%;
}
@property --chat-sweep-center-end {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 27.5%;
}
@property --chat-sweep-end {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 50%;
}
@keyframes chat-media-sweep-dots {
  0% {
    --chat-sweep-start: -50%;
    --chat-sweep-center-start: -27.5%;
    --chat-sweep-center-end: -22.5%;
    --chat-sweep-end: 0%;
  }
  41.67%,
  50% {
    --chat-sweep-start: 100%;
    --chat-sweep-center-start: 122.5%;
    --chat-sweep-center-end: 127.5%;
    --chat-sweep-end: 150%;
  }
  91.67%,
  to {
    --chat-sweep-start: -50%;
    --chat-sweep-center-start: -27.5%;
    --chat-sweep-center-end: -22.5%;
    --chat-sweep-end: 0%;
  }
}
.chat-media-sweep-dots {
  background-color: #ebebeb;
}
.chat-media-sweep-dots:after,
.node-media-sweep-dots:after {
  content: "";
  pointer-events: none;
  -webkit-mask-image: linear-gradient(
    45deg,
    transparent var(--chat-sweep-start),
    #000 var(--chat-sweep-center-start),
    #000 var(--chat-sweep-center-end),
    transparent var(--chat-sweep-end)
  );
  -webkit-mask-image: linear-gradient(
    45deg,
    transparent var(--chat-sweep-start),
    #000 var(--chat-sweep-center-start),
    #000 var(--chat-sweep-center-end),
    transparent var(--chat-sweep-end)
  );
  mask-image: linear-gradient(
    45deg,
    transparent var(--chat-sweep-start),
    #000 var(--chat-sweep-center-start),
    #000 var(--chat-sweep-center-end),
    transparent var(--chat-sweep-end)
  );
  background-image: radial-gradient(circle, #00000038 0 0.7px, #0000 0.95px);
  background-position: 5px 5px;
  background-size: 12px 12px;
  animation: 4s ease-in-out infinite chat-media-sweep-dots;
  position: absolute;
  inset: 0;
}
.dark .chat-media-sweep-dots {
  background-color: #2a2a2a;
}
.dark .chat-media-sweep-dots:after {
  background-image: radial-gradient(circle, #ffffff4d 0 0.7px, #0000 0.95px);
}
.canvas-interacting .chat-media-sweep-dots:after,
.canvas-interacting .node-media-sweep-dots:after {
  animation-play-state: paused !important;
}
.node-media-sweep-dots {
  pointer-events: none;
  --node-sweep-dot-color: #ffffff4d;
  background-color: #2a2a2a;
  overflow: hidden;
}
.node-media-sweep-dots:after {
  border-radius: inherit;
  background-image: radial-gradient(
    circle,
    var(--node-sweep-dot-color) 0 0.7px,
    transparent 0.95px
  );
}
.canvas-light .node-media-sweep-dots {
  --node-sweep-dot-color: #00000038;
  background-color: #ebebeb;
}
.node-media-sweep-dots.node-media-sweep-over-content {
  --node-sweep-dot-color: #ffffff4d;
  background-color: #00000059;
}
@media (prefers-reduced-motion: reduce) {
  .node-media-sweep-dots:after {
    opacity: 0.35;
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}
@keyframes chat-generating-text-shimmer {
  0% {
    background-position:
      150% 0,
      0 0;
  }
  to {
    background-position:
      -50% 0,
      0 0;
  }
}
.chat-generating-text-shimmer {
  color: #0000;
  background-image:
    linear-gradient(90deg, #fff0 0%, #fff9 25%, #fff0 57%),
    linear-gradient(90deg, #525252, #525252);
  background-position:
    150% 0,
    0 0;
  background-repeat: no-repeat;
  background-size:
    200% 100%,
    100% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: 1.8s linear infinite chat-generating-text-shimmer;
}
.dark .chat-generating-text-shimmer {
  background-image:
    linear-gradient(90deg, #fff0 0%, #fffffff2 25%, #fff0 57%),
    linear-gradient(90deg, #fff9, #fff9);
}
.canvas-interacting .chat-generating-text-shimmer {
  animation-play-state: paused !important;
}
@keyframes canvas-node-text-shimmer {
  0% {
    background-position: 100% 0;
  }
  to {
    background-position: 0 0;
  }
}
.canvas-node-text-shimmer {
  background-image: linear-gradient(
    90deg,
    var(--fg-disabled) 40%,
    var(--fg-default) 50%,
    var(--fg-disabled) 60%
  );
  color: #0000;
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: 2.4s linear infinite canvas-node-text-shimmer;
}
.layer-progress-text-shimmer {
  color: #0000;
  background-image: linear-gradient(90deg, #fff9 30%, #ffffffbd 50%, #fff9 70%);
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: 340% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: 2.4s linear infinite canvas-node-text-shimmer;
}
.opening-progress-text-shimmer {
  color: #0000;
  background-image: linear-gradient(90deg, #9e9e9e 42%, #fff 50%, #9e9e9e 58%);
  background-position: 100% 0;
  background-repeat: no-repeat;
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: 2s linear infinite canvas-node-text-shimmer;
}
.canvas-interacting .canvas-node-text-shimmer,
.canvas-interacting .layer-progress-text-shimmer {
  animation-play-state: paused !important;
}
@keyframes skeleton-shimmer {
  0% {
    transform: translate(-100%);
  }
  to {
    transform: translate(100%);
  }
}
.skeleton-shimmer:after {
  content: "";
  background: linear-gradient(
    90deg,
    #0000 0%,
    #ffffff0f 40%,
    #ffffff1f 50%,
    #ffffff0f 60%,
    #0000 100%
  );
  animation: 1.5s ease-in-out infinite skeleton-shimmer;
  position: absolute;
  inset: 0;
}
.canvas-light .skeleton-shimmer:after {
  background: linear-gradient(
    90deg,
    #0000 0%,
    #0000000a 40%,
    #00000017 50%,
    #0000000a 60%,
    #0000 100%
  );
}
.canvas-interacting .react-flow__node,
.canvas-interacting .react-flow__edge {
  pointer-events: none !important;
}
.canvas-interacting .node-glow-border,
.canvas-interacting .node-glow-diffuse {
  animation-play-state: paused !important;
}
.canvas-interacting .node-glow-ambient,
.canvas-interacting .node-glow-diffuse {
  filter: none !important;
}
.canvas-alt-copy-drag,
.canvas-alt-copy-drag .react-flow__pane {
  cursor: copy !important;
}
.canvas-interacting .generating-breathing-dark,
.canvas-interacting .generating-breathing-grey,
.canvas-interacting .workspace-layer-generating-breathing,
.canvas-interacting .skeleton-shimmer:after {
  animation-play-state: paused !important;
}
.canvas-agent-drawer-narrow {
  width: calc(100vw + -1 * min(400px, 100vw - 48px)) !important;
}
.react-flow__pane {
  cursor:
    url('data:image/svg+xml;utf8,<svg width="22" height="23" viewBox="0 0 22 23" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g filter="url(#f)"><use xlink:href="%23s" fill="black"/><mask id="m" fill="white"><use xlink:href="%23s"/></mask><path d="M5.81217 5.00547L6.79863 4.81872L6.79863 4.81872L5.81217 5.00547ZM8.54189 18.918L9.52836 18.7313V18.7313L8.54189 18.918ZM9.38132 19.0922L10.2113 19.6558L10.2113 19.6558L9.38132 19.0922ZM12.8249 14.1076L11.9949 13.544L11.9949 13.544L12.8249 14.1076ZM13.0765 13.9267L12.7911 12.9718L12.7911 12.9718L13.0765 13.9267ZM18.9333 12.2276L19.2188 13.1826L19.2188 13.1826L18.9333 12.2276ZM19.0253 11.3841L19.5097 10.5139L19.5097 10.5139L19.0253 11.3841ZM6.49187 4.517L6.00749 5.38728L6.00749 5.38728L6.49187 4.517ZM5.81217 5.00547L4.82571 5.19221L7.55543 19.1048L8.54189 18.918L9.52836 18.7313L6.79863 4.81872L5.81217 5.00547ZM9.38132 19.0922L10.2113 19.6558L13.6549 14.6712L12.8249 14.1076L11.9949 13.544L8.55131 18.5286L9.38132 19.0922ZM13.0765 13.9267L13.362 14.8817L19.2188 13.1826L18.9333 12.2276L18.6479 11.2726L12.7911 12.9718L13.0765 13.9267ZM19.0253 11.3841L19.5097 10.5139L6.97626 3.64671L6.49187 4.517L6.00749 5.38728L18.5409 12.2544L19.0253 11.3841ZM18.9333 12.2276L19.2188 13.1826C20.4701 12.8196 20.6532 11.1404 19.5097 10.5139L19.0253 11.3841L18.5409 12.2544C18.1202 12.0239 18.1876 11.4062 18.6479 11.2726L18.9333 12.2276ZM12.8249 14.1076L13.6549 14.6712C13.5847 14.7727 13.4813 14.8471 13.362 14.8817L13.0765 13.9267L12.7911 12.9718C12.4668 13.0659 12.1856 13.268 11.9949 13.544L12.8249 14.1076ZM8.54189 18.918L7.55543 19.1048C7.80448 20.3741 9.47558 20.7208 10.2113 19.6558L9.38132 19.0922L8.55131 18.5286C8.82198 18.1368 9.43674 18.2643 9.52836 18.7313L8.54189 18.918ZM5.81217 5.00547L6.79863 4.81872C6.88609 5.26449 6.40906 5.6073 6.00749 5.38728L6.49187 4.517L6.97626 3.64671C5.88465 3.04862 4.58796 3.98048 4.82571 5.19221L5.81217 5.00547Z" fill="white" mask="url(#m)"/></g><defs><filter id="f" x="3.80322" y="3.45825" width="17.4629" height="18.8336" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feOffset dy="1"/><feGaussianBlur stdDeviation="1"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend mode="normal" in2="BackgroundImageFix" result="shadow"/><feBlend mode="normal" in="SourceGraphic" in2="shadow" result="shape"/></filter><path id="s" d="M8.54189 18.918L5.81217 5.00547C5.73702 4.62249 6.14686 4.32796 6.49187 4.517L19.0253 11.3841C19.3867 11.5822 19.3289 12.1129 18.9333 12.2276L13.0765 13.9267C12.974 13.9565 12.8851 14.0204 12.8249 14.1076L9.38132 19.0922C9.14878 19.4288 8.62061 19.3192 8.54189 18.918Z"/></defs></svg>')
      6 5,
    default;
}
.canvas-alt-copy-drag .react-flow__pane {
  cursor: copy !important;
}
@keyframes edges-guide-bubble-in {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.edges-guide-bubble {
  animation: 0.22s ease-out edges-guide-bubble-in;
}
@keyframes edges-guide-ripple {
  0% {
    opacity: 0.55;
    transform: scale(0.9);
  }
  70% {
    opacity: 0;
  }
  to {
    opacity: 0;
    transform: scale(1.9);
  }
}
.edges-guide-ripple {
  animation: 1.6s ease-out infinite edges-guide-ripple;
}
@keyframes canvas-mode-hint-breathing {
  0%,
  to {
    box-shadow:
      var(--canvas-shadow-panel),
      0 0 0 0 #fff0;
  }
  50% {
    box-shadow:
      var(--canvas-shadow-panel),
      0 0 12px 2px #ffffff38;
  }
}
@keyframes canvas-mode-hint-breathing-light {
  0%,
  to {
    box-shadow:
      var(--canvas-shadow-panel),
      0 0 0 0 #0000;
  }
  50% {
    box-shadow:
      var(--canvas-shadow-panel),
      0 0 12px 2px #0000002e;
  }
}
.canvas-mode-hint-bar-breathing {
  animation: 3.2s ease-in-out infinite canvas-mode-hint-breathing;
  position: relative;
}
.canvas-light .canvas-mode-hint-bar-breathing {
  animation-name: canvas-mode-hint-breathing-light;
}
.canvas-mode-hint-bar-breathing:before {
  content: "";
  border-radius: inherit;
  background: conic-gradient(
    from var(--glow-angle),
    #64b4ff0d 0%,
    #64b4ff0d 55%,
    #64b4ff38 72%,
    #aad7ff8c 82%,
    #64b4ff38 92%,
    #64b4ff0d 100%
  );
  -webkit-mask-composite: xor;
  pointer-events: none;
  padding: 1.5px;
  animation: 3.5s linear infinite glow-spin;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-position:
    0 0,
    0 0;
  mask-position:
    0 0,
    0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}
.canvas-light .canvas-mode-hint-bar-breathing:before {
  background: conic-gradient(
    from var(--glow-angle),
    #3882e60f 0%,
    #3882e60f 55%,
    #3882e633 72%,
    #3882e680 82%,
    #3882e633 92%,
    #3882e60f 100%
  );
}
.chat-drawer-chat-drawer-root {
  background-color: var(--Surface-Panel-background, #fffffff2);
  flex-direction: column;
  flex-shrink: 0;
  width: 400px;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
}
.chat-drawer-chat-drawer-root-mobile {
  width: 100%;
}
.chat-drawer-chat-title-bar {
  flex-shrink: 0;
  align-items: center;
  gap: 12px;
  height: 64px;
  padding: 0 16px;
  display: flex;
}
.chat-drawer-chat-title-text {
  min-width: 0;
  color: var(--fg-default);
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: auto;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  overflow: hidden;
}
.chat-drawer-title-cta {
  cursor: pointer;
  background: 0 0;
  border: none;
  flex-shrink: 0;
  align-items: center;
  padding: 0;
  display: flex;
}
.chat-drawer-chat-drawer-body {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: hidden;
}
.chat-drawer-chat-drawer-body-replay-playing .copilotKitMessages {
  touch-action: none;
  overscroll-behavior: none;
}
.canvas-playback-playback-float {
  z-index: calc(var(--z-sticky) + 1);
  display: flex;
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
}
.canvas-playback-playback-inner {
  --chat-share-replay-slider-thumb: #5ddcff;
  border: 0.5px solid var(--border-default);
  border-radius: var(--radius-2xl, 16px);
  background-color: var(--Surface-Panel-background);
  flex: 1;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 16px;
  display: flex;
  box-shadow: 0 4px 10px #0000000a;
}
.canvas-playback-play-toggle {
  border-radius: var(--radius-full, 9999px);
  background-color: var(--color-btn-white-bg);
  width: 24px;
  height: 24px;
  color: var(--color-btn-white-text);
  cursor: pointer;
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  display: flex;
}
.canvas-playback-play-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}
.canvas-playback-slider-wrap {
  flex: 1;
  align-items: center;
  min-width: 0;
  height: 16px;
  display: flex;
  position: relative;
}
.canvas-playback-slider-track {
  border-radius: var(--radius-full, 9999px);
  background-color: var(--canvas-node-border-selected);
  height: 4px;
  position: absolute;
  left: 0;
  right: 0;
}
.canvas-playback-slider-fill {
  border-radius: var(--radius-full, 9999px);
  pointer-events: none;
  background-color: #5ddcff;
  height: 4px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.canvas-playback-slider-input {
  z-index: 2;
  cursor: pointer;
  appearance: none;
  background: 0 0;
  width: 100%;
  height: 16px;
  margin: 0;
  position: relative;
}
.canvas-playback-slider-input::-webkit-slider-thumb {
  border: 0.5px solid var(--canvas-controls-bg);
  border-radius: var(--radius-full, 9999px);
  background-color: var(--chat-share-replay-slider-thumb);
  appearance: none;
  width: 12px;
  height: 12px;
  transform: translateY(-4px);
}
.canvas-playback-slider-input::-moz-range-thumb {
  border: 0.5px solid var(--canvas-controls-bg);
  border-radius: var(--radius-full, 9999px);
  background-color: var(--chat-share-replay-slider-thumb);
  width: 12px;
  height: 12px;
}
.canvas-playback-slider-input::-webkit-slider-runnable-track {
  background: 0 0;
  height: 4px;
}
.canvas-playback-slider-input::-moz-range-track {
  background: 0 0;
  height: 4px;
}
.canvas-playback-jump-end-btn {
  border-radius: var(--radius-lg, 8px);
  background-color: var(--btn-secondary-bg);
  height: 32px;
  color: var(--btn-secondary-text);
  cursor: pointer;
  white-space: nowrap;
  padding-left: var(--spacing-3);
  padding-right: var(--spacing-3);
  border: none;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  line-height: normal;
  transition: background-color 0.15s;
  display: flex;
}
.canvas-playback-jump-end-btn:hover:not(:disabled) {
  background-color: var(--btn-secondary-bg-hover);
}
.canvas-playback-jump-end-btn:disabled {
  cursor: not-allowed;
  opacity: 0.35;
}
[data-mantine-color-scheme="dark"] .canvas-playback-play-toggle {
  color: #171717;
  background-color: #f7f7f7;
}
.canvas-empty-state-cta-top-right {
  z-index: var(--z-chrome);
  position: absolute;
  top: 12px;
  right: 12px;
}
.canvas-empty-state-cta-primary {
  min-height: 40px;
  padding: var(--spacing-2, 8px) var(--spacing-3, 12px);
  border-radius: var(--radius-xl, 12px);
  background-color: var(--color-btn-white-bg);
  color: var(--color-btn-white-text);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  display: flex;
}
.canvas-empty-state-zoom-host-bottom-left {
  z-index: var(--z-chrome);
  align-items: center;
  display: flex;
  position: absolute;
  bottom: 12px;
  left: 16px;
}
.canvas-empty-state-center-state {
  background-color: var(--canvas-bg);
  min-height: 100vh;
  color: var(--canvas-controls-text);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: 24px;
  display: flex;
}
.canvas-empty-state-retry-btn {
  border-radius: var(--radius-xl, 12px);
  background-color: var(--color-btn-white-bg);
  color: var(--color-btn-white-text);
  cursor: pointer;
  border: none;
  padding: 8px 20px;
  font-size: 14px;
}
:is(
  [data-mantine-color-scheme="dark"] .canvas-empty-state-cta-primary,
  [data-mantine-color-scheme="dark"] .canvas-empty-state-retry-btn
) {
  color: #171717;
  background-color: #f7f7f7;
}
.thinking-indicator-thinking-text {
  color: var(--fg-muted);
  position: relative;
}
.thinking-indicator-thinking-text:after {
  color: #0000;
  content: attr(data-text);
  background-image: linear-gradient(90deg, #0000 0%, #fffffff2 50%, #0000 100%);
  background-position: -70% 0;
  background-repeat: no-repeat;
  background-size: 40% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: 1.6s linear infinite thinking-indicator-direction-thinking-shimmer;
  position: absolute;
  inset: 0;
}
@keyframes thinking-indicator-direction-thinking-shimmer {
  0% {
    background-position: -70% 0;
  }
  to {
    background-position: 170% 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .thinking-indicator-thinking-text:after {
    content: none;
    animation: none;
  }
}
.free-credit-hint-free-hint-ring {
  outline: 2px solid #5ddcff;
  animation: 1.8s ease-in-out infinite
    free-credit-hint-practice-free-hint-breath;
}
@keyframes free-credit-hint-practice-free-hint-breath {
  0%,
  to {
    box-shadow: 0 0 0 3px #5ddcff40;
  }
  50% {
    box-shadow: 0 0 0 8px #5ddcff14;
  }
}
@media (prefers-reduced-motion: reduce) {
  .free-credit-hint-free-hint-ring {
    animation: none;
  }
}