/* Кнопка «+ Новый опрос» со скрепкой — подсказка без режима обучения */
.btn-survey-guided {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.btn-survey-guided[data-hint]::after {
    content: attr(data-hint);
    position: absolute;
    left: 50%;
    bottom: calc(100% + 8px);
    transform: translateX(-50%) translateY(4px);
    min-width: 12rem;
    max-width: 16rem;
    padding: .45rem .65rem;
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    color: var(--tl-dark);
    background: #fff;
    border: 1px solid var(--tl-border);
    border-radius: var(--tl-radius-sm);
    box-shadow: 0 8px 24px rgba(33, 59, 76, .14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 1080;
    white-space: normal;
}
.btn-survey-guided[data-hint]:hover::after,
.btn-survey-guided[data-hint]:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.guide-clip-inline {
    display: inline-block;
    width: 1.05rem;
    height: 1.35rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23f8f8f8'/%3E%3Cstop offset='45%25' stop-color='%23c5c9cf'/%3E%3Cstop offset='100%25' stop-color='%2388919c'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23g)' stroke='%236b7280' stroke-width='.6' d='M14 2C9 2 6 6 6 11v14c0 3 2 5 5 5s5-2 5-5V12c0-2-1-3-3-3s-3 1-3 3v11'/%3E%3C/svg%3E") center / contain no-repeat;
    vertical-align: -.15em;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,.15));
}

/* Виджет помощника */
.survey-guide-overlay {
    position: fixed;
    inset: 0;
    z-index: 1060;
    pointer-events: none;
}
.survey-guide-spotlight {
    position: fixed;
    border-radius: var(--tl-radius-sm);
    box-shadow: 0 0 0 9999px rgba(33, 59, 76, .42);
    transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
    pointer-events: none;
    z-index: 1061;
}
.survey-guide-spotlight[hidden] {
    display: none !important;
}
.survey-guide-widget {
    position: fixed;
    z-index: 1062;
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    max-width: min(92vw, 22rem);
    pointer-events: auto;
    transition: top .28s ease, left .28s ease;
}
.survey-guide-widget[hidden] {
    display: none !important;
}
.survey-guide-widget--dock {
    right: 1.25rem !important;
    bottom: 1.25rem !important;
    left: auto !important;
    top: auto !important;
    flex-direction: row-reverse;
}
.survey-guide-clip-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}
.survey-guide-resume-btn {
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
    padding: .2rem .55rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(33, 59, 76, .12);
}
.survey-guide-widget--paused {
    right: 1.25rem !important;
    bottom: 1.25rem !important;
    left: auto !important;
    top: auto !important;
    flex-direction: column;
    align-items: center;
    max-width: none;
}
.survey-guide-widget--paused .survey-guide-bubble {
    display: none;
}
.survey-guide-widget--paused .survey-guide-resume-btn {
    display: inline-block !important;
}
.survey-guide-widget--paused .survey-guide-clip {
    animation: survey-guide-bob 2.8s ease-in-out infinite;
}
.survey-guide-widget--dock .survey-guide-bubble::before {
    left: auto;
    right: -10px;
    border-right-color: transparent;
    border-left-color: #f0c040;
}
.survey-guide-widget--dock .survey-guide-bubble::after {
    left: auto;
    right: -6px;
    border-right-color: transparent;
    border-left-color: #fff;
}

/* Скрепка-персонаж */
.survey-guide-clip {
    flex-shrink: 0;
    width: 4.5rem;
    height: 6.5rem;
    position: relative;
    animation: survey-guide-bob 2.8s ease-in-out infinite;
    filter: drop-shadow(2px 4px 8px rgba(33, 59, 76, .22));
}
.survey-guide-clip.is-speaking {
    animation: survey-guide-bob 2.8s ease-in-out infinite, survey-guide-talk .35s ease-in-out infinite alternate;
}
.survey-guide-clip svg {
    width: 100%;
    height: 100%;
    display: block;
}
.survey-guide-clip .clip-eye {
    transform-origin: center;
    transform-box: fill-box;
    animation: survey-guide-blink 5.5s ease-in-out infinite;
}
.survey-guide-clip .clip-eye-right {
    animation-delay: .08s;
}
.survey-guide-clip .clip-shine {
    animation: survey-guide-glint 3.2s ease-in-out infinite;
}
.survey-guide-clip .clip-mouth {
    transition: opacity .15s ease;
}
.survey-guide-clip.is-speaking .clip-mouth-closed {
    opacity: 0;
}
.survey-guide-clip.is-speaking .clip-mouth-open {
    opacity: 1;
}

@keyframes survey-guide-bob {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50% { transform: translateY(-5px) rotate(2deg); }
}
@keyframes survey-guide-talk {
    from { transform: translateY(0) rotate(-2deg) scale(1); }
    to { transform: translateY(-2px) rotate(2deg) scale(1.02); }
}
@keyframes survey-guide-blink {
    0%, 36%, 38%, 40%, 88%, 90%, 92%, 100% { transform: scaleY(1); }
    37%, 89% { transform: scaleY(.06); }
}
@keyframes survey-guide-glint {
    0%, 72%, 100% { opacity: .55; }
    78% { opacity: 1; }
}

.survey-guide-pulse {
    animation: survey-guide-target-pulse 1.1s ease-in-out 2;
    outline: 2px solid #f0c040 !important;
    outline-offset: 3px;
}
@keyframes survey-guide-target-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240, 192, 64, .55); }
    50% { box-shadow: 0 0 0 10px rgba(240, 192, 64, 0); }
}

.survey-guide-bubble {
    background: #fff;
    border: 2px solid #f0c040;
    border-radius: 14px;
    padding: .75rem .85rem;
    box-shadow: 0 10px 28px rgba(33, 59, 76, .18);
    position: relative;
    min-width: 11rem;
}
.survey-guide-bubble::before {
    content: '';
    position: absolute;
    left: -10px;
    bottom: 1.1rem;
    border: 8px solid transparent;
    border-right-color: #f0c040;
}
.survey-guide-bubble::after {
    content: '';
    position: absolute;
    left: -6px;
    bottom: 1.15rem;
    border: 6px solid transparent;
    border-right-color: #fff;
}
.survey-guide-bubble-title {
    font-weight: 700;
    font-size: .88rem;
    margin-bottom: .35rem;
    color: var(--tl-dark);
}
.survey-guide-bubble-text {
    font-size: .82rem;
    line-height: 1.45;
    color: var(--tl-text);
    margin-bottom: .65rem;
}
.survey-guide-bubble-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
}
.survey-guide-step-num {
    font-size: .72rem;
    color: var(--tl-muted);
    margin-right: auto;
}

.survey-guide-done-toast {
    position: relative;
    z-index: 1040;
    margin-bottom: 1rem;
}