/* ==========================================================================
   Data Agent Chat
   Two surfaces share one component:
     .dac--page      standalone /chat tab
     .dac--embedded  dock next to a Power BI report
   ========================================================================== */

/* Own the box model rather than inheriting whatever the host page happens to set;
   percentage widths here are always meant to include padding and borders. */
.dac,
.dac *,
.pbi-chat-layout,
.pbi-chat-layout * {
    box-sizing: border-box;
}

.dac {
    --dac-accent: var(--chat-avatar-color, #667eea);
    --dac-accent-soft: color-mix(in srgb, var(--dac-accent) 10%, #ffffff);
    --dac-accent-ring: color-mix(in srgb, var(--dac-accent) 22%, transparent);
    --dac-bg: #ffffff;
    --dac-surface: #f7f8fa;
    --dac-surface-strong: #eef0f4;
    --dac-border: #e4e7ec;
    --dac-border-strong: #d3d8e0;
    --dac-text: #1f2328;
    --dac-text-soft: #4a5461;
    --dac-muted: #6b7280;
    --dac-radius: 14px;
    --dac-thread-width: 760px;
    --dac-gutter: 24px;

    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--dac-bg);
    color: var(--dac-text);
    font-size: 0.95rem;
    line-height: 1.55;
}

.dac--page {
    height: calc(100dvh - 92px);
    min-height: 520px;
    border: 1px solid var(--dac-border);
    border-radius: var(--dac-radius);
    box-shadow: 0 12px 32px rgba(16, 24, 40, 0.07);
}

.dac--embedded {
    height: 100%;
    --dac-thread-width: 100%;
    --dac-gutter: 16px;
}

/* A dock is only 320px wide at its narrowest, and the empty state below already says what
   the panel is for, so the name carries the header on its own. */
.dac--embedded .dac__subtitle {
    display: none;
}

/* --------------------------------------------------------------- header -- */

/* The dock is resizable down to 320px, which is narrower than the identity and the
   whole button row laid side by side. The row is allowed to wrap so that the buttons
   drop onto a line of their own instead of sliding over the title. */
.dac__header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 12px var(--dac-gutter);
    border-bottom: 1px solid var(--dac-border);
    background: var(--dac-bg);
    flex-shrink: 0;
}

/* A basis well under the text it holds: the line breaks only once even the shortened
   identity stops fitting, and above that width the subtitle gives up room first. */
.dac__identity {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1 1 150px;
    min-width: 0;
}

.dac__badge {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--dac-accent);
    color: #ffffff;
}

.dac__badge .mud-icon-root {
    font-size: 1.25rem;
}

.dac__identity-copy {
    min-width: 0;
}

.dac__title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--dac-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dac__subtitle {
    display: block;
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--dac-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Icon buttons do not shrink, so the row keeps its own size and is pushed right by the
   auto margin - which holds on the wrapped line too, where there is nothing to space
   it against. */
.dac__header-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    flex: 0 1 auto;
    margin-left: auto;
    justify-content: flex-end;
    min-width: 0;
}

.dac__header-actions .mud-icon-button {
    color: var(--dac-muted);
}

.dac__header-actions .mud-icon-button:hover:not(:disabled) {
    color: var(--dac-accent);
    background: var(--dac-accent-soft);
}

.dac__header-divider {
    width: 1px;
    height: 22px;
    margin: 0 6px;
    flex-shrink: 0;
    background: var(--dac-border);
}

.dac__header-action--on.mud-icon-button {
    color: var(--dac-accent);
    background: var(--dac-accent-soft);
}

/* The overflow menu holds what the header has no room for; keep it narrow enough for a
   320px dock and let the item labels breathe. */
.dac-header-menu {
    min-width: 232px;
}

/* Menus are rendered by the popover provider at the root, on MudBlazor's popover layer
   (1201). A floating dock sits at 1300, so its own menu has to be lifted over it - and
   still left under the dialog layer at 1400. */
.dac-header-menu.mud-popover {
    z-index: 1350;
}

.dac-header-menu .mud-list-item {
    padding-top: 7px;
    padding-bottom: 7px;
}

/* ------------------------------------------------------------- settings -- */

/* The cog of a super administrator: four switches that change their own answers
   and nobody else's. It drops under the header the way the history list does. */
.dac__settings {
    flex-shrink: 0;
    padding: 10px var(--dac-gutter) 12px;
    border-bottom: 1px solid var(--dac-border);
    background: var(--dac-surface);
}

