/*
 * QingQuant Agent workspace (page-agent.php)
 */

.qq-agent-page {
    background: #070b12;
    color: var(--qq-text-inv, #e8edf5);
}
.ag-seo {
    background: #fff;
    color: var(--qq-text, #1a2332);
}
.qq-agent-page .qq-header {
    background: rgba(7, 11, 18, .92);
    position: sticky;
    top: 0;
    z-index: 20;
}

.ag-app {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px;
    min-height: calc(100dvh - 72px);
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 16px 20px;
    box-sizing: border-box;
}

.ag-main,
.ag-side,
.ag-panel,
.ag-pay {
    border: 1px solid rgba(163, 230, 53, .14);
    background: linear-gradient(160deg, rgba(17, 26, 43, .97), rgba(13, 20, 32, .99));
    border-radius: 16px;
}
.ag-main {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.ag-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: 0;
}

.ag-ph {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px 10px;
}
.ag-ph h1,
.ag-ph h3 {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
.ag-meta {
    font-size: 12px;
    color: var(--qq-text-inv-2, #93a2ba);
    white-space: nowrap;
}

.ag-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 28px 24px;
    gap: 16px;
}
.ag-empty[hidden],
.ag-scroll[hidden] { display: none; }
.ag-empty p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--qq-text-inv-2, #93a2ba);
    max-width: 440px;
}
.ag-quick,
.ag-side-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ag-pill {
    border: 1px solid rgba(163, 230, 53, .22);
    background: rgba(163, 230, 53, .06);
    color: var(--qq-lime-300, #bef264);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12.5px;
    cursor: pointer;
    font-family: inherit;
}
.ag-pill:hover { background: rgba(163, 230, 53, .12); }
.ag-pill:disabled {
    opacity: .45;
    cursor: not-allowed;
    color: var(--qq-text-inv-2, #93a2ba);
    border-color: rgba(148, 163, 184, .2);
    background: rgba(255, 255, 255, .03);
}

.ag-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 8px 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ag-dock { padding: 0 16px 16px; }
.ag-ask {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 8px 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(148, 163, 184, .2);
}
.ag-ask .box {
    flex: 1;
    resize: none;
    min-height: 40px;
    max-height: 120px;
    border: 0;
    background: transparent;
    color: #e8edf5;
    font: inherit;
    font-size: 14px;
    outline: none;
    padding: 8px 0;
}
.ag-send {
    height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #0a2c05;
    background: var(--qq-grad-lime, linear-gradient(135deg, #a3e635 0%, #22c55e 100%));
}
.ag-send:disabled { opacity: .5; cursor: wait; }
.ag-legal {
    margin: 8px 2px 0;
    font-size: 11px;
    color: rgba(147, 162, 186, .8);
}

.msg { display: flex; }
.msg.u { justify-content: flex-end; }
.bubble {
    max-width: 82%;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.55;
}
.msg.u .bubble {
    background: var(--qq-grad-lime, linear-gradient(135deg, #a3e635 0%, #22c55e 100%));
    color: #0a2c05;
    font-weight: 600;
    border-bottom-right-radius: 4px;
}
.msg.a .bubble {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(148, 163, 184, .14);
    color: #e8edf5;
    border-bottom-left-radius: 4px;
}
.msg.a .bubble a { color: #a3e635; }
.tool {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--qq-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 12px;
    color: var(--qq-lime-300, #bef264);
    background: rgba(163, 230, 53, .06);
    border: 1px solid rgba(163, 230, 53, .16);
    border-radius: 10px;
    padding: 9px 12px;
}
.tool .sp { width: 12px; height: 12px; border-radius: 3px; background: rgba(163, 230, 53, .3); }
@keyframes qq-agin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.qq-agin { animation: qq-agin .4s ease; }

.ag-panel,
.ag-pay { padding: 4px 14px 14px; }
.ag-panel .ag-ph,
.ag-pay .ag-ph { padding: 12px 0 8px; }
.ag-pay b {
    display: block;
    margin: 12px 0 8px;
    color: #fff;
    font-size: 14px;
}
.ag-pay p,
.ag-muted {
    margin: 0 0 12px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--qq-text-inv-2, #93a2ba);
}
.ag-side .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 13px;
    text-decoration: none;
}
.ag-side .btn-sm { height: 34px; }
.ag-side .btn-ghost {
    border: 1px solid rgba(148, 163, 184, .22);
    background: transparent;
    color: #e8edf5;
}

.ag-seo .section-head h2,
.ag-seo .cap h3,
.ag-seo .principle h3,
.cta-band h2 {
    color: inherit;
}
.ag-seo .section-head p,
.ag-seo .cap p,
.ag-seo .principle p {
    margin: 10px 0 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--qq-text-2, #5b667a);
}
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cap {
    padding: 26px;
    border: 1px solid var(--qq-border, #e3e8ef);
    border-radius: 16px;
    background: #fff;
}
.cap h3 { margin: 0; font-size: 18px; }
.principle {
    display: flex;
    gap: 16px;
    padding: 22px;
    border-radius: 14px;
    background: var(--qq-bg-soft, #f6f8fa);
    border: 1px solid var(--qq-border, #e3e8ef);
}
.principle .n {
    font-family: var(--qq-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 28px;
    font-weight: 800;
    color: var(--qq-lime-500, #84cc16);
    line-height: 1;
}
.principle h3 { margin: 0; font-size: 17px; }
.cta-band {
    background: var(--qq-grad-hero, linear-gradient(180deg, #0a0e17 0%, #070b12 100%));
    color: #fff;
    border-radius: 26px;
    padding: 64px;
    text-align: center;
}
.cta-band h2 { color: #fff; font-size: clamp(28px, 4vw, 42px); }
.cta-band p {
    color: var(--qq-text-inv-2, #93a2ba);
    font-size: 18px;
    max-width: 520px;
    margin: 16px auto 0;
}
.a-cta-btns { justify-content: center; margin-top: 30px; flex-wrap: wrap; }
.cta-band .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .24); }

@media (max-width: 960px) {
    .ag-app {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .ag-main { min-height: 70dvh; }
    .cap-grid { grid-template-columns: 1fr; }
    .cta-band { padding: 40px 20px; }
}