/* ============================================================================
   Floating CRM assistant - launcher robot + chat panel.
   Everything is scoped under #fosAi* / .fosai-* so nothing here can leak into
   the Bootstrap 2 styles the rest of the app relies on.
   ========================================================================== */

#fosAiRoot, #fosAiRoot * { box-sizing: border-box; }

#fosAiRoot {
    position: fixed;
    right: 24px;
    bottom: 22px;
    z-index: 100000;
    font-family: 'Raleway', 'Segoe UI', Arial, sans-serif;
}

/* ------------------------------------------------------------------ launcher */
#fosAiLauncher {
    position: relative;
    width: 78px;
    height: 78px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* soft halo that breathes so the robot is noticed without being loud */
#fosAiLauncher::before {
    content: '';
    position: absolute;
    left: 6px; top: 8px; right: 6px; bottom: 4px;
    border-radius: 50% !important;
    background: radial-gradient(circle at 50% 55%, rgba(15,157,157,.35), rgba(15,157,157,0) 68%);
    animation: fosai-halo 3.2s ease-in-out infinite;
}

/* ground shadow, kept separate so it can squash while the robot floats */
#fosAiLauncher .fosai-shadow {
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 42px;
    height: 8px;
    margin-left: -21px;
    border-radius: 50% !important;
    background: rgba(16, 30, 54, .22);
    filter: blur(2px);
    animation: fosai-shadow 3s ease-in-out infinite;
}

#fosAiLauncher .fosai-bot {
    position: relative;
    display: block;
    width: 78px;
    height: 78px;
    animation: fosai-float 3s ease-in-out infinite;
    transform-origin: 50% 90%;
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

#fosAiLauncher:hover .fosai-bot { transform: scale(1.08) rotate(-4deg); }
#fosAiLauncher:active .fosai-bot { transform: scale(.96); }

/* eyelids: thin bars that drop over the eyes to blink */
#fosAiRoot .fosai-lid {
    transform-box: fill-box;
    transform-origin: center;
    animation: fosai-blink 5.4s infinite;
}

#fosAiRoot .fosai-antenna-tip { animation: fosai-antenna 1.8s ease-in-out infinite; transform-origin: center; }
#fosAiRoot .fosai-arm { transform-box: fill-box; transform-origin: 90% 10%; animation: fosai-wave 6s ease-in-out infinite; }

/* little "AI" badge */
#fosAiLauncher .fosai-badge {
    position: absolute;
    top: 2px;
    right: 0;
    background: linear-gradient(140deg, #ff8a3d, #ff5b6e);
    color: #fff;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .6px;
    padding: 2px 6px;
    border-radius: 9px !important;
    box-shadow: 0 3px 8px rgba(255, 91, 110, .45);
    border: 2px solid #fff;
    line-height: 1;
}

/* ------------------------------------------------------------- tip bubble */
#fosAiTip {
    position: absolute;
    right: 84px;
    bottom: 24px;
    width: 236px;
    background: #fff;
    color: #33415c;
    font-size: 12.5px;
    line-height: 1.5;
    padding: 12px 30px 12px 14px;
    border-radius: 14px 14px 4px 14px !important;
    box-shadow: 0 12px 30px rgba(16, 30, 54, .20);
    border: 1px solid #e7eaef;
    opacity: 0;
    transform: translateY(8px) scale(.94);
    transform-origin: bottom right;
    pointer-events: none;
    transition: opacity .3s ease, transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
#fosAiTip.fosai-show { opacity: 1; transform: none; pointer-events: auto; }
#fosAiTip .fosai-tip-close {
    position: absolute; top: 6px; right: 8px;
    border: 0; background: transparent; color: #9aa6b8;
    font-size: 15px; line-height: 1; cursor: pointer; padding: 2px 4px;
}
#fosAiTip .fosai-tip-close:hover { color: #33415c; }

/* ================================================================== panel */
#fosAiPanel {
    position: absolute;
    right: 0;
    bottom: 94px;
    width: 384px;
    max-width: calc(100vw - 32px);
    height: 552px;
    max-height: calc(100vh - 140px);
    background: #fff;
    border-radius: 22px !important;
    box-shadow: 0 30px 70px rgba(11, 22, 44, .30), 0 3px 10px rgba(11, 22, 44, .12);
    display: none;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
}
#fosAiPanel.fosai-open { display: flex; animation: fosai-pop .3s cubic-bezier(.34, 1.4, .64, 1); }

