/*
AIWS-META
component: AI2
role: world-interface-finish-presentation
from: canonical AI2 conversation + canonical Living Graph + observed runtime presentation state
To: unified AI2 World Interface
interfaces: CSS only; ai2-world-interface-v1 DOM; canonical Genesis Rain remains untouched
lifecycle: experimental-safe-branch
conformance: not-canonical-not-admitted
intent: Finish the AI2 front door as one seamless, high-information workspace while preserving the established Genesis Rain and Living Graph visual language.
*/
:root{
  --ai2-finish-cyan:#6ed7ff;
  --ai2-finish-blue:#6ba6ff;
  --ai2-finish-violet:#8b7cff;
  --ai2-finish-green:#4ee0ad;
  --ai2-finish-gold:#e8b44a;
  --ai2-finish-red:#ff7783;
  --ai2-finish-ink:#030711;
}

/* Preserve Genesis Rain as the atmospheric world behind the product. */
body[data-rain] .page{position:relative;z-index:2}
body[data-rain] #genesisRain{opacity:.82}
body[data-rain] .rain-veil{background:radial-gradient(ellipse at 50% 12%,rgba(4,11,24,.12),rgba(3,7,15,.52) 58%,rgba(2,5,11,.75));pointer-events:none}

/* The hero now hands off directly into one continuous intelligence surface. */
.hero{margin-bottom:14px!important}
.hero h1{letter-spacing:-.045em;text-wrap:balance}
.hero .sub{max-width:820px;color:#879cb4}
.ai2-world-interface{margin-top:8px!important;border-color:rgba(104,167,239,.19)!important;background:linear-gradient(180deg,rgba(7,14,26,.78),rgba(3,8,16,.72))!important;box-shadow:0 34px 120px rgba(0,0,0,.42),0 0 0 1px rgba(104,167,239,.035) inset,0 0 90px rgba(52,116,210,.055)!important}
.ai2-world-interface::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,transparent 0,rgba(83,156,239,.025) 49.8%,rgba(83,156,239,.045) 50%,rgba(83,156,239,.025) 50.2%,transparent 100%);mix-blend-mode:screen}

