/* ══════════════════════════════════════════════════════════════
   Remote Hive — Smart Chat Assistant v17.1 (Clean)

   Table of Contents:
   ──────────────────
   1.  Font Import & Reset
   2.  CSS Variables & Root
   3.  Launcher (FAB + Bubble)
   4.  Launcher Animations
   5.  Chat Window
   6.  Header
   7.  Screens (Shared)
   8.  Welcome Screen
   9.  Bento Grid
   10. Bento — EVA Card
   11. Bento — Team Card
   12. Bento — Services Card
   13. Quick Actions
   14. Start Button
   15. EVA Robot Animation
   16. EVA Keyframes
   17. Services Grid Screen
   18. Services List Screen
   19. Hiring Screen
   20. Job Detail Screen
   21. Expert Form Screen
   22. Chat Screen — Layout
   23. Chat Screen — Messages
   24. Chat Screen — Typing
   25. Chat Screen — Footer (Live)
   26. Chat Screen — Footer (Connect)
   27. In-Chat FAQ Buttons
   28. FAQ Tabbed Screen — Tabs
   29. FAQ Tabbed Screen — Accordion
   30. FAQ Tabbed Screen — Footer
   31. Disclaimer Footer
   32. Responsive Breakpoints
   ══════════════════════════════════════════════════════════════ */


/* ──────────────────────────────────────────
   1. Font Import & Reset
   ────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700&display=swap');

.rh-root,
.rh-root *,
.rh-root *::before,
.rh-root *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/* ──────────────────────────────────────────
   2. CSS Variables & Root
   ────────────────────────────────────────── */

.rh-root {
    /* Primary (Blue) */
    --c1:   #0C7DD9;
    --c1d:  #0A66B7;
    --c1l:  #EBF5FF;

    /* Secondary (Teal) */
    --c2:   #0EA5A0;
    --c2d:  #0B8A86;
    --c2l:  #E6F7F6;

    /* Backgrounds */
    --bg:   #FFFFFF;
    --bg2:  #F7F8FA;
    --bg3:  #F1F3F6;

    /* Text */
    --tx:   #111827;
    --tx2:  #4B5563;
    --tx3:  #9CA3AF;

    /* Borders */
    --bdr:  #E5E7EB;
    --bdr2: #D1D5DB;

    /* Shadows */
    --sh: 0 25px 60px rgba(0, 0, 0, .12),
          0 6px 20px rgba(0, 0, 0, .06);

    /* Radii */
    --r:  20px;
    --rs: 12px;
    --rx: 8px;

    /* Font */
    --ff: 'DM Sans', system-ui, -apple-system, sans-serif;

    font-family: var(--ff);
    line-height: 1.5;
    color: var(--tx);
}


/* ──────────────────────────────────────────
   3. Launcher (FAB + Bubble)
   ────────────────────────────────────────── */

.rh-livechat {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 99998;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    font-family: var(--ff);
}

/* Bubble */
.rh-livechat__bubble {
    background: #161622;
    border: 1px solid rgba(14, 165, 160, .2);
    border-radius: 16px 16px 4px 16px;
    padding: 14px 20px;
    max-width: 240px;
    position: relative;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .4),
                0 0 40px rgba(14, 165, 160, .25);
    animation: rh-bubbleIn .6s cubic-bezier(.34, 1.56, .64, 1) both;
    animation-delay: .3s;
}

.rh-livechat__bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    right: 20px;
    width: 16px;
    height: 16px;
    background: #161622;
    border-right: 1px solid rgba(14, 165, 160, .2);
    border-bottom: 1px solid rgba(14, 165, 160, .2);
    transform: rotate(45deg);
    clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

.rh-livechat__bubble-text {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: rgba(255, 255, 255, .9);
}

.rh-livechat__bubble-text strong {
    color: #fff;
    font-weight: 700;
}

.rh-livechat__bubble.is-hidden {
    opacity: 0;
    transform: translateY(8px) scale(.9);
    pointer-events: none;
    transition: all .3s ease;
}

.rh-livechat.open .rh-livechat__bubble { display: none; }

