/* The WorkNotes assistant (Components/Chat/Default.cshtml, chat.js): the floating button at the bottom right and the
   panel. The panel is notebook paper like the dialogs, but not an overlay: the page stays usable. It is anchored at the
   top right under the header and resized by its corner (the corner is at its bottom left, direction: rtl, so the panel
   grows towards the page and the corner follows the pointer); minimized it keeps only its header. On a phone it is a
   sheet at the bottom of the screen, not resizable. On the chat page (/Chat) the same panel is embedded in the page
   (chat--embedded): in the flow, as wide as the page, with its list open, without the floating button and without the
   minimize and close buttons. Above the conversation, the Git context: pills for the repository and the branch (their menus
   are popups below them) and a "+" that opens an overlay. JavaScript only adds and removes the classes below. */

.chat-launcher { position: fixed; inset: auto 1rem 1rem auto; z-index: 30; display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; padding: .6rem 1.1rem; border: 1px solid transparent; border-radius: 999px; color: var(--wn-on-primary); background: var(--wn-primary); box-shadow: var(--wn-shadow-raised); font-weight: 600; text-decoration: none; transition: background var(--wn-motion); }
.chat-launcher:hover { color: var(--wn-on-primary); background: var(--wn-primary-hover); }
.chat-launcher:active { background: var(--wn-primary-active); }
.chat-launcher:focus-visible { outline: 3px solid var(--wn-text); outline-offset: 3px; }
.chat-launcher svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.chat--open .chat-launcher { display: none; }
.chat-launcher__busy { width: .6rem; height: .6rem; border-radius: 50%; background: var(--wn-highlight); animation: chat-pulse 1.2s ease-in-out infinite; }
.chat-launcher__busy[hidden] { display: none; }
/* The footer's version stays visible beside the button. */
body:has(.chat:not(.chat--embedded) .chat-launcher) .application-version { margin-inline-end: 11rem; }

.chat-panel { position: fixed; top: 4.5rem; right: 1rem; z-index: 31; display: flex; flex-direction: column; box-sizing: border-box; width: min(27rem, calc(100vw - 2rem)); height: min(38rem, calc(100dvh - 5.5rem)); min-width: 18rem; min-height: 12rem; max-width: calc(100vw - 2rem); max-height: calc(100dvh - 5.5rem); margin: 0; padding: 0; overflow: hidden; resize: both; direction: rtl; color: var(--wn-text); background: var(--wn-notebook-paper); border: 1px solid var(--wn-border); border-radius: var(--wn-radius-panel); box-shadow: var(--wn-shadow-notebook); }
.chat-panel > * { direction: ltr; }
.chat-panel[hidden] { display: none; }
.chat-panel--minimized { height: auto; min-height: 0; resize: none; }
.chat-panel--minimized .chat-panel__body { display: none; }

.chat-panel__header { display: flex; align-items: center; gap: .25rem; padding: .4rem .5rem .4rem .5rem; border-bottom: 2px solid var(--wn-notebook-margin); background: var(--wn-notebook-drawer-head); }
.chat-panel__title { flex: 1; min-width: 0; margin: 0; overflow: hidden; font-family: var(--wn-font-display); font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.chat-panel--busy .chat-panel__title::after { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-inline-start: .5rem; border-radius: 50%; background: var(--wn-primary); vertical-align: .15em; animation: chat-pulse 1.2s ease-in-out infinite; }
.chat-panel__body { display: flex; flex: 1; min-height: 0; }

.chat-list { display: flex; flex-direction: column; flex: 0 0 45%; min-width: 0; padding: .5rem; overflow-y: auto; background: var(--wn-notebook-drawer); border-inline-end: 1px solid var(--wn-notebook-rule); }
.chat-list[hidden] { display: none; }
.chat-list__filter { display: flex; gap: .25rem; margin-bottom: .5rem; }
.chat-list__filter-button { flex: 1; min-height: 36px; padding: .25rem .4rem; border: 1px solid var(--wn-border); border-radius: var(--wn-radius); color: var(--wn-text); background: var(--wn-surface); font-size: .8rem; }
.chat-list__filter-button[aria-pressed="true"] { color: var(--wn-on-primary); background: var(--wn-primary); border-color: var(--wn-primary); }
.chat-list__status { margin: 0 0 .5rem; color: var(--wn-muted); font-size: .8rem; }
.chat-list__status:empty { display: none; }
.chat-list__items { margin: 0; padding: 0; list-style: none; }
.chat-list__item { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem; padding: .25rem 0; border-bottom: 1px solid var(--wn-notebook-rule); }
.chat-list__open { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: .3rem .4rem; border: 0; border-radius: var(--wn-radius); color: var(--wn-text); background: transparent; text-align: start; text-decoration: none; }
.chat-list__open:hover { background: var(--wn-active-line); }
.chat-list__open[aria-current] { background: var(--wn-selection); }
.chat-list__name { overflow-wrap: anywhere; font-size: .875rem; font-weight: 600; }
.chat-list__meta { color: var(--wn-muted); font-size: .72rem; }
.chat-list__rename { display: flex; flex: 1 0 100%; flex-wrap: wrap; gap: .25rem; }
.chat-list__rename[hidden] { display: none; }
.chat-list__rename input { flex: 1 0 100%; min-height: 36px; padding: .25rem .5rem; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); font: inherit; }
.chat-list__rename .btn { min-height: 36px; padding: .25rem .6rem; font-size: .8rem; }

