/* ==========================================================================
   ManagedHire - header CTA and the candidate chat panel.

   The homepage sections that used to live here were replaced by the warm theme
   in managedhire.css; only the pieces still in use are kept, restyled to match.
   ========================================================================== */

/* ---- header: "Didn't find a job? Contact us" ------------------------------ */

.header .navbar-nav > li.helpcta{display:flex;align-items:center}
.header .navbar-nav > li.helpcta > a.helpcta-link{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--mh-clay-soft);color:var(--mh-clay);
    border:1px solid transparent;border-radius:100px;
    padding:9px 18px;font-size:13.5px;font-weight:600;line-height:1;
    text-decoration:none;transition:background .18s ease,color .18s ease}
.header .navbar-nav > li.helpcta > a.helpcta-link:hover{
    background:var(--mh-clay);color:#fff;text-decoration:none}
.header .navbar-nav > li.helpcta > a.helpcta-link:hover i,
.header .navbar-nav > li.helpcta > a.helpcta-link:hover .helpcta-action{color:#fff}
.header .navbar-nav > li.helpcta i{font-size:14px;color:inherit}
.header .navbar-nav > li.helpcta .helpcta-action{color:inherit;font-weight:700}

@media (max-width:1300px) and (min-width:992px){
    .header .navbar-nav > li.helpcta .helpcta-text{display:none}
}
@media (max-width:991px){
    .header .navbar-nav > li.helpcta{display:block}
    .header .navbar-nav > li.helpcta > a.helpcta-link{
        justify-content:center;width:100%;margin:8px 0}
}

/* ---- candidate chat panel ------------------------------------------------- */

.chatwrap{background:var(--mh-cream);padding:34px 0 56px;min-height:70vh}
.chatshell{max-width:840px;margin:0 auto;background:var(--mh-surface);
    border:1px solid var(--mh-line);border-radius:26px;
    box-shadow:0 16px 46px rgba(42,35,32,.09);overflow:hidden;
    display:flex;flex-direction:column}

.chathead{display:flex;align-items:center;justify-content:space-between;gap:16px;
    padding:18px 24px;border-bottom:1px solid var(--mh-line);background:var(--mh-surface)}
.chathead-who{display:flex;align-items:center;gap:14px;min-width:0}
.chatavatar{width:46px;height:46px;border-radius:50%;flex:0 0 46px;display:flex;
    align-items:center;justify-content:center;color:#fff;font-size:17px;
    background:var(--mh-clay)}
.chathead h1{font-family:var(--mh-serif);font-size:20px;font-weight:600;margin:0;
    color:var(--mh-ink);line-height:1.25}
.chatstate{margin:3px 0 0;font-size:13px;color:var(--mh-ink-2);
    display:flex;align-items:center;gap:7px}
.chatstate:before{content:"";width:7px;height:7px;border-radius:50%;
    background:var(--mh-sage);box-shadow:0 0 0 3px rgba(110,143,115,.20)}
.chatback{font-size:13.5px;color:var(--mh-ink-2);text-decoration:none;white-space:nowrap}
.chatback:hover{color:var(--mh-clay);text-decoration:none}

.chatlog{padding:24px;overflow-y:auto;height:52vh;min-height:320px;background:var(--mh-cream)}
.chatmsg{display:flex;margin-bottom:14px}
.chatmsg.is-me{justify-content:flex-end}
.chatbubble{max-width:76%;padding:12px 16px 9px;border-radius:18px;position:relative}
.is-them .chatbubble{background:var(--mh-surface);border:1px solid var(--mh-line);
    border-bottom-left-radius:6px}
.is-me .chatbubble{background:var(--mh-clay);color:#fff;border-bottom-right-radius:6px}
.chatauthor{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;margin-bottom:4px;color:var(--mh-ink-2)}
.is-me .chatauthor{color:rgba(255,255,255,.74)}
.chatbody{font-size:15px;line-height:1.58;word-wrap:break-word}
.chattime{display:block;font-size:11px;margin-top:6px;color:#A99C91;text-align:right}
.is-me .chattime{color:rgba(255,255,255,.7)}

.chattyping{display:flex;gap:5px;padding:0 28px 14px;background:var(--mh-cream)}
.chattyping span{width:7px;height:7px;border-radius:50%;background:#CFC1B4;
    animation:chatbounce 1.2s infinite}
.chattyping span:nth-child(2){animation-delay:.15s}
.chattyping span:nth-child(3){animation-delay:.3s}
@keyframes chatbounce{0%,60%,100%{transform:translateY(0);opacity:.5}
    30%{transform:translateY(-5px);opacity:1}}

.chatform{display:flex;align-items:flex-end;gap:10px;padding:16px 20px;
    border-top:1px solid var(--mh-line);background:var(--mh-surface)}
.chatform textarea{flex:1;border:1.5px solid var(--mh-line);border-radius:14px;
    padding:12px 16px;font-size:15px;line-height:1.5;resize:none;outline:none;
    max-height:140px;font-family:var(--mh-sans);color:var(--mh-ink);background:var(--mh-surface)}
.chatform textarea:focus{border-color:var(--mh-clay);box-shadow:0 0 0 4px rgba(196,100,60,.13)}
.chatform button{flex:0 0 46px;width:46px;height:46px;border:0;border-radius:50%;
    background:var(--mh-clay);color:#fff;font-size:15px;cursor:pointer;transition:background .15s}
.chatform button:hover{background:var(--mh-clay-dark)}
.chatform button:disabled{background:#D8C9BC;cursor:default}
.chathint{text-align:center;font-size:12.5px;color:var(--mh-ink-2);margin:0;
    padding:0 20px 18px;background:var(--mh-surface)}
.chatclosed{padding:22px;text-align:center;color:var(--mh-ink-2);font-size:14.5px;
    background:var(--mh-surface);border-top:1px solid var(--mh-line)}

@media (max-width:767px){
    .chatwrap{padding:0}
    .chatshell{border-radius:0;border-left:0;border-right:0;min-height:100vh}
    .chatlog{height:auto;flex:1;min-height:58vh}
    .chatbubble{max-width:88%}
    .chathead h1{font-size:17px}
}

/* ==========================================================================
   WAITING FOR A RECRUITER
   With the assistant off, the page goes quiet after the greeting and people
   were closing the tab. These two pieces say, plainly and continuously, that
   somebody is coming.
   ========================================================================== */

.chatwait{
    display:flex; align-items:center; gap:12px;
    margin:0; padding:12px 18px;
    background:#FFF6EE; border-bottom:1px solid #F0DFCE; color:#7A4A2B;
    font-size:13.5px;
}
.chatwait > div{flex:1; min-width:0}
.chatwait strong{display:block; font-size:14px; font-weight:650; color:#5E3720}
.chatwait span{display:block; font-size:12.5px; opacity:.85; margin-top:2px}
.chatwait em{font-style:normal; font-size:12px; opacity:.7; white-space:nowrap; flex:0 0 auto}

/* A dot that keeps moving, so the page never looks frozen. */
.chatwait-dot{
    width:10px; height:10px; border-radius:50%; flex:0 0 10px;
    background:#C4643C; animation:chatwait-pulse 1.5s ease-in-out infinite;
}
@keyframes chatwait-pulse{
    0%,100%{opacity:1; transform:scale(1)}
    50%{opacity:.35; transform:scale(.72)}
}
@media (prefers-reduced-motion:reduce){
    .chatwait-dot{animation:none}
}

/* Once a recruiter has actually spoken, the strip stops nagging. */
.chatwait.is-live{background:#EEF7F0; border-bottom-color:#D7E9DB; color:#2F6B41}
.chatwait.is-live strong{color:#255738}
.chatwait.is-live .chatwait-dot{background:#6E8F73; animation:none}

/* ---- the arrival popup ---- */
.chatwelcome{
    position:fixed; inset:0; z-index:9000;
    background:rgba(42,35,32,.55); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; padding:22px;
    animation:chatwelcome-in .18s ease-out;
}
.chatwelcome.is-gone{opacity:0; transition:opacity .2s ease}
@keyframes chatwelcome-in{from{opacity:0}to{opacity:1}}

.chatwelcome-box{
    background:#fff; border-radius:22px; padding:34px 30px 28px;
    width:100%; max-width:430px; text-align:center;
    box-shadow:0 24px 60px rgba(42,35,32,.28);
}
.chatwelcome-ico{
    width:56px; height:56px; border-radius:50%; margin:0 auto 18px;
    background:#EEF7F0; color:#4E8A5F; font-size:22px;
    display:flex; align-items:center; justify-content:center;
}
.chatwelcome-box h2{
    margin:0 0 12px; font-size:21px; line-height:1.3; color:#2A2320;
    font-family:'Fraunces',Georgia,serif; font-weight:600;
}
.chatwelcome-box p{margin:0 0 14px; font-size:14.5px; line-height:1.6; color:#6E625A}
.chatwelcome-warn{
    background:#FFF6EE; border-radius:12px; padding:11px 14px;
    font-size:13.5px !important; color:#7A4A2B !important; margin-bottom:22px !important;
}
.chatwelcome-warn i{margin-right:6px}
.chatwelcome-btn{
    width:100%; border:0; border-radius:12px; padding:13px;
    background:#C4643C; color:#fff; font-size:15px; font-weight:600; cursor:pointer;
}
.chatwelcome-btn:hover{filter:brightness(.95)}

@media (max-width:520px){
    .chatwelcome-box{padding:28px 22px 24px; border-radius:18px}
    .chatwelcome-box h2{font-size:19px}
    .chatwait{padding:11px 14px; gap:10px}
    .chatwait em{display:none}
}