@kevin5251984/guild 0.2.19 → 0.2.21

package/src/public/mobile.css

@@ -8,6 +8,7 @@
   --panel: #10141A;
   --lift: #161C24;
   --card: #161C24;
+  --bubble: #1A222C;
   --you: #242C36;
   --text: #E8E4DC;
   --muted: #8B8F96;
@@ -15,6 +16,10 @@
   --fill: #141A22;
   --ok: #9fdfb2;
   --danger: #f0a8a8;
+  --press: 0.97;
+  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
+  --press-ms: 140ms;
+  --hover-ms: 160ms;
   --tap: 44px;
   --focus: 0 0 0 2px var(--bg), 0 0 0 3px var(--steel);
   --vvh: 100dvh;
@@ -48,6 +53,66 @@ textarea:focus-visible {
   outline: none;
   box-shadow: var(--focus);
 }
+/* Enamel press language, shared with the hall: paper / steel / ghost. */
+.navlist a,
+.back,
+.turn-stop,
+.turn-pause,
+.turn-continue,
+.turn-steer,
+.steer,
+.send,
+.stop-all,
+.mention-item {
+  transition:
+    background-color var(--hover-ms) ease,
+    border-color var(--hover-ms) ease,
+    color var(--hover-ms) ease,
+    transform var(--press-ms) var(--ease-out),
+    opacity var(--hover-ms) ease;
+}
+.navlist a:active,
+.back:active,
+.turn-stop:active:not(:disabled),
+.turn-pause:active:not(:disabled),
+.turn-continue:active:not(:disabled),
+.turn-steer:active:not(:disabled),
+.steer:active:not(:disabled),
+.send:active:not(:disabled),
+.stop-all:active:not(:disabled),
+.mention-item:active {
+  transform: scale(var(--press));
+}
+@media (prefers-reduced-motion: reduce) {
+  .navlist a,
+  .back,
+  .turn-stop,
+  .turn-pause,
+  .turn-continue,
+  .turn-steer,
+  .steer,
+  .send,
+  .stop-all,
+  .mention-item {
+    transition:
+      background-color var(--hover-ms) ease,
+      border-color var(--hover-ms) ease,
+      color var(--hover-ms) ease,
+      opacity var(--hover-ms) ease;
+  }
+  .navlist a:active,
+  .back:active,
+  .turn-stop:active,
+  .turn-pause:active,
+  .turn-continue:active,
+  .turn-steer:active,
+  .steer:active,
+  .send:active,
+  .stop-all:active,
+  .mention-item:active {
+    transform: none;
+  }
+}
 .screen {
   display: flex;
   flex-direction: column;
@@ -214,6 +279,7 @@ textarea:focus-visible {
   font-weight: 650;
   color: #fff;
   background: var(--steel);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--steel) 38%, transparent);
 }
 .avatar img {
   width: 100%;
@@ -242,6 +308,7 @@ textarea:focus-visible {
   white-space: pre-wrap;
 }
 .msg.you .bubble { background: var(--you); }
+.msg.bot .bubble { background: var(--bubble); }
 .assistant-text {
   margin: 0;
   color: var(--text);
@@ -264,9 +331,10 @@ textarea:focus-visible {
 .assistant-text .md-fence {
   margin: 0.35rem 0 0.7rem;
   border-radius: 12px;
-  background: #1a1a1a;
+  background: var(--fill);
   overflow: auto;
 }
+.assistant-text .md-html-preview { overflow: hidden; }
 .assistant-text .md-fence-bar {
   display: flex;
   align-items: center;
@@ -277,11 +345,101 @@ textarea:focus-visible {
   color: var(--muted);
   font-size: 0.75rem;
 }
+.assistant-text .md-fence-tabs {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  margin-left: auto;
+  margin-right: 4px;
+}
+.assistant-text .md-fence-tab {
+  margin: 0;
+  min-height: var(--tap);
+  padding: 0 10px;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 0.78rem;
+  cursor: pointer;
+}
+.assistant-text .md-fence-tab.on,
+.assistant-text .md-fence-tab:hover { background: var(--lift); color: var(--text); }
+.assistant-text .md-fence-acts {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.assistant-text .md-fence-btn {
+  margin: 0;
+  width: var(--tap);
+  height: var(--tap);
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.assistant-text .md-html-frame {
+  display: block;
+  width: 100%;
+  min-height: 220px;
+  height: 52vh;
+  border: 0;
+  background: #fff;
+  border-radius: 0 0 12px 12px;
+}
+.assistant-text .md-html-preview[data-view="code"] .md-html-frame { display: none; }
+.assistant-text .md-html-preview[data-view="preview"] .md-pre { display: none; }
 .assistant-text .md-pre {
   margin: 0;
   padding: 0.6rem 0.8rem 0.8rem;
   overflow: auto;
   font-size: 0.82rem;
+  white-space: pre;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+.html-zoom {
+  position: fixed;
+  inset: 0;
+  z-index: 80;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
+  background: rgba(0, 0, 0, 0.72);
+}
+.html-zoom[hidden] { display: none !important; }
+.html-zoom-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 0 0 12px;
+  color: var(--text);
+}
+.html-zoom-close {
+  margin: 0;
+  width: var(--tap);
+  height: var(--tap);
+  border: 0;
+  border-radius: 50%;
+  background: var(--fill);
+  color: var(--text);
+  font-size: 1.35rem;
+  cursor: pointer;
+}
+.html-zoom-frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  border-radius: 16px;
+  background: #fff;
 }
 .assistant-text img.md-img {
   max-width: 100%;
@@ -301,11 +459,11 @@ textarea:focus-visible {
   white-space: nowrap;
   background: linear-gradient(
     90deg,
-    #E8E4DC 0%,
-    #E8E4DC 40%,
-    #8B8F96 50%,
-    #E8E4DC 60%,
-    #E8E4DC 100%
+    var(--text) 0%,
+    var(--text) 40%,
+    var(--muted) 50%,
+    var(--text) 60%,
+    var(--text) 100%
   );
   background-position: 100% 0;
   background-size: 250% 100%;
@@ -319,8 +477,8 @@ textarea:focus-visible {
   font-size: 13px;
   font-weight: 400;
   font-variant-numeric: tabular-nums;
-  color: #6f6f6f;
-  -webkit-text-fill-color: #6f6f6f;
+  color: var(--muted);
+  -webkit-text-fill-color: var(--muted);
 }
 @keyframes m-shimmer { to { background-position: 0 0; } }
 @media (prefers-reduced-motion: reduce) {
@@ -343,15 +501,24 @@ textarea:focus-visible {
   line-height: 20px;
   color: var(--muted);
 }
-.live-name { color: #cfcfcf; font-weight: 500; }
+.live-name { color: var(--text); font-weight: 500; }
 .live-detail {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 .live-step.running .live-name { color: var(--text); }
-.turn-actions { margin-top: 4px; }
+.turn-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 4px;
+}
 .turn-stop,
+.turn-pause,
+.turn-continue,
+.turn-steer,
+.steer,
 .send,
 .stop-all {
   display: inline-flex;
@@ -369,19 +536,47 @@ textarea:focus-visible {
   font-weight: 620;
   cursor: pointer;
 }
+/* Stop is ghost steel: --fill at rest, --lift on hover, danger ink only. */
 .turn-stop,
 .stop-all {
   color: var(--danger);
+  background: var(--fill);
+  border-color: color-mix(in srgb, var(--danger) 32%, var(--line));
+}
+.turn-stop:hover,
+.stop-all:hover {
   background: var(--lift);
-  border-color: color-mix(in srgb, var(--danger) 35%, var(--line));
+  border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
+}
+.turn-pause,
+.turn-continue,
+.turn-steer,
+.steer {
+  color: var(--steel);
+  background: var(--fill);
+  border-color: color-mix(in srgb, var(--steel) 38%, var(--line));
+}
+.turn-pause:hover,
+.turn-continue:hover,
+.turn-steer:hover,
+.steer:hover {
+  background: var(--lift);
+  color: var(--text);
+  border-color: color-mix(in srgb, var(--steel) 55%, var(--line));
 }
+/* The one paper CTA on the page. */
 .send {
-  background: var(--steel);
+  background: var(--paper);
   color: var(--ink);
   border-color: transparent;
 }
+.send:hover:not(:disabled) {
+  background: color-mix(in srgb, var(--paper) 88%, white);
+}
 .send:disabled,
-.stop-all:disabled {
+.stop-all:disabled,
+.steer:disabled,
+.turn-stop:disabled {
   opacity: 0.45;
   cursor: default;
 }
@@ -407,9 +602,17 @@ textarea:focus-visible {
   gap: 0.5rem;
 }
 .composer-actions .send,
-.composer-actions .stop-all {
+.composer-actions .stop-all,
+.composer-actions .steer {
   flex: 1;
 }
+.composer-steer {
+  color: var(--muted);
+  font-size: 0.75rem;
+  line-height: 1.4;
+  padding: 0 0.15rem;
+}
+.composer-steer[hidden] { display: none; }
 #draft {
   display: block;
   width: 100%;
@@ -472,6 +675,7 @@ textarea:focus-visible {
   color: #fff;
   background: var(--steel);
   flex: none;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--steel) 38%, transparent);
 }
 .flash {
   position: fixed;
@@ -489,3 +693,9 @@ textarea:focus-visible {
   z-index: 8;
 }
 .flash.on { opacity: 1; }
+/* Errors read as danger ink on enamel lift, never a filled red slab. */
+.flash.err {
+  background: var(--lift);
+  color: var(--danger);
+  border: 1px solid color-mix(in srgb, var(--danger) 35%, var(--line));
+}