:root {
  --mks-primary: #f59e0b;
  --mks-primary-2: #0ea5e9;
  --mks-bg: rgba(255, 255, 255, 0.98);
  --mks-bg-soft: #f8fbff;
  --mks-text: #0f172a;
  --mks-muted: #64748b;
  --mks-border: rgba(148, 163, 184, 0.18);
  --mks-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
  --mks-shadow-soft: 0 12px 30px rgba(245, 158, 11, 0.2);
}

#mksolar-ai-chatbox-root,
#mksolar-ai-chatbox-root * {
  box-sizing: border-box;
}

html body #mksolar-ai-chatbox-root {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  left: auto !important;
  top: auto !important;
  z-index: 999999 !important;
  width: auto !important;
  height: auto !important;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox,
html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox--right,
html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox--left {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  left: auto !important;
  top: auto !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 24px);
  font-family: Inter, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  z-index: 999999 !important;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__toggle {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  left: auto !important;
  top: auto !important;
  width: 68px;
  height: 68px;
  border: 2px solid rgba(255, 255, 255, 0.88);
  border-radius: 50%;
  background: linear-gradient(135deg, var(--mks-primary), var(--mks-primary-2));
  box-shadow:
    0 18px 40px rgba(245, 158, 11, 0.28),
    0 8px 22px rgba(14, 165, 233, 0.18);
  cursor: pointer;
  z-index: 1000001 !important;
  overflow: visible !important;
  padding: 0 !important;
  color: transparent !important;
  font-size: 0 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__toggle::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.3), rgba(255,255,255,.08) 58%, transparent 72%);
  pointer-events: none;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__toggle:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 24px 48px rgba(245, 158, 11, 0.32),
    0 10px 24px rgba(14, 165, 233, 0.22);
  filter: saturate(1.05);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__toggle:active {
  transform: scale(0.97);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__robot {
  position: absolute;
  inset: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__robotCore {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7b1 0%, #fde047 45%, #f59e0b 100%);
  box-shadow:
    0 0 0 4px rgba(255,255,255,.16),
    0 8px 18px rgba(245,158,11,.28);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__robotCore::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%) perspective(40px) rotateX(55deg);
  width: 28px;
  height: 16px;
  border-radius: 4px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.22) 0 2px,
      transparent 2px 9px,
      rgba(255,255,255,.22) 9px 11px,
      transparent 11px 18px,
      rgba(255,255,255,.22) 18px 20px,
      transparent 20px 100%
    ),
    linear-gradient(180deg,
      rgba(255,255,255,.18) 0 2px,
      transparent 2px 7px,
      rgba(255,255,255,.18) 7px 9px,
      transparent 9px 100%
    ),
    linear-gradient(135deg, #1d4ed8, #38bdf8);
  box-shadow: 0 6px 14px rgba(15,23,42,.18);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__robotCore::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      rgba(255,255,255,0) 0deg 10deg,
      rgba(255,255,255,.95) 10deg 18deg,
      rgba(255,255,255,0) 18deg 42deg,
      rgba(255,255,255,.95) 42deg 50deg,
      rgba(255,255,255,0) 50deg 74deg,
      rgba(255,255,255,.95) 74deg 82deg,
      rgba(255,255,255,0) 82deg 106deg,
      rgba(255,255,255,.95) 106deg 114deg,
      rgba(255,255,255,0) 114deg 138deg,
      rgba(255,255,255,.95) 138deg 146deg,
      rgba(255,255,255,0) 146deg 170deg,
      rgba(255,255,255,.95) 170deg 178deg,
      rgba(255,255,255,0) 178deg 202deg,
      rgba(255,255,255,.95) 202deg 210deg,
      rgba(255,255,255,0) 210deg 234deg,
      rgba(255,255,255,.95) 234deg 242deg,
      rgba(255,255,255,0) 242deg 266deg,
      rgba(255,255,255,.95) 266deg 274deg,
      rgba(255,255,255,0) 274deg 298deg,
      rgba(255,255,255,.95) 298deg 306deg,
      rgba(255,255,255,0) 306deg 330deg,
      rgba(255,255,255,.95) 330deg 338deg,
      rgba(255,255,255,0) 338deg 360deg
    );
  -webkit-mask: radial-gradient(circle, transparent 0 22px, #000 22px);
  mask: radial-gradient(circle, transparent 0 22px, #000 22px);
  opacity: .9;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__robotEyes,
html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__robotSpark {
  display: none !important;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__toggle svg,
html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__toggle img {
  display: none !important;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__tooltip {
  position: absolute;
  right: 84px;
  bottom: 12px;
  min-width: 220px;
  max-width: 280px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  color: #0f172a;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 600;
  box-shadow: 0 16px 36px rgba(15,23,42,.14);
  border: 1px solid rgba(148,163,184,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(.98);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  pointer-events: none;
  z-index: 3;
  white-space: normal;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__tooltip::after {
  content: "";
  position: absolute;
  right: -8px;
  bottom: 20px;
  width: 14px;
  height: 14px;
  background: rgba(255,255,255,.98);
  border-right: 1px solid rgba(148,163,184,.18);
  border-bottom: 1px solid rgba(148,163,184,.18);
  transform: rotate(-45deg);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__tooltip.is-visible,
html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__toggle:hover .mksolar-ai-chatbox__tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__toggleBadge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  z-index: 4;
  box-shadow: 0 8px 18px rgba(239, 68, 68, 0.28);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__togglePulse {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(245,158,11,.20), rgba(14,165,233,.14));
  animation: mksPulseGlow 2.4s infinite;
  z-index: -1;
  pointer-events: none;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__panel {
  width: min(392px, calc(100vw - 20px));
  max-width: min(392px, calc(100vw - 20px));
  height: min(680px, calc(100vh - 92px));
  margin-bottom: 84px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
  border: 1px solid rgba(255,255,255,.78);
  box-shadow:
    0 28px 70px rgba(15,23,42,.18),
    0 10px 24px rgba(15,23,42,.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transform-origin: bottom right;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__panel.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(0.97);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 14px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.65), transparent 35%),
    linear-gradient(135deg, #fff7ed, #eff6ff 68%, #f8fafc);
  border-bottom: 1px solid rgba(148,163,184,.16);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__brand {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__avatar {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--mks-primary), var(--mks-primary-2));
  color: #fff;
  font-weight: 800;
  flex: 0 0 auto;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 12px 24px rgba(245,158,11,.22);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__avatarIcon {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff7b1 0%, #fde047 48%, #f59e0b 100%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.18);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__avatarIcon::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%) perspective(40px) rotateX(55deg);
  width: 18px;
  height: 9px;
  border-radius: 3px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.24) 0 2px,
      transparent 2px 6px,
      rgba(255,255,255,.24) 6px 8px,
      transparent 8px 12px,
      rgba(255,255,255,.24) 12px 14px,
      transparent 14px 100%
    ),
    linear-gradient(135deg, #1d4ed8, #38bdf8);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__avatarIcon::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      rgba(255,255,255,0) 0deg 15deg,
      rgba(255,255,255,.95) 15deg 22deg,
      rgba(255,255,255,0) 22deg 45deg,
      rgba(255,255,255,.95) 45deg 52deg,
      rgba(255,255,255,0) 52deg 75deg,
      rgba(255,255,255,.95) 75deg 82deg,
      rgba(255,255,255,0) 82deg 105deg,
      rgba(255,255,255,.95) 105deg 112deg,
      rgba(255,255,255,0) 112deg 135deg,
      rgba(255,255,255,.95) 135deg 142deg,
      rgba(255,255,255,0) 142deg 165deg,
      rgba(255,255,255,.95) 165deg 172deg,
      rgba(255,255,255,0) 172deg 195deg,
      rgba(255,255,255,.95) 195deg 202deg,
      rgba(255,255,255,0) 202deg 225deg,
      rgba(255,255,255,.95) 225deg 232deg,
      rgba(255,255,255,0) 232deg 255deg,
      rgba(255,255,255,.95) 255deg 262deg,
      rgba(255,255,255,0) 262deg 285deg,
      rgba(255,255,255,.95) 285deg 292deg,
      rgba(255,255,255,0) 292deg 315deg,
      rgba(255,255,255,.95) 315deg 322deg,
      rgba(255,255,255,0) 322deg 360deg
    );
  -webkit-mask: radial-gradient(circle, transparent 0 13px, #000 13px);
  mask: radial-gradient(circle, transparent 0 13px, #000 13px);
  opacity: .9;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__title {
  margin: 0;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--mks-text);
  font-weight: 800;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__headerMeta {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mks-muted);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__statusDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34,197,94,.16);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__close {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 14px;
  background: rgba(255,255,255,.78);
  color: var(--mks-text);
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
  transition: transform .18s ease, background .18s ease;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__close:hover {
  transform: translateY(-1px);
  background: #fff;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__messages {
  flex: 1;
  padding: 18px 16px 10px;
  overflow-y: auto;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  scroll-behavior: smooth;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__row {
  display: flex;
  margin-bottom: 14px;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__row--assistant {
  justify-content: flex-start;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__row--user {
  justify-content: flex-end;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__message {
  max-width: 88%;
  padding: 14px 15px;
  border-radius: 22px;
  line-height: 1.65;
  font-size: 14px;
  white-space: pre-wrap;
  word-break: break-word;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__message--assistant {
  background: rgba(255,255,255,.98);
  color: var(--mks-text);
  border: 1px solid rgba(148,163,184,.12);
  border-bottom-left-radius: 10px;
  box-shadow:
    0 8px 20px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.85);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__message--user {
  color: #fff;
  background: linear-gradient(135deg, var(--mks-primary), var(--mks-primary-2));
  border-bottom-right-radius: 10px;
  box-shadow: 0 12px 24px rgba(245,158,11,.18);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__messageMeta {
  margin-top: 8px;
  font-size: 11px;
  opacity: .58;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__typing span {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #94a3b8;
  animation: mksTyping 1.2s infinite ease-in-out;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__typing span:nth-child(2) {
  animation-delay: 0.15s;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__typing span:nth-child(3) {
  animation-delay: 0.3s;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actions.is-hidden {
  display: none !important;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding: 10px 16px 8px;
  background: linear-gradient(180deg, rgba(248,250,252,0), rgba(255,255,255,.86) 35%, #fff 100%);
  border-top: 0;
  overflow-x: auto;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIconBtn {
  flex: 0 0 auto;
  width: 68px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 2px 2px 6px;
  border-radius: 16px;
  transition: transform .18s ease, background .18s ease;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIconBtn:hover {
  transform: translateY(-2px);
  background: rgba(148,163,184,.08);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIcon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow:
    0 10px 22px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
  border: 1px solid rgba(148,163,184,.12);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIcon svg {
  width: 52px;
  height: 52px;
  display: block;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionText {
  font-size: 12px;
  line-height: 1.2;
  font-weight: 700;
  color: #334155;
  text-align: center;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__composer {
  padding: 12px 14px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.98));
  border-top: 1px solid rgba(148,163,184,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__inputWrap {
  display: flex;
  gap: 10px;
  align-items: center;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__inputField {
  flex: 1;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__input {
  width: 100%;
  min-height: 54px;
  max-height: 140px;
  resize: none;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 18px;
  padding: 15px 16px;
  font: inherit;
  color: var(--mks-text);
  background: rgba(255,255,255,.96);
  outline: none;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.75);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__input::placeholder {
  color: #94a3b8;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__input:focus {
  border-color: rgba(245,158,11,.45);
  box-shadow:
    0 0 0 4px rgba(253,224,71,.22),
    inset 0 1px 1px rgba(255,255,255,.75);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__hint {
  display: none;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__send {
  min-width: 78px;
  height: 54px;
  padding: 0 18px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--mks-primary), var(--mks-primary-2));
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  box-shadow:
    0 12px 24px rgba(245,158,11,.20),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition: transform .18s ease, box-shadow .18s ease;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__send:hover {
  transform: translateY(-1px);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__send:disabled {
  opacity: .7;
  cursor: not-allowed;
  transform: none;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: #64748b;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__footerStrong {
  color: var(--mks-text);
  font-weight: 700;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__footer span:last-child {
  color: #0ea5e9;
  font-weight: 700;
}

@keyframes mksTyping {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.4;
  }
  40% {
    transform: translateY(-3px);
    opacity: 1;
  }
}

@keyframes mksPulseGlow {
  0% {
    transform: scale(1);
    opacity: .35;
  }
  70% {
    transform: scale(1.24);
    opacity: 0;
  }
  100% {
    transform: scale(1.24);
    opacity: 0;
  }
}

@media (max-width: 767px) {
  html body #mksolar-ai-chatbox-root,
  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox,
  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox--right,
  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox--left,
  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__toggle {
    right: 12px !important;
    bottom: 12px !important;
    left: auto !important;
    top: auto !important;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__toggle {
    width: 60px;
    height: 60px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__robotCore {
    width: 32px;
    height: 32px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__tooltip {
    right: 72px;
    bottom: 8px;
    min-width: 180px;
    max-width: 220px;
    font-size: 12px;
    padding: 10px 12px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__panel {
    width: min(370px, calc(100vw - 16px));
    max-width: min(370px, calc(100vw - 16px));
    height: min(78vh, 680px);
    margin-bottom: 72px;
    border-radius: 24px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__messages {
    padding: 16px 14px 8px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actions {
    gap: 10px;
    padding: 10px 12px 8px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIconBtn {
    width: 64px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIcon,
  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIcon svg {
    width: 48px;
    height: 48px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__send {
    min-width: 72px;
    height: 52px;
    border-radius: 16px;
    font-size: 14px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__footer {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}

body.admin-bar #mksolar-ai-chatbox-root,
body.admin-bar #mksolar-ai-chatbox-root .mksolar-ai-chatbox,
body.admin-bar #mksolar-ai-chatbox-root .mksolar-ai-chatbox__toggle {
  top: auto !important;
  bottom: 20px !important;
}
html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__toggleBadge {
  display: none !important;
}
/* ===== CHATBOX POLISH: actions on top + smaller icons ===== */

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__panel {
  width: min(390px, calc(100vw - 18px));
  max-width: min(390px, calc(100vw - 18px));
  height: min(690px, calc(100vh - 88px));
  border-radius: 28px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.98));
  box-shadow:
    0 28px 70px rgba(15,23,42,.16),
    0 10px 24px rgba(15,23,42,.08);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__header {
  padding: 18px 18px 14px;
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.72), transparent 36%),
    linear-gradient(135deg, #fff7ed, #eff6ff 70%, #f8fafc);
  border-bottom: 1px solid rgba(148,163,184,.14);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__brand {
  align-items: flex-start;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__title {
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -.01em;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__subtitle {
  margin-top: 4px;
  font-size: 12px;
  color: #64748b;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__headerMeta {
  margin-top: 6px;
  font-size: 12px;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__close {
  width: 36px;
  height: 36px;
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  box-shadow: 0 8px 18px rgba(15,23,42,.06);
  transition: transform .18s ease, background .18s ease;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__close:hover {
  transform: translateY(-1px);
  background: #fff;
}

/* ACTIONS lên trên đầu chat */
html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 10px 14px 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.92));
  border-bottom: 1px solid rgba(148,163,184,.12);
  overflow-x: auto;
  scrollbar-width: none;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actions::-webkit-scrollbar {
  display: none;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIconBtn {
  flex: 0 0 auto;
  width: 58px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 2px 2px 4px;
  border-radius: 14px;
  transition: transform .18s ease, background .18s ease;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIconBtn:hover {
  transform: translateY(-2px);
  background: rgba(148,163,184,.08);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIcon {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(148,163,184,.12);
  box-shadow:
    0 8px 18px rgba(15,23,42,.08),
    inset 0 1px 0 rgba(255,255,255,.92);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIcon svg {
  width: 38px;
  height: 38px;
  display: block;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionText {
  font-size: 11px;
  line-height: 1.15;
  font-weight: 700;
  color: #334155;
  text-align: center;
}

/* Messages thoáng hơn */
html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__messages {
  padding: 16px;
  background:
    linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__row {
  margin-bottom: 14px;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__message {
  max-width: 88%;
  padding: 14px 15px;
  border-radius: 22px;
  line-height: 1.65;
  font-size: 14px;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__message--assistant {
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(148,163,184,.12);
  border-bottom-left-radius: 10px;
  box-shadow:
    0 8px 18px rgba(15,23,42,.05),
    inset 0 1px 0 rgba(255,255,255,.88);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__message--user {
  border-bottom-right-radius: 10px;
  box-shadow: 0 10px 22px rgba(245,158,11,.16);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__messageMeta {
  margin-top: 8px;
  font-size: 11px;
  opacity: .58;
}

/* composer đẹp hơn */
html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__composer {
  padding: 12px 14px 14px;
  background: rgba(255,255,255,.96);
  border-top: 1px solid rgba(148,163,184,.14);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__inputWrap {
  align-items: center;
  gap: 10px;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__input {
  min-height: 54px;
  border-radius: 18px;
  padding: 15px 16px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(148,163,184,.16);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__input::placeholder {
  color: #94a3b8;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__hint {
  display: none;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__send {
  min-width: 74px;
  height: 54px;
  border-radius: 18px;
  font-size: 15px;
  box-shadow:
    0 12px 24px rgba(245,158,11,.18),
    inset 0 1px 0 rgba(255,255,255,.18);
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__footer {
  margin-top: 8px;
  font-size: 12px;
  color: #64748b;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__footer span:last-child {
  color: #0ea5e9;
  font-weight: 700;
}

/* Ẩn badge đỏ */
html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__toggleBadge {
  display: none !important;
}

@media (max-width: 767px) {
  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__panel {
    width: min(368px, calc(100vw - 14px));
    max-width: min(368px, calc(100vw - 14px));
    height: min(78vh, 680px);
    border-radius: 24px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actions {
    gap: 8px;
    padding: 10px 10px 8px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIconBtn {
    width: 54px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIcon,
  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIcon svg {
    width: 34px;
    height: 34px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionText {
    font-size: 10px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__footer {
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actions {
  gap: 8px;
  padding: 10px 12px 8px;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIconBtn {
  width: 52px;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIcon,
html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIcon svg {
  width: 34px;
  height: 34px;
}

html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionText {
  font-size: 10px;
}

@media (max-width: 767px) {
  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actions {
    gap: 6px;
    padding: 8px 8px 6px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIconBtn {
    width: 48px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIcon,
  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionIcon svg {
    width: 30px;
    height: 30px;
  }

  html body #mksolar-ai-chatbox-root .mksolar-ai-chatbox__actionText {
    font-size: 9px;
  }
}