/* ---------------------------------------------------------------- header */
#fosAiPanel .fosai-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px 16px 17px;
    background: linear-gradient(125deg, #0fa5a5 0%, #1683bd 55%, #2f66c9 100%);
    color: #fff;
    flex: 0 0 auto;
    overflow: hidden;
    /* lifts the header above the conversation instead of butting straight into it */
    box-shadow: 0 6px 18px rgba(10, 60, 92, .22);
    z-index: 2;
}
/* soft light sweep so the header does not read as a flat block */
#fosAiPanel .fosai-head::after {
    content: '';
    position: absolute;
    top: -70%; left: -20%;
    width: 55%; height: 240%;
    background: linear-gradient(100deg, rgba(255,255,255,0), rgba(255,255,255,.22), rgba(255,255,255,0));
    transform: rotate(12deg);
    animation: fosai-sheen 7s ease-in-out infinite;
}
#fosAiPanel .fosai-head > * { position: relative; z-index: 1; }

#fosAiPanel .fosai-ava {
    flex: 0 0 42px;
    width: 42px; height: 42px;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .18);
    border: 1.5px solid rgba(255, 255, 255, .45);
    box-shadow: 0 4px 14px rgba(4, 30, 52, .22), inset 0 1px 0 rgba(255,255,255,.35);
    display: flex; align-items: center; justify-content: center;
    backdrop-filter: blur(2px);
}
#fosAiPanel .fosai-ava svg { width: 27px; height: 27px; display: block; }

#fosAiPanel .fosai-title {
    font-weight: 800; font-size: 15.5px; line-height: 1.25; letter-spacing: .2px;
    text-shadow: 0 1px 2px rgba(4, 30, 52, .18);
}
#fosAiPanel .fosai-sub {
    font-size: 11px; opacity: .92; display: flex; align-items: center; gap: 6px; margin-top: 2px;
}
#fosAiPanel .fosai-dot {
    width: 7px; height: 7px; border-radius: 50% !important; background: #7ef2b0;
    box-shadow: 0 0 0 0 rgba(126, 242, 176, .8); animation: fosai-pulse 2s infinite;
}
#fosAiPanel .fosai-spacer { margin-left: auto; }
#fosAiPanel .fosai-head button {
    border: 0; background: rgba(255, 255, 255, .16); color: #fff;
    width: 30px; height: 30px; border-radius: 10px !important; cursor: pointer;
    font-size: 16px; line-height: 1; padding: 0;
    transition: background .15s ease, transform .15s ease;
}
#fosAiPanel .fosai-head button:hover { background: rgba(255, 255, 255, .34); }
#fosAiPanel .fosai-head #fosAiClose:hover { transform: rotate(90deg); }
#fosAiPanel .fosai-head #fosAiClear { font-size: 13px; }
#fosAiPanel .fosai-head #fosAiClear:hover { transform: translateY(-1px); }

/* ------------------------------------------------------------------- log */
#fosAiLog {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px 14px 8px;
    /* faint dot grid over a cool gradient - gives the empty space some texture */
    background:
        radial-gradient(rgba(15, 157, 157, .07) 1px, transparent 1px) 0 0 / 18px 18px,
        linear-gradient(180deg, #f8fafc 0%, #eef3fa 100%);
}
#fosAiLog::-webkit-scrollbar { width: 8px; }
#fosAiLog::-webkit-scrollbar-track { background: transparent; }
#fosAiLog::-webkit-scrollbar-thumb { background: #ccd6e4; border-radius: 8px !important; border: 2px solid transparent; background-clip: content-box; }
#fosAiLog::-webkit-scrollbar-thumb:hover { background: #a9b8cc; background-clip: content-box; }

/* a row = optional avatar + the bubble */
#fosAiRoot .fosai-row {
    display: flex; align-items: flex-end; gap: 8px;
    margin-bottom: 12px;
    animation: fosai-in .3s ease both;
}
#fosAiRoot .fosai-row-mine { justify-content: flex-end; }

