/* Code mode: terminal grid drawn like the real agent CLIs */
.code-head { display: flex; align-items: center; gap: 16px; padding: 12px 18px; }
.code-badge { padding: 4px 12px; border-radius: 999px; background: #1c1c1c; color: var(--a-text-2); font-size: 13px; }
.lay { display: flex; gap: 2px; padding: 3px; margin-left: auto; border-radius: 10px; background: #161616; }
.lay span { width: 30px; padding: 3px 0; text-align: center; border-radius: 7px; color: var(--a-text-3); font-size: 13px; }
.lay .on { background: #2a2a2a; color: #fff; }
.code-head .a-btn { height: 30px; }
.code-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; padding: 12px; min-height: 0; }
.pane { display: flex; flex-direction: column; min-height: 0; min-width: 0; border-radius: 10px; background: #0c0c0c; overflow: hidden; }
.pane .ph { display: flex; align-items: center; gap: 9px; padding: 8px 12px; background: #141414; color: var(--a-heading); font-size: 13.5px; }
.pane .ph .mark { width: 16px; height: 16px; }
.pane .ph span { color: var(--a-text-3); font-size: 12.5px; }
.term { flex: 1; padding: 10px 14px; font: 12px/1.5 var(--a-mono); color: #d0d0d0; overflow: hidden; }
.ln { white-space: pre; animation: chipIn 0.2s var(--ease); }
.term i { font-style: normal; }
.term b { font-weight: 400; }
.term .d { color: #6d6d6d; }
.term .w { color: #f0f0f0; font-weight: 500; }
.term .c { color: #d97757; }
.term .ok { color: var(--a-ok); }
.term .r { color: var(--a-danger); }
.term .g { color: #3ecf9e; }
.term .b { color: #6ea0ff; }
.term .p { color: #b48cff; }