chatter

colony/core/roles/webview/static/style.css

@@ -216,6 +216,32 @@ p { margin: 4px 0; }
 .swatch.flow { width: 20px; height: 0; border-radius: 0; border: 0; border-top: 3.5px dashed var(--text); vertical-align: 3px; }
 .swatch.none { background: transparent; border: 2px dashed var(--muted); }
 
+.chat { position: absolute; top: 12px; right: 12px; bottom: 12px; width: min(340px, calc(100% - 24px)); display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 6px 24px color-mix(in srgb, var(--text) 12%, transparent); }
+.chat-head { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--line); }
+.chat-head h2 { flex: 1; margin: 0; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.chat-head button { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text); cursor: pointer; }
+.chat-head button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
+.chat-head svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
+.chat-status { margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
+.chat-log { flex: 1; min-height: 0; overflow-y: auto; margin: 0; padding: 12px; list-style: none; display: flex; flex-direction: column; gap: 6px; }
+.chat-log:focus-visible { outline: 2px solid var(--text); outline-offset: -2px; }
+.chat-empty { margin: 0; padding: 0 14px 12px; text-align: center; }
+.chat-error { margin: 0; padding: 6px 14px; font-size: 13px; }
+.msg { max-width: 85%; padding: 6px 10px; border-radius: 12px; overflow-wrap: anywhere; }
+.msg.in { align-self: flex-start; background: var(--bg); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
+.msg.out { align-self: flex-end; background: color-mix(in srgb, var(--n0) 16%, var(--card)); border: 1px solid color-mix(in srgb, var(--n0) 40%, transparent); border-bottom-right-radius: 4px; }
+.msg-text { margin: 0; white-space: pre-wrap; }
+.msg-time { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
+.msg.out .msg-time { text-align: right; }
+.chat-form { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--line); }
+.chat-form input { flex: 1; min-width: 0; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; }
+.chat-form input:focus-visible { outline: 2px solid var(--n0); outline-offset: 0; border-color: transparent; }
+.chat-form button { height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--n0); color: var(--card); font: inherit; font-weight: 600; cursor: pointer; }
+.chat-form button:disabled, .chat-form input:disabled { opacity: 0.6; cursor: default; }
+.chat-form button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
+#stage.chatting .controls { right: 364px; }
+@media (pointer: coarse) { .chat-form input, .chat-form button, .chat-head button { min-height: 44px; } .chat-head button { min-width: 44px; } }
+
 .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 
 /* Phones: the desktop sizes are small on a 400px screen, so the page text and touch targets grow. */
@@ -226,4 +252,6 @@ p { margin: 4px 0; }
   .alert, .route, .muted, .legend { font-size: 14px; }
   .legend { max-width: calc(100% - 24px); }
   .legend, .legend-open { bottom: 64px; }
+  .chat { top: auto; left: 0; right: 0; bottom: 0; width: auto; height: min(70%, 520px); border-radius: 14px 14px 0 0; border-bottom: 0; }
+  #stage.chatting .controls, #stage.chatting .legend, #stage.chatting .legend-open { display: none; }
 }