/* KITTO AI floating companion */
#kitto-launcher {
  position: fixed;
  right: 18px;
  bottom: 88px;
  z-index: 9998;
  width: 64px;
  height: 64px;
  border: 1px solid #58e9ff;
  border-radius: 50%;
  cursor: pointer;
  background: radial-gradient(circle at 30% 20%, #393d91, #10152f 70%);
  box-shadow: 0 0 18px #5b61ff88, 0 0 34px #00d9ff33;
  animation: kitto-float 3s ease-in-out infinite;
}

#kitto-launcher .kitto-face,
#kitto-header .kitto-face,
.kitto-message-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 50%;
  background: #080d20;
  border: 2px solid #62eaff;
  box-shadow: inset 0 0 12px #6548ff88, 0 0 12px #3bdcff88;
}

#kitto-launcher .kitto-face {
  width: 42px;
  height: 32px;
  margin: auto;
}

.kitto-eye {
  width: 9px;
  height: 13px;
  border-radius: 50%;
  background: #66f3ff;
  box-shadow: 0 0 8px #66f3ff;
  animation: kitto-look 4s ease-in-out infinite;
}

#kitto-launcher:hover {
  transform: scale(1.08);
}

#kitto-launcher:focus-visible,
#kitto-send:focus-visible,
#kitto-close:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

#kitto-panel {
  position: fixed;
  z-index: 9999;
  right: 18px;
  bottom: 164px;
  width: min(390px, calc(100vw - 28px));
  height: min(590px, calc(100dvh - 190px));
  display: none;
  flex-direction: column;
  overflow: hidden;
  color: #f4f7ff;
  background: #0b1020;
  border: 1px solid #343d69;
  border-radius: 24px;
  box-shadow: 0 20px 70px #000a, 0 0 30px #5145ff22;
  font-family: system-ui, sans-serif;
}

#kitto-panel.kitto-open {
  display: flex;
  animation: kitto-enter .22s ease-out;
}

#kitto-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px;
  background: linear-gradient(110deg, #171c3b, #10172b);
  border-bottom: 1px solid #293253;
}

#kitto-header .kitto-face {
  flex: 0 0 43px;
  width: 43px;
  height: 43px;
}

#kitto-header .kitto-eye {
  width: 7px;
  height: 10px;
}

#kitto-title {
  flex: 1;
  font-weight: 750;
  font-size: 15px;
}

#kitto-status {
  margin-top: 3px;
  color: #79e8bd;
  font-size: 11px;
}

#kitto-close {
  border: 0;
  background: transparent;
  color: #dfe7ff;
  font-size: 25px;
  cursor: pointer;
}

#kitto-messages {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 15px 12px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  overscroll-behavior: contain;
}

.kitto-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.kitto-row.kitto-user {
  justify-content: flex-end;
}

.kitto-message-avatar {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  gap: 3px;
}

.kitto-message-avatar .kitto-eye {
  width: 4px;
  height: 7px;
}

.kitto-bubble {
  max-width: 83%;
  padding: 11px 13px;
  border: 1px solid #293456;
  border-radius: 17px 17px 17px 5px;
  background: #151d34;
  font-size: 13px;
  line-height: 1.55;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.kitto-user .kitto-bubble {
  color: white;
  background: linear-gradient(135deg, #4147d8, #6544e9);
  border-color: #7776ff;
  border-radius: 17px 17px 5px 17px;
}

#kitto-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 0 12px 10px;
}

.kitto-suggestion {
  border: 1px solid #424d8b;
  border-radius: 18px;
  background: #151b36;
  color: #dce7ff;
  padding: 7px 10px;
  font-size: 11px;
  cursor: pointer;
}

#kitto-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  border-top: 1px solid #293253;
  background: #0d1325;
}

#kitto-input {
  flex: 1;
  min-width: 0;
  max-height: 110px;
  resize: none;
  border: 1px solid #303c67;
  border-radius: 18px;
  padding: 12px;
  color: #fff;
  background: #141c33;
  font: inherit;
  font-size: 13px;
  outline: none;
}

