/* Online Helper — right-rail panel for task-driven admin assistance.
   v1 skeleton: container hidden by default; populated and shown by admin-help.js. */

#online-helper-panel {
    position: fixed;
    top: 100px;
    right: 0;
    width: 320px;
    max-height: calc(100vh - 140px);
    background: #ffffff;
    border: 1px solid #d0d0d0;
    border-right: none;
    border-radius: 8px 0 0 8px;
    box-shadow: -4px 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 10500;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #222;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

#online-helper-panel.online-helper-panel--visible {
    display: flex;
}

.online-helper-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: #1b5e20;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.online-helper-panel__title {
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
    flex: 1 1 auto;
    /* Client themes (e.g. client-Demo2.css) apply `h1-h6 { color: !important }`
       which overrides the white-on-green we want for the helper header.
       Force white here so the title stays readable on the green strip. */
    color: #fff !important;
}

.online-helper-panel__mascot {
    width: 44px;
    height: 44px;
    margin-right: 10px;
    flex-shrink: 0;
    display: block;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25));
    /* Continuous idle float — subtle, ~3px vertical drift — so Tia always
       reads as alive even when not chatting. Was previously imperceptible
       at 28px; bumped to 44px and added the float so the blink/chat
       animations register at panel-header scale. */
    animation: tia-idle-float 3.4s ease-in-out infinite;
    /* The SVG is injected as innerHTML so CSS can target the mouth / face
       for the chat animation. <img src> would render the SVG in an isolated
       document and we'd lose that. */
}

@keyframes tia-idle-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

.online-helper-panel__mascot svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Animation setup — fill-box + center is the reliable cross-browser way to
   scale/rotate SVG elements around their own centre. Without this, Chrome
   defaults transform-origin to (0,0) in viewBox coords and the mouth would
   shoot off the top-left when scaled. The idle blink is mirrored inside the
   SVG itself (so the standalone file looks alive); these rules add the
   class-triggered chat for on-site use. */
.online-helper-panel__mascot #tia-eye-front,
.online-helper-panel__mascot #tia-eye-back,
.online-helper-panel__mascot #tia-mouth,
.online-helper-panel__mascot #tia-face {
    transform-box: fill-box;
    transform-origin: center;
}

/* Chatting: triggered for ~2s after a new step renders. The class is
   added/removed by triggerMascotChat() in admin-help.js. */
.online-helper-panel__mascot.tia-chatting #tia-mouth {
    animation: tia-chat-mouth 0.26s linear 0s 7;
}
@keyframes tia-chat-mouth {
    0%, 100% { transform: scaleY(0.6); }
    50%      { transform: scaleY(2.6); }
}

.online-helper-panel__mascot.tia-chatting #tia-face {
    animation: tia-chat-bob 0.52s ease-in-out 0s 3.5;
}
@keyframes tia-chat-bob {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(-1.6deg); }
    75%      { transform: rotate(1.6deg); }
}

/* Collapsed strip — panel is only 44px wide, so hide the mascot rather than
   shrinking it into illegibility against the green strip. */
#online-helper-panel.online-helper-panel--collapsed .online-helper-panel__mascot {
    display: none;
}

.online-helper-panel__close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.online-helper-panel__close:hover,
.online-helper-panel__close:focus {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

.online-helper-panel__body {
    padding: 14px;
    overflow-y: auto;
    flex: 1 1 auto;
    line-height: 1.45;
}

.online-helper-panel__placeholder {
    color: #666;
    font-style: italic;
}

/* Collapsed state — a thin vertical strip on the right edge. Click anywhere
   on it to expand. Used as the default state for authenticated admins so
   the helper is always within reach but never in the way. */

#online-helper-panel.online-helper-panel--collapsed {
    width: 44px;
    max-height: 220px;
    height: auto;
    overflow: hidden;
    border-radius: 8px 0 0 8px;
    cursor: pointer;
    transition: background-color 120ms ease;
}

#online-helper-panel.online-helper-panel--collapsed:hover {
    background-color: #f3faf4;
}

/* Unread-style indicator on the collapsed strip when a "Welcome back"
   resume prompt is queued. Sits at the top-right corner of the strip. */