/* FAB Button */
.rh-livechat__btn {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: var(--c2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 4px 20px rgba(14, 165, 160, .35);
    animation: rh-btnIn .5s cubic-bezier(.34, 1.56, .64, 1) both;
    transition: background .2s, box-shadow .2s;
}

.rh-livechat__btn svg {
    width: 28px;
    height: 28px;
    fill: #fff;
    stroke: #fff;
    transition: fill .2s, stroke .2s;
}

.rh-livechat__btn .rh-btn-close { fill: none; display: none; }

/* Hover — only invert colors when chat is CLOSED */
.rh-livechat__btn:hover {
    background: #fff;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
}

.rh-livechat__btn:hover .rh-btn-chat  { fill: var(--c2); }
.rh-livechat__btn:hover .rh-btn-close { stroke: var(--c2); }

/* Focus reset — prevent sticky white after click */
.rh-livechat__btn:focus {
    outline: none;
    background: var(--c2);
    box-shadow: 0 4px 20px rgba(14, 165, 160, .35);
}

.rh-livechat__btn:focus svg {
    fill: #fff;
    stroke: #fff;
}

/* Open state — button stays teal with white X */
.rh-livechat.open .rh-livechat__btn {
    background: var(--c2);
    box-shadow: 0 4px 20px rgba(14, 165, 160, .35);
}

.rh-livechat.open .rh-livechat__btn .rh-btn-chat  { display: none; }
.rh-livechat.open .rh-livechat__btn .rh-btn-close { display: block; stroke: #fff; }

.rh-livechat.open .rh-livechat__btn:hover {
    background: var(--c2d);
    box-shadow: 0 4px 20px rgba(14, 165, 160, .45);
}

.rh-livechat.open .rh-livechat__btn:hover .rh-btn-close { stroke: #fff; }

.rh-livechat.open .rh-livechat__btn svg {
    fill: #fff;
    stroke: #fff;
}

/* Pulse ring */
.rh-livechat__btn::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--c2);
    opacity: 0;
    animation: rh-pulse 2.5s ease-out infinite;
}

/* Online dot */
.rh-livechat__btn::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #22c55e;
    border: 2.5px solid #fff;
    animation: rh-dotPulse 2s ease-in-out infinite;
}

/* Unread badge */
.rh-livechat .rh-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ef4444;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    z-index: 2;
}


/* ──────────────────────────────────────────
   4. Launcher Animations
   ────────────────────────────────────────── */

@keyframes rh-pulse {
    0%   { transform: scale(1);   opacity: .6; }
    100% { transform: scale(1.5); opacity: 0; }
}

@keyframes rh-dotPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

@keyframes rh-bubbleIn {
    0%   { opacity: 0; transform: translateY(12px) scale(.9); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes rh-btnIn {
    0%   { opacity: 0; transform: scale(0) rotate(-90deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}


/* ──────────────────────────────────────────
   5. Chat Window
   ────────────────────────────────────────── */

.rh-win {
    position: fixed;
    bottom: 100px;
    right: 24px;
    z-index: 99999;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 530px;
    max-height: calc(100vh - 130px);
    border-radius: var(--r);
    overflow: hidden;
    box-shadow: var(--sh);
    border: 1px solid var(--bdr);
    display: none;
    flex-direction: column;
    font-family: var(--ff);
    background: var(--bg);
    opacity: 0;
    transform: translateY(16px) scale(.96);
    pointer-events: none;
    transition: opacity .3s cubic-bezier(.16, 1, .3, 1),
                transform .3s cubic-bezier(.16, 1, .3, 1);
}

.rh-win.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}


/* ──────────────────────────────────────────
   6. Header
   ────────────────────────────────────────── */

.rh-hdr {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid var(--bdr);
    background: var(--bg);
    min-height: 56px;
}

.rh-hdr-logo {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rh-hdr-logo img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.rh-hdr-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--tx);
    flex: 1;
}

.rh-hdr-back,
.rh-hdr-x {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--tx3);
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.rh-hdr-back:hover,
.rh-hdr-x:hover {
    color: var(--c1);
    background: var(--c1l);
}

.rh-hdr-back svg { width: 20px; height: 20px; }
.rh-hdr-x svg    { width: 18px; height: 18px; }


/* ──────────────────────────────────────────
   7. Screens (Shared)
   ────────────────────────────────────────── */

.rh-screens {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.rh-screen {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateX(30px);
    pointer-events: none;
    transition: opacity .3s, transform .3s;
}

.rh-screen.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: all;
    position: relative;
    height: 100%;
    flex-shrink: 0;
}


/* ──────────────────────────────────────────
   8. Welcome Screen
   ────────────────────────────────────────── */

.rh-welcome {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rh-welcome-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 16px 14px 14px;
}

.rh-w-greeting {
    padding: 2px 4px 14px;
    font-size: 18px;
    font-weight: 700;
    color: var(--tx);
    line-height: 1.3;
}


/* ──────────────────────────────────────────
   9. Bento Grid
   ────────────────────────────────────────── */

.rh-bento {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    margin-bottom: 14px;
}

.rh-bento-card {
    border-radius: 16px;
    padding: 16px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
    border: none;
    text-align: left;
    font-family: var(--ff);
    display: flex;
    flex-direction: column;
}

.rh-bento-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
}


/* ──────────────────────────────────────────
   10. Bento — EVA Card
   ────────────────────────────────────────── */

.rh-bento-eva {
    grid-row: 1 / 3;
    grid-column: 1;
    background: linear-gradient(160deg, #E8F4FD 0%, #D0EAFC 40%, #B8DEFA 100%);
    min-height: 220px;
    justify-content: space-between;
}

.rh-bento-eva .rh-bento-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .7);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: auto;
    backdrop-filter: blur(4px);
}

