.cloud-guide {
    --guide-ink: #17211d;
    --guide-paper: #fffdf7;
    --guide-mint: #a9d8c9;
    --guide-mint-deep: #5f9789;
    --guide-coral: #ff7448;
    position: fixed;
    z-index: 165;
    right: 26px;
    bottom: 24px;
    width: 96px;
    height: 104px;
    color: var(--guide-ink);
    font-family: "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.cloud-guide,
.cloud-guide * { box-sizing: border-box; }

.cloud-guide__pet {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 92px;
    height: 98px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: grab;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

.cloud-guide__pet:active { cursor: grabbing; }

.cloud-guide__pet:focus-visible {
    outline: 2px solid var(--guide-coral);
    outline-offset: 5px;
    border-radius: 34px;
}

.cloud-guide__aura {
    position: absolute;
    left: 3px;
    bottom: 7px;
    width: 86px;
    height: 78px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(118, 164, 153, 0.24), rgba(118, 164, 153, 0) 68%);
    transform: scale(1.15);
}

.cloud-guide__shadow {
    position: absolute;
    left: 23px;
    bottom: 2px;
    width: 50px;
    height: 11px;
    border-radius: 50%;
    background: rgba(16, 21, 19, 0.2);
    filter: blur(5px);
    animation: cloud-guide-shadow 3.2s ease-in-out infinite;
}

.cloud-guide__sprite {
    position: absolute;
    left: 9px;
    bottom: 11px;
    width: 78px;
    height: 75px;
    animation: cloud-guide-float 3.2s ease-in-out infinite;
}

.cloud-guide__body {
    position: absolute;
    left: 4px;
    bottom: 4px;
    width: 70px;
    height: 51px;
    border: 1.5px solid rgba(23, 33, 29, 0.13);
    border-radius: 44% 48% 45% 48%;
    background: linear-gradient(145deg, #fffef9 20%, #edf7f1 78%);
    box-shadow: 0 13px 24px rgba(25, 48, 41, 0.18), inset -7px -8px 13px rgba(128, 188, 169, 0.13), inset 6px 5px 10px #fff;
}

.cloud-guide__puff {
    position: absolute;
    border: 1.5px solid rgba(23, 33, 29, 0.11);
    border-bottom-color: transparent;
    border-radius: 50%;
    background: linear-gradient(145deg, #fffefb, #edf7f2);
}

.cloud-guide__puff--one { top: -18px; left: 9px; width: 36px; height: 38px; }
.cloud-guide__puff--two { top: -23px; left: 28px; width: 40px; height: 43px; }
.cloud-guide__puff--three { top: -10px; right: -5px; width: 29px; height: 31px; }

.cloud-guide__face {
    position: absolute;
    z-index: 2;
    top: 17px;
    left: 18px;
    width: 38px;
    height: 25px;
}

.cloud-guide__eye {
    position: absolute;
    top: 1px;
    width: 5px;
    height: 8px;
    border-radius: 50%;
    background: var(--guide-ink);
    animation: cloud-guide-blink 5s infinite;
    transform-origin: center;
}

.cloud-guide__eye:first-child { left: 6px; }
.cloud-guide__eye:nth-child(2) { right: 6px; }

.cloud-guide__cheek {
    position: absolute;
    top: 12px;
    width: 8px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255, 116, 72, 0.34);
}

.cloud-guide__cheek--left { left: -1px; }
.cloud-guide__cheek--right { right: -1px; }

.cloud-guide__mouth {
    position: absolute;
    top: 10px;
    left: 16px;
    width: 8px;
    height: 6px;
    border-right: 1.5px solid var(--guide-ink);
    border-bottom: 1.5px solid var(--guide-ink);
    border-radius: 0 0 7px 0;
    transform: rotate(12deg);
}

.cloud-guide__arm {
    position: absolute;
    z-index: 3;
    top: 25px;
    width: 18px;
    height: 9px;
    border: 1.5px solid rgba(23, 33, 29, 0.12);
    border-radius: 999px;
    background: #f5fbf7;
}

.cloud-guide__arm--left { left: -7px; transform: rotate(24deg); }

.cloud-guide__arm--right {
    right: -10px;
    transform-origin: left center;
    animation: cloud-guide-wave 3.2s ease-in-out infinite;
}

.cloud-guide__spark {
    position: absolute;
    z-index: 4;
    top: -34px;
    left: 20px;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: var(--guide-coral);
    box-shadow: 0 0 0 5px rgba(255, 116, 72, 0.1);
    transform: rotate(45deg);
    animation: cloud-guide-spark 2.4s ease-in-out infinite;
}

.cloud-guide__tip {
    position: absolute;
    right: 72px;
    bottom: 78px;
    width: max-content;
    max-width: 190px;
    padding: 9px 13px;
    border: 1px solid rgba(23, 33, 29, 0.12);
    border-radius: 15px 15px 3px 15px;
    background: rgba(255, 253, 247, 0.96);
    box-shadow: 0 12px 35px rgba(16, 21, 19, 0.15);
    opacity: 0;
    pointer-events: none;
    transform: translate(8px, 7px) scale(0.94);
    transition: opacity 0.25s ease, transform 0.25s ease;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
}

.cloud-guide.is-tip-visible .cloud-guide__tip { opacity: 1; transform: translate(0, 0) scale(1); }

.cloud-guide__panel {
    position: absolute;
    right: 0;
    bottom: 112px;
    width: min(370px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid rgba(23, 33, 29, 0.14);
    border-radius: 24px;
    background: rgba(255, 253, 247, 0.96);
    box-shadow: 0 24px 70px rgba(16, 21, 19, 0.24);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px) scale(0.97);
    transform-origin: right bottom;
    transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease;
}

.cloud-guide.is-left .cloud-guide__panel { right: auto; left: 0; transform-origin: left bottom; }

.cloud-guide.is-open .cloud-guide__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.cloud-guide__head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 17px 18px 14px;
    border-bottom: 1px solid rgba(23, 33, 29, 0.1);
    background: linear-gradient(135deg, rgba(169, 216, 201, 0.35), rgba(255, 253, 247, 0));
}

.cloud-guide__badge {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 13px;
    color: #fff;
    background: var(--guide-mint-deep);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
    font-size: 17px;
}

.cloud-guide__title { min-width: 0; flex: 1; }
.cloud-guide__title strong, .cloud-guide__title span { display: block; }
.cloud-guide__title strong { font-size: 15px; letter-spacing: 0.01em; }
.cloud-guide__title span { margin-top: 1px; color: rgba(23, 33, 29, 0.6); font-size: 11px; }

.cloud-guide__status-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 5px;
    border-radius: 50%;
    background: #5bab77;
    box-shadow: 0 0 0 3px rgba(91,171,119,.12);
}