#fosAiRoot .fosai-mini {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50% !important;
    background: linear-gradient(135deg, #12b3b3, #1c7fb8);
    box-shadow: 0 3px 8px rgba(15, 157, 157, .35);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4.5' y='7.5' width='15' height='12' rx='5' fill='white'/%3E%3Ccircle cx='9.6' cy='13.4' r='1.7' fill='%230f8f9d'/%3E%3Ccircle cx='14.4' cy='13.4' r='1.7' fill='%230f8f9d'/%3E%3Crect x='11.2' y='3.2' width='1.6' height='4.2' rx='.8' fill='white'/%3E%3Ccircle cx='12' cy='2.9' r='1.7' fill='white'/%3E%3C/svg%3E"),
        linear-gradient(135deg, #12b3b3, #1c7fb8);
    background-size: 20px 20px, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
}

#fosAiRoot .fosai-msg {
    max-width: 84%;
    padding: 11px 14px;
    border-radius: 16px !important;
    font-size: 13.2px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-wrap: break-word;
}
#fosAiRoot .fosai-bot-msg {
    background: #fff; color: #2c3a52;
    border: 1px solid #e4ebf4; border-bottom-left-radius: 5px !important;
    box-shadow: 0 3px 12px rgba(16, 30, 54, .07);
}
#fosAiRoot .fosai-user-msg {
    background: linear-gradient(135deg, #12a5a5, #1c7fb8);
    color: #fff; border-bottom-right-radius: 5px !important;
    box-shadow: 0 4px 14px rgba(21, 130, 170, .30);
}
#fosAiRoot .fosai-msg b { font-weight: 800; }
#fosAiRoot .fosai-bot-msg b { color: #0e7d84; }

/* ------------------------------------------------- action buttons offered */
#fosAiRoot .fosai-act-wrap { margin: -4px 0 14px 34px; max-width: calc(84% + 6px); }
#fosAiRoot .fosai-act {
    position: relative;
    display: flex; align-items: center; gap: 10px;
    width: 100%; margin-bottom: 8px; padding: 11px 13px;
    background: linear-gradient(135deg, #ffffff, #f4fbfb);
    border: 1px solid #cbe7e7;
    border-radius: 13px !important;
    color: #0e7d84; font-size: 12.8px; font-weight: 700;
    text-align: left; text-decoration: none; cursor: pointer;
    box-shadow: 0 2px 8px rgba(16, 30, 54, .06);
    overflow: hidden;
    transition: transform .15s cubic-bezier(.34,1.4,.64,1), box-shadow .18s ease, border-color .18s ease;
}
/* accent rail on the left edge */
#fosAiRoot .fosai-act::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
    background: linear-gradient(180deg, #12b3b3, #1c7fb8);
}
#fosAiRoot .fosai-act > i { margin-left: 3px; font-size: 13px; }
#fosAiRoot .fosai-act:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 157, 157, .22);
    border-color: #8ed4d6; color: #0b6167; text-decoration: none;
}
#fosAiRoot .fosai-act .fosai-act-note {
    display: block; font-weight: 600; font-size: 11px; color: #7a8aa2; margin-top: 3px;
}
/* the first action is the recommended one - make it read that way */
#fosAiRoot .fosai-act-primary {
    background: linear-gradient(135deg, #0fa5a5, #1c7fb8);
    border-color: transparent; color: #fff;
    box-shadow: 0 6px 16px rgba(15, 157, 157, .32);
}
#fosAiRoot .fosai-act-primary::before { background: rgba(255,255,255,.5); }
#fosAiRoot .fosai-act-primary .fosai-act-note { color: rgba(255,255,255,.85); }
#fosAiRoot .fosai-act-primary:hover { color: #fff; box-shadow: 0 10px 24px rgba(15, 157, 157, .42); }

/* a full report menu: denser, and scrolls on its own instead of flooding the panel */
#fosAiRoot .fosai-act-list { max-height: 264px; overflow-y: auto; padding-right: 5px; }
#fosAiRoot .fosai-act-list .fosai-act { padding: 9px 12px; font-size: 12.2px; margin-bottom: 6px; }
#fosAiRoot .fosai-act-list::-webkit-scrollbar { width: 6px; }
#fosAiRoot .fosai-act-list::-webkit-scrollbar-thumb { background: #cbd6e6; border-radius: 6px !important; }

/* ------------------------------------------------------ suggestion chips */
#fosAiRoot .fosai-chips { margin: 2px 0 14px 34px; }
#fosAiRoot .fosai-chips-label {
    font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase;
    color: #94a3b8; margin-bottom: 7px;
}
#fosAiRoot .fosai-chip {
    display: inline-block;
    border: 1px solid #dbe4f0; background: rgba(255,255,255,.9); color: #4d5f7c;
    border-radius: 999px !important; padding: 7px 13px; margin: 0 6px 6px 0;
    font-size: 11.8px; font-weight: 600; font-family: inherit; cursor: pointer;
    transition: all .16s ease;
}
#fosAiRoot .fosai-chip:hover {
    border-color: #12b3b3; color: #0e7d84; background: #fff;
    transform: translateY(-1px); box-shadow: 0 5px 14px rgba(15, 157, 157, .18);
}

