:root {
  --color-0: #060609;
  --color-1: #111116;
  --color-2: #222229;
  --color-3: #333339;
  --color-4: #444449;
  --color-5: #555559;
  --color-6: #666669;
  --color-7: #777779;
  --color-8: #888889;
  --color-9: #999;
  --color-10: #aaa;
  --color-11: #bbb;
  --color-12: #ccc;
  --color-13: #ddd;
  --color-14: #eee;
  --color-15: #fff;
  --color-primary: #55a;
  --color-dangerous: #944;
  --color-tag-green: #393;
  --color-tag-orange: #930;
  --color-tag-yellow: #993;
  --width: 70em;
  --border-radius: .25em;
  --border-radius-button: 10em;
  --page-transition-duration: 0ms;
  --page-transition-duration-short: 0ms;
  --page-transition-duration-long: 0ms; }
  :root:has(body.animations) {
    --page-transition-duration: 170ms;
    --page-transition-duration-short: 80ms;
    --page-transition-duration-long: 310ms; }

@font-face {
  font-family: rubik;
  src: url(res/rubik.ttf); }

::-webkit-scrollbar {
  width: .325em;
  height: .325em; }

::-webkit-scrollbar-track {
  background: var(--color-3); }

::-webkit-scrollbar-thumb {
  background: var(--color-5); }

::-webkit-scrollbar-thumb:hover {
  background: var(--color-7); }

html, body {
  height: 100dvh; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: auto scroll;
  background-color: var(--color-2); }

body,
input, textarea, button {
  font-family: rubik, sans-serif;
  font-size: 1em;
  line-height: 1.5;
  color: var(--color-14); }

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0; }

.thumbnail, .role:not(input), .image, .file {
  background-color: var(--color-3); }

body.animations.image-switch-animation .thumbnail, body.animations.image-switch-animation .role:not(input), body.animations.image-switch-animation .image, body.animations.image-switch-animation .file {
  animation: image-switch-animation var(--page-transition-duration-long); }

@keyframes image-switch-animation {
  from {
    scale: 1.125;
    opacity: .5; } }

body:not(.images) .thumbnail, body:not(.images) .role:not(input), body:not(.images) .image, body:not(.images) .file {
  background-repeat: unset !important;
  background-size: unset !important;
  background-image: url(res/checkers.svg) !important; }

h1 {
  font-size: 1.75em;
  text-align: center;
  margin: 2em auto;
  position: relative;
  width: max-content; }
  h1::before {
    content: '';
    display: block;
    position: absolute;
    left: -1.75em;
    width: 1.5em;
    aspect-ratio: 1;
    border-radius: 50%;
    background-image: url(res/loading.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    transition: var(--page-transition-duration-long);
    opacity: 0;
    translate: -.25em 0; }

h2 {
  font-size: 1.5em; }

#app:has(#queue-running-indicator.visible) #page:not(.fadeout) h1::before {
  opacity: 1;
  translate: 0 0; }

#queue-running-indicator {
  display: none; }

#main {
  overflow: hidden;
  padding: 1em;
  display: flex;
  flex-direction: column;
  align-items: center; }

#page {
  transition: var(--page-transition-duration);
  opacity: 0;
  translate: 0 -1em;
  width: var(--width);
  max-width: 100%; }
  #page.visible {
    opacity: 1;
    translate: 0 0; }

#page.fadeout {
  translate: 0 1em; }

.hidden {
  display: none !important; }

.loading {
  opacity: 0;
  translate: 0 -1em;
  transition: opacity var(--page-transition-duration), translate var(--page-transition-duration); }
  .loading.loaded {
    opacity: 1;
    translate: 0 0; }

input, textarea, button {
  color: var(--color-14);
  outline: none; }
  input[disabled]:not(.loading), input[disabled].loaded, textarea[disabled]:not(.loading), textarea[disabled].loaded, button[disabled]:not(.loading), button[disabled].loaded {
    opacity: .5; }

input, textarea {
  background-color: var(--color-3);
  border: none;
  padding: .325em .5em;
  border-radius: var(--border-radius); }
  input:focus, textarea:focus {
    background-color: var(--color-4); }
  input.select, textarea.select {
    cursor: default; }
    input.select:hover, textarea.select:hover {
      background-color: var(--color-4); }