.rh-bento-eva .rh-bento-icon svg {
    width: 18px;
    height: 18px;
    color: var(--c1);
    stroke: var(--c1);
}

.rh-bento-eva .rh-bento-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--tx);
    line-height: 1.35;
    margin-top: auto;
}

.rh-eva-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 6px 0;
    pointer-events: none;
}


/* ──────────────────────────────────────────
   11. Bento — Team Card
   ────────────────────────────────────────── */

.rh-bento-team {
    grid-row: 1;
    grid-column: 2;
    background: linear-gradient(135deg, #F3E8F9 0%, #E8D5F5 50%, #DFC6F0 100%);
    min-height: 105px;
    justify-content: flex-start;
    gap: 10px;
}

.rh-bento-team .rh-bento-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.rh-bento-team .rh-bento-icon svg {
    width: 18px;
    height: 18px;
    color: #8B5CF6;
    stroke: #8B5CF6;
}

.rh-bento-team .rh-bento-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tx);
    line-height: 1.3;
}

.rh-bento-team-img {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    opacity: .85;
}


/* ──────────────────────────────────────────
   12. Bento — Services Card
   ────────────────────────────────────────── */

.rh-bento-svc {
    grid-row: 2;
    grid-column: 2;
    background: linear-gradient(135deg, #E6F7F6 0%, #D0F0EE 50%, #C0EBE8 100%);
    min-height: 105px;
    justify-content: flex-start;
    gap: 10px;
}

.rh-bento-svc .rh-bento-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .6);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}

.rh-bento-svc .rh-bento-icon svg {
    width: 18px;
    height: 18px;
    color: var(--c2);
    stroke: var(--c2);
}

.rh-bento-svc .rh-bento-label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--tx);
    line-height: 1.3;
}


/* ──────────────────────────────────────────
   13. Quick Actions
   ────────────────────────────────────────── */

.rh-w-recent-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding: 4px 4px 8px;
}

.rh-w-actions {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rh-w-action {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 8px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--ff);
    font-size: 13px;
    font-weight: 500;
    color: var(--tx);
    text-align: left;
    width: 100%;
    border-radius: 10px;
    transition: background .15s;
}

.rh-w-action:hover { background: var(--bg2); }

.rh-w-action-ic {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--bg2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}

.rh-w-action-ic svg {
    width: 18px;
    height: 18px;
    color: var(--tx3);
    stroke: var(--tx3);
}

.rh-w-action:hover .rh-w-action-ic     { background: var(--c1l); }
.rh-w-action:hover .rh-w-action-ic svg { color: var(--c1); stroke: var(--c1); }


/* ──────────────────────────────────────────
   14. Start Button
   ────────────────────────────────────────── */

.rh-w-start {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--bdr);
    background: var(--bg);
    margin-top: auto;
}

.rh-w-start-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    background: var(--tx);
    color: #fff;
    border: none;
    border-radius: 14px;
    font-family: var(--ff);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

.rh-w-start-btn:hover {
    background: #000;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
}

.rh-w-start-btn span { flex: 1; }
.rh-w-start-btn svg  { width: 20px; height: 20px; flex-shrink: 0; }


/* ──────────────────────────────────────────
   15. EVA Robot Animation
   ────────────────────────────────────────── */

.rh-eva-viewport {
    perspective: 600px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, .85);
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .15);
}

.rh-eva {
    --EVA-ROTATION-DURATION: 4s;
    transform-style: preserve-3d;
    animation: rh-evaRotate var(--EVA-ROTATION-DURATION) linear infinite alternate;
}