.dac__settings-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--dac-text);
}

.dac__settings-head .mud-icon-root {
    color: var(--dac-accent);
}

.dac__settings-note {
    margin: 2px 0 10px;
    font-size: 0.75rem;
    line-height: 1.35;
    color: var(--dac-muted);
}

.dac__settings-list {
    display: grid;
    gap: 6px;
}

.dac__settings-item {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid var(--dac-border);
    border-radius: 10px;
    background: var(--dac-bg);
}

.dac__settings-item .mud-switch {
    margin: 0;
    flex-shrink: 0;
}

.dac__settings-copy {
    min-width: 0;
    padding-top: 4px;
}

.dac__settings-name {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--dac-text);
    line-height: 1.25;
}

.dac__settings-detail {
    display: block;
    font-size: 0.73rem;
    line-height: 1.35;
    color: var(--dac-muted);
}

/* ------------------------------------------------------ context picker -- */

/* MudBlazor's outlined field is built for forms; these overrides shrink it into a
   pill that sits in the header next to the action buttons. Selectors mirror
   MudBlazor 8 markup, so they must stay in sync if the package is upgraded. */
.dac__context-picker {
    flex: 0 1 480px;
    min-width: 200px;
}

.dac__context-picker .mud-input-control {
    margin: 0;
}

.dac__context-picker .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 999px;
    border-color: var(--dac-border-strong);
}

.dac__context-picker .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--dac-accent);
}

.dac__context-picker .mud-input.mud-input-outlined.mud-input-adorned-start {
    padding-left: 12px;
    padding-inline-start: 12px;
    background: var(--dac-surface);
    border-radius: 999px;
}

.dac__context-picker .mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
.dac__context-picker div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 0.82rem;
    text-overflow: ellipsis;
}

.dac__context-picker .mud-input-adornment .mud-icon-root {
    font-size: 1.05rem;
    color: var(--dac-muted);
}

.dac__context-picker .mud-input-adornment-end .mud-icon-button {
    width: 26px;
    height: 26px;
    padding: 3px;
}

/* Dropdown list of reports. MudBlazor sizes the popover to the anchor, so the
   minimum keeps long report paths readable even when the pill has shrunk. */
.dac-context-popover {
    min-width: min(480px, calc(100vw - 32px));
    max-width: min(640px, calc(100vw - 32px));
}

.dac-context-popover .mud-list-item {
    padding-top: 6px;
    padding-bottom: 6px;
}

.dac__context {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px var(--dac-gutter);
    border-bottom: 1px solid var(--dac-border);
    background: var(--dac-accent-soft);
    color: var(--dac-text-soft);
    flex-shrink: 0;
}

.dac__context .mud-icon-root {
    color: var(--dac-accent);
    flex-shrink: 0;
}

.dac__context-copy {
    min-width: 0;
}

.dac__context-label {
    display: block;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dac-muted);
    line-height: 1.2;
}

.dac__context-name {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dac-text);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

.dac__stage {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
}

.dac__scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;

    /* Asking for overflow-y alone leaves the other axis scrollable, and one wide answer - a query, a
       table - then slides the whole thread sideways. Both of those scroll inside themselves already. */
    overflow-x: hidden;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--dac-border-strong) transparent;
    -webkit-overflow-scrolling: touch;
}

.dac__scroll.scrolling-to-bottom {
    scroll-behavior: auto;
}

.dac__scroll::-webkit-scrollbar {
    width: 10px;
}

.dac__scroll::-webkit-scrollbar-track {
    background: transparent;
}

.dac__scroll::-webkit-scrollbar-thumb {
    background: var(--dac-border-strong);
    border: 3px solid var(--dac-bg);
    border-radius: 999px;
}

.dac__scroll::-webkit-scrollbar-thumb:hover {
    background: #b9c0cc;
}

.dac__thread {
    display: flex;
    flex-direction: column;
    gap: 22px;
    width: 100%;
    max-width: var(--dac-thread-width);
    margin: 0 auto;
    padding: 24px var(--dac-gutter) 12px;
}

/* Jump-to-latest pill; visibility is driven by the class the scroll interop sets. */
.dac__jump {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%) translateY(6px);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid var(--dac-border);
    border-radius: 999px;
    background: var(--dac-bg);
    color: var(--dac-text-soft);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.14);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.dac__scroll.user-scrolled-up + .dac__jump {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.dac__jump:hover {
    border-color: var(--dac-accent);
    color: var(--dac-accent);
}

/* ------------------------------------------------------------- messages -- */

.dac__msg {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.dac__msg--user {
    align-items: flex-end;
}

.dac__msg-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
}

.dac__msg-author {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--chat-user-name-color, var(--dac-accent));
}

