:root {
  --v10-sidebar-wide: 276px;
  --v10-sidebar-small: 82px;
  --v10-border: rgba(205, 157, 255, .16);
  --v10-muted: #aaa1b8;
  --v10-purple: #9b4dff;
  --v10-bright: #cb73ff;
  --v10-indigo: #5c43ff;
  --v10-danger: #ff6d91;
}

body.jugi-v10 .v9-app-shell {
  grid-template-columns: var(--v10-sidebar-wide) minmax(0,1fr);
  transition: grid-template-columns .18s ease;
}

body.jugi-v10 .v10-sidebar {
  width: var(--v10-sidebar-wide);
  transition: width .18s ease, transform .18s ease;
}

.v10-sidebar-controls {
  display: flex;
  gap: 5px;
}

.v10-collapse {
  width: 34px;
  height: 34px;
  border: 1px solid var(--v10-border);
  border-radius: 10px;
  color: #b9adca;
  background: rgba(255,255,255,.03);
  cursor: pointer;
}

body.v10-sidebar-collapsed .v9-app-shell {
  grid-template-columns: var(--v10-sidebar-small) minmax(0,1fr);
}

body.v10-sidebar-collapsed .v10-sidebar {
  width: var(--v10-sidebar-small);
}

body.v10-sidebar-collapsed .v9-brand-copy,
body.v10-sidebar-collapsed .v9-new-chat strong,
body.v10-sidebar-collapsed .v9-new-chat kbd,
body.v10-sidebar-collapsed .v9-nav-label,
body.v10-sidebar-collapsed .nav-item > span:last-child,
body.v10-sidebar-collapsed .v10-conversation-shell,
body.v10-sidebar-collapsed .v9-user-copy,
body.v10-sidebar-collapsed .v9-logout,
body.v10-sidebar-collapsed .v9-brand {
  display: none !important;
}

body.v10-sidebar-collapsed .nav-item,
body.v10-sidebar-collapsed .v9-new-chat {
  width: 46px;
  margin-inline: auto;
  justify-content: center;
}

.v10-conversation-shell {
  display: grid;
  min-height: 90px;
  max-height: min(36vh,340px);
  overflow: hidden;
}