.chat-main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; }
.chat-context { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; padding: .5rem .75rem; border-bottom: 1px solid var(--wn-notebook-rule); color: var(--wn-muted); font-size: .8rem; font-weight: 600; }
.chat-context select { flex: 1; min-width: 9rem; min-height: 36px; padding: .2rem .4rem; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); color: var(--wn-text); background: var(--wn-surface); font-size: .85rem; }
.chat-context__code { padding: .05rem .4rem; border-radius: 4px; color: var(--wn-text); background: var(--wn-notebook-corner-journal); font-family: var(--wn-font-mono); }
.chat-context__code[hidden] { display: none; }

.chat-messages { flex: 1; min-height: 0; margin: 0; padding: .75rem; overflow-y: auto; list-style: none; }
.chat-message { margin: 0 0 .75rem; padding: .5rem .75rem; border-radius: var(--wn-radius); background: var(--wn-surface); box-shadow: inset 0 0 0 1px var(--wn-notebook-rule); }
.chat-message--user { margin-inline-start: 2rem; background: var(--wn-active-line); }
.chat-message--assistant { margin-inline-end: 1rem; }
.chat-message--pending .chat-message__text:empty::after { content: "…"; color: var(--wn-muted); }
.chat-message__meta { margin: 0 0 .2rem; color: var(--wn-muted); font-size: .72rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.chat-message__text { overflow-wrap: anywhere; white-space: pre-wrap; font-size: .9rem; line-height: 1.55; }
/* A failure, shown as a message of the conversation (not stored). */
.chat-message--error { margin-inline-end: 1rem; color: var(--wn-danger); background: var(--wn-danger-bg); box-shadow: inset 0 0 0 1px var(--wn-danger); }
.chat-message--error .chat-message__meta { color: var(--wn-danger); }
.chat-message--stopped em { color: var(--wn-muted); }
.chat-empty { margin: 0; padding: .75rem .75rem 0; color: var(--wn-muted); font-size: .85rem; }
.chat-empty[hidden] { display: none; }

.chat-status { display: flex; align-items: center; gap: .5rem; margin: 0; padding: .35rem .75rem; color: var(--wn-muted); font-size: .8rem; }
.chat-status[hidden] { display: none; }
.chat-status__dots { width: .55rem; height: .55rem; border-radius: 50%; background: var(--wn-primary); animation: chat-pulse 1.2s ease-in-out infinite; }
/* The chat page without JavaScript: the assistant is not available. */
.chat-error { margin: 0 .75rem .5rem; padding: .5rem .75rem; border: 1px solid var(--wn-danger); border-radius: var(--wn-radius); color: var(--wn-danger); background: var(--wn-danger-bg); font-size: .85rem; }

.chat-form { padding: .5rem .75rem .75rem; border-top: 1px solid var(--wn-notebook-rule); }
.chat-form textarea { display: block; box-sizing: border-box; width: 100%; min-height: 3rem; max-height: 10rem; padding: .45rem .6rem; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); color: var(--wn-text); background: var(--wn-surface); font: inherit; font-size: .9rem; resize: vertical; }
.chat-form textarea:focus-visible, .chat-context select:focus-visible, .chat-list__rename input:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: 1px; }
.chat-form__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; margin-top: .5rem; }
.chat-form__notice { flex: 1 1 10rem; margin: 0; color: var(--wn-muted); font-size: .72rem; }
.chat-form .btn[hidden] { display: none; }
.chat-form textarea:disabled, .chat-context select:disabled { color: var(--wn-muted); background: var(--wn-notebook-drawer); cursor: wait; }
/* The waiting icon that takes the place of Send while a message is on its way. */
.chat-form__wait { display: inline-flex; align-items: center; justify-content: center; min-width: 5rem; min-height: 44px; }
.chat-form__wait[hidden] { display: none; }
.chat-spinner { width: 1.4rem; height: 1.4rem; box-sizing: border-box; border: 3px solid var(--wn-border); border-top-color: var(--wn-primary); border-radius: 50%; animation: chat-spin .8s linear infinite; }

