@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap";
*, :before, :after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  color: #212529;
  background-color: #fff;
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  line-height: 1.5;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: .5rem;
  line-height: 1.2;
}

button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  margin: 0;
}

img, svg {
  vertical-align: middle;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 500;
}

a {
  color: #0d6efd;
  text-decoration: underline;
}

a:hover {
  color: #0a58ca;
}

ul, ol {
  margin-top: 0;
  margin-bottom: 1rem;
}

hr {
  border: 0;
  border-top: 1px solid #0000001a;
  margin: 1rem 0;
}

b, strong {
  font-weight: bolder;
}

small, .small {
  font-size: .875em;
}

table {
  border-collapse: collapse;
}

label {
  margin-bottom: .5rem;
  display: inline-block;
}

.btn {
  text-align: center;
  cursor: pointer;
  user-select: none;
  -webkit-touch-callout: none;
  background-color: #0000;
  border: 1px solid #0000;
  border-radius: .375rem;
  justify-content: center;
  align-items: center;
  height: auto;
  margin-bottom: .15rem;
  padding: .15rem .4rem;
  font-size: .5rem;
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
}

.btn.disabled {
  cursor: not-allowed;
  background-color: #ccc;
  border-color: #ccc;
  transition: all .3s;
}

.btn.enabled {
  cursor: pointer;
  background-color: #337ab7;
  border-color: #2e6da4;
  transition: all .75s;
}

.btn.enabled:hover {
  background-color: #286090;
  border-color: #204d74;
}

#toggle-controls-btn {
  z-index: 1;
  justify-content: center;
  align-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  display: flex;
  position: absolute;
  top: 5px;
  right: 5px;
}

#home-icon {
  color: #4caf50b3;
}

#browse-icon, #prev-icon {
  color: #2196f3b3;
}

#share-icon {
  color: #ff9800b3;
}

#search-icon {
  color: #9c27b0b3;
}

#subscribe-icon {
  color: #f44336b3;
}

.button-options-group {
  background-color: #e6e8f447;
  border: .5px solid #0000001f;
  border-radius: 5px;
  width: 100%;
  max-width: 300px;
  min-height: 50px;
  margin-bottom: 10px;
  padding: 1.5px;
  overflow: hidden visible;
}

.button-options-group .custom-button i {
  color: #007bff;
  margin-right: 5px;
  transition: color .3s;
}

.button-options-group .custom-button:hover i {
  color: #000000b3;
}

.button-options-group .custom-button {
  background-color: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  margin: 4px;
  padding: 6px 12px;
  font-size: 14px;
  transition: all .3s;
}

.button-options-group .custom-button:hover {
  background-color: #e0e0e0;
  box-shadow: 0 2px 4px #0000001a;
}

.shared-users-container {
  max-height: 200px;
  overflow: visible;
}

button {
  white-space: nowrap;
  margin: 10px;
}

.btn-extra-sm {
  margin: 5px;
  padding: .25rem !important;
  font-size: .75rem !important;
}

.button-container {
  background: #f9f9f9;
  border-radius: 20px;
  justify-content: space-between;
  padding: 10px;
  display: flex;
  box-shadow: 0 4px 8px #0000001a;
}

.settings-button {
  margin-bottom: 10px;
}

.custom-button {
  color: #333;
  cursor: pointer;
  user-select: none;
  -webkit-touch-callout: none;
  background-color: #f0f0f0;
  border: 1px solid #33333321;
  border-radius: 10px;
  outline: none;
  justify-content: center;
  align-items: center;
  padding: 1vw 2vw;
  font-size: 1.2vw;
  transition: background-color .3s, box-shadow .3s;
  display: inline-flex;
}

.colored-button {
  color: #272728;
  background-color: #fff;
}

.custom-button:disabled {
  color: #999;
  cursor: default;
  opacity: .6;
  background-color: #e0e0e0;
  border: none;
  border-radius: 10px;
  outline: none;
  justify-content: center;
  align-items: center;
  padding: 1vw 2vw;
  font-size: 1.2vw;
  display: inline-flex;
}

.custom-button:hover {
  background-color: #e0e0e0;
  box-shadow: 0 2px 4px #0000001a;
}

.add-space-icon {
  font-size: 23px;
}

.custom-button:hover .add-space-icon, .custom-button:hover .add-content-icon {
  --fa-primary-color: #2e6ef6;
  --fa-secondary-color: #4284c2;
}

.custom-button:hover .sign-in-icon {
  --fa-primary-color: #42c244;
  --fa-secondary-color: #4284c2;
}

.profile-button:hover .profile-icon {
  --fa-primary-color: #2e6ef6;
  --fa-secondary-color: #4284c2;
}

.custom-button:hover .sign-out-icon {
  --fa-primary-color: #c24242;
  --fa-secondary-color: #4284c2;
}

.custom-button:hover .pdf-icon, .custom-button:hover .word-icon, .custom-button:hover .image-icon, .custom-button:hover .browser-icon, .custom-button:hover .more-options-icon {
  --fa-primary-color: #2e6ef6;
  --fa-secondary-color: #4284c2;
}

.custom-button:hover .selection-box-icon {
  color: #2e6ef6;
}

.custom-button:hover .youtube-icon {
  color: #ec3b1b;
}

.drawing-button:not(:last-child), .file-button:not(:last-child) {
  margin-right: 8px;
}

.drawing-button .button-icon {
  font-size: 16px;
}

.drawing-tools {
  align-items: center;
  display: flex;
}

.circular-button {
  background-color: #919eab2b;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 5vw;
  height: 5vw;
  display: flex;
  box-shadow: 0 4px 8px #0000001a;
}

.fa-file-word, .fa-file-image, .fa-file-pdf, .fa-youtube, .fa-browser {
  font-size: 2vw;
}

.switch {
  width: 40px;
  height: 20px;
  margin-right: 5px;
  display: inline-block;
  position: relative;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  cursor: pointer;
  background-color: #ccc;
  transition: all .4s;
  position: absolute;
  inset: 0;
}

.slider:before {
  content: "";
  background-color: #fff;
  width: 16px;
  height: 16px;
  transition: all .4s;
  position: absolute;
  bottom: 2px;
  left: 2px;
}

input:checked + .slider {
  background-color: #2196f3;
}

input:checked + .slider:before {
  transform: translateX(20px);
}

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

.shape-button i.fas.fa-shapes {
  -webkit-text-fill-color: transparent;
  color: #0000;
  background: linear-gradient(135deg, #a8c0ff 30%, #6a7fdb 70%) text;
}

@supports not (background-clip: text) {
  .shape-button i.fas.fa-shapes {
    color: #6a7fdb;
  }
}

.pencil-button i.fas.fa-pencil-alt {
  -webkit-text-fill-color: transparent;
  color: #0000;
  background: linear-gradient(135deg, #5d7793 30%, #34495e 70%) text;
}

.highlighter-button i.fa.fa-highlighter {
  -webkit-text-fill-color: transparent;
  color: #0000;
  background: linear-gradient(135deg, #ff0 30%, #ffda00 70%) text;
}

.eraser-button i.fas.fa-eraser {
  -webkit-text-fill-color: transparent;
  color: #0000;
  background: linear-gradient(135deg, #fff 30%, #ffcdd2 70%) text;
}

@supports not (background-clip: text) {
  .pencil-button i.fas.fa-pencil-alt {
    color: #5d7793;
  }

  .highlighter-button i.fa.fa-highlighter {
    color: #ff0;
  }

  .eraser-button i.fas.fa-eraser {
    color: #ffcdd2;
  }
}

.pencil-button .svg-inline--fa[data-icon="pencil-alt"], .pencil-button .svg-inline--fa[data-icon="pencil"] {
  color: var(--pencil-icon-color, #4a4a4a);
}

.highlighter-button .svg-inline--fa[data-icon="highlighter"] {
  color: var(--highlighter-icon-color, #ff0);
}

.eraser-button .svg-inline--fa[data-icon="eraser"] {
  color: #ffcdd2;
}

.shape-button .svg-inline--fa[data-icon="shapes"] {
  color: #3f51b5;
}

.pencil-button .svg-inline--fa[data-icon="pencil-alt"]:not([data-prefix="fad"]) path, .pencil-button .svg-inline--fa[data-icon="pencil"]:not([data-prefix="fad"]) path, .highlighter-button .svg-inline--fa[data-icon="highlighter"]:not([data-prefix="fad"]) path {
  fill: currentColor;
}

.eraser-button .svg-inline--fa[data-icon="eraser"]:not([data-prefix="fad"]) path {
  fill: url("#grad-eraser");
}

.shape-button .svg-inline--fa[data-icon="shapes"]:not([data-prefix="fad"]) path {
  fill: url("#grad-shapes");
}

.pencil-button .svg-inline--fa[data-icon="pencil-alt"], .pencil-button .svg-inline--fa[data-icon="pencil"], .highlighter-button .svg-inline--fa[data-icon="highlighter"], .eraser-button .svg-inline--fa[data-icon="eraser"], .shape-button .svg-inline--fa[data-icon="shapes"] {
  filter: drop-shadow(0 1px 1px #00000026);
}

.pencil-button .svg-inline--fa[data-icon="pencil-alt"], .pencil-button .svg-inline--fa[data-icon="pencil"] {
  filter: drop-shadow(0 1px 1px #00000014);
}

.pencil-button .svg-inline--fa[data-prefix="fad"][data-icon="pencil-alt"], .pencil-button .svg-inline--fa[data-prefix="fad"][data-icon="pencil"] {
  --fa-primary-color: var(--pencil-icon-color, #4a4a4a);
  --fa-secondary-color: var(--pencil-icon-accent, #5d7793);
  --fa-secondary-opacity: .85;
}

.highlighter-button .svg-inline--fa[data-prefix="fad"][data-icon="highlighter"] {
  --fa-primary-color: var(--highlighter-icon-color, #ff0);
  --fa-secondary-color: var(--highlighter-icon-accent, #ffda00);
  --fa-secondary-opacity: .9;
}

.eraser-button .svg-inline--fa[data-prefix="fad"][data-icon="eraser"] {
  --fa-primary-color: #fff;
  --fa-secondary-color: #ffcdd2;
  --fa-secondary-opacity: .9;
}

.shape-button .svg-inline--fa[data-prefix="fad"][data-icon="shapes"] {
  --fa-primary-color: #5c6bc0;
  --fa-secondary-color: #3f51b5;
  --fa-secondary-opacity: .9;
}

.svg-inline--fa {
  vertical-align: -.125em;
  width: 1em;
  height: 1em;
  display: inline-block;
  overflow: visible;
}

.fa-2x, .svg-inline--fa.fa-2x {
  font-size: 2em;
}

.fa-3x, .svg-inline--fa.fa-3x {
  font-size: 3em;
}

@keyframes fa-spin {
  100% {
    transform: rotate(360deg);
  }
}

.svg-inline--fa.fa-spin {
  animation: 2s linear infinite fa-spin;
}

.btn-sm {
  padding: .15rem .35rem;
  font-size: .5rem;
  line-height: 1.2;
}

.btn-primary {
  color: #fff;
  background: #3a7afe;
  border: 1px solid #2f6fe8;
}

.btn-primary:hover {
  background: #2f6fe8;
}

.btn-primary:disabled, .btn-primary[disabled] {
  opacity: .65;
  pointer-events: none;
}

.btn-secondary {
  color: #111;
  background: #0000000f;
  border: 1px solid #00000014;
}

.btn-secondary:hover {
  background: #0000001a;
}

.btn-secondary:disabled, .btn-secondary[disabled] {
  opacity: .6;
  pointer-events: none;
}

.btn:not(.disabled) {
  cursor: pointer;
}

.btn:disabled, .btn[disabled] {
  cursor: not-allowed;
  opacity: .6;
}

.context-menu {
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  background-color: #fff;
  border-radius: 8px;
  min-width: 180px;
  padding: 6px 0;
  transition: opacity .15s ease-out, transform .15s ease-out;
  position: absolute;
  transform: scale(.95);
  box-shadow: 0 4px 12px #00000026;
}

.context-menu.show {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.context-menu > div:not(.copy-text-item) {
  cursor: pointer;
  white-space: nowrap;
  opacity: 0;
  padding: 6px 12px;
  transition: opacity .2s ease-out, transform .2s ease-out;
  transform: translateY(4px);
}

.context-menu.show > div:not(.copy-text-item) {
  opacity: 1;
  transform: translateY(0);
}

.context-menu > div:not(.copy-text-item):hover {
  background-color: #0000000d;
}

.change-node-type {
  position: relative;
}

.change-node-type:hover .nested-context-menu {
  display: block;
}

.nested-context-menu {
  white-space: nowrap;
  z-index: 1001;
  cursor: default;
  background-color: #fff;
  border: 1px solid #c9c9c9;
  border-radius: 5px;
  min-width: 150px;
  padding: 4px 0;
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  box-shadow: 0 2px 4px #00000026;
}

.nested-context-menu:before {
  content: "";
  z-index: 1002;
  background-color: #fff;
  border-top: 1px solid #c9c9c9;
  border-left: 1px solid #c9c9c9;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 8px;
  left: -5px;
  transform: rotate(-45deg);
}

.nested-context-menu div {
  padding: 4px 16px;
}

.nested-context-menu div:hover {
  background-color: #f0f0f0;
}

.context-menu > div.enabled {
  background-color: #e6ffe6;
  padding-left: 30px;
  position: relative;
}

.context-menu > div.enabled:before {
  content: "✓";
  color: green;
  position: absolute;
  left: 10px;
}

.context-menu > div.disabled {
  background-color: #ffe6e6;
  padding-left: 30px;
  position: relative;
}

.context-menu > div.disabled:before {
  content: "✗";
  color: red;
  position: absolute;
  left: 10px;
}

.context-menu > div.enabled:hover {
  background-color: #c6ffc6;
}

.context-menu > div.disabled:hover {
  background-color: #ffc6c6;
}

.prominent-menu-item {
  color: #0056b3;
  background-color: #f9f9f9;
  border-left: 4px solid #0056b3;
  margin: 2px 0;
  font-weight: bold;
}

.prominent-menu-item:hover {
  background-color: #e8e8e8;
}

.prominent-menu-item.convert-to-video {
  color: #ff7b00;
  background: linear-gradient(90deg, #fff7ed 0%, #fff 50%, #fff7ed 100%);
  border-left-color: #ff7b00;
  animation: 2.4s ease-in-out infinite ctv-pulse;
  position: relative;
  overflow: hidden;
}

.prominent-menu-item.convert-to-video:after {
  content: "";
  background: linear-gradient(90deg, #fff0 0%, #fff9 50%, #fff0 100%);
  width: 40%;
  height: 100%;
  animation: 2.4s ease-in-out infinite ctv-shimmer;
  position: absolute;
  top: 0;
  left: -40%;
  transform: skewX(-20deg);
}

@keyframes ctv-pulse {
  0%, 100% {
    box-shadow: 0 0 #ff7b0040;
  }

  50% {
    box-shadow: 0 0 0 8px #ff7b0014;
  }
}

@keyframes ctv-shimmer {
  0% {
    left: -40%;
  }

  100% {
    left: 120%;
  }
}

.nested-context-menu > div.enabled, .nested-context-menu > div.disabled {
  padding-left: 30px;
  position: relative;
}

.nested-context-menu > div.enabled {
  background-color: #e6ffe6;
}

.nested-context-menu > div.disabled {
  background-color: #fff;
}

.nested-context-menu > div.enabled:before {
  content: "✓";
  color: green;
  position: absolute;
  left: 10px;
}

.nested-context-menu > div.enabled:hover {
  background-color: #c6ffc6;
}

.nested-context-menu > div.disabled:hover {
  background-color: #f0f0f0;
}

.context-menu > div.submenu {
  position: relative;
}

.context-menu > div.submenu:hover > .nested-context-menu {
  display: block;
}

.file-context-menu {
  z-index: 1000;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 5px;
  box-shadow: 0 2px 10px #0003;
}

.file-context-menu div {
  padding: 5px 10px;
}

.file-context-menu div:hover {
  background-color: #f0f0f0;
}

.generate-video-icon {
  color: #f44336;
}

.summarize-icon {
  color: #2196f3;
}

.add-node-icon {
  color: #4caf50;
}

.expand-icon {
  color: #ff9800;
}

.visualize-icon {
  color: #9c27b0;
}

.markdown-icon {
  color: #ff9800;
}

.expand-bullets-icon {
  color: #9c27b0;
}

.save-brain-icon {
  color: #e91e63;
}

.full-function-icon {
  color: #795548;
}

.change-type-icon {
  text-align: center;
  width: 16px;
  margin-right: 8px;
}

.user-icon {
  color: #3498db;
}

.assistant-icon {
  color: #9b59b6;
}

.system-icon {
  color: #e74c3c;
}

.text-icon {
  color: #2ecc71;
}

.new-space-icon {
  color: #f39c12;
}

.visualize-directory-icon {
  color: #1abc9c;
}

.change-type-icon:hover {
  opacity: .8;
}

.action-icon {
  margin-right: 8px;
}

.generate-image-icon {
  color: #4caf50;
}

.copy-icon {
  color: #2196f3;
}

.change-color-icon {
  color: #ff9800;
}

.action-icon:hover {
  opacity: .8;
}

.text-size-item {
  cursor: default;
  border-top: 1px solid #e0e0e0;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px;
  display: flex;
}

.text-size-arrow {
  cursor: pointer;
  user-select: none;
  color: #333;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 14px;
}

.text-size-arrow:hover {
  background-color: #e0e0e0;
}

.text-size-display {
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 3px;
  width: 40px;
  padding: 2px;
  font-weight: bold;
}

.text-size-display:focus {
  border-color: #007bff;
  outline: none;
}

.text-size-display::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.text-size-display::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.text-size-display {
  -moz-appearance: textfield;
}

.copy-text-item {
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  display: flex;
}

.copy-text-button {
  user-select: none;
  color: #333;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 3px;
  justify-content: center;
  align-items: center;
  padding: 4px 8px;
  font-size: 14px;
  transition: background-color .2s, transform .1s;
  display: flex;
}

.copy-text-button:hover {
  background-color: #e0e0e0;
}

.copy-text-button:active {
  transform: scale(.95);
}

.copy-text-button i {
  margin-right: 5px;
}

@keyframes copiedAnimation {
  0%, 100% {
    opacity: 0;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(-20px);
  }
}

.copy-feedback {
  color: #fff;
  pointer-events: none;
  background-color: #000000b3;
  border-radius: 3px;
  padding: 5px 10px;
  font-size: 12px;
  animation: 1.5s ease-in-out copiedAnimation;
  position: absolute;
}

.custom-svg-icon {
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  display: inline-flex;
}

.custom-svg-icon svg {
  width: 100%;
  height: 100%;
}

.openai-icon svg {
  color: #10a37f;
}

.anthropic-icon svg {
  color: #000;
}

.conversation-submenu {
  border-left: 3px solid #1a73e8;
  padding-left: 5px !important;
}

.conversation-submenu:hover {
  background: #f0f7ff;
}

.conversation-submenu i.fa-comments {
  color: #1a73e8;
}

.website-submenu {
  border-left: 3px solid #f9ab00;
  padding-left: 5px !important;
}

.website-submenu:hover {
  background: #fffaf0;
}

.website-submenu i.fa-globe {
  color: #f9ab00;
}

.conversation-submenu > .nested-context-menu {
  background: #f8f9fa;
  border: 1px solid #e8f4fd;
}

.conversation-submenu > .nested-context-menu > div {
  border-left: 3px solid #1a73e8;
  padding-left: 13px;
}

.conversation-submenu > .nested-context-menu > div:hover {
  background: #e8f4fd;
}

.website-submenu > .nested-context-menu {
  background: #fffbf0;
  border: 1px solid #fef7e0;
}

.website-submenu > .nested-context-menu > div {
  border-left: 3px solid #f9ab00;
  padding-left: 13px;
}

.website-submenu > .nested-context-menu > div:hover {
  background: #fef7e0;
}

.custom-svg-icon svg path[fill="#FF681A"] {
  fill: #ff681a !important;
}

.context-menu.fan-right, .context-menu.fan-left {
  box-shadow: none;
  background: none;
  border-radius: 0;
  min-width: 0;
  padding: 0;
}

.context-menu.fan-right > div:not(.copy-text-item), .context-menu.fan-left > div:not(.copy-text-item) {
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  background: #fff;
  border-radius: 8px;
  margin: 0;
  padding: 4px 8px;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .24s, box-shadow .24s;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(0)translateY(0)scale(.96)rotate(0);
  box-shadow: 0 4px 10px #0000001f;
}

.context-menu.fan-right > div:not(.copy-text-item) {
  transform-origin: 0%;
}

.context-menu.fan-left > div:not(.copy-text-item) {
  transform-origin: 100%;
}

.context-menu.fan-right.show > div:not(.copy-text-item), .context-menu.fan-left.show > div:not(.copy-text-item) {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(var(--x, 0px)) translateY(var(--y, 0px)) rotate(var(--rot, 0deg)) scale(1);
}

.context-menu.fan-right.show > div:not(.copy-text-item):hover, .context-menu.fan-left.show > div:not(.copy-text-item):hover {
  box-shadow: 0 10px 22px #0000002e, 0 6px 14px #0000001f;
}

:root {
  --user-node-stroke: #e6ddc1;
  --user-node-fill: #66cdaa;
  --system-node-stroke: #e6ddc1;
  --system-node-fill: #7bc4d1;
  --assistant-node-stroke: #e6ddc1;
  --assistant-node-fill: #73b9ff;
  --graph-node-text-color: #3a3a3a;
  --graph-node-gradient-color: #f0c040cc;
  --html-node-base-shadow: 1px 2px 4px #00000040;
  --html-node-selected-shadow: 0 0 10px 5px #3333334d;
}

.grammarly-button, .grammarly-card, .grammarly-underline {
  display: none !important;
}

.node {
  contain: layout;
  cursor: pointer;
}

.node-text {
  white-space: pre-wrap;
  color: #333;
  width: 100%;
  height: auto;
  min-height: 40px;
  cursor: inherit;
  user-select: text;
  border-radius: 8px;
  outline: none;
  padding: 16px;
  line-height: 1.2em;
  display: inline-block;
}

.node-text * {
  user-select: text;
}

.node-text.type-text {
  margin: 0;
  padding: 0;
}

.node-text.loading-node {
  white-space: normal;
  margin: 0;
  padding: 0;
}

.node-text--raw-html {
  white-space: normal !important;
  margin: 0 !important;
  padding: 0 !important;
}

.node-text--raw-html > :first-child {
  margin-top: 0 !important;
}

.node-text--raw-html > :last-child {
  margin-bottom: 0 !important;
}

.node-text--raw-html body {
  margin: 0 !important;
}

.node-text.type-text p {
  margin: 0;
}

.node-text ul, .node-text ol {
  white-space: normal;
  margin-top: .5em;
  margin-bottom: .5em;
  padding-left: 1.5em;
}

.node-text li {
  white-space: normal;
  margin-bottom: .2em;
  line-height: 1.4;
}

.node-text li:last-child {
  margin-bottom: 0;
}

#pinned-node-host .gq-pinned-focus-hit {
  background: linear-gradient(90deg, #2563eb33 0%, #2563eb14 100%);
  border-radius: 8px;
  margin-left: -4px;
  padding: 2px 6px;
  box-shadow: inset 0 0 0 1px #2563eb59;
}

body.dark-mode #pinned-node-host .gq-pinned-focus-hit {
  background: linear-gradient(90deg, #60a5fa47 0%, #1e40af33 100%);
  box-shadow: inset 0 0 0 1px #93c5fd80;
}

.node-text ul ul, .node-text ul ol, .node-text ol ul, .node-text ol ol {
  margin-top: .2em;
  margin-bottom: 0;
}

.node-text p {
  margin: .6em 0;
}

.node-text img, .node-text figure img {
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  max-width: 100%;
  height: auto;
  display: block;
}

.node-text p:has( > img:only-child) {
  margin: .3em 0;
}

@keyframes twinklingEffect {
  0%, 100% {
    stroke: #0000ffb3;
    stroke-width: 3px;
    stroke-opacity: 1;
    fill-opacity: 1;
  }

  25%, 75% {
    stroke: #fff;
    stroke-width: 6px;
    stroke-opacity: .5;
    fill-opacity: .5;
  }

  50% {
    stroke: #00f;
    stroke-width: 3px;
    stroke-opacity: 1;
    fill-opacity: 1;
  }
}

.unseen-graph {
  animation: 1.5s infinite twinklingEffect !important;
}

.node-text.question {
  padding: 6px 12.5px 12.5px 25px;
}

.node-text.image, .node-text.video {
  padding: 0;
  overflow: hidden;
}

.node-text.video > video {
  object-fit: cover;
  object-position: center;
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.node-text.file {
  border-radius: 10px;
  padding: 2px;
  white-space: normal !important;
}

.node-text.graph {
  text-align: center;
  color: #3a3a3a;
  background-image: radial-gradient(circle, #f0c04000 0% 25%, #f0c040cc 100%);
  justify-content: center;
  align-items: center;
  height: 100%;
  font-weight: bold;
  display: flex;
}

.node-text.title {
  text-align: center;
}

.memory-path {
  fill: #4287f5;
  opacity: .2;
}

.memory-graph {
  background-color: #4287f51a;
  border: 1px solid #4287f533;
}

.graph-path {
  fill: #f0c040;
  opacity: .2;
}

.div-type-image {
  stroke-width: 0;
  fill: #0000;
}

.centered-text {
  justify-content: center;
  align-items: center;
  display: flex;
}

.labelContainer {
  contain: content;
  background-color: #0000;
  border-radius: 10px;
  transition: stroke .6s, height .5s, y .5s;
  animation: .25s ease-in-out fadeIn;
}

.node circle {
  transition: stroke .6s, height .5s, y .5s;
  animation: .25s ease-in-out fadeIn;
}

.top-bauble-style {
  cursor: grab;
  fill: #fff;
  stroke: #858585;
  stroke-width: 1px;
  transition: all .3s;
}

.top-bauble-style:hover {
  stroke-width: 3px;
}

.top-bauble-system {
  cursor: grab;
  fill: #fdca40;
  stroke: #8b6601;
  transition: all .3s;
}

.top-bauble-system:hover {
  stroke-width: 3px;
}

.bottom-bauble-style {
  cursor: grab;
  fill: #fff;
  stroke: #858585;
  stroke-width: 1px;
  transition: all .3s;
}

.bottom-bauble-style:hover {
  stroke-width: 3px;
}

.bottom-bauble-settings {
  cursor: grab;
  fill: #fdca40;
  transition: all .3s;
}

.bottom-bauble-settings:hover {
  stroke-width: 3px;
}

.top-bauble-graph, .bottom-bauble-graph {
  cursor: grab;
  fill: #fff9ebb3;
  stroke: #e6ddc1ab;
  stroke-width: 1px;
  transition: all .3s;
}

.top-bauble-graph:hover, .bottom-bauble-graph:hover {
  stroke-width: 3px;
}

.html-node .html-node-background {
  box-shadow: var(--html-node-base-shadow);
  pointer-events: none;
  z-index: 0;
  border-radius: 10px;
  transition: border .6s, height .5s, top .5s, background-color .3s, box-shadow .3s;
  animation: .25s ease-in-out fadeIn;
  position: absolute;
  inset: 0;
}

.visualization-min-card {
  box-sizing: border-box;
  color: #183153;
  background: radial-gradient(circle at 0 0, #fffffff5, #ffffffb8 38%, #0000 39%), linear-gradient(155deg, #fbf5df 0%, #d9eef7 52%, #c6dff1 100%);
  border: 1px solid #1831531f;
  border-radius: 22px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 18px 16px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffffb8, 0 16px 30px #4f76922e;
}

.widget-min-card {
  background: radial-gradient(circle at 0 0, #fffffff5, #ffffffb3 38%, #0000 39%), linear-gradient(155deg, #f7efe2 0%, #e5f2f8 50%, #dbe7f5 100%);
  border-color: #233b591c;
  box-shadow: inset 0 1px #ffffffbd, 0 16px 30px #42607e29;
}

.widget-min-card:after {
  background: #ffffff42;
  box-shadow: inset 0 0 0 1px #233b5914;
}

.widget-min-card .visualization-min-card__icon {
  color: #f8fbff;
  background: linear-gradient(145deg, #1c3656f5, #325478f5);
  box-shadow: 0 12px 26px #1a2e4942;
}

.widget-min-card .visualization-min-card__eyebrow {
  color: #172f4d9e;
}

.widget-min-card .visualization-min-card__title {
  color: #132944;
}

.widget-min-card .visualization-min-card__subtitle {
  color: #132944bd;
}

.visualization-min-card:after {
  content: "";
  background: #ffffff4d;
  border-radius: 16px;
  width: 56px;
  height: 56px;
  position: absolute;
  top: 12px;
  right: 12px;
  box-shadow: inset 0 0 0 1px #18315314;
}

.visualization-min-card__icon {
  color: #fff7d8;
  background: #183153eb;
  border-radius: 16px;
  justify-content: center;
  align-items: center;
  width: 52px;
  height: 52px;
  font-size: 22px;
  display: flex;
  box-shadow: 0 10px 24px #18315338;
}

.visualization-min-card__eyebrow {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #1831539e;
  font-size: 11px;
  font-weight: 700;
}

.visualization-min-card__title {
  letter-spacing: -.02em;
  color: #10263f;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  display: -webkit-box;
  overflow: hidden;
}

.visualization-min-card__subtitle {
  color: #10263fc2;
  font-size: 12px;
  line-height: 1.35;
}

.node rect.main-node-rect.type-visualization-minimized, .node rect.main-node-rect.type-visualization-minimized.rect-hover, .node.selected-node rect.main-node-rect.type-visualization-minimized, .node rect.main-node-rect.type-widget-minimized, .node rect.main-node-rect.type-widget-minimized.rect-hover, .node.selected-node rect.main-node-rect.type-widget-minimized {
  stroke: #0000 !important;
  stroke-width: 0 !important;
  filter: none !important;
}

.html-node:has(.html-node-background.type-visualization-minimized) .html-node-content, .html-node:has(.html-node-background.type-widget-minimized) .html-node-content, .html-node:has(.iframe-container) .html-node-content {
  border-radius: 22px;
}

.html-node .html-node-background.type-text {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
}

.html-node .html-node-background.type-learning-question {
  background: linear-gradient(168deg, #fffaf0fa 0%, #ffe8c2fa 52%, #ffcd86f5 100%) !important;
  border: 1px solid #d06b1db8 !important;
  border-radius: 18px !important;
  box-shadow: inset 0 1px #ffffffb8, 0 14px 30px #ce79232e !important;
}

.html-node .html-node-background.type-learning-question:after {
  content: attr(data-learning-badge);
  color: #fff7ec;
  letter-spacing: .1em;
  text-transform: uppercase;
  pointer-events: none;
  background: #8f430de6;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 700;
  position: absolute;
  top: 10px;
  left: 12px;
  box-shadow: 0 8px 20px #8f430d2e;
}

.html-node .html-node-background.type-learning-question[data-learning-status="correct"]:after, .html-node .html-node-background.type-learning-question[data-learning-status="answered"]:after {
  background: #337542f0;
  box-shadow: 0 8px 20px #33754233;
}

.html-node .html-node-background.type-learning-question.rect-hover, .html-node.selected-node .html-node-background.type-learning-question {
  border-color: #8f430de0 !important;
  box-shadow: 0 0 0 1px #8f430d2e, 0 18px 34px #a85c193d !important;
}

.html-node[data-agent-flag-label]:after {
  content: attr(data-agent-flag-label);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #5a3210;
  pointer-events: none;
  z-index: 6;
  background: #fff1d6f5;
  border: 1px solid #b06b1852;
  border-radius: 999px;
  max-width: min(220px, 100% - 16px);
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  position: absolute;
  top: -10px;
  right: 8px;
  overflow: hidden;
  box-shadow: 0 8px 20px #4a31111f;
}

.html-node[data-agent-flag-kind="missing_prerequisite"]:after {
  color: #7b3314;
  background: #ffead7fa;
  border-color: #d4581e61;
}

.html-node[data-agent-flag-kind="possible_misconception"]:after {
  color: #7a2318;
  background: #ffe4dffa;
  border-color: #b1432a61;
}

.html-node[data-agent-flag-kind="needs_rewrite"]:after {
  color: #673618;
  background: #ffefdafa;
  border-color: #8b4a1c61;
}

.html-node[data-agent-flag-kind="out_of_order"]:after {
  color: #76440e;
  background: #fff3d8fa;
  border-color: #b06b1861;
}

.html-node[data-agent-flag-kind="unclear"]:after {
  color: #6a4217;
  background: #fff6e2fa;
  border-color: #a0601657;
}

.html-node .html-node-background.type-text.rect-hover {
  box-shadow: none !important;
  border: none !important;
}

.html-node.selected-node .html-node-background.type-text {
  box-shadow: none !important;
}

.html-node .html-node-background.type-visualization-minimized, .html-node .html-node-background.type-widget-minimized {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
  border-radius: 22px !important;
}

.html-node .html-node-background.type-widget {
  border-color: #233b5924;
}

.html-node .html-node-background.type-visualization-minimized.rect-hover, .html-node.selected-node .html-node-background.type-visualization-minimized {
  background: none !important;
  border: 1px solid #4e421f !important;
  border-radius: 22px !important;
  box-shadow: 0 0 0 1px #4e421f38, 1px 2px 4px #0000002e !important;
}

.html-node .html-node-background.type-widget-minimized.rect-hover, .html-node.selected-node .html-node-background.type-widget-minimized {
  background: none !important;
  border: 1px solid #233b5994 !important;
  border-radius: 22px !important;
  box-shadow: 0 0 0 1px #233b5933, 1px 2px 4px #00000029 !important;
}

.html-node .html-node-background.type-widget.rect-hover, .html-node.selected-node .html-node-background.type-widget {
  box-shadow: 0 0 0 1px #233b5924, var(--html-node-selected-shadow) !important;
  border: 1px solid #233b5980 !important;
}

body.dark-mode .visualization-min-card, body.dark-mode .widget-min-card {
  color: #dce8f7;
  background: radial-gradient(circle at 0 0, #ffffff14, #ffffff05 38%, #0000 39%), linear-gradient(155deg, #162234 0%, #12253a 52%, #0e1b2c 100%);
  border-color: #94a3b829;
  box-shadow: inset 0 1px #ffffff0f, 0 18px 34px #0206175c;
}

body.dark-mode .widget-min-card {
  background: radial-gradient(circle at 0 0, #ffffff14, #ffffff05 38%, #0000 39%), linear-gradient(155deg, #18212f 0%, #173246 52%, #111d2b 100%);
}

body.dark-mode .html-node .html-node-background.type-widget {
  box-shadow: inset 0 1px 0 #ffffff0a, var(--html-node-base-shadow) !important;
  background: linear-gradient(160deg, #151f2dfa 0%, #122839fa 56%, #0e1926fa 100%) !important;
  border-color: #94a3b82e !important;
}

body.dark-mode .html-node .html-node-background.type-widget.rect-hover, body.dark-mode .html-node.selected-node .html-node-background.type-widget {
  box-shadow: 0 0 0 1px #bfdbfe24, var(--html-node-selected-shadow) !important;
  border-color: #bfdbfe6b !important;
}

body.dark-mode .html-node .html-node-background.type-learning-question {
  background: linear-gradient(168deg, #3e220bfa 0%, #582c0bfa 56%, #753c11f5 100%) !important;
  border-color: #ffba5e66 !important;
  box-shadow: inset 0 1px #ffffff0a, 0 18px 34px #03060c42 !important;
}

body.dark-mode .html-node .html-node-background.type-learning-question:after {
  color: #371903;
  background: #ffb553eb;
  box-shadow: 0 8px 18px #0a0e1857;
}

body.dark-mode .html-node[data-agent-flag-label]:after {
  color: #ffe1b8;
  background: #382210f5;
  border-color: #f5a75647;
  box-shadow: 0 8px 22px #02061757;
}

body.dark-mode .visualization-min-card:after, body.dark-mode .widget-min-card:after {
  background: #ffffff0f;
  box-shadow: inset 0 0 0 1px #e2e8f014;
}

body.dark-mode .visualization-min-card__icon, body.dark-mode .widget-min-card .visualization-min-card__icon {
  color: #f8f4d8;
  background: #09101ceb;
  box-shadow: 0 12px 28px #02061757;
}

body.dark-mode .visualization-min-card__eyebrow, body.dark-mode .widget-min-card .visualization-min-card__eyebrow {
  color: #bfdbfead;
}

body.dark-mode .visualization-min-card__title, body.dark-mode .widget-min-card .visualization-min-card__title {
  color: #eef4ff;
}

body.dark-mode .visualization-min-card__subtitle, body.dark-mode .widget-min-card .visualization-min-card__subtitle {
  color: #d6e4f7d1;
}

.html-node .html-node-content > :not(.html-node-background) {
  z-index: 1;
  position: relative;
}

.html-node.selected-node .html-node-background {
  box-shadow: var(--html-node-selected-shadow);
}

.rect-hover {
  stroke-width: 1px !important;
  stroke: #4e421f !important;
}

.html-node .html-node-background.rect-hover {
  box-shadow: 0 0 0 1px #4e421f4d, var(--html-node-base-shadow);
  border: 1px solid #4e421f !important;
}

:not(.dark-mode) .rect-hover {
  stroke: #4e421f !important;
}

:not(.dark-mode) .html-node .html-node-background.rect-hover {
  border-color: #4e421f !important;
}

.selected-node {
  box-shadow: var(--html-node-selected-shadow);
  border-radius: 10px;
}

.loading {
  animation: 1.5s infinite loading !important;
}

@keyframes loading {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 10px 5px #3333334d;
  }

  50% {
    opacity: .5;
    box-shadow: 0 0 15px 10px #3333331a;
  }
}

.node .type-file {
  stroke-width: 1px;
  stroke: #e6ddc1;
  fill: #c7d3e0;
}

.node .type-loading-node {
  stroke-width: 1px;
  stroke: #0000001a;
  fill: #fff;
}

.node .type-side {
  fill: #7aa6d2;
}

.node .type-question {
  fill: #ffa07a;
}

.node .type-widget {
  stroke-width: 1px;
  stroke: #233b5924;
  fill: #fff;
}

.node .type-widget.role-user {
  stroke: #233b5924;
  fill: #fff;
}

.node .role-user {
  stroke-width: 1px;
  stroke: var(--user-node-stroke);
  fill: var(--user-node-fill);
}

.node .role-system {
  stroke-width: 1px;
  stroke: var(--system-node-stroke);
  fill: var(--system-node-fill);
}

.node .role-assistant {
  stroke-width: 1px;
  stroke: var(--assistant-node-stroke);
  fill: var(--assistant-node-fill);
}

.node .type-graph {
  stroke-width: 1px;
  stroke: #e6ddc1;
  fill: #0000;
}

.node .type-folder, .node .type-title, .node .type-text {
  stroke: none;
  fill: #0000;
}

.loading-node-card {
  box-sizing: border-box;
  text-align: center;
  color: #3a3a3a;
  background: #fff;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 100%;
  padding: 18px;
  display: flex;
}

.loading-node-card__visual {
  justify-content: center;
  align-items: center;
  min-height: 68px;
  display: flex;
}

.loading-node-card__spinner {
  border: 4px solid #e6e6e6;
  border-top-color: #3a7afe;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: 1.2s linear infinite flap-loading-spin;
}

.loading-node-card__error-icon {
  color: #d14343;
  background: #fff0f0;
  border: 2px solid #d1434340;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  display: flex;
}

.loading-node-card__message {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}

.loading-node-card__detail {
  color: #6b7280;
  word-break: break-word;
  font-size: 12px;
  line-height: 1.45;
}

.loading-node-card--failed .loading-node-card__message {
  color: #b42318;
}

.node rect.flap-rect, .node rect.left-expansion-button-rect {
  transition: stroke .6s, height .5s, y .5s;
}

.node rect.flap-pulse, .node path.flap-pulse, .node circle.flap-pulse, .html-node .html-node-flap-background.flap-pulse, .html-node .html-node-background.flap-pulse {
  animation: .25s ease-in-out fadeIn, .5s infinite alternate flappulse !important;
}

@keyframes flappulse {
  0% {
    fill: #ffdead;
    background-color: #ffdead;
  }

  100% {
    fill: #ffa07a;
    background-color: #ffa07a;
  }
}

@keyframes flap-loading-spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.flap-content:focus {
  outline: none;
}

.flap-content {
  justify-content: center;
  align-items: center;
  font-weight: bold;
  display: flex;
}

.resize-icon {
  cursor: nwse-resize;
}

.close-icon {
  cursor: pointer;
}

.close-icon i {
  box-sizing: border-box;
  background-color: #f0f0f050;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 82%;
  height: 80%;
  transition: background-color .3s, color .3s;
  display: flex;
}

.node-control-panel {
  pointer-events: all;
  transition: opacity .2s ease-in-out;
}

.node-control-panel .control-btn {
  cursor: pointer;
  pointer-events: all;
  transition: fill .1s ease-in-out;
}

.node-control-panel .minimize-node-btn, .node-control-panel .maximize-node-btn, .node-control-panel .close-node-btn {
  fill: #fff;
}

.close-icon i:hover {
  color: red;
  background-color: #d0d0d0;
}

.idea-icon i {
  box-sizing: border-box;
  background-color: #fffd8d23;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 82%;
  height: 80%;
  transition: background-color .3s, color .3s;
  display: flex;
}

.idea-icon i:hover {
  color: #ef0;
  background-color: #fffd8d64;
}

.decompressNode-icon i {
  background-color: #fff0;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  transition: background-color .3s, color .3s, transform .3s ease-in-out;
  display: flex;
  cursor: pointer !important;
}

.decompressNode-icon i:hover {
  transform-origin: center;
  background-color: #e6ddc1;
  border-radius: 12px;
  transform: scale(1.1)translate(0, 1.5px);
  color: #3a7afe !important;
}

.expandDefaultNode-icon i {
  background-color: #fff0;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  transition: background-color .3s, color .3s, transform .3s ease-in-out;
  display: flex;
  cursor: pointer !important;
}

.expandDefaultNode-icon i:hover {
  transform-origin: center;
  background-color: #e6ddc1;
  border-radius: 12px;
  transform: scale(1.1)translate(0, 1.5px);
  color: #3a7afe !important;
}

.setting-circle {
  fill: #fdca40;
  stroke: #e6ddc1;
  stroke-width: 1px;
}

.settings-node-content {
  flex-direction: column;
  transition: all .75s;
  display: none;
}

.settings-node-content.expanded {
  justify-content: center;
  align-items: center;
  transition: all .75s;
  display: flex;
}

.settings-node-label {
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-size: 2rem;
  display: flex;
}

.settings-node-label.hidden {
  display: none;
}

.settings-node-container {
  cursor: pointer;
}

.minimap .cloned-node * {
  pointer-events: none;
}

.user-label {
  font-size: 12px;
  display: none;
}

.image-container {
  touch-action: none;
  -webkit-touch-callout: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.image-container img {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.iframe-btn-primary {
  margin-bottom: 10px;
  display: block;
}

.iframe-wrapper {
  box-sizing: border-box;
  flex: auto;
  width: 100%;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

.iframe-element {
  box-sizing: border-box;
  border: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.iframe-overlay {
  pointer-events: auto;
  -webkit-backdrop-filter: blur(1.75px);
  background: #ffffff38;
  transition: background .16s, backdrop-filter .16s;
  position: absolute;
  inset: 0;
}

.iframe-overlay.iframe-overlay--interactive {
  pointer-events: none;
  -webkit-backdrop-filter: none;
  background: none;
}

.iframe-container {
  box-sizing: border-box;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  display: flex;
  overflow: hidden;
}

.iframe-toolbar {
  flex-wrap: wrap;
  flex: none;
  justify-content: center;
  align-self: center;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 2px 2px;
  display: flex;
}

.iframe-toolbar__button {
  color: #243652;
  letter-spacing: .01em;
  touch-action: manipulation;
  user-select: none;
  caret-color: #0000;
  background: #ffffffe6;
  border: 1px solid #233a5a1f;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 14px;
  font-size: 12px;
  font-weight: 700;
  transition: transform .15s, background .15s, border-color .15s, box-shadow .15s, color .15s;
  display: inline-flex;
  box-shadow: 0 10px 24px #0f172a14, inset 0 1px #ffffffb8;
  cursor: pointer !important;
}

.iframe-toolbar__button:hover {
  background: #fffffffa;
  border-color: #233a5a2e;
  transform: translateY(-1px);
}

.iframe-toolbar__button--interactive {
  color: #15334d;
  background: linear-gradient(135deg, #edf6ff 0%, #dbeafe 100%);
  border-color: #3b82f633;
}

.iframe-toolbar__button--interactive.is-active {
  color: #f7fbff;
  background: linear-gradient(135deg, #183a63 0%, #244c7a 100%);
  border-color: #15334d3d;
}

.iframe-toolbar__button--secondary {
  background: #ffffffdb;
}

.iframe-toolbar__button--tool {
  color: #6f4510;
  background: linear-gradient(135deg, #fff6df 0%, #fde9bf 100%);
  border-color: #b4761733;
}

.iframe-toolbar__button--ghost {
  color: #53647a;
  background: #ffffffb8;
}

.iframe-toolbar__button-dot {
  background: linear-gradient(135deg, #60a5fa 0%, #1d4ed8 100%);
  border-radius: 999px;
  flex: none;
  width: 8px;
  height: 8px;
  box-shadow: 0 0 0 4px #60a5fa24;
}

.iframe-toolbar__button--interactive.is-active .iframe-toolbar__button-dot {
  background: linear-gradient(135deg, #fde68a 0%, #f59e0b 100%);
  box-shadow: 0 0 0 4px #f59e0b29;
}

.iframe-toolbar__button-label {
  white-space: nowrap;
}

.iframe-toolbar__button-icon {
  font-size: 12px;
  line-height: 1;
}

.pdf-container {
  flex-direction: column;
  align-items: center;
  height: 100%;
  display: flex;
}

.pdf-page-container {
  position: relative;
}

.pdf-image {
  pointer-events: none;
  user-select: none;
}

.pdf-text-overlay {
  font-size: 3em;
  position: absolute;
}

.spinner-container {
  justify-content: center;
  align-items: center;
  height: 100%;
  display: flex;
}

.spinner-icon {
  color: #3b3838b0;
  font-size: 24px;
}

.invisible {
  display: none;
}

.visible {
  display: block;
}

.locked-node {
  position: relative;
  background-color: #ffffff80 !important;
  border: 2px solid #48d1ccb3 !important;
}

.locked-node:after {
  content: "🔒";
  color: #ff4500;
  font-size: 8px;
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
}

.border-highlight {
  box-sizing: border-box !important;
  cursor: pointer !important;
  border-radius: 5px !important;
  transition: all .3s !important;
}

.border-highlight:hover {
  color: #333 !important;
  background-color: #f0f0f0e6 !important;
  border-color: #999 !important;
}

li {
  box-sizing: border-box;
  border: 1px solid #0000;
}

.flap-rect {
  stroke: #8b8878;
  stroke-width: 1px;
  cursor: pointer;
  fill: #ffdead;
}

.flap-rect.flap-open {
  opacity: .9;
}

.flap-rect.flap-closed {
  opacity: .2;
}

.flap-rect:not(.flap-open):hover {
  opacity: .9;
}

.flap-rect.flap-open:hover {
  opacity: .95;
}

.flap {
  pointer-events: none;
}

.flap-content {
  cursor: pointer;
}

.flap-rect.flap-open:hover {
  stroke: #a9a97a;
  fill: bisque;
  opacity: 1;
}

.html-node .html-node-flap {
  pointer-events: none;
  z-index: 2;
  justify-content: center;
  align-items: center;
  transition: left .5s, top .5s, width .5s, height .5s;
  display: flex;
  position: absolute;
}

.html-node .flap-loading-indicator {
  pointer-events: none;
  color: #3a3a3a;
  background: #ffffffe6;
  border-radius: 12px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 11px;
  line-height: 1;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 6px #0000001f;
}

.html-node .flap-loading-indicator:before {
  content: "";
  border: 2px solid #e6e6e6;
  border-top-color: #3a7afe;
  border-radius: 50%;
  width: 12px;
  height: 12px;
  animation: .9s linear infinite flap-loading-spin;
}

.html-node .html-node-flap-background {
  pointer-events: auto;
  background: #ffdead;
  border: 1px solid #8b8878;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  transition: opacity .12s ease-in-out, background .3s, border-color .3s;
  position: absolute;
}

.html-node .html-node-flap-background.flap-open {
  opacity: .9;
}

.html-node .html-node-flap-background.flap-closed {
  opacity: .2;
}

.html-node .html-node-flap-background.flap-open:hover {
  opacity: .95;
  background: bisque;
  border-color: #a9a97a;
}

.html-node .html-node-flap-background.flap-closed:hover {
  opacity: .7;
  background: bisque;
  border-color: #a9a97a;
}

.html-node .html-node-flap-content {
  pointer-events: auto;
  cursor: pointer;
  color: inherit;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
  font-size: 12px;
  line-height: 12px;
  transition: opacity .2s, color .2s;
  display: flex;
  position: absolute;
  inset: 0;
}

.html-node .html-node-flap-content:focus {
  outline: none;
}

.flap-rect.flap-closed:hover {
  stroke: #a9a97a;
  fill: bisque;
  opacity: .7;
}

.gif-helper-img {
  border-radius: 15px;
  box-shadow: 0 0 15px #00000080;
}

@keyframes floating {
  0% {
    transform: translate(0);
  }

  50% {
    transform: translate(0, 10px);
  }

  100% {
    transform: translate(0);
  }
}

.floating {
  animation: 3s ease-in-out infinite floating;
}

.overlay-background {
  fill: none;
  stroke: #4e421f67;
  stroke-width: 1px;
  transition: all .5s ease-in-out;
}

.overlay-button {
  cursor: pointer;
  user-select: none;
}

.overlay-button:hover {
  fill: #00f;
}

.custom-button.loading {
  opacity: .7;
  cursor: wait;
}

.icon-hidden {
  opacity: 0;
}

.idea-icon {
  transition: all .5s;
}

.red-text {
  color: #d9534f;
}

.blue-text {
  color: #3a7afe;
}

.green-text {
  color: #66cd6b;
}

.submit-btn-group {
  cursor: pointer;
  transition: fill .1s ease-in-out;
}

.submit-btn-background {
  fill: #fffffff2;
  stroke: #0000001a;
  stroke-width: 1px;
  transition: all .3s;
}

.submit-btn-icon {
  stroke: #00000080;
  stroke-width: 1.5px;
  fill: none;
  stroke-linecap: round;
  transition: all .3s;
}

.submit-btn-group:hover .submit-btn-background {
  fill: #0000001a;
}

.submit-btn-group:hover .submit-btn-icon {
  stroke: #3a7afe;
}

.submit-btn-group:active .submit-btn-background {
  fill: #2a5db0;
  transform: scale(.95);
}

@keyframes submitPulse {
  0% {
    box-shadow: 0 0 #4a90e266;
  }

  70% {
    box-shadow: 0 0 0 10px #4a90e200;
  }

  100% {
    box-shadow: 0 0 #4a90e200;
  }
}

.custom-span {
  color: #333;
  cursor: pointer;
  background-color: #ffeb3b;
  border-radius: 5px;
  padding: 2px 6px;
  font-weight: 500;
  transition: all .3s;
  display: inline-block;
  box-shadow: 0 1px 3px #0000001a;
}

.custom-span:hover {
  background-color: #ffd600;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px #0003;
}

.custom-span:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px #0000001a;
}

.thoughts-header i {
  font-size: 1.1em;
  color: #4a90e2 !important;
}

.thoughts-header {
  cursor: pointer;
  background-color: #f8f9fa;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  transition: all .3s;
  display: flex;
}

.thoughts-title {
  color: #4a5568;
  margin-left: 4px;
  font-size: .9em;
  font-weight: 600;
}

.thoughts-toggle {
  transition: all .3s;
}

.thoughts-section {
  background-color: #fff;
  border-radius: 8px;
  margin: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px #0000001a;
}

.thoughts-collapse-button:hover {
  opacity: .7;
}

.thoughts-content {
  color: #4a5568;
  border-top: 1px solid #e2e8f0;
  max-height: none;
  padding: 10px 12px;
  font-size: .9em;
}

.thinking-spinner {
  display: none;
  position: relative;
}

.brain-spinner {
  -webkit-text-fill-color: transparent;
  z-index: 1;
  background: linear-gradient(45deg, #6366f1, #8b5cf6, #ec4899) text;
  font-size: 1.2em;
  animation: 1.5s ease-in-out infinite spin-pulse, 4s linear infinite hue-rotate;
  position: relative;
}

.brain-spinner:after {
  content: "";
  background: radial-gradient(circle, #6366f126 0%, #fff0 70%);
  border-radius: 50%;
  animation: 2s ease-out infinite pulse-glow;
  position: absolute;
  inset: -5px;
}

@keyframes spin-pulse {
  0% {
    transform: rotate(0)scale(1);
  }

  50% {
    transform: rotate(180deg)scale(1.15);
  }

  100% {
    transform: rotate(360deg)scale(1);
  }
}

@keyframes pulse-glow {
  0% {
    opacity: .8;
    transform: scale(.8);
  }

  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

@keyframes hue-rotate {
  to {
    filter: hue-rotate(360deg);
  }
}

.graph-node-drop-target rect {
  stroke-dasharray: 5 3;
  animation: 1.5s infinite drop-pulse;
  stroke: #4caf50 !important;
  stroke-width: 3px !important;
}

@keyframes drop-pulse {
  0% {
    stroke-opacity: .7;
  }

  50% {
    stroke-opacity: 1;
  }

  100% {
    stroke-opacity: .7;
  }
}

.html-node.dragging .node-text {
  cursor: grabbing !important;
}

#html-layer {
  pointer-events: none;
}

.html-node {
  pointer-events: none;
  contain: layout;
  transition: top .5s, left .5s, width .5s, height .5s, box-shadow .3s;
  position: relative;
  overflow: visible;
}

.html-node .html-node-content {
  border-radius: 10px;
  transition: height .5s, width .5s;
  overflow: hidden;
}

.html-node.html-node--no-transition, .html-node.html-node--no-transition .html-node-content, .html-node .html-node-content.html-node-content--no-transition {
  transition: none !important;
  animation: none !important;
}

.html-node #node-text, .html-node .url-node-input-container, .html-node .url-node-main-container, .html-node .url-node-input, .html-node .url-node-load-button, .html-node .node-control-panel, .html-node .node-control-panel-html, .html-node .node-submit-button, .html-node video, .html-node iframe, .html-node img {
  pointer-events: auto;
}

body.ui-handles-active #html-layer {
  pointer-events: none !important;
}

.html-node .node-control-panel-html {
  box-sizing: border-box;
  width: 75px;
  height: 30px;
  box-shadow: none;
  pointer-events: auto;
  z-index: 1;
  background: none;
  border: none;
  border-radius: 5px;
  padding: 0;
  transition: opacity .2s ease-in-out;
  display: block;
  position: absolute;
  top: 5px;
  right: 5px;
}

.html-node .node-control-panel-html.removing {
  opacity: 0;
}

.html-node .node-control-panel-html.single-button {
  width: 20px;
}

.html-node .node-control-panel-html svg {
  width: 100%;
  height: 100%;
  display: block;
}

.html-node.md-editing, .html-node.md-editing .html-node-content {
  animation: none !important;
}

.graph-link {
  fill: none;
  stroke: #ccc;
  stroke-width: 2px;
  cursor: pointer;
}

.graph-link:hover {
  stroke: #4d7a97;
  stroke-width: 4px;
  opacity: .5;
}

.selected-link {
  stroke: #3379b74f !important;
  stroke-width: 8px !important;
}

.selected-universal-connection {
  stroke: #3379b7 !important;
  stroke-opacity: 1 !important;
}

.universal-connection {
  stroke: #a6a6a6;
  stroke-opacity: .7;
  cursor: pointer;
  fill: none;
  stroke-dasharray: 10 .25;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.universal-connection-hitbox {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 24px;
  stroke: #00000003;
  fill: none;
  pointer-events: stroke;
  cursor: pointer;
}

body.node-drag-active .universal-connection-hitbox {
  pointer-events: none !important;
}

.universal-connection:hover, .universal-connection.hovered {
  stroke: #4d7a97;
  stroke-opacity: .7;
  stroke-width: 5px;
}

.link-shadow.conversation-history-link {
  stroke: gray;
  animation: 1.5s infinite pulseShadow;
}

.conversation-history-link {
  stroke: #ccc;
  animation: 1.5s infinite pulse;
}

.universal-connection.dragging-connection, .universal-connection-hitbox.dragging-connection {
  stroke-opacity: .8;
  cursor: grabbing !important;
}

.universal-connection.dragging-connection {
  stroke: #fc0;
}

@keyframes pulse {
  0% {
    stroke-width: 2px;
    stroke: #66cdaa;
  }

  25% {
    stroke-width: 4px;
    stroke: #7bc4d1;
  }

  50% {
    stroke-width: 6px;
    stroke: #73b9ff;
  }

  75% {
    stroke-width: 4px;
    stroke: #7bc4d1;
  }

  100% {
    stroke-width: 2px;
    stroke: #66cdaa;
  }
}

@keyframes pulseShadow {
  0% {
    stroke-width: 3px;
    stroke: gray;
  }

  25% {
    stroke-width: 6px;
    stroke: #9e9e9e;
  }

  50% {
    stroke-width: 8px;
    stroke: #bcbcbc;
  }

  75% {
    stroke-width: 6px;
    stroke: #9e9e9e;
  }

  100% {
    stroke-width: 3px;
    stroke: gray;
  }
}

.control-point-handle {
  cursor: move;
  filter: drop-shadow(0 2px 3px #0003);
  fill: #3379b7;
  stroke: #fff;
  stroke-width: 2px;
}

.control-point-handle:hover {
  fill: #4d7a97;
}

.control-point-handle.dragging {
  fill: #2c6595;
}

.control-point-guide {
  stroke: #3379b7;
  stroke-width: 1.5px;
  stroke-dasharray: 4 4;
  opacity: .7;
}

.potential-connection-target {
  z-index: 9999;
  border-radius: 10px;
  outline-offset: 2px !important;
  outline: 2px dashed #3379b7 !important;
}

.node.potential-connection-target {
  outline-offset: 3px !important;
  outline: 3px dashed #3379b7 !important;
}

.group-connection-highlight {
  pointer-events: none;
}

.group-hover-highlight {
  stroke: #3379b7e6;
  fill: #3379b70f;
  stroke-dasharray: 10 6;
  rx: 10px;
  ry: 10px;
}

.group-selected-highlight {
  stroke: #3379b7bf;
  fill: #3379b70a;
  stroke-dasharray: 0;
}

.group-anchor-preview {
  fill: #fff;
  stroke: #3379b7;
  stroke-width: 2px;
  filter: drop-shadow(0 1px 3px #00000040);
}

.group-anchor-preview.edge-snapped {
  fill: #3379b7;
  stroke: #fff;
}

.group-anchor-preview.free-floating {
  fill: #fff;
  stroke: #3379b7;
}

@keyframes selectionpulse {
  0% {
    opacity: .8;
  }

  50% {
    opacity: .4;
  }

  100% {
    opacity: .8;
  }
}

.selectionpulse {
  animation: 1s infinite selectionpulse;
}

.screen-effect {
  mix-blend-mode: overlay;
}

.disable-pen-input {
  touch-action: none;
}

.no-select {
  user-select: none;
}

i[class*="fa-"], .svg-inline--fa {
  user-select: none;
  -webkit-touch-callout: none;
}

.selectable-text {
  user-select: text;
  cursor: text !important;
}

.node.dragging, .node.dragging *, .node.dragging .node-text {
  cursor: grabbing !important;
}

.ai-selection-highlight {
  z-index: 1;
  background: #ffea7f;
  border-radius: 12px;
  margin: -4px -6px;
  padding: 4px 8px;
  animation: 1.5s ease-in-out infinite selectionpulse;
  position: relative;
  box-shadow: inset 0 0 0 1px #0000000f;
}

.ai-selection-highlight.ai-selection-highlight--invisible {
  color: inherit;
  box-shadow: none;
  mix-blend-mode: normal;
  background: none;
  border: 0;
  outline: none;
  margin: 0;
  padding: 0;
  animation: none;
}

body.pen-input-active .node-text:not([data-inline-md-edit="true"]) {
  user-select: none;
  -webkit-touch-callout: none;
}

body.pen-input-active .node-text[data-inline-md-edit="true"] {
  -webkit-touch-callout: default;
}

body.eraser-input-guard #node-text, body.eraser-input-guard .node-text, body.eraser-input-guard .flap-content {
  pointer-events: none;
  -webkit-user-modify: read-only;
}

#prompt-container {
  text-align: center;
  background-color: #fff;
  border: 1px solid #0000000d;
  border-radius: 16px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 75%;
  max-width: 550px;
  margin: 0 auto;
  padding: 28px 32px;
  display: flex;
  box-shadow: 0 10px 30px #00000014, 0 0 1px #0000001a;
}

#prompt-text {
  color: #2d3748;
  margin-bottom: 24px;
  font-size: 16px;
  line-height: 1.6;
}

#buttons-container {
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
  display: flex;
}

#buttons-container .custom-button[data-value="cancel"] {
  width: 100%;
  margin-top: 8px;
}

#buttons-container .custom-button {
  color: #4a5568;
  cursor: pointer;
  background-color: #f8f9fa;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin: 3px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
  position: relative;
  box-shadow: 0 1px 3px #0000000d;
}

#buttons-container .custom-button:hover {
  background-color: #edf2f7;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px #0000001a;
}

#buttons-container .best-image-model {
  background-color: #fffbea;
  border: 2px solid gold;
}

#buttons-container .best-image-model:after {
  content: " ⭐";
}

#buttons-container .custom-button:active {
  transform: translateY(0);
}

#buttons-container .custom-button[data-value="true"], #buttons-container .custom-button[data-value="submit"], #buttons-container .custom-button[data-value="yes"] {
  color: #fff;
  background-color: #4299e1;
  border: none;
}

#buttons-container .custom-button[data-value="true"]:hover, #buttons-container .custom-button[data-value="submit"]:hover, #buttons-container .custom-button[data-value="yes"]:hover {
  background-color: #3182ce;
}

#buttons-container .custom-button[data-value="false"], #buttons-container .custom-button[data-value="no"], #buttons-container .custom-button[data-value="cancel"] {
  color: #4a5568;
  background-color: #fff;
  border: 1px solid #e2e8f0;
}

#buttons-container .custom-button[data-value="false"]:hover, #buttons-container .custom-button[data-value="no"]:hover, #buttons-container .custom-button[data-value="cancel"]:hover {
  background-color: #f7fafc;
}

#buttons-container .custom-button[data-value="signIn"], #buttons-container .custom-button[data-value="addCredits"] {
  color: #fff;
  background-color: #38b2ac;
  border: none;
}

#buttons-container .custom-button[data-value="signIn"]:hover, #buttons-container .custom-button[data-value="addCredits"]:hover {
  background-color: #319795;
}

#input-container {
  width: 100%;
  margin-bottom: 20px;
}

.prompt-input-label {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  display: block;
}

.prompt-input-description {
  color: #64748b;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.5;
}

#input-field {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  width: 100%;
  padding: 12px 16px;
  font-size: 15px;
  transition: all .2s;
}

#input-field:focus {
  background-color: #fff;
  border-color: #4299e1;
  outline: none;
  box-shadow: 0 0 0 3px #4299e126;
}

.prompt-attachments {
  width: 100%;
  margin-bottom: 16px;
}

.prompt-attachments[hidden] {
  display: none !important;
}

.prompt-attachments-dropzone {
  text-align: center;
  color: #4a5568;
  cursor: pointer;
  background-color: #f8fafc;
  border: 1px dashed #cbd5f5;
  border-radius: 10px;
  padding: 16px;
  font-size: 14px;
  transition: border-color .2s, background-color .2s, transform .2s;
}

.prompt-attachments-dropzone strong {
  margin-bottom: 6px;
  font-weight: 600;
  display: block;
}

.prompt-attachments-dropzone span {
  color: #6b7280;
  font-size: 12px;
  display: block;
}

.prompt-attachments-dropzone:focus, .prompt-attachments-dropzone:hover {
  background-color: #edf2f7;
  border-color: #4299e1;
  transform: translateY(-1px);
}

.prompt-attachments-dropzone.drag-over {
  background-color: #e0f2fe;
  border-color: #3182ce;
}

.prompt-attachments-list {
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 12px;
  display: flex;
}

.prompt-attachment {
  background-color: #edf2f7;
  border-radius: 10px;
  width: 90px;
  height: 90px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 4px #0f172a14;
}

.prompt-attachment img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.prompt-attachment button {
  color: #fff;
  cursor: pointer;
  background-color: #0f172ab3;
  border: none;
  border-radius: 9999px;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  transition: background-color .2s;
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
}

.prompt-attachment button:hover {
  background-color: #0f172ae6;
}

.prompt-attachments-empty {
  color: #6b7280;
  margin-top: 12px;
  font-size: 13px;
}

#error-container {
  color: #e53e3e;
  margin: 8px 0;
  font-size: 14px;
}

.prompt-modal-overlay {
  z-index: 99999;
  opacity: 0;
  visibility: hidden;
  background-color: #00000080;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .5s, visibility .5s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.prompt-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
  overflow-y: auto;
}

@media (width <= 600px) {
  #prompt-container {
    width: 90%;
    padding: 20px;
  }
}

.prompt-list-container {
  background-color: #0000ff05;
  border-radius: 15px;
  max-width: 60%;
  margin: 20px auto;
  padding: 10px;
  box-shadow: 0 2px 5px #0000001a;
}

.prompt-list-container ul {
  padding-left: 0;
  list-style-type: none;
}

.prompt-list-container li {
  border-radius: 15px;
  margin-bottom: 5px;
  padding: 8px;
  transition: background-color .3s, transform .3s;
}

.prompt-list-container li:hover {
  cursor: pointer;
  background-color: #0080ff9e;
  border-radius: 15px;
  transform: translateX(3px);
}

.prompt-checkmark {
  color: #4caf50;
  text-shadow: 1px 1px 2px #0000004d;
  margin-right: 5px;
}

.ui-feedback-container {
  z-index: 999999;
  pointer-events: none;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  display: flex;
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
}

.ui-feedback {
  color: #1a1a1a;
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
  text-align: center;
  background-color: #fff;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  min-width: 300px;
  max-width: 380px;
  padding: 16px 24px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  transform: translateY(-20px);
  box-shadow: 0 4px 12px #00000014, 0 0 1px #0000001a;
}

.ui-feedback:hover {
  opacity: .8;
}

.ui-feedback.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.ui-feedback.success {
  color: #065f46;
  background-color: #ecfdf5;
  border: 1px solid #a7f3d0;
}

.ui-feedback.error {
  color: #991b1b;
  background-color: #fef2f2;
  border: 1px solid #fecaca;
}

.ui-feedback.warning {
  color: #92400e;
  background-color: #fffbeb;
  border: 1px solid #fde68a;
}

.ui-feedback.info {
  color: #1e40af;
  background-color: #eff6ff;
  border: 1px solid #bfdbfe;
}

.ui-feedback:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #0000001f;
}

.estimation-prompt {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  max-width: 500px;
  margin: 0 auto;
  padding: 24px;
  font-family: Arial, sans-serif;
  box-shadow: 0 4px 6px #0000000d;
}

.estimation-prompt #prompt-text {
  color: #333;
  text-align: left;
  font-size: 16px;
  line-height: 1.6;
}

.estimation-prompt .cost-summary {
  background-color: #f7f9fc;
  border: 1px solid #e0e7ff;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 16px;
}

.estimation-prompt .cost-highlight {
  color: #4a5568;
  font-size: 24px;
  font-weight: bold;
}

.estimation-prompt .cost-details {
  color: #718096;
  margin-top: 12px;
  font-size: 14px;
}

.estimation-prompt .info-list {
  margin: 16px 0;
  padding-left: 20px;
}

.estimation-prompt .info-list li {
  color: #4a5568;
  margin-bottom: 8px;
}

.estimation-prompt .note {
  color: #718096;
  margin-top: 16px;
  font-style: italic;
}

.estimation-prompt #buttons-container {
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  display: flex;
}

.estimation-prompt .custom-button {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s;
}

.estimation-prompt .custom-button[data-value="yes"] {
  color: #fff;
  background-color: #4299e1;
}

.estimation-prompt .custom-button[data-value="yes"]:hover {
  background-color: #3182ce;
}

.estimation-prompt .custom-button[data-value="no"] {
  color: #4a5568;
  background-color: #e2e8f0;
}

.estimation-prompt .custom-button[data-value="no"]:hover {
  background-color: #cbd5e0;
}

.prompt-time-banner {
  color: #4a5568;
  background-color: #fcd34d;
  border-radius: 4px 4px 0 0;
  margin-bottom: 2px;
  padding: 2px 6px;
  font-size: 12px;
}

#prompt-mode-container {
  gap: 8px;
  margin-bottom: 12px;
  display: flex;
}

.prompt-mode-option {
  color: #4a5568;
  cursor: pointer;
  background-color: #f8f9fa;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 14px;
  transition: all .2s;
}

.prompt-mode-option.active {
  color: #fff;
  background-color: #4299e1;
  border-color: #4299e1;
}

.prompt-mode-option:hover {
  background-color: #edf2f7;
}

.prompt-checkboxes-container {
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  width: 100%;
  margin: 16px 0;
  padding: 16px;
}

.prompt-checkbox-wrapper {
  cursor: pointer;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  display: flex;
}

.prompt-checkbox-wrapper:not(:last-child) {
  border-bottom: 1px solid #e2e8f0;
}

.prompt-checkbox {
  cursor: pointer;
  accent-color: #4299e1;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.prompt-checkbox-label {
  cursor: pointer;
  text-align: left;
  flex-direction: column;
  flex: 1;
  gap: 4px;
  display: flex;
}

.prompt-checkbox-label-text {
  color: #2d3748;
  font-size: 14px;
  font-weight: 500;
}

.prompt-checkbox-description {
  color: #718096;
  font-size: 12px;
  line-height: 1.4;
}

.prompt-dropdown-container {
  text-align: left;
  width: 100%;
  margin: 16px 0;
}

.prompt-dropdown-label {
  color: #2d3748;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 500;
  display: block;
}

.prompt-dropdown {
  color: #2d3748;
  cursor: pointer;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  transition: all .2s;
}

.prompt-dropdown:hover {
  border-color: #cbd5e0;
}

.prompt-dropdown:focus {
  border-color: #4299e1;
  outline: none;
  box-shadow: 0 0 0 3px #4299e126;
}

.prompt-modal-overlay {
  backdrop-filter: blur(2px);
}

#prompt-mode-container {
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.prompt-mode-option {
  border-radius: 20px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
}

.prompt-mode-option:hover:not(.active) {
  background-color: #f3f4f6;
}

.prompt-button-wrapper {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.prompt-button-wrapper .prompt-time-banner {
  color: #78350f;
  background-color: #fef3c7;
  border-radius: 12px;
  margin-bottom: 4px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 500;
}

.prompt-button-wrapper .prompt-time-banner + .custom-button {
  min-width: 180px;
  padding: 11px 16px;
}

#buttons-container .custom-button:focus-visible, .prompt-mode-option:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #3b82f666;
}

body.dark-mode .prompt-modal-overlay {
  background-color: #000000a6;
}

body.dark-mode #prompt-container {
  background-color: #1a1f2e;
  border-color: #4b55634d;
  box-shadow: 0 10px 25px #00000080, 0 0 1px #94a3b81a;
}

body.dark-mode #prompt-text {
  color: #f3f4f6;
  font-weight: 500;
}

body.dark-mode #buttons-container .custom-button {
  color: #f3f4f6;
  background-color: #2d3748;
  border: 1px solid #4b556380;
  box-shadow: 0 1px 2px #0003;
}

body.dark-mode #buttons-container .custom-button:hover {
  background-color: #374151;
  border-color: #6b728099;
  transform: translateY(-1px);
}

body.dark-mode #buttons-container .custom-button[data-value="cancel"] {
  color: #9ca3af;
  background-color: #37415180;
  border-color: #4b556366;
}

body.dark-mode #buttons-container .custom-button[data-value="cancel"]:hover {
  color: #d1d5db;
  background-color: #374151cc;
}

body.dark-mode #buttons-container .custom-button[data-value="true"], body.dark-mode #buttons-container .custom-button[data-value="submit"], body.dark-mode #buttons-container .custom-button[data-value="yes"], body.dark-mode #buttons-container .custom-button[data-value="quick"], body.dark-mode #buttons-container .custom-button[data-value="medium"], body.dark-mode #buttons-container .custom-button[data-value="long"] {
  color: #f9fafb;
  background-color: #374151;
  border-color: #6b728080;
}

body.dark-mode #buttons-container .custom-button[data-value="true"]:hover, body.dark-mode #buttons-container .custom-button[data-value="submit"]:hover, body.dark-mode #buttons-container .custom-button[data-value="yes"]:hover, body.dark-mode #buttons-container .custom-button[data-value="quick"]:hover, body.dark-mode #buttons-container .custom-button[data-value="medium"]:hover, body.dark-mode #buttons-container .custom-button[data-value="long"]:hover {
  background-color: #4b5563;
  border-color: #9ca3af80;
}

body.dark-mode .prompt-mode-option {
  color: #e5e7eb;
  background-color: #37415180;
  border-color: #4b556366;
}

body.dark-mode .prompt-mode-option:hover:not(.active) {
  background-color: #374151cc;
}

body.dark-mode .prompt-mode-option.active {
  color: #fff;
  background-color: #3b82f6;
  border-color: #3b82f6;
}

body.dark-mode .prompt-time-banner {
  color: #fbbf24;
  background-color: #fbbf2433;
  font-weight: 500;
}

body.dark-mode .prompt-attachments-dropzone {
  color: #e2e8f0;
  background-color: #1e293bcc;
  border-color: #94a3b899;
}

body.dark-mode .prompt-attachments-dropzone span {
  color: #cbd5f5;
}

body.dark-mode .prompt-attachments-dropzone.drag-over {
  background-color: #2d3748e6;
  border-color: #63b3ed;
}

body.dark-mode .prompt-attachment {
  background-color: #1e293bcc;
  box-shadow: 0 2px 4px #00000059;
}

body.dark-mode .prompt-attachment button {
  color: #f7fafc;
  background-color: #e2e8f040;
}

body.dark-mode .prompt-attachment button:hover {
  background-color: #e2e8f066;
}

body.dark-mode .prompt-checkboxes-container {
  background-color: #1e293b80;
  border-color: #4b556366;
}

body.dark-mode .prompt-checkbox-wrapper {
  border-bottom-color: #4b55634d;
}

body.dark-mode .prompt-checkbox {
  accent-color: #3b82f6;
}

body.dark-mode .prompt-checkbox-label-text {
  color: #f3f4f6;
}

body.dark-mode .prompt-checkbox-description {
  color: #9ca3af;
}

body.dark-mode .prompt-input-label {
  color: #cbd5e1;
}

body.dark-mode .prompt-input-description {
  color: #94a3b8;
}

body.dark-mode .prompt-dropdown-container, body.dark-mode .prompt-dropdown-label {
  color: #f3f4f6;
}

body.dark-mode .prompt-dropdown {
  color: #f3f4f6;
  background-color: #1e293bcc;
  border-color: #4b556380;
}

body.dark-mode .prompt-dropdown:hover {
  border-color: #6b728099;
}

body.dark-mode .prompt-dropdown:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px #3b82f640;
}

.prompt-checkbox-wrapper.prompt-conditional {
  opacity: 0;
  visibility: hidden;
  border-bottom-color: #0000;
  max-height: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height .2s, opacity .18s, transform .2s;
  overflow: hidden;
  transform: translateY(-4px);
}

.prompt-checkbox-wrapper.prompt-conditional.open {
  opacity: 1;
  visibility: visible;
  max-height: 140px;
  margin: initial;
  border-bottom-color: #e2e8f0;
  padding-top: 10px;
  padding-bottom: 10px;
  transform: translateY(0);
}

.prompt-extra-container {
  text-align: left;
  width: 100%;
  margin: 10px 0 6px;
}

.prompt-extra-toggle {
  appearance: none;
  color: #2d3748;
  cursor: pointer;
  text-align: left;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  transition: background-color .15s, border-color .15s, transform .15s;
}

.prompt-extra-toggle:hover {
  background: #edf2f7;
}

.prompt-extra-body {
  opacity: 0;
  max-height: 0;
  transition: max-height .22s, opacity .18s, transform .2s;
  overflow: hidden;
  transform: translateY(-4px);
}

.prompt-extra-body.open {
  opacity: 1;
  max-height: 720px;
  margin-top: 8px;
  transform: translateY(0);
}

.prompt-extra-area {
  resize: vertical;
  color: #2d3748;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  width: 100%;
  min-height: 110px;
  padding: 10px 12px;
  font-size: 14px;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}

.prompt-extra-presets {
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
  display: flex;
}

.prompt-extra-actions {
  justify-content: flex-end;
  margin-bottom: 8px;
  display: flex;
}

.prompt-extra-action {
  appearance: none;
  color: #1f2937;
  cursor: pointer;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 600;
  transition: background-color .15s, border-color .15s, transform .15s;
  display: inline-flex;
}

.prompt-extra-action:disabled {
  cursor: wait;
  opacity: .75;
  transform: none;
}

.prompt-extra-action i, .prompt-extra-action .svg-inline--fa {
  font-size: 12px;
}

.prompt-extra-action:hover {
  background: #edf2f7;
}

.prompt-extra-preset {
  appearance: none;
  color: #2d3748;
  cursor: pointer;
  background: #edf2f7;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  transition: background-color .15s, border-color .15s, transform .15s;
}

.prompt-extra-preset:hover {
  background: #e2e8f0;
}

.prompt-extra-area:focus {
  background-color: #fff;
  border-color: #4299e1;
  outline: none;
  box-shadow: 0 0 0 3px #4299e126;
}

body.dark-mode .prompt-extra-toggle {
  color: #e2e8f0;
  background: #1a202c;
  border-color: #2d3748;
}

body.dark-mode .prompt-extra-toggle:hover {
  background: #2d3748;
}

body.dark-mode .prompt-extra-area {
  color: #f3f4f6;
  background-color: #1e293bcc;
  border-color: #4b556380;
}

body.dark-mode .prompt-extra-area:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px #3b82f640;
}

body.dark-mode .prompt-extra-preset {
  color: #e2e8f0;
  background: #2d3748cc;
  border-color: #4b556399;
}

body.dark-mode .prompt-extra-action {
  color: #e2e8f0;
  background: #1e293bcc;
  border-color: #4b556399;
}

body.dark-mode .prompt-extra-preset:hover {
  background: #2d3748;
}

body.dark-mode .prompt-checkbox-wrapper.prompt-conditional.open {
  border-bottom-color: #4b55634d;
}

.prompt-modal-overlay.app-picker-overlay, .prompt-modal-overlay.app-builder-overlay {
  background-color: #0f172a73;
  align-items: flex-start;
  padding: 6vh 16px 16px;
}

#prompt-container.app-picker-container, #prompt-container.app-builder-container {
  text-align: left;
  align-items: stretch;
  width: min(860px, 92%);
  max-width: 860px;
}

#prompt-container.app-builder-container {
  max-width: 980px;
}

#prompt-container.app-picker-container {
  max-width: 1080px;
}

#prompt-container.app-picker-container #prompt-text, #prompt-container.app-builder-container #prompt-text {
  text-align: left;
  margin-bottom: 16px;
}

.app-picker-eyebrow {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1d4ed8;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
}

.app-builder-eyebrow {
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #0f766e;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
}

.app-picker-header h2, .app-builder-header h2 {
  color: #111827;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  font-size: 28px;
}

.app-picker-header p, .app-builder-header p {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.app-builder-header {
  background: radial-gradient(circle at 100% 0, #0ea5e91a, #0000 34%), radial-gradient(circle at 0 100%, #10b9811a, #0000 32%), linear-gradient(#fffffffc, #f8fafcf7);
  border: 1px solid #d7e3ef;
  border-radius: 24px;
  padding: 22px 24px;
  box-shadow: 0 18px 46px #0f172a14;
}

.app-builder-header p {
  max-width: 72ch;
}

.app-builder-step-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  display: grid;
}

.app-builder-step {
  color: #0f172a;
  background: #ffffffc7;
  border: 1px solid #94a3b833;
  border-radius: 16px;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  display: flex;
}

.app-builder-step span {
  color: #1d4ed8;
  background: #dbeafe;
  border-radius: 999px;
  flex: 0 0 24px;
  justify-content: center;
  align-items: center;
  width: 24px;
  height: 24px;
  font-size: 12px;
  font-weight: 800;
  display: inline-flex;
}

.app-picker-layout {
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 16px;
  margin-top: 16px;
  display: grid;
}

.app-picker-panel {
  background: linear-gradient(#fffffffa, #f8fafcf5);
  border: 1px solid #dbe4ef;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 14px 40px #0f172a14;
}

.app-picker-panel-title {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
}

.app-picker-selection-card {
  background: radial-gradient(circle at 0 0, #0ea5e917, #0000 38%), linear-gradient(#fff, #f8fafc);
  border: 1px solid #94a3b847;
  border-radius: 18px;
  padding: 18px;
}

.app-picker-selection-card.is-current {
  border-color: #2563eb59;
  box-shadow: inset 0 1px #fffc, 0 16px 38px #2563eb14;
}

.app-picker-selection-card.is-empty {
  border-style: dashed;
  flex-direction: column;
  justify-content: center;
  min-height: 240px;
  display: flex;
}

.app-picker-selection-topline {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.app-picker-selection-title {
  color: #0f172a;
  letter-spacing: -.02em;
  font-size: 24px;
  font-weight: 700;
}

.app-picker-selection-subtitle {
  color: #475569;
  max-width: 60ch;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
}

.app-picker-selection-tags {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.app-picker-tag {
  color: #0f172a;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: #e2e8f0;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
}

.app-picker-tag.accent {
  color: #1d4ed8;
  background: #dbeafe;
}

.app-picker-tag.current {
  color: #0369a1;
  background: #e0f2fe;
}

.app-picker-selection-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
  display: grid;
}

.app-picker-selection-meta div {
  color: #0f172a;
  background: #ffffffc7;
  border: 1px solid #94a3b82e;
  border-radius: 14px;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  font-size: 14px;
  display: flex;
}

.app-picker-selection-meta .label {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
}

.app-picker-guidance {
  background: #0f172a0b;
  border: 1px solid #94a3b833;
  border-radius: 16px;
  margin-top: 18px;
  padding: 14px 16px;
}

.app-picker-guidance-title {
  color: #0f172a;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 700;
}

.app-picker-guidance p {
  color: #475569;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.app-picker-guidance-recommendation {
  color: #1d4ed8;
  border-top: 1px solid #94a3b838;
  margin-top: 10px;
  padding-top: 10px;
  font-size: 13px;
  font-weight: 700;
}

.app-picker-actions-panel {
  background: linear-gradient(#fffaf5f2, #fffffffa);
}

.app-picker-action-card {
  background: #ffffffe6;
  border: 1px solid #94a3b838;
  border-radius: 16px;
  padding: 15px 16px;
  box-shadow: inset 0 1px #fffc;
}

.app-picker-action-card + .app-picker-action-card {
  margin-top: 12px;
}

.app-picker-action-card.recommended {
  background: radial-gradient(circle at 100% 0, #3b82f614, #0000 36%), #fffffff5;
  border-color: #2563eb4d;
}

.app-picker-action-title {
  color: #0f172a;
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
}

.app-picker-action-card p {
  color: #475569;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.app-picker-action-hint {
  color: #1e3a8a;
  background: #1d4ed812;
  border: 1px solid #2563eb29;
  border-radius: 14px;
  margin-top: 14px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
}

#prompt-container.app-picker-container .prompt-dropdown-container {
  width: 100%;
  margin-top: 18px;
}

#prompt-container.app-picker-container .prompt-dropdown-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6b7280;
  font-size: 12px;
}

#prompt-container.app-picker-container .prompt-dropdown {
  background-color: #f8fafc;
  border: 1px solid #d5dde8;
  border-radius: 14px;
  width: 100%;
  padding: 14px 16px;
  font-size: 15px;
  box-shadow: inset 0 1px 1px #fffc;
}

#prompt-container.app-picker-container #buttons-container {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin-top: 18px;
  display: grid;
}

#prompt-container.app-picker-container #buttons-container .custom-button {
  width: 100%;
  margin: 0;
}

#prompt-container.app-picker-container #buttons-container .custom-button[data-value="cancel"] {
  grid-column: 1 / -1;
}

#buttons-container .custom-button.primary-app-action {
  color: #fff;
  background: linear-gradient(135deg, #0f172a, #1d4ed8);
  border: none;
  box-shadow: 0 12px 28px #2563eb42;
}

#buttons-container .custom-button.primary-app-action:hover {
  background: linear-gradient(135deg, #0b1220, #1e40af);
}

#prompt-container.app-builder-container #input-container {
  background: linear-gradient(#fffffffa, #f8fafcf5);
  border: 1px solid #dbe4ef;
  border-radius: 20px;
  margin-bottom: 0;
  padding: 18px;
  box-shadow: 0 14px 36px #0f172a0f;
}

#prompt-container.app-builder-container #input-field {
  background-color: #f9fafb;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 16px;
}

#prompt-container.app-builder-container #prompt-checkboxes-container, #prompt-container.app-builder-container #prompt-attachments-container, #prompt-container.app-builder-container .prompt-extra-container {
  background: linear-gradient(#fffffffa, #f8fafcf5);
  border: 1px solid #dbe4ef;
  border-radius: 20px;
  margin-top: 14px;
  padding: 18px;
  box-shadow: 0 14px 36px #0f172a0f;
}

#prompt-container.app-builder-container #prompt-checkboxes-container, #prompt-container.app-builder-container #prompt-attachments-container {
  position: relative;
}

#prompt-container.app-builder-container #prompt-checkboxes-container:before, #prompt-container.app-builder-container #prompt-attachments-container:before {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #475569;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  display: block;
}

#prompt-container.app-builder-container #prompt-checkboxes-container:before {
  content: "Visibility";
}

#prompt-container.app-builder-container #prompt-attachments-container:before {
  content: "Reference Images";
}

#prompt-container.app-builder-container #prompt-attachments-container[hidden] {
  display: none !important;
}

#prompt-container.app-builder-container .prompt-attachments-dropzone {
  background: radial-gradient(circle at 0 0, #3b82f614, #0000 34%), #f8fbff;
  border-style: dashed;
  border-radius: 18px;
  min-height: 132px;
}

#prompt-container.app-builder-container .prompt-attachments-dropzone strong {
  color: #0f172a;
  font-size: 15px;
}

#prompt-container.app-builder-container .prompt-attachments-dropzone span, #prompt-container.app-builder-container .prompt-attachments-empty {
  color: #64748b;
}

#prompt-container.app-builder-container .prompt-extra-container {
  margin-top: 14px;
}

#prompt-container.app-builder-container .prompt-extra-toggle {
  color: #0f172a;
  background: none;
  border: none;
  padding: 0;
  font-size: 15px;
  font-weight: 700;
}

#prompt-container.app-builder-container .prompt-extra-toggle:hover {
  background: none;
}

#prompt-container.app-builder-container .prompt-extra-body.open {
  margin-top: 14px;
}

#prompt-container.app-builder-container .prompt-extra-area {
  background: #fff;
  border-radius: 16px;
  min-height: 220px;
  padding: 14px 16px;
  font-size: 15px;
  line-height: 1.6;
}

#prompt-container.app-builder-container .prompt-extra-actions {
  justify-content: flex-start;
  margin-bottom: 12px;
}

#prompt-container.app-builder-container .prompt-extra-action {
  color: #1d4ed8;
  background: #eef4ff;
  border-color: #cfe0ff;
  padding: 9px 14px;
}

#prompt-container.app-builder-container .prompt-extra-action:hover {
  background: #dbeafe;
}

#prompt-container.app-builder-container #error-container:not(:empty) {
  background: #fef2f2eb;
  border: 1px solid #ef44442e;
  border-radius: 14px;
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  color: #b91c1c !important;
}

#prompt-container.app-builder-container #buttons-container {
  grid-template-columns: minmax(0, 1fr) minmax(180px, .42fr);
  gap: 12px;
  width: 100%;
  margin-top: 18px;
  display: grid;
}

#prompt-container.app-builder-container #buttons-container .prompt-button-wrapper, #prompt-container.app-builder-container #buttons-container .custom-button {
  width: 100%;
}

#prompt-container.app-builder-container #buttons-container .custom-button[data-value="cancel"] {
  margin-top: 0;
}

#prompt-container.app-builder-container #buttons-container .custom-button {
  border-radius: 14px;
  min-height: 48px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}

body.dark-mode #prompt-container.app-picker-container, body.dark-mode #prompt-container.app-builder-container {
  color: #e5e7eb;
  background-color: #0f172a;
  border-color: #1f2937;
}

body.dark-mode .app-picker-header h2, body.dark-mode .app-builder-header h2 {
  color: #f9fafb;
}

body.dark-mode .app-picker-header p, body.dark-mode .app-builder-header p {
  color: #9ca3af;
}

body.dark-mode .app-picker-eyebrow {
  color: #60a5fa;
}

body.dark-mode .app-builder-eyebrow {
  color: #5eead4;
}

body.dark-mode .app-builder-header {
  background: radial-gradient(circle at 100% 0, #38bdf824, #0000 36%), radial-gradient(circle at 0 100%, #2dd4bf1f, #0000 30%), linear-gradient(#0f172af5, #111827fa);
  border-color: #47556999;
  box-shadow: 0 20px 48px #02061759;
}

body.dark-mode .app-builder-step {
  color: #e2e8f0;
  background: #0f172ab8;
  border-color: #47556973;
}

body.dark-mode .app-builder-step span {
  color: #bfdbfe;
  background: #1e40af59;
}

body.dark-mode .app-picker-panel {
  background: linear-gradient(#0f172af5, #111827fa);
  border-color: #47556999;
  box-shadow: 0 18px 42px #02061759;
}

body.dark-mode .app-picker-panel-title {
  color: #94a3b8;
}

body.dark-mode .app-picker-selection-card {
  background: radial-gradient(circle at 0 0, #38bdf824, #0000 38%), linear-gradient(#0f172af2, #111827fa);
  border-color: #4755698c;
}

body.dark-mode .app-picker-selection-card.is-current {
  border-color: #60a5fa8c;
  box-shadow: inset 0 1px #ffffff08, 0 20px 44px #02061759;
}

body.dark-mode .app-picker-selection-title, body.dark-mode .app-picker-guidance-title, body.dark-mode .app-picker-action-title {
  color: #f8fafc;
}

body.dark-mode .app-picker-selection-subtitle, body.dark-mode .app-picker-guidance p, body.dark-mode .app-picker-action-card p {
  color: #cbd5e1;
}

body.dark-mode .app-picker-tag {
  color: #e2e8f0;
  background: #334155e6;
}

body.dark-mode .app-picker-tag.accent {
  color: #bfdbfe;
  background: #1e40af59;
}

body.dark-mode .app-picker-tag.current {
  color: #bae6fd;
  background: #0891b247;
}

body.dark-mode .app-picker-selection-meta div, body.dark-mode .app-picker-guidance, body.dark-mode .app-picker-action-card {
  background: #0f172ab8;
  border-color: #47556973;
}

body.dark-mode .app-picker-selection-meta .label {
  color: #94a3b8;
}

body.dark-mode .app-picker-guidance-recommendation {
  color: #93c5fd;
  border-top-color: #47556959;
}

body.dark-mode .app-picker-action-hint {
  color: #dbeafe;
  background: #1e40af2e;
  border-color: #60a5fa40;
}

body.dark-mode #prompt-container.app-builder-container #input-container, body.dark-mode #prompt-container.app-builder-container #prompt-checkboxes-container, body.dark-mode #prompt-container.app-builder-container #prompt-attachments-container, body.dark-mode #prompt-container.app-builder-container .prompt-extra-container {
  background: linear-gradient(#0f172af0, #111827fa);
  border-color: #47556999;
  box-shadow: 0 18px 40px #02061747;
}

body.dark-mode #prompt-container.app-builder-container #prompt-checkboxes-container:before, body.dark-mode #prompt-container.app-builder-container #prompt-attachments-container:before {
  color: #94a3b8;
}

body.dark-mode #prompt-container.app-builder-container .prompt-attachments-dropzone {
  background: radial-gradient(circle at 0 0, #3b82f61f, #0000 34%), #0f172ae0;
  border-color: #60a5fa4d;
}

body.dark-mode #prompt-container.app-builder-container .prompt-attachments-dropzone strong {
  color: #f8fafc;
}

body.dark-mode #prompt-container.app-builder-container .prompt-attachments-dropzone span, body.dark-mode #prompt-container.app-builder-container .prompt-attachments-empty {
  color: #94a3b8;
}

body.dark-mode #prompt-container.app-builder-container .prompt-extra-toggle {
  color: #f8fafc;
}

body.dark-mode #prompt-container.app-builder-container .prompt-extra-area {
  background: #0f172ae0;
}

body.dark-mode #prompt-container.app-builder-container .prompt-extra-action {
  color: #dbeafe;
  background: #1e40af38;
  border-color: #60a5fa47;
}

body.dark-mode #prompt-container.app-builder-container .prompt-extra-action:hover {
  background: #1e40af52;
}

body.dark-mode #prompt-container.app-builder-container #error-container:not(:empty) {
  background: #7f1d1d4d;
  border-color: #f871714d;
  color: #fecaca !important;
}

body.dark-mode #prompt-container.app-picker-container .prompt-dropdown {
  color: #e5e7eb;
  background-color: #111827cc;
  border-color: #4b556380;
}

body.dark-mode #buttons-container .custom-button.primary-app-action {
  background-color: #2563eb;
}

body.dark-mode #buttons-container .custom-button.primary-app-action:hover {
  background-color: #1d4ed8;
}

@media (width <= 900px) {
  .app-builder-step-list, .app-picker-layout, #prompt-container.app-builder-container #buttons-container, #prompt-container.app-picker-container #buttons-container {
    grid-template-columns: 1fr;
  }
}

.visualize-choice-overlay {
  z-index: 1200;
  opacity: 0;
  background: #0000008c;
  place-items: center;
  transition: opacity .25s;
  display: none;
  position: fixed;
  inset: 0;
}

.visualize-choice-overlay.visible {
  opacity: 1;
}

.visualize-choice-modal {
  opacity: 0;
  background: linear-gradient(#fff 0%, #f4f6ff 100%);
  border: 1px solid #e3e9f4;
  border-radius: 14px;
  width: min(640px, 90vw);
  padding: 24px 26px;
  transition: transform .25s, opacity .25s;
  position: relative;
  overflow: hidden;
  transform: translateY(10px);
  box-shadow: 0 18px 45px #0000002e;
}

.visualize-choice-modal.visible {
  opacity: 1;
  transform: translateY(0);
}

.visualize-choice-modal:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 10% 0, #6366f11f, #0000 55%), radial-gradient(circle at 100% 10%, #0ea5e91a, #0000 45%);
  position: absolute;
  inset: 0;
}

.visualize-choice-header h3 {
  color: #1f2933;
  letter-spacing: -.01em;
  margin: 0 0 6px;
  font-size: 1.25rem;
}

.visualize-choice-header p {
  color: #52606d;
  max-width: 40ch;
  margin: 0 0 16px;
  line-height: 1.5;
}

.visualize-choice-header {
  z-index: 1;
  align-items: flex-start;
  gap: 14px;
  display: flex;
  position: relative;
}

.visualize-choice-header-text {
  min-width: 0;
}

.visualize-choice-header-icon {
  color: #4338ca;
  background: linear-gradient(135deg, #eef2ff, #f8fafc);
  border-radius: 12px;
  place-items: center;
  width: 42px;
  height: 42px;
  font-size: 18px;
  display: grid;
  box-shadow: 0 8px 18px #4338ca2e;
}

.visualize-choice-actions {
  z-index: 1;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  grid-auto-rows: 1fr;
  gap: 14px;
  display: grid;
  position: relative;
}

.visualize-choice-btn {
  text-align: left;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  background: #f8fbff;
  border: 1px solid #d7e1ec;
  border-radius: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: 12px;
  min-height: 128px;
  padding: 16px;
  transition: all .2s;
  display: grid;
  position: relative;
}

.visualize-choice-btn.primary {
  background: linear-gradient(135deg, #e8f1ff, #f5f9ff);
  border-color: #c6d7f5;
}

.visualize-choice-btn.secondary {
  background: #fdf8f3;
  border-color: #f0e0d1;
}

.visualize-choice-btn.tertiary {
  background: #f6faf8;
  border-color: #cbe5d6;
}

.visualize-choice-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px #00000014;
}

.visualize-choice-btn:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #4c6ef5;
}

.visualize-choice-icon {
  color: #1d4ed8;
  background: #ffffffe6;
  border-radius: 12px;
  place-items: center;
  width: 44px;
  height: 44px;
  font-size: 18px;
  display: grid;
  box-shadow: inset 0 0 0 1px #fff9, 0 8px 18px #0f172a14;
}

.visualize-choice-content {
  min-width: 0;
}

.visualize-choice-arrow {
  color: #94a3b8;
  align-self: center;
  transition: transform .2s, color .2s;
}

.visualize-choice-btn:hover .visualize-choice-arrow {
  color: #1f2933;
  transform: translateX(3px);
}

.visualize-choice-title {
  color: #102a43;
  font-weight: 700;
  line-height: 1.2;
}

.visualize-choice-desc {
  color: #616e7c;
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  font-size: .95rem;
  line-height: 1.45;
}

.visualize-choice-footer {
  justify-content: flex-end;
  margin-top: 16px;
  display: flex;
}

.visualize-choice-cancel {
  color: #52606d;
  cursor: pointer;
  background: none;
  border: 1px solid #cbd2d9;
  border-radius: 8px;
  padding: 8px 14px;
  transition: background .2s, color .2s;
}

.visualize-choice-cancel:hover {
  color: #1f2933;
  background: #e4e7eb;
}

.dark-mode .visualize-choice-modal {
  color: #e5e7eb;
  background: linear-gradient(#0f1720 0%, #0b1220 100%);
  border: 1px solid #1f2933;
}

.dark-mode .visualize-choice-header h3 {
  color: #f8fafc;
}

.dark-mode .visualize-choice-header p {
  color: #d4dbe5;
}

.dark-mode .visualize-choice-btn {
  color: #e5e7eb;
  background: #111827;
  border-color: #223040;
}

.dark-mode .visualize-choice-btn.primary {
  background: linear-gradient(135deg, #111827, #0b1220);
  border-color: #1f2a3a;
}

.dark-mode .visualize-choice-btn.secondary {
  background: #141c26;
  border-color: #1f2933;
}

.dark-mode .visualize-choice-btn.tertiary {
  background: #0f1b16;
  border-color: #1f3b2f;
}

.dark-mode .visualize-choice-header-icon {
  color: #a5b4fc;
  background: linear-gradient(135deg, #111827, #0f1720);
  box-shadow: 0 10px 20px #3b82f62e;
}

.dark-mode .visualize-choice-icon {
  color: #60a5fa;
  background: #0f172ae6;
  box-shadow: inset 0 0 0 1px #94a3b81f;
}

.dark-mode .visualize-choice-desc, .dark-mode .visualize-choice-arrow {
  color: #cbd5e1;
}

.dark-mode .visualize-choice-title {
  color: #e5e7eb;
}

.dark-mode .visualize-choice-cancel {
  color: #cbd5e1;
  border-color: #243447;
}

.dark-mode .visualize-choice-cancel:hover {
  color: #f8fafc;
  background: #1f2933;
}

.visualize-config-overlay {
  z-index: 1201;
  opacity: 0;
  background: radial-gradient(circle at top, #fff4d640, #0000 32%), #0d121d99;
  place-items: center;
  padding: 18px;
  transition: opacity .22s;
  display: none;
  position: fixed;
  inset: 0;
}

.visualize-config-overlay.visible {
  opacity: 1;
}

.visualize-config-modal {
  opacity: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: radial-gradient(circle at 0 0, #ffffffe0, #0000 30%), linear-gradient(160deg, #f8f1dc 0%, #f4f7ef 36%, #eef5fb 100%);
  border: 1px solid #7385a138;
  border-radius: 28px;
  width: min(780px, 100vw - 20px);
  max-height: calc(100vh - 20px);
  padding: 18px 18px 16px;
  transition: transform .22s, opacity .22s;
  position: relative;
  overflow: hidden auto;
  transform: translateY(16px)scale(.985);
  box-shadow: 0 30px 80px #0f172a38, inset 0 1px #ffffffb3;
}

.visualize-config-modal.visible {
  opacity: 1;
  transform: translateY(0)scale(1);
}

.visualize-config-modal::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.visualize-config-close {
  color: #3f4f63;
  cursor: pointer;
  background: #ffffffad;
  border: 0;
  border-radius: 14px;
  width: 34px;
  height: 34px;
  transition: transform .18s, background .18s;
  position: absolute;
  top: 12px;
  right: 12px;
  box-shadow: 0 10px 24px #0f172a14;
}

.visualize-config-close:hover {
  background: #fffffff0;
  transform: translateY(-1px);
}

.visualize-config-hero {
  margin-bottom: 12px;
  margin-right: 48px;
}

.visualize-config-kicker {
  color: #8a5a00;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: #ffffff9e;
  border-radius: 999px;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  font-size: 10px;
  font-weight: 700;
  display: inline-flex;
}

.visualize-config-hero h3 {
  letter-spacing: -.04em;
  color: #243248;
  max-width: 17ch;
  margin: 8px 0 6px;
  font-size: clamp(1.4rem, 1.85vw, 1.95rem);
  line-height: .94;
}

.visualize-config-hero p {
  color: #5e6e81;
  max-width: 50ch;
  margin: 0;
  font-size: .82rem;
  line-height: 1.38;
}

.visualize-config-layout {
  grid-template-columns: minmax(0, 1.08fr) minmax(230px, .78fr);
  align-items: start;
  gap: 12px;
  margin-bottom: 12px;
  display: grid;
}

.visualize-config-main, .visualize-config-side {
  gap: 12px;
  min-width: 0;
  display: grid;
}

.visualize-config-section, .visualize-config-panel {
  background: #ffffff8f;
  border: 1px solid #7d8da22e;
  border-radius: 22px;
  min-width: 0;
  padding: 13px;
  box-shadow: inset 0 1px #fff9;
}

.visualize-config-section--emphasis {
  background: linear-gradient(#fffaf0d1, #f5f9ffad);
}

.visualize-config-section-label {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6a7a8b;
  margin-bottom: 8px;
  font-size: .72rem;
  font-weight: 700;
}

.visualize-config-mode-pills {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  display: grid;
}

.visualize-config-mode-pill {
  color: #445368;
  cursor: pointer;
  background: #ffffffbd;
  border: 1px solid #7a8a9e2e;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  font-size: .82rem;
  font-weight: 700;
  transition: transform .18s, box-shadow .18s, border-color .18s, background .18s;
  display: inline-flex;
}

.visualize-config-mode-pill:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 28px #42567014;
}

.visualize-config-mode-pill.active {
  color: #143049;
  background: linear-gradient(135deg, #f0f7ff 0%, #dcebff 100%);
  border-color: #467ac252;
  box-shadow: 0 20px 34px #3268aa1f;
}

.visualize-config-check-card {
  cursor: pointer;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  padding: 10px 0;
  display: grid;
}

.visualize-config-check-card + .visualize-config-check-card {
  border-top: 1px solid #8091a629;
}

.visualize-config-check-card input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.visualize-config-check-card__box {
  background: #ffffffc7;
  border: 1.5px solid #59687c73;
  border-radius: 7px;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  position: relative;
}

.visualize-config-check-card input:checked + .visualize-config-check-card__box {
  background: linear-gradient(135deg, #2f7de1, #66a7ef);
  border-color: #0000;
  box-shadow: 0 10px 22px #2f7de133;
}

.visualize-config-check-card input:checked + .visualize-config-check-card__box:after {
  content: "";
  border: 2px solid #fff;
  border-width: 0 2px 2px 0;
  width: 5px;
  height: 10px;
  position: absolute;
  top: 3px;
  left: 7px;
  transform: rotate(45deg);
}

.visualize-config-check-card__title {
  color: #2a3648;
  font-size: .9rem;
  font-weight: 700;
  display: block;
}

.visualize-config-check-card__desc {
  color: #67788d;
  margin-top: 3px;
  font-size: .8rem;
  line-height: 1.3;
  display: block;
}

.visualize-config-check-card.is-hidden {
  display: none;
}

.visualize-config-provider, .visualize-config-extra {
  color: #314154;
  width: 100%;
  font: inherit;
  box-sizing: border-box;
  background: #ffffffd1;
  border: 1px solid #78889c33;
  border-radius: 16px;
}

.visualize-config-provider {
  min-height: 44px;
  padding: 0 12px;
  font-size: .84rem;
}

.visualize-config-extra {
  resize: vertical;
  min-height: 76px;
  padding: 10px 12px;
  font-size: .83rem;
  line-height: 1.35;
}

.visualize-config-provider:focus, .visualize-config-extra:focus, .visualize-config-mode-pill:focus-visible, .visualize-config-variant-hero:focus-visible, .visualize-config-tier-card:focus-visible, .visualize-config-cancel:focus-visible, .visualize-config-close:focus-visible {
  outline-offset: 2px;
  outline: 2px solid #3b82f6;
}

.visualize-config-variant-hero {
  color: #203147;
  cursor: pointer;
  text-align: left;
  background: radial-gradient(circle at 0 0, #ffecbb8f, #0000 28%), linear-gradient(135deg, #fffdf8f5, #ecf4fff5);
  border: 1px solid #657a9533;
  border-radius: 26px;
  grid-template-columns: minmax(0, 1.2fr) auto;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 12px;
  padding: 18px 20px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  display: grid;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffffc7, 0 24px 40px #4a5e7a1f;
}

.visualize-config-variant-hero:before {
  content: "";
  background: linear-gradient(90deg, #bd8a1f, #3d79cc2e);
  width: 100%;
  height: 4px;
  position: absolute;
  inset: 0 auto auto 0;
}

.visualize-config-variant-hero:after {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, #5b97e829, #0000 68%);
  border-radius: 999px;
  width: 180px;
  height: 180px;
  position: absolute;
  top: -40px;
  right: -50px;
}

.visualize-config-variant-hero:hover {
  border-color: #4d82c74d;
  transform: translateY(-3px);
  box-shadow: inset 0 1px #ffffffd1, 0 30px 46px #4a5e7a2e;
}

.visualize-config-variant-hero__content, .visualize-config-variant-hero__stack {
  z-index: 1;
  position: relative;
}

.visualize-config-variant-hero__content {
  gap: 6px;
  display: grid;
}

.visualize-config-variant-hero__eyebrow {
  color: #946208;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800;
}

.visualize-config-variant-hero__title {
  letter-spacing: -.03em;
  color: #213349;
  font-size: 1.08rem;
  font-weight: 800;
}

.visualize-config-variant-hero__desc {
  color: #607185;
  text-wrap: pretty;
  max-width: 54ch;
  font-size: .8rem;
  line-height: 1.35;
}

.visualize-config-variant-hero__stack {
  flex: none;
  width: 150px;
  height: 102px;
  position: relative;
}

.visualize-config-variant-hero__stack-card {
  letter-spacing: -.02em;
  border: 1px solid #6c7e952e;
  border-radius: 18px;
  justify-content: flex-start;
  align-items: flex-end;
  width: 102px;
  height: 72px;
  padding: 12px;
  font-size: .78rem;
  font-weight: 800;
  display: inline-flex;
  position: absolute;
  box-shadow: inset 0 1px #fffc, 0 18px 30px #384a6524;
}

.visualize-config-variant-hero__stack-card--openai {
  color: #3167ad;
  background: linear-gradient(#fff 0%, #eef5ff 100%);
  top: 12px;
  left: 0;
  transform: rotate(-8deg);
}

.visualize-config-variant-hero__stack-card--claude {
  color: #946208;
  background: linear-gradient(#fffdf8 0%, #fff1cf 100%);
  top: 0;
  left: 24px;
  transform: rotate(-1deg);
}

.visualize-config-variant-hero__stack-card--gemini {
  color: #2d8a6d;
  background: linear-gradient(#fbfffd 0%, #e7f7f0 100%);
  top: 14px;
  right: 0;
  transform: rotate(7deg);
}

.visualize-config-tier-stage {
  background: radial-gradient(circle at 0 0, #fff3d2b8, #0000 32%), linear-gradient(#fffcf4e6, #eff5fceb);
  border: 1px solid #7d8da22e;
  border-radius: 26px;
  margin-top: 4px;
  padding: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffffb8, 0 18px 32px #55688414;
}

.visualize-config-tier-stage:before, .visualize-config-tier-stage:after {
  content: "";
  pointer-events: none;
  filter: blur(2px);
  border-radius: 999px;
  position: absolute;
}

.visualize-config-tier-stage:before {
  background: radial-gradient(circle, #81b2ff2e, #0000 68%);
  width: 180px;
  height: 180px;
  top: -70px;
  right: -60px;
}

.visualize-config-tier-stage:after {
  background: radial-gradient(circle, #ffd27929, #0000 70%);
  width: 240px;
  height: 240px;
  bottom: -150px;
  left: -110px;
}

.visualize-config-tier-stage__header {
  z-index: 1;
  margin-bottom: 12px;
  position: relative;
}

.visualize-config-tier-stage__header p {
  color: #617286;
  max-width: 56ch;
  margin: 0;
  font-size: .8rem;
  line-height: 1.35;
}

.visualize-config-tier-grid {
  z-index: 1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 12px;
  display: grid;
  position: relative;
}

.visualize-config-tier-card {
  --tier-accent: #4d8fe7;
  --tier-shadow: #4d8fe729;
  --tier-surface: linear-gradient(180deg, #fffffff0, #f1f6fcf0);
  text-align: left;
  background: var(--tier-surface);
  color: #1f3148;
  cursor: pointer;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  border: 1px solid #6f81972e;
  border-radius: 24px;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  min-height: 168px;
  padding: 14px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffffc7, 0 18px 32px #495c761a;
}

.visualize-config-tier-card:before {
  content: "";
  background: linear-gradient(90deg, var(--tier-accent), #fff0);
  opacity: .85;
  width: 100%;
  height: 4px;
  position: absolute;
  inset: 0 auto auto 0;
}

.visualize-config-tier-card:after {
  content: "";
  background: linear-gradient(135deg, var(--tier-shadow), #fff0);
  pointer-events: none;
  border-radius: 28px;
  width: 110px;
  height: 110px;
  position: absolute;
  bottom: -36px;
  right: -30px;
  transform: rotate(18deg);
}

.visualize-config-tier-card:hover {
  border-color: #3876bf47;
  transform: translateY(-6px);
  box-shadow: inset 0 1px #ffffffd1, 0 28px 40px #495c7629;
}

.visualize-config-tier-card--quick {
  --tier-accent: #5992e8;
  --tier-shadow: #5992e838;
  --tier-surface: linear-gradient(180deg, #fff 0%, #edf5ff 100%);
  transform: rotate(-2deg);
}

.visualize-config-tier-card--medium {
  --tier-accent: #d4a23f;
  --tier-shadow: #d4a23f38;
  --tier-surface: linear-gradient(180deg, #fffdf8 0%, #fff5da 100%);
  transform: translateY(12px);
}

.visualize-config-tier-card--long {
  --tier-accent: #2d8a6d;
  --tier-shadow: #2d8a6d33;
  --tier-surface: linear-gradient(180deg, #fbfffd 0%, #e8f7f0 100%);
  transform: rotate(2deg);
}

.visualize-config-tier-card--quick:hover {
  transform: rotate(-2deg)translateY(-6px);
}

.visualize-config-tier-card--medium:hover {
  transform: translateY(6px);
}

.visualize-config-tier-card--long:hover {
  transform: rotate(2deg)translateY(-6px);
}

.visualize-config-tier-card__topline {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  width: 100%;
  display: flex;
}

.visualize-config-tier-card__badge {
  color: #7a4d00;
  letter-spacing: .02em;
  background: #fff1c9f0;
  border-radius: 999px;
  align-self: flex-start;
  padding: 5px 9px;
  font-size: .72rem;
  font-weight: 800;
}

.visualize-config-tier-card__icon {
  width: 34px;
  height: 34px;
  color: var(--tier-accent);
  background: #ffffffb8;
  border-radius: 12px;
  flex: none;
  justify-content: center;
  align-items: center;
  font-size: .9rem;
  display: inline-flex;
  box-shadow: inset 0 1px #ffffffc7;
}

.visualize-config-tier-card__eyebrow {
  color: var(--tier-accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .72rem;
  font-weight: 800;
}

.visualize-config-tier-card__title {
  letter-spacing: -.03em;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 1.02rem;
  font-weight: 800;
}

.visualize-config-tier-card__desc {
  color: #617286;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-wrap: pretty;
  max-width: 100%;
  font-size: .79rem;
  line-height: 1.32;
}

.visualize-config-footer {
  justify-content: flex-end;
  margin-top: 8px;
  display: flex;
}

.visualize-config-cancel {
  color: #506175;
  min-height: 38px;
  font: inherit;
  cursor: pointer;
  background: #ffffffd1;
  border: 1px solid #7d8da23d;
  border-radius: 12px;
  padding: 0 14px;
  font-size: .84rem;
  font-weight: 700;
}

.visualize-config-cancel:hover {
  background: #fffffff5;
}

.dark-mode .visualize-config-overlay {
  background: radial-gradient(circle at top, #f5be5a14, #0000 28%), #020617c7;
}

.dark-mode .visualize-config-modal {
  background: radial-gradient(circle at 0 0, #3b82f61a, #0000 24%), linear-gradient(160deg, #111926 0%, #0d1521 52%, #0c1824 100%);
  border-color: #4755696b;
}

.dark-mode .visualize-config-kicker, .dark-mode .visualize-config-section, .dark-mode .visualize-config-panel, .dark-mode .visualize-config-variant-hero, .dark-mode .visualize-config-tier-stage, .dark-mode .visualize-config-mode-pill, .dark-mode .visualize-config-provider, .dark-mode .visualize-config-extra, .dark-mode .visualize-config-tier-card, .dark-mode .visualize-config-cancel, .dark-mode .visualize-config-close {
  color: #d7e3f0;
  background-color: #0f172ac7;
  border-color: #94a3b829;
}

.dark-mode .visualize-config-section, .dark-mode .visualize-config-panel {
  background: linear-gradient(#0a1222eb, #080f1ce6);
  box-shadow: inset 0 1px #ffffff08, 0 18px 28px #0003;
}

.dark-mode .visualize-config-section--emphasis {
  background: linear-gradient(#182134f5, #0e1626f0);
  border-color: #687e9e42;
}

.dark-mode .visualize-config-variant-hero {
  background: radial-gradient(circle at 0 0, #f0b53e24, #0000 26%), linear-gradient(135deg, #11192afa, #0b1324f5 52%, #0a192bfa);
  border-color: #7a8fad42;
  box-shadow: inset 0 1px #ffffff0a, 0 24px 40px #0000003d;
}

.dark-mode .visualize-config-tier-stage {
  background: radial-gradient(circle at 0 0, #f0b53e1f, #0000 24%), linear-gradient(#0f1728fa, #0a1220f5 58%, #0a1626fa);
  border-color: #7a8fad3d;
  box-shadow: inset 0 1px #ffffff0a, 0 24px 40px #00000038;
}

.dark-mode .visualize-config-provider, .dark-mode .visualize-config-extra {
  color: #edf3fb;
  background: #070e1ceb;
  border-color: #7a8fad2e;
}

.dark-mode .visualize-config-provider option {
  color: #edf3fb;
  background: #0b1323;
}

.dark-mode .visualize-config-extra::placeholder {
  color: #8fa5bf;
}

.dark-mode .visualize-config-hero h3, .dark-mode .visualize-config-variant-hero__title, .dark-mode .visualize-config-tier-card__title, .dark-mode .visualize-config-check-card__title {
  color: #f6f8fb;
}

.dark-mode .visualize-config-hero p, .dark-mode .visualize-config-variant-hero__desc, .dark-mode .visualize-config-tier-stage__header p, .dark-mode .visualize-config-tier-card__desc, .dark-mode .visualize-config-check-card__desc, .dark-mode .visualize-config-section-label {
  color: #b7c6d8;
}

.dark-mode .visualize-config-mode-pill.active {
  color: #eff6ff;
  background: linear-gradient(135deg, #1c3e6af2, #16689cb8);
}

.dark-mode .visualize-config-tier-card__badge {
  color: #fcd34d;
  background: #facc152e;
}

.dark-mode .visualize-config-variant-hero__eyebrow {
  color: #f6c65f;
}

.dark-mode .visualize-config-check-card__box {
  background: #ffffff0f;
  border-color: #b3c4db6b;
}

.dark-mode .visualize-config-variant-hero__stack-card {
  border-color: #94a3b829;
}

.dark-mode .visualize-config-variant-hero__stack-card--openai {
  color: #8fc0ff;
  background: linear-gradient(#0d1c2ef5, #112a4ae0);
}

.dark-mode .visualize-config-variant-hero__stack-card--claude {
  color: #f6c65f;
  background: linear-gradient(#1c180cf5, #403112d6);
}

.dark-mode .visualize-config-variant-hero__stack-card--gemini {
  color: #79d3b2;
  background: linear-gradient(#0a1816f5, #103c30d6);
}

.dark-mode .visualize-config-tier-card__icon {
  background: #0f172ab8;
}

.dark-mode .visualize-config-tier-card--quick {
  --tier-surface: linear-gradient(180deg, #0e1828f5, #112a4ae0);
}

.dark-mode .visualize-config-tier-card--medium {
  --tier-surface: linear-gradient(180deg, #16140cf5, #403112d6);
}

.dark-mode .visualize-config-tier-card--long {
  --tier-surface: linear-gradient(180deg, #0a1816f5, #103c30d6);
}

@media (width <= 860px) {
  .visualize-config-modal {
    width: min(100vw - 16px, 720px);
    padding: 16px 14px 14px;
  }

  .visualize-config-layout, .visualize-config-tier-grid, .visualize-config-variant-hero {
    grid-template-columns: 1fr;
  }

  .visualize-config-variant-hero__stack {
    justify-self: end;
    width: 100%;
    max-width: 180px;
  }

  .visualize-config-tier-card, .visualize-config-tier-card--quick, .visualize-config-tier-card--medium, .visualize-config-tier-card--long, .visualize-config-tier-card--quick:hover, .visualize-config-tier-card--medium:hover, .visualize-config-tier-card--long:hover {
    transform: none;
  }
}

@media (width <= 560px) {
  .visualize-config-overlay {
    padding: 10px;
  }

  .visualize-config-modal {
    border-radius: 22px;
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
    padding: 16px 14px 14px;
  }

  .visualize-config-hero {
    margin-right: 48px;
  }

  .visualize-config-hero h3 {
    max-width: none;
    font-size: 1.45rem;
  }

  .visualize-config-section, .visualize-config-panel, .visualize-config-variant-hero, .visualize-config-tier-stage, .visualize-config-tier-card {
    border-radius: 18px;
    padding: 16px;
  }

  .visualize-config-variant-hero__stack {
    justify-self: start;
  }

  .visualize-config-mode-pill {
    min-height: 50px;
  }
}

.build-monitor-overlay {
  display: none;
}

.build-monitor-overlay.visible {
  display: contents;
}

.build-monitor-container {
  pointer-events: auto;
  user-select: none;
  background-color: #fff;
  border-radius: 16px;
  flex-direction: column;
  width: 600px;
  min-width: 300px;
  height: 500px;
  min-height: 200px;
  max-height: 80vh;
  animation: .3s slideUp;
  display: flex;
  position: relative;
  box-shadow: 0 20px 60px #0000004d, 0 0 1px #0003;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.build-monitor-header {
  border-bottom: 1px solid #e2e8f0;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  display: flex;
}

.build-monitor-header h3 {
  color: #2d3748;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.build-monitor-close {
  color: #718096;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 28px;
  line-height: 1;
  transition: all .2s;
  display: flex;
}

.build-monitor-close:hover {
  color: #2d3748;
  background-color: #f7fafc;
}

.build-monitor-content {
  flex: 1;
  min-height: 200px;
  max-height: calc(80vh - 80px);
  padding: 20px 24px;
  overflow-y: auto;
}

.build-monitor-step {
  background-color: #f8fafc;
  border-left: 3px solid #cbd5e0;
  border-radius: 8px;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
  padding: 12px;
  animation: .3s fadeIn;
  display: flex;
}

.build-monitor-step-info {
  background-color: #ebf8ff;
  border-left-color: #4299e1;
}

.build-monitor-step-success {
  background-color: #f0fff4;
  border-left-color: #48bb78;
}

.build-monitor-step-warning {
  background-color: #fffaf0;
  border-left-color: #ed8936;
}

.build-monitor-step-error {
  background-color: #fff5f5;
  border-left-color: #f56565;
}

.build-monitor-step-debug {
  background-color: #faf5ff;
  border-left-color: #9f7aea;
}

.build-monitor-icon {
  flex-shrink: 0;
  font-size: 20px;
  line-height: 1;
}

.build-monitor-message {
  flex: 1;
  min-width: 0;
}

.build-monitor-text {
  color: #2d3748;
  margin-bottom: 4px;
  font-size: 14px;
  line-height: 1.5;
}

.build-monitor-time {
  color: #a0aec0;
  font-size: 12px;
}

.build-monitor-debug-block {
  background-color: #2d3748;
  border: 1px solid #4a5568;
  border-radius: 8px;
  margin: 16px 0;
  padding: 12px;
}

.build-monitor-debug-label {
  color: #a0aec0;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
}

.build-monitor-debug-content {
  color: #e2e8f0;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
  font-family: Consolas, Monaco, Courier New, monospace;
  font-size: 12px;
  line-height: 1.6;
  overflow-x: auto;
}

.build-monitor-progress-container {
  background-color: #f7fafc;
  border-radius: 8px;
  margin: 16px 0;
  padding: 16px;
}

.build-monitor-progress-label {
  color: #4a5568;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
}

.build-monitor-progress-bar {
  background-color: #e2e8f0;
  border-radius: 4px;
  width: 100%;
  height: 8px;
  overflow: hidden;
}

.build-monitor-progress-fill {
  background: linear-gradient(90deg, #4299e1, #667eea);
  border-radius: 4px;
  height: 100%;
  transition: width .3s;
  animation: 2s infinite shimmer;
}

@keyframes shimmer {
  100% {
    left: 100%;
  }
}

.build-monitor-spinner {
  border: 2px solid #e2e8f0;
  border-top-color: #4299e1;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: .8s linear infinite spin;
}

@keyframes spin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

body.dark-mode .build-monitor-container {
  background-color: #1a202c;
  box-shadow: 0 20px 60px #0009, 0 0 1px #ffffff1a;
}

body.dark-mode .build-monitor-header {
  border-bottom-color: #2d3748;
}

body.dark-mode .build-monitor-header h3 {
  color: #f7fafc;
}

body.dark-mode .build-monitor-close {
  color: #a0aec0;
}

body.dark-mode .build-monitor-close:hover {
  color: #f7fafc;
  background-color: #2d3748;
}

body.dark-mode .build-monitor-step {
  background-color: #2d3748;
  border-left-color: #4a5568;
}

body.dark-mode .build-monitor-step-info {
  background-color: #4299e11a;
  border-left-color: #4299e1;
}

body.dark-mode .build-monitor-step-success {
  background-color: #48bb781a;
  border-left-color: #48bb78;
}

body.dark-mode .build-monitor-step-warning {
  background-color: #ed89361a;
  border-left-color: #ed8936;
}

body.dark-mode .build-monitor-step-error {
  background-color: #f565651a;
  border-left-color: #f56565;
}

body.dark-mode .build-monitor-step-debug {
  background-color: #9f7aea1a;
  border-left-color: #9f7aea;
}

body.dark-mode .build-monitor-text {
  color: #e2e8f0;
}

body.dark-mode .build-monitor-time {
  color: #718096;
}

body.dark-mode .build-monitor-debug-block {
  background-color: #0d1117;
  border-color: #30363d;
}

body.dark-mode .build-monitor-debug-label {
  color: #8b949e;
}

body.dark-mode .build-monitor-debug-content {
  color: #c9d1d9;
}

body.dark-mode .build-monitor-progress-container {
  background-color: #2d3748;
}

body.dark-mode .build-monitor-progress-label {
  color: #cbd5e0;
}

body.dark-mode .build-monitor-progress-bar {
  background-color: #4a5568;
}

.build-monitor-resize-handle {
  cursor: nwse-resize;
  color: #cbd5e0;
  opacity: .6;
  user-select: none;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 2px;
  font-size: 16px;
  line-height: 1;
  transition: opacity .2s;
  display: flex;
  position: absolute;
  bottom: 0;
  right: 0;
}

.build-monitor-resize-handle:hover {
  opacity: 1;
  color: #4299e1;
}

body.dark-mode .build-monitor-resize-handle {
  color: #4a5568;
}

body.dark-mode .build-monitor-resize-handle:hover {
  color: #4299e1;
}

.build-monitor-mode-toggle {
  gap: 8px;
  padding: 8px 16px 0;
  display: flex;
}

.build-monitor-mode-toggle button {
  appearance: none;
  color: #2d3748;
  cursor: pointer;
  background: #f7fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  transition: all .15s ease-in-out;
}

.build-monitor-mode-toggle button:hover {
  background: #edf2f7;
}

.build-monitor-mode-toggle button.active {
  color: #fff;
  background: #4299e1;
  border-color: #4299e1;
}

body.dark-mode .build-monitor-mode-toggle button {
  color: #cbd5e0;
  background: #1a202c;
  border-color: #2d3748;
}

body.dark-mode .build-monitor-mode-toggle button:hover {
  background: #2d3748;
}

body.dark-mode .build-monitor-mode-toggle button.active {
  color: #fff;
  background: #3182ce;
  border-color: #3182ce;
}

.build-monitor-simple {
  flex: 1;
  padding: 12px 16px;
  overflow-y: auto;
}

.build-monitor-simple .simple-status {
  color: #4a5568;
  margin-bottom: 10px;
  font-size: 13px;
}

.build-monitor-simple .section-title {
  text-transform: uppercase;
  color: #718096;
  letter-spacing: .3px;
  margin: 8px 0 6px;
  font-size: 11px;
  font-weight: 700;
}

.build-monitor-simple .features-list {
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
  display: flex;
}

.build-monitor-simple .features-list li {
  color: #2d3748;
  background: #edf2f7;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
}

.build-monitor-simple .conversation-list {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.build-monitor-simple .conversation-list .msg {
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.build-monitor-simple .conversation-list .msg .role {
  color: #4a5568;
  text-transform: capitalize;
  min-width: 64px;
  font-size: 11px;
  font-weight: 700;
}

.build-monitor-simple .conversation-list .msg .text {
  color: #2d3748;
  font-size: 13px;
  line-height: 1.4;
}

body.dark-mode .build-monitor-simple .simple-status {
  color: #cbd5e0;
}

body.dark-mode .build-monitor-simple .section-title {
  color: #a0aec0;
}

body.dark-mode .build-monitor-simple .features-list li {
  color: #e2e8f0;
  background: #2d3748;
  border-color: #4a5568;
}

body.dark-mode .build-monitor-simple .conversation-list .msg .role {
  color: #a0aec0;
}

body.dark-mode .build-monitor-simple .conversation-list .msg .text {
  color: #e2e8f0;
}

.build-monitor-simple .simple-intro {
  color: #4a5568;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  margin: 6px 0 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  line-height: 1.5;
}

body.dark-mode .build-monitor-simple .simple-intro {
  color: #cbd5e0;
  background: #2d3748;
  border-color: #4a5568;
}

.build-monitor-simple .simple-steps {
  flex-direction: column;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.build-monitor-simple .simple-steps li {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  display: flex;
}

.build-monitor-simple .simple-steps li .bullet {
  color: #2d3748;
  background: #edf2f7;
  border-radius: 999px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
}

.build-monitor-simple .simple-steps li .label {
  color: #2d3748;
  font-size: 13px;
}

.build-monitor-simple .simple-steps li.active {
  background: #ebf8ff;
  border-color: #90cdf4;
}

.build-monitor-simple .simple-steps li.active .bullet {
  color: #fff;
  background: #4299e1;
}

.build-monitor-simple .simple-steps li.done {
  background: #f0fff4;
  border-color: #c6f6d5;
}

.build-monitor-simple .simple-steps li.done .bullet {
  color: #fff;
  background: #48bb78;
}

body.dark-mode .build-monitor-simple .simple-steps li {
  background: #1a202c;
  border-color: #4a5568;
}

body.dark-mode .build-monitor-simple .simple-steps li .bullet {
  color: #cbd5e0;
  background: #2d3748;
}

body.dark-mode .build-monitor-simple .simple-steps li .label {
  color: #e2e8f0;
}

body.dark-mode .build-monitor-simple .simple-steps li.active {
  background: #1a365d;
  border-color: #2c5282;
}

body.dark-mode .build-monitor-simple .simple-steps li.active .bullet {
  color: #fff;
  background: #2b6cb0;
}

body.dark-mode .build-monitor-simple .simple-steps li.done {
  background: #1c4532;
  border-color: #276749;
}

body.dark-mode .build-monitor-simple .simple-steps li.done .bullet {
  color: #fff;
  background: #2f855a;
}

@media (width <= 768px) {
  .build-monitor-container {
    max-height: 85vh;
    width: 95% !important;
  }

  .build-monitor-header, .build-monitor-content {
    padding: 16px 20px;
  }

  .build-monitor-debug-content {
    font-size: 11px;
  }

  .build-monitor-resize-handle {
    display: none;
  }
}

:root {
  --svg-background: #f5f5f5;
}

html, body {
  overscroll-behavior: none;
  overflow-anchor: none;
  flex-direction: column-reverse;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  transition: background-color .5s;
  display: flex;
  overflow: hidden;
}

body * {
  touch-action: manipulation;
}

#graph-container, #html-layer, #html-world, .ink-overlay {
  user-select: none;
}

#graph-container {
  overflow-anchor: none;
  flex-grow: 1;
  width: 100%;
  height: calc(100% - 50px);
  position: relative;
  overflow: hidden;
}

#main-svg {
  background-color: var(--svg-background);
  user-select: none;
  touch-action: auto;
  z-index: 0;
  width: 100%;
  height: 100%;
  transition: background-color .5s;
  position: absolute;
  top: 0;
  left: 0;
}

.selection-box {
  stroke: #000;
  stroke-dasharray: 4;
  stroke-width: 1px;
  fill: #337ab74d;
  pointer-events: none;
}

.dragging-line {
  pointer-events: none;
}

.custom-cursor {
  pointer-events: none;
  z-index: 1000;
  position: absolute;
}

.custom-cursor .cursor-name {
  font-size: 12px;
  position: absolute;
  bottom: -20px;
  right: 0;
}

.collab-cursor {
  pointer-events: none;
}

.collab-cursor .cursor-activity-label {
  fill: #ff9770;
  opacity: 0;
  paint-order: stroke;
  stroke: #00000059;
  stroke-width: .5px;
  font-size: 20px;
  font-weight: 600;
  transition: opacity .16s;
}

.collab-cursor.is-active .cursor-activity-label {
  opacity: 1;
}

.collab-cursor[data-activity="zoom_in"] .cursor-activity-label {
  fill: #58d69a;
}

.collab-cursor[data-activity="zoom_out"] .cursor-activity-label {
  fill: #7ebeff;
}

.collab-cursor .cursor-name {
  paint-order: stroke;
  stroke: #0006;
  stroke-width: .6px;
  font-weight: 600;
}

.loading-overlay {
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  background-color: #00000080;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s, visibility .3s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.loading-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.loading-content {
  text-align: center;
  background-color: #fff;
  border-radius: 5px;
  padding: 20px;
}

.graph-loading-spinner {
  border: 4px solid #f3f3f3;
  border-top-color: #3498db;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  animation: 1s linear infinite spin;
}

.katex * {
  background-color: #0000 !important;
}

#graph-container, #graph-container svg {
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

.drawing-hitless .drawing-path, .no-pointer-events {
  pointer-events: none;
}

.drawing-path {
  pointer-events: visiblePainted;
}

.ink-overlay {
  z-index: 10;
  pointer-events: none;
  touch-action: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.entry-overlay {
  --entry-ink: #121a2b;
  --entry-muted: #5a6676;
  --entry-muted-strong: #4f5a69;
  --entry-muted-soft: #7b8796;
  --entry-panel: #fffdf8;
  --entry-card: #fff;
  --entry-accent: #f2a23a;
  --entry-accent-deep: #d78a2f;
  --entry-accent-soft: #fff3df;
  --entry-warm-surface: #fff7ea;
  --entry-warm-surface-strong: #fff2dd;
  --entry-surface-base: #fffdfb;
  --entry-surface-subtle: #fbf6ef;
  --entry-surface-emphasis: #fff0d9;
  z-index: 10050;
  pointer-events: none;
  color: var(--entry-ink);
  opacity: 0;
  visibility: hidden;
  isolation: isolate;
  background: radial-gradient(circle at 18% 18%, #1e2638f7, #080c14fa), radial-gradient(circle at 88% 16%, #242c408c, #0000 55%), radial-gradient(circle at 72% 82%, #141c2c99, #0000 60%);
  justify-content: center;
  align-items: center;
  padding: 24px;
  font-family: Space Grotesk, Avenir Next, Trebuchet MS, sans-serif;
  transition: opacity .25s, visibility .25s;
  display: flex;
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.entry-overlay:before {
  content: "";
  opacity: .35;
  pointer-events: none;
  background-image: radial-gradient(#ffffff2e 1px, #0000 0), radial-gradient(#ffffff14 1px, #0000 0);
  background-position: 0 0, 10px 20px;
  background-size: 22px 22px, 60px 60px;
  position: absolute;
  inset: 0;
}

.entry-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.entry-overlay-open {
  overflow: hidden;
}

body.entry-overlay-open > :not(#entry-overlay) {
  visibility: hidden;
  pointer-events: none;
}

body.entry-overlay-open #graph-container, body.entry-overlay-open #html-layer, body.entry-overlay-open #html-world, body.entry-overlay-open #main-svg, body.entry-overlay-open #overlay-svg, body.entry-overlay-open .ink-overlay {
  content-visibility: hidden;
}

.entry-overlay-gl {
  z-index: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.entry-overlay-panel-gl {
  z-index: 4;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.entry-overlay-panel-content {
  z-index: 2;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  display: flex;
  position: relative;
}

.entry-overlay-gl canvas, .entry-overlay-panel-gl canvas {
  mix-blend-mode: screen;
  width: 100%;
  height: 100%;
  display: block;
}

.entry-overlay-gl canvas {
  opacity: .45;
}

.entry-overlay-panel-gl canvas {
  opacity: .55;
}

.entry-overlay-panel {
  z-index: 2;
  opacity: 0;
  background: linear-gradient(165deg, #fff, #f6f1e9);
  border: 1px solid #ffffff73;
  border-radius: 22px;
  flex-direction: column;
  width: min(1120px, 96vw);
  max-height: 92vh;
  transition: transform .4s, opacity .4s;
  display: flex;
  position: relative;
  overflow: hidden;
  transform: translateY(18px)scale(.98);
  box-shadow: 0 34px 80px #050810b3, 0 12px 28px #05081059, inset 0 0 0 1px #ffffffb3;
}

.entry-overlay.visible .entry-overlay-panel {
  opacity: 1;
  transform: translateY(0)scale(1);
}

.entry-overlay-hero {
  background: linear-gradient(135deg, #fffaf4fa, #ffffffeb);
  border-bottom: 1px solid #0f172a14;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 24px 28px 18px;
  display: flex;
}

.entry-overlay-brand {
  align-items: center;
  gap: 14px;
  display: flex;
}

.entry-overlay-logo {
  color: #f8fafc;
  background: linear-gradient(145deg, #1f3b5c, #142235);
  border-radius: 16px;
  place-items: center;
  width: 56px;
  height: 56px;
  font-size: 24px;
  display: grid;
  box-shadow: 0 10px 18px #0f172a4d, inset 0 0 0 1px #ffffff1a;
}

.entry-overlay-title {
  align-items: center;
  gap: 10px;
  font-size: 28px;
  font-weight: 700;
  display: flex;
}

.entry-overlay-title-spark {
  background: linear-gradient(135deg, var(--entry-accent-soft), #ffe0b2);
  width: 28px;
  height: 28px;
  color: var(--entry-accent);
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  display: inline-flex;
  box-shadow: 0 6px 12px #f2a23a40;
}

.entry-overlay-subtitle {
  color: var(--entry-muted);
  margin-top: 4px;
  font-size: 14px;
}

.entry-overlay-count {
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--entry-muted-strong);
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
}

.entry-overlay-actions {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  display: flex;
}

.entry-overlay-body {
  flex: 1;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 18px;
  min-height: 0;
  padding: 20px 28px 26px;
  display: grid;
  overflow: hidden;
}

.entry-overlay-left, .entry-overlay-right {
  flex-direction: column;
  gap: 14px;
  min-height: 0;
  display: flex;
}

.entry-overlay-recent {
  flex-direction: column;
  flex: 1;
  min-height: 0;
  display: flex;
  position: relative;
}

.entry-overlay-recent:after {
  content: "";
  background: linear-gradient(to bottom, transparent, var(--entry-surface-base) 85%);
  pointer-events: none;
  z-index: 1;
  border-radius: 0 0 15px 15px;
  height: 48px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.entry-overlay-card {
  background: var(--entry-surface-base);
  border: 1px solid #0f172a14;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 12px 26px #0f172a1f;
}

.entry-overlay-create {
  background: linear-gradient(150deg, var(--entry-surface-base), var(--entry-surface-subtle) 70%);
  border-color: #0f172a1a;
}

.entry-overlay-last {
  background: linear-gradient(160deg, var(--entry-surface-emphasis), var(--entry-surface-base) 70%);
  border-color: #f2a23a4d;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  display: grid;
}

.entry-overlay-last .entry-overlay-section-title {
  grid-column: 1 / -1;
}

.entry-overlay-last .entry-overlay-last-row {
  grid-column: 1;
}

.entry-overlay-last .entry-overlay-badges {
  grid-column: 2;
  align-self: center;
}

.entry-overlay-last .custom-button {
  grid-column: 1 / -1;
}

.entry-overlay-last .entry-overlay-section-title i {
  color: var(--entry-accent);
}

.entry-overlay-section-title {
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--entry-muted-strong);
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  display: flex;
}

.entry-overlay-section-title i {
  color: var(--entry-muted-strong);
}

.entry-overlay-create-row {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.entry-overlay-input {
  background: var(--entry-surface-subtle);
  color: #111827;
  border: 1px solid #0f172a26;
  border-radius: 12px;
  flex: 220px;
  padding: 10px 12px;
  font-size: 14px;
}

.entry-overlay-input:focus {
  border-color: #f2a23a80;
  outline: 2px solid #f2a23a59;
}

.entry-overlay-hint {
  color: var(--entry-muted);
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
}

.entry-overlay-last-row {
  align-items: center;
  gap: 12px;
  display: flex;
}

.entry-overlay-last-icon {
  background: var(--entry-accent-soft);
  width: 40px;
  height: 40px;
  color: var(--entry-accent);
  border-radius: 12px;
  place-items: center;
  display: grid;
}

.entry-overlay-tip-grid {
  gap: 10px;
  display: grid;
}

.entry-overlay-tip-item {
  color: #475569;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  display: flex;
}

.entry-overlay-tip-item i {
  background: var(--entry-accent-soft);
  width: 24px;
  height: 24px;
  color: var(--entry-accent);
  border-radius: 8px;
  place-items: center;
  font-size: 12px;
  display: grid;
}

.entry-overlay-search {
  flex-direction: column;
  flex: 1;
  display: flex;
}

.entry-overlay-search .entry-overlay-search-results {
  flex: 1;
}

.entry-overlay-search-row {
  flex-wrap: wrap;
  gap: 10px;
  display: flex;
}

.entry-overlay-search-input {
  flex: 240px;
}

.entry-overlay-search-hint {
  margin-top: 8px;
}

.entry-overlay-search-results {
  scrollbar-width: thin;
  scrollbar-color: #0f172a2e transparent;
  flex-direction: column;
  gap: 8px;
  max-height: 210px;
  margin-top: 12px;
  padding-right: 2px;
  display: flex;
  overflow: hidden auto;
}

.entry-overlay-search-empty {
  color: var(--entry-muted);
  font-size: 12px;
  font-weight: 500;
}

.entry-overlay-search-result {
  background: var(--entry-surface-base);
  border: 1px solid #0f172a1a;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  transition: background .2s, border-color .2s;
  display: flex;
}

.entry-overlay-search-result:hover {
  background: var(--entry-surface-subtle);
  border-color: #f2a23a59;
}

.entry-overlay-search-text {
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  display: flex;
}

.entry-overlay-search-label {
  color: #111827;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  overflow: hidden;
}

.entry-overlay-search-meta {
  color: var(--entry-muted-strong);
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 11px;
  font-weight: 500;
  overflow: hidden;
}

.entry-overlay-search-open {
  padding: 6px 10px;
  font-size: 12px;
}

.entry-overlay-search-open i {
  font-size: 12px;
}

.entry-overlay-list {
  scrollbar-width: thin;
  scrollbar-color: #0f172a2e transparent;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  min-height: 120px;
  padding-bottom: 32px;
  padding-right: 2px;
  display: flex;
  overflow: hidden auto;
}

.entry-overlay-list::-webkit-scrollbar {
  width: 6px;
}

.entry-overlay-search-results::-webkit-scrollbar {
  width: 6px;
}

.entry-overlay-body::-webkit-scrollbar {
  width: 6px;
}

.entry-overlay-list::-webkit-scrollbar-track {
  background: none;
}

.entry-overlay-search-results::-webkit-scrollbar-track {
  background: none;
}

.entry-overlay-body::-webkit-scrollbar-track {
  background: none;
}

.entry-overlay-list::-webkit-scrollbar-thumb {
  background: #0f172a24;
  border-radius: 3px;
}

.entry-overlay-search-results::-webkit-scrollbar-thumb {
  background: #0f172a24;
  border-radius: 3px;
}

.entry-overlay-body::-webkit-scrollbar-thumb {
  background: #0f172a24;
  border-radius: 3px;
}

.entry-overlay-list::-webkit-scrollbar-thumb:hover {
  background: #0f172a47;
}

.entry-overlay-search-results::-webkit-scrollbar-thumb:hover {
  background: #0f172a47;
}

.entry-overlay-body::-webkit-scrollbar-thumb:hover {
  background: #0f172a47;
}

.entry-overlay-list-empty {
  color: var(--entry-muted);
  padding: 10px 4px;
  font-size: 13px;
  font-weight: 500;
}

.entry-overlay-space {
  background: var(--entry-surface-subtle);
  cursor: pointer;
  text-align: left;
  opacity: 0;
  border: 1px solid #0f172a14;
  border-radius: 14px;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  transition: background .2s, border-color .2s, transform .2s;
  animation: .4s forwards entryItem;
  display: grid;
  transform: translateY(6px);
}

.entry-overlay-space:hover {
  background: var(--entry-surface-emphasis);
  border-color: #f2a23a66;
  transform: translateY(-1px);
}

.entry-overlay-space-main {
  align-items: center;
  gap: 12px;
  min-width: 0;
  display: flex;
}

.entry-overlay-space-main > :not(.entry-overlay-space-icon) {
  min-width: 0;
}

.entry-overlay-space-icon {
  background: var(--entry-accent-soft);
  width: 32px;
  height: 32px;
  color: var(--entry-accent);
  border-radius: 10px;
  flex-shrink: 0;
  place-items: center;
  font-size: 13px;
  display: grid;
}

.entry-overlay-space:nth-child(4n+2) .entry-overlay-space-icon {
  color: #4a6b8a;
  background: #e8eff8;
}

.entry-overlay-space:nth-child(4n+3) .entry-overlay-space-icon {
  color: #7a6b5c;
  background: #f0ebe4;
}

.entry-overlay-space:nth-child(4n+4) .entry-overlay-space-icon {
  color: #4a7a60;
  background: #e6f2ec;
}

.entry-overlay-space-name {
  color: #111827;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 4px;
  font-weight: 600;
  overflow: hidden;
}

.entry-overlay-space-meta {
  color: var(--entry-muted-strong);
  font-size: 12px;
  font-weight: 500;
}

.entry-overlay-badges {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  display: flex;
}

.entry-overlay-badge {
  background: var(--entry-surface-subtle);
  color: #776a5c;
  border: 1px solid #c4b6a499;
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
}

.entry-overlay-last .entry-overlay-space-name {
  font-size: 16px;
}

.entry-overlay-recent-header {
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  display: flex;
}

.entry-overlay-scroll-hint {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--entry-muted);
  opacity: .6;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 600;
  display: inline-flex;
}

.entry-overlay-scroll-hint i {
  color: var(--entry-muted);
  font-size: 10px;
  animation: 1.8s ease-in-out infinite entryScrollHint;
}

@keyframes entryScrollHint {
  0%, 100% {
    opacity: .6;
    transform: translateY(0);
  }

  50% {
    opacity: 1;
    transform: translateY(3px);
  }
}

.entry-overlay .custom-button {
  border: 1px solid #0f172a2e;
  border-radius: 12px;
  gap: 8px;
  padding: 9px 14px;
  font-size: 14px;
}

.entry-overlay .custom-button i {
  color: currentColor;
  font-size: 13px;
}

.entry-overlay .custom-button.entry-overlay-primary {
  background: linear-gradient(135deg, var(--entry-accent), var(--entry-accent-deep));
  color: #1a2433;
  border-color: #f2a23abf;
  box-shadow: 0 10px 18px #080c1440, 0 6px 14px #f2a23a59;
}

.entry-overlay .custom-button.entry-overlay-secondary {
  background: var(--entry-surface-subtle);
  color: var(--entry-accent-deep);
  border-color: #f2a23a73;
}

.entry-overlay .custom-button.entry-overlay-ghost {
  color: #5f6b7a;
  background-color: #ffffffd9;
  border-color: #0f172a33;
}

.entry-overlay-actions i {
  color: currentColor;
}

@keyframes entryItem {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (width <= 980px) {
  .entry-overlay-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .entry-overlay-body {
    scrollbar-width: thin;
    scrollbar-color: #0f172a1f transparent;
    grid-template-columns: 1fr;
    overflow: hidden auto;
  }

  .entry-overlay-left, .entry-overlay-right {
    min-height: auto;
  }

  .entry-overlay-recent {
    flex: none;
  }

  .entry-overlay-list {
    flex: none;
    max-height: 280px;
  }

  .entry-overlay-search-results {
    max-height: 200px;
  }

  .entry-overlay-search {
    flex: none;
  }
}

@media (width <= 600px) {
  .entry-overlay-panel {
    border-radius: 18px;
  }

  .entry-overlay-hero {
    padding: 20px;
  }

  .entry-overlay-body {
    padding: 16px;
  }

  .entry-overlay-logo {
    width: 48px;
    height: 48px;
  }

  .entry-overlay-title {
    font-size: 22px;
  }
}

@media (width <= 720px) {
  .entry-overlay {
    padding: 0;
  }

  .entry-overlay-panel {
    border-radius: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
  }

  .entry-overlay-panel-content {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  .entry-overlay-hero {
    padding: 18px 18px 14px;
  }

  .entry-overlay-actions {
    width: 100%;
  }

  .entry-overlay-actions .custom-button {
    justify-content: center;
    width: 100%;
  }

  .entry-overlay-body {
    scrollbar-width: thin;
    scrollbar-color: #0f172a1f transparent;
    flex: 1;
    padding: 16px 18px 24px;
    overflow: hidden auto;
  }

  .entry-overlay-gl, .entry-overlay-panel-gl {
    display: none;
  }

  .entry-overlay-search {
    flex: none;
    order: -1;
  }

  .entry-overlay-card {
    padding: 14px;
  }

  .entry-overlay-list {
    flex: none;
    max-height: 240px;
  }

  .entry-overlay-search-results {
    max-height: 180px;
  }
}

@media (height <= 820px) and (width <= 980px) {
  .entry-overlay-body {
    scrollbar-width: thin;
    scrollbar-color: #0f172a1f transparent;
    overflow: hidden auto;
  }

  .entry-overlay-list {
    flex: none;
    max-height: 260px;
  }
}

.offline-indicator {
  color: #333;
  z-index: 10000;
  background-color: #f8d775;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  display: none;
  position: fixed;
  top: 10px;
  left: 10px;
  box-shadow: 0 2px 4px #0003;
}

.offline-indicator.visible {
  display: block;
}

.excel-table {
  border-collapse: collapse;
  background-color: #e6f2ff;
  width: 100%;
  font-family: Calibri, Arial, sans-serif;
  font-size: 14px;
}

.excel-table th, .excel-table td {
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 200px;
  padding: 8px;
  overflow: hidden;
}

.excel-table th, .excel-table .row-number {
  text-transform: uppercase;
  background-color: #f2f2f2;
  font-weight: bold;
}

.excel-table tr:nth-child(2n) {
  background-color: #ffffffb3;
}

.excel-table tr:hover {
  background-color: #e6e6e6;
}

.drawing-icon-active {
  background-color: #00428c57;
  border: 1.5px solid #3498db;
}

.drawing-path {
  stroke-linecap: round;
}

.drawing-path.pen {
  stroke-opacity: 1;
}

.drawing-path.highlighter {
  stroke-opacity: .95;
  mix-blend-mode: multiply;
}

.drawing-path.context-pulse {
  filter: none;
  stroke-linejoin: round;
  stroke-linecap: round;
  stroke-opacity: 1;
  stroke-width: 1.25px;
  mix-blend-mode: screen;
  animation: 1.1s ease-in-out infinite drawing-context-pulse;
  fill: none !important;
  stroke: #3a7afe !important;
}

@keyframes drawing-context-pulse {
  0% {
    stroke-opacity: .25;
    stroke-width: 1px;
  }

  50% {
    stroke-opacity: .9;
    stroke-width: 1.65px;
  }

  100% {
    stroke-opacity: .25;
    stroke-width: 1px;
  }
}

.color-tooltip {
  z-index: 1001;
  backdrop-filter: none;
  will-change: transform, opacity;
  opacity: 0;
  background: #fff;
  border: 1px solid #0000000f;
  border-radius: 10px;
  gap: 6px;
  padding: 8px;
  transition: opacity .22s cubic-bezier(.22, 1, .36, 1), transform .22s cubic-bezier(.22, 1, .36, 1), box-shadow .22s;
  display: none;
  position: absolute;
  bottom: 75%;
  overflow: visible;
  transform: translateY(6px)scale(.99);
  box-shadow: 0 4px 12px #0000001a, 0 1px 2px #0000000f;
}

.color-tooltip.visible {
  opacity: 1;
  transform: translateY(0)scale(1);
}

.pencil-color-tooltip:after {
  content: none;
  display: none;
}

.pencil-color-tooltip {
  box-sizing: border-box;
  width: 300px;
  max-width: 300px;
}

.pencil-color-tooltip .custom-button {
  box-shadow: none;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 4px 6px;
}

.pencil-color-tooltip .color-options-container {
  border-top: 1px solid #0000000f;
  margin-top: 4px;
  padding-top: 6px;
}

.color-option {
  cursor: pointer;
  width: 22px;
  height: 22px;
  box-shadow: none;
  background-clip: padding-box;
  border: 1px solid #0000001a;
  border-radius: 50%;
  margin: 3px;
  transition: transform .12s, box-shadow .12s, outline-color .12s;
  position: relative;
}

.color-tooltip .color-options-container {
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  display: flex;
}

.color-option:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 1px #0000001f;
}

.color-option:focus-visible {
  outline: none;
  transform: scale(1.08);
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px #3a7afe59;
}

.color-option.active {
  outline: none;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #3a7afe80;
}

.color-picker.active {
  outline-offset: 2px;
  border-radius: 50%;
  outline: 2px solid #3a7afe;
  box-shadow: 0 0 0 2px #3a7afe26;
}

.color-picker {
  appearance: none;
  cursor: pointer;
  width: 22px;
  height: 22px;
  box-shadow: none;
  background: none;
  border: none;
  border-radius: 50%;
  margin: 0 3px;
  padding: 0;
  overflow: hidden;
}

.color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 50%;
}

.color-picker::-moz-color-swatch {
  border: none;
  border-radius: 50%;
}

.pencil-button:hover .color-tooltip {
  opacity: 1;
  display: flex;
  transform: translateY(0);
}

.color-tooltip label {
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: .4px;
  align-items: center;
  gap: 6px;
  font-size: .7rem;
  font-weight: 600;
  display: flex;
}

#pencil-stroke-width-slider {
  cursor: pointer;
  appearance: none;
  background: none;
  border-radius: 999px;
  outline: none;
  width: 100%;
  min-width: 0;
  height: 4px;
  margin: 0 8px;
  transition: background .3s, box-shadow .2s;
  position: relative;
}

#pencil-stroke-width-slider:hover {
  background: none;
}

#pencil-stroke-width-slider:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px #3a7afe1f;
}

#pencil-stroke-width-slider::-webkit-slider-runnable-track {
  background: #e5e7eb;
  border-radius: 999px;
  height: 4px;
}

#pencil-stroke-width-slider::-moz-range-track {
  background: #e5e7eb;
  border-radius: 999px;
  height: 4px;
}

#pencil-stroke-width-slider:hover::-webkit-slider-runnable-track {
  background: #d1d5db;
}

#pencil-stroke-width-slider:hover::-moz-range-track {
  background: #d1d5db;
}

#pencil-stroke-width-slider::-webkit-slider-thumb {
  appearance: none;
  cursor: pointer;
  z-index: 2;
  background: #3a7afe;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  transition: all .2s;
  position: relative;
  box-shadow: 0 2px 4px #3a7afe33, 0 0 0 2px #3a7afe1a;
}

#pencil-stroke-width-slider::-webkit-slider-thumb:hover {
  transform: scale(1.08);
  box-shadow: 0 3px 8px #3a7afe4d, 0 0 0 3px #3a7afe26;
}

#pencil-stroke-width-slider::-moz-range-thumb {
  cursor: pointer;
  background: #3a7afe;
  border: none;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  transition: all .2s;
  box-shadow: 0 2px 4px #3a7afe33, 0 0 0 2px #3a7afe1a;
}

#pencil-stroke-width-slider::-moz-range-thumb:hover {
  transform: scale(1.08);
  box-shadow: 0 3px 8px #3a7afe4d, 0 0 0 3px #3a7afe26;
}

#pencil-stroke-width-value {
  color: #111827;
  text-align: center;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 5px;
  min-width: 28px;
  padding: 2px 6px;
  font-size: .8rem;
  font-weight: 700;
}

.pencil-color-tooltip #pencil-stroke-width-control {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-top: none;
  border-radius: 0 0 8px 8px;
  grid-template-columns: max-content minmax(140px, 1fr) max-content;
  align-items: center;
  gap: 8px;
  margin-top: -1px;
  padding: 6px 8px;
  display: grid;
}

.pencil-color-tooltip #pencil-stroke-width-control > label {
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .4px;
  min-width: 84px;
  font-size: .75rem;
  font-weight: 600;
}

.pencil-color-tooltip #pencil-stroke-width-control .slider-container {
  contain: paint;
  flex: 1;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 8px 10px 12px;
  display: flex;
  overflow: hidden;
}

.pencil-color-tooltip #pencil-stroke-width-control .custom-button-container {
  border-top: 1px solid #eceff3;
  border-left: none;
  grid-column: 1 / -1;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin: 8px 0 0;
  padding-left: 0;
  display: flex;
}

.pencil-color-tooltip #pencil-stroke-width-control .switch-option {
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.pencil-color-tooltip #pencil-stroke-width-control .switch {
  transform-origin: 100%;
  transform: scale(.85);
}

.pencil-color-tooltip #pencil-stroke-width-control .switch-option > label[for="fixed-stroke-toggle"] {
  color: #6b7280;
  white-space: nowrap;
  margin: 0;
  font-size: .7rem;
}

.pencil-color-tooltip #pencil-stroke-width-control .custom-button {
  box-shadow: none;
  background: none;
  border: none;
  padding: 0;
}

.pencil-color-tooltip .toggle-hint {
  color: #9ca3af;
  white-space: normal;
  margin-left: 34px;
  font-size: .7rem;
  line-height: 1.2;
  display: block;
}

#pencil-stroke-width-slider:disabled {
  cursor: not-allowed;
  filter: grayscale(.15);
  background: #eceff3;
}

.pencil-color-tooltip #pencil-stroke-width-control.range-disabled {
  opacity: .75;
}

.pencil-color-tooltip #pencil-stroke-width-control.range-disabled #pencil-stroke-width-value {
  opacity: .8;
}

#highlighter-stroke-width-slider:disabled {
  cursor: not-allowed;
  filter: grayscale(.15);
  background: #eceff3;
}

.highlighter-color-tooltip #highlighter-stroke-width-control {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.highlighter-color-tooltip #highlighter-stroke-width-control .stroke-control-header {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.highlighter-color-tooltip #highlighter-stroke-width-control .stroke-control-header > label {
  font-weight: 600;
}

.highlighter-color-tooltip #highlighter-stroke-width-control .switch-option {
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  display: inline-flex;
}

.highlighter-color-tooltip #highlighter-stroke-width-control .switch-labels {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  display: flex;
}

.highlighter-color-tooltip #highlighter-stroke-width-control .switch-option label[for="highlighter-fixed-stroke-toggle"] {
  color: #6b7280;
  white-space: nowrap;
  margin: 0;
  font-size: .7rem;
}

.highlighter-color-tooltip .toggle-hint {
  color: #9ca3af;
  font-size: .7rem;
  line-height: 1.2;
  display: block;
}

.highlighter-color-tooltip #highlighter-stroke-width-control .switch {
  transform-origin: 100%;
  transform: scale(.85);
}

.highlighter-color-tooltip #highlighter-stroke-width-control.range-disabled {
  opacity: .75;
}

.highlighter-color-tooltip #highlighter-stroke-width-control.range-disabled #highlighter-stroke-width-value {
  opacity: .8;
}

.mind-menu-chip {
  color: #374151;
  box-shadow: none;
  cursor: pointer;
  background: #fff;
  border: 1px solid #0000000f;
  border-radius: 9999px;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  font-size: .75rem;
  font-weight: 600;
  transition: all .15s;
  display: inline-flex;
}

.mind-menu-chip i {
  color: #3a7afe;
  font-size: .95rem;
}

.mind-menu-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px #00000014;
}

.mind-menu-chip.active {
  background: #eef6ff;
  border-color: #3a7afe33;
  box-shadow: 0 0 0 2px #3a7afe26;
}

.pencil-color-tooltip .mind-menu-chip {
  align-self: flex-start;
  margin-bottom: 6px;
}

#graph-container.cursor-drawing, #graph-container.cursor-drawing * {
  cursor: crosshair;
}

#graph-container.cursor-highlighting, #graph-container.cursor-highlighting * {
  cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%3E%0A%20%20%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%227%22%20stroke%3D%22black%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20%2F%3E%0A%3C%2Fsvg%3E") 8 8, auto !important;
}

#graph-container.cursor-erasing, #graph-container.cursor-erasing * {
  -webkit-touch-callout: none;
  cursor: none !important;
  user-select: none !important;
}

#graph-container.cursor-text, #graph-container.cursor-text * {
  cursor: text !important;
}

.text-tool-button .button-icon {
  font-weight: 700;
}

.drawing-text-editor-root {
  pointer-events: all;
}

.drawing-text-primitive {
  pointer-events: all;
  transform-origin: 0 0;
}

.drawing-text-primitive__content {
  pointer-events: all;
  background: none;
  border: 0;
}

body.node-drag-active .drawing-text-primitive, body.node-drag-active .drawing-text-primitive__content, body.node-drag-active .drawing-path.html-text-anchor {
  pointer-events: none !important;
}

.drawing-text-editor-host {
  pointer-events: all;
  z-index: 5;
}

.drawing-text-editor {
  appearance: none;
  pointer-events: all;
  box-shadow: none;
  box-sizing: border-box;
  resize: none;
  white-space: pre-wrap;
  background: none;
  border: 0;
  border-radius: 0;
  outline: none;
  margin: 0;
  padding: 0;
  display: block;
  overflow: hidden;
}

.drawing-text-editor-controls {
  pointer-events: all;
  align-items: center;
  gap: 8px;
  display: inline-flex;
}

.drawing-text-editor-mic {
  color: #111827e0;
  cursor: pointer;
  pointer-events: all;
  background: #fff;
  border: 1px solid #00000014;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  transition: background-color .14s, color .14s, box-shadow .14s, border-color .14s, transform .14s;
  display: inline-flex;
  box-shadow: 0 2px 6px #0000000f;
}

.drawing-text-editor-mic i {
  width: 14px;
  font-size: 14px;
  line-height: 1;
}

.drawing-text-editor-mic:hover:not(:disabled) {
  background: #f9fafb;
  box-shadow: 0 6px 16px #0f172a24;
}

.drawing-text-editor-mic.is-recording, .drawing-text-editor-mic.recording {
  color: #ff4757;
  background: #ff47572e;
  border-color: #ff475742;
  animation: 1.5s ease-in-out infinite drawing-text-recording-pulse;
}

.drawing-text-editor-mic.is-recording i, .drawing-text-editor-mic.recording i {
  animation: 1s ease-in-out infinite drawing-text-mic-pulse;
}

.drawing-text-editor-mic.is-processing, .drawing-text-editor-mic.processing {
  color: #2563eb;
  cursor: progress;
  background: #6faaff29;
  border-color: #6faaff4d;
}

.drawing-text-editor-mic:disabled {
  opacity: .85;
}

.drawing-text-editor-mic-status {
  color: #111827e0;
  pointer-events: none;
  min-height: 14px;
  font: 600 12px / 1.2 Segoe UI, Helvetica Neue, Arial, system-ui, sans-serif;
}

.drawing-resize-handle.text-wrap-handle {
  fill: #dbeafe;
  stroke: #2563eb;
}

.drawing-resize-handle.text-scale-handle {
  fill: #fff;
}

.drawing-resize-handle.text-disabled-handle {
  opacity: 0;
  pointer-events: none;
}

@keyframes drawing-text-recording-pulse {
  0% {
    box-shadow: 0 0 #ff475759;
  }

  70% {
    box-shadow: 0 0 0 10px #ff475700;
  }

  100% {
    box-shadow: 0 0 #ff475700;
  }
}

@keyframes drawing-text-mic-pulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}

@keyframes dash-line-animation {
  to {
    stroke-dashoffset: 6px;
  }
}

.no-pointer-events {
  pointer-events: none !important;
}

.selected-path {
  pointer-events: none;
  filter: drop-shadow(0 0 5px #07f9) !important;
}

.drawing-resize-handle {
  fill: #fff;
  stroke: #3498db;
  -width: 1.5;
  pointer-events: all;
  touch-action: none;
  rx: 4;
  ry: 4;
  filter: drop-shadow(0 1px 2px #0000001a);
}

.drawing-resize-handle, .rotation-handle, .rotation-line {
  transition: opacity .2s;
}

.drawing-resize-handle:hover {
  fill: #e8f4fc;
}

.drawing-resize-handle:active {
  fill: #bde0fc;
}

.rotation-handle {
  fill: #3498db;
  stroke: #fff;
  stroke-width: 1.5px;
  touch-action: none;
}

.rotation-line {
  stroke: #3498db;
  stroke-dasharray: 8 10;
  opacity: .5;
}

.drawing-handle-hidden {
  opacity: 0;
  pointer-events: none;
}

.path-bounding-box {
  fill: none;
  stroke: #3498db;
  stroke-width: 1.2px;
  stroke-dasharray: 4 2;
  pointer-events: all;
  touch-action: none;
  animation: 2s linear infinite dash-line-animation;
}

.path-subselection-bounding-box {
  fill: none;
  stroke: #6b7280;
  stroke-width: 1.2px;
  stroke-dasharray: 6 4;
  pointer-events: all;
  touch-action: none;
  animation: 1.6s linear infinite dash-line-animation;
}

.group-bounding-box-debug {
  fill: none;
  stroke: #f0f;
  stroke-width: 1.5px;
  stroke-dasharray: 6 4;
  pointer-events: none;
}

.shape-tooltip {
  z-index: 999;
  background-color: #f9f9f9c9;
  border-radius: 5px;
  flex-direction: column;
  padding: 8px;
  transition: all .2s;
  display: none;
  position: absolute;
  bottom: 75%;
  box-shadow: 0 4px 8px #0000001a;
}

.shape-tooltip-content {
  flex-direction: column;
  display: flex;
}

.shape-search-row {
  margin-bottom: 8px;
}

.shape-search-input {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  outline: none;
  width: 160px;
  padding: 6px 8px;
  font-size: .85rem;
  transition: border-color .2s;
}

.shape-search-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 2px #3498db33;
}

.shape-icons-container {
  flex-wrap: wrap;
  gap: 6px;
  max-width: 220px;
  max-height: 200px;
  padding-right: 4px;
  display: flex;
  overflow-y: auto;
}

.shape-icons-container::-webkit-scrollbar {
  width: 6px;
}

.shape-icons-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.shape-icons-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.shape-icons-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

.shape-icon-option {
  cursor: pointer;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  transition: all .2s;
  display: flex;
}

.shape-icon-option:hover {
  background: #e8f4fc;
  border-color: #3498db;
}

.shape-icon-option.active {
  background-color: #00428c57;
  border: 1.5px solid #3498db;
}

.shape-icon-option i {
  -webkit-text-fill-color: transparent;
  color: #444;
  background: linear-gradient(135deg, #444 30%, #555 70%) text;
}

@supports not (background-clip: text) {
  .shape-icon-option i {
    color: #444;
  }
}

.fa-icon-svg {
  font-size: inherit;
  vertical-align: -.125em;
  width: 1em;
  height: 1em;
  -webkit-mask: content;
  mask: content;
  background: linear-gradient(135deg, #444 30%, #555 70%);
  display: inline-block;
}

.fa-icon-svg path {
  fill: currentColor;
}

.shape-icon-option i, .shape-icon-option .fa-icon-svg {
  -webkit-text-fill-color: transparent;
  color: #444;
  background: linear-gradient(135deg, #444 30%, #555 70%) text;
}

.shape-icon-option {
  justify-content: center;
  align-items: center;
  display: flex;
}

.shape-load-more-button {
  cursor: pointer;
  background-color: #f1f1f1;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  align-self: flex-end;
  margin-top: 8px;
  padding: 4px 8px;
  font-size: .8rem;
  transition: all .2s;
}

.shape-load-more-button:hover {
  background-color: #e8f4fc;
  border-color: #3498db;
}

.icon-style-flat-blue {
  fill: #3498db;
  stroke: #2980b9;
  filter: drop-shadow(1px 2px 2px #00000026);
}

.icon-style-flat-green {
  fill: #2ecc71;
  stroke: #27ae60;
  filter: drop-shadow(1px 2px 2px #00000026);
}

.icon-style-flat-purple {
  fill: #9b59b6;
  stroke: #8e44ad;
  filter: drop-shadow(1px 2px 2px #00000026);
}

.icon-style-flat-orange {
  fill: #e67e22;
  stroke: #d35400;
  filter: drop-shadow(1px 2px 2px #00000026);
}

.icon-style-outlined {
  fill: none;
  stroke: #333;
  stroke-width: 2px;
}

.shape-style-section {
  border-top: 1px solid #e0e0e0;
  margin-top: 10px;
  padding-top: 8px;
}

.style-option-title {
  color: #555;
  margin-bottom: 5px;
  font-size: .9rem;
}

.style-options {
  gap: 6px;
  display: flex;
}

.style-option {
  cursor: pointer;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  transition: transform .2s;
  box-shadow: 0 1px 3px #0000001f;
}

.style-option:hover {
  transform: scale(1.15);
}

.style-option.active {
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #3498db;
}

.drawing-path.connection-point {
  cursor: move;
}

.drawing-path.connection-point:hover {
  opacity: .8 !important;
}

.drawing-path {
  touch-action: none;
}

svg {
  touch-action: manipulation;
}

.pen-style-toggle {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px 8px 0 0;
  gap: 0;
  padding: 6px 8px;
  display: flex;
}

.pen-style-btn {
  color: #374151;
  box-shadow: none;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  flex: 1;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-size: .78rem;
  font-weight: 600;
  transition: background .15s;
  display: inline-flex;
}

.pen-style-btn + .pen-style-btn {
  border-left: 1px solid #eceff3;
}

.pen-style-btn i {
  color: #3a7afe;
  font-size: .95rem;
}

.pen-style-btn:hover {
  background: #f6f9ff;
}

.pen-style-btn.active {
  background: #eef6ff;
}

#graph-container.cursor-drawing .sem-fg-ok, #graph-container.cursor-drawing .sem-fg-ok *, #graph-container.cursor-drawing .sem-fg-skip, #graph-container.cursor-drawing .sem-fg-skip * {
  cursor: pointer !important;
}

#graph-container #sem-force-guess .sem-fg-mic-wrap {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

#graph-container #sem-force-guess .sem-fg-mic-overlay {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

#graph-container #sem-force-guess .sem-fg-mic-wave, #graph-container #sem-force-guess .sem-fg-mic-bars {
  pointer-events: none;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  inset: 0;
}

#graph-container #sem-force-guess .sem-fg-mic-wave.active, #graph-container #sem-force-guess .sem-fg-mic-bars.active {
  display: block;
}

#graph-container #sem-force-guess .sem-fg-mic-transcribing {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.highlight-processing {
  filter: drop-shadow(0 0 10px #3498dbcc);
  opacity: .85;
  animation: 2s ease-in-out infinite highlight-pulse;
}

@keyframes highlight-pulse {
  0% {
    filter: drop-shadow(0 0 10px #3498db99) drop-shadow(0 0 20px #3498db66);
    opacity: .85;
  }

  50% {
    filter: drop-shadow(0 0 20px #3498dbe6) drop-shadow(0 0 40px #3498db99) drop-shadow(0 0 60px #3498db4d);
    opacity: .95;
  }

  100% {
    filter: drop-shadow(0 0 10px #3498db99) drop-shadow(0 0 20px #3498db66);
    opacity: .85;
  }
}

.highlight-processing:after {
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, #0000 0%, #fff6 50%, #0000 100%);
  width: 100%;
  height: 100%;
  animation: 2s ease-in-out infinite highlight-shimmer;
  position: absolute;
  top: 0;
  left: -100%;
}

@keyframes highlight-shimmer {
  0% {
    left: -100%;
  }

  100% {
    left: 200%;
  }
}

.highlight-success {
  animation: .6s ease-out highlight-success-flash;
}

@keyframes highlight-success-flash {
  0% {
    filter: drop-shadow(0 0 20px #2ecc71cc);
    opacity: 1;
  }

  100% {
    filter: drop-shadow(0 0 5px #2ecc7166);
    opacity: .95;
  }
}

.highlight-failure {
  animation: .5s ease-out highlight-failure-shake;
}

@keyframes highlight-failure-shake {
  0%, 100% {
    filter: drop-shadow(0 0 10px #e74c3ccc);
    transform: translateX(0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translateX(-5px);
  }

  20%, 40%, 60%, 80% {
    transform: translateX(5px);
  }
}

.highlight-fade-out {
  animation: .6s ease-out forwards highlight-fade-out;
}

@keyframes highlight-fade-out {
  0% {
    opacity: .95;
    filter: drop-shadow(0 0 10px #e74c3ccc);
  }

  100% {
    opacity: 0;
    filter: drop-shadow(0 0 #e74c3c00);
  }
}

.screen-share-prompt {
  color: #fff;
  z-index: 10000;
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  border-radius: 12px;
  max-width: 320px;
  padding: 16px 24px;
  animation: .4s ease-out slide-in-right;
  position: fixed;
  bottom: 20px;
  right: 20px;
  box-shadow: 0 4px 20px #0003;
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100%);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.screen-share-prompt h4 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
}

.screen-share-prompt p {
  opacity: .95;
  margin: 0 0 12px;
  font-size: 14px;
}

.screen-share-prompt-buttons {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.screen-share-prompt button {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  flex: 1;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: all .2s;
}

.screen-share-prompt .btn-primary {
  color: #3498db;
  background: #fff;
}

.screen-share-prompt .btn-primary:hover {
  background: #f8f9fa;
  transform: translateY(-1px);
}

.screen-share-prompt .btn-secondary {
  color: #fff;
  background: #fff3;
}

.screen-share-prompt .btn-secondary:hover {
  background: #ffffff4d;
}

#theme-buttons {
  justify-content: center;
  gap: 15px;
  margin-top: 20px;
  display: flex;
}

.theme-button {
  cursor: pointer;
  background-color: #fff;
  border: none;
  border-radius: 8px;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  transition: all .3s;
  display: flex;
  box-shadow: 0 2px 5px #0000001a;
}

.theme-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px #00000026;
}

.theme-preview {
  gap: 5px;
  margin-bottom: 5px;
  display: flex;
}

.color-dot {
  border-radius: 50%;
  width: 15px;
  height: 15px;
}

.theme-name {
  color: #333;
  font-size: 14px;
  font-weight: 500;
}

.theme-button[data-theme="default"] {
  border: 2px solid #66cdaa;
}

.theme-button[data-theme="futuristic"] {
  border: 2px solid #5b9bd5;
}

.url-node-input-container {
  background-color: #fff;
  border: 1px solid #0000000d;
  width: 375px;
  height: 375px;
  padding: 25px;
  animation: .3s ease-out url-node-fade-in;
  position: absolute;
  box-shadow: 0 10px 30px #00000014;
}

.url-node-input-container--youtube {
  background: linear-gradient(#fff, #fafafa);
  flex-direction: column;
  align-items: center;
  display: flex;
}

.url-node-section-title {
  color: #1a1a1a;
  letter-spacing: -.5px;
  text-align: center;
  margin: 0 0 25px;
  padding: 0 0 15px;
  font-size: 1.8em;
  font-weight: 700;
  position: relative;
}

.url-node-section-title--youtube {
  color: #282828;
  font-family: YouTube Sans, Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
}

.url-node-title-underline {
  background: linear-gradient(90deg, #3498db, #2ecc71);
  border-radius: 2px;
  width: 40px;
  height: 4px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.url-node-title-underline--youtube {
  background: linear-gradient(90deg, red, #cc181e);
}

.url-node-main-container {
  background-color: #f8f9fd;
  border-radius: 12px;
  padding: 20px;
  transition: all .3s;
}

.url-node-main-container--focused {
  background-color: #f0f4ff;
}

.url-node-main-container--youtube {
  background-color: #fff;
  border: 1px solid #0000001a;
  box-shadow: 0 2px 12px #0000000d;
}

.url-node-main-container--youtube.url-node-main-container--focused {
  border-color: red;
  box-shadow: 0 0 0 4px #ff00001a;
}

.url-node-input {
  background-color: #fff;
  border: 2px solid #e1e5ee;
  border-radius: 10px;
  outline: none;
  width: 100%;
  margin-bottom: 20px;
  padding: 14px 12px;
  font-size: 15px;
  transition: all .3s;
  box-shadow: 0 2px 6px #00000005;
}

.url-node-input:focus {
  border-color: #3498db;
  box-shadow: 0 0 0 4px #3498db1a;
}

.url-node-input--youtube {
  border-color: #e5e5e5;
}

.url-node-input--youtube:focus {
  border-color: red;
  box-shadow: 0 0 0 4px #ff00001a;
}

.url-node-input--error {
  border-color: #ff6b6b;
  animation: .5s ease-in-out url-node-shake;
}

.url-node-checkbox-container {
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  padding: 8px 0;
  display: flex;
}

.url-node-checkbox-wrapper {
  cursor: pointer;
  align-items: center;
  display: flex;
  position: relative;
}

.url-node-checkbox {
  cursor: pointer;
  accent-color: #3498db;
  width: 18px;
  height: 18px;
  margin: 0;
}

.url-node-checkbox-label {
  color: #4a5568;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 500;
}

.url-node-load-button {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #3498db, #2980b9);
  border: none;
  border-radius: 10px;
  width: 100%;
  padding: 16px;
  font-size: 15px;
  font-weight: 600;
  transition: all .3s;
  box-shadow: 0 4px 12px #3498db26;
}

.url-node-load-button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 15px #3498db40;
}

.url-node-load-button:disabled {
  cursor: not-allowed;
  box-shadow: none;
  background: #e1e5ee;
  transform: scale(.98);
}

.url-node-load-button--youtube {
  text-transform: uppercase;
  letter-spacing: .5px;
  background: red;
  font-family: YouTube Sans, Roboto, sans-serif;
  font-size: 14px;
  box-shadow: 0 4px 12px #ff000026;
}

.url-node-load-button--youtube:hover:not(:disabled) {
  background: #cc181e;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px #ff000040;
}

.url-node-load-button--success {
  background: #2ecc71;
}

.youtube-brand-icon {
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
  display: flex;
}

.youtube-brand-icon svg {
  fill: red;
  width: 40px;
  height: 40px;
  transition: transform .3s;
}

.youtube-brand-icon svg:hover {
  transform: scale(1.1);
}

.youtube-node-caption {
  text-align: center;
  color: #1f2933;
  word-break: break-word;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
}

.youtube-node-caption a {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}

.youtube-node-caption a:hover {
  text-decoration: underline;
}

.url-node-loading-spinner {
  border: 3px solid #fff;
  border-top-color: #0000;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  animation: 1s linear infinite url-node-spin;
  display: inline-block;
}

@keyframes url-node-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes url-node-fade-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }

  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes url-node-shake {
  0%, 100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-10px);
  }

  75% {
    transform: translateX(10px);
  }
}

@keyframes url-node-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (width <= 480px) {
  .url-node-input-container, .url-node-input-container--youtube {
    width: 90%;
    padding: 20px;
  }

  .url-node-section-title, .url-node-section-title--youtube {
    font-size: 1.6em;
  }

  .url-node-input, .url-node-load-button {
    padding: 12px;
  }
}

.node-text.timeline {
  white-space: normal;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.timeline-node {
  box-sizing: border-box;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 10px 12px 12px;
  display: flex;
}

.timeline-toolbar {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.timeline-title {
  color: #2f2f2f;
  letter-spacing: .2px;
  font-size: 14px;
  font-weight: 600;
}

.timeline-inputs {
  align-items: center;
  gap: 6px;
  display: flex;
}

.timeline-input {
  color: #2f2f2f;
  background: #ffffffd9;
  border: 1px solid #00000026;
  border-radius: 6px;
  outline: none;
  min-width: 90px;
  height: 26px;
  padding: 4px 8px;
  font-size: 12px;
}

.timeline-duration-input {
  text-align: center;
  width: 60px;
  min-width: 60px;
}

.timeline-add-btn {
  color: #fff;
  cursor: pointer;
  background: #2f7df6;
  border: none;
  border-radius: 6px;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 600;
}

.timeline-add-btn:hover {
  background: #2466cc;
}

.timeline-ruler {
  color: #8b8b8b;
  letter-spacing: .2px;
  height: 16px;
  font-size: 11px;
  position: relative;
}

.timeline-hour-label {
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}

.timeline-grid {
  background: #ffffffb3;
  border-radius: 10px;
  flex: 1;
  min-height: 120px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #0000000f;
}

.timeline-grid:before {
  content: "";
  background-image: linear-gradient(to right, #00000014 1px, #0000 1px);
  background-size: var(--tick-width) 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.timeline-grid:after {
  content: "";
  background-image: linear-gradient(to right, #0000002e 1px, #0000 1px);
  background-size: var(--hour-width) 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.timeline-work-band {
  pointer-events: none;
  background: #aae3ae59;
  border-left: 1px solid #46966459;
  border-right: 1px solid #46966459;
  position: absolute;
  top: 0;
  bottom: 0;
}

.timeline-sleep-band {
  pointer-events: none;
  background: #a0b4d740;
  border-left: 1px solid #5a6ea040;
  border-right: 1px solid #5a6ea040;
  position: absolute;
  top: 0;
  bottom: 0;
}

.timeline-blocks {
  position: absolute;
  inset: 0;
}

.timeline-block {
  box-sizing: border-box;
  color: #1e1e1e;
  cursor: grab;
  user-select: none;
  border-radius: 8px;
  height: 46px;
  padding: 6px 10px;
  font-size: 12px;
  position: absolute;
  top: 20px;
  box-shadow: 0 4px 10px #0000001f;
}

.timeline-block.is-dragging {
  cursor: grabbing;
  box-shadow: 0 6px 12px #0003;
}

.timeline-block-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  outline: none;
  font-weight: 600;
  overflow: hidden;
}

.timeline-block-duration {
  opacity: .7;
  margin-top: 2px;
  font-size: 11px;
}

.timeline-block-resize {
  cursor: ew-resize;
  background: #0003;
  border-radius: 4px;
  width: 6px;
  position: absolute;
  top: 6px;
  bottom: 6px;
  right: 4px;
}

body.timeline-drag-active {
  cursor: grabbing;
}

.node-text.app {
  white-space: normal;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.node-app-shell {
  box-sizing: border-box;
  background: linear-gradient(#ffffff57, #ffffff1a), radial-gradient(circle at 0 0, #ffffff94, #0000 46%);
  border-radius: 16px;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
}

.node-app-shell .iframe-toolbar {
  width: 100%;
  margin: 0;
}

.node-app-shell .iframe-toolbar__button:disabled, .node-app-shell .iframe-toolbar__button[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

.node-app-header {
  letter-spacing: -.01em;
  color: #17304c;
  text-shadow: 0 1px #ffffff8c;
  padding: 0 2px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
}

.node-app-host {
  background: linear-gradient(#ffffffd1, #f7fbffb8), #ffffffbd;
  border-radius: 14px;
  flex: 1;
  min-height: 120px;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffffb8, inset 0 0 0 1px #18315314;
}

.node-app-status {
  color: #17304cad;
  min-height: 14px;
  padding: 0 2px;
  font-size: 11px;
}

body.dark-mode .node-app-shell {
  background: linear-gradient(#ffffff0f, #ffffff05), radial-gradient(circle at 0 0, #94a3b824, #0000 52%);
}

body.dark-mode .node-app-header {
  color: #ecf4ff;
  text-shadow: none;
}

body.dark-mode .node-app-host {
  background: linear-gradient(#0e1a28e0, #0a141fd1), #0a141fd1;
  box-shadow: inset 0 1px #ffffff0d, inset 0 0 0 1px #94a3b81f;
}

body.dark-mode .node-app-status {
  color: #d6e4f7c2;
}

.logo-text {
  color: #73b9ff;
  text-shadow: 2px 2px 4px #000;
  font-style: italic;
  font-weight: bold;
}

.ai-text {
  color: #4a97ee;
  font-size: 1.1em;
  font-weight: 600;
}

.landing-info {
  text-align: center;
  max-width: 800px;
  margin: auto;
  font-family: Arial, sans-serif;
}

.section-title {
  color: #2c3e50;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 28px;
  font-weight: bold;
}

.section-title-2 {
  color: #2c3e50;
  text-shadow: 2px 2px 4px #00000001;
  letter-spacing: 1px;
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 36px;
  font-weight: bold;
}

.section-text {
  color: #34495e;
  margin-top: 5px;
  font-size: 18px;
  line-height: 1.6;
}

.decorative-line {
  text-align: center;
  margin: -111px 0;
}

.decorative-line:before, .decorative-line:after {
  content: "";
  vertical-align: middle;
  background: #decc8fb1;
  width: 40%;
  height: 1px;
  margin: 0;
  display: inline-block;
}

.decorative-line i {
  color: #beb69c;
  background: #fff0;
  padding: 0 5px;
  font-size: .5em;
  display: inline-block;
}

.tutorial-prompt-container {
  flex-direction: column;
  align-items: center;
  margin-left: 15px;
  display: flex;
  position: relative;
}

.tutorial-indicators-container {
  justify-content: space-between;
  width: 50%;
  display: flex;
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
}

.tutorial-prompt {
  opacity: 0;
  pointer-events: auto;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 20px;
  font-size: 18px;
  transition: opacity .5s;
}

.tutorial-indicator {
  pointer-events: auto;
  cursor: pointer;
  font-size: 24px;
  transition: color .3s, transform .3s, box-shadow .3s;
  position: absolute;
}

.tutorial-indicator-left {
  bottom: -20px;
  left: 0;
}

.tutorial-indicator-right {
  bottom: -20px;
  right: 0;
}

.tutorial-indicator:hover {
  color: #3498db;
  transform: scale(1.1);
  box-shadow: 0 0 10px #0003;
}

.tutorial-indicator-left:hover:after, .tutorial-indicator-right:hover:after {
  content: attr(data-tooltip);
  color: #fff;
  white-space: nowrap;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  opacity: 1;
  visibility: visible;
  background-color: #333;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 14px;
  transition: opacity .3s, visibility .3s;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

@keyframes pulsate-border {
  0% {
    box-shadow: 0 0 #ff5252b3;
  }

  70% {
    box-shadow: 0 0 0 10px #ff525200;
  }

  100% {
    box-shadow: 0 0 #ff525200;
  }
}

.pulsating-border {
  border: 2px solid #ff9752c1;
  border-radius: 4px;
  animation: 2s infinite pulsate-border !important;
}

.pulsating-overlay {
  z-index: 10;
  pointer-events: none;
  background-color: #0000;
  position: absolute;
}

.tutorial-close-button {
  cursor: pointer;
  color: #fff;
  background-color: #00000080;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 24px;
  font-weight: bold;
  display: flex;
}

.tutorial-close-button:hover {
  background-color: #000000b3;
}

.tutorial-close-button:active {
  background-color: #000000e6;
}

.info-container {
  cursor: pointer;
  margin-top: 10px;
}

.info-icon {
  font-size: 14px;
}

.info-label {
  color: #007bff;
  margin-left: 5px;
  font-size: 14px;
  text-decoration: underline;
}

.info-text {
  color: #666;
  margin-left: 5px;
  font-size: 14px;
}

.bullseye circle {
  animation: 2s ease-in-out infinite bullseyePulse;
}

@keyframes bullseyePulse {
  0% {
    stroke-width: 10px;
    stroke-opacity: .8;
    transform: scale(1);
  }

  50% {
    stroke-width: 5px;
    stroke-opacity: .4;
    transform: scale(1.2);
  }

  100% {
    stroke-width: 10px;
    stroke-opacity: .8;
    transform: scale(1);
  }
}

@keyframes onboardingListItemPulse {
  0% {
    opacity: 1;
    color: inherit;
    transform: scale(1);
  }

  50% {
    opacity: .7;
    color: #3a7afe;
    transform: scale(1.05);
  }

  100% {
    opacity: 1;
    color: inherit;
    transform: scale(1);
  }
}

.onboarding-list-item-pulse {
  animation: .5s ease-in-out infinite onboardingListItemPulse;
}

.pulsating-button {
  animation: 1s infinite button-pulse;
}

@keyframes button-pulse {
  0% {
    opacity: 1;
    background-color: #3a7afe;
    transform: scale(1);
  }

  50% {
    opacity: .7;
    background-color: #7ca4fe;
    transform: scale(1.25);
  }

  100% {
    opacity: 1;
    background-color: #3a7afe;
    transform: scale(1);
  }
}

.graph-diff-node-removed {
  opacity: .5;
  fill: #f003;
  stroke: red;
  stroke-width: 2px;
  pointer-events: none;
}

.graph-diff-node-removed-text {
  fill: red;
  pointer-events: none;
  opacity: .8;
  font-size: 12px;
}

.graph-diff-label-changed {
  color: #fff;
  text-transform: uppercase;
  text-shadow: 2px 2px 4px #00000080;
  letter-spacing: 2px;
  font-size: 24px;
  font-weight: bold;
}

.graph-diff-coordinates-changed {
  animation: 1s infinite change-pulse;
}

.graph-diff-node-added {
  border: 5px solid #52eeffc1;
  border-radius: 4px;
  animation: 2s infinite pulsate-border-graph-diff !important;
}

@keyframes change-pulse {
  0% {
    background-color: initial;
  }

  50% {
    background-color: #ff0;
  }

  100% {
    background-color: initial;
  }
}

@keyframes pulsate-border-graph-diff {
  0% {
    box-shadow: 0 0 #52eeffc1;
  }

  70% {
    box-shadow: 0 0 0 20px #ff525200;
  }

  100% {
    box-shadow: 0 0 #ff525200;
  }
}

@keyframes pulsate-text-shadow {
  0% {
    text-shadow: 0 0 #ff5252b3;
  }

  70% {
    text-shadow: 0 0 10px #ff525200;
  }

  100% {
    text-shadow: 0 0 #ff525200;
  }
}

#screen-analysis-ui {
  z-index: 1000;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  width: 280px;
  font-family: Arial, sans-serif;
  position: fixed;
  top: 20px;
  right: 20px;
  box-shadow: 0 2px 10px #0000001a;
}

.screen-analysis-header {
  cursor: move;
  background-color: #f8f8f8;
  border-bottom: 1px solid #e0e0e0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  display: flex;
}

.screen-analysis-header span {
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

.screen-analysis-content {
  padding: 15px;
}

.continuous-listening {
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

#status-indicator {
  background-color: #ccc;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  transition: background-color .3s;
}

#status-indicator.active {
  background-color: #4caf50;
}

.setting-label {
  color: #333;
  font-size: 14px;
}

.screen-analysis-button {
  color: #333;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 14px;
  transition: background-color .3s;
  display: block;
}

.screen-analysis-button:hover {
  background-color: #e0e0e0;
}

.screen-analysis-close-button {
  cursor: pointer;
  color: #666;
  background: none;
  border: none;
  font-size: 20px;
}

.screen-analysis-close-button:hover {
  color: #333;
}

#advanced-options {
  border-top: 1px solid #e0e0e0;
  margin-top: 15px;
  padding-top: 15px;
}

.setting-group input[type="number"] {
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  width: 100%;
  padding: 8px;
  font-size: 14px;
}

#image-count-info {
  color: #666;
  margin-top: 5px;
  font-size: 12px;
}

.dashboard-table-container {
  padding: 0 16px;
}

.dashboard-table {
  border-collapse: collapse;
  border-radius: 10px;
  width: 100%;
  font-family: Arial, sans-serif;
  overflow: hidden;
  box-shadow: 0 0 20px #00000026;
}

.dashboard-table th, .dashboard-table td {
  text-align: left;
  padding: 12px 15px;
}

.dashboard-table th {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  background-color: #4caf50;
}

.dashboard-table tr:nth-child(2n) {
  background-color: #f8f8f8;
}

.dashboard-table tr:hover {
  background-color: #e0f3e0;
}

.dashboard-table td:first-child {
  color: #333;
  font-weight: bold;
  transition: color .3s;
}

.dashboard-table td:first-child:hover {
  color: #4caf50;
  cursor: pointer;
  text-decoration: underline;
}

.dashboard-tooltip {
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.dashboard-tooltip .dashboard-tooltiptext {
  visibility: hidden;
  color: #fff;
  text-align: center;
  z-index: 1;
  opacity: 0;
  background-color: #4caf50;
  border-radius: 6px;
  width: 120px;
  margin-left: -60px;
  padding: 5px;
  transition: opacity .3s .5s;
  position: absolute;
  bottom: 125%;
  left: 50%;
}

.dashboard-tooltip .dashboard-tooltiptext:after {
  content: "";
  border: 5px solid #0000;
  border-top-color: #4caf50;
  margin-left: -5px;
  position: absolute;
  top: 100%;
  left: 50%;
}

.dashboard-tooltip:hover .dashboard-tooltiptext {
  visibility: visible;
  opacity: 1;
  transition-delay: .5s;
}

.dynamic-home-node {
  color: #1a202c;
  background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
  min-height: 600px;
  padding: 32px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
  position: relative;
  overflow: hidden;
}

.dynamic-home-node:before {
  content: "";
  pointer-events: none;
  background: radial-gradient(circle, #6366f10d 0%, #0000 70%);
  width: 200%;
  height: 200%;
  animation: 30s linear infinite subtle-rotate;
  position: absolute;
  top: -50%;
  right: -50%;
}

@keyframes subtle-rotate {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(360deg);
  }
}

.onboarding-completion-node {
  background: linear-gradient(135deg, #fff 0%, #f9fafb 100%);
  border: 1px solid #e2e8f080;
  border-radius: 20px;
  margin-bottom: 32px;
  padding: 32px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
}

.onboarding-completion-node:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
}

.onboarding-completion-node:after {
  content: "";
  background: linear-gradient(135deg, #6366f11a 0%, #0000 50%);
  border-radius: 0 0 0 100%;
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  right: 0;
}

.onboarding-completion-node h2 {
  -webkit-text-fill-color: transparent;
  text-align: center;
  letter-spacing: -.5px;
  background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) text;
  margin-bottom: 28px;
  font-size: 28px;
  font-weight: 700;
}

.onboarding-steps {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.onboarding-step {
  cursor: pointer;
  background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
  border: 1px solid #e2e8f0cc;
  border-radius: 16px;
  align-items: center;
  padding: 20px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.onboarding-step:before {
  content: "";
  opacity: 0;
  background: linear-gradient(135deg, #6366f100 0%, #6366f10d 100%);
  width: 100%;
  height: 100%;
  transition: opacity .3s;
  position: absolute;
  top: 0;
  left: 0;
}

.onboarding-step:hover {
  border-color: #6366f14d;
  transform: translateY(-3px)scale(1.02);
  box-shadow: 0 8px 20px #6366f126;
}

.onboarding-step:hover:before {
  opacity: 1;
}

.step-icon {
  margin-right: 20px;
  font-size: 24px;
  animation: 2s ease-in-out infinite bounce-subtle;
}

@keyframes bounce-subtle {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

.step-text {
  color: #2d3748;
  letter-spacing: -.2px;
  flex: 1;
  font-size: 18px;
  font-weight: 600;
}

.step-text.grayed-out {
  color: #6c757d;
  text-decoration: line-through;
}

.step-status {
  font-size: 22px;
  transition: all .3s;
}

.step-status.completed {
  color: #28a745;
}

.step-status.partial {
  color: #ffc107;
}

.step-status.not-started {
  color: #6c757d;
}

.dashboard-section {
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
  border: 1px solid #e2e8f080;
  border-radius: 20px;
  margin-bottom: 32px;
  padding: 32px;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
}

.dashboard-section:before {
  content: "";
  opacity: 0;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  width: 100%;
  height: 3px;
  transition: opacity .3s;
  position: absolute;
  top: 0;
  left: 0;
}

.dashboard-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px #0000001a, 0 10px 10px -5px #0000000a;
}

.dashboard-section:hover:before {
  opacity: 1;
}

.dashboard-section h3 {
  color: #1a202c;
  letter-spacing: -.5px;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 700;
  display: flex;
}

.dashboard-section h3:after {
  content: "";
  background: linear-gradient(90deg, #e2e8f0cc 0%, #0000 100%);
  flex: 1;
  height: 1px;
  margin-left: 8px;
}

.shortcut-list {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin: 0;
  padding-left: 0;
  list-style: none;
  display: grid;
}

.shortcut-item {
  cursor: pointer;
  box-sizing: border-box;
  background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
  border: 1px solid #e2e8f080;
  border-radius: 12px;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  list-style: none;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  overflow: hidden;
}

.shortcut-item kbd {
  color: #fff;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 6px;
  margin-right: 12px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 4px #6366f133;
}

.shortcut-item:hover {
  background: linear-gradient(135deg, #fff 0%, #f0f1ff 100%);
  border-color: #6366f14d;
  transform: translateY(-2px)scale(1.02);
  box-shadow: 0 6px 16px #6366f126;
}

.model-list {
  scroll-behavior: smooth;
  flex-direction: column;
  gap: 16px;
  max-height: 300px;
  margin: 0;
  padding-left: 0;
  padding-right: 8px;
  list-style: none;
  display: flex;
  position: relative;
  overflow-y: auto;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

.model-item {
  cursor: pointer;
  box-sizing: border-box;
  background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
  border: 1px solid #e2e8f0cc;
  border-radius: 16px;
  width: 100%;
  padding: 20px;
  list-style: none;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
}

.model-item strong {
  color: #1a202c;
  margin-bottom: 8px;
  font-size: 18px;
  display: block;
}

.model-item:after {
  content: "→";
  opacity: 0;
  color: #6366f1;
  font-size: 20px;
  transition: all .3s;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%)translateX(0);
}

.model-item:hover {
  background: linear-gradient(135deg, #fff 0%, #f0f1ff 100%);
  border-color: #6366f14d;
  transform: translateY(-3px);
  box-shadow: 0 8px 20px #6366f126;
}

.model-item:hover:after {
  opacity: 1;
  transform: translateY(-50%)translateX(5px);
}

.model-date {
  color: #718096;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 500;
}

.change-list {
  scroll-behavior: smooth;
  flex-direction: column;
  gap: 16px;
  max-height: 400px;
  margin: 0;
  padding-left: 0;
  padding-right: 12px;
  list-style: none;
  display: flex;
  position: relative;
  overflow-y: auto;
}

.change-list::-webkit-scrollbar {
  width: 8px;
}

.change-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.change-list::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

.change-list::-webkit-scrollbar-thumb:hover {
  background: #a0aec0;
}

.change-item {
  box-sizing: border-box;
  background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
  border: 1px solid #e2e8f0cc;
  border-radius: 16px;
  width: 100%;
  padding: 20px 24px;
  list-style: none;
  transition: all .3s;
  position: relative;
}

.change-item:hover {
  border-color: #e2e8f0;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #00000014;
}

.change-item:before {
  content: "";
  opacity: 0;
  background: linear-gradient(#6366f1 0%, #8b5cf6 100%);
  width: 4px;
  transition: opacity .3s;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.change-item:hover:before {
  opacity: 1;
}

.change-header {
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
  display: flex;
}

.change-header strong {
  color: #1a202c;
  word-break: break-word;
  overflow-wrap: break-word;
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.change-type {
  text-transform: uppercase;
  letter-spacing: .5px;
  white-space: nowrap;
  border-radius: 20px;
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
}

.change-type.feature {
  color: #14532d;
  background: linear-gradient(135deg, #86efac 0%, #4ade80 100%);
  box-shadow: 0 2px 4px #4ade8033;
}

.change-type.improvement {
  color: #1e3a8a;
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
  box-shadow: 0 2px 4px #60a5fa33;
}

.change-type.bugfix {
  color: #7f1d1d;
  background: linear-gradient(135deg, #fda4af 0%, #f87171 100%);
  box-shadow: 0 2px 4px #f8717133;
}

.change-description {
  color: #4a5568;
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  width: 100%;
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 1.6;
  display: block;
}

.change-date {
  color: #718096;
  font-size: 14px;
  font-weight: 500;
}

.model-list:after, .change-list:after {
  content: "";
  pointer-events: none;
  opacity: 1;
  background: linear-gradient(#0000 0%, #ffffffe6 70%, #fff 100%);
  height: 60px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 8px;
}

.model-list, .change-list {
  scrollbar-width: thin;
  scrollbar-color: #cbd5e0 #f1f1f1;
}

.model-list li, .change-list li, .shortcut-list li {
  list-style: none;
}

.model-list li:before, .change-list li:before, .shortcut-list li:before {
  display: none;
}

.discord-icon {
  color: #5865f2;
  font-size: 28px;
  animation: 2s ease-in-out infinite pulse-discord;
}

@keyframes pulse-discord {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

.discord-container {
  background: linear-gradient(135deg, #f8f9ff 0%, #e8ebff 100%);
  border: 1px solid #5865f233;
  border-radius: 16px;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  padding: 20px;
  display: flex;
}

.discord-description {
  color: #2d3748;
  flex: 1;
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.discord-container .custom-button {
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: linear-gradient(135deg, #5865f2 0%, #4752c4 100%);
  border: none;
  border-radius: 12px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  transition: all .3s;
  box-shadow: 0 4px 12px #5865f24d;
}

.discord-container .custom-button:hover {
  background: linear-gradient(135deg, #4752c4 0%, #3c42a5 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px #5865f266;
}

.dynamic-home-node > * {
  opacity: 0;
  animation: .6s ease-out forwards fade-in-up;
}

.dynamic-home-node > :first-child {
  animation-delay: .1s;
}

.dynamic-home-node > :nth-child(2) {
  animation-delay: .2s;
}

.dynamic-home-node > :nth-child(3) {
  animation-delay: .3s;
}

.dynamic-home-node > :nth-child(4) {
  animation-delay: .4s;
}

.dynamic-home-node > :nth-child(5) {
  animation-delay: .5s;
}

@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (width <= 768px) {
  .dynamic-home-node, .dashboard-section {
    padding: 20px;
  }

  .shortcut-list {
    grid-template-columns: 1fr;
  }

  .model-list, .change-list {
    max-height: 400px;
  }

  .discord-container {
    text-align: center;
    flex-direction: column;
  }
}

.dynamic-home-node.loading:after {
  content: "";
  background: linear-gradient(90deg, #0000 0%, #ffffff80 50%, #0000 100%);
  animation: 2s infinite shimmer;
  position: absolute;
  inset: 0;
}

.star {
  fill: #fff;
  opacity: .7;
}

#star-svg {
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
}

.auth-text-group {
  opacity: 0;
}

.auth-text {
  fill: #ffffffb3;
  letter-spacing: 1.5px;
  text-transform: none;
  opacity: .8;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  transition: fill .3s, text-shadow .3s;
}

.auth-text.auth-success {
  fill: #4ade80e6;
  text-shadow: 0 0 10px #4ade804d, 0 0 20px #4ade8033;
}

.auth-dots {
  fill: #ffffffb3;
  letter-spacing: 1.5px;
  opacity: .8;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.loading-text-group {
  opacity: 0;
}

.loading-text {
  fill: #fff9;
  letter-spacing: 1.5px;
  text-transform: none;
  opacity: .8;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.loading-dots {
  fill: #fff9;
  letter-spacing: 1.5px;
  opacity: .8;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
}

.slow-internet-text {
  fill: #fff6;
  letter-spacing: .5px;
  text-transform: none;
  opacity: .8;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
}

@keyframes subtleBreath {
  0%, 100% {
    opacity: .8;
  }

  50% {
    opacity: .9;
  }
}

.auth-text-group, .loading-text-group {
  animation: 4s ease-in-out infinite subtleBreath;
}

.svg-tooltip {
  text-align: center;
  color: #fff;
  opacity: 0;
  visibility: hidden;
  background-color: #363f3dd6;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: calc(100% - 20px);
  height: calc(100% - 30px);
  padding: 10px;
  font-size: 14px;
  transition: opacity .3s, visibility .3s, transform .3s, box-shadow .15s;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(0, 600px)scale(.5);
  box-shadow: 0 2px 10px #0000;
  cursor: default !important;
}

.svg-tooltip.visible {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s, visibility .3s, box-shadow .3s, transform .3s;
  transform: translate(-50%, -50%)scale(1);
  box-shadow: 0 2px 10px #00000080;
}

.svg-tooltip.visible:hover {
  box-shadow: 0 2px 10px #0091ffbd;
}

.custom-tooltip {
  position: relative;
}

.custom-tooltip:after {
  content: attr(data-tooltip);
  color: #fff;
  white-space: nowrap;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  background-color: #333;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 14px;
  transition: opacity .3s, visibility .3s;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.custom-tooltip:hover:after {
  opacity: 1;
  visibility: visible;
  transition-delay: .5s;
}

.chat-window {
  width: var(--window-width, 300px);
  height: var(--window-height, 400px);
  opacity: 0;
  visibility: hidden;
  font-size: calc(12px + (16 - 12) * ((var(--window-width)  - 200px) / (400 - 200)));
  background-color: #ffffffe0;
  border: 1px solid #0000001a;
  border-radius: 5px;
  flex-direction: column;
  transition: none;
  display: flex;
  position: absolute;
  bottom: 20px;
  right: 20px;
  box-shadow: 0 0 10px #0000001a;
}

.chat-window.with-transitions {
  transition: opacity .3s, visibility .3s;
}

.chat-window.with-transitions:not(.resizing):not(.dragging) {
  transition: opacity .3s, visibility .3s, width .3s, height .3s;
}

.chat-window:hover {
  border-color: #0000004d;
}

.chat-window.visible {
  opacity: 1;
  visibility: visible;
}

.chat-header {
  padding: calc(5px + (10 - 5) * ((var(--window-width)  - 200px) / (400 - 200)));
  cursor: move;
  background-color: #f0f0f0;
  border-radius: 5px 5px 0 0;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.chat-header .friend-avatar {
  user-drag: none;
  -webkit-user-drag: none;
  user-select: none;
  border-radius: 50%;
  width: 35px;
  height: 35px;
  margin-right: 10px;
}

.chat-header .friend-status {
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-left: 5px;
  display: inline-block;
}

.chat-header .friend-status.online {
  background-color: #4caf50;
}

.chat-header .friend-status.offline {
  background-color: #ccc;
}

.friend-name-container {
  flex-grow: 1;
  align-items: center;
  margin-right: 10px;
  display: flex;
}

.chat-header .friend-name {
  font-weight: bold;
  font-size: calc(10px + (24 - 16) * ((var(--window-width)  - 200px) / (400 - 200)));
}

.chat-header-buttons {
  align-items: center;
  margin-left: auto;
  display: flex;
}

.chat-header-buttons button {
  cursor: pointer;
  background: #0000000d;
  border: 1px solid #0000001a;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  margin-left: 5px;
  padding: 3px;
  font-size: 16px;
  transition: background-color .2s, color .2s;
  display: flex;
}

.chat-header-buttons button:hover {
  background-color: #0000001a;
}

.minimize-chat-button {
  color: #555;
  font-size: 14px !important;
}

.close-chat-button {
  color: #888;
}

.close-chat-button:hover {
  color: #fff !important;
  background-color: #ff7f7f !important;
}

.message-list {
  padding: calc(5px + (10 - 5) * ((var(--window-width)  - 200px) / (400 - 200)));
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
  margin: 0;
  list-style-type: none;
  display: flex;
  overflow: hidden auto;
}

.message-list::-webkit-scrollbar {
  width: 8px;
}

.message-list::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.message-list::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.message-list::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.message-list {
  scrollbar-width: thin;
  scrollbar-color: #888 #f1f1f1;
}

.message-list li {
  clear: both;
  flex-direction: column;
  align-items: flex-start;
  max-width: 70%;
  margin-bottom: 15px;
  display: flex;
}

.message-list li.sent {
  align-self: flex-end;
  align-items: flex-end;
}

.message-timestamp {
  color: #888;
  margin-bottom: 2px;
  font-size: .7em;
}

.message-bubble {
  padding: calc(3px + (5 - 3) * ((var(--window-width)  - 200px) / (400 - 200))) calc(5px + (10 - 5) * ((var(--window-width)  - 200px) / (400 - 200)));
  font-size: calc(12px + (16 - 12) * ((var(--window-width)  - 200px) / (400 - 200)));
  cursor: pointer;
  border-radius: 10px;
  flex-direction: column;
  gap: 4px;
  transition: box-shadow .2s;
  display: inline-flex;
  position: relative;
  overflow: visible;
}

.message-bubble:hover, .message-bubble.actions-visible {
  box-shadow: 0 4px 14px #0000001f;
}

.message-list li.sent .message-bubble {
  background-color: #dcf8c6;
}

.message-list li.received .message-bubble {
  background-color: #f0f0f0;
}

.message-text {
  white-space: pre-wrap;
  word-wrap: break-word;
}

.message-form {
  padding: calc(5px + (10 - 5) * ((var(--window-width)  - 200px) / (400 - 200)));
  align-items: center;
  display: flex;
}

.message-input-container {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: 0;
}

.message-input {
  width: 100%;
  font-size: calc(12px + (16 - 12) * ((var(--window-width)  - 200px) / (400 - 200)));
  resize: none;
  border: 1px solid #ccc;
  border-radius: 3px;
  min-height: 36px;
  max-height: 160px;
  padding: 5px;
  font-family: inherit;
  line-height: 1.4;
  overflow-y: hidden;
}

.message-input:focus {
  border-color: #4caf50;
  outline: none;
  box-shadow: 0 0 0 2px #4caf5026;
}

.message-actions {
  top: var(--actions-anchor-top, 0px);
  left: var(--actions-anchor-left, 0px);
  color: #fff;
  opacity: 0;
  pointer-events: none;
  transform: translate(calc(-50% + var(--actions-shift, 0px)), calc(-100% - 4px));
  z-index: 20;
  background-color: #1c1c1cf2;
  border: 1px solid #ffffff14;
  border-radius: 10px;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 4px;
  width: max-content;
  padding: 4px 8px;
  transition: opacity .18s, transform .18s, box-shadow .18s;
  display: inline-flex;
  position: absolute;
  box-shadow: 0 6px 18px #0000003d;
}

.message-actions.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(calc(-50% + var(--actions-shift, 0px)), calc(-100% - 10px));
}

.message-actions:after {
  content: "";
  bottom: -6px;
  left: calc(50% - var(--actions-pointer-shift, 0px));
  border: 6px solid #0000;
  border-top-color: #1c1c1cf2;
  border-bottom-width: 0;
  position: absolute;
  transform: translateX(-50%);
}

.message-action-button {
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 6px;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: .7rem;
  font-weight: 500;
  line-height: 1;
  transition: background-color .15s, transform .15s;
  display: inline-flex;
}

.message-action-button:hover, .message-action-button:focus {
  background-color: #ffffff1f;
  outline: none;
}

.message-action-button.copied {
  background-color: #4caf5059;
}

.message-action-button.copy-error {
  background-color: #f4433666;
}

.message-action-button .action-icon {
  font-size: .8rem;
  line-height: 1;
}

.emoji-actions {
  border-left: 1px solid #ffffff1f;
  gap: 3px;
  margin-left: 6px;
  padding-left: 6px;
  display: inline-flex;
}

.emoji-button {
  width: 24px;
  height: 24px;
  color: inherit;
  cursor: pointer;
  background: none;
  border: none;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  padding: 0;
  font-size: .95rem;
  line-height: 1;
  transition: transform .15s, background-color .15s;
  display: inline-flex;
}

.emoji-button:hover, .emoji-button:focus {
  background-color: #ffffff1f;
  outline: none;
  transform: scale(1.1);
}

.message-reactions {
  gap: 6px;
  margin-top: 4px;
  font-size: .85em;
  display: none;
}

.message-reactions.visible {
  align-items: center;
  display: inline-flex;
}

.reaction-pill {
  background-color: #00000014;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  padding: 2px 8px;
  display: inline-flex;
}

.reaction-pill.mine {
  background-color: #4caf5026;
  border: 1px solid #4caf5073;
}

.send-button {
  color: #fff;
  cursor: pointer;
  background-color: #4caf50;
  border: none;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  margin-left: 5px;
  padding: 0;
  font-size: 18px;
  transition: background-color .3s;
  display: flex;
}

.send-button:hover {
  background-color: #45a049;
}

.resize-handle {
  z-index: 10;
  background-color: #0000;
  position: absolute;
}

.resize-n, .resize-s {
  cursor: ns-resize;
  height: 6px;
  left: 0;
  right: 0;
}

.resize-e, .resize-w {
  cursor: ew-resize;
  width: 6px;
  top: 0;
  bottom: 0;
}

.resize-n {
  top: -3px;
}

.resize-s {
  bottom: -3px;
}

.resize-e {
  right: -3px;
}

.resize-w {
  left: -3px;
}

.resize-nw, .resize-ne, .resize-sw, .resize-se {
  width: 6px;
  height: 6px;
}

.resize-nw {
  cursor: nwse-resize;
  top: -3px;
  left: -3px;
}

.resize-ne {
  cursor: nesw-resize;
  top: -3px;
  right: -3px;
}

.resize-sw {
  cursor: nesw-resize;
  bottom: -3px;
  left: -3px;
}

.resize-se {
  cursor: nwse-resize;
  bottom: -3px;
  right: -3px;
}

.chat-window.minimized {
  cursor: pointer;
  border-radius: 30px;
  overflow: hidden;
  width: 60px !important;
  height: 60px !important;
}

.chat-window.minimized .chat-header {
  height: 60px;
  padding: 0;
}

.chat-window.minimized .friend-avatar {
  border-radius: 0;
  width: 60px;
  height: 60px;
  margin: 0;
}

.chat-window.minimized .friend-name, .chat-window.minimized .chat-header-buttons, .chat-window.minimized .chat-content {
  display: none;
}

.recent-chats-tab {
  z-index: 1000;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 5px 0 0 5px;
  width: 250px;
  transition: transform .3s;
  position: fixed;
  top: 20px;
  right: 0;
  transform: translateX(250px);
}

.recent-chats-tab.visible {
  transform: translateX(0);
}

.recent-chats-header {
  cursor: pointer;
  background-color: #e0e0e0;
  border-bottom: 1px solid #ccc;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  display: flex;
}

#toggle-recent-chats {
  cursor: pointer;
  background: none;
  border: none;
  font-size: 20px;
  transition: transform .3s;
  transform: rotate(0);
}

.recent-chats-tab.open #toggle-recent-chats {
  transform: rotate(180deg);
}

#recent-chats-list {
  max-height: 300px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow-y: auto;
}

.recent-chat-item {
  cursor: pointer;
  border-bottom: 1px solid #ccc;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  display: flex;
}

.recent-chat-item:hover {
  background-color: #e0e0e0;
}

.recent-chat-name {
  flex-grow: 1;
  font-weight: bold;
}

.recent-chat-unread {
  color: #fff;
  background-color: red;
  border-radius: 50%;
  margin-right: 10px;
  padding: 2px 6px;
  font-size: 12px;
}

.remove-recent-chat {
  color: #888;
  cursor: pointer;
  background: none;
  border: none;
}

.remove-recent-chat:hover {
  color: red;
}

@keyframes chat-unread-pulse {
  0% {
    box-shadow: 0 0 #ff0000b3;
  }

  70% {
    box-shadow: 0 0 0 10px #f000;
  }

  100% {
    box-shadow: 0 0 #f000;
  }
}

.chat-window.minimized.unread {
  animation: 2s infinite chat-unread-pulse;
}

.chat-icon {
  cursor: pointer;
  z-index: 1000;
  background-color: #fff;
  border: 2px solid #4caf50;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  transition: all .3s;
  display: flex;
  position: fixed;
  top: 20px;
  right: 20px;
  box-shadow: 0 2px 10px #0000001a;
}

.chat-icon:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 20px #00000026;
}

.chat-icon.hidden {
  opacity: 0;
  visibility: hidden;
}

.chat-icon svg {
  color: #4caf50;
  transition: all .3s;
}

.chat-icon:hover svg {
  transform: scale(1.1);
}

.chat-icon .unread-count {
  color: #fff;
  background-color: #ff5722;
  border: 2px solid #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  font-size: 10px;
  display: flex;
  position: absolute;
  top: -5px;
  right: -5px;
}

.chat-icon .close-icon {
  color: #666;
  cursor: pointer;
  opacity: 0;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  font-size: 14px;
  transition: all .2s;
  display: flex;
  position: absolute;
  top: -8px;
  right: -8px;
  transform: scale(.8);
  box-shadow: 0 1px 2px #0000001a;
}

.chat-icon:hover .close-icon {
  opacity: 1;
  transform: scale(1);
}

@keyframes chat-icon-pulse {
  0% {
    box-shadow: 0 0 #4caf5066;
  }

  70% {
    box-shadow: 0 0 0 10px #4caf5000;
  }

  100% {
    box-shadow: 0 0 #4caf5000;
  }
}

.chat-icon.pulse {
  animation: 2s infinite chat-icon-pulse;
}

.close-recent-chats {
  cursor: pointer;
  font-size: 18px;
  position: absolute;
  top: 10px;
  right: 10px;
}

.video-call-button {
  color: #4caf50;
  cursor: pointer;
  background: none;
  border: none;
  margin-right: 5px;
  padding: 5px;
  font-size: 1.2em;
}

.video-call-button:hover {
  color: #45a049;
}

.video-call-button:disabled {
  color: #999;
  cursor: not-allowed;
}

.chat-content {
  flex-direction: column;
  flex-grow: 1;
  transition: opacity .3s;
  display: flex;
  overflow: hidden;
}

.typing-indicator {
  color: #666;
  opacity: 0;
  background-color: #f5f5f5;
  border-radius: 20px;
  align-items: center;
  margin: 5px 10px;
  padding: 10px;
  font-size: .9em;
  font-style: italic;
  transition: all .5s;
  display: flex;
  transform: translateY(10px);
  box-shadow: 0 1px 3px #0000001a;
}

.typing-indicator.visible {
  opacity: 1;
  transform: translateY(0);
}

.typing-indicator .dots {
  margin-right: 10px;
  display: inline-flex;
}

.typing-indicator .dot {
  background-color: #3498db;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  animation: 1.4s ease-in-out infinite typingAnimation;
}

.typing-indicator .dot:first-child {
  animation-delay: 0s;
}

.typing-indicator .dot:nth-child(2) {
  animation-delay: .2s;
}

.typing-indicator .dot:nth-child(3) {
  animation-delay: .4s;
}

@keyframes typingAnimation {
  0%, 60%, 100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-6px);
  }
}

.message-text a {
  color: #06c;
  word-break: break-all;
  text-decoration: none;
}

.message-text a:hover {
  text-decoration: underline;
}

:root {
  --co-bg: #121a24;
  --co-panel: #17212b;
  --co-border: #1f2937;
  --co-shadow: 0 10px 30px #0000004d;
  --co-text: #f1f5f9;
  --co-subtext: #b0b9c6;
  --co-accent: #10a37f;
  --co-assistant-bg: #0f172a;
  --co-user-bg: #111827;
  --co-code-bg: #122034;
}

.co-overlay {
  z-index: 99999;
  background: radial-gradient(1400px 800px at 50% -20%, #ffffff0f, transparent), radial-gradient(900px 500px at 80% 120%, #ffffff0a, transparent), var(--co-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--co-text);
  grid-template-rows: 44px 1fr auto;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Helvetica Neue, Arial, Noto Sans, Apple Color Emoji, Segoe UI Emoji;
  display: grid;
  position: fixed;
  inset: 0;
}

.co-header {
  border-bottom: 1px solid var(--co-border);
  background: var(--co-panel);
  box-shadow: none;
  align-items: center;
  gap: 12px;
  padding: 0 16px;
  display: flex;
  position: relative;
}

.co-exit {
  border: 1px solid var(--co-border);
  background: var(--co-panel);
  width: 34px;
  height: 34px;
  color: var(--co-text);
  cursor: pointer;
  z-index: 3;
  border-radius: 8px;
  flex-shrink: 0;
  place-items: center;
  display: grid;
  position: relative;
}

.co-exit:hover {
  background: #ffffff0f;
}

.co-share {
  width: 28px;
  height: 28px;
  color: var(--co-accent);
  cursor: pointer;
  background: #10a37f1f;
  border: 1px solid #10a37f59;
  border-radius: 8px;
  place-items: center;
  margin-left: auto;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s;
  display: grid;
}

.co-share .fa-share-alt, .co-share .fa-share-nodes {
  font-size: 14px;
}

.co-share:hover {
  background: var(--co-accent);
  color: #0b0f14;
  border-color: var(--co-accent);
  transform: translateY(-1px);
}

.co-share:active {
  transform: translateY(0);
}

.co-share:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #10a37f73;
}

.co-title {
  margin-right: 6px;
  font-weight: 600;
  display: none;
}

.co-provider {
  z-index: 2;
  align-items: center;
  gap: 10px;
  display: flex;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.co-provider .ai-provider-icons {
  backdrop-filter: blur(6px);
  background: #e8f1ff;
  border: 1px solid #ffffff14;
  border-radius: 9999px;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 10px;
  display: flex;
  box-shadow: 0 4px 12px #0003;
}

.co-provider .ai-provider-icons img {
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 6px;
  width: 22px;
  height: 22px;
}

.co-provider .ai-provider-icons img.provider-active {
  border-color: var(--co-accent);
  box-shadow: 0 0 0 2px #10a37f26;
}

.co-provider .provider-name {
  color: var(--co-subtext);
  text-align: center;
  min-width: 90px;
  font-size: 12px;
}

.co-provider select {
  border: 1px solid var(--co-border);
  background: var(--co-panel);
  color: var(--co-text);
  border-radius: 8px;
  padding: 6px 8px;
}

.co-provider {
  gap: 10px;
}

.co-provider-panel {
  align-items: center;
  gap: 10px;
  display: flex;
}

.co-provider.collapsed .co-provider-panel {
  display: none;
}

.co-model-chip {
  border: 1px solid var(--co-border);
  background: var(--co-panel);
  color: var(--co-text);
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 9999px;
  align-items: center;
  gap: 6px;
  max-width: min(340px, 100vw - 120px);
  padding: 6px 10px;
  font-size: 12px;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s;
  display: none;
  overflow: hidden;
  box-shadow: 0 4px 12px #0003;
}

.co-model-chip.co-visible {
  display: inline-flex;
}

.co-model-chip:hover {
  background: #ffffff0f;
  border-color: #ffffff1f;
}

.co-model-chip:active {
  transform: translateY(1px);
}

.co-provider:not(.collapsed) .co-model-chip {
  display: none;
}

.co-overlay ::selection {
  color: #fff;
  background: #10a37f40;
}

.co-body {
  justify-content: center;
  padding-bottom: 0;
  display: flex;
  overflow: auto;
}

.co-body::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.co-body::-webkit-scrollbar-thumb {
  background: #ffffff14;
  border-radius: 8px;
}

.co-body::-webkit-scrollbar-thumb:hover {
  background: #ffffff1f;
}

.co-body::-webkit-scrollbar-track {
  background: none;
}

.co-stream-cursor {
  vertical-align: text-bottom;
  background: var(--co-accent);
  width: 7px;
  height: 1.2em;
  margin-left: 2px;
  animation: 1s step-end infinite co-blink;
  display: inline-block;
}

@keyframes co-blink {
  50% {
    opacity: 0;
  }
}

.co-thread {
  width: min(720px, 100%);
  padding: 24px 18px 80px;
}

.co-msg {
  box-shadow: none;
  background: none;
  border: none;
  border-radius: 14px;
  gap: 8px;
  margin: 10px 0;
  padding: 6px 0;
  transition: border-color .2s, background-color .2s;
  animation: .3s ease-out co-msg-in;
  display: grid;
}

.co-msg:hover {
  background: none;
  border-color: #0000;
}

.co-msg + .co-msg {
  margin-top: 6px;
}

.co-msg {
  position: relative;
}

.co-msg-actions {
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  gap: 6px;
  transition: opacity .15s, transform .15s;
  display: flex;
  position: absolute;
  bottom: 2px;
  right: -34px;
  transform: translateY(2px);
}

.co-msg:hover .co-msg-actions {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.co-action {
  border: 1px solid var(--co-border);
  background: var(--co-panel);
  width: 26px;
  height: 26px;
  color: var(--co-subtext);
  cursor: pointer;
  border-radius: 8px;
  place-items: center;
  display: grid;
  box-shadow: 0 2px 10px #00000040;
}

.co-action:hover {
  background: var(--co-panel);
  color: var(--co-text);
  border-color: var(--co-border);
  box-shadow: 0 3px 10px #00000059;
}

.co-action.copied {
  color: var(--co-accent);
  outline: 2px solid #10a37f73;
}

@media (width <= 720px) {
  .co-msg-actions {
    bottom: 6px;
    right: 6px;
  }
}

.co-inline-actions {
  z-index: 3;
  gap: 8px;
  display: flex;
  position: absolute;
  bottom: 8px;
  right: 10px;
}

.co-editing .co-msg-actions {
  display: none;
}

.co-btn {
  border: 1px solid var(--co-border);
  cursor: pointer;
  border-radius: 9999px;
  height: 28px;
  padding: 0 12px;
  font-size: 13px;
  line-height: 28px;
  transition: transform .12s, box-shadow .15s, background .15s, color .15s, border-color .15s;
  box-shadow: 0 2px 10px #00000040;
}

.co-btn:active {
  transform: translateY(1px);
}

.co-btn-cancel {
  color: #0b0f14;
  background: #eef1f5;
  border-color: #ffffff47;
}

.co-btn-cancel:hover {
  background: #fff;
}

.co-btn-send {
  color: #fff;
  background: #0b0f14;
  border-color: #ffffff1f;
}

.co-btn-send:hover {
  background: #111827;
}

.co-editing .co-content {
  border-radius: 12px;
  padding-bottom: 44px;
}

@media (width <= 720px) {
  .co-inline-actions {
    bottom: 8px;
    right: 8px;
  }
}

@keyframes co-msg-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.co-msg-user {
  overflow-wrap: anywhere;
  word-break: break-word;
  background: #ffffff14;
  border: 1px solid #ffffff12;
  border-radius: 14px;
  width: fit-content;
  max-width: 58%;
  margin-left: auto;
  padding: 3px 5px 0 3px;
}

.co-msg-assistant {
  background: none;
  border-color: #0000 #0000 #0000 currentColor;
  border-left-style: none;
  border-left-width: medium;
  border-bottom-left-radius: 6px;
  max-width: 82%;
  margin-right: auto;
}

.co-msg-assistant + .co-msg-assistant {
  border-top: 1px solid #ffffff1f;
  margin-top: 14px;
  padding-top: 14px;
}

.co-msg-user + .co-msg-user {
  border-top-right-radius: 8px;
}

.co-msg-user .co-content {
  color: var(--co-text);
}

.co-content {
  font-size: 15px;
  line-height: 1.65;
}

.co-content pre {
  background: var(--co-code-bg);
  color: #e2e8f0;
  border: 1px solid #ffffff0f;
  border-radius: 12px;
  max-height: 55vh;
  padding: 12px;
  overflow: auto;
}

.co-content pre code {
  white-space: pre-wrap;
  word-break: break-word;
}

.co-live-tail {
  white-space: pre-wrap;
}

.co-msg-user .co-content pre, .co-msg-user .co-content code {
  text-align: left;
}

.co-content h1 {
  margin: .75rem 0 .5rem;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
}

.co-content h2 {
  margin: .75rem 0 .5rem;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}

.co-content h3 {
  margin: .5rem 0 .25rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
}

.co-content p {
  margin: .3rem 0 .6rem;
}

.co-content ul, .co-content ol {
  margin: .4rem 0 .8rem 1.25rem;
}

.co-content li {
  margin: .25rem 0;
}

.co-content a {
  color: var(--co-accent);
  text-decoration: none;
}

.co-content a:hover {
  text-decoration: underline;
}

.co-content :not(pre) > code {
  color: #e5e7eb;
  background: #ffffff0f;
  border: 1px solid #ffffff14;
  border-radius: 6px;
  padding: .1rem .35rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
  font-size: .95em;
}

.co-content blockquote {
  color: #cbd5e1;
  background: #ffffff08;
  border-left: 3px solid #ffffff2e;
  border-radius: 8px;
  margin: .6rem 0;
  padding: .6rem .8rem;
}

.co-content hr {
  opacity: .7;
  border: none;
  border-top: 1px solid #ffffff14;
  margin: 1rem 0;
}

.co-typing {
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  display: inline-flex;
}

.co-ball {
  background: var(--co-accent);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  animation: 1.4s ease-in-out infinite co-typing-pulse;
  display: inline-block;
}

.co-ball:nth-child(2) {
  animation-delay: .2s;
}

@keyframes co-typing-pulse {
  0%, 60%, 100% {
    opacity: .35;
    transform: scale(1);
  }

  30% {
    opacity: .95;
    transform: scale(1.15);
  }
}

.co-tools {
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  display: flex;
}

.co-tool-pill {
  border: 1px solid var(--co-border);
  background: var(--co-panel);
  color: var(--co-text);
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
}

.co-tool-pill[data-status="in_progress"] {
  color: #fbbf24;
  background: #fde68a1a;
  border-color: #fde68a33;
}

.co-tool-pill[data-status="searching"] {
  color: #a5b4fc;
  background: #c7d2fe1a;
  border-color: #c7d2fe33;
}

.co-tool-pill[data-status="completed"] {
  color: #34d399;
  background: #10a37f1f;
  border-color: #34d39933;
}

.co-tool-pill[data-status="failed"] {
  color: #fca5a5;
  background: #ef44441f;
  border-color: #fecaca33;
}

.co-think {
  margin: 8px 0;
}

.co-think details {
  background: #ffffff0f;
  border: 1px solid #ffffff29;
  border-radius: 12px;
  padding: 10px 12px;
}

.co-think-details {
  background: linear-gradient(#ffffff0f, #ffffff0a) padding-box padding-box, conic-gradient(from 220deg at 20% -10%, #10a37fa6, #3b82f673, #a855f773, #10a37fa6) border-box;
  border: 1px solid #0000;
  border-radius: 14px;
  position: relative;
  overflow: clip;
  box-shadow: 0 6px 20px #00000040, inset 0 1px #ffffff0a;
}

.co-think-details:after {
  content: "";
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(closest-side, #ffffff2e, #0000 60%);
  width: 140%;
  height: 140%;
  animation: 6s linear infinite paused co-think-sheen;
  position: absolute;
  top: -40%;
  left: -20%;
  transform: translateX(-100%);
}

.co-think-details[open]:after {
  animation-play-state: running;
}

.co-think-summary {
  cursor: pointer;
  color: var(--co-subtext);
  user-select: none;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-weight: 600;
  list-style: none;
  transition: color .2s, opacity .2s, filter .2s;
  display: flex;
}

.co-think-summary::-webkit-details-marker {
  display: none;
}

.co-think-summary:hover {
  opacity: .9;
  filter: brightness(1.05);
}

.co-think-summary:before {
  content: "🧠";
  filter: drop-shadow(0 0 8px #10a37f59);
  font-size: 14px;
}

.co-think-summary:after {
  content: "▸";
  opacity: .9;
  margin-left: auto;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1);
  transform: rotate(90deg);
}

.co-think-details:not([open]) .co-think-summary:after {
  transform: rotate(0);
}

.co-think-details[open] .co-think-summary {
  color: var(--co-accent);
}

.co-think-panel {
  height: 0;
  padding: 0 12px 10px;
  transition: height .38s cubic-bezier(.22, .61, .36, 1);
  position: relative;
  overflow: hidden;
}

.co-think-panel:before {
  content: "";
  opacity: .6;
  mix-blend-mode: overlay;
  pointer-events: none;
  background: radial-gradient(1000px 500px at -10% -30%, #10a37f12, #0000 50%), linear-gradient(90deg, #ffffff0f 1px, #0000 1px) 0 0 / 22px 22px, linear-gradient(0deg, #ffffff08 1px, #0000 1px) 0 0 / 22px 22px;
  position: absolute;
  inset: 0;
}

.co-think .co-think-content {
  z-index: 1;
  white-space: pre-wrap;
  color: #dbe4ee;
  margin-top: 8px;
  font-size: 14px;
  position: relative;
}

.co-think-details[open] .co-think-content {
  transform-origin: top;
  animation: .32s ease-out co-think-reveal;
}

@keyframes co-think-reveal {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes co-think-sheen {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }

  10% {
    opacity: .18;
  }

  50% {
    opacity: 0;
    transform: translateX(30%);
  }

  100% {
    opacity: 0;
    transform: translateX(110%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .co-think-panel {
    transition: none;
  }

  .co-think-details:after, .co-think-details .co-think-content {
    animation: none;
  }
}

.co-footer {
  pointer-events: none;
  background: none;
  border-top: none;
  height: 0;
  padding: 0;
}

.co-composer {
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px)  + 16px);
  z-index: 1000;
  backdrop-filter: blur(10px);
  pointer-events: none;
  background: #17212b80;
  border: 1px solid #ffffff29;
  border-radius: 16px;
  flex-direction: column;
  gap: 4px;
  width: min(680px, 100% - 40px);
  padding: 4px;
  display: flex;
  position: fixed;
  transform: translateX(-50%);
  box-shadow: 0 8px 30px #00000073;
}

.co-composer-main, .co-input, .co-send, .co-tool-toggles {
  pointer-events: auto;
}

.co-composer:focus-within {
  border-color: #10a37f80;
  box-shadow: inset 0 0 0 1px #10a37f59;
}

.co-composer-main {
  grid-template-columns: 1fr auto;
  gap: 8px;
  display: grid;
}

.co-input {
  resize: none;
  min-height: 28px;
  max-height: none;
  color: var(--co-text);
  caret-color: var(--co-accent);
  will-change: height;
  background: none;
  border: none;
  outline: none;
  padding: 4px 10px;
  font-size: 14px;
  line-height: 1.4;
  transition: height .22s cubic-bezier(.22, .61, .36, 1);
  overflow-y: hidden;
}

.co-input::placeholder {
  color: var(--co-subtext);
}

.co-input-wrap {
  align-items: center;
  min-height: 28px;
  display: grid;
  position: relative;
}

.co-input-wrap .co-input {
  z-index: 1;
  padding-left: 50px;
  position: relative;
}

.co-waveform-overlay {
  z-index: 2;
  pointer-events: none;
  display: none;
  position: absolute;
  inset: 0;
}

.co-waveform-overlay.active {
  display: block;
}

.co-add {
  width: 28px;
  height: 28px;
  color: var(--co-accent);
  cursor: pointer;
  z-index: 4;
  background: #10a37f1f;
  border: 1px solid #10a37f59;
  border-radius: 8px;
  place-items: center;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s;
  display: grid;
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(calc(-50% - 1px));
}

.co-add .co-plus-icon {
  width: 16px;
  height: 16px;
  display: block;
}

.co-add:hover {
  background: var(--co-accent);
  color: #0b0f14;
  border-color: var(--co-accent);
  transform: translateY(calc(-50% - 2px));
}

.co-add:active {
  transform: translateY(calc(-50% - 1px));
}

.co-add:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #10a37f73;
}

.co-bars-overlay {
  z-index: 1;
  pointer-events: none;
  display: none;
  position: absolute;
  inset: 0;
}

.co-bars-overlay.active {
  display: block;
}

.co-input.co-recording {
  color: #0000;
  text-shadow: none;
}

.co-input.co-recording::placeholder {
  color: #0000;
}

.co-transcribing {
  z-index: 3;
  pointer-events: none;
  backdrop-filter: blur(4px);
  color: var(--co-text);
  background: #1118278c;
  border: 1px solid #ffffff1f;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  display: none;
  position: absolute;
  inset: 0;
}

.co-transcribing.active {
  display: flex;
}

.co-transcribing .co-transcribing-label {
  opacity: .9;
}

.co-transcribing .co-dots {
  gap: 4px;
  margin-left: 8px;
  display: inline-flex;
}

.co-transcribing .co-dot {
  background: var(--co-accent);
  opacity: .55;
  border-radius: 50%;
  width: 6px;
  height: 6px;
  animation: 1.2s ease-in-out infinite co-dot-blink;
}

.co-transcribing .co-dot:nth-child(2) {
  animation-delay: .2s;
}

.co-transcribing .co-dot:nth-child(3) {
  animation-delay: .4s;
}

@keyframes co-dot-blink {
  0%, 60%, 100% {
    opacity: .5;
    transform: translateY(0);
  }

  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

.co-send {
  width: 36px;
  height: 28px;
  color: var(--co-accent);
  cursor: pointer;
  background: #10a37f1f;
  border: 1px solid #10a37f59;
  border-radius: 8px;
  place-items: center;
  padding: 0 8px;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
  display: grid;
}

.co-send:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #10a37f73;
}

.co-send .co-icon {
  fill: currentColor;
  opacity: .9;
  width: 16px;
  height: 16px;
  transition: transform .15s, opacity .2s;
}

.co-send:hover:not([disabled]) .co-icon {
  opacity: 1;
  transform: translateX(1px);
}

.co-send:hover:not([disabled]) {
  background: var(--co-accent);
  color: #0b0f14;
  border-color: var(--co-accent);
}

.co-send[disabled] {
  opacity: .5;
  cursor: not-allowed;
  color: var(--co-subtext);
  background: #ffffff0f;
  border-color: #ffffff14;
}

.co-controls {
  align-items: center;
  gap: 6px;
  display: flex;
}

.co-mic {
  width: 28px;
  height: 28px;
  color: var(--co-accent);
  cursor: pointer;
  background: #10a37f1f;
  border: 1px solid #10a37f59;
  border-radius: 8px;
  place-items: center;
  transition: background-color .2s, color .2s, border-color .2s, box-shadow .2s;
  display: grid;
}

.co-mic .fa-microphone, .co-mic .fa-spinner {
  font-size: 14px;
}

.co-mic:hover:not(.processing) {
  background: var(--co-accent);
  color: #0b0f14;
  border-color: var(--co-accent);
}

.co-mic.recording {
  color: #0b0f14;
  background: #ef4444;
  border-color: #ef4444;
  box-shadow: inset 0 0 0 2px #ef444440;
}

.co-mic.processing {
  opacity: .9;
  cursor: wait;
}

.co-hint {
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px)  + 64px);
  color: var(--co-subtext);
  text-align: center;
  pointer-events: none;
  width: min(860px, 100% - 40px);
  font-size: 11px;
  position: fixed;
  transform: translateX(-50%);
}

.co-tool-toggles {
  border-bottom: 1px solid var(--co-border);
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
  padding: 4px 0 8px;
  display: flex;
}

.co-tool-toggle {
  border: 1px solid var(--co-border);
  background: var(--co-panel);
  color: var(--co-subtext);
  cursor: pointer;
  user-select: none;
  border-radius: 999px;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  transition: all .2s;
  display: flex;
}

.co-tool-toggle:hover {
  background: #ffffff0f;
  border-color: #ffffff1f;
}

.co-tool-toggle.active {
  color: var(--co-accent);
  background: #10a37f24;
  border-color: #10a37f80;
}

.co-tool-toggle input[type="checkbox"] {
  cursor: pointer;
  width: 14px;
  height: 14px;
  accent-color: var(--co-accent);
  margin: 0;
}

.co-tool-toggle-label {
  cursor: pointer;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }

  .co-msg, .co-fader, .co-ghost, .co-send {
    transition: none !important;
  }

  .co-msg, .co-stream-cursor {
    animation: none !important;
  }
}

.co-fader {
  transition: background-color .45s, opacity .45s;
}

.co-ghost {
  z-index: 100000;
  pointer-events: none;
  border: 1px solid var(--co-border);
  background: var(--co-panel);
  box-shadow: var(--co-shadow);
  transform-origin: 0 0;
  border-radius: 12px;
  padding: 14px 16px;
  transition: transform .55s cubic-bezier(.2, .7, .1, 1), opacity .35s;
  position: fixed;
}

.co-media-strip {
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
  display: flex;
}

.co-media-strip .co-thumb {
  object-fit: cover;
  border: 1px solid var(--co-border);
  cursor: pointer;
  background: #0b1220;
  border-radius: 8px;
  width: 100px;
  height: 72px;
  transition: transform .15s, box-shadow .2s, border-color .2s;
}

.co-media-strip .co-thumb:hover {
  border-color: #ffffff2e;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px #0000004d;
}

.co-media-full {
  margin-top: 6px;
}

.co-media-full img {
  object-fit: contain;
  border: 1px solid var(--co-border);
  cursor: zoom-in;
  background: #0b1220;
  border-radius: 10px;
  width: 100%;
  height: auto;
  max-height: 520px;
  display: block;
}

.co-lightbox {
  z-index: 100000;
  cursor: zoom-out;
  backdrop-filter: blur(2px);
  background: #000000d1;
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

.co-lightbox img {
  border: 1px solid #ffffff29;
  border-radius: 12px;
  max-width: 92vw;
  max-height: 92vh;
  box-shadow: 0 20px 60px #00000073;
}

.co-media-placeholder {
  border: 1px solid var(--co-border);
  background: #0b1220;
  border-radius: 10px;
  width: 100%;
  height: 180px;
  margin-top: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffff08;
}

.co-media-shimmer {
  background: linear-gradient(90deg, #ffffff0a 0%, #ffffff14 50%, #ffffff0a 100%);
  animation: 1.3s linear infinite co-shimmer;
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
}

.co-media-caption {
  color: var(--co-subtext);
  backdrop-filter: blur(4px);
  background: #111827a6;
  border: 1px solid #ffffff1f;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 12px;
  position: absolute;
  bottom: 10px;
  left: 10px;
}

@keyframes co-shimmer {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.co-error {
  color: #fecaca;
  background: #ef44441f;
  border: 1px solid #ef444459;
  border-radius: 10px;
  margin-top: 8px;
  padding: 8px 10px;
}

.co-error-title {
  color: #fca5a5;
  margin-bottom: 2px;
  font-weight: 600;
}

.co-error-summary {
  color: #fecaca;
  font-size: 13px;
}

.co-error-details {
  margin-top: 6px;
}

.co-error-details > summary {
  cursor: pointer;
  color: #fca5a5;
  font-size: 12px;
}

.co-error-details-body {
  color: #fecaca;
  white-space: pre-wrap;
  margin-top: 4px;
  font-size: 12px;
}

.co-error-actions {
  gap: 8px;
  margin-top: 8px;
  display: flex;
}

.co-error-btn {
  border: 1px solid var(--co-border);
  color: var(--co-text);
  cursor: pointer;
  background: #ffffff0f;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 12px;
}

.co-error-btn:hover {
  background: #ffffff1f;
}

.co-error-retry {
  color: var(--co-accent);
  background: #10a37f1f;
  border-color: #10a37f59;
}

.co-error-retry:hover {
  background: var(--co-accent);
  color: #0b0f14;
  border-color: var(--co-accent);
}

.co-error[data-status="429"] {
  color: #fde68a;
  background: #facc151f;
  border-color: #facc1559;
}

.co-error[data-status="402"], .co-error[data-status="403"] {
  color: #bfdbfe;
  background: #3b82f61f;
  border-color: #3b82f659;
}

@media (width <= 640px) {
  .co-overlay {
    grid-template-rows: auto 1fr auto;
  }

  .co-header {
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
  }

  .co-provider {
    z-index: 1;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
    position: static;
    top: auto;
    left: auto;
    transform: none;
  }

  .co-provider .ai-provider-icons {
    -webkit-overflow-scrolling: touch;
    gap: 6px;
    max-width: 100%;
    padding: 6px 8px;
    overflow-x: auto;
  }

  .co-provider .ai-provider-icons img {
    flex: none;
    width: 28px;
    height: 28px;
  }

  .co-provider .provider-name {
    min-width: 0;
    font-size: 11px;
  }

  .co-provider select {
    width: 100%;
    padding: 6px 10px;
    font-size: 13px;
  }

  .co-provider.co-hidden, .co-model-chip {
    display: none;
  }

  .co-model-chip.co-visible {
    align-self: center;
    margin: 0 auto;
    display: inline-flex;
  }

  .co-thread {
    padding: 16px 12px 90px;
  }

  .co-msg-user, .co-msg-assistant {
    max-width: 100%;
  }
}

.rtc-video-container {
  --rtc-window-width: 330px;
  --rtc-window-height: 175px;
  width: var(--rtc-window-width);
  height: var(--rtc-window-height);
  z-index: 1000;
  background-color: #000c;
  border-radius: 10px;
  flex-direction: column;
  min-width: 200px;
  max-width: 90vw;
  min-height: 150px;
  max-height: 90vh;
  transition: all .3s;
  display: flex;
  position: fixed;
  overflow: hidden;
  box-shadow: 0 4px 6px #0000001a;
}

.rtc-video-container.hidden {
  display: none;
}

.rtc-video-container.minimized {
  min-height: 0;
  overflow: hidden;
  width: 200px !important;
  height: 40px !important;
}

.rtc-video-container.minimized .rtc-video-content, .rtc-video-container.minimized .rtc-call-controls {
  display: none;
}

.rtc-video-container.minimized .rtc-video-header {
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  display: flex;
}

.rtc-video-header {
  cursor: move;
  background-color: #fff3;
  flex-shrink: 0;
  align-items: center;
  height: 30px;
  padding: 0 10px;
  font-size: clamp(12px, 2vw, 16px);
  display: flex;
}

.rtc-video-content {
  flex: 1;
  display: flex;
  position: relative;
  overflow: hidden;
}

#rtc-local-video, #rtc-remote-video {
  object-fit: contain;
  background-color: #000;
  width: 100%;
  height: 100%;
  transition: all .3s;
}

.rtc-call-controls {
  z-index: 10;
  background-color: #00000080;
  border-radius: 20px;
  gap: 10px;
  padding: 5px;
  display: flex;
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
}

.rtc-call-controls button {
  color: #fff;
  cursor: pointer;
  background-color: #fff3;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  transition: all .3s;
  display: flex;
  position: relative;
}

.rtc-call-controls button:hover {
  background-color: #ffffff4d;
  transform: scale(1.1);
}

.rtc-call-controls button:active {
  transform: scale(.95);
}

.rtc-call-controls button.active {
  background-color: #4caf50;
}

.rtc-call-controls button.end-call {
  background-color: #f44336;
}

.rtc-call-controls button.end-call:hover {
  background-color: #d32f2f;
}

.rtc-call-controls button:after {
  content: attr(data-tooltip);
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  background-color: #000c;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 12px;
  transition: opacity .3s, visibility .3s;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.rtc-call-controls button:hover:after {
  opacity: 1;
  visibility: visible;
}

.rtc-minimize-button {
  color: #fff;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
}

.rtc-resize-handle {
  opacity: 0;
  width: 10px;
  height: 10px;
  position: absolute;
}

.rtc-resize-n {
  cursor: n-resize;
  height: 5px;
  top: 0;
  left: 0;
  right: 0;
}

.rtc-resize-e {
  cursor: e-resize;
  width: 5px;
  top: 0;
  bottom: 0;
  right: 0;
}

.rtc-resize-s {
  cursor: s-resize;
  height: 5px;
  bottom: 0;
  left: 0;
  right: 0;
}

.rtc-resize-w {
  cursor: w-resize;
  width: 5px;
  top: 0;
  bottom: 0;
  left: 0;
}

.rtc-resize-nw {
  cursor: nw-resize;
  width: 10px;
  height: 10px;
  top: 0;
  left: 0;
}

.rtc-resize-ne {
  cursor: ne-resize;
  width: 10px;
  height: 10px;
  top: 0;
  right: 0;
}

.rtc-resize-sw {
  cursor: sw-resize;
  width: 10px;
  height: 10px;
  bottom: 0;
  left: 0;
}

.rtc-resize-se {
  cursor: se-resize;
  width: 10px;
  height: 10px;
  bottom: 0;
  right: 0;
}

#rtc-call-status {
  color: #fff;
  background-color: #00000080;
  border-radius: 5px;
  padding: 5px 10px;
  font-size: 14px;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}

#rtc-connection-quality {
  color: #fff;
  background-color: #00000080;
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 12px;
  position: absolute;
  bottom: 60px;
  left: 10px;
}

#rtc-user-name-overlay {
  color: #fff;
  background-color: #00000080;
  border-radius: 3px;
  padding: 3px 6px;
  font-size: 14px;
  position: absolute;
  top: 40px;
  left: 10px;
}

.rtc-fade-in {
  animation: .3s rtc-fadeIn;
}

.rtc-fade-out {
  animation: .3s rtc-fadeOut;
}

@keyframes rtc-fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes rtc-fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.rtc-video-container.resizing {
  transition: none;
}

.rtc-video-container.with-transitions {
  transition: width .3s, height .3s;
}

.tts-container {
  z-index: 1000;
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  width: 280px;
  font-family: Arial, sans-serif;
  position: fixed;
  top: 20px;
  left: 20px;
  box-shadow: 0 2px 10px #0000001a;
}

.tts-header {
  cursor: move;
  background-color: #f8f8f8;
  border-bottom: 1px solid #e0e0e0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  justify-content: space-between;
  align-items: center;
  padding: 12px 15px;
  display: flex;
}

.tts-header span {
  color: #333;
  font-size: 16px;
  font-weight: bold;
}

.tts-content {
  padding: 15px;
}

.tts-close-button {
  cursor: pointer;
  color: #666;
  background: none;
  border: none;
  font-size: 20px;
}

.tts-close-button:hover {
  color: #333;
}

.tts-button {
  color: #333;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
  font-size: 14px;
  transition: background-color .3s;
  display: block;
}

.tts-button:hover {
  background-color: #e0e0e0;
}

.tts-button.enabled {
  color: #fff;
  background-color: #2196f3;
}

.setting-group {
  margin-bottom: 15px;
}

.setting-group label {
  color: #666;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: bold;
  display: block;
}

.setting-group input[type="range"] {
  width: 100%;
  margin-bottom: 5px;
}

.setting-group span {
  color: #666;
  background-color: #f0f0f0;
  border-radius: 3px;
  padding: 2px 5px;
  font-size: 12px;
  display: inline-block;
}

@media (width <= 480px) {
  .tts-container {
    width: 90%;
    left: 5%;
    right: 5%;
  }
}

.tts-container {
  animation: .3s ease-in-out fadeIn;
}

#screen-analysis-ui, .tts-container {
  opacity: 1;
  visibility: visible;
  transition: opacity .3s, visibility .3s;
}

#screen-analysis-ui.hidden, .tts-container.hidden {
  opacity: 0;
  visibility: hidden;
}

.outer-container {
  --mindmap-voice-agent-shift: -36px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background-color: #ffffff6b;
  border-radius: 12.4px;
  justify-content: center;
  align-items: center;
  padding: .15rem;
  transition: bottom .5s, opacity .5s;
  display: flex;
  position: fixed;
  top: auto;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 8px #0000001a;
}

body.pen-input-active .outer-container, body.pen-input-active .outer-container *, body.pen-input-active .outer-container :before, body.pen-input-active .outer-container :after {
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

#simple-controls-container {
  background: #ffffff94;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  transition: opacity .25s, filter .25s;
  display: flex;
  position: relative;
  overflow: visible;
}

.simple-control-group {
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  margin: 0 .5vw;
  padding: .5vw;
  display: flex;
}

@media (width >= 769px) and (width <= 1366px) {
  .simple-control-group {
    padding: 0;
  }
}

.highlighter-flex-container {
  flex-direction: column;
  display: flex;
}

.color-options-container {
  flex-direction: row;
  display: flex;
}

.add-content-wrapper {
  position: relative;
}

.add-content-fan {
  pointer-events: none;
  width: 100%;
  height: 0;
  position: absolute;
  bottom: 0;
  left: 0;
}

.add-content-fan .fan-option {
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
  z-index: 1;
  transition: transform .32s cubic-bezier(.22, 1, .36, 1), opacity .24s, box-shadow .24s;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -10px)scale(.96)rotate(0);
  box-shadow: 0 4px 10px #0000001f;
}

.add-content-wrapper.open .add-content-fan {
  pointer-events: auto;
}

.add-content-wrapper.open .add-content-fan .fan-option:hover {
  box-shadow: 0 10px 22px #0000002e, 0 6px 14px #0000001f;
}

.add-content-wrapper.open .add-content-fan .fan-option:first-child {
  opacity: 1;
  pointer-events: auto;
  z-index: 3;
  transition-delay: 40ms;
  transform: translate(calc(-50% - 85px), -75px)rotate(-12deg)scale(1);
}

.add-content-wrapper.open .add-content-fan .fan-option:nth-child(2) {
  opacity: 1;
  pointer-events: auto;
  z-index: 4;
  transition-delay: 80ms;
  transform: translate(-50%, -90px)rotate(0)scale(1);
}

.add-content-wrapper.open .add-content-fan .fan-option:nth-child(3) {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
  transition-delay: .12s;
  transform: translate(calc(65px - 50%), -75px)rotate(12deg)scale(1);
}

@media (width <= 768px) {
  .control-group {
    max-height: calc(100vh - 200px);
  }

  .outer-container {
    width: 100%;
    box-shadow: none;
    background-color: #ffffff80;
    border-radius: 0;
    padding: .5rem .25rem;
    position: fixed;
    inset: auto 0 0;
    transform: none;
  }

  .outer-container #simple-controls-container {
    background-color: #0000;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    min-height: 50px;
    padding: 0;
    display: flex;
  }

  .outer-container .simple-control-group {
    justify-content: center;
    align-items: center;
    gap: .5rem;
    display: flex;
  }

  .outer-container .button-container {
    box-shadow: none;
    background: none;
    padding: 0;
  }

  .outer-container .simple-control-group .custom-button, .outer-container .circular-button {
    background-color: #ffffff1a;
    flex-shrink: 0;
    min-width: auto;
    margin: 0;
    padding: .3rem;
    font-size: .9rem;
  }

  .outer-container .simple-control-group .button-icon i, .outer-container .pencil-button .button-icon i, .outer-container .highlighter-button .button-icon i, .outer-container .eraser-button .button-icon i {
    font-size: 1.1rem;
  }

  .outer-container .simple-control-group:first-child, .outer-container .simple-control-group:nth-child(2), .outer-container .simple-control-group:nth-child(3), .outer-container .simple-control-group:nth-child(4), .outer-container .simple-control-group:nth-child(5) {
    flex: 0 auto;
  }

  .outer-container #simple-sign-in-button .button-text, .outer-container #simple-sign-out-button .button-text {
    display: none;
  }

  .outer-container .circular-button {
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    display: flex;
  }

  .outer-container .circular-button .button-icon {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .outer-container .color-tooltip {
    z-index: 1000;
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
  }

  .outer-container #simple-youtube-button, .outer-container #simple-browser-button {
    display: none;
  }

  .outer-container #enable-selection-box-button {
    margin-left: auto;
    margin-right: .5rem;
  }

  .outer-container #enable-lasso-button {
    margin-right: .5rem;
  }
}

@media (width <= 430px) {
  .outer-container .circular-button, .outer-container .custom-button {
    width: 32px;
    min-width: 32px;
    height: 32px;
    padding: .2rem;
  }

  .outer-container .simple-control-group {
    margin: 0 .1vw;
    padding: .2vw;
  }

  .outer-container .button-icon i {
    font-size: .95rem !important;
  }

  .outer-container #enable-selection-box-button, .outer-container #enable-lasso-button, .outer-container #enable-connection-drawing-button {
    margin-right: .1rem;
  }

  .outer-container #simple-controls-container {
    padding: 0 .2rem;
  }
}

@media (width <= 370px) {
  .outer-container .circular-button, .outer-container .custom-button {
    width: 28px;
    min-width: 28px;
    height: 28px;
  }

  .outer-container .button-icon i {
    font-size: .85rem !important;
  }
}

.lasso-button.enabled {
  background-color: #e0e0e0;
}

#enable-selection-box-button {
  margin-right: .5rem;
}

.custom-button.selection-box-button.enabled, .custom-button.lasso-button.enabled {
  color: #fff;
  background-color: #007bff;
  border: 1px solid #0056b3;
  box-shadow: 0 2px 4px #0000001a;
}

.connection-button {
  position: relative;
}

.connection-button .button-icon i {
  color: #4a5568;
  font-size: 1.1rem;
  transition: color .3s;
}

.connection-button:hover {
  background-color: #f0f0f0;
}

.connection-button:hover .button-icon i {
  color: #007bff;
}

.custom-button.connection-button.enabled {
  color: #fff;
  background-color: #007bff;
  border: 1px solid #0056b3;
  box-shadow: 0 2px 4px #0000001a;
}

.connection-button.enabled .button-icon i {
  color: #fff;
}

.connection-button .button-icon i.fa-duotone {
  --fa-primary-color: #4a5568;
  --fa-secondary-color: #718096;
  --fa-primary-opacity: 1;
  --fa-secondary-opacity: .6;
  transition: --fa-primary-color .3s, --fa-secondary-color .3s;
}

.connection-button:hover .button-icon i.fa-duotone {
  --fa-primary-color: #007bff;
  --fa-secondary-color: #3498db;
}

.connection-button.enabled .button-icon i.fa-duotone {
  --fa-primary-color: white;
  --fa-secondary-color: #e0e0e0;
}

#enable-connection-drawing-button {
  position: relative;
}

.connection-thickness-tooltip {
  z-index: 1001;
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  background: linear-gradient(135deg, #fffffff2 0%, #f9fafbf2 100%);
  border: 1px solid #0000000f;
  border-radius: 12px;
  flex-direction: column;
  gap: 12px;
  min-width: 200px;
  padding: 12px 16px;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1), visibility .3s cubic-bezier(.4, 0, .2, 1), transform .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: absolute;
  bottom: calc(100% + 15px);
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 10px 25px #0000001a, 0 6px 12px #00000014, inset 0 0 0 1px #ffffff80;
}

.connection-thickness-tooltip label, .connection-thickness-tooltip button, .connection-thickness-tooltip #connection-thickness-value, .connection-thickness-tooltip .connection-type-label, .connection-thickness-tooltip .description-label, .connection-thickness-tooltip .descriptor-style-label, .connection-thickness-tooltip .connection-style-label, .connection-thickness-tooltip .connection-direction-label {
  user-select: none;
  -webkit-touch-callout: none;
}

.connection-thickness-tooltip button, .connection-thickness-tooltip input[type="range"], .connection-thickness-tooltip input[type="color"] {
  touch-action: manipulation;
}

.connection-thickness-tooltip input[type="text"], .connection-thickness-tooltip input[type="number"], .connection-thickness-tooltip textarea, .connection-thickness-tooltip select {
  user-select: text;
  -webkit-touch-callout: default;
}

.connection-thickness-tooltip:after {
  content: "";
  filter: drop-shadow(0 2px 2px #0000000f);
  border-top: 8px solid #f9fafbf2;
  border-left: 8px solid #0000;
  border-right: 8px solid #0000;
  width: 0;
  height: 0;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

.thickness-control {
  align-items: center;
  gap: 12px;
  display: flex;
}

.connection-thickness-tooltip label {
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .5px;
  align-items: center;
  gap: 6px;
  min-width: 65px;
  font-size: .75rem;
  font-weight: 600;
  display: flex;
}

.slider-container {
  flex: 1;
  align-items: center;
  gap: 10px;
  display: flex;
}

#connection-thickness-slider {
  cursor: pointer;
  appearance: none;
  background: #e5e7eb;
  border-radius: 2px;
  outline: none;
  width: 120px;
  height: 4px;
  transition: background .3s;
  position: relative;
}

#connection-thickness-slider:hover {
  background: #d1d5db;
}

#connection-thickness-slider::-webkit-slider-thumb {
  appearance: none;
  cursor: pointer;
  z-index: 2;
  background: #007bff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: all .2s;
  position: relative;
  box-shadow: 0 2px 4px #007bff33, 0 0 0 2px #007bff1a;
}

#connection-thickness-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 3px 8px #007bff4d, 0 0 0 3px #007bff26;
}

#connection-thickness-slider::-moz-range-thumb {
  cursor: pointer;
  background: #007bff;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: all .2s;
  box-shadow: 0 2px 4px #007bff33, 0 0 0 2px #007bff1a;
}

#connection-thickness-slider::-moz-range-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 3px 8px #007bff4d, 0 0 0 3px #007bff26;
}

#connection-thickness-value {
  color: #111827;
  text-align: center;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  min-width: 35px;
  padding: 4px 8px;
  font-size: .875rem;
  font-weight: 700;
}

.description-control {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.description-label {
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .5px;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  font-weight: 600;
  display: flex;
}

#connection-descriptor-input {
  color: #374151;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  width: 100%;
  padding: 8px 12px;
  font-family: inherit;
  font-size: .875rem;
  transition: all .2s;
}

#connection-descriptor-input:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 3px #007bff1a, 0 1px 2px #0000000d;
}

#connection-descriptor-input:hover {
  border-color: #d1d5db;
}

#connection-descriptor-input::placeholder {
  color: #9ca3af;
  font-style: italic;
}

.descriptor-style-control {
  align-items: center;
  gap: 12px;
  display: flex;
}

.descriptor-style-label {
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .5px;
  min-width: 65px;
  font-size: .75rem;
  font-weight: 600;
}

.descriptor-style-inputs {
  align-items: center;
  gap: 8px;
  display: flex;
}

#connection-descriptor-size {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  width: 60px;
  padding: 6px 8px;
  font-size: .875rem;
}

#connection-descriptor-color {
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  padding: 0;
}

.connection-style-control {
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  display: flex;
}

.connection-style-label {
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .5px;
  min-width: 65px;
  font-size: .75rem;
  font-weight: 600;
}

#connection-relationship-style {
  cursor: pointer;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 8px;
}

#connection-relationship-style:disabled {
  opacity: .5;
  cursor: default;
}

.connection-direction-control {
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  display: flex;
}

.connection-direction-label {
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .5px;
  min-width: 65px;
  font-size: .75rem;
  font-weight: 600;
}

#connection-direction-reverse {
  cursor: pointer;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 6px 10px;
}

#connection-direction-reverse:disabled {
  opacity: .5;
  cursor: default;
}

.connection-type-control {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 6px;
  display: flex;
}

.connection-type-control .connection-type-label {
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-size: .75rem;
  font-weight: 600;
  display: block;
}

.connection-type-toggle {
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  align-items: stretch;
  display: inline-flex;
  overflow: hidden;
  box-shadow: inset 0 1px #00000005;
}

.connection-type-toggle button {
  appearance: none;
  color: #374151;
  cursor: pointer;
  background: none;
  border: 0;
  min-width: 98px;
  padding: 6px 10px;
  font-size: .82rem;
  line-height: 1.2;
  transition: background-color .14s, color .14s, box-shadow .14s;
}

.connection-type-toggle button + button {
  border-left: 1px solid #e5e7eb;
}

.connection-type-toggle button:hover {
  background: #eef2ff;
}

.connection-type-toggle button:focus {
  outline: none;
  box-shadow: inset 0 0 0 2px #c7d2fe;
}

.connection-type-toggle button.active {
  color: #1e40af;
  background: #e0e7ff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px #6366f159, 0 1px #fff9;
}

#connection-relationship-style {
  margin-top: 2px;
}

@media (prefers-color-scheme: dark) {
  .connection-type-control .connection-type-label {
    color: #9ca3af;
  }

  .connection-type-toggle {
    background: #0b0f17;
    border-color: #374151;
  }

  .connection-type-toggle button {
    color: #e5e7eb;
  }

  .connection-type-toggle button + button {
    border-left-color: #374151;
  }

  .connection-type-toggle button:hover {
    background: #111827;
  }

  .connection-type-toggle button.active {
    color: #93c5fd;
    background: #1e293b;
    box-shadow: inset 0 0 0 1px #6366f173, 0 1px #ffffff0d;
  }

  #connection-direction-reverse {
    color: #e5e7eb;
    background: #0b0f17;
    border-color: #374151;
  }

  #connection-direction-reverse:hover {
    background: #111827;
  }
}

.connection-thickness-tooltip.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%)translateY(-3px);
}

.ask-connect-container {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  display: flex;
  position: relative;
}

.agent-dock, .agent-dock[hidden], .agent-dock.agent-dock--legacy-hidden {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  display: none !important;
}

.agent-dock {
  --agent-dock-accent-start: #0f766e;
  --agent-dock-accent-end: #14b8a6;
  --agent-dock-tint: #0f766e29;
  background: linear-gradient(180deg, #fffffff0, #f1f5f9e6), linear-gradient(135deg, var(--agent-dock-tint), #fff0);
  backdrop-filter: blur(18px);
  z-index: 2;
  pointer-events: none;
  border: 1px solid #94a3b84d;
  border-radius: 18px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 6px;
  display: flex;
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 14px 30px #0f172a26, 0 5px 12px #0f172a17;
}

.agent-dock[data-mode="agent"] {
  --agent-dock-accent-start: #2563eb;
  --agent-dock-accent-end: #0ea5e9;
  --agent-dock-tint: #2563eb29;
}

.agent-dock .agent-button {
  pointer-events: auto;
}

.agent-dock .agent-tutor-settings-anchor {
  pointer-events: auto;
  position: relative;
}

.agent-tutor-keyboard-button {
  pointer-events: auto;
  z-index: 3;
  cursor: pointer;
  color: #0f172a;
  background: linear-gradient(180deg, #fffffff5, #e2e8f0eb), linear-gradient(135deg, var(--agent-dock-tint), #fff0);
  border: 1px solid #94a3b857;
  border-radius: 12px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
  box-shadow: inset 0 1px #ffffffb8, 0 8px 18px #0f172a1c;
}

.agent-tutor-keyboard-button:hover {
  border-color: #64748b73;
  transform: translateY(-2px);
  box-shadow: inset 0 1px #ffffffd1, 0 11px 22px #0f172a24;
}

.agent-tutor-keyboard-button i {
  color: var(--agent-dock-accent-start);
  font-size: .88rem;
}

.agent-tutor-settings-button {
  cursor: pointer;
  color: #0f172a;
  background: linear-gradient(180deg, #fffffff5, #e2e8f0eb), linear-gradient(135deg, var(--agent-dock-tint), #fff0);
  border: 1px solid #94a3b857;
  border-radius: 12px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  box-shadow: inset 0 1px #ffffffb8, 0 8px 18px #0f172a1c;
}

.agent-tutor-settings-button:hover {
  border-color: #64748b73;
  transform: translateY(-2px);
  box-shadow: inset 0 1px #ffffffd1, 0 11px 22px #0f172a24;
}

.agent-tutor-settings-button i {
  color: var(--agent-dock-accent-start);
  font-size: .86rem;
}

.agent-tutor-settings-panel {
  background: linear-gradient(180deg, #0f172af5, #0f172aeb), linear-gradient(135deg, var(--agent-dock-tint), #0f172a00);
  color: #e2e8f0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 4;
  border: 1px solid #94a3b83d;
  border-radius: 16px;
  min-width: 232px;
  padding: 10px;
  transition: opacity .18s, transform .18s, visibility .18s;
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%)translateY(4px);
  box-shadow: 0 18px 34px #02061766, 0 7px 16px #02061738;
}

.agent-tutor-settings-panel.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%)translateY(0);
}

.agent-tutor-settings-header {
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
  display: flex;
}

.agent-tutor-settings-kicker {
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #94a3b8f2;
  font-size: .62rem;
  font-weight: 700;
}

.agent-tutor-settings-title {
  color: #f8fafc;
  font-size: .85rem;
  font-weight: 700;
}

.agent-tutor-settings-item {
  cursor: pointer;
  background: #1e293b8f;
  border: 1px solid #94a3b81f;
  border-radius: 12px;
  align-items: flex-start;
  gap: 9px;
  padding: 9px;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1.2;
  transition: background .18s, border-color .18s, transform .18s;
  display: flex;
}

.agent-tutor-settings-item + .agent-tutor-settings-item {
  margin-top: 8px;
}

.agent-tutor-settings-item:hover {
  background: #1e293bc2;
  border-color: #94a3b83d;
  transform: translateY(-1px);
}

.agent-tutor-settings-item--disabled {
  opacity: .62;
}

.agent-tutor-settings-item--disabled:hover {
  background: #1e293b8f;
  border-color: #94a3b81f;
  transform: none;
}

.agent-tutor-settings-item input[type="checkbox"] {
  accent-color: var(--agent-dock-accent-end);
  margin: 1px 0 0;
}

.agent-tutor-settings-copy {
  flex-direction: column;
  gap: 3px;
  display: flex;
}

.agent-tutor-settings-label {
  color: #f8fafc;
  font-size: .73rem;
  font-weight: 700;
}

.agent-tutor-settings-hint {
  color: #cbd5e1d6;
  font-size: .63rem;
  font-weight: 500;
  line-height: 1.35;
}

.agent-dock-ask-menu-anchor {
  pointer-events: auto;
  position: relative;
}

.agent-dock-ask-menu-button {
  background: linear-gradient(180deg, #fffffff5, #e2e8f0eb), linear-gradient(135deg, var(--agent-dock-tint), #fff0);
  color: #0f172a;
  border: 1px solid #94a3b857;
  border-radius: 12px;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: inline-flex;
  box-shadow: inset 0 1px #ffffffb8, 0 8px 18px #0f172a1c;
}

.agent-dock-ask-menu-button:hover {
  border-color: #64748b73;
  transform: translateY(-2px);
  box-shadow: inset 0 1px #ffffffd1, 0 11px 22px #0f172a24;
}

.agent-dock-ask-menu-button-icon {
  width: 22px;
  height: 22px;
  color: var(--agent-dock-accent-start);
  background: #ffffffb3;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.agent-dock-ask-menu-button-icon i {
  font-size: .72rem;
}

.agent-dock-ask-menu-button-text {
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  font-size: .64rem;
  font-weight: 800;
}

.agent-dock-ask-menu-panel {
  background: linear-gradient(180deg, #fffffff7, #f1f5f9f0), linear-gradient(135deg, var(--agent-dock-tint), #fff0);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5;
  border: 1px solid #94a3b83d;
  border-radius: 18px;
  width: min(430px, 100vw - 52px);
  padding: 12px;
  transition: opacity .18s, transform .18s, visibility .18s;
  position: absolute;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%)translateX(-8px);
  box-shadow: 0 18px 32px #0f172a2e, 0 6px 16px #0f172a1f;
}

.agent-dock-ask-menu-panel.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%)translateX(0);
}

.agent-dock-ask-menu-header {
  flex-direction: column;
  gap: 3px;
  margin-bottom: 10px;
  display: flex;
}

.agent-dock-ask-menu-title {
  color: #0f172a;
  font-size: .8rem;
  font-weight: 800;
}

.agent-dock-ask-menu-subtitle {
  color: #64748b;
  font-size: .64rem;
  font-weight: 600;
  line-height: 1.35;
}

.agent-dock-ask-tree {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.agent-dock-ask-branch {
  gap: 8px;
  padding-left: 18px;
  display: grid;
  position: relative;
}

.agent-dock-ask-branch:before {
  content: "";
  background: linear-gradient(180deg, var(--agent-dock-accent-start), #94a3b824);
  opacity: .72;
  border-radius: 999px;
  width: 2px;
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 5px;
}

.agent-dock-ask-branch-label {
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #334155;
  font-size: .66rem;
  font-weight: 800;
  position: relative;
}

.agent-dock-ask-branch-label:before {
  content: "";
  background: var(--agent-dock-accent-start);
  border-radius: 999px;
  width: 8px;
  height: 2px;
  position: absolute;
  top: 50%;
  left: -13px;
  transform: translateY(-50%);
}

.agent-dock-ask-leaves {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.agent-dock-ask-leaf {
  color: #0f172a;
  cursor: pointer;
  background: #ffffffdb;
  border: 1px solid #94a3b83d;
  border-radius: 999px;
  padding: 7px 11px;
  font-size: .69rem;
  font-weight: 700;
  line-height: 1.2;
  transition: transform .18s, box-shadow .18s, border-color .18s, background .18s;
  box-shadow: 0 6px 14px #0f172a14;
}

.agent-dock-ask-leaf:hover {
  background: #fffffff0;
  border-color: #3b82f647;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px #0f172a1f;
}

.ask-connect-container .button-container {
  align-items: center;
  gap: 5px;
  display: flex;
}

.agent-button {
  cursor: pointer;
  background: radial-gradient(circle at top left, #ffffff2e, transparent 55%), linear-gradient(135deg, var(--agent-dock-accent-start) 0%, var(--agent-dock-accent-end) 100%);
  color: #fff;
  border: 1px solid #ffffff47;
  border-radius: 14px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  min-width: 98px;
  min-height: 50px;
  padding: .44rem .8rem .4rem;
  transition: transform .25s, box-shadow .25s, filter .25s;
  display: flex;
  box-shadow: inset 0 1px #ffffff38, 0 13px 26px #0f172a2e, 0 5px 14px #0f172a21;
}

.agent-button:hover {
  filter: saturate(1.06);
  transform: translateY(-3px);
  box-shadow: inset 0 1px #ffffff47, 0 16px 30px #0f172a38, 0 8px 16px #0f172a26;
}

.agent-button .button-icon {
  background: #ffffff29;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  display: inline-flex;
  box-shadow: inset 0 1px #ffffff38;
}

.agent-button .button-icon i {
  color: #fff;
  font-size: .92rem;
}

.agent-button .button-text {
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  font-size: .6rem;
  font-weight: 700;
}

.ask-secondary-row {
  gap: 5px;
  display: flex;
}

.ask-connect-container .ask-secondary-button {
  border-radius: 9px;
  min-width: 32px;
  min-height: 32px;
  padding: .2rem;
}

.ask-connect-container .ask-secondary-button .button-icon i {
  font-size: .8rem;
}

.ask-connect-container .ask-secondary-button .button-text {
  font-size: .5rem;
}

.ask-highlight-button {
  cursor: pointer;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 38px;
  min-height: 38px;
  padding: .25rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  box-shadow: 0 4px 12px #667eea33, 0 2px 6px #0000001a;
}

.ask-highlight-button:hover {
  background: linear-gradient(135deg, #7c8ff0 0%, #8a5fb8 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px #667eea4d, 0 3px 8px #00000026;
}

.ask-highlight-button:active {
  transform: translateY(0);
}

.ask-highlight-button.active {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
  box-shadow: 0 4px 12px #4caf5033, 0 2px 6px #0000001a;
}

.ask-highlight-button.mindmap-voice-active, .agent-button.mindmap-voice-active {
  background: linear-gradient(135deg, #1e88ff 0%, #00c2ff 100%);
  animation: 1.4s ease-in-out infinite microphonePulse;
  box-shadow: 0 0 0 2px #1e88ff73, 0 8px 20px #1e88ff59;
}

.ask-highlight-button .button-icon {
  margin-bottom: 2px;
}

.ask-highlight-button .button-icon i {
  color: #fff;
  filter: drop-shadow(0 1px 2px #0003);
  font-size: .95rem;
}

.ask-highlight-button .button-text {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-shadow: 0 1px 2px #0003;
  font-size: .6rem;
  font-weight: 600;
}

.connect-button {
  cursor: pointer;
  background: linear-gradient(135deg, #4a90e2 0%, #357abd 100%);
  border: none;
  border-radius: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 38px;
  min-height: 38px;
  padding: .25rem;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: relative;
  box-shadow: 0 4px 12px #4a90e233, 0 2px 6px #0000001a;
}

.connect-button:hover {
  background: linear-gradient(135deg, #5ba0f2 0%, #4682b4 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px #4a90e24d, 0 3px 8px #00000026;
}

.connect-button:active {
  transform: translateY(0);
}

.connect-button.enabled {
  background: linear-gradient(135deg, #00b894 0%, #00cec9 100%);
  box-shadow: 0 4px 12px #00b89433, 0 2px 6px #0000001a;
}

.connect-button .button-icon {
  margin-bottom: 2px;
}

.connect-button .button-icon i {
  color: #fff;
  filter: drop-shadow(0 1px 2px #0003);
  font-size: .95rem;
}

.connect-button .button-text {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-shadow: 0 1px 2px #0003;
  font-size: .6rem;
  font-weight: 600;
}

@media (width <= 768px) {
  .ask-highlight-button, .connect-button {
    min-width: 35px;
    min-height: 35px;
    padding: .2rem;
  }

  .ask-highlight-button .button-icon i, .connect-button .button-icon i {
    font-size: .9rem;
  }

  .ask-highlight-button .button-text, .connect-button .button-text {
    font-size: .55rem;
  }

  .ask-connect-container .button-container {
    gap: 6px;
  }
}

.ask-highlight-floating-button {
  cursor: pointer;
  z-index: 1000;
  backdrop-filter: blur(10px);
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: 3px solid #fff3;
  border-radius: 50%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: fixed;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  box-shadow: 0 8px 25px #667eea4d, 0 4px 12px #00000026;
}

.ask-highlight-floating-button:hover {
  background: linear-gradient(135deg, #7c8ff0 0%, #8a5fb8 100%);
  transform: translateY(-50%)scale(1.1);
  box-shadow: 0 12px 35px #667eea66, 0 6px 18px #0003;
}

.ask-highlight-floating-button:active {
  transform: translateY(-50%)scale(.95);
}

.ask-highlight-floating-button.active {
  background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
  box-shadow: 0 8px 25px #4caf504d, 0 4px 12px #00000026;
}

.ask-highlight-floating-button i {
  color: #fff;
  filter: drop-shadow(0 2px 4px #0003);
  margin-bottom: 4px;
  font-size: 1.8rem;
}

.ask-label {
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px #0000004d;
  font-size: .75rem;
  font-weight: 600;
}

@media (width <= 768px) {
  .ask-highlight-floating-button {
    width: 60px;
    height: 60px;
    left: 20px;
  }

  .ask-highlight-floating-button i {
    margin-bottom: 2px;
    font-size: 1.4rem;
  }

  .ask-label {
    font-size: .65rem;
  }

  .connection-thickness-tooltip {
    gap: 10px;
    min-width: 180px;
    padding: 10px 14px;
  }

  #connection-thickness-slider {
    width: 100px;
  }

  .connection-thickness-tooltip label, .description-label {
    font-size: .7rem;
  }

  #connection-descriptor-input {
    padding: 6px 10px;
    font-size: .8rem;
  }

  #connection-descriptor-size {
    width: 50px;
    padding: 4px 6px;
  }
}

.ask-action-panel {
  backdrop-filter: blur(10px);
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  background: linear-gradient(135deg, #fffffff2, #f9fafbf2);
  border: 1px solid #0000000f;
  border-radius: 14px;
  padding: 10px 14px;
  transition: bottom .22s cubic-bezier(.4, 0, .2, 1), transform .22s cubic-bezier(.4, 0, .2, 1), opacity .22s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .22s;
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%)translateY(12px);
  box-shadow: 0 10px 25px #0000001a, 0 6px 12px #00000014, inset 0 0 0 1px #fff9;
}

.ask-action-panel.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
  transform: translateX(-50%)translateY(0);
}

.ask-action-panel, .ask-action-panel * {
  user-select: none;
  -webkit-touch-callout: none;
}

.ask-action-inner {
  align-items: flex-start;
  gap: 16px;
  display: flex;
}

.ask-option {
  color: #111827;
  cursor: pointer;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  background: #fff;
  border: 1px solid #0000000f;
  border-radius: 10px;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.1;
  transition: transform .18s, box-shadow .18s, background .18s;
  display: inline-flex;
  box-shadow: 0 4px 10px #0000000f;
}

.ask-option .icon {
  justify-content: center;
  align-items: center;
  width: 22px;
  height: 22px;
  display: inline-flex;
}

.ask-option .label {
  white-space: nowrap;
}

.ask-option:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px #0000001a;
}

.ask-option.selected {
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  border-color: #3b82f68c;
  transform: none;
  box-shadow: 0 0 0 3px #3b82f647, inset 0 1px #ffffffb3, 0 4px 10px #0000000f;
}

.fullspace-option.selected {
  background: linear-gradient(135deg, #e9e7ff, #f6f5ff);
  border-color: #6366f18c;
  box-shadow: 0 0 0 3px #6366f147, inset 0 1px #ffffffb3, 0 4px 10px #0000000f;
}

.draw-option {
  background: linear-gradient(135deg, #e0f2fe, #f0f9ff);
}

.fullspace-option {
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
}

.right-option {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  display: flex;
}

.mindmap-badge {
  color: #16a34a;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  background: #22c55e12;
  border: 1px solid #16a34a33;
  border-radius: 9999px;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 700;
  display: none;
  box-shadow: inset 0 0 0 1px #16a34a22;
}

.mindmap-badge i {
  color: #16a34a;
}

@media (width <= 768px) {
  .ask-action-inner {
    gap: 10px;
  }

  .ask-option {
    padding: 8px 10px;
    font-size: .85rem;
  }

  .ask-option .icon {
    width: 20px;
    height: 20px;
  }
}

.screen-share-overlay {
  backdrop-filter: blur(8px);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  background: #000000b3;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: all .3s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.screen-share-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.screen-share-content {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  padding: 2rem;
  transition: transform .3s;
  transform: scale(.9);
  box-shadow: 0 20px 40px #0003;
}

.screen-share-overlay.visible .screen-share-content {
  transform: scale(1);
}

.screen-share-icon {
  margin-bottom: 1rem;
}

.screen-share-icon i {
  color: #667eea;
  font-size: 3rem;
}

.screen-share-content h3 {
  color: #333;
  margin: 0 0 1rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.screen-share-content p {
  color: #666;
  margin: 0 0 1.5rem;
  line-height: 1.5;
}

.screen-share-spinner {
  border: 4px solid #f3f3f3;
  border-top-color: #667eea;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  animation: 1s linear infinite spin;
}

.ask-fullspace-input-panel {
  backdrop-filter: blur(10px);
  z-index: 1110;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: linear-gradient(135deg, #fffffff2, #f9fafbf2);
  border: 1px solid #0000000f;
  border-radius: 12px;
  padding: 8px 12px;
  transition: transform .22s cubic-bezier(.4, 0, .2, 1), opacity .22s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .22s;
  position: fixed;
  bottom: 140px;
  left: 50%;
  transform: translateX(-50%)translateY(12px);
  box-shadow: 0 10px 25px #0000001a, 0 6px 12px #00000014, inset 0 0 0 1px #fff9;
}

.ask-fullspace-input-panel.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
  transform: translateX(-50%)translateY(0);
}

.ask-fullspace-input-panel .sem-ob-input-wrap {
  align-items: center;
  gap: 6px;
  display: flex;
}

.ask-fullspace-input-panel .sem-ob-input {
  background: #fff;
  border: 1px solid #00000014;
  border-radius: 8px;
  flex: auto;
  min-width: 220px;
  max-width: min(60vw, 560px);
  padding: 8px 10px;
  font-size: .95rem;
}

.ask-fullspace-input-panel .sem-ob-btn, .ask-fullspace-input-panel .sem-ob-mic {
  cursor: pointer;
  background: #fff;
  border: 1px solid #0000000f;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  display: inline-flex;
  box-shadow: 0 2px 6px #0000000f;
}

.ask-fullspace-input-panel .sem-ob-btn:hover, .ask-fullspace-input-panel .sem-ob-mic:hover {
  background: #f9fafb;
}

.ask-fullspace-input-panel .sem-ob-mic i {
  font-size: 14px;
}

.ask-fullspace-input-panel .sem-ob-mic.recording {
  color: #ff4757;
  background: #ff47574d;
  animation: 1.5s ease-in-out infinite recordingPulse;
}

.ask-fullspace-input-panel .sem-ob-mic.recording i {
  animation: 1s ease-in-out infinite microphonePulse;
}

.ask-fullspace-input-panel .sem-ob-mic.processing {
  color: #6faaff;
  background: #6faaff33;
}

@keyframes recordingPulse {
  0% {
    box-shadow: 0 0 #ff475766;
  }

  70% {
    box-shadow: 0 0 0 10px #ff475700;
  }

  100% {
    box-shadow: 0 0 #ff475700;
  }
}

@keyframes microphonePulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

.outer-container.mindmap-voice-transcript-active {
  box-shadow: none;
  background-color: #0000;
  overflow: visible;
}

.outer-container.mindmap-voice-transcript-active #simple-controls-container {
  pointer-events: none;
  transition: opacity .25s, filter .25s;
}

.outer-container.mindmap-voice-transcript-active #simple-controls-container > :not(.mindmap-voice-agent-shell):not(.mindmap-voice-agent-minimized) {
  opacity: .12;
  filter: blur(1.1px);
  transition: opacity .25s, filter .25s;
}

.outer-container.mindmap-voice-transcript-active .mindmap-voice-agent-shell--visible .mindmap-voice-agent-card {
  opacity: .22;
  filter: saturate(.8) blur(.55px);
  transform: translateY(-10px)scale(.986);
}

.mindmap-voice-hidden {
  display: none !important;
}

.mindmap-voice-agent-shell {
  left: 50%;
  bottom: calc(100% + 8px + var(--mindmap-voice-agent-tab-lift, 0px));
  transform: translateX(-50%) translateY(calc(12px + var(--mindmap-voice-agent-shift, 0px)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 6;
  --mindmap-agent-accent: #2563eb;
  --mindmap-agent-accent-soft: #2563eb38;
  width: min(78vw, 620px);
  max-width: min(100vw - 24px, 620px);
  transition: opacity .25s, transform .25s;
  position: absolute;
}

.mindmap-voice-agent-shell[data-phase="idle"], .mindmap-voice-agent-minimized[data-phase="idle"] {
  --mindmap-agent-accent: #64748b;
  --mindmap-agent-accent-soft: #64748b33;
}

.mindmap-voice-agent-shell[data-phase="starting"], .mindmap-voice-agent-minimized[data-phase="starting"] {
  --mindmap-agent-accent: #6366f1;
  --mindmap-agent-accent-soft: #6366f13d;
}

.mindmap-voice-agent-shell[data-phase="running"], .mindmap-voice-agent-minimized[data-phase="running"] {
  --mindmap-agent-accent: #2563eb;
  --mindmap-agent-accent-soft: #2563eb38;
}

.mindmap-voice-agent-shell[data-phase="thinking"], .mindmap-voice-agent-minimized[data-phase="thinking"] {
  --mindmap-agent-accent: #d97706;
  --mindmap-agent-accent-soft: #d977063d;
}

.mindmap-voice-agent-shell[data-phase="acting"], .mindmap-voice-agent-minimized[data-phase="acting"] {
  --mindmap-agent-accent: #0284c7;
  --mindmap-agent-accent-soft: #0284c73d;
}

.mindmap-voice-agent-shell[data-phase="seeing"], .mindmap-voice-agent-minimized[data-phase="seeing"] {
  --mindmap-agent-accent: #0d9488;
  --mindmap-agent-accent-soft: #0d94883d;
}

.mindmap-voice-agent-shell[data-phase="completed"], .mindmap-voice-agent-minimized[data-phase="completed"] {
  --mindmap-agent-accent: #059669;
  --mindmap-agent-accent-soft: #0596693d;
}

.mindmap-voice-agent-shell[data-phase="stopping"], .mindmap-voice-agent-shell[data-phase="stopped"], .mindmap-voice-agent-minimized[data-phase="stopping"], .mindmap-voice-agent-minimized[data-phase="stopped"] {
  --mindmap-agent-accent: #b45309;
  --mindmap-agent-accent-soft: #b453093d;
}

.mindmap-voice-agent-shell[data-phase="failed"], .mindmap-voice-agent-minimized[data-phase="failed"] {
  --mindmap-agent-accent: #dc2626;
  --mindmap-agent-accent-soft: #dc26263d;
}

.mindmap-voice-agent-shell--visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(var(--mindmap-voice-agent-shift, 0px));
  pointer-events: auto;
}

.mindmap-voice-agent-minimized {
  --mindmap-agent-tab-visible-y: -8px;
  left: 50%;
  bottom: calc(100% - 4px + var(--mindmap-voice-agent-tab-lift, 0px));
  background: linear-gradient(180deg, #fffffffa, #f8fafcf5), radial-gradient(circle at 50% 0%, var(--mindmap-agent-accent-soft), transparent 50%);
  backdrop-filter: blur(16px);
  cursor: pointer;
  isolation: isolate;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 5;
  border: 1px solid #94a3b83d;
  border-radius: 14px 14px 10px 10px;
  align-items: center;
  gap: 10px;
  width: clamp(138px, 18vw, 210px);
  min-height: 34px;
  padding: 8px 14px 9px;
  transition: opacity .22s, transform .22s, box-shadow .22s, border-color .22s;
  display: flex;
  position: absolute;
  transform: translateX(-50%)translateY(6px);
}

.mindmap-voice-agent-minimized--visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(var(--mindmap-agent-tab-visible-y));
}

.mindmap-voice-agent-minimized:hover {
  transform: translateX(-50%) translateY(calc(var(--mindmap-agent-tab-visible-y)  - 1px));
  box-shadow: 0 13px 24px #0f172a29, 0 4px 12px #0f172a1a;
}

.mindmap-voice-agent-minimized:before {
  content: "";
  background: linear-gradient(90deg, var(--mindmap-agent-accent), #ffffffe0);
  opacity: .96;
  pointer-events: none;
  border-radius: 999px;
  height: 3px;
  position: absolute;
  top: 0;
  left: 12px;
  right: 12px;
}

.mindmap-voice-agent-minimized:after {
  content: none;
}

.mindmap-voice-agent-minimized-copy {
  flex-direction: column;
  flex: auto;
  gap: 1px;
  min-width: 0;
  display: flex;
}

.mindmap-voice-agent-minimized-text {
  color: #0f172a;
  letter-spacing: .14em;
  text-transform: uppercase;
  justify-content: center;
  align-items: center;
  min-width: 0;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.15;
  display: inline-flex;
}

.mindmap-voice-agent-minimized-text:before {
  display: none;
}

.mindmap-voice-agent-minimized-detail {
  text-align: center;
  color: #64748b;
  min-width: 0;
  font-size: .58rem;
  font-weight: 600;
  line-height: 1.2;
  display: none;
}

.mindmap-voice-agent-minimized-detail--visible {
  display: block;
}

.mindmap-voice-agent-minimized-indicator {
  color: #334155;
  background: #0f172a0f;
  border-radius: 999px;
  flex: none;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  display: inline-flex;
}

.mindmap-voice-agent-minimized-indicator i {
  font-size: .64rem;
}

.mindmap-voice-agent-minimized[data-phase="thinking"] .mindmap-voice-agent-minimized-indicator {
  animation: 1.1s ease-in-out infinite mindmapVoiceStatusPulse;
}

.mindmap-voice-agent-minimized[data-phase="starting"]:before, .mindmap-voice-agent-minimized[data-phase="running"]:before, .mindmap-voice-agent-minimized[data-phase="thinking"]:before, .mindmap-voice-agent-minimized[data-phase="acting"]:before, .mindmap-voice-agent-minimized[data-phase="seeing"]:before {
  background-size: 180% 100%;
  animation: 1.6s linear infinite mindmapVoiceAgentBarSweep;
}

.mindmap-voice-agent-minimized--attention {
  border-color: var(--mindmap-agent-accent-soft);
  box-shadow: 0 0 0 3px var(--mindmap-agent-accent-soft), 0 12px 24px #0f172a29;
  animation: 1.8s ease-in-out infinite mindmapVoiceAgentAttentionPulse;
}

.mindmap-voice-agent-card {
  border: 1px solid var(--mindmap-agent-accent-soft);
  backdrop-filter: blur(8px);
  background: linear-gradient(172deg, #fffffff7, #ffffffe6), radial-gradient(circle at 12% -12%, #3b82f62e, #0000 44%);
  border-radius: 16px;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  padding: 11px 12px 10px;
  transition: opacity .24s, transform .24s, filter .24s, border-color .24s, box-shadow .24s;
  display: flex;
  position: relative;
  box-shadow: 0 18px 30px #0f172a2e, inset 0 0 0 1px #ffffff38;
}

.mindmap-voice-agent-card:before {
  content: "";
  background: linear-gradient(90deg, var(--mindmap-agent-accent), #ffffffd9);
  opacity: .94;
  pointer-events: none;
  border-radius: 999px;
  height: 3px;
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
}

.mindmap-voice-agent-header {
  letter-spacing: .01em;
  color: #1f2937;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  font-size: .76rem;
  font-weight: 700;
  display: flex;
}

.mindmap-voice-agent-header-controls {
  align-items: center;
  gap: 8px;
  display: flex;
}

.mindmap-voice-agent-tools {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.05fr) .88fr .88fr;
  gap: 8px;
  display: grid;
}

.mindmap-voice-agent-tools:empty, .mindmap-voice-agent-surface-panels:empty {
  display: none;
}

.mindmap-voice-agent-tool {
  background: linear-gradient(180deg, #fffffff0, #f1f5f9eb), linear-gradient(135deg, var(--mindmap-agent-accent-soft), #fff0);
  color: #0f172a;
  cursor: pointer;
  border: 1px solid #94a3b847;
  border-radius: 14px;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 12px;
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s, color .2s;
  display: flex;
  position: relative;
  box-shadow: inset 0 1px #ffffffc7, 0 10px 20px #0f172a1a;
}

.mindmap-voice-agent-tool:hover {
  border-color: #64748b66;
  transform: translateY(-1px);
  box-shadow: inset 0 1px #ffffffd6, 0 14px 24px #0f172a21;
}

.mindmap-voice-agent-tool-icon {
  width: 30px;
  height: 30px;
  color: var(--mindmap-agent-accent);
  background: #ffffffc7;
  border-radius: 11px;
  flex: none;
  justify-content: center;
  align-items: center;
  display: inline-flex;
  box-shadow: inset 0 1px #ffffffc7;
}

.mindmap-voice-agent-tool-icon i {
  font-size: .8rem;
}

.mindmap-voice-agent-tool-copy {
  flex-direction: column;
  flex: auto;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.mindmap-voice-agent-tool-label {
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1.1;
}

.mindmap-voice-agent-tool-hint {
  color: #64748b;
  font-size: .62rem;
  font-weight: 600;
  line-height: 1.25;
}

.mindmap-voice-agent-tool--primary {
  color: #fff;
  background: linear-gradient(#3b82f6, #2563eb);
  border-color: #2563eb4d;
  box-shadow: inset 0 1px #ffffff29, 0 14px 24px #2563eb42;
}

.mindmap-voice-agent-tool--primary .mindmap-voice-agent-tool-icon {
  color: #fff;
  background: #ffffff2e;
}

.mindmap-voice-agent-tool--primary .mindmap-voice-agent-tool-hint {
  color: #dbeafef0;
}

.mindmap-voice-agent-tool--secondary {
  background: linear-gradient(#fffffff5, #eff6ffeb), linear-gradient(135deg, #3b82f629, #fff0);
}

.mindmap-voice-agent-tool--utility, .mindmap-voice-agent-tool--ghost {
  padding-inline: 11px;
}

.mindmap-voice-agent-tool--ask {
  background: linear-gradient(#fffffff7, #f0f9fff0), linear-gradient(135deg, #0ea5e924, #fff0);
  gap: 8px;
}

.mindmap-voice-agent-tool--ask .mindmap-voice-agent-tool-icon {
  border-radius: 10px;
  width: 26px;
  height: 26px;
}

.mindmap-voice-agent-tool--utility .mindmap-voice-agent-tool-label, .mindmap-voice-agent-tool--ghost .mindmap-voice-agent-tool-label {
  font-size: .66rem;
}

.mindmap-voice-agent-tool--ask .mindmap-voice-agent-tool-copy {
  gap: 0;
}

.mindmap-voice-agent-tool--ask .mindmap-voice-agent-tool-label {
  letter-spacing: .01em;
  text-transform: none;
  text-wrap: balance;
  font-size: .62rem;
  line-height: 1.16;
}

.mindmap-voice-agent-tool--ask .mindmap-voice-agent-tool-hint {
  display: none;
}

.mindmap-voice-agent-tool--active {
  border-color: var(--mindmap-agent-accent);
  box-shadow: 0 0 0 3px var(--mindmap-agent-accent-soft), 0 16px 28px #0f172a29;
}

.mindmap-voice-agent-tool--primary.mindmap-voice-agent-tool--active {
  animation: 1.2s ease-in-out infinite mindmapVoiceStatusPulse;
}

.mindmap-voice-agent-surface-panels {
  gap: 8px;
  display: grid;
}

.mindmap-voice-agent-surface-panel {
  background: linear-gradient(180deg, #fffffff2, #f8fafceb), linear-gradient(135deg, var(--mindmap-agent-accent-soft), #fff0);
  border: 1px solid #94a3b838;
  border-radius: 15px;
  padding: 12px;
  display: none;
  box-shadow: inset 0 1px #ffffffb3, 0 12px 22px #0f172a17;
}

.mindmap-voice-agent-surface-panel.show {
  display: block;
}

.mindmap-voice-agent-jsonl-modal {
  z-index: 120000;
  backdrop-filter: blur(8px);
  background: #0f172a5c;
  justify-content: center;
  align-items: center;
  padding: 24px;
  display: none;
  position: fixed;
  inset: 0;
}

.mindmap-voice-agent-jsonl-modal.show {
  display: flex;
}

.mindmap-voice-agent-jsonl-dialog {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 12px;
  width: min(1100px, 94vw);
  max-height: min(82vh, 920px);
  display: grid;
}

.mindmap-voice-agent-jsonl-dialog-head {
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 6px;
  display: flex;
}

.mindmap-voice-agent-jsonl-dialog-title {
  letter-spacing: .01em;
  color: #f8fafc;
  font-size: .88rem;
  font-weight: 800;
}

.mindmap-voice-agent-jsonl-close {
  color: #f8fafc;
  cursor: pointer;
  background: #0f172a6b;
  border: 1px solid #ffffff38;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  box-shadow: 0 12px 22px #0f172a3d;
}

.mindmap-voice-agent-jsonl-close:hover {
  background: #0f172a99;
}

.mindmap-voice-agent-jsonl-panel {
  gap: 10px;
  max-height: min(74vh, 860px);
  padding: 12px;
  display: grid;
  overflow: hidden;
  box-shadow: inset 0 1px #ffffffb3, 0 20px 40px #0f172a38;
}

.mindmap-voice-agent-status {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
  display: flex;
}

.mindmap-voice-agent-status-text {
  color: #0f172a;
  align-items: center;
  gap: 8px;
  min-width: 0;
  line-height: 1.15;
  display: inline-flex;
}

.mindmap-voice-agent-status-text:before {
  content: "";
  background: var(--mindmap-agent-accent);
  width: 9px;
  height: 9px;
  box-shadow: 0 0 0 4px var(--mindmap-agent-accent-soft);
  border-radius: 999px;
  flex: none;
}

.mindmap-voice-agent-status-detail {
  color: #64748b;
  max-width: min(56vw, 360px);
  margin-left: 17px;
  font-size: .67rem;
  font-weight: 600;
  line-height: 1.25;
  display: none;
}

.mindmap-voice-agent-status-detail--visible {
  display: block;
}

.mindmap-voice-agent-shell[data-phase="thinking"] .mindmap-voice-agent-status-text:before {
  animation: 1.1s ease-in-out infinite mindmapVoiceStatusPulse;
}

.mindmap-voice-agent-shell[data-phase="thinking"] .mindmap-voice-agent-status-detail--visible:after {
  content: "...";
  vertical-align: baseline;
  width: 1.2em;
  margin-left: 1px;
  animation: 1.2s steps(4, end) infinite mindmapVoiceThinkingDots;
  display: inline-block;
  overflow: hidden;
}

.mindmap-voice-agent-stop {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(#ef4444, #dc2626);
  border: 1px solid #b91c1c59;
  border-radius: 999px;
  padding: 4px 11px;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.15;
  transition: transform .2s, box-shadow .2s;
  box-shadow: 0 8px 14px #ef444445;
}

.mindmap-voice-agent-stop:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px #ef444440;
}

.mindmap-voice-agent-stop:disabled {
  opacity: .45;
  cursor: default;
  box-shadow: none;
  background: #94a3b842;
  border-color: #94a3b84d;
}

.mindmap-voice-agent-trace, .mindmap-voice-agent-jsonl {
  color: #334155;
  cursor: pointer;
  background: #f8fafce0;
  border: 1px solid #94a3b852;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.15;
  transition: transform .2s, box-shadow .2s, border-color .2s, background .2s, color .2s;
  box-shadow: 0 8px 16px #0f172a1a;
}

.mindmap-voice-agent-trace:hover, .mindmap-voice-agent-jsonl:hover:not(:disabled) {
  border-color: #64748b73;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px #0f172a24;
}

.mindmap-voice-agent-trace--active {
  color: #1d4ed8;
  background: #dbeafee0;
  border-color: #2563eb59;
}

.mindmap-voice-agent-jsonl--active {
  color: #0f766e;
  background: #ecfeffe6;
  border-color: #0e749059;
}

.mindmap-voice-agent-jsonl--hidden {
  display: none;
}

.mindmap-voice-agent-jsonl:disabled {
  opacity: .48;
  cursor: default;
  box-shadow: none;
}

.mindmap-voice-agent-minimize {
  color: #334155;
  cursor: pointer;
  background: #f8fafce6;
  border: 1px solid #94a3b857;
  border-radius: 10px;
  width: 32px;
  min-width: 32px;
  height: 32px;
  min-height: 32px;
  padding: 0;
  transition: transform .2s, box-shadow .2s, border-color .2s;
  box-shadow: 0 8px 16px #0f172a1f;
}

.mindmap-voice-agent-minimize:hover {
  border-color: #64748b73;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px #0f172a29;
}

.mindmap-voice-agent-log {
  color: #334155;
  background: #f8fafcc2;
  border: 1px solid #94a3b833;
  border-radius: 12px;
  flex-direction: column;
  gap: 6px;
  max-height: 26vh;
  padding: 7px;
  font-size: .69rem;
  display: flex;
  overflow-y: auto;
}

.mindmap-voice-agent-meta {
  color: #334155;
  background: #f8fafcb8;
  border: 1px solid #94a3b83d;
  border-radius: 11px;
  gap: 4px;
  padding: 7px 10px;
  font-size: .68rem;
  display: grid;
}

.mindmap-voice-agent-meta--hidden {
  display: none;
}

.mindmap-voice-agent-meta .agent-meta-line {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}

.mindmap-voice-agent-log .agent-log-line {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  background: #ffffffbd;
  border: 1px solid #94a3b838;
  border-radius: 9px;
  padding: 7px 8px;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  line-height: 1.32;
}

.mindmap-voice-agent-log .agent-log-line--event {
  white-space: normal;
  gap: 6px;
  font-family: Segoe UI, system-ui, sans-serif;
  display: grid;
}

.mindmap-voice-agent-log .agent-log-line--divider {
  text-align: center;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #475569eb;
  background: #e2e8f0b3;
  border-style: dashed;
  font-family: Segoe UI, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
}

.mindmap-voice-agent-log .agent-log-line--jsonl-link {
  cursor: pointer;
}

.mindmap-voice-agent-log .agent-log-line--jsonl-link:hover {
  border-color: #3b82f652;
  box-shadow: inset 0 1px #ffffffbf, 0 10px 20px #2563eb14;
}

.mindmap-voice-agent-log .agent-log-line--event[data-source="planner"] {
  background: #fff7edd1;
  border-color: #d977063d;
}

.mindmap-voice-agent-log .agent-log-line--event[data-source="user"] {
  background: #f0f9ffe0;
  border-color: #0891b238;
}

.mindmap-voice-agent-log .agent-log-line--event[data-source="child"] {
  background: #eff6ffd6;
  border-color: #2563eb3d;
}

.mindmap-voice-agent-log .agent-log-line--event[data-role="artifact_executor"] {
  background: #f0fdfad6;
  border-color: #0d94883d;
}

.mindmap-voice-agent-log .agent-log-line--event[data-role="tutor_evaluator"] {
  background: #ecfdf5d6;
  border-color: #0596693d;
}

.mindmap-voice-agent-log .agent-log-line--event[data-status="stale"], .mindmap-voice-agent-log .agent-log-line--event[data-status="skipped"] {
  background: #fffbebdb;
  border-color: #b4530947;
}

.mindmap-voice-agent-log .agent-log-line--event[data-status="failed"] {
  background: #fef2f2e0;
  border-color: #dc262647;
}

.agent-log-badges {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.agent-log-badge {
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #475569;
  background: #ffffffc2;
  border: 1px solid #94a3b847;
  border-radius: 999px;
  align-items: center;
  padding: 2px 7px;
  font-size: .59rem;
  font-weight: 700;
  display: inline-flex;
}

.agent-log-badge--source {
  color: #1e293b;
  background: #0f172a0d;
}

.agent-log-badge--role {
  color: #1d4ed8;
  background: #2563eb17;
}

.agent-log-badge--status {
  background: #64748b17;
}

.agent-log-badge--batch {
  color: #0f766e;
  background: #0e74901a;
}

.agent-log-summary {
  color: #1e293b;
  user-select: text;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.38;
}

.agent-log-details {
  border-top: 1px solid #94a3b829;
  gap: 4px;
  padding-top: 5px;
  display: grid;
}

.mindmap-voice-agent-shell[data-trace="compact"] .agent-log-details {
  display: none;
}

.mindmap-voice-agent-jsonl-toolbar {
  gap: 10px;
  display: grid;
}

.mindmap-voice-agent-jsonl-runs {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

.mindmap-voice-agent-jsonl-controls {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.mindmap-voice-agent-jsonl-run, .mindmap-voice-agent-jsonl-reload {
  color: #0f172a;
  cursor: pointer;
  background: #ffffffd6;
  border: 1px solid #94a3b83d;
  border-radius: 12px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}

.mindmap-voice-agent-jsonl-run {
  text-align: left;
  min-width: 132px;
  padding: 8px 10px;
  box-shadow: 0 8px 18px #0f172a14;
}

.mindmap-voice-agent-jsonl-run:hover, .mindmap-voice-agent-jsonl-reload:hover {
  border-color: #64748b61;
  transform: translateY(-1px);
  box-shadow: 0 12px 20px #0f172a1f;
}

.mindmap-voice-agent-jsonl-run[data-active="true"] {
  background: #ecfeffe0;
  border-color: #0e749052;
}

.mindmap-voice-agent-jsonl-run-label {
  color: #0f172a;
  font-size: .68rem;
  font-weight: 800;
  line-height: 1.15;
}

.mindmap-voice-agent-jsonl-run-meta {
  color: #64748b;
  margin-top: 3px;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: .58rem;
  font-weight: 600;
  line-height: 1.3;
}

.mindmap-voice-agent-jsonl-select, .mindmap-voice-agent-jsonl-tail, .mindmap-voice-agent-jsonl-reload {
  min-height: 34px;
  padding: 6px 10px;
  font-size: .66rem;
  font-weight: 700;
}

.mindmap-voice-agent-jsonl-select, .mindmap-voice-agent-jsonl-tail {
  color: #334155;
  background: #ffffffe6;
  border: 1px solid #94a3b83d;
  border-radius: 10px;
}

.mindmap-voice-agent-jsonl-tail {
  width: 82px;
}

.mindmap-voice-agent-jsonl-meta {
  color: #64748b;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: .62rem;
  line-height: 1.35;
}

.mindmap-voice-agent-jsonl-inspector {
  gap: 8px;
  max-height: min(58vh, 640px);
  padding-right: 2px;
  display: grid;
  overflow-y: auto;
}

.mindmap-voice-agent-jsonl-empty {
  color: #64748b;
  background: #f8fafcbd;
  border: 1px dashed #94a3b852;
  border-radius: 12px;
  padding: 12px;
  font-size: .67rem;
  line-height: 1.4;
}

.mindmap-voice-agent-jsonl-empty--error {
  color: #991b1b;
  background: #fef2f2db;
  border-color: #dc262647;
}

.mindmap-voice-agent-jsonl-entry {
  user-select: text;
  background: #ffffffd1;
  border: 1px solid #94a3b833;
  border-radius: 12px;
  gap: 6px;
  padding: 10px;
  display: grid;
  box-shadow: inset 0 1px #ffffffbf;
}

.mindmap-voice-agent-jsonl-entry-head {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  display: flex;
}

.mindmap-voice-agent-jsonl-entry-line {
  color: #0f172a;
  font-size: .63rem;
  font-weight: 800;
  line-height: 1.2;
}

.mindmap-voice-agent-jsonl-entry-parse {
  color: #475569;
  letter-spacing: .05em;
  text-transform: uppercase;
  background: #0f172a0f;
  border-radius: 999px;
  align-items: center;
  padding: 2px 7px;
  font-size: .56rem;
  font-weight: 800;
  display: inline-flex;
}

.mindmap-voice-agent-jsonl-raw {
  color: #1e293b;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  background: #0f172a0a;
  border-radius: 10px;
  margin: 0;
  padding: 10px;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: .62rem;
  line-height: 1.42;
}

.agent-log-meta {
  color: #64748b;
  user-select: text;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: .6rem;
  line-height: 1.3;
}

.agent-log-detail {
  color: #475569;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  user-select: text;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: .63rem;
  line-height: 1.34;
}

.mindmap-voice-agent-actions {
  border-top: 1px solid #94a3b838;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
  padding-top: 9px;
  display: none;
}

.mindmap-voice-agent-shell--awaiting .mindmap-voice-agent-actions {
  display: flex;
}

.mindmap-voice-agent-ok, .mindmap-voice-agent-reply {
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 999px;
  padding: 6px 15px;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  transition: transform .2s, box-shadow .2s, opacity .2s;
}

.mindmap-voice-agent-ok {
  color: #0f172a;
  background: #0f172a0f;
  border-color: #64748b40;
  box-shadow: 0 8px 15px #0f172a1f;
}

.mindmap-voice-agent-reply {
  color: #fff;
  background: linear-gradient(#1e88ff, #0f73eb);
  box-shadow: 0 10px 20px #1e88ff4d;
}

.mindmap-voice-agent-ok:hover, .mindmap-voice-agent-reply:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 20px #0f172a2e;
}

.mindmap-voice-agent-shell[data-phase="failed"] .mindmap-voice-agent-card {
  border-color: #dc26264d;
}

.mindmap-voice-agent-shell[data-phase="completed"] .mindmap-voice-agent-card {
  border-color: #0596694d;
}

.mindmap-voice-agent-shell--listening .mindmap-voice-agent-card {
  opacity: .72;
  filter: saturate(.88);
  transform: translateY(-4px)scale(.992);
}

.mindmap-voice-agent-shell--transcript .mindmap-voice-agent-card {
  opacity: .22;
  filter: saturate(.8) blur(.55px);
  transform: translateY(-10px)scale(.986);
}

.mindmap-voice-transcript-shell {
  opacity: 0;
  pointer-events: none;
  z-index: 3;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  transition: opacity .25s, transform .25s;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%)translateY(8px);
}

.mindmap-voice-transcript-shell--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%)translateY(0);
}

.mindmap-voice-transcript-card {
  background: none;
  border: 1px solid #0000;
  border-radius: 16px;
  padding: 10px 14px;
  transition: background .25s, border-color .25s, box-shadow .25s;
}

.mindmap-voice-transcript-shell--settled .mindmap-voice-transcript-card {
  backdrop-filter: blur(6px);
  background: #fffffff5;
  border-color: #1e88ff38;
  box-shadow: 0 12px 28px #1e88ff29;
}

.mindmap-voice-transcript-context {
  letter-spacing: .02em;
  color: #1e40afdb;
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.25;
  display: none;
}

.mindmap-voice-transcript-context--visible {
  margin-bottom: 6px;
  display: block;
}

.mindmap-voice-transcript-input {
  resize: none;
  color: #1f2937;
  -webkit-text-fill-color: #1f2937;
  caret-color: #1f2937;
  background: none;
  border: none;
  outline: none;
  width: 100%;
  min-height: 1.4em;
  max-height: 55vh;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: .98rem;
  line-height: 1.4;
}

.mindmap-voice-transcript-input::placeholder {
  color: #1f293794;
  -webkit-text-fill-color: #1f293794;
}

.mindmap-voice-transcript-input--pulse {
  animation: .28s ease-out mindmapVoiceInputPulse;
}

.mindmap-voice-transcript-actions {
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.mindmap-voice-transcript-send {
  color: #fff;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  background: #1e88ff;
  border: 0;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  font-size: .95rem;
  font-weight: 600;
  transition: opacity .2s, transform .2s;
  display: inline-flex;
  transform: translateY(6px)scale(.98);
  box-shadow: 0 10px 20px #1e88ff33;
}

.mindmap-voice-transcript-cancel {
  color: #111827;
  cursor: pointer;
  pointer-events: none;
  opacity: 0;
  background: #1f293729;
  border: 1px solid #1f293738;
  border-radius: 999px;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  font-size: .95rem;
  font-weight: 600;
  transition: opacity .2s, transform .2s;
  display: inline-flex;
  transform: translateY(6px)scale(.98);
  box-shadow: 0 10px 20px #0f172a2e;
}

.mindmap-voice-transcript-shell--send .mindmap-voice-transcript-send, .mindmap-voice-transcript-shell--send .mindmap-voice-transcript-cancel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0)scale(1);
}

body.dark-mode .mindmap-voice-transcript-cancel {
  color: #fee2e2;
  background: #f8717138;
  border-color: #f871718c;
  box-shadow: 0 10px 20px #f8717147;
}

body.dark-mode .mindmap-voice-transcript-input {
  color: #e2e8f0;
  -webkit-text-fill-color: #e2e8f0;
  caret-color: #e2e8f0;
}

body.dark-mode .mindmap-voice-transcript-input::placeholder {
  color: #e2e8f0b3;
  -webkit-text-fill-color: #e2e8f0b3;
}

body.dark-mode .mindmap-voice-transcript-context {
  color: #bfdbfee6;
}

body.dark-mode .mindmap-voice-transcript-shell--settled .mindmap-voice-transcript-card {
  background: #0f172aeb;
  border-color: #94a3b859;
  box-shadow: 0 12px 28px #0f172a73;
}

body.dark-mode .mindmap-voice-agent-card {
  border-color: var(--mindmap-agent-accent-soft);
  background: linear-gradient(172deg, #0f172af0, #0f172ae6), radial-gradient(circle at 12% -12%, #1e88ff3d, #0000 44%);
  box-shadow: 0 18px 32px #0206179e, inset 0 0 0 1px #94a3b826;
}

body.dark-mode .mindmap-voice-agent-header {
  color: #e2e8f0;
}

body.dark-mode .mindmap-voice-agent-minimized {
  background: linear-gradient(180deg, #0f172af0, #0f172ae6), radial-gradient(circle at top left, var(--mindmap-agent-accent-soft), transparent 52%);
  border-color: #94a3b83d;
  box-shadow: 0 18px 30px #02061761, inset 0 0 0 1px #94a3b824;
}

body.dark-mode .mindmap-voice-agent-minimized:after {
  background: linear-gradient(#0f172ae6, #0f172ab8);
  border-bottom-color: #1e293beb;
  border-left-color: #94a3b829;
  border-right-color: #94a3b829;
  box-shadow: 0 10px 18px #02061738;
}

body.dark-mode .mindmap-voice-agent-minimized-text {
  color: #e2e8f0;
}

body.dark-mode .mindmap-voice-agent-minimized-detail {
  color: #94a3b8;
}

body.dark-mode .mindmap-voice-agent-minimized-indicator {
  color: #cbd5e1;
  background: #94a3b824;
}

body.dark-mode .mindmap-voice-agent-status-text {
  color: #e2e8f0;
}

body.dark-mode .mindmap-voice-agent-status-detail {
  color: #9fb3cc;
}

body.dark-mode .mindmap-voice-agent-log {
  color: #dbeafe;
  background: #0f172aa3;
  border-color: #94a3b83d;
}

body.dark-mode .mindmap-voice-agent-log .agent-log-line {
  color: #dbeafe;
  background: #0f172ac2;
  border-color: #94a3b847;
}

body.dark-mode .mindmap-voice-agent-trace {
  color: #e2e8f0;
  background: #1e293bd1;
  border-color: #94a3b83d;
}

body.dark-mode .mindmap-voice-agent-trace--active {
  color: #bfdbfe;
  background: #1e40af4d;
  border-color: #60a5fa66;
}

body.dark-mode .mindmap-voice-agent-log .agent-log-line--event {
  background: #0f172abd;
}

body.dark-mode .mindmap-voice-agent-log .agent-log-line--event[data-source="planner"] {
  background: #312e8175;
}

body.dark-mode .mindmap-voice-agent-log .agent-log-line--event[data-source="user"] {
  background: #082f4994;
}

body.dark-mode .mindmap-voice-agent-log .agent-log-line--event[data-source="child"] {
  background: #1e3a8a57;
}

body.dark-mode .mindmap-voice-agent-log .agent-log-line--event[data-status="failed"] {
  background: #7f1d1d80;
}

body.dark-mode .mindmap-voice-agent-log .agent-log-line--divider {
  color: #cbd5e1eb;
  background: #1e293bd1;
  border-color: #94a3b847;
}

body.dark-mode .agent-log-badge {
  color: #cbd5e1;
  background: #0f172ab3;
  border-color: #94a3b833;
}

body.dark-mode .agent-log-summary {
  color: #f8fafc;
}

body.dark-mode .agent-log-meta, body.dark-mode .agent-log-detail {
  color: #cbd5e1;
}

body.dark-mode .mindmap-voice-agent-meta {
  color: #bfdbfe;
  background: #0f172a99;
  border-color: #94a3b83d;
}

body.dark-mode .mindmap-voice-agent-ok {
  color: #e2e8f0;
  background: #e2e8f021;
  border-color: #94a3b85c;
  box-shadow: 0 10px 18px #0f172a59;
}

body.dark-mode .mindmap-voice-agent-reply {
  box-shadow: 0 12px 22px #1e88ff59;
}

body.dark-mode .mindmap-voice-agent-minimize {
  color: #cbd5e1;
  background: #1e293be0;
  border-color: #94a3b847;
  box-shadow: 0 10px 18px #02061757;
}

body.dark-mode .mindmap-voice-agent-tool {
  color: #e2e8f0;
  background: linear-gradient(180deg, #0f172af0, #1e293beb), linear-gradient(135deg, var(--mindmap-agent-accent-soft), #0f172a00);
  border-color: #94a3b83d;
  box-shadow: inset 0 1px #ffffff0f, 0 12px 22px #02061747;
}

body.dark-mode .mindmap-voice-agent-tool-icon {
  color: #bfdbfe;
  background: #94a3b81f;
}

body.dark-mode .mindmap-voice-agent-tool-hint {
  color: #94a3b8;
}

body.dark-mode .mindmap-voice-agent-tool--primary {
  color: #fff;
  background: linear-gradient(#2563eb, #1d4ed8);
}

body.dark-mode .mindmap-voice-agent-tool--ask {
  background: linear-gradient(#0f172af2, #1e293beb), linear-gradient(135deg, #38bdf838, #0f172a00);
}

body.dark-mode .mindmap-voice-agent-tool--primary .mindmap-voice-agent-tool-icon {
  color: #fff;
  background: #ffffff24;
}

body.dark-mode .mindmap-voice-agent-tool--primary .mindmap-voice-agent-tool-hint {
  color: #dbeafee0;
}

body.dark-mode .mindmap-voice-agent-surface-panel {
  background: linear-gradient(180deg, #0f172af5, #0f172aeb), linear-gradient(135deg, var(--mindmap-agent-accent-soft), #0f172a00);
  border-color: #94a3b838;
  box-shadow: inset 0 1px #ffffff0d, 0 16px 28px #0206174d;
}

body.dark-mode .agent-dock-ask-menu-button {
  color: #e2e8f0;
  background: linear-gradient(180deg, #0f172af0, #1e293beb), linear-gradient(135deg, var(--agent-dock-tint), #0f172a00);
  border-color: #94a3b847;
  box-shadow: inset 0 1px #ffffff0f, 0 10px 18px #0206173d;
}

body.dark-mode .agent-dock-ask-menu-button-icon {
  background: #94a3b824;
}

body.dark-mode .agent-dock-ask-menu-panel {
  background: linear-gradient(180deg, #0f172af5, #0f172aeb), linear-gradient(135deg, var(--agent-dock-tint), #0f172a00);
  border-color: #94a3b83d;
  box-shadow: 0 20px 36px #02061770, 0 8px 18px #02061747;
}

body.dark-mode .agent-dock-ask-menu-title {
  color: #f8fafc;
}

body.dark-mode .agent-dock-ask-menu-subtitle, body.dark-mode .agent-dock-ask-branch-label {
  color: #94a3b8;
}

body.dark-mode .agent-dock-ask-leaf {
  color: #e2e8f0;
  background: #1e293be0;
  border-color: #94a3b838;
  box-shadow: 0 8px 16px #0206173d;
}

@media (prefers-color-scheme: dark) {
  body.dark-mode .mindmap-voice-transcript-cancel {
    color: #fee2e2;
    background: #f8717138;
    border-color: #f871718c;
    box-shadow: 0 10px 20px #f8717147;
  }

  body.dark-mode .mindmap-voice-transcript-input {
    color: #e2e8f0;
    -webkit-text-fill-color: #e2e8f0;
    caret-color: #e2e8f0;
  }

  body.dark-mode .mindmap-voice-transcript-input::placeholder {
    color: #e2e8f0b3;
    -webkit-text-fill-color: #e2e8f0b3;
  }

  body.dark-mode .mindmap-voice-transcript-context {
    color: #bfdbfee6;
  }

  body.dark-mode .mindmap-voice-transcript-shell--settled .mindmap-voice-transcript-card {
    background: #0f172aeb;
    border-color: #94a3b859;
    box-shadow: 0 12px 28px #0f172a73;
  }

  body.dark-mode .mindmap-voice-agent-card {
    background: #0f172aeb;
    border-color: #94a3b847;
    box-shadow: 0 14px 28px #0f172a73;
  }

  body.dark-mode .mindmap-voice-agent-header, .mindmap-voice-agent-status-text {
    color: #e2e8f0;
  }

  .mindmap-voice-agent-status-detail {
    color: #9fb3cc;
  }

  body.dark-mode .mindmap-voice-agent-log {
    color: #cbd5f5;
  }

  body.dark-mode .mindmap-voice-agent-meta {
    color: #bfdbfe;
    background: #0f172a99;
    border-color: #94a3b83d;
  }

  body.dark-mode .mindmap-voice-agent-ok {
    color: #e2e8f0;
    background: #e2e8f02e;
    border-color: #94a3b85c;
    box-shadow: 0 10px 18px #0f172a59;
  }

  body.dark-mode .mindmap-voice-agent-reply {
    box-shadow: 0 12px 22px #1e88ff59;
  }
}

@keyframes mindmapVoiceInputPulse {
  0% {
    opacity: .7;
    transform: translateY(4px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mindmapVoiceStatusPulse {
  0% {
    opacity: .82;
    transform: scale(.92);
  }

  50% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: .82;
    transform: scale(.92);
  }
}

@keyframes mindmapVoiceThinkingDots {
  0% {
    width: 0;
  }

  100% {
    width: 1.2em;
  }
}

@keyframes mindmapVoiceAgentBarSweep {
  0% {
    background-position: 0%;
  }

  100% {
    background-position: 180%;
  }
}

@keyframes mindmapVoiceAgentAttentionPulse {
  0%, 100% {
    transform: translateX(-50%) translateY(var(--mindmap-agent-tab-visible-y)) scale(1);
  }

  50% {
    transform: translateX(-50%) translateY(calc(var(--mindmap-agent-tab-visible-y)  - 1px)) scale(1.01);
  }
}

@media (width <= 600px) {
  .mindmap-voice-transcript-shell {
    width: calc(100% - 32px);
  }

  .mindmap-voice-agent-shell {
    width: min(100vw - 16px, 620px);
    max-width: calc(100vw - 16px);
  }

  .mindmap-voice-agent-minimized {
    width: min(100vw - 86px, 190px);
  }

  .mindmap-voice-agent-card {
    border-radius: 14px;
    padding: 10px;
  }

  .mindmap-voice-agent-tools {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mindmap-voice-agent-tool {
    min-height: 48px;
    padding: 10px;
  }

  .mindmap-voice-agent-tool-label {
    font-size: .66rem;
  }

  .mindmap-voice-agent-tool-hint {
    font-size: .58rem;
  }

  .mindmap-voice-agent-log {
    max-height: 30vh;
  }

  .mindmap-voice-agent-jsonl-controls {
    justify-content: flex-start;
  }

  .mindmap-voice-agent-jsonl-run {
    min-width: calc(50% - 4px);
  }

  .mindmap-voice-agent-jsonl-inspector {
    max-height: 28vh;
  }

  .mindmap-voice-agent-status-detail {
    max-width: calc(100vw - 126px);
  }

  .agent-dock-ask-menu-panel {
    width: min(100vw - 22px, 420px);
    top: auto;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%)translateY(10px);
  }

  .agent-dock-ask-menu-panel.show {
    transform: translateX(-50%)translateY(0);
  }

  .agent-dock-ask-menu-button-text {
    display: none;
  }

  .agent-dock-ask-menu-button {
    justify-content: center;
    width: 36px;
    min-width: 36px;
    padding: 0;
  }
}

@media (width >= 769px) {
  .simple-control-group {
    margin: 0 .16rem;
    padding: .16rem;
  }

  .outer-container {
    padding: .16rem;
  }

  .outer-container #simple-controls-container .button-container {
    border-radius: 12px;
    padding: 5px;
  }

  .outer-container #simple-controls-container .custom-button {
    padding: 5px 10px;
    font-size: .9rem;
  }

  .outer-container #simple-controls-container .circular-button {
    width: 38px;
    height: 38px;
  }

  .outer-container #simple-controls-container .button-icon i {
    font-size: .92rem;
  }

  .outer-container #simple-controls-container button {
    margin: 1px;
  }

  .ask-connect-container .button-container {
    gap: 5px;
  }

  .outer-container #simple-controls-container .ask-highlight-button, .outer-container #simple-controls-container .connect-button {
    min-width: 38px;
    min-height: 38px;
  }
}

#controls-container {
  z-index: 100;
  visibility: visible;
  pointer-events: auto;
  background-image: linear-gradient(0deg, #d7d3d3e6 0%, #f3f3f3e6 90%, #fffaec00 100%);
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding: .2rem;
  transition: background-image .5s, height .5s, opacity .5s;
  display: flex;
  position: absolute;
}

#controls-container.minimized {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  height: 0;
}

@media (width <= 768px) {
  #controls-container {
    max-height: 30vh;
    overflow-y: auto;
  }
}

@media (width >= 769px) {
  #controls-container {
    max-height: 40vh;
    overflow-y: auto;
  }
}

#node-controls {
  flex-direction: column;
  flex-basis: 60%;
  align-items: center;
  margin-bottom: .3rem;
  display: flex;
}

.control-group {
  scrollbar-width: thin;
  scrollbar-color: #0003 transparent;
  background-color: #fffc;
  border-radius: 5px;
  flex-direction: column;
  align-items: flex-start;
  height: auto;
  max-height: calc(100vh - 50px);
  margin-bottom: .5rem;
  padding: .5rem;
  transition: height .3s ease-out, width .3s ease-out, margin-left .3s ease-out;
  display: flex;
  overflow-y: auto;
  box-shadow: 0 2px 4px #0000001a;
}

.control-group::-webkit-scrollbar {
  width: 6px;
}

.control-group::-webkit-scrollbar-track {
  background: none;
}

.control-group::-webkit-scrollbar-thumb {
  background-color: #0003;
  border-radius: 3px;
}

.control-group.minimized {
  cursor: pointer;
  height: 40px;
  overflow: hidden;
}

.control-group h5 {
  text-align: center;
  border-radius: 5px;
  flex-shrink: 0;
  width: 100%;
  margin-bottom: .5rem;
  font-weight: bold;
  transition: background-color .3s ease-in-out, color .3s ease-in-out, box-shadow .3s ease-in-out;
  position: relative;
}

.control-group h5:hover {
  color: #555;
  background-color: #84848432;
  box-shadow: 0 2px 4px #0000001a;
}

.control-group.minimized > div {
  opacity: 0;
  pointer-events: none;
}

.control-group.minimized h5 {
  cursor: pointer;
}

.control-group.minimized h5 span {
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}

.control-group.minimized h5:hover #space-arrow, .control-group.minimized h5:hover #ai-settings-arrow {
  opacity: 0;
  animation: none;
}

.control-group > div {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.move-icon {
  opacity: .5;
  transition: transform .3s, opacity .3s;
  top: 2px;
}

.login-content {
  display: block !important;
}

.control-group > div > * {
  margin-bottom: .5rem;
  margin-right: .5rem;
}

.title-text {
  text-align: center;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: normal;
  display: block;
}

.checkbox-option {
  background-color: #d0d0d01a;
  border: 1px dashed #ccc;
  border-radius: 5px;
  align-items: center;
  transition: border .5s;
  display: flex;
}

.checkbox-option.animated-border {
  background-image: linear-gradient(90deg, #ccc 50%, #0000 50%), linear-gradient(90deg, #ccc 50%, #0000 50%), linear-gradient(0deg, #ccc 50%, #0000 50%), linear-gradient(0deg, #ccc 50%, #0000 50%);
  background-position: 0 0, 0 100%, 0 0, 100% 0;
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 5px 1px, 5px 1px, 1px 5px, 1px 5px;
  border-color: #0000;
  animation: .5s linear dash-animation;
}

@keyframes dash-animation {
  100% {
    background-position: 10px 0, 10px 100%, 0 10px, 100% 10px;
  }
}

.checkbox-option label {
  margin-left: 1px;
  line-height: 1;
  font-size: .6rem !important;
}

.checkbox-option input[type="checkbox"] {
  transform: scale(.8);
}

.horizontal-buttons > div {
  flex-direction: row;
}

#user-color-coding-label {
  margin-top: 10px;
}

.vertical-buttons > div {
  flex-direction: column;
}

input[type="checkbox"] {
  margin-bottom: .15rem;
  margin-left: .15rem;
  margin-right: .15rem;
}

label {
  margin-bottom: .15rem;
  margin-left: .15rem;
  margin-right: .15rem;
  font-size: .8rem;
}

h5 {
  margin-top: .15rem;
  margin-bottom: .15rem;
  font-size: .9rem;
  font-weight: bold;
}

.api-requests-container {
  background-color: #fff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 1rem;
  transition: box-shadow .2s;
  box-shadow: 0 2px 4px #0000000d;
}

.api-requests-container:hover {
  box-shadow: 0 4px 8px #0000001a;
}

.api-requests-title {
  color: #343a40;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: .75rem;
  padding-bottom: .5rem;
  font-size: 1rem;
  font-weight: 600;
}

.api-requests-list {
  scrollbar-width: thin;
  scrollbar-color: #adb5bd #e9ecef;
  max-height: 200px;
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow-y: auto;
}

.api-requests-list::-webkit-scrollbar {
  width: 6px;
}

.api-requests-list::-webkit-scrollbar-track {
  background: #e9ecef;
}

.api-requests-list::-webkit-scrollbar-thumb {
  background-color: #adb5bd;
  border-radius: 3px;
}

.api-request-item {
  color: #495057;
  cursor: pointer;
  border-bottom: 1px solid #e9ecef;
  justify-content: space-between;
  align-items: center;
  padding: .5rem;
  font-size: .875rem;
  transition: background-color .2s, transform .1s;
  display: flex;
}

.api-request-item:last-child {
  border-bottom: none;
}

.api-request-item:hover {
  background-color: #f1f3f5;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px #0000000d;
}

.api-request-item:active {
  box-shadow: none;
  transform: translateY(0);
}

.api-request-details {
  flex-direction: column;
  display: flex;
}

.api-request-time {
  margin-bottom: .25rem;
  font-weight: 600;
}

.api-request-model {
  color: #6c757d;
}

.api-request-costs {
  text-align: right;
  font-size: .75rem;
}

.api-request-cost {
  font-weight: 600;
}

.api-request-markup {
  color: #4a90e2;
  font-style: italic;
}

.form-group label {
  margin-bottom: 5px;
  display: block;
}

.form-group input, .form-group textarea {
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  padding: 5px;
}

.modal {
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  background-color: #00000080;
  place-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .5s, visibility .5s;
  position: fixed;
  top: 0;
  left: 0;
  display: grid !important;
}

.modal.visible {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background-color: #ffffffe6;
  border-radius: 10px;
  width: 50%;
  max-width: 900px;
  padding: 20px;
  box-shadow: 0 4px 8px #0000001a;
}

.modal-header {
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  display: flex;
}

.modal-body {
  padding: 20px 0;
}

.modal-footer {
  border-top: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  display: flex;
}

.modal-buttons {
  justify-content: flex-end;
  display: flex;
}

.modal-buttons button {
  margin-left: 10px;
}

.control-group h5 i {
  margin-right: 8px;
}

.helper-description {
  color: #666;
  margin-bottom: 10px;
  font-size: .8rem;
}

#screen-analysis-btn {
  background-color: #4caf50;
  border-color: #45a049;
  transition: all .3s;
}

#screen-analysis-btn:hover {
  background-color: #45a049;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px #0000001a;
}

#screen-analysis-btn i {
  margin-right: 5px;
}

.email-btn i {
  color: #546e7a;
  margin-right: 5px;
}

.message-btn i {
  color: #2196f3;
  margin-right: 5px;
}

.bug-btn i {
  color: #f44336;
  margin-right: 5px;
}

.feature-btn i {
  color: #ffc107;
  margin-right: 5px;
}

.discord-btn i {
  color: #5865f2;
  margin-right: 5px;
}

.profile-button {
  cursor: pointer;
  background-color: #0000;
  border: none;
}

.profile-icon {
  color: #333;
  font-size: 24px;
}

#subscribe-icon.unsubscribed {
  color: #9e9e9eb3;
}

.control-group div .custom-button i.fa-link {
  color: #059669;
}

.control-group div .custom-button i.fa-unlink {
  color: #f59e0b;
}

.control-group div .custom-button i.fa-eye-slash, .control-group div .custom-button i.fa-eye {
  color: #3b82f6;
}

.control-group div .custom-button i.fa-trash-alt {
  color: #dc2626;
}

.control-group div .custom-button .svg-inline--fa[data-icon="link"] {
  color: #059669;
}

.control-group div .custom-button .svg-inline--fa[data-icon="link-slash"], .control-group div .custom-button .svg-inline--fa[data-icon="unlink"] {
  color: #f59e0b;
}

.control-group div .custom-button .svg-inline--fa[data-icon="eye-slash"], .control-group div .custom-button .svg-inline--fa[data-icon="eye"] {
  color: #3b82f6;
}

.control-group div .custom-button .svg-inline--fa[data-icon="trash-can"], .control-group div .custom-button .svg-inline--fa[data-icon="trash-alt"] {
  color: #dc2626;
}

.control-group div .custom-button i {
  font-size: 14px;
  transition: color .3s;
}

.control-group div .custom-button:disabled i, .control-group div .custom-button:disabled .svg-inline--fa {
  opacity: .5;
}

.control-group div .custom-button:hover:not(:disabled) i, .control-group div .custom-button:hover:not(:disabled) .svg-inline--fa {
  opacity: .8;
}

.uploaded-files-title {
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 600;
  display: block;
}

.file-list-section {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 6px;
  overflow: hidden;
}

.file-list-section ul {
  max-height: 130px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-y: auto;
}

.file-list-section li {
  color: #333;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  align-items: center;
  padding: 4px 6px;
  font-size: 12px;
  transition: background-color .3s;
  display: flex;
}

.file-list-section li:last-child {
  border-bottom: none;
}

.file-list-section li:hover {
  background-color: #f5f5f5;
}

.file-list-section .file-icon {
  color: #6c757d;
  margin-right: 8px;
}

.file-list-section .file-name {
  flex-grow: 1;
}

.file-list-section .file-user {
  color: #666;
  margin-left: 8px;
  font-size: 11px;
}

.file-list-section button {
  margin-bottom: 0;
  margin-left: 10px;
}

#shared-users [data-user-id] {
  border-radius: 5px;
  transition: transform .3s, box-shadow .3s;
  box-shadow: 0 4px 8px #0000;
}

#shared-users [data-user-id]:hover {
  background-color: #007bff1a;
  border-radius: 5px;
  transform: scale(1.05)translateX(5px);
  box-shadow: 0 4px 8px #0003;
}

.shared-users-tooltip {
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.shared-users-tooltip .shared-users-tooltiptext {
  visibility: hidden;
  color: #fff;
  text-align: center;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background-color: #333;
  border-radius: 6px;
  width: 140px;
  margin-left: -70px;
  padding: 5px;
  transition: opacity .3s .75s, visibility 0s .75s;
  position: absolute;
  bottom: 125%;
  left: 50%;
}

.shared-users-tooltip .shared-users-tooltiptext:after {
  content: "";
  border: 5px solid #0000;
  border-top-color: #333;
  margin-left: -5px;
  position: absolute;
  top: 100%;
  left: 50%;
}

.shared-users-tooltip:hover .shared-users-tooltiptext {
  visibility: visible;
  opacity: 1;
  transition-delay: .75s;
}

.friends-online-group {
  overflow: hidden;
}

.friends-online-group > .friends-online-container {
  margin-top: .5rem;
}

.friends-online-container {
  justify-content: center;
  width: 100%;
  display: flex;
}

#friends-online-indicator {
  color: #333;
  cursor: pointer;
  background-color: #f0f0f0;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  padding: 5px 10px;
  font-size: 12px;
  transition: background-color .3s, color .3s, box-shadow .3s, transform .3s;
  display: flex;
}

#friends-online-indicator.online {
  color: #21592b;
  background-color: #edf8ef;
  box-shadow: inset 0 0 0 1px #4caf5040;
}

#friends-online-indicator:hover {
  background-color: #e0e0e0;
  transform: scale(1.05);
}

#friends-online-indicator.online:hover {
  background-color: #e3f3e6;
}

#friends-online-indicator .indicator-light {
  background-color: #ccc;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  transition: background-color .3s;
}

#friends-online-indicator.online .indicator-light {
  background-color: #4caf50;
}

.current-space-content {
  width: 100%;
}

#current-graph-name {
  color: #333;
  cursor: pointer;
  white-space: normal;
  text-align: center;
  word-wrap: break-word;
  background-color: #f0f0f0;
  border-radius: 10px;
  margin: 1px 0;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  transition: background-color .3s, transform .3s, box-shadow .3s;
  display: block;
  position: relative;
}

#current-graph-name:hover {
  background-color: #e0e0e0;
  transform: scale(1.05);
  box-shadow: 0 4px 8px #0000001a;
}

#current-graph-name:active {
  transform: scale(1.02);
  box-shadow: 0 2px 4px #0000001a;
}

@media (width <= 768px) {
  #current-graph-name {
    padding: 6px 10px;
    font-size: 11px;
  }
}

.collaborators-section {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 8px;
  padding: 8px 10px;
}

.collab-header {
  border-bottom: 1px solid #edf1f7;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  display: flex;
}

.collab-title {
  color: #333;
  font-size: 12px;
  font-weight: 600;
}

.collab-actions {
  align-items: center;
  gap: 8px;
  display: flex;
}

.icon-button {
  color: #6b7280;
  cursor: pointer;
  background: #f6f8fb;
  border: 1px solid #e6eaf2;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  transition: background-color .2s, box-shadow .2s, transform .1s, border-color .2s, color .2s;
  display: inline-flex;
}

.icon-button:hover {
  background: #eef2f9;
  border-color: #d9e1ef;
  transform: translateY(-1px);
  box-shadow: 0 1px 3px #0000000f;
}

.icon-button:active {
  transform: translateY(0);
}

.icon-button:focus-visible, .icon-toggle input:focus-visible + i {
  outline-offset: 2px;
  outline: 2px solid #93c5fd;
}

.icon-button.active {
  color: #b91c1c;
  background: linear-gradient(145deg, #fef3f2, #dbeafe);
  border-color: #fb7185;
  box-shadow: 0 2px 6px #0f172a33, 0 0 0 3px #f8717140;
}

#subscribe-graph-btn.icon-button.active #subscribe-icon {
  color: #b91c1c;
}

#subscribe-graph-btn.active {
  color: #fff;
  background: #1d4ed8;
  border-color: #1d4ed8;
  box-shadow: 0 8px 18px #0f172a40, 0 0 0 3px #bfdbfebf;
}

#subscribe-graph-btn.active #subscribe-icon, #subscribe-graph-btn.active .svg-inline--fa {
  color: #fff;
}

#subscribe-graph-btn.active:hover {
  background: #1e3a8a;
  border-color: #1e3a8a;
  box-shadow: 0 10px 22px #1e3a8a59, 0 0 0 3px #bfdbfee6;
}

.icon-toggle {
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.icon-toggle input {
  display: none;
}

.icon-toggle i {
  color: #6b7280;
  cursor: pointer;
  background: #f6f8fb;
  border: 1px solid #e6eaf2;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  transition: background-color .2s, box-shadow .2s, transform .1s, border-color .2s, color .2s;
  display: inline-flex;
}

.icon-toggle:hover i {
  background: #eef2f9;
  border-color: #d9e1ef;
  transform: translateY(-1px);
  box-shadow: 0 1px 3px #0000000f;
}

.icon-toggle input:checked + i {
  color: #1d4ed8;
  background: #eef6ff;
  border-color: #cfe1ff;
}

.shared-users-container, #shared-users {
  flex-wrap: wrap;
  gap: 6px 10px;
  display: flex;
}

#shared-users [data-user-id] {
  padding: 2px 6px;
}

#subscribe-graph-btn:hover #subscribe-icon {
  color: #000000b3;
}

.icon-button i, .icon-toggle i {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: "Font Awesome 6 Free";
  font-size: 16px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.icon-button .svg-inline--fa, .icon-toggle .svg-inline--fa {
  vertical-align: middle;
  font-size: 16px;
  line-height: 1;
  display: inline-block;
}

.collab-badge {
  color: #1d4ed8;
  vertical-align: middle;
  background: #eef6ff;
  border: 1px solid #cfe1ff;
  border-radius: 9999px;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 600;
  line-height: 18px;
  display: inline-block;
}

.collab-empty {
  color: #6b7280;
  background: #fafcff;
  border: 1px dashed #e5e7eb;
  border-radius: 6px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 12px;
  display: flex;
}

.link-button {
  color: #2563eb;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-size: 12px;
}

.link-button:hover {
  text-decoration: underline;
}

#collaborators-section.button-options-group {
  max-height: none;
  overflow-y: visible !important;
}

.collaborators-section::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.space-panel .button-options-group {
  background: #f9fbfe;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
  padding: 6px 8px;
  box-shadow: 0 1px #10182805;
}

.file-list-section .file-icon {
  font-size: 16px;
}

.file-list-section .fa-file-image {
  color: #3b82f6;
}

.file-list-section .fa-file-pdf {
  color: #ef4444;
}

.file-list-section .fa-file-word {
  color: #2563eb;
}

.file-list-section .fa-file-excel {
  color: #22c55e;
}

.file-list-section .fa-file-powerpoint, .file-list-section .fa-file-audio {
  color: #f59e0b;
}

.file-list-section .fa-file-video {
  color: #8b5cf6;
}

.file-list-section .fa-file-zipper {
  color: #6b7280;
}

.file-list-section .fa-file-code {
  color: #10b981;
}

.file-list-section .fa-globe {
  color: #0ea5e9;
}

.file-list-section .fa-file-lines {
  color: #64748b;
}

#subscribe-graph-btn .fa-bell {
  color: #ef4444;
}

.icon-toggle i.fa-palette {
  color: #6366f1;
}

.icon-toggle i.fa-id-badge {
  color: #64748b;
}

.collaborators-section .collab-header {
  border-bottom-color: #e6eaf2;
}

.uploaded-files-title, .file-list-section {
  display: none;
}

.uploaded-files-header {
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  display: none;
}

.uploaded-files-header .icon-button {
  width: 22px;
  height: 22px;
  padding: 0;
}

.uploaded-files-header .icon-button i, .uploaded-files-header .icon-button .svg-inline--fa {
  font-size: 12px;
}

.space-panel .file-list-section ul {
  max-height: none;
  overflow: visible;
}

.file-list-section ul.compact-list li {
  padding: 4px 6px;
}

.files-grid {
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 15px;
  padding: 15px;
  display: grid;
}

.file-tile {
  cursor: pointer;
  text-align: center;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px 8px;
  transition: all .2s, transform .15s, box-shadow .15s;
  display: flex;
  position: relative;
  box-shadow: 0 2px 4px #0000000a;
}

.file-tile:hover {
  background: linear-gradient(135deg, #fff 0%, #f8fafc 100%);
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0000001a;
}

.file-tile .file-delete-btn {
  color: #fff;
  cursor: pointer;
  opacity: 0;
  z-index: 10;
  background: #ef4444;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 10px;
  font-weight: bold;
  transition: opacity .2s, transform .2s;
  display: flex;
  position: absolute;
  top: 4px;
  right: 4px;
}

.file-tile:hover .file-delete-btn {
  opacity: 1;
}

.file-tile .file-delete-btn:hover {
  background: #dc2626;
  transform: scale(1.1);
}

.file-tile .file-icon-md {
  margin-bottom: 8px;
  font-size: 36px;
  transition: transform .2s;
}

.file-tile:hover .file-icon-md {
  transform: scale(1.05);
}

.file-tile .fa-file-image {
  color: #3b82f6;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
  -webkit-background-clip: text;
}

.file-tile .fa-file-pdf {
  color: #ef4444;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #ef4444, #f87171);
  -webkit-background-clip: text;
}

.file-tile .fa-file-word {
  color: #2563eb;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #2563eb, #3b82f6);
  -webkit-background-clip: text;
}

.file-tile .fa-file-excel {
  color: #22c55e;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #22c55e, #4ade80);
  -webkit-background-clip: text;
}

.file-tile .fa-file-powerpoint {
  color: #f59e0b;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  -webkit-background-clip: text;
}

.file-tile .fa-file-audio {
  color: #a855f7;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #a855f7, #c084fc);
  -webkit-background-clip: text;
}

.file-tile .fa-file-video {
  color: #8b5cf6;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #8b5cf6, #a78bfa);
  -webkit-background-clip: text;
}

.file-tile .fa-file-zipper {
  color: #6b7280;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #6b7280, #9ca3af);
  -webkit-background-clip: text;
}

.file-tile .fa-file-code {
  color: #10b981;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #10b981, #34d399);
  -webkit-background-clip: text;
}

.file-tile .fa-globe {
  color: #0ea5e9;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #0ea5e9, #38bdf8);
  -webkit-background-clip: text;
}

.file-tile .fa-file-lines {
  color: #64748b;
  -webkit-text-fill-color: transparent;
  background: linear-gradient(135deg, #64748b, #94a3b8);
  -webkit-background-clip: text;
}

.file-tile .file-name-ellipsis {
  color: #334155;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%;
  padding: 0 4px;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
}

.file-tile .file-user-badge {
  color: #64748b;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 400;
}

.files-modal-overlay {
  z-index: 10000;
  background: #10182859;
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  inset: 0;
}

.files-modal-content {
  background: #fff;
  border-radius: 12px;
  flex-direction: column;
  width: min(720px, 92vw);
  max-height: 80vh;
  padding: 12px;
  display: flex;
  box-shadow: 0 10px 30px #1018281f;
}

.files-modal-header {
  border-bottom: 1px solid #e6eaf2;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  display: flex;
  position: relative;
}

.files-modal-header h3 {
  color: #333;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.files-modal-body {
  flex: 1;
  padding: 4px 0;
  overflow: auto;
}

.ai-provider-container {
  text-align: center;
  margin-bottom: 10px;
}

body.pen-input-active .ai-panel .ai-controls-group, body.pen-input-active .ai-panel .ai-section-header, body.pen-input-active .ai-panel .options-section-header, body.pen-input-active .ai-panel .undo-redo-buttons button, body.pen-input-active .ai-panel .web-search-toggle, body.pen-input-active .ai-panel .web-search-toggle span, body.pen-input-active .ai-panel .ai-provider-icons img {
  user-select: none;
  -webkit-touch-callout: none;
}

body.pen-input-active .ai-panel input, body.pen-input-active .ai-panel textarea, body.pen-input-active .ai-panel select, body.pen-input-active .ai-panel .current-system-prompt, body.pen-input-active .ai-panel .custom-system-prompt-modal-content {
  user-select: text;
  -webkit-touch-callout: default;
}

#selected-provider-name {
  color: #00264e;
  background-color: #007bff13;
  border-radius: 5px;
  margin-bottom: 10px;
  padding: 5px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color .3s, color .3s, box-shadow .3s;
  display: inline-block;
}

#selected-provider-name:hover {
  color: #0056b3;
  background-color: #007bff33;
  box-shadow: 0 2px 4px #0000001a;
}

.ai-provider-icons {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.ai-provider-icons img {
  cursor: pointer;
  box-sizing: border-box;
  background-color: #0000;
  border: 1.5px solid #0000;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  margin: 0 10px 2.5px;
  padding: 4px;
  font-size: 28px;
  transition: all .3s;
}

.ai-provider-icons img:hover {
  color: #007bff;
  filter: brightness(.8);
  background-color: #007bff1a;
  border: 1.5px dashed #007bff;
  transform: scale(1.1);
}

.ai-provider-icons img.provider-active {
  color: #007bff;
  filter: brightness(.8);
  background-color: #007bff33;
  border: 1.5px solid #007bff;
  transform: scale(1.1);
}

.ai-provider-icons img.provider-active:hover {
  background-color: #007bff1a;
}

.dropdown-container select::-ms-expand {
  display: none;
}

.custom-system-prompt-modal {
  z-index: 1005;
  opacity: 0;
  visibility: hidden;
  background-color: #00000080;
  place-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .5s, visibility .5s;
  position: fixed;
  top: 0;
  left: 0;
  display: grid !important;
}

.custom-system-prompt-modal.visible {
  opacity: 1;
  visibility: visible;
}

.custom-system-prompt-modal-content {
  background-color: #ffffffe6;
  border-radius: 10px;
  width: 50%;
  max-width: 900px;
  padding: 20px;
  box-shadow: 0 4px 8px #0000001a;
}

@media (width <= 768px) {
  .custom-system-prompt-modal-content {
    width: 90%;
  }

  .custom-system-prompt-modal-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .custom-system-prompt-modal-buttons button {
    width: 100%;
    margin-left: 0;
  }
}

.custom-system-prompt-modal-header {
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  display: flex;
}

.custom-system-prompt-modal-body {
  padding: 20px 0;
}

.custom-system-prompt-modal-footer {
  border-top: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  display: flex;
}

.custom-system-prompt-modal-buttons {
  justify-content: flex-end;
  display: flex;
}

.custom-system-prompt-modal-buttons button {
  margin-left: 10px;
}

#all-space-context-button, #read-spaces-within-spaces-button {
  color: #212529;
}

#reasoning-level-button, #show-model-used-button, #estimate-costs-button, #call-multiple-models-button, #include-model-reasoning-button {
  background-color: #f5f7fa;
  border: 1px solid #e4e7eb;
  border-radius: 6px;
  margin-bottom: 8px;
  padding: 8px;
  transition: background-color .3s;
}

#reasoning-level-button:hover, #show-model-used-button:hover, #estimate-costs-button:hover, #call-multiple-models-button:hover, #include-model-reasoning-button:hover {
  background-color: #edf0f4;
}

.reasoning-level-wrapper {
  flex-direction: column;
  gap: 8px;
  display: flex;
}

.reasoning-level-wrapper label {
  color: #4a5568;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  display: flex;
}

.slider-container {
  align-items: center;
  gap: 10px;
  display: flex;
}

#reasoning-level-slider {
  appearance: none;
  background: #cbd5e0;
  border-radius: 2px;
  outline: none;
  flex-grow: 1;
  height: 4px;
}

#reasoning-level-slider::-webkit-slider-thumb {
  appearance: none;
  cursor: pointer;
  background: #4299e1;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: background-color .3s;
}

#reasoning-level-slider::-moz-range-thumb {
  cursor: pointer;
  background: #4299e1;
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: background-color .3s;
}

#reasoning-level-slider:hover::-webkit-slider-thumb {
  background: #2b6cb0;
}

#reasoning-level-slider:hover::-moz-range-thumb {
  background: #2b6cb0;
}

#reasoning-level-display {
  color: #4a5568;
  text-align: center;
  min-width: 24px;
  font-size: 14px;
}

#reasoning-level-info {
  color: #718096;
  cursor: help;
  transition: color .3s;
}

#reasoning-level-info:hover {
  color: #4a5568;
}

.ai-hidden {
  opacity: 0;
  pointer-events: none;
  max-height: 0;
  transition: all .3s;
  border: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden !important;
}

#show-model-used-button .switch-option, #estimate-costs-button .switch-option, #call-multiple-models-button .switch-option, #include-model-reasoning-button .switch-option {
  align-items: center;
  display: flex;
}

#show-model-used-button .switch-small, #estimate-costs-button .switch-small, #call-multiple-models-button .switch-small, #include-model-reasoning-button .switch-small {
  width: 36px;
  height: 20px;
  margin-right: 12px;
}

#show-model-used-button label, #estimate-costs-button label, #call-multiple-models-button label, #include-model-reasoning-button label {
  color: #4a5568;
  cursor: pointer;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

#show-model-used-button .switch-small .slider, #estimate-costs-button .switch-small .slider, #call-multiple-models-button .switch-small .slider, #include-model-reasoning-button .switch-small .slider {
  background-color: #cbd5e0;
  transition: all .4s;
}

#show-model-used-button .switch-small .slider:before, #estimate-costs-button .switch-small .slider:before, #call-multiple-models-button .switch-small .slider:before, #include-model-reasoning-button .switch-small .slider:before {
  width: 16px;
  height: 16px;
}

#show-model-used-button .switch-small input:checked + .slider, #estimate-costs-button .switch-small input:checked + .slider, #call-multiple-models-button .switch-small input:checked + .slider, #include-model-reasoning-button .switch-small input:checked + .slider {
  background-color: #4299e1;
}

#show-model-used-button .switch-small input:checked + .slider:before, #estimate-costs-button .switch-small input:checked + .slider:before, #call-multiple-models-button .switch-small input:checked + .slider:before, #include-model-reasoning-button .switch-small input:checked + .slider:before {
  transform: translateX(16px);
}

.switch-option {
  align-items: center;
  display: flex;
}

.switch-small {
  width: 36px;
  height: 20px;
  margin-right: 8px;
  display: inline-block;
  position: relative;
}

.switch-small input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch-small .slider {
  cursor: pointer;
  background-color: #ccc;
  border-radius: 20px;
  transition: all .4s;
  position: absolute;
  inset: 0;
}

.switch-small .slider:before {
  content: "";
  background-color: #fff;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  transition: all .4s;
  position: absolute;
  bottom: 2px;
  left: 2px;
}

.switch-small input:checked + .slider {
  background-color: #2196f3;
}

.switch-small input:checked + .slider:before {
  transform: translateX(16px);
}

@media (width >= 768px) {
  .custom-button {
    padding: 8px 16px;
    font-size: 16px;
  }

  .circular-button {
    width: 40px;
    height: 40px;
  }

  .fa-file-word, .fa-file-image, .fa-file-pdf, .fa-youtube, .fa-browser {
    font-size: 1.5em;
  }
}

.input-container {
  background-color: #f5f7fa;
  border: 1px solid #e4e7eb;
  border-radius: 6px;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 4px 5px;
  transition: all .2s;
  display: block;
}

.input-container:hover {
  background-color: #edf2f7;
  border-color: #cbd5e0;
}

.input-container label {
  color: #4a5568;
  font-size: 14px;
  font-weight: 500;
}

.cool-blue-input {
  appearance: none;
  color: #3c3e42;
  background-image: linear-gradient(#e8eaf6 0%, #bfced17d 100%);
  border: 1px solid #ced0d9;
  border-radius: 4px;
  outline: none;
  width: 60px;
  height: 30px;
  padding: 6px 8px;
  font-size: 14px;
  transition: border-color .3s;
}

.cool-blue-input:hover {
  border-color: #1a237e;
}

.cool-blue-input:focus {
  border-color: #1a237e;
  box-shadow: 0 0 5px #1a237e80;
}

.cool-blue-input:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.cool-blue-dropdown {
  appearance: none;
  color: #3c3e42;
  cursor: pointer;
  background-image: linear-gradient(#e8eaf6 0%, #c3d7db7d 100%);
  border: 1px solid #ced0d9;
  border-radius: 4px;
  outline: none;
  width: 200px;
  height: 25px;
  padding: 0 12px;
  font-size: 12px;
  transition: border-color .3s;
}

.cool-blue-dropdown:hover {
  border-color: #1a237e;
}

.cool-blue-dropdown:focus {
  border-color: #1a237e;
  box-shadow: 0 0 5px #1a237e80;
}

.cool-blue-dropdown option {
  color: #1a237e;
  background-color: #fff;
}

.cool-blue-dropdown option:checked {
  color: #1a237e;
  background-color: #c5cae9;
}

.cool-blue-dropdown option.free-model-option {
  color: #006400 !important;
  background-color: #e6ffe6 !important;
}

.cool-blue-dropdown option.premium-model-option {
  color: #b22222 !important;
  background-color: #ffe6e6 !important;
}

.cool-blue-dropdown:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.cool-blue-dropdown::-ms-expand {
  display: none;
}

.cool-blue-dropdown:after {
  content: "▼";
  color: #1a237e;
  pointer-events: none;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

.cool-blue-dropdown:hover:after {
  color: #1a237e;
}

.ai-disabled {
  opacity: .5;
  pointer-events: none;
}

input:disabled {
  opacity: .5;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

.collapsible-header {
  cursor: pointer;
  text-align: left;
  color: #3c3e42;
  background-color: #0000;
  border: none;
  border-bottom: 1px solid #ced0d9;
  outline: none;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 600;
  transition: all .3s;
  display: flex;
}

.collapsible-header:hover {
  color: #1a237e;
}

.collapsible-header:after {
  content: "+";
  color: #3c3e42;
  margin-left: 5px;
  font-weight: bold;
  transition: all .3s;
}

.collapsible-header.active:after {
  content: "−";
  color: #1a237e;
}

.collapsible-content {
  background-color: #0000;
  max-height: 0;
  transition: max-height .3s ease-out;
  overflow: hidden;
}

.collapsible-content.active {
  max-height: 500px;
  padding-top: 10px;
}

.collapsible-content .dropdown-container, .collapsible-content .custom-button {
  margin-bottom: 10px;
}

.collapsible-content label {
  color: #3c3e42;
  margin-bottom: 5px;
  font-size: 14px;
  display: block;
}

.modal-subtitle {
  color: #666;
  margin-top: 0;
  margin-bottom: 1.5em;
  font-size: .9em;
}

.input-help-text {
  color: #666;
  margin-top: 4px;
  font-size: .8em;
  display: block;
}

.form-group label {
  margin-bottom: 8px;
  font-weight: 500;
  display: block;
}

.form-group input, .form-group textarea {
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%;
  padding: 8px;
  font-size: .9em;
}

.form-group input:focus, .form-group textarea:focus {
  border-color: #007bff;
  outline: none;
  box-shadow: 0 0 0 2px #007bff40;
}

.form-group textarea::placeholder, .form-group input::placeholder {
  color: #999;
}

.prompt-select-container {
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
  display: flex;
}

.prompt-select-container label {
  color: #4a5568;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 500;
  display: block;
}

.dropdown-help-text {
  color: #666;
  margin-bottom: 6px;
  font-size: .8em;
  display: block;
}

.instruction-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  display: flex;
}

.auto-generate-button {
  color: #444;
  cursor: pointer;
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: .9em;
  transition: all .2s;
  display: flex;
}

.auto-generate-button:hover {
  background: #e9ecef;
  border-color: #ced4da;
}

.auto-generate-button:active {
  background: #dee2e6;
}

.auto-generate-icon {
  font-size: 1.1em;
}

.auto-generate-button.generating {
  pointer-events: none;
  opacity: .7;
  background: #e9ecef;
  position: relative;
  overflow: hidden;
}

.auto-generate-button.generating:after, .form-group.generating:after {
  content: "";
  background: linear-gradient(90deg, #fff0 0%, #fff6 50%, #fff0 100%);
  width: 100%;
  height: 100%;
  animation: 2s linear infinite shimmer;
  position: absolute;
  top: 0;
  left: 0;
}

.form-group.generating:after {
  pointer-events: none;
  border-radius: 5px;
}

#custom-system-prompt-name.invalid {
  border-color: red;
}

.form-group.generating {
  position: relative;
}

.form-group.generating textarea, .form-group.generating input {
  opacity: .7;
  cursor: wait;
}

.form-group.generating label, .form-group.generating .input-help-text {
  opacity: .5;
}

.multiple-models-analyze-section {
  background-color: #007bff0d;
  border: 1px solid #007bff1a;
  border-radius: 8px;
  margin: 20px 0;
  padding: 15px;
}

.analyze-header {
  margin-bottom: 15px;
}

.analyze-explanation {
  color: #666;
  margin: 10px 0;
  padding-left: 45px;
  font-size: .9em;
  line-height: 1.4;
}

.analyze-prompt-controls {
  margin-top: 15px;
}

.analyze-prompt-controls .dropdown-container {
  flex-direction: column;
  gap: 10px;
  display: flex;
}

.analyze-prompt-controls .horizontal-buttons {
  justify-content: flex-end;
  gap: 8px;
  display: flex;
}

.horizontal-buttons {
  gap: 6px;
  margin-top: 8px;
  display: flex;
}

.btn-extra-sm {
  padding: 4px 8px;
  font-size: .8em;
}

.model-option-premium {
  background-color: #ff00001a !important;
}

.model-option-free {
  background-color: #00ff001a !important;
}

#call-multiple-models-button .multiple-models-gear {
  color: #718096;
  cursor: pointer;
  margin-left: 8px;
  font-size: 14px;
  transition: all .3s;
  display: none;
}

#call-multiple-models-button .multiple-models-gear:hover {
  color: #4a5568;
  transform: rotate(90deg);
}

#call-multiple-models-button .multiple-models-gear.visible {
  align-items: center;
  display: inline-flex;
}

.web-search-button {
  margin: 8px 0;
  transition: all .3s;
  display: inline-block;
}

.web-search-toggle {
  cursor: pointer;
  color: #4a5568;
  user-select: none;
  background-color: #f5f7fa;
  border: 1px solid #e4e7eb;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 5px 7px;
  font-size: 14px;
  font-weight: 500;
  transition: all .3s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.web-search-toggle:hover {
  background-color: #edf2f7;
  transform: translateY(-1px);
  box-shadow: 0 2px 5px #0000000d;
}

.web-search-toggle:active {
  transform: translateY(0);
}

.web-search-toggle.enabled {
  color: #2b6cb0;
  background-color: #4299e126;
  border-color: #4299e166;
  box-shadow: 0 2px 6px #4299e133;
}

.web-search-toggle.enabled:before {
  content: "";
  background: #4299e1;
  border-radius: 4px 0 0 4px;
  width: 4px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.web-search-toggle i {
  color: #718096;
  font-size: 16px;
  transition: all .3s;
}

.web-search-toggle.enabled i {
  color: #3182ce;
  transform: scale(1.1);
}

.web-search-toggle span {
  font-size: 14px;
}

.web-search-toggle .status-indicator {
  background-color: #e2e8f0;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  transition: all .3s;
  display: flex;
}

.web-search-toggle.enabled .status-indicator {
  background-color: #4299e1;
}

.web-search-toggle .status-indicator:before {
  content: "";
  background-color: #fff;
  border-radius: 50%;
  width: 8px;
  height: 8px;
}

.web-search-toggle input {
  display: none;
}

.options-section {
  background-color: #007bff0d;
  border: 1px solid #007bff1a;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 8px 10px;
}

.options-section-header {
  cursor: pointer;
  color: #4a5568;
  text-transform: uppercase;
  letter-spacing: .5px;
  user-select: none;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  display: flex;
}

.options-section-header:after {
  content: "›";
  padding-bottom: 2px;
  padding-left: 7px;
  font-size: 16px;
  transition: transform .3s;
  transform: rotate(90deg);
}

.options-section.collapsed .options-section-header:after {
  transform: rotate(0);
}

.options-section-content {
  opacity: 1;
  max-height: 200px;
  margin-top: 8px;
  transition: max-height .3s, opacity .2s;
  overflow: hidden;
}

.options-section.collapsed .options-section-content {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
}

.options-section #show-model-used-button, .options-section #call-multiple-models-button, .options-section #estimate-costs-button, .options-section #include-model-reasoning-button {
  background-color: #0000;
  border: none;
  margin-bottom: 4px;
  padding: 5px 0;
}

.options-section-content > div:last-child {
  margin-bottom: 0;
}

.options-section .switch-small {
  margin-right: 8px;
  transform: scale(.9);
}

.options-section label, .options-section i {
  font-size: 13px;
}

#ai-tools-container {
  margin-top: 20px;
}

.ai-controls-group {
  background-color: #007bff08;
  border: 1px solid #007bff1a;
  border-radius: 8px;
  margin-bottom: 12px;
  padding: 8px 10px;
  transition: all .3s;
}

.ai-controls-group:hover {
  background-color: #007bff0f;
}

.ai-section-header {
  color: #4a5568;
  border-bottom: 1px solid #007bff1a;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  display: flex;
}

.ai-section-header i {
  color: #4299e1;
  margin-right: 8px;
}

.model-selection-container {
  margin-bottom: 6px;
}

.model-selection-container label {
  color: #4a5568;
  align-items: center;
  margin-bottom: 6px;
  font-weight: 500;
  display: flex;
}

.model-selection-container label i {
  color: #4299e1;
  margin-right: 6px;
}

.ai-tool-toggle {
  align-items: center;
  margin-bottom: 6px;
  display: flex;
  box-shadow: none !important;
  background-color: #0000 !important;
  border: none !important;
  padding: 0 !important;
}

.ai-tool-toggle.enabled {
  background-color: #4299e126;
  border-color: #4299e14d;
}

#ai-tools-container, #model-inputs-container {
  margin-bottom: 8px;
}

.ai-controls-group > div:last-child {
  margin-bottom: 0;
}

.undo-redo-buttons {
  gap: 6px;
  margin-top: 4px;
  display: flex;
}

.web-search-note {
  color: #555;
  margin-top: 4px;
  margin-left: 26px;
  font-size: 12px;
}

.dynamic-button-container {
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(5px);
  background-color: #948f8f26;
  border-radius: 12px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 6px;
  transition: all .3s;
  display: flex;
  position: fixed;
  top: 83%;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 4px 15px #0000001a;
}

@media (width <= 768px) {
  .dynamic-button-container {
    padding: 4px;
    top: 75%;
  }
}

.dynamic-button-container.show {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%)translateY(-10px);
}

.dynamic-button-container .btn {
  text-align: center;
  white-space: nowrap;
  color: #fff;
  cursor: pointer;
  background-color: #007bffe6;
  border: none;
  border-radius: 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 60px;
  height: 40px;
  margin: 3px;
  padding: 6px 10px;
  font-size: 11px;
  transition: all .2s;
  display: flex;
}

.dynamic-button-container .btn > * {
  flex: none;
}

.dynamic-button-container .btn i, .dynamic-button-container .btn span {
  text-align: center;
  width: 100%;
  display: block;
}

.dynamic-button-container .btn i {
  margin-bottom: 2px;
  font-size: 14px;
}

.dynamic-button-container .btn span {
  text-transform: uppercase;
  letter-spacing: .3px;
  font-size: 10px;
  font-weight: 500;
}

.dynamic-button-container .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 5px #0000001a;
}

.dynamic-button-container .btn:active {
  transform: translateY(0);
}

.dynamic-button-container .btn:focus {
  outline: none;
  box-shadow: 0 0 0 1px #fff3;
}

#dynamic-copy-nodes-btn {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

#dynamic-connect-selected-nodes-btn {
  background: linear-gradient(135deg, #059669, #34d399);
}

#dynamic-remove-non-flow-connections-btn {
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

#dynamic-combine-solutions-btn {
  background: linear-gradient(135deg, #7c3aed, #8b5cf6);
}

#dynamic-remove-btn {
  background: linear-gradient(135deg, #dc2626, #ef4444);
}

#dynamic-generate-image-btn {
  background: linear-gradient(135deg, #0284c7, #38bdf8);
}

.dynamic-button-container .btn:hover {
  opacity: .95;
}

.dynamic-button-container .btn:active {
  opacity: 1;
  transform: scale(.98);
}

#dynamic-group-btn {
  background: linear-gradient(135deg, #0891b2, #06b6d4);
}

#dynamic-ungroup-btn {
  background: linear-gradient(135deg, #9333ea, #a855f7);
}

.dynamic-button-container.sem-mode {
  background-color: #214cac24;
  border: 1px solid #3a7afe40;
  top: 82%;
  box-shadow: 0 6px 20px #00000026;
}

.dynamic-button-container.sem-mode .btn:not(.btn-toggle) {
  display: none !important;
}

.sem-toggle-header {
  opacity: .85;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  margin: 2px 6px 4px;
  font-size: 11px;
  display: flex;
}

.sem-mode-title {
  letter-spacing: .2px;
  font-weight: 600;
}

.sem-mode-hint {
  font-size: 10px;
}

.sem-toggle-row {
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 2px;
  display: flex;
}

.btn-toggle {
  color: #0f1f3d;
  background: #3a7afe1f;
  border: 1px solid #3a7afe59;
  border-radius: 8px;
  min-width: 64px;
  height: 34px;
  margin: 3px;
  padding: 4px 8px;
  font-size: 10px;
}

.btn-toggle i {
  margin-bottom: 1px;
  font-size: 13px;
}

.btn-toggle span {
  text-transform: uppercase;
  letter-spacing: .35px;
  font-size: 9px;
}

.btn-toggle:hover {
  background: #3a7afe2e;
}

.btn-toggle.active {
  color: #fff;
  background: linear-gradient(135deg, #3a7afe, #6b9eff);
  border-color: #3a7afee6;
}

@media (width <= 768px) {
  .dynamic-button-container.sem-mode {
    top: 74%;
  }

  .btn-toggle {
    min-width: 58px;
    height: 32px;
  }
}

body.dark-mode .dynamic-button-container.sem-mode {
  background-color: #1820388c;
  border-color: #78a0ff40;
  box-shadow: 0 6px 24px #00000073;
}

body.dark-mode .sem-toggle-header {
  color: #d6e3ff;
  opacity: .95;
}

body.dark-mode .sem-mode-hint {
  color: #adc0ff;
  opacity: .85;
}

body.dark-mode .btn-toggle {
  color: #eaf1ff;
  background: #6896ff38;
  border: 1px solid #78a5ff80;
}

body.dark-mode .btn-toggle:hover {
  background: #78afff47;
}

body.dark-mode .btn-toggle.active {
  color: #0c162c;
  background: linear-gradient(135deg, #5b86ff, #86acff);
  border-color: #b4cdffe6;
}

.side-panel {
  z-index: 900;
  background: #fffffff2 linear-gradient(#fff, #f7f9fc);
  border: 1px solid #0000000d;
  border-radius: 12px;
  flex-direction: column;
  max-width: 320px;
  max-height: 80vh;
  padding: 10px;
  transition: opacity .5s ease-in-out, height .4s ease-in-out, width .4s ease-in-out, margin-left .4s ease-in-out, all .3s cubic-bezier(.25, .8, .25, 1);
  display: flex;
  position: fixed;
  top: auto;
  bottom: 10%;
  overflow-x: hidden;
  box-shadow: 0 4px 12px #00000014;
}

.side-panel-hidden {
  opacity: 0;
  pointer-events: none;
}

.side-panel-visible {
  opacity: 1;
  pointer-events: auto;
}

.side-panel-header {
  color: #424242;
  text-align: center;
  cursor: pointer;
  z-index: 2;
  background-color: #fffffff2;
  border-radius: 5px;
  flex-shrink: 0;
  width: 100%;
  margin-top: .15rem;
  margin-bottom: .5rem;
  padding: 8px 0;
  font-size: .9rem;
  font-weight: 500;
  position: sticky;
  top: 0;
}

.side-panel-header:hover {
  color: #555;
  background-color: #84848432;
  box-shadow: 0 2px 4px #0000001a;
}

.side-panel-content {
  opacity: 1;
  flex-direction: column;
  flex-grow: 1;
  align-items: flex-start;
  width: 100%;
  padding-right: 5px;
  transition: opacity .3s;
  display: flex;
  overflow: hidden auto;
}

.side-panel-minimized {
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  padding: 8px;
  display: flex;
  overflow: hidden !important;
}

.side-panel-minimized .side-panel-content {
  opacity: 0;
}

.side-panel-minimized .side-panel-header span {
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}

.side-panel-minimized .side-panel-arrow {
  display: none !important;
}

.side-panel-minimized .side-panel-header:hover {
  color: inherit !important;
  box-shadow: none !important;
  background-color: #0000 !important;
}

.side-panel-minimized > *, .side-panel-minimized > * * {
  pointer-events: none !important;
}

.side-panel-minimized .side-panel-header, .side-panel-minimized .side-panel-content {
  position: absolute;
}

.side-panel-minimized > * {
  pointer-events: none !important;
}

.side-panel-minimized > #space-panel-toggle-icon, .side-panel-minimized > #ai-panel-toggle-icon, .side-panel-minimized > #visibility-panel-toggle-icon {
  pointer-events: auto !important;
}

.space-panel {
  left: 10px;
}

.space-panel-minimized {
  margin-left: 0;
}

.ai-panel {
  bottom: 10%;
  left: auto;
  right: 10px;
}

.visibility-panel {
  bottom: calc(10% + 70px);
  left: auto;
  right: 10px;
}

.move-icon {
  opacity: .5;
  font-size: 2rem;
  transition: transform .3s, opacity .3s;
  top: 2px;
}

.move-icon:hover, .move-icon:focus {
  opacity: 1;
  outline: none;
  transform: scale(1.1);
}

.side-panel-arrow {
  pointer-events: none;
  opacity: 0;
  margin-right: 5px;
  transition: opacity .3s;
}

.side-panel-header:hover .side-panel-arrow {
  animation: 1s infinite moveLeftRight;
  opacity: 1 !important;
}

.side-panel-disable-hover .side-panel-header:hover .side-panel-arrow {
  opacity: 0;
  animation: none;
}

.side-panel-header .side-panel-arrow {
  margin-left: 5px;
  margin-right: 5px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.space-panel #space-arrow {
  left: 10px;
}

.ai-panel #ai-settings-arrow, .visibility-panel #visibility-arrow {
  right: 10px;
}

.side-panel-content > div {
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

@keyframes moveLeftRight {
  0% {
    transform: translateY(-50%)translateX(0);
  }

  50% {
    transform: translateY(-50%)translateX(-5px);
  }

  100% {
    transform: translateY(-50%)translateX(0);
  }
}

#space-panel-toggle-icon {
  cursor: pointer;
  z-index: 999;
  color: #6e8fc5;
  filter: drop-shadow(0 2px 3px #00000012);
  margin: 0 auto;
  font-size: 2em;
  transition: transform .2s, color .2s;
  display: block;
  position: relative;
  pointer-events: auto !important;
}

.space-panel:not(.side-panel-minimized) #space-panel-toggle-icon {
  display: none;
}

#space-panel-toggle-icon:hover {
  color: #547ab3;
  transform: scale(1.05);
}

#ai-panel-toggle-icon {
  cursor: pointer;
  z-index: 999;
  color: #6e8fc5;
  filter: drop-shadow(0 2px 3px #00000012);
  margin: 0 auto;
  font-size: 2em;
  transition: transform .2s, color .2s;
  display: block;
  position: relative;
  pointer-events: auto !important;
}

.ai-panel:not(.side-panel-minimized) #ai-panel-toggle-icon {
  display: none;
}

#ai-panel-toggle-icon:hover {
  color: #547ab3;
  transform: scale(1.05);
}

#visibility-panel-toggle-icon {
  cursor: pointer;
  z-index: 999;
  color: #6e8fc5;
  filter: drop-shadow(0 2px 3px #00000012);
  margin: 0 auto;
  font-size: 2em;
  transition: transform .2s, color .2s;
  display: block;
  position: relative;
  pointer-events: auto !important;
}

.visibility-panel:not(.side-panel-minimized) #visibility-panel-toggle-icon {
  display: none;
}

#visibility-panel-toggle-icon:hover {
  color: #547ab3;
  transform: scale(1.05);
}

.side-panel-minimized > #space-panel-toggle-icon, .side-panel-minimized > #ai-panel-toggle-icon, .side-panel-minimized > #visibility-panel-toggle-icon, .side-panel-minimized > #space-panel-toggle-icon *, .side-panel-minimized > #ai-panel-toggle-icon *, .side-panel-minimized > #visibility-panel-toggle-icon * {
  pointer-events: auto !important;
}

#space-panel-toggle-icon .svg-inline--fa, #ai-panel-toggle-icon .svg-inline--fa, #visibility-panel-toggle-icon .svg-inline--fa {
  width: 1em;
  height: 1em;
  overflow: visible;
  font-size: inherit !important;
}

.side-panel-minimized #space-panel-toggle-icon, .side-panel-minimized #ai-panel-toggle-icon, .side-panel-minimized #visibility-panel-toggle-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.side-panel-minimized #space-panel-toggle-icon:hover, .side-panel-minimized #ai-panel-toggle-icon:hover, .side-panel-minimized #visibility-panel-toggle-icon:hover {
  transform: translate(-50%, -50%)scale(1.05);
}

@media (width <= 768px) {
  .side-panel-minimized {
    width: 50px;
    height: 50px;
  }

  #space-panel-toggle-icon, #ai-panel-toggle-icon, #visibility-panel-toggle-icon {
    font-size: 1.75em;
  }

  .visibility-panel {
    bottom: calc(10% + 60px);
  }
}

@media (width >= 1600px) {
  .side-panel-minimized {
    width: 70px;
    height: 70px;
  }

  #space-panel-toggle-icon, #ai-panel-toggle-icon, #visibility-panel-toggle-icon {
    font-size: 2.25em;
  }

  .visibility-panel {
    bottom: calc(10% + 80px);
  }
}

.modal-close-button {
  color: #666;
  cursor: pointer;
  z-index: 10;
  opacity: .7;
  background: none;
  border: none;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 28px;
  font-weight: 300;
  line-height: 1;
  transition: all .2s;
  display: flex;
  position: absolute;
  top: 15px;
  right: 15px;
}

.modal-close-button:hover {
  color: #333;
  opacity: 1;
  background-color: #00000014;
  transform: scale(1.1);
}

.modal-close-button:active {
  background-color: #0000001f;
  transform: scale(.95);
}

.modal-close-button:focus {
  outline-offset: 2px;
  outline: 2px solid #007bff;
}

.dark-mode .modal-close-button {
  color: #aaa;
}

.dark-mode .modal-close-button:hover {
  color: #fff;
  background-color: #ffffff1a;
}

.dark-mode .modal-close-button:active {
  background-color: #ffffff26;
}

.modal-header .modal-close-button {
  position: absolute;
  top: 10px;
  right: 10px;
}

.modal-content-tight .modal-close-button {
  top: 10px;
  right: 10px;
}

.share-modal-overlay {
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background-color: #00000080;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  transition: opacity .5s, visibility .5s, pointer-events .5s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.share-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.share-modal-content {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  flex-direction: column;
  width: min(720px, 92vw);
  max-width: 900px;
  max-height: 80vh;
  padding: 20px 20px 84px;
  display: flex;
  overflow-y: auto;
  box-shadow: 0 10px 30px #0000001f;
}

@media only screen and (width <= 767px) {
  .share-modal-content {
    width: 94%;
    max-height: 90dvh;
    padding: 16px;
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }

  .access-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .link-permission-select-wrapper.visible {
    width: 100%;
    margin-left: 0;
  }
}

.share-modal-header, .share-modal-footer {
  background-color: #fffffff2;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  display: flex;
}

.share-modal-header {
  z-index: 2;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  box-shadow: 0 1px 2px #0000000f;
}

.share-modal-footer {
  z-index: 2;
  padding-bottom: max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid #eee;
  position: sticky;
  bottom: 0;
  box-shadow: 0 -1px 2px #0000000f;
}

.share-modal-section {
  background-color: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 16px;
  box-shadow: 0 1px 2px #0000000a;
}

.share-modal-section h3 {
  border-bottom: 1px solid #eee;
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 10px;
  font-size: 1.2em;
}

.share-modal-section:last-child {
  margin-bottom: 0;
}

.share-input-group {
  align-items: center;
  display: flex;
}

#share-email-input {
  flex-grow: 1;
  margin-right: 10px;
}

#share-email-button {
  flex-shrink: 0;
}

.access-options {
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  display: flex;
}

.link-permission-select-wrapper {
  opacity: 0;
  width: 0;
  max-height: 0;
  margin-left: 0;
  transition: max-height .3s, opacity .3s, width .3s;
  overflow: hidden;
}

.link-permission-select-wrapper.visible {
  opacity: 1;
  width: auto;
  min-width: 120px;
  max-height: 100px;
  margin-left: 10px;
}

#general-access-icon {
  margin-left: 10px;
  transition: transform .3s;
}

.creator-access select {
  color: #1a237e;
  background-image: linear-gradient(#e8eaf6 0%, #c5cae9 100%);
  border: 1px solid #1a237e;
  border-radius: 5px;
}

.creator-access select:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.creator-access select:after {
  border-top-color: #1a237e;
}

.creator-access select:disabled:hover, .creator-access select:disabled:focus {
  border-color: inherit;
  background-color: inherit;
  box-shadow: none;
}

.permission-options {
  margin-top: 20px;
}

.permission-options label {
  margin-bottom: 5px;
  display: block;
}

.permission-options select {
  border: 1px solid #ccc;
  border-radius: 5px;
  width: 100%;
  padding: 8px;
}

.share-helper-text {
  color: #4b5563;
  margin: 0 0 12px;
  line-height: 1.45;
}

.local-agent-controls {
  align-items: flex-end;
  gap: 12px;
}

.local-agent-permission {
  flex: 180px;
  margin-top: 0;
}

.local-agent-setup-output {
  color: #e5edf7;
  resize: vertical;
  background: #0f172a;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  width: 100%;
  min-height: 220px;
  margin-top: 12px;
  padding: 12px;
  font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
  font-size: .86rem;
  line-height: 1.45;
}

.local-agent-copy-row {
  justify-content: flex-end;
  margin-top: 12px;
}

.share-modal-header #share-item-name, .share-modal-header h2, .share-modal-header h3 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.3;
}

.share-input-group {
  gap: 10px;
}

@media only screen and (width <= 767px) {
  .share-modal-header #share-item-name, .share-modal-header h2, .share-modal-header h3 {
    font-size: 1.25rem;
  }

  .share-input-group {
    flex-wrap: wrap;
  }

  #share-email-input {
    flex: 100%;
    min-width: 0;
    margin-right: 0;
  }

  #share-email-button {
    width: 100%;
  }

  .local-agent-controls {
    align-items: stretch;
  }

  .local-agent-permission {
    flex: 100%;
  }

  #generate-local-agent-token-button, #copy-local-agent-setup-button {
    width: 100%;
  }
}

.login-modal-overlay {
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  background-color: #00000080;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .5s, visibility .5s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.login-modal-content {
  background-color: #fffffffa;
  border-radius: 10px;
  width: 50%;
  max-width: 400px;
  padding: 20px;
  box-shadow: 0 4px 8px #0000001a;
}

.login-modal-header, .login-modal-footer {
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  display: flex;
}

.login-modal-header {
  border-bottom: 1px solid #eee;
}

.login-modal-footer {
  border-top: 1px solid #eee;
}

.login-modal-body {
  padding: 20px 0;
}

.login-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.login-options {
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.google-signin-btn {
  color: #fff;
  cursor: pointer;
  background-color: #4285f4;
  border: none;
  border-radius: 4px;
  margin-bottom: 20px;
  padding: 10px 20px;
}

.separator {
  text-align: center;
  align-items: center;
  margin: 20px 0;
  display: flex;
}

.separator:before, .separator:after {
  content: "";
  border-bottom: 1px solid #ccc;
  flex: 1;
}

.separator:before {
  margin-right: 10px;
}

.separator:after {
  margin-left: 10px;
}

.form-group {
  margin-bottom: 15px;
}

.form-container {
  display: none;
  position: relative;
}

.form-container.active {
  display: block;
}

.form-container.disabled form {
  opacity: .6;
  pointer-events: none;
}

.signin-btn, .create-account-btn, .reset-password-btn {
  color: #fff;
  cursor: pointer;
  background-color: #4caf50;
  border: none;
  border-radius: 4px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 20px;
}

.signin-btn:hover, .create-account-btn:hover, .reset-password-btn:hover {
  background-color: #45a049;
}

.forgot-password-btn {
  color: #777;
  cursor: pointer;
  text-align: right;
  background: none;
  border: none;
  width: 100%;
  margin-top: 10px;
  font-size: 14px;
}

.forgot-password-btn:hover {
  color: #333;
}

.login-modal-footer {
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  display: flex;
}

.login-modal-footer button {
  color: #777;
  cursor: pointer;
  text-align: center;
  background: none;
  border: none;
  width: 120px;
  padding: 8px 16px;
  font-size: 14px;
}

.login-modal-footer button:hover {
  color: #333;
}

#forgot-password-form-container {
  text-align: center;
}

#forgot-password-form-container h3, #forgot-password-form-container .form-group {
  margin-bottom: 20px;
}

#forgot-password-form-container .form-group label {
  text-align: left;
  margin-bottom: 5px;
  display: block;
}

#forgot-password-form-container .form-group input {
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  padding: 10px;
}

#forgot-password-form-container .reset-password-btn {
  margin-top: 20px;
}

.gsi-material-button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  letter-spacing: .25px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  background-color: #fff;
  background-image: none;
  border: 1px solid #747775;
  border-radius: 20px;
  outline: none;
  width: 100%;
  min-width: min-content;
  max-width: 250px;
  height: 40px;
  margin-bottom: 10px;
  padding: 0 12px;
  font-family: Roboto, arial, sans-serif;
  font-size: 14px;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  position: relative;
  overflow: hidden;
}

.gsi-material-button .gsi-material-button-icon {
  width: 20px;
  min-width: 20px;
  height: 10px;
  margin-bottom: 10px;
  margin-right: 12px;
}

.gsi-material-button .gsi-material-button-content-wrapper {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.gsi-material-button .gsi-material-button-contents {
  text-overflow: ellipsis;
  vertical-align: top;
  flex-grow: 1;
  font-family: Roboto, arial, sans-serif;
  font-weight: 500;
  overflow: hidden;
}

.gsi-material-button .gsi-material-button-state {
  opacity: 0;
  transition: opacity .218s;
  position: absolute;
  inset: 0;
}

.gsi-material-button:disabled {
  cursor: not-allowed;
  background-color: #ffffff61;
  border-color: #1f1f1f1f;
}

.gsi-material-button:disabled .gsi-material-button-contents, .gsi-material-button:disabled .gsi-material-button-icon {
  opacity: .38;
}

.gsi-material-button:not(:disabled):active .gsi-material-button-state, .gsi-material-button:not(:disabled):focus .gsi-material-button-state {
  opacity: .12;
  background-color: #303030;
}

.gsi-material-button:not(:disabled):hover {
  box-shadow: 0 1px 2px #3c40434d, 0 1px 3px 1px #3c404326;
}

.gsi-material-button:not(:disabled):hover .gsi-material-button-state {
  opacity: .08;
  background-color: #303030;
}

.passwordless-description {
  color: #666;
  text-align: center;
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 14px;
}

.send-signin-link-btn {
  color: #fff;
  cursor: pointer;
  background-color: #4caf50;
  border: none;
  border-radius: 4px;
  width: 100%;
  margin-top: 10px;
  padding: 10px 20px;
}

.send-signin-link-btn:hover {
  background-color: #45a049;
}

.error-message {
  color: red;
  margin-bottom: 10px;
  display: none;
}

.create-account-btn.loading {
  pointer-events: none;
  position: relative;
}

.create-account-btn.loading:after {
  content: "";
  border: 2px solid #fff;
  border-top-color: #4caf50;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  animation: .6s linear infinite create-spin;
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
}

@keyframes create-spin {
  to {
    transform: translateY(-50%)rotate(360deg);
  }
}

.disabled-overlay {
  background-color: #fffc;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.disabled-overlay p {
  color: #333;
  font-size: 18px;
  font-weight: bold;
}

.apple-signin-button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  color: #fff;
  cursor: pointer;
  letter-spacing: .25px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  background-color: #000;
  background-image: none;
  border: none;
  border-radius: 20px;
  outline: none;
  width: 100%;
  min-width: min-content;
  max-width: 250px;
  height: 40px;
  margin-bottom: 10px;
  padding: 0 12px;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: 14px;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  position: relative;
  overflow: hidden;
}

.apple-signin-button-content {
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: relative;
}

.apple-signin-button-icon {
  flex-shrink: 0;
  width: 20px;
  min-width: 20px;
  margin-right: 12px;
}

.apple-signin-button-icon svg {
  fill: #fff;
}

.apple-signin-button-text {
  text-overflow: ellipsis;
  vertical-align: top;
  text-align: center;
  flex-grow: 1;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-weight: 500;
  overflow: hidden;
}

.apple-signin-button:hover {
  background-color: #333;
}

.apple-signin-button:active {
  background-color: #000;
}

.apple-signin-button:disabled {
  cursor: not-allowed;
  background-color: #666;
}

.stripe-modal-overlay {
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  background-color: #00000080;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .5s, visibility .5s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  overflow: auto;
}

.stripe-modal-content {
  background-color: #fff;
  border-radius: 15px;
  width: 95%;
  max-width: 1000px;
  max-height: 90vh;
  margin: 20px;
  padding: 30px;
  position: relative;
  overflow: auto;
  box-shadow: 0 10px 30px #0000001a;
}

.stripe-modal-header {
  border-bottom: 1px solid #eee;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  padding: 0 0 20px;
  display: flex;
  position: relative;
}

.stripe-modal-header h2 {
  margin-bottom: 5px;
  font-size: 24px;
}

.pay-as-you-go {
  color: #666;
  margin-bottom: 10px;
  font-size: 16px;
}

.stripe-close-button {
  color: #999;
  cursor: pointer;
  background: none;
  border: none;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  transition: color .3s;
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
}

.stripe-close-button:hover {
  color: #333;
}

.stripe-modal-body {
  padding: 20px 0;
  overflow: visible;
}

.stripe-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.credit-packages {
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-bottom: 30px;
  padding: 20px 0;
  display: flex;
  overflow: visible;
}

.credit-package {
  text-align: center;
  cursor: pointer;
  background-color: #f8f9fa;
  border: 2px solid #e9ecef;
  border-radius: 12px;
  flex-direction: column;
  flex: auto;
  justify-content: space-between;
  width: calc(25% - 20px);
  min-width: 200px;
  max-width: 250px;
  margin-top: 15px;
  padding: 20px;
  transition: all .3s;
  display: flex;
  position: relative;
}

.credit-package:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px #0000001a;
}

.credit-package.selected {
  background-color: #e8f5e9;
  border-color: #4caf50;
}

.credit-amount {
  color: #4caf50;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: bold;
}

.stripe-fee {
  color: #6c757d;
  margin-bottom: 5px;
  font-size: 14px;
}

.total-charge {
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

.stripe-checkout-btn {
  color: #fff;
  cursor: pointer;
  background-color: #4caf50;
  border: none;
  border-radius: 6px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: bold;
  transition: background-color .3s;
  display: block;
}

.stripe-checkout-btn:hover {
  background-color: #45a049;
}

.stripe-checkout-btn:disabled {
  cursor: not-allowed;
  background-color: #ccc;
}

.best-value {
  color: #fff;
  white-space: nowrap;
  background-color: #4caf50;
  border-radius: 12px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: bold;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}

.explain-pricing-btn {
  color: #4caf50;
  cursor: pointer;
  background: none;
  border: none;
  margin-bottom: 10px;
  font-size: 14px;
  text-decoration: underline;
}

.explain-pricing-btn:hover {
  color: #45a049;
}

.pricing-explanation {
  box-sizing: border-box;
  background: linear-gradient(to bottom right, #f8f9fa, #e9ecef);
  border-radius: 10px;
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  box-shadow: 0 4px 6px #0000001a;
}

h2 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
  font-size: 1.8em;
}

.intro {
  text-align: center;
  color: #666;
  margin-bottom: 30px;
}

.pricing-cards {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  display: flex;
}

.card {
  text-align: center;
  background: #fff;
  border-radius: 8px;
  flex: calc(33.333% - 20px);
  min-width: 250px;
  padding: 20px;
  box-shadow: 0 2px 4px #0000001a;
}

.card i {
  color: #007bff;
  margin-bottom: 10px;
  font-size: 2em;
}

.card h3 {
  color: #333;
  margin-bottom: 10px;
  font-size: 1.2em;
}

.example {
  background: #f8f9fa;
  border-radius: 5px;
  margin-top: 10px;
  padding: 10px;
  font-size: .9em;
}

.goal {
  text-align: center;
  background: #e9ecef;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 20px;
}

.goal i {
  color: #28a745;
  margin-bottom: 10px;
  font-size: 2em;
}

.got-it-btn {
  color: #fff;
  cursor: pointer;
  background: #007bff;
  border: none;
  border-radius: 5px;
  width: 200px;
  margin: 0 auto 20px;
  padding: 10px;
  font-size: 1em;
  transition: background .3s;
  display: block;
}

.got-it-btn:hover {
  background: #0056b3;
}

@media (width <= 768px) {
  .pricing-explanation {
    height: auto;
    min-height: 100%;
    padding: 15px;
    overflow-y: auto;
  }

  h2 {
    font-size: 1.5em;
  }

  .pricing-cards {
    flex-direction: column;
  }

  .card {
    min-width: unset;
    flex: 100%;
  }

  .got-it-btn {
    width: 100%;
    max-width: 200px;
    margin-bottom: 20px;
    position: static;
  }
}

@media (width <= 480px) {
  h2 {
    font-size: 1.3em;
  }

  .card h3 {
    font-size: 1.1em;
  }

  .example, .goal p {
    font-size: .85em;
  }
}

.dollar-package {
  background-color: #e8f5e9;
  border-color: #4caf50;
}

.dollar-package.disabled {
  opacity: .5;
  cursor: not-allowed;
}

.redeem-text {
  color: #4caf50;
  margin-top: 10px;
  font-size: 18px;
  font-weight: bold;
}

.countdown-timer {
  color: #666;
  margin-top: 10px;
  font-size: 14px;
}

.user-settings-modal-overlay {
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  background-color: #0009;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s, visibility .3s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.user-settings-modal-content {
  background-color: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 450px;
  padding: 2rem;
  position: relative;
  box-shadow: 0 4px 20px #00000026;
}

.user-settings-close-button {
  color: #999;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.5rem;
  transition: color .3s;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.user-settings-close-button:hover {
  color: #333;
}

.modal-title {
  color: #333;
  margin-bottom: 1.5rem;
  font-size: 1.6rem;
  font-weight: bold;
}

.user-info-section {
  align-items: center;
  margin-bottom: 1.5rem;
  display: flex;
}

.user-photo {
  object-fit: cover;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin-right: 1rem;
}

.user-details h3 {
  margin-bottom: .25rem;
  font-size: 1.2rem;
}

.user-details p {
  color: #666;
  font-size: .9rem;
}

.credit-info-section {
  background-color: #f8f8f8;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.credit-info-section h3 {
  margin-bottom: .5rem;
  font-size: 1rem;
}

.preferences-section {
  background-color: #f8f8f8;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  padding: 1rem;
}

.preferences-section h3 {
  color: #333;
  margin: 0 0 .75rem;
  font-size: 1rem;
}

.preferences-checkbox {
  color: #555;
  cursor: pointer;
  align-items: center;
  gap: .75rem;
  font-size: .95rem;
  display: flex;
}

.preferences-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.preferences-checkbox span {
  flex: 1;
}

.credit-balance {
  color: #4caf50;
  margin-bottom: .75rem;
  font-size: 1.6rem;
  font-weight: bold;
}

.action-buttons {
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-bottom: 1.5rem;
  display: grid;
}

.delete-account-section {
  text-align: center;
  border-top: 1px solid #eee;
  padding-top: 1rem;
}

.delete-account-button {
  color: #f44;
  background-color: #0000;
  border: 1px solid #f44;
  padding: .5rem 1rem;
  font-size: .9rem;
}

.delete-account-button:hover {
  background-color: #fff0f0;
}

.user-settings-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

#billing-portal-button {
  margin-top: .5rem;
}

.finance-action-button {
  color: #333;
  cursor: pointer;
  background-color: #f0f0f0;
  border: none;
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 5px 0;
  padding: 10px 15px;
  font-size: 14px;
  font-weight: 500;
  transition: all .3s;
  display: flex;
}

.finance-action-button:hover {
  background-color: #e0e0e0;
}

.finance-action-button i {
  margin-right: 8px;
  font-size: 16px;
}

#purchase-credits-button i {
  color: gold;
}

#billing-portal-button i {
  color: #4caf50;
}

.credit-info-section {
  flex-direction: column;
  align-items: stretch;
  display: flex;
}

.credit-balance {
  color: #4caf50;
  font-size: 1.6rem;
  font-weight: bold;
}

.credit-balance.negative-balance {
  color: #f44;
}

.api-modal-overlay {
  z-index: 5000;
  opacity: 0;
  visibility: hidden;
  background-color: #00000080;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .5s, visibility .5s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.api-modal-content {
  background-color: #ffffffe6;
  border-radius: 10px;
  width: 50%;
  max-width: 900px;
  padding: 20px;
  box-shadow: 0 4px 8px #0000001a;
}

.api-modal-header, .api-modal-footer {
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  display: flex;
}

.api-modal-header {
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.api-modal-footer {
  border-top: 1px solid #eee;
  justify-content: flex-end;
  padding: 10px 0;
  display: flex;
}

.api-modal-body {
  padding: 20px 0;
}

.theme-options {
  display: flex;
}

.api-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.api-modal-content p, .api-modal-content h1, .api-modal-content h2 {
  margin: 0 0 10px;
}

#modal-request-details-content {
  border-radius: 10px;
  max-height: 70vh;
  overflow-y: auto;
}

.no-background {
  background: none !important;
}

#add-content-modal {
  -webkit-backdrop-filter: blur(6px);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  background: #1118278c;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

#add-content-modal.visible {
  opacity: 1;
  visibility: visible;
}

#add-content-modal .add-content-modal-content {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: relative;
  overflow: hidden;
  transform: none;
  box-shadow: 0 12px 24px #1118271a;
}

#add-content-modal .add-content-modal-header {
  color: #111827;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  justify-content: space-between;
  align-items: center;
  padding: 24px 32px;
  display: flex;
  position: relative;
  overflow: hidden;
}

#add-content-modal .add-content-modal-header:before {
  content: none;
}

#add-content-modal .add-content-modal-header h2 {
  letter-spacing: -.5px;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  display: flex;
}

#add-content-modal .add-content-modal-header h2 i {
  opacity: .9;
  font-size: 20px;
}

#add-content-modal .close-button {
  cursor: pointer;
  color: #374151;
  background: none;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  font-size: 24px;
  line-height: 1;
  transition: all .3s;
  display: flex;
}

#add-content-modal .close-button:hover {
  background: #f3f4f6;
  border-color: #e5e7eb;
  transform: none;
}

#add-content-modal .add-content-modal-body {
  max-height: calc(90vh - 200px);
  padding: 32px;
  overflow-y: auto;
}

#add-content-modal .add-content-options {
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 16px;
  width: 100%;
  margin: 0;
  display: grid;
}

#add-content-modal .add-content-option {
  cursor: pointer;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  width: 100%;
  padding: 20px;
  transition: box-shadow .2s, transform .2s, border-color .2s;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 6px #1118270f;
}

#add-content-modal .add-content-option:before {
  content: "";
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
  height: 4px;
  transition: transform .3s;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  transform: scaleX(0);
}

#add-content-modal .add-content-option:hover {
  border-color: #2e6ef6;
  box-shadow: 0 8px 16px #1118271a;
  z-index: 10 !important;
  transform: translateY(-4px)scale(1.01) !important;
}

#add-content-modal .add-content-option:hover:before {
  transform: scaleX(1);
}

#add-content-modal .add-content-option h3 {
  color: #2d3748;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
  display: flex;
}

#add-content-modal .add-content-option h3 i {
  color: #667eea;
  font-size: 20px;
}

#add-content-modal input[type="text"], #add-content-modal input[type="url"], #add-content-modal input[type="file"], #add-content-modal textarea {
  color: #2d3748;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  width: 100%;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 15px;
  transition: all .3s;
}

#add-content-modal input[type="text"]:focus, #add-content-modal input[type="url"]:focus, #add-content-modal textarea:focus {
  border-color: #2e6ef6;
  outline: none;
  transform: none;
  box-shadow: 0 0 0 2px #2e6ef626;
}

#add-content-modal input[type="text"]::placeholder, #add-content-modal input[type="url"]::placeholder, #add-content-modal textarea::placeholder {
  color: #a0aec0;
}

#add-content-modal .file-input-wrapper {
  width: 100%;
  display: inline-block;
  position: relative;
  overflow: hidden;
}

#add-content-modal input[type="file"] {
  position: absolute;
  left: -9999px;
}

#add-content-modal .file-input-label {
  color: #fff;
  cursor: pointer;
  background: #2e6ef6;
  border: 1px solid #2e6ef63d;
  border-radius: 10px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 16px;
  font-weight: 500;
  transition: all .3s;
  display: flex;
}

#add-content-modal .file-input-label:hover {
  border-style: solid;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px #2e6ef640;
}

#add-content-modal .file-input-label i {
  font-size: 20px;
}

#add-content-modal .add-content-button, #add-content-modal .action-button {
  cursor: pointer;
  border: none;
  border-radius: 10px;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 600;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  display: inline-flex;
  position: relative;
  overflow: hidden;
}

#add-content-modal .add-content-button {
  color: #fff;
  background: #2e6ef6;
  box-shadow: 0 6px 12px #2e6ef633;
}

#add-content-modal .add-content-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -3px #667eea80;
}

#add-content-modal .add-content-button:active {
  transform: translateY(0);
}

#add-content-modal .add-content-button i {
  font-size: 16px;
}

#add-content-modal .secondary-button {
  color: #667eea;
  background: #fff;
  border: 2px solid #667eea;
}

#add-content-modal .secondary-button:hover {
  color: #fff;
  background: #667eea;
}

#add-content-modal .help-text {
  color: #718096;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 13px;
  display: flex;
}

#add-content-modal .help-text i {
  color: #a0aec0;
  font-size: 14px;
}

#add-content-modal .loading-spinner {
  border: 3px solid #ffffff4d;
  border-top-color: #fff;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: .8s linear infinite spin;
  display: inline-block;
}

#add-content-modal .message {
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 16px;
  animation: .3s slideInUp;
  display: flex;
}

@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#add-content-modal .message.success {
  color: #fff;
  background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
}

#add-content-modal .message.error {
  color: #fff;
  background: linear-gradient(135deg, #fc8181 0%, #f56565 100%);
}

#add-content-modal .message i {
  font-size: 18px;
}

#add-content-modal .content-tabs {
  border-bottom: 2px solid #e1e8ed;
  gap: 8px;
  margin-bottom: 24px;
  display: flex;
}

#add-content-modal .content-tab {
  color: #718096;
  cursor: pointer;
  background: none;
  border: none;
  border-bottom: 3px solid #0000;
  margin-bottom: -2px;
  padding: 12px 20px;
  font-weight: 500;
  transition: all .3s;
  position: relative;
}

#add-content-modal .content-tab:hover {
  color: #667eea;
  background: #667eea0d;
}

#add-content-modal .content-tab.active {
  color: #667eea;
  background: #667eea1a;
  border-bottom-color: #667eea;
}

@media (width <= 600px) {
  #add-content-modal .add-content-modal-content {
    width: 95%;
    max-height: 95vh;
    margin: 10px;
  }

  #add-content-modal .add-content-modal-header, #add-content-modal .add-content-modal-body {
    padding: 20px;
  }

  #add-content-modal .add-content-option {
    padding: 16px;
  }
}

@media (prefers-color-scheme: dark) {
  #add-content-modal .add-content-modal-content {
    background: #1a202c;
  }

  #add-content-modal .add-content-option {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    border-color: #4a5568;
  }

  #add-content-modal .add-content-option h3 {
    color: #e2e8f0;
  }

  #add-content-modal input[type="text"], #add-content-modal input[type="url"], #add-content-modal input[type="file"], #add-content-modal textarea {
    color: #e2e8f0;
    background: #2d3748;
    border-color: #4a5568;
  }

  #add-content-modal .help-text {
    color: #a0aec0;
  }
}

.shortcut-key-container {
  gap: 4px;
  display: flex;
}

.shortcut-key {
  border: 1px solid #333;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  padding: 2px 6px;
  font-size: 12px;
  font-weight: 600;
  display: flex;
}

.shortcut-container {
  flex-direction: row;
  justify-content: space-between;
  gap: 16px;
  width: 300px;
  display: flex;
}

#shortcuts-modal-list {
  margin: 0;
  padding: 0;
  list-style-type: none;

  & li {
    padding-bottom: 12px;
  }
}

.friends-modal-overlay {
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  background-color: #0009;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s, visibility .3s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.friends-modal-content {
  background-color: #fff;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 80vh;
  padding: 30px;
  position: relative;
  box-shadow: 0 4px 12px #0003;
}

.friends-modal-header {
  margin-bottom: 20px;
}

.friends-modal-header h2 {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

.friends-close-button {
  color: #999;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 24px;
  transition: color .3s;
  position: absolute;
  top: 15px;
  right: 15px;
}

.friends-close-button:hover {
  color: #333;
}

.friends-modal-body {
  margin-bottom: 30px;
}

#new-friend-id {
  border: 1px solid #ccc;
  border-radius: 4px;
  width: calc(100% - 110px);
  margin-right: 10px;
  padding: 10px;
  font-size: 16px;
}

#friends-list {
  max-height: 60vh;
  padding: 0;
  list-style-type: none;
  overflow-y: auto;
}

#friends-list li {
  margin-bottom: 15px;
}

#friends-list li ul {
  padding-left: 20px;
  list-style-type: none;
}

#friends-list li ul li {
  margin-bottom: 10px;
}

#friends-list li ul li button {
  color: #fff;
  cursor: pointer;
  background-color: #007bff;
  border: none;
  border-radius: 4px;
  margin-left: 10px;
  padding: 5px 10px;
  transition: background-color .3s;
}

#friends-list li ul li button:hover {
  background-color: #0056b3;
}

.friends-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.friends-modal-content ul li ul li span:hover {
  color: #4caf50;
  cursor: pointer;
  text-decoration: underline;
}

.friends-modal-content ul {
  padding: 0;
  list-style-type: none;
}

.friends-modal-content li {
  margin-bottom: 10px;
}

.friends-modal-content li ul {
  margin-top: 5px;
  padding-left: 20px;
}

.autocomplete-suggestions {
  z-index: 1000;
  background-color: #fff;
  border: 1px solid #ccc;
  max-height: 150px;
  position: absolute;
  overflow-y: auto;
}

.suggestion-item {
  cursor: pointer;
  border: 1px solid #0000;
  border-radius: 4px;
  padding: 8px;
  transition: background-color .3s, color .3s;
  position: relative;
}

.suggestion-item:hover {
  color: #007bff;
  background-color: #f0f0f0;
  border-color: #007bff;
}

.suggestion-item:after {
  content: "Click to add friend";
  color: #666;
  margin-top: 5px;
  font-size: 12px;
  transition: color .3s;
  display: block;
}

.suggestion-item:hover:after {
  color: #007bff;
}

.friend-item {
  border-bottom: 1px solid #ccc;
  flex-direction: column;
  align-items: flex-start;
  padding: 10px;
  display: flex;
  position: relative;
}

.name-container {
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.friend-avatar {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}

.friend-name {
  margin-right: 10px;
  font-size: 18px;
  font-weight: bold;
}

.friend-status {
  border-radius: 50%;
  width: 10px;
  height: 10px;
}

.friend-status.online {
  background-color: #4caf50;
}

.friend-status.offline {
  background-color: #ccc;
}

.friend-actions {
  gap: 10px;
  margin-bottom: 10px;
  display: flex;
}

.graph-list-container {
  width: 100%;
}

.graph-list-heading {
  color: #007bff;
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
}

.friends-tooltip {
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.friends-tooltip .friends-tooltiptext {
  visibility: hidden;
  color: #fff;
  text-align: center;
  z-index: 1;
  opacity: 0;
  background-color: #4caf50;
  border-radius: 6px;
  width: 120px;
  margin-left: -60px;
  padding: 5px;
  transition: opacity .3s .5s;
  position: absolute;
  bottom: 125%;
  left: 50%;
}

.friends-tooltip .friends-tooltiptext:after {
  content: "";
  border: 5px solid #0000;
  border-top-color: #4caf50;
  margin-left: -5px;
  position: absolute;
  top: 100%;
  left: 50%;
}

.friends-tooltip:hover .friends-tooltiptext {
  visibility: visible;
  opacity: 1;
  transition-delay: .5s;
}

.loading-container {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100px;
  display: flex;
}

.loading-message {
  color: #333;
  margin-top: 10px;
  font-size: 16px;
}

.last-login {
  color: #666;
  margin-top: 5px;
  font-size: 12px;
}

.admin-modal-overlay {
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  background-color: #0009;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s, visibility .3s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.admin-modal-content {
  background-color: #fff;
  border-radius: 8px;
  flex-direction: column;
  width: 95%;
  max-width: 1200px;
  height: 95vh;
  padding: 20px;
  display: flex;
  box-shadow: 0 4px 12px #0003;
}

.admin-modal-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

.admin-modal-header h2 {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

.admin-close-button {
  cursor: pointer;
  color: #666;
  background: none;
  border: none;
  font-size: 24px;
}

.admin-modal-body {
  flex-direction: column;
  flex-grow: 1;
  height: calc(100% - 60px);
  display: flex;
  overflow-y: auto;
}

.users-section {
  flex-direction: column;
  flex: none;
  margin-bottom: 20px;
  transition: flex .3s;
  display: flex;
}

.users-section:first-child {
  flex: auto;
}

.users-section-header {
  cursor: pointer;
  background-color: #f5f5f5;
  border-radius: 4px;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  display: flex;
}

.users-section-header h3 {
  color: #333;
  margin: 0;
  font-size: 18px;
}

.toggle-button {
  color: #333;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  padding: 8px 16px;
  font-size: 14px;
  transition: background-color .3s;
}

.toggle-button:hover {
  background-color: #e0e0e0;
}

.admin-user-list {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  flex: 1;
  min-height: 100px;
  padding: 10px;
  list-style-type: none;
  transition: max-height .3s ease-out, opacity .3s ease-out, padding .3s ease-out;
  overflow-y: auto;
}

.admin-user-list.hidden {
  opacity: 0;
  border: none;
  flex: 0 1 0;
  min-height: 0;
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.admin-user-item {
  border-bottom: 1px solid #eee;
  grid-template-columns: 1fr auto;
  gap: 10px;
  padding: 10px;
  display: grid;
}

.admin-user-info {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  display: grid;
}

.admin-user-name {
  color: #333;
  font-weight: bold;
}

.admin-user-email {
  color: #666;
}

.admin-user-status {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-right: 5px;
  display: inline-block;
}

.admin-user-status.online {
  background-color: #4caf50;
}

.admin-user-status.offline {
  background-color: #f44336;
}

.admin-user-space {
  color: #666;
  margin-top: 5px;
  font-style: italic;
}

.admin-user-actions {
  align-items: center;
  gap: 10px;
  display: flex;
}

.admin-action-button {
  color: #333;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 1px solid #d0d0d0;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 14px;
  transition: background-color .3s;
}

.admin-action-button:hover {
  background-color: #e0e0e0;
}

.admin-action-button.delete {
  color: #d32f2f;
  background-color: #ffebee;
  border-color: #ffcdd2;
}

.admin-action-button.delete:hover {
  background-color: #ffcdd2;
}

.admin-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.admin-spaces-heading {
  color: #333;
  margin-top: 5px;
  font-weight: bold;
}

.admin-spaces-list {
  margin: 5px 0;
  padding-left: 10px;
  list-style-type: none;
}

.admin-spaces-list li {
  margin-bottom: 3px;
}

.admin-spaces-list a {
  color: #1976d2;
  text-decoration: none;
}

.admin-spaces-list a:hover {
  text-decoration: underline;
}

.admin-back-button {
  color: #1976d2;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 16px;
}

.user-detail {
  margin-bottom: 10px;
}

#root-graph-link {
  color: #1976d2;
  text-decoration: none;
}

#root-graph-link:hover {
  text-decoration: underline;
}

#delete-user-btn {
  margin-top: 20px;
}

.friends-list {
  max-height: 300px;
  margin-top: 10px;
  padding-left: 10px;
  overflow-y: auto;
}

.friend-item {
  border-bottom: 1px solid #eee;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 8px 0;
  display: flex;
}

.friend-item:last-child {
  border-bottom: none;
}

.friend-item span {
  margin-bottom: 4px;
}

.friend-item .admin-action-button {
  align-self: flex-start;
  padding: 4px 8px;
  font-size: .9em;
}

#user-chats-list {
  padding: 0;
  list-style-type: none;
}

.chat-item {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 15px;
  transition: box-shadow .3s;
}

.chat-item:hover {
  box-shadow: 0 2px 5px #0000001a;
}

.chat-item div {
  margin-bottom: 5px;
}

#chat-messages-list {
  padding: 0;
  list-style-type: none;
}

.message-item {
  background-color: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  max-width: 80%;
  margin-bottom: 10px;
  padding: 10px 15px;
}

.message-item.user {
  background-color: #e3f2fd;
  align-self: flex-end;
  margin-left: auto;
}

.message-item.other {
  background-color: #f5f5f5;
  align-self: flex-start;
}

.message-item div {
  margin-bottom: 5px;
}

.message-timestamp {
  color: #888;
  font-size: .8em;
}

.admin-modal-content, .admin-user-list {
  scrollbar-width: thin;
  scrollbar-color: #a0a0a0 #f0f0f0;
}

.admin-modal-content::-webkit-scrollbar {
  width: 8px;
}

.admin-user-list::-webkit-scrollbar {
  width: 8px;
}

.admin-modal-content::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.admin-user-list::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.admin-modal-content::-webkit-scrollbar-thumb {
  background-color: #a0a0a0;
  border: 2px solid #f0f0f0;
  border-radius: 4px;
}

.admin-user-list::-webkit-scrollbar-thumb {
  background-color: #a0a0a0;
  border: 2px solid #f0f0f0;
  border-radius: 4px;
}

.user-detail strong {
  width: 120px;
  font-weight: 600;
  display: inline-block;
}

.admin-modal-content a {
  color: #1976d2;
  text-decoration: none;
  transition: color .3s;
}

.admin-modal-content a:hover {
  color: #1565c0;
  text-decoration: underline;
}

.admin-action-button.message {
  color: #fff;
  background-color: #4caf50;
  margin-left: 5px;
}

.admin-action-button.message:hover {
  background-color: #45a049;
}

.admin-content-modal-card {
  max-width: 640px;
  height: auto;
  max-height: 90vh;
}

.admin-content-body, .admin-content-form {
  flex-direction: column;
  gap: 16px;
  display: flex;
}

.admin-content-field {
  flex-direction: column;
  gap: 6px;
  display: flex;
}

.admin-content-field label {
  color: #2d3748;
  font-weight: 600;
}

.admin-content-field input, .admin-content-field textarea, .admin-content-field select {
  border: 1px solid #d0d7de;
  border-radius: 6px;
  padding: 10px 12px;
  font-size: 15px;
  transition: border-color .2s, box-shadow .2s;
}

.admin-content-field input:focus, .admin-content-field textarea:focus, .admin-content-field select:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 3px #6366f133;
}

.admin-content-section {
  gap: 16px;
  display: none;
}

.admin-content-section.active {
  flex-direction: column;
  display: flex;
}

.admin-content-actions {
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
  display: flex;
}

.admin-content-button {
  cursor: pointer;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  font-size: 15px;
  font-weight: 600;
  transition: background-color .2s, box-shadow .2s;
}

.admin-content-button.primary {
  color: #fff;
  background: #2563eb;
}

.admin-content-button.primary:hover:not(:disabled) {
  background: #1d4ed8;
}

.admin-content-button.secondary {
  color: #1e293b;
  background: #f1f5f9;
}

.admin-content-button.secondary:hover:not(:disabled) {
  background: #e2e8f0;
}

.admin-content-button:disabled {
  cursor: not-allowed;
  opacity: .6;
}

.admin-content-status {
  color: #475569;
  min-height: 24px;
  font-size: 14px;
}

.admin-content-status[data-status-type="success"] {
  color: #16a34a;
}

.admin-content-status[data-status-type="error"] {
  color: #dc2626;
}

.admin-content-status[data-status-type="info"] {
  color: #2563eb;
}

.admin-content-overlay.processing .admin-content-button {
  cursor: progress;
}

body.admin-modal-open {
  overflow: hidden;
}

.search-modal-overlay {
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background-color: #0009;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s ease-in-out, visibility .3s ease-in-out;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.search-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.search-modal-content {
  background-color: #fff;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  padding: 30px;
  transition: transform .3s ease-in-out;
  position: absolute;
  top: 50%;
  left: 50%;
  overflow-y: auto;
  transform: translate(-50%, -50%)translateY(0);
  box-shadow: 0 4px 12px #0003;
}

.search-modal-overlay.modal-bottom .search-modal-content {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  transform: translate(-50%, -75%)translateY(100%);
}

.search-modal-header {
  z-index: 1002;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  display: flex;
  position: sticky;
  top: 0;
}

.search-modal-header h2 {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

.search-modal-close-button, .search-modal-move-up-button {
  cursor: pointer;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  padding: 5px 10px;
  font-size: 14px;
  transition: background-color .3s;
  position: absolute;
  top: 10px;
}

.search-modal-close-button {
  right: 10px;
}

.search-modal-move-up-button {
  right: 50px;
}

.search-modal-close-button:hover, .search-modal-move-up-button:hover {
  background-color: #e0e0e0;
}

.search-modal-move-up-button.hidden {
  display: none;
}

.search-modal-sync-status {
  background-color: #f0f8ff;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  max-height: 50px;
  margin-bottom: 15px;
  padding: 10px;
  transition: all .3s ease-in-out;
  display: flex;
  overflow: hidden;
}

.search-modal-sync-status.hidden {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  padding: 0;
}

.search-modal-sync-spinner {
  border: 2px solid #3498db;
  border-top-color: #0000;
  border-radius: 50%;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  animation: 1s linear infinite spin;
}

.search-modal-sync-message {
  color: #2c3e50;
  font-size: 14px;
  line-height: 1.4;
}

.search-modal-body {
  flex: 1;
}

.search-modal-form {
  flex-direction: column;
  margin-bottom: 20px;
  display: flex;
}

.search-modal-input-container {
  gap: 10px;
  margin-bottom: 20px;
  display: flex;
}

.search-modal-input-container input[type="text"] {
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  flex: 1;
  padding: 12px 15px;
  font-size: 16px;
  transition: border-color .3s, box-shadow .3s;
}

.search-modal-input-container input[type="text"]:focus {
  border-color: #06c;
  outline: none;
  box-shadow: 0 0 0 3px #06c3;
}

.search-modal-type {
  margin-bottom: 20px;
}

.search-modal-options-label {
  color: #333;
  margin-bottom: 8px;
  font-weight: 600;
  display: block;
}

.search-modal-type-options {
  gap: 20px;
  display: flex;
}

.search-modal-type-options label {
  cursor: pointer;
  align-items: center;
  display: flex;
}

.search-modal-type-options input[type="radio"] {
  appearance: none;
  border: 2px solid #06c;
  border-radius: 50%;
  outline: none;
  width: 18px;
  height: 18px;
  margin-right: 8px;
  transition: all .2s ease-in-out;
}

.search-modal-type-options input[type="radio"]:checked {
  background-color: #06c;
  box-shadow: inset 0 0 0 4px #fff;
}

.search-modal-type-options input[type="radio"]:hover {
  border-color: #004999;
}

.search-modal-options-container {
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
  display: flex;
}

.search-modal-scope-options {
  gap: 10px;
  display: flex;
}

.search-modal-scope-option {
  flex: 1;
}

.search-modal-scope-option input[type="radio"] {
  display: none;
}

.search-modal-scope-button {
  text-align: center;
  cursor: pointer;
  background-color: #f0f0f0;
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  width: 100%;
  padding: 10px;
  transition: all .3s;
  display: block;
}

.search-modal-scope-option input[type="radio"]:checked + .search-modal-scope-button {
  color: #fff;
  background-color: #06c;
  border-color: #06c;
}

.search-modal-scope-button:hover {
  background-color: #e0e0e0;
}

.search-modal-scope-option input[type="radio"]:checked + .search-modal-scope-button:hover {
  background-color: #004999;
}

.search-modal-button {
  color: #fff;
  cursor: pointer;
  background-color: #06c;
  border: none;
  border-radius: 6px;
  flex-shrink: 0;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 600;
  transition: background-color .3s, transform .1s;
}

.search-modal-button:hover {
  background-color: #004999;
}

.search-modal-button:active {
  transform: scale(.98);
}

.search-modal-results {
  margin-top: 20px;
}

.search-modal-result-item {
  border-bottom: 1px solid #eee;
  padding: 20px;
  transition: background-color .2s;
}

.search-modal-result-item:last-child {
  border-bottom: none;
}

.search-modal-result-item:hover {
  background-color: #f9f9f9;
}

.search-modal-result-label {
  color: #333;
  margin-bottom: 5px;
  font-size: 18px;
  font-weight: bold;
}

.search-modal-result-graph-id, .search-modal-result-timestamp, .search-modal-result-score {
  color: #666;
  margin-bottom: 3px;
  font-size: 14px;
}

.search-modal-pagination {
  justify-content: center;
  margin-top: 20px;
  display: flex;
}

.search-modal-pagination button {
  cursor: pointer;
  color: #333;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  margin: 0 5px;
  padding: 8px 16px;
  font-size: 14px;
  transition: background-color .3s, color .3s;
}

.search-modal-pagination button:hover:not(:disabled) {
  color: #fff;
  background-color: #06c;
}

.search-modal-pagination button:disabled {
  color: #999;
  cursor: not-allowed;
  background-color: #e0e0e0;
}

.search-modal-loading {
  text-align: center;
  color: #666;
  border-radius: 5px;
  font-size: 18px;
}

.search-modal-error {
  text-align: center;
  color: #f44;
  margin-top: 20px;
}

.search-modal-zoom-button {
  color: #fff;
  cursor: pointer;
  background-color: #06c;
  border: none;
  border-radius: 4px;
  margin-top: 10px;
  padding: 5px 10px;
  transition: background-color .3s;
}

.search-modal-zoom-button:hover {
  background-color: #004999;
}

@media (width <= 600px) {
  .search-modal-input-container {
    flex-direction: column;
  }

  .search-modal-button {
    width: 100%;
  }
}

.search-modal-load-graph-button {
  color: #fff;
  text-align: center;
  cursor: pointer;
  background-color: #4caf50;
  border: none;
  border-radius: 3px;
  margin: 4px 2px;
  padding: 5px 10px;
  font-size: 14px;
  text-decoration: none;
  display: inline-block;
}

.search-modal-load-graph-button:hover {
  background-color: #45a049;
}

.model-costs-modal-overlay {
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  background-color: #0009;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s, visibility .3s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.model-costs-modal-content {
  background-color: #f9fafc;
  border-radius: 12px;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  padding: 2rem;
  position: relative;
  overflow-y: auto;
  box-shadow: 0 4px 20px #00000026;
}

.model-costs-close-button {
  color: #999;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.5rem;
  transition: color .3s;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.model-costs-close-button:hover {
  color: #333;
}

.modal-title {
  color: #333;
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  font-weight: bold;
}

.model-costs-container {
  flex-direction: column;
  gap: 2rem;
  display: flex;
}

.company-section {
  background-color: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px #0000000d;
}

.company-title {
  color: #2c3e50;
  border-bottom: 2px solid #3498db;
  margin-bottom: 1rem;
  padding-bottom: .5rem;
  font-size: 1.4rem;
  font-weight: 600;
}

.company-models {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
  display: grid;
}

.cost-item {
  background-color: #f7f9fc;
  border: 1px solid #e0e5eb;
  border-radius: 8px;
  padding: 1rem;
  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
  box-shadow: 0 1px 3px #0000001a;
}

.cost-item:hover {
  background-color: #f0f4f8;
  transform: translateY(-2px);
  box-shadow: 0 4px 6px #0000001a;
}

.cost-item h4 {
  color: #2c3e50;
  margin-bottom: .5rem;
  font-size: 1rem;
}

.cost-item p {
  color: #34495e;
  margin: .25rem 0;
  font-size: .9rem;
}

.model-costs-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

@media (width <= 768px) {
  .company-models {
    grid-template-columns: 1fr;
  }
}

.copyable {
  cursor: pointer;
  transition: background-color .3s;
}

.copyable:hover {
  background-color: #e6e9ed;
}

.cost-estimate {
  color: #666;
  border-top: 1px solid #eee;
  margin-top: 10px;
  padding-top: 10px;
  font-style: italic;
}

.cost-item p {
  margin: 5px 0;
}

.cost-item h4 {
  margin-bottom: 10px;
}

.tooltip {
  margin-top: 10px;
}

#reasoning-level-info, #open-model-costs-modal {
  cursor: pointer;
  color: #007bff;
  margin-left: 5px;
}

#open-model-costs-modal:hover {
  color: #0056b3;
}

.cost-calculator {
  background-color: #fff;
  border: 1px solid #e0e5eb;
  border-radius: 8px;
  margin-bottom: 2rem;
  padding: 1.5rem;
  box-shadow: 0 2px 4px #0000000d;
}

.cost-calculator h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-size: 1.4rem;
}

.cost-calculator input, .cost-calculator select {
  border: 1px solid #e0e5eb;
  border-radius: 4px;
  width: 100%;
  margin-bottom: 1rem;
  padding: .5rem;
}

.cost-calculator button {
  color: #fff;
  cursor: pointer;
  background-color: #3498db;
  border: none;
  border-radius: 4px;
  padding: .5rem 1rem;
  transition: background-color .3s;
}

.cost-calculator button:hover {
  background-color: #2980b9;
}

#cost-result {
  color: #2c3e50;
  margin-top: 1rem;
  font-weight: bold;
}

.token-info-section {
  background-color: #f0f4f8;
  border-radius: 8px;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  display: flex;
}

.token-info-text {
  flex: 1;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.token-info-section i {
  color: #3498db;
  flex-shrink: 0;
  font-size: 1.5rem;
}

.token-info-section p {
  color: #34495e;
  flex: calc(100% - 3.5rem);
  min-width: 200px;
  margin: 0;
  font-size: .9rem;
}

.learn-more-button {
  color: #fff;
  cursor: pointer;
  background-color: #3498db;
  border: none;
  border-radius: 4px;
  flex-shrink: 0;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  padding: .5rem 1rem;
  font-size: .9rem;
  transition: background-color .3s, transform .2s;
  display: flex;
}

.learn-more-button i {
  color: inherit;
  font-size: .9rem;
}

.learn-more-button:hover {
  background-color: #2980b9;
  transform: translateY(-2px);
}

.learn-more-button:hover i {
  opacity: 1;
}

.token-info-modal {
  z-index: 1100;
  background-color: #0009;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.token-info-content {
  background-color: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  padding: 2rem;
  box-shadow: 0 4px 20px #00000026;
}

.token-info-content h3 {
  color: #2c3e50;
  margin-bottom: 1rem;
}

.token-info-content ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;
}

.token-info-content li {
  margin-bottom: .5rem;
}

#close-token-info {
  margin: 1rem auto 0;
  display: block;
}

@media (width <= 600px) {
  .token-info-section {
    flex-direction: column;
    align-items: flex-start;
  }

  .learn-more-button {
    align-self: flex-start;
    margin-left: 0;
  }
}

.multiple-models-modal-overlay {
  z-index: 1000;
  background-color: #00000080;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
}

.multiple-models-modal-overlay.visible {
  display: flex;
}

.multiple-models-modal-content {
  background: #fff;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  padding: 20px;
  overflow-y: auto;
}

.multiple-models-modal-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

.multiple-models-close-button, .custom-system-prompt-modal-close {
  cursor: pointer;
  color: #666;
  background: none;
  border: none;
  font-size: 24px;
  transition: color .2s;
}

.custom-system-prompt-modal-close:hover, .multiple-models-close-button:hover {
  color: #333;
}

.multiple-models-preset-section {
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  display: flex;
}

.multiple-models-container {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin: 20px 0;
  display: grid;
}

.multiple-models-card {
  background: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px #0000000d;
}

.multiple-models-card-header {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  display: flex;
}

.multiple-models-remove-card-button {
  cursor: pointer;
  color: #666;
  background: none;
  border: none;
  font-size: 20px;
  transition: color .2s;
}

.multiple-models-remove-card-button:hover {
  color: #f44;
}

.multiple-models-provider-container {
  margin-bottom: 15px;
}

.multiple-models-settings {
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-top: 15px;
  display: grid;
}

.multiple-models-input-group {
  flex-direction: column;
  gap: 5px;
  display: flex;
}

.multiple-models-input-group label {
  color: #666;
  font-size: .9rem;
}

.multiple-models-analyze-section {
  background: #f8f9fa;
  border: 1px solid #eee;
  border-radius: 8px;
  margin: 20px 0;
  padding: 15px;
}

.multiple-models-footer {
  border-top: 1px solid #eee;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 15px;
  display: flex;
}

.multiple-models-add-section {
  justify-content: center;
  margin: 20px 0;
  display: flex;
}

.multiple-models-add-button {
  cursor: pointer;
  background-color: #f8f9fa;
  border: 1px dashed #ccc;
  border-radius: 4px;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  transition: all .2s;
  display: flex;
}

.multiple-models-add-button:hover {
  background-color: #e9ecef;
  border-color: #aaa;
}

.multiple-models-dropdown {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%;
  height: auto;
  padding: 8px;
  line-height: 1.5;
}

.multiple-models-dropdown option {
  min-height: 24px;
  padding: 8px;
  line-height: 24px;
}

.multiple-models-number-input {
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  width: 100%;
  padding: 6px;
}

.multiple-models-disabled {
  opacity: .5;
  pointer-events: none;
}

@media (width <= 768px) {
  .multiple-models-modal-content {
    width: 95%;
    max-height: 95vh;
  }

  .multiple-models-preset-section {
    flex-direction: column;
    align-items: stretch;
  }

  .multiple-models-settings {
    grid-template-columns: 1fr;
  }
}

.multiple-models-provider-icons {
  background: #f8f9fa;
  border-radius: 8px;
  align-items: center;
  gap: 12px;
  padding: 5px;
  display: flex;
}

.multiple-models-provider-icon {
  cursor: pointer;
  opacity: .5;
  border: 2px solid #0000;
  border-radius: 4px;
  width: 32px;
  height: 32px;
  padding: 4px;
  transition: all .3s;
}

.multiple-models-provider-icon:hover {
  opacity: .8;
  background-color: #0000000d;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px #0000001a;
}

.multiple-models-provider-icon.provider-active {
  opacity: 1;
  background-color: #007bff1a;
  border: 2px solid #007bff;
  transform: translateY(0);
}

.multiple-models-provider-icon:active {
  transform: translateY(1px);
  box-shadow: 0 1px 2px #0000001a;
}

.multiple-models-reasoning-section {
  background: #f8f9fa;
  border-radius: 8px;
  margin: 15px 0;
  padding: 10px;
}

.multiple-models-reasoning-section .slider-container {
  align-items: center;
  gap: 10px;
  margin-top: 5px;
  display: flex;
}

.multiple-models-reasoning-section .reasoning-level-slider {
  flex: 1;
}

.multiple-models-reasoning-section .reasoning-level-display {
  text-align: center;
  min-width: 20px;
}

.multiple-models-card .collapsible-section {
  border-top: 1px solid #eee;
  margin: 15px 0;
}

.multiple-models-card .collapsible-header {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  padding: 10px;
  display: flex;
  position: relative;
}

.multiple-models-card .collapsible-header:after {
  content: "+";
  transition: all .3s;
  position: absolute;
  right: 10px;
}

.multiple-models-card .collapsible-section.expanded .collapsible-header:after {
  content: "−";
}

.multiple-models-card .collapsible-content {
  background-color: #0000;
  max-height: 0;
  transition: max-height .3s ease-out;
  overflow: hidden;
}

.multiple-models-card .collapsible-section.expanded .collapsible-content {
  max-height: 200px;
  padding: 10px;
}

.multiple-models-card .dropdown-container {
  margin-bottom: 10px;
}

.multiple-models-card .system-prompt-dropdown {
  width: 100%;
  margin-bottom: 10px;
}

.multiple-models-card .horizontal-buttons {
  justify-content: flex-start;
  gap: 5px;
  display: flex;
}

@media (width <= 768px) {
  .multiple-models-modal-content {
    width: 95%;
    max-height: 95vh;
  }

  .multiple-models-preset-section {
    flex-direction: column;
    align-items: stretch;
  }

  .multiple-models-settings {
    grid-template-columns: 1fr;
  }
}

.analyze-content {
  border-top: 1px solid var(--border-color);
  margin-top: 1rem;
  padding: 1rem;
  transition: all .3s;
}

.analyze-prompt-section, .analyze-model-section {
  margin-bottom: 1.5rem;
}

.analyze-prompt-section h4, .analyze-model-section h4 {
  color: var(--text-color);
  margin-bottom: .5rem;
  font-size: 1rem;
  font-weight: 600;
}

.analyze-model-explanation {
  color: var(--text-secondary);
  margin-bottom: 1rem;
  font-size: .9rem;
}

.analyze-explanation {
  color: var(--text-secondary);
  margin-top: .5rem;
  font-size: .9rem;
  line-height: 1.4;
}

#analysis-model-card-container .multiple-models-card {
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-top: .5rem;
}

.analyze-header {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 1rem;
}

.analysis-model-card .collapsible-section {
  display: none !important;
}

.default-prompt-option {
  color: #666;
  background-color: #f8f9fa;
  font-style: italic;
  position: relative;
}

.default-prompt-option:after {
  content: "(Default)";
  color: #007bff;
  font-size: .85em;
  font-weight: 500;
  position: absolute;
  right: 8px;
}

.prompt-separator {
  color: #999;
  pointer-events: none;
  background-color: #fff;
  border-top: 1px solid #ddd;
  margin: 4px 0;
  padding-top: 4px;
  font-size: .9em;
}

:root {
  --gm-primary: #3498db;
  --gm-secondary: #f39c12;
  --gm-accent: #f0c040;
  --gm-text: #333;
  --gm-bg: #fff;
  --gm-bg-secondary: #f8f8f8;
  --gm-border: #ddd;
  --gm-shadow: #0003;
  --gm-overlay: #000000b3;
  --gm-radius: 10px;
  --gm-transition: .3s ease;
}

.dark-theme {
  --gm-text: #e0e0e0;
  --gm-bg: #2a2a2a;
  --gm-bg-secondary: #333;
  --gm-border: #444;
  --gm-shadow: #0006;
  --gm-overlay: #000c;
}

.graph-modal-overlay {
  background-color: var(--gm-overlay);
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  transition: opacity var(--gm-transition), visibility var(--gm-transition);
  backdrop-filter: blur(3px);
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.graph-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}

#graph-modal-d3-container {
  border-radius: var(--gm-radius);
  background-color: var(--gm-bg);
  width: 100%;
  height: calc(100% - 60px);
  position: relative;
  overflow: hidden !important;
}

#graph-modal-d3-container svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.graph-modal-content {
  background-color: var(--gm-bg);
  width: 90%;
  height: 90%;
  color: var(--gm-text);
  border-radius: var(--gm-radius);
  box-shadow: 0 4px 20px var(--gm-shadow);
  padding: 2rem;
  animation: .3s ease-out modalAppear;
  position: relative;
  overflow-y: auto;
}

@keyframes modalAppear {
  from {
    opacity: 0;
    transform: scale(.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.graph-modal-close-button {
  color: var(--gm-text);
  cursor: pointer;
  width: 36px;
  height: 36px;
  transition: background-color var(--gm-transition);
  background: none;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  display: flex;
  position: absolute;
  top: 15px;
  right: 15px;
}

.graph-modal-close-button:hover {
  background-color: #0000001a;
}

.graph-modal-header {
  border-bottom: 1px solid var(--gm-border);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding-bottom: 10px;
  display: flex;
}

.graph-modal-tabs {
  gap: 8px;
  display: flex;
}

.graph-modal-tab-button {
  background-color: var(--gm-bg-secondary);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius);
  cursor: pointer;
  color: var(--gm-text);
  transition: all var(--gm-transition);
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
}

.graph-modal-tab-button.active {
  background-color: var(--gm-primary);
  color: #fff;
  border-color: var(--gm-primary);
}

.graph-modal-tab-button:hover:not(.active) {
  background-color: var(--gm-border);
}

.graph-modal-action-label {
  color: var(--gm-primary);
  border-radius: var(--gm-radius);
  background-color: #3498db1a;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: bold;
}

#graph-modal-spaces-container, #graph-modal-bullet-container {
  overflow: auto;
}

.graph-modal-tab-content {
  border-radius: var(--gm-radius);
  background-color: var(--gm-bg);
  width: 100%;
  height: calc(100% - 60px);
  position: relative;
}

#graph-modal-container {
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius);
  width: 100%;
  height: calc(100% - 60px);
  position: relative;
  overflow: hidden;
}

.graph-modal-search-container {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  display: flex;
}

#graph-modal-search-input {
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius);
  background-color: var(--gm-bg);
  min-width: 200px;
  color: var(--gm-text);
  transition: border-color var(--gm-transition);
  outline: none;
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
}

#graph-modal-search-input:focus {
  border-color: var(--gm-primary);
  box-shadow: 0 0 0 2px #3498db33;
}

#graph-modal-search-button, #graph-modal-clear-button {
  border-radius: var(--gm-radius);
  cursor: pointer;
  transition: background-color var(--gm-transition);
  border: none;
  padding: 8px 16px;
  font-size: 14px;
}

#graph-modal-search-button {
  background-color: var(--gm-primary);
  color: #fff;
}

#graph-modal-search-button:hover {
  background-color: #2980b9;
}

#graph-modal-clear-button {
  background-color: var(--gm-bg-secondary);
  color: var(--gm-text);
}

#graph-modal-clear-button:hover {
  background-color: var(--gm-border);
}

.graph-modal-spaces-table {
  border-collapse: collapse;
  border-radius: var(--gm-radius);
  width: 100%;
  box-shadow: 0 1px 3px var(--gm-shadow);
  overflow: hidden;
}

.graph-modal-spaces-table th {
  background-color: var(--gm-bg-secondary);
  text-align: left;
  border-bottom: 2px solid var(--gm-border);
  cursor: pointer;
  color: var(--gm-text);
  transition: background-color var(--gm-transition);
  padding: 12px 16px;
  font-weight: 600;
  position: relative;
}

.graph-modal-spaces-table th:hover {
  background-color: var(--gm-border);
}

.graph-modal-spaces-table th:after {
  content: "";
  opacity: .3;
  position: absolute;
  right: 8px;
}

.graph-modal-spaces-table th.sort-asc:after {
  content: "▲";
  opacity: 1;
}

.graph-modal-spaces-table th.sort-desc:after {
  content: "▼";
  opacity: 1;
}

.graph-modal-spaces-table td {
  border-bottom: 1px solid var(--gm-border);
  color: var(--gm-text);
  padding: 12px 16px;
}

.graph-modal-spaces-table tr:hover {
  background-color: #3498db0d;
}

.graph-modal-node-circle {
  fill: var(--gm-bg-secondary);
  stroke: var(--gm-border);
  stroke-width: 1.5px;
  cursor: pointer;
  transition: fill var(--gm-transition), stroke var(--gm-transition), stroke-width var(--gm-transition);
}

.dark-theme .graph-modal-node-circle {
  fill: #3a3a3a;
  stroke: #666;
}

.graph-modal-node-circle.graph-modal-shared {
  fill: var(--gm-secondary);
  opacity: .8;
}

.graph-modal-node-circle.type-graph {
  background-image: radial-gradient(circle, #f0c04000 0% 25%, #f0c040cc 100%);
}

.graph-modal-node-circle.owner {
  fill: #3498db;
  stroke: #2980b9;
}

.graph-modal-node-circle.editor {
  fill: #f39c12;
  stroke: #e67e22;
}

.graph-modal-node-circle.viewer {
  fill: #95a5a6;
  stroke: #7f8c8d;
}

.graph-modal-node:hover .graph-modal-node-circle {
  stroke-width: 3px;
  filter: brightness(1.1) drop-shadow(0 0 3px #0003);
}

.graph-modal-node-label {
  fill: var(--gm-text);
  pointer-events: none;
  user-select: none;
  font-size: 12px;
  font-weight: 500;
}

.graph-modal-link {
  stroke: var(--gm-border);
  stroke-opacity: .6;
  stroke-width: 1.5px;
  transition: stroke var(--gm-transition), stroke-width var(--gm-transition);
}

.graph-modal-link:hover {
  stroke: var(--gm-primary);
  stroke-width: 2px;
}

.graph-modal-loading, .graph-modal-error {
  text-align: left;
  border-radius: var(--gm-radius);
  background-color: #3498db0d;
  align-items: center;
  margin: 10px 0;
  padding: 15px 20px;
  display: flex;
}

.graph-modal-loading {
  color: var(--gm-primary);
}

.graph-modal-loading-text {
  color: var(--gm-primary);
  margin-top: 15px;
  font-weight: 500;
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

.graph-modal-error {
  color: #e74c3c;
  background-color: #e74c3c1a;
  border-left: 4px solid #e74c3c;
}

.graph-modal-spaces-list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.graph-modal-spaces-list li {
  margin-bottom: 10px;
  padding-left: 20px;
  position: relative;
}

.graph-modal-spaces-list li:before {
  content: "•";
  color: var(--gm-primary);
  font-size: 18px;
  position: absolute;
  left: 0;
}

.graph-modal-spaces-list ul {
  margin-top: 8px;
  padding-left: 20px;
  list-style: none;
}

.graph-modal-space-name {
  cursor: pointer;
  color: var(--gm-text);
  transition: color var(--gm-transition);
  border-radius: var(--gm-radius);
  padding: 4px 8px;
  display: inline-block;
}

.graph-modal-space-name:hover {
  color: var(--gm-primary);
  background-color: #3498db1a;
}

.graph-modal-breadcrumbs {
  z-index: 1000;
  background-color: var(--gm-bg);
  border-radius: var(--gm-radius);
  max-width: calc(100% - 50px);
  box-shadow: 0 2px 5px var(--gm-shadow);
  flex-wrap: wrap;
  align-items: center;
  padding: 8px 12px;
  display: flex;
  position: absolute;
  top: 15px;
  left: 15px;
}

.graph-modal-breadcrumb {
  background-color: var(--gm-bg-secondary);
  border-radius: var(--gm-radius);
  cursor: pointer;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 150px;
  color: var(--gm-text);
  transition: background-color var(--gm-transition), color var(--gm-transition);
  padding: 4px 8px;
  font-size: 13px;
  overflow: hidden;
}

.graph-modal-breadcrumb:hover {
  background-color: var(--gm-border);
}

.graph-modal-breadcrumb.current {
  color: var(--gm-primary);
  background-color: #3498db33;
  font-weight: bold;
}

.graph-modal-breadcrumb-separator {
  color: var(--gm-border);
  margin: 0 5px;
}

.graph-modal-context-menu {
  background: var(--gm-bg);
  border: 1px solid var(--gm-border);
  box-shadow: 0 4px 12px var(--gm-shadow);
  z-index: 9999;
  border-radius: var(--gm-radius);
  min-width: 180px;
  padding: 5px 0;
  font-size: 14px;
  animation: .2s ease-out contextMenuAppear;
  position: absolute;
}

@keyframes contextMenuAppear {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.graph-modal-context-menu div {
  cursor: pointer;
  transition: background-color var(--gm-transition);
  color: var(--gm-text);
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  display: flex;
}

.graph-modal-context-menu div:hover {
  background-color: var(--gm-bg-secondary);
}

.graph-modal-action-panel {
  background-color: var(--gm-bg);
  border-radius: var(--gm-radius);
  box-shadow: 0 4px 12px var(--gm-shadow);
  border: 1px solid var(--gm-border);
  padding: 16px;
}

.graph-modal-action-button {
  transition: all var(--gm-transition);
  background-color: var(--gm-bg-secondary);
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius);
  color: var(--gm-text);
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  padding: 6px 10px;
  font-size: 12px;
  display: flex;
}

.graph-modal-action-button:hover {
  background-color: var(--gm-border) !important;
}

.graph-modal-action-button[data-active="true"] {
  color: var(--gm-primary);
  box-shadow: 0 0 4px #0078ff4d;
  border-color: var(--gm-primary) !important;
  background-color: #3498db1a !important;
}

.graph-modal-action-message {
  background-color: var(--gm-bg-secondary);
  border-radius: var(--gm-radius);
  border-left: 3px solid var(--gm-primary);
  color: var(--gm-text);
  margin-bottom: 8px;
  padding: 8px 10px;
  font-size: 13px;
}

.graph-modal-new-graph-overlay {
  background-color: var(--gm-overlay);
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  transition: opacity var(--gm-transition), visibility var(--gm-transition);
  backdrop-filter: blur(3px);
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.graph-modal-new-graph-overlay.visible {
  opacity: 1;
  visibility: visible;
}

.graph-modal-new-graph-content {
  background-color: var(--gm-bg);
  border-radius: var(--gm-radius);
  width: 400px;
  box-shadow: 0 4px 20px var(--gm-shadow);
  color: var(--gm-text);
  padding: 2rem;
  position: relative;
}

.graph-modal-new-graph-content h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-weight: 600;
}

.graph-modal-new-graph-content input {
  border: 1px solid var(--gm-border);
  border-radius: var(--gm-radius);
  background-color: var(--gm-bg);
  width: 100%;
  color: var(--gm-text);
  margin-bottom: 20px;
  padding: 10px 12px;
  font-size: 14px;
}

#graph-modal-create-graph-button {
  background-color: var(--gm-primary);
  color: #fff;
  border-radius: var(--gm-radius);
  cursor: pointer;
  transition: background-color var(--gm-transition);
  border: none;
  width: 100%;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
}

#graph-modal-create-graph-button:hover {
  background-color: #2980b9;
}

.graph-modal-node-text {
  fill: #ffffffeb;
  user-select: none;
  filter: drop-shadow(0 1px 2px #0006);
  font-weight: 500;
}

.dark-theme .graph-modal-node-text {
  fill: #fff;
  filter: drop-shadow(0 1px 3px #00000080);
}

.graph-modal-node-rect {
  stroke-width: 2px;
  transition: fill var(--gm-transition), stroke var(--gm-transition), stroke-width var(--gm-transition);
  cursor: pointer !important;
}

.graph-modal-node:hover .graph-modal-node-rect {
  stroke-width: 3px !important;
  stroke: var(--gm-accent) !important;
  filter: drop-shadow(0 0 3px #f0c04066) !important;
}

.graph-modal-node-icon {
  fill: #ffffff26;
  filter: drop-shadow(0 1px 1px #0000004d);
  pointer-events: none;
}

.dark-theme .graph-modal-node-icon {
  fill: #fff3;
  filter: drop-shadow(0 1px 2px #0006);
}

.graph-modal-node-rect.parent-node {
  stroke-width: 3px;
  stroke: #36c;
  filter: drop-shadow(0 0 5px #36c6);
}

.graph-modal-control-panel {
  background-color: var(--gm-bg);
  border-radius: var(--gm-radius);
  box-shadow: 0 4px 12px var(--gm-shadow);
  border: 1px solid var(--gm-border);
  z-index: 1000;
  z-index: 1000;
  width: 220px;
  padding: 12px;
  font-size: 13px;
  position: absolute;
  top: 60px;
  left: 15px;
}

.graph-modal-control-panel div {
  margin-bottom: 12px;
}

.graph-modal-control-panel label {
  color: var(--gm-text);
  font-size: 13px;
  font-weight: 500;
}

.graph-modal-control-panel .label-container {
  justify-content: space-between;
  margin-bottom: 5px;
  display: flex;
}

.graph-modal-control-panel .value-display {
  font-weight: 500;
}

.graph-modal-control-panel input[type="range"] {
  -webkit-appearance: none;
  background: linear-gradient(to right, var(--gm-primary), var(--gm-secondary));
  border-radius: 5px;
  outline: none;
  width: 100%;
  height: 6px;
  margin: 10px 0;
}

.graph-modal-control-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: var(--gm-bg);
  border: 2px solid var(--gm-primary);
  cursor: pointer;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  transition: all .2s;
}

.graph-modal-control-panel input[type="range"]::-webkit-slider-thumb:hover {
  background: var(--gm-primary);
  border-color: var(--gm-bg);
}

.graph-modal-reset-button {
  background-color: var(--gm-primary);
  color: #fff;
  border-radius: var(--gm-radius);
  cursor: pointer;
  transition: background-color var(--gm-transition);
  border: none;
  width: 100%;
  margin-top: 8px;
  padding: 6px 10px;
  font-size: 13px;
}

.graph-modal-reset-button:hover {
  background-color: #2980b9;
}

.graph-modal-action-panel {
  background-color: var(--gm-bg);
  border-radius: var(--gm-radius);
  box-shadow: 0 4px 12px var(--gm-shadow);
  border: 1px solid var(--gm-border);
  z-index: 1000;
  min-width: 180px;
  padding: 12px;
  font-size: 13px;
  position: absolute;
  top: 60px;
  right: 15px;
}

.graph-modal-action-panel-header {
  margin-bottom: 5px;
  font-size: 14px;
  font-weight: bold;
}

.graph-modal-move-space-indicator {
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
  border-radius: 4px;
  margin-top: 10px;
  padding: 10px;
}

.graph-modal-move-space-indicator p {
  margin: 5px 0 0;
  font-size: 12px;
}

@media (width <= 768px) {
  .graph-modal-content {
    width: 95%;
    height: 95%;
    padding: 1rem;
  }

  .graph-modal-breadcrumbs {
    max-width: calc(100% - 30px);
  }

  .graph-modal-search-container {
    flex-direction: column;
    align-items: stretch;
  }

  .graph-modal-control-panel, .graph-modal-action-panel {
    width: 90%;
    margin: 10px auto;
    position: static !important;
  }
}

.graph-modal-panel-header {
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid var(--gm-border);
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding: 8px;
  display: flex;
}

.graph-modal-panel-header:hover {
  background-color: var(--gm-bg-secondary);
}

.graph-modal-panel-toggle {
  font-size: 16px;
  transition: transform .3s;
}

.graph-modal-panel-toggle.collapsed {
  transform: rotate(-90deg);
}

.graph-modal-panel-content {
  opacity: 1;
  max-height: 500px;
  transition: max-height .3s, opacity .2s;
  overflow: hidden;
}

.graph-modal-panel-content.collapsed {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.graph-modal-control-panel, .graph-modal-action-panel {
  margin-bottom: 10px;
}

.info-modal-overlay {
  z-index: 2000;
  background: #00000080;
  border-radius: 12px;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
}

.info-modal-content {
  background: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 600px;
  position: relative;
  box-shadow: 0 4px 20px #0003;
}

.info-modal-header {
  background: linear-gradient(to right, #fff, #f8f9fa);
  border-bottom: 1px solid #eee;
  border-radius: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  display: flex;
}

.info-modal-header i {
  color: #4a90e2;
  margin-right: 8px;
  font-size: 1.2em;
}

.info-modal-header h3 {
  color: #2c3e50;
  align-items: center;
  font-size: 1.3em;
  display: flex;
}

.info-modal-close {
  cursor: pointer;
  color: #666;
  background: none;
  border: none;
  padding: 0 8px;
  font-size: 24px;
  transition: color .2s;
}

.info-modal-close:hover {
  color: #e74c3c;
}

.example-node {
  background: #fff;
  border: 1px solid #e1e8ed;
  border-radius: 10px;
  min-height: 200px;
  margin: 16px;
  transition: all .3s;
  position: relative;
  box-shadow: 0 2px 4px #0000000d;
}

.modal-instructions {
  background: #f8f9fa;
  border-radius: 0 0 12px 12px;
  padding: 16px;
}

.modal-instructions ul {
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.modal-instructions li {
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  display: flex;
}

.modal-instructions li i {
  color: #4a90e2;
  text-align: center;
  width: 20px;
  font-size: 1.1em;
}

.modal-instructions li strong {
  color: #2c3e50;
}

.node-text-example {
  background: #f8f9fa;
  border-radius: 0 0 10px 10px;
}

.node-text-example strong {
  color: #2c3e50;
}

.model-tag {
  color: #4a5568;
  background: #f0f4f8;
  border-radius: 4px;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: .8em;
  display: inline-flex;
}

.model-tag:before {
  content: "🤖";
  font-size: 1.1em;
}

#include-reasoning-info {
  cursor: pointer;
  color: #007bff;
  margin-left: 5px;
}

#include-reasoning-info:hover {
  color: #0056b3;
}

.import-conversation-modal-overlay {
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  opacity: 1;
  visibility: visible;
  background-color: #0009;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  transition: opacity .3s, visibility .3s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.import-conversation-modal-content {
  background-color: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  padding: 2rem;
  position: relative;
  overflow-y: auto;
  box-shadow: 0 4px 20px #00000026;
}

.import-conversation-modal-header {
  border-bottom: 1px solid #eee;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  display: flex;
}

.import-conversation-modal-header h2 {
  color: #333;
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
}

.import-conversation-close-button {
  color: #999;
  cursor: pointer;
  background: none;
  border: none;
  font-size: 1.5rem;
  transition: color .3s;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.import-conversation-close-button:hover {
  color: #333;
}

.import-conversation-modal-body {
  padding: 0 0 1rem;
}

.import-conversation-modal-body p {
  color: #555;
  margin-bottom: 1rem;
}

.import-conversation-input {
  border: 2px solid #e0e0e0;
  border-radius: 6px;
  width: 100%;
  margin-bottom: 1.5rem;
  padding: 10px 12px;
  font-size: 16px;
  transition: border-color .3s, box-shadow .3s;
}

.import-conversation-input:focus {
  border-color: #06c;
  outline: none;
  box-shadow: 0 0 0 3px #06c3;
}

.import-conversation-modal-footer {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}

.import-conversation-button {
  cursor: pointer;
  border-radius: 6px;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .3s, transform .1s;
}

.import-conversation-button.primary {
  color: #fff;
  background-color: #06c;
  border: none;
}

.import-conversation-button.primary:hover {
  background-color: #004999;
}

.import-conversation-button.primary:active {
  transform: scale(.98);
}

.import-conversation-button.cancel {
  color: #333;
  background-color: #f0f0f0;
  border: none;
}

.import-conversation-button.cancel:hover {
  background-color: #e0e0e0;
}

.import-conversation-button:disabled {
  opacity: .7;
  cursor: not-allowed;
}

.import-conversation-instructions {
  background-color: #f7f9fc;
  border-left: 4px solid #06c;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 12px 16px;
}

.import-conversation-instructions h3 {
  color: #333;
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.import-conversation-instructions ol {
  margin: 0;
  padding-left: 20px;
}

.import-conversation-instructions li {
  color: #555;
  margin-bottom: 6px;
  font-size: 14px;
}

.import-conversation-instructions li:last-child {
  margin-bottom: 0;
}

.system-prompt-modal {
  z-index: 1005;
  backdrop-filter: blur(6px);
  background: radial-gradient(1200px 800px at 70% 10%, #0099ff14, #0000 60%), radial-gradient(1000px 700px at 10% 90%, #00f2c314, #0000 50%), #0a0c108c;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  inset: 0;
}

.system-prompt-modal.visible {
  display: flex;
}

.system-prompt-modal-content {
  color: #d9e6ff;
  background: linear-gradient(#0e1220 0%, #0b1020 100%);
  border: 1px solid #6e8cff26;
  border-radius: 16px;
  flex-direction: column;
  width: min(980px, 92vw);
  max-height: 86vh;
  padding: 20px;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 30px #00000073, inset 0 0 0 1px #78a0ff26;
}

.system-prompt-modal-header {
  border-bottom: 1px solid #6e8cff26;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  display: flex;
}

.system-prompt-modal-header h2 {
  letter-spacing: .2px;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  display: inline-flex;
}

.system-prompt-modal-header h2:before {
  content: "✨";
  filter: drop-shadow(0 0 6px #ffffff40);
  font-size: 18px;
}

.close-button {
  color: #cfe2ff;
  cursor: pointer;
  background: linear-gradient(#ffffff14, #fff0);
  border: 1px solid #a0b4ff40;
  border-radius: 10px;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 20px;
  line-height: 1;
  transition: all .18s;
  display: grid;
}

.close-button:hover {
  border-color: #b4c8ff80;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px #008cff40;
}

.system-prompt-toolbar {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 6px 0 12px;
  display: flex;
}

.prompt-search {
  color: #d9e6ff;
  background: #ffffff0f;
  border: 1px solid #8caaff2e;
  border-radius: 12px;
  outline: none;
  flex: 280px;
  padding: 10px 12px;
  transition: all .18s;
}

.prompt-search::placeholder {
  color: #9fb4ff;
  opacity: .7;
}

.prompt-search:focus {
  background: #ffffff16;
  border-color: #b4c8ff73;
  box-shadow: 0 0 0 4px #508cff33;
}

.category-chips {
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  display: flex;
}

.category-chips .chip {
  color: #cfe2ff;
  cursor: pointer;
  background: #ffffff0f;
  border: 1px solid #8caaff33;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  transition: all .18s;
}

.category-chips .chip:hover {
  border-color: #b4c8ff73;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #508cff2e;
}

.category-chips .chip.active {
  color: #e8f2ff;
  background: linear-gradient(#0099ff5c, #006eff42);
  border-color: #78b4ffa6;
}

.system-prompt-cards {
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  padding-top: 4px;
  padding-right: 4px;
  display: grid;
  overflow: auto;
}

.system-prompt-card {
  cursor: pointer;
  background: linear-gradient(#141c34d9, #10162cd9);
  border: 1px solid #6e8cff2e;
  border-radius: 14px;
  outline: none;
  flex-direction: column;
  gap: 8px;
  min-height: 140px;
  padding: 14px 110px 14px 14px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.system-prompt-card:hover {
  border-color: #a0beff99;
  transform: translateY(-3px);
  box-shadow: 0 8px 22px #008bff2e, inset 0 0 0 1px #8caaff33;
}

.system-prompt-card h3 {
  color: #e6f0ff;
  letter-spacing: .2px;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding-right: 110px;
  font-size: 15px;
  font-weight: 700;
  display: inline-flex;
}

.system-prompt-card h3:before {
  content: "🧠";
  opacity: .9;
  font-size: 16px;
}

.system-prompt-card p {
  color: #a8b9ff;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  max-height: 4.5em;
  font-size: 13px;
  line-height: 1.35;
  display: -webkit-box;
  overflow: hidden;
}

.prompt-highlights {
  color: #bed0ff;
  max-height: 84px;
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  overflow: hidden;
}

.prompt-highlights li {
  margin: 2px 0;
}

.card-tags {
  flex-wrap: wrap;
  gap: 6px;
  display: flex;
}

.tag {
  color: #d8e7ff;
  background: #008cff1f;
  border: 1px solid #6ea0ff59;
  border-radius: 999px;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  font-size: 11px;
  display: inline-flex;
}

.system-prompt-card .card-actions {
  z-index: 2;
  gap: 6px;
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
}

.system-prompt-card .card-actions button {
  color: #d9e6ff;
  cursor: pointer;
  background: #ffffff0f;
  border: 1px solid #96b4ff40;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  transition: all .16s;
}

.system-prompt-card .card-actions button:hover {
  border-color: #b4c8ff8c;
  box-shadow: 0 4px 12px #508cff2e;
}

.system-prompt-card.add-card {
  color: #e8f2ff;
  background: linear-gradient(#121c3ce6, #0e142ee6), radial-gradient(600px 380px at 50% 0, #0099ff38, #0000 60%);
  border: 1px dashed #a0beff66;
  justify-content: center;
  align-items: center;
  font-weight: 700;
}

.system-prompt-card.add-card:hover {
  border-style: solid;
  border-color: #a0beffb3;
  box-shadow: 0 8px 22px #008bff2e, inset 0 0 0 1px #8caaff33;
}

.current-system-prompt {
  color: #8bb6ff;
  margin-top: 5px;
  font-size: 14px;
  font-weight: 700;
}

.system-prompt-cards::-webkit-scrollbar {
  width: 10px;
}

.system-prompt-cards::-webkit-scrollbar-thumb {
  background: linear-gradient(#8cb4ff59, #648cff40) padding-box padding-box;
  border: 2px solid #0000;
  border-radius: 10px;
}

.system-prompt-cards::-webkit-scrollbar-track {
  background: #ffffff0a;
  border-radius: 10px;
}

.custom-system-prompt-modal {
  z-index: 2000;
  backdrop-filter: blur(4px);
  background: #0009;
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  inset: 0;
}

.custom-system-prompt-modal.visible {
  display: flex;
}

.custom-system-prompt-modal-content {
  color: #e6f0ff;
  background: linear-gradient(#0f1428 0%, #0b1020 100%);
  border: 1px solid #6e8cff40;
  border-radius: 14px;
  width: min(720px, 92vw);
  max-height: 86vh;
  overflow: auto;
  box-shadow: 0 18px 48px #0000008c;
}

@media (width <= 600px) {
  .system-prompt-modal-content {
    width: 94vw;
    padding: 14px;
  }

  .system-prompt-card {
    padding: 12px;
  }

  .prompt-search {
    flex: 100%;
  }
}

.feedback-modal-overlay {
  z-index: 1100;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #0f172a8c;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  padding: 24px;
  transition: opacity .3s, visibility .3s, pointer-events .3s;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
}

.feedback-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.feedback-modal-content {
  color: #111827;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 18px;
  flex-direction: column;
  gap: 16px;
  width: min(520px, 92vw);
  max-height: 90vh;
  padding: 28px;
  display: flex;
  position: relative;
  overflow-y: auto;
  box-shadow: 0 24px 48px #0f172a40;
}

.feedback-modal-content h3 {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 600;
}

.feedback-modal-description {
  color: #4b5563;
  margin: 0;
  font-size: .95rem;
  line-height: 1.5;
}

.feedback-modal-form {
  flex-direction: column;
  gap: 12px;
  display: flex;
}

.feedback-modal-label {
  color: #1f2937;
  font-size: .95rem;
  font-weight: 600;
}

.feedback-modal-content textarea {
  resize: vertical;
  color: #111827;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  width: 100%;
  min-height: 170px;
  padding: 14px 16px;
  font-size: .95rem;
  line-height: 1.6;
  transition: border-color .2s, box-shadow .2s;
}

.feedback-modal-content textarea:focus {
  border-color: #6366f1;
  outline: none;
  box-shadow: 0 0 0 3px #6366f133;
}

.feedback-modal-content textarea[aria-invalid="true"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px #dc262626;
}

.feedback-modal-error {
  color: #dc2626;
  min-height: 1.2em;
  font-size: .85rem;
}

.feedback-modal-actions {
  justify-content: flex-end;
  gap: 12px;
  margin-top: 8px;
  display: flex;
}

.feedback-modal-overlay .btn-secondary {
  min-width: 110px;
}

.feedback-modal-overlay .custom-button {
  min-width: 140px;
}

@media (width <= 640px) {
  .feedback-modal-content {
    border-radius: 16px;
    width: 100%;
    max-height: 92vh;
    padding: 22px;
  }

  .feedback-modal-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .feedback-modal-overlay .btn-secondary, .feedback-modal-overlay .custom-button {
    min-width: 100%;
  }
}

.dark-mode .feedback-modal-overlay {
  background: #020617bf;
}

.dark-mode .feedback-modal-content {
  color: #e5e7eb;
  background: #0f172a;
  box-shadow: 0 24px 48px #02061799;
}

.dark-mode .feedback-modal-description {
  color: #cbd5f5;
}

.dark-mode .feedback-modal-label {
  color: #f3f4f6;
}

.dark-mode .feedback-modal-content textarea {
  color: #f8fafc;
  background: #0b1120;
  border-color: #1f2937;
}

.dark-mode .feedback-modal-content textarea:focus {
  border-color: #818cf8;
  box-shadow: 0 0 0 3px #818cf840;
}

.dark-mode .feedback-modal-content textarea[aria-invalid="true"] {
  border-color: #f87171;
  box-shadow: 0 0 0 3px #f8717140;
}

.dark-mode .feedback-modal-error {
  color: #f87171;
}

.markdown-control-bar {
  z-index: 10000;
  backdrop-filter: blur(10px);
  transform-origin: center;
  will-change: transform, opacity;
  opacity: 0;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border: 1px solid #ffffff1a;
  border-radius: 25px;
  margin-left: 0;
  padding: 8px 16px;
  position: fixed;
  transform: scale(0)translateX(-50%)translateY(-50%);
  box-shadow: 0 10px 30px #0000004d, 0 1px 2px #0003, inset 0 1px #ffffff1a;
}

.markdown-control-bar.visible {
  opacity: 1;
  transition: opacity .3s, transform .3s cubic-bezier(.34, 1.56, .64, 1);
  transform: scale(1)translateX(-50%)translateY(-50%);
}

.markdown-control-bar:before {
  content: "";
  opacity: 0;
  z-index: -1;
  background: linear-gradient(45deg, #6faaff, #ff6b6b, #4ecdc4, #6faaff) 0 0 / 300% 300%;
  border-radius: 26px;
  transition: opacity .3s;
  animation: 3s infinite gradientShift;
  position: absolute;
  inset: -2px;
}

.markdown-control-bar:hover:before {
  opacity: .3;
}

@keyframes gradientShift {
  0% {
    background-position: 0%;
  }

  50% {
    background-position: 100%;
  }

  100% {
    background-position: 0%;
  }
}

.control-bar-buttons {
  align-items: center;
  gap: 4px;
  display: flex;
}

.control-bar-button {
  color: #fffc;
  cursor: pointer;
  background: #ffffff0d;
  border: 1px solid #ffffff1a;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  min-width: 32px;
  height: 32px;
  margin: 1px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
  transition: all .2s;
  display: flex;
  position: relative;
  overflow: hidden;
}

.control-bar-button:before {
  content: "";
  background: radial-gradient(circle, #ffffff4d 0%, #0000 70%);
  width: 0;
  height: 0;
  transition: width .3s, height .3s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.control-bar-button:hover {
  color: #fff;
  background: #ffffff1a;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px #0003;
}

.control-bar-button:hover:before {
  width: 100%;
  height: 100%;
}

.control-bar-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px #0003;
}

.control-bar-button.active {
  color: #6faaff;
  background: #6faaff4d;
  animation: .3s buttonPulse;
}

@keyframes buttonPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.markdown-control-bar.pulse {
  animation: .6s controlBarPulse;
}

@keyframes controlBarPulse {
  0% {
    transform: translate(-50%, -50%)scale(1);
    box-shadow: 0 10px 30px #0000004d, 0 1px 2px #0003, inset 0 1px #ffffff1a;
  }

  50% {
    transform: translate(-50%, -50%)scale(1.05);
    box-shadow: 0 15px 40px #6faaff66, 0 1px 2px #0003, inset 0 1px #fff3;
  }

  100% {
    transform: translate(-50%, -50%)scale(1);
    box-shadow: 0 10px 30px #0000004d, 0 1px 2px #0003, inset 0 1px #ffffff1a;
  }
}

.control-bar-button[data-action="bold"] {
  font-weight: 900;
}

.control-bar-button[data-action="italic"] {
  font-style: italic;
}

.control-bar-button[data-action="heading"] {
  font-size: 16px;
  font-weight: 700;
}

.control-bar-button[data-action="code"] {
  font-family: Courier New, monospace;
  font-size: 12px;
}

.control-bar-button[data-action="divider"] {
  cursor: default;
  pointer-events: none;
  background: #fff3;
  border: none;
  width: 1px;
  min-width: 1px;
  margin: 0 4px;
  padding: 0;
}

.control-bar-button[data-action="divider"]:hover {
  box-shadow: none;
  background: #fff3;
  transform: none;
}

@media (width <= 768px) {
  .control-bar-button {
    min-width: 28px;
    height: 28px;
    padding: 4px 8px;
    font-size: 12px;
  }

  .markdown-control-bar {
    padding: 6px 12px;
  }
}

@media (prefers-color-scheme: dark) {
  .markdown-control-bar {
    background: linear-gradient(135deg, #0f0f1e 0%, #1a1a2e 100%);
  }
}

.markdown-control-bar {
  transition: left .1s ease-out, top .1s ease-out, background .3s, box-shadow .3s, border-radius .3s;
}

.markdown-control-bar.docked-top {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-top: none;
  border-radius: 0 0 15px 15px;
  box-shadow: 0 2px 10px #0003, 0 1px 2px #0000001a, inset 0 -1px #ffffff1a;
}

.markdown-control-bar.docked-top:before {
  border-radius: 0 0 16px 16px;
}

[contenteditable="true"] code {
  border-radius: 3px;
  padding: 2px 4px;
  font-family: Courier New, monospace;
  font-size: .9em;
}

[contenteditable="true"] a {
  color: #6faaff;
  text-decoration: underline;
}

[contenteditable="true"] a:hover {
  color: #4ecdc4;
}

.control-bar-button[data-format-active="true"] {
  color: #6faaff;
  background: #6faaff4d;
}

.control-bar-button[data-action="color"] {
  position: relative;
  overflow: visible;
  box-shadow: inset 0 0 0 2px #ffffff4d;
}

.control-bar-button[data-action="color"]:after {
  content: "";
  background: #fff;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  position: absolute;
  bottom: -2px;
  right: -2px;
  box-shadow: 0 1px 2px #0000004d;
}

.control-bar-button[data-action="color"]:hover {
  transform: translateY(-2px)scale(1.1);
  box-shadow: inset 0 0 0 2px #ffffff80, 0 4px 12px #0000004d;
}

.control-bar-button[data-action="speak"] {
  transition: all .3s;
}

.control-bar-button[data-action="speak"].recording {
  color: #ff4757;
  background: #ff47574d;
  animation: 1.5s ease-in-out infinite recordingPulse;
}

.control-bar-button[data-action="speak"].recording i {
  animation: 1s ease-in-out infinite microphonePulse;
}

.control-bar-button[data-action="speak"].processing {
  color: #6faaff;
  background: #6faaff33;
}

.speak-bar {
  z-index: 10001;
  backdrop-filter: blur(10px);
  opacity: 0;
  transform-origin: top;
  background: #1e1e1ef2;
  border-radius: 30px;
  padding: 8px 12px;
  transition: all .3s cubic-bezier(.4, 0, .2, 1);
  position: fixed;
  transform: translate(-50%, -100%);
  box-shadow: 0 4px 20px #0000004d;
}

.speak-bar.visible {
  opacity: 1;
  transform: translate(-50%, -100%)scale(1);
}

.speak-bar-buttons {
  align-items: center;
  gap: 12px;
  display: flex;
}

.speak-button {
  color: #fff;
  cursor: pointer;
  background: linear-gradient(135deg, #ff4b4b 0%, #ff6b6b 100%);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  font-size: 20px;
  transition: all .3s;
  display: flex;
  position: relative;
  box-shadow: 0 2px 8px #ff4b4b4d;
}

.speak-button:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px #ff4b4b66;
}

.speak-button:active {
  transform: scale(.95);
}

.speak-button.recording {
  background: linear-gradient(135deg, #ff1744 0%, #ff4569 100%);
  animation: 1.5s ease-in-out infinite pulse-shadow;
}

.speak-button.processing {
  cursor: wait;
  background: linear-gradient(135deg, #ffb74d 0%, #ffa726 100%);
}

@keyframes pulse-shadow {
  0% {
    box-shadow: 0 2px 8px #ff4b4b4d, 0 0 #ff4b4b66;
  }

  50% {
    box-shadow: 0 2px 8px #ff4b4b4d, 0 0 0 8px #ff4b4b00;
  }

  100% {
    box-shadow: 0 2px 8px #ff4b4b4d, 0 0 #ff4b4b00;
  }
}

.recording-indicator {
  background: #ff1744;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  animation: 1s ease-in-out infinite blink;
  position: absolute;
  top: 4px;
  right: 4px;
  box-shadow: 0 0 10px #ff1744cc;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: .3;
  }
}

.speak-cancel-button {
  color: #fffc;
  cursor: pointer;
  background: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  font-size: 16px;
  transition: all .2s;
  display: flex;
}

.speak-cancel-button:hover {
  color: #fff;
  background: #fff3;
  transform: scale(1.1);
}

.speak-cancel-button:active {
  transform: scale(.9);
}

.markdown-control-bar.with-speak-bar {
  opacity: .3;
  pointer-events: none;
}

body.dark-mode {
  --html-node-base-shadow: 0 0 0 1px #00000047, 0 4px 10px #0000009e;
  --html-node-selected-shadow: 0 0 0 1px #00000057, 0 8px 18px #000000b8;
  background-color: #2c2c2c;
  transition: background-color .5s;
}

.dark-mode-graphText {
  padding: 2px;
  color: silver !important;
  background-image: radial-gradient(circle, #f0c04000 0% 25%, #8b8a88cc 100%) !important;
}

.dark-mode-text {
  color: #fff;
  padding: 2px;
}

#controls-container.dark-mode {
  background-image: linear-gradient(0deg, #d7d3d3cc 0%, #f3f3f3cc 95%, #2c2c2c00 100%);
  transition: height .5s;
}

body.dark-mode #main-svg {
  background-color: #2c2c2c;
  transition: background-color .5s;
}

.dark-mode .selected-node, .dark-mode .html-node.selected-node .html-node-background {
  box-shadow: var(--html-node-selected-shadow);
}

.dark-mode .graph-path {
  fill: #fff;
  opacity: .2;
}

body.dark-mode .html-node .html-node-background {
  box-shadow: var(--html-node-base-shadow) !important;
}

body.dark-mode .html-node .html-node-background.type-text {
  box-shadow: none !important;
  background: none !important;
  border: none !important;
}

body.dark-mode .html-node .html-node-background.type-text.dark-mode-hover, body.dark-mode .html-node .html-node-background.type-text.rect-hover {
  box-shadow: none !important;
  border: none !important;
}

body.dark-mode .html-node.selected-node .html-node-background.type-text {
  box-shadow: none !important;
}

body.dark-mode .node .type-file, body.dark-mode .node .role-user, body.dark-mode .node .role-system, body.dark-mode .node .role-assistant, body.dark-mode .setting-circle {
  stroke: #4e421f;
}

body.dark-mode .node .type-text {
  stroke: none;
}

body.dark-mode .node-text.type-text {
  color: #fff;
  margin: 0;
  padding: 0;
}

body.dark-mode .section-title {
  color: #a8b2d1;
}

body.dark-mode .section-text {
  color: #ccd6f6;
}

body.dark-mode .node .type-file.dark-mode-hover, body.dark-mode .node .role-user.dark-mode-hover, body.dark-mode .node .role-system.dark-mode-hover, body.dark-mode .node .role-assistant.dark-mode-hover {
  stroke: #e6ddc1;
}

body.dark-mode .html-node .html-node-background.dark-mode-hover {
  box-shadow: 0 0 0 1px #e6ddc14d, var(--html-node-base-shadow) !important;
  border-color: #e6ddc1 !important;
}

body.dark-mode .node-text.graph {
  color: #ccc;
  background-image: radial-gradient(circle, #f0c04000 0% 25%, #ccc 100%);
}

body.dark-mode .universal-connection {
  stroke: #fff;
}

body.dark-mode .universal-connection-descriptor {
  fill: #ddd;
}

body.dark-mode .memory-graph {
  color: #ccc;
  background-color: #5995f65c;
}

body.dark-mode .drawing-path.highlighter:not(.attached-to-node) {
  mix-blend-mode: screen;
  opacity: .5;
}

.dark-theme pre[class*="language-"], .dark-theme code[class*="language-"] {
  color: #d4d4d4;
  text-shadow: none;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  tab-size: 4;
  hyphens: none;
  direction: ltr;
  font-family: Menlo, Monaco, Consolas, Andale Mono, Ubuntu Mono, Courier New, monospace;
  font-size: 13px;
  line-height: 1.5;
}

.dark-theme pre[class*="language-"]::selection, .dark-theme code[class*="language-"]::selection, .dark-theme pre[class*="language-"] ::selection, .dark-theme code[class*="language-"] ::selection {
  text-shadow: none;
  background: #264f78;
}

@media print {
  .dark-theme pre[class*="language-"], .dark-theme code[class*="language-"] {
    text-shadow: none;
  }
}

.dark-theme pre[class*="language-"] {
  background: #1e1e1e;
  margin: .5em 0;
  padding: 1em;
  overflow: auto;
}

.dark-theme :not(pre) > code[class*="language-"] {
  color: #db4c69;
  background: #1e1e1e;
  border-radius: .3em;
  padding: .1em .3em;
}

.dark-theme .namespace {
  opacity: .7;
}

.dark-theme .token.doctype .token.doctype-tag {
  color: #569cd6;
}

.dark-theme .token.doctype .token.name {
  color: #9cdcfe;
}

.dark-theme .token.comment, .dark-theme .token.prolog {
  color: #6a9955;
}

.dark-theme .token.punctuation, .dark-theme .language-html .language-css .token.punctuation, .dark-theme .language-html .language-javascript .token.punctuation {
  color: #d4d4d4;
}

.dark-theme .token.property, .dark-theme .token.tag, .dark-theme .token.boolean, .dark-theme .token.number, .dark-theme .token.constant, .dark-theme .token.symbol, .dark-theme .token.inserted, .dark-theme .token.unit {
  color: #b5cea8;
}

.dark-theme .token.selector, .dark-theme .token.attr-name, .dark-theme .token.string, .dark-theme .token.char, .dark-theme .token.builtin, .dark-theme .token.deleted {
  color: #ce9178;
}

.dark-theme .language-css .token.string.url {
  text-decoration: underline;
}

.dark-theme .token.operator, .dark-theme .token.entity {
  color: #d4d4d4;
}

.dark-theme .token.operator.arrow {
  color: #569cd6;
}

.dark-theme .token.atrule {
  color: #ce9178;
}

.dark-theme .token.atrule .token.rule {
  color: #c586c0;
}

.dark-theme .token.atrule .token.url {
  color: #9cdcfe;
}

.dark-theme .token.atrule .token.url .token.function {
  color: #dcdcaa;
}

.dark-theme .token.atrule .token.url .token.punctuation {
  color: #d4d4d4;
}

.dark-theme .token.keyword {
  color: #569cd6;
}

.dark-theme .token.keyword.module, .dark-theme .token.keyword.control-flow {
  color: #c586c0;
}

.dark-theme .token.function, .dark-theme .token.function .token.maybe-class-name {
  color: #dcdcaa;
}

.dark-theme .token.regex {
  color: #d16969;
}

.dark-theme .token.important {
  color: #569cd6;
}

.dark-theme .token.italic {
  font-style: italic;
}

.dark-theme .token.constant {
  color: #9cdcfe;
}

.dark-theme .token.class-name, .dark-theme .token.maybe-class-name {
  color: #4ec9b0;
}

.dark-theme .token.console, .dark-theme .token.parameter, .dark-theme .token.interpolation {
  color: #9cdcfe;
}

.dark-theme .token.punctuation.interpolation-punctuation, .dark-theme .token.boolean {
  color: #569cd6;
}

.dark-theme .token.property, .dark-theme .token.variable, .dark-theme .token.imports .token.maybe-class-name, .dark-theme .token.exports .token.maybe-class-name {
  color: #9cdcfe;
}

.dark-theme .token.selector, .dark-theme .token.escape {
  color: #d7ba7d;
}

.dark-theme .token.tag {
  color: #569cd6;
}

.dark-theme .token.tag .token.punctuation, .dark-theme .token.cdata {
  color: gray;
}

.dark-theme .token.attr-name {
  color: #9cdcfe;
}

.dark-theme .token.attr-value, .dark-theme .token.attr-value .token.punctuation {
  color: #ce9178;
}

.dark-theme .token.attr-value .token.punctuation.attr-equals {
  color: #d4d4d4;
}

.dark-theme .token.entity {
  color: #569cd6;
}

.dark-theme .token.namespace {
  color: #4ec9b0;
}

.dark-theme pre[class*="language-javascript"], .dark-theme code[class*="language-javascript"], .dark-theme pre[class*="language-jsx"], .dark-theme code[class*="language-jsx"], .dark-theme pre[class*="language-typescript"], .dark-theme code[class*="language-typescript"], .dark-theme pre[class*="language-tsx"], .dark-theme code[class*="language-tsx"] {
  color: #9cdcfe;
}

.dark-theme pre[class*="language-css"], .dark-theme code[class*="language-css"] {
  color: #ce9178;
}

.dark-theme pre[class*="language-html"], .dark-theme code[class*="language-html"] {
  color: #d4d4d4;
}

.dark-theme .language-regex .token.anchor {
  color: #dcdcaa;
}

.dark-theme .language-html .token.punctuation {
  color: gray;
}

.dark-theme pre[class*="language-"] > code[class*="language-"] {
  z-index: 1;
  position: relative;
}

.dark-theme .line-highlight.line-highlight {
  z-index: 0;
  background: #f7ebc6;
  box-shadow: inset 5px 0 #f7d87c;
}

.dark-theme mark[data-ai-highlight] {
  color: inherit;
  background: #ffeb3b59;
  border-radius: 2px;
  margin-left: .06em;
  margin-right: .06em;
  padding: 0 2px;
}

.dark-theme mark.ai-hl-temp {
  color: inherit;
  background: #2196f340;
  border-radius: 2px;
  margin-left: .06em;
  margin-right: .06em;
  padding: 0 2px;
}

.dark-theme pre mark[data-ai-highlight], .dark-theme code mark[data-ai-highlight] {
  color: inherit;
  background: #ffeb3b47;
  border-radius: 2px;
  margin-left: 0;
  margin-right: 0;
  padding: 0 2px;
}

.light-theme code[class*="language-"], .light-theme pre[class*="language-"] {
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  tab-size: 4;
  hyphens: none;
  color: #5e6687;
  direction: ltr;
  background: #f5f7ff;
  font-family: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
  font-size: 14px;
  line-height: 1.375;
}

.light-theme pre > code[class*="language-"] {
  font-size: 1em;
}

.light-theme pre[class*="language-"]::-moz-selection {
  text-shadow: none;
  background: #dfe2f1;
}

.light-theme pre[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #dfe2f1;
}

.light-theme code[class*="language-"]::-moz-selection {
  text-shadow: none;
  background: #dfe2f1;
}

.light-theme code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #dfe2f1;
}

.light-theme pre[class*="language-"]::selection, .light-theme pre[class*="language-"] ::selection, .light-theme code[class*="language-"]::selection, .light-theme code[class*="language-"] ::selection {
  text-shadow: none;
  background: #dfe2f1;
}

.light-theme pre[class*="language-"] {
  border-radius: .8em;
  margin: .5em 0;
  padding: 1em;
  overflow: auto;
}

.light-theme :not(pre) > code[class*="language-"] {
  border-radius: .8em;
  padding: .1em;
}

.light-theme .token.comment, .light-theme .token.prolog, .light-theme .token.doctype, .light-theme .token.cdata {
  color: #898ea4;
}

.light-theme .token.punctuation {
  color: #5e6687;
}

.light-theme .token.namespace {
  opacity: .7;
}

.light-theme .token.operator, .light-theme .token.boolean, .light-theme .token.number {
  color: #c76b29;
}

.light-theme .token.property {
  color: #c08b30;
}

.light-theme .token.tag {
  color: #3d8fd1;
}

.light-theme .token.string {
  color: #22a2c9;
}

.light-theme .token.selector {
  color: #6679cc;
}

.light-theme .token.attr-name {
  color: #c76b29;
}

.light-theme .token.entity, .light-theme .token.url, .language-css .token.string, .style .token.string {
  color: #22a2c9;
}

.light-theme .token.attr-value, .light-theme .token.keyword, .light-theme .token.control, .light-theme .token.directive, .light-theme .token.unit {
  color: #ac9739;
}

.light-theme .token.statement, .light-theme .token.regex, .light-theme .token.atrule {
  color: #22a2c9;
}

.light-theme .token.placeholder, .light-theme .token.variable {
  color: #3d8fd1;
}

.light-theme .token.deleted {
  text-decoration: line-through;
}

.light-theme .token.inserted {
  border-bottom: 1px dotted #202746;
  text-decoration: none;
}

.light-theme .token.italic {
  font-style: italic;
}

.light-theme .token.important, .light-theme .token.bold {
  font-weight: bold;
}

.light-theme .token.important {
  color: #c94922;
}

.light-theme .token.entity {
  cursor: help;
}

.light-theme pre > code.highlight {
  outline-offset: .4em;
  outline: .4em solid #c94922;
}

.light-theme .line-numbers.line-numbers .line-numbers-rows {
  border-right-color: #dfe2f1;
}

.light-theme .line-numbers .line-numbers-rows > span:before {
  color: #979db4;
}

.light-theme .line-highlight.line-highlight {
  background: linear-gradient(to right, #6b739433 70%, #6b739400);
}

.light-theme mark[data-ai-highlight] {
  color: inherit;
  background: #ffeb3b73;
  border-radius: 2px;
  margin-left: .06em;
  margin-right: .06em;
  padding: 0 2px;
}

.light-theme mark.ai-hl-temp {
  color: inherit;
  background: #2196f34d;
  border-radius: 2px;
  margin-left: .06em;
  margin-right: .06em;
  padding: 0 2px;
}

.light-theme pre mark[data-ai-highlight], .light-theme code mark[data-ai-highlight] {
  color: inherit;
  background: #ffeb3b61;
  border-radius: 2px;
  margin-left: 0;
  margin-right: 0;
  padding: 0 2px;
}

.md-editing {
  outline: 3px dashed var(--accent-color, #6faaff);
  cursor: text;
  transition: outline-color .6s, width .5s, height .5s;
  animation: .25s ease-in-out fadeIn;
}

mark[data-ai-highlight] {
  background: #ffe60073;
  border-radius: 12px;
  margin: -4px -6px;
  padding: 4px 8px;
  display: inline-block;
}

mark.ai-hl-temp {
  background: #ffe60059;
  outline: 1px dashed;
}

.context-token-tag {
  color: #555;
  margin-left: 8px;
  font-size: .8em;
  display: none;
}
/*# sourceMappingURL=templates.571c8307.css.map */