/* Quiet operational ribbon: compact enough for first-time users, dense enough for experts. */
.ai2-world-statusbar{grid-row:2;position:absolute;left:12px;right:12px;top:54px;z-index:34;display:flex;align-items:center;gap:6px;min-height:34px;padding:5px 7px;border:1px solid rgba(106,163,228,.115);border-radius:11px;background:rgba(4,10,20,.72);backdrop-filter:blur(18px);box-shadow:0 10px 34px rgba(0,0,0,.18);pointer-events:auto}
.ai2-world-statusbar .world-status-label{flex:0 0 auto;padding:0 5px;color:#516b85;font:750 7px/1 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);letter-spacing:.13em;text-transform:uppercase}
.ai2-world-status-items{display:flex;align-items:center;gap:5px;min-width:0;overflow-x:auto;scrollbar-width:none}
.ai2-world-status-items::-webkit-scrollbar{display:none}
.ai2-world-state{display:flex;align-items:center;gap:6px;flex:0 0 auto;height:23px;padding:0 8px;border:1px solid rgba(111,153,199,.12);border-radius:8px;background:rgba(255,255,255,.018);color:#70869d;font:700 7.5px/1 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);letter-spacing:.045em;white-space:nowrap}
.ai2-world-state::before{content:"";width:5px;height:5px;border-radius:50%;background:#60768d;box-shadow:0 0 0 3px rgba(96,118,141,.055)}
.ai2-world-state b{color:#a8bdd2;font-weight:750}
.ai2-world-state[data-state="verified"]{color:#7dcfb0;border-color:rgba(78,224,173,.19)}
.ai2-world-state[data-state="verified"]::before{background:var(--ai2-finish-green);box-shadow:0 0 10px rgba(78,224,173,.45)}
.ai2-world-state[data-state="attention"]{color:#d4b76f;border-color:rgba(232,180,74,.19)}
.ai2-world-state[data-state="attention"]::before{background:var(--ai2-finish-gold);box-shadow:0 0 10px rgba(232,180,74,.32)}
.ai2-world-state[data-state="blocked"]{color:#e7a0a8;border-color:rgba(255,119,131,.2)}
.ai2-world-state[data-state="blocked"]::before{background:var(--ai2-finish-red);box-shadow:0 0 10px rgba(255,119,131,.35)}
.ai2-world-state[data-state="live"]{color:#92c8ff;border-color:rgba(107,166,255,.22)}
.ai2-world-state[data-state="live"]::before{background:var(--ai2-finish-blue);box-shadow:0 0 11px rgba(107,166,255,.46)}
.ai2-world-status-actions{margin-left:auto;display:flex;gap:4px;flex:0 0 auto}
.ai2-world-status-actions button{height:23px;padding:0 8px;border-radius:7px;border:1px solid rgba(107,166,255,.12);background:rgba(255,255,255,.015);color:#738aa3;font:650 7.5px/1 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);letter-spacing:.035em}
.ai2-world-status-actions button:hover,.ai2-world-status-actions button:focus-visible{color:#dcecff;border-color:rgba(107,166,255,.3);background:rgba(59,130,246,.06)}

/* Give conversation room beneath the status ribbon without adding a second chat surface. */
.ai2-world-interface .ai2-chat-shell{padding-top:42px!important}
.ai2-world-interface .ai2-chat-brand{opacity:.78;filter:saturate(.92)}
.ai2-world-interface .ai2-chat-surface{border:1px solid rgba(104,159,221,.115)!important;background:linear-gradient(180deg,rgba(6,13,24,.8),rgba(3,8,16,.88))!important;box-shadow:0 22px 70px rgba(0,0,0,.24)}
.ai2-world-interface .thread-head{background:linear-gradient(180deg,rgba(7,15,27,.9),rgba(5,11,21,.72))}
.ai2-world-interface #thread{background:radial-gradient(620px 270px at 50% 0%,rgba(54,125,211,.045),transparent 70%)}
.ai2-world-interface .turn.ai2 .body{border-color:rgba(92,154,226,.16);box-shadow:0 12px 36px rgba(0,0,0,.16)}
.ai2-world-interface .turn.user .body{border-color:rgba(114,143,180,.13)}
.ai2-world-interface #composer{border-color:rgba(103,162,230,.18)!important;box-shadow:0 -18px 50px rgba(2,7,14,.7),0 0 0 1px rgba(107,166,255,.025) inset!important}
.ai2-world-interface #intent:focus{box-shadow:none!important}
.ai2-world-interface .ai2-chat-send{box-shadow:0 0 0 1px rgba(103,173,255,.1) inset,0 8px 25px rgba(35,101,190,.2)}

/* Keep the Living Graph recognizable: same spatial world, deeper light and dimensionality. */
.ai2-world-interface #map .mapframe{border:1px solid rgba(94,153,219,.125)!important;box-shadow:inset 0 0 70px rgba(22,75,139,.045),0 22px 70px rgba(0,0,0,.22)}
.ai2-world-interface #map .mapframe::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 48%,rgba(76,153,255,.07),transparent 27%),radial-gradient(circle at 50% 48%,transparent 0 41%,rgba(78,144,228,.022) 42%,transparent 43%),linear-gradient(rgba(98,157,224,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(98,157,224,.018) 1px,transparent 1px);background-size:auto,auto,42px 42px,42px 42px;mask-image:radial-gradient(circle at center,#000 20%,rgba(0,0,0,.65) 65%,transparent 100%)}
.ai2-world-interface #map .rings{opacity:.68}
.ai2-world-interface .ai2-lg-node{backdrop-filter:blur(10px);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,opacity .18s ease,filter .18s ease}
.ai2-world-interface .ai2-lg-node:hover,.ai2-world-interface .ai2-lg-node:focus-visible{transform:translate(-50%,-50%) scale(1.035);z-index:30}
.ai2-world-interface .ai2-lg-node[data-selected="true"]{box-shadow:0 18px 42px rgba(0,0,0,.34),0 0 0 1px rgba(108,173,255,.18) inset,0 0 34px rgba(72,150,255,.12)}
.ai2-world-interface .ai2-lg-edge{filter:drop-shadow(0 0 3px rgba(80,151,230,.08))}
.ai2-world-interface[data-graph-state="live"] #map .mapframe{border-color:rgba(79,163,248,.18)!important}

/* Empty graph is still useful: it explains itself instead of looking broken. */
.ai2-world-graph-empty{position:absolute;left:50%;top:51%;z-index:4;transform:translate(-50%,-50%);width:min(520px,78%);text-align:center;pointer-events:none;opacity:0;transition:opacity .2s ease}
.ai2-world-interface[data-graph-state="idle"] .ai2-world-graph-empty{opacity:1}
.ai2-world-graph-empty b{display:block;color:#7893af;font:750 10px/1.2 var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);letter-spacing:.09em;text-transform:uppercase}
.ai2-world-graph-empty span{display:block;margin-top:8px;color:#536b83;font-size:11px;line-height:1.6}

/* Seamless focus modes: never make the hidden counterpart disappear conceptually. */
.ai2-world-interface[data-mode="text-full"] #map,.ai2-world-interface[data-mode="graph-full"] .ai2-chat-shell{border-top:1px solid rgba(107,166,255,.09)!important;background:rgba(4,10,19,.8)!important}
body.ai2-world-modal{overflow:hidden}

/* Front-door completion hardening: long-form intelligence must read like a first-class
   product, not a chat bubble, while retaining the canonical response renderer. */
.ai2-world-interface .ai2-chat-surface{min-width:0;isolation:isolate;overflow:clip}
.ai2-world-interface .ai2-chat-thread{min-width:0;overscroll-behavior:contain;scrollbar-gutter:stable;overflow-anchor:none}
.ai2-world-interface .turn{min-width:0;max-width:100%}
.ai2-world-interface .turn .body{min-width:0;max-width:min(100%,980px);overflow-wrap:anywhere;word-break:normal}
.ai2-world-interface .turn.ai2 .body{font-size:clamp(13px,1.08vw,15px);line-height:1.72;letter-spacing:-.004em}
.ai2-world-interface .turn.ai2 .body>p:first-child{margin-top:0}
.ai2-world-interface .turn.ai2 .body>p:last-child{margin-bottom:0}
.ai2-world-interface .turn.ai2 .body h1,.ai2-world-interface .turn.ai2 .body h2,.ai2-world-interface .turn.ai2 .body h3{color:#e6f2ff;text-wrap:balance;letter-spacing:-.025em;line-height:1.14}
.ai2-world-interface .turn.ai2 .body h1{font-size:1.46em;margin:1.35em 0 .55em}
.ai2-world-interface .turn.ai2 .body h2{font-size:1.25em;margin:1.25em 0 .5em}
.ai2-world-interface .turn.ai2 .body h3{font-size:1.08em;margin:1.1em 0 .42em}
.ai2-world-interface .turn.ai2 .body ul,.ai2-world-interface .turn.ai2 .body ol{padding-left:1.35em;margin:.7em 0 1em}
.ai2-world-interface .turn.ai2 .body li+li{margin-top:.34em}
.ai2-world-interface .turn.ai2 .body blockquote{margin:1em 0;padding:.7em .95em;border-left:2px solid rgba(110,215,255,.42);background:rgba(84,151,224,.045);color:#b8cce0;border-radius:0 9px 9px 0}
.ai2-world-interface .turn.ai2 .body pre{max-width:100%;overflow:auto;padding:13px 15px;border:1px solid rgba(107,166,255,.12);border-radius:10px;background:rgba(1,5,11,.82);font-size:.88em;line-height:1.58;tab-size:2}
.ai2-world-interface .turn.ai2 .body code{font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace);font-size:.9em;color:#b7dcff}
.ai2-world-interface .turn.ai2 .body :not(pre)>code{padding:.12em .34em;border:1px solid rgba(107,166,255,.1);border-radius:5px;background:rgba(82,143,211,.055)}
.ai2-world-interface .turn.ai2 .body table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;margin:1em 0;font-size:.92em;scrollbar-width:thin}
.ai2-world-interface .turn.ai2 .body th,.ai2-world-interface .turn.ai2 .body td{padding:8px 11px;border:1px solid rgba(113,151,195,.12);text-align:left;vertical-align:top}
.ai2-world-interface .turn.ai2 .body th{position:sticky;top:0;background:rgba(8,17,30,.96);color:#c9def3;font-weight:700}
.ai2-world-interface .turn.ai2 .body a{color:#8ccaff;text-decoration-thickness:1px;text-underline-offset:3px}
.ai2-world-interface .turn.ai2 .body a:hover{color:#c7e7ff}
.ai2-world-interface .rchip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The composer is an instrument panel, not a footer. Keep it visible without covering
   long answers, and give touch/keyboard users a generous target. */
.ai2-world-interface #composer{position:relative;z-index:18;min-width:0;background:linear-gradient(180deg,rgba(5,12,22,.94),rgba(3,8,16,.98))!important;backdrop-filter:blur(22px)}
.ai2-world-interface #intent{max-height:min(34svh,280px);resize:none;line-height:1.48}
.ai2-world-interface .ai2-chat-send,.ai2-world-interface .ai2-chat-btn{min-height:38px}
.ai2-world-interface .ai2-chat-send:focus-visible,.ai2-world-interface .ai2-chat-btn:focus-visible,.ai2-world-interface .tinybtn:focus-visible,.ai2-world-interface .ai2-world-statusbar button:focus-visible{outline:2px solid rgba(110,215,255,.7);outline-offset:2px}
.ai2-world-interface .ai2-ui-host{min-width:0;max-width:100%;overflow:clip}

/* Progressive response perception. These selectors are intentionally semantic and
   passive: if the canonical runtime marks a turn busy/streaming, the surface reflects
   it; no fake progress is generated here. */
.ai2-world-interface .turn.ai2[aria-busy="true"] .body,.ai2-world-interface .turn.ai2.streaming .body{border-color:rgba(110,215,255,.24);box-shadow:0 12px 42px rgba(0,0,0,.19),0 0 28px rgba(66,145,232,.055)}
.ai2-world-interface .turn.ai2[aria-busy="true"] .body::after,.ai2-world-interface .turn.ai2.streaming .body::after{content:"";display:inline-block;width:6px;height:1.05em;margin-left:5px;vertical-align:-.18em;border-radius:2px;background:rgba(110,215,255,.8);animation:ai2-finish-caret .9s steps(1,end) infinite}
@keyframes ai2-finish-caret{50%{opacity:.12}}

/* Keep top-level navigation usable on intermediate widths instead of letting the
   product shell introduce horizontal page overflow. */
.masthead,.mainnav,.head-right,.ai2-world-interface,.ai2-chat-shell,#map{min-width:0}
.mainnav{overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}
.mainnav::-webkit-scrollbar{display:none}
.page{overflow-x:clip}

@media(max-width:900px){
  .ai2-world-statusbar{left:8px;right:8px;top:50px}
  .ai2-world-status-actions{display:none}
  .ai2-world-interface .ai2-chat-shell{padding-top:40px!important}
  .ai2-world-interface .turn.ai2 .body{max-width:100%;line-height:1.66}
}
@media(max-width:620px){
  body[data-rain] #genesisRain{opacity:.68}
  .hero{padding-bottom:7px!important}
  .hero h1{font-size:clamp(31px,10vw,46px)!important;line-height:.98!important}
  .hero .sub{font-size:12px!important;line-height:1.6!important}
  .ai2-world-interface{margin-left:-4px!important;margin-right:-4px!important;border-radius:17px!important;min-height:calc(100svh - 92px)!important}
  .ai2-world-statusbar{position:relative;left:auto;right:auto;top:auto;margin:6px 8px 0;grid-row:2;z-index:34;min-height:31px}
  .ai2-world-interface .ai2-chat-shell{padding-top:6px!important}
  .ai2-world-state{height:21px;padding:0 7px;font-size:6.8px}
  .ai2-world-status-label{display:none}
  .ai2-world-interface #map .mapstage{min-height:290px!important}
  .ai2-world-interface .turn.ai2 .body{font-size:13px;line-height:1.64;padding-left:12px;padding-right:12px}
  .ai2-world-interface .turn.ai2 .body pre{margin-left:-2px;margin-right:-2px;border-radius:8px}
  .ai2-world-interface .turn.ai2 .body table{font-size:.86em}
  .ai2-world-interface #intent{max-height:28svh;font-size:16px}
  .ai2-world-interface .ai2-chat-btn,.ai2-world-interface .ai2-chat-send{min-width:42px;min-height:42px}
}
@media(max-width:390px){
  .ai2-world-interface{margin-left:-7px!important;margin-right:-7px!important;border-radius:14px!important}
  .ai2-world-interface .ai2-world-statusbar{margin-inline:6px}
  .ai2-world-interface .turn.ai2 .body{padding-left:10px;padding-right:10px}
}
@media(prefers-reduced-motion:reduce){
  .ai2-world-interface .ai2-lg-node,.ai2-world-graph-empty{transition:none}
  .ai2-world-interface .ai2-lg-node:hover,.ai2-world-interface .ai2-lg-node:focus-visible{transform:translate(-50%,-50%)}
  .ai2-world-interface .turn.ai2[aria-busy="true"] .body::after,.ai2-world-interface .turn.ai2.streaming .body::after{animation:none;opacity:.7}
}