.cloud-guide__close {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(23, 33, 29, 0.11);
    border-radius: 50%;
    color: inherit;
    background: rgba(255,255,255,.55);
    cursor: pointer;
    font-size: 19px;
}

.cloud-guide__content { padding: 15px 16px 16px; }

.cloud-guide__section-label {
    display: block;
    margin-bottom: 8px;
    color: rgba(23, 33, 29, 0.52);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.14em;
}

.cloud-guide__nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
    margin-bottom: 14px;
}

.cloud-guide__nav button {
    padding: 9px 4px 8px;
    border: 1px solid rgba(23, 33, 29, 0.1);
    border-radius: 11px;
    color: var(--guide-ink);
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
    font-size: 12px;
    font-weight: 650;
}

.cloud-guide__nav button:hover,
.cloud-guide__nav button:focus-visible {
    border-color: var(--guide-mint-deep);
    background: rgba(169, 216, 201, 0.18);
    transform: translateY(-1px);
}

.cloud-guide__log {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 178px;
    min-height: 96px;
    margin: 0 -4px 12px 0;
    padding-right: 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(95, 151, 137, 0.45) transparent;
}

.cloud-guide__message {
    max-width: 88%;
    padding: 9px 11px;
    border-radius: 14px;
    font-size: 12.5px;
    line-height: 1.55;
}