.rh-eva-head {
    position: relative;
    width: 30px;
    height: 20px;
    border-radius: 48% 53% 45% 55% / 79% 79% 20% 22%;
    background: linear-gradient(to right, #fff 45%, #aaa);
}

.rh-eva-eyes {
    width: 23px;
    height: 14px;
    position: relative;
    left: 50%;
    top: 55%;
    border-radius: 45% 53% 45% 48% / 62% 59% 35% 34%;
    background-color: #0c203c;
    box-shadow: 0 0 1px 1px #fff, inset 0 0 0 1px #000;
    transform: translate(-50%, -50%);
    animation: rh-evaMove var(--EVA-ROTATION-DURATION) linear infinite alternate;
}

.rh-eva-eye {
    width: 6px;
    height: 8px;
    position: absolute;
    border-radius: 50%;
}

.rh-eva-eye:first-child {
    left: 4px;
    top: 50%;
    background: repeating-linear-gradient(65deg, #9bdaeb 0px, #9bdaeb 1px, #fff 2px);
    box-shadow: inset 0 0 3px #04b8d5, 0 0 8px 1px #0bdaeb;
    transform: translate(0, -50%) rotate(-65deg);
}

.rh-eva-eye:nth-child(2) {
    right: 4px;
    top: 50%;
    background: repeating-linear-gradient(-65deg, #9bdaeb 0px, #9bdaeb 1px, #fff 2px);
    box-shadow: inset 0 0 3px #04b8d5, 0 0 8px 1px #0bdaeb;
    transform: translate(0, -50%) rotate(65deg);
}

.rh-eva-body {
    width: 30px;
    height: 40px;
    position: relative;
    margin-top: 1px;
    border-radius: 47% 53% 45% 55% / 12% 9% 90% 88%;
    background: linear-gradient(to right, #fff 35%, #aaa);
}

.rh-eva-hand {
    position: absolute;
    left: -7px;
    top: 4px;
    width: 10px;
    height: 27px;
    border-radius: 40%;
    background: linear-gradient(to left, #fff 15%, #aaa);
    box-shadow: 2px 0 3px rgba(0, 0, 0, .25);
    transform: rotateY(55deg) rotateZ(10deg);
}

.rh-eva-hand:first-child {
    animation: rh-evaHandL var(--EVA-ROTATION-DURATION) linear infinite alternate;
}

.rh-eva-hand:nth-child(2) {
    left: auto;
    right: -7px;
    background: linear-gradient(to right, #fff 15%, #aaa);
    transform: rotateY(55deg) rotateZ(-10deg);
    animation: rh-evaHandR var(--EVA-ROTATION-DURATION) linear infinite alternate;
}

.rh-eva-scanner {
    width: 0;
    height: 0;
    position: absolute;
    left: 60%;
    top: 10%;
    border-top: 90px solid #9bdaeb;
    border-left: 120px solid transparent;
    border-right: 120px solid transparent;
    transform-origin: top left;
    mask: linear-gradient(to right, #fff, transparent 35%);
    animation: rh-evaGlow 2s cubic-bezier(.86, 0, .07, 1) infinite;
}

.rh-eva-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    left: 60%;
    top: 10%;
    background: #9bdaeb;
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .5);
    animation: rh-evaMove var(--EVA-ROTATION-DURATION) linear infinite;
}


/* ──────────────────────────────────────────
   16. EVA Keyframes
   ────────────────────────────────────────── */

@keyframes rh-evaRotate {
    from { transform: rotateY(0); }
    to   { transform: rotateY(25deg); }
}

@keyframes rh-evaMove {
    from { transform: translate(-50%, -50%); }
    to   { transform: translate(-40%, -50%); }
}

@keyframes rh-evaHandL {
    from { transform: rotateY(55deg) rotateZ(10deg); }
    to   { transform: rotateY(30deg) rotateZ(10deg); }
}

@keyframes rh-evaHandR {
    from { transform: rotateY(55deg) rotateZ(-10deg); }
    to   { transform: rotateY(70deg) rotateZ(-10deg); }
}

@keyframes rh-evaGlow {
    from { opacity: 0; }
    20%  { opacity: 1; }
    45%  { transform: rotate(-25deg); }
    75%  { transform: rotate(5deg); }
    100% { opacity: 0; }
}


/* ──────────────────────────────────────────
   17. Services Grid Screen
   ────────────────────────────────────────── */

.rh-svc-grid-wrap {
    padding: 16px 14px;
    overflow-y: auto;
}

.rh-svc-grid-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 0 2px 12px;
}

.rh-svc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rh-svc-gcard {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 14px;
    background: var(--bg);
    border: 1.5px solid var(--bdr);
    border-radius: 14px;
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    color: var(--tx);
    font-family: var(--ff);
    text-align: left;
}

.rh-svc-gcard:hover {
    border-color: var(--c2);
    background: var(--c2l);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(14, 165, 160, .12);
}

.rh-svc-gcard-ic {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--bg2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    color: var(--c2);
}

.rh-svc-gcard-ic svg                  { width: 20px; height: 20px; }
.rh-svc-gcard:hover .rh-svc-gcard-ic  { background: var(--c2); color: #fff; }
.rh-svc-gcard-name                     { font-size: 12.5px; font-weight: 700; color: var(--tx); line-height: 1.3; }
.rh-svc-gcard-desc                     { font-size: 10.5px; color: var(--tx3); line-height: 1.4; }


/* ──────────────────────────────────────────
   18. Services List Screen
   ────────────────────────────────────────── */

.rh-svc-list,
.rh-hire-list {
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rh-svc-title,
.rh-hire-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .6px;
    padding: 0 4px 8px;
}

.rh-svc-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1.5px solid var(--bdr);
    border-radius: var(--rs);
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
    color: var(--tx);
}

.rh-svc-card:hover {
    border-color: var(--c1);
    background: var(--c1l);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(12, 125, 217, .1);
}

.rh-svc-card-ic {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--bg3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    color: var(--c1);
}

.rh-svc-card:hover .rh-svc-card-ic { background: var(--c1); color: #fff; }
.rh-svc-card-ic svg                 { width: 20px; height: 20px; }
.rh-svc-card-info                   { flex: 1; min-width: 0; }
.rh-svc-card-name                   { font-size: 13.5px; font-weight: 600; color: var(--tx); }
.rh-svc-card-desc                   { font-size: 11.5px; color: var(--tx3); margin-top: 1px; }

.rh-svc-card-arr {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--tx3);
    opacity: 0;
    transform: translateX(-4px);
    transition: all .2s;
}

.rh-svc-card:hover .rh-svc-card-arr { opacity: 1; transform: translateX(0); color: var(--c1); }


/* ──────────────────────────────────────────
   19. Hiring Screen
   ────────────────────────────────────────── */

.rh-hire-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg);
    border: 1.5px solid var(--bdr);
    border-radius: var(--rs);
    transition: all .2s;
    position: relative;
}

.rh-hire-card.open   { cursor: pointer; }
.rh-hire-card.closed { opacity: .5; cursor: default; }

.rh-hire-card.open:hover {
    border-color: var(--c2);
    background: var(--c2l);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(14, 165, 160, .1);
}

.rh-hire-card-ic {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    background: var(--bg3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
}

.rh-hire-card-ic svg                     { width: 20px; height: 20px; }
.rh-hire-card.open .rh-hire-card-ic      { color: var(--c2); }
.rh-hire-card.open:hover .rh-hire-card-ic { background: var(--c2); color: #fff; }
.rh-hire-card.closed .rh-hire-card-ic    { color: var(--tx3); }

.rh-hire-card-info { flex: 1; min-width: 0; }
.rh-hire-card-name { font-size: 13.5px; font-weight: 600; color: var(--tx); }

.rh-hire-card-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    margin-left: 6px;
}

.rh-hire-card-tag.hiring { background: var(--c2l); color: var(--c2d); }
.rh-hire-card-tag.closed { background: var(--bg3); color: var(--tx3); }

.rh-hire-card-arr {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rh-hire-card-arr svg { width: 16px; height: 16px; }

.rh-hire-card.open .rh-hire-card-arr {
    color: var(--tx3);
    opacity: 0;
    transform: translateX(-4px);
    transition: all .2s;
}

.rh-hire-card.open:hover .rh-hire-card-arr { opacity: 1; transform: translateX(0); color: var(--c2); }
.rh-hire-card.closed .rh-hire-card-arr     { color: var(--tx3); }


/* ──────────────────────────────────────────
   20. Job Detail Screen
   ────────────────────────────────────────── */

.rh-job-detail { padding: 24px 20px; }

.rh-job-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--c2l);
    color: var(--c2d);
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.rh-job-title   { font-size: 19px; font-weight: 700; color: var(--tx); margin-bottom: 8px; }
.rh-job-desc    { font-size: 13.5px; color: var(--tx2); line-height: 1.6; margin-bottom: 20px; }
.rh-job-section { font-size: 12px; font-weight: 700; color: var(--tx3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 10px; }

.rh-job-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.rh-job-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: var(--tx2);
    line-height: 1.5;
}

.rh-job-item-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c2);
    flex-shrink: 0;
    margin-top: 7px;
}

.rh-job-apply {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    background: var(--c2);
    color: #fff;
    border: none;
    border-radius: var(--rs);
    font-size: 14px;
    font-weight: 600;
    font-family: var(--ff);
    cursor: pointer;
    transition: all .2s;
    text-decoration: none;
}

.rh-job-apply:hover {
    background: var(--c2d);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(14, 165, 160, .3);
}

.rh-job-apply svg { width: 18px; height: 18px; fill: #fff; }


/* ──────────────────────────────────────────
   21. Expert Form Screen
   ────────────────────────────────────────── */

.rh-expert-form {
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
}

.rh-expert-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--c1l);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--c1);
}

