/* One translucent surface; colors follow the native welcome theme. */
.platform-assistant {
    --pa-bg: rgba(25, 34, 53, .58);
    --pa-fg: #eef3fc;
    --pa-muted: #a1aec3;
    --pa-line: rgba(211, 224, 255, .16);
    --pa-soft: rgba(220, 234, 255, .055);
    --pa-hover: rgba(220, 234, 255, .1);
    --pa-accent: #39b9ec;
    --pa-shadow: 0 22px 58px rgba(0, 7, 24, .24);
    width: 100%;
    color: var(--pa-fg);
    font: 15px/1.7 'Segoe UI', 'Microsoft YaHei', system-ui, sans-serif;
    text-align: left;
    position: relative;
    z-index: 12;
    transform-origin: center bottom;
}
body.light-theme .platform-assistant,
[data-theme=light] .platform-assistant,
.platform-assistant.pa-light {
    --pa-bg: rgba(255, 255, 255, .57);
    --pa-fg: #26354c;
    --pa-muted: #73849a;
    --pa-line: rgba(255, 255, 255, .82);
    --pa-soft: rgba(73, 102, 145, .055);
    --pa-hover: rgba(73, 102, 145, .09);
    --pa-accent: #199aca;
    --pa-shadow: 0 18px 48px rgba(36, 62, 105, .14);
}
.platform-assistant * { box-sizing: border-box; }
.platform-assistant [hidden] { display: none !important; }
.container { --welcome-content-width: 980px; }
.container > .platform-assistant,
.container > .capabilities { width: 100%; max-width: var(--welcome-content-width); }
.container > .platform-assistant { margin: 0 auto 22px; }
.container > .capabilities {
    padding-left: 0;
    padding-right: 0;
    /* The legacy .animate-fade-in starts at opacity:0. Keep a visible base
       state when reduced motion disables it, or animation gets cancelled. */
    opacity: 1;
    animation-fill-mode: both;
}
.pa-shell {
    background: var(--pa-bg);
    backdrop-filter: blur(28px) saturate(155%);
    -webkit-backdrop-filter: blur(28px) saturate(155%);
    border: 1px solid var(--pa-line);
    border-radius: 24px;
    box-shadow: var(--pa-shadow), inset 0 1px 0 rgba(255, 255, 255, .12);
    overflow: hidden;
    transition: box-shadow .3s, border-color .3s;
}
.pa-focused .pa-shell {
    border-color: color-mix(in srgb, var(--pa-accent) 32%, var(--pa-line));
    box-shadow: var(--pa-shadow), 0 0 0 3px rgba(57, 185, 236, .045), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.platform-assistant button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font: inherit; line-height: 1.4; color: inherit; cursor: pointer;
    border: 1px solid transparent; border-radius: 10px;
    background: transparent; padding: 6px 10px;
    transition: background .18s, color .18s, transform .18s;
}
.platform-assistant button:hover { background: var(--pa-hover); }
.platform-assistant button:disabled { opacity: .45; cursor: default; }
.platform-assistant button:focus-visible,
.platform-assistant textarea:focus-visible { outline: 2px solid var(--pa-accent); outline-offset: 3px; }
.platform-assistant svg { width: 18px; height: 18px; flex: none; }
.pa-composer { padding: 18px 18px 15px; }
.pa-purpose { margin: 0 0 10px 74px; color: var(--pa-muted); font-size: 12px; }
.pa-input-row { display: flex; align-items: flex-start; gap: 16px; }
.platform-assistant .pa-upload {
    width: 58px; height: 70px; flex: none; border-radius: 13px;
    background: var(--pa-soft); border: 1px dashed color-mix(in srgb, var(--pa-muted) 30%, transparent);
    color: var(--pa-muted); padding: 0;
}
.pa-upload svg { width: 23px; height: 23px; }
.platform-assistant textarea {
    resize: none; flex: 1; min-width: 0; width: 100%; min-height: 68px; max-height: 160px;
    color: var(--pa-fg); background: transparent; border: 0;
    font: inherit; font-size: 16px; padding: 5px 2px; line-height: 1.7;
}
.platform-assistant textarea::placeholder { color: var(--pa-muted); opacity: .76; }
.pa-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-left: 74px; margin-top: 0; }
.pa-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-width: 0; }
.pa-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--pa-fg); padding-right: 9px; }
.pa-badge svg { color: var(--pa-accent); width: 16px; height: 16px; }
.pa-toolbar button { color: var(--pa-muted); font-size: 12px; padding: 6px 8px; }
.pa-toolbar svg { width: 15px; height: 15px; }
.pa-toolbar-divider { height: 14px; border-left: 1px solid color-mix(in srgb, var(--pa-muted) 24%, transparent); margin: 0 6px; }
.pa-question-toggle svg { width: 12px; height: 12px; transition: transform .25s; }
.pa-question-toggle[aria-expanded=true] svg { transform: rotate(180deg); }
.pa-send-controls { display: flex; align-items: center; flex: none; gap: 8px; }
.platform-assistant .pa-send {
    width: 36px; height: 36px; border-radius: 50%; padding: 0;
    background: var(--pa-accent); color: white;
}
.platform-assistant .pa-send:disabled { opacity: 1; color: var(--pa-muted); background: var(--pa-soft); }
.platform-assistant .pa-send:not(:disabled):hover { transform: translateY(-1px); filter: brightness(1.08); }
.platform-assistant .pa-stop { border-color: var(--pa-line); color: var(--pa-muted); font-size: 12px; }
.pa-status { color: var(--pa-muted); font-size: 12px; padding: 8px 0 0 74px; white-space: pre-wrap; }
.pa-status:empty { display: none; }
.pa-suggestions { display: flex; flex-wrap: wrap; gap: 8px; padding: 13px 18px 16px; border-top: 1px solid var(--pa-line); }