#online-helper-panel.online-helper-panel--has-pending.online-helper-panel--collapsed::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffc107;
    border: 2px solid #1b5e20;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
    z-index: 2;
}

#online-helper-panel.online-helper-panel--collapsed .online-helper-panel__body,
#online-helper-panel.online-helper-panel--collapsed .online-helper-panel__close,
#online-helper-panel.online-helper-panel--collapsed .online-helper-panel__minimize {
    display: none;
}

#online-helper-panel.online-helper-panel--collapsed .online-helper-panel__header {
    flex-direction: column;
    padding: 14px 6px;
    height: 100%;
    justify-content: center;
    align-items: center;
    border-radius: 8px 0 0 8px;
}

/* Max specificity + everything !important — the Tia spawned session added
   other rules in this file that were defeating the collapsed title style. */
#online-helper-panel.online-helper-panel--collapsed h3.online-helper-panel__title,
#online-helper-panel.online-helper-panel--collapsed .online-helper-panel__title {
    flex: 0 0 auto !important;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    color: #fff !important;
    background: transparent !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 160px !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 8px 2px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1 !important;
}

/* Push the top menu items left so they don't sit underneath the helper
   strip on the right edge. 50px = strip width (44) + a small breathing gap. */
#Top_bar .menu_wrapper { padding-right: 50px; }

.online-helper-panel__minimize {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 4px;
}

.online-helper-panel__minimize:hover,
.online-helper-panel__minimize:focus {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

/* Task list rendered when no task is in progress. */

.online-helper-tasklist {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
}

.online-helper-tasklist__intro {
    margin: 0 0 8px 0;
    color: #444;
    font-size: 13px;
    line-height: 1.4;
}

.online-helper-tasklist__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border: 1px solid #c8e0c9;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    text-align: left;
    color: #1b5e20;
}

.online-helper-tasklist__item:hover,
.online-helper-tasklist__item:focus {
    background: #e8f5e9;
    outline: none;
}

.online-helper-tasklist__item--disabled {
    cursor: not-allowed;
    color: #888;
    border-color: #e0e0e0;
    background: #fafafa;
}

.online-helper-tasklist__item--disabled:hover,
.online-helper-tasklist__item--disabled:focus {
    background: #fafafa;
}

.online-helper-tasklist__item-label {
    display: inline-block;
    padding-left: 22px;
    text-indent: -22px;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}

.online-helper-tasklist__item-number {
    display: inline-block;
    width: 18px;
    font-weight: 700;
    color: inherit;
    text-indent: 0;
}

.online-helper-tasklist__item-tag {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: #fff7d6;
    color: #8a6d00;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* Step body — progress, titles, action buttons */

.online-helper-panel__progress {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.online-helper-panel__step-title {
    margin: 0 0 8px 0;
    font-size: 15px;
    font-weight: 600;
    color: #1b5e20;
    line-height: 1.3;
}

.online-helper-panel__step-body {
    margin: 0 0 14px 0;
    color: #333;
}

.online-helper-panel__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.online-helper-btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 4px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    line-height: 1.2;
    font-family: inherit;
}

.online-helper-btn--primary {
    background-color: #1b5e20;
    color: #fff;
    border-color: #0b3d10;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.18);
}

.online-helper-btn--primary:hover,
.online-helper-btn--primary:focus {
    background-color: #2e7d32;
    outline: none;
}

.online-helper-btn--branch {
    background-color: #fff;
    color: #1b5e20;
    border-color: #1b5e20;
}

.online-helper-btn--branch:hover,
.online-helper-btn--branch:focus {
    background-color: #e8f5e9;
    outline: none;
}

.online-helper-btn--ghost {
    background: transparent;
    color: #777;
    border-color: transparent;
    font-weight: 400;
    font-size: 13px;
    margin-top: 4px;
}

.online-helper-btn--ghost:hover,
.online-helper-btn--ghost:focus {
    color: #333;
    text-decoration: underline;
    outline: none;
}

/* "Click here" pointer — appears alongside the highlight ring with a
   waving hand emoji and a yellow pill. Bounces toward the target so the
   user's eye is drawn to the actual control to click. */

.online-helper-pointer {
    position: absolute;
    pointer-events: none;
    z-index: 10501;
    display: none;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #ffc107;
    color: #1a1300;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
    white-space: nowrap;
    animation: online-helper-pointer-bounce 1.3s ease-in-out infinite;
}

.online-helper-pointer__hand {
    font-size: 18px;
    line-height: 1;
}

.online-helper-pointer__label {
    line-height: 1;
}

@keyframes online-helper-pointer-bounce {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-6px); }
}

