* { box-sizing: border-box; }
body {
  margin: 0;
  overscroll-behavior-x: none;
}
.fit { display: inline-block; }
.grid { display: grid; }
.flex { display: flex; }
.pool { display: grid; }
.insert { outline: 0; }
.dropdown {
  cursor: pointer;
  outline: 0;
}
.handle {
  cursor: pointer;
  outline: 0;
}
.full-height { height: 100%; }
.absolute { position: absolute; }
.login-modal-yrkit-dev .modal-content > div {
  width: 100%;
  max-width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
  animation: up 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
.login-modal-header {
  padding: 20px 24px 10px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-items: center;
  font-family: var(--mono);
}
.login-logo {
  width: 44px;
  height: 44px;
}
.login-modal-yrkit-dev .pool > div {
  padding: 10px 24px 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-modal-yrkit-dev .pool .field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.login-modal-yrkit-dev .pool .field-label {
  display: none;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.login-modal-yrkit-dev .pool .field-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  font-family: var(--mono);
}
.login-modal-yrkit-dev .pool .btn-login {
  font-family: var(--mono);
  width: 100%;
  padding: 11px;
  background: var(--accent2);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
  letter-spacing: 0.01em;
}
.modal {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 11;
  backdrop-filter: blur(10px);
  overflow: hidden;
}
.modal-content {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 100%;
  height: 100%;
}
#alert {
  color: black;
  font-size: 16px;
  bottom: 20px;
  position: absolute;
  left: 20px;
  padding: 10px;
  z-index: 10001 !important;
  display: none;
  background: white;
  border: 1px solid gray;
  height: min-content !important;
}
#alert.alert-error {
  color: white;
  background: #b10c0c;
  border: 1px solid darkred;
}
#alert.alert-success {
  color: white;
  background: green;
  border: 1px solid darkgreen;
}
#alert.alert-active { display: block; }
.togglerarrow-icons { padding-right: 5px; }
.gitya-openfile-container {
  display: grid;
  grid-template-columns: auto repeat(3, min-content);
}
.gitya-openedfiles-iswrapper > button {
  text-decoration: underline;
}
.gitya-editing-file .gitya-openfile-restore,
.gitya-editing-file .gitya-openfile-save {
  color: blue !important;
}
.gitya-editing-file .gitya-openfile-close {
  color: blue !important;
}
.grafou-view-enabled-handle {
  color: green !important;
}
.grafou-view-disabled-handle {
  color: gray !important;
}
.active-grafou-view-handler {
  background: var(--s2);
}
.gitya-openfile-container:not(.active-gitya-openfiles) .common-handles,
.gitya-openfile-container:not(.active-gitya-openfiles) .grafou-toggle-config {
  display: none;
}
.tree-dir button {
  display: block;
  width: 100%;
  text-align: start;
  user-select: none;
}
.tree-file {
  padding-left: 20px;
  user-select: none;
}
.tree { position: relative; }
.search-container { margin-bottom: 10px; }
.tree-rule {
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  width: 1px;
  background: gray;
  margin-left: -6px;
}
.tree-dir button:hover, .tree-file:hover { background: #37373d; }
.open-tree { background: #2f2f2f !important; }
.active-tree {
  background: #0d871c !important;
  cursor: default;
}
.cut-tree { color: #686363 !important; }
.active-contextmenu { background: #e71c1c !important; }
.tip { position: relative; }
.tip .tip-tip {
  position: absolute;
  display: none;
}
.tip:hover .tip-tip { display: block; }
.desktop { width: 1281px !important; }
.tablet { width: 801px !important; }
.phone { width: 481px !important; }
.triggers-viewports-tip {
  margin-top: -60px;
  margin-left: 5px;
  right: initial;
  background: black;
  color: white;
  z-index: 9;
  padding: 2px;
  border: 1px solid white;
}
.triggers-viewports {
  display: grid;
  grid-template-columns: repeat(3, min-content);
}
.triggers-viewports button {
  border: 1px solid gray;
  background: white;
}
.active-viewport {
  background: #5c5c5c !important;
  color: white;
}
.triggers-zoom {
  display: grid;
  grid-template-columns: min-content min-content min-content;
  justify-content: center;
}
.zoom-out { cursor: zoom-out; }
.zoom-in { cursor: zoom-in; }
.gitya-preview-inner iframe {
  width: 100%;
  height: 100%;
  background: white;
  border: 0;
  outline: 0;
}
.gitya-yrkit .yrkit-preview { height: 100%; }
.grafou-gallery-footer {
  display: none;
}
#grafou-gallery {
  position: absolute;
}
.grafou-img-button {
  padding: 0;
  border: 0;
  background: transparent;
  display: block;
}
.grafou-label-container {
  display: grid;
  grid-template-columns: auto min-content;
  width: calc(100% - 12px);
  margin: 0 0 0 5px;
}
.grafou-img-label {
  border: 0;
  text-align: center;
  display: block;
  padding: 4px 0;
}
.grafou-img-label:hover {
  background: #ffffff87;
}
.grafou-gallery-container {
  background: #00000045;
  border: 1px solid gray;
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  display: grid;
  grid-template-rows: auto min-content;
  font-family: sans-serif;
}
.grafou-gallery-inner {
  max-height: 80svh;
  overflow: auto;
}
.grafou-gallery-images-api, .grafou-gallery-images-www {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  padding: 20px;
}
.grafou-img {
  max-width: 200px;
  padding: 5px;
  cursor: pointer;
  display: block;
}
.grafou-gallery-image-edit:hover, .grafou-gallery-container .selected-grafou-img {
  border: 1px solid red;
}
.grafou-gallery-header {
  position: sticky;
  top: 0;
  background: lightgray;
  box-shadow: -1px 0px 3px black;
  padding: 4px 0;
}
.grafou-gallery-footer {
  background: black;
  padding: 4px 0;
  border-top: 1px solid gray;
  text-align: end;
}
.select-grafou-images {
  font-size: 20px;
  margin-right: 20px;
  background: transparent;
  color: green;
  border: 0;
  padding: 0;
  padding-top: 3px;
}
.select-grafou-images:hover {
  color: #116611;
}
.hide-handle .togglerarrow-icons { padding: 0; }
.preview-wrapper-handles {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  white-space: nowrap;
}
.selected-element-title {
  background: lightgray;
  display: flex;
  white-space: break-spaces;
  font-size: 10px;
  margin-right: 5px;
  height: 27px;
  overflow-y: auto;
  overflow-x: hidden;
}
.preview-selected-element {
  display: grid;
  grid-template-columns: 1fr min-content;
}
.grafou-redo-view .bi {
  transform: rotate(180deg);
  display: block;
}
.data-handle {
  display: none !important;
}
.full-width { width: 100% !important; }
.ai-handle button { color: orange; }
.dashboard-wrappers {
  height: 100%;
  display: grid;
  grid-template-rows: auto min-content min-content;
}
.dashboard-wrappers .dashboard-handle {
  background: transparent;
  color: white;
  border: 1px solid gray;
  margin: 0;
}
.dashboard-wrappers .dashboard-handle:hover,
.dashboard-wrappers .active-dashboard-handle { background: #5d5d5d; }
.dashboard-wrappers .dashboard-wrapper { width: 100%; }
.preview-frame {
  background: white;
  width: 100%;
  height: 100%;
  transform-origin: top left;
}
.dashboard-wrapper {
  display: grid;
  height: 100%;
}
.dashboard-container {
  overflow: auto;
}
.preview-container {
  max-width: 100vw;
  display: grid;
  grid-template-rows: 1fr min-content min-content;
}
.preview-container-inner {
  overflow: auto;
  padding: 15px 5px;
}
.preview-wrapper {
  margin: 0 auto;
  height: 100%;
  background: white;
  color: black;
  overflow: hidden;
}
.rules-grid-normal {
  grid-template-rows: 1fr !important;
}
.dashboard-container-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.preview-wrapper-yr {
  display: grid;
  justify-content: center;
  padding: 20px;
}
.preview-handles-collapsed {
  padding: 0 !important;
  display: block;
  width: 100%;
}
.dashboard-handles-collapsed {
  padding: 0 !important;
  display: flex;
}
.rules-grid {
  height: 100%;
  display: grid;
}
.rules-overlay {
  position: fixed;
  width: 100vw;
  height: 100svh;
  z-index: 999999;
}
.rules-grid-item {
  border: 2px solid gray;
  cursor: row-resize;
  position: relative;
  z-index: 1;
  top: 0 !important;
  left: 0 !important;
}
.rules-grid-item:hover {
  border: 6px solid gray;
}
/* ===== BASE ===== */
.words-code-container {
  display: grid;
  grid-template-rows: 1fr min-content;
  height: 100%;
  overflow: hidden;
}
.words-code {
  display: grid;
  grid-template-columns: min-content auto;
  background-color: #1f1f1f;
  height: 100%;
}
.line-numbers {
  text-align: end;
  overflow: hidden;
  padding: 10px;
  padding-top: 0;
  color: #617668;
  user-select: none;
  height: 150%;
}
.line-numbers, .words-code-insert, .highlight {
  font-size: 12px;
  line-height: 1.4;
  font-family: monospace;
}
.words-code-insert {
  white-space: pre;
  resize: none;
  height: 100%;
  margin: 0;
  outline: 0;
  border: 0;
  width: 100%;
  background-color: inherit;
  color: transparent;
  caret-color: gray;
  padding: 10px 0 10px 2px;
  border-left: 1px solid #3e3e3e;
}
.highlight-container {
  position: relative;
  overflow: hidden;
}
.highlight {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  white-space: pre;
  padding-left: 2px;
  border-left: 1px solid #3e3e3e;
  color: #9CDCFE;
  background-image: linear-gradient(to right, transparent calc(79ch + 3px), #ffb10038 calc(79ch + 3px), #ffb10038 calc(80ch + 2px), transparent calc(80ch + 2px));
  min-width: 85ch;
}
/* yr tokens */
.yr-comment { color: gray !important; }
.yr-trigger, .yr-section, .yr-macro { color: #e90; }
.yr-html-selector { color: #569CD6; }
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  background: transparent !important;
}
.words-code-insert {
  overflow: auto; /* 🔥 ESSENCIAL */
}
.words-code {
  height: 100%;
  max-height: 100%;
  overflow: hidden; /* 🔥 impede crescer infinito */
}
.highlight-container {
  position: relative;
  overflow: hidden; /* ok manter */
}
.words-code-handles {
  display: flex;
  gap: 10px;
  padding: 6px 10px;
  font-size: 11px;
  background: #181818;
  color: #aaa;
  border-top: 1px solid #333;
  align-items: center;
  white-space: nowrap;
}
.words-code-info {
  display: flex;
  gap: 10px;
}
.words-code-search {
  margin-left: auto;
}
.search-words-code {
  background: #222;
  border: 1px solid #333;
  color: #ccc;
  padding: 2px 6px;
  width: 11ch;
  font-family: inherit;
}
.toggle-macros, .search-prev, .search-next, .search-clear {
  background: #222;
  border: 1px solid #333;
  color: #ccc;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 3px;
}
.toggle-macros {
  color: #aaa !important;
}
.toggle-macros.active {
  color: green !important;
}
.search-prev:disabled, .search-next:disabled, .search-clear:disabled {
  opacity: 0;
  cursor: default;
  display: none;
}
.search-count {
  font-size: 11px;
  color: #888;
  min-width: 50px;
  text-align: center;
}
.font-inc, .font-dec, .search-clear {
  background: #222;
  border: 1px solid #333;
  color: #ccc;
  padding: 2px 6px;
  cursor: pointer;
  border-radius: 3px;
}
.font-inc:hover, .font-dec:hover, .search-clear:hover {
  background: #2a2a2a;
}
/* cursor char highlight */
.cursor-char {
  background: #ffffff22;
  outline: 1px solid #ffffff33;
}
.highlight {
  /* existing styles... */
  overflow: scroll;        /* was: nothing / hidden */
  scrollbar-width: none;   /* hide the scrollbar */
}
.highlight::-webkit-scrollbar {
  display: none;
}
.iframe-console {
  font-family: monospace;
  font-size: 12px;
  background: #1e1e1e;
  color: #ddd;
  padding: 8px;
  overflow-y: auto;
}
.entry {
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid gray;
}
.time { color: #777; }
.level-log { color: #ccc; }
.level-warn { color: #e5c07b; }
.string { color: #98c379; }
.number { color: #d19a66; }
.boolean { color: #56b6c2; }
.null, .undefined { color: #c678dd; }
.function {
  color: #61afef;
  cursor: pointer;
}
.dom-node { color: #e5c07b; }
.object-key { color: #abb2bf; }
.level-error, .level-error .object-key { color: #e06c75; }
.collapsible { cursor: pointer; }
.children { margin-left: 15px; }
.stack-line {
  font-family: monospace;
  padding-left: 1em;
  white-space: pre;
}
.stack-line.clickable {
  cursor: pointer;
  color: #4ea1ff;
  text-decoration: underline;
}
.stack-line.clickable:hover {
  color: #1e90ff;
}
.entry > span { margin-right: 7px; }
.entry > span:first-child { margin-right: 0; }
.code-snippet {
  background: #2d2d2d;
  color: #f8f8f2;
  padding: 0.5em;
  margin: 0.25em 0;
  border-radius: 4px;
  overflow-x: auto;
  text-decoration: none !important;
}
.elements-tab {
  font-family: monospace;
  font-size: 12px;
  white-space: pre;
  line-height: 1.6;
  background: #111;
  color: #eee;
  overflow: auto;
  height: 100%;
  padding: 10px 0;
}
.node {
  cursor: pointer;
}
.collapsed > .el-children {
  display: none;
}
.entry-label {
  color: #8cf;
}
.entry-label:hover {
  background: gray;
}
.highlight-locked {
  background: blue;
  color: gray;
}
.chat-container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #f0f4f8, #e1e9f0);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #d1d1d1;
  transition: all 0.3s ease;
  color: black;
}
.input-container {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.button-container {
  display: flex;
  justify-content: space-between;
  padding: 5px 0 0;
}
.chat-history {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  height: 100%;
  transition: background-color 0.3s ease;
}
.chat-user, .chat-assistant {
  max-width: 75%;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 24px;
  line-height: 1.5;
  word-wrap: break-word;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}
.chat-user {
  background-color: #d1e7dd;
  align-self: end;
}
.chat-assistant {
  background-color: #f8d7da;
  align-self: start;
}
.message-role {
  font-weight: bold;
  margin-bottom: 4px;
}
.copy-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6c757d;
}
.typing-indicator {
  font-style: italic;
  color: black;
  margin: 16px 24px;
  animation: fadeIn 0.5s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    background-color: #cce5ff;
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}
.dots::after {
  content: '...';
  animation: blink 1.5s steps(3, end) infinite;
}
@keyframes blink {
  0% { content: ''; }
  33% { content: '.'; }
  66% { content: '..'; }
  100% { content: '...'; }
}
.chat-form {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-top: 1px solid #e0e0e0;
  background-color: #ffffff;
}
.chat-user-input {
  flex: 1;
  height: 39px;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 9px;
  border: none;
  outline: none;
  margin-bottom: 0;
  transition: border-color 0.3s;
}
.chat-user-input:focus {
  border-color: #007bff;
}
.chat-user-submit, .chat-audio-input, .chat-audio-stop {
  padding: 8px 10px;
  border: 1px solid #ced4da;
  border-radius: 12px;
  background: linear-gradient(45deg, #007bff, #0056b3);
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  flex: 0 0 auto;
}
.chat-user-submit:hover, .chat-audio-input:hover, .chat-audio-stop:hover {
  background: linear-gradient(45deg, #0056b3, #007bff);
  transform: scale(1.05);
}
.chat-user-submit:focus, .chat-audio-input:focus, .chat-audio-stop:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}
#theme-toggle {
  position: absolute;
  top: 10px;
  right: 20px;
  padding: 6px 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  z-index: 99;
}
.chat-container pre, .chat-container code {
  background: #2d2d2d;
  color: #f8f8f2;
  font-family: 'Courier New', Courier, monospace;
  padding: 8px;
  border-radius: 6px;
  overflow-x: auto;
  line-height: 22px;
}
.chat-disclaimer {
  font-size: 14px;
  color: #6c757d;
  margin: 6px 12px;
  padding: 4px;
  background-color: #f8f9fa;
  border-radius: 6px;
  text-align: center;
}
.chat-msg {
  display: flex;
  flex-direction: row;
  overflow: clip;
}
.chat-msg p {
  margin: 0;
}
.togglerexpand-icons { padding-right: 5px; }
.grafou-wrappers-basic-toggler button {
  text-align: start;
  width: 100%;
  font-size: 12px;
  font-family: sans-serif;
  color: #051e3c;
  background: transparent;
  border: 0;
  padding-top: 3px;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
}
.grafou-wrappers-basic-toggler button:hover {
  background: #4e78ad;
  color: white;
}
.grafou-wrappers-basic-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 2px;
  padding: 2px;
  padding-top: 0;
  margin-top: 2px;
}
.grafou-new-wrapper {
  display: block;
  width: 100%;
  text-align: start;
  border: 0;
  border-bottom: 1px solid gray;
  background: white;
}
.grafou-new-wrapper:hover {
  background: var(--grafou-bg5);
}
.grafou-wrappers-basic-container button {
  background: #7b98ff;
  border: 1px solid #266983;
  text-align: start;
  color: #e9f5ff;
  padding-top: 5px;
  padding-bottom: 4px;
  display: grid;
  grid-template-columns: min-content auto;
  grid-gap: 6px;
  align-content: center;
}
.grafou-wrappers-basic button {
  user-select: none;
}
.grafou-wrappers-basic-container button:hover {
  background: #435e70;
}
.grafou-new-wrapper span {
  padding-right: 5px;
}
.grafou-wrappers { position: relative; }
.grafou-wrapper-item { padding-left: 22px; }
.grafou-wrapper-rule {
  position: absolute;
  z-index: 1;
  top: 0;
  height: 100%;
  width: 1px;
  background: gray;
  margin-left: -10px;
}
.grafou-wrappers-basic {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 5px;
}
.grafou-wrappers-basic-container {
  height: min-content;
}
.grafou-wrappers-basic-inner {
  border-left: 1px solid gray;
  padding-left: 3px;
}
  @media only screen and (max-width: 1282px) {
      .grafou-wrappers-basic {
    grid-template-columns: 1fr 1fr;
  }
  }
  @media only screen and (max-width: 802px) {
      .grafou-wrappers-basic {
    display: block;
  }
  .grafou-wrappers-basic-inner {
    border-left: 0;
    padding-left: 0;
  }
  }
.gs-display-picker {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 5px;
}
.grafou-styles {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.grafou-styles-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
/*.gs-sel-pill {*/
.grafou-styles select {
  font-size: 10px;
  font-family: var(--mono);
  color: var(--blue);
  background: rgba(79,143,255,.07);
  border: 1px solid rgba(79,143,255,.18);
  border-radius: 4px;
  padding: 1px 8px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 130px;
}
.grafou-classes-input {
  background: transparent;
  border: 0;
  width: 130px;
  color: var(--blue);
  font-family: var(--mono);
}
.gs-save-btn {
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border2);
  background: var(--s3);
  color: var(--muted);
  cursor: not-allowed;
  font-size: 10px;
  font-family: var(--mono);
  transition: all .13s;
  flex-shrink: 0;
}
.gs-save-btn.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  cursor: pointer;
}
.gs-save-btn.active:hover { opacity: .85; }
.gs-scroll {
  flex: 1;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0;
}
.gs-scroll {
  display: grid;
  grid-template-columns: repeat(4, 25%);
  gap: 5px;
}
  @media only screen and (max-width: 1282px) {
      .gs-scroll {
    grid-template-columns: repeat(2, 50%);
  }
  }
  @media only screen and (max-width: 802px) {
      .gs-scroll {
    grid-template-columns: 100%;
  }
  }
.gs-section {
  flex: 1 1 340px;
  border: 1px solid var(--border);
  align-self: flex-start;
}
.gs-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  transition: background .12s;
}
.gs-section-header:hover { background: var(--surface); }
.gs-section-header.open  { background: var(--surface); }
.gs-sh-icon {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0;
}
.gs-sh-label { font-size: 12px; font-weight: 600; flex: 1; color: var(--text2); }
.gs-section-header.open .gs-sh-label { color: var(--text); }
.gs-sh-arrow { font-size: 10px; color: var(--muted); transition: transform .15s; flex-shrink: 0; }
.gs-section-header.open .gs-sh-arrow { transform: rotate(90deg); }
.gs-section-body {
  display: none;
  padding: 8px 12px 14px;
  background: var(--surface);
}
.gs-section-body.open { display: block; }
.gs-row { display: flex; gap: 6px; margin-bottom: 8px; align-items: flex-end; }
.gs-row:last-child { margin-bottom: 0; }
.gs-field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; min-height: 0; }
.gs-label {
  font-size: 9px; font-family: var(--mono); color: var(--muted);
  letter-spacing: .4px; text-transform: uppercase;
}
.gs-inp {
  background: var(--s3); border: 1px solid var(--border2);
  border-radius: 7px; padding: 0 9px; height: 32px;
  color: var(--text); font-family: var(--mono); font-size: 12px;
  outline: none; width: 100%; transition: border-color .12s;
}
.gs-inp:focus { border-color: var(--blue); }
.gs-inp::placeholder { color: var(--muted); }
.gs-size-wrap { display: flex; gap: 3px; }
.gs-size-num  { flex: 1; }
.gs-size-unit { width: 54px; flex-shrink: 0; }
.gs-expr-wrap { position: relative; flex: 1; }
.gs-expr-wrap .gs-inp { padding-right: 30px; }
.gs-expr-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 4px; border: none;
  background: var(--s4); color: var(--muted); font-size: 10px;
  font-family: var(--mono); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .12s;
}
.gs-expr-btn.on { background: rgba(79,143,255,.15); color: var(--blue); }
.gs-tg { display: flex; gap: 3px; }
.gs-tg-btn {
  flex: 1; height: 32px; border-radius: 7px;
  border: 1px solid var(--border2); background: var(--s3); color: var(--muted);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .12s; padding: 0; font-size: 13px;
}
.gs-tg-btn:hover { border-color: var(--border); color: var(--text2); }
.gs-tg-btn.on    { background: var(--s4); border-color: var(--blue); color: var(--text); }
.gs-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.gs-chip {
  padding: 3px 9px; border-radius: 20px; font-size: 10px;
  font-family: var(--mono); background: var(--s3);
  border: 1px solid var(--border2); color: var(--muted);
  cursor: pointer; transition: all .12s; white-space: nowrap;
}
.gs-chip:hover { border-color: var(--blue); color: var(--text2); }
.gs-chip.on    { background: var(--s4); border-color: var(--blue); color: var(--text); }
.gs-color {
  position: relative;
  height: 32px;
  min-height: 32px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--border2);
  cursor: pointer;
  flex: 1;
  flex-shrink: 0;
  transition: border-color .12s;
  display: block;
}
.gs-color:hover    { border-color: var(--blue); }
.gs-color-bg       { position: absolute; inset: 0; }
.gs-color-input    { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.gs-color-hex {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,.75);
  pointer-events: none; text-shadow: 0 1px 3px rgba(0,0,0,.6); letter-spacing: .3px;
}
.gs-bm-label {
  font-size: 9px; font-family: var(--mono); color: var(--muted);
  letter-spacing: .4px; text-transform: uppercase; margin-bottom: 5px;
}
.gs-bm-wrap {
  background: var(--s3); border: 1px solid var(--border2);
  border-radius: 9px; padding: 5px; margin-bottom: 10px;
}
.gs-bm-grid {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  grid-template-rows: 28px auto 28px;
  gap: 3px;
}
.gs-bm-center {
  background: var(--s4); border: 1px solid var(--border); border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-family: var(--mono); color: var(--muted); min-height: 30px;
}
.gs-bm-edge { display: flex; align-items: center; justify-content: center; }
.gs-bm-inp {
  width: 30px; background: none; border: none;
  border-bottom: 1px solid var(--border2); color: var(--text);
  font-family: var(--mono); font-size: 11px; text-align: center;
  outline: none; padding: 2px 0; transition: border-color .12s;
}
.gs-bm-inp:focus       { border-color: var(--blue); }
.gs-bm-inp::placeholder { color: var(--muted); font-size: 10px; }
.gs-display-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 10px;
}
.gs-display-opt {
  background: var(--s3); border: 1px solid var(--border2); border-radius: 8px;
  padding: 7px 4px; display: flex; flex-direction: column;
  align-items: center; gap: 3px; cursor: pointer; transition: all .12s;
  color: var(--text);
}
.gs-display-opt:hover { border-color: var(--border); }
.gs-display-opt.on    { background: var(--s4); border-color: var(--blue); }
.gs-d-ico { font-size: 14px; }
.gs-d-lbl { font-size: 9px; font-family: var(--mono); color: var(--muted); }
.gs-display-opt.on .gs-d-lbl { color: var(--text2); }
.gs-ctx { border-top: 1px solid var(--border); margin-top: 10px; padding-top: 8px; }
.gs-ctx-label {
  font-size: 9px; font-family: var(--mono); color: var(--muted);
  letter-spacing: .8px; text-transform: uppercase; margin-bottom: 7px;
}
.gs-more-btn {
  display: flex; align-items: center; gap: 5px;
  background: none; border: none; border-top: 1px dashed var(--border);
  width: 100%; padding: 6px 0 0; margin-top: 8px;
  font-size: 10px; font-family: var(--mono); color: var(--muted);
  cursor: pointer; transition: color .12s;
}
.gs-more-btn:hover { color: var(--text2); }
.gs-more-body { display: none; padding-top: 8px; }
.gs-more-body.open { display: block; }
.gs-radius-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.gs-radius-prev {
  background: var(--s4); border: 1px solid var(--border);
  height: 40px; border-radius: 0; margin-bottom: 6px; transition: border-radius .2s;
}
.gs-shadow-prev {
  background: var(--s4); border-radius: 7px;
  height: 34px; margin-bottom: 6px; transition: box-shadow .2s;
}
.gs-hint { font-size: 10px; color: var(--muted); font-family: var(--mono); margin-top: 4px; }
.grafou-classes { position: relative; }
.grafou-classes-select {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: 0;
  user-select: none;
}
.grafou-attributes-header {
  position: sticky;
  top: 0;
  background: white;
  border-bottom: 1px solid gray;
}
.grafou-actions-container {
  display: grid;
  grid-template-columns: min-content 1fr;
  white-space: nowrap;
}
.grafou-actions button {
  border: 1px solid gray;
  background: white;
}
.active-grafou-action {
  background: transparent;
}
.actions-container {
  display: grid;
  grid-template-columns: auto min-content;
}
.actions-modal button {
  background: transparent;
  cursor: pointer;
  border: 0;
}
.actions-container {
  background: white;
  padding: 5px;
}
.action-logs {
  padding: 5px 10px;
  min-height: 100px;
  overflow: auto;
  color: white;
  background: #222;
  border: 1px solid gray;
  white-space: pre;
}
.active-action {
  background: yellow !important;
}
.clear-button-disabled {
  color: lightgray !important;
}
.action-logs-cursor {
  display: inline-block;
  width: 1ch;
  height: 1em;
  background: #ccc;
  vertical-align: text-bottom;
  animation: blink 1s step-start infinite;
  margin: 1em 0;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes pulse-circle {
  50% { opacity: 0.5; }
}
.pulse-circle {
  background-color: #60a5fa;
  border-radius: 9999px;
  animation: pulse-circle 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  width: 8px;
  height: 8px;
}
.confirmation-container {
  background: white;
  width: 100%;
  max-width: 300px;
  padding: 20px;
  border: 1px solid black;
  color: black;
}
.confirmation-text { padding-bottom: 10px; }
.confirmation-buttons { text-align: end; }
.confirmation-yes { background: white; }
.confirmation-no {
  background: black;
  color: white;
}
.confirmation-yes, .confirmation-no {
  border: 0;
  padding: 5px 10px;
  font-weight: bold;
}
.confirmation-yes:hover { background: #dddddd; }
.confirmation-no:hover { background: #343434; }
.context-menu-content {
  background: gray;
  border: 1px solid lightgray;
  width: 150px;
}
.context-menu-content button {
  background: transparent;
  color: white;
  padding: 10px 14px;
  font-size: 10px;
  border: 0;
  display: block;
  width: 100%;
  text-align: start;
}
.context-menu-content button:hover {
  background: gray;
}
.ctm-rule {
  border-bottom: 1px solid lightgray;
  display: block;
}
.disabled-ctm-button {
  color: gray;
}
.gitya-context-menu-wrapper .modal {
  z-index: 12;
}
.context-menu-modal .modal { backdrop-filter: none; }
.context-menu { position: fixed; }
.loading-container {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 11;
  backdrop-filter: blur(10px);
  display: grid;
  align-items: center;
  justify-items: center;
}
.loading-aux button {
  position: absolute;
  background: red;
  color: white;
  border: 1px solid black;
  border-radius: 10px;
}
.chat-form { position: relative; }
.chat-append-items {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: -90px;
}
.chat-msg audio::-webkit-media-controls-panel {
  background-color: transparent;
  border-radius: 8px;
}
.chat-container {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: linear-gradient(135deg, #f0f4f8, #e1e9f0);
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #d1d1d1;
  transition: all 0.3s ease;
  color: black;
}
.input-container {
  display: flex;
  flex-direction: row;
  gap: 8px;
}
.button-container {
  display: flex;
  justify-content: space-between;
  padding: 5px 0 0;
}
.chat-history {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px;
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  height: 100%;
  transition: background-color 0.3s ease;
}
.chat-user, .chat-assistant {
  max-width: 75%;
  padding: 12px 16px;
  margin-bottom: 16px;
  border-radius: 24px;
  line-height: 1.5;
  word-wrap: break-word;
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}
.chat-user {
  background-color: #d1e7dd;
  align-self: end;
}
.chat-assistant {
  background-color: #f8d7da;
  align-self: start;
}
.message-role {
  font-weight: bold;
  margin-bottom: 4px;
}
.copy-btn {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #6c757d;
}
.typing-indicator {
  font-style: italic;
  color: black;
  margin: 16px 24px;
  animation: fadeIn 0.5s;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    background-color: #cce5ff;
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}
.dots::after {
  content: '...';
  animation: blink 1.5s steps(3, end) infinite;
}
@keyframes blink {
  0% { content: ''; }
  33% { content: '.'; }
  66% { content: '..'; }
  100% { content: '...'; }
}
.chat-form {
  display: flex;
  flex-direction: column;
  padding: 16px;
  border-top: 1px solid #e0e0e0;
  background-color: #ffffff;
}
.chat-user-input {
  flex: 1;
  height: 39px;
  padding: 10px 16px;
  font-size: 14px;
  border-radius: 9px;
  border: none;
  outline: none;
  margin-bottom: 0;
  transition: border-color 0.3s;
}
.chat-user-input:focus {
  border-color: #007bff;
}
.chat-user-submit, .chat-audio-input, .chat-audio-stop, .chat-append,
.chat-img-input, .chat-doc-input {
  padding: 8px 10px;
  border: 1px solid #ced4da;
  border-radius: 12px;
  background: linear-gradient(45deg, #007bff, #0056b3);
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  flex: 0 0 auto;
}
.chat-audio-input, .chat-img-input, .chat-doc-input {
  text-align: start;
  display: flex;
  gap: 10px;
  align-items: center;
}
.chat-audio-stop {
  width: 100%;
}
.chat-user-submit:hover, .chat-audio-input:hover, .chat-audio-stop:hover, .chat-append:hover,
.chat-audio-input,hover, .chat-img-input:hover, .chat-doc-input:hover {
  background: linear-gradient(45deg, #0056b3, #007bff);
  transform: scale(1.05);
}
.chat-user-submit:focus, .chat-audio-input:focus, .chat-audio-stop:focus,
.chat-audio-input:focus, .chat-img-input:focus, .chat-doc-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}
.chat-container pre, .chat-container code {
  background: #2d2d2d;
  color: #f8f8f2;
  font-family: 'Courier New', Courier, monospace;
  padding: 8px;
  border-radius: 6px;
  overflow-x: auto;
  line-height: 22px;
}
.chat-disclaimer {
  font-size: 14px;
  color: #6c757d;
  margin: 6px 12px;
  padding: 4px;
  background-color: #f8f9fa;
  border-radius: 6px;
  text-align: center;
}
.chat-msg {
  display: flex;
  flex-direction: column;
  overflow: clip;
  gap: 3px;
}
.chat-msg p {
  margin: 0;
}
.chat-avatar-user {
  align-self: end;
}
.chat-avatar-container {
  display: flex;
  gap: 8px;
  max-width: 75%;
}
.chat-role {
  font-size: 10px;
}
.chat-user-avatar {
  border-radius: 50%;
  align-self: start;
  font-size: 8px;
  width: 18px;
  height: 18px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #fff;
  padding-bottom: 2px;
}
.chat-msg-timestamp {
  align-self: end;
  font-size: 10px;
  color: rgba(156, 154, 146, 1);
  margin-bottom: 16px;
}
.chat-doc-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  background: rgba(124, 58, 237, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.5);
  width: 100%;
  cursor: pointer;
  transition: background 0.15s;
  box-sizing: border-box;
}
.chat-doc-card:hover {
  background: rgba(255, 255, 255, 0.5);
}
.chat-doc-icon {
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.chat-doc-info {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  flex: 1;
}
.chat-doc-name {
  font-size: 13px;
  font-weight: 600;
  color: blue;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-assistant .chat-doc-name {
  color: aqua;
}
.chat-doc-action {
  font-size: 11px;
  color: black;
  opacity: 0.7;
  margin-top: 2px;
}
.chat-assistant .chat-doc-action {
  color: antiquewhite;
}
.chat-media-wrapper {
  display: inline-block;
  margin-top: 4px;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.chat-media-download {
  color: white;
  font-size: 13px;
  text-align: end;
  text-decoration: none;
  display: block;
  padding: 2px;
}
.chat-doc-card {
  position: relative;
}
.chat-media-img {
  max-width: 100%;
  display: block;
  transition: opacity 0.15s;
}
.chat-media-img:hover {
  opacity: 0.85;
}
.player {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(32, 32, 32, 0.7);
  padding: 10px;
  border-radius: 12px;
  width: 100%;
}
.player-play {
  background: rgba(32, 32, 32, 0.9);
  border: none;
  color: white;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 15px;
}
.player-wave {
  background: transparent;
  flex: 1;
  width: 100%;
  display: block;
  height: 40px;
}
.grafou-projects-wrapper {
  background: white;
}
.grafou-projects-footer {
  display: grid;
  grid-template-columns: 1fr min-content;
  white-space: nowrap;
}
.grafou-project {
  padding: 0px 24px;
  cursor: pointer;
  background: white;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  white-space: nowrap;
  align-items: center;
}
.open-grafou-project {
  color: black;
  background: transparent;
  border: 0;
  padding: 10px 20px;
  text-align: start;
}
.grafou-project:hover {
  background: lightgray;
  color: black;
}
.grafou-add-project {
  outline: 0;
  text-align: center;
  padding: 10px 20px;
  cursor: pointer
}
.grafou-add-project:hover {
  background: white;
  color: black;
}
.grafou-todo { background: red; }
.grafou-doing { background: yellow; }
.grafou-done { background: green; }
.active-grafou-project {
  backgound: gray;
}
.grafou-kanban {
  background: white;
  padding: 10px;
}
.kanban-board-item {
  height: 50svh;
}
.kanban-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  font-family: sans-serif;
  overflow: auto;
}
.kanban-board-item {
  background: #f4f5f7;
  border-radius: 8px;
  padding: 8px;
  min-height: 200px;
  border: 3px solid gray;
  overflow: auto;
}
.kanban-todo { background: red; }
.kanban-doing { background: yellow; }
.kanban-done { background: lightgreen; }
.kanban-title {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 10px;
}
.kanban-card {
  background: #fff;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 8px;
  cursor: grab;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.kanban-card-input {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
}
.kanban-add {
  width: 100%;
  padding: 6px;
  border: none;
  border-radius: 6px;
  background: #e1e4e8;
  cursor: pointer;
}
.grafou-projectconfig-form {
  background: white;
  padding: 10px;
}
.grafou-projectconfig-inputs {
  white-space: nowrap;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
}
.grafou-projectconfig-title {
  text-align: center;
}
.hidden {
  display: none !important;
  /*position: absolute !important;
  z-index: -9999 !important;
  top: -20404px !important;
  opacity: 0 !important;*/
}
:root {
  --bg: #0c0c10;
  --s1: #14141a;
  --s2: #1b1b24;
  --s3: #22222e;
  --s4: #2a2a38;
  --s5: #111316;
  --canvas-bg: #383844;
  --surface: #14141a;
  --surface2: #1b1b24;
  --surface3: #22222e;
  --border: #28283a;
  --border2: #32324a;
  --accent: #5cff8f;
  --accent2: #4f8fff;
  --accent2-dim: rgba(79,142,247,0.12);
  --accent3: #ff7c5c;
  --green: #5cff8f;
  --green-dim: rgba(34, 197, 94, 0.1);
  --blue: #4f8fff;
  --yellow: #ffd166;
  --yellow2: #ffd16688;
  --yellow3: #ffd16655;
  --yellow-dim: rgba(245, 158, 11, 0.1);
  --purple: #a78bfa;
  --purple-dim: rgba(124,58,237,0.12);
  --red: #ff5c5c;
  --red-dim: rgba(239, 68, 68, 0.1);
  --text: #e4e4f0;
  --text2: #9090b0;
  --muted: #52526a;
  --muted2: #4b5263;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Syne', sans-serif;
}
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
}
html, body, body > div { height: 100%; }
.loading-container {
  background: var(--surface);
  z-index: 99;
}
.body {
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
}
.chat-toggler {
  margin-left: auto;
}
.topbar {
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 60;
}
.topbar-logo {
  width: 32px;
  height: 32px;
}
.loading-logo {
  width: 200px;
  height: 200px;
}
.main-row {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
  transition: width .22s cubic-bezier(.4, 0, .2, 1);
  max-width: 200px;
  width: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.sidebar .sidebar-buttons {
  text-align: start;
}
.sidebar-buttons {
  text-align: center;
  padding: 6px;
}
.sidebar-buttons button, .dashboard-handles button {
  background: transparent !important;
  padding: 6px;
  border: 0 !important;
  border-radius: 5px;
  color: var(--muted) !important;
  font-family: var(--mono);
}
.sidebar-buttons button:hover, .dashboard-handles button:hover {
  color: var(--text2) !important;
}
.sidebar-title {
  font-size: 16px;
  font-family: var(--mono);
  color: var(--text2);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 10px 5px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.preview-wrapper-outer {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-rows: min-content 1fr min-content;
  overflow: hidden;
  min-height: 0;
}
.preview-wrapper-handles {
  background: var(--s5);
  border-top: 1px solid var(--border);
  padding: 6px;
  color: var(--muted);
}
.preview-wrapper-handles button {
  background: var(--surface2);
  color: var(--text2);
  padding: 6px;
  border: 0 !important;
  border-radius: 5px;
}
.preview-wrapper-handles button:hover {
  color: var(--accent);
}
.preview-topbar {
  background: var(--surface);
}
.preview-topbar button {
  background: transparent;
  border: 0;
  color: var(--text2);
  font-size: 14px;
  font-family: var(--mono);
}
.gitya-openfile-container {
  border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border);
  padding-right: 5px;
}
.gitya-openfile-container .gitya-openfile {
  padding: 8px 6px;
  padding-left: 12px;
}
.gitya-openfile-close {
  color: var(--text2);
}
.active-gitya-openfiles {
  border-bottom-color: var(--accent2);
  background: var(--bg);
}
.active-gitya-openfiles .gitya-openfile,
.active-gitya-openfiles .gitya-openfile-close,
.active-gitya-openfiles .grafou-toggle-config {
  color: var(--text);
}
.gitya-openfile-restore, .gitya-openfile-save {
  color: var(--text2);
}
.tree-dir button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 10px;
  font-size: 11px;
  font-family: var(--mono);
  color: var(--text2);
  cursor: pointer;
  transition: background .1s;
  position: relative;
  background: transparent;
  border: 0;
}
.tree-dir button:hover {
  background: var(--surface2) !important;
}
.tree-dir .active-tree {
  background: var(--surface2) !important;
  color: var(--accent2);
}
.tree-dir .bi {
  font-size: 9px;
}
.tree-dir .togglerarrow-icons {
  padding-right: 0;
}
.tree-rule {
  background: var(--muted) !important;
}
.preview-topbar {
  background: var(--surface);
  min-width: 0;
  overflow: hidden;
}
.preview-edit {
  background: var(--surface);
  border-top: 1px solid var(--border);
  min-width: 0;
  overflow: hidden;
}
.preview-topbar-inner {
  overflow: auto;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.preview-wrapper-inner {
  background-color: var(--canvas-bg);
  background-image: radial-gradient(circle, rgba(255, 255, 255, .18) 1px, transparent 1px);
  background-size: 20px 20px;
  position: relative;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}
.preview-triggers {
  padding: 5px;
  /*border-top: 1px solid var(--border);*/
  background: var(--surface);
}
.preview-triggers button {
  padding: 6px;
  border-radius: 5px;
  background: transparent !important;
  border: 0 !important;
  color: var(--muted) !important;
}
.preview-triggers button:hover {
  color: var(--text2) !important;
}
.preview-triggers .active-viewport {
  background: var(--surface2) !important;
  color: var(--text) !important;
}
.sidebar-projects-actions {
  text-align: center;
}
/*
.yrkitv2-preview, .gitya-preview-inner, .grafou-preview-inner {
  height: calc(100% - 18px);
}
.yrkit-preview {
  height: 98.7%;
}
*/
.yrkitv2-preview {
  height: calc(100% - 43px);
}
.yrkitv2-preview-collapsed {
  height: calc(100% - 19px);
}
.yrkit-preview, .gitya-preview-inner, .grafou-preview-inner {
  height: 100%;
}
.preview-edit-toggler button {
  background: var(--surface);
  border: 0;
  color: var(--text2);
  padding: 5px 8px;
}
.preview-edit-toggler button:hover {
  color: var(--text2) !important;
}
.preview-edit-toggler .right {
  display: inline-block;
  transform: rotate(-90deg);
}
.preview-edit-toggler .togglerarrow-icons {
  padding: 0;
}
.preview-edit-inner {
  height: 200px;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--surface);
  padding-top: 7px;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.sidebar-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar-inner .dashboard-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tree {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.tree-container {
  flex: 1;
  height: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.search-input, .grafou-attribute-value {
  background: var(--s3);
  border: 1px solid var(--border2);
  border-radius: 7px;
  padding: 6px 9px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 12px;
  outline: none;
  margin: 0 10px;
  width: calc(100% - 20px);
  transition: border-color .12s;
  height: 32px;
}
.grafou-attributes-header {
  background: var(--s1);
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}
.grafou-attribute-name {
  color: var(--text2);
  padding: 5px 10px;
  font-family: var(--mono);
}
.update-grafou-attributes {
  margin: 5px 10px;
  border-radius: 7px;
  font-family: var(--mono);
  font-size: 12px;
  padding: 4px 9px;
  text-transform: lowercase;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
}
.update-grafou-attributes.active-handle {
  border: 1px solid var(--accent2);
  background: var(--accent2);
  color: var(--text);
}
.update-grafou-attributes.active-handle:hover {
  background: var(--blue);
}
.tip-tip {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text2);
  padding: 7px;
  font-family: var(--mono);
  position: fixed !important;
}
.sidebar-buttons {
  border-bottom: 1px solid var(--border);
}
.sidebar-projects .sidebar-title {
  border: 0;
}
.sidebar-buttons .active-dashboard-handle, .dashboard-handles .active-dashboard-handle,
.sidebar-buttons .active-dashboard-handle:hover, .dashboard-handles .active-dashboard-handle:hover {
  background: var(--surface2) !important;
  color: var(--text) !important;
}
.preview-edit {
  background: var(--surface);
  border-top: 1px solid var(--border);
}
.preview-edit .sidebar-buttons {
  text-align: start;
  border-bottom: 1px solid var(--border);
  overflow: auto;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.preview-wrappers .dashboard-wrapper {
  overflow: auto;
}
.preview-wrappers .tree-container {
  white-space: nowrap;
  height: auto;
  overflow: auto;
}
.preview-wrapper .tree {
  display: grid;
  grid-template-rows: min-content auto;
}
.dashboard-handles {
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.dashboard-handles .right {
  display: inline-block;
  transform: rotate(-90deg);
}
.preview-wrapper {
  background: transparent !important;
}
.ai-handle button {
  color: var(--yellow3) !important;
}
.ai-handle button:hover {
  color: var(--yellow2) !important;
}
.ai-handle .active-dashboard-handle, .ai-handle .active-dashboard-handle:hover {
  color: var(--yellow) !important;
}
.words-code, .iframe-console, .elements-tab {
  background: #09090d !important;
  font-family: var(--mono) !important;
}
.line-numbers, .words-code-insert, .highlight {
  font-family: var(--mono) !important;
}
.rules-grid {
  overflow: hidden;
}
.dashboard-wrapper {
  overflow: auto;
}
.sidebar > .sidebar-buttons {
  border-bottom: 1px solid var(--border);
}
.sidebar-open-files {
  max-height: 140px;
  overflow: auto;
}
.sidebar-open-files-container {
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.sidebar-open-files .gitya-openfile-container {
  padding: 0;
  border: 0;
}
.sidebar-open-files button {
  background: transparent;
  font-family: var(--mono);
  color: var(--text2);
  padding-top: 7px;
  padding-bottom: 7px;
  border: 0;
  font-size: 10px;
  text-align: start;
}
.gitya-openfile-container:hover {
  background: var(--surface2) !important;
}
.sidebar-open-files .active-gitya-openfiles button {
  color: var(--accent2) !important;
}
.chat-container {
  border-radius: 0;
  border: 0;
}
.chat-history, .chat-form {
  background: var(--surface);
}
.chat-msg {
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
}
.chat-user {
  color: var(--text);
  background: var(--accent2);
  border-radius: 10px 10px 2px 10px;
}
.chat-assistant {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px 10px 10px 2px !important;
}
.chat-history {
  border-bottom: 1px solid var(--border) !important;
}
.chat-form {
  border: 0 !important;
  padding: 8px 10px !important;
}
.chat-disclaimer {
  background: transparent;
  font-size: 11px;
  margin-bottom: 0;
}
.chat-user-submit, .chat-audio-input, .chat-audio-stop, .chat-append,
.chat-audio-input, .chat-img-input, .chat-doc-input {
  background: var(--yellow);
  color: var(--surface);
  transition: opacity .13s;
  border: 0 !important;
}
.chat-user-submit:hover, .chat-audio-input:hover, .chat-audio-stop:hover, .chat-append:hover,
.chat-audio-input:hover, .chat-img-input:hover, .chat-doc-input:hover {
  background: var(--yellow);
  opacity: .8;
}
.chat-user-input {
  background: var(--surface2);
  border: 1px solid var(--border2);
  color: var(--text);
  font-family: var(--sans);
  resize: none;
}
.typing-indicator {
  padding: 8px 10px;
  font-size: 12px;
  margin: 0 !important;
  background: var(--border);
  color: var(--text);
}
.chat-user-submit:focus, .chat-audio-input:focus,
.chat-audio-stop:focus, .chat-user-input:focus,
.chat-audio-input:focus, .chat-img-input:focus, .chat-doc-input:focus {
  border: 1px solid var(--yellow);
}
.code-container.dashboard-wrapper {
  overflow: hidden;
}
*::-webkit-scrollbar {
  height: 6px;
  width: 8px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 8px;
  transition: background .2s;
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--text2);
}
*::-webkit-scrollbar-thumb:active {
  background: var(--text);
}
*::-webkit-scrollbar-corner {
  background: transparent;
}
.gitya-editing-file .gitya-openfile-restore,
.gitya-editing-file .gitya-openfile-save {
  color: var(--blue) !important;
}
.gitya-editing-file .gitya-openfile-close {
  color: var(--blue) !important;
}
.entry-label {
  color: var(--text2);
}
.entry-label:hover {
  background: var(--surface2);
}
.highlight-locked {
  background: var(--surface2);
  color: var(--blue);
}
.context-menu-content {
  background: var(--surface2);
  border: 1px solid var(--border);
}
.context-menu-content button:hover {
  background: var(--border) !important;
}
.ctm-rule {
  border-bottom: 1px solid var(--border);
}
.active-contextmenu {
  background: var(--red) !important;
  color: var(--text) !important;
}
.disabled-ctm-button {
  color: var(--muted) !important;
}
.grafou-view-container {
  height: 92%;
}
.tip-tip {
  z-index: 99;
  position: fixed;
}
.preview-wrappers {
  display: block;
  overflow: auto;
}
.preview-wrappers .search-container {
  margin-top: 10px;
}
.grafou-wrappers-basic-container button {
  background: var(--s3) !important;
  border: 1px solid var(--border2) !important;
}
.grafou-wrappers-basic-container button:hover {
  border: 1px solid var(--blue) !important;
  color: var(--text) !important;
}
.grafou-wrappers-basic-inner {
  border-left: 1px solid var(--border);
}
.drag-clone {
  width: 200px !important;
  font-family: var(--mono);
  background: var(--muted);
  border: 1px solid var(--red);
  color: var(--text);
  border-radius: 5px;
  padding: 6px;
  white-space: nowrap;
  height: min-content;
}
.kanban-card.drag-clone {
  width: 112px !important;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grafou-view-disabled-handle {
  color: var(--muted) !important;
}
.grafou-view-enabled-handle {
  color: var(--blue) !important;
}
.active-grafou-view-handler {
  color: var(--accent) !important;
}
.topbar .dashboard-handles {
  border: 0;
  padding: 0;
}
.topbar-middle .toggle-sidebar {
  border: 1px solid var(--border);
  border-top: 0;
  border-bottom: 0;
  padding: 0 10px;
  margin-right: 4px;
}
.topbar-middle .toggle-sidebar .active-toggler {
  color: var(--blue) !important;
  background: var(--surface2) !important;
}
.zoom-select {
  border: 0;
  background: transparent;
  color: var(--muted);
}
.zoom-select:hover {
  color: var(--text2);
}
.words-code-handles {
  background: #09090d;
  font-family: var(--mono);
  color: var(--text2);
}
.words-code-handles button, .words-code-handles input {
  background: var(--s3) !important;
  border: 1px solid var(--border2) !important;
  color: var(--text);
}
.words-code-handles-fonts button {
  width: 22px;
}
.selected-element-title {
  background: var(--s2);
  padding: 5px;
  border-radius: 7px;
  color: var(--blue);
  font-family: var(--mono);
}
.modal {
  z-index: 99;
}
.grafou-home-modal .modal-content > div {
  width: 100%;
  max-width: 420px;
  padding: 10px;
}
.grafou-home-modal .modal-content-inner {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04);
  animation: up 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  height: 400px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
}
.grafou-home-modal .sidebar-buttons {
  display: flex;
  flex-shrink: 0;
  padding: 0;
  background: var(--s5);
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.grafou-home-tab {
  flex: 1;
}
.grafou-home-modal .sidebar-buttons .dashboard-handle {
  border-bottom: 2px solid transparent;
  padding: 10px 0;
  width: 100%;
}
.grafou-home-modal .sidebar-buttons .active-dashboard-handle {
  border-bottom: 2px solid var(--blue) !important;
  background: transparent !important;
  border-radius: 0 !important;
}
.grafou-projects-wrapper {
  background: transparent;
}
.grafou-kanban {
  padding: 0;
  background: transparent;
}
.kanban-board {
  grid-gap: 1px;
  background: var(--border);
  height: 100%;
}
.kanban-board:nth-child(1) {
  border-bottom-left-radius: 16px;
}
.kanban-board:nth-child(3) {
  border-bottom-right-radius: 16px;
}
.kanban-board-item {
  background: var(--surface);
  padding: 10px;
  border-radius: 0;
  border: 0;
  min-height: unset;
  height: 100%;
}
.kanban-title {
  margin-bottom: 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: grid;
  grid-template-columns: 1fr min-content;
}
.kanban-amount {
  font-size: 9px;
  padding: 1px 6px;
  border-radius: 20px;
  font-weight: 600;
}
.kanban-todo .kanban-title {
  color: var(--red);
}
.kanban-todo .kanban-amount {
  background: var(--red-dim);
}
.kanban-doing .kanban-title {
  color: var(--yellow);
}
.kanban-doing .kanban-amount {
  background: var(--yellow-dim);
}
.kanban-done .kanban-title {
  color: var(--green);
}
.kanban-done .kanban-amount {
  background: var(--green-dim);
}
.kanban-cards {
  height: 280px;
  overflow: auto;
  margin-bottom: 10px;
}
.kanban-card {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 8px 9px;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text);
  line-height: 1.4;
  cursor: pointer;
  transition: border-color 0.1s;
  min-height: calc(1em + 22px) !important;
}
.kanban-card:last-child {
  margin-bottom: 0;
}
.kanban-add {
  width: 100%;
  padding: 6px;
  border-radius: 6px;
  border: 1px dashed var(--border);
  background: none;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--sans);
  cursor: pointer;
}
.kanban-add:hover {
  background: var(--surface2);
  color: var(--text);
}
.config-wrapper {
  overflow: hidden;
}
.grafou-projectconfig {
  height: 298px;
  overflow: auto;
  margin-bottom: 10px;
  padding: 10px 16px;
}
.grafou-projectconfig-handles {
  display: flex;
  justify-content: end;
  flex-direction: row;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  width: calc(100% - 16px);
}
.update-grafou-project-config {
  padding: 6px 14px;
  background: var(--accent2);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.update-grafou-project-config:hover {
  opacity: 0.85;
}
.cancel-grafou-project-config, .update-grafou-project-config.disabled-handle {
  padding: 6px 14px;
  border-radius: 7px;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 12px;
  cursor: pointer;
}
.cancel-grafou-project-config:hover,
.update-grafou-project-config.disabled-handle:hover {
  background: var(--surface2);
  color: var(--text);
}
.grafou-projectconfig-form {
  background: transparent;
  padding: 0;
}
.grafou-projectconfig-title {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.grafou-projectconfig-inputs {
  grid-template-columns: repeat(2, 1fr);
}
.n-insert-label {
  font-size: 10px;
  color: var(--text);
  font-family: var(--sans);
}
.n-insert-input {
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 7px 10px;
  color: var(--text);
  font-family: var(--mono);
  font-size: 11px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}
.grafou-projectconfig, .grafou-projectconfig-setter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.n-insert-checkbox {
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--surface2);
  padding: 7px 10px;
  height: min-content;
  align-self: center;
  text-align: center;
}
.n-insert-container {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.grafou-actions-modal {
  border-top: 1px solid var(--border);
}
.grafou-actions-modal button {
  background: transparent;
  color: white;
  border: 0;
  font-family: var(--mono);
  color: var(--text2);
  border-bottom: 2px solid transparent;
  font-size: 10px;
  padding: 5px;
}
.grafou-actions-modal button:hover {
  color: var(--text) !important;
}
.grafou-actions-extra {
  border-top: 2px solid transparent;
  text-align: end;
}
.active-grafou-action {
  color: var(--text) !important;
  border-bottom: 2px solid var(--blue) !important;
}
.actions-container {
  background: transparent;
  border-top: 1px solid var(--s1);
  border-bottom: 1px solid var(--s1);
  color: var(--text2);
  font-family: var(--mono);
  font-size: 13px;
}
.actions-container button {
  background: transparent;
  border: 0;
}
.action-logs {
  border: 0;
  background: black;
  font-family: var(--mono);
  font-size: 10px;
  height: 200px;
}
.active-action {
  border-bottom: 2px solid var(--yellow) !important;
  background: transparent !important;
  color: var(--yellow) !important;
}
.clear-logs {
  color: var(--text) !important;
  cursor: pointer;
}
.clear-button-disabled {
  color: var(--muted) !important;
  cursor: default;
}
.ops-handle .active-toggler {
  background: var(--surface2) !important;
  color: var(--text) !important;
}
.ops-handle .active-toggler:hover {
  color: var(--text) !important;
}
.view-type-toggler {
  border-right: 1px solid var(--border) !important;
  padding-right: 10px !important;
}
.grafou-project-name {
  color: var(--text2);
}
.grafou-projects-container {
  height: 312px;
  overflow: auto;
}
.grafou-project {
  background: transparent;
  border-left: 2px solid transparent;
  border-bottom: 1px solid var(--border);
}
.grafou-project:hover {
  background: var(--surface2);
}
.active-grafou-project {
  border-left: 2px solid var(--accent2);
  background: var(--accent2-dim);
}
.grafou-projects-footer {
  border-top: 1px solid var(--border);
  padding: 10px 16px;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
  display: grid;
  align-items: center;
}
.grafou-add-project {
  padding: 5px 11px;
  background: var(--accent2);
  color: #fff;
  border: none;
  border-radius: 7px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.grafou-add-project:hover {
  background: var(--accent2-dim);
}
.grafou-footer-amounts {
  display: flex;
  gap: 8px;
}
.todo-amount, .doing-amount, .done-amount {
  color: var(--text);
}
.grafou-projects-name {
  color: var(--text);
  font-family: 'DM Mono', monospace;
  font-size: 12px;
}
.grafou-status-name {
  font-family: 'DM Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 20px;
}
.grafou-done {
  background: var(--green-dim);
  color: var(--green);
}
.grafou-doing {
  background: var(--yellow-dim);
  color: var(--yellow);
}
.grafou-todo {
  background: var(--red-dim);
  color: var(--red);
}
.grafou-gallery-container {
  max-width: 420px;
  margin: 20px;
  height: 600px;
}
.grafou-gallery-images-api, .grafou-gallery-images-www {
  padding: 0;
  gap: 0;
  grid-template-columns: repeat(3, 1fr);
  max-width: 420px;
  height: 260px;
  overflow: auto;
}
.grafou-gallery-container {
  background: var(--s1);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.grafou-gallery-header {
  background: transparent;
  text-align: start;
  display: flex;
  align-items: center;
  padding: 7px;
  gap: 8px;
  font-size: var(--sans);
}
.grafou-gallery-header-title {
  font-size: 12px;
  padding: 5px;
  border-radius: 7px;
}
.ggh-www {
  background: var(--green-dim);
  color: var(--green);
}
.ggh-api {
  background: var(--purple-dim);
  color: var(--purple);
}
.grafou-gallery-input {
  background: var(--accent2);
  border-radius: 7px;
  padding-right: 1px;
}
.grafou-gallery-input:hover {
  opacity: 0.9;
}
.grafou-label-container {
  margin: 0;
}
.grafou-gallery-image-edit {
  border: 2px solid var(--border);
  height: min-content;
}
.grafou-img-button {
  aspect-ratio: 1 / 1;
}
.grafou-img {
  padding: 0;
  object-fit: cover;
  overflow: hidden;
  height: 100%;
}
.grafou-img-label {
  background: var(--s2);
  color: var(--text2);
  font-size: 12px;
  font-family: var(--sans);
  padding: 4px;
  border: 1px solid var(--border);
}
.grafou-img-label:hover {
  background: var(--s2);
}
.grafou-img-delete {
  border: 0;
  background: var(--red-dim);
  color: var(--red);
}
.grafou-img-delete:hover {
  opacity: 0.9;
}
.grafou-gallery-image-edit:hover {
  border: 2px solid var(--yellow);
}
.grafou-gallery-container .selected-grafou-img {
  border: 2px solid var(--accent2);
  position: relative;
}
.grafou-gallery-container .selected-grafou-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent2-dim);
  pointer-events: none;
}
.grafou-img, .grafou-label-container, .grafou-img-label {
  width: 100%;
}
.chat-msg a {
  color: var(--blue);
}
.preview-edit:has(.preview-edit-inner.hidden) .sidebar-buttons .fit:not(.preview-edit-toggler) {
  display: none;
}
.preview-edit-toggler .handle:not(.active-toggler) {
  padding: 0;
}
.preview-edit-collapsed {
  padding: 0;
  display: block;
  width: 100%;
}
.preview-edit-toggler .handle, .hide-handle .handle {
  background: var(--bg) !important;
  color: var(--accent) !important;
  border-radius: 0;
}
.preview-edit-toggler .handle:hover, .hide-handle .handle:hover {
  color: var(--accent) !important;
  opacity: 0.8 !important;
}
.grafou-chat-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #2d9e5f;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  cursor: grab;
}
.grafou-modal-title-name {
  font-size: 16px;
}
.grafou-modal-subtitle {
  font-size: 10px;
}
.grafou-chat-modal-header .topbar-logo {
  background: var(--bg);
  border-radius: 8px;
}
.chat-handle button {
  color: var(--text) !important;
  font-size: 18px;
}
.chat-handle button:hover {
  color: var(--text) !important;
  background: var(--surface2) !important;
}
.close-chat-handle {
  margin-left: auto;
}
.close-chat-handle button {
  background: transparent;
  color: inherit;
  border: 0;
  font-size: 18px;
}
.close-chat-handle button:hover {
  color: var(--muted);
}
.grafou-chat-modal .modal {
  backdrop-filter: blur(0);
}
.grafou-chat-modal .modal-content {
  align-items: end;
  justify-items: end;
  padding: 20px;
}
.grafou-chat-modal .chat-container {
  height: 60svh;
  width: 400px;
  background: transparent;
}
  @media only screen and (max-width: 482px) {
      .grafou-chat-modal .chat-container {
    width: 80svw;
  }
  }
.grafou-chat-modal .chat-history, .grafou-chat-modal .chat-form {
  background: rgb(48, 48, 46);
}
.grafou-chat-modal .chat-form {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
.grafou-chat-modal .modal-content {
  position: relative;
}
.grafou-chat-modal .modal-content > div {
  position: absolute;
  border: 0.5px solid rgba(222, 220, 209, 0.3);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  margin: 20px;
}
.grafou-chat-modal .chat-msg {
  border: 0.5px solid rgba(222, 220, 209, 0.15) !important;
}
.grafou-chat-modal .chat-assistant {
  background: rgba(38, 38, 36, 1);
}
.grafou-chat-modal .chat-user {
  background: #2d9e5f;
  color: white;
}
.grafou-chat-modal .chat-form {
  border-top: 0.5px solid rgba(222, 220, 209, 0.15) !important;
}
.grafou-chat-modal .chat-append {
  border: 0.5px solid rgba(222, 220, 209, 0.15) !important;
}
.grafou-chat-modal .chat-audio-input, .grafou-chat-modal .chat-append,
.grafou-chat-modal .chat-audio-input, .grafou-chat-modal .chat-img-input,
.grafou-chat-modal .chat-doc-input {
  background: transparent;
  color: white;
}
.grafou-chat-modal .chat-audio-stop {
  background: var(--accent3);
  border: 0.5px solid rgba(222, 220, 209, 0.15) !important;
  color: white;
}
.grafou-chat-modal .chat-user-input {
  background: rgba(38, 38, 36, 1);
}
.grafou-chat-modal .chat-user-input:focus {
  border: 1px solid rgba(38, 38, 36, 1);
}
.grafou-chat-modal .chat-user-submit {
  background: #2d9e5f;
  color: white;
}
.chat-append-items {
  border-radius: 8px !important;
  background: rgb(48, 48, 46);
  border: 0.5px solid rgba(222, 220, 209, 0.15) !important;
}
.sessions-handle button {
  background: transparent;
  border: 0;
  padding: 0;
}
.gitya-pro {
  margin-left: auto;
  margin-right: 10;
}
.gitya-pro a {
  color: var(--accent);
  text-decoration: none;
  font-family: var(--sans);
  margin-right: 10px;
}
.gitya-pro a:hover {
  opacity: 0.8;
}
.session-wrapper {
  width: 340px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
  animation: up 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  height: 400px;
  padding: 10px;
  display: grid;
  grid-template-rows: 1fr min-content
}
.sessions-container {
  overflow: auto;
}
.session-handle {
  display: grid;
  grid-template-columns: 1fr min-content;
}
.session-handle .active-tree {
  background: transparent !important;
}
.sessions-handles {
  display: flex;
  justify-content: end;
}
.sessions-form {
  display: grid;
  grid-template-columns: 1fr 1fr min-content;
  gap: 5px;
}
.sessions-form input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border);
  color: var(--accent2);
  padding: 0 4px;
  font-family: var(--monospace);
  outline: 0;
}