.rh-expert-icon svg { width: 24px; height: 24px; }
.rh-expert-h        { font-size: 18px; font-weight: 700; color: var(--tx); margin-bottom: 4px; }
.rh-expert-p        { font-size: 13px; color: var(--tx2); margin-bottom: 24px; }

/* Form fields */
.rh-fg {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 14px;
}

.rh-fg label {
    font-size: 11px;
    font-weight: 600;
    color: var(--tx3);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.rh-fg input {
    border: 1.5px solid var(--bdr);
    border-radius: var(--rx);
    padding: 11px 14px;
    font-size: 14px;
    font-family: var(--ff);
    color: var(--tx);
    background: var(--bg2);
    outline: none;
    transition: all .2s;
}

.rh-fg input:focus {
    border-color: var(--c1);
    box-shadow: 0 0 0 3px rgba(12, 125, 217, .08);
    background: var(--bg);
}

.rh-fg input::placeholder { color: var(--tx3); }
.rh-fg input.err          { border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, .06); }

.rh-ferr {
    font-size: 10.5px;
    color: #EF4444;
    display: none;
    margin-top: 1px;
}

.rh-fg.has-error .rh-ferr { display: block; }

/* Submit */
.rh-expert-btn {
    background: var(--c1);
    color: #fff;
    border: none;
    border-radius: var(--rx);
    padding: 13px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: var(--ff);
    cursor: pointer;
    transition: all .2s;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.rh-expert-btn:hover {
    background: var(--c1d);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(12, 125, 217, .25);
}

.rh-expert-btn svg { width: 16px; height: 16px; }


/* ──────────────────────────────────────────
   22. Chat Screen — Layout
   ────────────────────────────────────────── */

.rh-chat-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rh-chat-status {
    padding: 8px 16px;
    background: var(--c2l);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--c2d);
}

