@oratis/lisa 0.11.1 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (142) hide show
  1. package/dist/agent.d.ts +2 -0
  2. package/dist/agent.d.ts.map +1 -1
  3. package/dist/agent.js +20 -1
  4. package/dist/agent.js.map +1 -1
  5. package/dist/agents/pty.d.ts.map +1 -1
  6. package/dist/agents/pty.js +13 -2
  7. package/dist/agents/pty.js.map +1 -1
  8. package/dist/autonomy/state.d.ts +14 -0
  9. package/dist/autonomy/state.d.ts.map +1 -0
  10. package/dist/autonomy/state.js +54 -0
  11. package/dist/autonomy/state.js.map +1 -0
  12. package/dist/cli/mail.d.ts +2 -0
  13. package/dist/cli/mail.d.ts.map +1 -0
  14. package/dist/cli/mail.js +209 -0
  15. package/dist/cli/mail.js.map +1 -0
  16. package/dist/cli/pair.d.ts +15 -0
  17. package/dist/cli/pair.d.ts.map +1 -0
  18. package/dist/cli/pair.js +152 -0
  19. package/dist/cli/pair.js.map +1 -0
  20. package/dist/cli.js +22 -14
  21. package/dist/cli.js.map +1 -1
  22. package/dist/consent/store.d.ts +2 -2
  23. package/dist/consent/store.d.ts.map +1 -1
  24. package/dist/consent/store.js +3 -2
  25. package/dist/consent/store.js.map +1 -1
  26. package/dist/edition.d.ts +24 -0
  27. package/dist/edition.d.ts.map +1 -0
  28. package/dist/edition.js +19 -0
  29. package/dist/edition.js.map +1 -0
  30. package/dist/heartbeat/runner.d.ts.map +1 -1
  31. package/dist/heartbeat/runner.js +8 -0
  32. package/dist/heartbeat/runner.js.map +1 -1
  33. package/dist/idle/runner.d.ts.map +1 -1
  34. package/dist/idle/runner.js +7 -0
  35. package/dist/idle/runner.js.map +1 -1
  36. package/dist/mail/accounts.d.ts +20 -0
  37. package/dist/mail/accounts.d.ts.map +1 -0
  38. package/dist/mail/accounts.js +113 -0
  39. package/dist/mail/accounts.js.map +1 -0
  40. package/dist/mail/alerts.d.ts +29 -0
  41. package/dist/mail/alerts.d.ts.map +1 -0
  42. package/dist/mail/alerts.js +40 -0
  43. package/dist/mail/alerts.js.map +1 -0
  44. package/dist/mail/classify.d.ts +26 -0
  45. package/dist/mail/classify.d.ts.map +1 -0
  46. package/dist/mail/classify.js +191 -0
  47. package/dist/mail/classify.js.map +1 -0
  48. package/dist/mail/connectors/gmail.d.ts +55 -0
  49. package/dist/mail/connectors/gmail.d.ts.map +1 -0
  50. package/dist/mail/connectors/gmail.js +87 -0
  51. package/dist/mail/connectors/gmail.js.map +1 -0
  52. package/dist/mail/connectors/imap.d.ts +13 -0
  53. package/dist/mail/connectors/imap.d.ts.map +1 -0
  54. package/dist/mail/connectors/imap.js +136 -0
  55. package/dist/mail/connectors/imap.js.map +1 -0
  56. package/dist/mail/digest.d.ts +21 -0
  57. package/dist/mail/digest.d.ts.map +1 -0
  58. package/dist/mail/digest.js +89 -0
  59. package/dist/mail/digest.js.map +1 -0
  60. package/dist/mail/google-oauth.d.ts +50 -0
  61. package/dist/mail/google-oauth.d.ts.map +1 -0
  62. package/dist/mail/google-oauth.js +74 -0
  63. package/dist/mail/google-oauth.js.map +1 -0
  64. package/dist/mail/hosts.d.ts +3 -0
  65. package/dist/mail/hosts.d.ts.map +1 -0
  66. package/dist/mail/hosts.js +19 -0
  67. package/dist/mail/hosts.js.map +1 -0
  68. package/dist/mail/scheduler.d.ts +9 -0
  69. package/dist/mail/scheduler.d.ts.map +1 -0
  70. package/dist/mail/scheduler.js +21 -0
  71. package/dist/mail/scheduler.js.map +1 -0
  72. package/dist/mail/service.d.ts +32 -0
  73. package/dist/mail/service.d.ts.map +1 -0
  74. package/dist/mail/service.js +129 -0
  75. package/dist/mail/service.js.map +1 -0
  76. package/dist/mail/store.d.ts +7 -0
  77. package/dist/mail/store.d.ts.map +1 -0
  78. package/dist/mail/store.js +58 -0
  79. package/dist/mail/store.js.map +1 -0
  80. package/dist/mail/types.d.ts +114 -0
  81. package/dist/mail/types.d.ts.map +1 -0
  82. package/dist/mail/types.js +26 -0
  83. package/dist/mail/types.js.map +1 -0
  84. package/dist/providers/anthropic.d.ts.map +1 -1
  85. package/dist/providers/anthropic.js +43 -21
  86. package/dist/providers/anthropic.js.map +1 -1
  87. package/dist/providers/gemini.d.ts.map +1 -1
  88. package/dist/providers/gemini.js +67 -64
  89. package/dist/providers/gemini.js.map +1 -1
  90. package/dist/providers/openai.d.ts.map +1 -1
  91. package/dist/providers/openai.js +77 -71
  92. package/dist/providers/openai.js.map +1 -1
  93. package/dist/providers/registry.d.ts +10 -0
  94. package/dist/providers/registry.d.ts.map +1 -1
  95. package/dist/providers/registry.js +26 -0
  96. package/dist/providers/registry.js.map +1 -1
  97. package/dist/providers/stream-retry.d.ts +37 -0
  98. package/dist/providers/stream-retry.d.ts.map +1 -0
  99. package/dist/providers/stream-retry.js +92 -0
  100. package/dist/providers/stream-retry.js.map +1 -0
  101. package/dist/providers/types.d.ts +3 -0
  102. package/dist/providers/types.d.ts.map +1 -1
  103. package/dist/subagent.d.ts +2 -0
  104. package/dist/subagent.d.ts.map +1 -1
  105. package/dist/subagent.js +1 -0
  106. package/dist/subagent.js.map +1 -1
  107. package/dist/web/cloudAuth.d.ts +57 -0
  108. package/dist/web/cloudAuth.d.ts.map +1 -0
  109. package/dist/web/cloudAuth.js +139 -0
  110. package/dist/web/cloudAuth.js.map +1 -0
  111. package/dist/web/island.d.ts.map +1 -1
  112. package/dist/web/island.js +1 -0
  113. package/dist/web/island.js.map +1 -1
  114. package/dist/web/lisa-client.d.ts +1 -1
  115. package/dist/web/lisa-client.d.ts.map +1 -1
  116. package/dist/web/lisa-client.js +703 -40
  117. package/dist/web/lisa-client.js.map +1 -1
  118. package/dist/web/lisa-css.d.ts +1 -1
  119. package/dist/web/lisa-css.d.ts.map +1 -1
  120. package/dist/web/lisa-css.js +568 -43
  121. package/dist/web/lisa-css.js.map +1 -1
  122. package/dist/web/lisa-html.d.ts +1 -1
  123. package/dist/web/lisa-html.d.ts.map +1 -1
  124. package/dist/web/lisa-html.js +71 -21
  125. package/dist/web/lisa-html.js.map +1 -1
  126. package/dist/web/pairing.d.ts +37 -0
  127. package/dist/web/pairing.d.ts.map +1 -0
  128. package/dist/web/pairing.js +79 -0
  129. package/dist/web/pairing.js.map +1 -0
  130. package/dist/web/push.d.ts +91 -0
  131. package/dist/web/push.d.ts.map +1 -1
  132. package/dist/web/push.js +250 -9
  133. package/dist/web/push.js.map +1 -1
  134. package/dist/web/qr-svg.d.ts +11 -0
  135. package/dist/web/qr-svg.d.ts.map +1 -0
  136. package/dist/web/qr-svg.js +41 -0
  137. package/dist/web/qr-svg.js.map +1 -0
  138. package/dist/web/server.d.ts +1 -1
  139. package/dist/web/server.d.ts.map +1 -1
  140. package/dist/web/server.js +378 -14
  141. package/dist/web/server.js.map +1 -1
  142. package/package.json +4 -1
