/* =========================================================
   ITHCC Chatbot — capsule widget.
   Ported verbatim from the source project's agent widget
   (WEBNutritionExpert _Layout.cshtml, 2026-06-27), recolored
   content aside. Structure/classes/ids preserved so it matches
   the source design exactly.
   ========================================================= */

/* ── FAB ── */
#agentFab { position:fixed; bottom:24px; right:24px; z-index:1050; display:flex; align-items:flex-end; gap:8px;
            transform-origin:bottom right; transition:transform .62s cubic-bezier(.2,.75,.25,1), opacity .4s ease; }
#agentFab.is-hidden { opacity:0; transform:scale(.35); pointer-events:none; }
/* ── Capsule control (mic top · chat bottom) ── */
#agentCapsule {
    position:relative; isolation:isolate;
    width:48px; height:106px; border-radius:26px;
    background:linear-gradient(160deg,#34d399,#10b981,#06b6d4,#0ea5e9,#059669);
    background-size:240% 240%; animation:agentFabShift 9s ease infinite;
    box-shadow:0 14px 30px -8px rgba(5,150,105,.55), inset 0 2px 6px rgba(255,255,255,.4);
    display:flex; flex-direction:column; align-items:center; padding:8px 0;
    transition:transform .15s;
}
#agentCapsule:hover { transform:translateY(-2px); }
#agentCapsule::after {
    content:""; position:absolute; inset:-8px; border-radius:38px; z-index:-1;
    background:conic-gradient(from 0deg,#34d399,#06b6d4,#2563eb,#a855f7,#34d399);
    filter:blur(13px); opacity:0; transition:opacity .4s;
}
#agentFab.listening #agentCapsule::after { opacity:.6; animation:agentFabHalo 7s linear infinite; }
#agentCapMic, #agentCapChat {
    flex:1; width:100%; border:0; background:transparent; cursor:pointer;
    display:flex; align-items:center; justify-content:center; color:#fff; position:relative;
}
#agentCapMic i { font-size:1.15rem; filter:drop-shadow(0 1px 3px rgba(0,0,0,.28)); z-index:2; }
#agentCapChat i { font-size:1.02rem; filter:drop-shadow(0 1px 3px rgba(0,0,0,.28)); z-index:2; }
#agentCapMic .cap-glow {
    position:absolute; top:50%; left:50%; width:42px; height:42px; margin:-21px 0 0 -21px;
    border-radius:50%; opacity:0; pointer-events:none;
}
#agentFab.listening #agentCapMic .cap-glow { animation:agentCapGlow 1.8s ease-out infinite; }
@keyframes agentCapGlow { 0%{box-shadow:0 0 0 0 rgba(255,255,255,.55);opacity:.7} 100%{box-shadow:0 0 0 22px rgba(255,255,255,0);opacity:0} }
.cap-divider { width:60%; height:3px; border-radius:3px; flex-shrink:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent); }
#agentCapChat .chat-dot { position:absolute; top:12px; right:15px; width:9px; height:9px; border-radius:50%; background:#e11d48; border:2px solid rgba(255,255,255,.85); z-index:3; }
#agentCapMute {
    display:none; align-items:center; gap:5px; height:38px; padding:0 14px;
    border-radius:19px; border:0; cursor:pointer; white-space:nowrap;
    background:#fff; color:#059669; font-size:.82rem; font-weight:700;
    box-shadow:0 8px 18px rgba(0,0,0,.22); margin-bottom:8px;
    transition:transform .15s, background .2s, color .2s;
}
#agentCapMute i { font-size:.98rem; }
#agentCapMute:hover { transform:scale(1.05); }
#agentFab.listening #agentCapMute { display:inline-flex; }
#agentCapMute.muted { background:#e11d48; color:#fff; }
@keyframes agentFabShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes agentFabHalo  { to{ transform:rotate(360deg); } }

/* ── Panel ── */
#agentPanel {
    position:fixed; bottom:168px; right:24px; width:320px; max-width:calc(100vw - 32px); z-index:1049;
    border-radius:22px; box-shadow:0 16px 48px rgba(0,0,0,.18);
    background:#fff; display:flex; flex-direction:column; overflow:hidden;
    transform-origin:bottom right; transform:scale(.18); opacity:0; visibility:hidden;
    transition:transform .72s cubic-bezier(.2,.75,.25,1), opacity .5s ease, visibility 0s linear .72s;
}
#agentPanel.open { transform:scale(1); opacity:1; visibility:visible; transition:transform .72s cubic-bezier(.2,.75,.25,1), opacity .45s ease; }

