:root {
        --bg: #02070f;
        --bg-2: #04101d;
        --panel: rgba(0, 60, 92, 0.22);
        --panel-solid: #06182a;
        --line: rgba(0, 212, 255, 0.28);
        --line-soft: rgba(0, 212, 255, 0.14);
        --cyan: #00d4ff;
        --cyan-bright: #7ef0ff;
        --cyan-dim: #1b7ea6;
        --core: #eafcff;
        --text: #dff6ff;
        --muted: #8fb8cc;
        --faint: #5b8296;
        --gold: #ffb547;
        --red: #ff5147;
        --green: #3dffa0;
      }
      * { box-sizing: border-box; }
      html, body { height: 100%; }
      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family: "Be Vietnam Pro", system-ui, sans-serif;
        font-size: 16px;
        line-height: 1.55;
        overflow: hidden;
      }
      button, input { font-family: inherit; }
      button, [role="button"], input:not([type="checkbox"], [type="radio"]) { min-height: 2.25rem; }

      /* ---------- HUD backdrop ---------- */
      .backdrop { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; background:
        radial-gradient(ellipse 80% 55% at 50% -10%, rgba(0, 140, 200, 0.22), transparent 60%),
        radial-gradient(ellipse 60% 45% at 50% 115%, rgba(0, 80, 140, 0.16), transparent 60%),
        linear-gradient(180deg, #02070f 0%, #030b16 55%, #02070f 100%);
      }
      .backdrop .grid {
        position: absolute; inset: 0;
        background-image:
          linear-gradient(rgba(0,212,255,.05) 1px, transparent 1px),
          linear-gradient(90deg, rgba(0,212,255,.05) 1px, transparent 1px);
        background-size: 46px 46px;
        mask-image: radial-gradient(ellipse 95% 80% at 50% 40%, #000 25%, transparent 78%);
        -webkit-mask-image: radial-gradient(ellipse 95% 80% at 50% 40%, #000 25%, transparent 78%);
      }
      .backdrop .rings {
        position: absolute; left: 50%; top: 118px; width: 640px; height: 640px;
        transform: translateX(-50%); border-radius: 50%;
        border: 1px solid rgba(0,212,255,.06);
        box-shadow: 0 0 0 60px rgba(0,212,255,0), inset 0 0 0 90px transparent;
        background:
          radial-gradient(circle, transparent 58%, rgba(0,212,255,.05) 58.5%, transparent 59.5%),
          radial-gradient(circle, transparent 74%, rgba(0,212,255,.04) 74.5%, transparent 75.5%);
      }
      .backdrop .scan {
        position: absolute; left: 0; right: 0; height: 120px; top: -120px;
        background: linear-gradient(180deg, transparent, rgba(0,212,255,.045), transparent);
        animation: scanMove 9s linear infinite;
      }
      @keyframes scanMove { to { transform: translateY(130vh); } }

      /* ---------- Layout ---------- */
      .shell {
        position: relative; z-index: 1;
        display: flex; flex-direction: column;
        height: 100dvh; max-width: 1080px; margin: 0 auto;
        border-left: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft);
        background: linear-gradient(180deg, rgba(3,13,24,.82), rgba(2,7,15,.92));
      }
      @media (max-width: 860px) { .shell { border: none; } }

      /* HUD corner frame helper */
      .hud-frame { position: relative; }
      .hud-frame::before, .hud-frame::after {
        content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none; z-index: 2;
      }
      .hud-frame::before { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
      .hud-frame::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }

      /* ---------- Header ---------- */
      .chat-head {
        display: flex; align-items: center; gap: 13px;
        padding: 12px 18px;
        border-bottom: 1px solid var(--line);
        background: rgba(2, 16, 28, .72);
        flex: none; position: relative;
      }
      .chat-head::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0,212,255,.65), transparent);
      }
      /* mini reactor avatar */
      .reactor-mini {
        width: 44px; height: 44px; border-radius: 50%; flex: none; position: relative;
        border: 1.5px solid rgba(0,212,255,.55);
        box-shadow: 0 0 14px rgba(0,212,255,.45), inset 0 0 10px rgba(0,212,255,.35);
        display: grid; place-items: center;
      }
      .reactor-mini::before {
        content: ""; position: absolute; inset: 4px; border-radius: 50%;
        border: 1px dashed rgba(126,240,255,.6);
        animation: spinSlow 14s linear infinite;
      }
      .reactor-mini .core-dot {
        width: 15px; height: 15px; border-radius: 50%;
        background: radial-gradient(circle at 50% 42%, #ffffff 0%, var(--cyan-bright) 45%, var(--cyan) 75%, rgba(0,212,255,.15) 100%);
        box-shadow: 0 0 12px var(--cyan), 0 0 26px rgba(0,212,255,.55);
        animation: corePulse 2.6s ease-in-out infinite;
      }
      @keyframes spinSlow { to { transform: rotate(360deg); } }
      @keyframes spinSlowRev { to { transform: rotate(-360deg); } }
      @keyframes corePulse { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.12); filter: brightness(1.35); } }
      .chat-head .who { min-width: 0; }
      .chat-head .name {
        font-family: "Jura", "Be Vietnam Pro", sans-serif;
        font-weight: 700; font-size: 19px; letter-spacing: .22em;
        display: flex; align-items: center; gap: 10px; color: var(--core);
        text-shadow: 0 0 14px rgba(0,212,255,.55);
      }
      /* Nhãn nguồn đang chọn (Canva Pro, Eset Key...) — có thể dài hơn "Demo"
         nên phải nowrap để không tự xuống dòng làm header cao lên. overflow
         hidden + min-width 0 cho phép tag co lại và hiện "…" khi tên quá dài
         (flex item có overflow khác visible sẽ bỏ min-width tự động). */
      .demo-tag {
        font-family: "JetBrains Mono", monospace; font-size: 10px;
        letter-spacing: .14em; color: var(--gold);
        border: 1px solid rgba(255,181,71,.55); padding: 2px 7px; text-transform: uppercase;
        white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis;
      }
      .status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; margin-top: 2px; font-family: "JetBrains Mono", monospace; letter-spacing: .06em; }
      .status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); animation: blinkDot 2.2s ease-in-out infinite; flex: none; }
      @keyframes blinkDot { 0%,100% { opacity: 1; } 50% { opacity: .4; } }
      .head-spacer { flex: 1; }
      .head-btn {
        flex-shrink: 0;
        border: 1px solid var(--line); background: rgba(0,60,92,.25); color: var(--cyan-bright);
        padding: 6px 12px; font-size: 12.5px; cursor: pointer; font-family: "JetBrains Mono", monospace; letter-spacing: .05em;
        display: inline-flex; align-items: center; gap: 6px; transition: background .2s, box-shadow .2s;
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
      }
      .head-btn:hover { background: rgba(0,120,180,.35); box-shadow: 0 0 14px rgba(0,212,255,.25); }

      /* ---------- Reactor stage ---------- */
      .stage {
        flex: none; position: relative;
        display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
        gap: 8px; padding: 14px 20px 10px;
        border-bottom: 1px solid var(--line-soft);
        background: radial-gradient(ellipse 55% 120% at 50% 50%, rgba(0,110,170,.13), transparent 70%);
      }
      .readout { font-family: "JetBrains Mono", monospace; font-size: 11px; color: var(--muted); line-height: 1.9; letter-spacing: .04em; min-width: 0; }
      .readout > div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .readout.right { text-align: right; }
      .readout .k { color: var(--faint); }
      .readout .v { color: var(--cyan-bright); text-shadow: 0 0 8px rgba(0,212,255,.4); }
      .readout .v.warn { color: var(--gold); text-shadow: 0 0 8px rgba(255,181,71,.4); }
      @media (max-width: 560px) {
        .readout { font-size: 9.5px; line-height: 1.8; }
        .readout .hide-s { display: none; }
      }
      .reactor-wrap { display: flex; flex-direction: column; align-items: center; gap: 7px; }
      .reactor {
        position: relative; width: 118px; height: 118px; border-radius: 50%;
        border: none; background: none; cursor: pointer; padding: 0;
        -webkit-tap-highlight-color: transparent;
      }
      .reactor:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
      .reactor .ring { position: absolute; border-radius: 50%; pointer-events: none; }
      .reactor .r-ticks {
        inset: 0;
        background: repeating-conic-gradient(from 0deg, rgba(126,240,255,.85) 0deg 1.6deg, transparent 1.6deg 12deg);
        -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%, #000 70%, transparent 71%);
        mask: radial-gradient(circle, transparent 61%, #000 62%, #000 70%, transparent 71%);
        animation: spinSlow 46s linear infinite; opacity: .8;
      }
      .reactor .r-outer {
        inset: 3px; border: 1.5px solid rgba(0,212,255,.5);
        border-top-color: transparent; border-bottom-color: transparent;
        animation: spinSlow 18s linear infinite;
        box-shadow: 0 0 18px rgba(0,212,255,.18), inset 0 0 18px rgba(0,212,255,.12);
      }
      .reactor .r-mid {
        inset: 13px; border: 1.5px dashed rgba(126,240,255,.55);
        animation: spinSlowRev 26s linear infinite;
      }
      .reactor .r-seg {
        inset: 21px;
        background: conic-gradient(from 20deg, rgba(0,212,255,.5) 0 40deg, transparent 40deg 90deg, rgba(0,212,255,.5) 90deg 150deg, transparent 150deg 210deg, rgba(0,212,255,.5) 210deg 260deg, transparent 260deg 320deg, rgba(0,212,255,.5) 320deg 360deg);
        -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 82%, transparent 83%);
        mask: radial-gradient(circle, transparent 66%, #000 67%, #000 82%, transparent 83%);
        animation: spinSlow 30s linear infinite reverse;
      }
      .reactor .r-core {
        inset: 32px;
        background: radial-gradient(circle at 50% 42%, #ffffff 0%, #d9f9ff 22%, var(--cyan-bright) 48%, var(--cyan) 72%, rgba(0,140,200,.55) 92%, rgba(0,140,200,.25) 100%);
        box-shadow: 0 0 22px rgba(0,212,255,.85), 0 0 55px rgba(0,212,255,.45), inset 0 0 14px rgba(255,255,255,.75);
        animation: corePulse 2.8s ease-in-out infinite;
        transition: filter .3s, transform .3s;
      }
      .reactor:hover .r-core { filter: brightness(1.25); }
      .reactor:active .r-core { transform: scale(.93); }
      .stage.speaking .reactor .r-core { animation-duration: .9s; }
      .stage.speaking .reactor .r-outer { animation-duration: 5s; }
      .stage.speaking .reactor .r-mid { animation-duration: 7s; }
      .stage.speaking .reactor { filter: drop-shadow(0 0 10px rgba(0,212,255,.35)); }
      .reactor-label {
        font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .18em;
        color: var(--cyan-bright); text-transform: uppercase; text-align: center;
        text-shadow: 0 0 10px rgba(0,212,255,.5); white-space: nowrap;
      }
      /* voice waveform */
      .wave { display: flex; align-items: center; justify-content: center; gap: 3px; height: 16px; margin-top: 7px; }
      .wave i { width: 3px; height: 4px; background: var(--cyan); border-radius: 1px; opacity: .35; box-shadow: 0 0 6px rgba(0,212,255,.5); }
      .stage.speaking .wave i { opacity: 1; animation: waveBar .55s ease-in-out infinite alternate; }
      .wave i:nth-child(3n) { animation-delay: .12s !important; }
      .wave i:nth-child(4n) { animation-delay: .24s !important; }
      .wave i:nth-child(5n) { animation-delay: .06s !important; }
      .wave i:nth-child(7n) { animation-delay: .3s !important; }
      @keyframes waveBar { from { height: 4px; } to { height: 15px; } }

      /* ---------- Message stream ---------- */
      .stream {
        flex: 1; overflow-y: auto; overscroll-behavior: contain;
        padding: 20px 18px 10px;
        display: flex; flex-direction: column; gap: 13px;
        scroll-behavior: smooth;
      }
      .stream::-webkit-scrollbar { width: 6px; }
      .stream::-webkit-scrollbar-thumb { background: rgba(0,212,255,.25); }
      .day-note {
        align-self: center; font-family: "JetBrains Mono", monospace; font-size: 10.5px;
        color: var(--cyan-bright); letter-spacing: .12em; text-transform: uppercase;
        border: 1px solid var(--line-soft); padding: 4px 13px;
        background: rgba(0,60,92,.2);
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
      }
      .row { display: flex; gap: 10px; max-width: 100%; animation: rise .35s ease both; }
      @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
      .row.user { justify-content: flex-end; }
      .mini-avatar {
        width: 30px; height: 30px; border-radius: 50%; flex: none; margin-top: 2px; position: relative;
        border: 1.5px solid rgba(0,212,255,.55); display: grid; place-items: center;
        box-shadow: 0 0 10px rgba(0,212,255,.35), inset 0 0 8px rgba(0,212,255,.3);
      }
      .mini-avatar::after {
        content: ""; width: 11px; height: 11px; border-radius: 50%;
        background: radial-gradient(circle at 50% 42%, #fff 0%, var(--cyan-bright) 48%, var(--cyan) 78%, rgba(0,212,255,.2) 100%);
        box-shadow: 0 0 8px var(--cyan);
      }
      .bubble {
        max-width: min(86%, 680px);
        padding: 12px 15px;
        font-size: 15.5px; overflow-wrap: anywhere;
        clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
      }
      .row.bot .bubble {
        background: linear-gradient(160deg, rgba(0,70,105,.32), rgba(0,40,64,.22));
        border: 1px solid var(--line-soft);
        box-shadow: inset 0 0 24px rgba(0,212,255,.05);
      }
      .row.user .bubble {
        background: linear-gradient(150deg, rgba(0,110,165,.5), rgba(0,60,100,.45));
        border: 1px solid rgba(0,212,255,.4); color: #eafcff; font-weight: 500;
        box-shadow: 0 0 18px rgba(0,140,200,.22);
      }
      .bubble p { margin: 0; }
      .bubble p + p { margin-top: 8px; }
      .bubble b { font-weight: 700; color: var(--cyan-bright); }
      .row.user .bubble b { color: #fff; }
      .cursor {
        display: inline-block; width: 8px; height: 1.05em; vertical-align: text-bottom;
        background: var(--cyan); margin-left: 2px; box-shadow: 0 0 8px var(--cyan);
        animation: blink .8s steps(1) infinite;
      }
      @keyframes blink { 50% { opacity: 0; } }
      .time { font-size: 10.5px; color: var(--faint); margin-top: 4px; font-family: "JetBrains Mono", monospace; letter-spacing: .05em; }
      .row.user .time { text-align: right; }
      .col { display: flex; flex-direction: column; flex: 1; min-width: 0; align-items: flex-start; }
      .row.user .col { align-items: flex-end; }

      /* typing indicator — signal bars */
      .typing-dots { display: inline-flex; gap: 4px; padding: 5px 2px; align-items: flex-end; height: 18px; }
      .typing-dots i {
        width: 4px; height: 6px; background: var(--cyan); box-shadow: 0 0 7px rgba(0,212,255,.7);
        animation: bounce 0.9s ease-in-out infinite;
      }
      .typing-dots i:nth-child(2) { animation-delay: .13s; }
      .typing-dots i:nth-child(3) { animation-delay: .26s; }
      .typing-dots i:nth-child(4) { animation-delay: .39s; }
      @keyframes bounce { 0%, 60%, 100% { height: 6px; opacity: .5; } 30% { height: 15px; opacity: 1; } }

      /* ---------- Rich cards (HUD panels) ---------- */
      .card {
        width: min(86vw, 640px); max-width: 100%; position: relative;
        background: linear-gradient(165deg, rgba(0,70,105,.3), rgba(0,35,58,.28));
        border: 1px solid var(--line);
        padding: 16px;
        box-shadow: inset 0 0 30px rgba(0,212,255,.05), 0 0 22px rgba(0,80,130,.18);
      }
      .card::before, .card::after { content: ""; position: absolute; width: 13px; height: 13px; pointer-events: none; }
      .card::before { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
      .card::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
      .card h3 {
        margin: 0 0 11px; font-size: 13.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
        font-family: "Jura", "Be Vietnam Pro", sans-serif; color: var(--core);
        display: flex; align-items: center; gap: 9px;
      }
      .card h3 .ic { color: var(--cyan); display: inline-flex; filter: drop-shadow(0 0 6px rgba(0,212,255,.6)); }
      .card h3 .ic svg { width: 17px; height: 17px; }

      /* diagnostics card */
      .status-lines { font-family: "JetBrains Mono", monospace; font-size: 12.5px; display: flex; flex-direction: column; gap: 9px; }
      .status-lines .ln { display: flex; align-items: center; gap: 9px; color: var(--muted); opacity: 0; transform: translateX(-4px); transition: opacity .3s, transform .3s; }
      .status-lines .ln.on { opacity: 1; transform: none; }
      .status-lines .ln .st { width: 15px; height: 15px; flex: none; display: grid; place-items: center; }
      .status-lines .ln.done { color: #c9ecfa; }
      .status-lines .ln.done .st { color: var(--green); }
      .spinner {
        width: 13px; height: 13px; border-radius: 50%;
        border: 2px solid rgba(0,212,255,.25); border-top-color: var(--cyan);
        animation: spin .7s linear infinite;
      }
      @keyframes spin { to { transform: rotate(360deg); } }
      .progress { height: 4px; background: rgba(0,212,255,.12); overflow: hidden; margin-top: 14px; }
      .progress i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan), var(--cyan-bright)); box-shadow: 0 0 10px rgba(0,212,255,.7); transition: width .45s ease; }

      /* link card with scanline reveal */
      .link-card { overflow: hidden; }
      .link-card::before { z-index: 3; }
      .scanbeam {
        position: absolute; left: 0; right: 0; top: -30%; height: 26%; z-index: 2; pointer-events: none;
        background: linear-gradient(180deg, transparent, rgba(0,212,255,.28), rgba(126,240,255,.5), rgba(0,212,255,.28), transparent);
        animation: scanCard 1.15s ease-out .1s both;
      }
      @keyframes scanCard { from { top: -30%; } to { top: 115%; } }
      .link-label { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .16em; color: var(--gold); text-transform: uppercase; margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
      .link-url {
        font-family: "JetBrains Mono", monospace; font-size: 13.5px; word-break: break-all;
        background: rgba(0,10,20,.55); border: 1px dashed rgba(0,212,255,.45);
        padding: 11px 13px; color: var(--cyan-bright);
        text-shadow: 0 0 8px rgba(0,212,255,.35);
      }
      .link-note { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
      .link-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
      .btn {
        border: none; cursor: pointer; padding: 9px 15px;
        font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 7px;
        transition: transform .15s, filter .15s, background .2s, box-shadow .2s; text-decoration: none;
        clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
        font-family: "Be Vietnam Pro", sans-serif;
      }
      .btn svg { width: 15px; height: 15px; }
      .btn-primary { background: linear-gradient(120deg, #0090c8, var(--cyan)); color: #02141f; box-shadow: 0 0 20px rgba(0,212,255,.45); }
      .btn-primary:hover { filter: brightness(1.15); }
      .btn-ghost { background: rgba(0,80,120,.22); color: var(--cyan-bright); border: 1px solid var(--line); }
      .btn-ghost:hover { background: rgba(0,110,165,.35); }
      .btn:active { transform: scale(.97); }
      .qr-wrap { display: none; margin-top: 15px; text-align: center; }
      .qr-wrap.open { display: block; animation: rise .3s ease both; }
      .qr-frame { display: inline-block; position: relative; padding: 10px; background: rgba(0,15,26,.6); border: 1px solid var(--line); }
      .qr-frame::before, .qr-frame::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; }
      .qr-frame::before { top: -2px; left: -2px; border-top: 3px solid var(--cyan); border-left: 3px solid var(--cyan); }
      .qr-frame::after { bottom: -2px; right: -2px; border-bottom: 3px solid var(--cyan); border-right: 3px solid var(--cyan); }
      .qr-box { display: inline-block; background: #fff; padding: 10px; line-height: 0; }
      .qr-cap { font-size: 12px; color: var(--muted); margin-top: 10px; font-family: "JetBrains Mono", monospace; letter-spacing: .03em; }

      /* benefits grid */
      .benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
      @media (max-width: 430px) { .benefits { grid-template-columns: 1fr; } }
      .benefit {
        border: 1px solid var(--line-soft); padding: 11px 12px;
        background: rgba(0,20,36,.45);
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
      }
      .benefit .ic {
        width: 30px; height: 30px; display: grid; place-items: center;
        background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.3); color: var(--cyan); margin-bottom: 7px;
        clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
      }
      .benefit .ic svg { width: 16px; height: 16px; }
      .benefit b { display: block; font-size: 13.5px; margin-bottom: 2px; color: var(--core); }
      .benefit span { font-size: 12.5px; color: var(--muted); line-height: 1.45; display: block; }

      /* steps */
      .steps { display: flex; flex-direction: column; gap: 0; }
      .step { display: flex; gap: 12px; position: relative; padding-bottom: 16px; }
      .step:last-child { padding-bottom: 2px; }
      .step::before {
        content: ""; position: absolute; left: 14px; top: 32px; bottom: 2px; width: 1.5px;
        background: linear-gradient(180deg, rgba(0,212,255,.6), rgba(0,212,255,.12));
      }
      .step:last-child::before { display: none; }
      .step .num {
        width: 29px; height: 29px; border-radius: 50%; flex: none; z-index: 1;
        border: 1.5px solid var(--cyan); color: var(--cyan-bright); font-weight: 700; font-size: 13.5px;
        display: grid; place-items: center; font-family: "Jura", sans-serif;
        background: rgba(0,40,64,.7); box-shadow: 0 0 10px rgba(0,212,255,.35);
        text-shadow: 0 0 8px rgba(0,212,255,.6);
      }
      .step b { font-size: 14.5px; display: block; margin-top: 3px; color: var(--core); }
      .step p { margin: 2px 0 0; font-size: 13.5px; color: var(--muted); }

      /* notes */
      .notes { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
      .notes li { display: flex; gap: 9px; font-size: 13.5px; color: #d3edf9; }
      .notes li svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--gold); }
      .notes li b { color: var(--gold); }

      /* ---------- Command chips ---------- */
      .chips {
        flex: none; display: flex; flex-wrap: wrap; gap: 8px;
        padding: 10px 18px 4px;
      }
      .chip {
        border: 1px solid rgba(0,212,255,.45); color: var(--cyan-bright);
        background: rgba(0,80,120,.18); padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer;
        display: inline-flex; align-items: center; gap: 7px;
        font-family: "JetBrains Mono", monospace; letter-spacing: .02em;
        clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
        transition: background .2s, box-shadow .2s, transform .15s;
        animation: rise .3s ease both;
      }
      .chip::before { content: "▸"; color: var(--cyan); font-size: 11px; }
      .chip:hover { background: rgba(0,130,190,.32); box-shadow: 0 0 14px rgba(0,212,255,.3); }
      .chip:active { transform: scale(.96); }
      .chip svg { width: 14px; height: 14px; }
      .chip.chip-primary {
        border-color: rgba(255,181,71,.85);
        background: linear-gradient(125deg, rgba(255,181,71,.28), rgba(201,138,18,.18));
        color: #ffe2a8;
        font-weight: 700;
        box-shadow: 0 0 16px rgba(255,181,71,.28), inset 0 0 12px rgba(255,181,71,.14);
      }
      .chip.chip-primary::before,
      .chip.chip-primary svg {
        color: var(--gold);
        filter: drop-shadow(0 0 5px rgba(255,181,71,.65));
      }
      .chip.chip-primary:hover {
        background: linear-gradient(125deg, rgba(255,181,71,.42), rgba(201,138,18,.28));
        box-shadow: 0 0 22px rgba(255,181,71,.45), inset 0 0 14px rgba(255,181,71,.22);
        color: #fff4db;
      }

      /* ---------- Composer ---------- */
      .composer {
        flex: none; padding: 10px 14px 6px;
        display: flex; gap: 9px; align-items: flex-end;
      }
      .input-wrap {
        flex: 1; display: flex; align-items: center;
        background: rgba(0,40,64,.35); border: 1px solid var(--line-soft);
        padding: 4px 6px 4px 16px;
        clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
        transition: border-color .25s, box-shadow .25s;
      }
      .input-wrap:focus-within {
        border-color: rgba(0,212,255,.65);
        box-shadow: 0 0 0 2px rgba(0,212,255,.14), 0 0 22px rgba(0,212,255,.22);
      }
      .input-wrap input {
        flex: 1; background: none; border: none; outline: none; color: var(--text);
        font-size: 15.5px; min-width: 0; height: 40px;
      }
      .input-wrap input::placeholder { color: var(--faint); }
      .send {
        width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(0,212,255,.6); cursor: pointer; flex: none;
        background: radial-gradient(circle at 50% 40%, rgba(126,240,255,.5), rgba(0,110,170,.55) 60%, rgba(0,50,85,.7));
        color: var(--core); display: grid; place-items: center;
        box-shadow: 0 0 16px rgba(0,212,255,.4), inset 0 0 10px rgba(0,212,255,.4);
        transition: transform .15s, filter .15s;
      }
      .send:hover { filter: brightness(1.3); }
      .send:active { transform: scale(.92); }
      .send svg { width: 18px; height: 18px; }
      .foot-note {
        flex: none; text-align: center; font-size: 11px; color: var(--faint);
        padding: 2px 18px calc(10px + env(safe-area-inset-bottom));
        font-family: "JetBrains Mono", monospace; letter-spacing: .04em;
      }

      /* task gate card */
      .lock-badge { display: inline-flex; align-items: center; gap: 6px; font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 9px; border: 1px solid rgba(255,181,71,.55); color: var(--gold); margin-bottom: 11px; }
      .lock-badge.unlocked { border-color: rgba(61,255,160,.55); color: var(--green); }
      .lock-badge svg { width: 12px; height: 12px; }
      .task-url { font-family: "JetBrains Mono", monospace; font-size: 14px; word-break: break-all; background: rgba(0,10,20,.55); border: 1px dashed rgba(255,181,71,.55); padding: 11px 13px; color: #ffd88a; text-shadow: 0 0 8px rgba(255,181,71,.3); }
      .task-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
      .btn-task { background: linear-gradient(120deg, #c98a12, var(--gold)); color: #1d1200; box-shadow: 0 0 20px rgba(255,181,71,.35); }
      .btn-task:hover { filter: brightness(1.12); }
      .btn-confirm { background: linear-gradient(120deg, #0a9d68, var(--green)); color: #02160c; box-shadow: 0 0 20px rgba(61,255,160,.32); }
      .btn-confirm:hover { filter: brightness(1.12); }
      .btn[disabled] { opacity: .38; cursor: not-allowed; box-shadow: none; filter: grayscale(.5); }
      .btn[disabled]:active { transform: none; }
      .task-hint { font-size: 12.5px; color: var(--muted); margin-top: 10px; }
      .task-hint b { color: var(--gold); }
      .task-mini { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; font-size: 13.5px; color: #d3edf9; }
      .task-mini div { display: flex; gap: 9px; align-items: flex-start; }
      .task-mini .n { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); font-family: "Jura", sans-serif; font-size: 11px; display: grid; place-items: center; margin-top: 1px; }

      /* link picker card (nhiều link nhiệm vụ — khách tự chọn nhóm) */
      .picker-hint { margin: 0 0 12px; font-size: 13.5px; color: #d3edf9; }
      .picker-hint b { color: var(--gold); }
      .link-choices { display: flex; flex-direction: column; gap: 8px; }
      .link-choice-row { display: flex; gap: 8px; align-items: stretch; }
      .link-choice {
        flex: 1; min-width: 0; display: flex; align-items: center; gap: 11px;
        padding: 11px 13px; text-decoration: none; color: inherit; cursor: pointer;
        background: rgba(0,10,20,.55); border: 1px dashed rgba(255,181,71,.55);
        clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
        transition: background .2s, border-color .2s, box-shadow .2s, transform .15s;
      }
      .link-choice:hover, .link-choice:focus-visible {
        background: rgba(255,181,71,.12); border-style: solid; border-color: rgba(255,181,71,.85);
        box-shadow: 0 0 18px rgba(255,181,71,.25); outline: none;
      }
      .link-choice:active { transform: scale(.985); }
      .link-choice .lc-num {
        width: 26px; height: 26px; flex: none; border-radius: 50%;
        border: 1.5px solid var(--gold); color: var(--gold); font-family: "Jura", sans-serif; font-weight: 700; font-size: 12.5px;
        display: grid; place-items: center; box-shadow: 0 0 8px rgba(255,181,71,.3);
      }
      .link-choice .lc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
      .link-choice .lc-name { font-size: 14.5px; font-weight: 700; color: #ffe2a8; overflow-wrap: anywhere; }
      .link-choice .lc-note { font-family: "JetBrains Mono", monospace; font-size: 11.5px; letter-spacing: .03em; color: var(--muted); overflow-wrap: anywhere; }
      .link-choice .lc-go { flex: none; color: var(--gold); display: inline-flex; }
      .link-choice .lc-go svg { width: 16px; height: 16px; }
      .link-choice.is-chosen { border-style: solid; border-color: rgba(61,255,160,.7); background: rgba(61,255,160,.08); }
      .link-choice.is-chosen .lc-num { border-color: var(--green); color: var(--green); box-shadow: 0 0 8px rgba(61,255,160,.35); }
      .link-choice.is-chosen .lc-go { color: var(--green); }
      .lc-copy {
        flex: none; width: 42px; cursor: pointer; display: grid; place-items: center;
        border: 1px solid var(--line); background: rgba(0,80,120,.22); color: var(--cyan-bright);
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
        transition: background .2s;
      }
      .lc-copy:hover { background: rgba(0,110,165,.35); }
      .lc-copy:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
      .lc-copy svg { width: 15px; height: 15px; }

      /* toast */
      .toast {
        position: fixed; left: 50%; bottom: 108px; transform: translate(-50%, 16px);
        background: #04182a; color: var(--core); border: 1px solid rgba(61,255,160,.5);
        padding: 10px 18px; font-size: 13.5px; font-weight: 500;
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
        display: flex; align-items: center; gap: 8px; opacity: 0; pointer-events: none;
        transition: opacity .3s, transform .3s; z-index: 95;
        box-shadow: 0 0 24px rgba(0,212,255,.25), 0 12px 32px rgba(0,0,0,.55);
      }
      .toast.show { opacity: 1; transform: translate(-50%, 0); }
      .toast svg { width: 15px; height: 15px; color: var(--green); }

      /* ---------- Boot sequence overlay ---------- */
      .boot {
        position: fixed; inset: 0; z-index: 100; background: #01040a;
        display: flex; align-items: center; justify-content: center;
        transition: opacity .55s ease;
      }
      .boot.done { opacity: 0; pointer-events: none; }
      .boot-inner { width: min(88vw, 460px); text-align: center; }
      .boot .reactor-mini { width: 74px; height: 74px; margin: 0 auto 20px; }
      .boot .reactor-mini .core-dot { width: 26px; height: 26px; }
      .boot-title {
        font-family: "Jura", sans-serif; font-weight: 700; font-size: 24px;
        letter-spacing: .34em; color: var(--core); text-shadow: 0 0 20px rgba(0,212,255,.7);
        margin-bottom: 4px; padding-left: .34em;
      }
      .boot-sub { font-family: "JetBrains Mono", monospace; font-size: 10.5px; letter-spacing: .22em; color: var(--faint); text-transform: uppercase; margin-bottom: 24px; }
      .boot-lines {
        font-family: "JetBrains Mono", monospace; font-size: 12.5px; color: var(--cyan-bright);
        text-align: left; min-height: 118px; line-height: 1.95; letter-spacing: .03em;
      }
      .boot-lines .ok { color: var(--green); }
      .boot-lines .dim { color: var(--faint); }
      .boot-bar { height: 3px; background: rgba(0,212,255,.15); margin-top: 16px; overflow: hidden; }
      .boot-bar i { display: block; height: 100%; width: 0%; background: var(--cyan); box-shadow: 0 0 12px var(--cyan); transition: width .3s ease; }

      @media (prefers-reduced-motion: reduce) {
        .backdrop .scan, .reactor-mini::before, .reactor-mini .core-dot,
        .reactor .ring, .status .dot, .typing-dots i, .spinner,
        .stage.speaking .wave i { animation: none !important; }
        .stream { scroll-behavior: auto; }
        .row, .chip, .qr-wrap.open, .scanbeam { animation: none !important; }
      }

      /* ---------- Source drawer (bảng chọn nguồn, kiểu Gemini) ---------- */
      .drawer-scrim {
        position: fixed; inset: 0; z-index: 80;
        background: rgba(1, 6, 12, .62);
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
        opacity: 0; pointer-events: none;
        transition: opacity .3s ease;
      }
      .drawer-scrim.open { opacity: 1; pointer-events: auto; }

      .side-drawer {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 90;
        width: min(86vw, 300px);
        display: flex; flex-direction: column;
        padding: 16px 14px 12px;
        background: linear-gradient(180deg, rgba(3,13,24,.98), rgba(2,7,15,.99));
        border-right: 1px solid rgba(0,212,255,.28);
        box-shadow: 12px 0 40px rgba(0,0,0,.55), inset -1px 0 0 rgba(0,212,255,.15);
        transform: translateX(-102%);
        visibility: hidden;
        transition: transform .32s cubic-bezier(.22,.75,.25,1), visibility 0s linear .32s;
      }
      .side-drawer.open {
        transform: translateX(0);
        visibility: visible;
        transition: transform .32s cubic-bezier(.22,.75,.25,1), visibility 0s;
      }

      .drawer-head {
        display: flex; align-items: center; gap: 10px;
        padding-bottom: 10px; border-bottom: 1px solid var(--line-soft);
      }
      .drawer-title {
        font-family: "Jura", "Be Vietnam Pro", sans-serif; font-size: 12px; font-weight: 700;
        letter-spacing: .22em; text-transform: uppercase; color: var(--core);
        text-shadow: 0 0 12px rgba(0,212,255,.5);
      }
      .drawer-close {
        margin-left: auto; width: 30px; height: 30px; flex: none; cursor: pointer;
        display: grid; place-items: center;
        border: 1px solid var(--line); background: rgba(0,60,92,.25); color: var(--cyan-bright);
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
        transition: background .2s, box-shadow .2s;
      }
      .drawer-close:hover { background: rgba(0,120,180,.35); box-shadow: 0 0 14px rgba(0,212,255,.25); }
      .drawer-close:focus-visible, .source-item:focus-visible, .menu-btn:focus-visible {
        outline: 2px solid var(--cyan); outline-offset: 2px;
      }

      .drawer-sub {
        margin: 10px 2px 12px;
        font-family: "JetBrains Mono", monospace; font-size: 10.5px; line-height: 1.5;
        letter-spacing: .06em; color: var(--faint); text-transform: uppercase;
      }

      .source-list {
        flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
        display: flex; flex-direction: column; gap: 8px; padding-right: 2px;
      }
      .source-list::-webkit-scrollbar { width: 5px; }
      .source-list::-webkit-scrollbar-thumb { background: rgba(0,212,255,.25); }

      .source-item {
        width: 100%; display: flex; align-items: center; gap: 11px; text-align: left;
        padding: 11px 12px; cursor: pointer; font: inherit; color: inherit;
        border: 1px solid var(--line-soft);
        background: linear-gradient(160deg, rgba(0,60,92,.22), rgba(0,32,52,.16));
        clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
        transition: border-color .2s, box-shadow .2s, background .2s;
      }
      .source-item:hover { border-color: rgba(0,212,255,.45); box-shadow: 0 0 16px rgba(0,212,255,.14); }
      .source-item.active {
        border-color: rgba(0,212,255,.7);
        background: linear-gradient(160deg, rgba(0,110,170,.4), rgba(0,52,84,.3));
        box-shadow: 0 0 18px rgba(0,212,255,.22), inset 0 0 22px rgba(0,212,255,.06);
      }
      .source-item.is-busy { opacity: .55; cursor: not-allowed; }
      .s-ic {
        width: 34px; height: 34px; flex: none; display: grid; place-items: center;
        border: 1px solid rgba(0,212,255,.4); background: rgba(0,90,140,.22); color: var(--cyan-bright);
        clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
      }
      .s-ic svg { width: 18px; height: 18px; }
      /* Logo tuỳ chọn của nguồn (khoá iconUrl). Ảnh là mark tròn có alpha và
         viền trong suốt (~16% mỗi cạnh) nên hiển thị 30px để phần mark thật
         ~20px, cân với icon SVG 18px bên cạnh. */
      .s-ic .s-img { width: 30px; height: 30px; display: block; object-fit: contain; }
      .s-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
      .s-name { font-size: 14px; font-weight: 600; color: #eafcff; letter-spacing: .01em; }
      /* pre-line để ký tự \n trong meta thành xuống dòng thật (meta 2 hàng). */
      .s-meta {
        font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .04em;
        color: var(--muted); text-transform: uppercase; overflow-wrap: anywhere;
        white-space: pre-line;
      }
      .s-check {
        margin-left: auto; flex: none; color: var(--cyan); opacity: 0;
        transform: scale(.7); transition: opacity .2s, transform .2s;
        filter: drop-shadow(0 0 6px rgba(0,212,255,.8));
      }
      .source-item.active .s-check { opacity: 1; transform: scale(1); }
      .s-check svg { width: 16px; height: 16px; display: block; }

      .drawer-foot {
        margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft);
        font-family: "JetBrains Mono", monospace; font-size: 9.5px; letter-spacing: .12em;
        color: var(--faint); text-transform: uppercase; line-height: 1.6;
      }

      .menu-btn { padding: 6px 9px; }

      /* Màn hình mobile (≤560px): thu gọn header và giữ nguyên nhãn nguồn
         ("CANVA PRO") không bị co ngắn bởi nút REBOOT. */
      @media (max-width: 560px) {
        .chat-head { gap: 8px; padding: 10px 12px; }
        .chat-head .reactor-mini { width: 32px; height: 32px; }
        .chat-head .reactor-mini .core-dot { width: 11px; height: 11px; }
        .chat-head .name { font-size: 15px; letter-spacing: .1em; gap: 6px; flex-wrap: nowrap; }
        .chat-head .status { font-size: 10.5px; letter-spacing: .02em; }
        .demo-tag { flex-shrink: 0; max-width: none; font-size: 9.5px; letter-spacing: .08em; padding: 2px 6px; }
        .head-btn { padding: 6px 9px; font-size: 11px; }
        .side-drawer { width: min(84vw, 280px); padding: 14px 12px 10px; }
      }

      @media (max-width: 440px) {
        .head-btn .btn-text { display: none; }
        .head-btn { padding: 6px 8px; }
      }

      /* ≤360px: avatar reactor mini (trang trí) nhường chỗ cho nhãn nguồn. */
      @media (max-width: 360px) {
        .chat-head .reactor-mini { display: none; }
      }

      @media (prefers-reduced-motion: reduce) {
        .side-drawer, .drawer-scrim, .s-check { transition: none !important; }
      }

      /* ---------- Mobile layout fixes ---------- */

      /* Nhãn "ARC REACTOR..." không được nowrap trên máy hẹp:
         nowrap làm cột giữa rộng ra, đẩy readout bên phải tràn khỏi màn hình. */
      @media (max-width: 560px) {
        .reactor-label {
          white-space: normal;
          max-width: 132px;
          font-size: 9.5px;
          line-height: 1.35;
          letter-spacing: .12em;
        }

        /* Chip lệnh trên mobile xếp thành 1 cột dọc để người dùng nhìn thấy
           đầy đủ tất cả các lựa chọn ngay lập tức mà không phải cuộn ngang. */
        .chips {
          flex-direction: column;
          flex-wrap: nowrap;
          align-items: stretch;
          overflow-x: visible;
          gap: 6px;
          padding: 8px 14px 6px;
        }

        .chip {
          width: 100%;
          justify-content: flex-start;
          white-space: normal;
          padding: 7px 12px;
          font-size: 12.5px;
          min-height: 2rem;
        }
      }

      /* Màn hình thấp (iPhone SE / 8...): footer 1 dòng để chừa chỗ cho chat. */
      @media (max-height: 700px) {
        .foot-note {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 10px;
          padding: 2px 14px calc(6px + env(safe-area-inset-bottom));
        }
      }

      /* ---------- WordPress blank canvas integration ---------- */

      /* Tiêu đề H1 ẩn khỏi giao diện nhưng vẫn có cho SEO.
         CSS của GeneratePress và WP core đã bị dequeue trên trang này nên
         phải tự khai báo, nếu không H1 sẽ hiện ra và làm lệch khung 100dvh. */
      .sr-only {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        clip-path: inset(50%) !important;
        white-space: nowrap !important;
        border: 0 !important;
      }

      /* Dự phòng khi admin bar vẫn được in ra (cache, filter bị plugin ghi đè). */
      html { margin-top: 0 !important; }
      body.jarvis-active #wpadminbar { display: none !important; }

      /* ----- BỔ SUNG RESPONSIVE: DESKTOP (SIDEBAR) VS MOBILE (DRAWER) ----- */
      @media (min-width: 1024px) {
        /* Chuyển body thành Flexbox để chia làm 2 cột.
           Chỉ .shell và .side-drawer tham gia luồng flex; backdrop/boot/scrim/
           toast đều position: fixed, h1.sr-only position: absolute. */
        body {
          display: flex;
        }

        /* Ép drawer thành cột cố định bên trái, ghi đè hiệu ứng ẩn/hiện.
           order: -1 vì DOM đặt .shell trước .side-drawer — chỉ đổi thứ tự thị
           giác, không đổi thứ tự Tab/đọc (sidebar đứng sau về Tab, có chủ ý).
           flex: 0 0 332px = không co, không giãn → tại đúng 1024px vẫn đủ 332px,
           nhờ vậy phép bù +166px cho rings luôn chính xác. 332px là số đo thật
           của footer "SHARE TÀI KHOẢN · HỆ THỐNG PHÂN PHỐI TỰ ĐỘNG"
           (JetBrains Mono 9.5px + letter-spacing .12em = 301px) + 28px padding
           + 1px border + 2px dư, để chuỗi nằm gọn trên 1 hàng. */
        .side-drawer {
          position: relative !important;
          transform: translateX(0) !important;
          visibility: visible !important;
          width: 332px;
          flex: 0 0 332px;
          order: -1;
        }

        /* Ẩn các thành phần điều khiển chỉ dành cho Mobile. */
        .menu-btn,
        .drawer-close,
        .drawer-scrim {
          display: none !important;
        }

        /* Khung chat chiếm phần không gian còn lại; margin: 0 auto có sẵn tự
           căn giữa trong vùng đó. min-width: 0 cho phép co xuống 744px tại
           viewport 1024px mà không tràn ngang. */
        .shell {
          flex: 1;
          min-width: 0;
        }

        /* Cột chat dịch phải 166px (nửa sidebar 332px) nên bù lại cho vòng nhện
           backdrop đồng tâm với lò phản ứng. */
        .backdrop .rings {
          left: calc(50% + 166px);
        }

        /* Toast cũng căn theo trục chat thay vì trục viewport. */
        .toast {
          left: calc(50% + 166px);
        }
      }