.cloud-guide__message--bot { align-self: flex-start; border-bottom-left-radius: 4px; background: rgba(169, 216, 201, 0.24); }
.cloud-guide__message--user { align-self: flex-end; border-bottom-right-radius: 4px; color: #fff; background: var(--guide-ink); }

.cloud-guide__answer-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 7px;
    padding: 4px 8px;
    border: 0;
    border-radius: 999px;
    color: #fff;
    background: var(--guide-mint-deep);
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
}

.cloud-guide__chips {
    display: flex;
    gap: 6px;
    margin-bottom: 11px;
    overflow-x: auto;
    scrollbar-width: none;
}

.cloud-guide__chips::-webkit-scrollbar { display: none; }

.cloud-guide__chip {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid rgba(23, 33, 29, 0.11);
    border-radius: 999px;
    color: var(--guide-ink);
    background: transparent;
    cursor: pointer;
    font-size: 11.5px;
    white-space: nowrap;
}

.cloud-guide__chip:hover,
.cloud-guide__chip:focus-visible { border-color: var(--guide-coral); color: #b94724; }

.cloud-guide__form {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 5px 5px 5px 12px;
    border: 1px solid rgba(23, 33, 29, 0.14);
    border-radius: 14px;
    background: #fff;
}

.cloud-guide__form:focus-within { border-color: var(--guide-mint-deep); box-shadow: 0 0 0 3px rgba(95, 151, 137, 0.11); }

.cloud-guide__input {
    width: 100%;
    min-width: 0;
    padding: 5px 0;
    border: 0;
    outline: 0;
    color: var(--guide-ink);
    background: transparent;
    font-size: 12px;
}

.cloud-guide__send {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: 11px;
    color: #fff;
    background: var(--guide-coral);
    cursor: pointer;
    font-size: 15px;
    transition: transform .18s ease;
}

.cloud-guide__send:hover { transform: rotate(-8deg) scale(1.04); }

.cloud-guide button:focus-visible,
.cloud-guide input:focus-visible { outline: 2px solid var(--guide-coral); outline-offset: 2px; }
.cloud-guide__form input:focus-visible { outline: 0; }

@keyframes cloud-guide-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-7px) rotate(1deg); }
}

@keyframes cloud-guide-shadow {
    0%, 100% { opacity: .7; transform: scaleX(1); }
    50% { opacity: .4; transform: scaleX(.82); }
}

@keyframes cloud-guide-blink {
    0%, 44%, 49%, 100% { transform: scaleY(1); }
    46%, 47% { transform: scaleY(.12); }
}

@keyframes cloud-guide-wave {
    0%, 52%, 100% { transform: rotate(-16deg); }
    60% { transform: rotate(-48deg); }
    68% { transform: rotate(-4deg); }
    76% { transform: rotate(-42deg); }
}

@keyframes cloud-guide-spark {
    0%, 100% { opacity: .65; transform: rotate(45deg) scale(.8); }
    50% { opacity: 1; transform: rotate(135deg) scale(1); }
}

@media (max-width: 640px) {
    .cloud-guide {
        right: 13px;
        bottom: max(12px, env(safe-area-inset-bottom));
        transform: scale(.9);
        transform-origin: right bottom;
    }

    .cloud-guide.is-left { transform-origin: left bottom; }
    .cloud-guide__panel { width: min(370px, calc(111.111vw - 28px)); max-height: calc(111.111svh - 135px); }
    .cloud-guide__log { max-height: min(178px, 24svh); }
}

@media (prefers-reduced-motion: reduce) {
    .cloud-guide *,
    .cloud-guide *::before,
    .cloud-guide *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}