/* InfinityBlockchain Avatar Chat Widget v2.2 (native SpeechRecognition only) */

#ib-avatar-chat-root {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #e6edff;
    pointer-events: none;
}
/* Avatar fits inside the panel now — no lift needed when open */
#ib-avatar-chat-root.ib-root-expanded {
    bottom: 0;
}
/* When only the trigger is shown, keep a small gap from the corner */
#ib-avatar-chat-root:not(.ib-root-expanded) {
    right: 16px;
    bottom: 16px;
}
#ib-avatar-chat-root * { box-sizing: border-box; }
#ib-avatar-chat-root button { font-family: inherit; }
.ib-hidden { display: none !important; }

/* ------- Trigger ------- */
.ib-avatar-chat-trigger {
    pointer-events: auto;
    display: flex; align-items: center; gap: 12px;
    padding: 10px 18px 10px 10px;
    border: 1px solid rgba(108, 139, 255, 0.35);
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(14, 26, 70, 0.95), rgba(24, 43, 115, 0.95));
    color: #e6edff;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 24px rgba(56,118,255,0.35);
    backdrop-filter: blur(12px);
    transition: transform 0.25s, box-shadow 0.25s;
    position: relative;
}
.ib-avatar-chat-trigger:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.55), 0 0 34px rgba(88,148,255,0.55);
}
.ib-avatar-trigger-face {
    width: 44px; height: 44px; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 30% 30%, #3a62c9, #0b1b4a);
    border: 1px solid rgba(138,181,255,0.5);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ib-avatar-trigger-img { width: 140%; height: auto; margin-top: 10%; display: block; }
.ib-avatar-trigger-face--fallback::before {
    content: 'AI'; font-weight: 700; color: #cfe0ff; font-size: 14px;
}
.ib-avatar-trigger-label { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.ib-avatar-trigger-title { font-size: 14px; font-weight: 700; color: #fff; }
.ib-avatar-trigger-sub { font-size: 11px; color: #a7b9e2; margin-top: 2px; }
.ib-avatar-trigger-pulse {
    position: absolute; right: 14px; top: 12px;
    width: 8px; height: 8px; border-radius: 50%;
    background: #3bd67a;
    box-shadow: 0 0 0 0 rgba(59,214,122,0.6);
    animation: ib-pulse 2.2s infinite;
}
@keyframes ib-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(59,214,122,0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(59,214,122,0); }
    100% { box-shadow: 0 0 0 0 rgba(59,214,122,0); }
}

/* ------- Widget ------- */
.ib-avatar-chat-widget {
    pointer-events: auto;
    display: none;
    position: relative;
    width: 440px;    /* ~2cm narrower each side */
    max-width: calc(100vw - 40px);
    filter: drop-shadow(0 20px 50px rgba(0,0,0,0.55));
}
/* Unified panel — chat + avatar share one rounded container */
.ib-avatar-chat-widget.ib-open {
    display: grid;
    grid-template-columns: 1fr 140px;
    align-items: stretch;
    animation: ib-widget-in 0.35s cubic-bezier(0.2,0.8,0.2,1);
    background: linear-gradient(160deg, rgba(10,17,46,0.96), rgba(22,38,92,0.96));
    border: 1px solid rgba(108,139,255,0.35);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(56,118,255,0.25) inset;
}
@keyframes ib-widget-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

/* ------- Avatar column ------- */
.ib-avatar-col {
    --ib-face-eye-top: 22%;
    --ib-face-eye-gap: 10%;
    --ib-face-mouth-top: 30%;
    position: relative;
    height: 290px;
    display: flex; align-items: flex-end; justify-content: center;
    pointer-events: none;
    z-index: 1;
    margin: 0;
    overflow: hidden;
}
.ib-avatar-aura {
    position: absolute; inset: auto 0 40px 0; height: 220px;
    background: radial-gradient(ellipse at center, rgba(88,148,255,0.35), rgba(88,148,255,0) 70%);
    filter: blur(12px); opacity: 0.8;
    transition: opacity 0.3s, transform 0.3s;
}
.ib-avatar-stage {
    position: relative;
    width: 100%;         /* WITHOUT this the stage collapses to 0px when the only
                            child is an absolutely-positioned canvas. */
    height: 100%;
    min-width: 180px;
    display: block;      /* flex had an <img> to size from; canvas is absolute, so block is enough */
}
/* 3D canvas is the sole avatar renderer — no PNG fallback, no CSS overlays */
.ib-avatar-3d {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    display: block;
    pointer-events: none;
    z-index: 2;
    filter: drop-shadow(0 20px 22px rgba(0,0,0,0.55));
}

/* Loading spinner + progress shown while the 3D model downloads */
.ib-avatar-loading {
    display: none;
    position: absolute;
    bottom: 20px; left: 50%;
    transform: translateX(-50%);
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(12, 20, 52, 0.85);
    border: 1px solid rgba(140, 180, 255, 0.4);
    color: #cfe0ff;
    font-size: 11px;
    font-weight: 600;
    backdrop-filter: blur(6px);
    z-index: 3;
    box-shadow: 0 4px 14px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}
.ib-avatar-loading[style*="display: block"],
.ib-avatar-loading[style*="display:block"] {
    display: flex !important;
}
.ib-avatar-loading::before {
    content: '';
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(140, 180, 255, 0.3);
    border-top-color: rgba(140, 180, 255, 0.95);
    animation: ib-avatar-spin 0.9s linear infinite;
}
.ib-avatar-loading::after {
    content: attr(data-progress);
    min-width: 30px;
    font-variant-numeric: tabular-nums;
}
.ib-avatar-loading:not([data-progress])::after,
.ib-avatar-loading[data-progress=""]::after {
    content: 'Loading avatar…';
}
@keyframes ib-avatar-spin {
    to { transform: rotate(360deg); }
}
/* Ring (listening indicator) — kept as it highlights the avatar state */
.ib-avatar-ring {
    position: absolute;
    width: 180px; height: 180px; border-radius: 50%;
    bottom: 110px; left: 50%; transform: translateX(-50%);
    border: 2px solid rgba(88,148,255,0);
    box-shadow: 0 0 0 0 rgba(88,148,255,0);
    transition: all 0.3s;
    pointer-events: none;
}

/* State auras — subtle colored glow behind avatar */
.ib-avatar-col[data-state="listening"] .ib-avatar-aura {
    background: radial-gradient(ellipse at center, rgba(88,255,200,0.4), rgba(88,255,200,0) 70%);
    opacity: 1;
}
.ib-avatar-col[data-state="listening"] .ib-avatar-ring {
    border-color: rgba(88,255,200,0.6);
    box-shadow: 0 0 30px rgba(88,255,200,0.35), inset 0 0 20px rgba(88,255,200,0.2);
    animation: ib-listen-ring 1.6s ease-in-out infinite;
}
@keyframes ib-listen-ring { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.06); } }
.ib-avatar-col[data-state="thinking"] .ib-avatar-aura {
    background: radial-gradient(ellipse at center, rgba(156,120,255,0.4), rgba(156,120,255,0) 70%);
}
.ib-avatar-col[data-state="speaking"] .ib-avatar-aura {
    background: radial-gradient(ellipse at center, rgba(56,195,255,0.55), rgba(56,195,255,0) 70%);
    animation: ib-speak-aura 0.6s ease-in-out infinite alternate;
}
@keyframes ib-speak-aura { from { opacity: 0.7; transform: scale(0.97);} to { opacity: 1; transform: scale(1.02);} }
.ib-avatar-col[data-state="error"] .ib-avatar-aura {
    background: radial-gradient(ellipse at center, rgba(255,110,110,0.4), rgba(255,110,110,0) 70%);
}

/* ------- Chat column — inner area of the unified widget panel ------- */
.ib-chat-col {
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    /* Input row anchored right at the bottom edge of the panel */
    padding: 6px 14px 0;
    backdrop-filter: blur(14px);
    height: 290px;
    display: flex; flex-direction: column; overflow: hidden;
    border-right: 1px solid rgba(108,139,255,0.15);
}
/* Input row flush with the panel edge — no gap */
.ib-chat-input-row { padding-bottom: 0; padding-top: 4px; }
.ib-chat-header {
    display: flex; align-items: center; gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(108,139,255,0.18);
    margin-bottom: 8px;
}
.ib-chat-header-text { flex: 1; min-width: 0; }
.ib-chat-title { font-size: 13px; font-weight: 700; color: #fff; }
.ib-chat-status { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #a7b9e2; margin-top: 1px; }
.ib-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #3bd67a; box-shadow: 0 0 8px rgba(59,214,122,0.6);
}
.ib-chat-header-actions { display: flex; gap: 4px; }
.ib-icon-btn {
    width: 28px; height: 28px; border-radius: 8px;
    border: 1px solid rgba(108,139,255,0.25);
    background: rgba(18,32,80,0.55);
    color: #cfe0ff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.2s, color 0.2s, transform 0.15s;
}
.ib-icon-btn:hover { background: rgba(40,70,150,0.7); color: #fff; }
.ib-icon-btn.ib-active { background: linear-gradient(135deg,#2c5cff,#5f8bff); color: #fff; border-color: rgba(140,180,255,0.6); }
.ib-icon-btn.ib-disabled { opacity: 0.4; cursor: not-allowed; }

/* welcome (compact) */
.ib-chat-welcome {
    position: relative; margin: 2px 0 8px; padding: 10px 12px;
    background: linear-gradient(135deg, rgba(18,36,95,0.7), rgba(24,50,130,0.7));
    border: 1px solid rgba(108,165,255,0.35); border-radius: 12px;
    box-shadow: 0 0 18px rgba(56,118,255,0.18) inset;
}
.ib-welcome-title { margin: 0 0 4px; font-size: 14px; font-weight: 700; color: #fff; }
.ib-welcome-sub { margin: 0; font-size: 12px; line-height: 1.4; color: #d6dffa; }
.ib-quick-actions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.ib-quick-btn {
    padding: 5px 10px; border-radius: 999px;
    border: 1px solid rgba(140,180,255,0.4);
    background: rgba(20,38,90,0.55);
    color: #cfe0ff; font-size: 11.5px; cursor: pointer;
    transition: all 0.2s;
}
.ib-quick-btn:hover {
    background: linear-gradient(135deg,#2c5cff,#5f8bff);
    color: #fff; border-color: rgba(180,210,255,0.6);
    transform: translateY(-1px);
}

/* messages */
.ib-chat-messages {
    flex: 1; overflow-y: auto;
    display: flex; flex-direction: column;
    gap: 8px; padding: 2px 2px 8px; min-height: 60px;
}
.ib-msg {
    max-width: 92%; display: flex; gap: 8px; align-items: flex-end;
    animation: ib-msg-in 0.3s;
}
@keyframes ib-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.ib-msg--user { align-self: flex-end; flex-direction: row-reverse; }
.ib-msg--bot { align-self: flex-start; }
.ib-msg--system { align-self: center; max-width: 85%; }
.ib-msg-body {
    padding: 8px 12px; border-radius: 12px;
    font-size: 12.5px; line-height: 1.45;
    word-wrap: break-word; overflow-wrap: anywhere;
}
.ib-msg--bot .ib-msg-body {
    background: linear-gradient(135deg, rgba(24,42,100,0.9), rgba(32,56,128,0.9));
    border: 1px solid rgba(108,165,255,0.35); color: #e6edff;
    border-bottom-left-radius: 4px;
}
.ib-msg--user .ib-msg-body {
    background: linear-gradient(135deg,#2c5cff,#5f8bff);
    color: #fff; border-bottom-right-radius: 4px;
}
.ib-msg--system .ib-msg-body {
    background: rgba(255,205,110,0.14);
    color: #ffd98a; font-size: 12px; text-align: center;
    border: 1px solid rgba(255,205,110,0.3);
}
.ib-msg-avatar {
    width: 28px; height: 28px; border-radius: 50%; overflow: hidden;
    background: radial-gradient(circle at 30% 30%, #3a62c9, #0b1b4a);
    border: 1px solid rgba(138,181,255,0.5);
    flex-shrink: 0; display: flex; align-items: center; justify-content: center;
}
.ib-msg-avatar img { width: 140%; height: auto; margin-top: 10%; display: block; }
.ib-msg-avatar--fallback::before { content: 'AI'; font-size: 10px; font-weight: 700; color: #cfe0ff; }

.ib-chat-messages::-webkit-scrollbar { width: 6px; }
.ib-chat-messages::-webkit-scrollbar-track { background: transparent; }
.ib-chat-messages::-webkit-scrollbar-thumb { background: rgba(108,139,255,0.3); border-radius: 3px; }
.ib-chat-messages::-webkit-scrollbar-thumb:hover { background: rgba(108,139,255,0.5); }

.ib-chat-typing {
    display: none; gap: 4px; padding: 8px 14px; width: fit-content;
    background: rgba(24,42,100,0.9); border: 1px solid rgba(108,165,255,0.35);
    border-radius: 14px; margin-bottom: 6px;
}
.ib-chat-typing.ib-active { display: flex; }
.ib-chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: #8ab5ff; animation: ib-typing 1.3s infinite; }
.ib-chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.ib-chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ib-typing {
    0%,60%,100% { transform: translateY(0); opacity: 0.5; }
    30%         { transform: translateY(-4px); opacity: 1; }
}

.ib-chat-suggestions { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; }
.ib-suggestion-chip {
    padding: 6px 11px; border-radius: 999px;
    border: 1px solid rgba(140,180,255,0.45);
    background: rgba(28,52,124,0.5);
    color: #d6e3ff; font-size: 12px; cursor: pointer;
    transition: all 0.2s;
}
.ib-suggestion-chip:hover {
    background: linear-gradient(135deg,#2c5cff,#5f8bff);
    color: #fff; border-color: rgba(180,210,255,0.7);
}

/* input (compact) */
.ib-chat-input-row {
    display: flex; align-items: flex-end; gap: 6px;
    padding-top: 6px; border-top: 1px solid rgba(108,139,255,0.18);
    margin-top: auto;
}
.ib-mic-btn {
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid rgba(108,139,255,0.3);
    background: rgba(18,32,80,0.6); color: #cfe0ff; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.2s; flex-shrink: 0;
}
.ib-mic-btn:hover { background: rgba(40,70,150,0.7); color: #fff; }
.ib-mic-btn.ib-active {
    background: linear-gradient(135deg,#28c76f,#22a55d);
    border-color: rgba(160,240,200,0.6); color: #fff;
    box-shadow: 0 0 14px rgba(40,199,111,0.5);
}
.ib-mic-btn.ib-disabled { opacity: 0.5; cursor: pointer; }
.ib-chat-input {
    flex: 1; padding: 8px 12px; border-radius: 10px;
    border: 1px solid rgba(108,139,255,0.3);
    background: rgba(9,18,44,0.75); color: #e6edff;
    font-size: 13px; resize: none; outline: none; font-family: inherit;
    max-height: 80px; line-height: 1.35;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.ib-chat-input::placeholder { color: #6e7fa8; }
.ib-chat-input:focus {
    border-color: rgba(140,180,255,0.7);
    box-shadow: 0 0 0 2px rgba(56,118,255,0.2);
}
.ib-send-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 36px; padding: 0 12px; border-radius: 10px;
    border: 1px solid rgba(140,180,255,0.5);
    background: linear-gradient(135deg,#2c5cff,#5f8bff);
    color: #fff; font-size: 12.5px; font-weight: 600;
    cursor: pointer; transition: transform 0.15s, box-shadow 0.2s;
    flex-shrink: 0;
}
.ib-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(56,118,255,0.5); }

/* escalation */
.ib-chat-escalation {
    display: none; margin-top: 8px; padding: 12px;
    border-radius: 12px; background: rgba(9,18,44,0.85);
    border: 1px solid rgba(108,139,255,0.3);
}
.ib-chat-escalation.ib-active { display: block; }
.ib-chat-escalation h5 { margin: 0 0 8px; font-size: 13px; color: #fff; }
.ib-chat-escalation input,
.ib-chat-escalation textarea {
    width: 100%; padding: 8px 10px; margin-bottom: 6px;
    border-radius: 8px; border: 1px solid rgba(108,139,255,0.25);
    background: rgba(15,25,60,0.8); color: #e6edff; font-size: 12px;
    outline: none; font-family: inherit;
}
.ib-chat-escalation textarea { resize: vertical; min-height: 60px; }
.ib-escalation-buttons { display: flex; gap: 6px; margin-top: 6px; }
.ib-escalation-buttons button { flex: 1; padding: 8px; border-radius: 8px; font-size: 12px; cursor: pointer; border: 1px solid transparent; }
.ib-btn-submit { background: linear-gradient(135deg,#10b981,#059669); color: #fff; border-color: #10b981; }
.ib-btn-cancel { background: transparent; color: #a7b9e2; border-color: rgba(108,139,255,0.3); }

/* status */
.ib-chat-statusbar { margin-top: 6px; font-size: 11px; color: #8ab5ff; min-height: 14px; }
.ib-chat-statusbar.ib-status--error { color: #ff8a8a; }
.ib-chat-statusbar.ib-status--info  { color: #8ab5ff; }

/* Anonymous daily-question counter bar (above the input row).
   Only rendered while the visitor is NOT logged in. */
.ib-chat-limit-bar {
    margin: 4px 0 6px;
    padding: 6px 10px;
    font-size: 11.5px;
    line-height: 1.35;
    text-align: center;
    color: #a7b9e2;
    background: rgba(9, 18, 44, 0.55);
    border: 1px solid rgba(108, 139, 255, 0.25);
    border-radius: 8px;
}
.ib-chat-limit-bar .ib-limit-label { display: inline-block; }
.ib-chat-limit-bar .ib-limit--warn { color: #ffbf6b; }
.ib-chat-limit-bar .ib-limit-register {
    color: #8ab5ff;
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed rgba(138, 181, 255, 0.5);
}
.ib-chat-limit-bar .ib-limit-register:hover { color: #b8d0ff; border-bottom-color: #b8d0ff; }

/* Inline registration CTA bubble shown when the limit is reached. */
.ib-msg.ib-msg--cta .ib-msg-body {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.18), rgba(79, 70, 229, 0.18));
    border: 1px solid rgba(124, 58, 237, 0.45);
    border-radius: 12px;
    padding: 10px 12px;
}
.ib-cta-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #7c3aed, #4f46e5);
    color: #fff !important;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
}
.ib-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(79, 70, 229, 0.5); }

/* Disabled input styling when limit is reached */
.ib-chat-input:disabled,
.ib-send-btn:disabled,
.ib-mic-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Persistent "Open a ticket" link shown for logged-in users only.
   Sits under the status bar, dezent but always within reach. */
.ib-chat-ticket-link {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 0;
    font-size: 11px;
    color: #8ab5ff;
    text-decoration: none;
    opacity: 0.75;
    transition: opacity .15s ease, color .15s ease;
}
.ib-chat-ticket-link:hover {
    opacity: 1;
    color: #b8d0ff;
    text-decoration: underline;
}

/* voice picker */
.ib-voice-picker {
    display: none;
    gap: 6px;
    align-items: center;
    padding: 8px 10px;
    margin: 4px 0 8px;
    background: rgba(9,18,44,0.75);
    border: 1px solid rgba(108,139,255,0.35);
    border-radius: 10px;
    font-size: 12px;
}
.ib-voice-picker.ib-open { display: flex; flex-wrap: wrap; }
.ib-voice-picker-label { color: #a7b9e2; font-weight: 600; white-space: nowrap; }
.ib-voice-selector {
    flex: 1; min-width: 0;
    padding: 6px 8px;
    border-radius: 6px;
    background: rgba(15,25,60,0.85);
    color: #e6edff;
    border: 1px solid rgba(108,139,255,0.3);
    font-size: 12px;
    font-family: inherit;
    outline: none;
    cursor: pointer;
}
.ib-voice-selector:focus { border-color: rgba(140,180,255,0.7); }
.ib-voice-preview-btn {
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(140,180,255,0.45);
    background: linear-gradient(135deg,#2c5cff,#5f8bff);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.ib-voice-preview-btn:hover { transform: translateY(-1px); }
html:not(.dark) .ib-voice-picker { background: rgba(245,248,255,0.9); border-color: rgba(56,118,255,0.3); }
html:not(.dark) .ib-voice-picker-label { color: #4a5a85; }
html:not(.dark) .ib-voice-selector { background: #fff; color: #0b1b4a; border-color: rgba(56,118,255,0.25); }

/* permission help overlay */
.ib-perm-help {
    display: none; position: absolute; inset: 10px;
    z-index: 10; padding: 16px; border-radius: 14px;
    background: linear-gradient(160deg, rgba(12,20,52,0.98), rgba(28,44,104,0.98));
    border: 1px solid rgba(255,190,100,0.5);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 24px rgba(255,190,100,0.25);
    color: #e6edff; overflow-y: auto;
    font-size: 13px; line-height: 1.55;
}
.ib-perm-help-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-bottom: 10px; padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,190,100,0.25);
}
.ib-perm-help-head strong { font-size: 14px; color: #ffd98a; }
.ib-perm-help-close {
    background: none; border: none; color: #ffd98a;
    font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px;
}
.ib-perm-help-body p { margin: 0 0 10px; }
.ib-perm-help-steps {
    background: rgba(0,0,0,0.25); padding: 10px 12px;
    border-radius: 10px; margin: 8px 0; font-size: 12.5px; line-height: 1.6;
}
.ib-perm-help-retry {
    margin-top: 10px; padding: 10px 16px; border-radius: 10px;
    border: 1px solid rgba(140,180,255,0.5);
    background: linear-gradient(135deg,#2c5cff,#5f8bff);
    color: #fff; font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: transform 0.15s;
}
.ib-perm-help-retry:hover { transform: translateY(-1px); }

/* Hard guard: prevent ANY chatbot element from causing horizontal page scroll
   on phones. Belt-and-suspenders so swipe gestures and zoom never show a
   shifted layout, regardless of which child element overflows. */
@media (max-width: 700px) {
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
}

/* mobile */
@media (max-width: 700px) {
    /* Minimized state: compact container that only wraps the trigger, positioned
       bottom-right with no leftward extension — so the page behind stays visible. */
    #ib-avatar-chat-root {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        left: auto;
        width: auto;
        max-width: none;
        display: block;
    }
    /* HIDE the floating chat trigger on phones. The chatbot is reachable from
       the mobile hamburger menu's "Chat with Infinity B." CTA, which is more
       discoverable and doesn't push the page sideways. */
    .ib-avatar-chat-trigger { display: none !important; }
    .ib-avatar-trigger-label { display: none; }
    .ib-avatar-trigger-face { width: 52px; height: 52px; }
    .ib-avatar-trigger-pulse { right: 4px; top: 4px; }
    /* Hard-belt: the root container holds the trigger when collapsed. With the
       trigger hidden, also hide the collapsed root so it can't intercept any
       touch events or contribute layout width on phones. */
    #ib-avatar-chat-root:not(.ib-root-expanded) {
        display: none !important;
    }

    /* Expanded state on mobile — anchored flush to bottom-right */
    #ib-avatar-chat-root.ib-root-expanded {
        right: 0;
        bottom: calc(0px + env(safe-area-inset-bottom, 0px));
        left: 0;
        width: auto; max-width: 100vw;
        display: flex; justify-content: flex-end;
    }
    .ib-avatar-chat-widget.ib-open {
        grid-template-columns: 1fr 100px;
        width: 100%; max-width: 100%;
    }
    /* NOTE: previously had `margin-left: -18px; overflow: visible` which pulled the
       3D avatar LEFT into the chat column and let its shoulder cover the send button
       on narrow phones. Clamped here — avatar stays inside its own column. */
    .ib-avatar-col {
        height: 400px;
        margin-left: 0;
        margin-bottom: -50px;
        overflow: hidden;
    }
    .ib-avatar-img { max-height: 400px; }
    .ib-chat-col { min-height: 340px; max-height: calc(100vh - 120px); padding: 14px; }
    .ib-welcome-title { font-size: 14px; }
    .ib-welcome-sub { font-size: 12px; }
    .ib-send-btn span { display: none; }
    .ib-send-btn { padding: 0 12px; width: 44px; justify-content: center; flex-shrink: 0; }
    /* Input row must stay above the avatar layer and have breathing room on the right */
    .ib-chat-input-row { position: relative; z-index: 3; }
    /* Prevent mobile browsers from auto-zooming to inputs (font < 16px triggers zoom on iOS/Android) */
    .ib-chat-input { font-size: 16px; }
    .ib-chat-escalation input,
    .ib-chat-escalation textarea { font-size: 16px; }
    body { overflow-x: hidden; }
}
/* PHONE LAYOUT (≤700px) — Avatar in widget, no floating trigger
   The floating trigger button is hidden (chat is reachable from the mobile
   hamburger menu). When opened, the widget shows BOTH chat + avatar so the
   user can still see Infinity B. while chatting. Page-shift is hard-blocked. */
@media (max-width: 700px) {
    html, body { overflow-x: hidden; max-width: 100vw; }
    #ib-avatar-chat-root.ib-root-expanded {
        width: 100vw; max-width: 100vw;
        right: 0; left: 0;
    }
    .ib-avatar-chat-widget.ib-open {
        grid-template-columns: 1fr 120px;
        width: 100vw; max-width: 100vw;
    }
    .ib-avatar-trigger-label { display: none; }
    /* Avatar column — clamped to a fixed 120px so it never overflows AND to
       match the same head+shoulders framing the desktop has. The min-width:0
       overrides defeat the default 180px stage min-width.
       Height matches desktop (290px) so vertical framing identical. */
    .ib-avatar-col {
        height: 290px;
        margin-left: 0;
        margin-bottom: -40px;
        overflow: hidden;
        min-width: 0;
        width: 120px;
    }
    .ib-avatar-stage {
        min-width: 0;
        width: 120px;
        max-width: 120px;
        overflow: hidden;
    }
    .ib-avatar-3d {
        width: 120px;
        max-width: 120px;
    }
    .ib-avatar-img { max-height: 260px; max-width: 120px; }
    .ib-chat-col {
        padding: 10px;
        min-height: 380px;
        max-height: calc(100vh - 80px);
        min-width: 0;
        overflow: hidden;
    }
    .ib-chat-input-row { gap: 4px; padding-right: 2px; min-width: 0; }
    .ib-chat-input { padding: 8px 10px; min-width: 0; flex: 1; font-size: 16px; }
    .ib-send-btn span { display: none; }
    .ib-send-btn { padding: 0 10px; width: 40px; justify-content: center; flex-shrink: 0; }
}

/* light theme */
html:not(.dark) .ib-chat-col {
    background: linear-gradient(160deg, rgba(245,248,255,0.96), rgba(230,240,255,0.96));
    border-color: rgba(56,118,255,0.35); color: #0b1b4a;
}
html:not(.dark) .ib-chat-title,
html:not(.dark) .ib-welcome-title { color: #0b1b4a; }
html:not(.dark) .ib-welcome-sub { color: #3c4a75; }
html:not(.dark) .ib-chat-status { color: #4a5a85; }
html:not(.dark) .ib-chat-header { border-color: rgba(56,118,255,0.2); }
html:not(.dark) .ib-chat-welcome {
    background: linear-gradient(135deg, rgba(220,232,255,0.8), rgba(196,218,255,0.8));
    border-color: rgba(56,118,255,0.3);
}
html:not(.dark) .ib-quick-btn { background: rgba(230,240,255,0.8); color: #1a3a8a; border-color: rgba(56,118,255,0.3); }
html:not(.dark) .ib-icon-btn { background: rgba(220,232,255,0.7); color: #1a3a8a; border-color: rgba(56,118,255,0.25); }
html:not(.dark) .ib-chat-input {
    background: rgba(255,255,255,0.9); color: #0b1b4a; border-color: rgba(56,118,255,0.3);
}
html:not(.dark) .ib-msg--bot .ib-msg-body {
    background: rgba(230,240,255,0.95); border-color: rgba(56,118,255,0.3); color: #0b1b4a;
}
html:not(.dark) .ib-mic-btn { background: rgba(220,232,255,0.7); color: #1a3a8a; border-color: rgba(56,118,255,0.25); }
html:not(.dark) .ib-suggestion-chip { background: rgba(230,240,255,0.7); color: #1a3a8a; }
html:not(.dark) .ib-chat-escalation { background: rgba(245,248,255,0.95); border-color: rgba(56,118,255,0.3); }
html:not(.dark) .ib-chat-escalation h5 { color: #0b1b4a; }
html:not(.dark) .ib-chat-escalation input,
html:not(.dark) .ib-chat-escalation textarea { background: #fff; color: #0b1b4a; border-color: rgba(56,118,255,0.25); }