/* MyDataTheme - Software License Assistant.

   A dedicated product page, not a floating chatbot. The deterministic status
   panel is the wide primary surface at the top of the page; the conversation is
   a full-width but clearly secondary band underneath it. Nothing here uses the
   rounded chat-bubble language - a message is a bordered block, like every other
   surface in this theme. */

.md-assistant { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
@media (max-width: 1000px) { .md-assistant { grid-template-columns: minmax(0, 1fr); } }

/* -- Primary: deterministic licence state --------------------------------- */

.md-assistant__status {
    background: var(--md-surface);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-lg);
    padding: 24px;
}

.md-assistant__subtitle {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--md-muted);
    margin: 0 0 14px;
}

/* Licence context strip: which licence every state below refers to. It is the
   header of the panel, so it spans the full panel width. */
.md-assistant__context {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin: -24px -24px 24px;
    padding: 16px 24px;
    background: var(--md-surface-alt);
    border-bottom: 1px solid var(--md-border);
    border-radius: var(--md-radius-lg) var(--md-radius-lg) 0 0;
}
.md-assistant__context-label {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--md-muted);
    margin: 0 0 2px;
}
.md-assistant__context-name { margin: 0; font-size: 19px; font-weight: 800; color: var(--md-ink); letter-spacing: -.015em; }

.md-assistant__progress { margin-bottom: 24px; }

.md-assistant__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.md-assistant__cta .md-btn { min-width: 220px; }

/* Source-of-truth note: which surface is authoritative for what. */
.md-assistant__authority {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--md-border);
    font-size: 12.5px;
    color: var(--md-muted);
}

/* -- Beside it: troubleshooting and escalation ---------------------------- */

.md-assistant__side {
    background: var(--md-surface);
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-lg);
    padding: 24px;
}
.md-assistant__help { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; font-size: 14.5px; }
.md-assistant__help li { border-top: 1px solid var(--md-border); }
.md-assistant__help li:first-child { border-top: 0; }
.md-assistant__help a { display: block; padding: 12px 0; color: var(--md-ink-soft); font-weight: 500; }
.md-assistant__help a:hover { color: var(--md-primary-dark); text-decoration: none; }

.md-assistant__escalate {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--md-border);
    font-size: 14px;
}
.md-assistant__escalate p { margin: 0 0 12px; color: var(--md-muted); }

@media (max-width: 640px) {
    .md-assistant__cta .md-btn { min-width: 0; width: 100%; }
}

/* -- Licence chooser ------------------------------------------------------
   The assistant needs one licence before it can say anything, and every entry
   point links here without one. This is that choice, in the same card language
   as the rest of the account workspace. */

.md-assistant__choices { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--md-border); }
.md-assistant__choice-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.md-assistant__choice-list li {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border: 1px solid var(--md-border);
    border-radius: var(--md-radius-md);
    background: var(--md-surface);
}
.md-assistant__choice-list li:hover { border-color: var(--md-primary); background: var(--md-primary-soft); }
.md-assistant__choice-list a { display: block; text-decoration: none; }
.md-assistant__choice-name { display: block; font-weight: 600; color: var(--md-ink); }
.md-assistant__choice-vendor {
    display: block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--md-muted);
}