.rh-chat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--c2);
    animation: rh-dotPulse2 2s infinite;
}

@keyframes rh-dotPulse2 {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .5; transform: scale(1.3); }
}

.rh-chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: var(--bg2);
    scroll-behavior: smooth;
}

.rh-chat-body::-webkit-scrollbar       { width: 4px; }
.rh-chat-body::-webkit-scrollbar-track  { background: transparent; }
.rh-chat-body::-webkit-scrollbar-thumb  { background: var(--bdr2); border-radius: 10px; }


/* ──────────────────────────────────────────
   23. Chat Screen — Messages
   ────────────────────────────────────────── */

.rh-row {
    display: flex;
    margin-bottom: 2px;
    animation: rh-up .3s cubic-bezier(.16, 1, .3, 1);
}

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

.rh-row.in  { justify-content: flex-start; }
.rh-row.out { justify-content: flex-end; }

.rh-bub {
    max-width: 84%;
    padding: 10px 14px;
    border-radius: var(--rs);
    line-height: 1.55;
    font-size: 13.5px;
    word-wrap: break-word;
}

.rh-row.in .rh-bub {
    background: var(--bg);
    color: var(--tx);
    border: 1px solid var(--bdr);
    border-top-left-radius: 4px;
}

.rh-row.out .rh-bub {
    background: var(--c1);
    color: #fff;
    border-top-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(12, 125, 217, .15);
}

.rh-time            { font-size: 10px; color: var(--tx3); text-align: right; margin-top: 3px; }
.rh-row.out .rh-time { color: rgba(255, 255, 255, .5); }

.rh-agent-tag {
    font-size: 10px;
    color: var(--c2);
    font-weight: 700;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rh-agent-tag::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--c2);
    flex-shrink: 0;
}