/* ------------------------------------------------------ typing indicator */
#fosAiRoot .fosai-typing { display: inline-flex; gap: 4px; padding: 3px 2px; }
#fosAiRoot .fosai-typing i {
    width: 6px; height: 6px; border-radius: 50% !important; background: #9fb1c9;
    animation: fosai-dot 1.2s infinite;
}
#fosAiRoot .fosai-typing i:nth-child(2) { animation-delay: .15s; }
#fosAiRoot .fosai-typing i:nth-child(3) { animation-delay: .3s; }

/* ------------------------------------------------------------- composer */
#fosAiForm {
    flex: 0 0 auto; display: flex; gap: 9px; padding: 12px 13px 10px;
    background: #fff; border-top: 1px solid #eaeff6; margin: 0;
}
#fosAiInput {
    flex: 1 1 auto; height: 42px; margin: 0; padding: 0 16px;
    border: 1.5px solid #e0e7f1; border-radius: 999px !important; background: #f6f9fc;
    font-size: 13px; color: #2c3a52; outline: none; box-shadow: none;
    font-family: inherit; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
#fosAiInput::placeholder { color: #9fadc2; }
#fosAiInput:focus {
    border-color: #12b3b3; background: #fff;
    box-shadow: 0 0 0 3.5px rgba(18, 179, 179, .13);
}
#fosAiSend {
    flex: 0 0 42px; width: 42px; height: 42px; border: 0; border-radius: 50% !important;
    background: linear-gradient(135deg, #12b3b3, #1c7fb8); color: #fff;
    cursor: pointer; font-size: 15px; line-height: 1; padding: 0;
    box-shadow: 0 5px 14px rgba(15, 157, 157, .38);
    transition: transform .14s cubic-bezier(.34,1.5,.64,1), filter .15s ease;
}
#fosAiSend:hover { filter: brightness(1.09); transform: scale(1.08) rotate(-8deg); }
#fosAiSend:active { transform: scale(.94); }
#fosAiSend:disabled { opacity: .45; cursor: default; transform: none; filter: none; }

/* the composer sits flush at the bottom of the panel */
#fosAiForm { padding-bottom: 13px; }

/* --------------------------------------------------------------- keyframes */
@keyframes fosai-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}
@keyframes fosai-shadow {
    0%, 100% { transform: scaleX(1);   opacity: .22; }
    50%      { transform: scaleX(.78); opacity: .12; }
}
@keyframes fosai-halo {
    0%, 100% { transform: scale(.92); opacity: .55; }
    50%      { transform: scale(1.12); opacity: .95; }
}
@keyframes fosai-blink {
    0%, 92%, 100% { transform: scaleY(0); }
    94%, 97%      { transform: scaleY(1); }
}
@keyframes fosai-antenna {
    0%, 100% { opacity: .45; r: 3.1; }
    50%      { opacity: 1;   r: 3.9; }
}
@keyframes fosai-wave {
    0%, 74%, 100% { transform: rotate(0deg); }
    80%           { transform: rotate(-26deg); }
    86%           { transform: rotate(6deg); }
    92%           { transform: rotate(-18deg); }
}
@keyframes fosai-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(126, 242, 176, .7); }
    70%  { box-shadow: 0 0 0 7px rgba(126, 242, 176, 0); }
    100% { box-shadow: 0 0 0 0 rgba(126, 242, 176, 0); }
}
@keyframes fosai-sheen {
    0%, 62%, 100% { transform: translateX(0) rotate(12deg); }
    82%           { transform: translateX(560%) rotate(12deg); }
}
@keyframes fosai-pop {
    from { opacity: 0; transform: translateY(16px) scale(.9); }
    to   { opacity: 1; transform: none; }
}
@keyframes fosai-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}
@keyframes fosai-dot {
    0%, 60%, 100% { transform: translateY(0); opacity: .45; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* respect the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
    #fosAiRoot *, #fosAiRoot *::before, #fosAiRoot *::after {
        animation: none !important; transition: none !important;
    }
}

@media (max-width: 520px) {
    #fosAiRoot { right: 14px; bottom: 14px; }
    #fosAiPanel { width: calc(100vw - 28px); height: calc(100vh - 120px); }
    #fosAiTip { display: none; }
}