:root {
  --paper: #f7f6f2;
  --surface: rgba(255,255,255,.96);
  --ink: #17191d;
  --muted: #70747c;
  --line: rgba(23,25,29,.13);
  --line-strong: rgba(23,25,29,.23);
  --green: #74b54a;
  --green-dark: #5b9338;
  --blue: #5798d0;
  --yellow: #e3b62e;
  --pink: #df5b94;
  --shadow: 0 12px 34px rgba(22,28,34,.08);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--ink);
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 50% 14%, rgba(116,181,74,.09), transparent 19%),
    radial-gradient(rgba(23,25,29,.08) .7px, transparent .7px),
    var(--paper);
  background-size: auto, 11px 11px, auto;
}
button, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button:focus-visible, a:focus-visible, textarea:focus-visible { outline: 3px solid rgba(116,181,74,.45); outline-offset: 3px; }

.skip-link { position: fixed; left: 10px; top: 10px; z-index: 100; transform: translateY(-180%); background: #111; color:#fff; padding:8px 10px; border-radius:8px; }
.skip-link:focus { transform: translateY(0); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

.app-viewport { width: 100vw; height: 100dvh; padding: clamp(6px, 1vw, 12px); overflow: hidden; }
.sudochat-shell { width:100%; height:100%; perspective:1600px; }
.flip-stage { position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .72s cubic-bezier(.2,.8,.2,1); }
.sudochat-shell[data-view="engine"] .flip-stage { transform:rotateY(180deg); }
.page-face { position:absolute; inset:0; display:grid; grid-template-rows:40px minmax(0,1fr) 34px; border:1px solid rgba(23,25,29,.08); border-radius:8px; background:rgba(250,249,246,.95); backface-visibility:hidden; overflow:hidden; }
.page-back { transform:rotateY(180deg); }
.page-face::before { content:""; position:absolute; inset:0; pointer-events:none; background-image:radial-gradient(rgba(23,25,29,.07) .65px,transparent .65px); background-size:11px 11px; opacity:.8; }

.top-strip { position:relative; z-index:3; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 clamp(10px,2vw,24px); }
.top-action, .top-label { border:0; background:rgba(235,233,228,.86); padding:5px 9px; font-size:clamp(.58rem,.9vw,.72rem); font-weight:700; letter-spacing:.2em; color:#626871; }
.top-action { justify-self:start; cursor:pointer; background:transparent; color:#2c3138; }
.top-action:hover { color:var(--green-dark); }
.top-label { justify-self:center; }
.top-label-right { justify-self:end; }

.chat-layout { position:relative; z-index:2; min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; width:min(1120px,94vw); margin:0 auto; padding:0 0 6px; }
.landing-cluster { align-self:center; text-align:center; min-height:0; }
.identity-row { display:inline-grid; grid-template-columns:94px 48px 130px; align-items:center; justify-content:center; gap:12px; height:100px; margin:0 auto 8px; }
.identity-asset { height:94px; border:1px solid rgba(116,181,74,.3); border-radius:24px; background:rgba(255,255,255,.92); display:grid; place-items:center; padding:8px; box-shadow:var(--shadow); overflow:hidden; }
.identity-asset img { width:100%; height:100%; object-fit:contain; }
.identity-arms { border-color:transparent; box-shadow:none; background:transparent; }
.identity-cross { font-family:"Space Grotesk",sans-serif; font-size:3.4rem; line-height:1; font-weight:400; }
.landing-cluster h1 { margin:0; font-family:"Space Grotesk","Segoe UI",sans-serif; font-size:clamp(2rem,4.4vw,3.15rem); line-height:1; letter-spacing:-.05em; font-weight:500; }
.landing-cluster h1 strong { font-family:Georgia,"Times New Roman",serif; font-weight:700; letter-spacing:-.03em; }
.landing-cluster > p { margin:7px 0 0; color:var(--muted); font-size:clamp(.78rem,1.25vw,.98rem); line-height:1.15; }
.landing-cluster > p span { color:#888c92; }

.prompt-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:clamp(18px,3vh,30px); }
.prompt-card { min-width:0; height:122px; padding:13px 14px; display:grid; grid-template-rows:auto auto 1fr; align-content:start; gap:7px; border:1px solid var(--line); border-radius:15px; background:rgba(255,255,255,.94); text-align:left; cursor:pointer; box-shadow:0 5px 15px rgba(20,25,30,.025); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease; }
.prompt-card:hover { transform:translateY(-2px); border-color:var(--line-strong); box-shadow:var(--shadow); }
.card-badge { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:#fff; font-size:.67rem; font-weight:700; }
.badge-mustafa { background:var(--blue); }
.badge-courts { background:var(--yellow); }
.badge-agent { background:var(--pink); }
.prompt-card strong { font-family:"Space Grotesk",sans-serif; font-size:clamp(.76rem,1.05vw,.9rem); line-height:1.06; }
.prompt-card small { color:var(--muted); font-size:clamp(.62rem,.85vw,.73rem); line-height:1.3; overflow:hidden; }

.chat-stack { min-height:0; width:100%; display:grid; grid-template-rows:minmax(0,1fr) auto auto; gap:6px; }
.conversation { display:none; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; padding:4px 8px 2px; }
.sudochat-shell.has-chat .chat-layout { grid-template-rows:minmax(0,1fr); }
.sudochat-shell.has-chat .landing-cluster { display:none; }
.sudochat-shell.has-chat .conversation { display:flex; flex-direction:column; gap:9px; }
.message { max-width:78%; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; font-size:.82rem; line-height:1.35; }
.message.user { align-self:flex-end; background:rgba(116,181,74,.09); border-color:rgba(116,181,74,.26); }
.message.assistant { align-self:flex-start; }
.message-label { display:block; margin-bottom:4px; color:var(--green-dark); font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.message p { margin:0; }
.source-list { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.source-list a { padding:4px 7px; border:1px solid var(--line); border-radius:999px; font-size:.63rem; color:var(--muted); }

.composer { position:relative; min-height:94px; display:grid; grid-template-columns:1fr 46px; grid-template-rows:1fr 27px; align-items:center; gap:0 10px; padding:12px 14px 0; border:1.5px solid transparent; border-radius:14px; background:linear-gradient(#fff,#fff) padding-box,linear-gradient(90deg,#4ebf9d,#82c54b) border-box; box-shadow:0 5px 18px rgba(20,25,30,.035); }
.composer textarea { width:100%; max-height:58px; resize:none; border:0; outline:0; background:transparent; color:var(--ink); padding:4px 0; line-height:1.35; font-size:.83rem; }
.composer textarea::placeholder { color:#3b4047; }
.composer > button { width:40px; height:40px; border:0; border-radius:10px; background:#f7f7f5; cursor:pointer; font-size:1.15rem; color:#39413d; }
.composer > button:hover { background:#eef3e8; color:var(--green-dark); }
.composer-tools { grid-column:1/-1; display:flex; align-items:center; gap:13px; border-top:1px solid rgba(23,25,29,.07); color:#60666e; font-size:.64rem; }
.composer-tools .counter { margin-left:auto; color:#40454b; }
.composer-note { margin:0; text-align:center; color:#7c8188; font-size:.58rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.legal-strip { position:relative; z-index:3; display:flex; justify-content:center; align-items:center; gap:14px; padding:0 14px; color:#777b82; font-size:clamp(.48rem,.67vw,.58rem); text-align:center; white-space:nowrap; overflow:hidden; }
.legal-strip span { overflow:hidden; text-overflow:ellipsis; }
.legal-strip a { font-weight:700; color:#444a51; }

.engine-layout { position:relative; z-index:2; min-height:0; width:min(1120px,94vw); margin:0 auto; display:grid; grid-template-rows:74px minmax(0,1fr) 110px; gap:10px; padding:4px 0 8px; }
.engine-heading { display:grid; grid-template-columns:1.2fr .8fr; gap:20px; align-items:center; }
.engine-kicker { color:var(--green-dark); font-size:.58rem; font-weight:700; letter-spacing:.16em; }
.engine-heading h2 { margin:3px 0 0; font-family:"Space Grotesk",sans-serif; font-size:clamp(1.25rem,2.4vw,1.85rem); line-height:1.05; letter-spacing:-.03em; }
.engine-heading p { margin:0; justify-self:end; max-width:360px; color:var(--muted); font-size:.74rem; line-height:1.3; }

.engine-diagram { position:relative; min-height:0; display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(3,1fr); gap:10px; align-items:stretch; }
.engine-node { position:relative; z-index:2; min-width:0; padding:10px 11px; display:grid; gap:3px; align-content:center; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.94); text-align:left; cursor:pointer; box-shadow:0 5px 14px rgba(20,25,30,.025); }
.engine-node:hover { border-color:var(--line-strong); box-shadow:var(--shadow); }
.engine-node span { justify-self:start; padding:2px 5px; border-radius:999px; background:rgba(116,181,74,.1); color:var(--green-dark); font-size:.48rem; font-weight:800; letter-spacing:.08em; }
.engine-node[data-component="retrieval"] span, .engine-node[data-component="evaluation"] span { background:rgba(87,152,208,.09); color:#3e79a9; }
.engine-node strong { font-family:"Space Grotesk",sans-serif; font-size:.76rem; line-height:1.05; }
.engine-node small { color:var(--muted); font-size:.6rem; line-height:1.2; }
.node-user { grid-column:1; grid-row:2; }
.node-gateway { grid-column:2; grid-row:2; }
.node-agent { grid-column:3; grid-row:2; border-color:rgba(116,181,74,.35); }
.node-kb { grid-column:4; grid-row:1; }
.node-guard { grid-column:4; grid-row:2; }
.node-retrieval { grid-column:4; grid-row:3; }
.node-eval { grid-column:5; grid-row:1; }
.node-response { grid-column:5; grid-row:2 / span 2; }
.connector { position:absolute; z-index:1; top:50%; height:1px; background:rgba(23,25,29,.22); transform:translateY(-50%); }
.c1 { left:18%; width:4%; }
.c2 { left:38%; width:4%; }

.engine-bottom { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.compact-card { min-width:0; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.92); }
.compact-card > span { display:block; color:var(--green-dark); font-size:.5rem; font-weight:800; letter-spacing:.13em; }
.compact-card strong { display:block; margin-top:4px; font-size:.72rem; line-height:1.1; }
.compact-card p { margin:4px 0 0; color:var(--muted); font-size:.59rem; line-height:1.2; }

@media (max-height: 720px) {
  .page-face { grid-template-rows:34px minmax(0,1fr) 26px; }
  .top-strip { padding-inline:12px; }
  .identity-row { grid-template-columns:76px 36px 105px; height:78px; margin-bottom:4px; }
  .identity-asset { height:74px; border-radius:18px; }
  .identity-cross { font-size:2.6rem; }
  .landing-cluster h1 { font-size:clamp(1.7rem,4vw,2.5rem); }
  .landing-cluster > p { margin-top:4px; font-size:.75rem; }
  .prompt-card-grid { margin-top:14px; gap:9px; }
  .prompt-card { height:94px; padding:9px 10px; gap:4px; }
  .card-badge { width:23px; height:23px; border-radius:6px; font-size:.56rem; }
  .composer { min-height:78px; grid-template-columns:1fr 38px; grid-template-rows:1fr 22px; padding:8px 10px 0; }
  .composer > button { width:34px; height:34px; }
  .composer-tools { font-size:.56rem; gap:10px; }
  .composer-note { font-size:.5rem; }
  .engine-layout { grid-template-rows:58px minmax(0,1fr) 86px; gap:7px; }
  .engine-node { padding:7px 8px; }
  .engine-bottom { gap:7px; }
  .compact-card { padding:7px 8px; }
}

@media (max-width: 760px) {
  .app-viewport { padding:4px; }
  .page-face { border-radius:6px; }
  .top-strip { grid-template-columns:1fr auto 1fr; padding-inline:6px; }
  .top-label, .top-action { font-size:.48rem; letter-spacing:.12em; padding:4px 5px; }
  .chat-layout, .engine-layout { width:96vw; }
  .identity-row { grid-template-columns:68px 28px 88px; height:72px; gap:7px; }
  .identity-asset { height:66px; padding:5px; border-radius:15px; }
  .identity-cross { font-size:2rem; }
  .landing-cluster h1 { font-size:1.65rem; }
  .landing-cluster > p { font-size:.66rem; }
  .prompt-card-grid { gap:6px; margin-top:12px; }
  .prompt-card { height:102px; padding:8px; gap:4px; border-radius:10px; }
  .card-badge { width:21px; height:21px; border-radius:6px; font-size:.5rem; }
  .prompt-card strong { font-size:.63rem; }
  .prompt-card small { font-size:.51rem; }
  .composer-tools span:nth-child(2), .composer-tools span:nth-child(3) { display:none; }
  .legal-strip { font-size:.42rem; gap:6px; padding-inline:4px; }
  .engine-heading { grid-template-columns:1fr; gap:2px; }
  .engine-heading p { justify-self:start; max-width:none; font-size:.58rem; }
  .engine-diagram { gap:5px; }
  .engine-node { padding:6px; border-radius:8px; }
  .engine-node strong { font-size:.56rem; }
  .engine-node small { display:none; }
  .engine-bottom { gap:5px; }
  .compact-card { padding:6px; border-radius:8px; }
  .compact-card strong { font-size:.55rem; }
  .compact-card p { font-size:.48rem; }
}

@media (prefers-reduced-motion: reduce) { .flip-stage, .prompt-card { transition:none; } }