/* zeno-polish.css: livelier background + cleaner chat.
   Load it AFTER the inline <style> in zeno.html. Pure CSS, no other code changes. */

/* ---------- background: soft glows + faint dot grid instead of flat colour ---------- */
body{
  background:
    radial-gradient(900px 520px at 88% -8%, rgba(var(--ring), .16), transparent 62%),
    radial-gradient(800px 520px at -6% 108%, rgba(139, 92, 246, .11), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
.main{ background: transparent; position: relative; isolation: isolate; }
.main::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  color: var(--text);
  background-image: radial-gradient(currentColor 1px, transparent 1.2px);
  background-size: 26px 26px;
  opacity: .045;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
}

/* ---------- welcome screen ---------- */
.hero-mark{ box-shadow: 0 0 0 1px var(--border), 0 14px 44px rgba(var(--ring), .32); }
.hero h1 .accent{
  background: linear-gradient(90deg, var(--accent), #8b5cf6 85%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.shortcut-chip{
  background: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: transform .15s ease, border-color .15s ease, color .15s ease;
}
.shortcut-chip:hover{ transform: translateY(-1px); }

/* ---------- chat: no boxes, no divider lines ---------- */
.feed-wrap .feed{ max-width: 780px; padding: 10px 20px 16px 20px; }
.feed .msg-row{ border-bottom: none; padding: 12px 4px; animation: vxMsgIn .24s ease-out; }

/* assistant: plain text next to a small avatar, no card */
.feed .msg-row.assistant .msg-main{
  background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 2px 0 0 0;
}
.feed .msg-row .bubble{ line-height: 1.72; }
.msg-avatar{ width: 32px; height: 32px; border-radius: 9px; }
.msg-head{ margin-bottom: 4px; }
.msg-name{ font-size: 13.5px; }
.msg-time, .msg-model, .msg-stats{ opacity: .55; transition: opacity .15s ease; }
.feed .msg-row:hover .msg-time,
.feed .msg-row:hover .msg-model,
.feed .msg-row:hover .msg-stats{ opacity: 1; }

/* you: the bubble is ONLY the text; the buttons sit underneath it, outside the bubble */
.feed .msg-row.user{ justify-content: flex-end; }
.feed .msg-row.user .msg-avatar,
.feed .msg-row.user .msg-head{ display: none; }
.feed .msg-row.user .msg-main{
  flex: 0 1 auto; max-width: min(84%, 620px);
  display: flex; flex-direction: column; align-items: flex-end;
  background: transparent; border: none; box-shadow: none; padding: 0;
}
.feed .msg-row.user .bubble{
  max-width: 100%;
  background: var(--user-bubble);
  border: 1px solid var(--border-soft);
  border-radius: 20px 20px 6px 20px;
  padding: 10px 16px;
}
.feed .msg-row.user .msg-actions{ justify-content: flex-end; margin-top: 4px; }

/* action buttons: quiet, show on hover (always visible on the newest message and on touch screens) */
.msg-actions{ border-top: none; padding-top: 0; margin-top: 8px; gap: 4px; }
.msg-act{ border-color: transparent; background: transparent; padding: 5px 9px; font-size: 12px; }
.msg-act:hover{ background: var(--border-soft); border-color: transparent; }
@media (hover: hover){
  .feed .msg-row .msg-actions{ opacity: 0; transition: opacity .15s ease; }
  .feed .msg-row:hover .msg-actions,
  .feed .msg-row:last-child .msg-actions,
  .feed .msg-row:focus-within .msg-actions{ opacity: 1; }
}

/* code blocks */
.code-block{ border-radius: 14px; margin: 12px 0; }
.code-head{ padding: 7px 8px 7px 14px; }

/* ---------- composer: floating glass bar ---------- */
.composer{
  background: color-mix(in srgb, var(--bg-elevated) 84%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border-radius: 24px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.composer:focus-within{
  border-color: rgba(var(--ring), .55);
  box-shadow: 0 0 0 4px rgba(var(--ring), .12), var(--shadow);
}

@keyframes vxMsgIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .feed .msg-row{ animation: none; } }

@media (max-width: 760px){
  .feed-wrap .feed{ padding: 4px 12px 10px 12px; }
  .feed .msg-row{ padding: 10px 0; }
  .feed .msg-row.user .msg-main{ max-width: 88%; padding: 0; }
  .feed .msg-row.assistant .msg-main{ padding: 2px 0 0 0; }
}