diff --git a/codec_chat.html b/codec_chat.html index dfb3fc1..abef1cd 100644 --- a/codec_chat.html +++ b/codec_chat.html @@ -109,37 +109,24 @@ .msg-time{font-family:var(--mono);font-size:11px;color:var(--text-dim);margin-top:3px;padding:0 4px} .msg.user .msg-time{text-align:right} -/* ── Copy button on messages ── */ -.msg-copy{ - position:absolute;top:4px;right:-32px; - background:var(--surface);border:1px solid var(--border);color:var(--text-dim); - width:24px;height:24px;border-radius:5px;cursor:pointer; - display:flex;align-items:center;justify-content:center; - opacity:0;transition:all .15s; +/* ── Message action row: timestamp + regenerate / edit / copy / speak ── + One inline row beneath each bubble (replaces the old corner-floating + absolute buttons that clipped off-screen and left .msg-speak unstyled). */ +.msg-meta{display:flex;align-items:center;gap:1px;margin-top:4px; + opacity:.5;transition:opacity .15s} +.msg:hover .msg-meta{opacity:1} +.msg.user .msg-meta{justify-content:flex-end} +.msg-meta .msg-time{margin-top:0} +.msg-act{ + background:none;border:none;color:var(--text-dim);cursor:pointer; + width:28px;height:28px;border-radius:6px;padding:0; + display:inline-flex;align-items:center;justify-content:center; + transition:color .12s,background .12s; } -.msg.assistant:hover .msg-copy{opacity:1} -.msg.user .msg-copy{right:auto;left:-32px} -.msg.user:hover .msg-copy{opacity:1} -.msg-copy:hover{color:var(--accent);border-color:var(--accent)} -.msg-copy.copied{color:var(--success);border-color:var(--success)} -.msg-regen{ - position:absolute;bottom:4px;right:-32px; - background:var(--surface);border:1px solid var(--border);color:var(--text-dim); - width:24px;height:24px;border-radius:5px;cursor:pointer; - display:flex;align-items:center;justify-content:center; - opacity:0;transition:all .15s; -} -.msg.assistant:hover .msg-regen{opacity:1} -.msg-regen:hover{color:var(--accent);border-color:var(--accent)} -.msg-edit{ - position:absolute;bottom:4px;left:-32px; - background:var(--surface);border:1px solid var(--border);color:var(--text-dim); - width:24px;height:24px;border-radius:5px;cursor:pointer; - display:flex;align-items:center;justify-content:center; - opacity:0;transition:all .15s; -} -.msg.user:hover .msg-edit{opacity:1} -.msg-edit:hover{color:var(--accent);border-color:var(--accent)} +.msg-act:hover{color:var(--text);background:var(--surface-2)} +.msg-act:active{transform:scale(.9)} +.msg-act.copied{color:var(--success)} +.msg-act.speaking{color:var(--accent)} .typing{color:var(--accent);font-size:13px;padding:8px 16px} .typing span{animation:blink 1.4s infinite} @@ -248,10 +235,8 @@ #crewSelect{width:100%} #agentBuilder .ab-row{flex-direction:column} #agentBuilder .ab-field{min-width:100%;max-width:100%!important} - .msg-copy{right:-4px;top:-4px;opacity:0.7} - .msg.user .msg-copy{left:-4px;right:auto} - .msg-regen{right:-4px;bottom:-4px;opacity:0.7} - .msg-edit{left:-4px;bottom:-4px;opacity:0.7} + .msg-meta{opacity:.7} + .msg-act{width:32px;height:32px} .ibtn{width:36px;height:36px} } @media (max-width:480px){ @@ -763,12 +748,14 @@