/**
 * Volley Hub Pro - AI Assistant :: widget + highlight styles
 * ----------------------------------------------------------
 * Fully namespaced (vh-agent-*) so it can be dropped on any page of the app
 * without touching the existing stylesheets.
 */

#vh-agent-root,
#vh-agent-root * {
    box-sizing: border-box;
}

#vh-agent-root {
    --vh-agent-bg: rgba(13, 15, 22, 0.97);
    --vh-agent-panel: rgba(18, 21, 32, 0.98);
    --vh-agent-border: rgba(255, 255, 255, 0.12);
    --vh-agent-primary: #00fbff;
    --vh-agent-secondary: #ff0055;
    --vh-agent-text: #ffffff;
    --vh-agent-muted: rgba(255, 255, 255, 0.62);
    --vh-agent-fab-size: 44px;
    --vh-agent-offset-bottom: 92px;
    --vh-agent-offset-right: 18px;
    position: fixed;
    inset: 0;
    z-index: 2147482000;
    pointer-events: none;
    font-family: inherit;
    color: var(--vh-agent-text);
}

#vh-agent-root .vh-agent-fab {
    position: fixed;
    bottom: var(--vh-agent-offset-bottom);
    right: var(--vh-agent-offset-right);
    width: var(--vh-agent-fab-size);
    height: var(--vh-agent-fab-size);
    border-radius: 50%;
    border: 1px solid rgba(0, 251, 255, 0.5);
    background: linear-gradient(135deg, #0f1720, #1c1230);
    color: #fff;
    font-size: 19px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.2);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

#vh-agent-root .vh-agent-fab:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 251, 255, 0.35);
}

#vh-agent-root.vh-agent-open .vh-agent-fab {
    transform: scale(0.92);
    opacity: 0.85;
}

#vh-agent-root .vh-agent-fab-pulse {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid rgba(0, 251, 255, 0.45);
    animation: vh-agent-pulse 2.6s ease-out infinite;
    pointer-events: none;
}

@keyframes vh-agent-pulse {
    0% { transform: scale(0.9); opacity: 0.75; }
    70% { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

#vh-agent-root .vh-agent-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--vh-agent-secondary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

#vh-agent-root .vh-agent-panel {
    position: fixed;
    bottom: calc(var(--vh-agent-offset-bottom) + var(--vh-agent-fab-size) + 12px);
    right: var(--vh-agent-offset-right);
    width: min(380px, calc(100vw - 24px));
    height: min(560px, calc(100vh - 170px));
    display: none;
    flex-direction: column;
    overflow: hidden;
    background: var(--vh-agent-panel);
    border: 1px solid var(--vh-agent-border);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    pointer-events: auto;
}

#vh-agent-root.vh-agent-open .vh-agent-panel {
    display: flex;
    animation: vh-agent-in 0.18s ease-out;
}

@keyframes vh-agent-in {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

#vh-agent-root .vh-agent-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--vh-agent-border);
    background: linear-gradient(135deg, rgba(0, 251, 255, 0.09), rgba(255, 0, 85, 0.09));
    cursor: grab;
    touch-action: none;          /* the header is the drag handle of the floating window */
    user-select: none;
}

#vh-agent-root .vh-agent-header.is-dragging {
    cursor: grabbing;
}

#vh-agent-root .vh-agent-titles {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

#vh-agent-root .vh-agent-title {
    font-size: 15px;
    letter-spacing: 0.02em;
}

#vh-agent-root .vh-agent-subtitle {
    font-size: 11px;
    color: var(--vh-agent-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

#vh-agent-root .vh-agent-header-actions {
    display: flex;
    gap: 6px;
}

#vh-agent-root .vh-agent-icon-btn {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    border: 1px solid var(--vh-agent-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--vh-agent-text);
    cursor: pointer;
    font-size: 13px;
    line-height: 1;
}

#vh-agent-root .vh-agent-icon-btn:hover {
    background: rgba(255, 255, 255, 0.12);
}

#vh-agent-root .vh-agent-messages {
    flex: 1 1 auto;
    /* the conversation is its own scroll area: a wheel here must never drag the
       page behind it (Tutorials & Guides scrolled together with the chat), while
       the list itself keeps scrolling. min-height:0 lets the flex child shrink. */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
}

#vh-agent-root .vh-agent-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

#vh-agent-root .vh-agent-row-user {
    align-items: flex-end;
}

#vh-agent-root .vh-agent-bubble {
    max-width: 86%;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--vh-agent-border);
}

#vh-agent-root .vh-agent-row-user .vh-agent-bubble {
    background: linear-gradient(135deg, rgba(0, 251, 255, 0.18), rgba(0, 251, 255, 0.08));
    border-color: rgba(0, 251, 255, 0.35);
}

#vh-agent-root .vh-agent-row-tools {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

