/* Browser Control console: the neumorphic surface language, a faithful
           mirror of components/ui/neoCard and the ProductPage hero mlp-bc-hc, so
           the landing console and the product hero read as one family. The window
           is a soft raised panel, chrome bars sit flat and are split by soft inset
           hairlines, the address bar and status pill are recessed wells, the active
           tab is a raised chip, and the rendered page is recessed into the bezel.
           No hard borders and no accent glow border. Accent stays minimal: the sky
           live dot, the node badges, and the parked violet cursor. Motion is
           transform and opacity only, and reduced-motion safe. */
        .mlp-tp-browser {
          position: relative;
          border: none;
          border-radius: clamp(16px, 3.4vw, 22px);
          overflow: hidden;
          font-family: Poppins, system-ui, sans-serif;
          color: var(--neo-chrome-ink);
          background: radial-gradient(135% 115% at 50% -12%, #223052 0%, #141b2b 46%, #0c1017 100%);
          box-shadow: 0 24px 52px -18px rgba(0,0,0,0.92), 8px 8px 22px rgba(0,0,0,0.52), -5px -5px 16px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.10), 0 0 0 1px rgba(255,255,255,0.045);
          --neo-chrome-ink: #e6ecf5;
          --neo-chrome-muted: rgba(230,236,245,0.58);
          --neo-well-bg: rgba(4,8,18,0.55);
          --neo-page-bg: linear-gradient(180deg, #0A0F1D, #070B16);
          --neo-tab-on-bg: linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0.012));
          --neo-inset: inset 2px 2px 6px rgba(0,0,0,0.6), inset -1px -1px 3px rgba(255,255,255,0.05);
          --neo-chip: 3px 3px 8px rgba(0,0,0,0.5), -2px -2px 6px rgba(255,255,255,0.05), inset 0 1px 0 rgba(255,255,255,0.07);
          --neo-sep: inset 0 -1px 0 rgba(255,255,255,0.05);
          --neo-status-ink: #7dd3fc;
          --neo-lock: #34D399;
        }
        .mlp-tp-browser.is-light {
          background: #f2f5f9;
          box-shadow: 0 22px 44px -16px rgba(15,23,42,0.34), 7px 7px 17px rgba(15,23,42,0.13), -6px -6px 16px rgba(255,255,255,0.98);
          --neo-chrome-ink: #0f172a;
          --neo-chrome-muted: rgba(15,23,42,0.55);
          --neo-well-bg: #e7ecf3;
          --neo-page-bg: linear-gradient(180deg, #FFFFFF, #F8FAFC);
          --neo-tab-on-bg: #eef2f8;
          --neo-inset: inset 3px 3px 6px rgba(15,23,42,0.10), inset -2px -2px 5px rgba(255,255,255,0.95);
          --neo-chip: 5px 5px 12px rgba(15,23,42,0.14), -3px -3px 9px rgba(255,255,255,0.98), inset 0 1px 0 rgba(255,255,255,0.9);
          --neo-sep: inset 0 -1px 0 rgba(255,255,255,0.75);
          --neo-status-ink: #0369A1;
          --neo-lock: #059669;
        }

        /* Tab strip: flat on the shell, split by a soft inset hairline. */
        .mlp-tp-browser-tabstrip { display: flex; align-items: flex-end; gap: 8px; padding: 8px 11px 0; background: transparent; box-shadow: var(--neo-sep); }
        .mlp-tp-browser-lights { display: inline-flex; gap: 5px; padding-bottom: 6px; flex: 0 0 auto; }
        .mlp-tp-browser-lights i { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); }
        .mlp-tp-browser-tab { display: inline-flex; align-items: center; gap: 6px; max-width: 150px; padding: 5px 10px; border-radius: 9px 9px 0 0; font: 700 9px/1.2 Poppins, system-ui, sans-serif; color: var(--neo-chrome-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mlp-tp-browser-tab.on { color: var(--neo-chrome-ink); background: var(--neo-tab-on-bg); border-radius: 9px 9px 6px 6px; box-shadow: var(--neo-chip); }
        .mlp-tp-browser-tab.rest { max-width: 96px; padding-bottom: 6px; opacity: 0.68; }
        .mlp-tp-browser-newtab { margin-left: auto; padding-bottom: 6px; color: var(--neo-chrome-muted); font: 700 12px/1 'JetBrains Mono', ui-monospace, monospace; flex: 0 0 auto; }

        /* Toolbar: nav glyphs, a recessed address well, a live status pill. */
        .mlp-tp-browser-toolbar { display: flex; align-items: center; gap: 7px; padding: 7px 11px; background: transparent; box-shadow: var(--neo-sep); }
        .mlp-tp-browser-nav { display: inline-flex; gap: 2px; flex: 0 0 auto; }
        .mlp-tp-browser-nav span { width: 15px; height: 15px; display: grid; place-items: center; border-radius: 5px; color: var(--neo-chrome-muted); font: 700 11px/1 'JetBrains Mono', ui-monospace, monospace; }
        .mlp-tp-browser-nav span.dim { opacity: 0.5; }
        .mlp-tp-browser-address { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: var(--neo-well-bg); color: var(--neo-chrome-ink); font: 650 8.5px/1 'JetBrains Mono', ui-monospace, monospace; white-space: nowrap; overflow: hidden; box-shadow: var(--neo-inset); }
        .mlp-tp-browser-address svg { flex: 0 0 auto; color: var(--neo-lock); }
        .mlp-tp-browser-address .path { overflow: hidden; text-overflow: ellipsis; }
        .mlp-tp-browser-address .scheme { color: var(--neo-lock); }
        .mlp-tp-browser-address .tail { color: var(--neo-chrome-muted); }
        .mlp-tp-browser-status { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; padding: 4px 9px; border-radius: 999px; color: var(--neo-status-ink); font: 800 7px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; box-shadow: var(--neo-inset); }

        /* Live dot: sky fill plus a soft ping ring, transform and opacity only. */
        .mlp-tp-browser-live { position: relative; width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #38BDF8; }
        .mlp-tp-browser-live::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1.5px solid rgba(56,189,248,0.7); transform: scale(1); opacity: 0.7; animation: mlp-tp-browser-ping 2.4s ease-in-out infinite; }
        @keyframes mlp-tp-browser-ping { 0% { transform: scale(1); opacity: 0.6; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

        /* Rendered page: recessed into the bezel, calmer palette. */
        .mlp-tp-browser-view { position: relative; margin: 3px 12px 12px; padding: 15px 13px 13px; border-radius: 13px; overflow: hidden; background: var(--neo-page-bg); box-shadow: var(--neo-inset); }
        .mlp-tp-browser-field { position: relative; height: 25px; border-radius: 7px; background: rgba(56,189,248,0.10); box-shadow: inset 0 0 0 1px rgba(56,189,248,0.30); }
        .mlp-tp-browser-field:first-of-type { margin-top: 4px; }
        .mlp-tp-browser-act { position: relative; margin-top: 6px; display: inline-flex; width: fit-content; }
        .mlp-tp-browser-submit { position: relative; height: 30px; min-width: 132px; padding: 0 18px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; color: #EDE9FE; font: 700 10px/1 Poppins, system-ui, sans-serif; background: linear-gradient(180deg, rgba(139,92,246,0.34), rgba(139,92,246,0.18)); box-shadow: 0 10px 24px -14px #8B5CF6, inset 0 0 0 1px rgba(139,92,246,0.55); }
        .mlp-tp-browser.is-light .mlp-tp-browser-submit { color: #5B21B6; }
        .mlp-tp-browser-cursor { position: absolute; right: -7px; bottom: -9px; filter: drop-shadow(0 2px 3px rgba(2,6,23,0.5)); animation: mlp-tp-browser-cursor 3.4s ease-in-out infinite; }
        @keyframes mlp-tp-browser-cursor { 0%, 62%, 100% { transform: translate(0, 0); } 72% { transform: translate(-3px, -3px); } 82% { transform: translate(0, 0); } }

        /* Governance cue: soft amber well, one raised approve chip. */
        .mlp-tp-browser-approval { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding: 8px 10px; border-radius: 10px; background: rgba(245,158,11,0.11); color: #FCD34D; font: 650 8.5px/1.4 Poppins, system-ui, sans-serif; }
        .mlp-tp-browser.is-light .mlp-tp-browser-approval { background: rgba(245,158,11,0.12); color: #92400E; }
        .mlp-tp-browser-approval svg { flex: 0 0 auto; }
        .mlp-tp-browser-approval .txt { flex: 1; min-width: 0; }
        .mlp-tp-browser-approval b { flex: 0 0 auto; padding: 4px 9px; border-radius: 7px; background: #F59E0B; color: #1C1206; font: 800 7.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.08em; text-transform: uppercase; box-shadow: var(--neo-chip); }
        .mlp-tp-browser.is-light .mlp-tp-browser-approval b { background: #D97706; color: #FFFFFF; }

        /* Rich (landing sheet) extras: order lines + the agent's action trace. */
        .mlp-tp-browser-lines { display: grid; gap: 6px; margin-top: 4px; padding: 9px 10px; border-radius: 9px; box-shadow: var(--neo-inset); }
        .mlp-tp-browser-lines > span { display: grid; grid-template-columns: 52px 1fr 26px 62px; align-items: center; gap: 8px; font: 650 8px/1 'JetBrains Mono', ui-monospace, monospace; color: var(--neo-chrome-muted); }
        .mlp-tp-browser-lines b { font-weight: 800; color: var(--neo-chrome-ink); }
        .mlp-tp-browser-lines em { font-style: normal; text-align: right; }
        .mlp-tp-browser-lines strong { text-align: right; color: var(--neo-chrome-ink); font-variant-numeric: tabular-nums; }
        .mlp-tp-browser-lines .total { padding-top: 6px; border-top: 1px dashed color-mix(in srgb, var(--neo-chrome-muted) 45%, transparent); }
        .mlp-tp-browser-lines .total strong { font-weight: 800; }
        .mlp-tp-browser-trace { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 5px; font: 700 7.5px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0.04em; color: var(--neo-chrome-ink); }
        .mlp-tp-browser-trace li { display: flex; align-items: center; gap: 7px; }
        .mlp-tp-browser-trace li span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--neo-chrome-muted); }
        .mlp-tp-browser-trace i { width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto; }
        .mlp-tp-browser-trace i.ok { background: #34D399; }
        .mlp-tp-browser-trace i.wait { background: #F59E0B; }

        @media (prefers-reduced-motion: reduce) {
          .mlp-tp-browser-live::after, .mlp-tp-browser-cursor { animation: none; }
          .mlp-tp-browser-cursor { transform: none; }
        }