.v10-conversation-heading {
  display: flex;
  justify-content: space-between;
  padding: 0 10px 5px;
  color: #6e657c;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.v10-conversation-list {
  display: grid;
  gap: 3px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.v10-conversation-link,
.v10-empty-chat {
  min-height: 40px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: #9e94ab;
  text-decoration: none;
}

.v10-conversation-link:hover,
.v10-conversation-link.is-active,
.v10-empty-chat:hover {
  color: #fff;
  border-color: rgba(202,126,255,.16);
  background: rgba(155,77,255,.09);
}

.v10-conversation-link.is-active {
  box-shadow: inset 2px 0 0 var(--v10-bright);
}

.v10-conversation-icon {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #a77ada;
  background: rgba(155,77,255,.08);
  font-size: 9px;
}

.v10-conversation-copy {
  min-width: 0;
  display: grid;
}

.v10-conversation-copy strong,
.v10-conversation-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v10-conversation-copy strong { font-size: 10.5px; }
.v10-conversation-copy small { color: #665d73; font-size: 8px; }
.v10-conversation-loading,
.v10-conversation-error { padding: 9px 10px; color: #71687d; font-size: 9px; }

body.v10-chat-route {
  overflow: hidden;
}

body.v10-chat-route .v9-page {
  width: min(1460px,calc(100% - 32px));
  padding: 16px 0 18px;
}

.v10-chat-shell {
  position: relative;
  height: calc(100vh - var(--v9-topbar-height) - 34px);
  min-height: 620px;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto auto auto;
  overflow: hidden;
  border: 1px solid var(--v10-border);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(121,53,255,.09), transparent 30%),
    linear-gradient(180deg, rgba(10,6,22,.9), rgba(6,4,14,.97));
  box-shadow: 0 28px 100px rgba(0,0,0,.38);
}

.v10-chat-header {
  position: relative;
  z-index: 12;
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  border-bottom: 1px solid rgba(205,157,255,.09);
  background: rgba(9,6,20,.72);
  backdrop-filter: blur(17px);
}

.v10-chat-heading,
.v10-chat-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}

.v10-sidebar-toggle,
.v10-header-action {
  min-height: 38px;
  border: 1px solid rgba(205,157,255,.12);
  border-radius: 11px;
  color: #aaa0b8;
  background: rgba(255,255,255,.03);
  cursor: pointer;
}

.v10-sidebar-toggle { width: 39px; }
.v10-header-action { padding: 8px 11px; }
.v10-header-action.is-active { color: #e2c0ff; border-color: rgba(203,115,255,.32); }

.v10-title-button {
  max-width: min(60vw,650px);
  display: flex;
  gap: 7px;
  border: 0;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.v10-title-button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}

.v10-chat-menu {
  position: absolute;
  z-index: 50;
  top: 57px;
  right: 15px;
  width: 200px;
  display: grid;
  gap: 3px;
  padding: 7px;
  border: 1px solid rgba(205,157,255,.2);
  border-radius: 14px;
  background: rgba(18,11,36,.99);
  box-shadow: 0 32px 100px rgba(0,0,0,.65);
}

.v10-chat-menu[hidden] { display: none; }
.v10-chat-menu button {
  min-height: 38px;
  border: 0;
  border-radius: 9px;
  color: #c9c0d3;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.v10-chat-menu button:hover { background: rgba(155,77,255,.09); color: #fff; }
.v10-chat-menu .danger:hover { color: #ff9bb4; background: rgba(255,109,145,.06); }

.v10-chat-stage {
  position: relative;
  min-height: 0;
  overflow: hidden;
}

.v10-chat-loading,
.v10-chat-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 11px;
  padding: 25px;
  text-align: center;
}

.v10-chat-loading[hidden],
.v10-chat-empty[hidden] { display: none; }

.v10-chat-loading img,
.v10-chat-empty > img {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  box-shadow: 0 0 0 1px rgba(203,115,255,.2), 0 20px 60px rgba(120,47,255,.3);
}

.v10-chat-empty h1 {
  margin: 0;
  font-size: clamp(38px,5vw,64px);
  line-height: .98;
}

.v10-chat-empty > p { margin: 0; color: var(--v10-muted); font-size: 15px; }

.v10-starters {
  width: min(780px,100%);
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 9px;
  margin-top: 18px;
}

.v10-starters button {
  min-height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(205,157,255,.13);
  border-radius: 15px;
  color: #e5dfeb;
  background: rgba(255,255,255,.025);
  cursor: pointer;
}
.v10-starters button:hover { border-color: rgba(203,115,255,.3); background: rgba(155,77,255,.09); }

.v10-message-list {
  height: 100%;
  overflow-y: auto;
  padding: 30px max(20px,calc((100% - 920px)/2)) 175px;
  scrollbar-width: thin;
}

.v10-message-list[hidden] { display: none; }

.v10-message {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 12px;
  margin-bottom: 20px;
  animation: v10-in .18s ease both;
}

@keyframes v10-in {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

.v10-message.user { grid-template-columns: minmax(0,1fr) auto; }
.v10-message.user .v10-message-avatar { grid-column: 2; }
.v10-message.user .v10-message-body {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  width: min(78%,720px);
}

.v10-message-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #b9afc6;
  background: rgba(255,255,255,.045);
  object-fit: cover;
  font-size: 8px;
}

.v10-message-heading {
  display: flex;
  justify-content: space-between;
  min-height: 24px;
}

.v10-message-heading strong { font-size: 10px; }
.v10-message-actions { opacity: 0; }
.v10-message:hover .v10-message-actions { opacity: 1; }
.v10-message-actions button { border: 0; color: #71687e; background: transparent; cursor: pointer; }

.v10-message-content { color: #e8e3ed; font-size: 15.5px; line-height: 1.72; }
.v10-message-content p { margin: 0 0 12px; white-space: pre-wrap; }
.v10-message.user .v10-message-content {
  padding: 13px 15px;
  border: 1px solid rgba(203,115,255,.24);
  border-radius: 18px 18px 5px 18px;
  color: #fff;
  background: linear-gradient(135deg, rgba(155,77,255,.23), rgba(92,67,255,.11));
}
.v10-message-kind {
  display: inline-flex;
  margin-bottom: 8px;
  border-radius: 999px;
  padding: 3px 7px;
  color: #c69ae8;
  background: rgba(155,77,255,.08);
  font-size: 8px;
}
.v10-message.is-pending { opacity: .58; }
.v10-message.has-error .v10-message-content { color: #ffb2c4; }

.v10-typing-dot {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 5px;
  border-radius: 50%;
  background: #a664e5;
  animation: v10-type 1.1s infinite ease-in-out;
}
.v10-typing-dot:nth-child(2) { animation-delay: .14s; }
.v10-typing-dot:nth-child(3) { animation-delay: .28s; }
@keyframes v10-type {
  0%,60%,100% { transform: translateY(0); opacity: .35; }
  30% { transform: translateY(-5px); opacity: 1; }
}

.v10-load-older {
  position: absolute;
  z-index: 6;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid var(--v10-border);
  border-radius: 999px;
  color: #bcaec9;
  background: rgba(13,8,26,.9);
  cursor: pointer;
}

.v10-image-preview,
.v10-voice-status {
  width: min(920px,calc(100% - 28px));
  margin: 0 auto 8px;
  border: 1px solid var(--v10-border);
  border-radius: 13px;
  background: rgba(17,10,34,.9);
}

.v10-image-preview {
  min-height: 58px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
}

.v10-image-preview[hidden],
.v10-voice-status[hidden] { display: none; }

.v10-image-preview img { width: 44px; height: 44px; border-radius: 10px; object-fit: cover; }
.v10-image-preview strong,
.v10-image-preview small { display: block; }
.v10-image-preview small { color: var(--v10-muted); font-size: 8px; }

.v10-voice-status {
  padding: 9px 12px;
  color: #d3c5df;
  font-size: 10px;
}

.v10-composer {
  position: relative;
  z-index: 10;
  width: min(940px,calc(100% - 28px));
  min-height: 68px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto auto;
  align-items: end;
  gap: 7px;
  margin: -145px auto 10px;
  padding: 10px;
  border: 1px solid rgba(205,145,255,.3);
  border-radius: 21px;
  background: linear-gradient(180deg, rgba(23,13,47,.97), rgba(8,5,19,.985));
  box-shadow: 0 30px 92px rgba(0,0,0,.55), 0 0 60px rgba(121,54,255,.18);
}

.v10-composer textarea {
  min-height: 46px !important;
  max-height: 210px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 15.5px !important;
  resize: none;
}

.v10-composer-tool,
.v10-send {
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
}

.v10-composer-tool { color: #a99db7; background: rgba(255,255,255,.04); }
.v10-composer-tool:hover { color: #fff; background: rgba(155,77,255,.11); }
.v10-send {
  color: #fff;
  background: linear-gradient(135deg,var(--v10-bright),var(--v10-indigo));
  font-size: 21px;
  box-shadow: 0 11px 29px rgba(105,46,239,.33);
}

.v10-disclaimer {
  margin: 0 auto 9px;
  color: #655d71;
  font-size: 8px;
  text-align: center;
}

.v10-dialog {
  width: min(520px,calc(100% - 28px));
  border: 1px solid rgba(205,157,255,.24);
  border-radius: 20px;
  color: #fff;
  background: rgba(18,11,36,.99);
}
.v10-dialog::backdrop { background: rgba(3,2,8,.75); backdrop-filter: blur(12px); }
.v10-dialog form,
.v10-dialog-body { display: grid; gap: 14px; padding: 24px; }
.v10-dialog-heading { display: flex; justify-content: space-between; align-items: center; }
.v10-dialog-heading h2 { margin: 0; }
.v10-dialog-heading button { border: 0; color: #aaa0b8; background: transparent; cursor: pointer; }

@media (max-width: 980px) {
  body.jugi-v10 .v9-app-shell,
  body.v10-sidebar-collapsed .v9-app-shell { grid-template-columns: 1fr; }
  body.jugi-v10 .v10-sidebar,
  body.v10-sidebar-collapsed .v10-sidebar { width: var(--v10-sidebar-wide); }
  .v10-collapse { display: none; }
}

@media (max-width: 700px) {
  body.v10-chat-route .v9-page { width: calc(100% - 12px); padding-top: 7px; }
  .v10-chat-shell { height: calc(100vh - var(--v9-topbar-height) - 14px); min-height: 540px; border-radius: 17px; }
  .v10-header-action span { display: none; }
  .v10-message-list { padding: 22px 11px 165px; }
  .v10-message.user .v10-message-body { width: 88%; }
  .v10-starters { grid-template-columns: 1fr; }
  .v10-chat-empty { padding-bottom: 150px; }
  .v10-composer { width: calc(100% - 14px); grid-template-columns: auto minmax(0,1fr) auto; }
  .v10-composer-tool[data-v10-voice-button] { display: none; }
  .v10-disclaimer { display: none; }
}

/* HEYJUGI V10.0.3 SIDEBAR REPAIR */

/* There is no second sidebar button inside the desktop Chat header. */
.v10-sidebar-toggle,
.v10-chat-sidebar-toggle {
  display: none !important;
}

/* Draw the plus instead of trusting a font glyph's optical center. */
.v9-new-chat > .v10-new-chat-plus,
.v10-new-chat > .v10-new-chat-plus {
  position: relative !important;
  display: block !important;
  place-self: center !important;
  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 9px !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-align: center !important;
  transform: none !important;
}

.v9-new-chat > .v10-new-chat-plus::before,
.v9-new-chat > .v10-new-chat-plus::after,
.v10-new-chat > .v10-new-chat-plus::before,
.v10-new-chat > .v10-new-chat-plus::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  z-index: 2 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  transform: translate(-50%, -50%) !important;
}

.v9-new-chat > .v10-new-chat-plus::before,
.v10-new-chat > .v10-new-chat-plus::before {
  width: 14px !important;
  height: 2px !important;
}

.v9-new-chat > .v10-new-chat-plus::after,
.v10-new-chat > .v10-new-chat-plus::after {
  width: 2px !important;
  height: 14px !important;
}

.v10-title-static {
  display: block !important;
  min-width: 0;
  cursor: default !important;
  user-select: text;
}

.v10-title-static strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (min-width: 981px) {
  body.jugi-v10.v10-sidebar-collapsed .v10-sidebar,
  body.jugi-v10.v10-sidebar-collapsed .v9-sidebar {
    width: 82px !important;
    min-width: 82px !important;
    max-width: 82px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .sidebar-top,
  body.jugi-v10.v10-sidebar-collapsed .v10-sidebar-top {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .v10-sidebar-controls {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .v10-collapse,
  body.jugi-v10.v10-sidebar-collapsed .v10-sidebar-collapse {
    display: grid !important;
    place-items: center !important;
    justify-self: center !important;
    align-self: center !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: rotate(180deg) !important;
    transform-origin: 50% 50% !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .v9-new-chat,
  body.jugi-v10.v10-sidebar-collapsed .v10-new-chat {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    place-items: center !important;
    justify-self: center !important;
    align-self: center !important;
    gap: 0 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 16px auto 13px !important;
    padding: 0 !important;
    text-align: center !important;
    transform: none !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .v9-new-chat > .v10-new-chat-plus,
  body.jugi-v10.v10-sidebar-collapsed .v10-new-chat > .v10-new-chat-plus {
    grid-column: 1 !important;
    grid-row: 1 !important;
    place-self: center !important;
    margin: 0 !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .v9-nav,
  body.jugi-v10.v10-sidebar-collapsed .sidebar-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .v9-nav-group {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .nav-item {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: 1fr !important;
    place-items: center !important;
    justify-self: center !important;
    align-self: center !important;
    gap: 0 !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    margin: 2px auto !important;
    padding: 0 !important;
    border-left-width: 1px !important;
    text-align: center !important;
    transform: none !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .nav-item:hover {
    transform: none !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .nav-item.active {
    box-shadow:
      0 0 0 1px rgba(203, 115, 255, 0.29),
      0 11px 32px rgba(111, 43, 224, 0.16) !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .v9-nav-icon {
    display: grid !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    place-items: center !important;
    place-self: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    transform: none !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .v9-sidebar-footer {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    width: 100% !important;
    gap: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .v9-user {
    display: grid !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
    justify-self: center !important;
    align-self: center !important;
    width: 52px !important;
    min-width: 52px !important;
    max-width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  body.jugi-v10.v10-sidebar-collapsed .v9-user-avatar {
    display: grid !important;
    place-items: center !important;
    place-self: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
}