#vh-agent-root .vh-agent-tool-chip {
    font-size: 11.5px;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(0, 251, 255, 0.1);
    border: 1px solid rgba(0, 251, 255, 0.3);
    color: rgba(255, 255, 255, 0.86);
}

#vh-agent-root .vh-agent-tool-chip.is-error {
    background: rgba(255, 0, 85, 0.12);
    border-color: rgba(255, 0, 85, 0.4);
}

#vh-agent-root .vh-agent-suggestions {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

#vh-agent-root .vh-agent-suggestion {
    text-align: left;
    padding: 9px 11px;
    border-radius: 11px;
    border: 1px dashed var(--vh-agent-border);
    background: transparent;
    color: var(--vh-agent-text);
    font-size: 12.5px;
    cursor: pointer;
}

#vh-agent-root .vh-agent-suggestion:hover {
    border-style: solid;
    border-color: rgba(0, 251, 255, 0.5);
    background: rgba(0, 251, 255, 0.08);
}

#vh-agent-root .vh-agent-card {
    border: 1px solid var(--vh-agent-border);
    border-radius: 14px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12.8px;
}

#vh-agent-root .vh-agent-card p {
    margin: 0;
    line-height: 1.45;
}

#vh-agent-root .vh-agent-card-title {
    font-weight: 700;
    font-size: 13px;
}

#vh-agent-root .vh-agent-card-guarded {
    border-color: rgba(255, 0, 85, 0.4);
    background: rgba(255, 0, 85, 0.07);
}

#vh-agent-root .vh-agent-card-error {
    border-color: rgba(255, 193, 7, 0.4);
    background: rgba(255, 193, 7, 0.08);
}

#vh-agent-root .vh-agent-card-unavailable {
    border-color: rgba(255, 193, 7, 0.45);
    background: rgba(255, 193, 7, 0.08);
}

#vh-agent-root .vh-agent-card-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

#vh-agent-root .vh-agent-btn {
    padding: 8px 13px;
    border-radius: 10px;
    border: 1px solid var(--vh-agent-border);
    background: rgba(255, 255, 255, 0.06);
    color: var(--vh-agent-text);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

#vh-agent-root .vh-agent-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
}

#vh-agent-root .vh-agent-btn:disabled {
    opacity: 0.6;
    cursor: default;
}

#vh-agent-root .vh-agent-btn-primary {
    background: linear-gradient(135deg, #00fbff, #00b3cc);
    color: #04121a;
    border-color: transparent;
}

#vh-agent-root .vh-agent-btn-danger {
    background: linear-gradient(135deg, #ff0055, #c40040);
    color: #fff;
    border-color: transparent;
}

#vh-agent-root .vh-agent-muted {
    color: var(--vh-agent-muted);
    font-size: 11.5px;
}

#vh-agent-root .vh-agent-card-field {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 8px;
    background: rgba(0, 251, 255, 0.08);
    border: 1px solid rgba(0, 251, 255, 0.18);
}

#vh-agent-root .vh-agent-card-quota {
    border-color: rgba(255, 193, 7, 0.45);
    background: linear-gradient(180deg, rgba(255, 193, 7, 0.08), rgba(0, 0, 0, 0.25));
}

#vh-agent-root .vh-agent-card-steps {
    margin: 6px 0 4px 18px;
    padding: 0;
    color: var(--vh-agent-muted);
}

#vh-agent-root .vh-agent-card-steps li {
    margin: 3px 0;
}

/* Two step-by-step lists (Groq first, then Google): one title per provider. */
#vh-agent-root .vh-agent-card-steps-wrap {
    margin: 4px 0 2px;
}

#vh-agent-root .vh-agent-steps-title {
    margin: 8px 0 0;
    font-weight: 600;
    color: var(--vh-agent-text, inherit);
}

#vh-agent-root .vh-agent-key-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
}

#vh-agent-root a.vh-agent-btn {
    display: inline-block;
    text-decoration: none;
}

/* --- own key (BYOK) row --- */
#vh-agent-root .vh-agent-keyrow {
    border-top: 1px solid var(--vh-agent-border);
    padding: 8px 14px 2px;
    font-size: 11.5px;
    /* The panel is position:fixed with a clamped height, so the expanded key form
       can be taller than the room left under the conversation. The row takes the
       space above the send box and scrolls INSIDE itself: the footer can never be
       pushed out of the panel, and nothing here can scroll the page behind it
       (a scrollIntoView from inside the fixed panel used to jump the page down to
       "Tutorials & Guides"). overscroll-behavior keeps a wheel at the end of the
       row from dragging the page. */
    flex: 0 1 auto;
    min-height: 0;
    max-height: 70%;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

#vh-agent-root .vh-agent-keyrow[hidden] {
    display: none;
}

#vh-agent-root .vh-agent-key-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--vh-agent-accent);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

#vh-agent-root .vh-agent-key-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--vh-agent-muted);
    flex-wrap: wrap;
}

