/* The Ruvio Chat UI rebuilt in HTML/CSS for the page, from the real design tokens (chat-app/src/style.css)
     and components (RosterRow, MessageBubble, StepList, Card/ApprovalCard, Composer, ConversationHeader).
     Everything inside .ui is a picture of the product: aria-hidden in the markup, never interactive. */
  .ui{--uf:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",system-ui,sans-serif;--t:#1c1c1e;--t2:#6e6e73;--t3:#aeaeb2;--pg:#fff;--sb:#fafafa;--bb:#f0f0f2;--hv:#f2f2f4;--sl:#ebebee;--hl:#e5e5ea;--ink:#000;--ok:#0a8f45;--okt:#0a7a3b;--okb:#e7fbef;--wt:#c07600;--wb:#fff4e2;--fl:0 1px 2px rgba(0,0,0,.06),0 4px 16px rgba(0,0,0,.06);
    font:400 15.5px/1.45 var(--uf);color:var(--t);text-align:left;position:relative;-webkit-user-select:none;user-select:none}
  .ui *{margin:0}
  .ui svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
  .sprite{position:absolute;width:0;height:0;overflow:hidden}

  /* browser window around the app */
  .u-win{border:1px solid #dcdce0;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 1px 0 #fff inset,0 50px 90px -40px rgba(0,30,12,.45),0 12px 30px -16px rgba(0,0,0,.18)}
  .u-chrome{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:#f6f6f7;border-bottom:1px solid var(--hl)}
  .u-chrome i{width:11px;height:11px;border-radius:50%;background:#dcdce0}
  .u-chrome i:nth-child(1){background:#ff5f57}.u-chrome i:nth-child(2){background:#febc2e}.u-chrome i:nth-child(3){background:#28c840}
  .u-url{margin:0 auto;transform:translateX(-24px);display:flex;align-items:center;gap:6px;height:24px;padding:0 14px;border-radius:999px;background:#fff;border:1px solid var(--hl);font-size:12.5px;color:var(--t2)}
  .u-url svg{width:11px;height:11px}

  /* app frame: sidebar + conversation */
  .u-app{display:grid;grid-template-columns:272px 1fr;height:540px;background:var(--pg)}
  .u-side{display:flex;flex-direction:column;background:var(--sb);border-right:1px solid var(--hl);padding:12px 8px}
  .u-brandrow{display:flex;align-items:center;gap:6px;padding:2px 4px 14px 12px}
  .u-brandrow b{font:600 17px var(--uf);margin-right:auto;color:var(--t);letter-spacing:-.01em}
  .u-round{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--hl);background:#fff;color:var(--t);box-shadow:var(--fl);flex:none}
  .u-roster{display:flex;align-items:center;gap:11px;min-height:56px;padding:0 10px;border-radius:10px;position:relative}
  .u-roster.sel{background:var(--sl)}
  .u-roster.sel small{color:#5b5b60}
  .u-roster span.u-copy{flex:1;min-width:0;display:grid;gap:1px}
  .u-copy b{font:500 15px/1.3 var(--uf);color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .u-copy small{font-size:13.5px;line-height:1.35;color:var(--t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:grid}
  .u-copy small>*{grid-area:1/1;min-width:0;overflow:hidden;text-overflow:ellipsis}
  .u-badge{display:grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--ink);color:#fff;font:600 12px/1 var(--uf)}
  .u-spin{width:15px;height:15px;border:2px solid var(--hl);border-top-color:var(--ok);border-radius:50%;animation:u-spin .9s linear infinite;flex:none}
  @keyframes u-spin{to{transform:rotate(360deg)}}
  .u-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding:0 4px}
  .u-foot .u-me{width:32px;height:32px;border-radius:50%;background:var(--sl);display:grid;place-items:center;font-size:12.5px;color:var(--t2);flex:none}
  .u-foot .u-pill{flex:1;justify-content:center;gap:10px;height:34px;font-weight:500;font-size:14px}
  .u-av{display:block;flex:none;background:center/contain no-repeat}
  .u-av.g{background-image:url(/bots/green.webp)}.u-av.b{background-image:url(/bots/blue.webp)}.u-av.a{background-image:url(/bots/amber.webp)}.u-av.l{background-image:url(/bots/lavender.webp)}
  .u-av.s22{width:22px;height:22px}.u-av.s28{width:28px;height:28px}.u-av.s36{width:36px;height:36px}.u-av.s48{width:48px;height:48px}.u-av.s64{width:64px;height:64px}

  .u-main{display:flex;flex-direction:column;min-width:0;position:relative}
  .u-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 18px;height:60px}
  .u-head .u-round{justify-self:end}
  .u-pill{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 15px 0 6px;border:1px solid var(--hl);border-radius:999px;background:#fff;box-shadow:var(--fl);font:500 15px/1 var(--uf);color:var(--t)}
  .u-thread{flex:1;position:relative;overflow:hidden;padding:6px 28px 0;display:grid;grid-template-rows:1fr;align-content:start}
  .u-thread>*{grid-area:1/1}
  .u-col{display:flex;flex-direction:column;gap:6px;max-width:640px;width:100%;margin:0 auto}
  .u-empty{display:grid;justify-items:center;align-content:start;gap:6px;padding-top:34px;text-align:center}
  .u-empty b{font:500 19px/1.3 var(--uf);margin-top:6px}
  .u-empty span{color:var(--t2);font-size:14.5px}
  .u-msg{align-self:flex-start;max-width:min(560px,100%);padding:11px 16px;border-radius:16px;background:var(--bb);color:var(--t);overflow-wrap:anywhere}
  .u-msg.mine{align-self:flex-end;background:var(--ink);color:#fff}
  .u-msg.mine+*{margin-top:4px}
  .u-who{display:flex;align-items:center;gap:8px;margin:8px 0 2px;color:var(--t2);font:500 13.5px/1.3 var(--uf)}
  .u-steps{margin:4px 0 2px;padding:0;list-style:none;color:var(--t2);font-size:13.5px;line-height:1.45}
  .u-steps li{position:relative;padding:4px 0 4px 20px}
  .u-steps li::before{content:'';position:absolute;left:3px;top:calc(4px + .725em - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--t3)}
  .u-steps li:not(:last-child)::after{content:'';position:absolute;left:6px;top:calc(4px + .725em + 5.5px);bottom:calc(-4px - .725em + 5.5px);width:1px;background:var(--hl)}
  .u-steps li.ok::before{background:var(--ok)}

  /* the approval card, as the app draws it (Card.svelte + ApprovalCard.svelte) */
  .u-card{display:grid;gap:10px;width:fit-content;min-width:min(360px,100%);max-width:min(560px,100%);margin:4px 0;padding:14px;border-radius:16px;background:var(--bb);color:var(--t)}
  .u-card .t{font:500 15.5px/1.45 var(--uf)}
  .u-card .r{margin-top:-6px;color:var(--t2);font-size:14px}
  .u-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;position:relative}
  .u-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:7px 16px;border-radius:999px;background:var(--ink);color:#fff;font:500 14px/1.4 var(--uf);border:1px solid var(--ink);transition:transform .15s,background .15s}
  .u-btn.press{transform:scale(.93);background:#333}
  .u-btn.u-quiet{background:transparent;border-color:transparent;padding:7px 14px;font:500 14px/1.4 var(--uf);color:var(--t2)}
  .u-link{margin-left:4px;font-size:14px;color:var(--t2);text-decoration:underline;text-underline-offset:3px}
  .u-swap{display:grid}.u-swap>*{grid-area:1/1}
  .u-sent{display:flex;align-items:center;gap:8px;min-height:36px;color:var(--okt);font:500 14px/1.4 var(--uf)}
  .u-sent svg{width:16px;height:16px;stroke-width:2.2}
  .u-details{display:grid;grid-template-columns:max-content 1fr;gap:4px 14px;padding:10px 12px;border-radius:10px;background:#fff;font-size:13.5px;line-height:1.45}
  .u-details dt{color:var(--t2)}.u-details dd{margin:0;color:var(--t)}
  .u-details .hd{grid-column:1/-1;margin:6px 0 0;padding-top:8px;border-top:1px solid var(--hl);color:var(--t2);font:500 12.5px/1.4 var(--uf)}
  .u-files{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
  .u-file{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 14px 0 8px;border-radius:12px;background:#fff;border:1px solid var(--hl);font-size:13.5px;color:var(--t)}
  .u-file i{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;color:#fff;font:600 10px/1 var(--uf);font-style:normal}
  .u-file small{display:block;color:var(--t2);font-size:12px;line-height:1.2}
  .u-file b{font-weight:500;display:block;line-height:1.25}
  .k-xls{background:#1f7a4d}.k-pdf{background:#b3372f}.k-doc{background:#2b5fb8}.k-csv{background:#0f7b8a}

  .u-composer{display:flex;align-items:center;gap:4px;min-height:44px;margin:8px 24px 18px;padding:4px;border:1px solid var(--hl);border-radius:22px;background:#fff;box-shadow:var(--fl)}
  .u-composer .u-round{width:34px;height:34px;box-shadow:none}
  .u-composer .u-in{flex:1;padding:0 6px;color:var(--t2);font-size:15.5px;white-space:nowrap;overflow:hidden;display:grid}
  .u-composer .u-in>*{grid-area:1/1;overflow:hidden;text-overflow:ellipsis}
  .u-typed{color:var(--t)}
  .u-typed::after{content:'';display:inline-block;width:1.5px;height:1.05em;margin-left:2px;background:var(--t);vertical-align:-.15em;animation:u-caret 1s steps(1) infinite}
  @keyframes u-caret{50%{opacity:0}}
  .u-mic{display:grid;place-items:center;width:34px;height:34px;color:var(--t2)}
  .u-send{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sl);color:var(--t3);transition:background .25s,color .25s}
  .u-send.hot{background:var(--ink);color:#fff}

  /* fake pointer that taps the approval card */
  .u-cursor{position:absolute;left:0;top:0;z-index:5;width:26px;height:26px;pointer-events:none;transition:transform 1s cubic-bezier(.4,.1,.2,1),opacity .3s;background:url(/cursor.svg) center/contain no-repeat;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35))}
  .u-cursor::after{content:'';position:absolute;left:-10px;top:-10px;width:22px;height:22px;border-radius:50%;border:2px solid rgba(0,0,0,.35);opacity:0;transform:scale(.4)}
  .u-cursor.tap::after{animation:u-tap .5s ease-out}
  @keyframes u-tap{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.5)}}

  /* seq.js: items with data-cue fade and rise in and out on a timeline. The markup is the final state;
     data-start="off" items are hidden before the script runs, but only when motion is allowed. */
  [data-cue]{transition:opacity .4s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s,background .25s,color .25s}
  [data-cue][data-on="0"],[data-cue][data-f0]:not([data-on]){opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .4s ease,transform .45s ease,visibility 0s .45s}
  @media (scripting:enabled) and (prefers-reduced-motion:no-preference){[data-cue][data-s0]:not([data-on]){opacity:0;visibility:hidden;transform:translateY(8px)}}
  .u-cursor[data-cue]{transform:translate(var(--cx,0),var(--cy,0));transition:transform 1s cubic-bezier(.4,.1,.2,1),opacity .3s,visibility 0s}
  @media (prefers-reduced-motion:reduce){.u-spin{animation:none}.u-typed::after{animation:none}}

  /* mini mock-ups (bento tiles, use cases) share the same kit at a smaller scale */
  .mini{width:100%;max-width:440px;font-size:14px;line-height:1.4}
  .mini .u-msg{padding:9px 13px;font-size:14px;border-radius:14px}
  .mini .u-card{padding:12px;min-width:0;width:100%}
  .mini .u-card .t{font-size:14.5px}
  .row-a{display:flex;align-items:flex-start;gap:9px}
  .row-a .u-msg{margin-top:2px}
  .row-a b{font-weight:600;display:block;font-size:12.5px;color:var(--t2);margin-bottom:1px}
  .typing{display:inline-flex;gap:4px;padding:13px 15px;border-radius:14px;background:var(--bb)}
  .typing i{width:6px;height:6px;border-radius:50%;background:var(--t3);animation:u-dot 1.2s infinite ease-in-out}
  .typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
  @keyframes u-dot{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
  @media (prefers-reduced-motion:reduce){.typing i{animation:none}}

  @media (max-width:900px){
    .u-app{grid-template-columns:1fr;height:auto;min-height:480px}
    .u-side{display:none}
    .u-head{grid-template-columns:auto 1fr;gap:8px;padding:10px 14px}
    .u-head .u-round{display:none}
    .u-head .u-pill{justify-self:start}
    .u-thread{padding:6px 16px 0;min-height:380px}
    .u-composer{margin:6px 14px 14px}
    .u-url{transform:none}
  }
  @media (max-width:520px){
    .u-chrome{padding:0 10px}
    .u-msg{max-width:100%}
    .u-card{min-width:0;width:100%}
    .u-composer .u-mic{display:none}
  }