/* The Git context: small pills, like Claude Code's header; without a repository the pill is quiet (dashed, muted). */
.chat-git { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; padding: .45rem .75rem; border-bottom: 1px solid var(--wn-notebook-rule); }
.chat-git__item { position: relative; min-width: 0; }
.chat-git__item[hidden] { display: none; }
.chat-git__pill { display: inline-flex; align-items: center; gap: .35rem; max-width: 14rem; min-height: 32px; padding: .15rem .65rem; border: 1px solid var(--wn-border); border-radius: 999px; color: var(--wn-text); background: var(--wn-surface); font-size: .8rem; font-weight: 600; cursor: pointer; }
.chat-git__pill:hover { background: var(--wn-active-line); }
.chat-git__pill[aria-expanded="true"] { border-color: var(--wn-primary); background: var(--wn-selection); }
.chat-git__pill--none { border-style: dashed; color: var(--wn-muted); font-weight: 400; }
.chat-git__pill:disabled, .chat-git__add:disabled { cursor: wait; opacity: .6; }
.chat-git__pill:focus-visible, .chat-git__add:focus-visible, .chat-git__option:focus-visible, .chat-git__filter:focus-visible { outline: 2px solid var(--wn-primary); outline-offset: 2px; }
.chat-git__icon { flex: none; width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-git__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-git__add { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--wn-border); border-radius: 50%; color: var(--wn-primary); background: var(--wn-surface); cursor: pointer; }
.chat-git__add:hover { background: var(--wn-active-line); }
.chat-git__add svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* The menu of a pill: a popup under it, scrolled when long. */
.chat-git__menu { position: absolute; inset: calc(100% + .3rem) auto auto 0; z-index: 2; display: flex; flex-direction: column; gap: .3rem; width: min(18rem, 80vw); max-height: 16rem; padding: .4rem; overflow-y: auto; border: 1px solid var(--wn-border); border-radius: var(--wn-radius); background: var(--wn-surface); box-shadow: var(--wn-shadow-raised); }
.chat-git__menu[hidden] { display: none; }
.chat-git__status { margin: 0; color: var(--wn-muted); font-size: .75rem; }
.chat-git__status:empty { display: none; }
.chat-git__options { margin: 0; padding: 0; list-style: none; }
.chat-git__option { display: block; width: 100%; min-height: 34px; padding: .3rem .5rem; overflow: hidden; border: 0; border-radius: var(--wn-radius); color: var(--wn-text); background: transparent; font-size: .82rem; text-align: start; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.chat-git__option:hover { background: var(--wn-active-line); }
.chat-git__option[aria-checked="true"] { font-weight: 700; background: var(--wn-selection); }
.chat-git__filter { min-height: 34px; padding: .2rem .5rem; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); font: inherit; font-size: .82rem; }
/* The overlay that chooses both. */
.chat-git-dialog:not([open]) { display: none; }
.chat-git-dialog .modal-close { padding: 0; border: 0; background: transparent; cursor: pointer; }
.chat-git-dialog select { min-height: 44px; padding: .3rem .5rem; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); color: var(--wn-text); background: var(--wn-surface); font: inherit; }
.chat-git-dialog__status { min-height: 1.2em; margin: 0 0 .75rem; color: var(--wn-muted); font-size: .85rem; }
/* A notice about the Git context, in the conversation; a link to a Git file. */
.chat-message--notice { margin-inline-end: 1rem; color: var(--wn-muted); background: var(--wn-notebook-drawer); box-shadow: inset 0 0 0 1px var(--wn-notebook-rule); font-size: .85rem; }
.chat-message__link--git { font-family: var(--wn-font-mono); font-size: .85em; overflow-wrap: anywhere; }
.chat-page__git { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .75rem; color: var(--wn-muted); font-size: .85rem; }