/* ── Header — blue gradient, same style as the chat transcription report ── */
#agentPanelHeader {
    padding:4px 16px 12px;
    display:flex; flex-direction:column; gap:6px;
    cursor:move; user-select:none; touch-action:none;
    background:linear-gradient(135deg,#14284c,#1f3b70 60%,#1b9aaa 175%);
    color:#fff; flex-shrink:0;
    position:relative;
}
#agentPanelHeader::after {
    content:""; position:absolute; inset:0;
    background:radial-gradient(120px 70px at 88% -20%, rgba(255,255,255,0.22), transparent 70%);
    pointer-events:none;
}
#agentPanelHeader > * { position:relative; z-index:1; }
.agent-hdr-main { display:flex; align-items:center; gap:10px; width:100%; }
.agent-hdr-avatar {
    width:32px; height:32px; border-radius:50%;
    background:rgba(255,255,255,.2);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; font-weight:700; flex-shrink:0;
}
#agentStatusText { font-size:.7rem; opacity:.8; margin-top:1px; }

/* ── Call mode (design #2): LIVE strip + call bar ── */
#agentCallStrip {
    display:none; align-items:center; gap:8px;
    padding:6px 14px; background:#eefbf4; border-top:1px solid #d1fadf;
    font-size:.72rem; color:#065f46; font-weight:700; flex-shrink:0;
}
#agentCallStrip .cs-dot { width:8px; height:8px; border-radius:50%; background:#10b981; animation:agentLiveBlink 1.2s infinite; }
@keyframes agentLiveBlink { 0%,100%{opacity:1} 50%{opacity:.25} }
#agentCallTimerTxt { margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums; color:#047857; }

#agentCallBar {
    display:none; align-items:center; gap:10px;
    padding:10px 14px 14px; background:#fafafa; flex-shrink:0;
}
/* Oscilloscope — real audio signal, full width of the call bar */
#agentScope { display:none; flex:1; min-width:0; height:36px; border-radius:8px; background:#0f172a; }
#agentCallMute {
    width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:1rem;
    background:#eef2f5; color:#198754; box-shadow:0 2px 6px rgba(0,0,0,.12);
    transition:transform .15s, background .2s, color .2s;
}
#agentCallMute:hover { transform:scale(1.08); }
#agentCallMute.muted { background:#e11d48; color:#fff; }
#agentCallEnd {
    width:48px; height:40px; border-radius:20px; border:0; cursor:pointer; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:1rem; color:#fff;
    background:linear-gradient(135deg,#dc3545,#c82333);
    box-shadow:0 3px 10px rgba(220,53,69,.4);
    transition:transform .15s;
}
#agentCallEnd:hover { transform:scale(1.06); }
#agentCallTimer { font-size:.7rem; opacity:.9; font-variant-numeric:tabular-nums; color:#ff8fa3; }
#agentCloseBtn {
    background:none; border:none; color:rgba(255,255,255,.7);
    font-size:1rem; cursor:pointer; padding:0; margin-left:auto;
    user-select:none;
}
#agentCloseBtn:hover { color:#fff; }

/* ── Messages ── */
#agentMessages {
    overflow-y:auto; padding:14px 12px;
    display:flex; flex-direction:column; gap:8px; scrollbar-width:thin;
    min-height:180px; max-height:280px;
}
/* Turn row: avatar chip + bubble (avatars = approved candidate #4:
   Betty = headset on green, visitor = person on navy) */
