/* ============================================================================
   In-house streaming chat widget (agent-chat).

   Loosely coupled and brand-agnostic: every colour resolves from the host page's
   design tokens (hsl(var(--...))), so dropping this file plus agent-chat.js and
   a `.ixchat` mount point onto any site (getfacturx / getzugferd / getubl, ...)
   adopts that site's palette automatically. No element styles leak out: every
   selector is namespaced under `.ixchat`.
   ========================================================================== */

.ixchat {
    position: relative;
    width: 100%;
    height: 360px;
    box-sizing: border-box;
}

/* The visible card. Absolutely fills the wrapper so the wrapper can drive size
   (inline when collapsed, viewport-sized when expanded). */
.ixchat__panel {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    border: 1px solid hsl(var(--border));
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(23, 53, 65, .13), 0 6px 16px rgba(23, 53, 65, .08);
}

/* ── Expanded: fill the viewport beneath the sticky 4rem (h-16) navbar ───────
   The navbar sits at z-50, so we stay just under it and keep it visible. */
.ixchat.ixchat--expanded {
    position: fixed;
    top: 4rem;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 40;
    background: hsl(var(--background));
}
.ixchat.ixchat--expanded .ixchat__panel {
    inset: 12px;
    border-radius: 12px;
    box-shadow: none;
}

/* ── Header bar: brand avatar + assistant name + online status ──────────────── */
.ixchat__header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 13px 14px;
    border-bottom: 1px solid hsl(var(--border));
}
.ixchat__avatar {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--ink);
    display: grid;
    place-items: center;
}
.ixchat__avatar svg { display: block; }
.ixchat__head-text { flex: 1 1 auto; min-width: 0; }
.ixchat__head-name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.25;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ixchat__head-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: hsl(var(--muted-foreground));
}
.ixchat__head-status::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime-deep);
}

/* ── Expand / minimise control, sits at the right of the header ─────────────── */
.ixchat__toggle {
    flex: 0 0 auto;
    margin-left: auto;
    width: 2em;
    height: 2em;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ixchat__toggle:hover {
    background: hsl(var(--muted));
    color: hsl(var(--foreground));
}
.ixchat__toggle:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
}
.ixchat__toggle svg {
    width: 1.05em;
    height: 1.05em;
    display: block;
}
.ixchat__toggle .ixchat__icon-collapse { display: none; }
.ixchat.ixchat--expanded .ixchat__toggle .ixchat__icon-expand { display: none; }
.ixchat.ixchat--expanded .ixchat__toggle .ixchat__icon-collapse { display: block; }

/* ── Messages list ─────────────────────────────────────────────────────────── */
.ixchat__messages {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scroll-behavior: smooth;
}

.ixchat__msg {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: .95rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.ixchat__msg--ai {
    align-self: flex-start;
    background: var(--lime-soft);
    color: var(--ink);
    border: 1px solid transparent;
    border-bottom-left-radius: 4px;
}
.ixchat__msg--user {
    align-self: flex-end;
    background: var(--ink);
    color: #fff;
    border-bottom-right-radius: 4px;
    white-space: pre-wrap;
}
.ixchat__msg a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.ixchat__msg p { margin: 0 0 .5em; }
.ixchat__msg p:last-child { margin-bottom: 0; }
.ixchat__msg code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
    padding: .1em .35em;
    border-radius: 5px;
    background: hsl(var(--background) / .6);
}

/* ── "Working on it" status line (rotating heartbeat) ──────────────────────── */
.ixchat__status {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: hsl(var(--muted-foreground));
    font-size: .92rem;
}
.ixchat__dots {
    display: inline-flex;
    gap: 4px;
    flex: 0 0 auto;
}
.ixchat__dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .35;
    animation: ixchat-bounce 1.2s infinite ease-in-out;
}
.ixchat__dots span:nth-child(2) { animation-delay: .18s; }
.ixchat__dots span:nth-child(3) { animation-delay: .36s; }
@keyframes ixchat-bounce {
    0%, 70%, 100% { transform: translateY(0); opacity: .35; }
    35% { transform: translateY(-4px); opacity: 1; }
}

/* ── Downloadable file inside an answer bubble ─────────────────────────────── */
.ixchat__file {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 9px;
    padding: 9px 12px;
    border: 1px solid hsl(var(--border));
    border-radius: 10px;
    background: #fff;
    color: hsl(var(--foreground));
    text-decoration: none;
    font-size: .85rem;
    font-weight: 600;
    transition: background-color .15s ease;
}
.ixchat__file:hover { background: hsl(var(--muted)); }
.ixchat__file svg { width: 1.1em; height: 1.1em; flex: 0 0 auto; color: var(--lime-deep); }
.ixchat__file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 16em; }

/* ── Queued upload chip (above the composer) ───────────────────────────────── */
.ixchat__queue {
    display: flex;
    padding: 10px 14px 0;
}
.ixchat__queue:empty { display: none; padding: 0; }
.ixchat__chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px 6px 10px;
    border: 1px solid hsl(var(--border));
    border-radius: 8px;
    background: hsl(var(--muted));
    font-size: .85rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    max-width: 100%;
}
.ixchat__chip svg { width: 1em; height: 1em; flex: 0 0 auto; color: var(--lime-deep); }
.ixchat__chip-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14em; }
.ixchat__chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
}
.ixchat__chip-remove:hover { background: hsl(var(--background)); color: hsl(var(--foreground)); }
.ixchat__chip-remove svg { width: .9em; height: .9em; }

/* ── Composer (attach + textarea + send) ───────────────────────────────────── */
.ixchat__composer {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 10px 12px;
    border-top: 1px solid hsl(var(--border));
    background: #fbfbf7;
}
.ixchat__textarea {
    flex: 1 1 auto;
    min-width: 0;
    resize: none;
    border: none;
    outline: none;
    background: transparent;
    color: hsl(var(--foreground));
    font: inherit;
    line-height: 1.45;
    max-height: 120px;
    padding: 9px 2px;
}
.ixchat__textarea::placeholder { color: hsl(var(--muted-foreground)); }

.ixchat__iconbtn {
    flex: 0 0 auto;
    width: 2.1em;
    height: 2.1em;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}
.ixchat__iconbtn:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }
.ixchat__iconbtn:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }
.ixchat__iconbtn svg { width: 1.4em; height: 1.4em; display: block; }

.ixchat__send {
    background: var(--ink);
    color: #fff;
}
.ixchat__send:hover { background: var(--ink); color: #fff; opacity: .9; }
.ixchat__send svg { width: 1.2em; height: 1.2em; }

.ixchat__iconbtn:disabled,
.ixchat__iconbtn[disabled] { opacity: .45; cursor: not-allowed; }
.ixchat__iconbtn:disabled:hover { background: transparent; color: hsl(var(--muted-foreground)); }
.ixchat__send:disabled:hover { background: var(--ink); color: #fff; opacity: .45; }

/* Visually hidden file input (the paperclip button proxies the click). */
.ixchat__fileinput {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}