/* Show-me highlight — pulsing ring around the target element. */

#online-helper-highlight {
    position: absolute;
    pointer-events: none;
    border-radius: 6px;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.95),
                0 0 0 6px rgba(255, 193, 7, 0.45),
                0 0 14px 6px rgba(255, 193, 7, 0.55);
    z-index: 10499;
    display: none;
    transition: top 80ms linear, left 80ms linear, width 80ms linear, height 80ms linear;
    animation: online-helper-pulse 1.2s ease-in-out infinite;
}

@keyframes online-helper-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.95),
                    0 0 0 6px rgba(255, 193, 7, 0.45),
                    0 0 14px 6px rgba(255, 193, 7, 0.55);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(255, 193, 7, 1),
                    0 0 0 10px rgba(255, 193, 7, 0.30),
                    0 0 22px 10px rgba(255, 193, 7, 0.35);
    }
}

/* Floating "?" toggle — re-opens the panel after the user has dismissed
   the home-page nudge, so they're never locked out of the helper. */

.online-helper-toggle {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #1b5e20;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    border: 2px solid #0b3d10;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    z-index: 10498;
    line-height: 1;
    font-family: inherit;
}

.online-helper-toggle:hover,
.online-helper-toggle:focus {
    background-color: #2e7d32;
    outline: none;
    transform: scale(1.05);
}

/* Sign-in nudge banner on Default.aspx — yellow callout with a CTA and
   a dismiss link. Dismissal sets a long-lived cookie (interim) until the
   per-user DB flag from pending-db-changes.md ships. */

.online-helper-nudge {
    background-color: #fff7d6;
    display: block;
    padding: 14px 16px;
    border: 1px solid #d6b800;
    border-radius: 4px;
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #5b4900;
}

.online-helper-nudge__title {
    font-weight: 700;
    font-size: 15px;
    margin: 0 0 6px 0;
}

.online-helper-nudge__actions {
    margin-top: 10px;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.online-helper-nudge__cta {
    background-color: #1b5e20;
    color: #fff !important;
    border: 1px solid #0b3d10;
    padding: 8px 14px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
}

.online-helper-nudge__cta:hover,
.online-helper-nudge__cta:focus {
    background-color: #2e7d32;
    color: #fff !important;
    outline: none;
}

.online-helper-nudge__dismiss {
    background: transparent;
    border: none;
    color: #5b4900;
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    font-family: inherit;
}

.online-helper-nudge__dismiss:hover,
.online-helper-nudge__dismiss:focus {
    color: #2e1f00;
    outline: none;
}

/* Loading overlay — appears between "Take me there" click and the next
   page rendering, so the user isn't staring at a frozen UI. */

#online-helper-loading {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10600;
}

.online-helper-loading__box {
    background: #fff;
    padding: 20px 28px;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: #222;
}

.online-helper-loading__spinner {
    width: 22px;
    height: 22px;
    border: 3px solid #d0d0d0;
    border-top-color: #1b5e20;
    border-radius: 50%;
    animation: online-helper-spin 0.8s linear infinite;
}

@keyframes online-helper-spin {
    to { transform: rotate(360deg); }
}

/* "Stuck? Email David" affordance. The wrapper hosts both the closed-state
   toggle button (visible by default) and the open-state form (hidden until
   the toggle is clicked). When the form is open, the wrapper visibly
   sections itself off from the rest of the panel body. */

.online-helper-needhelp {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #d0d0d0;
    display: flex;
    flex-direction: column;
}

/* Make the toggle match the width of the other action buttons. */
.online-helper-needhelp__toggle {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    margin: 0;
}