.pa-suggestions button { font-size: 12px; color: var(--pa-muted); text-align: left; background: var(--pa-soft); border-radius: 12px; padding: 8px 12px; }
.pa-history { max-height: 220px; overflow: auto; padding: 14px; border-bottom: 1px solid var(--pa-line); }
.pa-history button { display: block; width: 100%; text-align: left; font-size: 13px; margin: 3px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pa-disclosure {
    height: 0; opacity: 0; overflow: hidden; visibility: hidden;
    transition: height .36s cubic-bezier(.22,.8,.25,1), opacity .22s ease, visibility 0s .36s;
}
.pa-disclosure.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.pa-log {
    max-height: min(40vh, 440px); overflow: auto; padding: 22px 24px 12px;
    border-bottom: 1px solid var(--pa-line); scrollbar-width: thin; overscroll-behavior: contain;
}
.pa-row { margin: 0 0 20px; max-width: 100%; }
.pa-row:last-child { margin-bottom: 6px; }
.pa-user { margin-left: auto; width: fit-content; max-width: 84%; padding: 10px 15px; border-radius: 16px 16px 4px 16px; background: var(--pa-soft); }
.pa-role { font-size: 11px; color: var(--pa-muted); margin-bottom: 5px; }
.pa-user .pa-role { display: none; }
.pa-text { white-space: pre-wrap; overflow-wrap: anywhere; user-select: text; }
.pa-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pa-actions button { font-size: 12px; color: var(--pa-muted); background: var(--pa-soft); }
.pa-navigation button { color: var(--pa-accent); background: rgba(57,185,236,.065); }
.pa-previews { display: flex; gap: 10px; flex-wrap: wrap; }
.pa-thumb { position: relative; display: inline-flex; margin: 0 0 12px; }
.pa-thumb img, .pa-row img { width: 88px; height: 72px; object-fit: contain; border-radius: 10px; border: 1px solid var(--pa-line); background: var(--pa-soft); }
.pa-thumb button { position: absolute; top: -6px; right: -6px; background: var(--pa-bg); border-radius: 50%; padding: 0; width: 24px; height: 24px; }
.legacy-agent-composer { display: none !important; }
.platform-assistant.pa-focused { animation: pa-open .45s cubic-bezier(.2,.85,.3,1); }
.container > .header { opacity: 1; overflow: hidden; transition: height .36s cubic-bezier(.22,.8,.25,1), opacity .22s, margin .36s; }
.container > .capabilities { transition: transform .45s cubic-bezier(.2,1.1,.3,1), opacity .3s; }
/* Restore the welcome-page entrance: each capability rises into place a little
   after the previous one. It only runs while the page is idle, so returning to
   the cards does not replay over an active conversation. */
body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card {
    opacity: 0;
    transform: translateY(18px) scale(.985);
    animation: pa-card-enter 1.05s cubic-bezier(.2,.85,.3,1) forwards;
}
body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card:nth-child(1) { animation-delay: .18s; }
body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card:nth-child(2) { animation-delay: .29s; }
body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card:nth-child(3) { animation-delay: .40s; }
body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card:nth-child(4) { animation-delay: .51s; }
body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card:nth-child(5) { animation-delay: .62s; }
body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card:nth-child(6) { animation-delay: .73s; }
body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card:nth-child(7) { animation-delay: .84s; }
body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card:nth-child(8) { animation-delay: .95s; }
body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card:nth-child(9) { animation-delay: 1.06s; }
body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card:nth-child(10) { animation-delay: 1.17s; }
body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card:nth-child(11) { animation-delay: 1.28s; }
body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card:nth-child(12) { animation-delay: 1.39s; }
body.platform-assistant-active .container > .header { opacity: 0; margin-bottom: 12px; }
body.platform-assistant-active .container > .capabilities { transform: translateY(6px); }
body.platform-assistant-show-tools .container > .capabilities { transform: translateY(0); }
.pa-toolbar [data-action=tools] { color: var(--pa-accent); background: rgba(57,185,236,.065); }
@keyframes pa-open { 0% { transform: scale(.995); } 60% { transform: scale(1.004); } 100% { transform: scale(1); } }
@keyframes pa-card-enter { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pa-reveal { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .platform-assistant, .pa-shell, .pa-suggestions, .container > .capabilities { animation: none !important; transition: none !important; }
    body:not(.platform-assistant-active) .container > .capabilities.pa-capability-entering .cap-card { animation-duration: .18s; animation-delay: 0s !important; }
    /* Preserve a short structural transition; omit decorative spring motion. */
    .pa-disclosure { transition: height .18s ease-out, opacity .14s, visibility 0s .18s; }
    .pa-disclosure.is-open { transition-delay: 0s; }
    .container > .header { animation: none !important; transition: height .18s ease-out, opacity .14s, margin .18s; }
}
@media (max-width: 650px) {
    .pa-composer { padding: 14px; }
    .pa-input-row { gap: 12px; }
    .pa-purpose { margin-left: 54px; }
    .platform-assistant .pa-upload { width: 42px; height: 56px; }
    .platform-assistant textarea { font-size: 14px; min-height: 62px; }
    .pa-bottom { padding-left: 0; margin-top: 7px; gap: 5px; }
    .pa-toolbar { gap: 1px; }
    .pa-badge { font-size: 11px; padding-right: 3px; gap: 4px; }
    .pa-toolbar button { padding: 6px; font-size: 11px; }
    .pa-toolbar-divider { margin: 0 2px; }
    .pa-toolbar button[data-action=history] span, .pa-toolbar button[data-action=new] span { display: none; }
    .pa-status { padding-left: 0; }
    .pa-log { padding: 16px 14px 10px; max-height: 32vh; }
    .pa-suggestions { padding: 12px; }
    .container { padding-left: 18px; padding-right: 18px; }
    .container > .capabilities { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
    body.platform-assistant-active .container > .capabilities { max-height: 170px; overflow-y: auto; }
}