/* Presentation-only recreation of Maia's Flutter session UI. */
.maia-demo {
    --demo-bg: #1e1e1e;
    --demo-surface: #333;
    --demo-text: #fcfcfc;
    --demo-muted: #a3a3a3;
    --demo-border: rgb(255 255 255 / 10%);
    --demo-accent: #89fa8a;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto 60px;
    padding-top: 88px;
    color: var(--demo-text);
    text-align: left;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color-scheme: dark;
    isolation: isolate;
}

.maia-demo *, .maia-demo *::before, .maia-demo *::after { box-sizing: border-box; }
.maia-demo [hidden] { display: none !important; }
.maia-demo p { margin: 0; }
.maia-demo img { display: block; max-width: 100%; object-fit: contain; }
.maia-demo svg { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.maia-demo button { font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.maia-demo button:focus-visible { outline: 2px solid var(--demo-accent); outline-offset: -5px; }
.maia-demo button:disabled { cursor: default; }
.maia-demo .md-player {
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / 15%);
    border-radius: 18px;
    background: var(--demo-bg);
    box-shadow: 0 22px 70px rgb(0 0 0 / 18%);
}
.maia-demo .md-frame { position: relative; height: 660px; overflow: hidden; }
.maia-demo .md-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; }
.maia-demo:not([data-enhanced]) .md-stage { display: none; }
.maia-demo[data-enhanced] .md-fallback { display: none; }
.maia-demo .md-fallback { max-width: 720px; padding: 50px 28px; margin: auto; }
.maia-demo .md-fallback > p { margin-top: 24px; }
.maia-demo .md-fallback .md-deployed { margin: 28px 0; }
.maia-demo .md-rail {
    position: absolute; inset: 0 auto 0 0; width: 51px;
    display: flex; align-items: center; flex-direction: column; gap: 24px;
    padding: 17px 0 11px; border-right: 1px solid rgb(255 255 255 / 5%);
    color: #bababa;
}
.maia-demo .md-rail > svg, .maia-demo .md-sidebar-toggle, .maia-demo .md-settings-icon { opacity: .8; }
.maia-demo .md-rail-bottom { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.maia-demo .md-profile { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.maia-demo .md-app-header {
    position: absolute; top: 0; left: 51px; right: 0; height: 54px;
    display: flex; align-items: center; gap: 9px; padding: 0 24px;
    z-index: 3; background: rgb(30 30 30 / 72%);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.maia-demo .md-app-header::after { content: ''; position: absolute; inset: auto 0 0; height: 1px; background: rgb(255 255 255 / 9%); }
.maia-demo .md-mobile-menu { display: none; }
.maia-demo .md-brand { display: flex; align-items: center; gap: 7px; font: 700 17px 'Libre Baskerville', Georgia, serif; }
.maia-demo .md-avatar {
    position: relative; display: inline-grid; place-items: center; flex-shrink: 0;
    width: 24px; height: 24px; overflow: hidden; border-radius: 32%;
    isolation: isolate;
    /* MaiaExecutiveMiniAvatar: default green/mint palette and softened blue cloud. */
    background:
        linear-gradient(to bottom, transparent, rgb(0 0 0 / 14%)),
        radial-gradient(circle at 25% 18%, rgb(255 255 255 / 18%), transparent 90%),
        radial-gradient(ellipse at 71% 27%, rgb(56 114 206 / 50%), transparent 69%),
        radial-gradient(ellipse at 75% 67%, rgb(43 251 141 / 58%), transparent 76%),
        radial-gradient(ellipse at 23% 26%, rgb(0 230 94 / 72%), transparent 87%),
        linear-gradient(225deg, rgb(43 251 141 / 46%), transparent, rgb(0 0 0 / 14%)),
        radial-gradient(circle at 27.5% 22.5%, #00e65e, #19f278 60%, #1eb062);
}
.maia-demo .md-avatar::after { content: ''; position: absolute; inset: 0; border: 1px solid rgb(252 252 252 / 12%); border-radius: inherit; }
.maia-demo .md-avatar img { width: 62%; height: 62%; }
.maia-demo .md-avatar-mini { width: 17px; height: 17px; }
.maia-demo .md-workspace { position: absolute; inset: 0 0 0 51px; overflow: hidden; }
.maia-demo .md-chat { position: absolute; inset: 0; display: flex; flex-direction: column; min-width: 0; }
.maia-demo .md-chat-scroll {
    min-height: 0; flex: 1; overflow: hidden; overflow-anchor: none;
    scrollbar-width: none; padding: 79px 28px 10px;
}
.maia-demo .md-messages { max-width: 710px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.maia-demo .md-message { min-width: 0; flex-shrink: 0; font-size: 16px; font-weight: 300; line-height: 1.5; overflow-wrap: anywhere; }
.maia-demo .md-user { align-self: flex-end; width: fit-content; max-width: min(78%, 500px); border-radius: 15px; padding: 10px 15px; background: #333; }
.maia-demo .md-assistant { padding: 0 15px; }
.maia-demo .md-assistant-name { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; font: 700 16px 'Libre Baskerville', Georgia, serif; }
.maia-demo .md-inline-file, .maia-demo .md-inline-gmail {
    display: inline-flex; align-items: center; gap: 5px; max-width: 100%;
    vertical-align: middle; border-radius: 50px; padding: 2px 8px;
    font-size: 14px; font-weight: 400; line-height: 1.45; white-space: nowrap;
}
.maia-demo .md-inline-file { background: rgb(33 150 243 / 10%); border: 1px solid rgb(33 150 243 / 25%); }
.maia-demo .md-inline-gmail { position: relative; isolation: isolate; overflow: hidden; padding: 1px; background: rgb(255 255 255 / 25%); }
.maia-demo .md-inline-gmail::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/img/gmail.png') center / 100% auto no-repeat; filter: blur(6px); transform: scale(1.5); }
.maia-demo .md-inline-gmail-content { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 5px; border-radius: inherit; background: rgb(30 30 30 / 80%); font-weight: 500; }
.maia-demo .md-inline-file img { width: 16px; height: 16px; }
.maia-demo .md-inline-gmail img { width: 20px; height: 20px; }
.maia-demo .md-thinking { padding: 0 15px; }
.maia-demo .md-run { margin: 0 10px; border: 1px solid rgb(252 252 252 / 2%); border-radius: 10px; background: rgb(252 252 252 / 2%); }
.maia-demo .md-run-heading { display: flex; align-items: center; gap: 5px; padding: 15px 20px; font-size: 14px; font-weight: 400; color: rgb(242 242 242 / 85%); }
.maia-demo .md-run-heading svg { width: 16px; height: 16px; margin-left: auto; color: rgb(242 242 242 / 60%); }
.maia-demo .md-run[data-collapsed] .md-run-heading svg { transform: rotate(180deg); }
.maia-demo .md-duration { white-space: nowrap; font-size: 14px; font-weight: 400; color: rgb(242 242 242 / 60%); font-variant-numeric: tabular-nums; }
.maia-demo .md-run-body { padding: 0 15px 15px; }
.maia-demo .md-run-task { display: flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; padding: 5px 15px 5px 6px; border: 1px solid rgb(252 252 252 / 10%); border-radius: 100px; background: rgb(255 255 255 / 5%); font-size: 14px; }
.maia-demo .md-run-status { display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0; }
.maia-demo .md-run-status[data-done] { background: rgb(137 250 138 / 10%); border-radius: 50%; }
.maia-demo .md-run-status svg { width: 10px; height: 10px; color: var(--demo-accent); }
.maia-demo .md-run-working { display: block; width: 18px; height: 18px; border-radius: 50%; overflow: hidden; background: url('/img/hero-demo/running-frames.png') 0 0 / 180px 108px no-repeat; }
.maia-demo .md-operations { position: relative; display: flex; flex-direction: column; gap: 5px; margin-top: 10px; padding-left: 28px; }
/* Flutter's DashedLinePainter: 4px dashes, 4px gaps, 0.8px stroke. */
.maia-demo .md-operations::before { content: ''; position: absolute; top: -10px; bottom: 0; left: 17px; width: .8px; background: repeating-linear-gradient(to bottom, rgb(252 252 252 / 30%) 0 4px, transparent 4px 8px); }
.maia-demo .md-operation { display: flex; align-items: center; gap: 3px; min-height: 26px; font-size: 14px; font-weight: 400; }
.maia-demo .md-operation-icon { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; }
.maia-demo .md-operation-icon img { width: 22px; height: 22px; }
.maia-demo .md-operation [data-operation-label] { min-width: 0; }
.maia-demo .md-run-completed { display: flex; align-items: center; gap: 4px; width: fit-content; margin-top: 10px; padding: 5px 15px 5px 6px; border-radius: 100px; background: rgb(255 255 255 / 5%); color: var(--demo-text); font-size: 15px; font-weight: 400; }
.maia-demo .md-run-completed-icon { display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0; }
.maia-demo .md-run-completed-icon img { width: 20px; height: 20px; }
.maia-demo .md-planning, .maia-demo .md-memory, .maia-demo .md-deploying { display: flex; align-items: center; gap: 8px; padding: 0 15px; font-size: 15px; }
.maia-demo .md-planning > img, .maia-demo .md-deploying > img { width: 22px; height: 22px; }
.maia-demo .md-memory { align-items: flex-start; font-size: 14px; color: #bdbdbd; }
.maia-demo .md-memory > img { width: 18px; height: 18px; margin-top: 2px; }
.maia-demo .md-deployed { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 20px; background: rgb(255 255 255 / 5%); border: 1px solid rgb(255 255 255 / 3%); }
.maia-demo .md-deployed-icon { display: grid; place-items: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgb(255 255 255 / 7%); }
.maia-demo .md-deployed-icon img { width: 24px; height: 24px; }
.maia-demo .md-deployed-copy { min-width: 0; flex: 1; }
.maia-demo .md-deployed-title { font-size: 16px; font-weight: 600; }
.maia-demo .md-deployed-subtitle { margin-top: 3px; font-size: 13px; color: #aaa; }
.maia-demo .md-deployed-chevron { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: rgb(255 255 255 / 7%); }
.maia-demo .md-deployed-chevron svg { width: 18px; height: 18px; }
.maia-demo .md-composer-wrap { width: 100%; max-width: 766px; margin: 0 auto; padding: 15px 28px 22px; flex-shrink: 0; }
.maia-demo .md-composer { padding: 17px 18px 11px; border: 1px solid rgb(255 255 255 / 23%); background: var(--demo-surface); border-radius: 20px; }
.maia-demo .md-draft { min-height: 24px; max-height: 72px; overflow: hidden; overflow-wrap: anywhere; line-height: 1.5; font-weight: 300; }
.maia-demo .md-draft[data-empty] { color: #a3a3a3; }
.maia-demo .md-composer-tools { display: flex; align-items: center; gap: 16px; height: 38px; margin-top: 12px; color: #c3c3c3; }
.maia-demo .md-composer-tools > svg { width: 19px; height: 19px; }
.maia-demo .md-send { display: grid; place-items: center; width: 32px; height: 32px; margin-left: auto; border-radius: 50%; background: #fcfcfc; color: #333; }
.maia-demo .md-send svg { width: 19px; height: 19px; }
.maia-demo .md-send[data-busy] { background: transparent; border: 1.5px solid #e6e6e6; color: #e6e6e6; }
.maia-demo .md-send[data-busy] svg { width: 18px; height: 18px; }
.maia-demo .md-report {
    position: absolute; inset: 64px 10px 10px auto; width: calc(50% - 10px); z-index: 2;
    display: flex; flex-direction: column; min-width: 0; overflow: hidden;
    background: #252525; border: 1px solid var(--demo-border); border-radius: 18px;
    box-shadow: -12px 0 30px rgb(0 0 0 / 12%);
}
.maia-demo .md-sheet-handle { display: none; }
.maia-demo .md-report-header { display: flex; align-items: center; gap: 8px; height: 45px; flex-shrink: 0; padding: 0 13px; background: #333; font-size: 14px; }
.maia-demo .md-report-header > img { width: 19px; height: 19px; }
.maia-demo .md-report-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maia-demo .md-report-header svg { width: 17px; height: 17px; }
.maia-demo .md-close { display: grid; place-items: center; width: 30px; height: 30px; flex-shrink: 0; }
.maia-demo .md-worksheet-nav { height: 46px; display: flex; align-items: center; gap: 7px; padding: 7px 10px; background: #333; border-top: 1px solid rgb(255 255 255 / 5%); flex-shrink: 0; }
.maia-demo .md-worksheet { border: 1px solid rgb(255 255 255 / 15%); border-radius: 7px; padding: 3px 10px; font-size: 13px; }
.maia-demo .md-worksheet[data-selected] { background: rgb(255 255 255 / 14%); border-color: rgb(255 255 255 / 30%); font-weight: 600; }
.maia-demo .md-report-scroll { overflow: hidden; overflow-anchor: none; min-height: 0; flex: 1; padding: 18px; scrollbar-width: none; }
.maia-demo .md-report-pages { display: flex; flex-direction: column; gap: 18px; }
.maia-demo .md-report-page { position: relative; margin: 0; flex-shrink: 0; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: 0 3px 18px rgb(0 0 0 / 16%); }
.maia-demo .md-report-page > img { width: 100%; height: auto; }
.maia-demo .md-report-missing { min-height: 490px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 24px; color: #676767; font-size: 14px; text-align: center; background: #f6f6f6; }
.maia-demo .md-report-missing img { width: 35px; height: 35px; margin-bottom: 8px; }
.maia-demo .md-report-missing strong { color: #333; font-size: 16px; }
.maia-demo .md-modal-layer { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: 14px; background: rgb(30 30 30 / 85%); }
.maia-demo .md-connect-dialog {
    position: relative; width: 100%; max-width: 580px; padding: 48px 42px 32px;
    overflow: hidden; border-radius: 14px; text-align: center;
    background: radial-gradient(ellipse at 12% 4%, #edb7b0, transparent 62%),
        radial-gradient(ellipse at 88% 5%, #55b9f2, transparent 65%),
        radial-gradient(ellipse at 90% 110%, #df99d5, transparent 50%),
        linear-gradient(135deg, #9f92c8, #407aff 70%, #b98fe8);
    box-shadow: 0 18px 60px rgb(0 0 0 / 22%);
}
.maia-demo .md-connect-dialog > .md-close { position: absolute; top: 10px; right: 10px; }
.maia-demo .md-connect-identities { display: flex; align-items: center; justify-content: center; gap: 18px; }
.maia-demo .md-platform-tile { width: 50px; height: 50px; display: grid; place-items: center; background: rgb(255 255 255 / 95%); border-radius: 12px; padding: 9px; }
.maia-demo .md-identity-divider { width: 1px; height: 32px; background: rgb(255 255 255 / 50%); }
.maia-demo .md-connect-identities .md-avatar { width: 54px; height: 54px; border-radius: 17px; }
.maia-demo .md-connect-heading { margin: 20px 0 12px; color: #fff; font-size: 23px; line-height: 1.14; font-weight: 800; }
.maia-demo .md-connect-description { font-size: 14px; line-height: 1.38; color: rgb(255 255 255 / 94%); font-weight: 600; }
.maia-demo .md-connect-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 148px; height: 43px; padding: 0 19px; margin-top: 28px; border-radius: 22px; background: white; color: #333; font-size: 14px; font-weight: 500; }
.maia-demo .md-connect-content { display: inline-flex; align-items: center; gap: 7px; }
.maia-demo .md-connect-content > svg { width: 14px; height: 14px; }
.maia-demo .md-spinner { display: block; width: 15px; height: 15px; border: 1.6px solid rgb(51 51 51 / 20%); border-top-color: #333; border-radius: 50%; }
.maia-demo .md-pointer { position: absolute; top: 0; left: 0; width: 28px; height: 40px; z-index: 6; transform-origin: top left; will-change: transform; }
.maia-demo .md-pointer img { width: 100%; height: 100%; transform: translate(-5px, -5px); }
.maia-demo .md-tap { position: absolute; top: 0; left: 0; width: 32px; height: 32px; border-radius: 50%; z-index: 5; border: 1px solid rgb(255 255 255 / 65%); background: rgb(255 255 255 / 14%); }
.maia-demo .md-chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: calc(100% - 32px); margin: 0 auto; overflow: hidden; border: 1px solid var(--demo-border); border-top: 0; border-radius: 0 0 10px 10px; background: #252525; }
.maia-demo .md-chapters:empty { display: none; }
.maia-demo .md-chapter { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-width: 0; min-height: 44px; padding: 6px 12px; border: 0; background: transparent; text-align: left; font-size: 14px; font-weight: 500; color: #aaa; }
.maia-demo .md-chapter + .md-chapter { border-left: 1px solid var(--demo-border); }
.maia-demo .md-chapter-copy { opacity: .8; transition: opacity .2s ease; }
.maia-demo .md-chapter:hover .md-chapter-copy, .maia-demo .md-chapter:focus-visible .md-chapter-copy { opacity: .9; }
.maia-demo .md-chapter:active .md-chapter-copy { opacity: 1; }
.maia-demo .md-chapter-number { color: #717171; font-size: 12px; }
.maia-demo .md-chapter[aria-current] { color: #fcfcfc; }
.maia-demo .md-chapter[aria-current] .md-chapter-copy { opacity: 1; }
.maia-demo .md-chapter[aria-current] .md-chapter-number { color: var(--demo-accent); }
.maia-demo .md-chapter-short { display: none; }
.maia-demo .md-progress-track { position: absolute; bottom: 0; left: 0; right: 0; height: 2px; overflow: hidden; }
.maia-demo .md-chapter:not([aria-current]) .md-progress-track { display: none; }
.maia-demo .md-progress-fill { display: block; width: 100%; height: 100%; background: var(--demo-accent); transform: scaleX(0); transform-origin: left; }
.maia-demo .md-transcript { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (min-width: 900px) {
    .maia-demo[data-report-open] .md-chat { right: calc(50% * var(--md-report-reveal, 0)); }
    .maia-demo[data-report-open] .md-chat-scroll { padding: 74px 12px 10px; }
    .maia-demo[data-report-open] .md-composer-wrap { padding: 15px 15px 22px; }
    .maia-demo[data-report-open] .md-user { max-width: 90%; }
}
@media (min-width: 600px) and (max-width: 899px) {
    .maia-demo .md-report { width: calc(100% - 20px); }
}
@media (max-width: 699px) {
    .maia-demo .md-chapters { width: calc(100% - 16px); }
    .maia-demo .md-chapter { justify-content: center; padding: 6px 4px; font-size: 12px; text-align: center; }
    .maia-demo .md-chapter-number, .maia-demo .md-chapter-long { display: none; }
    .maia-demo .md-chapter-short { display: inline; }
}
@media (max-width: 599px) {
    .maia-demo { padding-top: 64px; margin-bottom: 44px; }
    .maia-demo .md-frame { height: 620px; }
    .maia-demo .md-player { border-radius: 14px; }
    .maia-demo .md-rail { display: none; }
    .maia-demo .md-app-header { left: 0; padding: 0 15px; gap: 8px; }
    .maia-demo .md-mobile-menu { display: block; width: 19px; height: 19px; margin-right: 6px; color: #aaa; }
    .maia-demo .md-workspace { left: 0; }
    .maia-demo .md-chat-scroll { padding: 74px 10px 10px; }
    .maia-demo .md-messages { gap: 20px; }
    .maia-demo .md-user { max-width: 85%; }
    .maia-demo .md-assistant { padding: 0 5px; }
    .maia-demo .md-run { margin: 0; }
    .maia-demo .md-run-heading { padding: 12px 14px; }
    .maia-demo .md-run-body { padding: 0 12px 12px; }
    .maia-demo .md-operations { padding-left: 24px; }
    .maia-demo .md-planning, .maia-demo .md-memory, .maia-demo .md-deploying { padding: 0 5px; }
    .maia-demo .md-composer-wrap { padding: 10px 10px 14px; }
    .maia-demo .md-composer { padding: 14px 14px 9px; }
    .maia-demo .md-report { inset: auto 0 0; width: 100%; height: 85%; border-bottom: 0; border-radius: 20px 20px 0 0; box-shadow: 0 -25px 60px rgb(0 0 0 / 32%); }
    .maia-demo .md-sheet-handle { display: grid; place-items: center; height: 30px; flex-shrink: 0; }
    .maia-demo .md-sheet-handle::before { content: ''; width: 36px; height: 4px; background: rgb(255 255 255 / 20%); border-radius: 2px; }
    .maia-demo .md-report-scroll { padding: 12px; }
    .maia-demo .md-connect-dialog { padding: 42px 24px 28px; }
    .maia-demo .md-connect-identities .md-avatar { width: 48px; height: 48px; }
    .maia-demo .md-platform-tile { width: 44px; height: 44px; }
    .maia-demo .md-deployed { gap: 9px; padding: 12px; }
    .maia-demo .md-deployed-title { font-size: 15px; }
    .maia-demo .md-deployed-chevron { width: 26px; height: 26px; }
    .maia-demo .md-fallback { padding: 32px 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .maia-demo *, .maia-demo *::before, .maia-demo *::after { transition: none !important; scroll-behavior: auto !important; }
}