textarea {
  resize: none;
  min-height: 8em; }

button {
  background-color: var(--color-5);
  border: none;
  padding: .325em .875em;
  filter: brightness(0.9);
  border-radius: var(--border-radius-button); }
  button:not([disabled]):hover, button:has(.ripple.execute) {
    filter: brightness(1); }
  button:not([disabled]):not(.ripple):active {
    filter: brightness(1.15); }
  button[style] {
    padding-left: 2.25em;
    background-repeat: no-repeat;
    background-size: 1.25em;
    background-position: .675em center; }
  button.primary {
    background-color: var(--color-primary); }
  button.dangerous {
    background-color: var(--color-dangerous); }

.ripple {
  position: relative;
  overflow: hidden;
  transition: var(--page-transition-duration-short); }

.ripple > .ripple {
  position: absolute;
  background-color: var(--color-7);
  width: 2em;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  transform-origin: center center;
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  transition: 600ms ease-out; }

.ripple > .ripple.execute {
  opacity: 0;
  transform: translate(-50%, -50%) scale(8); }

.overlay,
.overlay-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; }

.overlay-backdrop {
  backdrop-filter: brightness(0.5) contrast(0.9) saturate(1.25);
  opacity: 0;
  transition: var(--page-transition-duration-long); }

body:has(.overlay:not(.no-backdrop)) .overlay-backdrop {
  opacity: 1;
  pointer-events: unset; }

.overlay .box {
  background-color: var(--color-3);
  box-shadow: 0 1em 4em -2em black;
  display: flex;
  flex-direction: column;
  scale: 1.1;
  opacity: 0;
  transition: var(--page-transition-duration);
  max-height: calc(100% - 2em);
  max-width: calc(100% - 2em);
  overflow: auto;
  border-radius: var(--border-radius); }
  .overlay .box .content {
    flex: 1; }
    .overlay .box .content .item {
      padding: .25em 2em .25em 1em;
      cursor: default; }
      .overlay .box .content .item:not(.whitespace-unset) {
        white-space: nowrap; }
      .overlay .box .content .item:hover {
        background-color: var(--color-4); }
      .overlay .box .content .item.selected {
        background-color: var(--color-5); }
      .overlay .box .content .item.disabled {
        color: var(--color-8); }
    .overlay .box .content .item[style] {
      padding-left: 2.125em;
      background-repeat: no-repeat;
      background-size: 1.125em;
      background-position: .5em center; }
    .overlay .box .content .separator {
      border-bottom: 0.125em dashed var(--color-5);
      margin-block: .5em; }

.overlay.no-backdrop .box {
  box-shadow: 0 .5em 2em -1em black; }

.overlay.visible {
  opacity: 1;
  pointer-events: unset; }
  .overlay.visible .box {
    scale: 1;
    opacity: 1; }

.overlay.dialog {
  display: flex;
  justify-content: center;
  align-items: center; }
  .overlay.dialog .content:has(.title) {
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em; }
  .overlay.dialog .title {
    font-size: 1.5em; }
  .overlay.dialog .text {
    padding: .25em 0 .5em;
    text-align: center; }
  .overlay.dialog .buttons {
    display: flex;
    gap: .5em;
    justify-content: center; }

.overlay.image-preview .box {
  width: calc(min(100dvw, 100dvh) - max(2em, min(10dvw, 10dvh)));
  aspect-ratio: 1; }
  .overlay.image-preview .box .content {
    display: flex;
    flex-direction: column; }
    .overlay.image-preview .box .content .image-container {
      flex: 1; }
      .overlay.image-preview .box .content .image-container .image {
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain; }
    .overlay.image-preview .box .content .message {
      text-align: center;
      margin-bottom: -.5em;
      color: var(--color-9); }

