viberoom 0.5.2 → 0.5.4

package/ui/app.css

@@ -35,7 +35,7 @@
 .rail-room:hover .room-mark { opacity: 1; transform: translateY(-1px); }
 .rail-room.active, .rail-room.active:hover { background: transparent; box-shadow: none; }
 .rail-room.active .room-mark { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--primary); }
-.rail-room .rail-count { background: linear-gradient(135deg, #ff7a45, #f0452c); min-width: 18px; text-align: center; z-index: 2; }
+.rail-room .rail-count { background: var(--unread-grad); min-width: 18px; text-align: center; z-index: 2; }
 .rail-room .rail-count.bump { animation: badge-pop 360ms var(--ease-pop); }
 @keyframes badge-pop { 0% { transform: scale(0.6); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
 .shell.rail-open .rail-items { align-items: stretch; padding: 0 14px; }
@@ -44,7 +44,15 @@
 .rail-toggle { width: 44px; height: 24px; margin-top: 8px; border-radius: 8px; border: 0; background: transparent; color: var(--faint); display: grid; place-content: center; padding: 0; align-self: center; transition: background var(--t-fast), color var(--t-fast); }
 .rail-toggle .i { width: 16px; height: 16px; }
 .rail-toggle:hover { background: #fff; color: var(--primary); }
-.rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: 0; align-items: center; }
+.rail-foot { position: relative; margin-top: auto; display: flex; flex-direction: column; gap: 0; align-items: center; }
+.update-pop { position: absolute; left: 12px; bottom: calc(100% - 2px); z-index: 30; display: flex; gap: 6px; align-items: flex-start; width: 250px; padding: 10px 8px 10px 14px; background: #fff; border-radius: 18px 18px 18px 6px; box-shadow: 0 10px 28px -12px rgba(28, 27, 51, 0.45), var(--shadow-tile); font-size: 12.5px; font-weight: 600; color: var(--ink-2); animation: bubble-in 0.45s var(--ease-out); }
+.update-pop::after { content: ""; position: absolute; left: 14px; bottom: -6px; width: 12px; height: 12px; background: #fff; border-radius: 0 0 3px 0; transform: rotate(45deg); box-shadow: 3px 3px 4px -3px rgba(28, 27, 51, 0.25); }
+.update-pop .up-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
+.update-pop .up-text { line-height: 1.4; }
+.update-pop .up-text b { color: var(--ink); }
+.update-pop .up-go { align-self: flex-start; }
+.update-pop .up-side { flex: none; display: flex; flex-direction: column; gap: 2px; }
+.update-pop .icon-btn.sm { width: 26px; height: 26px; }
 .shell.rail-open .rail-foot { align-items: stretch; padding: 0 14px; }
 .rail-item { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; border-radius: 14px; color: var(--muted); font-weight: 800; font-size: 13px; white-space: nowrap; transition: background var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
 .shell.rail-open .rail-item { width: auto; justify-content: flex-start; padding: 0 12px 0 0; }
@@ -214,9 +222,9 @@
 .timeline { position: absolute; right: 6px; top: 78px; bottom: calc(var(--composer-h, 60px) + 36px); width: 18px; z-index: 4; }
 .tl-ticks { position: absolute; inset: 0; }
 .tl-view { position: absolute; left: 2px; right: 2px; border-radius: 6px; background: rgba(91, 91, 240, 0.07); pointer-events: none; transition: top 80ms linear, height 80ms linear; }
-.tl-tick { position: absolute; left: 3px; width: 12px; height: 5px; border-radius: 3px; background: #cdcdf9; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
+.tl-tick { position: absolute; left: 3px; width: 12px; height: 5px; border-radius: 3px; background: var(--tick-mine); cursor: pointer; transition: background var(--t-fast), transform var(--t-fast); }
 .tl-tick:hover, .tl-tick.active { background: var(--primary); transform: scaleX(1.25); }
-.tl-tick.in-view { background: #a9a9f5; }
+.tl-tick.in-view { background: var(--tick-mine-view); }
 .tl-tick.pinned { background: var(--primary); }
 .tl-row.current.pinned { background: var(--lav-2); }
 .tl-row.pinned { opacity: 1; color: var(--ink); }
@@ -224,9 +232,9 @@
 .tl-row .tl-pin .i { width: 14px; height: 14px; }
 .timeline.left { left: 6px; right: auto; }
 .timeline.left .tl-view { background: rgba(28, 27, 51, 0.05); }
-.timeline.left .tl-tick { background: color-mix(in srgb, var(--tick, #9ca3af) 35%, #fff); }
-.timeline.left .tl-tick.in-view { background: color-mix(in srgb, var(--tick, #9ca3af) 60%, #fff); }
-.timeline.left .tl-tick.pinned, .timeline.left .tl-tick:hover, .timeline.left .tl-tick.active { background: var(--tick, #9ca3af); }
+.timeline.left .tl-tick { background: color-mix(in srgb, var(--tick, var(--tick-fallback)) 35%, #fff); }
+.timeline.left .tl-tick.in-view { background: color-mix(in srgb, var(--tick, var(--tick-fallback)) 60%, #fff); }
+.timeline.left .tl-tick.pinned, .timeline.left .tl-tick:hover, .timeline.left .tl-tick.active { background: var(--tick, var(--tick-fallback)); }
 .timeline.left .tl-pop { left: 26px; right: auto; }
 .tl-pop::before { content: ""; position: absolute; top: -6px; bottom: -6px; right: -6px; width: 6px; }
 .timeline.left .tl-pop::before { right: auto; left: -6px; }
@@ -265,25 +273,25 @@
 .jump-latest:hover { background: var(--soft); }
 .done-notes { position: absolute; left: 30px; bottom: 96px; z-index: 5; display: flex; flex-direction: column-reverse; gap: 6px; }
 .done-note { display: inline-flex; align-items: center; gap: 8px; max-width: 230px; padding: 6px 12px 6px 8px; border: 0; border-radius: 14px; background: var(--warm); color: var(--warm-ink); font: inherit; text-align: left; cursor: pointer; box-shadow: var(--shadow-pop); animation: rise var(--t-base) var(--ease-out); overflow: hidden; }
-.done-note:hover { background: #ffeaa8; }
+.done-note:hover { background: var(--note-hover); }
 .done-note .avatar { flex: none; }
 .done-go { display: inline-flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 4px 6px 8px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
-.done-go:hover { background: #ffeaa8; }
+.done-go:hover { background: var(--note-hover); }
 .done-go .avatar { flex: none; }
 .done-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
 .done-text b { font-size: 12px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .done-text small { font-size: 11px; font-weight: 600; opacity: 0.8; white-space: nowrap; }
 .done-x { border: 0; background: transparent; color: inherit; opacity: 0.6; font-size: 15px; line-height: 1; padding: 0 9px; cursor: pointer; }
-.done-x:hover { opacity: 1; background: #ffeaa8; }
+.done-x:hover { opacity: 1; background: var(--note-hover); }
 .jump-latest .i { width: 16px; height: 16px; }
 .bubble { max-width: 100%; background: #fff; border-radius: 6px 18px 18px 18px; padding: 12px 16px; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.55; color: var(--ink-2); box-shadow: 0 2px 0 rgba(28, 27, 51, 0.06), 0 1px 3px rgba(28, 27, 51, 0.04); }
 .msg.mine .bubble { background: var(--grad-primary); color: #fff; border-radius: 18px 18px 6px 18px; box-shadow: 0 8px 18px -10px rgba(91, 91, 240, 0.7); padding: 11px 16px; }
 .msg.mine .bubble .text { color: #fff; }
-.msg.mine.waiting .bubble { background: linear-gradient(135deg, #ff9447, #e8642a); box-shadow: 0 8px 18px -10px rgba(232, 100, 42, 0.7); }
+.msg.mine.waiting .bubble { background: var(--attention-grad); box-shadow: var(--attention-shadow); }
 .bubble .waiting { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.35); font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.92); }
 .bubble .waiting .i { width: 14px; height: 14px; vertical-align: -2px; }
 .bubble .waiting-text { flex: 1; min-width: 160px; }
-.bubble .waiting-stop { border: 0; border-radius: 10px; padding: 6px 12px; background: rgba(255, 255, 255, 0.92); color: #c9461c; font-weight: 800; font-size: 12.5px; cursor: pointer; }
+.bubble .waiting-stop { border: 0; border-radius: 10px; padding: 6px 12px; background: rgba(255, 255, 255, 0.92); color: var(--attention-ink); font-weight: 800; font-size: 12.5px; cursor: pointer; }
 .bubble .waiting-stop:hover:not(:disabled) { background: #fff; }
 .bubble .waiting-stop:disabled { opacity: 0.7; cursor: default; }
 .msg.mine .mention { background: rgba(255, 255, 255, 0.22); color: #fff !important; padding: 1px 7px; border-radius: 6px; font-weight: 800; }
@@ -361,10 +369,17 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .bubble .text.clamped { max-height: 9.2em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent); }
 .bubble .more { background: none; border: 0; color: var(--primary); font-weight: 800; padding: 2px 0; font-size: 13px; }
 .msg.mine .bubble .more { color: #fff; }
-.bubble .pending { color: var(--muted); }
+.bubble .pending { display: inline-flex; align-items: center; gap: 4px; height: 1.55em; vertical-align: text-bottom; }
+.bubble .pending i { width: 5px; height: 5px; border-radius: 50%; background: var(--muted); opacity: 0.25; animation: think 1.4s ease-in-out infinite; }
+.bubble .pending i:nth-child(2) { animation-delay: 0.2s; }
+.bubble .pending i:nth-child(3) { animation-delay: 0.4s; }
+@keyframes think { 0%, 60%, 100% { opacity: 0.25; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
 .mention { font-weight: 800; }
-.caret { display: inline-block; width: 7px; height: 14px; background: var(--muted); margin-left: 2px; vertical-align: text-bottom; animation: blink 1s steps(2) infinite; }
-@keyframes blink { to { opacity: 0; } }
+.working { display: inline-block; width: 19px; height: 15px; color: var(--faint); margin-left: 5px; vertical-align: -3px; overflow: visible; }
+.working .forearm { animation: type 0.14s ease-in-out infinite alternate; transform-box: view-box; transform-origin: 23px 27px; }
+.working .body { animation: bob 0.28s ease-in-out infinite alternate; }
+@keyframes type { from { transform: rotate(-16deg); } to { transform: rotate(4deg); } }
+@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-0.8px); } }
 .thought { margin: 2px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
 .thought summary { cursor: pointer; }
 .thought-text { white-space: pre-wrap; padding: 4px 0 0 8px; border-left: 2px solid var(--lav-2); margin-top: 4px; }
@@ -403,8 +418,8 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .head .edit-btn .i, .head .pin-btn .i { width: 14px; height: 14px; }
 .msg:hover .head .edit-btn, .head .edit-btn:focus, .msg:hover .head .pin-btn, .head .pin-btn:focus { opacity: 1; }
 .head .edit-btn:hover { color: var(--primary); }
-.head .pin-btn:hover { color: #ff8a3d; }
-.msg.pinned .head .pin-btn { opacity: 1; color: #ff8a3d; }
+.head .pin-btn:hover { color: var(--attention); }
+.msg.pinned .head .pin-btn { opacity: 1; color: var(--attention); }
 .edit-box { margin: 4px 0 6px; }
 .msg .bubble-col:has(> .bubble > .edit-box:not([hidden])) { width: 100%; }
 .msg .bubble:has(> .edit-box:not([hidden])) { width: min(760px, 100%); }
@@ -428,7 +443,7 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .perm-result { color: var(--muted); font-size: 12px; }
 .visibility-divider { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
 .visibility-divider .vd-line { flex: 1; height: 8px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='8' viewBox='0 0 16 8'><path d='M0 4 Q4 0 8 4 T16 4' fill='none' stroke='%23f472b6' stroke-width='1.6'/></svg>") repeat-x center / 16px 8px; opacity: 0.7; }
-.visibility-divider .vd-label { color: #be185d; background: #fff1f7; border-radius: var(--r-pill); padding: 4px 12px; font-size: 11px; font-weight: 800; white-space: nowrap; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
+.visibility-divider .vd-label { color: var(--unseen-ink); background: var(--unseen-bg); border-radius: var(--r-pill); padding: 4px 12px; font-size: 11px; font-weight: 800; white-space: nowrap; max-width: 70%; overflow: hidden; text-overflow: ellipsis; }
 .msg.hidden { justify-content: center; }
 .hidden-turn { max-width: 720px; width: 100%; background: var(--soft); border-radius: 12px; padding: 6px 12px; font-size: 12px; font-weight: 600; color: var(--muted); }
 .hidden-turn summary { cursor: pointer; list-style: none; }
@@ -562,6 +577,31 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .tpl-meta { color: var(--muted); font-size: 12px; font-weight: 600; }
 .tpl-item .avatar-stack { margin-top: 2px; }
 .tpl-rec { background: var(--warm); color: var(--warm-ink); font-size: 10px; padding: 1px 7px; }
+.tpl-mine { background: var(--lav); color: var(--primary); font-size: 10px; padding: 1px 7px; }
+.tpl-runs { display: flex; flex-wrap: wrap; gap: 6px; }
+.stp-preview { display: flex; flex-direction: column; gap: 10px; max-height: 48vh; overflow: auto; padding-right: 4px; margin: 4px 0 10px; }
+.stp-section { background: var(--soft); border-radius: 14px; padding: 10px 12px; }
+.section.template { background: var(--lav); margin: 22px 0 14px; padding: 16px 18px 18px; box-sizing: border-box; width: 100%; overflow: hidden; }
+.section.template > h4 { color: var(--primary); }
+.stp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
+.stp-grid .field { margin-bottom: 8px; }
+.stp-grid .field.wide { grid-column: 1 / -1; }
+.stp-grid .switch { margin: 2px 0 8px; }
+.stp-vm { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; padding: 10px 0 4px; border-top: 1px solid var(--lav-2); }
+.stp-vm-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
+.stp-vm-fields .field { margin-bottom: 8px; }
+.stp-vm-fields .field.wide { grid-column: 1 / -1; }
+.stp-vm-fields .field textarea { min-height: 54px; }
+.stp-vm-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
+.stp-vm-top b { flex: 1; }
+.stp-section h5 { margin: 0 0 6px; font-size: 11px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
+.stp-section .kv { font-size: 12.5px; }
+.stp-section ul { margin: 0; padding-left: 18px; color: var(--ink-2); font-size: 13px; font-weight: 600; }
+.stp-vm { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--lav-2); }
+.stp-vm:first-of-type { border-top: 0; padding-top: 2px; }
+.stp-vm-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
+.stp-vm-role { color: var(--muted); font-size: 12.5px; font-weight: 600; line-height: 1.45; margin-top: 3px; }
+.stp-vm .chips { margin-top: 5px; }
 .tpl-check { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--primary); color: #fff; opacity: 0; transition: opacity var(--t-fast); }
 .tpl-check .i { width: 12px; height: 12px; }
 .tpl-item.on .tpl-check { opacity: 1; }
@@ -591,8 +631,10 @@ table.csv tbody tr:nth-child(even) td { background: rgba(91, 91, 240, 0.03); }
 .check-list.locked { pointer-events: none; opacity: 0.6; }
 .msg.system.done { justify-content: center; }
 .done-row { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px; border: 0; border-radius: var(--r-pill); background: var(--warm); color: var(--warm-ink); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; box-shadow: var(--edge); }
-.done-row:hover { background: #ffeaa8; }
+.done-row:hover { background: var(--note-hover); }
 .done-notes { flex-direction: column; }
 .done-note.new { background: var(--card); color: var(--ink-2); }
 .done-note.new:hover { background: var(--soft); }
 .meta .seen-by { color: var(--primary); font-weight: 800; margin-left: 6px; }
+.section.template .stp-row { justify-content: center; margin: 6px 0 0; }
+.section.template .field-note { margin: -2px 0 12px; }