#kitto-input:focus {
  border-color: #67dfff;
  box-shadow: 0 0 0 2px #46dfff22;
}

#kitto-send {
  width: 43px;
  height: 43px;
  flex: 0 0 43px;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, #00c8ef, #7544ff);
  color: white;
  font-size: 21px;
  cursor: pointer;
}

#kitto-send:disabled {
  opacity: .5;
  cursor: wait;
}

/* Three animated dots: no "Kitto is thinking" text */
.kitto-typing {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 55px;
  min-height: 25px;
}

.kitto-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #50eaff;
  animation: kitto-dot .9s infinite ease-in-out;
}

.kitto-typing span:nth-child(2) { animation-delay: .15s; }
.kitto-typing span:nth-child(3) { animation-delay: .3s; }

@keyframes kitto-dot {
  0%, 60%, 100% { transform: translateY(0); opacity: .45; }
  30% { transform: translateY(-5px); opacity: 1; }
}

@keyframes kitto-look {
  0%, 18%, 100% { transform: translateX(0); }
  25%, 38% { transform: translateX(3px); }
  45%, 57% { transform: translateX(-3px); }
  65%, 85% { transform: translateX(0); }
}

@keyframes kitto-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}

@keyframes kitto-enter {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 600px) {
  #kitto-launcher {
    right: 15px;
    bottom: 82px;
    width: 58px;
    height: 58px;
  }

  #kitto-panel {
    inset: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    border-radius: 0;
    border: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  #kitto-panel.kitto-open {
    animation: kitto-enter .18s ease-out;
  }

  #kitto-header {
    padding-top: max(15px, env(safe-area-inset-top));
  }
}

@media (prefers-reduced-motion: reduce) {
  #kitto-launcher,
  .kitto-eye,
  .kitto-typing span {
    animation: none;
  }
}
/* KITTO AI — Rainbow theme upgrade */
#kitto-launcher {
  isolation: isolate;
  border: 2px solid transparent;
  background:
    linear-gradient(#0b1020, #0b1020) padding-box,
    conic-gradient(
      from var(--kitto-angle, 0deg),
      #ff3cac, #784bff, #00e5ff, #54ff9f, #ffe45e, #ff3cac
    ) border-box;
  box-shadow:
    0 0 18px #ff3cac88,
    0 0 32px #784bff66,
    0 0 45px #00e5ff44;
}

#kitto-launcher::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  background: conic-gradient(
    #ff3cac, #784bff, #00e5ff, #54ff9f, #ffe45e, #ff3cac
  );
  filter: blur(12px);
  opacity: .75;
  z-index: -1;
  animation: kitto-rainbow-spin 5s linear infinite;
}

#kitto-launcher .kitto-face,
#kitto-header .kitto-face,
.kitto-message-avatar {
  background: linear-gradient(135deg, #17102e, #071c32);
  border-color: #9e7bff;
  box-shadow:
    inset 0 0 12px #784bff88,
    0 0 12px #00e5ff88;
}

#kitto-launcher .kitto-eye,
#kitto-header .kitto-eye,
.kitto-message-avatar .kitto-eye {
  background: #8bffff;
  box-shadow: 0 0 8px #00e5ff, 0 0 16px #ff3cac88;
}

#kitto-panel {
  border-color: #784bff;
  background: #0b1020;
  box-shadow:
    0 20px 70px #000a,
    0 0 30px #784bff33,
    0 0 55px #00e5ff18;
}

#kitto-header {
  background:
    linear-gradient(110deg, #24103d, #10172b 60%, #092a3b);
  border-bottom-color: #513c7c;
  position: relative;
}

#kitto-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(
    90deg, #ff3cac, #784bff, #00e5ff, #54ff9f, #ffe45e
  );
  background-size: 200% 100%;
  animation: kitto-rainbow-flow 5s linear infinite;
}

