PageSourceSearch

https://pecan-forest-ai.onrender.com/

html pecan-forest-ai.onrender.com collected 2026-10-03 11:42:00 UTC 44,724 bytes, 1,222 lines download raw bytes

1<!doctype html>
2<html dir="ltr">
3  <head>
4    <title>不登校・ひきこもり相談AIエージェント</title>
5    <meta name="viewport" content="width=device-width, initial-scale=1" />
6    <meta
7      id="nicegui-color-scheme"
8      name="color-scheme"
9      content="light"
10    />
11    <link href="/favicon.ico" rel="shortcut icon" />
12    <style>
13      @layer theme, base, quasar, nicegui, components, utilities, overrides, quasar_importants;
14      @import url("/_nicegui/3.14.0/static/fonts.css") layer(base);
15      
16        @import url("/_nicegui/3.14.0/static/quasar.unimportant.prod.css") layer(quasar);
17        @import url("/_nicegui/3.14.0/static/quasar.important.prod.css") layer(quasar_importants);
18      
19      @import url("/_nicegui/3.14.0/static/nicegui.css") layer(nicegui);
20      @layer quasar {
21        blockquote, dd, dl, figure, h1, h2, h3, h4, h5, h6, hr, p, pre {
22          margin: revert-layer; /* HACK: revert Quasar's margin styles */
23        }
24      }
25      @layer overrides {
26        .rotate-45, .rotate-90, .rotate-135, .rotate-180, .rotate-225, .rotate-270, .rotate-315 {
27  rotate: 0deg;
28}
29        .column.inline, .flex.inline, .row.inline {
30          display: inline-flex;  /* HACK: re-apply Quasar's inline styles to override Tailwind */
31        }
32        .nicegui-dialog-open,
33        .nicegui-select-popup-open,
34        .nicegui-table-fullscreen {
35          scroll-behavior: auto !important; /* HACK: avoid smooth-scrolling when dialogs or select popups close */
36        }
37      }
38    </style>
39    
39<script type="importmap">
40      {"imports": {"vue":"/_nicegui/3.14.0/static/vue.esm-browser.prod.js","sass":"/_nicegui/3.14.0/static/sass.default.js","immutable":"/_nicegui/3.14.0/static/immutable.es.js","dompurify":"/_nicegui/3.14.0/static/dompurify.mjs","nicegui-leaflet":"/_nicegui/3.14.0/esm/000bf077f3fa245a148d9a42f83693d5/index.js","nicegui-leaflet/":"/_nicegui/3.14.0/esm/000bf077f3fa245a148d9a42f83693d5/","nicegui-mermaid":"/_nicegui/3.14.0/esm/ce34ae6f319287b4b24028b964d0a388/index.js","nicegui-mermaid/":"/_nicegui/3.14.0/esm/ce34ae6f319287b4b24028b964d0a388/","nicegui-aggrid":"/_nicegui/3.14.0/esm/93ecd1231c3518ae56006475964760ec/index.js","nicegui-aggrid/":"/_nicegui/3.14.0/esm/93ecd1231c3518ae56006475964760ec/","nicegui-json-editor":"/_nicegui/3.14.0/esm/7686338f7002ab1cd8bd9aaf3e85119a/index.js","nicegui-json-editor/":"/_nicegui/3.14.0/esm/7686338f7002ab1cd8bd9aaf3e85119a/","nicegui-joystick":"/_nicegui/3.14.0/esm/ee345969b47e8a2b9688ea7139bf04bb/index.js","nicegui-joystick/":"/_nicegui/3.14.0/esm/ee345969b47e8a2b9688ea7139bf04bb/","nicegui-codemirror":"/_nicegui/3.14.0/esm/bfdcb935d1e26db9ac40be6f5b354490/index.js","nicegui-codemirror/":"/_nicegui/3.14.0/esm/bfdcb935d1e26db9ac40be6f5b354490/","nicegui-plotly":"/_nicegui/3.14.0/esm/4a385f81ba791bb12cc44d9ef7774612/index.js","nicegui-plotly/":"/_nicegui/3.14.0/esm/4a385f81ba791bb12cc44d9ef7774612/","nicegui-scene":"/_nicegui/3.14.0/esm/d346174ff2ecc454ec5603835ebc0bc9/index.js","nicegui-scene/":"/_nicegui/3.14.0/esm/d346174ff2ecc454ec5603835ebc0bc9/","nicegui-xterm":"/_nicegui/3.14.0/esm/0f659710d85802b9fb54cb88fb6bf240/index.js","nicegui-xterm/":"/_nicegui/3.14.0/esm/0f659710d85802b9fb54cb88fb6bf240/","nicegui-echart":"/_nicegui/3.14.0/esm/97732536ee2a2ae86554b3386c9e2d4a/index.js","nicegui-echart/":"/_nicegui/3.14.0/esm/97732536ee2a2ae86554b3386c9e2d4a/"}}
41    </script>
41
42    
42<script>
43      addStyle = (c) => document.head.append(Object.assign(document.createElement("style"), { textContent: c }));
44    </script>
44
45    
46<link rel="manifest" href="/static/manifest.json">
47<meta name="theme-color" content="#a5d6a7">
48<meta name="apple-mobile-web-app-capable" content="yes">
49<meta name="apple-mobile-web-app-title" content="相談AI">
50<link rel="apple-touch-icon" href="/static/icon-192.png">
51<link rel="icon" type="image/svg+xml" href="/static/pecan-forest-icon.svg">
52
53
54<script>
55(function () {
56  function todayLocalISO() {
57    const d = new Date();
58    const y = d.getFullYear();
59    const m = String(d.getMonth() + 1).padStart(2, '0');
60    const day = String(d.getDate()).padStart(2, '0');
61    return `${y}-${m}-${day}`;
62  }
63
64  const KEY = 'pecan_forest_open_date';
65  const openedDate = todayLocalISO();
66  try { sessionStorage.setItem(KEY, openedDate); } catch (e) {}
67
68  function checkDateRollover() {
69    const nowDate = todayLocalISO();
70    let savedDate = openedDate;
71    try { savedDate = sessionStorage.getItem(KEY) || openedDate; } catch (e) {}
72
73    if (nowDate !== savedDate) {
74      try { sessionStorage.setItem(KEY, nowDate); } catch (e) {}
75      window.location.reload();
76    }
77  }
78
79  document.addEventListener('visibilitychange', function () {
80    if (!document.hidden) checkDateRollover();
81  });
82  window.addEventListener('focus', checkDateRollover);
83  setInterval(checkDateRollover, 60000);
84})();
85</script>
85
86
87
88<style>
89@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;600;700;800&display=swap');
90
91:root {
92  --green-900: #183d25;
93  --green-800: #28553a;
94  --green-700: #356946;
95  --green-600: #4f8a60;
96  --green-500: #6fa77a;
97  --green-100: #eaf5ea;
98  --green-050: #f6fbf5;
99  --cream-050: #fffaf1;
100  --paper: rgba(255, 255, 255, 0.88);
101  --paper-solid: #ffffff;
102  --line: rgba(111, 167, 122, 0.22);
103  --line-strong: rgba(79, 138, 96, 0.32);
104  --text: #243128;
105  --muted: #6b776f;
106  --shadow-sm: 0 8px 22px rgba(54, 92, 62, 0.08);
107  --shadow-md: 0 18px 55px rgba(54, 92, 62, 0.13);
108  --radius-lg: 28px;
109  --radius-md: 20px;
110}
111
112html, body, .nicegui-content {
113  margin: 0;
114  min-height: 100vh;
115  color: var(--text);
116  font-family: 'Noto Sans JP', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
117  background:
118    radial-gradient(circle at 15% 10%, rgba(217, 239, 214, 0.55), transparent 34%),
119    radial-gradient(circle at 90% 20%, rgba(255, 245, 221, 0.8), transparent 36%),
120    linear-gradient(180deg, #fbfff9 0%, #f7fbf3 44%, #fffaf1 100%);
121}
122
123body.body--dark { background: #111; }
124
125.page-wrap { width: min(1240px, 100%); margin: 0 auto; padding: 18px; }
126.mobile-shell { width: min(1180px, 100%); margin: 0 auto; }
127
128.app-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); backdrop-filter: blur(18px); }
129.soft-card { background: rgba(255, 255, 255, 0.72); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
130
131.top-bar { position: sticky; top: 0; z-index: 50; height: 76px; backdrop-filter: blur(20px); background: rgba(255, 255, 255, 0.82); border-bottom: 1px solid var(--line); }
132.brand-logo { width: 48px; height: 48px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, #f1f8ee 0%, #ffffff 100%); border: 1px solid rgba(111, 167, 122, 0.25); box-shadow: var(--shadow-sm); color: var(--green-700); }
133.brand-logo svg { width: 39px; height: 39px; }
134.ai-avatar svg { width: 36px; height: 36px; }
135.title-main { color: var(--green-900); font-weight: 800; letter-spacing: -0.02em; }
136.subtitle { color: var(--muted); font-size: 13px; line-height: 1.6; }
137.phase-chip { border-radius: 999px; padding: 7px 13px; background: var(--green-100); color: var(--green-800); font-weight: 800; font-size: 12px; }
138
139.desktop-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 18px; align-items: start; }
140.side-nav { position: sticky; top: 94px; min-height: calc(100vh - 116px); padding: 18px 12px; }
141.nav-item { width: 100%; height: 46px; padding: 0 13px; display: flex; align-items: center; gap: 10px; border-radius: 16px; color: #2d4233; font-weight: 700; font-size: 14px; cursor: pointer; }
142.nav-item-active { background: #eef8ec; color: var(--green-800); box-shadow: inset 4px 0 0 var(--green-600); }
143.nav-note { margin-top: auto; padding: 16px; border-radius: 22px; background: linear-gradient(180deg, rgba(238, 248, 236, 0.95), rgba(255, 250, 241, 0.95)); color: var(--green-800); font-size: 12px; line-height: 1.9; border: 1px solid var(--line); }
144.compact-history-list { max-height: 420px; overflow-y: auto; }
145.history-row { border-radius: 16px; padding: 12px; border: 1px solid transparent; }
146.history-row:hover { background: rgba(234, 245, 234, 0.65); }
147.hero-card { padding: 22px; }
148
149.current-phase-card { position: relative; overflow: hidden; border-radius: 26px; padding: 26px; background: linear-gradient(135deg, #ffffff 0%, #f7fbf3 100%); border: 1px solid var(--line); box-shadow: var(--shadow-md); }
150.current-phase-title { color: var(--green-900); font-weight: 900; font-size: 34px; letter-spacing: -0.03em; }
151.current-phase-subtitle { color: #3b493f; font-size: 15px; line-height: 2; }
152.phase-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-items: center; margin: 20px 0 8px; }
153.phase-dot { height: 10px; border-radius: 999px; background: #e5eee5; border: 1px solid rgba(111, 167, 122, 0.25); }
154.phase-dot-active { background: var(--green-600); border-color: var(--green-600); box-shadow: 0 0 0 6px rgba(111, 167, 122, 0.16); }
155.phase-list-item { border-radius: 17px; padding: 10px 12px; background: rgba(255,255,255,0.64); border: 1px solid rgba(111, 167, 122, 0.15); }
156.phase-list-item-active { border-radius: 17px; padding: 10px 12px; background: linear-gradient(90deg, rgba(234,245,234,0.95), rgba(255,255,255,0.74)); border: 1px solid rgba(79,138,96,0.28); box-shadow: var(--shadow-sm); }
157.phase-number { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 999px; border: 1px solid rgba(36, 49, 40, 0.35); font-weight: 800; font-size: 12px; color: var(--text); }
158.phase-number-active { background: var(--green-600); color: white; border-color: var(--green-600); }
159.phase-name-active { color: var(--green-900); font-weight: 900; }
160
161.chat-area { height: auto; min-height: 260px; overflow: visible; padding: 24px 18px 14px; scroll-behavior: smooth; background: linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0.08)); }
162.chat-bubble-user { background: linear-gradient(135deg, #e1f6d6, #d4f0c5); border-radius: 20px 20px 5px 20px; padding: 14px 16px; max-width: min(76%, 620px); margin-left: auto; margin-bottom: 14px; box-shadow: var(--shadow-sm); white-space: pre-wrap; line-height: 1.9; }
163.chat-bubble-ai { background: #ffffff; border: 1px solid var(--line); border-radius: 20px 20px 20px 5px; padding: 16px 18px; max-width: min(84%, 680px); margin-right: auto; margin-bottom: 14px; box-shadow: var(--shadow-sm); white-space: pre-wrap; line-height: 1.95; }
164.ai-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; margin-right: 10px; background: linear-gradient(135deg, #f1f8ee 0%, #ffffff 100%); color: var(--green-700); border: 1px solid rgba(111,167,122,0.28); box-shadow: var(--shadow-sm); flex: 0 0 auto; overflow: hidden; }
165.user-avatar { width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; margin-left: 8px; background: linear-gradient(135deg, #7fba87, #4f8a60); color: white; flex: 0 0 auto; }
166.input-bar { position: static; z-index: 40; background: rgba(255,255,255,0.92); border-top: 1px solid var(--line); padding: 12px 14px 14px; backdrop-filter: blur(14px); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
167.login-card { width: min(520px, calc(100vw - 28px)); margin: 44px auto; padding: 30px; }
168.section-label { color: var(--green-900); font-weight: 900; font-size: 16px; }
169.history-box { max-height: 55vh; overflow-y: auto; }
170.small-muted { color: var(--muted); font-size: 12px; line-height: 1.7; }
171.q-btn { border-radius: 999px !important; }
172.q-field--outlined .q-field__control { border-radius: 22px !important; }
173.q-textarea .q-field__control { min-height: 52px !important; }
174.security-note { text-align: center; color: var(--muted); font-size: 12px; padding: 8px 0 14px; }
175.mobile-bottom-nav { display: none; position: sticky; bottom: 0; z-index: 60; background: rgba(255,255,255,0.94); border-top: 1px solid var(--line); backdrop-filter: blur(16px); padding: 8px 8px 10px; }
176
177@media (max-width: 980px) { .desktop-layout { grid-template-columns: 1fr; } .side-nav { display: none; } .page-wrap { padding: 10px; } .top-bar { height: 68px; } .brand-logo { width: 40px; height: 40px; border-radius: 15px; } .brand-logo svg { width: 33px; height: 33px; } .current-phase-card { padding: 20px; } .current-phase-title { font-size: 28px; } .chat-area { height: auto; min-height: 220px; overflow: visible; padding: 16px 10px; } .chat-bubble-user, .chat-bubble-ai { max-width: 88%; font-size: 14px; } .mobile-bottom-nav { display: grid; grid-template-columns: repeat(3, 1fr); } }
178@media (max-width: 600px) { .page-wrap { padding: 8px; } .login-card { margin-top: 20px; padding: 22px; } .title-main { font-size: 15px; } .subtitle { font-size: 12px; } .current-phase-card { border-radius: 22px; } .phase-list-item, .phase-list-item-active { padding: 9px 10px; } }
179
180/* チャット欄を独立スクロールにせず、ページ全体で自然に上下移動する */
181.chat-area::-webkit-scrollbar { display: none; }
182.chat-area { -ms-overflow-style: none; scrollbar-width: none; }
183
184/* ============================================================
185   スマホUI微調整:中央寄せ・文字サイズ・余白・横ズレ対策
186   ============================================================ */
187* { box-sizing: border-box; }
188html, body, .nicegui-content {
189  width: 100%;
190  max-width: 100%;
191  overflow-x: hidden;
192  -webkit-text-size-adjust: 100%;
193}
194.page-wrap {
195  width: 100%;
196  max-width: 1240px;
197  padding: 18px clamp(12px, 3vw, 24px);
198}
199.mobile-shell {
200  width: 100%;
201  max-width: 1180px;
202}
203.login-card {
204  width: 100%;
205  max-width: 500px;
206  margin: min(7vh, 52px) auto 24px;
207  padding: clamp(24px, 4.8vw, 34px);
208}
209.login-card .q-field,
210.login-card .q-btn {
211  font-size: 16px;
212}
213.chat-bubble-user,
214.chat-bubble-ai {
215  font-size: 15px;
216}
217.app-card {
218  overflow: hidden;
219}
220.q-field__native,
221.q-field__input {
222  font-size: 16px !important;
223}
224@media (max-width: 600px) {
225  .page-wrap {
226    width: 100%;
227    max-width: 100%;
228    padding: 12px;
229    margin: 0 auto;
230  }
231  .login-card {
232    width: 100%;
233    max-width: calc(100vw - 24px);
234    margin: 18px auto 20px;
235    padding: 24px 20px;
236    transform: none;
237  }
238  .login-card .title-main {
239    font-size: 21px !important;
240    line-height: 1.45;
241  }
242  .login-card .subtitle {
243    font-size: 14px !important;
244    line-height: 1.7;
245  }
246  .top-bar {
247    height: 66px;
248  }
249  .top-bar .mobile-shell {
250    padding-left: 10px;
251    padding-right: 10px;
252  }
253  .brand-logo {
254    width: 42px;
255    height: 42px;
256  }
257  .brand-logo svg {
258    width: 35px;
259    height: 35px;
260  }
261  .chat-bubble-user,
262  .chat-bubble-ai {
263    max-width: 90%;
264    font-size: 15px;
265    line-height: 1.85;
266    padding: 13px 15px;
267  }
268  .current-phase-title {
269    font-size: 25px;
270  }
271  .current-phase-subtitle {
272    font-size: 14px;
273    line-height: 1.85;
274  }
275  .section-label {
276    font-size: 15px;
277  }
278  .small-muted {
279    font-size: 12.5px;
280  }
281  .input-bar {
282    padding: 10px 12px 12px;
283  }
284  .mobile-bottom-nav {
285    padding-bottom: max(10px, env(safe-area-inset-bottom));
286  }
287}
288
289/* ============================================================
290   ヘッダー・相談カード最終調整:ブランド名と見立てチップ
291   ============================================================ */
292.app-brand-title {
293  color: var(--green-900);
294  font-weight: 900;
295  letter-spacing: -0.025em;
296  font-size: 17px;
297  line-height: 1.25;
298}
299.app-brand-subtitle {
300  color: var(--muted);
301  font-size: 12.5px;
302  line-height: 1.45;
303}
304.consult-card-head {
305  gap: 12px;
306}
307.consult-title-block {
308  min-width: 0;
309}
310.consult-title {
311  color: var(--green-900);
312  font-weight: 900;
313  letter-spacing: -0.025em;
314  font-size: 28px;
315  line-height: 1.25;
316}
317.phase-status-pill {
318  min-width: 142px;
319  max-width: 190px;
320  padding: 9px 13px;
321  border-radius: 999px;
322  background: linear-gradient(135deg, rgba(234,245,234,0.98), rgba(255,255,255,0.90));
323  border: 1px solid rgba(79,138,96,0.28);
324  box-shadow: var(--shadow-sm);
325  cursor: pointer;
326}
327.phase-status-icon {
328  width: 31px;
329  height: 31px;
330  border-radius: 50%;
331  display: grid;
332  place-items: center;
333  background: rgba(79,138,96,0.12);
334  color: var(--green-700);
335  flex: 0 0 auto;
336}
337.phase-status-caption {
338  color: var(--muted);
339  font-size: 10.5px;
340  line-height: 1.1;
341  font-weight: 800;
342  white-space: nowrap;
343}
344.phase-status-value {
345  color: var(--green-900);
346  font-size: 13px;
347  line-height: 1.2;
348  font-weight: 900;
349  white-space: nowrap;
350}
351@media (max-width: 600px) {
352  .app-brand-title {
353    font-size: 14.5px;
354    line-height: 1.25;
355  }
356  .app-brand-subtitle {
357    font-size: 11.5px;
358  }
359  .consult-card-head {
360    align-items: flex-start;
361  }
362  .consult-title {
363    font-size: 22px;
364  }
365  .phase-status-pill {
366    min-width: 124px;
367    max-width: 142px;
368    padding: 8px 10px;
369  }
370  .phase-status-icon {
371    width: 28px;
372    height: 28px;
373  }
374  .phase-status-caption {
375    font-size: 9.5px;
376  }
377  .phase-status-value {
378    font-size: 11.5px;
379  }
380}
381
382
383/* ============================================================
384   相談画面:見立てカードを主役にしたスマホ向けレイアウト
385   ============================================================ */
386.consult-intro {
387  padding-bottom: 10px;
388}
389.consult-lead {
390  color: var(--muted);
391  font-size: 13.5px;
392  line-height: 1.65;
393  margin-top: 3px;
394}
395.consult-action-row {
396  display: flex;
397  gap: 10px;
398  flex-wrap: wrap;
399  margin-top: 12px;
400}
401.consult-action-button {
402  min-width: 112px;
403  padding: 10px 14px;
404  border-radius: 999px;
405  border: 1px solid rgba(79,138,96,0.24);
406  background: rgba(255,255,255,0.82);
407  box-shadow: var(--shadow-sm);
408  color: var(--green-800);
409  font-weight: 900;
410  cursor: pointer;
411}
412.consult-phase-summary {
413  margin: 4px 16px 4px;
414  padding: 22px 24px;
415  border-radius: 24px;
416  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(247,251,243,0.92));
417  border: 1px solid rgba(111,167,122,0.20);
418  box-shadow: 0 12px 34px rgba(54, 92, 62, 0.08);
419}
420.consult-phase-topline {
421  display: flex;
422  align-items: center;
423  gap: 12px;
424  flex-wrap: wrap;
425  margin-bottom: 12px;
426}
427.consult-phase-caption {
428  color: var(--green-900);
429  font-size: 18px;
430  font-weight: 900;
431  letter-spacing: -0.02em;
432}
433.consult-phase-chip {
434  border-radius: 999px;
435  padding: 8px 16px;
436  background: rgba(234,245,234,0.96);
437  color: var(--green-900);
438  font-size: 14px;
439  font-weight: 900;
440  white-space: nowrap;
441}
442.consult-phase-title {
443  color: var(--green-900);
444  font-weight: 950;
445  letter-spacing: -0.035em;
446  font-size: 34px;
447  line-height: 1.22;
448  margin-bottom: 12px;
449}
450.consult-phase-description {
451  color: #4d5c51;
452  font-size: 16px;
453  line-height: 1.95;
454  margin-bottom: 20px;
455}
456.consult-phase-progress {
457  display: grid;
458  grid-template-columns: repeat(4, 1fr);
459  gap: 14px;
460}
461.consult-phase-bar {
462  height: 13px;
463  border-radius: 999px;
464  background: rgba(221,235,221,0.82);
465  border: 1px solid rgba(111,167,122,0.18);
466  box-shadow: inset 0 1px 2px rgba(54,92,62,0.06);
467}
468.consult-phase-bar-active {
469  background: var(--green-600);
470  border-color: var(--green-600);
471  box-shadow: 0 0 0 5px rgba(111,167,122,0.12);
472}
473.chat-date-separator {
474  color: var(--muted);
475  font-size: 12.5px;
476  font-weight: 700;
477  text-align: center;
478  width: 100%;
479  margin: 2px 0 10px;
480}
481
482@media (max-width: 600px) {
483  .consult-intro { padding-bottom: 6px; }
484  .consult-lead {
485    font-size: 13px;
486    margin-top: 4px;
487  }
488  .consult-action-row {
489    gap: 8px;
490    margin-top: 10px;
491  }
492  .consult-action-button {
493    min-width: calc(50% - 4px);
494    justify-content: center;
495    padding: 10px 12px;
496    font-size: 13px;
497  }
498  .consult-phase-summary {
499    margin: 2px 12px 2px;
500    padding: 18px 16px 17px;
501    border-radius: 22px;
502  }
503  .consult-phase-caption {
504    font-size: 16px;
505  }
506  .consult-phase-chip {
507    font-size: 13px;
508    padding: 7px 13px;
509  }
510  .consult-phase-title {
511    font-size: 29px;
512    margin-bottom: 10px;
513  }
514  .consult-phase-description {
515    font-size: 15px;
516    line-height: 1.85;
517    margin-bottom: 18px;
518  }
519  .consult-phase-progress {
520    gap: 10px;
521  }
522  .consult-phase-bar {
523    height: 12px;
524  }
525  .chat-area {
526    padding-top: 12px;
527  }
528}
529
530</style>
531
532
533<style>
534
535/* ============================================================
536   ChatGPT風 最終UI調整:上部タブ / 入力固定 / 大型Phaseカード廃止
537   ============================================================ */
538body, html, .nicegui-content {
539  background: #f7fbf3 !important;
540  overflow-x: hidden !important;
541}
542
543.page-wrap.chatgpt-page {
544  width: 100% !important;
545  max-width: 920px !important;
546  margin: 0 auto !important;
547  padding: 0 12px !important;
548}
549
550.top-bar {
551  height: 64px !important;
552  background: rgba(255,255,255,0.94) !important;
553  border-bottom: 1px solid rgba(111,167,122,0.18) !important;
554  box-shadow: 0 3px 14px rgba(54,92,62,0.04) !important;
555}
556
557.header-inner {
558  width: min(980px, 100%);
559  margin: 0 auto;
560  height: 64px;
561  padding: 0 12px;
562}
563
564.header-logo .brand-logo {
565  width: 38px !important;
566  height: 38px !important;
567  border-radius: 14px !important;
568  box-shadow: none !important;
569}
570
571.header-logo .brand-logo svg {
572  width: 31px !important;
573  height: 31px !important;
574}
575
576.app-title-compact {
577  color: var(--green-900);
578  font-weight: 900;
579  letter-spacing: -0.03em;
580  font-size: 18px;
581  line-height: 1.1;
582  white-space: nowrap;
583}
584
585.phase-mini-chip {
586  border-radius: 999px;
587  padding: 6px 10px;
588  background: rgba(234,245,234,0.95);
589  color: var(--green-800);
590  font-size: 12px;
591  font-weight: 900;
592  border: 1px solid rgba(79,138,96,0.22);
593  white-space: nowrap;
594}
595
596.top-tabs {
597  display: flex;
598  align-items: center;
599  gap: 4px;
600}
601
602.top-tab {
603  min-height: 34px !important;
604  padding: 0 11px !important;
605  border-radius: 999px !important;
606  font-size: 13px !important;
607  font-weight: 800 !important;
608}
609
610.top-tab-active {
611  background: rgba(79,138,96,0.12) !important;
612  color: var(--green-900) !important;
613}
614
615.chatgpt-main {
616  min-height: calc(100vh - 64px);
617  padding-top: 10px;
618  padding-bottom: 0;
619}
620
621.chat-shell {
622  height: calc(100vh - 78px);
623  display: flex;
624  flex-direction: column;
625  background: rgba(255,255,255,0.72);
626  border: 1px solid rgba(111,167,122,0.18);
627  border-radius: 24px;
628  overflow: hidden;
629  box-shadow: 0 12px 38px rgba(54,92,62,0.08);
630}
631
632.chat-head-compact {
633  padding: 14px 16px 10px;
634  border-bottom: 1px solid rgba(111,167,122,0.14);
635  background: rgba(255,255,255,0.80);
636}
637
638.chat-title-compact {
639  color: var(--green-900);
640  font-weight: 900;
641  font-size: 18px;
642  letter-spacing: -0.02em;
643}
644
645.phase-inline {
646  color: var(--muted);
647  font-size: 12.5px;
648  line-height: 1.5;
649}
650
651.chat-scroll-area {
652  flex: 1 1 auto;
653  min-height: 0;
654  overflow-y: auto;
655  padding: 18px 16px 12px;
656  background:
657    radial-gradient(circle at 18% 8%, rgba(234,245,234,0.55), transparent 30%),
658    linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.60));
659}
660
661.chat-scroll-area .chat-area {
662  height: auto !important;
663  min-height: 100% !important;
664  overflow: visible !important;
665  padding: 0 !important;
666  background: transparent !important;
667}
668
669.chat-bubble-user {
670  max-width: min(78%, 620px) !important;
671  font-size: 15px !important;
672  line-height: 1.85 !important;
673}
674
675.chat-bubble-ai {
676  max-width: min(84%, 680px) !important;
677  font-size: 15px !important;
678  line-height: 1.9 !important;
679}
680
681.ai-avatar {
682  width: 38px !important;
683  height: 38px !important;
684  margin-right: 9px !important;
685}
686
687.ai-avatar svg {
688  width: 31px !important;
689  height: 31px !important;
690}
691
692.chat-input-fixed {
693  flex: 0 0 auto;
694  padding: 10px 14px 12px;
695  background: rgba(255,255,255,0.96);
696  border-top: 1px solid rgba(111,167,122,0.16);
697}
698
699.chat-input-fixed .q-field--outlined .q-field__control {
700  border-radius: 999px !important;
701  background: white !important;
702}
703
704.security-note-compact {
705  text-align: center;
706  color: var(--muted);
707  font-size: 11.5px;
708  padding-top: 6px;
709}
710
711.mobile-bottom-nav,
712.side-nav,
713.consult-phase-summary,
714.consult-intro {
715  display: none !important;
716}
717
718.current-phase-card.compact-insight {
719  padding: 18px !important;
720  border-radius: 22px !important;
721}
722
723.current-phase-card.compact-insight .current-phase-title {
724  font-size: 22px !important;
725  letter-spacing: -0.02em !important;
726}
727
728.current-phase-card.compact-insight .current-phase-subtitle {
729  font-size: 14px !important;
730  line-height: 1.8 !important;
731}
732
733.current-phase-card.compact-insight .phase-track {
734  margin: 12px 0 0 !important;
735  gap: 8px !important;
736}
737
738.current-phase-card.compact-insight .phase-dot {
739  height: 7px !important;
740}
741
742@media (max-width: 700px) {
743  .header-inner {
744    padding: 0 8px;
745  }
746
747  .header-logo .brand-logo {
748    width: 34px !important;
749    height: 34px !important;
750  }
751
752  .header-logo .brand-logo svg {
753    width: 28px !important;
754    height: 28px !important;
755  }
756
757  .app-title-compact {
758    font-size: 15px;
759  }
760
761  .phase-mini-chip {
762    font-size: 11px;
763    padding: 5px 8px;
764    max-width: 116px;
765    overflow: hidden;
766    text-overflow: ellipsis;
767  }
768
769  .top-tabs {
770    gap: 1px;
771  }
772
773  .top-tab {
774    min-height: 31px !important;
775    padding: 0 7px !important;
776    font-size: 12px !important;
777  }
778
779  .top-tab .q-icon {
780    display: none !important;
781  }
782
783  .page-wrap.chatgpt-page {
784    padding: 0 !important;
785  }
786
787  .chatgpt-main {
788    padding-top: 0;
789  }
790
791  .chat-shell {
792    height: calc(100vh - 64px);
793    border-left: none;
794    border-right: none;
795    border-bottom: none;
796    border-radius: 0;
797    box-shadow: none;
798  }
799
800  .chat-head-compact {
801    padding: 10px 12px 8px;
802  }
803
804  .chat-title-compact {
805    font-size: 16px;
806  }
807
808  .chat-scroll-area {
809    padding: 14px 10px 10px;
810  }
811
812  .chat-bubble-user,
813  .chat-bubble-ai {
814    max-width: 88% !important;
815    font-size: 14.5px !important;
816  }
817
818  .ai-avatar {
819    width: 33px !important;
820    height: 33px !important;
821    margin-right: 7px !important;
822  }
823
824  .ai-avatar svg {
825    width: 27px !important;
826    height: 27px !important;
827  }
828
829  .chat-input-fixed {
830    padding: 8px 10px max(10px, env(safe-area-inset-bottom));
831  }
832}
833
834
835
836/* ============================================================
837   ヘッダー微調整:正式タイトル表示+ロゴ中央揃え
838   ============================================================ */
839.header-logo {
840  min-width: 0 !important;
841  flex: 1 1 auto !important;
842  overflow: hidden !important;
843}
844
845.header-logo .brand-logo {
846  flex: 0 0 auto !important;
847  display: flex !important;
848  align-items: center !important;
849  justify-content: center !important;
850  line-height: 0 !important;
851  transform: translateY(-1px);
852}
853
854.header-logo .brand-logo svg {
855  display: block !important;
856}
857
858.app-title-compact {
859  white-space: normal !important;
860  overflow: visible !important;
861  text-overflow: clip !important;
862  max-width: 360px;
863  font-size: 15px !important;
864  line-height: 1.16 !important;
865}
866
867@media (max-width: 700px) {
868  .top-bar { height: 70px !important; }
869  .header-inner { height: 70px !important; }
870  .chat-shell { height: calc(100vh - 70px) !important; }
871  .app-title-compact {
872    max-width: 165px;
873    font-size: 12.5px !important;
874    line-height: 1.16 !important;
875  }
876  .phase-mini-chip {
877    max-width: 86px !important;
878    font-size: 10.5px !important;
879    padding: 5px 7px !important;
880  }
881}
882
883@media (max-width: 430px) {
884  .app-title-compact {
885    max-width: 145px;
886    font-size: 11.8px !important;
887  }
888  .phase-mini-chip {
889    display: none !important;
890  }
891}
892
893</style>
894
895
896<style>
897/* NiceGUI/Quasarの余白に負けない固定アプリレイアウト */
898html, body, #app, .nicegui-content {
899  width: 100% !important;
900  height: 100dvh !important;
901  min-height: 100dvh !important;
902  overflow: hidden !important;
903  background: #f7fbf3 !important;
904}
905
906.q-layout, .q-page-container, .q-page {
907  min-height: 100dvh !important;
908  height: 100dvh !important;
909  overflow: hidden !important;
910}
911
912.q-page-container {
913  padding-top: 64px !important;
914}
915
916.top-bar {
917  height: 64px !important;
918  min-height: 64px !important;
919  background: rgba(255,255,255,0.96) !important;
920  border-bottom: 1px solid rgba(111,167,122,0.18) !important;
921  box-shadow: 0 2px 12px rgba(54,92,62,0.04) !important;
922}
923
924.header-inner {
925  height: 64px !important;
926  width: min(980px, 100%) !important;
927  margin: 0 auto !important;
928  padding: 0 12px !important;
929}
930
931/* ヘッダー */
932.header-logo {
933  min-width: 0 !important;
934  flex: 1 1 auto !important;
935  overflow: hidden !important;
936}
937.header-logo .brand-logo {
938  width: 36px !important;
939  height: 36px !important;
940  min-width: 36px !important;
941  border-radius: 13px !important;
942  display: flex !important;
943  align-items: center !important;
944  justify-content: center !important;
945  box-shadow: none !important;
946  transform: none !important;
947}
948.header-logo .brand-logo svg {
949  width: 29px !important;
950  height: 29px !important;
951  display: block !important;
952}
953.app-title-compact {
954  color: var(--green-900) !important;
955  font-weight: 900 !important;
956  letter-spacing: -0.03em !important;
957  font-size: 15px !important;
958  line-height: 1.2 !important;
959  white-space: nowrap !important;
960  overflow: hidden !important;
961  text-overflow: ellipsis !important;
962  max-width: 360px !important;
963}
964.phase-mini-chip {
965  border-radius: 999px !important;
966  padding: 5px 9px !important;
967  background: rgba(234,245,234,0.95) !important;
968  color: var(--green-800) !important;
969  font-size: 11.5px !important;
970  font-weight: 900 !important;
971  border: 1px solid rgba(79,138,96,0.22) !important;
972  white-space: nowrap !important;
973}
974.top-tabs { display: flex !important; align-items: center !important; gap: 4px !important; }
975.top-tab { min-height: 32px !important; padding: 0 10px !important; border-radius: 999px !important; font-size: 12.5px !important; font-weight: 800 !important; }
976.top-tab-active { background: rgba(79,138,96,0.12) !important; color: var(--green-900) !important; }
977
978/* ページ領域をヘッダー下に固定 */
979.page-wrap.chatgpt-page {
980  position: fixed !important;
981  top: 64px !important;
982  left: 0 !important;
983  right: 0 !important;
984  bottom: 0 !important;
985  width: 100% !important;
986  max-width: none !important;
987  margin: 0 !important;
988  padding: 0 !important;
989  overflow: hidden !important;
990  z-index: 1 !important;
991}
992
993.chatgpt-main {
994  width: min(920px, 100%) !important;
995  height: 100% !important;
996  min-height: 0 !important;
997  margin: 0 auto !important;
998  padding: 10px 12px 12px !important;
999  overflow: hidden !important;
1000  display: flex !important;
1001  flex-direction: column !important;
1002}
1003
1004.chat-shell {
1005  flex: 1 1 auto !important;
1006  min-height: 0 !important;
1007  height: 100% !important;
1008  display: flex !important;
1009  flex-direction: column !important;
1010  background: rgba(255,255,255,0.78) !important;
1011  border: 1px solid rgba(111,167,122,0.18) !important;
1012  border-radius: 22px !important;
1013  overflow: hidden !important;
1014  box-shadow: 0 10px 30px rgba(54,92,62,0.08) !important;
1015}
1016
1017.chat-head-compact {
1018  flex: 0 0 auto !important;
1019  padding: 12px 16px 9px !important;
1020  border-bottom: 1px solid rgba(111,167,122,0.14) !important;
1021  background: rgba(255,255,255,0.86) !important;
1022}
1023.chat-title-compact { color: var(--green-900) !important; font-weight: 900 !important; font-size: 17px !important; letter-spacing: -0.02em !important; }
1024.phase-inline { color: var(--muted) !important; font-size: 12px !important; line-height: 1.4 !important; }
1025
1026.chat-scroll-area {
1027  flex: 1 1 auto !important;
1028  min-height: 0 !important;
1029  overflow-y: auto !important;
1030  -webkit-overflow-scrolling: touch !important;
1031  padding: 16px 16px 12px !important;
1032  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.50)) !important;
1033}
1034.chat-scroll-area .chat-area {
1035  height: auto !important;
1036  min-height: 100% !important;
1037  overflow: visible !important;
1038  padding: 0 !important;
1039  background: transparent !important;
1040}
1041.chat-bubble-user { max-width: min(78%, 620px) !important; font-size: 15px !important; line-height: 1.85 !important; }
1042.chat-bubble-ai { max-width: min(84%, 680px) !important; font-size: 15px !important; line-height: 1.9 !important; }
1043.ai-avatar { width: 38px !important; height: 38px !important; margin-right: 9px !important; }
1044.ai-avatar svg { width: 31px !important; height: 31px !important; }
1045
1046.chat-input-fixed {
1047  flex: 0 0 auto !important;
1048  position: relative !important;
1049  bottom: auto !important;
1050  z-index: 10 !important;
1051  padding: 10px 14px max(12px, env(safe-area-inset-bottom)) !important;
1052  background: rgba(255,255,255,0.98) !important;
1053  border-top: 1px solid rgba(111,167,122,0.16) !important;
1054}
1055.chat-input-fixed .q-field--outlined .q-field__control,
1056.chat-input-fixed .q-field__control {
1057  border-radius: 999px !important;
1058  background: white !important;
1059  min-height: 46px !important;
1060}
1061.chat-input-fixed textarea { max-height: 96px !important; overflow-y: auto !important; }
1062.security-note-compact { display: none !important; }
1063.mobile-bottom-nav, .side-nav, .consult-phase-summary, .consult-intro { display: none !important; }
1064
1065/* 見立て・履歴画面は同じ固定領域内で自然スクロール */
1066.chatgpt-main > .q-column:not(.chat-shell) {
1067  flex: 1 1 auto !important;
1068  min-height: 0 !important;
1069  overflow-y: auto !important;
1070}
1071.current-phase-card.compact-insight { padding: 18px !important; border-radius: 22px !important; }
1072.current-phase-card.compact-insight .current-phase-title { font-size: 22px !important; letter-spacing: -0.02em !important; }
1073.current-phase-card.compact-insight .current-phase-subtitle { font-size: 14px !important; line-height: 1.8 !important; }
1074.current-phase-card.compact-insight .phase-track { margin: 12px 0 0 !important; gap: 8px !important; }
1075.current-phase-card.compact-insight .phase-dot { height: 7px !important; }
1076
1077@media (max-width: 700px) {
1078  .q-page-container { padding-top: 62px !important; }
1079  .top-bar { height: 62px !important; min-height: 62px !important; }
1080  .header-inner { height: 62px !important; padding: 0 8px !important; }
1081  .header-logo { flex: 1 1 auto !important; }
1082  .header-logo .brand-logo { width: 34px !important; height: 34px !important; min-width: 34px !important; }
1083  .header-logo .brand-logo svg { width: 28px !important; height: 28px !important; }
1084  .app-title-compact { max-width: 185px !important; font-size: 12.2px !important; line-height: 1.14 !important; }
1085  .phase-mini-chip { display: none !important; }
1086  .top-tabs { flex: 0 0 auto !important; gap: 1px !important; }
1087  .top-tab { min-height: 30px !important; padding: 0 6px !important; font-size: 11px !important; }
1088  .top-tab .q-icon { display: none !important; }
1089  .page-wrap.chatgpt-page { top: 62px !important; }
1090  .chatgpt-main { width: 100% !important; padding: 0 !important; }
1091  .chat-shell { border-left: none !important;
1091 border-right: none !important; border-bottom: none !important; border-radius: 0 !important; box-shadow: none !important; }
1092  .chat-head-compact { padding: 9px 10px 7px !important; }
1093  .chat-title-compact { font-size: 15px !important; }
1094  .phase-inline { font-size: 11.5px !important; }
1095  .chat-scroll-area { padding: 12px 9px 10px !important; }
1096  .chat-bubble-user, .chat-bubble-ai { max-width: 88% !important; font-size: 14.5px !important; }
1097  .ai-avatar { width: 33px !important; height: 33px !important; margin-right: 7px !important; }
1098  .ai-avatar svg { width: 27px !important; height: 27px !important; }
1099  .chat-input-fixed { padding: 8px 9px max(9px, env(safe-area-inset-bottom)) !important; }
1100  .chat-input-fixed .q-btn { width: 46px !important; height: 46px !important; }
1101}
1102
1103@media (max-width: 430px) {
1104  .app-title-compact { max-width: 150px !important; font-size: 11.5px !important; }
1105  .top-tab { padding: 0 5px !important; font-size: 10.5px !important; }
1106}
1107</style>
1108
1109
1110    <!-- prevent Prettier from removing this line -->
1111    
1112    <link rel="modulepreload" href="/_nicegui/3.14.0/static/vue.esm-browser.prod.js" />
1113    
1114    <link rel="modulepreload" href="/_nicegui/3.14.0/components/208ef49bf410d5e67fb87f0a2b034d2d/html.js" />
1115    
1116    <link rel="modulepreload" href="/_nicegui/3.14.0/components/208ef49bf410d5e67fb87f0a2b034d2d/input.js" />
1117    
1118    <!-- prevent Prettier from removing this line -->
1119    
1120    <style type="text/tailwindcss">
1121      @custom-variant dark (&:where(body.body--dark, body.body--dark *));
1122    </style>
1123    
1124    <!-- prevent Prettier from removing this line -->
1125    
1126  </head>
1127  <body>
1128    
1128<script defer src="/_nicegui/3.14.0/static/socket.io.min.js"></script>
1128
1129    
1130    
1130<script defer src="/_nicegui/3.14.0/static/tailwindcss.min.js"></script>
1130
1131    
1132    
1132<script type="module">
1133      import * as Vue from "vue";
1134      globalThis.Vue = Vue;
1135      document.getElementById("esm-fallback")?.remove();
1136    </script>
1136
1137    
1138    
1138<script defer src="/_nicegui/3.14.0/static/quasar.umd.prod.js"></script>
1138
1139    
1140    
1140<script defer src="/_nicegui/3.14.0/static/nicegui.js"></script>
1140
1141
1142    
1142<script defer src="/_nicegui/3.14.0/static/lang/en-US.umd.prod.js"></script>
1142
1143    <style></style>
1144
1145
1146
1147    <style>
1148      #esm-fallback {
1149        display: flex;
1150        justify-content: center;
1151        align-items: center;
1152        text-align: center;
1153        height: 100vh;
1154        font-family: sans-serif;
1155        color: #888;
1156        opacity: 0;
1157        animation: esm-fallback-reveal 0s 1s forwards;
1158      }
1159      @keyframes esm-fallback-reveal {
1160        to {
1161          opacity: 1;
1162        }
1163      }
1164      #esm-fallback ~ * {
1165        display: none;
1166      }
1167    </style>
1168    <div id="esm-fallback">Your browser does not support ES modules.<br />Please use a modern browser.</div>
1169    <div id="app" ></div>
1170    <div id="nicegui-keep-alive-cache" style="display: none" aria-hidden="true"></div>
1171    <div id="popup" class="nicegui-error-popup" aria-hidden="true">
1172      <span>Connection lost.</span>
1173      <span>Trying to reconnect...</span>
1174    </div>
1175    <div id="too_long_message_popup" class="nicegui-error-popup" aria-hidden="true">
1176      <span>Message too long</span>
1177      <span>The message is too large for WebSocket transmission.</span>
1178    </div>
1179    
1179<script type="module">
1180      // Load DOMPurify for HTML sanitization
1181      // NOTE: Always use DOMPurify instead of native setHTML because native setHTML strips class attributes.
1182      import DOMPurify from "dompurify";
1183      Element.prototype.setHTML = function (html) {
1184        this.innerHTML = DOMPurify.sanitize(html);
1185      };
1186
1187      const app = createApp(parseElements(String.raw`{"0":{"tag":"q-layout","class":["nicegui-layout"],"props":{"view":"hhh lpr fff"},"children":[1],"events":[{"listener_id":"4f60f63a-38dc-40eb-bef2-537c04f20cef","type":"sub_pages_open","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null},{"listener_id":"40ea4f1a-9596-4108-98ab-dfe3760f039a","type":"sub_pages_navigate","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"1":{"tag":"q-page-container","children":[2]},"2":{"tag":"q-page","children":[3]},"3":{"tag":"div","class":["nicegui-content"],"children":[4]},"4":{"tag":"div","class":["nicegui-column","page-wrap"],"children":[5]},"5":{"tag":"q-card","class":["nicegui-card","login-card","app-card"],"children":[6,10,12]},"6":{"tag":"div","class":["nicegui-column","items-center","gap-3","w-full"],"children":[7,8,9]},"7":{"tag":"nicegui-html","props":{"innerHTML":"\n    &lt;div class=\"brand-logo \"&gt;\n      &lt;svg viewBox=\"0 0 72 72\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\"&gt;\n        &lt;!-- trunk --&gt;\n        &lt;path d=\"M36 58V31\" stroke=\"#7A552B\" stroke-width=\"5\" stroke-linecap=\"round\"/&gt;\n        &lt;path d=\"M36 42C29 38 22 32 19 23\" stroke=\"#8A6232\" stroke-width=\"3.2\" stroke-linecap=\"round\"/&gt;\n        &lt;path d=\"M36 39C44 35 50 29 54 20\" stroke=\"#8A6232\" stroke-width=\"3.2\" stroke-linecap=\"round\"/&gt;\n        &lt;path d=\"M36 34C32 29 30 24 29 17\" stroke=\"#8A6232\" stroke-width=\"2.8\" stroke-linecap=\"round\"/&gt;\n        &lt;!-- leaves --&gt;\n        &lt;ellipse cx=\"18\" cy=\"21\" rx=\"6.5\" ry=\"8\" fill=\"#7FB06B\" transform=\"rotate(-35 18 21)\"/&gt;\n        &lt;ellipse cx=\"28\" cy=\"13\" rx=\"7\" ry=\"8.5\" fill=\"#5F9A55\" transform=\"rotate(-16 28 13)\"/&gt;\n        &lt;ellipse cx=\"43\" cy=\"14\" rx=\"7\" ry=\"8.5\" fill=\"#6FA65D\" transform=\"rotate(18 43 14)\"/&gt;\n        &lt;ellipse cx=\"55\" cy=\"23\" rx=\"6.5\" ry=\"8\" fill=\"#86B875\" transform=\"rotate(35 55 23)\"/&gt;\n        &lt;ellipse cx=\"25\" cy=\"31\" rx=\"6.5\" ry=\"7.5\" fill=\"#8DBF7C\" transform=\"rotate(-55 25 31)\"/&gt;\n        &lt;ellipse cx=\"47\" cy=\"31\" rx=\"6.5\" ry=\"7.5\" fill=\"#7CAF6B\" transform=\"rotate(55 47 31)\"/&gt;\n        &lt;!-- pecan nuts --&gt;\n        &lt;ellipse cx=\"24\" cy=\"52\" rx=\"4.3\" ry=\"6.2\" fill=\"#B47A33\" transform=\"rotate(28 24 52)\"/&gt;\n        &lt;path d=\"M22 49.5C24.6 51.4 25.9 53.8 26.1 56\" stroke=\"#7A552B\" stroke-width=\"1.1\" stroke-linecap=\"round\" opacity=\"0.6\"/&gt;\n        &lt;ellipse cx=\"48\" cy=\"52\" rx=\"4.3\" ry=\"6.2\" fill=\"#B47A33\" transform=\"rotate(-28 48 52)\"/&gt;\n        &lt;path d=\"M50 49.5C47.4 51.4 46.1 53.8 45.9 56\" stroke=\"#7A552B\" stroke-width=\"1.1\" stroke-linecap=\"round\" opacity=\"0.6\"/&gt;\n        &lt;!-- ground --&gt;\n        &lt;path d=\"M21 62h30\" stroke=\"#7FB06B\" stroke-width=\"4\" stroke-linecap=\"round\" opacity=\"0.55\"/&gt;\n      &lt;/svg&gt;\n    &lt;/div&gt;\n    ","tag":"div","sanitize":true}},"8":{"tag":"div","text":"不登校・ひきこもり相談AIエージェントへようこそ","class":["title-main","text-2xl","text-center","w-full"]},"9":{"tag":"div","text":"アクセスにはパスワードが必要です","class":["subtitle","text-center","w-full"]},"10":{"tag":"nicegui-input","class":["w-full"],"props":{"value":"","loopback":false,"error":null,"label":"アクセス用パスワード","for":"c10","placeholder":"パスワードを入力","type":"password","_autocomplete":[],"outlined":true},"slots":{"append":{"ids":[11]}}
1187,"events":[{"listener_id":"3482ed62-7b76-41af-8221-fe23070ce851","type":"update:value","specials":[],"modifiers":[],"keys":[],"args":[null],"throttle":0,"leading_events":true,"trailing_events":true,"js_handler":null},{"listener_id":"409e8b6f-a880-4790-9f5f-0ac45fd439cf","type":"keydown","specials":[],"modifiers":[],"keys":["enter"],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"11":{"tag":"q-icon","style":{"cursor":"pointer"},"props":{"name":"visibility_off"},"events":[{"listener_id":"0d068707-eb1e-40f0-ad10-f0f5d91c9099","type":"click","specials":[],"modifiers":[],"keys":[],"args":null,"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]},"12":{"tag":"q-btn","class":["w-full"],"props":{"color":"green","label":"はじめる","icon":"arrow_forward"},"events":[{"listener_id":"d3aec217-2a7e-4c95-88e9-49ac4d2769bc","type":"click","specials":[],"modifiers":[],"keys":[],"args":[],"throttle":0.0,"leading_events":true,"trailing_events":true,"js_handler":null}]}}`), {
1188        version: "3.14.0",
1189        prefix: "",
1190        query: {'client_id': 'c15e5c3e-491a-450c-935a-dbe127f327da', 'next_message_id': 0, 'implicit_handshake': True},
1191        extraHeaders: {},
1192        transports: ['websocket', 'polling'],
1193      });
1194      const dark = False;
1195      const language = "en-US";
1196      const vue_config = {"brand":{"primary":"#5898d4","secondary":"#26a69a","accent":"#9c27b0","dark":"#1d1d1d","dark-page":"#121212","positive":"#21ba45","negative":"#c10015","info":"#31ccec","warning":"#f2c037"},"loadingBar":{"color":"primary","skipHijack":false},"lang":{"noHtmlAttrs":true}};
1197      
1198        app.use(Quasar, {config: vue_config});
1199        applyColors(vue_config.brand);
1200        Quasar.lang.set(Quasar.lang[language.replace('-', '')]);
1201        darkSetter = (dark) => Quasar.Dark.set(dark === None ? "auto" : dark);
1202        setDark(dark);
1203    
1204
1205      import { default as html } from "/_nicegui/3.14.0/components/208ef49bf410d5e67fb87f0a2b034d2d/html.js";
1206app.component("nicegui-html", html);
1207import { default as input } from "/_nicegui/3.14.0/components/208ef49bf410d5e67fb87f0a2b034d2d/input.js";
1208app.component("nicegui-input", input);
1209      
1210
1211      app.mount("#app");
1212
1213      // Scroll to fragment after Vue mounts (browser's native scroll may have failed if element wasn't ready)
1214      if (window.location.hash) {
1215        Vue.nextTick(() => {
1216          const fragment = window.location.hash.substring(1);
1217          (document.getElementById(fragment) || document.querySelector(`a[name="${fragment}"]`))?.scrollIntoView();
1218        });
1219      }
1220    </script>
1220
1221  </body>
1222</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.