/**
 * Agent inbox layout.
 *
 * The theme supplies the design tokens, typography and components; this file
 * only builds the three-pane frame they sit in, using the theme's own CSS
 * variables so it follows any palette change automatically.
 */

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

.min-w-0 { min-width: 0; }

/* Two words, one line — the theme sizes the brand for a short logotype. */
.app-header .brand-text { white-space: nowrap; }

/* ---------------------------------------------------------------- frame -- */

.inbox {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr) 320px;
    height: calc(100vh - var(--bs-app-header-height, 60px));
    overflow: hidden;
}

.inbox-list,
.inbox-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bs-body-bg);
}

.inbox-list { border-right: 1px solid var(--bs-border-color); }
.inbox-panel { border-left: 1px solid var(--bs-border-color); }

.inbox-thread {
    min-width: 0;
    min-height: 0;
    background: var(--bs-body-bg);
}

/* ------------------------------------------------------ conversation list -- */

.inbox-list-header {
    padding: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.inbox-list-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.inbox-row {
    display: flex;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    text-align: left;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--bs-border-color);
    color: inherit;
}

.inbox-row:hover { background: rgba(var(--bs-inverse-rgb), 0.05); }

.inbox-row.is-active {
    background: rgba(var(--bs-theme-rgb), 0.12);
    box-shadow: inset 3px 0 0 var(--bs-theme);
}

.inbox-row.is-unread .inbox-row-name,
.inbox-row.is-unread .inbox-row-preview { font-weight: 600; }

.inbox-row-avatar {
    flex: 0 0 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(var(--bs-inverse-rgb), 0.12);
}

.inbox-row-body { min-width: 0; flex: 1; }
.inbox-row-name { font-size: 0.8125rem; }

.inbox-row-preview {
    font-size: 0.75rem;
    color: var(--bs-body-color);
    opacity: 0.65;
}

.inbox-row-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.35rem;
}

.inbox-row-meta .badge { font-size: 0.625rem; font-weight: 500; }

/* -------------------------------------------------------------- thread -- */

.inbox-thread-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.inbox-messages {
    flex: 1;
    /* Drafts and suggestions grow downward; without a floor the transcript
       collapses to a sliver exactly when the agent needs to check context. */
    min-height: 10rem;
    overflow-y: auto;
    padding: 1rem;
}

.msg { display: flex; margin-bottom: 0.75rem; }
.msg.is-out { justify-content: flex-end; }
.msg.is-note { justify-content: center; }

.msg-bubble {
    max-width: min(70%, 42rem);
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(var(--bs-inverse-rgb), 0.08);
}

.is-out .msg-bubble {
    background: rgba(var(--bs-theme-rgb), 0.18);
}

.msg-meta {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.6875rem;
    opacity: 0.6;
    margin-bottom: 0.15rem;
}

.msg-body { font-size: 0.8125rem; white-space: pre-wrap; word-break: break-word; }

.msg-attachments { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; }

.msg-status {
    font-size: 0.625rem;
    opacity: 0.7;
    margin-top: 0.25rem;
    text-align: right;
}

.msg-note {
    max-width: min(80%, 46rem);
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    white-space: pre-wrap;
    border-radius: 0.5rem;
    background: rgba(var(--bs-warning-rgb), 0.12);
    border: 1px dashed rgba(var(--bs-warning-rgb), 0.5);
}

.msg-note-head {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    opacity: 0.7;
    margin-bottom: 0.2rem;
}

/* --------------------------------------------------- drafts & suggestions -- */

.inbox-drafts,
.inbox-suggestions {
    padding: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
    max-height: 28vh;
    overflow-y: auto;
}

.draft {
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(var(--bs-theme-rgb), 0.4);
    background: rgba(var(--bs-theme-rgb), 0.08);
}

.draft + .draft { margin-top: 0.5rem; }

.draft-head {
    display: flex;
    align-items: center;
    font-size: 0.75rem;
    margin-bottom: 0.35rem;
}

.draft-body {
    font-size: 0.8125rem;
    white-space: pre-wrap;
    margin-bottom: 0.5rem;
}

.suggestion-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
}

.suggestion {
    text-align: left;
    padding: 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid var(--bs-border-color);
    background: rgba(var(--bs-inverse-rgb), 0.04);
    color: inherit;
}

.suggestion:hover { border-color: var(--bs-theme); }

.suggestion-stance {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.6;
    margin-bottom: 0.2rem;
}

.suggestion-body { font-size: 0.75rem; white-space: pre-wrap; }
.suggestion-cites { font-size: 0.625rem; opacity: 0.6; margin-top: 0.35rem; }

/* ------------------------------------------------------------ composer -- */

.inbox-composer {
    padding: 0.75rem;
    border-top: 1px solid var(--bs-border-color);
}

/* --------------------------------------------------------- context panel -- */

.inbox-panel-tabs {
    display: flex;
    gap: 0.25rem;
    padding: 0.75rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.inbox-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.panel-block {
    padding: 0.875rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.panel-title {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.6;
    margin-bottom: 0.4rem;
}

.panel-dl {
    display: grid;
    grid-template-columns: 7rem 1fr;
    gap: 0.15rem 0.5rem;
    font-size: 0.75rem;
    margin: 0;
}

.panel-dl dt { font-weight: 500; opacity: 0.6; }
.panel-dl dd { margin: 0; word-break: break-word; }

.memory-fact {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.35rem 0;
    border-bottom: 1px dotted var(--bs-border-color);
}

.memory-key { font-size: 0.6875rem; text-transform: uppercase; opacity: 0.6; }
.memory-value { font-size: 0.8125rem; word-break: break-word; }

.event { display: flex; gap: 0.6rem; padding: 0.3rem 0; }

.event-dot {
    flex: 0 0 8px;
    height: 8px;
    margin-top: 0.4rem;
    border-radius: 50%;
    background: var(--bs-theme);
}

.event-title { font-size: 0.75rem; }
.event-time { font-size: 0.6875rem; opacity: 0.55; }

.decision {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--bs-border-color);
}

.decision-reasons {
    font-size: 0.6875rem;
    opacity: 0.75;
    margin: 0.3rem 0 0;
    padding-left: 1rem;
}

.decision-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.625rem;
    opacity: 0.55;
    margin-top: 0.3rem;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 1199.98px) {
    .inbox { grid-template-columns: 300px minmax(0, 1fr); }

    /* The panel becomes an overlay rather than disappearing: on a laptop the
       agent still needs memory and decisions, just not permanently. */
    .inbox-panel {
        position: fixed;
        top: var(--bs-app-header-height, 60px);
        right: 0;
        bottom: 0;
        width: 320px;
        z-index: 1030;
        transform: translateX(100%);
        transition: transform 0.2s ease;
        box-shadow: -0.5rem 0 1.5rem rgba(0, 0, 0, 0.15);
    }

    .inbox-panel.is-open { transform: translateX(0); }
}

@media (max-width: 991.98px) {
    .inbox { grid-template-columns: minmax(0, 1fr); }

    .inbox-list.is-hidden-mobile,
    .inbox-thread.is-hidden-mobile { display: none; }

    .inbox-panel { width: min(320px, 90vw); }
}

/* ------------------------------------------------------------ feedback -- */

/* Sits under the decision it judges, quiet until hovered: an agent reading a
   thread should not be nagged, but the buttons must be there the moment they
   notice something wrong. */
.feedback {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px dotted var(--bs-border-color);
}

.feedback-label {
    font-size: 0.6875rem;
    opacity: 0.55;
    margin-right: 0.25rem;
}