.rh-sys {
    text-align: center;
    font-size: 11px;
    color: var(--tx3);
    padding: 6px 0;
}


/* ──────────────────────────────────────────
   24. Chat Screen — Typing
   ────────────────────────────────────────── */

.rh-typing {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 12px 16px;
    background: var(--bg);
    border-radius: var(--rs);
    border-top-left-radius: 4px;
    max-width: 68px;
    border: 1px solid var(--bdr);
}

.rh-tdot {
    width: 6px;
    height: 6px;
    background: var(--c2);
    border-radius: 50%;
    animation: rh-bounce 1.2s ease-in-out infinite;
}

.rh-tdot:nth-child(2) { animation-delay: .15s; }
.rh-tdot:nth-child(3) { animation-delay: .3s; }

@keyframes rh-bounce {
    0%, 60%, 100% { transform: translateY(0);   opacity: .3; }
    30%           { transform: translateY(-5px); opacity: 1; }
}


/* ──────────────────────────────────────────
   25. Chat Screen — Footer (Live)
   ────────────────────────────────────────── */

.rh-chat-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--bg);
    border-top: 1px solid var(--bdr);
}

.rh-chat-inp-w {
    flex: 1;
    background: var(--bg2);
    border-radius: 22px;
    padding: 10px 16px;
    border: 1.5px solid var(--bdr);
    transition: border-color .2s;
}

.rh-chat-inp-w:focus-within { border-color: var(--c1); }

.rh-chat-inp {
    width: 100%;
    border: none;
    outline: none;
    font-size: 13.5px;
    font-family: var(--ff);
    color: var(--tx);
    background: transparent;
}

.rh-chat-inp::placeholder { color: var(--tx3); }

.rh-chat-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--c1);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
    flex-shrink: 0;
    color: #fff;
}

.rh-chat-send:hover { background: var(--c1d); transform: scale(1.06); }
.rh-chat-send svg   { width: 18px; height: 18px; }


/* ──────────────────────────────────────────
   26. Chat Screen — Footer (Connect)
   ────────────────────────────────────────── */

.rh-chat-connect {
    padding: 10px 14px;
    background: var(--bg);
    border-top: 1px solid var(--bdr);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rh-chat-connect-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    background: var(--c2);
    color: #fff;
    border: none;
    border-radius: var(--rs);
    font-family: var(--ff);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

.rh-chat-connect-btn:hover {
    background: var(--c2d);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(14, 165, 160, .25);
}

.rh-chat-connect-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.rh-chat-connect-sub {
    font-size: 10.5px;
    color: var(--tx3);
    text-align: center;
    line-height: 1.4;
}


/* ──────────────────────────────────────────
   27. In-Chat FAQ Buttons
   ────────────────────────────────────────── */

.rh-cfaq-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 4px 0;
}

.rh-cfaq-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: var(--bg);
    border: 1.5px solid var(--c1);
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--c1);
    cursor: pointer;
    transition: all .2s;
    font-family: var(--ff);
}

.rh-cfaq-btn:hover {
    background: var(--c1l);
    color: var(--c1);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(12, 125, 217, .1);
}


/* ──────────────────────────────────────────
   28. FAQ Tabbed Screen — Tabs
   ────────────────────────────────────────── */

.rh-cfaq-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.rh-cfaq-tabs {
    display: flex;
    gap: 6px;
    padding: 12px 14px;
    overflow-x: auto;
    border-bottom: 1px solid var(--bdr);
    background: var(--bg);
    flex-shrink: 0;
    scrollbar-width: none;
    scroll-behavior: smooth;
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
    mask-image: linear-gradient(to right, black 88%, transparent 100%);
}

.rh-cfaq-tabs::-webkit-scrollbar { display: none; }

.rh-cfaq-tab {
    flex-shrink: 0;
    padding: 7px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--bdr);
    background: var(--bg);
    font-family: var(--ff);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--tx2);
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
}