/* Form (open state) sits inside its own subtle card so it's clearly its
   own concern, not just more step-body text. */
.online-helper-needhelp__form {
    background: #f5f9f5;
    border: 1px solid #cfe2cf;
    border-radius: 6px;
    padding: 10px 12px;
    margin-top: 6px;
}

.online-helper-needhelp__form[hidden] {
    display: none;
}

.online-helper-needhelp__hint {
    margin: 0 0 6px 0;
    font-size: 12px;
    color: #4a604a;
    line-height: 1.35;
}

.online-helper-needhelp__textarea {
    width: 100%;
    min-height: 80px;
    box-sizing: border-box;
    padding: 6px 8px;
    border: 1px solid #b8cdb8;
    border-radius: 3px;
    font-family: inherit;
    font-size: 13px;
    resize: vertical;
    background: #fff;
}

.online-helper-needhelp__counter {
    font-size: 11px;
    color: #6a7e6a;
    margin: 2px 0 6px 0;
    text-align: right;
}

.online-helper-needhelp__status {
    font-size: 12px;
    color: #555;
    margin: 6px 0;
    min-height: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.online-helper-needhelp__status--sending {
    color: #1b5e20;
    font-weight: 500;
}

.online-helper-needhelp__status--ok {
    color: #1b5e20;
    font-weight: 600;
}

.online-helper-needhelp__status--err {
    color: #b71c1c;
}

.online-helper-needhelp__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #cfe2cf;
    border-top-color: #1b5e20;
    border-radius: 50%;
    animation: online-helper-spin 0.8s linear infinite;
    flex: 0 0 14px;
}

.online-helper-needhelp__actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.online-helper-needhelp__actions .online-helper-btn {
    flex: 1 1 0;
}

/* Sticky context banner — appears under the header on steps that declare a
   contextSelector, so the admin always sees "Reviewing: $name $grant $amount"
   even on long pages where the panel and the relevant page text would
   otherwise scroll apart. */

.online-helper-panel__context {
    background: #e8f5e9;
    color: #1b5e20;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-bottom: 1px solid #cfe2cf;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pre-CTA condition gate — hint shown above a disabled CTA. */

.online-helper-panel__gate-hint {
    font-size: 12px;
    color: #8a6d00;
    background: #fff7d6;
    padding: 6px 10px;
    border: 1px solid #f0d97d;
    border-radius: 4px;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.online-helper-btn--disabled,
.online-helper-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
    background-color: #999 !important;
    border-color: #777 !important;
}

/* In-page ?-popovers — tiny circle next to a target element with an
   explainer that opens on click. */

.online-helper-annotation {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffc107;
    color: #1a1300;
    border: 1px solid #b78700;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    z-index: 10497;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.online-helper-annotation:hover,
.online-helper-annotation:focus {
    background: #ffd54f;
    outline: none;
    transform: scale(1.15);
}

.online-helper-annotation-pop {
    position: absolute;
    z-index: 10498;
    max-width: 280px;
    background: #1b5e20;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    line-height: 1.4;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.30);
}

/* Popup hint — closable callout that appears when an action triggers a
   modal popup (e.g. email preview after Verify/Approve). Sits above the
   modal popup; user can dismiss with the X. z-index 10510 so it stays
   above the ajaxToolkit modal (10001) and the highlight ring (10499). */

.online-helper-popup-hint {
    position: fixed;
    z-index: 10510;
    max-width: 420px;
    min-width: 240px;
    background: #1b5e20;
    color: #fff;
    padding: 12px 38px 12px 14px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.4;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.40);
    font-family: inherit;
}

.online-helper-popup-hint__text {
    display: block;
}

.online-helper-popup-hint__close {
    position: absolute;
    top: 4px;
    right: 6px;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
}

.online-helper-popup-hint__close:hover,
.online-helper-popup-hint__close:focus {
    background: rgba(255, 255, 255, 0.18);
    outline: none;
}

.online-helper-annotation-pop::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 12px;
    border: 6px solid transparent;
    border-top: 0;
    border-bottom-color: #1b5e20;
}