.overlay.character-picker .box {
  width: 40em;
  height: 40em;
  overflow: hidden; }
  .overlay.character-picker .box .content:has(.title) {
    align-items: stretch;
    overflow: hidden;
    gap: .75em; }
  .overlay.character-picker .box .title {
    text-align: center; }
  .overlay.character-picker .box input {
    background-color: var(--color-4); }
  .overlay.character-picker .box .characters {
    display: flex;
    flex-direction: column;
    overflow: auto;
    margin: 0 -1em -1em;
    padding-bottom: 1em; }
  .overlay.character-picker .box .character {
    display: flex;
    align-items: center;
    gap: .75em;
    padding: .375em 1em;
    cursor: default; }
    .overlay.character-picker .box .character:hover {
      background-color: var(--color-4); }
    .overlay.character-picker .box .character .thumbnail {
      width: 2.5em;
      aspect-ratio: 1;
      flex: 0 0 2.5em;
      border-radius: 50%;
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat; }
    .overlay.character-picker .box .character .name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap; }
    .overlay.character-picker .box .character .personalTags {
      display: flex;
      gap: .25em;
      overflow: hidden; }
      .overlay.character-picker .box .character .personalTags .tag {
        border-radius: 10em;
        padding: 0 .5em;
        font-size: .75em;
        line-height: 1.75em;
        white-space: nowrap;
        background-color: var(--color-4); }
        .overlay.character-picker .box .character .personalTags .tag[data-color="bg-green-500"] {
          background-color: var(--color-tag-green); }
        .overlay.character-picker .box .character .personalTags .tag[data-color="bg-orange-600"] {
          background-color: var(--color-tag-orange); }
        .overlay.character-picker .box .character .personalTags .tag[data-color="bg-yellow-500"] {
          background-color: var(--color-tag-yellow); }
    .overlay.character-picker .box .character .info {
      color: var(--color-9);
      font-size: .875em;
      white-space: nowrap;
      flex: 0 0 10em; }
  .overlay.character-picker .box .empty {
    padding: 1em;
    text-align: center;
    color: var(--color-9); }

.overlay.prompt-preview .box {
  width: 50em;
  height: 40em;
  overflow: hidden; }
  .overlay.prompt-preview .box .content:has(.title) {
    align-items: stretch;
    overflow: hidden;
    gap: .5em; }
  .overlay.prompt-preview .box .title {
    text-align: center; }
  .overlay.prompt-preview .box .modes {
    display: flex;
    justify-content: center;
    gap: .5em; }
  .overlay.prompt-preview .box .mode {
    padding: .25em .75em;
    border-radius: var(--border-radius);
    background-color: var(--color-4);
    cursor: default; }
    .overlay.prompt-preview .box .mode:not(.selected):hover {
      background-color: var(--color-5); }
    .overlay.prompt-preview .box .mode.selected {
      background-color: var(--color-primary); }
  .overlay.prompt-preview .box .summary {
    text-align: center;
    color: var(--color-9);
    font-size: .875em; }
  .overlay.prompt-preview .box .entries {
    display: flex;
    flex-direction: column;
    gap: .5em;
    overflow: auto;
    margin: 0 -1em;
    padding: .5em 1em; }
  .overlay.prompt-preview .box .entry {
    display: flex;
    flex-direction: column;
    gap: .125em; }
    .overlay.prompt-preview .box .entry .head {
      font-size: .75em;
      color: var(--color-9); }
    .overlay.prompt-preview .box .entry .body {
      white-space: pre-wrap;
      word-break: break-word; }
    .overlay.prompt-preview .box .entry.persona .body, .overlay.prompt-preview .box .entry.memory .body {
      background-color: var(--color-4);
      border-radius: var(--border-radius);
      padding: .5em .75em; }
    .overlay.prompt-preview .box .entry.memory .head {
      color: var(--color-primary); }

.overlay.context-menu .box {
  position: absolute;
  transform-origin: left top;
  transition: var(--page-transition-duration-short); }

.overlay.context-menu:not(.visible) .box {
  scale: 1 .75; }

[data-fixed] {
  position: fixed;
  width: var(--width);
  max-width: calc(100% - 2em); }
  [data-fixed].bottom {
    background: linear-gradient(0deg, var(--color-2) 80%, transparent 100%);
    bottom: 0;
    padding: 2.5em 0 1.5em;
    display: flex; }
    [data-fixed].bottom .menu {
      margin-left: .325em;
      width: 2.175em;
      background-image: url(res/menu.svg);
      user-select: none; }
  [data-fixed].unload {
    opacity: 0;
    translate: 0 4em; }

.options {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 2em; }
  .options > div {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .25em; }
    .options > div label {
      color: var(--color-9); }

input:has(+ button) {
  border-radius: 10em 0 0 10em;
  padding-left: 1em; }

input + button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-left: .675em; }