.rh-cfaq-tab:hover  { border-color: var(--c1); color: var(--c1); }
.rh-cfaq-tab.active { background: var(--c1); color: #fff; border-color: var(--c1); }


/* ──────────────────────────────────────────
   29. FAQ Tabbed Screen — Accordion
   ────────────────────────────────────────── */

.rh-cfaq-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rh-cfaq-body::-webkit-scrollbar       { width: 4px; }
.rh-cfaq-body::-webkit-scrollbar-track  { background: transparent; }
.rh-cfaq-body::-webkit-scrollbar-thumb  { background: var(--bdr2); border-radius: 10px; }

/* Item */
.rh-cfaq-item {
    border: 1.5px solid var(--bdr);
    border-radius: 14px;
    transition: border-color .25s ease,
                box-shadow .25s ease,
                background .25s ease;
    background: var(--bg);
}

.rh-cfaq-item:hover {
    border-color: var(--bdr2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.rh-cfaq-item.open {
    border-color: var(--bdr2);
    background: var(--bg);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}

/* Question button */
.rh-cfaq-q {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--tx);
    background: transparent;
    transition: background .15s;
    border: none;
    width: 100%;
    text-align: left;
    font-family: var(--ff);
    line-height: 1.45;
    border-radius: 14px;
}

.rh-cfaq-q:hover              { background: rgba(0, 0, 0, .02); }
.rh-cfaq-item.open .rh-cfaq-q { color: var(--tx); }

/* Chevron icon */
.rh-cfaq-q-icon {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--bg2);
    transition: all .3s cubic-bezier(.4, 0, .2, 1);
    color: var(--tx3);
}

.rh-cfaq-item:hover .rh-cfaq-q-icon { background: var(--bdr); color: var(--tx2); }
.rh-cfaq-item.open .rh-cfaq-q-icon  { background: var(--c1); color: #fff; transform: rotate(180deg); }

.rh-cfaq-q-icon svg { width: 14px; height: 14px; stroke-width: 2.5; }
.rh-cfaq-q-text     { flex: 1; }

/* Answer wrapper (max-height accordion) */
.rh-cfaq-a-wrap {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s cubic-bezier(.4, 0, .2, 1);
}

.rh-cfaq-item.open .rh-cfaq-a-wrap {
    max-height: 500px;
    transition: max-height .5s cubic-bezier(.4, 0, .2, 1);
}

/* Answer text */
.rh-cfaq-a-inner {
    padding: 0 16px 16px 56px;
    font-size: 13px;
    color: var(--tx2);
    line-height: 1.7;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity .25s ease .1s,
                transform .25s ease .1s;
}

.rh-cfaq-item.open .rh-cfaq-a-inner {
    opacity: 1;
    transform: translateY(0);
    color: var(--tx2);
}


/* ──────────────────────────────────────────
   30. FAQ Tabbed Screen — Footer
   ────────────────────────────────────────── */

.rh-cfaq-footer {
    padding: 12px 14px;
    border-top: 1px solid var(--bdr);
    background: var(--bg);
    flex-shrink: 0;
}

.rh-cfaq-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 20px;
    background: var(--c2);
    color: #fff;
    border: none;
    border-radius: var(--rs);
    font-family: var(--ff);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
}

.rh-cfaq-cta:hover {
    background: var(--c2d);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(14, 165, 160, .25);
}

.rh-cfaq-cta svg { width: 18px; height: 18px; stroke: #fff; flex-shrink: 0; }


/* ──────────────────────────────────────────
   31. Disclaimer Footer
   ────────────────────────────────────────── */

.rh-discl {
    padding: 6px 16px 10px;
    text-align: center;
    font-size: 10px;
    color: var(--tx3);
    border-top: 1px solid var(--bdr);
    background: var(--bg);
}


/* ──────────────────────────────────────────
   32. Responsive Breakpoints
   ────────────────────────────────────────── */

/* Short screens */
@media (max-height: 700px) {
    .rh-win {
        height: 480px;
        max-height: calc(100vh - 110px);
    }
}

@media (max-height: 600px) {
    .rh-win {
        height: 420px;
        max-height: calc(100vh - 100px);
    }
}

/* Mobile — fullscreen */
@media (max-width: 480px) {
    .rh-win {
        bottom: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .rh-livechat              { bottom: 20px; right: 16px; }
    .rh-livechat__bubble       { max-width: 200px; padding: 12px 16px; }
    .rh-livechat__bubble-text  { font-size: 13px; }
    .rh-livechat__btn          { width: 56px; height: 56px; }
    .rh-bento                  { gap: 8px; }
    .rh-bento-card             { padding: 14px; }
    .rh-bento-eva              { min-height: 180px; }
}

/* Tablet */
@media (min-width: 481px) and (max-width: 768px) {
    .rh-win {
        width: 370px;
        height: 520px;
    }
}

/* Large screens */
@media (min-width: 1440px) {
    .rh-win {
        width: 400px;
        height: 560px;
    }
}