levelcode/extensions/levelcode-ai/media/chat.html at 4ef3ee0bce1febd6e8e2a3f65fb5bbccf8dd4cb5 · levelcodeai/levelcode · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="__CSP__">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
  :root {
    color-scheme: light dark;
    --radius: 12px;
    --pill-radius: 999px;
    --border: var(--vscode-input-border, var(--vscode-panel-border, rgba(127,127,127,.28)));
    --muted: var(--vscode-descriptionForeground, rgba(127,127,127,.85));
    --field-bg: var(--vscode-input-background, rgba(127,127,127,.06));
    --accent: var(--vscode-focusBorder, #4c8dff);
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; padding: 0;
    font-family: var(--vscode-font-family);
    font-size: var(--vscode-font-size);
    color: var(--vscode-foreground);
    background: transparent;
    display: flex; flex-direction: column; height: 100vh;

    /* T7 (docs/CHAT-TYPOGRAPHY.md D9) — THE SHELL COLUMN. These three live on `body`, not on `#log`,
       because the measure is a property of the whole panel: the transcript, the composer and the status
       row are all children of `body`, and they have to resolve the SAME value or they cannot line up.
       Declared on `#log` (where T1 put them) only the transcript could see them, which is exactly how
       the composer ended up spanning the full panel while the prose sat in a 680px column. */
    --prose-max: 820px;
    /* The horizontal inset shared by the log's padding and the shell column's width, so the composer's
       left edge lands ON the prose's left edge at every width rather than only where the cap binds. */
    --shell-x: 12px;
    /* T2 (D2) — the READING type. `--vscode-font-size` is the size of menu labels and tree rows: right
       for chrome, wrong for three paragraphs of explanation. Message bodies alone get their own size
       and leading; every control around them keeps inheriting the workbench, so the panel still
       belongs to the editor. Both are overridable at runtime by the settings (D7).
       An OFFSET, not a flat 14px, so prose TRACKS the workbench instead of pinning against it. A flat
       value quietly inverts for anyone who raises the editor's UI font for accessibility: at a 18px
       workbench they would read 14px prose inside 18px chrome — the divergence D2 argues for, pointing
       the wrong way. At the default 13px this still resolves to 14px, so nothing moves for anyone who
       has not changed it. */
    --prose-size: calc(var(--vscode-font-size, 13px) + 1px);
    --prose-leading: 1.65;
  }
  @media (min-width: 760px) { body { --shell-x: 24px; } }

  /* Everything below the log shares the transcript's column: same width, same centre, same edges.
     Before this each one spanned the whole panel, so at editor width the composer was a 1600px box
     under a 680px conversation — the single thing that most made the panel look unlike the reference,
     where the input sits directly under the text it answers.
     `calc(100% - 2 * --shell-x)` rather than a bare `width: 100%` + margin: without it these boxes
     would out-dent the transcript by the log's padding in every panel narrower than the cap, which is
     most sidebars. Overlays are `position: fixed` and deliberately excluded. */
  #bgTasksBar, #ctxBar, #planBar, #reviewBar, #workbar, #composer, #status {
    width: calc(100% - 2 * var(--shell-x));
    max-width: var(--prose-max);
    margin-inline: auto;
  }
  /* Every element above is a bare id, so a LATER bare-id rule ties on specificity and wins. A
     `margin:` shorthand in one of those rules silently resets margin-inline to whatever its
     left/right slot says — which is how #ctxBar, #reviewBar and #bgTasksBar ended up flush against
     the window edge while the composer centred. Their own inset is redundant anyway: the width
     calc above already insets by --shell-x. Set margin-block in these rules, never margin.
     test/webviewCss.test.js pins this for the whole list. */

  #attachImg .ci { width: 14px; height: 14px; display: block; }
  #attachImg.atcap { opacity: .45; }

  /* An attachment problem, said where it happened. Sits under the chips so it reads as belonging to
     the thing that failed, and takes no space when there is nothing to say. */
  #imgnote {
    font-size: 11.5px; line-height: 1.45; padding: 5px 8px; margin: 2px 0 0;
    border-radius: 5px; color: var(--vscode-inputValidation-warningForeground, var(--vscode-foreground));
    background: var(--vscode-inputValidation-warningBackground, rgba(224,160,48,.14));
    border: 1px solid var(--vscode-inputValidation-warningBorder, rgba(224,160,48,.45));
  }
  #imgnote[hidden] { display: none; }

  /* The placeholder that stands in while a big screenshot is being decoded and resized. */
  .chip.imgchip.loading { opacity: .8; }
  .imgskel {
    width: 28px; height: 28px; border-radius: 3px;
    background: linear-gradient(90deg, rgba(127,127,127,.14) 25%, rgba(127,127,127,.30) 37%, rgba(127,127,127,.14) 63%);
    background-size: 300% 100%; animation: imgskel 1.1s ease-in-out infinite;
  }
  @keyframes imgskel { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
  @media (prefers-reduced-motion: reduce) { .imgskel { animation: none; } }

  /* What it will cost. Quiet, but present — this product bills credits per turn and an image is
     not a rounding error. */
  .chip.imgchip .imgcost {
    opacity: .55; margin-left: 5px; padding: 1px 4px; border-radius: 3px;
    background: rgba(127,127,127,.16); font-size: 10px;
  }
  .chip.imgchip .imgthumb { cursor: zoom-in; }

  /* Click a thumbnail (in the tray or the transcript) to see it full size. A 28px thumb cannot tell
     you WHICH screenshot you attached, and that is the one thing you want to check before sending. */
  #imgzoom {
    position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.72); cursor: zoom-out; padding: 32px;
  }
  #imgzoom[hidden] { display: none; }
  #imgzoom img { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 8px 40px rgba(0,0,0,.5); }
  #attachImg { display: inline-flex; align-items: center; justify-content: center; }

  /* ---- attached images ---- */
  /* The chip carries its own thumbnail: an attachment you cannot see is one you cannot check before
     sending, and a screenshot is the one attachment where the wrong one looks exactly like the right
     one in a filename. */
  .chip.imgchip { padding: 2px 6px 2px 2px; gap: 6px; align-items: center; }
  .chip.imgchip .imgthumb {
    width: 28px; height: 28px; object-fit: cover; border-radius: 3px;
    display: block; background: rgba(127,127,127,.18);
  }
  .chip.imgchip .imgmeta { font-variant-numeric: tabular-nums; opacity: .75; }
  /* A bigger, more findable remove target than the text chips carry. Two reasons it can be:
     the image chip is twice the height of a text chip, so 22px fits without changing the row; and
     removing the WRONG attachment is cheap to undo on a file pin and annoying on a screenshot you
     have to go and take again. Resting opacity is higher too — an affordance you have to hunt for
     reads as one that is not there. */
  .chip.imgchip .imgx {
    width: 22px; height: 22px; font-size: 15px; line-height: 1;
    opacity: .75; margin-left: 3px;
  }
  .chip.imgchip .imgx:hover { opacity: 1; background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.45)); }
  .chip.imgchip .imgx:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; opacity: 1; }
  .msgimg {
    display: block; max-width: min(320px, 100%); max-height: 240px; width: auto; height: auto; cursor: zoom-in;
    border-radius: 6px; border: 1px solid var(--border); margin: 0 0 8px;
  }
  /* Whole-panel drop target: the transcript is a far bigger target than the composer, and someone
     dragging a screenshot aims at the conversation. */
  body.dropping::after {
    content: ''; position: fixed; inset: 6px; border: 2px dashed var(--accent);
    border-radius: 10px; pointer-events: none; z-index: 40;
  }

  /* ---- conversation log ---- */
  /* The measure, the type and the inset are all declared on `body` (see above) so the composer and the
     status row resolve the same values the transcript does. `--shell-x` is the log's horizontal padding
     AND the shell column's inset, which is what keeps the two edges on the same line. */
  #log { flex: 1; overflow-y: auto; padding: 12px var(--shell-x); display: flex; flex-direction: column; gap: 12px; }
  /* Log is a flex column → children default to flex-shrink:1. Any child with overflow:hidden (e.g. the
     approval/edit cards) then gets an auto min-size of 0 and the flex algorithm crushes it to an invisible
     line once the log overflows. Pin every child to its natural height; the log itself scrolls instead. */
  #log > * { flex-shrink: 0; }
  /* THE MEASURE. Nothing constrained the transcript's line length before this: the 12 max-width rules
     in this file are all cards, dialogs and the empty state. In a 380px sidebar the container bounded
     it, so it never looked wrong — but the chat can now open as an editor tab (AI: Open Chat in
     Editor), and at 900px the same CSS produced ~154-character lines.
     The cap itself is `--prose-max`, declared on `body`, and is deliberately NOT restated here. This
     comment carried its own copy of the number and said 680 for exactly as long as it took the cap to
     become 820 — which is what a second copy of a value is always for. docs/CHAT-TYPOGRAPHY.md D1 has
     how it was chosen; webviewCss.test.js fails if this comment starts quoting a length again.
     NOT expressed in `ch`: `0` measures 8.13px against an average prose character of 5.86px, so a
     `ch` cap silently overshoots by about a third. Those two figures stay because they are facts about
     the typeface, not a decision that can be revised.
     Applied to EVERY direct child, not just .msg, so messages, cards and the activity timeline share
     one column instead of drifting apart at width. Below the cap this is inert — which is why the
     sidebar is untouched. */
  #log > * { width: 100%; max-width: var(--prose-max); margin-inline: auto; box-sizing: border-box; }
  /* ---- per-response copy button (hover-reveal under a completed assistant message) ---- */
  .msgactions { margin-top: 5px; display: flex; gap: 6px; }
  .msgcopy {
    opacity: 0; transition: opacity .12s, color .12s, background .12s;
    cursor: pointer; border: 1px solid var(--border); border-radius: 6px;
    background: transparent; color: var(--muted);
    font-size: 11px; line-height: 1.4; padding: 2px 8px;
  }
  .msg:hover .msgcopy, .msgcopy:focus-visible, .msgcopy.done { opacity: .8; }
  .msgcopy:hover { opacity: 1; color: var(--vscode-foreground); background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.18)); }
  .msgcopy.done { color: var(--vscode-gitDecoration-addedResourceForeground, #73c991); border-color: var(--vscode-gitDecoration-addedResourceForeground, #73c991); }
  /* per-turn workspace-checkpoint Restore control (hover-revealed on the user message) */
  .ckwrap { margin-top: 6px; }
  .ckrestore { opacity: .62; cursor: pointer; border: 1px solid var(--border); border-radius: 6px; padding: 3px 9px; font-size: 11px; display: inline-flex; align-items: center; gap: 5px; background: transparent; color: var(--muted); transition: opacity .12s, color .12s, background .12s; }
  .msg.user:hover .ckrestore, .ckrestore:focus-visible { opacity: .9; }
  .ckrestore:hover { opacity: 1; color: var(--vscode-foreground); background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.18)); }
  .ckrestore .ckn { color: var(--muted); }
  .ckrestore svg, .ckmuted svg { width: 1em; height: 1em; }
  .ckconfirm { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .ckconfirm button { cursor: pointer; border: 1px solid var(--border); border-radius: 5px; padding: 2px 9px; font-size: 11px; color: var(--vscode-foreground); background: transparent; }
  .ckconfirm .ckyes { background: var(--vscode-button-background); color: var(--vscode-button-foreground); border-color: transparent; }
  .ckconfirm .ckyes:hover { background: var(--vscode-button-hoverBackground); }
  .ckconfirm .ckno:hover { background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.18)); }
  .ckmuted { font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
  .ckdivider { text-align: center; font-size: 11px; color: var(--muted); margin: 8px 0; opacity: .85; }
  /* /skills command — list of available skills */
  .skhead { color: var(--muted); font-size: 12px; line-height: 1.5; }
  .sklist { display: flex; flex-direction: column; gap: 7px; margin-top: 8px; }
  .skrow { border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; }
  .skname { display: block; font-weight: 600; font-family: var(--vscode-editor-font-family, monospace); color: var(--vscode-foreground); }
  .skdesc { display: block; color: var(--muted); font-size: 12px; margin-top: 3px; line-height: 1.45; }
  /* /mcp command — configured servers, their state, and what they would run */
  .mcprow { border: 1px solid var(--border); border-radius: 7px; padding: 8px 10px; }
  .mcptop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .mcptop .skname { display: inline; }
  .mcpstate { font-size: 11px; padding: 1px 6px; border-radius: 999px; border: 1px solid var(--border); }
  .mcpstate.ok { color: var(--ok, #98c379); border-color: color-mix(in srgb, var(--ok, #98c379) 45%, transparent); }
  .mcpstate.warn { color: #d19a66; border-color: color-mix(in srgb, #d19a66 45%, transparent); }
  .mcpstate.off { color: var(--muted); }
  .mcpsrc { font-size: 11px; color: var(--muted); margin-left: auto; }
  /* The command is the security-relevant line, so it is monospaced and wraps rather than truncating —
     an elided command line is exactly the part a reader needs whole. */
  .mcpcmd {
    font-family: var(--vscode-editor-font-family, monospace); font-size: 11.5px;
    color: var(--muted); margin-top: 4px; overflow-wrap: anywhere; white-space: pre-wrap;
  }
  .mcptools { margin-top: 5px; display: flex; flex-wrap: wrap; gap: 4px; }
  .mcptools code { font-size: 11px; opacity: .85; }
  .mcpproblem { font-size: 12px; margin-top: 7px; line-height: 1.45; }
  .mcpproblem.warn { color: #d19a66; }
  .mcpproblem.bad { color: var(--vscode-errorForeground, #e06c75); }
  /* ---- jump-to-latest affordance (shown only when auto-scroll is paused) ---- */
  #jumpLatest {
    position: fixed; right: 16px; bottom: 96px; z-index: 20;
    width: 30px; height: 30px; display: none;
    align-items: center; justify-content: center; cursor: pointer;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--vscode-editorWidget-background, #21252b);
    color: var(--vscode-foreground); opacity: .92;
    box-shadow: 0 2px 8px rgba(0,0,0,.28);
    font-size: 15px; line-height: 1; padding: 0;
  }
  #jumpLatest.show { display: inline-flex; }
  #jumpLatest:hover { opacity: 1; background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.25)); }
  .msg { white-space: normal; word-wrap: break-word; line-height: 1.5; }
  /* Scoped to .body, NOT .msg: the role label, the copy button and the checkpoint control are chrome
     and stay at the workbench size. This is also what makes T1's em-based rhythm scale — those margins
     resolve against THIS size, so raising the type opens the spacing with it. */
  .msg .body { font-size: var(--prose-size); line-height: var(--prose-leading); }
  /* T4 (docs/CHAT-TYPOGRAPHY.md D6) — speakers are told apart by TREATMENT, not by a label over each
     one. Your turn is a tinted, bordered bubble; the assistant's is unadorned prose. The shape of the
     message already says who is speaking, so `YOU` / `LEVELCODE AI` above it was a line of chrome
     restating it — on every message, in the surface you spend the most time reading.

     HIDDEN, NOT DELETED. The bubble is a purely visual cue: delete the label and a screen reader loses
     the only thing in the document that names the speaker, turning the transcript into an unattributed
     wall of text. So the element stays in the accessibility tree and leaves the visual layer. This is
     why the rule below must never be "simplified" to `display: none` or `visibility: hidden` — both
     take it out of the a11y tree too, which is the whole thing we are preserving. webviewCss.test.js
     fails on either. */
  .msg .role {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  /* a quiet remind-me line: a soft accent rule, small label, the words in a calm serif italic */
  .rme { margin: 0 4px; padding: 10px 0 10px 14px; border-left: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); }
  .rme .rme-tag { display: flex; align-items: center; gap: 6px; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 5px; }
  .rme .rme-tag .ci { width: 12px; height: 12px; }
  .rme .rme-body { font-family: Georgia, 'Times New Roman', ui-serif, serif; font-style: italic; font-size: 14.5px; line-height: 1.6; color: var(--vscode-foreground); }
  /* continuation narration: no second speaker label, and pulled up against the 12px log gap so the
     prose reads as one voice continuing rather than a fresh announcement */
  .msg.cont { margin-top: -5px; }
  /* T4 — the label was also doing spacing work, and dropping it is what makes that visible: ~19px sat
     above every turn (11px label + its 4px margin). Take it away and a new turn is separated from a
     continuation only by 12px versus 7px, which is not a difference you can see — the transcript
     collapses into one undifferentiated column, which is the opposite of the point.
     So a turn start buys part of that height back. In `em`, so it tracks T2's prose size rather than
     drifting when someone sets chat.fontSize. `#empty` is REMOVED rather than hidden when the first
     message lands (clearEmpty), so :first-child does match the first turn and the transcript does not
     open with a stray gap. */
  #log > .msg:not(.cont) { margin-top: .5em; }
  #log > .msg:first-child { margin-top: 0; }
  /* rendered-markdown block elements inside a message body */
  .msg .body p { margin: 0 0 8px; }
  .msg .body ul, .msg .body ol { margin: 0 0 8px; padding-left: 22px; }
  .msg .body li { margin: 2px 0; }
  .msg .body li > ul, .msg .body li > ol { margin: 2px 0; }
  .msg .body h1, .msg .body h2, .msg .body h3, .msg .body h4, .msg .body h5, .msg .body h6 { margin: 12px 0 6px; line-height: 1.3; font-weight: 600; }
  /* D4 — the old 1.3/1.18/1.07 put 0.11em between h2 and h3: at 13px that is 1.4px, so three levels of
     hierarchy were indistinguishable without selecting the text. */
  .msg .body h1 { font-size: 1.45em; } .msg .body h2 { font-size: 1.25em; } .msg .body h3 { font-size: 1.1em; }

  /* T1 (D3) — vertical rhythm, in `em` so it scales when T2 raises the prose size, and gated to the
     width where the chat is actually being READ. The sidebar keeps today's density on purpose: this
     slice's exit criterion is that a narrow panel renders unchanged, so a user who upgrades and never
     opens the editor tab sees nothing move. `min-width` here is the WEBVIEW's own width — the iframe
     is sized to the panel, which is why the existing #empty/dialog rules already use vw/vh. */
  @media (min-width: 760px) {
    #log { padding: 20px var(--shell-x); gap: 1.15em; }
    .msg .body p { margin-bottom: 1em; }
    .msg .body ul, .msg .body ol { margin-bottom: 1em; }
    /* More space ABOVE a heading than below it, so it binds to the section it introduces rather than
       floating between two. The old 12px/6px was already this shape; this keeps it and scales it. */
    .msg .body h1, .msg .body h2, .msg .body h3,
    .msg .body h4, .msg .body h5, .msg .body h6 { margin: 1.6em 0 .55em; }
    .msg .body > :first-child { margin-top: 0; }
    /* T3 (docs/CHAT-TYPOGRAPHY.md D5) — prose code blocks get room, and their vertical margin joins the
       same em rhythm as a paragraph so raising the prose size opens them with it.

       SCOPED TO `.msg .body pre`, NOT bare `pre`. That selector also draws the empty state's ASCII
       logo, the MCP approval card's command block and the terminal output pane — chrome with its own
       density, and only the logo has no padding override of its own, so a global change would quietly
       move it. This is the T2 mistake (`.msg` vs `.msg .body`) waiting in a new place.

       Gated to reading width for the same reason D3 is: a 380px sidebar is deliberately dense, and
       spending 6 more pixels a side on padding there costs content width the panel does not have. */
    .msg .body pre { padding: 12px 14px; margin: 1em 0; }
  }
  .msg .body h4, .msg .body h5, .msg .body h6 { font-size: 1em; }
  .msg .body blockquote { margin: 0 0 8px; padding: 2px 0 2px 12px; border-left: 3px solid var(--border); color: var(--muted); }
  .msg .body hr { border: none; border-top: 1px solid var(--border); margin: 12px 0; }
  .msg .body a { color: var(--accent); text-decoration: none; }
  .msg .body a:hover { text-decoration: underline; }
  .msg .body table { border-collapse: collapse; margin: 0 0 8px; display: block; overflow-x: auto; font-size: .95em; }
  .msg .body th, .msg .body td { border: 1px solid var(--border); padding: 4px 9px; text-align: left; }
  .msg .body th { background: var(--vscode-editorWidget-background, rgba(127,127,127,.1)); font-weight: 600; }
  .msg .body del { opacity: .65; }
  /* clickable file chips (mentions of real project files) */
  /* vertical-align: middle centres the pill on the text's midline; the old -2px + line-height 1.7
     dropped it below the baseline and inflated the line box, so it read as sitting too low. */
  .filechip { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; margin: 0 1px; padding: 0 6px 0 3px; border: 1px solid var(--border); border-radius: 5px; background: var(--vscode-editorWidget-background, rgba(127,127,127,.1)); cursor: pointer; font-size: .92em; line-height: 1.2; }
  .filechip:hover { border-color: var(--accent); background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.2)); }
  .filechip .fcname { color: var(--accent); }
  .filechip:hover .fcname { text-decoration: underline; }
  .filechip:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
  .ficon { font-size: 8.5px; font-weight: 700; line-height: 1; padding: 1px 3px; border-radius: 3px; letter-spacing: .02em; color: #1f1f1f; background: #9aa0a6; }
  .ficon-js, .ficon-mjs, .ficon-cjs, .ficon-jsx { background: #f0db4f; color: #323330; }
  .ficon-ts, .ficon-tsx { background: #3178c6; color: #fff; }
  .ficon-css, .ficon-scss { background: #2965f1; color: #fff; }
  .ficon-html, .ficon-htm { background: #e34c26; color: #fff; }
  .ficon-md { background: #519aba; color: #fff; }
  .ficon-json, .ficon-yml, .ficon-yaml { background: #cbcb41; color: #323330; }
  .ficon-py { background: #3572a5; color: #fff; }
  .ficon-rb { background: #cc342d; color: #fff; }
  /* HTML files wear the HTML5 shield itself, not a text pill — so no pill chrome, just the mark */
  .ficon.fhtml5 { background: none; padding: 0; border-radius: 0; display: inline-flex; }
  .ficon.fhtml5 svg { display: block; width: 14px; height: 14px; }
  .msg .body > div > :last-child, .msg .body > p:last-child, .msg .body > ul:last-child, .msg .body > ol:last-child { margin-bottom: 0; }
  .msg.user .body { background: var(--field-bg); border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; }
  .msg.assistant .body { padding: 1px 2px; }
  /* T6 (docs/CHAT-TYPOGRAPHY.md D8) — your turn sits RIGHT, the assistant's stays LEFT.
     This is what T4 was missing. T4 dropped the labels and left the bubble carrying the speaker
     distinction alone — but the bubble is `--field-bg`, which is near-invisible in some themes, so on
     a low-contrast theme the transcript could read as one undifferentiated voice. Side is unmissable
     in every theme, at every contrast, and costs no chrome at all.

     The bubble HUGS its content rather than filling the column, so "Yes" is a short bubble and a
     pasted stack trace is a wide one — the shape of a turn now carries information the label used to
     spell out. Capped at 85%: at 100% a long question fills the column, reads as a full-width block
     again, and the side cue disappears exactly when the transcript is densest.

     `align-items`, NOT `text-align`: the bubble is the thing being placed, so the prose inside it
     stays left-aligned — right-aligned body text is unreadable past one line. `.ckwrap` rides along
     to the right edge, which is correct: the checkpoint control belongs to the turn it restores.
     `width: fit-content` is what `align-items: flex-end` already implies; it is stated so that
     changing the alignment later cannot silently stretch the bubble back to full width. */
  .msg.user { display: flex; flex-direction: column; align-items: flex-end; }
  .msg.user .body { width: fit-content; max-width: 85%; }
  .err { color: var(--vscode-errorForeground); }
  /* free-tier cap reached → a compelling upgrade CTA instead of raw 402 error text */
  .upgradecard { border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 12px; margin: 8px 2px; padding: 13px 15px 14px; background: color-mix(in srgb, var(--accent) 9%, var(--field-bg)); }
  .upgradecard .uchead { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
  .upgradecard .uchead .ci { width: 15px; height: 15px; color: var(--accent); }
  .upgradecard .ucbody { font-size: 12.5px; line-height: 1.55; opacity: .92; margin-bottom: 12px; }
  .upgradecard .ucbtns { display: flex; gap: 8px; flex-wrap: wrap; }
  .upgradecard .ucbtn { cursor: pointer; border: none; border-radius: 7px; padding: 7px 16px; font-size: 12px; font-weight: 500; }
  .upgradecard .ucbtn.primary { background: var(--accent); color: var(--vscode-button-foreground, #fff); }
  .upgradecard .ucbtn.primary:hover { filter: brightness(1.1); }
  .upgradecard .ucbtn.ghost { background: transparent; border: 1px solid var(--border); color: var(--vscode-foreground); }
  .upgradecard .ucbtn.ghost:hover { background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.14)); }
  /* session expired — the upgrade card's shape, because it too ends in one button the user wants to press */
  .sessioncard .uchead .ci { color: var(--accent); }
  /* our-side outage notice — neutral, NO accent, NO CTA (it is not the user's account/usage) */
  .noticecard { border: 1px solid var(--border); border-radius: 12px; margin: 8px 2px; padding: 13px 15px 14px; background: var(--field-bg); }
  .noticecard .uchead { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
  .noticecard .uchead .ci { width: 15px; height: 15px; color: var(--vscode-editorWarning-foreground, #e0a030); }
  .noticecard .ucbody { font-size: 12.5px; line-height: 1.55; opacity: .92; }
  pre { background: var(--vscode-editor-background, #282c34); border: 1px solid var(--border); padding: 9px 11px; border-radius: 8px; overflow-x: auto; margin: 8px 0; min-height: 1.3em; color: var(--vscode-editor-foreground, var(--vscode-foreground)); }
  pre code { background: none; padding: 0; }
  code { font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: .92em; }
  :not(pre) > code { background: var(--vscode-textCodeBlock-background, rgba(127,127,127,.16)); padding: 1px 5px; border-radius: 4px; }
  /* Lightweight syntax highlighting — matched to the LevelCode One Dark palette (One Light via body.vscode-light). */
  .tok-cm { color: #5c6370; font-style: italic; }
  .tok-str { color: #98c379; }
  .tok-num { color: #d19a66; }
  .tok-kw { color: #c678dd; }
  .tok-fn { color: #61afef; }
  .tok-cn { color: #e5c07b; }
  body.vscode-light .tok-cm { color: #a0a1a7; }
  body.vscode-light .tok-str { color: #50a14f; }
  body.vscode-light .tok-num { color: #986801; }
  body.vscode-light .tok-kw { color: #a626a4; }
  body.vscode-light .tok-fn { color: #4078f2; }
  body.vscode-light .tok-cn { color: #c18401; }
  .pill#mode.agent { background: var(--accent); color: #fff; }
  .pill#mode.agent .mono { opacity: .85; }
  .agentline { font-size: 12px; opacity: .8; margin: 1px 2px; display: flex; gap: 6px; align-items: baseline; }
  .agentline .ic { flex: 0 0 auto; }
  .agentline .t { font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .agentstatus { font-size: 12px; margin: 5px 2px; opacity: .9; display: flex; gap: 7px; align-items: center; font-style: italic; }
  .agentstatus .spin { display: inline-block; font-style: normal; animation: spin .8s linear infinite; }
  @keyframes spin { to { transform: rotate(360deg); } }
  /* persistent working indicator above the composer — visible the whole time the agent runs */
  #workbar { display: flex; align-items: center; gap: 8px; padding: 5px 4px 7px; }
  #workbar[hidden] { display: none; }
  #workbar .wspin { display: inline-flex; flex: 0 0 auto; }
  #workbar .wspin .lc-spin { width: 18px; height: 18px; }
  #workbar .wtext { font-size: 12px; }
  /* shimmering "glance" text while the agent is working (Cursor/Claude-Code style sweep) */
  .shimmer {
    background: linear-gradient(90deg, var(--muted) 0%, var(--muted) 38%, var(--vscode-foreground) 50%, var(--muted) 62%, var(--muted) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    animation: shimmer 1.8s linear infinite;
  }
  @keyframes shimmer { 0% { background-position: 160% 0; } 100% { background-position: -160% 0; } }
  @media (prefers-reduced-motion: reduce) { .shimmer { animation: none; color: var(--muted); -webkit-text-fill-color: var(--muted); } }
  .agentdone { font-size: 12px; margin: 4px 2px 2px; opacity: .8; font-weight: 600; }
  /* "step limit reached" → offer to continue */
  .continuecard { display: flex; align-items: center; gap: 10px; margin: 2px 2px 8px; padding: 10px 12px; border-radius: 9px;
    border: 1px solid color-mix(in srgb, var(--vscode-editorWarning-foreground, #e0a030) 38%, var(--border));
    background: var(--vscode-editorWidget-background, rgba(127,127,127,.08)); font-size: 12px; }
  .continuecard .cctext { flex: 1 1 auto; color: var(--muted); line-height: 1.5; display: flex; gap: 7px; align-items: flex-start; }
  .continuecard .cctext .ci { width: 1em; height: 1em; color: var(--vscode-editorWarning-foreground, #e0a030); margin-top: 1px; flex: 0 0 auto; }
  .continuecard .cctext b { color: var(--vscode-foreground); font-weight: 600; }
  .continuecard .ccbtn { flex: 0 0 auto; cursor: pointer; border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 500;
    display: inline-flex; align-items: center; gap: 5px; background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
  .continuecard .ccbtn:hover { background: var(--vscode-button-hoverBackground); }
  .continuecard .ccbtn[disabled] { opacity: .6; cursor: default; }
  .continuecard .ccbtn svg { width: 13px; height: 13px; }
  /* response action bar: (retry)(copy)(helpful)(unhelpful) … model · credits */
  .agentbar { display: flex; align-items: center; gap: 8px; margin: 6px 2px 2px; }
  .agentbar-actions { display: flex; align-items: center; gap: 2px; }
  .agentbar .abicon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0; border: none; border-radius: 6px; cursor: pointer; background: transparent; color: var(--muted); transition: color .12s, background .12s; }
  .agentbar .abicon svg { width: 15px; height: 15px; display: block; }
  .agentbar .abicon:hover { color: var(--vscode-foreground); background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.16)); }
  .agentbar .abicon.ok { color: var(--vscode-gitDecoration-addedResourceForeground, #73c991); }
  .agentbar .abicon.up.active { color: var(--vscode-gitDecoration-addedResourceForeground, #73c991); background: rgba(115, 201, 145, 0.18); }
  .agentbar .abicon.down.active { color: var(--vscode-errorForeground, #f14c4c); background: rgba(241, 76, 76, 0.18); }
  .agentbar .abicon.up.active:hover { background: rgba(115, 201, 145, 0.26); }
  .agentbar .abicon.down.active:hover { background: rgba(241, 76, 76, 0.26); }
  .agentbar-meta { margin-left: auto; display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); }
  .agentbar-meta .abhint { opacity: .85; margin-right: 3px; }
  .agentbar-meta .abmodel { cursor: pointer; }
  .agentbar-meta .abmodel:hover { color: var(--vscode-foreground); text-decoration: underline; }
  .approval { border: 1px solid var(--border); border-radius: 10px; margin: 6px 2px; overflow: hidden; background: var(--field-bg); display: flex; flex-direction: column; max-height: 70vh; }
  .approval .ahead { flex: 0 0 auto; padding: 7px 10px; font-size: 12px; border-bottom: 1px solid var(--border); }
  .approval .ahead code { background: var(--vscode-textCodeBlock-background, rgba(127,127,127,.18)); padding: 1px 5px; border-radius: 4px; }
  .approval .cmd { margin: 8px 10px; padding: 7px 9px; border-radius: 6px; background: var(--vscode-textCodeBlock-background, rgba(127,127,127,.15)); overflow-x: auto; }
  .approval .why { padding: 0 10px 8px; font-size: 11px; opacity: .7; }
  .approval .abtns { flex: 0 0 auto; display: flex; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); background: var(--field-bg); }
  .approval .abtns button { cursor: pointer; border: none; border-radius: 6px; padding: 5px 14px; font-size: 12px; }
  .approval .abtns .approve { background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
  .approval .abtns .approve:hover { background: var(--vscode-button-hoverBackground); }
  .approval .abtns .skip { background: var(--vscode-button-secondaryBackground, rgba(127,127,127,.25)); color: var(--vscode-button-secondaryForeground, var(--vscode-foreground)); }
  .approval .verdict { font-size: 12px; opacity: .8; }

  /* run_command approval styled as a real terminal window (uses VS Code terminal theme colors) */
  .approval.term { display: block; max-height: none; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--vscode-terminal-background, var(--vscode-editor-background, #1e1e1e)); font-family: var(--vscode-editor-font-family, ui-monospace, SFMono-Regular, Menlo, monospace); }
  .term .termbar { display: flex; align-items: center; gap: 9px; padding: 6px 11px; background: var(--vscode-titleBar-activeBackground, rgba(127,127,127,.16)); border-bottom: 1px solid var(--border); }
  .term .tdots { display: inline-flex; gap: 6px; }
  .term .tdots i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
  .term .tdots .r { background: #ff5f56; } .term .tdots .y { background: #ffbd2e; } .term .tdots .g { background: #27c93f; }
  .term .tbartitle { font-size: 11px; color: var(--muted); letter-spacing: .02em; }
  .term .termbody { padding: 12px 14px; color: var(--vscode-terminal-foreground, var(--vscode-foreground)); font-size: 12.5px; line-height: 1.65; }
  .term .termline { white-space: pre-wrap; word-break: break-word; }
  .term .tprompt { color: var(--vscode-terminal-ansiBrightGreen, var(--vscode-terminal-ansiGreen, #7ee787)); font-weight: 700; }
  .term .tcwd { color: var(--vscode-terminal-ansiBrightCyan, var(--vscode-terminal-ansiCyan, #56b6c2)); margin: 0 7px 0 5px; }
  .term .tcmd { color: var(--vscode-terminal-foreground, var(--vscode-foreground)); }
  .term .tcaret { display: inline-block; width: 7px; height: 14px; margin-left: 3px; vertical-align: text-bottom; background: var(--vscode-terminalCursor-foreground, var(--vscode-terminal-foreground, #d4d4d4)); animation: termblink 1.05s steps(1) infinite; }
  @keyframes termblink { 50% { opacity: 0; } }
  .term .termwhy { color: var(--vscode-terminal-ansiBrightBlack, var(--muted)); font-size: 11.5px; margin-top: 7px; white-space: pre-wrap; word-break: break-word; }
  .term .termfoot { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border); background: var(--field-bg); }
  .term .termask { font-size: 11.5px; color: var(--muted); }
  .term .tspacer { flex: 1 1 auto; }
  .term .termfoot button { cursor: pointer; border: none; border-radius: 6px; padding: 5px 14px; font-size: 12px; }
  .term .termfoot .approve { background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
  .term .termfoot .approve:hover { background: var(--vscode-button-hoverBackground); }
  .term .termfoot .skip { background: var(--vscode-button-secondaryBackground, rgba(127,127,127,.25)); color: var(--vscode-button-secondaryForeground, var(--vscode-foreground)); }
  .term .verdict { font-size: 12px; color: var(--muted); }
  .term.ran .verdict { color: var(--vscode-terminal-ansiBrightGreen, var(--vscode-terminal-ansiGreen, #7ee787)); }
  /* live terminal output (streamed stdout/stderr) — flows under the prompt like a real terminal, no box */
  .termrun .termout { margin: 4px 0 0; padding: 0; border: none; border-radius: 0; background: none; min-height: 0;
    max-height: 320px; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
    font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 12.5px; line-height: 1.5;
    color: var(--vscode-terminal-foreground, var(--vscode-foreground)); }
  .termrun .termout:empty { display: none; margin: 0; }
  .termrun .termerr { color: var(--vscode-terminal-ansiRed, var(--vscode-errorForeground, #f14c4c)); }
  .termrun .termstatus { margin-top: 9px; font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; }
  .termrun .termstatus.ok { color: var(--vscode-terminal-ansiBrightGreen, var(--vscode-terminal-ansiGreen, #7ee787)); }
  .termrun .termstatus.bad { color: var(--vscode-errorForeground, #f14c4c); }
  .termrun .termstatus .ci { width: 1em; height: 1em; }
  .termrun .termstop { margin-left: auto; cursor: pointer; border: 1px solid var(--border); border-radius: 5px; padding: 2px 9px; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; background: var(--vscode-button-secondaryBackground, rgba(127,127,127,.22)); color: var(--vscode-foreground); }
  .termrun .termstop:hover { background: var(--vscode-errorForeground, #f14c4c); color: #fff; border-color: transparent; }
  .termrun .termstop[disabled] { opacity: .6; cursor: default; }
  .termrun .termstop .ci { width: 1em; height: 1em; }
  .verifyrun .tbartitle { color: var(--vscode-terminal-ansiCyan, var(--accent)); display: inline-flex; align-items: center; gap: 5px; }
  .verifyrun .tbartitle .ci { width: 1em; height: 1em; }

  /* ── Agent activity timeline — tool + command actions thread one rail (GitHub-commit style) ──
     Scope: only the tool/command nodes are threaded; free reasoning bubbles break the rail (intended). */
  .tl { display: flex; gap: 11px; margin: 0 4px; position: relative; }
  .tl-rail { flex: 0 0 22px; position: relative; }
  .tl-rail::before { content: ''; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; transform: translateX(-1px); background: var(--border); }
  /* Thread the rail across #log's flex-gap between CONSECUTIVE top-level rows, so a run of tool /
     approval / group nodes reads as ONE connected line (GitHub/Cursor/Claude-style) instead of the
     disconnected stubs a per-row rail otherwise leaves — this is what made an MCP run (approval →
     tool → approval → tool …) look "cut in the middle". A narration bubble between two rows still
     breaks the rail (intended — a new train of thought). The -12px MUST equal #log's `gap`; it is
     scoped to #log's DIRECT children so group members (nested .tl rows inside a .groupbody, already
     contiguous within their own rail) are never touched. */
  #log > .tl + .tl > .tl-rail::before { top: -12px; }
  .tl-node { position: absolute; left: 0; top: 3px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--vscode-editor-background, var(--field-bg)); border: 1.5px solid var(--border); color: var(--muted); z-index: 1; }
  .tl-node .ci { width: 12px; height: 12px; }
  .tl-body { flex: 1 1 auto; min-width: 0; padding: 3px 0 8px; }
  /* light tool action (read / edit / search …) — a one-liner node */
  .tl-tool .tl-body { padding: 4px 0 6px; }
  /* UI font, not the editor font: these rows carry the model's own sentence ("Understand how levels
     are authored"), and monospace made prose read like a command line. */
  .tl-tool .toolt { display: block; font-size: 12px; color: var(--muted); line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* heavier command action — collapsible boxed card: header (chevron · verb · chips · state)
     → highlighted command → streamed output → status foot → italic why */
  .tl-cmd .tl-node { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 55%, transparent); background: color-mix(in srgb, var(--accent) 12%, var(--vscode-editor-background, var(--field-bg))); }
  .tl-cmd.running .tl-node { animation: nodepulse 2s ease-out infinite; }
  /* A FINISHED group's node stops shouting: the accent fill was the "running" identity. Success
     speaks the same quiet green as every other done tick (Kept, verified, command-ok); failure
     takes the error colour. The ring goes neutral either way — no coloured circle competing with
     the check inside it. */
  /* the finished node's glyph (check-circle / circle-slash) brings its OWN ring, so drop the node's
     border to avoid a double ring. The background stays to mask the rail line behind the node, and
     the glyph grows to fill it. */
  .tl-group.gok .tl-node { color: var(--vscode-terminal-ansiBrightGreen, #4ec97a); border-color: transparent; background: var(--vscode-editor-background, var(--field-bg)); }
  .tl-group.gfailed .tl-node { color: var(--vscode-errorForeground, #f14c4c); border-color: transparent; background: var(--vscode-editor-background, var(--field-bg)); }
  .tl-group.gok .tl-node .ci, .tl-group.gfailed .tl-node .ci { width: 18px; height: 18px; }
  @keyframes nodepulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 40%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
  .tl-cmd .cmdhead { display: flex; align-items: center; gap: 7px; min-width: 0; cursor: pointer; user-select: none; padding: 2px 0; }
  /* The chevron TRAILS what it discloses, matching the reference: "Ran 2 commands ⌄", not
     "⌄ Ran 2 commands". It hugs the label rather than right-aligning to the card edge — a
     disclosure control belongs next to the thing it opens, and a chevron alone at the far right of
     a wide row reads as unrelated chrome. */
  .tl-cmd .cmdchev { flex: 0 0 auto; display: inline-flex; color: var(--muted); margin-left: 1px; }
  .tl-cmd .cmdchev .ci { width: 11px; height: 11px; transition: transform .15s ease; }
  .tl-cmd.collapsed .cmdchev .ci { transform: rotate(-90deg); }
  .tl-cmd .cmdverb { flex: 0 0 auto; font-size: 12.5px; color: var(--vscode-foreground); }
  .tl-cmd .cmdhead:hover .cmdverb { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted); }
  .tl-cmd .cmdchips { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 5px; overflow: hidden; }
  .tl-cmd .cmdchips code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11px; line-height: 18px;
    padding: 0 7px; border: 1px solid var(--border); border-radius: 5px; background: var(--field-bg); color: var(--muted); }
  .tl-cmd .cmdchips code.more { flex: 0 0 auto; opacity: .75; }
  .tl-cmd .cmdstate { flex: 0 0 auto; display: inline-flex; color: var(--muted); }
  .tl-cmd .cmdstate .ci { width: 12px; height: 12px; }
  .tl-cmd .cmdstate.ok { color: var(--vscode-terminal-ansiBrightGreen, #4ec97a); }
  .tl-cmd .cmdstate.bad { color: var(--vscode-errorForeground, #f14c4c); }
  /* ── Grouped activity (calm transcript) — consecutive tool actions fold into ONE collapsible card.
     Open: the header shows the LIVE step (present-progressive) with a fixed vertical footprint; on
     close it flips to a past-tense aggregate ("Ran 2 commands, read and edited chat.html +56 -0").
     Members keep their own cards inside .groupbody; their rails hide so expanded rows read flat. */
  .tl-group .grouplabel { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--vscode-foreground); }
  .tl-group .grouphead:hover .grouplabel { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--muted); }
  .tl-group .groupcounts { flex: 0 0 auto; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11px; }
  .tl-group .groupcounts .a { color: var(--vscode-gitDecoration-addedResourceForeground, #4ec97a); }
  .tl-group .groupcounts .d { color: var(--vscode-gitDecoration-deletedResourceForeground, #e06c75); }
  .tl-group .groupstop { flex: 0 0 auto; display: inline-flex; align-items: center; border: none; background: none; color: var(--muted); cursor: pointer; padding: 2px; }
  /* an explicit display beats the UA's [hidden] rule, so .hidden = true is inert without this —
     same escape as #workbar[hidden] / .modemenu[hidden] above. A stop button that outlives its
     command is worse than no button: it offers to stop something that already finished. */
  .tl-group .groupstop[hidden] { display: none; }
  .tl-group .groupstop:hover { color: var(--vscode-errorForeground, #f14c4c); }
  .tl-group .groupstop .ci { width: 12px; height: 12px; }
  /* ── A group is a LINE OF TEXT, not a card on a rail ──────────────────────────────────────────
     The rail threads consecutive tool nodes into one connected line, which is right for loose
     nodes. A group is already one unit, so once its body became a bordered container the rail was
     a second grouping cue doing the same job — a circled glyph, a vertical line AND a box around
     three rows of grey text. That is what stopped reading as consistent with the prose around it.
     So for groups: no rail, no circled node, and the summary sits on the same left edge as the
     paragraph above it. The outcome moves into the line itself, quietly. */
  .tl-group > .tl-rail { display: none; }
  .tl-group { margin-left: 0; }
  .tl-group .grouphead { gap: 7px; padding: 2px 0; }
  /* Muted, like every other piece of secondary chrome — a finished group is history, not news. */
  .tl-group.gok .grouplabel { color: var(--muted); font-weight: 400; }
  .tl-group.gok .cmdchev { color: var(--muted); opacity: .8; }
  /* A failure still speaks up. */
  .tl-group.gfailed .grouplabel { color: var(--vscode-errorForeground, #f14c4c); }
  .tl-group .groupmark { flex: 0 0 auto; display: inline-flex; align-items: center; opacity: .75; }
  .tl-group .groupmark .ci, .tl-group .groupmark svg { width: 12px; height: 12px; }
  .tl-group.gok .groupmark { color: var(--vscode-gitDecoration-addedResourceForeground, #4ec97a); }
  .tl-group.gfailed .groupmark { color: var(--vscode-errorForeground, #f14c4c); }
  .tl-group.running .groupmark { display: none; }

  /* The expanded steps read as ONE unit. With the rail gone this is the only grouping cue, which
     is the point — one device, not three. */
  .tl-group .groupbody {
    padding: 0; margin: 6px 0 2px;
    border: 1px solid var(--border); border-radius: 8px;
    /* NO fill. A tinted block plus a border is two containers drawn on top of each other, and it is
       what made these rows read as a solid slab rather than as a list. The hairline does the work;
       the rows keep the page's own ground. */
    background: transparent;
    overflow: hidden;   /* so the first and last rows clip to the radius instead of squaring it off */
  }
  .tl-group .groupbody:empty { display: none; }
  /* Rows separate by hairline rather than by gap, and each one is INSET from the border. Text that
     starts a couple of pixels off the edge reads as overflowing its container even when it is not —
     the padding is what makes a bordered list look placed rather than crammed. */
  .tl-group .groupbody > .tl { padding: 3px 14px; }
  .tl-group .groupbody > .tl + .tl { border-top: 1px solid var(--line-soft, rgba(127,127,127,.16)); }
  .tl-group.collapsed .groupbody { display: none; }
  .tl-group .groupbody > .tl > .tl-rail { display: none; }
  .tl-group .groupbody > .tl { margin: 0; }
  /* A row inside the container is a single line, so it does not need the timeline's asymmetric
     bottom padding — that gap is there to separate free-standing nodes from the next one. */
  .tl-group .groupbody > .tl > .tl-body { padding: 4px 0; }
  /* The summary lines up with the rows below it rather than with the container edge, so the
     expanded state reads as one block instead of two things that happen to be stacked. */
  .tl-group .grouphead { padding-left: 0; }
  /* Copilot-style falling-dots progress — a 2×3 dot grid cascading downward while a command runs */
  .lcdots { display: inline-grid; grid-template-columns: repeat(2, 3px); gap: 2px; color: var(--accent); align-self: center; }
  .lcdots i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; animation: lcdotfall 1.1s ease-in-out infinite; }
  .lcdots i:nth-child(2) { animation-delay: .09s; }
  .lcdots i:nth-child(3) { animation-delay: .18s; }
  .lcdots i:nth-child(4) { animation-delay: .27s; }
  .lcdots i:nth-child(5) { animation-delay: .36s; }
  .lcdots i:nth-child(6) { animation-delay: .45s; }
  @keyframes lcdotfall { 0% { opacity: .15; transform: translateY(-1.5px); } 25%, 55% { opacity: 1; transform: translateY(0); } 85%, 100% { opacity: .15; transform: translateY(1.5px); } }
  @media (prefers-reduced-motion: reduce) { .lcdots i { animation: none; opacity: .7; } }
  .tl-cmd .cmdbox { margin-top: 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--field-bg); overflow: hidden; }
  .tl-cmd.collapsed .cmdbox, .tl-cmd.collapsed .cmdwhy { display: none; }
  .tl-cmd .cmdsrc { padding: 9px 12px; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 12px; line-height: 1.55;
    white-space: pre-wrap; word-break: break-word; color: var(--vscode-terminal-foreground, var(--vscode-foreground)); }
  /* shell syntax tints — VS Code terminal ANSI theme colors, so they follow light/dark */
  .tl-cmd .sh-c { color: var(--vscode-terminal-ansiBrightBlue, var(--vscode-terminal-ansiBlue, #4fc1ff)); font-weight: 600; }
  .tl-cmd .sh-f { color: var(--vscode-terminal-ansiBrightCyan, var(--vscode-terminal-ansiCyan, #56b6c2)); }
  .tl-cmd .sh-s { color: var(--vscode-terminal-ansiYellow, #ce9178); }
  .tl-cmd .sh-o { color: var(--vscode-terminal-ansiBrightRed, var(--vscode-terminal-ansiRed, #d16969)); }
  .tl-cmd .sh-v { color: var(--vscode-terminal-ansiBrightGreen, var(--vscode-terminal-ansiGreen, #4ec9b0)); }
  .tl-cmd .sh-k { color: var(--vscode-terminal-ansiBrightBlack, var(--muted)); font-style: italic; }
  .tl-cmd .termout { margin: 0; padding: 8px 12px; border: none; border-top: 1px solid var(--border); border-radius: 0;
    background: color-mix(in srgb, var(--vscode-editor-background, #1e1e1e) 55%, var(--field-bg));
    max-height: 300px; overflow: auto; white-space: pre-wrap; word-break: break-word;
    font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 12px; line-height: 1.5; color: var(--vscode-terminal-foreground, var(--vscode-foreground)); }
  .tl-cmd .termout:empty { display: none; }
  .tl-cmd .termerr { color: var(--vscode-terminal-ansiRed, var(--vscode-errorForeground, #f14c4c)); }
  .tl-cmd .cmdfoot { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-top: 1px solid var(--border); }
  .tl-cmd .termstatus { flex: 1 1 auto; font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
  .tl-cmd .termstatus.ok { color: var(--vscode-terminal-ansiBrightGreen, #4ec97a); }
  .tl-cmd .termstatus.bad { color: var(--vscode-errorForeground, #f14c4c); }
  .tl-cmd .termstatus .ci { width: 1em; height: 1em; }
  .tl-cmd .cmdmeta { flex: 0 0 auto; font-size: 10.5px; color: var(--muted); letter-spacing: .03em; opacity: .75; }
  .tl-cmd .termstop { flex: 0 0 auto; cursor: pointer; border: 1px solid var(--border); border-radius: 999px; padding: 2px 10px; font-size: 11px; display: inline-flex; align-items: center; gap: 4px; background: var(--vscode-button-secondaryBackground, rgba(127,127,127,.22)); color: var(--vscode-foreground); }
  .tl-cmd .termstop:hover { background: var(--vscode-errorForeground, #f14c4c); color: #fff; border-color: transparent; }
  .tl-cmd .termstop[disabled] { opacity: .6; cursor: default; }
  .tl-cmd .termstop .ci { width: 1em; height: 1em; }
  .tl-cmd .cmdwhy { margin-top: 8px; font-size: 11.5px; font-style: italic; color: var(--muted); white-space: pre-wrap; word-break: break-word; padding-left: 9px; border-left: 2px solid var(--border); }
  /* command-approval ask card — a permission dialog, not a timeline row: title · why · the command ·
     Skip/Run. This is the one card that stops and waits on you, so it gets real padding and a type
     hierarchy instead of the compact chip row every other .tl-cmd uses. Skip and Run sit at opposite
     ends: a decision you can't take back shouldn't share an edge with the one you can. It all lives
     inside .tl-body because deciding swaps that subtree for the one-line verdict. */
  .tl-ask .cmdhead { cursor: default; }
  .tl-ask .cmdhead:hover .cmdverb { text-decoration: none; }
  .tl-ask .cmdhead .cmdverb { font-weight: 600; }
  .tl-ask.asking .tl-node { animation: nodepulse 2s ease-out infinite; }
  .tl-ask .askcard { border: 1px solid var(--border); border-radius: var(--radius); background: var(--field-bg); padding: 12px 13px 11px; }
  .tl-ask.asking .askcard { border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); box-shadow: 0 1px 4px rgba(0,0,0,.07); }
  .tl-ask .asktitle { font-size: 13px; font-weight: 600; color: var(--vscode-foreground); }
  .tl-ask .asksub { margin-top: 3px; font-size: 11.5px; line-height: 1.5; color: var(--muted); white-space: pre-wrap; word-break: break-word; }
  /* recessed well for the command; capped so a long one can't push the buttons off-screen */
  .tl-ask .askcode { margin-top: 10px; border-radius: 8px; background: var(--vscode-textCodeBlock-background, rgba(127,127,127,.14)); max-height: 40vh; overflow: auto; }
  /* MCP call arguments — wrap rather than force horizontal scroll, and keep them monospace + tidy. */
  .tl-ask .mcpargs { margin: 0; padding: 9px 12px; white-space: pre-wrap; word-break: break-word; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 12px; line-height: 1.5; }
  .tl-ask .askbtns .mcp-always { margin-left: auto; }
  .tl-ask .askbtns { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 11px; }
  .tl-ask .askbtns button { cursor: pointer; border: 1px solid transparent; border-radius: 7px; padding: 5px 14px; font-size: 12px; font-weight: 500;
    display: inline-flex; align-items: baseline; gap: 6px; }   /* transparent border keeps both buttons the same height */
  .tl-ask .askbtns .approve { background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
  .tl-ask .askbtns .approve:hover { background: var(--vscode-button-hoverBackground); }
  .tl-ask .askbtns .skip { background: transparent; color: var(--vscode-foreground); border-color: var(--border); }
  /* toolbar-hoverBackground, NOT button-secondaryBackground: the latter is a dark slate in light
     themes because it is registered to pair with button.secondaryForeground (white), and this button
     keeps --vscode-foreground — the pair would put #616161 on #5F6A79 and the label would vanish. */
  .tl-ask .askbtns .skip:hover { background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.18)); }
  .tl-ask .askbtns button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .tl-ask .askbtns kbd { font-family: inherit; font-size: 10px; font-weight: 500; opacity: .55; }
  /* why autopilot stopped for this one (shown only on a flagged command) */
  .tl-ask .askdanger { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 11.5px; font-weight: 500;
    color: var(--vscode-editorWarning-foreground, #cca700); }
  .tl-ask .askdanger .ci { width: 13px; height: 13px; flex: 0 0 auto; }
  .tl-ask.skipped .tl-node { color: var(--muted); border-color: var(--border); background: var(--vscode-editor-background, var(--field-bg)); }
  .tl-ask.skipped .cmdstate.bad { color: var(--muted); }   /* skipped is a choice, not a failure — keep it neutral */
  @media (prefers-reduced-motion: reduce) { .tl-cmd.running .tl-node, .tl-ask.asking .tl-node { animation: none; } }

  /* ---- ask_user: clickable clarifying questions ---- */
  .questions { border: 1px solid var(--border); border-radius: 10px; margin: 6px 2px; padding: 10px 11px 11px; background: var(--field-bg); }
  .questions .qhead { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-bottom: 8px; cursor: pointer; user-select: none; }
  .questions .qhead .qtitle { flex: 1 1 auto; min-width: 0; }
  .questions .qtoggle { flex: 0 0 auto; display: inline-flex; align-items: center; padding: 1px; border-radius: 4px; opacity: .7; }
  .questions .qhead:hover .qtoggle { opacity: 1; }
  .questions .qtoggle .ci { transition: transform .15s ease; }
  .questions.collapsed .qtoggle .ci { transform: rotate(-90deg); }
  .questions.collapsed .qhead { margin-bottom: 0; }
  .questions.collapsed .qblock, .questions.collapsed .qnotes, .questions.collapsed .qbtns { display: none; }
  .questions .qblock { margin: 8px 0 10px; }
  .questions .qtag { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; opacity: .65; margin-bottom: 3px; }
  .questions .qtext { font-size: 12.5px; margin-bottom: 6px; }
  .questions .qopts { display: flex; flex-direction: column; gap: 5px; }
  .questions .qopt {
    display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: left; cursor: pointer;
    border: 1px solid var(--border); border-radius: 7px; padding: 7px 9px;
    background: var(--vscode-editorWidget-background, rgba(127,127,127,.08)); color: var(--vscode-foreground);
    font-size: 12px; line-height: 1.35; transition: border-color .12s, background .12s;
  }
  .questions .qopt:hover { border-color: var(--accent); background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.16)); }
  .questions .qopt.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
  .questions .qopt[disabled] { cursor: default; opacity: .9; }
  .questions .qopt[disabled]:not(.sel) { opacity: .45; }
  .questions .qnum {
    flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; margin-top: 1px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; background: rgba(127,127,127,.22); color: var(--vscode-foreground);
  }
  .questions .qopt.sel .qnum { background: var(--accent); color: var(--vscode-button-foreground, #fff); }
  .questions .qlabel { display: flex; flex-direction: column; gap: 1px; }
  .questions .qdesc { font-size: 11px; opacity: .65; }
  .questions .qnotes {
    width: 100%; box-sizing: border-box; margin-top: 6px; resize: vertical;
    background: var(--vscode-input-background, var(--field-bg)); color: var(--vscode-foreground);
    border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font-size: 12px; font-family: inherit;
  }
  .questions .qbtns { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
  .questions .qsend { cursor: pointer; border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
  .questions .qsend:hover { background: var(--vscode-button-hoverBackground); }
  .questions .qverdict { font-size: 12px; font-weight: 600; color: var(--vscode-gitDecoration-addedResourceForeground, #73c991); }
  .questions.answered { opacity: .92; }
  /* ---- one question at a time ----
     Several questions stacked in one card made it far too easy to answer the first, miss the rest
     and hit send. In wizard mode exactly one block is on screen and the send button only appears on
     the last one, so skipping a question has to be deliberate (the button says so). On submit the
     wizard class comes off and every question + answer is revealed as a permanent record. */
  .questions.wizard .qblock { display: none; }
  .questions.wizard .qblock.cur { display: block; }
  .questions.wizard .qnotes { display: none; }
  .questions.wizard.laststep .qnotes { display: block; }
  .questions .qstep { flex: 0 0 auto; font-size: 11px; font-weight: 600; opacity: .6; font-variant-numeric: tabular-nums; }
  .questions .qback { cursor: pointer; border: 1px solid var(--border); border-radius: 6px; padding: 5px 11px; font-size: 12px;
    background: transparent; color: var(--vscode-foreground); }
  .questions .qback:hover { background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.18)); }
  .questions .qback[hidden] { display: none; }      /* explicit display above would defeat [hidden] */
  /* nothing picked yet: the primary button steps down to a quiet "skip", so moving on is a choice */
  .questions .qsend.ghost { background: transparent; color: var(--muted); border: 1px solid var(--border); }
  .questions .qsend.ghost:hover { background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.18)); color: var(--vscode-foreground); }
  .questions .qspacer { flex: 1 1 auto; }
  /* Collapsing wins over the two rules above. `.questions.collapsed .qblock` is three classes and
     would lose to `.questions.wizard .qblock.cur`, so the current question would survive a collapse.
     These match at equal weight and come later, which settles it. */
  .questions.collapsed .qblock.cur, .questions.collapsed.laststep .qnotes { display: none; }

  /* ---- applied-edit review (apply-then-review) ---- */
  /* Sits between the message log and the composer — sticky review summary for applied edits. */
  #reviewBar {
    display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
    margin-block: 0 8px; padding: 7px 11px; font-size: 12px;
    background: var(--vscode-editorWidget-background, #21252b);
    border: 1px solid var(--border); border-radius: 8px;
  }
  #reviewBar .rcount { font-weight: 600; }
  #reviewBar .rstat { font-size: 11px; font-variant-numeric: tabular-nums; }
  #reviewBar .rstat .add { color: var(--vscode-gitDecoration-addedResourceForeground, #73c991); }
  #reviewBar .rstat .del { color: var(--vscode-gitDecoration-deletedResourceForeground, #f14c4c); margin-left: 5px; }
  #reviewBar .rspacer { flex: 1 1 auto; }
  #reviewBar button { cursor: pointer; border: none; border-radius: 6px; padding: 4px 12px; font-size: 12px; }
  #reviewBar .keepall { background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
  #reviewBar .keepall:hover { background: var(--vscode-button-hoverBackground); }
  #reviewBar .undoall { background: var(--vscode-button-secondaryBackground, rgba(127,127,127,.25)); color: var(--vscode-button-secondaryForeground, var(--vscode-foreground)); }
  .editcard { border: 1px solid var(--border); border-radius: 10px; margin: 6px 2px; overflow: hidden; background: var(--field-bg); }
  .editcard.resolved { opacity: .7; }
  .editcard .ahead { padding: 7px 10px; font-size: 12px; }
  .editcard .ahead code { background: var(--vscode-textCodeBlock-background, rgba(127,127,127,.18)); padding: 1px 5px; border-radius: 4px; }
  .editcard .counts { float: right; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11px; }
  .editcard .counts .a { color: var(--vscode-gitDecoration-addedResourceForeground, #4ec97a); } .editcard .counts .d { color: var(--vscode-gitDecoration-deletedResourceForeground, #e06c75); }
  .editcard .diffwrap { border-top: 1px solid var(--border); }
  .editcard .diffwrap > summary { cursor: pointer; font-size: 11px; opacity: .7; padding: 5px 10px; user-select: none; }
  .editcard .diffwrap .diff { max-height: 380px; overflow-y: scroll; scrollbar-gutter: stable; padding-bottom: 6px; }
  .editcard .diffempty { padding: 7px 12px; font-size: 11px; opacity: .6; font-style: italic; }
  .editcard .abtns { display: flex; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); }
  .editcard .abtns button { cursor: pointer; border: none; border-radius: 6px; padding: 5px 14px; font-size: 12px; }
  .editcard .abtns .keep { background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
  .editcard .abtns .keep:hover { background: var(--vscode-button-hoverBackground); }
  .editcard .abtns .undo { background: var(--vscode-button-secondaryBackground, rgba(127,127,127,.25)); color: var(--vscode-button-secondaryForeground, var(--vscode-foreground)); }
  .editcard .abtns .secondary2 { background: transparent; color: var(--muted); }
  .editcard .abtns .secondary2:hover { color: var(--vscode-foreground); }
  .editcard .verdict { font-size: 12px; opacity: .85; }
  .editcard.deletedcard { border-color: color-mix(in srgb, var(--vscode-gitDecoration-deletedResourceForeground, #e06c75) 42%, var(--border)); }
  .editcard.deletedcard .ahead { color: var(--vscode-gitDecoration-deletedResourceForeground, #e06c75); }
  .editcard.deletedcard .ahead code { color: var(--vscode-foreground); }

  /* ---- agent plan checklist ---- */
  /* context-window usage meter (appears >50%, warns >80%, critical >92%) */
  #ctxBar { flex: 0 0 auto; margin-block: 0 6px; padding: 7px 11px; border-radius: 8px; border: 1px solid var(--border); background: var(--vscode-editorWidget-background, rgba(127,127,127,.08)); font-size: 11px; }
  #ctxBar .ctxrow { display: flex; justify-content: space-between; align-items: center; color: var(--muted); margin-bottom: 5px; }
  #ctxBar .ctxnum { font-variant-numeric: tabular-nums; }
  #ctxBar .ctxtrack { height: 5px; border-radius: 3px; background: rgba(127,127,127,.22); overflow: hidden; }
  #ctxBar .ctxfill { height: 100%; background: var(--accent); transition: width .3s ease; }
  #ctxBar.lvl-warn .ctxfill { background: var(--vscode-editorWarning-foreground, #e0a030); }
  #ctxBar.lvl-crit .ctxfill { background: var(--vscode-errorForeground, #f14c4c); }
  #ctxBar.lvl-warn { border-color: color-mix(in srgb, #e0a030 45%, var(--border)); }
  #ctxBar.lvl-crit { border-color: color-mix(in srgb, #f14c4c 50%, var(--border)); }
  #ctxBar .ctxtip { margin-top: 8px; line-height: 1.5; color: var(--vscode-foreground); }
  #ctxBar .ctxnew { margin-left: 5px; cursor: pointer; border: none; border-radius: 5px; padding: 3px 10px; font-size: 11px; background: var(--vscode-button-background); color: var(--vscode-button-foreground); }
  #ctxBar .ctxnew:hover { background: var(--vscode-button-hoverBackground); }
  /* sticky active-plan bar (sits just above the review bar) — opaque so the log can't show behind it */
  /* Background tasks tray — collapsed by default; lists commands started with background:true */
  #bgTasksBar { flex: 0 0 auto; margin-block: 0 6px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
    background: var(--vscode-editorWidget-background, rgba(127,127,127,.08)); font-size: 12px; }
  .bgt-head { display: flex; align-items: center; gap: 7px; padding: 8px 11px; cursor: pointer; user-select: none; color: var(--vscode-foreground); }
  .bgt-head:hover { background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.12)); }
  .bgt-livedot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; background: var(--vscode-terminal-ansiBrightGreen, #7ee787); animation: bgtpulse 1.8s infinite; }
  @keyframes bgtpulse { 0%{ box-shadow: 0 0 0 0 rgba(126,231,135,.5); } 70%{ box-shadow: 0 0 0 5px rgba(126,231,135,0); } 100%{ box-shadow: 0 0 0 0 rgba(126,231,135,0); } }
  .bgt-caret { display: inline-flex; transition: transform .15s; color: var(--muted); }
  .bgt-caret.open { transform: rotate(90deg); }
  .bgt-caret svg { width: 11px; height: 11px; display: block; }
  .bgt-title { font-weight: 600; }
  .bgt-count { color: var(--muted); }
  .bgt-list { border-top: 1px solid var(--border); }
  .bgt-row { display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
  .bgt-row:last-child { border-bottom: none; }
  .bgt-cmd { flex: 1 1 auto; min-width: 0; font-family: var(--vscode-editor-font-family, monospace); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bgt-status { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }
  .bgt-status .port { color: var(--vscode-terminal-ansiBrightGreen, var(--vscode-terminal-ansiGreen, #7ee787)); }
  .bgt-stop { flex: 0 0 auto; cursor: pointer; border: 1px solid var(--border); border-radius: 5px; padding: 2px 9px; font-size: 11px; display: inline-flex; align-items: center; gap: 4px;
    background: var(--vscode-button-secondaryBackground, rgba(127,127,127,.22)); color: var(--vscode-foreground); }
  .bgt-stop:hover { background: var(--vscode-errorForeground, #f14c4c); color: #fff; border-color: transparent; }
  .bgt-stop[disabled] { opacity: .6; cursor: default; }
  .bgt-stop svg { width: 1em; height: 1em; }
  #planBar { flex: 0 0 auto; padding: 8px 8px 6px; max-height: 38vh; overflow-y: auto; scrollbar-gutter: stable;
    background: var(--vscode-sideBar-background, var(--vscode-editor-background, #1e1e1e));
    border-top: 1px solid var(--border); box-shadow: 0 -8px 14px -8px rgba(0,0,0,.4); }
  #planBar .plancard { margin: 0; }
  .plancard { border: 1px solid var(--border); border-radius: 12px; margin: 6px 2px; overflow: hidden; background: var(--field-bg); }
  .plancard .phead { display: flex; align-items: center; gap: 8px; padding: 9px 12px 8px; font-size: 12px; font-weight: 600; letter-spacing: .01em; cursor: pointer; user-select: none; }
  .plancard .ptoggle { flex: 0 0 auto; display: inline-flex; color: var(--muted); opacity: .65; transition: transform .18s cubic-bezier(.4,0,.2,1); }
  .plancard .ptoggle .ci { width: 13px; height: 13px; }
  .plancard .phead:hover .ptoggle { opacity: 1; }
  .plancard.collapsed .ptoggle { transform: rotate(-90deg); }
  .plancard .phtitle { flex: 1 1 auto; min-width: 0; }
  .plancard .pcount { flex: 0 0 auto; opacity: .75; font-weight: 500; font-variant-numeric: tabular-nums; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11px; padding: 1px 8px; border-radius: 999px; background: rgba(127,127,127,.14); }
  .plancard.alldone .pcount { opacity: 1; color: var(--vscode-gitDecoration-addedResourceForeground, #4ec97a); background: color-mix(in srgb, var(--vscode-gitDecoration-addedResourceForeground, #4ec97a) 16%, transparent); }
  /* Dismiss (×): reveals on header hover, and stays visible once the plan is done (its primary use). */
  .plancard .pdismiss { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--muted); font-size: 14px; line-height: 1; opacity: 0; cursor: pointer; border-radius: 6px; transition: opacity .12s, background .12s; }
  .plancard .phead:hover .pdismiss, .plancard.alldone .pdismiss { opacity: .55; }
  /* :focus-visible so a keyboard-only user can see AND ring the control even on a not-yet-done plan
     — it is opacity:0 by default (revealed on hover/done), so focus must reveal it too. */
  .plancard .pdismiss:hover, .plancard .pdismiss:focus-visible { opacity: 1; background: rgba(127,127,127,.16); }
  .plancard .pdismiss:focus-visible { outline: 1px solid var(--accent); outline-offset: 1px; }
  .plancard .pprog { height: 3px; margin: 0 12px 2px; border-radius: 3px; background: rgba(127,127,127,.16); overflow: hidden; }
  .plancard .pprog .pfill { height: 100%; border-radius: 3px; background: var(--accent); transition: width .4s cubic-bezier(.4,0,.2,1); }
  .plancard.alldone .pprog .pfill { background: var(--vscode-gitDecoration-addedResourceForeground, #4ec97a); }
  .plancard .pitems { padding: 6px 0 7px; }
  .plancard.collapsed .pprog, .plancard.collapsed .pitems { display: none; }
  .plancard .pitem { display: flex; gap: 9px; align-items: center; padding: 4px 12px; font-size: 12.5px; line-height: 1.45; position: relative; }
  .plancard .pitem .pic { flex: 0 0 auto; width: 15px; height: 15px; display: inline-flex; align-items: center; justify-content: center; }
  .plancard .pitem .pic .ci { width: 13px; height: 13px; }
  .plancard .pitem.done .pic { color: var(--vscode-gitDecoration-addedResourceForeground, #4ec97a); }
  .plancard .pitem.done .ptitle { opacity: .5; text-decoration: line-through; text-decoration-thickness: 1px; }
  .plancard .pitem.doing { background: color-mix(in srgb, var(--accent) 11%, transparent); }
  .plancard .pitem.doing::before { content: ''; position: absolute; left: 0; top: 3px; bottom: 3px; width: 2px; border-radius: 2px; background: var(--accent); }
  .plancard .pitem.doing .pic { color: var(--accent); }
  .plancard .pitem.doing .pic .ci { animation: spin .9s linear infinite; }
  .plancard .pitem.doing .ptitle { font-weight: 600; }
  .plancard .pitem.todo .pic { color: var(--muted); opacity: .5; }
  .plancard .pitem.todo .ptitle { opacity: .82; }
  @keyframes agentpulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } }
  .diff { overflow: auto; font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: 11.5px; line-height: 1.5; padding: 4px 0; }
  .diff .dl { white-space: pre-wrap; overflow-wrap: anywhere; padding: 0 10px 0 22px; text-indent: -16px; }
  .diff .dl .s { display: inline-block; width: 12px; opacity: .6; user-select: none; }
  .diff::-webkit-scrollbar { width: 10px; height: 10px; }
  .diff::-webkit-scrollbar-thumb { background: var(--scrollbar, rgba(127,127,127,.4)); border-radius: 6px; }
  .diff .dl.add { background: rgba(70,160,90,.16); }
  .diff .dl.del { background: rgba(220,90,90,.16); }
  .diff .dl.add .s { color: var(--vscode-gitDecoration-addedResourceForeground, #4ec97a); }
  .diff .dl.del .s { color: var(--vscode-gitDecoration-deletedResourceForeground, #e06c75); }
  .diff .dl.ctx { opacity: .55; }
  .autoctx { font-size: 11px; opacity: .55; margin: -4px 2px 2px; }
  /* The "Resumed" banner at the top of a replayed session (message-list notice, so it uses log tokens). */
  .sessresumed { margin: 2px 2px 12px; padding: 8px 11px; border: 1px solid var(--border); border-left: 2px solid var(--vscode-textLink-foreground, #6a9955); border-radius: 8px; background: var(--field-bg); }
  .sessresumed .rrow { display: flex; align-items: center; gap: 6px; min-width: 0; }
  .sessresumed .ci { width: 13px; height: 13px; opacity: .8; flex: 0 0 auto; }
  .sessresumed .rtag { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--vscode-descriptionForeground); flex: 0 0 auto; }
  .sessresumed .rtitle { font-size: 12.5px; font-weight: 600; color: var(--vscode-foreground); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sessresumed .rnote { margin-top: 5px; font-size: 11px; color: var(--vscode-descriptionForeground); }
  .autoctx .files { font-family: var(--vscode-editor-font-family, ui-monospace, monospace); }
  #empty { margin: auto; max-width: min(560px, 92vw); text-align: center; opacity: .65; line-height: 1.55; padding: 20px; }
  #empty .empty-copy { max-width: 280px; margin: 0 auto; }
  #empty .big { font-size: 1.15em; opacity: .9; margin-bottom: 6px; }
  /* LevelCode ASCII wordmark on the welcome (empty) state. Sizes with the panel width (webview vw),
     clamped so it stays legible-yet-compact; theme accent to match the chevron mark in the status bar. */
  #empty .lc-ascii-wrap { container-type: inline-size; width: 100%; }
  /* font-size is sized off the CONTAINER width (cqi) — reliable in a webview where vw = the whole
     editor, not this panel — so the wordmark always fits and the last glyph is never clipped.
     line-height:1 makes the box-drawing rows connect into solid letters. */
  #empty .lc-ascii { font-family: var(--vscode-editor-font-family, ui-monospace, monospace); font-size: clamp(5px, 4.6cqi, 13px); line-height: 1; white-space: pre; color: var(--vscode-terminal-ansiGreen, #98c379); opacity: 1; width: max-content; max-width: 100%; margin: 2px auto 6px; overflow-x: auto; user-select: none; }
  #empty .lc-ascii-sub { font-family: var(--vscode-editor-font-family, monospace); font-size: 11px; letter-spacing: .22em; color: var(--muted); opacity: .9; margin-bottom: 14px; }
  #empty .starters { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 14px; }
  #empty .starter { cursor: pointer; border: 1px solid var(--border); border-radius: 14px; padding: 4px 11px; font-size: 11.5px; background: var(--field-bg); color: var(--vscode-foreground); opacity: .95; }
  #empty .starter:hover { border-color: var(--accent); opacity: 1; }
  /* Welcome-back strip: a glanceable "this project, lately …" at the top of a fresh session (cross-session
     memory §8). Sits above #empty so it isn't dimmed by #empty's opacity; cleared on the first message. */
  .memstrip { display: flex; align-items: flex-start; gap: 10px; margin: 2px 2px 6px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--field-bg); font-size: 12.5px; color: var(--muted); text-align: left; }
  .memstrip .mstext { flex: 1 1 auto; line-height: 1.5; }
  .memstrip .mslink { flex: 0 0 auto; background: transparent; border: none; color: var(--vscode-textLink-foreground); font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; padding: 0; }
  .memstrip .mslink:hover { text-decoration: underline; }
  .memstrip .msx { flex: 0 0 auto; background: transparent; border: none; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 2px; opacity: .7; }
  .memstrip .msx:hover { opacity: 1; }

  /* ---- composer ---- */
  #composer {
    margin: 8px auto; padding: 8px 8px 6px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--field-bg);
    display: flex; flex-direction: column; gap: 7px;
    transition: border-color .12s ease, box-shadow .12s ease;
  }
  #composer.focused { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }

  #chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
  .chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; line-height: 1.4; padding: 3px 8px 3px 5px;
    border-radius: var(--pill-radius);
    border: 1px solid var(--border); background: var(--vscode-editorWidget-background, rgba(127,127,127,.08));
    color: var(--vscode-foreground); max-width: 100%;
  }
  .chip:hover { border-color: var(--accent); background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.14)); }
  .chip .name { font-style: italic; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
  .chip .badge {
    font-family: var(--vscode-editor-font-family, ui-monospace, monospace);
    font-size: 9px; font-weight: 700; letter-spacing: .03em;
    padding: 2px 4px; border-radius: 4px;
    background: var(--accent); color: #fff; opacity: .9;
  }
  .chip.pinned { padding-right: 4px; }
  .chip .x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; margin-left: 1px; cursor: pointer;
    border-radius: 50%; font-size: 9px; opacity: .55;
  }
  .chip .x:hover { opacity: 1; background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.35)); }
  .addchip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; line-height: 1; padding: 4px 9px; cursor: pointer;
    border-radius: var(--pill-radius);
    border: 1px dashed var(--border); background: transparent; color: var(--muted);
  }
  .addchip:hover { color: var(--vscode-foreground); border-color: var(--accent); }
  .addchip .plus { font-size: 13px; line-height: 1; }

  textarea#input {
    width: 100%; resize: none; min-height: 46px; max-height: 200px;
    padding: 4px 4px; border: none; outline: none;
    color: var(--vscode-input-foreground, var(--vscode-foreground));
    background: transparent; font-family: inherit; font-size: 13px; line-height: 1.45;
  }
  textarea#input::placeholder { color: var(--muted); opacity: .8; }

  #toolbar { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  #toolbar .left { display: flex; align-items: center; gap: 4px; min-width: 0; }
  .tbtn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; cursor: pointer;
    border: none; border-radius: 7px; background: transparent; color: var(--muted);
    font-size: 15px; line-height: 1;
  }
  .tbtn:hover { background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.18)); color: var(--vscode-foreground); }
  .pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; line-height: 1; padding: 5px 9px; border-radius: 7px;
    color: var(--vscode-foreground); cursor: pointer; user-select: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .pill:hover { background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.18)); }
  .pill.static { cursor: default; }
  .pill.static:hover { background: transparent; }
  .pill .mono { font-family: var(--vscode-editor-font-family, ui-monospace, monospace); opacity: .7; }
  .pill .caret { opacity: .5; font-size: 10px; }
  .modewrap[hidden] { display: none; }
  .sep { width: 1px; height: 16px; background: var(--border); margin: 0 2px; flex: 0 0 auto; }

  /* ---- Agent/Chat mode dropdown (anchored above the mode pill) ---- */
  .modewrap { position: relative; display: inline-flex; }
  .modemenu {
    position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 60;
    min-width: 236px; padding: 5px; border-radius: 10px;
    background: var(--vscode-menu-background, var(--field-bg));
    border: 1px solid var(--vscode-menu-border, var(--border));
    box-shadow: 0 8px 24px rgba(0,0,0,.30);
  }
  .modemenu[hidden] { display: none; }
  .modeopt {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 7px 9px; border: none; border-radius: 7px; background: transparent;
    color: var(--vscode-foreground); cursor: pointer; text-align: left;
  }
  .modeopt:hover, .modeopt:focus-visible { background: var(--vscode-toolbar-hoverBackground, rgba(127,127,127,.16)); outline: none; }