/* Global assistant drawer -- present on every page (loaded from masterpage.html
   like ui-system.css itself), not scoped to a single page's CSS file. */

.tp-agent-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: var(--tp-color-scrim);
    z-index: 1190;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--tp-ui-motion-base) var(--tp-ui-ease-standard);
}

.tp-agent-drawer-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.tp-agent-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(420px, 100vw);
    display: flex;
    flex-direction: column;
    background: var(--tp-color-surface);
    border-left: 1px solid var(--tp-color-border-soft);
    box-shadow: var(--tp-shadow-lg);
    z-index: 1200;
    transform: translateX(100%);
    transition: transform var(--tp-ui-motion-base) var(--tp-ui-ease-standard);
}

.tp-agent-drawer.is-open {
    transform: translateX(0);
}

.tp-agent-drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--tp-space-4) var(--tp-space-5);
    border-bottom: 1px solid var(--tp-color-border-soft);
    flex-shrink: 0;
}

.tp-agent-drawer-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--tp-color-text-primary);
}

.tp-agent-drawer-close {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--tp-color-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    cursor: pointer;
    transition: background var(--tp-ui-motion-fast) var(--tp-ui-ease-standard),
        color var(--tp-ui-motion-fast) var(--tp-ui-ease-standard);
}

.tp-agent-drawer-close:hover,
.tp-agent-drawer-close:focus-visible {
    background: var(--tp-color-surface-soft);
    color: var(--tp-color-text-primary);
}

.tp-agent-drawer-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: var(--tp-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--tp-space-3);
}

.tp-agent-drawer-empty {
    color: var(--tp-color-text-muted);
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0;
}

.tp-agent-drawer-msg {
    max-width: 88%;
    padding: var(--tp-space-3) var(--tp-space-4);
    border-radius: var(--tp-ui-radius-panel);
    font-size: 0.88rem;
    line-height: 1.45;
    word-break: break-word;
}

.tp-agent-drawer-msg p,
.tp-agent-drawer-msg ul,
.tp-agent-drawer-msg h3,
.tp-agent-drawer-msg h4,
.tp-agent-drawer-msg h5 {
    margin: 0;
}

.tp-agent-drawer-msg p + p,
.tp-agent-drawer-msg p + ul,
.tp-agent-drawer-msg ul + p,
.tp-agent-drawer-msg ul + h3,
.tp-agent-drawer-msg ul + h4,
.tp-agent-drawer-msg h3 + p,
.tp-agent-drawer-msg h4 + p {
    margin-top: var(--tp-space-2);
}

.tp-agent-drawer-msg ul {
    padding-left: 1.1rem;
}

.tp-agent-drawer-msg li + li {
    margin-top: 0.25rem;
}

.tp-agent-drawer-msg h3,
.tp-agent-drawer-msg h4,
.tp-agent-drawer-msg h5 {
    color: var(--tp-color-text-primary);
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.3;
}

.tp-agent-drawer-msg code {
    font-family: var(--tp-font-mono);
    font-size: 0.82em;
    background: var(--tp-color-surface);
    border: 1px solid var(--tp-color-border-soft);
    border-radius: var(--tp-ui-radius-xs);
    padding: 0.02rem 0.22rem;
}

.tp-agent-drawer-msg--user {
    align-self: flex-end;
    background: var(--tp-color-brand-500);
    color: var(--tp-color-surface);
    border-bottom-right-radius: 6px;
    white-space: pre-wrap;
}

.tp-agent-drawer-msg--assistant {
    align-self: flex-start;
    background: var(--tp-color-surface-soft);
    color: var(--tp-color-text-primary);
    border: 1px solid var(--tp-color-border-soft);
    border-bottom-left-radius: 6px;
}

.tp-agent-drawer-msg--error {
    align-self: stretch;
    background: transparent;
    color: var(--tp-color-danger-ink);
    border: 1px dashed var(--tp-color-border-soft);
    white-space: pre-wrap;
}

.tp-agent-drawer-msg--pending {
    align-self: flex-start;
    color: var(--tp-color-text-muted);
    font-style: italic;
    white-space: pre-wrap;
}

.tp-agent-drawer-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tp-space-2);
    padding: var(--tp-space-3) var(--tp-space-4);
    border-top: 1px solid var(--tp-color-border-soft);
    background: var(--tp-color-surface);
    flex-shrink: 0;
}

.tp-agent-drawer-suggestion {
    appearance: none;
    border: 1px solid var(--tp-color-border-soft);
    background: var(--tp-color-surface-soft);
    color: var(--tp-color-text-secondary);
    border-radius: 999px;
    padding: 0.35rem 0.6rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background var(--tp-ui-motion-fast) var(--tp-ui-ease-standard),
        border-color var(--tp-ui-motion-fast) var(--tp-ui-ease-standard),
        color var(--tp-ui-motion-fast) var(--tp-ui-ease-standard);
}

.tp-agent-drawer-suggestion:hover,
.tp-agent-drawer-suggestion:focus-visible {
    background: color-mix(in srgb, var(--tp-color-brand-500) 10%, var(--tp-color-surface));
    border-color: var(--tp-color-brand-500);
    color: var(--tp-color-text-primary);
}

.tp-agent-drawer-form {
    display: flex;
    gap: var(--tp-space-2);
    padding: var(--tp-space-4);
    border-top: 1px solid var(--tp-color-border-soft);
    flex-shrink: 0;
}

.tp-agent-drawer-input {
    flex: 1 1 auto;
    resize: none;
    border: 1px solid var(--tp-color-border-soft);
    border-radius: var(--tp-ui-radius-panel);
    padding: var(--tp-space-2) var(--tp-space-3);
    font-size: 0.88rem;
    font-family: inherit;
    color: var(--tp-color-text-primary);
    background: var(--tp-color-surface);
}

.tp-agent-drawer-input:focus-visible {
    outline: 2px solid var(--tp-color-text-secondary);
    outline-offset: 1px;
}

.tp-agent-drawer-send {
    flex-shrink: 0;
    align-self: flex-end;
}

.tp-agent-drawer-toggle-mobile {
    appearance: none;
    border: none;
    background: transparent;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    cursor: pointer;
    margin-right: var(--tp-space-2);
}

@media (min-width: 992px) {
    .tp-agent-drawer-toggle-mobile {
        display: none;
    }
}