.dac__msg--bot .dac__msg-author {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--dac-text);
}

.dac__msg--bot .dac__msg-author .mud-icon-root {
    font-size: 1rem;
    color: var(--dac-accent);
}

.dac__msg-time {
    font-size: 0.72rem;
    color: var(--dac-muted);
}

/* Token spend, reported per answer next to the timestamp. */
.dac__msg-usage {
    font-size: 0.7rem;
    color: var(--dac-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: help;
}

.dac__msg-usage::before {
    content: "·";
    margin-right: 6px;
}

/* Running total for the conversation, in the composer toolbar. */
.dac__usage {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--dac-surface);
    color: var(--dac-muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    cursor: help;
}

.dac__usage .mud-icon-root {
    font-size: 0.9rem;
}

.dac__usage-cost {
    padding-left: 5px;
    border-left: 1px solid var(--dac-border-strong);
    color: var(--dac-text-soft);
    font-weight: 600;
}

.dac__msg-body {
    max-width: 100%;
    min-width: 0;
    color: var(--chat-message-text-color, var(--dac-text));
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* The user's turn reads as a card; the agent's turn reads as page content. */
.dac__msg--user .dac__msg-body {
    max-width: 88%;
    padding: 11px 15px;
    border: 1px solid var(--dac-border);
    border-radius: 14px 4px 14px 14px;
    background: var(--chat-message-bubble-color, var(--dac-surface));
}

.dac__msg--bot .dac__msg-body {
    padding: 0 2px;
}

.dac__msg-actions {
    display: flex;
    gap: 2px;
    min-height: 28px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.dac__msg:hover .dac__msg-actions,
.dac__msg:focus-within .dac__msg-actions {
    opacity: 1;
}

.dac__msg-actions .mud-icon-button {
    width: 28px;
    height: 28px;
    padding: 4px;
    color: var(--dac-muted);
}

.dac__msg-actions .mud-icon-button:hover {
    color: var(--dac-accent);
    background: var(--dac-accent-soft);
}

/* Markdown rendered inside a turn. */
.dac__msg-body > :first-child {
    margin-top: 0;
}

.dac__msg-body > :last-child {
    margin-bottom: 0;
}

.dac__msg-body p {
    margin: 0 0 10px;
}

.dac__msg-body ul,
.dac__msg-body ol {
    margin: 8px 0;
    padding-left: 22px;
}

.dac__msg-body li {
    margin-bottom: 4px;
}

.dac__msg-body h1,
.dac__msg-body h2,
.dac__msg-body h3,
.dac__msg-body h4 {
    margin: 16px 0 8px;
    font-weight: 700;
    line-height: 1.3;
}

.dac__msg-body h1 { font-size: 1.15rem; }
.dac__msg-body h2 { font-size: 1.08rem; }
.dac__msg-body h3 { font-size: 1rem; }
.dac__msg-body h4 { font-size: 0.95rem; }

.dac__msg-body a {
    color: var(--dac-accent);
    text-decoration: underline;
}

/* Bootstrap is loaded app-wide and colours bare <code> pink; keep chat code neutral. */
.dac__msg-body code {
    padding: 2px 6px;
    border-radius: 5px;
    background: var(--dac-surface-strong);
    color: var(--dac-text);
    font-family: Consolas, Monaco, "Courier New", monospace;
    font-size: 0.86em;
    word-wrap: break-word;
}

.dac__msg-body pre {
    margin: 10px 0;
    padding: 14px 16px;
    border: 1px solid var(--dac-border);
    border-radius: 10px;
    background: #f6f8fa;
    overflow-x: auto;
}

.dac__msg-body pre code {
    padding: 0;
    background: none;
    color: var(--dac-text);
    font-size: 0.85rem;
    line-height: 1.5;
}

.dac__msg-body blockquote {
    margin: 10px 0;
    padding: 2px 0 2px 14px;
    border-left: 3px solid var(--dac-accent);
    color: var(--dac-text-soft);
}

.dac__msg-body table {
    display: block;
    width: 100%;
    margin: 12px 0;
    border-collapse: collapse;
    font-size: 0.87rem;
    overflow-x: auto;
}

.dac__msg-body th,
.dac__msg-body td {
    border: 1px solid var(--dac-border);
    padding: 8px 12px;
    text-align: left;
    white-space: nowrap;
}

.dac__msg-body th {
    background: var(--dac-surface);
    font-weight: 700;
}

/* Bootstrap draws <hr> as a translucent filled block; draw a plain rule instead. */
.dac__msg-body hr {
    margin: 16px 0;
    height: 0;
    border: none;
    border-top: 1px solid var(--dac-border);
    background-color: transparent;
    opacity: 1;
}

/* -------------------------------------------------------------- typing -- */

.dac__typing {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 2px;
    color: var(--dac-muted);
    font-size: 0.85rem;
}

.dac__dots {
    display: inline-flex;
    gap: 4px;
}

.dac__dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dac-accent);
    animation: dac-bounce 1.2s infinite ease-in-out;
}

.dac__dots span:nth-child(2) { animation-delay: 0.15s; }
.dac__dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes dac-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
    30% { transform: translateY(-4px); opacity: 1; }
}

