

.ai-chat.aic-panel,
.ai-chat.aic-panel * {
  font-family: "UbuntuSans", system-ui, sans-serif;
}

.ai-chat.aic-panel {
  border-radius: 18px;
  border: 1px solid rgb(118 154 181 / 55%);
  background: linear-gradient(160deg, #172f48 0%, #1f2b3a 55%, #182431 100%);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .5), 0 0 28px rgba(89, 183, 255, .18);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.ai-chat.aic-panel::before,
.ai-chat.aic-panel::after {
  display: none;
}


.aic-panel .ai-chat__head {
  gap: 12px;
  padding: 16px 14px 14px 18px;
  border-bottom: 1px solid rgb(118 154 181 / 30%);
}

.aic-panel .ai-chat__title {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
}

.aic-panel .ai-chat__title::before {
  display: none;
}

.aic-panel .ai-chat__subtitle {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 12px;
  font-weight: 500;
  color: #9fe8c0;
}

.aic-panel .ai-chat__subtitle::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2fd47f;
  box-shadow: 0 0 6px rgba(47, 212, 127, .8);
}


.aic-panel .ai-chat__actions {
  gap: 2px;
}

.aic-panel .ai-chat__btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: none;
  color: rgba(222, 236, 250, .7);
  font-size: 0;
  display: grid;
  place-items: center;
  transition: color .2s, background .2s;
}

.aic-panel .ai-chat__btn:hover {
  transform: none;
  color: #fff;
  background: rgba(255, 255, 255, .07);
}

.aic-panel .ai-chat__btn::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

.aic-panel #aiExport {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5M5 20h14'/%3E%3C/svg%3E");
}

.aic-panel #aiClear {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.4-5.7L4 8.7M4 4v4.7h4.7'/%3E%3C/svg%3E");
}

.aic-panel #aiClose {
  --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}


.aic-panel .ai-chat__body::before {
  display: none;
}

.aic-panel .ai-chat__body {
  padding: 14px 18px 16px;
  scrollbar-width: thin;
  scrollbar-color: rgba(118, 154, 181, .45) transparent;
}


.ai-chat.aic-panel .ai-msg.bot {
  flex-shrink: 0; 
  overflow: hidden;
  background: rgba(92, 194, 255, .07);
  border: 1px solid rgba(92, 194, 255, .22);
  border-radius: 14px 14px 14px 4px;
  box-shadow: none;
  color: #eaf3fc;
}

.ai-chat.aic-panel .ai-msg.bot::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, #5cc2ff, rgba(92, 194, 255, 0));
}


.aic-panel .ai-text {
  -webkit-hyphens: manual;
  hyphens: manual;
  word-break: normal;
  overflow-wrap: break-word;
}