/* The chat page without JavaScript (/Chat). */
.chat-page__layout { display: grid; grid-template-columns: minmax(12rem, 1fr) 3fr; gap: 1.5rem; }
.chat-page__subtitle { font-size: 1rem; }
.chat-page .chat-messages { padding: 0; overflow: visible; }
.chat-page .chat-form { display: flex; flex-direction: column; gap: .4rem; padding: 1rem 0 0; }
.chat-page .chat-form select { min-height: 44px; padding: .4rem .6rem; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); color: var(--wn-text); background: var(--wn-surface); }
.chat-page .chat-empty { padding: 0; }
.chat-page__rename, .chat-page__archive { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.chat-page__rename input { min-height: 40px; padding: .3rem .5rem; border: 1px solid var(--wn-input-border); border-radius: var(--wn-radius); }

/* The panel embedded in the chat page. */
.chat-page-host:empty { display: none; }
.chat--embedded .chat-launcher, .chat--embedded .chat-panel__window-button { display: none; }
.chat--embedded .chat-panel { position: relative; inset: auto; width: 100%; max-width: none; height: min(48rem, calc(100dvh - 12rem)); min-height: 24rem; max-height: none; resize: none; direction: ltr; box-shadow: var(--wn-shadow-raised); }
.chat--embedded .chat-list { flex-basis: 30%; }

@keyframes chat-pulse { 50% { opacity: .35; } }
@keyframes chat-spin { to { transform: rotate(360deg); } }

@media (max-width: 40rem) {
    .chat-launcher { padding: .6rem; }
    .chat-launcher__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    body:has(.chat-launcher) .application-version { margin-inline-end: 4rem; }
    .chat-panel { inset: auto 0 0 0; width: 100%; max-width: none; height: 85dvh; max-height: 85dvh; min-width: 0; border-radius: var(--wn-radius-panel) var(--wn-radius-panel) 0 0; resize: none; direction: ltr; }
    .chat-panel--minimized { height: auto; }
    .chat-list { flex-basis: 60%; }
    .chat-page__layout { grid-template-columns: 1fr; }
    .chat--embedded .chat-panel { height: calc(100dvh - 9rem); border-radius: var(--wn-radius-panel); }
    .chat--embedded .chat-panel__body { flex-direction: column; }
    .chat--embedded .chat-list { flex: 0 0 auto; max-height: 30%; border-inline-end: 0; border-bottom: 1px solid var(--wn-notebook-rule); }
}

@media (prefers-reduced-motion: reduce) {
    .chat-launcher, .chat-launcher__busy, .chat-status__dots, .chat-panel--busy .chat-panel__title::after { animation: none; transition: none; }
    .chat-spinner { animation-duration: 3s; }
}

@media (forced-colors: active) {
    .chat-launcher, .chat-panel, .chat-message, .chat-list__filter-button { border: 1px solid CanvasText; }
    .chat-list__open[aria-current], .chat-list__filter-button[aria-pressed="true"] { outline: 2px solid Highlight; }
    .chat-status__dots, .chat-launcher__busy { background: Highlight; }
    .chat-spinner { border-color: CanvasText; border-top-color: Highlight; }
    .chat-message--error { border: 2px solid CanvasText; }
    .chat-git__pill, .chat-git__add, .chat-git__menu { border: 1px solid ButtonText; }
    .chat-git__pill[aria-expanded="true"], .chat-git__option[aria-checked="true"] { outline: 2px solid Highlight; }
}