1// CSS styles for OpenCode session HTML transcripts
2// Colors mapped from ANSI terminal theme in epOcToMp4AI.mjs
3
4export const transcriptCssVars = `
5:root {
6  --bg: #080808;
7  --fg: #f0f0f0;
8  --dim: #909090;
9  --white: #f7f7f7;
10  --cyan: #96f0f0;
11  --yellow: #f0d093;
12  --green: #92f092;
13  --red: #f09191;
14  --orange: #ffb870;
15  --teal: #5fd7af;
16  --pink: #ff87d7;
17  --bar-purple: #9d7cd8;
18  --bar-blue: #3b82f6;
19  --diff-add-bg: rgb(10,14,10);
20  --diff-del-bg: rgb(14,10,10);
21  --diff-add-text: rgb(140,195,140);
22  --diff-del-text: rgb(220,100,90);
23  --bg-near-black: #111;
24}
25`
26
27export const transcriptBaseStyles = `
28${transcriptCssVars}
29html, body {
30  margin: 0;
31  padding: 0;
32  background: var(--bg);
33  color: var(--fg);
34  font-family: 'Menlo', 'Monaco', 'Consolas', monospace;
35  font-size: 14px;
36  line-height: 1.5;
37}
38html { scrollbar-width: none; }
39html::-webkit-scrollbar { display: none; }
40`
41
42export const transcriptLayoutStyles = `
43.transcript-container {
44  max-width: 960px;
45  margin: 0 auto;
46  padding: 24px;
47}
48.session-header {
49  border-bottom: 1px solid #333;
50  padding-bottom: 16px;
51  margin-bottom: 24px;
52}
53.session-title {
54  font-size: 1.4em;
55  font-weight: bold;
56  color: var(--white);
57  margin: 0 0 8px 0;
58}
59.session-meta {
60  color: var(--dim);
61  font-size: 0.9em;
62}
63.session-meta span { margin-right: 16px; }
64`
65
66export const transcriptMessageStyles = `
67.message { margin-bottom: 16px; }
68.user-msg {
69  display: flex;
70  align-items: stretch;
71  gap: 8px;
72}
73.mode-bar {
74  width: 4px;
75  min-height: 24px;
76  border-radius: 2px;
77  flex-shrink: 0;
78}
79.mode-bar.plan { background: var(--bar-purple); }
80.mode-bar.build { background: var(--bar-blue); }
81.user-text {
82  background: var(--bg-near-black);
83  padding: 8px 12px;
84  border-radius: 4px;
85  flex-grow: 1;
86  white-space: pre-wrap;
87}
88.assistant-msg { padding-left: 12px; }
89.assistant-text { white-space: pre-wrap; word-wrap: break-word; }
90`
91
92export const transcriptToolStyles = `
93.tool-call {
94  margin: 8px 0;
95  padding-left: 12px;
96  white-space: pre-wrap;
97  word-wrap: break-word;
98  color: var(--dim);
99}
100.seance-block { /* keep white-space: pre-wrap for line breaks */
101  border-left: 3px solid var(--orange);
102  padding-left: 12px;
103  margin: 8px 0;
104  white-space: pre-wrap;
105  word-wrap: break-word;
106}
107.tool-header {
108  color: var(--dim);
109}
110.tool-name { color: var(--orange); }
111.tool-params { color: var(--dim); }
112.tool-output {
113  margin-top: 4px;
114  padding-left: 16px;
115  color: var(--dim);
116  white-space: pre-wrap;
117  word-wrap: break-word;
118}
119`
120
121export const transcriptDiffStyles = `
122.diff-file { color: var(--dim); margin-bottom: 4px; }
123.diff-line { padding: 0 8px; white-space: pre-wrap; word-wrap: break-word; }
124.diff-add { display: block; background: var(--diff-add-bg); color: var(--diff-add-text); }
125.diff-del { display: block; background: var(--diff-del-bg); color: var(--diff-del-text); }
126.md-table { border-collapse: collapse; margin: 8px 0; }
127.md-table th, .md-table td { padding: 2px 12px 2px 0; text-align: left; }
128.md-table th { color: var(--white); }
129.md-table td { color: var(--fg); }
130`
131
132export const transcriptQuestionStyles = `
133.question-block { margin: 12px 0; }
134.question-header { color: var(--yellow); font-weight: bold; }
135.question-text { color: var(--white); margin: 8px 0; }
136.question-option { padding-left: 16px; margin: 4px 0; }
137.question-bullet { color: var(--dim); }
138.question-label { color: var(--white); }
139.question-desc { color: var(--dim); padding-left: 24px; }
140.question-answer { color: var(--green); margin-top: 8px; }
141`
142
143export const transcriptCodeStyles = `
144pre, code { font-family: inherit; }
145.code-block {
146  padding-left: 16px;
147  white-space: pre-wrap;
148  word-wrap: break-word;
149}
150`
151
152export const allTranscriptStyles = [
153  transcriptBaseStyles,
154  transcriptLayoutStyles,
155  transcriptMessageStyles,
156  transcriptToolStyles,
157  transcriptDiffStyles,
158  transcriptQuestionStyles,
159  transcriptCodeStyles,
160].join('\n')
161
162export const transcriptEmbedStyles = [
163  transcriptCssVars,
164  transcriptLayoutStyles,
165  transcriptMessageStyles,
166  transcriptToolStyles,
167  transcriptDiffStyles,
168  transcriptQuestionStyles,
169  transcriptCodeStyles,
170].join('\n')
171