/* Ask AI chat widget (floating button + panel), injected by ai-chat.js */

.aichat-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 22px;
    /* Same look as the hero .highlight chip. */
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
    background: linear-gradient(180deg, #64d07a 0%, #4ebf66 100%);
    color: #07110a;
    font: 700 15.5px/1 'Space Grotesk', sans-serif;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(94, 194, 106, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.aichat-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.55), 0 3px 16px rgba(94, 194, 106, 0.5);
}
.aichat-fab svg { width: 19px; height: 19px; }

.aichat-panel {
    position: fixed;
    right: 22px;
    bottom: 88px;
    z-index: 1201;
    width: 400px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 120px);
    display: none;
    flex-direction: column;
    background: #121212;
    border: 1px solid #262626;
    border-radius: 14px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    font-family: 'Space Grotesk', sans-serif;
}
.aichat-panel.is-open { display: flex; }

.aichat-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #232323;
    background: #161616;
}
.aichat-head-title { color: #fff; font-weight: 600; font-size: 15px; }
.aichat-head-sub { color: #8a8a8a; font-size: 12px; margin-top: 1px; }
.aichat-head-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #40DDAB; flex: none;
    box-shadow: 0 0 8px rgba(64, 221, 171, 0.8);
}
.aichat-close {
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: #8a8a8a; font-size: 20px; line-height: 1; padding: 4px;
}
.aichat-close:hover { color: #fff; }

.aichat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: thin;
    scrollbar-color: #2e2e2e transparent;
}
.aichat-msgs::-webkit-scrollbar { width: 8px; }
.aichat-msgs::-webkit-scrollbar-track { background: transparent; }
.aichat-msgs::-webkit-scrollbar-thumb {
    background: #2e2e2e;
    border-radius: 4px;
}
.aichat-msgs::-webkit-scrollbar-thumb:hover { background: #3a3a3a; }
.aichat-msg {
    max-width: 88%;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}
.aichat-msg.user {
    align-self: flex-end;
    background: #1d2b26;
    color: #d9fff2;
    border: 1px solid rgba(64, 221, 171, 0.25);
}
.aichat-msg.bot {
    align-self: flex-start;
    background: #1a1a1a;
    color: #e6e6e6;
    border: 1px solid #262626;
}
.aichat-msg.bot a { color: #40DDAB; text-decoration: underline; text-underline-offset: 2px; }
.aichat-msg.bot code {
    font-family: ui-monospace, monospace;
    font-size: 12.5px;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 4px;
    padding: 0 4px;
}
.aichat-code {
    display: block;
    margin: 6px 0;
    padding: 8px 10px;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 6px;
    font-family: ui-monospace, monospace;
    font-size: 12px;
    line-height: 1.5;
    color: #e6e6e6;
    white-space: pre;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #2e2e2e transparent;
}
.aichat-code::-webkit-scrollbar { height: 6px; }
.aichat-code::-webkit-scrollbar-thumb { background: #2e2e2e; border-radius: 3px; }
.aichat-msg.err { align-self: center; color: #d2696b; background: none; border: none; font-size: 12.5px; }

.aichat-typing { align-self: flex-start; color: #8a8a8a; font-size: 12.5px; padding: 2px 4px; }
.aichat-typing::after {
    content: '...';
    animation: aichat-dots 1.2s steps(4, end) infinite;
}
@keyframes aichat-dots {
    0% { content: ''; }
    25% { content: '.'; }
    50% { content: '..'; }
    75% { content: '...'; }
}

.aichat-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 4px; }
.aichat-chip {
    border: 1px solid #2e2e2e;
    background: #181818;
    color: #bdbdbd;
    border-radius: 999px;
    font: 500 12.5px/1.2 'Space Grotesk', sans-serif;
    padding: 8px 12px;
    cursor: pointer;
    text-align: left;
}
.aichat-chip:hover { border-color: rgba(64, 221, 171, 0.5); color: #fff; }

.aichat-inputrow {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid #232323;
    background: #161616;
}
.aichat-input {
    flex: 1;
    resize: none;
    border: 1px solid #2b2b2b;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font: 400 13.5px/1.4 'Space Grotesk', sans-serif;
    padding: 10px 12px;
    max-height: 96px;
    outline: none;
}
.aichat-input:focus { border-color: rgba(64, 221, 171, 0.5); }
.aichat-input { scrollbar-width: thin; scrollbar-color: #2e2e2e transparent; }
.aichat-input::-webkit-scrollbar { width: 6px; }
.aichat-input::-webkit-scrollbar-thumb { background: #2e2e2e; border-radius: 3px; }
.aichat-send {
    align-self: flex-end;
    border: none;
    border-radius: 10px;
    background: #40DDAB;
    color: #0d1512;
    font: 600 13.5px/1 'Space Grotesk', sans-serif;
    padding: 11px 16px;
    cursor: pointer;
}
.aichat-send:disabled { opacity: 0.45; cursor: default; }
.aichat-foot {
    text-align: center;
    color: #6a6a6a;
    font-size: 10.5px;
    padding: 0 12px 10px;
    background: #161616;
}

/* On-page explain hints: a small "-> Ask AI" pill next to complex terms.
   Click opens the chat with a question about that spot. */
.ai-hint {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-inline-start: 10px;
    padding: 0;
    vertical-align: middle;
    border: none;
    background: none;
    color: #40DDAB;
    font: 600 11.5px/1 'Space Grotesk', sans-serif;
    letter-spacing: 0.02em;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}
.ai-hint:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ai-hint svg { width: 12px; height: 12px; flex: none; }

@media (max-width: 520px) {
    .aichat-panel { right: 8px; bottom: 80px; height: 70vh; }
    .aichat-fab { right: 14px; bottom: 14px; }
}