#vh-agent-root .vh-agent-key-text {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
}

#vh-agent-root .vh-agent-key-form {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

#vh-agent-root .vh-agent-key-input {
    flex: 1 1 160px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid var(--vh-agent-border);
    background: rgba(0, 0, 0, 0.35);
    color: var(--vh-agent-text);
    font-size: 12px;
}

#vh-agent-root .vh-agent-key-save {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--vh-agent-accent);
    background: rgba(0, 251, 255, 0.12);
    color: var(--vh-agent-text);
    font-size: 12px;
    cursor: pointer;
}

#vh-agent-root .vh-agent-key-save[disabled] {
    opacity: 0.6;
    cursor: default;
}

#vh-agent-root .vh-agent-key-note {
    flex: 1 1 100%;
    margin: 2px 0;
    color: var(--vh-agent-muted);
}

#vh-agent-root .vh-agent-key-warn {
    color: #ffc107;
}

#vh-agent-root .vh-agent-warn {
    color: #ffc107;
    font-size: 11.5px;
}

#vh-agent-root .vh-agent-footer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid var(--vh-agent-border);
    background: rgba(0, 0, 0, 0.18);
}

#vh-agent-root .vh-agent-input {
    flex: 1;
    resize: none;
    max-height: 110px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid var(--vh-agent-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--vh-agent-text);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.4;
}

#vh-agent-root .vh-agent-input:focus {
    outline: none;
    border-color: rgba(0, 251, 255, 0.55);
}

#vh-agent-root .vh-agent-input:disabled {
    opacity: 0.55;
}

#vh-agent-root .vh-agent-send-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #00fbff, #ff0055);
    color: #06131b;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

#vh-agent-root .vh-agent-send-btn:disabled {
    filter: grayscale(0.7);
    cursor: default;
}

/* Typing indicator: a normal row inside the message flow, so it can never
   overlap the conversation or the footer. */
#vh-agent-root .vh-agent-row-typing {
    align-items: flex-start;
}

#vh-agent-root .vh-agent-typing-bubble {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--vh-agent-border);
}

#vh-agent-root .vh-agent-typing-bubble span {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--vh-agent-primary);
    animation: vh-agent-dot 1s infinite ease-in-out;
}

#vh-agent-root .vh-agent-typing-bubble span:nth-child(2) { animation-delay: 0.15s; }
#vh-agent-root .vh-agent-typing-bubble span:nth-child(3) { animation-delay: 0.3s; }

#vh-agent-root .vh-agent-typing-bubble em {
    font-style: normal;
    margin-left: 4px;
    font-size: 12px;
    color: var(--vh-agent-muted);
}

@keyframes vh-agent-dot {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(-3px); opacity: 1; }
}

@media (max-width: 700px) {
    #vh-agent-root {
        --vh-agent-offset-bottom: 84px;
        --vh-agent-offset-right: 12px;
    }

    #vh-agent-root .vh-agent-panel {
        width: calc(100vw - 16px);
        /* Compact on purpose: the app must stay usable (and scrollable) under it. */
        height: min(54vh, calc(100vh - 190px));
        right: 8px;
    }
}

/* ------------------------------------------------------------------ *
 * Highlight of a real app element (applied OUTSIDE the widget root)
 * ------------------------------------------------------------------ */
.vh-agent-highlight {
    position: relative;
    z-index: 2147481900 !important;
    animation: vh-agent-glow 1.25s ease-in-out infinite;
    border-radius: 10px;
}

@keyframes vh-agent-glow {
    0%, 100% {
        box-shadow: 0 0 0 2px rgba(0, 251, 255, 0.85), 0 0 18px 4px rgba(0, 251, 255, 0.55);
        filter: brightness(1.05);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(255, 0, 85, 0.75), 0 0 26px 8px rgba(255, 0, 85, 0.45);
        filter: brightness(1.18);
    }
}

.vh-agent-chip {
    position: absolute;
    z-index: 2147482001;
    max-width: 240px;
    padding: 6px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #00fbff, #ff0055);
    color: #04121a;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.25;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    animation: vh-agent-chip-in 0.2s ease-out;
}

@keyframes vh-agent-chip-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Draft values the assistant pre-compiled: the user still has to confirm. */
.vh-agent-draft {
    animation: vh-agent-draft-glow 1.6s ease-in-out infinite;
    border-color: rgba(0, 251, 255, 0.7) !important;
}

@keyframes vh-agent-draft-glow {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0, 251, 255, 0.6); }
    50% { box-shadow: 0 0 0 3px rgba(0, 251, 255, 0.25); }
}

@media (prefers-reduced-motion: reduce) {
    .vh-agent-highlight,
    .vh-agent-draft,
    #vh-agent-root .vh-agent-fab-pulse,
    #vh-agent-root .vh-agent-typing-bubble span {
        animation: none;
    }
}