/* joinery_ai plugin styles. Distinctive .joai-* prefix.
   Public dashboard rules are scoped under .jy-ui (the view opts in);
   admin run-detail utilities are plain .joai-* (admin theme, not .jy-ui)
   and carry the exact values lifted from former inline styles. */

/* --- Public dashboard (/joinery_ai) --- */
.jy-ui .joai-wrap { max-width: 900px; margin: 2rem auto; padding: 0 1rem; }
.jy-ui .joai-wrap h1 { margin-bottom: 0.5rem; }
.jy-ui .joai-card { border: 1px solid #ddd; border-radius: 8px; margin-bottom: 1.5rem;
              background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.jy-ui .joai-card-header { padding: 1rem 1.25rem; border-bottom: 1px solid #eee;
                    display: flex; justify-content: space-between; align-items: center; }
.jy-ui .joai-card-header h2 { margin: 0; font-size: 1.25rem; }
.jy-ui .joai-card-header .joai-meta { font-size: 0.85rem; color: #666; }
.jy-ui .joai-card-body { padding: 1.25rem; }
.jy-ui .joai-empty { padding: 1.25rem; color: #888; font-style: italic; }
.jy-ui .joai-actions a { font-size: 0.85rem; margin-left: 0.5rem; }
.jy-ui .joai-intro { color: #666; margin-bottom: 2rem; }

/* --- Admin run detail (/admin/joinery_ai/run) --- */
.joai-pre-wrap { white-space: pre-wrap; }
.joai-trace { font-size: 0.85em; }
.joai-trace-wrap { font-size: 0.85em; white-space: pre-wrap; }
.joai-toolcall { border-color: #0d6efd !important; }
.joai-toolcall.is-error { border-color: #dc3545 !important; }

/* --- Admin chat (/admin/joinery_ai/chat) --- */
.joai-chat-wrap { display: flex; gap: 1rem; height: calc(100vh - 220px); min-height: 420px; }
.joai-chat-list { flex: 0 0 240px; display: flex; flex-direction: column; gap: 0.5rem;
                  border: 1px solid #ddd; border-radius: 8px; background: #fff; padding: 0.75rem; overflow-y: auto; }
.joai-chat-newbtn { width: 100%; }
.joai-chat-search { width: 100%; box-sizing: border-box; padding: 0.4rem 0.6rem; font: inherit;
                    font-size: 0.85rem; border: 1px solid #ddd; border-radius: 6px; }
.joai-chat-search:focus { outline: none; border-color: #0d6efd; box-shadow: 0 0 0 2px rgba(13,110,253,0.15); }
.joai-chat-threads { display: flex; flex-direction: column; gap: 0.25rem; }
.joai-chat-item { position: relative; }
.joai-chat-list-item { display: flex; align-items: center; gap: 0.35rem;
                       padding: 0.5rem 1.7rem 0.5rem 0.6rem; border-radius: 6px; color: #222;
                       text-decoration: none; font-size: 0.9rem; }
.joai-chat-list-item:hover { background: #f1f3f5; }
.joai-chat-list-item.is-active { background: #e7f1ff; font-weight: 600; }
.joai-chat-item-title { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.joai-chat-pin { display: none; flex: 0 0 auto; color: #6c757d; line-height: 0; }
.joai-chat-item.is-pinned .joai-chat-pin { display: inline-flex; }

/* Three-dots trigger: hidden until row hover or menu open. */
.joai-chat-item-menu-btn { position: absolute; top: 50%; right: 0.2rem; transform: translateY(-50%);
                           border: 0; background: transparent; color: #888; cursor: pointer;
                           font-size: 1.15rem; line-height: 1; padding: 0.05rem 0.35rem; border-radius: 4px;
                           opacity: 0; }
.joai-chat-item:hover .joai-chat-item-menu-btn,
.joai-chat-item-menu-btn[aria-expanded="true"] { opacity: 1; }
.joai-chat-item-menu-btn:hover { background: rgba(0,0,0,0.08); color: #333; }

.joai-chat-item-menu { position: absolute; top: 100%; right: 0.2rem; z-index: 30; min-width: 130px;
                       background: #fff; border: 1px solid #ddd; border-radius: 6px;
                       box-shadow: 0 4px 14px rgba(0,0,0,0.14); padding: 0.25rem; }
.joai-chat-item-menu.open-up { top: auto; bottom: 100%; }
.joai-chat-item-menu button { display: block; width: 100%; text-align: left; border: 0;
                              background: transparent; padding: 0.4rem 0.6rem; border-radius: 4px;
                              font: inherit; font-size: 0.85rem; color: #222; cursor: pointer; }
.joai-chat-item-menu button:hover { background: #f1f3f5; }
.joai-chat-menu-danger { color: #dc3545; }
.joai-chat-menu-danger:hover { background: #fdecea; }

.joai-chat-rename { width: 100%; box-sizing: border-box; padding: 0.45rem 0.5rem; font: inherit;
                    font-size: 0.9rem; border: 1px solid #0d6efd; border-radius: 6px; }

/* Export dialog (rendered inside the system JoineryModal). */
.joai-export-title { margin: 0 0 0.75rem; font-weight: 600; font-size: 1rem; }
.joai-export-formats { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.joai-export-formats label { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.9rem; cursor: pointer; }
.joai-export-hint { color: #6c757d; font-size: 0.8rem; }
.joai-chat-main { flex: 1 1 auto; display: flex; flex-direction: column; border: 1px solid #ddd;
                  border-radius: 8px; background: #fff; overflow: hidden; }
/* Control strip above the transcript: a single line summarizing the active
   settings, with every control tucked behind the ⚙ Settings disclosure. Same
   on desktop and mobile. */
.joai-chat-status { display: flex; align-items: stretch; position: relative;
                    border-bottom: 1px solid #e6e8eb; background: #f7f8fa;
                    font-size: 0.8rem; color: #555; }

/* Selects + inputs in the settings panel share one look. */
.joai-chat-control { padding: 0.32rem 0.5rem; border: 1px solid #cdd3da; border-radius: 6px;
                     background: #fff; color: #222; font: inherit; font-size: 0.8rem; }
.joai-chat-control:focus { outline: none; border-color: #0d6efd;
                           box-shadow: 0 0 0 2px rgba(13,110,253,0.15); }
select.joai-chat-control { cursor: pointer; }

/* Settings disclosure. The summary IS the one-line control bar: a live summary
   of the active settings on the left, the gear affordance on the right.
   Clicking it drops the full-width settings drawer over the top of the chat. */
.joai-chat-settings { flex: 1 1 auto; min-width: 0; }
.joai-chat-settings > summary { list-style: none; cursor: pointer; user-select: none;
    display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.85rem; }
.joai-chat-settings > summary::-webkit-details-marker { display: none; }
.joai-chat-settings > summary::marker { content: ''; }
.joai-chat-settings > summary:hover { background: #eef1f5; }
.joai-chat-settings[open] > summary { background: #eef1f5; }
.joai-chat-settings-summary { flex: 1 1 auto; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; color: #333; font-weight: 500; }
.joai-chat-settings-gear { flex: none; color: #0d6efd; font-weight: 600; white-space: nowrap; }

/* The panel: a full-width drawer that slides down under the summary line and
   overlays the top of the chat. */
.joai-chat-settings-body { position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
    background: #fff; border: 1px solid #d8dde3; border-top: none;
    border-radius: 0 0 10px 10px; box-shadow: 0 12px 32px rgba(0,0,0,0.16); padding: 0.95rem 1rem;
    display: flex; flex-direction: column; gap: 0.85rem;
    transform-origin: top center; animation: joai-settings-in 0.16s ease-out; }
@keyframes joai-settings-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.joai-chat-settings-title { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
    text-transform: uppercase; color: #99a1ab; margin-top: 0.15rem; }
.joai-chat-settings-body label { display: flex; flex-direction: column; gap: 0.3rem;
    font-size: 0.76rem; font-weight: 600; color: #555; }
.joai-chat-settings-body .joai-chat-control { width: 100%; box-sizing: border-box; font-weight: 400; }
.joai-chat-settings-body textarea.joai-chat-control { resize: vertical; min-height: 60px; }
.joai-chat-settings-row { display: flex; gap: 0.7rem; }
.joai-chat-settings-row label { flex: 1; min-width: 0; }
/* Capability toggles read as a horizontal row inside the column-stacked panel. */
.joai-chat-settings-toggles { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.joai-chat-settings-body .joai-chat-toggle { flex-direction: row; align-items: center;
    font-weight: 500; }
.joai-chat-transcript { flex: 1 1 auto; overflow-y: auto; padding: 1.25rem 1.5rem; display: flex;
                        flex-direction: column; gap: 1rem; }
.joai-chat-msg { font-size: 0.92rem; line-height: 1.65; }
/* Your messages stay a compact bubble so the turn boundary is obvious. */
.joai-chat-mine { align-self: flex-end; max-width: 80%; padding: 0.7rem 1rem;
                  border-radius: 10px; background: #0d6efd; color: #fff; }
.joai-chat-mine .joai-chat-time { color: rgba(255,255,255,0.8); }
/* Assistant replies render as a full-width document — no pill, no width cap —
   so headings and lists have room. A hairline rule separates turns instead. */
.joai-chat-assistant { align-self: stretch; max-width: 100%; color: #222;
                       padding: 0.5rem 0.25rem 1.1rem; border-bottom: 1px solid #f0f0f0; }
/* Live turn-activity line under a streaming bubble ("Waiting for glm-5p2...
   - 2m 40s") - what the runner is doing before/while text arrives. */
.joai-chat-activity { margin-top: 0.3rem; font-size: 0.8rem; color: #888; }
/* A failed turn renders inline (never a popup): the assistant bubble becomes an
   error card carrying the server's message, with a Retry that replays the turn. */
.joai-chat-failed { padding: 0.7rem 0.9rem; background: #fdecea;
                    border: 1px solid #f5c6cb; border-radius: 8px; }
.joai-chat-failed .joai-chat-body { color: #b02a2a; }
.joai-chat-failed-actions { margin-top: 0.55rem; }
.joai-chat-retry { font: inherit; font-size: 0.82rem; font-weight: 600; color: #fff;
                   background: #dc3545; border: 0; border-radius: 5px;
                   padding: 0.35rem 0.8rem; cursor: pointer; }
.joai-chat-retry:hover { background: #c0392b; }
/* Send button morphs into an active Cancel while a turn streams (setBusy). */
.joai-btn.joai-chat-cancel-active { background: #dc3545; border-color: #dc3545; color: #fff; }
.joai-btn.joai-chat-cancel-active:hover { background: #c0392b; }
/* A cancelled turn keeps its partial answer under a small marker. */
.joai-chat-cancelled-marker { margin-top: 0.4rem; font-size: 0.78rem; font-weight: 600; color: #b26a00; }
/* Markdown typography inside a bubble/body. */
.joai-chat-body { word-wrap: break-word; overflow-wrap: anywhere; }
.joai-chat-body > :first-child { margin-top: 0; }
.joai-chat-body > :last-child { margin-bottom: 0; }
.joai-chat-body p { margin: 0 0 0.9rem; }
/* The markdown parser emits an empty <p> after a horizontal rule (--- followed
   by a blank line). Collapse those so section breaks don't leave dead space. */
.joai-chat-body p:empty { display: none; }
.joai-chat-body hr { border: 0; border-top: 1px solid #eee; margin: 1.2rem 0; }
/* Bold reads as emphasis, not shouting. */
.joai-chat-body strong { font-weight: 600; }
/* Headings sit barely above body size — section markers, not billboards. */
.joai-chat-body h1, .joai-chat-body h2, .joai-chat-body h3,
.joai-chat-body h4, .joai-chat-body h5, .joai-chat-body h6 {
    margin: 1.5rem 0 0.6rem; line-height: 1.4; font-weight: 600; }
.joai-chat-body h1 { font-size: 1.12rem; }
.joai-chat-body h2 { font-size: 1.05rem; }
.joai-chat-body h3 { font-size: 0.98rem; }
.joai-chat-body h4, .joai-chat-body h5, .joai-chat-body h6 { font-size: 0.92rem; }
/* The admin theme resets list-style globally (for nav menus); chat replies
   are documents, so restore real markers — quiet ones. */
.joai-chat-body ul, .joai-chat-body ol { margin: 0 0 0.9rem; padding-left: 1.6rem; }
.joai-chat-body ul { list-style: disc; }
.joai-chat-body ol { list-style: decimal; }
.joai-chat-body li { margin: 0.35rem 0; list-style: inherit; }
.joai-chat-body li::marker { color: #9aa1ab; }
.joai-chat-body li > ul { list-style: circle; }
.joai-chat-body li > ul, .joai-chat-body li > ol { margin: 0.3rem 0 0.4rem; }
.joai-chat-body code { background: rgba(0,0,0,0.06); padding: 0.1rem 0.3rem;
                       border-radius: 4px; font-size: 0.88em; }
.joai-chat-body pre { white-space: pre-wrap; background: rgba(0,0,0,0.05); padding: 0.75rem 0.85rem;
                      border-radius: 6px; overflow-x: auto; margin: 0 0 0.9rem; }
.joai-chat-body pre code { background: none; padding: 0; }
.joai-chat-body blockquote { margin: 0 0 0.9rem; padding: 0.1rem 0 0.1rem 0.9rem;
                             border-left: 3px solid #ddd; color: #555; }
.joai-chat-body table { border-collapse: collapse; margin: 1.4rem 0; font-size: 0.9em;
                        display: block; max-width: 100%; overflow-x: auto; }
.joai-chat-body th, .joai-chat-body td { border: 1px solid #ddd; padding: 0.4rem 0.65rem; text-align: left; }
.joai-chat-body th { font-weight: 600; }
/* The admin theme drops the last row's bottom border on .table (card-embedded
   data tables); chat tables draw a full grid, so put it back. */
.joai-chat-body table tbody tr:last-child td { border-bottom: 1px solid #ddd; }
/* Per-turn footer: one muted line — the tool trace (left), then time · context ·
   cost, with the hover-only Copy/Delete actions pushed to the right. */
.joai-chat-foot { display: flex; flex-wrap: wrap; align-items: baseline;
                  gap: 0.15rem 0.5rem; margin-top: 0.35rem; }
.joai-chat-meta-line { margin-left: auto; font-size: 0.72rem; color: #999; white-space: nowrap; }
.joai-chat-time { color: inherit; }
.joai-chat-usage-cost { color: #bbb; }
/* Context-size flag — a rough "how full is it getting" gauge (gray < 32k,
   amber 32–64k, red 64k+). */
.joai-ctx-ok   { color: #999; }
.joai-ctx-warn { color: #c77d0a; }
.joai-ctx-high { color: #c0392b; font-weight: 600; }
/* Per-turn actions (copy / delete) — reveal on hover or keyboard focus of a turn. */
.joai-chat-actions { display: flex; gap: 0.3rem; opacity: 0; transition: opacity 0.12s; }
.joai-chat-msg:hover .joai-chat-actions,
.joai-chat-msg:focus-within .joai-chat-actions { opacity: 1; }
.joai-chat-action { background: none; border: 0; padding: 0.1rem 0.4rem; font-size: 0.72rem;
                    color: #888; cursor: pointer; border-radius: 4px; line-height: 1.4; }
.joai-chat-action:hover { background: rgba(0,0,0,0.06); color: #222; }
.joai-chat-action-danger:hover { background: #fdecea; color: #c0392b; }
/* On the blue user bubble the meta + toolbar sit in light ink. */
.joai-chat-mine .joai-chat-meta-line { color: rgba(255,255,255,0.8); }
.joai-chat-mine .joai-chat-action { color: rgba(255,255,255,0.85); }
.joai-chat-mine .joai-chat-action:hover { background: rgba(255,255,255,0.2); color: #fff; }
.joai-chat-mine .joai-chat-action-danger:hover { background: rgba(255,255,255,0.25); color: #fff; }
/* Collapsed tool trace sits inline in the footer; opening it drops the list below. */
.joai-chat-trace { font-size: 0.72rem; color: #666; }
.joai-chat-trace summary { cursor: pointer; }
.joai-chat-trace ul { margin: 0.3rem 0 0; padding-left: 1.1rem; flex-basis: 100%; }
.joai-chat-tool-error { color: #dc3545; }
.joai-chat-confirm { margin-top: 0.6rem; padding: 0.6rem 0.7rem; border: 1px solid #f0c36d;
                     background: #fff8e6; border-radius: 8px; }
.joai-chat-confirm-desc { font-size: 0.9rem; margin-bottom: 0.5rem; color: #5c4a12; }
.joai-chat-confirm-actions { display: flex; gap: 0.5rem; }
.joai-chat-thinking { padding: 0 1rem 0.5rem; font-size: 0.82rem; color: #888; font-style: italic; }
.joai-chat-composer { display: flex; gap: 0.5rem; padding: 0.75rem; border-top: 1px solid #eee;
                      align-items: flex-end; }
.joai-chat-composer textarea { flex: 1 1 auto; resize: none; border: 1px solid #ccc; border-radius: 8px;
                               padding: 0.5rem 0.7rem; font: inherit; }
.joai-chat-composer.joai-chat-dragover { outline: 2px dashed #0d6efd; outline-offset: -4px; }
.joai-chat-empty { color: #888; font-style: italic; padding: 0.5rem; }

/* Attachments: the file input is hidden (the attach button proxies it); the button
   centers its upload glyph and matches the composer button height. */
.joai-chat-file-input { display: none; }
.joai-chat-attach-btn { flex: 0 0 auto; display: inline-flex; align-items: center;
                        justify-content: center; line-height: 1; padding: 0.4rem 0.55rem; }
.joai-chat-attach-btn svg { width: 22px; height: 22px; display: block; }

/* Pending-file strip above the composer, and rendered attachment chips inside a
   sent user bubble. */
.joai-chat-attach-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.4rem 0.75rem 0; }
.joai-chat-attachments { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.joai-chat-attach { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 220px;
                    padding: 0.25rem 0.5rem; border-radius: 6px; background: rgba(0,0,0,0.06);
                    font-size: 0.78rem; }
.joai-chat-mine .joai-chat-attach { background: rgba(255,255,255,0.2); color: #fff; }
.joai-chat-attach-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.joai-chat-attach-icon { flex: 0 0 auto; }
.joai-chat-attach-image { padding: 0; background: none; }
.joai-chat-attach-image img { max-width: 120px; max-height: 120px; border-radius: 6px; display: block; }
.joai-chat-attach-remove { border: none; background: none; cursor: pointer; font-size: 1rem;
                           line-height: 1; color: inherit; padding: 0 0.1rem; }
.joai-chat-attach-remove:hover { color: #dc3545; }

/* Conversation meta bar under the composer — the toolbar strip. Holds the
   running token/cost total today; room for more controls later. */
.joai-chat-meta { display: flex; justify-content: flex-end; align-items: center;
                  padding: 0.2rem 0.75rem 0.5rem; font-size: 0.72rem; color: #999; }
.joai-chat-meta-usage { white-space: nowrap; }
.joai-btn { display: inline-block; padding: 0.45rem 0.9rem; border: 1px solid #ccc; border-radius: 8px;
            background: #fff; color: #222; cursor: pointer; font: inherit; }
.joai-btn:hover { background: #f1f3f5; }
.joai-btn:disabled { opacity: 0.6; cursor: default; }
.joai-btn-primary { background: #0d6efd; border-color: #0d6efd; color: #fff; }
.joai-btn-primary:hover { background: #0b5ed7; }

/* chat capability toggles in the status strip */
.joai-chat-toggle { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.8rem;
                    color: #444; cursor: pointer; user-select: none; }
.joai-chat-toggle input { margin: 0; cursor: pointer; }
.joai-chat-toggle.is-disabled { color: #aaa; cursor: not-allowed; }
.joai-chat-toggle.is-disabled input { cursor: not-allowed; }

/* --- Mobile: a bar atop the chat pane with the Conversations drawer toggle and
   the maximize/minimize control. The whole bar is hidden on desktop. --- */
.joai-chat-mobilebar { display: none; }
.joai-chat-list-toggle { display: flex; align-items: center; gap: 0.4rem; flex: 1 1 auto; min-width: 0;
    padding: 0.55rem 0.85rem; border: 0; border-bottom: 1px solid #e6e8eb; background: #f7f8fa;
    color: #0d6efd; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
/* Maximize/minimize control, pinned to the right of the ⚙ Settings summary.
   Mobile-only (desktop has the room); shows the Minimize label while maximized. */
.joai-chat-fullscreen-toggle { display: none; align-items: center; justify-content: center;
    flex: none; padding: 0 0.85rem; border: 0; border-left: 1px solid #e6e8eb;
    background: #f7f8fa; color: #0d6efd; font-weight: 600; cursor: pointer; }
.joai-chat-fullscreen-toggle .joai-icon-max,
.joai-chat-fullscreen-toggle .joai-icon-min { align-items: center; }
.joai-chat-fullscreen-toggle .joai-icon-max { display: inline-flex; }
.joai-chat-fullscreen-toggle .joai-icon-min { display: none; }
.joai-chat-wrap.joai-fullscreen .joai-chat-fullscreen-toggle .joai-icon-max { display: none; }
.joai-chat-wrap.joai-fullscreen .joai-chat-fullscreen-toggle .joai-icon-min { display: inline-flex; }
/* While maximized, the control reads as an explicit, labeled way back. */
.joai-chat-fullscreen-toggle .joai-fs-label { display: none; margin-left: 0.4rem; font-weight: 600; }
.joai-chat-wrap.joai-fullscreen .joai-chat-fullscreen-toggle .joai-fs-label { display: inline; }
/* Background scroll lock while maximized. */
body.joai-fullscreen-lock { overflow: hidden; }

@media (max-width: 767px) {
    .joai-chat-wrap { position: relative; gap: 0; height: calc(100vh - 175px); min-height: 360px; }
    .joai-chat-list { position: absolute; top: 0; left: 0; bottom: 0; z-index: 40; width: 82%;
        max-width: 290px; transition: transform 0.22s ease;
        /* The wrap is inset from the viewport by the page/card padding, so clear the
           element's own width plus an extra margin to push it fully off-screen. */
        transform: translateX(calc(-100% - 4rem)); }
    .joai-chat-wrap.list-open .joai-chat-list { transform: translateX(0);
        box-shadow: 4px 0 18px rgba(0,0,0,0.18); }
    .joai-chat-list-backdrop { position: absolute; inset: 0; z-index: 35; background: rgba(0,0,0,0.4); }
    .joai-chat-main { width: 100%; min-width: 0; }
    .joai-chat-mobilebar { display: flex; }
    .joai-chat-fullscreen-toggle { display: inline-flex; }
    /* Icon-only on mobile: drop the "Settings" and "Minimize" words. */
    .joai-chat-settings-gear-label,
    .joai-chat-wrap.joai-fullscreen .joai-chat-fullscreen-toggle .joai-fs-label { display: none; }

    /* Maximized: the chat fills the viewport, above the site header/footer.
       100dvh tracks the dynamic viewport so the composer clears the mobile
       browser's address bar. */
    .joai-chat-wrap.joai-fullscreen { position: fixed; inset: 0; z-index: 2000;
        height: 100vh; height: 100dvh; min-height: 0; margin: 0; border-radius: 0;
        background: #fff; }
}