#kitto-title {
  background: linear-gradient(
    90deg, #ff8bd8, #b59aff, #79f4ff, #a0ffcf
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

#kitto-suggestions .kitto-suggestion {
  border-color: #6546a8;
  background: linear-gradient(135deg, #19172f, #102334);
  transition: border-color .2s, transform .2s;
}

#kitto-suggestions .kitto-suggestion:hover {
  border-color: #00e5ff;
  transform: translateY(-2px);
}

#kitto-form {
  border-top-color: #43315f;
  background: #0d1325;
}

#kitto-input:focus {
  border-color: #bd75ff;
  box-shadow: 0 0 0 2px #784bff33, 0 0 16px #00e5ff22;
}

#kitto-send {
  background: linear-gradient(135deg, #ff3cac, #784bff 50%, #00bde8);
  box-shadow: 0 0 15px #784bff55;
}

#kitto-send:hover:not(:disabled) {
  filter: brightness(1.15);
}

.kitto-typing span {
  background: linear-gradient(135deg, #ff3cac, #00e5ff);
  box-shadow: 0 0 8px #00e5ff66;
}

@keyframes kitto-rainbow-spin {
  to { --kitto-angle: 360deg; }
}

@keyframes kitto-rainbow-flow {
  to { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  #kitto-launcher::before,
  #kitto-header::after {
    animation: none;
  }
}

/* KITTO rainbow theme — floating widget only */
#kitto-launcher {
  background: linear-gradient(
    135deg, #ff55b8, #9b5cff, #36d9ff, #56efb0, #ffe45c
  ) !important;
  background-size: 300% 300% !important;
  animation: kitto-rainbow 6s ease infinite !important;
  border: 2px solid rgba(255,255,255,.85) !important;
  box-shadow: 0 0 24px rgba(180,90,255,.5) !important;
}

#kitto-panel {
  background: linear-gradient(
    145deg, #fff0fb, #f0eaff, #e8faff, #eafff4
  ) !important;
  background-size: 300% 300% !important;
  animation: kitto-rainbow 12s ease infinite !important;
  border: 1px solid rgba(255,255,255,.9) !important;
  box-shadow: 0 16px 50px rgba(110,65,190,.25) !important;
}

#kitto-panel .kitto-eye {
  display: inline-block;
  animation: kitto-eyes-look 4s ease-in-out infinite;
}

#kitto-panel .kitto-eye:nth-child(2) {
  animation-delay: .2s;
}

@keyframes kitto-rainbow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes kitto-eyes-look {
  0%, 15%, 100% { transform: translate(0, 0); }
  30%, 40% { transform: translate(2px, -1px); }
  55%, 65% { transform: translate(-2px, 1px); }
  80%, 90% { transform: translate(0, -1px); }
}

@media (prefers-reduced-motion: reduce) {
  #kitto-launcher,
  #kitto-panel,
  #kitto-panel .kitto-eye {
    animation: none !important;
  }
}

/* NIMBU futuristic flying orb */
#kitto-launcher {
  position: fixed;
  isolation: isolate;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 30% 25%, #504cff, #10152f 65%) !important;
  border: 1px solid #8df7ff !important;
  border-radius: 50%;
  animation: nimbu-orb-float 3s ease-in-out infinite !important;
  box-shadow:
    0 0 12px #00e5ff,
    0 0 28px #784bff,
    inset 0 0 18px #00e5ff44 !important;
}

#kitto-launcher::before {
  content: "";
  position: absolute;
  inset: -7px;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid #a58aff88;
  box-shadow: 0 0 18px #784bff99, inset 0 0 12px #00e5ff55;
  animation: nimbu-orb-pulse 2.5s ease-in-out infinite;
  pointer-events: none;
}

#kitto-launcher::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  top: 7px;
  right: 10px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px #00e5ff;
  pointer-events: none;
}

#kitto-launcher .nimbu-orb-core {
  position: relative;
  display: block;
  width: 48px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 25%, #303d8a, #080d20 75%);
  box-shadow: inset 0 0 15px #6548ff99;
}