.agent-turn { display:flex; align-items:flex-start; gap:8px; max-width:92%; }
.agent-turn.user { align-self:flex-end; flex-direction:row-reverse; }
.agent-turn.agent { align-self:flex-start; }
.agent-turn-av {
    flex:none; width:30px; height:30px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:14px;
    box-shadow:0 3px 7px rgba(0,0,0,.22);
}
.agent-turn.agent .agent-turn-av { background:linear-gradient(140deg,#059669,#34d399); }
.agent-turn.user .agent-turn-av { background:linear-gradient(140deg,#1f3b70,#14284c); }

.agent-msg { max-width:85%; padding:9px 13px; border-radius:16px; font-size:.92rem; line-height:1.5; display:flex; flex-direction:column; }
.agent-msg.user  { align-self:flex-end; background:linear-gradient(135deg,#1a3c34,#2d6a4f); color:#fff; border-bottom-right-radius:4px; }
.agent-msg.agent { align-self:flex-start; background:#f1f5f9; color:#212529; border-bottom-left-radius:4px; }
.agent-turn .agent-msg { align-self:auto; max-width:100%; }
.agent-msg.agent p  { margin:0 0 4px; }
.agent-msg.agent p:last-child { margin:0; }
.agent-msg.agent ol,
.agent-msg.agent ul { margin:4px 0 4px 18px; padding:0; }
.agent-msg.agent li { margin:2px 0; }
/* selectable text + per-bubble copy (mobile-friendly) */
.agent-msg-text { -webkit-user-select:text; user-select:text; }
.agent-msg-meta { display:flex; align-items:center; gap:8px; margin-top:4px; }
.agent-msg.user .agent-msg-meta { justify-content:flex-end; }
.agent-msg-time { font-size:.66rem; opacity:.5; }
.agent-time-ico { font-size:.72rem; opacity:.5; }
#agentResizeGrip { align-self:center; padding:3px 14px 2px; cursor:ns-resize; touch-action:none; }
#agentResizeGrip span { display:block; width:40px; height:4px; border-radius:3px; background:rgba(255,255,255,.45); }
#agentResizeGrip:hover span { background:rgba(255,255,255,.8); }

/* Horizontal + diagonal resize (panel anchored bottom-right → grows up/left) */
#agentResizeW {
    position:absolute; left:-4px; top:20px; bottom:0; width:9px;
    cursor:ew-resize; z-index:6; touch-action:none;
}
#agentResizeCorner {
    position:absolute; left:0; top:0; width:20px; height:20px;
    cursor:nwse-resize; z-index:7; touch-action:none;
}
/* Corner affordance: hidden at rest — fades in when the panel is hovered */
#agentResizeCorner::after {
    content:""; position:absolute; left:5px; top:5px; width:9px; height:9px;
    border-left:2px solid rgba(255,255,255,.55);
    border-top:2px solid rgba(255,255,255,.55);
    border-top-left-radius:4px;
    opacity:0; transition:opacity .18s ease;
}
#agentPanel:hover #agentResizeCorner::after { opacity:1; }
#agentResizeCorner:hover::after { border-color:rgba(255,255,255,.95); }
.agent-copy { border:0; background:transparent; padding:2px 4px; margin:-2px -4px; cursor:pointer; font-size:.74rem; opacity:.5; line-height:1; color:inherit; }
.agent-copy:hover { opacity:1; }
.agent-copy.copied { color:#34d399; opacity:1; }
.agent-day-divider { align-self:center; font-size:.66rem; color:#8a97a3; background:#eef1f5; padding:2px 10px; border-radius:10px; margin:8px 0 2px; }

/* ── Input bar ── */
#agentInputBar {
    display:flex; align-items:flex-end; gap:8px;
    padding:10px 14px 16px;
    border-top:1px solid #f0f2f5;
    background:#fafafa; flex-shrink:0;
}
#agentInput {
    flex:1; min-width:0; border:1.5px solid #dee2e6; border-radius:16px;
    padding:9px 12px 9px 14px; font-size:.95rem; outline:none;
    transition:border-color .2s, box-shadow .2s; background:#fff;
    resize:none; line-height:1.4; min-height:40px; max-height:120px;
    overflow-y:auto; font-family:inherit;
    /* reserve the scrollbar lane so text doesn't jump/deform when it appears */
    scrollbar-gutter: stable;
    scrollbar-width: thin;                                  /* Firefox */
    scrollbar-color: rgba(31, 59, 112, 0.3) transparent;
}
/* Slim, rounded scrollbar that respects the input's rounded corners */
#agentInput::-webkit-scrollbar { width: 6px; }
#agentInput::-webkit-scrollbar-track { background: transparent; margin: 10px 0; }
#agentInput::-webkit-scrollbar-thumb {
    background: rgba(31, 59, 112, 0.28);
    border-radius: 6px;
}
#agentInput::-webkit-scrollbar-thumb:hover { background: rgba(31, 59, 112, 0.5); }
#agentInput:focus { border-color:#2d6a4f; box-shadow:0 0 0 3px rgba(45,106,79,.1); }
#agentInput::placeholder { color:#adb5bd; }
/* ── Typing dots (WhatsApp style) ── */
.agent-typing { display:flex; align-items:center; gap:4px; padding:2px 0; }
.agent-typing span { width:7px; height:7px; border-radius:50%; background:#adb5bd; animation:agentTypingDot 1.2s ease-in-out infinite; }
.agent-typing span:nth-child(2) { animation-delay:.2s; }
.agent-typing span:nth-child(3) { animation-delay:.4s; }
@keyframes agentTypingDot { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }
#agentSendBtn {
    width:36px; height:36px; border-radius:50%; border:none;
    background:linear-gradient(135deg,#1a3c34,#2d6a4f);
    color:#fff; font-size:.88rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(26,60,52,.3);
    opacity:.3; pointer-events:none;
    transition:opacity .2s, transform .15s; flex-shrink:0;
}
#agentSendBtn.on { opacity:1; pointer-events:auto; }
#agentSendBtn:hover { transform:scale(1.08); }
#agentMicBtn {
    width:36px; height:36px; border-radius:50%; border:none;
    background:linear-gradient(135deg,#198754,#20c997);
    color:#fff; font-size:.92rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(25,135,84,.35);
    transition:background .2s, transform .15s, box-shadow .2s; flex-shrink:0;
    position:relative;
}
#agentMicBtn::before {
    content:""; position:absolute; inset:-4px; border-radius:50%;
    background:transparent; opacity:0; pointer-events:none;
    transition:opacity .18s;
}
#agentMicBtn.starting::before {
    opacity:1;
    background:conic-gradient(var(--agent-mic-ring-color,#f4c542) var(--agent-mic-ring-progress,0deg), rgba(244,197,66,.18) 0);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
}
#agentMicBtn:hover  { transform:scale(1.08); }
#agentMicBtn:active { transform:scale(.92); }
#agentMicBtn.starting {
    background:linear-gradient(135deg,#2d6a4f,#198754);
    box-shadow:0 2px 10px rgba(244,197,66,.38);
    animation:none;
}
#agentMicBtn.rec {
    background:linear-gradient(135deg,#dc3545,#c82333);
    box-shadow:0 2px 8px rgba(220,53,69,.4);
    animation:agentMicPulse 1.2s ease-in-out infinite;
}
/* in-panel mute toggle (shown only during a voice call) */
#agentPanelMute {
    width:36px; height:36px; border-radius:50%; border:0; cursor:pointer; flex-shrink:0;
    display:none; align-items:center; justify-content:center; font-size:.9rem;
    background:#eef2f5; color:#198754; box-shadow:0 2px 6px rgba(0,0,0,.1);
    transition:transform .15s, background .2s, color .2s;
}
#agentPanelMute:hover { transform:scale(1.08); }
#agentPanelMute.muted { background:#e11d48; color:#fff; }
@keyframes agentMicPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.08)} }