.ai-chat.aic-panel .ai-msg.user {
  background: linear-gradient(90deg, #6f9fd4 0%, #a9cbf7 60%, #d6ebff 100%);
  border: 0;
  border-radius: 14px 14px 4px 14px;
  color: #07182a;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
}

.ai-chat.aic-panel .ai-msg.user .ai-from__name,
.ai-chat.aic-panel .ai-msg.user .ai-from__time {
  color: #07182a;
  opacity: .55;
}

.ai-chat.aic-panel .ai-msg.user::after,
.ai-chat.aic-panel .ai-msg.bot::after {
  display: none;
}

.aic-panel .ai-from__name {
  font-weight: 500;
}

.aic-panel .ai-msg.bot .ai-from__name {
  color: #cfe8ff;
}

.aic-panel .ai-chip {
  font-weight: 500;
}

.aic-panel .ai-text {
  font-weight: 400;
  font-size: 14px;
}

.aic-panel .ai-typing span {
  background: #5cc2ff;
}

.aic-panel .ai-chip {
  border-color: rgb(118 154 181 / 55%);
  background: rgba(255, 255, 255, .03);
  color: #e4f1ff;
}

.aic-panel .ai-chip:hover {
  border-color: rgb(169 203 247 / 75%);
  background: rgba(255, 255, 255, .07);
}


.aic-panel .ai-chat__foot.ai-foot2 {
  padding: 12px 16px 12px;
  border-top: 1px solid rgb(118 154 181 / 30%);
  border-radius: 0 0 18px 18px;
}

.aic-panel .ai-foot2 .ai-ex {
  background: rgba(255, 255, 255, .03);
  border-color: rgb(118 154 181 / 55%);
}

.aic-panel .ai-foot2.open .ai-ex {
  background: rgba(255, 255, 255, .045);
  border-color: rgb(169 203 247 / 75%);
}

.aic-panel .ai-foot2.has-text .ai-send {
  color: #07182a;
  background: linear-gradient(90deg, #6f9fd4 0%, #a9cbf7 50%, #d6ebff 100%);
  box-shadow: 0 6px 14px rgba(135, 174, 219, .35), inset 0 1px 0 rgba(255, 255, 255, .6);
}


.aic-panel .ai-foot2 .ai-ex__tools {
  flex-wrap: wrap;
  gap: 0;
  padding: 0 44px 8px 6px;
}

.aic-panel .ai-foot2 .ai-ex__tb {
  padding: 0 6px;
  font-size: 12px;
  white-space: nowrap;
}

.aic-panel .ai-foot2 .ai-ex__tb {
  color: #8fb3d6;
  font-weight: 500;
}

.aic-panel .ai-foot2[data-note]::after {
  content: attr(data-note);
  display: block;
  margin-top: 9px;
  font-size: 11.5px;
  text-align: center;
  color: rgba(222, 236, 250, .5);
}


.aic-panel #aiChips {
  display: none;
}


.aic-home {
  flex: none;
  margin: 14px 16px 0;
  padding: 12px 14px 13px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(92, 194, 255, .09), rgba(47, 141, 255, .03));
  border: 1px solid rgb(118 154 181 / 28%);
  border-left: 3px solid #5cc2ff;
}

.aic-home__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #cfe8ff;
}

.aic-home__head svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: #5cc2ff;
}

.aic-home__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(222, 236, 250, .72);
}

.aic-home__text strong {
  color: #fff;
  font-weight: 500;
}


.ai-chat.aic-panel {
  display: flex;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(22px) scale(.9);
  transform-origin: calc(100% - 30px) 100%;
  animation: none;
  transition: opacity .22s ease, transform .3s cubic-bezier(.4, 0, .6, 1), visibility 0s linear .3s;
}

.ai-chat.aic-panel.open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  animation: none;
  transition: opacity .3s ease, transform .5s cubic-bezier(.18, 1.15, .32, 1), visibility 0s;
}

.aic-panel > .ai-chat__head,
.aic-panel > .aic-home,
.aic-panel > .ai-chat__body,
.aic-panel > .ai-chat__foot {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .14s ease, transform .2s ease;
}

.aic-panel.open > .ai-chat__head,
.aic-panel.open > .aic-home,
.aic-panel.open > .ai-chat__body,
.aic-panel.open > .ai-chat__foot {
  opacity: 1;
  transform: none;
  transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1);
}

.aic-panel.open > .ai-chat__head { transition-delay: .06s; }
.aic-panel.open > .aic-home { transition-delay: .11s; }
.aic-panel.open > .ai-chat__body { transition-delay: .16s; }
.aic-panel.open > .ai-chat__foot { transition-delay: .2s; }

@media (prefers-reduced-motion: reduce) {
  .ai-chat.aic-panel,
  .ai-chat.aic-panel.open {
    transform: none;
    transition: opacity .15s ease, visibility 0s linear .15s;
  }

  .ai-chat.aic-panel.open {
    transition: opacity .15s ease, visibility 0s;
  }

  .aic-panel > .ai-chat__head,
  .aic-panel > .aic-home,
  .aic-panel > .ai-chat__body,
  .aic-panel > .ai-chat__foot {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