package/dist/web/lisa-client.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lisa-client.js","sourceRoot":"","sources":["../../src/web/lisa-client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MA0zCxB,CAAC"}
1
+ {"version":3,"file":"lisa-client.js","sourceRoot":"","sources":["../../src/web/lisa-client.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAi9DxB,CAAC"}
package/dist/web/lisa-css.d.ts CHANGED
@@ -9,5 +9,5 @@
9
9
  * No interpolation or backticks appear in the original CSS text, so it is
10
10
  * a plain template literal with no ${} placeholders.
11
11
  */
12
- export declare const MAIN_CSS = " :root {\n color-scheme: dark;\n\n /* New design tokens (mockup) */\n --accent: #6ad4ff;\n --accent-soft: rgba(106, 212, 255, 0.13);\n --accent-glow: rgba(106, 212, 255, 0.27);\n --warm: #ffd066;\n --dream: #b487ff;\n --claude: #ff8c42;\n --err-color: #ff5577;\n\n --bg-deep: #07091a;\n --bg-1: #0b1024;\n --bg-2: #11163a;\n --bg-3: #1a1f4a;\n --bg-card: rgba(20, 26, 64, 0.65);\n --bg-card-strong: rgba(20, 26, 64, 0.88);\n --border-new: rgba(255, 255, 255, 0.07);\n --border-strong: rgba(255, 255, 255, 0.14);\n\n --fg: #e8eaff;\n --fg-2: #aeb5d3;\n --fg-3: #6c7398;\n --fg-faint: #444a6e;\n\n /* Legacy tokens \u2014 kept so the unchanged modal / cfg / birth\n overlay styles below still resolve. The new shell + chat use\n the modern tokens above. */\n --bg: #0a0d2b;\n --panel: #1a1f4d;\n --panel-light: #2a3270;\n --border: #6a7ad9;\n --border-light: #a4b2ff;\n --text: #e7ecff;\n --text-dim: #8090c0;\n --you: #6cf6e1;\n --lisa: #ffd167;\n --tool: #ff7eb6;\n --error: #ff5577;\n }\n * { box-sizing: border-box; }\n html, body {\n height: 100%;\n margin: 0;\n background: #000;\n font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Inter\", system-ui, sans-serif;\n -webkit-font-smoothing: antialiased;\n color: var(--fg);\n overflow: hidden;\n }\n\n /* \u2500\u2500 App shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .frame {\n height: 100vh;\n width: 100vw;\n display: grid;\n grid-template-columns: 280px 1fr;\n grid-template-rows: 36px 1fr;\n grid-template-areas:\n \"titlebar titlebar\"\n \"sidebar main\";\n background:\n radial-gradient(ellipse at 30% 20%, #1a1238 0%, transparent 50%),\n radial-gradient(ellipse at 80% 70%, #0a1f3a 0%, transparent 60%),\n linear-gradient(180deg, var(--bg-1) 0%, var(--bg-deep) 100%);\n overflow: hidden;\n }\n\n /* Title bar \u2014 visually shows \"Lisa \u00B7 session-id\". The actual drag\n behavior is handled Swift-side by a transparent NSView overlay\n (DragHandleView) placed on top of the WKWebView for the same 36pt\n strip \u2014 WebKit ignores the CSS -webkit-app-region: drag property,\n so the cosmetic HTML and the functional drag region are two\n separate things.\n Padding-left reserves the ~78pt that the macOS traffic-light\n buttons occupy at top-left. */\n .titlebar {\n grid-area: titlebar;\n background: rgba(7, 9, 26, 0.55);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border-bottom: 1px solid var(--border-new);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 14px 0 78px;\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.04em;\n color: var(--fg-2);\n /* nothing here should ever capture pointer events \u2014 the NSView\n overlay above handles dragging, and there are no interactive\n elements in the HTML titlebar. */\n user-select: none;\n pointer-events: none;\n }\n .titlebar .session-tag {\n color: var(--fg-3);\n font-weight: 400;\n margin-left: 6px;\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n font-size: 11px;\n letter-spacing: 0;\n }\n\n /* \u2500\u2500 Sidebar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .sidebar {\n grid-area: sidebar;\n background: rgba(7, 9, 26, 0.4);\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n border-right: 1px solid var(--border-new);\n overflow-y: auto;\n padding: 20px 16px 16px;\n display: flex;\n flex-direction: column;\n gap: 18px;\n }\n\n /* Identity card */\n .identity {\n display: grid;\n grid-template-columns: 56px 1fr;\n gap: 12px;\n align-items: center;\n padding: 12px;\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 14px;\n }\n .identity .avatar-wrap {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n position: relative;\n border: 1px solid var(--border-strong);\n box-shadow: 0 0 0 3px var(--accent-soft);\n background: #15192a;\n }\n .identity .avatar-wrap img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n object-position: 50% 22%;\n image-rendering: pixelated;\n display: block;\n transition: opacity 250ms ease;\n user-select: none;\n -webkit-user-drag: none;\n }\n .identity .avatar-wrap img.fading { opacity: 0; }\n .identity .avatar-wrap::after {\n content: \"\";\n position: absolute;\n right: -2px;\n bottom: -2px;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #4ade80;\n border: 2px solid var(--bg-1);\n }\n .identity h1 {\n margin: 0 0 2px;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: 0.02em;\n color: var(--fg);\n }\n .identity .sub {\n margin: 0;\n font-size: 11px;\n color: var(--fg-3);\n }\n .identity .mood {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n margin-top: 4px;\n font-size: 10.5px;\n color: var(--accent);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n font-weight: 600;\n }\n .identity .mood::before {\n content: \"\";\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--accent);\n box-shadow: 0 0 6px var(--accent-glow);\n }\n\n /* Sidebar plain text section (\"currently wanting\") */\n .sb-section { display: flex; flex-direction: column; gap: 6px; }\n .sb-section h2 {\n margin: 0 0 2px;\n font-size: 10.5px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.10em;\n color: var(--fg-3);\n padding-left: 4px;\n }\n .sb-section .body-text {\n margin: 0;\n font-size: 12px;\n line-height: 1.55;\n color: var(--fg-2);\n padding: 0 4px;\n }\n\n /* Live mini-cards (Claude monitor / last reflection) */\n .card {\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 12px;\n padding: 10px 12px;\n font-size: 12px;\n color: var(--fg-2);\n line-height: 1.5;\n }\n .card.tint-claude {\n border-color: rgba(255, 140, 66, 0.20);\n background: linear-gradient(180deg, rgba(255, 140, 66, 0.06), rgba(255, 140, 66, 0.02));\n }\n .card.tint-idle {\n border-color: rgba(255, 208, 102, 0.22);\n background: linear-gradient(180deg, rgba(255, 208, 102, 0.07), rgba(255, 208, 102, 0.02));\n }\n .card .h {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 4px;\n }\n .card .h .left {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 10.5px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.10em;\n color: var(--claude);\n }\n .card.tint-idle .h .left { color: var(--warm); }\n .card .h .count {\n background: rgba(255, 140, 66, 0.16);\n color: var(--claude);\n font-size: 11px;\n font-weight: 600;\n padding: 2px 7px;\n border-radius: 8px;\n }\n .card.tint-idle .h .count {\n background: rgba(255, 208, 102, 0.16);\n color: var(--warm);\n }\n .session-row {\n display: grid;\n grid-template-columns: 7px 1fr auto;\n align-items: center;\n gap: 7px;\n padding: 5px 0;\n font-size: 11.5px;\n border-top: 1px dashed rgba(255, 140, 66, 0.10);\n cursor: default;\n }\n .session-row:first-of-type { border-top: 0; }\n .session-row .pip {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: var(--fg-faint);\n }\n /* working = calm slow breathe (running, not actionable);\n waiting = solid + a soft halo that draws the eye (\"needs you\"). */\n .session-row .pip.working { background: var(--claude); opacity: 1; animation: breathe 2.6s ease-in-out infinite; }\n .session-row .pip.waiting { background: var(--claude); opacity: 1; animation: needsYou 2s ease-in-out infinite; }\n .session-row .pip.error { background: var(--err-color); }\n .session-row .name {\n color: var(--fg);\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n /* D4a \u2014 agent-kind chip rendered inline before the project name, so the\n multi-agent sidebar reads which tool each row belongs to. */\n .session-row .agent-badge {\n display: inline-block;\n font-size: 9px;\n font-weight: 700;\n letter-spacing: 0.02em;\n text-transform: lowercase;\n color: var(--claude);\n background: rgba(255, 140, 66, 0.12);\n border: 1px solid rgba(255, 140, 66, 0.22);\n border-radius: 999px;\n padding: 0 5px;\n margin-right: 5px;\n vertical-align: 1px;\n }\n .session-row .when {\n color: var(--fg-3);\n font-variant-numeric: tabular-nums;\n font-size: 10.5px;\n }\n /* Second line under name/when: structural activity (turns/tokens/tool\u00B7file). */\n .session-row .session-act {\n grid-column: 2 / -1;\n margin-top: 2px;\n font-size: 10px;\n color: var(--fg-3);\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n /* Managed-agent controls (approve/deny \u00B7 send follow-up \u00B7 cancel). */\n .session-row .session-ctrl {\n grid-column: 2 / -1;\n margin-top: 4px;\n display: flex;\n gap: 6px;\n align-items: center;\n flex-wrap: wrap;\n }\n .session-ctrl .mc {\n font-size: 10px;\n padding: 2px 8px;\n border-radius: 6px;\n border: 1px solid var(--border);\n background: var(--panel2, rgba(255,255,255,0.05));\n color: var(--fg);\n cursor: pointer;\n }\n .session-ctrl .mc.approve { color: var(--green, #6bff9d); border-color: rgba(107,255,157,0.4); }\n .session-ctrl .mc.deny,\n .session-ctrl .mc.cancel { color: var(--err-color, #ff5577); border-color: rgba(255,85,119,0.4); }\n .session-ctrl .mc.adopt { color: var(--brand, #6ad4ff); border-color: rgba(106,212,255,0.4); }\n .session-ctrl .mc:hover { background: rgba(255,255,255,0.10); }\n .session-ctrl .mc-send {\n flex: 1;\n min-width: 90px;\n font-size: 10.5px;\n padding: 2px 7px;\n border-radius: 6px;\n border: 1px solid var(--border);\n background: rgba(0,0,0,0.25);\n color: var(--fg);\n }\n /* \"Delegate a task\" composer at the top of the agents card. */\n .delegate {\n display: flex;\n gap: 6px;\n margin: 2px 0 8px;\n }\n .delegate input {\n flex: 1;\n font-size: 11px;\n padding: 4px 8px;\n border-radius: 7px;\n border: 1px solid var(--border);\n background: rgba(0,0,0,0.25);\n color: var(--fg);\n }\n .delegate select {\n font-size: 10.5px;\n padding: 3px 4px;\n border-radius: 7px;\n border: 1px solid var(--border);\n background: rgba(0,0,0,0.25);\n color: var(--fg-2);\n cursor: pointer;\n }\n .delegate button {\n font-size: 11px;\n padding: 4px 10px;\n border-radius: 7px;\n border: 1px solid var(--claude, #ff8c42);\n background: rgba(255,140,66,0.16);\n color: var(--claude, #ff8c42);\n cursor: pointer;\n }\n .delegate button:hover { background: rgba(255,140,66,0.28); }\n .session-empty {\n color: var(--fg-faint);\n font-size: 11.5px;\n font-style: italic;\n padding: 4px 0 2px;\n }\n @keyframes pulse {\n 0%, 100% { opacity: 0.35; }\n 50% { opacity: 1; }\n }\n /* Gentle breathing for \"working\" \u2014 present but not jumpy. */\n @keyframes breathe {\n 0%, 100% { opacity: 0.55; }\n 50% { opacity: 1; }\n }\n /* \"needs you\" \u2014 solid dot with a pulsing warm halo, prominent without the\n harsh on/off flash. */\n @keyframes needsYou {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 66, 0); }\n 50% { box-shadow: 0 0 7px 2px rgba(255, 140, 66, 0.65); }\n }\n\n /* Compact SOUL / SKILLS / MEMORY / TOOLS row */\n .badges {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 6px;\n }\n .badge {\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n color: var(--fg-2);\n font-family: inherit;\n font-size: 10.5px;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n padding: 7px 8px;\n border-radius: 8px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n transition: background 120ms ease, color 120ms ease, border-color 120ms ease;\n }\n .badge:hover {\n background: var(--bg-card-strong);\n color: var(--fg);\n border-color: var(--border-strong);\n }\n .badge img {\n width: 14px;\n height: 14px;\n image-rendering: pixelated;\n opacity: 0.8;\n }\n\n /* Sidebar footer \u2014 session id + sessions count */\n .sb-footer {\n margin-top: auto;\n padding-top: 12px;\n border-top: 1px solid var(--border-new);\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--fg-3);\n font-size: 11px;\n }\n .sb-footer .session-id {\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n font-size: 10px;\n color: var(--fg-3);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n flex: 1;\n min-width: 0;\n }\n .sb-footer .badge-count {\n background: var(--bg-3);\n color: var(--fg-2);\n border-radius: 6px;\n padding: 1px 6px;\n font-size: 10px;\n font-variant-numeric: tabular-nums;\n flex-shrink: 0;\n }\n\n /* \u2500\u2500 Main pane \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .main {\n grid-area: main;\n display: grid;\n grid-template-rows: 1fr auto auto;\n overflow: hidden;\n background:\n radial-gradient(ellipse at 50% -30%, rgba(106, 212, 255, 0.06) 0%, transparent 60%),\n linear-gradient(180deg, transparent, rgba(106, 212, 255, 0.015));\n }\n\n #log {\n overflow-y: auto;\n padding: 22px 28px 24px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n scroll-behavior: smooth;\n }\n\n /* Chat author label (.role .you/.lisa) */\n .role {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n padding: 6px 2px 0;\n margin-top: 6px;\n }\n .role.you { color: var(--accent); text-align: right; }\n .role.lisa { color: var(--warm); }\n\n /* Message bubble */\n .msg {\n display: block;\n max-width: 88%;\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 14px;\n padding: 9px 13px;\n font-size: 13px;\n line-height: 1.55;\n color: var(--fg);\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n /* \"you\" bubbles sit on the right with cyan tint */\n .role.you + .msg {\n margin-left: auto;\n background: linear-gradient(160deg, rgba(106, 212, 255, 0.12), rgba(106, 212, 255, 0.06));\n border-color: rgba(106, 212, 255, 0.25);\n }\n /* attachment label sits compactly under the user bubble */\n .msg.attach-label {\n margin-top: 2px;\n background: transparent;\n border: 0;\n padding: 0 2px;\n font-size: 10.5px;\n color: var(--fg-3);\n max-width: 88%;\n margin-left: auto;\n }\n\n /* Thinking indicator */\n .thinking {\n font-size: 12px;\n color: var(--fg-3);\n font-style: italic;\n padding: 4px 2px;\n letter-spacing: 0.03em;\n }\n\n /* Tool call card */\n .tool-block {\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 10px;\n padding: 8px 12px;\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n font-size: 11px;\n color: var(--fg-2);\n margin: 4px 0;\n max-width: 92%;\n }\n .tool-block.tool-error {\n border-color: rgba(255, 85, 119, 0.30);\n background: rgba(255, 85, 119, 0.05);\n }\n .tool-head {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--accent);\n font-weight: 600;\n }\n .tool-block.tool-error .tool-head { color: var(--err-color); }\n .tool-icon { font-size: 12px; }\n .tool-spinner { color: var(--fg-3); font-weight: 400; margin-left: auto; font-size: 12px; }\n .tool-input {\n color: var(--fg-3);\n margin-top: 4px;\n white-space: pre-wrap;\n word-break: break-word;\n }\n .tool-result {\n color: var(--fg-2);\n margin-top: 4px;\n padding-top: 4px;\n border-top: 1px dashed var(--border-new);\n white-space: pre-wrap;\n max-height: 160px;\n overflow-y: auto;\n }\n\n .err {\n color: var(--err-color);\n font-size: 12px;\n padding: 6px 2px;\n }\n\n /* Idle pulse + while-you-were-away banner injected into #log */\n .idle-pulse {\n color: var(--dream);\n font-size: 12px;\n font-style: italic;\n padding: 4px 2px;\n letter-spacing: 0.03em;\n }\n .idle-block {\n background: linear-gradient(180deg, rgba(180, 135, 255, 0.10), rgba(180, 135, 255, 0.02));\n border: 1px solid rgba(180, 135, 255, 0.30);\n border-radius: 14px;\n padding: 12px 14px;\n margin: 6px 0;\n font-size: 12.5px;\n line-height: 1.6;\n color: var(--fg);\n }\n .idle-head {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.10em;\n color: var(--dream);\n font-weight: 700;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .idle-time {\n margin-left: auto;\n font-weight: 400;\n letter-spacing: 0.05em;\n color: var(--fg-3);\n font-size: 10px;\n }\n\n /* Composer */\n #attachPreview {\n padding: 4px 22px 0;\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n min-height: 0;\n }\n #attachPreview:empty { padding: 0; }\n .attach-chip {\n background: var(--bg-card-strong);\n border: 1px solid var(--border-strong);\n color: var(--fg-2);\n font-size: 11px;\n padding: 3px 8px;\n border-radius: 8px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n .attach-rm {\n background: transparent;\n border: 0;\n color: var(--fg-3);\n cursor: pointer;\n font-size: 13px;\n padding: 0;\n line-height: 1;\n }\n .attach-rm:hover { color: var(--err-color); }\n\n #form {\n padding: 14px 20px 18px;\n background: rgba(7, 9, 26, 0.6);\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n border-top: 1px solid var(--border-new);\n display: grid;\n grid-template-columns: 36px 36px 36px 1fr 96px;\n gap: 10px;\n align-items: end;\n }\n\n #attachBtn, #captureBtn, #recordBtn {\n align-self: stretch;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 0;\n color: var(--fg-3);\n font-size: 17px;\n cursor: pointer;\n border-radius: 10px;\n transition: background 120ms ease, color 120ms ease;\n min-height: 44px;\n padding: 0;\n }\n #attachBtn:hover, #captureBtn:hover, #recordBtn:hover { background: var(--bg-card); color: var(--fg); }\n #captureBtn.flash { background: var(--accent); color: var(--bg-deep); }\n /* Pulsing red while recording. */\n #recordBtn.recording {\n background: var(--err-color);\n color: #fff;\n animation: rec-pulse 1.1s ease-in-out infinite;\n }\n @keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }\n /* Off-screen the file input instead of display:none. WKWebView's\n implicit <label>\u2192<input type=file> click forward doesn't fire on a\n fully display:none input \u2014 the OS file picker silently no-ops.\n Off-screening keeps the input \"live\" while invisible. */\n #fileInput {\n position: absolute;\n width: 1px;\n height: 1px;\n opacity: 0;\n pointer-events: none;\n overflow: hidden;\n }\n\n #input {\n background: var(--bg-card-strong);\n border: 1px solid var(--border-strong);\n border-radius: 14px;\n color: var(--fg);\n font-family: inherit;\n font-size: 13.5px;\n line-height: 1.45;\n padding: 11px 13px;\n resize: none;\n outline: none;\n width: 100%;\n min-height: 44px;\n max-height: 200px;\n transition: border-color 120ms ease, box-shadow 120ms ease;\n }\n #input:focus {\n border-color: var(--accent);\n box-shadow: 0 0 0 3px var(--accent-soft);\n }\n #input::placeholder { color: var(--fg-3); }\n\n #sendBtn {\n background: linear-gradient(180deg, var(--accent) 0%, #4eb8e5 100%);\n color: #0a1024;\n border: 0;\n border-radius: 14px;\n height: 100%;\n font-family: inherit;\n font-size: 12.5px;\n font-weight: 700;\n letter-spacing: 0.06em;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 14px;\n transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;\n box-shadow: 0 4px 14px rgba(106, 212, 255, 0.25);\n }\n #sendBtn:hover:not(:disabled) {\n transform: translateY(-1px);\n box-shadow: 0 6px 18px rgba(106, 212, 255, 0.35);\n }\n #sendBtn:active:not(:disabled) { transform: translateY(0); }\n #sendBtn:disabled { opacity: 0.5; cursor: wait; }\n /* Hide the legacy pixel send icon; the text label is enough in the new theme. */\n #sendBtn img { display: none; }\n\n /* \u2500\u2500 Mobile / narrow \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 720px) {\n body {\n padding-top: env(safe-area-inset-top);\n padding-bottom: env(safe-area-inset-bottom);\n }\n .frame {\n grid-template-columns: 1fr;\n grid-template-rows: auto 1fr auto;\n }\n .sidebar {\n max-height: 38vh;\n padding: 14px 14px 12px;\n gap: 14px;\n }\n #form {\n grid-template-columns: 36px 36px 36px 1fr 84px;\n padding: 10px 14px 14px;\n }\n #input { font-size: 16px; /* prevents iOS Safari auto-zoom */ }\n }\n\n /* ===================================================================\n Modal panel (skills / memory / tools / soul) \u2014 unchanged from the\n legacy pixel-art shell. Uses the legacy CSS vars declared above.\n =================================================================== */\n .modal-bg {\n position: fixed; inset: 0;\n background: rgba(0, 0, 0, 0.7);\n display: none;\n align-items: center; justify-content: center;\n z-index: 100;\n }\n .modal-bg.open { display: flex; }\n .modal {\n background: var(--bg-card-strong);\n border: 1px solid var(--border-strong);\n border-radius: 16px;\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);\n max-width: 720px;\n width: 90vw;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n }\n .modal-head {\n padding: 14px 18px;\n border-bottom: 1px solid var(--border-new);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .modal-title {\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 0.10em;\n text-transform: uppercase;\n color: var(--accent);\n }\n .modal-close {\n background: transparent;\n border: 1px solid var(--border-new);\n color: var(--fg-2);\n font-family: inherit;\n font-size: 11px;\n letter-spacing: 0.06em;\n padding: 5px 10px;\n border-radius: 8px;\n cursor: pointer;\n }\n .modal-close:hover { color: var(--err-color); border-color: rgba(255, 85, 119, 0.40); }\n .modal-body {\n padding: 16px 18px;\n overflow-y: auto;\n font-size: 12.5px;\n line-height: 1.55;\n color: var(--fg-2);\n }\n .modal-body h3 {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.10em;\n text-transform: uppercase;\n color: var(--accent);\n margin: 14px 0 6px 0;\n border-bottom: 1px dashed var(--border-new);\n padding-bottom: 5px;\n }\n .modal-body h3:first-child { margin-top: 0; }\n .modal-body .item {\n padding: 7px 0;\n border-bottom: 1px dotted var(--border-new);\n }\n .modal-body .item:last-child { border: none; }\n .modal-body .name {\n color: var(--warm);\n font-weight: 600;\n font-size: 12px;\n }\n .modal-body .desc { color: var(--fg-3); margin-top: 2px; }\n .modal-body .plan-select {\n margin-top: 6px;\n font-family: inherit;\n font-size: 11px;\n font-weight: 700;\n padding: 4px 12px;\n border: 0;\n border-radius: 8px;\n cursor: pointer;\n background: var(--accent);\n color: #07091a;\n }\n .modal-body .plan-select:hover { filter: brightness(1.08); }\n .modal-body .plan-select[disabled] {\n background: var(--fg-faint);\n color: var(--fg-3);\n cursor: default;\n }\n .modal-body pre {\n background: rgba(0, 0, 0, 0.30);\n padding: 10px 12px;\n border-left: 2px solid var(--accent);\n border-radius: 4px;\n white-space: pre-wrap;\n margin: 6px 0;\n color: var(--fg);\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n font-size: 11.5px;\n line-height: 1.5;\n }\n .modal-body .empty { color: var(--fg-faint); font-style: italic; }\n\n /* ===================================================================\n Birth ritual overlay \u2014 full-screen, one-time. Uses legacy palette\n intentionally (it's a separate ceremonial moment).\n =================================================================== */\n .birth-overlay {\n position: fixed;\n inset: 0;\n background:\n radial-gradient(ellipse at center, rgba(40, 30, 80, 0.95) 0%, rgba(5, 5, 20, 1) 70%);\n z-index: 9999;\n display: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n }\n .birth-overlay.open { display: flex; }\n .birth-content {\n position: relative;\n z-index: 2;\n width: min(800px, 95vw);\n max-height: 90vh;\n overflow-y: auto;\n }\n .birth-stars {\n text-align: center;\n color: var(--accent);\n font-size: 14px;\n letter-spacing: 8px;\n text-shadow: 0 0 8px var(--accent-glow);\n animation: starBlink 1.5s steps(3) infinite;\n }\n @keyframes starBlink {\n 0%, 30%, 100% { opacity: 1; }\n 50% { opacity: 0.4; }\n }\n .birth-title {\n text-align: center;\n color: var(--warm);\n font-size: 22px;\n font-weight: 700;\n letter-spacing: 6px;\n margin: 24px 0 32px;\n text-shadow: 0 0 12px rgba(255, 208, 102, 0.45);\n }\n .birth-step {\n margin: 14px 0;\n padding: 10px 16px;\n border-left: 3px solid var(--border-new);\n background: rgba(20, 26, 64, 0.55);\n border-radius: 0 8px 8px 0;\n opacity: 0;\n transform: translateY(8px);\n transition: opacity 0.4s ease-out, transform 0.4s ease-out;\n }\n .birth-step.shown { opacity: 1; transform: translateY(0); }\n .birth-step.active {\n border-left-color: var(--warm);\n background: rgba(255, 208, 102, 0.08);\n }\n .birth-step.done { border-left-color: var(--accent); }\n .birth-step .step-name {\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.10em;\n color: var(--fg-3);\n text-transform: uppercase;\n margin-bottom: 4px;\n }\n .birth-step.active .step-name { color: var(--warm); }\n .birth-step.done .step-name { color: var(--accent); }\n .birth-step .step-detail {\n color: var(--fg);\n font-size: 13px;\n line-height: 1.55;\n word-break: break-word;\n }\n .birth-step .step-cursor {\n display: inline-block;\n width: 6px;\n background: var(--warm);\n height: 0.9em;\n vertical-align: middle;\n animation: blink 0.8s steps(2) infinite;\n }\n @keyframes blink { 50% { opacity: 0; } }\n .birth-final {\n margin-top: 36px;\n text-align: center;\n color: var(--warm);\n font-size: 15px;\n font-weight: 700;\n letter-spacing: 0.10em;\n text-shadow: 0 0 10px rgba(255, 208, 102, 0.4);\n opacity: 0;\n transition: opacity 0.6s ease-in;\n }\n .birth-final.shown { opacity: 1; }\n .birth-enter {\n margin: 24px auto 0;\n display: block;\n background: linear-gradient(180deg, var(--accent) 0%, #4eb8e5 100%);\n border: 0;\n color: #0a1024;\n font-family: inherit;\n font-weight: 700;\n font-size: 13px;\n padding: 12px 32px;\n border-radius: 12px;\n cursor: pointer;\n letter-spacing: 0.10em;\n opacity: 0;\n transition: opacity 0.6s ease-in, transform 120ms ease;\n box-shadow: 0 6px 18px rgba(106, 212, 255, 0.35);\n }\n .birth-enter.shown { opacity: 1; }\n .birth-enter:hover { transform: translateY(-1px); }\n .birth-error {\n color: var(--err-color);\n text-align: center;\n margin-top: 24px;\n font-size: 11.5px;\n letter-spacing: 0.05em;\n }\n\n /* ===================================================================\n API-key config overlay \u2014 same modernized treatment.\n =================================================================== */\n .cfg-overlay {\n position: fixed;\n inset: 0;\n background:\n radial-gradient(ellipse at center, rgba(40, 30, 80, 0.95) 0%, rgba(5, 5, 20, 1) 70%);\n z-index: 9998;\n display: none;\n align-items: center;\n justify-content: center;\n padding: 32px;\n }\n .cfg-overlay.open { display: flex; }\n .cfg-card {\n position: relative;\n z-index: 2;\n width: min(520px, 95vw);\n background: var(--bg-card-strong);\n border: 1px solid var(--border-strong);\n border-radius: 16px;\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);\n padding: 28px 32px;\n }\n .cfg-stars {\n text-align: center;\n color: var(--accent);\n font-size: 12px;\n letter-spacing: 6px;\n text-shadow: 0 0 8px var(--accent-glow);\n animation: starBlink 1.5s steps(3) infinite;\n }\n .cfg-title {\n text-align: center;\n color: var(--warm);\n font-size: 16px;\n font-weight: 700;\n letter-spacing: 6px;\n margin: 16px 0 6px;\n }\n .cfg-sub {\n text-align: center;\n color: var(--fg-3);\n font-size: 12.5px;\n margin-bottom: 22px;\n line-height: 1.5;\n }\n .cfg-sub a { color: var(--accent); text-decoration: underline; }\n .cfg-field { display: block; margin: 14px 0; }\n .cfg-label {\n display: block;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--accent);\n margin-bottom: 6px;\n }\n .cfg-label .opt {\n color: var(--fg-3);\n font-size: 9.5px;\n margin-left: 6px;\n text-transform: none;\n letter-spacing: 0;\n font-weight: 400;\n }\n .cfg-input {\n width: 100%;\n background: var(--bg-card);\n border: 1px solid var(--border-strong);\n border-radius: 10px;\n color: var(--fg);\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n font-size: 13px;\n padding: 10px 12px;\n }\n .cfg-input:focus {\n outline: none;\n border-color: var(--accent);\n box-shadow: 0 0 0 3px var(--accent-soft);\n }\n .cfg-help {\n color: var(--fg-3);\n font-size: 11px;\n margin-top: 6px;\n }\n .cfg-help code {\n color: var(--fg-2);\n background: rgba(0, 0, 0, 0.3);\n padding: 1px 5px;\n border-radius: 3px;\n font-size: 11px;\n }\n .cfg-actions {\n margin-top: 22px;\n display: flex;\n justify-content: center;\n }\n .cfg-save {\n background: linear-gradient(180deg, var(--accent) 0%, #4eb8e5 100%);\n border: 0;\n color: #0a1024;\n font-family: inherit;\n font-size: 12.5px;\n font-weight: 700;\n padding: 11px 28px;\n border-radius: 12px;\n cursor: pointer;\n letter-spacing: 0.10em;\n box-shadow: 0 4px 14px rgba(106, 212, 255, 0.25);\n transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;\n }\n .cfg-save:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(106, 212, 255, 0.35); }\n .cfg-save:active { transform: translateY(0); }\n .cfg-save:disabled { opacity: 0.55; cursor: wait; }\n .cfg-error {\n color: var(--err-color);\n font-size: 11px;\n text-align: center;\n margin-top: 14px;\n min-height: 14px;\n }";
12
+ export declare const MAIN_CSS = " :root {\n color-scheme: dark;\n\n /* New design tokens (mockup) */\n --accent: #6ad4ff;\n --accent-soft: rgba(106, 212, 255, 0.13);\n --accent-glow: rgba(106, 212, 255, 0.27);\n /* Proactive / autonomy \"live\" accent (green) \u2014 the console's watching state. */\n --proactive: #3ddc97;\n --proactive-soft: rgba(61, 220, 151, 0.13);\n --proactive-glow: rgba(61, 220, 151, 0.30);\n --warm: #ffd066;\n --dream: #b487ff;\n --claude: #ff8c42;\n --err-color: #ff5577;\n\n --bg-deep: #07091a;\n --bg-1: #0b1024;\n --bg-2: #11163a;\n --bg-3: #1a1f4a;\n --bg-card: rgba(20, 26, 64, 0.65);\n --bg-card-strong: rgba(20, 26, 64, 0.88);\n --border-new: rgba(255, 255, 255, 0.07);\n --border-strong: rgba(255, 255, 255, 0.14);\n\n --fg: #e8eaff;\n --fg-2: #aeb5d3;\n --fg-3: #6c7398;\n --fg-faint: #444a6e;\n\n /* Legacy tokens \u2014 kept so the unchanged modal / cfg / birth\n overlay styles below still resolve. The new shell + chat use\n the modern tokens above. */\n --bg: #0a0d2b;\n --panel: #1a1f4d;\n --panel-light: #2a3270;\n --border: #6a7ad9;\n --border-light: #a4b2ff;\n --text: #e7ecff;\n --text-dim: #8090c0;\n --you: #6cf6e1;\n --lisa: #ffd167;\n --tool: #ff7eb6;\n --error: #ff5577;\n }\n * { box-sizing: border-box; }\n html, body {\n height: 100%;\n margin: 0;\n background: #000;\n font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", \"Inter\", system-ui, sans-serif;\n -webkit-font-smoothing: antialiased;\n color: var(--fg);\n overflow: hidden;\n }\n\n /* \u2500\u2500 App shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .frame {\n height: 100vh;\n width: 100vw;\n display: grid;\n grid-template-columns: 300px 1fr;\n grid-template-rows: 36px 1fr;\n grid-template-areas:\n \"titlebar titlebar\"\n \"sidebar main\";\n background:\n radial-gradient(ellipse at 30% 20%, #1a1238 0%, transparent 50%),\n radial-gradient(ellipse at 80% 70%, #0a1f3a 0%, transparent 60%),\n linear-gradient(180deg, var(--bg-1) 0%, var(--bg-deep) 100%);\n overflow: hidden;\n }\n\n /* Title bar \u2014 visually shows \"Lisa \u00B7 session-id\". The actual drag\n behavior is handled Swift-side by a transparent NSView overlay\n (DragHandleView) placed on top of the WKWebView for the same 36pt\n strip \u2014 WebKit ignores the CSS -webkit-app-region: drag property,\n so the cosmetic HTML and the functional drag region are two\n separate things.\n Padding-left reserves the ~78pt that the macOS traffic-light\n buttons occupy at top-left. */\n .titlebar {\n grid-area: titlebar;\n background: rgba(7, 9, 26, 0.55);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border-bottom: 1px solid var(--border-new);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 0 14px 0 78px;\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.04em;\n color: var(--fg-2);\n /* nothing here should ever capture pointer events \u2014 the NSView\n overlay above handles dragging, and there are no interactive\n elements in the HTML titlebar. */\n user-select: none;\n pointer-events: none;\n }\n .titlebar .session-tag {\n color: var(--fg-3);\n font-weight: 400;\n margin-left: 6px;\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n font-size: 11px;\n letter-spacing: 0;\n }\n\n /* \u2500\u2500 Sidebar (floating panel \u2014 Claude-Code-style detached card) \u2500\u2500\u2500\u2500 */\n .sidebar {\n grid-area: sidebar;\n margin: 8px 6px 10px 10px;\n background: linear-gradient(180deg, rgba(18, 23, 48, 0.62), rgba(10, 13, 33, 0.6));\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n border: 1px solid var(--border-new);\n border-radius: 16px;\n box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);\n overflow-y: auto;\n padding: 18px 14px 14px;\n display: flex;\n flex-direction: column;\n gap: 18px;\n }\n\n /* Identity card */\n .identity {\n display: grid;\n grid-template-columns: 56px 1fr;\n gap: 12px;\n align-items: center;\n padding: 12px;\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 14px;\n }\n .identity .avatar-wrap {\n width: 56px;\n height: 56px;\n border-radius: 50%;\n position: relative;\n border: 1px solid var(--border-strong);\n box-shadow: 0 0 0 3px var(--accent-soft);\n background: #15192a;\n }\n .identity .avatar-wrap img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n object-position: 50% 22%;\n image-rendering: pixelated;\n display: block;\n transition: opacity 250ms ease;\n user-select: none;\n -webkit-user-drag: none;\n }\n .identity .avatar-wrap img.fading { opacity: 0; }\n .identity .avatar-wrap::after {\n content: \"\";\n position: absolute;\n right: -2px;\n bottom: -2px;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: #4ade80;\n border: 2px solid var(--bg-1);\n }\n .identity h1 {\n margin: 0 0 2px;\n font-size: 15px;\n font-weight: 700;\n letter-spacing: 0.02em;\n color: var(--fg);\n }\n .identity .sub {\n margin: 0;\n font-size: 11px;\n color: var(--fg-3);\n }\n .identity .mood {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n margin-top: 4px;\n font-size: 10.5px;\n color: var(--accent);\n text-transform: uppercase;\n letter-spacing: 0.08em;\n font-weight: 600;\n }\n .identity .mood::before {\n content: \"\";\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--accent);\n box-shadow: 0 0 6px var(--accent-glow);\n }\n\n /* Sidebar plain text section (\"currently wanting\") */\n .sb-section { display: flex; flex-direction: column; gap: 6px; }\n .sb-section h2 {\n margin: 0 0 2px;\n font-size: 10.5px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.10em;\n color: var(--fg-3);\n padding-left: 4px;\n }\n .sb-section .body-text {\n margin: 0;\n font-size: 12px;\n line-height: 1.55;\n color: var(--fg-2);\n padding: 0 4px;\n }\n\n /* Live mini-cards (Claude monitor / last reflection) */\n .card {\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 12px;\n padding: 10px 12px;\n font-size: 12px;\n color: var(--fg-2);\n line-height: 1.5;\n }\n .card.tint-claude {\n border-color: rgba(255, 140, 66, 0.20);\n background: linear-gradient(180deg, rgba(255, 140, 66, 0.06), rgba(255, 140, 66, 0.02));\n }\n .card.tint-idle {\n border-color: rgba(255, 208, 102, 0.22);\n background: linear-gradient(180deg, rgba(255, 208, 102, 0.07), rgba(255, 208, 102, 0.02));\n }\n .card.tint-mail {\n border-color: rgba(106, 212, 255, 0.20);\n background: linear-gradient(180deg, rgba(106, 212, 255, 0.06), rgba(106, 212, 255, 0.02));\n }\n .card.tint-mail .h .left { color: var(--brand, #6ad4ff); }\n .card .h {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 4px;\n }\n .card .h .left {\n display: flex;\n align-items: center;\n gap: 6px;\n font-size: 10.5px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.10em;\n color: var(--claude);\n }\n .card.tint-idle .h .left { color: var(--warm); }\n .card .h .count {\n background: rgba(255, 140, 66, 0.16);\n color: var(--claude);\n font-size: 11px;\n font-weight: 600;\n padding: 2px 7px;\n border-radius: 8px;\n }\n .card.tint-idle .h .count {\n background: rgba(255, 208, 102, 0.16);\n color: var(--warm);\n }\n .session-row {\n display: grid;\n grid-template-columns: 7px 1fr auto;\n align-items: center;\n gap: 7px;\n padding: 5px 0;\n font-size: 11.5px;\n border-top: 1px dashed rgba(255, 140, 66, 0.10);\n cursor: default;\n }\n .session-row:first-of-type { border-top: 0; }\n .session-row .pip {\n width: 7px;\n height: 7px;\n border-radius: 50%;\n background: var(--fg-faint);\n }\n /* working = calm slow breathe (running, not actionable);\n waiting = solid + a soft halo that draws the eye (\"needs you\"). */\n .session-row .pip.working { background: var(--claude); opacity: 1; animation: breathe 2.6s ease-in-out infinite; }\n .session-row .pip.waiting { background: var(--claude); opacity: 1; animation: needsYou 2s ease-in-out infinite; }\n .session-row .pip.error { background: var(--err-color); }\n .session-row .name {\n color: var(--fg);\n font-weight: 600;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n }\n /* D4a \u2014 agent-kind chip rendered inline before the project name, so the\n multi-agent sidebar reads which tool each row belongs to. */\n .session-row .agent-badge {\n display: inline-block;\n font-size: 9px;\n font-weight: 700;\n letter-spacing: 0.02em;\n text-transform: lowercase;\n color: var(--claude);\n background: rgba(255, 140, 66, 0.12);\n border: 1px solid rgba(255, 140, 66, 0.22);\n border-radius: 999px;\n padding: 0 5px;\n margin-right: 5px;\n vertical-align: 1px;\n }\n .session-row .when {\n color: var(--fg-3);\n font-variant-numeric: tabular-nums;\n font-size: 10.5px;\n }\n /* Second line under name/when: structural activity (turns/tokens/tool\u00B7file). */\n .session-row .session-act {\n grid-column: 2 / -1;\n margin-top: 2px;\n font-size: 10px;\n color: var(--fg-3);\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n /* Managed-agent controls (approve/deny \u00B7 send follow-up \u00B7 cancel). */\n .session-row .session-ctrl {\n grid-column: 2 / -1;\n margin-top: 4px;\n display: flex;\n gap: 6px;\n align-items: center;\n flex-wrap: wrap;\n }\n .session-ctrl .mc {\n font-size: 10px;\n padding: 2px 8px;\n border-radius: 6px;\n border: 1px solid var(--border);\n background: var(--panel2, rgba(255,255,255,0.05));\n color: var(--fg);\n cursor: pointer;\n }\n .session-ctrl .mc.approve { color: var(--green, #6bff9d); border-color: rgba(107,255,157,0.4); }\n .session-ctrl .mc.deny,\n .session-ctrl .mc.cancel { color: var(--err-color, #ff5577); border-color: rgba(255,85,119,0.4); }\n .session-ctrl .mc.adopt { color: var(--brand, #6ad4ff); border-color: rgba(106,212,255,0.4); }\n .session-ctrl .mc:hover { background: rgba(255,255,255,0.10); }\n .session-ctrl .mc-send {\n flex: 1;\n min-width: 90px;\n font-size: 10.5px;\n padding: 2px 7px;\n border-radius: 6px;\n border: 1px solid var(--border);\n background: rgba(0,0,0,0.25);\n color: var(--fg);\n }\n /* \"Delegate a task\" \u2192 a single full-width button that opens a modal. */\n .delegate-btn {\n width: 100%;\n margin: 2px 0 8px;\n font-size: 11.5px;\n padding: 6px 10px;\n border-radius: 8px;\n border: 1px solid var(--claude, #ff8c42);\n background: rgba(255,140,66,0.14);\n color: var(--claude, #ff8c42);\n cursor: pointer;\n transition: background 0.12s ease;\n }\n .delegate-btn:hover { background: rgba(255,140,66,0.26); }\n /* Delegate dialog (rendered in the shared modal). */\n .delegate-modal { display: flex; flex-direction: column; gap: 8px; }\n .delegate-modal .dm-label {\n font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;\n color: var(--fg-2); margin-top: 4px;\n }\n .delegate-modal .dm-kind,\n .delegate-modal .dm-task {\n width: 100%; box-sizing: border-box;\n font-size: 13px; padding: 8px 10px; border-radius: 8px;\n border: 1px solid var(--border); background: rgba(0,0,0,0.25); color: var(--fg);\n }\n .delegate-modal .dm-task { resize: vertical; min-height: 88px; font-family: inherit; }\n .delegate-modal .dm-actions { display: flex; justify-content: flex-end; margin-top: 4px; }\n .delegate-modal .dm-start {\n font-size: 13px; padding: 8px 16px; border-radius: 8px;\n border: 1px solid var(--brand, #6ad4ff); background: rgba(106,212,255,0.16);\n color: var(--brand, #6ad4ff); cursor: pointer;\n }\n .delegate-modal .dm-start:hover { background: rgba(106,212,255,0.28); }\n .delegate-modal .dm-start:disabled { opacity: 0.5; cursor: default; }\n .delegate-modal .dm-err { color: var(--err-color, #ff5577); font-size: 12px; white-space: pre-wrap; }\n .delegate-modal .dm-note { font-size: 11px; color: var(--fg-faint); line-height: 1.4; margin-top: 2px; }\n /* Mail card body */\n #sbMailBody { margin: 2px 0 6px; }\n .mail-summary { font-size: 11.5px; color: var(--fg-2); line-height: 1.45; margin-bottom: 6px; }\n .mail-row { display: flex; gap: 6px; align-items: baseline; padding: 1px 0; }\n .mail-bang { color: var(--brand, #6ad4ff); font-weight: 700; font-size: 11px; flex: none; }\n .mail-bang.urgent { color: var(--err-color, #ff5577); }\n .mail-subj { font-size: 11.5px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .mail-sweep {\n margin-top: 6px; font-size: 10.5px; background: none; border: none;\n color: var(--brand, #6ad4ff); cursor: pointer; padding: 2px 0;\n }\n .mail-sweep:hover { text-decoration: underline; }\n .session-empty {\n color: var(--fg-faint);\n font-size: 11.5px;\n font-style: italic;\n padding: 4px 0 2px;\n }\n @keyframes pulse {\n 0%, 100% { opacity: 0.35; }\n 50% { opacity: 1; }\n }\n /* Gentle breathing for \"working\" \u2014 present but not jumpy. */\n @keyframes breathe {\n 0%, 100% { opacity: 0.55; }\n 50% { opacity: 1; }\n }\n /* \"needs you\" \u2014 solid dot with a pulsing warm halo, prominent without the\n harsh on/off flash. */\n @keyframes needsYou {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 140, 66, 0); }\n 50% { box-shadow: 0 0 7px 2px rgba(255, 140, 66, 0.65); }\n }\n\n /* Compact SOUL / SKILLS / MEMORY / TOOLS row */\n .badges {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 6px;\n }\n .badge {\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n color: var(--fg-2);\n font-family: inherit;\n font-size: 10.5px;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n padding: 7px 8px;\n border-radius: 8px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n transition: background 120ms ease, color 120ms ease, border-color 120ms ease;\n }\n .badge:hover {\n background: var(--bg-card-strong);\n color: var(--fg);\n border-color: var(--border-strong);\n }\n .badge img {\n width: 14px;\n height: 14px;\n image-rendering: pixelated;\n opacity: 0.8;\n }\n\n /* Sidebar footer \u2014 session id + sessions count */\n .sb-footer {\n margin-top: auto;\n padding-top: 12px;\n border-top: 1px solid var(--border-new);\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--fg-3);\n font-size: 11px;\n }\n .sb-footer .session-id {\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n font-size: 10px;\n color: var(--fg-3);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n flex: 1;\n min-width: 0;\n }\n .sb-footer .badge-count {\n background: var(--bg-3);\n color: var(--fg-2);\n border-radius: 6px;\n padding: 1px 6px;\n font-size: 10px;\n font-variant-numeric: tabular-nums;\n flex-shrink: 0;\n }\n\n /* \u2500\u2500 Primary nav (vertical list in the sidebar) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .nav-list { display: flex; flex-direction: column; gap: 2px; }\n .nav-item {\n position: relative;\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 8px 11px;\n border: 0;\n border-radius: 9px;\n background: transparent;\n color: var(--fg-2);\n font-family: inherit;\n font-size: 12.5px;\n font-weight: 600;\n letter-spacing: 0.01em;\n text-align: left;\n cursor: pointer;\n transition: background 120ms ease, color 120ms ease;\n }\n .nav-item .nav-ico { width: 18px; font-size: 15px; text-align: center; flex-shrink: 0; opacity: 0.9; }\n .nav-item:hover { background: var(--bg-card); color: var(--fg); }\n .nav-item.active { background: var(--accent-soft); color: var(--accent); }\n .nav-item.active::before {\n content: \"\";\n position: absolute;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n width: 3px;\n height: 18px;\n border-radius: 0 3px 3px 0;\n background: var(--accent);\n }\n .nav-item .nav-tag {\n margin-left: auto;\n font-size: 9.5px;\n font-weight: 700;\n font-variant-numeric: tabular-nums;\n color: var(--fg);\n background: var(--bg-3);\n border-radius: 999px;\n padding: 1px 7px;\n min-width: 18px;\n text-align: center;\n }\n .nav-item.active .nav-tag { background: var(--accent); color: #06141b; }\n\n /* \u2500\u2500 Proactive toggle (sidebar footer area) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n .proactive-toggle {\n display: flex;\n align-items: center;\n gap: 9px;\n padding: 9px 11px;\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 11px;\n cursor: pointer;\n user-select: none;\n transition: border-color 140ms ease, background 140ms ease;\n }\n .proactive-toggle .pt-label {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n color: var(--fg-3);\n transition: color 140ms ease;\n }\n .proactive-toggle .pt-track {\n margin-left: auto;\n width: 34px;\n height: 18px;\n border-radius: 999px;\n background: var(--bg-3);\n border: 1px solid var(--border-new);\n position: relative;\n flex-shrink: 0;\n transition: background 140ms ease, border-color 140ms ease;\n }\n .proactive-toggle .pt-knob {\n position: absolute;\n top: 1px;\n left: 1px;\n width: 14px;\n height: 14px;\n border-radius: 50%;\n background: var(--fg-3);\n transition: transform 140ms ease, background 140ms ease;\n }\n .proactive-toggle.on { border-color: var(--proactive-glow); background: var(--proactive-soft); }\n .proactive-toggle.on .pt-label { color: var(--proactive); }\n .proactive-toggle.on .pt-track { background: var(--proactive-soft); border-color: var(--proactive-glow); }\n .proactive-toggle.on .pt-knob { transform: translateX(16px); background: var(--proactive); }\n\n /* \u2500\u2500 Main pane \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n /* The main pane is a view stack: each .view fills the pane and only the\n active one is shown. Chat is the default; it keeps its original\n log / attachPreview / form 3-row grid (moved onto #viewChat). */\n .main {\n grid-area: main;\n position: relative;\n overflow: hidden;\n background:\n radial-gradient(ellipse at 50% -30%, rgba(106, 212, 255, 0.06) 0%, transparent 60%),\n linear-gradient(180deg, transparent, rgba(106, 212, 255, 0.015));\n }\n .view { display: none; }\n .view.active {\n position: absolute;\n inset: 0;\n display: flex;\n flex-direction: column;\n }\n #viewChat.view.active {\n display: grid;\n grid-template-rows: auto 1fr auto auto;\n }\n\n /* \u2500\u2500 Console views (dashboard / control / reve / sense / memory) \u2500\u2500 */\n .view-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 12px;\n padding: 16px 24px;\n border-bottom: 1px solid var(--border-new);\n }\n .view-head h2 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: 0.02em; color: var(--fg); }\n .view-head .vh-sub { margin: 2px 0 0; font-size: 11.5px; color: var(--fg-3); }\n .view-act {\n flex-shrink: 0;\n font-family: inherit;\n font-size: 12px;\n font-weight: 600;\n color: #06140d;\n background: var(--accent);\n border: 0;\n border-radius: 9px;\n padding: 8px 13px;\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n transition: filter 120ms ease, transform 120ms ease;\n }\n .view-act:hover { filter: brightness(1.08); }\n .view-act:active { transform: translateY(1px); }\n .view-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 24px 26px; }\n .view-empty { color: var(--fg-faint); font-size: 12.5px; font-style: italic; padding: 18px 4px; }\n .view-sec-label {\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.10em;\n color: var(--fg-3);\n margin: 4px 0 8px;\n }\n\n /* Stat bar */\n .stat-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }\n .stat {\n flex: 1;\n min-width: 92px;\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 12px;\n padding: 11px 13px;\n }\n .stat .n { font-size: 21px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; line-height: 1.1; }\n .stat .k {\n margin-top: 3px;\n font-size: 10px;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--fg-3);\n }\n\n /* Green \"proactive \u2014 watching\" panel */\n .proactive-panel {\n border: 1px solid var(--proactive-glow);\n background: linear-gradient(180deg, var(--proactive-soft), transparent);\n border-radius: 14px;\n padding: 13px 15px;\n margin-bottom: 16px;\n }\n .proactive-panel .pp-head { display: flex; align-items: center; gap: 10px; }\n .proactive-panel .pp-dot {\n width: 9px;\n height: 9px;\n border-radius: 50%;\n background: var(--proactive);\n box-shadow: 0 0 8px var(--proactive-glow);\n flex-shrink: 0;\n }\n .proactive-panel.off .pp-dot { background: var(--fg-faint); box-shadow: none; }\n .proactive-panel .pp-title { font-size: 13px; font-weight: 700; color: var(--fg); }\n .proactive-panel .pp-title b { color: var(--proactive); font-weight: 700; }\n .proactive-panel.off .pp-title b { color: var(--fg-3); }\n .proactive-panel .pp-desc { margin: 2px 0 0; font-size: 11.5px; color: var(--fg-2); }\n /* .pp-tags / .pp-tag are reused outside the panel (Control policy chips),\n so they are not scoped to .proactive-panel. */\n .pp-tags { display: flex; flex-wrap: wrap; gap: 6px; }\n .proactive-panel .pp-tags { margin-top: 10px; }\n .pp-tag {\n font-size: 10.5px;\n color: var(--fg-3);\n background: rgba(255, 255, 255, 0.05);\n border: 1px solid var(--border-new);\n border-radius: 999px;\n padding: 2px 9px;\n }\n .pp-tag.warn { color: var(--warm); }\n\n /* \"Focus\" big card (current desire / objective analog) */\n .focus-card {\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 14px;\n padding: 15px;\n margin-bottom: 18px;\n }\n .focus-card .fc-top { display: flex; align-items: flex-start; gap: 10px; }\n .focus-card .fc-title { font-size: 14.5px; font-weight: 700; color: var(--fg); }\n .focus-card .fc-desc { margin: 4px 0 0; font-size: 12px; color: var(--fg-2); line-height: 1.5; }\n .focus-card .fc-pill {\n margin-left: auto;\n flex-shrink: 0;\n font-size: 10.5px;\n color: var(--proactive);\n border: 1px solid var(--proactive-glow);\n border-radius: 999px;\n padding: 2px 10px;\n }\n .focus-card .fc-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 11px; font-size: 11px; color: var(--fg-3); }\n\n /* Horizontally-scrolling agent / task cards */\n .card-scroll {\n display: flex;\n gap: 12px;\n overflow-x: auto;\n padding-bottom: 6px;\n margin-bottom: 18px;\n scroll-snap-type: x proximity;\n }\n .ac {\n flex: 0 0 232px;\n scroll-snap-align: start;\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 13px;\n padding: 13px;\n }\n .ac .ac-top { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--fg-3); margin-bottom: 8px; }\n .ac .ac-status { margin-left: auto; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }\n .ac .ac-status.working { color: var(--accent); }\n .ac .ac-status.waiting { color: var(--warm); }\n .ac .ac-status.error { color: var(--err-color); }\n .ac .ac-status.done { color: var(--proactive); }\n .ac .ac-title { font-size: 13px; font-weight: 600; color: var(--fg); margin-bottom: 3px; word-break: break-word; }\n .ac .ac-desc { font-size: 11.5px; color: var(--fg-2); line-height: 1.45; }\n .ac .ac-meta {\n margin-top: 9px;\n padding-top: 7px;\n border-top: 1px solid var(--border-new);\n font-size: 10px;\n color: var(--fg-3);\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n }\n\n /* Simple list rows / cards used by Reve / Sense / Memory */\n .v-card {\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 12px;\n padding: 12px 14px;\n margin-bottom: 10px;\n }\n .v-card h3 {\n margin: 0 0 6px;\n font-size: 11px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n color: var(--fg-3);\n }\n .v-pre {\n margin: 0;\n white-space: pre-wrap;\n word-break: break-word;\n font-size: 12px;\n line-height: 1.55;\n color: var(--fg-2);\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n }\n .v-row {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 11px 0;\n border-top: 1px solid var(--border-new);\n }\n .v-row:first-child { border-top: 0; }\n .v-row .v-main { min-width: 0; flex: 1; }\n .v-row .v-name { font-size: 12.5px; font-weight: 600; color: var(--fg); }\n .v-row .v-sub { font-size: 11px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n .v-toggle {\n font-family: inherit;\n font-size: 11px;\n font-weight: 600;\n cursor: pointer;\n border-radius: 7px;\n padding: 4px 10px;\n border: 1px solid var(--border-new);\n background: var(--bg-3);\n color: var(--fg-3);\n flex-shrink: 0;\n }\n .v-toggle.on { color: var(--proactive); border-color: var(--proactive-glow); background: var(--proactive-soft); }\n .v-sel {\n font-family: inherit;\n font-size: 12px;\n color: var(--fg);\n background: var(--bg-3);\n border: 1px solid var(--border-new);\n border-radius: 8px;\n padding: 5px 8px;\n }\n .mem-btn {\n width: 100%;\n text-align: left;\n font-family: inherit;\n font-size: 13px;\n font-weight: 600;\n color: var(--fg);\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 11px;\n padding: 13px 15px;\n margin-bottom: 9px;\n cursor: pointer;\n display: flex;\n align-items: center;\n gap: 10px;\n transition: background 120ms ease, border-color 120ms ease;\n }\n .mem-btn:hover { background: var(--bg-card-strong); border-color: var(--border-strong); }\n .mem-btn .mem-ico { font-size: 16px; width: 20px; text-align: center; }\n .mem-btn .mem-sub { margin-left: auto; font-size: 11px; color: var(--fg-3); font-weight: 400; }\n\n #log {\n overflow-y: auto;\n padding: 22px 28px 24px;\n display: flex;\n flex-direction: column;\n gap: 8px;\n scroll-behavior: smooth;\n }\n\n /* Chat author label (.role .you/.lisa) */\n .role {\n font-size: 10px;\n font-weight: 700;\n letter-spacing: 0.14em;\n text-transform: uppercase;\n padding: 6px 2px 0;\n margin-top: 6px;\n }\n .role.you { color: var(--accent); text-align: right; }\n .role.lisa { color: var(--warm); }\n\n /* Message bubble */\n .msg {\n display: block;\n max-width: 88%;\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 14px;\n padding: 9px 13px;\n font-size: 13px;\n line-height: 1.55;\n color: var(--fg);\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n /* \"you\" bubbles sit on the right with cyan tint */\n .role.you + .msg {\n margin-left: auto;\n background: linear-gradient(160deg, rgba(106, 212, 255, 0.12), rgba(106, 212, 255, 0.06));\n border-color: rgba(106, 212, 255, 0.25);\n }\n /* attachment label sits compactly under the user bubble */\n .msg.attach-label {\n margin-top: 2px;\n background: transparent;\n border: 0;\n padding: 0 2px;\n font-size: 10.5px;\n color: var(--fg-3);\n max-width: 88%;\n margin-left: auto;\n }\n\n /* Thinking indicator */\n .thinking {\n font-size: 12px;\n color: var(--fg-3);\n font-style: italic;\n padding: 4px 2px;\n letter-spacing: 0.03em;\n }\n\n /* Tool call card */\n .tool-block {\n background: var(--bg-card);\n border: 1px solid var(--border-new);\n border-radius: 10px;\n padding: 8px 12px;\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n font-size: 11px;\n color: var(--fg-2);\n margin: 4px 0;\n max-width: 92%;\n }\n .tool-block.tool-error {\n border-color: rgba(255, 85, 119, 0.30);\n background: rgba(255, 85, 119, 0.05);\n }\n .tool-head {\n display: flex;\n align-items: center;\n gap: 8px;\n color: var(--accent);\n font-weight: 600;\n }\n .tool-block.tool-error .tool-head { color: var(--err-color); }\n .tool-icon { font-size: 12px; }\n .tool-spinner { color: var(--fg-3); font-weight: 400; margin-left: auto; font-size: 12px; }\n .tool-input {\n color: var(--fg-3);\n margin-top: 4px;\n white-space: pre-wrap;\n word-break: break-word;\n }\n .tool-result {\n color: var(--fg-2);\n margin-top: 4px;\n padding-top: 4px;\n border-top: 1px dashed var(--border-new);\n white-space: pre-wrap;\n max-height: 160px;\n overflow-y: auto;\n }\n\n .err {\n color: var(--err-color);\n font-size: 12px;\n padding: 6px 2px;\n }\n /* Failed-turn block: error detail + retry button (replaces the old bare\n [error] line so the user can read what happened and re-run the turn). */\n .err-block {\n background: linear-gradient(180deg, rgba(255, 85, 119, 0.10), rgba(255, 85, 119, 0.02));\n border: 1px solid rgba(255, 85, 119, 0.30);\n border-radius: 14px;\n padding: 10px 12px;\n margin: 6px 0;\n }\n .err-block .err-head {\n color: var(--err-color);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.03em;\n margin-bottom: 4px;\n }\n .err-block .err-detail {\n color: var(--err-color);\n font-size: 12px;\n line-height: 1.45;\n word-break: break-word;\n white-space: pre-wrap;\n opacity: 0.9;\n }\n .err-block .err-retry {\n margin-top: 8px;\n padding: 4px 12px;\n font-size: 12px;\n font-weight: 600;\n color: var(--accent);\n background: var(--accent-soft);\n border: 1px solid rgba(106, 212, 255, 0.40);\n border-radius: 8px;\n cursor: pointer;\n }\n .err-block .err-retry:hover {\n background: var(--accent-glow);\n }\n\n /* Idle pulse + while-you-were-away banner injected into #log */\n .idle-pulse {\n color: var(--dream);\n font-size: 12px;\n font-style: italic;\n padding: 4px 2px;\n letter-spacing: 0.03em;\n }\n .idle-block {\n background: linear-gradient(180deg, rgba(180, 135, 255, 0.10), rgba(180, 135, 255, 0.02));\n border: 1px solid rgba(180, 135, 255, 0.30);\n border-radius: 14px;\n padding: 12px 14px;\n margin: 6px 0;\n font-size: 12.5px;\n line-height: 1.6;\n color: var(--fg);\n }\n .idle-head {\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.10em;\n color: var(--dream);\n font-weight: 700;\n margin-bottom: 6px;\n display: flex;\n align-items: center;\n gap: 8px;\n }\n .idle-time {\n margin-left: auto;\n font-weight: 400;\n letter-spacing: 0.05em;\n color: var(--fg-3);\n font-size: 10px;\n }\n\n /* Composer */\n #attachPreview {\n padding: 4px 22px 0;\n display: flex;\n flex-wrap: wrap;\n gap: 6px;\n min-height: 0;\n }\n #attachPreview:empty { padding: 0; }\n .attach-chip {\n background: var(--bg-card-strong);\n border: 1px solid var(--border-strong);\n color: var(--fg-2);\n font-size: 11px;\n padding: 3px 8px;\n border-radius: 8px;\n display: inline-flex;\n align-items: center;\n gap: 6px;\n }\n .attach-rm {\n background: transparent;\n border: 0;\n color: var(--fg-3);\n cursor: pointer;\n font-size: 13px;\n padding: 0;\n line-height: 1;\n }\n .attach-rm:hover { color: var(--err-color); }\n\n #form {\n padding: 14px 20px 18px;\n background: rgba(7, 9, 26, 0.6);\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n border-top: 1px solid var(--border-new);\n display: grid;\n grid-template-columns: 36px 36px 1fr 96px;\n gap: 10px;\n align-items: end;\n }\n\n #plusBtn, #recordBtn {\n align-self: stretch;\n display: flex;\n align-items: center;\n justify-content: center;\n background: transparent;\n border: 0;\n color: var(--fg-3);\n font-size: 17px;\n cursor: pointer;\n border-radius: 10px;\n transition: background 120ms ease, color 120ms ease;\n min-height: 44px;\n padding: 0;\n }\n #plusBtn { font-size: 22px; }\n #plusBtn:hover, #recordBtn:hover { background: var(--bg-card); color: var(--fg); }\n #plusBtn.flash { background: var(--accent); color: var(--bg-deep); }\n\n /* \uFF0B composer menu (merged attach + screenshot) */\n .plus-wrap { position: relative; align-self: stretch; display: flex; }\n .plus-menu {\n display: none;\n position: absolute;\n left: 0;\n bottom: calc(100% + 8px);\n min-width: 168px;\n background: var(--bg-deep, #0c1024);\n border: 1px solid var(--border-new, rgba(255,255,255,.1));\n border-radius: 11px;\n padding: 5px;\n box-shadow: 0 14px 34px rgba(0,0,0,.5);\n z-index: 30;\n }\n .plus-menu.open { display: block; }\n .plus-menu button {\n display: flex; align-items: center; gap: 9px; width: 100%;\n background: transparent; border: 0; color: var(--fg); font-size: 13px;\n padding: 9px 10px; border-radius: 8px; cursor: pointer; text-align: left;\n }\n .plus-menu button:hover { background: var(--bg-card); }\n .plus-menu .g { width: 18px; text-align: center; }\n\n /* Top icon function bar (\u529F\u80FD\u533A) inside #viewChat */\n .fnbar {\n display: flex; align-items: center; gap: 6px;\n padding: 7px 16px;\n border-bottom: 1px solid var(--border-new, rgba(255,255,255,.08));\n background: rgba(255,255,255,.02);\n }\n .fbtn {\n width: 34px; height: 34px; flex: none;\n display: flex; align-items: center; justify-content: center;\n background: transparent; border: 1px solid transparent; border-radius: 9px;\n color: var(--fg-2); cursor: pointer;\n transition: background 120ms ease, color 120ms ease;\n }\n .fbtn:hover { background: var(--bg-card, rgba(255,255,255,.06)); color: var(--fg); }\n .fbtn svg { width: 19px; height: 19px; display: block; }\n .fbar-spacer { flex: 1; }\n .fn-find {\n height: 28px; width: 150px; font-size: 12px; padding: 0 9px;\n border-radius: 8px; border: 1px solid var(--border-strong, rgba(255,255,255,.14));\n background: rgba(0,0,0,.3); color: var(--fg);\n }\n /* Pulsing red while recording. */\n #recordBtn.recording {\n background: var(--err-color);\n color: #fff;\n animation: rec-pulse 1.1s ease-in-out infinite;\n }\n @keyframes rec-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }\n /* Off-screen the file input instead of display:none. WKWebView's\n implicit <label>\u2192<input type=file> click forward doesn't fire on a\n fully display:none input \u2014 the OS file picker silently no-ops.\n Off-screening keeps the input \"live\" while invisible. */\n #fileInput {\n position: absolute;\n width: 1px;\n height: 1px;\n opacity: 0;\n pointer-events: none;\n overflow: hidden;\n }\n\n #input {\n background: var(--bg-card-strong);\n border: 1px solid var(--border-strong);\n border-radius: 14px;\n color: var(--fg);\n font-family: inherit;\n font-size: 13.5px;\n line-height: 1.45;\n padding: 11px 13px;\n resize: none;\n outline: none;\n width: 100%;\n min-height: 44px;\n max-height: 200px;\n transition: border-color 120ms ease, box-shadow 120ms ease;\n }\n #input:focus {\n border-color: var(--accent);\n box-shadow: 0 0 0 3px var(--accent-soft);\n }\n #input::placeholder { color: var(--fg-3); }\n\n #sendBtn {\n background: linear-gradient(180deg, var(--accent) 0%, #4eb8e5 100%);\n color: #0a1024;\n border: 0;\n border-radius: 14px;\n height: 100%;\n font-family: inherit;\n font-size: 12.5px;\n font-weight: 700;\n letter-spacing: 0.06em;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 6px;\n padding: 10px 14px;\n transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;\n box-shadow: 0 4px 14px rgba(106, 212, 255, 0.25);\n }\n #sendBtn:hover:not(:disabled) {\n transform: translateY(-1px);\n box-shadow: 0 6px 18px rgba(106, 212, 255, 0.35);\n }\n #sendBtn:active:not(:disabled) { transform: translateY(0); }\n #sendBtn:disabled { opacity: 0.5; cursor: wait; }\n /* Hide the legacy pixel send icon; the text label is enough in the new theme. */\n #sendBtn img { display: none; }\n\n /* \u2500\u2500 Mobile / narrow \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\n @media (max-width: 720px) {\n body {\n padding-top: env(safe-area-inset-top);\n padding-bottom: env(safe-area-inset-bottom);\n }\n .frame {\n grid-template-columns: 1fr;\n /* titlebar \u00B7 sidebar (capped, scrolls) \u00B7 main view-stack (fills rest) */\n grid-template-rows: auto auto 1fr;\n grid-template-areas:\n \"titlebar\"\n \"sidebar\"\n \"main\";\n }\n .sidebar {\n max-height: 38vh;\n padding: 14px 14px 12px;\n gap: 14px;\n }\n #form {\n grid-template-columns: 36px 36px 1fr 84px;\n padding: 10px 14px 14px;\n }\n #input { font-size: 16px; /* prevents iOS Safari auto-zoom */ }\n }\n\n /* \u2500\u2500 Forced compact / \"sidebar mode\" \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n Same stacked layout as the narrow breakpoint, but toggled on at ANY\n width (persisted client-side) so Lisa can be docked as a skinny panel. */\n body.force-compact .frame {\n grid-template-columns: 1fr;\n grid-template-rows: auto auto 1fr;\n grid-template-areas:\n \"titlebar\"\n \"sidebar\"\n \"main\";\n }\n body.force-compact .sidebar {\n max-height: 38vh;\n padding: 14px 14px 12px;\n gap: 14px;\n }\n body.force-compact #form { grid-template-columns: 36px 36px 1fr 84px; }\n\n /* ===================================================================\n Modal panel (skills / memory / tools / soul) \u2014 unchanged from the\n legacy pixel-art shell. Uses the legacy CSS vars declared above.\n =================================================================== */\n .modal-bg {\n position: fixed; inset: 0;\n background: rgba(0, 0, 0, 0.7);\n display: none;\n align-items: center; justify-content: center;\n z-index: 100;\n }\n .modal-bg.open { display: flex; }\n .modal {\n background: var(--bg-card-strong);\n border: 1px solid var(--border-strong);\n border-radius: 16px;\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);\n max-width: 720px;\n width: 90vw;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n }\n .modal-head {\n padding: 14px 18px;\n border-bottom: 1px solid var(--border-new);\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .modal-title {\n font-size: 13px;\n font-weight: 700;\n letter-spacing: 0.10em;\n text-transform: uppercase;\n color: var(--accent);\n }\n .modal-close {\n background: transparent;\n border: 1px solid var(--border-new);\n color: var(--fg-2);\n font-family: inherit;\n font-size: 11px;\n letter-spacing: 0.06em;\n padding: 5px 10px;\n border-radius: 8px;\n cursor: pointer;\n }\n .modal-close:hover { color: var(--err-color); border-color: rgba(255, 85, 119, 0.40); }\n .modal-body {\n padding: 16px 18px;\n overflow-y: auto;\n font-size: 12.5px;\n line-height: 1.55;\n color: var(--fg-2);\n }\n .modal-body h3 {\n font-size: 11px;\n font-weight: 700;\n letter-spacing: 0.10em;\n text-transform: uppercase;\n color: var(--accent);\n margin: 14px 0 6px 0;\n border-bottom: 1px dashed var(--border-new);\n padding-bottom: 5px;\n }\n .modal-body h3:first-child { margin-top: 0; }\n .modal-body .item {\n padding: 7px 0;\n border-bottom: 1px dotted var(--border-new);\n }\n .modal-body .item:last-child { border: none; }\n .modal-body .name {\n color: var(--warm);\n font-weight: 600;\n font-size: 12px;\n }\n .modal-body .desc { color: var(--fg-3); margin-top: 2px; }\n .modal-body .pair-qr {\n display: flex;\n justify-content: center;\n margin: 4px 0 14px;\n }\n .modal-body .pair-qr svg {\n width: 200px;\n height: 200px;\n background: #fff;\n padding: 10px;\n border-radius: 12px;\n }\n .modal-body .pair-row {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 7px 0;\n border-bottom: 1px solid var(--line, rgba(255,255,255,0.07));\n }\n .modal-body .pair-row:last-child { border: none; }\n .modal-body .pair-label {\n flex: 0 0 52px;\n color: var(--fg-3);\n font-size: 11px;\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n .modal-body .pair-val {\n flex: 1 1 auto;\n min-width: 0;\n font-family: ui-monospace, SFMono-Regular, Menlo, monospace;\n font-size: 11.5px;\n color: var(--fg-1, #e8e8ea);\n overflow-wrap: anywhere;\n user-select: all;\n }\n .modal-body .pair-copy {\n flex: 0 0 auto;\n font-family: inherit;\n font-size: 11px;\n font-weight: 700;\n color: var(--fg-2);\n background: var(--btn-bg, rgba(255,255,255,0.08));\n border: 1px solid var(--line, rgba(255,255,255,0.12));\n border-radius: 6px;\n padding: 3px 9px;\n cursor: pointer;\n }\n .modal-body .pair-copy:hover { filter: brightness(1.12); }\n .modal-body .plan-select {\n margin-top: 6px;\n font-family: inherit;\n font-size: 11px;\n font-weight: 700;\n padding: 4px 12px;\n border: 0;\n border-radius: 8px;\n cursor: pointer;\n background: var(--accent);\n color: #07091a;\n }\n .modal-body .plan-select:hover { filter: brightness(1.08); }\n .modal-body .plan-select[disabled] {\n background: var(--fg-faint);\n color: var(--fg-3);\n cursor: default;\n }\n .modal-body pre {\n background: rgba(0, 0, 0, 0.30);\n padding: 10px 12px;\n border-left: 2px solid var(--accent);\n border-radius: 4px;\n white-space: pre-wrap;\n margin: 6px 0;\n color: var(--fg);\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n font-size: 11.5px;\n line-height: 1.5;\n }\n .modal-body .empty { color: var(--fg-faint); font-style: italic; }\n\n /* ===================================================================\n Birth ritual overlay \u2014 full-screen, one-time. Uses legacy palette\n intentionally (it's a separate ceremonial moment).\n =================================================================== */\n .birth-overlay {\n position: fixed;\n inset: 0;\n background:\n radial-gradient(ellipse at center, rgba(40, 30, 80, 0.95) 0%, rgba(5, 5, 20, 1) 70%);\n z-index: 9999;\n display: none;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 32px;\n }\n .birth-overlay.open { display: flex; }\n .birth-content {\n position: relative;\n z-index: 2;\n width: min(800px, 95vw);\n max-height: 90vh;\n overflow-y: auto;\n }\n .birth-stars {\n text-align: center;\n color: var(--accent);\n font-size: 14px;\n letter-spacing: 8px;\n text-shadow: 0 0 8px var(--accent-glow);\n animation: starBlink 1.5s steps(3) infinite;\n }\n @keyframes starBlink {\n 0%, 30%, 100% { opacity: 1; }\n 50% { opacity: 0.4; }\n }\n .birth-title {\n text-align: center;\n color: var(--warm);\n font-size: 22px;\n font-weight: 700;\n letter-spacing: 6px;\n margin: 24px 0 32px;\n text-shadow: 0 0 12px rgba(255, 208, 102, 0.45);\n }\n .birth-step {\n margin: 14px 0;\n padding: 10px 16px;\n border-left: 3px solid var(--border-new);\n background: rgba(20, 26, 64, 0.55);\n border-radius: 0 8px 8px 0;\n opacity: 0;\n transform: translateY(8px);\n transition: opacity 0.4s ease-out, transform 0.4s ease-out;\n }\n .birth-step.shown { opacity: 1; transform: translateY(0); }\n .birth-step.active {\n border-left-color: var(--warm);\n background: rgba(255, 208, 102, 0.08);\n }\n .birth-step.done { border-left-color: var(--accent); }\n .birth-step .step-name {\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.10em;\n color: var(--fg-3);\n text-transform: uppercase;\n margin-bottom: 4px;\n }\n .birth-step.active .step-name { color: var(--warm); }\n .birth-step.done .step-name { color: var(--accent); }\n .birth-step .step-detail {\n color: var(--fg);\n font-size: 13px;\n line-height: 1.55;\n word-break: break-word;\n }\n .birth-step .step-cursor {\n display: inline-block;\n width: 6px;\n background: var(--warm);\n height: 0.9em;\n vertical-align: middle;\n animation: blink 0.8s steps(2) infinite;\n }\n @keyframes blink { 50% { opacity: 0; } }\n .birth-final {\n margin-top: 36px;\n text-align: center;\n color: var(--warm);\n font-size: 15px;\n font-weight: 700;\n letter-spacing: 0.10em;\n text-shadow: 0 0 10px rgba(255, 208, 102, 0.4);\n opacity: 0;\n transition: opacity 0.6s ease-in;\n }\n .birth-final.shown { opacity: 1; }\n .birth-enter {\n margin: 24px auto 0;\n display: block;\n background: linear-gradient(180deg, var(--accent) 0%, #4eb8e5 100%);\n border: 0;\n color: #0a1024;\n font-family: inherit;\n font-weight: 700;\n font-size: 13px;\n padding: 12px 32px;\n border-radius: 12px;\n cursor: pointer;\n letter-spacing: 0.10em;\n opacity: 0;\n transition: opacity 0.6s ease-in, transform 120ms ease;\n box-shadow: 0 6px 18px rgba(106, 212, 255, 0.35);\n }\n .birth-enter.shown { opacity: 1; }\n .birth-enter:hover { transform: translateY(-1px); }\n .birth-error {\n color: var(--err-color);\n text-align: center;\n margin-top: 24px;\n font-size: 11.5px;\n letter-spacing: 0.05em;\n }\n\n /* ===================================================================\n API-key config overlay \u2014 same modernized treatment.\n =================================================================== */\n .cfg-overlay {\n position: fixed;\n inset: 0;\n background:\n radial-gradient(ellipse at center, rgba(40, 30, 80, 0.95) 0%, rgba(5, 5, 20, 1) 70%);\n z-index: 9998;\n display: none;\n align-items: center;\n justify-content: center;\n padding: 32px;\n }\n .cfg-overlay.open { display: flex; }\n .cfg-card {\n position: relative;\n z-index: 2;\n width: min(520px, 95vw);\n background: var(--bg-card-strong);\n border: 1px solid var(--border-strong);\n border-radius: 16px;\n backdrop-filter: blur(30px);\n -webkit-backdrop-filter: blur(30px);\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);\n padding: 28px 32px;\n }\n .cfg-stars {\n text-align: center;\n color: var(--accent);\n font-size: 12px;\n letter-spacing: 6px;\n text-shadow: 0 0 8px var(--accent-glow);\n animation: starBlink 1.5s steps(3) infinite;\n }\n .cfg-title {\n text-align: center;\n color: var(--warm);\n font-size: 16px;\n font-weight: 700;\n letter-spacing: 6px;\n margin: 16px 0 6px;\n }\n .cfg-sub {\n text-align: center;\n color: var(--fg-3);\n font-size: 12.5px;\n margin-bottom: 22px;\n line-height: 1.5;\n }\n .cfg-sub a { color: var(--accent); text-decoration: underline; }\n .cfg-field { display: block; margin: 14px 0; }\n .cfg-label {\n display: block;\n font-size: 10.5px;\n font-weight: 700;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: var(--accent);\n margin-bottom: 6px;\n }\n .cfg-label .opt {\n color: var(--fg-3);\n font-size: 9.5px;\n margin-left: 6px;\n text-transform: none;\n letter-spacing: 0;\n font-weight: 400;\n }\n .cfg-input {\n width: 100%;\n background: var(--bg-card);\n border: 1px solid var(--border-strong);\n border-radius: 10px;\n color: var(--fg);\n font-family: ui-monospace, \"SF Mono\", Menlo, monospace;\n font-size: 13px;\n padding: 10px 12px;\n }\n .cfg-input:focus {\n outline: none;\n border-color: var(--accent);\n box-shadow: 0 0 0 3px var(--accent-soft);\n }\n .cfg-help {\n color: var(--fg-3);\n font-size: 11px;\n margin-top: 6px;\n }\n .cfg-help code {\n color: var(--fg-2);\n background: rgba(0, 0, 0, 0.3);\n padding: 1px 5px;\n border-radius: 3px;\n font-size: 11px;\n }\n .cfg-actions {\n margin-top: 22px;\n display: flex;\n justify-content: center;\n }\n .cfg-save {\n background: linear-gradient(180deg, var(--accent) 0%, #4eb8e5 100%);\n border: 0;\n color: #0a1024;\n font-family: inherit;\n font-size: 12.5px;\n font-weight: 700;\n padding: 11px 28px;\n border-radius: 12px;\n cursor: pointer;\n letter-spacing: 0.10em;\n box-shadow: 0 4px 14px rgba(106, 212, 255, 0.25);\n transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;\n }\n .cfg-save:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(106, 212, 255, 0.35); }\n .cfg-save:active { transform: translateY(0); }\n .cfg-save:disabled { opacity: 0.55; cursor: wait; }\n .cfg-error {\n color: var(--err-color);\n font-size: 11px;\n text-align: center;\n margin-top: 14px;\n min-height: 14px;\n }";
13
13
  //# sourceMappingURL=lisa-css.d.ts.map
package/dist/web/lisa-css.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"lisa-css.d.ts","sourceRoot":"","sources":["../../src/web/lisa-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,u4gCA8nCjB,CAAC"}
1
+ {"version":3,"file":"lisa-css.d.ts","sourceRoot":"","sources":["../../src/web/lisa-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH,eAAO,MAAM,QAAQ,2jlDA2oDjB,CAAC"}