/* ── ITHCC extras (kept from previous widget) ── */
/* Contact links inside bot replies */
#agentMessages a { color:#1a3c34; }
#agentMessages a.ithcc-link { color:#0b5cd6 !important; font-weight:600; text-decoration:underline; }
#agentMessages a.ithcc-link:hover { opacity:.85; }
/* Service list interaction states (inside light agent bubbles) */
.ithcc-service-option { cursor:pointer; padding:6px 8px; border-radius:6px; transition:background-color .15s ease, box-shadow .15s ease; }
.ithcc-service-option:hover { background-color:rgba(45,106,79,.12); }
.ithcc-service-option:focus-visible { outline:none; background-color:rgba(45,106,79,.18); box-shadow:inset 0 0 0 2px #2d6a4f; }
.ithcc-service-option:active { background-color:rgba(45,106,79,.25); }

/* Mobile position fix */
@media (max-width: 768px) {
    #agentPanel {
        right: calc(12px + env(safe-area-inset-right)) !important;
        left: auto !important;
        bottom: calc(150px + env(safe-area-inset-bottom)) !important;
        width: min(400px, calc(100vw - 24px)) !important;
        max-width: calc(100vw - 24px) !important;
    }
    #agentFab {
        right: calc(12px + env(safe-area-inset-right)) !important;
        bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    }
}