/* ---------------------------------------------------------- empty state -- */

.dac__welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 100%;
    padding: 32px 0;
    text-align: center;
}

.dac__welcome-badge {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin-bottom: 6px;
    border-radius: 16px;
    background: var(--dac-accent);
    color: #ffffff;
}

.dac__welcome-badge .mud-icon-root {
    font-size: 1.9rem;
}

.dac__welcome-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dac-text);
}

.dac__welcome-text {
    margin: 0;
    max-width: 540px;
    color: var(--dac-muted);
    font-size: 0.9rem;
}

.dac__followups {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 12px;
}

.dac__followups-label {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--dac-text-soft);
}

.dac__followup {
    padding: 6px 12px;
    border: 1px solid var(--dac-border);
    border-radius: 999px;
    background: var(--dac-bg);
    color: var(--dac-text-soft);
    font: inherit;
    font-size: 0.82rem;
    cursor: pointer;
}

.dac__followup:hover:not(:disabled) {
    border-color: var(--dac-accent, var(--dac-border));
    color: var(--dac-text, inherit);
}

.dac__followup:disabled {
    opacity: 0.5;
    cursor: default;
}

.dac__suggestions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-top: 20px;
    text-align: left;
}

.dac--embedded .dac__suggestions {
    grid-template-columns: minmax(0, 1fr);
}

.dac__suggestion {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--dac-border);
    border-radius: 12px;
    background: var(--dac-bg);
    color: var(--dac-text-soft);
    font: inherit;
    font-size: 0.86rem;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.dac__suggestion:hover:not(:disabled) {
    border-color: var(--dac-accent);
    background: var(--dac-accent-soft);
    transform: translateY(-1px);
}

.dac__suggestion:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.dac__suggestion .mud-icon-root {
    font-size: 1.05rem;
    color: var(--dac-accent);
    flex-shrink: 0;
    margin-top: 1px;
}

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

.dac__composer-area {
    flex-shrink: 0;
    padding: 12px var(--dac-gutter) max(12px, env(safe-area-inset-bottom, 12px));
    border-top: 1px solid var(--dac-border);
    background: var(--dac-bg);
}

.dac__composer-inner {
    width: 100%;
    max-width: var(--dac-thread-width);
    margin: 0 auto;
}

.dac__composer {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--dac-border-strong);
    border-radius: var(--dac-radius);
    background: var(--dac-bg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dac__composer:focus-within {
    border-color: var(--dac-accent);
    box-shadow: 0 0 0 3px var(--dac-accent-ring);
}

.dac__textarea {
    width: 100%;
    min-height: 46px;
    max-height: 220px;
    padding: 12px 14px 4px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--dac-text);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.5;
    resize: none;
    overflow-y: auto;
    box-sizing: border-box;
    white-space: pre-wrap;
    scrollbar-width: thin;
}

.dac__textarea::placeholder {
    color: #9aa2ae;
}

.dac__textarea:disabled {
    color: var(--dac-muted);
    cursor: not-allowed;
}

.dac__composer-tools {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 6px 6px 8px;
}

.dac__composer-tools .mud-icon-button {
    color: var(--dac-muted);
}

.dac__composer-tools .mud-icon-button:hover:not(:disabled) {
    color: var(--dac-accent);
    background: var(--dac-accent-soft);
}

.dac__composer-spacer {
    flex: 1 1 auto;
}