.nimbu-orb-eye {
  position: absolute;
  display: block;
  width: 12px;
  height: 15px;
  border-radius: 50%;
  background: #72faff;
  border: 1px solid #d8ffff;
  box-shadow: 0 0 8px #00e5ff, 0 0 14px #784bff;
  animation: nimbu-eye-watch 3.8s ease-in-out infinite;
}

.nimbu-orb-eye::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 8px;
  top: 3px;
  left: 3px;
  border-radius: 50%;
  background: #10152f;
  box-shadow: 0 0 3px #fff;
}

.nimbu-orb-eye.eye-one {
  top: 5px;
  left: 8px;
  transform: rotate(-15deg);
}

.nimbu-orb-eye.eye-two {
  top: 3px;
  right: 7px;
  transform: rotate(15deg);
  animation-delay: -.8s;
}

.nimbu-orb-eye.eye-three {
  top: 16px;
  left: 18px;
  animation-delay: -1.5s;
}

.nimbu-orb-eye.eye-four {
  bottom: 3px;
  left: 7px;
  transform: rotate(15deg);
  animation-delay: -2.1s;
}

.nimbu-orb-eye.eye-five {
  bottom: 3px;
  right: 7px;
  transform: rotate(-15deg);
  animation-delay: -2.8s;
}

#kitto-launcher .nimbu-orb-label {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  padding: 3px 7px;
  border-radius: 10px;
  color: #e6fcff;
  background: #11152bee;
  border: 1px solid #5145ff88;
  font: 700 9px/1.2 system-ui, sans-serif;
  letter-spacing: 1px;
  box-shadow: 0 0 10px #784bff55;
  pointer-events: none;
}

/* Orb menu */
#nimbu-orb-menu {
  position: fixed;
  right: 18px;
  bottom: 166px;
  z-index: 10000;
  width: min(280px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid #6559ff;
  border-radius: 20px;
  background: linear-gradient(145deg, #17142f, #081a2c);
  color: #f4f7ff;
  box-shadow: 0 12px 45px #0009, 0 0 25px #784bff55;
  font-family: system-ui, sans-serif;
}

#nimbu-orb-menu[hidden] {
  display: none !important;
}

.nimbu-orb-menu-title {
  margin: 0 0 10px;
  color: #8df7ff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nimbu-orb-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #ffffff1c;
  border-radius: 14px;
  background: #ffffff08;
  color: #fff;
  text-decoration: none;
  transition: background .2s, border-color .2s, transform .2s;
}

.nimbu-orb-menu-item > span:first-child {
  font-size: 25px;
}

.nimbu-orb-menu-item > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nimbu-orb-menu-item strong {
  font-size: 14px;
}

.nimbu-orb-menu-item small {
  color: #b9c8e8;
  font-size: 11px;
}

.nimbu-orb-menu-item:hover,
.nimbu-orb-menu-item:focus-visible {
  background: #784bff33;
  border-color: #00e5ff;
  transform: translateY(-2px);
  outline: none;
}

@keyframes nimbu-orb-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

@keyframes nimbu-orb-pulse {
  0%, 100% { opacity: .5; transform: scale(.98); }
  50% { opacity: 1; transform: scale(1.04); }
}

@keyframes nimbu-eye-watch {
  0%, 15%, 100% { translate: 0 0; }
  25%, 35% { translate: 2px -1px; }
  50%, 60% { translate: -2px 1px; }
  75%, 85% { translate: 0 1px; }
}

@media (max-width: 600px) {
  #kitto-launcher {
    right: 15px;
    bottom: 82px;
    width: 58px;
    height: 58px;
  }

  #kitto-launcher .nimbu-orb-core {
    transform: scale(.88);
  }

  #nimbu-orb-menu {
    right: 12px;
    bottom: 154px;
    width: min(280px, calc(100vw - 24px));
  }
}

@media (prefers-reduced-motion: reduce) {
  #kitto-launcher,
  #kitto-launcher::before,
  .nimbu-orb-eye {
    animation: none !important;
  }
}