/* ─────────────────────────────────────────────────────────
   Chatbot Widget — floating bottom-left assistant (prototype)
   Follows the same conventions as css/jobWidget.css
───────────────────────────────────────────────────────── */

#chatbot-widget {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 1090;
    font-size: .85rem;
}

/* ── Collapsed button ── */
.chatbot-fab {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: none;
    background: #0d6efd;
    color: #fff;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(13,110,253,.35);
    cursor: pointer;
    transition: box-shadow .18s, transform .12s;
}
.chatbot-fab:hover { box-shadow: 0 6px 24px rgba(13,110,253,.5); transform: translateY(-1px); }

/* Attention ring — a soft, slow "ping" so the button gets noticed without
   being distracting once someone's actually looked at it a few times. */
.chatbot-fab::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #0d6efd;
    animation: chatbot-ping 2.6s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
}
/* A gentle periodic nudge on the icon itself, separate cadence from the
   ring so they don't read as one single repeating "blink". */
.chatbot-fab i {
    animation: chatbot-nudge 4.5s ease-in-out infinite;
}
@keyframes chatbot-ping {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(1.55); opacity: 0;   }
    100% { transform: scale(1.55); opacity: 0;   }
}
@keyframes chatbot-nudge {
    0%, 80%, 100% { transform: rotate(0deg) scale(1); }
    84%           { transform: rotate(-8deg) scale(1.05); }
    88%           { transform: rotate(7deg) scale(1.05); }
    92%           { transform: rotate(-4deg) scale(1.02); }
    96%           { transform: rotate(0deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .chatbot-fab::before, .chatbot-fab i { animation: none; }
}

/* ── Expanded panel ── */
.chatbot-panel {
    width: 340px;
    max-width: calc(100vw - 2rem);
    height: 460px;
    max-height: calc(100vh - 3rem);
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: chatbot-slide-up .18s ease;
}

@keyframes chatbot-slide-up {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.chatbot-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--light-bg-color);
    color: #0d6efd;
    flex-shrink: 0;
}

.chatbot-header__title {
    flex: 1;
    font-weight: 700;
    font-size: .82rem;
    color: var(--text-color);
}

.chatbot-badge {
    font-size: .62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--light-bg-color);
    border: 1px solid var(--border-color);
    color: var(--subtle-text-color);
    padding: .05rem .4rem;
    border-radius: 20px;
    margin-left: .35rem;
}

.chatbot-btn {
    background: none;
    border: none;
    color: var(--subtle-text-color);
    padding: .2rem .4rem;
    border-radius: 6px;
    cursor: pointer;
}
.chatbot-btn:hover { background: rgba(0,0,0,.06); color: var(--text-color); }

/* ── Message list ── */
.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: .85rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.chatbot-msg { display: flex; }
.chatbot-msg--user { justify-content: flex-end; }
.chatbot-msg--bot  { justify-content: flex-start; }

.chatbot-msg__bubble {
    max-width: 82%;
    padding: .5rem .75rem;
    border-radius: 12px;
    font-size: .82rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.chatbot-msg--user .chatbot-msg__bubble {
    background: #0d6efd;
    color: #fff;
    border-bottom-right-radius: 3px;
}
.chatbot-msg--bot .chatbot-msg__bubble {
    background: var(--light-bg-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
    border-bottom-left-radius: 3px;
}
.chatbot-msg--error .chatbot-msg__bubble {
    background: rgba(220,53,69,.1);
    border-color: rgba(220,53,69,.35);
    color: #dc3545;
}

.chatbot-msg__link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-top: .35rem;
    font-size: .76rem;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
}

.chatbot-msg__links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
}
.chatbot-msg__links .chatbot-msg__link { margin-top: .15rem; }

/* ── Typing indicator ── */
.chatbot-typing { display: flex; gap: .25rem; padding: .65rem .75rem; }
.chatbot-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--subtle-text-color);
    animation: chatbot-bounce 1.2s infinite ease-in-out;
}
.chatbot-typing span:nth-child(2) { animation-delay: .15s; }
.chatbot-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes chatbot-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: .5; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* ── Input row ── */
.chatbot-input-row {
    display: flex;
    align-items: flex-end;
    gap: .5rem;
    padding: .65rem .75rem;
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.chatbot-input {
    flex: 1;
    border: 1px solid var(--border-color);
    background: var(--card-bg-color);
    color: var(--text-color);
    border-radius: 14px;
    padding: .65rem .9rem;
    font-size: .88rem;
    line-height: 1.45;
    outline: none;
    resize: none;
    overflow-y: auto;
    min-height: 84px;
    max-height: 200px;
    font-family: inherit;
}
.chatbot-input:focus { border-color: #0d6efd; }

.chatbot-send {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    border: none;
    background: #0d6efd;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s;
}
.chatbot-send:hover:not(:disabled) { background: #0a58ca; }
.chatbot-send:disabled { background: var(--border-color); color: var(--subtle-text-color); cursor: not-allowed; }