/*
 * The widgets mounted on every admin page: floating chat, ticket drawer, AI
 * assistant.
 *
 * Each carried its stylesheet in its own Blade view — two of them inside the
 * Livewire root, so re-sent with every update — and all three went out with
 * every page and every wire:navigate. As a file, linked in the panel head
 * (AdminPanelProvider, panels::styles.after), it is fetched once and kept.
 * Every rule is scoped to its widget's prefix (.fc-, .tdd, .aia), so loading it
 * where a widget is switched off styles nothing.
 */

/* ── Floating chat — resources/views/livewire/employee/floating-chat.blade.php ── */

    .fc-root, .fc-root * { box-sizing: border-box; }

    /* ── where the floating shell parks ───────────────────────────────
       Geometry lives here, not in a style attribute on the root. An inline
       `position:fixed;bottom:…;right:…` outranks every selector in this
       sheet, so the @media and [dir="rtl"] rules below could never have
       taken effect while the anchor was inline.

       Mirrors the AI assistant this shares a corner with:
       resources/views/livewire/ai-assistant-widget.blade.php */
    .fc-shell-float {
        --fc-bottom: 1.25rem;
        position: fixed;
        bottom: var(--fc-bottom);
        right: 1.25rem;
        /* BELOW the assistant's 9998, not above it. Its open panel is
           26x38rem and covers this slot whichever corner offset we pick;
           above it, the bubble punches up through that card and swallows
           clicks meant for the composer underneath. Below it, the bubble
           simply waits its turn and comes back when the panel closes. */
        z-index: 9997;
    }

    /* The assistant's bubble is 3.25rem tall at bottom:1.25rem, so it owns
       everything up to 4.5rem. Stack a bubble-height above it. */
    .fc-shell-float--stacked { --fc-bottom: 5.5rem; }

    /* Open, the panel drops into the corner and outranks the neighbour.
       Both halves of that matter, and the second one is not cosmetic:
       covering the assistant's bubble is what stops the two panels being
       open at once. Left stacked, the panel would clear the assistant's
       bubble by a few pixels, and clicking it there opens a 26x38rem card
       UNDER this one — with its close button buried and no way to reach it.
       Geometry and stacking order do that job between them, with no event
       passing between two components that know nothing about each other:
       an open assistant hides this bubble at 9997, and an open chat covers
       the assistant's at 9999. One at a time, both directions.

       --fc-bottom rather than `bottom` directly, so the clamp below follows
       the anchor instead of having to be corrected separately. */
    .fc-shell-float--open { --fc-bottom: 1.25rem; z-index: 9999; }

    /* 36rem with no ceiling is how the panel's header — and the button that
       closes it — end up above the top edge of a short window.
       4.75rem of headroom, which is the assistant's own figure: at the
       1.25rem anchor this resolves to calc(100vh - 6rem), the exact clamp
       .aia-panel uses, and that is what keeps a tall panel off Filament's
       4rem sticky topbar rather than painting over the bell and the user
       menu on a laptop-height window. */
    .fc-shell-float .fc-panel {
        max-height: calc(100vh - var(--fc-bottom) - 4.75rem);
    }
    @supports (height: 100dvh) {
        .fc-shell-float .fc-panel {
            max-height: calc(100dvh - var(--fc-bottom) - 4.75rem);
        }
    }

    /* In Urdu and Arabic the whole panel mirrors: the sidebar rail moves to
       the right, so a shell pinned bottom-right would sit on top of it. */
    [dir="rtl"] .fc-shell-float { right: auto; left: 1.25rem; }

    /* On a phone it stops pretending to be a floating card and becomes the
       screen — the same 520px breakpoint the assistant uses, so the two
       never half-transition against each other. */
    @media (max-width: 520px) {
        .fc-shell-float { right: 1rem; --fc-bottom: 1rem; }
        .fc-shell-float--stacked { --fc-bottom: 5rem; }
        [dir="rtl"] .fc-shell-float { right: auto; left: 1rem; }

        .fc-shell-float--open,
        [dir="rtl"] .fc-shell-float--open { right: 0; left: 0; bottom: 0; }

        .fc-shell-float--open .fc-panel {
            width: 100vw; max-width: 100vw;
            height: 100vh; max-height: 100vh;
            border-radius: 0; border: 0;
        }
        @supports (height: 100dvh) {
            .fc-shell-float--open .fc-panel { height: 100dvh; max-height: 100dvh; }
        }
    }

    .fc-root [x-cloak] { display:none !important; }

    .fc-panel { display:flex; flex-direction:column; height:36rem; width:24rem; max-width:calc(100vw - 2.5rem); background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 24px 48px -12px rgba(15,23,42,.18), 0 8px 16px -8px rgba(15,23,42,.08); border:1px solid rgba(15,23,42,.06); font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; color:#0f172a; }

    /* Docked mode (the Messages page) — the panel IS the page, so it fills
       the viewport under the topbar instead of being a 24×36rem card.
       12.5rem is the chrome above and below it: the 4rem topbar, the page
       heading and the page's own vertical padding. dvh where the browser has
       it, so a phone's collapsing toolbar does not push the composer off the
       bottom of the screen. */
    .fc-shell-docked .fc-panel {
        width: 100%;
        max-width: none;
        height: calc(100vh - 12.5rem);
        min-height: 26rem;
        border-radius: 14px;
    }
    @supports (height: 100dvh) {
        .fc-shell-docked .fc-panel { height: calc(100dvh - 12.5rem); }
    }
    /* On a phone the page heading repeats the panel's own "Messages" title
       and costs a fifth of the screen, so it goes, the page padding tightens
       and the panel takes everything under the topbar. */
    @media (max-width: 768px) {
        .fi-page:has(.fc-shell-docked) .fi-header { display: none; }
        .fi-page:has(.fc-shell-docked) > section { padding-top: .75rem; padding-bottom: .75rem; row-gap: .75rem; }
        .fc-shell-docked .fc-panel { height: calc(100vh - 5.5rem); min-height: 20rem; border-radius: 12px; }
        @supports (height: 100dvh) {
            .fc-shell-docked .fc-panel { height: calc(100dvh - 5.5rem); }
        }
    }

    /* Keyboard focus is visible on every control, and only for the keyboard. */
    .fc-root :is(button, a, input, textarea, [tabindex]):focus { outline: none; }
    .fc-root :is(button, a, [tabindex="0"]):focus-visible { outline: 2px solid #ff5100; outline-offset: 2px; }

    /* ── Header ─────────────────────────────────────────────────────── */
    .fc-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.75rem 1rem; background:#fff; border-bottom:1px solid #f1f5f9; flex:none; }
    .fc-header__group { display:flex; align-items:center; gap:.5rem; min-width:0; flex:1; }
    .fc-header__actions { display:flex; align-items:center; gap:.25rem; flex:none; }
    .fc-header__who { display:flex; align-items:center; gap:.625rem; min-width:0; padding:0; border:0; background:transparent; text-align:left; font:inherit; color:inherit; }
    button.fc-header__who { cursor:pointer; border-radius:8px; }
    .fc-header__text { display:flex; flex-direction:column; min-width:0; }
    .fc-header__title { display:block; font-size:.95rem; font-weight:600; line-height:1.2; color:#0f172a; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .fc-header__subtitle { display:block; font-size:.72rem; color:#64748b; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .fc-header__avatar { position:relative; display:flex; height:2.25rem; width:2.25rem; flex-shrink:0; align-items:center; justify-content:center; border-radius:9999px; background:linear-gradient(135deg, #ff8a4c, #ff5100); color:#fff; font-size:.9rem; font-weight:600; text-transform:uppercase; box-shadow:0 2px 4px rgba(255,81,0,.25); }
    .fc-header__avatar--group { background:linear-gradient(135deg, #6366f1, #4338ca); box-shadow:0 2px 4px rgba(99,102,241,.25); }
    .fc-header__back { display:inline-flex; align-items:center; justify-content:center; height:2rem; width:2rem; flex:none; border:0; background:transparent; color:#475569; border-radius:8px; cursor:pointer; transition:background .15s; }
    .fc-header__back:hover { background:#f1f5f9; color:#0f172a; }

    .fc-presence { color:#16a34a; font-weight:600; }
    .fc-presence-dot { position:absolute; right:-1px; bottom:-1px; width:.7rem; height:.7rem; border-radius:9999px; background:#22c55e; box-shadow:0 0 0 2px #fff; }

    .fc-icon-btn { display:inline-flex; align-items:center; justify-content:center; gap:.375rem; height:2rem; min-width:2rem; padding:0 .5rem; border:0; background:transparent; color:#475569; border-radius:8px; cursor:pointer; transition:background .15s, color .15s; font:inherit; }
    .fc-icon-btn:hover { background:#f1f5f9; color:#0f172a; }
    .fc-icon-btn--primary { background:#ff5100; color:#fff; padding:0 .75rem; font-size:.78rem; font-weight:600; box-shadow:0 1px 2px rgba(255,81,0,.3); }
    .fc-icon-btn--primary:hover { background:#ea580c; color:#fff; }
    .fc-icon { width:1.125rem; height:1.125rem; display:block; }

    /* ⋮ menu */
    .fc-menu { position:relative; }
    .fc-menu__pop { position:absolute; top:calc(100% + .25rem); right:0; z-index:20; min-width:11rem; padding:.25rem; background:#fff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 12px 28px -8px rgba(15,23,42,.22); }
    [dir="rtl"] .fc-menu__pop { right:auto; left:0; }
    .fc-menu__item { display:flex; align-items:center; gap:.5rem; width:100%; padding:.45rem .6rem; border:0; background:transparent; border-radius:6px; font:inherit; font-size:.82rem; color:#0f172a; text-align:left; cursor:pointer; }
    .fc-menu__item:hover, .fc-menu__item:focus-visible { background:#f1f5f9; outline:none; }
    .fc-menu__item svg { width:1rem; height:1rem; flex:none; color:#64748b; }

    /* ── Lists (conversations, search hits, people) ─────────────────── */
    .fc-body { flex:1; min-height:0; overflow-y:auto; background:#fff; }
    .fc-search-wrap { padding:.625rem .875rem; border-bottom:1px solid #f1f5f9; flex:none; }
    .fc-search { position:relative; }
    .fc-search > svg { position:absolute; left:.6rem; top:50%; transform:translateY(-50%); width:.95rem; height:.95rem; color:#94a3b8; }
    .fc-search > input { width:100%; border:1px solid transparent; background:#f1f5f9; padding:.5rem .75rem .5rem 2rem; border-radius:8px; font-size:.825rem; color:#0f172a; outline:none; transition:background .15s, border-color .15s; font-family:inherit; }
    .fc-search > input::placeholder { color:#94a3b8; }
    .fc-search > input:focus { background:#fff; border-color:#ff5100; box-shadow:0 0 0 3px rgba(255,81,0,.12); }

    .fc-row { display:flex; align-items:center; gap:.75rem; padding:.75rem .875rem; width:100%; border:0; background:transparent; text-align:left; cursor:pointer; border-bottom:1px solid #f8fafc; transition:background .12s; font-family:inherit; }
    .fc-row:hover { background:#f8fafc; }
    .fc-row__avatar { position:relative; display:flex; height:2.5rem; width:2.5rem; flex-shrink:0; align-items:center; justify-content:center; border-radius:9999px; background:linear-gradient(135deg, #ff8a4c, #ff5100); color:#fff; font-size:.9rem; font-weight:600; text-transform:uppercase; box-shadow:0 1px 3px rgba(255,81,0,.2); }
    .fc-row__avatar--group { background:linear-gradient(135deg, #6366f1, #4338ca); box-shadow:0 1px 3px rgba(99,102,241,.25); }
    .fc-row__badge { position:absolute; bottom:-2px; right:-2px; display:flex; height:1.125rem; width:1.125rem; align-items:center; justify-content:center; border-radius:9999px; background:#fff; color:#475569; font-size:.6rem; font-weight:700; box-shadow:0 0 0 2px #fff; border:1px solid #e2e8f0; }
    .fc-row__content { min-width:0; flex:1; display:flex; flex-direction:column; gap:2px; }
    .fc-row__top { display:flex; align-items:baseline; justify-content:space-between; gap:.5rem; }
    .fc-row__name { font-size:.875rem; font-weight:600; color:#0f172a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.01em; }
    .fc-row__time { font-size:.68rem; color:#94a3b8; flex-shrink:0; font-weight:500; }
    .fc-row__bottom { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
    .fc-row__preview { font-size:.78rem; color:#64748b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .fc-row__preview--empty { font-style:italic; color:#cbd5e1; }
    .fc-row__you { color:#94a3b8; }
    .fc-unread-pill { display:inline-flex; align-items:center; justify-content:center; height:1.125rem; min-width:1.125rem; padding:0 .375rem; border-radius:9999px; background:#ff5100; color:#fff; font-size:.64rem; font-weight:700; line-height:1; }

    .fc-hit { display:flex; flex-direction:column; gap:.25rem; width:100%; padding:.625rem 1rem; border:0; border-bottom:1px solid #f8fafc; background:transparent; text-align:left; font:inherit; cursor:pointer; transition:background .12s; }
    .fc-hit:hover { background:#f8fafc; }
    .fc-hit__top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; font-size:.72rem; }
    .fc-hit__who { font-weight:600; color:#334155; }
    .fc-hit__when { color:#94a3b8; flex:none; }
    .fc-hit__body { font-size:.82rem; color:#475569; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }

    .fc-person { display:flex; align-items:center; gap:.75rem; width:100%; padding:.625rem 1rem; border:0; border-bottom:1px solid #f8fafc; background:transparent; text-align:left; font:inherit; cursor:pointer; transition:background .12s; }
    .fc-person:hover { background:#f8fafc; }
    .fc-person__avatar { display:flex; height:2.25rem; width:2.25rem; flex:none; align-items:center; justify-content:center; border-radius:9999px; background:linear-gradient(135deg, #ff8a4c, #ff5100); color:#fff; font-size:.85rem; font-weight:600; text-transform:uppercase; }
    .fc-person__avatar--sm { height:1.75rem; width:1.75rem; font-size:.68rem; }
    .fc-person__main { display:flex; flex-direction:column; min-width:0; flex:1; }
    .fc-person__name { font-size:.85rem; font-weight:500; color:#0f172a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .fc-person__sub { font-size:.72rem; color:#64748b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    .fc-check { display:inline-flex; width:1rem; height:1rem; flex:none; border-radius:4px; border:1.5px solid #cbd5e1; background:#fff; }
    .fc-check.is-on { border-color:#ff5100; background:#ff5100 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / .75rem no-repeat; }

    .fc-note { padding:2.5rem 1.5rem; text-align:center; font-size:.82rem; color:#64748b; }
    .fc-hint { margin-top:.25rem; font-size:.7rem; color:#94a3b8; }

    .fc-subbar { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .875rem; border-bottom:1px solid #f1f5f9; flex:none; }
    .fc-link-btn { padding:0; border:0; background:transparent; font:inherit; font-size:.78rem; font-weight:600; color:#ea580c; cursor:pointer; }
    .fc-link-btn:hover { color:#c2410c; text-decoration:underline; }
    .fc-link-btn--danger { color:#dc2626; }
    .fc-link-btn--danger:hover { color:#b91c1c; }
    .fc-link-btn--muted { color:#64748b; }
    .fc-link-btn--muted:hover { color:#334155; }

    .fc-btn { display:inline-flex; align-items:center; justify-content:center; gap:.375rem; padding:.5rem .875rem; border:1px solid transparent; border-radius:8px; font:inherit; font-size:.78rem; font-weight:600; cursor:pointer; transition:background .15s, border-color .15s; }
    .fc-btn--sm { padding:.35rem .7rem; }
    .fc-btn--block { width:100%; }
    .fc-btn--primary { background:#ff5100; color:#fff; box-shadow:0 1px 2px rgba(255,81,0,.3); }
    .fc-btn--primary:hover { background:#ea580c; }
    .fc-btn--danger { background:#fef2f2; border-color:#fecaca; color:#dc2626; }
    .fc-btn--danger:hover { background:#fee2e2; }

    .fc-input { width:100%; min-width:0; padding:.5rem .75rem; border:1px solid transparent; border-radius:8px; background:#f1f5f9; font:inherit; font-size:.85rem; color:#0f172a; outline:none; transition:background .15s, border-color .15s; }
    .fc-input::placeholder { color:#94a3b8; }
    .fc-input:focus { background:#fff; border-color:#ff5100; box-shadow:0 0 0 3px rgba(255,81,0,.12); }
    .fc-input:disabled { opacity:.7; cursor:not-allowed; }

    /* Group settings */
    .fc-settings { display:flex; flex-direction:column; gap:1.125rem; padding:1rem; }
    .fc-field { display:flex; flex-direction:column; gap:.375rem; }
    .fc-field--split { padding-top:.875rem; border-top:1px solid #f1f5f9; }
    .fc-field__row { display:flex; gap:.5rem; }
    .fc-label { font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#64748b; }
    .fc-members { margin:0; padding:0; list-style:none; border:1px solid #f1f5f9; border-radius:10px; }
    .fc-member { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; }
    .fc-member + .fc-member { border-top:1px solid #f1f5f9; }
    .fc-member__name { flex:1; min-width:0; font-size:.85rem; color:#0f172a; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .fc-tag { margin-left:.25rem; font-size:.62rem; font-weight:600; text-transform:uppercase; color:#ea580c; }
    .fc-tag--muted { color:#94a3b8; text-transform:none; }
    .fc-pick { display:flex; flex-direction:column; max-height:10rem; overflow-y:auto; }
    .fc-pick__row { display:flex; align-items:center; gap:.5rem; padding:.4rem .5rem; border:0; border-radius:6px; background:transparent; font:inherit; text-align:left; cursor:pointer; }
    .fc-pick__row:hover { background:#f8fafc; }
    .fc-pick__name { font-size:.85rem; color:#1e293b; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    .fc-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1.5rem; text-align:center; height:100%; }
    .fc-empty__icon { display:flex; height:3.5rem; width:3.5rem; align-items:center; justify-content:center; border-radius:9999px; background:linear-gradient(135deg, #fff5ee, #ffe4d1); color:#ff5100; margin-bottom:.875rem; }
    .fc-empty__title { font-size:.95rem; font-weight:600; color:#0f172a; margin-bottom:.25rem; letter-spacing:-.01em; }
    .fc-empty__desc { font-size:.8rem; color:#64748b; margin-bottom:1rem; }
    .fc-empty__cta { display:inline-flex; align-items:center; gap:.375rem; padding:.5rem .875rem; border:0; border-radius:8px; background:#ff5100; color:#fff; font-size:.8rem; font-weight:600; cursor:pointer; box-shadow:0 1px 2px rgba(255,81,0,.3); font-family:inherit; }
    .fc-empty__cta:hover { background:#ea580c; }

    /* ── Thread ─────────────────────────────────────────────────────── */
    .fc-thread-wrap { position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }
    .fc-thread { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; background:#f8fafc; padding:1rem .875rem; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
    .fc-thread::-webkit-scrollbar { width:8px; }
    .fc-thread::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; border:2px solid transparent; background-clip:content-box; }
    /* min-height + flex-end: a short thread sits against the composer, where
       the eye already is, instead of at the top of an empty panel. */
    .fc-thread__inner { display:flex; flex-direction:column; justify-content:flex-end; gap:.5rem; min-height:100%; }

    .fc-date-row { display:flex; justify-content:center; margin:.375rem 0; }
    .fc-date-divider { background:#fff; padding:.125rem .75rem; border-radius:9999px; font-size:.68rem; font-weight:600; color:#64748b; border:1px solid #e2e8f0; }

    .fc-msg-row { display:flex; justify-content:flex-start; }
    .fc-msg-row.is-mine { justify-content:flex-end; }
    .fc-msg-col { display:flex; flex-direction:column; align-items:flex-start; max-width:min(80%, 42rem); min-width:0; }
    .fc-msg-row.is-mine .fc-msg-col { align-items:flex-end; }
    .fc-msg-author { margin-bottom:2px; padding-left:.5rem; font-size:.68rem; font-weight:600; color:#ff5100; }

    /* The bubble and its tools share a line; for my own messages the tools
       sit on the inside (left) edge, facing the conversation. */
    .fc-msg-line { display:flex; align-items:center; gap:.25rem; max-width:100%; min-width:0; }
    .fc-msg-row.is-mine .fc-msg-line { flex-direction:row-reverse; }

    .fc-bubble-mine, .fc-bubble-other { min-width:0; max-width:100%; padding:.5rem .875rem; border-radius:1rem; font-size:.875rem; line-height:1.45; }
    .fc-bubble-mine { background:linear-gradient(135deg,#ff5100,#ea580c); color:#fff; border-bottom-right-radius:.25rem; box-shadow:0 1px 2px rgba(255,81,0,.2); }
    .fc-bubble-other { background:#fff; color:#0f172a; border:1px solid #e2e8f0; border-bottom-left-radius:.25rem; box-shadow:0 1px 2px rgba(15,23,42,.04); }
    .fc-bubble-deleted { padding:.375rem .875rem; border-radius:1rem; background:#e2e8f0; color:#64748b; font-size:.78rem; font-style:italic; }

    /* Message text. pre-wrap keeps the sender's spacing; every line is its own
       block (App\Support\ChatFormat), so a blank line stays a blank line and a
       list item's wrapped text hangs under the text, not under its number. */
    .fc-bubble__text { white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; }
    .fc-fmt-li { display:flex; gap:.375em; }
    .fc-fmt-mk { flex:none; min-width:1.35em; text-align:right; font-variant-numeric:tabular-nums; }
    .fc-fmt-tx { flex:1; min-width:0; }

    .fc-atts { display:flex; flex-direction:column; gap:.375rem; margin-bottom:.25rem; }
    .fc-atts:last-child { margin-bottom:0; }
    .fc-att-img { display:block; overflow:hidden; border-radius:.625rem; }
    .fc-att-img img { display:block; max-width:100%; max-height:12rem; object-fit:cover; }
    .fc-att-file { display:flex; align-items:center; gap:.5rem; padding:.375rem .5rem; border-radius:.5rem; font-size:.78rem; color:inherit; text-decoration:none; background:#f1f5f9; }
    .fc-att-file:hover { background:#e2e8f0; }
    .fc-bubble-mine .fc-att-file { background:rgba(255,255,255,.14); }
    .fc-bubble-mine .fc-att-file:hover { background:rgba(255,255,255,.24); }
    .fc-att-file svg { width:1rem; height:1rem; flex:none; }
    .fc-att-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* Per-message tools: add reaction, delete. Revealed on hover and when
       anything in the message has focus — the bubble is tabindex="-1", so a
       tap on a phone focuses it and brings its tools up. */
    .fc-msg-tools { display:flex; gap:.125rem; flex:none; opacity:0; transition:opacity .12s; }
    .fc-msg-row:hover .fc-msg-tools,
    .fc-msg-col:focus-within .fc-msg-tools { opacity:1; }
    .fc-tool-btn { display:inline-flex; align-items:center; justify-content:center; width:1.75rem; height:1.75rem; padding:0; border:0; border-radius:9999px; background:transparent; color:#94a3b8; cursor:pointer; transition:background .12s, color .12s; }
    .fc-tool-btn svg { width:1rem; height:1rem; }
    .fc-tool-btn:hover { background:#e2e8f0; color:#0f172a; }
    .fc-tool-btn--danger:hover { background:#fee2e2; color:#dc2626; }

    /* ── Reactions ────────────────────────────────────────────────────
       Chips sit under the bubble and align with it. */
    .fc-reactions { display:flex; align-items:center; flex-wrap:wrap; gap:.25rem; margin-top:.25rem; }
    .fc-msg-row.is-mine .fc-reactions { justify-content:flex-end; }
    .fc-react-chip {
        display:inline-flex; align-items:center; gap:.2rem;
        padding:.1rem .4rem; border-radius:999px; cursor:pointer;
        background:#fff; border:1px solid #e2e8f0; color:#475569;
        font-size:.7rem; line-height:1.4; font-family:inherit;
        transition:background .12s, border-color .12s;
    }
    .fc-react-chip:hover { border-color:#cbd5e1; background:#f8fafc; }
    .fc-react-chip.is-mine { background:#fff1e9; border-color:#ffc4a3; color:#c2410c; font-weight:600; }
    .fc-react-chip .e { font-size:.8rem; line-height:1; }
    .fc-react-chip .n { font-variant-numeric:tabular-nums; }

    /* In flow, not absolute: .fc-thread is overflow-y:auto, and a popover
       anchored above the button is clipped by that scroll container on the
       topmost message (CSS cannot scroll one axis and overflow the other).
       An inline strip sidesteps clipping, stacking and scroll entirely. */
    .fc-react-picker {
        display:flex; flex-wrap:wrap; gap:.1rem; margin-top:.25rem; padding:.15rem .3rem;
        background:#fff; border:1px solid #e2e8f0; border-radius:999px;
        box-shadow:0 2px 8px rgba(15,23,42,.10);
    }
    .fc-react-picker button {
        border:0; background:transparent; cursor:pointer; border-radius:999px;
        padding:.15rem .25rem; font-size:1rem; line-height:1;
        transition:background .12s, transform .12s;
    }
    .fc-react-picker button:hover { background:#f1f5f9; transform:scale(1.15); }

    /* Message meta. Secondary text: smaller and quieter than the message it
       belongs to. These were Tailwind utilities (text-[0.6rem], h-3 w-3) that
       never compiled, and fell back to the inherited 16px. */
    .fc-msg-time { display:flex; align-items:center; gap:.25rem; margin-top:.2rem; padding:0 .25rem; font-size:.6875rem; line-height:1.2; color:#94a3b8; font-variant-numeric:tabular-nums; }
    .fc-msg-tick { width:.8rem; height:.8rem; flex-shrink:0; }
    .fc-msg-tick--read { width:1rem; color:#ff5100; }

    /* Messages still on their way, or that did not get there. */
    .fc-pending-list { display:flex; flex-direction:column; gap:.5rem; }
    .fc-pending-list:empty { display:none; }
    .fc-pending .fc-bubble-mine { opacity:.72; }
    .fc-pending.is-failed .fc-bubble-mine { opacity:1; background:#fff; color:#0f172a; border:1px solid #fca5a5; box-shadow:none; }
    .fc-pending__files { font-size:.78rem; opacity:.9; }
    .fc-pending__fail { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:.375rem; margin-top:.25rem; font-size:.72rem; color:#dc2626; }
    .fc-pending__fail svg { width:.9rem; height:.9rem; flex:none; }

    .fc-spinner { display:inline-block; width:.7rem; height:.7rem; border-radius:9999px; border:1.5px solid currentColor; border-right-color:transparent; animation:fc-spin .7s linear infinite; }
    @keyframes fc-spin { to { transform:rotate(360deg); } }

    /* Scrolled up reading history: the thread stays put, and this says how
       to get back — and how much arrived meanwhile. */
    .fc-jump { position:absolute; left:50%; bottom:.75rem; transform:translateX(-50%); z-index:2; display:inline-flex; align-items:center; gap:.375rem; padding:.375rem .75rem; border:1px solid #e2e8f0; border-radius:9999px; background:#fff; color:#0f172a; font:inherit; font-size:.75rem; font-weight:600; cursor:pointer; box-shadow:0 6px 16px -4px rgba(15,23,42,.25); }
    .fc-jump svg { width:.85rem; height:.85rem; color:#ff5100; }
    .fc-jump:hover { background:#fff7ed; }

    /* ── Composer ───────────────────────────────────────────────────── */
    .fc-composer-form { flex:none; background:#fff; border-top:1px solid #f1f5f9; }
    .fc-composer { position:relative; padding:.625rem .75rem .75rem; }
    .fc-composer__box { display:flex; align-items:flex-end; gap:.375rem; padding:.375rem .375rem .375rem .5rem; border:1px solid #e2e8f0; border-radius:1rem; background:#fff; transition:border-color .15s, box-shadow .15s; }
    .fc-composer__box:focus-within { border-color:#ff5100; box-shadow:0 0 0 3px rgba(255,81,0,.12); }
    .fc-composer__tools { display:flex; align-items:center; gap:.125rem; flex:none; padding-bottom:.125rem; }
    .fc-composer__field { flex:1; min-width:0; display:flex; flex-direction:column; }
    /* No border of its own — the box carries it — so scrollHeight is exactly
       the height autosize needs. Hidden overflow until JS says otherwise. */
    .fc-composer__input { display:block; width:100%; min-height:1.5rem; resize:none; border:0; background:transparent; padding:.3rem .25rem; font:inherit; font-size:.9rem; line-height:1.4; color:#0f172a; outline:none; overflow-y:hidden; scrollbar-width:thin; scrollbar-color:#cbd5e1 transparent; }
    .fc-composer__input::placeholder { color:#94a3b8; }
    /* Filament's form reset rings every textarea:focus in blue; the box
       around this one already shows focus. */
    .fc-composer__input:focus { outline:none; border-color:transparent; box-shadow:none; }
    .fc-composer__hint { padding:0 .25rem .125rem; font-size:.66rem; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

    .fc-compose-btn { display:flex; align-items:center; justify-content:center; height:2rem; width:2rem; flex-shrink:0; border:0; background:transparent; border-radius:8px; cursor:pointer; color:#64748b; transition:background .15s, color .15s; }
    .fc-compose-btn:hover { background:#f1f5f9; color:#0f172a; }

    .fc-send-btn { position:relative; display:flex; align-items:center; justify-content:center; height:2.5rem; width:2.5rem; flex-shrink:0; border:0; border-radius:9999px; background:#ff5100; color:#fff; cursor:pointer; box-shadow:0 2px 6px rgba(255,81,0,.35); transition:background .15s, opacity .15s; }
    .fc-send-btn:hover { background:#ea580c; }
    .fc-send-btn:disabled { opacity:.5; cursor:not-allowed; }
    .fc-send-btn__spin { position:absolute; width:1rem; height:1rem; opacity:0; }
    .fc-send-btn.is-busy .fc-send-btn__icon { opacity:0; }
    .fc-send-btn.is-busy .fc-send-btn__spin { opacity:1; }

    .fc-att-pending { display:flex; flex-wrap:wrap; gap:.375rem; padding:.5rem .75rem 0; }
    .fc-att-chip { display:inline-flex; align-items:center; gap:.375rem; max-width:14rem; padding:.2rem .3rem .2rem .6rem; border-radius:9999px; background:#f1f5f9; font-size:.72rem; color:#334155; }
    .fc-att-chip svg { width:.8rem; height:.8rem; flex:none; }
    .fc-att-chip__name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .fc-att-chip__x { display:inline-flex; align-items:center; justify-content:center; width:1.1rem; height:1.1rem; padding:0; border:0; border-radius:9999px; background:transparent; color:#64748b; font-size:.9rem; line-height:1; cursor:pointer; }
    .fc-att-chip__x:hover { background:#e2e8f0; color:#0f172a; }

    .fc-emoji-picker { position:absolute; bottom:calc(100% - .25rem); left:.75rem; z-index:10; display:grid; grid-template-columns:repeat(8, minmax(0,1fr)); gap:.25rem; width:16rem; max-width:calc(100% - 1.5rem); max-height:12rem; overflow-y:auto; padding:.5rem; border-radius:.625rem; background:#fff; box-shadow:0 10px 25px rgba(15,23,42,.18); border:1px solid rgba(15,23,42,.08); }
    .fc-emoji { padding:.25rem; border:0; background:transparent; border-radius:.25rem; font-size:1.125rem; line-height:1; cursor:pointer; }
    .fc-emoji:hover { background:#f1f5f9; }

    @media (max-width: 640px) {
        .fc-header { padding:.625rem .75rem; }
        .fc-thread { padding:.75rem .625rem; }
        .fc-msg-col { max-width:86%; }
        .fc-composer { padding:.5rem .5rem .625rem; }
    }
    /* No hover on touch: the tools come up on tap (focus-within), not on a
       hover that never happens. */
    @media (hover: none) {
        .fc-msg-row:hover .fc-msg-tools { opacity:0; }
        .fc-msg-col:focus-within .fc-msg-tools { opacity:1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .fc-spinner { animation-duration:1.6s; }
    }

    /* ── Topbar icon — resources/views/filament/employee/partials/chat-topbar-icon.blade.php ── */
    .fc-topbar-link { position:relative; display:inline-flex; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; margin-inline-end:.5rem; border-radius:.5rem; color:#64748b; text-decoration:none; transition:background .15s, color .15s; }
    .fc-topbar-link:hover, .fc-topbar-link:focus-visible { background:#fff7ed; color:#ff5100; outline:none; }
    .fc-topbar-link svg { width:1.25rem; height:1.25rem; }
    .fc-topbar-badge { position:absolute; top:-2px; right:-2px; display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:999px; border:2px solid #fff; background:#ef4444; color:#fff; font-size:.65rem; font-weight:700; line-height:1; box-shadow:0 1px 3px rgba(239,68,68,.4); }

    /* ── Dark theme ───────────────────────────────────────────────────
       Filament toggles `class="dark"` on <html> — from the panel's own
       light / dark / system switch, so the chat follows whatever the panel
       is showing. (The admin panel runs darkMode(false) and stays light.)
       Every rule above paints light unconditionally, which is why the chat
       stayed white on a dark dashboard. */
    .dark .fc-panel { background:#0f172a; color:#e2e8f0; border-color:rgba(255,255,255,.08); box-shadow:0 24px 48px -12px rgba(0,0,0,.55), 0 8px 16px -8px rgba(0,0,0,.4); }
    .dark .fc-header { background:#0f172a; border-bottom-color:rgba(255,255,255,.08); }
    .dark .fc-header__title { color:#f1f5f9; }
    .dark .fc-header__subtitle { color:#94a3b8; }
    .dark .fc-header__back { color:#cbd5e1; }
    .dark .fc-header__back:hover { background:rgba(255,255,255,.08); color:#f8fafc; }
    .dark .fc-presence { color:#4ade80; }
    .dark .fc-presence-dot { box-shadow:0 0 0 2px #0f172a; }
    .dark .fc-icon-btn { color:#cbd5e1; }
    .dark .fc-icon-btn:hover { background:rgba(255,255,255,.08); color:#f8fafc; }
    .dark .fc-icon-btn--primary { color:#fff; }
    .dark .fc-menu__pop { background:#1e293b; border-color:#334155; box-shadow:0 12px 28px -8px rgba(0,0,0,.6); }
    .dark .fc-menu__item { color:#e2e8f0; }
    .dark .fc-menu__item:hover, .dark .fc-menu__item:focus-visible { background:rgba(255,255,255,.07); }
    .dark .fc-menu__item svg { color:#94a3b8; }

    .dark .fc-body { background:#0f172a; }
    .dark .fc-search-wrap { border-bottom-color:rgba(255,255,255,.08); }
    .dark .fc-search > input { background:rgba(255,255,255,.06); color:#e2e8f0; }
    .dark .fc-search > input::placeholder { color:#64748b; }
    .dark .fc-search > input:focus { background:rgba(255,255,255,.10); border-color:#ff5100; }

    .dark .fc-row { border-bottom-color:rgba(255,255,255,.05); }
    .dark .fc-row:hover { background:rgba(255,255,255,.05); }
    .dark .fc-row__name { color:#f1f5f9; }
    .dark .fc-row__time { color:#64748b; }
    .dark .fc-row__preview { color:#94a3b8; }
    .dark .fc-row__preview--empty { color:#475569; }
    .dark .fc-row__badge { background:#1e293b; color:#cbd5e1; border-color:#334155; box-shadow:0 0 0 2px #0f172a; }

    .dark .fc-hit, .dark .fc-person { border-bottom-color:rgba(255,255,255,.05); }
    .dark .fc-hit:hover, .dark .fc-person:hover, .dark .fc-pick__row:hover { background:rgba(255,255,255,.05); }
    .dark .fc-hit__who { color:#e2e8f0; }
    .dark .fc-hit__when { color:#64748b; }
    .dark .fc-hit__body { color:#94a3b8; }
    .dark .fc-person__name, .dark .fc-member__name, .dark .fc-pick__name { color:#f1f5f9; }
    .dark .fc-person__sub { color:#94a3b8; }
    .dark .fc-check { background:transparent; border-color:#475569; }
    .dark .fc-check.is-on { border-color:#ff5100; background-color:#ff5100; }
    .dark .fc-note { color:#94a3b8; }
    .dark .fc-hint { color:#64748b; }
    .dark .fc-subbar { border-bottom-color:rgba(255,255,255,.08); }
    .dark .fc-link-btn { color:#fb923c; }
    .dark .fc-link-btn:hover { color:#fdba74; }
    .dark .fc-link-btn--danger { color:#f87171; }
    .dark .fc-link-btn--muted { color:#94a3b8; }
    .dark .fc-btn--danger { background:rgba(220,38,38,.12); border-color:rgba(248,113,113,.3); color:#f87171; }
    .dark .fc-btn--danger:hover { background:rgba(220,38,38,.2); }
    .dark .fc-input { background:rgba(255,255,255,.06); color:#e2e8f0; }
    .dark .fc-input::placeholder { color:#64748b; }
    .dark .fc-input:focus { background:rgba(255,255,255,.10); }
    .dark .fc-label { color:#94a3b8; }
    .dark .fc-members { border-color:rgba(255,255,255,.08); }
    .dark .fc-member + .fc-member, .dark .fc-field--split { border-top-color:rgba(255,255,255,.08); }

    .dark .fc-empty__title { color:#f1f5f9; }
    .dark .fc-empty__desc { color:#94a3b8; }
    .dark .fc-empty__icon { background:rgba(255,81,0,.14); color:#fb923c; }

    .dark .fc-thread { background:#020617; scrollbar-color:#334155 transparent; }
    .dark .fc-thread::-webkit-scrollbar-thumb { background:#334155; background-clip:content-box; }
    .dark .fc-bubble-other { background:#1e293b; color:#e2e8f0; border-color:#334155; box-shadow:none; }
    .dark .fc-bubble-deleted { background:#1e293b; color:#64748b; }
    .dark .fc-att-file { background:rgba(255,255,255,.06); }
    .dark .fc-att-file:hover { background:rgba(255,255,255,.1); }
    .dark .fc-date-divider { background:#1e293b; color:#94a3b8; border-color:#334155; }
    .dark .fc-msg-time { color:#64748b; }
    .dark .fc-tool-btn { color:#64748b; }
    .dark .fc-tool-btn:hover { background:rgba(255,255,255,.08); color:#f8fafc; }
    .dark .fc-tool-btn--danger:hover { background:rgba(220,38,38,.18); color:#f87171; }
    .dark .fc-react-chip { background:#1e293b; border-color:#334155; color:#cbd5e1; }
    .dark .fc-react-chip:hover { background:#243144; border-color:#475569; }
    .dark .fc-react-chip.is-mine { background:rgba(255,81,0,.18); border-color:rgba(255,126,63,.45); color:#fdba74; }
    .dark .fc-react-picker { background:#1e293b; border-color:rgba(255,255,255,.10); box-shadow:0 8px 20px rgba(0,0,0,.5); }
    .dark .fc-react-picker button:hover { background:rgba(255,255,255,.08); }
    .dark .fc-msg-author { color:#fb923c; }
    .dark .fc-pending.is-failed .fc-bubble-mine { background:#1e293b; color:#e2e8f0; border-color:rgba(248,113,113,.5); }
    .dark .fc-pending__fail { color:#f87171; }
    .dark .fc-jump { background:#1e293b; border-color:#334155; color:#f1f5f9; box-shadow:0 6px 16px -4px rgba(0,0,0,.6); }
    .dark .fc-jump:hover { background:#243144; }

    .dark .fc-composer-form { background:#0f172a; border-top-color:rgba(255,255,255,.08); }
    .dark .fc-composer__box { background:rgba(255,255,255,.04); border-color:#334155; }
    .dark .fc-composer__box:focus-within { border-color:#ff5100; }
    .dark .fc-composer__input { color:#e2e8f0; scrollbar-color:#334155 transparent; }
    .dark .fc-composer__input::placeholder { color:#64748b; }
    .dark .fc-composer__hint { color:#64748b; }
    .dark .fc-compose-btn { color:#94a3b8; }
    .dark .fc-compose-btn:hover { background:rgba(255,255,255,.08); color:#f8fafc; }
    .dark .fc-att-chip { background:rgba(255,255,255,.08); color:#cbd5e1; }
    .dark .fc-att-chip__x { color:#94a3b8; }
    .dark .fc-att-chip__x:hover { background:rgba(255,255,255,.1); color:#f8fafc; }
    .dark .fc-emoji-picker { background:#1e293b; border-color:rgba(255,255,255,.10); box-shadow:0 10px 25px rgba(0,0,0,.5); }
    .dark .fc-emoji:hover { background:rgba(255,255,255,.08); }

    .dark .fc-topbar-link { color:#94a3b8; }
    .dark .fc-topbar-link:hover, .dark .fc-topbar-link:focus-visible { background:rgba(255,81,0,.12); color:#fb923c; }
    .dark .fc-topbar-badge { border-color:#0f172a; }

/* ── New-message alert ────────────────────────────────────────────────
   Deliberately CSS and DOM only. The three signals that existed before —
   Notification, an AudioContext beep and a document.title flash — every
   one of them can fail silently: the first needs a permission browsers
   only grant on a user gesture, the second needs an AudioContext that is
   suspended until one, and the third is invisible unless you happen to be
   looking at a different tab. With the widget shut and the user on the
   page, nothing was visible but a small number changing on the bubble.
   These two need no permission and cannot be refused. */
@keyframes fc-fab-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 25px -5px rgba(255,81,0,.4), 0 0 0 0 rgba(239,68,68,.55); }
    50%      { transform: scale(1.06); box-shadow: 0 10px 25px -5px rgba(255,81,0,.5), 0 0 0 12px rgba(239,68,68,0); }
}
.fc-fab--alert { animation: fc-fab-pulse 1.1s ease-out 6; }

.fc-toast {
    position: absolute; bottom: 4.25rem; inset-inline-end: 0;
    max-width: 17rem; display: flex; gap: .6rem; align-items: flex-start;
    background: #0f172a; color: #f8fafc;
    border-radius: .75rem; padding: .6rem .75rem;
    box-shadow: 0 12px 30px -8px rgba(15,23,42,.5);
    font-size: .8rem; line-height: 1.35; cursor: pointer;
    animation: fc-toast-in .18s ease-out;
    z-index: 2;
}
@keyframes fc-toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fc-toast__dot { flex: none; width: .5rem; height: .5rem; border-radius: 9999px; background: #ef4444; margin-top: .35rem; }
.fc-toast__t { font-weight: 700; }
.fc-toast__b { color: #cbd5e1; }
.fc-toast__x { margin-inline-start: auto; background: none; border: 0; color: #64748b; cursor: pointer; font-size: .95rem; line-height: 1; padding: 0 0 0 .35rem; }
.dark .fc-toast { background: #1e293b; }
@media (prefers-reduced-motion: reduce) {
    .fc-fab--alert { animation: none; outline: 3px solid rgba(239,68,68,.7); outline-offset: 3px; }
    .fc-toast { animation: none; }
}

/* ── Ticket detail drawer — resources/views/livewire/ticket-detail-drawer.blade.php ── */

/* ── Drawer chrome ──────────────────────────────────────────── */
.tdd-backdrop {
    position: fixed; inset: 0; background: rgba(15,23,42,.45);
    z-index: 90; display: none;
}
.tdd-backdrop.open { display: block; }
.tdd {
    position: fixed; top: 0; right: 0; height: 100vh;
    width: 100%; max-width: 760px;
    background: white;
    box-shadow: -16px 0 40px rgba(15,23,42,.18);
    transform: translateX(100%);
    transition: transform .25s cubic-bezier(.4,0,.2,1);
    z-index: 100;
    display: flex; flex-direction: column;
}
.tdd.open { transform: translateX(0); }
.tdd-head {
    display: flex; align-items: center; gap: .7rem;
    padding: .85rem 1.1rem;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}
.tdd-code { font-size: .85rem; font-weight: 700; color: var(--tdd-accent, #6366f1); letter-spacing: .04em; }
.tdd-spacer { flex: 1; }
.tdd-close {
    background: transparent; border: none; cursor: pointer;
    color: #64748b; font-size: 1.4rem; line-height: 1;
    width: 32px; height: 32px; border-radius: .4rem;
}
.tdd-close:hover { background: #e2e8f0; color: #1e293b; }

.tdd-tabs { display: flex; padding: 0 1.1rem; border-bottom: 1px solid #e2e8f0; background: white; overflow-x: auto; }
.tdd-tab {
    padding: .65rem 1rem;
    font-size: .82rem; font-weight: 600;
    color: #64748b;
    border: none; background: transparent;
    border-bottom: 2px solid transparent;
    cursor: pointer; white-space: nowrap;
}
.tdd-tab.active { color: var(--tdd-accent, #6366f1); border-bottom-color: var(--tdd-accent, #6366f1); }
.tdd-tab:hover { color: #1e293b; }
.tdd-tab-count {
    font-size: .65rem; background: #e2e8f0; color: #64748b;
    padding: 0 .35rem; border-radius: 999px; margin-left: .2rem;
}

.tdd-body { flex: 1; overflow-y: auto; padding: 1rem 1.1rem 1.5rem; }

/* ── Create mode ────────────────────────────────────────────────────── */
.tdd-create-desc { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.tdd-create-files { display: flex; align-items: center; gap: .5rem; cursor: pointer; }
.tdd-create-files-btn {
    display: inline-flex; align-items: center; gap: .3rem;
    border: 1px dashed #cbd5e1; border-radius: .45rem;
    padding: .3rem .6rem; font-size: .74rem; font-weight: 600; color: #475569;
}
.tdd-create-files:hover .tdd-create-files-btn { border-color: var(--tdd-accent, #6366f1); color: var(--tdd-accent, #6366f1); }
.tdd-hint { font-size: .7rem; color: #94a3b8; }

.tdd-create-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.25rem; }
.tdd-btn-primary {
    padding: .5rem 1rem; border: 0; border-radius: .5rem; cursor: pointer;
    background: var(--tdd-accent, #6366f1); color: #fff;
    font-size: .85rem; font-weight: 600; font-family: inherit;
}
.tdd-btn-primary:hover { filter: brightness(.93); }
.tdd-btn-primary[disabled] { opacity: .6; cursor: default; }
.tdd-btn-ghost {
    padding: .5rem 1rem; border: 1px solid #e2e8f0; border-radius: .5rem; cursor: pointer;
    background: transparent; color: #475569;
    font-size: .85rem; font-weight: 600; font-family: inherit;
}
.tdd-btn-ghost:hover { background: #f1f5f9; color: #0f172a; }

/* ── Details tab ────────────────────────────────────────────── */
.tdd-subject {
    width: 100%; font-size: 1.25rem; font-weight: 700; color: #0f172a;
    background: transparent; border: 1px solid transparent;
    padding: .35rem .5rem; border-radius: .4rem;
    outline: none;
    margin-bottom: .85rem;
}
.tdd-subject:hover { border-color: #e2e8f0; }
.tdd-subject:focus { border-color: #6366f1; background: white; }

.tdd-grid { display: grid; grid-template-columns: 110px 1fr; gap: .55rem .85rem; align-items: center; }
.tdd-label { font-size: .72rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; }
.tdd-static { font-size: .85rem; color: #0f172a; }
.tdd-input,
.tdd-select {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    padding: .35rem .5rem; border-radius: .4rem;
    font-size: .85rem; color: #0f172a;
    outline: none;
}
.tdd-input:hover, .tdd-select:hover { border-color: #e2e8f0; background: #f8fafc; }
.tdd-input:focus, .tdd-select:focus { border-color: var(--tdd-accent, #6366f1); background: white; }
.tdd-subject:focus { border-color: var(--tdd-accent, #6366f1) !important; }
.tdd-rte-wrap:focus-within { border-color: var(--tdd-accent, #6366f1) !important; }
.tdd-rte a { color: var(--tdd-accent, #6366f1) !important; }
.tdd-new-comment textarea:focus { border-color: var(--tdd-accent, #6366f1) !important; }
.tdd-post-btn { background: var(--tdd-accent, #6366f1) !important; }
.tdd-post-btn:hover { filter: brightness(.92); }
.tdd-post-btn:disabled { background: #cbd5e1 !important; filter: none; cursor: not-allowed; }
.tdd-comment-meta strong { color: #1e293b; }

/* ── Searchable combobox (replaces native select for Assignee) ── */
.tdd-combo { position: relative; }
.tdd-combo-trigger {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    padding: .35rem .5rem;
    border-radius: .4rem;
    font-size: .85rem;
    color: #0f172a;
    cursor: pointer;
    text-align: left;
    display: flex; align-items: center; gap: .35rem;
    padding-right: 1.85rem;
    position: relative;
}
.tdd-combo-trigger:hover { border-color: #e2e8f0; background: #f8fafc; }
.tdd-combo-trigger:focus,
.tdd-combo.open .tdd-combo-trigger { border-color: var(--tdd-accent, #6366f1); background: white; outline: none; }
.tdd-combo-chevron {
    position: absolute;
    right: .5rem; top: 50%;
    transform: translateY(-50%);
    width: 1rem; height: 1rem;
    color: #64748b;
    pointer-events: none;
}
.tdd-combo-menu {
    position: absolute;
    top: calc(100% + 4px); left: 0; right: 0;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: .5rem;
    box-shadow: 0 10px 30px rgba(15,23,42,.12);
    z-index: 50;
    max-height: 280px;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.tdd-combo-search {
    width: 100%;
    padding: .5rem .65rem;
    border: none;
    border-bottom: 1px solid #f1f5f9;
    font-size: .8rem;
    outline: none;
    background: white;
    color: #0f172a;
}
.tdd-combo-options { overflow-y: auto; padding: .25rem; }
.tdd-combo-option {
    display: flex; align-items: center; gap: .45rem;
    width: 100%;
    background: transparent; border: none;
    padding: .4rem .55rem;
    font-size: .85rem; color: #1e293b;
    text-align: left; cursor: pointer;
    border-radius: .35rem;
}
.tdd-combo-option:hover { background: #f1f5f9; }
.tdd-combo-option.selected { background: rgba(99,102,241,.08); color: var(--tdd-accent, #6366f1); font-weight: 600; }
.tdd-combo-option.selected::before { content: '✓'; font-weight: 700; }
.tdd-combo-empty { padding: .6rem .65rem; font-size: .78rem; color: #94a3b8; text-align: center; }

.dark .tdd-combo-menu { background: #1e293b; border-color: #334155; }
.dark .tdd-combo-search { background: #1e293b; color: #f1f5f9; border-color: #334155; }
.dark .tdd-combo-option { color: #f1f5f9; }
.dark .tdd-combo-option:hover { background: #0f172a; }

/* Single-chevron treatment for native selects (defeats Tailwind preflight's tiling). */
select.tdd-select {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .5rem center;
    background-size: 1rem 1rem;
    padding-right: 1.85rem;
}

.tdd-section { margin-top: 1.4rem; }
.tdd-section-title {
    font-size: .8rem; font-weight: 700; color: #0f172a;
    margin-bottom: .55rem;
    display: flex; align-items: center; justify-content: space-between;
}
.tdd-section-title small { font-size: .72rem; color: #94a3b8; font-weight: 500; }

/* ── Rich text editor ──────────────────────────────────────── */
.tdd-rte-wrap { border: 1px solid #e2e8f0; border-radius: .55rem; background: white; overflow: hidden; }
.tdd-rte-wrap:focus-within { border-color: #6366f1; }
.tdd-rte-toolbar {
    display: flex; gap: .15rem;
    padding: .35rem;
    border-bottom: 1px solid #f1f5f9;
    background: #f8fafc;
}
.tdd-rte-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border: none; background: transparent;
    color: #64748b; border-radius: .35rem;
    font-size: .78rem; font-weight: 700;
    cursor: pointer;
}
.tdd-rte-btn:hover { background: #e2e8f0; color: #1e293b; }
.tdd-rte-btn svg { width: .95rem; height: .95rem; }
.tdd-rte-sep { width: 1px; background: #e2e8f0; margin: .2rem .25rem; }
.tdd-rte {
    min-height: 130px;
    padding: .65rem .8rem;
    font-size: .9rem; color: #1e293b;
    outline: none;
    line-height: 1.55;
}
.tdd-rte:empty::before {
    content: attr(data-placeholder);
    color: #cbd5e1;
    pointer-events: none;
}
.tdd-rte p { margin: 0 0 .55rem; }
.tdd-rte ul, .tdd-rte ol { padding-left: 1.4rem; margin: 0 0 .55rem; }
.tdd-rte a { color: #6366f1; text-decoration: underline; }
.tdd-rte img { max-width: 100%; height: auto; border-radius: .35rem; margin: .35rem 0; }
.tdd-rte blockquote {
    border-left: 3px solid #cbd5e1;
    padding-left: .65rem; margin: 0 0 .55rem; color: #475569;
}
.tdd-rte code {
    background: #f1f5f9; padding: 0 .25rem; border-radius: .25rem;
    font-family: ui-monospace, 'SF Mono', monospace; font-size: .82em;
}

/* ── Comments / History ────────────────────────────────────── */
.tdd-comment {
    display: flex; gap: .65rem;
    padding: .7rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.tdd-comment:last-child { border-bottom: none; }
.tdd-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: #6366f1; color: white;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; flex-shrink: 0;
}
.tdd-comment-meta { font-size: .72rem; color: #94a3b8; margin-bottom: .15rem; }
.tdd-comment-body { font-size: .85rem; color: #1e293b; white-space: pre-wrap; line-height: 1.5; }

.tdd-history-row {
    display: flex; gap: .6rem;
    font-size: .82rem; color: #475569;
    padding: .5rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.tdd-history-row:last-child { border-bottom: none; }
.tdd-history-time { font-size: .7rem; color: #94a3b8; }
.tdd-history-summary strong { color: #0f172a; }

.tdd-new-comment {
    margin-top: 1rem; padding: .85rem;
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: .6rem;
}
.tdd-new-comment textarea {
    width: 100%; min-height: 80px;
    border: 1px solid #e2e8f0; border-radius: .4rem;
    padding: .5rem .6rem; font-size: .85rem;
    background: white; outline: none;
    resize: vertical;
}
.tdd-new-comment textarea:focus { border-color: #6366f1; }
.tdd-post-btn {
    margin-top: .55rem;
    background: #6366f1; color: white;
    font-size: .8rem; font-weight: 600;
    padding: .45rem 1rem; border: none; border-radius: .4rem;
    cursor: pointer;
}
.tdd-post-btn:hover { background: #4f46e5; }
.tdd-post-btn:disabled { background: #cbd5e1; cursor: not-allowed; }

/* ── Attachments tab ──────────────────────────────────────── */
.tdd-att-upload {
    /* Force block layout so the label doesn't wrap inline and paint
       one dashed border per wrap-line (which was rendering as a
       stack of phantom boxes on the left). */
    display: block !important;
    width: 100%;
    box-sizing: border-box;

    position: relative;
    border: 2px dashed #cbd5e1; border-radius: .75rem;
    padding: 1.4rem 1rem;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    color: #475569;
    margin-bottom: .85rem;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.tdd-att-upload:hover {
    border-color: var(--tdd-accent, #6366f1);
    background: #fff7f2;
}
.tdd-att-upload.dragging {
    border-color: var(--tdd-accent, #6366f1);
    background: rgba(255, 81, 0, .06);
    transform: scale(1.005);
}
.tdd-att-upload .upload-icon {
    width: 38px; height: 38px;
    margin: 0 auto .55rem;
    color: var(--tdd-accent, #6366f1);
    opacity: .8;
}
.tdd-att-upload .upload-primary {
    font-size: .9rem; font-weight: 700; color: #1e293b;
    margin-bottom: .15rem;
}
.tdd-att-upload .upload-primary span { color: var(--tdd-accent, #6366f1); }
.tdd-att-upload .upload-sub {
    font-size: .72rem; color: #94a3b8;
}
/* File input is fully hidden via display:none and the label uses
   `for="..."` to trigger it. `clip`-style hiding leaves the browser's
   native ::file-selector-button button visible in some setups
   (Chromium + Tailwind preflight) — display:none doesn't. */
.tdd-att-input { display: none !important; }
.tdd-att-upload .upload-pending {
    display: inline-flex; align-items: center; gap: .35rem;
    margin-top: .65rem; padding: .35rem .75rem;
    background: white; border: 1px solid var(--tdd-accent, #6366f1); color: var(--tdd-accent, #6366f1);
    border-radius: .4rem; font-size: .78rem; font-weight: 600;
    cursor: pointer;
}
.tdd-att-upload .upload-pending:hover { filter: brightness(.95); }

/* ── Image lightbox preview ────────────────────────────────── */
.tdd-lightbox {
    position: fixed; inset: 0;
    background: rgba(15,23,42,.85);
    z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 2rem;
}
.tdd-lightbox img {
    max-width: 100%; max-height: 92vh;
    border-radius: .55rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
    cursor: zoom-out;
}
.tdd-lightbox-close {
    position: absolute; top: 1rem; right: 1rem;
    background: rgba(255,255,255,.12); border: none;
    color: white; font-size: 1.5rem; cursor: pointer;
    width: 38px; height: 38px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.tdd-lightbox-close:hover { background: rgba(255,255,255,.22); }
.tdd-lightbox-caption {
    position: absolute; bottom: 1.25rem; left: 50%;
    transform: translateX(-50%);
    color: white; font-size: .82rem;
    background: rgba(0,0,0,.45); padding: .3rem .8rem;
    border-radius: 999px;
}
.tdd-att-thumb { cursor: zoom-in; }
.tdd-att-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .65rem; }
.tdd-att-card {
    border: 1px solid #e2e8f0; border-radius: .55rem;
    overflow: hidden; background: white;
    display: flex; flex-direction: column;
}
.tdd-att-thumb {
    height: 110px; background: #f1f5f9;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.tdd-att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tdd-att-thumb .file-icon {
    width: 38px; height: 38px; color: #94a3b8;
}
.tdd-att-meta { padding: .5rem .65rem; font-size: .75rem; }
.tdd-att-name {
    color: #1e293b; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tdd-att-sub { color: #94a3b8; font-size: .68rem; margin-top: .15rem; }
.tdd-att-actions {
    display: flex; gap: .35rem;
    padding: .25rem .55rem .55rem;
}
.tdd-att-actions a, .tdd-att-actions button {
    flex: 1; font-size: .72rem;
    padding: .3rem .5rem; border-radius: .35rem;
    text-align: center;
    text-decoration: none; cursor: pointer;
    border: 1px solid #e2e8f0; background: white; color: #475569;
}
.tdd-att-actions a:hover { background: #f8fafc; }
.tdd-att-actions button:hover { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

.tdd-empty { color: #94a3b8; font-size: .85rem; text-align: center; padding: 1.5rem; }

.dark .tdd                  { background: #1e293b; color: #f1f5f9; }
.dark .tdd-head             { background: #0f172a; border-color: #334155; }
.dark .tdd-tabs             { background: #1e293b; border-color: #334155; }
.dark .tdd-tab.active       { color: #a5b4fc; border-bottom-color: #a5b4fc; }
.dark .tdd-btn-ghost        { border-color: #334155; color: #cbd5e1; }
.dark .tdd-btn-ghost:hover  { background: #1e293b; color: #f8fafc; }
.dark .tdd-rte-wrap         { background: #0f172a; border-color: #334155; }
.dark .tdd-rte-toolbar      { background: #1e293b; border-color: #334155; }
.dark .tdd-rte              { color: #f1f5f9; }
.dark .tdd-att-card         { background: #0f172a; border-color: #334155; }

/* ── AI assistant widget — resources/views/livewire/ai-assistant-widget.blade.php ── */

.aia{position:fixed; bottom:1.25rem; right:1.25rem; z-index:9998;
    font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
    color:#0f172a}
.aia *{box-sizing:border-box}
.aia [x-cloak]{display:none !important}

/* In Urdu and Arabic the whole panel mirrors — the sidebar rail is on the
   right in RTL, so a bubble pinned bottom-right would sit on top of it. */
[dir="rtl"] .aia{right:auto; left:1.25rem}

/* ── bubble ─────────────────────────────────────────────────────── */
/* Every color-mix() here is preceded by a flat fallback. An unsupported
   function makes the whole declaration invalid, and the cascade then keeps
   the previous one — without the fallback line an older browser would draw
   a transparent bubble with a white icon on it, i.e. nothing. */
.aia-fab{display:flex; align-items:center; justify-content:center; height:3.25rem; width:3.25rem;
    border:0; border-radius:9999px; cursor:pointer; color:#fff;
    background:var(--aia-accent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--aia-accent) 78%, #fff), var(--aia-accent));
    box-shadow:0 10px 25px -5px rgba(15,23,42,.25), 0 4px 10px -2px rgba(15,23,42,.12);
    box-shadow:0 10px 25px -5px color-mix(in srgb, var(--aia-accent) 40%, transparent), 0 4px 10px -2px rgba(15,23,42,.12);
    transition:transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s}
.aia-fab svg{width:1.4rem; height:1.4rem}
.aia-fab:hover{transform:translateY(-2px) scale(1.03);
    box-shadow:0 14px 30px -6px color-mix(in srgb, var(--aia-accent) 48%, transparent)}
.aia-fab:focus-visible{outline:2px solid var(--aia-accent); outline-offset:3px}

/* ── panel ──────────────────────────────────────────────────────── */
.aia-panel{display:flex; flex-direction:column; width:26rem; max-width:calc(100vw - 2.5rem);
    height:38rem; max-height:calc(100vh - 6rem); background:#fff; border-radius:16px; overflow:hidden;
    border:1px solid rgba(15,23,42,.07);
    box-shadow:0 24px 48px -12px rgba(15,23,42,.18), 0 8px 16px -8px rgba(15,23,42,.08)}

/* On a phone it stops pretending to be a floating card and becomes the
   screen, which is what every messaging app does at this width. */
@media (max-width:520px){
    .aia{bottom:0; right:0; left:0}
    [dir="rtl"] .aia{left:0}
    .aia-fab{position:fixed; bottom:1rem; right:1rem}
    [dir="rtl"] .aia-fab{right:auto; left:1rem}
    .aia-panel{width:100vw; max-width:100vw; height:100vh; max-height:100vh; border-radius:0; border:0}
    @supports (height:100dvh){ .aia-panel{height:100dvh; max-height:100dvh} }
}

.aia-head{display:flex; align-items:center; justify-content:space-between; gap:.75rem;
    padding:.8rem 1rem; border-bottom:1px solid #f1f5f9; background:#fff}
.aia-head__id{display:flex; align-items:center; gap:.625rem; min-width:0}
.aia-head__mark{display:flex; align-items:center; justify-content:center; height:2.125rem; width:2.125rem;
    flex-shrink:0; border-radius:9999px; color:#fff;
    background:var(--aia-accent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--aia-accent) 78%, #fff), var(--aia-accent));
    box-shadow:0 2px 4px color-mix(in srgb, var(--aia-accent) 25%, transparent)}
.aia-head__mark svg{width:1.05rem; height:1.05rem}
.aia-head__title{font-size:.95rem; font-weight:650; letter-spacing:-.01em; line-height:1.2}
.aia-head__sub{font-size:.72rem; color:#64748b; margin-top:1px}
.aia-head__actions{display:flex; align-items:center; gap:.25rem}
.aia-icon{display:inline-flex; align-items:center; justify-content:center; height:2rem; width:2rem;
    border:0; background:transparent; color:#64748b; border-radius:8px; cursor:pointer; transition:.15s}
.aia-icon svg{width:1.05rem; height:1.05rem}
.aia-icon:hover{background:#f1f5f9; color:#0f172a}

/* ── thread ─────────────────────────────────────────────────────── */
.aia-thread{flex:1; overflow-y:auto; padding:1rem; background:#f8fafc; scroll-behavior:smooth}
.aia-turn{margin-bottom:.9rem; display:flex; flex-direction:column; align-items:flex-start}
.aia-turn--me{align-items:flex-end}
.aia-bubble{max-width:88%; padding:.55rem .8rem; border-radius:14px 14px 14px 4px; background:#fff;
    border:1px solid #eef2f7; font-size:.85rem; line-height:1.55; white-space:pre-wrap; word-break:break-word;
    box-shadow:0 1px 2px rgba(15,23,42,.04)}
.aia-bubble--me{border-radius:14px 14px 4px 14px; color:#fff; border-color:transparent;
    background:var(--aia-accent);
    background:linear-gradient(135deg, color-mix(in srgb, var(--aia-accent) 88%, #000 0%), var(--aia-accent))}
.aia-bubble--bad{background:#fef2f7; background:#fef2f2; border-color:#fecaca; color:#b91c1c}
.aia-time{font-size:.65rem; color:#94a3b8; margin-top:.25rem; padding:0 .25rem}

.aia-bubble--thinking{display:inline-flex; align-items:center; gap:.3rem; padding:.6rem .85rem}
.aia-thinking-text{font-size:.78rem; color:#64748b; margin-left:.35rem}
.aia-dot{width:.375rem; height:.375rem; border-radius:9999px; background:var(--aia-accent); opacity:.35;
    animation:aia-blink 1.3s infinite ease-in-out}
.aia-dot:nth-child(2){animation-delay:.18s}
.aia-dot:nth-child(3){animation-delay:.36s}
@keyframes aia-blink{0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){ .aia-dot{animation:none; opacity:.6} .aia-thread{scroll-behavior:auto} }

/* ── empty state ────────────────────────────────────────────────── */
.aia-empty{text-align:center; padding:2rem 1rem 1rem}
.aia-empty__mark{display:inline-flex; align-items:center; justify-content:center; height:3rem; width:3rem;
    border-radius:9999px; margin-bottom:.75rem; color:var(--aia-accent);
    background:#f8fafc;
    background:color-mix(in srgb, var(--aia-accent) 10%, #fff)}
.aia-empty__mark svg{width:1.5rem; height:1.5rem}
.aia-empty b{display:block; font-size:.95rem; font-weight:650}
.aia-empty p{margin:.4rem auto 0; max-width:30ch; font-size:.78rem; line-height:1.6; color:#64748b}
.aia-chips{display:flex; flex-direction:column; gap:.4rem; margin-top:1rem}
.aia-chip{padding:.5rem .75rem; border-radius:10px; border:1px solid #e2e8f0; background:#fff;
    font-size:.78rem; font-family:inherit; color:#334155; text-align:left; cursor:pointer; transition:.15s}
.aia-chip:hover{border-color:var(--aia-accent); color:var(--aia-accent);
    background:color-mix(in srgb, var(--aia-accent) 5%, #fff)}

/* ── blocks ─────────────────────────────────────────────────────── */
.aia-block{width:100%; margin-top:.5rem}

.aia-figure{background:#fff; border:1px solid #eef2f7; border-radius:12px; padding:.85rem .95rem;
    box-shadow:0 1px 2px rgba(15,23,42,.04)}
.aia-figure__label{font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#94a3b8}
.aia-figure__value{margin-top:.35rem; font-size:1.55rem; font-weight:750; letter-spacing:-.03em; line-height:1.1;
    color:#0f172a; font-variant-numeric:tabular-nums}
.aia-figure__cur{font-size:.9rem; font-weight:650; color:#64748b; margin-right:.15rem}
.aia-figure__meta{margin-top:.3rem; font-size:.7rem; color:#94a3b8}
.aia-figure__extra{margin-top:.6rem; padding-top:.55rem; border-top:1px solid #f1f5f9; display:flex;
    flex-direction:column; gap:.3rem}
.aia-figure__row{display:flex; justify-content:space-between; gap:1rem; font-size:.75rem; color:#64748b}
.aia-figure__row b{color:#0f172a; font-variant-numeric:tabular-nums}

.aia-table{background:#fff; border:1px solid #eef2f7; border-radius:12px; overflow:hidden;
    box-shadow:0 1px 2px rgba(15,23,42,.04)}
.aia-table__head{display:flex; align-items:baseline; justify-content:space-between; gap:.5rem;
    padding:.6rem .75rem; border-bottom:1px solid #f1f5f9}
.aia-table__title{font-size:.78rem; font-weight:650}
.aia-table__count{font-size:.65rem; color:#94a3b8; white-space:nowrap}
.aia-table__scroll{max-height:15rem; overflow:auto}
.aia-table table{width:100%; border-collapse:collapse; font-size:.74rem}
.aia-table th{position:sticky; top:0; background:#f8fafc; text-align:left; padding:.4rem .6rem;
    font-size:.62rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#94a3b8;
    border-bottom:1px solid #eef2f7; white-space:nowrap}
.aia-table td{padding:.4rem .6rem; border-bottom:1px solid #f8fafc; white-space:nowrap}
.aia-table tbody tr:last-child td{border-bottom:0}
.aia-table tfoot td{background:#f8fafc; font-weight:750; border-top:1px solid #eef2f7}
.aia-table .aia-n{text-align:right; font-variant-numeric:tabular-nums}

.aia-source{margin-top:.35rem; font-size:.65rem; color:#94a3b8; padding:0 .15rem}
.aia-open, .aia-link{display:inline-flex; align-items:center; gap:.25rem; margin-top:.4rem;
    font-size:.72rem; font-weight:650; color:var(--aia-accent); text-decoration:none}
.aia-open svg, .aia-link svg{width:.85rem; height:.85rem}
.aia-open:hover, .aia-link:hover{text-decoration:underline}
.aia-link{padding:.5rem .7rem; border:1px solid #e2e8f0; border-radius:10px; background:#fff; margin-top:0}
.aia-link:hover{border-color:var(--aia-accent); text-decoration:none;
    background:color-mix(in srgb, var(--aia-accent) 5%, #fff)}
.aia-note{background:#fff; border:1px solid #eef2f7; border-radius:12px; padding:.6rem .75rem;
    font-size:.78rem; line-height:1.55; color:#334155}

/* ── composer ───────────────────────────────────────────────────── */
.aia-composer{display:flex; align-items:flex-end; gap:.4rem; padding:.7rem .75rem;
    border-top:1px solid #f1f5f9; background:#fff}
.aia-composer textarea{flex:1; resize:none; border:1px solid #e2e8f0; border-radius:10px;
    padding:.55rem .7rem; font-size:.82rem; font-family:inherit; line-height:1.5; color:#0f172a;
    background:#f8fafc; outline:none; max-height:110px; transition:.15s}
.aia-composer textarea::placeholder{color:#94a3b8}
.aia-composer textarea:focus{background:#fff; border-color:var(--aia-accent);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--aia-accent) 12%, transparent)}
.aia-composer textarea:disabled{opacity:.6; cursor:progress}
.aia-mic, .aia-send{display:inline-flex; align-items:center; justify-content:center; height:2.3rem;
    width:2.3rem; flex-shrink:0; border-radius:10px; border:0; cursor:pointer; transition:.15s}
.aia-mic{background:#f1f5f9; color:#64748b}
.aia-mic:hover{background:#e2e8f0; color:#0f172a}
.aia-mic--on{background:#fee2e2; color:#b91c1c; animation:aia-pulse 1.4s infinite}
@keyframes aia-pulse{0%,100%{opacity:1} 50%{opacity:.55}}
.aia-mic svg, .aia-send svg{width:1.05rem; height:1.05rem}
.aia-send{color:#fff; background:var(--aia-accent);
    box-shadow:0 2px 6px color-mix(in srgb, var(--aia-accent) 30%, transparent)}
.aia-send:hover:not(:disabled){filter:brightness(1.06)}
.aia-send:disabled{opacity:.5; cursor:progress}

.aia-foot{padding:.45rem .75rem .6rem; text-align:center; font-size:.62rem; color:#cbd5e1; background:#fff}

/* ── Performance review form — App\Filament\Concerns\ReviewsATeam ──────────
   The lead's review sheet: chips under the name, a live scoreboard, and each
   project as a card with three sliders. Plain classes: Filament ships its CSS
   prebuilt, so utilities it never uses itself are not in it. */

/* Header: period · status · designation, then a line on what that means. */
.rvw-head { display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.rvw-chip { display:inline-flex; align-items:center; font-size:12px; font-weight:600; line-height:1; padding:6px 10px; border-radius:999px; background:#f1f5f9; color:#334155; }
.rvw-chip.open    { background:#eff6ff; color:#1d4ed8; }
.rvw-chip.due     { background:#fffbeb; color:#b45309; }
.rvw-chip.overdue { background:#fef2f2; color:#b91c1c; }
.rvw-chip.done    { background:#ecfdf5; color:#047857; }
.rvw-chip.muted   { background:transparent; color:#64748b; border:1px solid #e2e8f0; }
.rvw-note { display:block; margin-top:8px; font-size:12.5px; color:#64748b; }
.dark .rvw-chip { background:rgba(255,255,255,.06); color:#cbd5e1; }
.dark .rvw-chip.open { background:rgba(59,130,246,.15); color:#93c5fd; }
.dark .rvw-chip.due { background:rgba(245,158,11,.15); color:#fcd34d; }
.dark .rvw-chip.overdue { background:rgba(239,68,68,.15); color:#fca5a5; }
.dark .rvw-chip.done { background:rgba(16,185,129,.15); color:#6ee7b7; }
.dark .rvw-chip.muted { border-color:rgba(255,255,255,.1); color:#94a3b8; }

/* Scoreboard: the review as it will be saved. */
.rvw-sum { display:grid; grid-template-columns:1.3fr 1fr 1fr .8fr; gap:10px; }
@media (max-width: 720px) { .rvw-sum { grid-template-columns:1fr 1fr; } }
.rvw-sum-card { position:relative; display:flex; flex-direction:column; gap:2px; padding:12px 14px; border-radius:14px; border:1px solid #e5e7eb; background:#fff; overflow:hidden; }
.rvw-sum-card .k { font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#64748b; }
.rvw-sum-card .v { font-size:22px; font-weight:800; letter-spacing:-.02em; color:#0f172a; font-variant-numeric:tabular-nums; }
.rvw-sum-card .s { font-size:11.5px; color:#94a3b8; }
.rvw-sum-card.main { background:linear-gradient(135deg,#fff7ed,#fff); border-color:#fed7aa; }
.rvw-sum-card.main .v { font-size:26px; color:#ea580c; }
.rvw-sum-card.main.band-low  { background:linear-gradient(135deg,#fef2f2,#fff); border-color:#fecaca; } .rvw-sum-card.main.band-low .v  { color:#dc2626; }
.rvw-sum-card.main.band-mid  { background:linear-gradient(135deg,#fffbeb,#fff); border-color:#fde68a; } .rvw-sum-card.main.band-mid .v  { color:#d97706; }
.rvw-sum-card.main.band-high { background:linear-gradient(135deg,#ecfdf5,#fff); border-color:#a7f3d0; } .rvw-sum-card.main.band-high .v { color:#059669; }
.rvw-sum-card.over { border-color:#fecaca; background:#fef2f2; } .rvw-sum-card.over .v, .rvw-sum-card.over .s { color:#dc2626; }
.rvw-bar { display:block; height:4px; border-radius:99px; background:#f1f5f9; margin-top:8px; overflow:hidden; }
.rvw-bar i { display:block; height:100%; border-radius:inherit; background:#ea580c; transition:width .25s ease; }
.rvw-sum-card.over .rvw-bar i { background:#dc2626; }
.dark .rvw-sum-card { background:rgba(255,255,255,.03); border-color:rgba(255,255,255,.08); }
.dark .rvw-sum-card .v { color:#f8fafc; }
.dark .rvw-sum-card.main { background:rgba(234,88,12,.08); border-color:rgba(234,88,12,.3); }
.dark .rvw-bar { background:rgba(255,255,255,.08); }

/* Project lines: each a card. */
.rvw-lines .fi-fo-repeater-item { border-radius:14px; }
.rvw-lines .fi-fo-repeater-item-header { padding-block:10px; }
.rvw-lines .fi-fo-repeater-item-header-label { font-weight:700; }

/* The slider: a filled track in the score's colour, the exact figure beside it. */
.rvw-slider { --rvw-c:#ea580c; --rvw-p:0%; display:flex; align-items:center; gap:10px; }
.rvw-slider.band-low  { --rvw-c:#dc2626; }
.rvw-slider.band-mid  { --rvw-c:#d97706; }
.rvw-slider.band-high { --rvw-c:#059669; }
.rvw-range { -webkit-appearance:none; appearance:none; flex:1; min-width:0; height:8px; border-radius:99px; cursor:pointer; outline:none;
    background:linear-gradient(to right, var(--rvw-c) 0%, var(--rvw-c) var(--rvw-p), #e5e7eb var(--rvw-p), #e5e7eb 100%); }
.rvw-range::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; border:3px solid var(--rvw-c); box-shadow:0 1px 4px rgba(15,23,42,.2); transition:transform .12s ease; }
.rvw-range::-moz-range-thumb { width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--rvw-c); box-shadow:0 1px 4px rgba(15,23,42,.2); }
.rvw-range:hover::-webkit-slider-thumb, .rvw-range:focus-visible::-webkit-slider-thumb { transform:scale(1.15); }
.rvw-range:focus-visible { box-shadow:0 0 0 3px color-mix(in srgb, var(--rvw-c) 25%, transparent); }
.rvw-slider.is-unset .rvw-range { background:#e5e7eb; }
.rvw-slider.is-unset .rvw-range::-webkit-slider-thumb { border-color:#cbd5e1; }
.rvw-slider.is-unset .rvw-range::-moz-range-thumb { border-color:#cbd5e1; }
.rvw-num { display:inline-flex; align-items:center; gap:2px; flex:none; padding:0 8px; height:36px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; }
.rvw-num:focus-within { border-color:var(--rvw-c); box-shadow:0 0 0 3px color-mix(in srgb, var(--rvw-c) 18%, transparent); }
.rvw-num input { width:3.2rem; border:0; padding:0; background:transparent; text-align:right; font-weight:700; font-variant-numeric:tabular-nums; color:#0f172a; -moz-appearance:textfield; }
.rvw-num input:focus { outline:none; box-shadow:none; }
.rvw-num input::-webkit-outer-spin-button, .rvw-num input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.rvw-num span { font-size:12px; font-weight:600; color:#94a3b8; }
.rvw-slider:not(.is-unset) .rvw-num input { color:var(--rvw-c); }
.dark .rvw-range { background:linear-gradient(to right, var(--rvw-c) 0%, var(--rvw-c) var(--rvw-p), rgba(255,255,255,.1) var(--rvw-p), rgba(255,255,255,.1) 100%); }
.dark .rvw-slider.is-unset .rvw-range { background:rgba(255,255,255,.1); }
.dark .rvw-num { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.1); }
.dark .rvw-num input { color:#f8fafc; }

/* ── Recurring expenses, payment accounts, upcoming payments (.rxp) ───────────
   Money OUT screens. Plain scoped CSS: the admin panel ships Filament's
   prebuilt stylesheet, which has none of the grid / tabular-number utilities
   these tables need. Status is always icon + text, never colour alone. */
.rxp{--x-ink:#0f172a;--x-mut:#64748b;--x-line:#e7ebf0;--x-line2:#f1f4f8;--x-panel:#fff;--x-panel2:#f8fafc;--x-acc:#ea580c;
    --x-good:#15803d;--x-good-bg:#dcfce7;--x-bad:#b91c1c;--x-bad-bg:#fee2e2;--x-warn:#a16207;--x-warn-bg:#fef3c7;--x-info:#1d4ed8;--x-info-bg:#dbeafe;
    --x-gray-bg:#f1f5f9;--x-r:14px;display:flex;flex-direction:column;gap:1rem;color:var(--x-ink)}
.dark .rxp{--x-ink:#e8edf3;--x-mut:#9aa7b6;--x-line:#273140;--x-line2:#1e2734;--x-panel:#161d27;--x-panel2:#111823;--x-acc:#ff7a3c;
    --x-good:#4ade80;--x-good-bg:#12301f;--x-bad:#f87171;--x-bad-bg:#3a1717;--x-warn:#fbbf24;--x-warn-bg:#332a16;--x-info:#93c5fd;--x-info-bg:#16233a;--x-gray-bg:#1e2734}
.rxp *{box-sizing:border-box}
.rxp-note{font-size:12.5px;color:var(--x-mut);margin:0}
.rxp-bar{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;background:var(--x-panel);border:1px solid var(--x-line);border-radius:var(--x-r);padding:.6rem .8rem}
.rxp-bar label{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;color:var(--x-mut)}
.rxp-bar select{border:1px solid var(--x-line);background-color:var(--x-panel);color:var(--x-ink);border-radius:.5rem;padding:.35rem 2rem .35rem .5rem;font-size:.82rem;font-weight:600}
.rxp-tabs{display:inline-flex;flex-wrap:wrap;gap:.3rem}
.rxp-tabs button{border:1px solid var(--x-line);background:var(--x-panel2);color:var(--x-ink);border-radius:999px;padding:.32rem .8rem;font-size:.78rem;font-weight:700;cursor:pointer}
.rxp-tabs button[aria-pressed="true"]{background:var(--x-acc);border-color:var(--x-acc);color:#fff}
.rxp-tabs button:focus-visible{outline:2px solid var(--x-acc);outline-offset:2px}
.rxp-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.rxp-tile{background:var(--x-panel);border:1px solid var(--x-line);border-radius:var(--x-r);padding:14px 16px;min-width:0}
.rxp-tile .k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--x-mut);display:flex;gap:4px;align-items:center}
.rxp-tile .v{margin-top:4px;font-size:21px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rxp-tile .s{margin-top:2px;font-size:12px;color:var(--x-mut)}
.rxp-tile.bad .v{color:var(--x-bad)} .rxp-tile.warn .v{color:var(--x-warn)} .rxp-tile.good .v{color:var(--x-good)}
.rxp-panel{background:var(--x-panel);border:1px solid var(--x-line);border-radius:var(--x-r);overflow:hidden;min-width:0}
.rxp-ph{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--x-line)}
.rxp-ph h3{margin:0;font-size:14px;font-weight:750}
.rxp-ph .sp{margin-left:auto}
.rxp-scroll{overflow-x:auto}
.rxp-table{width:100%;border-collapse:collapse;font-size:13px}
.rxp-table th{padding:8px 14px;text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--x-mut);background:var(--x-panel2);border-bottom:1px solid var(--x-line);white-space:nowrap}
.rxp-table td{padding:10px 14px;border-bottom:1px solid var(--x-line2);vertical-align:top}
.rxp-table tr:last-child td{border-bottom:0}
.rxp-table tbody tr:hover td{background:var(--x-panel2)}
.rxp-table .r{text-align:right}
.rxp-table .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.rxp-table .neg{color:var(--x-bad);font-weight:700}
.rxp-table .sub{margin-top:2px;font-size:11.5px;color:var(--x-mut)}
.rxp-table a{color:var(--x-acc);font-weight:700;text-decoration:none}
.rxp-table a:hover{text-decoration:underline}
.rxp-status{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;white-space:nowrap}
.rxp-status svg{width:14px;height:14px}
.rxp-status.success{background:var(--x-good-bg);color:var(--x-good)} .rxp-status.danger{background:var(--x-bad-bg);color:var(--x-bad)}
.rxp-status.warning{background:var(--x-warn-bg);color:var(--x-warn)} .rxp-status.info{background:var(--x-info-bg);color:var(--x-info)}
.rxp-status.gray{background:var(--x-gray-bg);color:var(--x-mut)}
.rxp-est{font-size:10.5px;font-weight:700;color:var(--x-mut);border:1px dashed var(--x-line);border-radius:4px;padding:0 4px;margin-left:4px}
.rxp-meter{height:6px;border-radius:99px;background:var(--x-line2);overflow:hidden;margin-top:6px}
.rxp-meter span{display:block;height:100%;background:var(--x-good)}
.rxp-meter.warn span{background:var(--x-warn)} .rxp-meter.bad span{background:var(--x-bad)}
.rxp-btn{border:1px solid var(--x-line);background:var(--x-panel2);color:var(--x-ink);border-radius:8px;padding:.22rem .55rem;font-size:.74rem;font-weight:700;cursor:pointer}
.rxp-btn:hover{border-color:var(--x-acc);color:var(--x-acc)}
.rxp-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 16px;text-align:center;font-size:13px;color:var(--x-mut)}
.rxp-empty strong{color:var(--x-ink);font-size:14px}
.rxp-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:12px}
.rxp-card{background:var(--x-panel);border:1px solid var(--x-line);border-radius:var(--x-r);padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-width:0}
.rxp-card h4{margin:0;font-size:14.5px;font-weight:750}
.rxp-card .kind{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--x-mut)}
.rxp-card dl{display:grid;grid-template-columns:1fr auto;gap:3px 10px;margin:0;font-size:12.5px}
.rxp-card dt{color:var(--x-mut)} .rxp-card dd{margin:0;text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.rxp-card .foot{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:6px;border-top:1px solid var(--x-line2)}
.rxp-loading{opacity:.55;transition:opacity .15s}
@media (max-width:1100px){.rxp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rxp-tiles{grid-template-columns:minmax(0,1fr)}.rxp-table{min-width:720px}}