/* Quant assistant — global (non-scoped) styles. Loaded via _content/Equant360.UI.Shared/css/quant.css.
   v1 minimal skin; ported from the Quant assistant's global stylesheet. Only the rules used by the
   launcher, message list, chart/table cards and session list are carried here — the chat-panel shell,
   drafted-action cards and follow-up chips are not part of this port. */

/* Brand bridge. The ported assistant stylesheets were authored against a cyan-and-coral palette that
   does not exist in this product. Rather than carry those colours in, each one is aliased onto an
   Equant360 design token here, in one place, so the assistant inherits Equant360 branding and follows
   any future theme change automatically. The scoped component stylesheets still carry inline
   var(..., #fallback) values; those fallbacks are now dead code kept only for fidelity to the source.
   Cool accent -> the green accent ramp; warm accent -> the gold primary ramp. */
:root {
  --cyan:        var(--color-accent);          /* #009B4D */
  --cyan-deep:   var(--color-accent-dark);     /* #008040 */
  --cyan-wash:   var(--color-accent-lighter);  /* rgba(0,155,77,.10) */
  --coral:       var(--color-primary);         /* #E9A300 */
  --coral-soft:  var(--color-primary-light);   /* #F2B733 */
  --gray-100:    var(--surface-2);             /* #f3f1ec */

  /* The source used a pale two-tone wash behind answer cards, not a saturated brand gradient, so this
     maps to the two lighter ramp tints rather than to --grad-brand, which would be far too strong
     behind body text. */
  --grad-warm:   linear-gradient(120deg, var(--color-primary-lighter), var(--color-accent-lighter));

  /* The source's soft peach card edge has no Equant360 equivalent; --color-primary-lighter is too
     faint to read as a border, so this falls back to the standard app border. */
  --warm-line:   var(--border-color);
}

.quant-msg {
    display: flex;
}

.quant-msg-user {
    justify-content: flex-end;
}

.quant-msg-agent {
    justify-content: flex-start;
}

.quant-msg-body {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.quant-msg-user .quant-msg-body {
    background: #00A2FF;
    color: #fff;
    border-bottom-right-radius: 3px;
}

.quant-msg-agent .quant-msg-body {
    background: #fff;
    color: #16232f;
    border: 1px solid #e2e9f0;
    border-bottom-left-radius: 3px;
}

.quant-msg-error .quant-msg-body {
    background: #fff3f3;
    border-color: #f0c2c2;
    color: #a12a2a;
}

/* Quota notice. Deliberately NOT styled like .quant-msg-error: the turn succeeded, and dressing an
   informational "you are near your allowance" message as a failure would misread as Quant being
   broken. */
.quant-notice {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.35;
    background: #eef5fd;
    border: 1px solid #cfe0f5;
    color: #1c4a7a;
}

.quant-notice--warning {
    background: #fff8ec;
    border-color: #f2ddb4;
    color: #8a5a12;
}

.quant-notice__icon {
    flex: 0 0 auto;
    line-height: 1.35;
}

/* Rendered markdown (agent answers only) — the bubble's pre-wrap is for plain user text;
   Markdig emits real block HTML, so normalise whitespace and keep block margins tight. */
.quant-msg-md { white-space: normal; }
.quant-msg-md > :first-child { margin-top: 0; }
.quant-msg-md > :last-child { margin-bottom: 0; }
.quant-msg-md p { margin: 0 0 0.5em; }
.quant-msg-md ul,
.quant-msg-md ol { margin: 0 0 0.5em; padding-left: 1.25em; }
.quant-msg-md li { margin: 0.1em 0; }
.quant-msg-md strong { font-weight: 600; }
.quant-msg-md code {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.05em 0.3em;
    border-radius: 4px;
    font-size: 0.85em;
}
.quant-msg-md pre {
    background: rgba(0, 0, 0, 0.06);
    padding: 8px 10px;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0 0 0.5em;
}
.quant-msg-md pre code { background: none; padding: 0; }
.quant-msg-md table {
    border-collapse: collapse;
    margin: 0.25em 0 0.5em;
    font-size: 0.85em;
}
.quant-msg-md th,
.quant-msg-md td {
    border: 1px solid #e2e9f0;
    padding: 2px 6px;
    text-align: left;
}

.quant-typing {
    color: #9aa7b3;
}

.quant-table {
    margin-top: 8px;
    font-size: 0.8rem;
}

.quant-table summary {
    cursor: pointer;
    color: #0b6bb0;
}

.quant-table-scroll {
    overflow-x: auto;
    margin-top: 6px;
}

.quant-table table {
    border-collapse: collapse;
    width: 100%;
}

.quant-table th,
.quant-table td {
    border: 1px solid #e2e9f0;
    padding: 4px 8px;
    text-align: left;
    white-space: nowrap;
}

.quant-table-note {
    color: #8a97a3;
    margin-top: 4px;
}

/* Chart card (answer -> chart -> collapsed table). */
.quant-chart-card {
    margin-top: 8px;
    background: #fff;
    border: 1px solid #e2e9f0;
    border-radius: 10px;
    padding: 8px;
}

.quant-chart-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: #16232f;
    margin-bottom: 4px;
}

/* Session list / resume. */
.quant-sessions {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px;
    background: #f7fafd;
}

.quant-newchat-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid #cfe4f5;
    border-radius: 10px;
    background: #fff;
    color: #0b6bb0;
    cursor: pointer;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.quant-newchat-btn:hover {
    background: #eef7fe;
}

.quant-sessions-empty {
    color: #8a97a3;
    text-align: center;
    padding: 20px;
    font-size: 0.85rem;
}

.quant-session-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.quant-session-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 10px;
    border: 1px solid #e2e9f0;
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.quant-session-item:hover {
    background: #eef7fe;
    border-color: #cfe4f5;
}

.quant-session-title {
    font-size: 0.88rem;
    color: #16232f;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.quant-session-date {
    font-size: 0.72rem;
    color: #8a97a3;
}

/* Per-reply read-aloud trigger. */
.quant-readaloud-btn {
    margin-top: 6px;
    background: transparent;
    border: none;
    color: #8a97a3;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    font-size: 0.85rem;
}

.quant-readaloud-btn:hover {
    color: #0b6bb0;
}