.dac__counter {
    font-size: 0.72rem;
    color: var(--dac-muted);
    font-variant-numeric: tabular-nums;
}

.dac__counter--over {
    color: #d32f2f;
    font-weight: 700;
}

.dac__send.mud-icon-button {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--dac-accent);
    color: #ffffff;
}

.dac__send.mud-icon-button:hover:not(:disabled) {
    background: var(--dac-accent);
    filter: brightness(0.93);
}

.dac__send.mud-icon-button:disabled {
    background: var(--dac-surface-strong);
    color: #a3aab5;
}

.dac__send--stop.mud-icon-button {
    background: #d32f2f;
    color: #ffffff;
}

.dac__hint {
    margin: 8px 2px 0;
    font-size: 0.72rem;
    color: var(--dac-muted);
    text-align: center;
}

/* Bootstrap styles <kbd> as white-on-near-black; the colour must be restated here
   or the key caps render as invisible text on the light background. */
.dac__hint kbd {
    padding: 1px 5px;
    border: 1px solid var(--dac-border-strong);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--dac-surface);
    color: var(--dac-text-soft);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Quick-prompt menu items. */
.dac-prompt-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
}

.dac-prompt-item__name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--dac-text, #1f2328);
}

.dac-prompt-item__hint {
    font-size: 0.74rem;
    color: var(--dac-muted, #6b7280);
}

/* ==========================================================================
   Power BI report + docked chat
   ========================================================================== */

/* Height is measured by the interop from the layout's own offset, so the report and the
   chat fill everything below the page heading. The calc() is only a pre-script fallback. */
.pbi-chat-layout {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: var(--pbi-chat-layout-height, calc(100dvh - 178px));
    min-height: 360px;
    min-width: 0;
    position: relative;
}

/* Until the remembered chat state is read the page stays laid out but invisible. */
.pbi-chat-layout[data-restoring] {
    visibility: hidden;
}

/* Placement is driven by flex order, so the same markup serves both docks. */
.pbi-chat-stage { order: 2; }
.pbi-chat-resizer { order: 3; }
.pbi-chat-dock { order: 4; }

.pbi-chat-layout.is-dock-left .pbi-chat-dock { order: 1; }
.pbi-chat-layout.is-dock-left .pbi-chat-resizer { order: 2; }
.pbi-chat-layout.is-dock-left .pbi-chat-stage { order: 3; }

/* The report column stacks its own heading above the report canvas, so the chat beside
   it is free to span the full height. */
.pbi-chat-stage {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.pbi-chat-heading {
    flex: 0 0 auto;
    min-width: 0;
}

.pbi-chat-report {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    display: flex;
}

.pbi-chat-report > * {
    flex: 1 1 auto;
    min-width: 0;
}

.pbi-chat-report .mud-grid,
.pbi-chat-report .mud-grid-item {
    height: 100%;
}

/* No min-height: the report takes whatever the column has left after the heading,
   and a floor here would push the page into scrolling on short windows. */
.pbi-chat-report #embed-container {
    width: 100%;
    height: 100%;
}

/* Drag handle between the report and the dock. */
.pbi-chat-resizer {
    flex: 0 0 10px;
    align-self: stretch;
    position: relative;
    cursor: col-resize;
    background: transparent;
    border: none;
    padding: 0;
    touch-action: none;
}

.pbi-chat-resizer::before {
    content: "";
    position: absolute;
    inset: 8px 4px;
    border-radius: 999px;
    background: var(--chat-avatar-color, #667eea);
    opacity: 0;
    transition: opacity 0.15s ease;
}

.pbi-chat-resizer:hover::before,
.pbi-chat-resizer:focus-visible::before,
.pbi-chat-layout.is-resizing .pbi-chat-resizer::before {
    opacity: 0.35;
}

.pbi-chat-layout.is-resizing {
    user-select: none;
}

/* The report iframe swallows pointer events while dragging; a shield keeps them. */
.pbi-chat-layout.is-resizing .pbi-chat-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
}

.pbi-chat-dock {
    position: relative;
    flex: 0 0 var(--pbi-chat-dock-width, 420px);
    width: var(--pbi-chat-dock-width, 420px);
    min-width: 320px;
    max-width: 720px;
    height: 100%;
    border: 1px solid var(--dac-border, #e4e7ec);
    border-radius: 14px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.1);
}

/* The header is the drag handle; its buttons opt out in the interop. */
.pbi-chat-dock .dac__header {
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.pbi-chat-layout.is-dragging .pbi-chat-dock .dac__header {
    cursor: grabbing;
}

.pbi-chat-layout.is-dragging .pbi-chat-dock {
    transition: none;
}

/* Free-floating window. */
.pbi-chat-dock--floating {
    position: fixed;
    left: var(--pbi-chat-float-left, auto);
    top: var(--pbi-chat-float-top, 120px);
    flex: none;
    width: var(--pbi-chat-float-width, 420px);
    height: var(--pbi-chat-float-height, 560px);
    min-width: 0;
    max-width: none;
    z-index: 1300;
    box-shadow: 0 24px 60px rgba(16, 24, 40, 0.26);
}

.pbi-chat-layout.is-floating .pbi-chat-resizer {
    display: none;
}

/* Corner grip, only meaningful while floating. */
.pbi-chat-grip {
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 18px;
    height: 18px;
    z-index: 2;
    cursor: nwse-resize;
    touch-action: none;
    background: none;
    border: none;
    padding: 0;
}

.pbi-chat-dock--floating .pbi-chat-grip {
    display: block;
}

.pbi-chat-grip::before,
.pbi-chat-grip::after {
    content: "";
    position: absolute;
    right: 3px;
    background: var(--dac-border-strong, #d3d8e0);
    border-radius: 1px;
}

.pbi-chat-grip::before {
    bottom: 3px;
    width: 10px;
    height: 2px;
}

.pbi-chat-grip::after {
    bottom: 3px;
    width: 2px;
    height: 10px;
}

.pbi-chat-grip:hover::before,
.pbi-chat-grip:hover::after {
    background: var(--chat-avatar-color, #667eea);
}

/* Drop target shown while a float is dragged near a side edge. Its geometry is set by
   the interop from the real dock area - never from the viewport - so what the preview
   outlines is exactly what releasing produces. */
.pbi-chat-snap-preview {
    position: fixed;
    z-index: 1290;
    pointer-events: none;
    background: color-mix(in srgb, var(--chat-avatar-color, #667eea) 14%, transparent);
    border: 2px dashed var(--chat-avatar-color, #667eea);
    border-radius: 14px;
}

/* Viewport-pinned launchers. Keep the hover motion inward-only: a scale() on a
   fixed element sitting against the viewport edge is counted toward scrollable
   overflow by some engines, which flashes a scrollbar in on hover. */
.pbi-chat-launcher {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.24);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.pbi-chat-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(16, 24, 40, 0.3);
    filter: brightness(1.06);
}

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

@media (max-width: 1280px) {
    .dac__subtitle {
        max-width: 260px;
    }
}

/* Below this width a side-by-side report and chat stop being usable, so the
   dock floats above the report instead of squeezing it. */
@media (max-width: 1100px) {
    .pbi-chat-resizer {
        display: none;
    }

    /* Side-by-side stops being usable here, so a dock renders as an overlay.
       A float keeps the coordinates the user dragged it to. */
    .pbi-chat-dock:not(.pbi-chat-dock--floating) {
        position: fixed;
        top: 96px;
        right: 12px;
        bottom: 12px;
        width: min(440px, calc(100vw - 24px));
        flex-basis: auto;
        min-width: 0;
        max-width: none;
        height: auto;
        z-index: 1250;
    }
}

@media (max-width: 760px) {
    .dac {
        --dac-gutter: 14px;
    }

    .dac--page {
        height: calc(100dvh - 72px);
        min-height: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .dac__subtitle {
        display: none;
    }

    .dac__context-picker {
        flex-basis: 240px;
        min-width: 140px;
    }

    .dac__header-divider {
        margin: 0 3px;
    }

    .dac__msg--user .dac__msg-body {
        max-width: 96%;
    }

    .dac__suggestions {
        grid-template-columns: minmax(0, 1fr);
    }

    .dac__hint {
        display: none;
    }

    .pbi-chat-layout {
        height: var(--pbi-chat-layout-height, calc(100dvh - 156px));
        min-height: 360px;
    }

    .pbi-chat-dock:not(.pbi-chat-dock--floating) {
        top: 78px;
        right: 8px;
        bottom: 8px;
        left: 8px;
        width: auto;
    }

    .pbi-chat-launcher {
        right: 16px;
        bottom: 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dac__scroll {
        scroll-behavior: auto;
    }

    .dac__dots span,
    .dac__suggestion,
    .dac__jump,
    .pbi-chat-launcher {
        transition: none;
        animation: none;
    }
}