/* ============================================================
   OTTO UI KIT — reusable ServiceNow "Otto" / Now Assist shell
   Recreation for portfolio use (not shipped ServiceNow code).
   Tokens confirmed against real product screenshots, July 2026.
   ============================================================ */

:root{
  /* — Type — (?) real product font is licensed; Lato is the closest free stand-in */
  --otto-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* — Confirmed brand tokens — */
  --otto-bg: #EDECE9;        /* warm greige app canvas */
  --otto-surface: #FFFFFF;   /* white cards / composer */
  --otto-ink: #1A1A1A;       /* headings + AI body text */
  --otto-dim: #4D4C4A;       /* secondary / placeholder text */
  --otto-blue: #0E4E69;      /* user bubble + primary buttons */
  --otto-green: #68E353;     /* mic, logo, AI "sparkle" mark */
  --otto-border: #E2E0DB;    /* hairline dividers */
  --otto-card: #F7F6F3;      /* subtle inset card fill (nav item, popular content) */

  /* — Priority tag palette — */
  --otto-red: #C0392B;  --otto-red-bg: #F6E0DC;
  --otto-amber: #B26A00; --otto-amber-bg: #F6E9D3;
  --otto-purple: #6B4EA8; --otto-purple-bg: #E9E2F2;

  /* — Geometry — */
  --otto-radius: 16px;       /* cards + user bubble */
  --otto-radius-sm: 10px;
  --otto-pill: 999px;        /* composer + pill buttons */
  --otto-shadow: 0 1px 2px rgba(20,20,18,.05), 0 10px 30px rgba(20,20,18,.08);

  /* Green 4-point "sparkle" mark used for AI steps / Otto */
  --otto-spark: url('data:image/svg+xml;utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%2368E353"%3E%3Cpath d="M12 0c.9 8 3.1 10.2 12 12-8.9 1.8-11.1 4-12 12-.9-8-3.1-10.2-12-12 8.9-1.8 11.1-4 12-12z"/%3E%3C/svg%3E');
}

/* ── App frame: left rail + main column ── */
.otto-app{
  font-family: var(--otto-font);
  color: var(--otto-ink);
  background: var(--otto-bg);
  border-radius: var(--otto-radius);
  box-shadow: var(--otto-shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: minmax(0, 1fr);
  /* fixed viewport so expanding content scrolls inside the window instead of pushing the page */
  height: 560px;
  max-height: 78vh;
}
/* Mobile / phone modifier — narrower rail, tighter padding, taller frame */
.otto-app--mobile{ grid-template-columns: 48px 1fr; min-height: 680px; }
.otto-app--mobile .otto-rail{ padding: 12px 0; gap: 2px; }
.otto-app--mobile .otto-rail-ic{ width: 34px; height: 34px; border-radius: 10px; }
.otto-app--mobile .otto-rail-ic svg,
.otto-app--mobile .otto-rail-ic img{ width: 18px; height: 18px; }
.otto-app--mobile .otto-topbar{ padding: 12px 12px; gap: 10px; }
.otto-app--mobile .otto-topbar-actions{ gap: 12px; }
.otto-app--mobile .otto-thread{ padding: 8px 14px 14px; }
.otto-app--mobile .otto-composer-wrap{ padding: 10px 14px 8px; }

/* Embedded modifier — drops the fixed viewport so the shell grows with its content
   and lets absolutely-positioned host chrome (e.g. case-study annotations) overflow. */
.otto-app--embed{ height: auto; max-height: none; overflow: visible; grid-template-columns: 48px 1fr; }
.otto-app--embed .otto-rail{ padding: 12px 0; gap: 2px; }
.otto-app--embed .otto-rail-ic{ width: 34px; height: 34px; border-radius: 10px; }
.otto-app--embed .otto-rail-ic svg,
.otto-app--embed .otto-rail-ic img{ width: 18px; height: 18px; }
.otto-app--embed .otto-topbar{ padding: 12px 14px; }
.otto-app--embed .otto-thread{ overflow: visible; padding: 10px 16px 14px; gap: 14px; }
.otto-app--embed .otto-composer-wrap{ padding: 10px 16px; }

/* Bare modifier — "simplified Otto": no rail, no topbar/logo, just message bubbles
   in Otto's real colors and alignment (still keeps the app canvas bg + shadow as
   its own visible surface). Combine with --embed (no fixed viewport). */
.otto-app--bare{ grid-template-columns: 1fr; }

/* Left icon rail */
.otto-rail{
  /* defensive resets — host pages style bare <nav> (fixed, full-width, 56px) */
  position: static; inset: auto; z-index: auto;
  height: auto; width: auto; border-bottom: none; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  padding: 14px 0;
  background: var(--otto-bg);
  border-right: 1px solid var(--otto-border);
}
.otto-rail-ic{
  width: 40px; height: 40px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--otto-ink); cursor: pointer;
}
.otto-rail-ic svg{ width: 20px; height: 20px; }
.otto-rail-ic.on{ background: var(--otto-surface); }
.otto-rail-sep{ width: 22px; height: 1px; background: var(--otto-border); margin: 8px 0; }
.otto-rail-spacer{ flex: 1; }
.otto-rail-avatar{ width: 30px; height: 30px; border-radius: 50%; position: relative; overflow: visible; background: #C9C4BC; }
.otto-rail-avatar img{ width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.otto-rail-avatar::after{ content:''; position:absolute; right:-1px; bottom:-1px; width:9px; height:9px; border-radius:50%; background: var(--otto-green); border:2px solid var(--otto-bg); }

/* Main column */
.otto-main{ display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* Top bar */
.otto-topbar{
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
}
.otto-topbar .otto-hamb{ color: var(--otto-ink); display: inline-flex; cursor: pointer; }
.otto-brand{ display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 18px; }
.otto-brand img{ width: 26px; height: 26px; display: block; }
.otto-topbar-actions{ margin-left: auto; display: inline-flex; align-items: center; gap: 16px; color: var(--otto-ink); }
.otto-topbar-actions svg{ width: 19px; height: 19px; cursor: pointer; }

/* Thread */
.otto-thread{
  flex: 1; overflow-y: auto; min-height: 0;
  padding: 8px 22px 16px;
  display: flex; flex-direction: column; gap: 18px;
}

/* User message — dark blue bubble, right aligned */
.otto-user{ display: flex; justify-content: flex-end; }
.otto-user-bubble{
  background: var(--otto-blue); color: #fff;
  /* less rounded overall; bottom-right squared so the bubble "points" to the user */
  border-radius: 14px 14px 4px 14px;
  padding: 11px 18px; font-size: 15px; font-weight: 600;
  max-width: 80%; line-height: 1.45;
}

/* AI response — plain full-width text, led by the AI-steps label */
.otto-ai{ display: flex; flex-direction: column; gap: 10px; max-width: 100%; }
.otto-ai-steps{
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: var(--otto-ink);
  align-self: flex-start;
}
.otto-ai-steps::before{
  content:''; width: 20px; height: 20px; flex-shrink: 0;
  background: url('images/otto-icon.png') center/contain no-repeat;
}
.otto-ai-steps .chev{ color: var(--otto-dim); font-weight: 400; }
.otto-ai-body{ font-size: 16px; line-height: 1.55; color: var(--otto-ink); }
.otto-ai-body p{ margin: 0 0 12px; color: var(--otto-ink); }
.otto-ai-body p:last-child{ margin-bottom: 0; }

/* White result card inside an AI response */
.otto-card{
  display: flex; align-items: center; gap: 14px;
  background: var(--otto-surface);
  border-radius: var(--otto-radius);
  box-shadow: 0 1px 2px rgba(20,20,18,.04), 0 4px 14px rgba(20,20,18,.05);
  padding: 16px 18px; margin: 4px 0;
}
.otto-card-ic{ width: 22px; height: 22px; color: var(--otto-dim); flex-shrink: 0; }
.otto-card-meta{ flex: 1; min-width: 0; }
.otto-card-title{ font-weight: 700; font-size: 16px; }
.otto-card-desc{ color: var(--otto-dim); font-size: 14px; margin-top: 2px; }
.otto-btn{
  background: var(--otto-blue); color: #fff; border: none; cursor: pointer;
  border-radius: 8px; padding: 9px 18px; font: inherit; font-weight: 600; font-size: 14px;
  flex-shrink: 0;
}
.otto-btn.ghost{ background: var(--otto-card); color: var(--otto-ink); }

/* Feedback + sources row */
.otto-actions{ display: flex; align-items: center; gap: 16px; color: var(--otto-dim); margin-top: 2px; }
.otto-actions svg{ width: 18px; height: 18px; cursor: pointer; }
.otto-sources{ display: inline-flex; align-items: center; gap: 8px; margin-left: 6px; font-size: 14px; color: var(--otto-ink); }
.otto-source-stack{ display: inline-flex; }
.otto-source-stack span{
  width: 22px; height: 22px; border-radius: 50%; margin-left: -7px;
  border: 1.5px solid var(--otto-border); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 2px rgba(20,20,18,.12); overflow: hidden;
}
.otto-source-stack span:first-child{ margin-left: 0; }
.otto-source-stack span svg{ width: 13px; height: 13px; display: block; }
.otto-source-stack span img{ width: 15px; height: 15px; display: block; }

/* Consolidated "Workflow and sources" — follows the processing case study .wfp-pill:
   a small right-aligned pill in the feedback row, with three overlapping category dots. */
.otto-wfs{
  margin-left: 2px;
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(26,25,23,.05);
  border: 1px solid var(--otto-border);
  border-radius: var(--otto-pill);
  padding: 5px 11px 5px 7px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--otto-ink);
  cursor: pointer; transition: background .15s, border-color .15s;
}
.otto-wfs:hover{ background: var(--otto-surface); }
.otto-wfs .chev{ color: var(--otto-dim); font-size: 11px; line-height: 1; }
.otto-wfs-dots{ display: inline-flex; flex-shrink: 0; }
.otto-wfs-dots span{ width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--otto-surface); }
.otto-wfs-dots span:nth-child(1){ background: var(--otto-green); }
.otto-wfs-dots span:nth-child(2){ background: var(--otto-blue); }
.otto-wfs-dots span:nth-child(3){ background: #E07820; }
.otto-wfs-dots span+span{ margin-left: -4px; }
.otto-wfs .chev{ transition: transform .25s ease; }
.otto-wfs[aria-expanded="true"] .chev{ transform: rotate(180deg); }

/* Expandable Workflow & Sources panel (mirrors processing case study .wfp-panel) */
.otto-wfs-panel{ max-height: 0; overflow: hidden; transition: max-height .4s ease, margin-top .3s ease; }
.otto-wfs-panel.open{ max-height: 1600px; margin-top: 10px; }
.otto-wfs-card{ background: var(--otto-surface); border: 1px solid var(--otto-border); border-radius: 14px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(20,20,18,.04); }
.otto-wfs-head{ display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--otto-border); margin-bottom: 14px; }
.otto-wfs-name{ font-weight: 700; font-size: 15px; }
.otto-wfs-filter{ margin-left: auto; display: inline-flex; gap: 2px; background: var(--otto-bg); border-radius: 999px; padding: 3px; }
.otto-wfs-filter button{ border: none; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--otto-dim); padding: 5px 12px; border-radius: 999px; cursor: pointer; }
.otto-wfs-filter button.on{ background: var(--otto-surface); color: var(--otto-ink); box-shadow: 0 1px 2px rgba(20,20,18,.14); }

.otto-step-group{ font-weight: 700; font-size: 14px; color: var(--otto-ink); margin: 16px 0 8px; }
.otto-step-group:first-of-type{ margin-top: 0; }
.otto-step{ display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--otto-dim); line-height: 1.55; margin: 8px 0; }
.otto-step-ck{ width: 17px; height: 17px; border-radius: 50%; background: var(--otto-green); flex-shrink: 0; margin-top: 1px; position: relative; }
.otto-step-ck::after{ content: ''; position: absolute; left: 5.5px; top: 4px; width: 4px; height: 7px; border: solid #0d3b12; border-width: 0 1.7px 1.7px 0; transform: rotate(45deg); }
.otto-why{ display: flex; align-items: baseline; gap: 6px; margin-top: 5px; }
.otto-why-tag{ font-family: 'DM Mono', monospace; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--otto-amber); background: var(--otto-amber-bg); padding: 1px 6px; border-radius: 4px; flex-shrink: 0; }
.otto-why-text{ font-size: 12.5px; font-style: italic; color: var(--otto-dim); line-height: 1.4; }

.otto-src-list{ display: grid; gap: 8px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--otto-border); }
.otto-src{ display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; background: var(--otto-card); border: 1px solid var(--otto-border); border-radius: 10px; padding: 10px 12px; transition: background .15s, border-color .15s, box-shadow .15s; }
.otto-src:hover{ background: var(--otto-surface); border-color: var(--otto-blue); box-shadow: 0 1px 4px rgba(14,78,105,.14); }
.otto-src-ic{ width: 30px; height: 30px; border-radius: 8px; background: #fff; border: 1px solid var(--otto-border); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.otto-src-ic svg, .otto-src-ic img{ width: 18px; height: 18px; display: block; }
.otto-src-m{ flex: 1; min-width: 0; }
/* Title styled as a link so the row reads as clickable */
.otto-src-t{ font-weight: 700; font-size: 13.5px; color: var(--otto-blue); display: block; text-decoration: underline; text-decoration-color: rgba(14,78,105,.28); text-underline-offset: 2px; }
.otto-src:hover .otto-src-t{ text-decoration-color: var(--otto-blue); }
.otto-src-d{ font-size: 12px; color: var(--otto-dim); display: block; margin-top: 1px; }
.otto-src-a{ color: var(--otto-blue); flex-shrink: 0; font-size: 15px; transition: transform .15s; }
.otto-src:hover .otto-src-a{ transform: translate(1px, -1px); }

/* Live "watch it work" processing loader — shown while the answer streams, then resolves to the pill */
.otto-load{
  background: var(--otto-card);
  border: 1px solid var(--otto-border);
  border-radius: 14px;
  padding: 14px 16px;
  display: grid; gap: 11px;
}
.otto-load-top{ display: flex; align-items: center; gap: 10px; }
.otto-load-title{ font-weight: 700; font-size: 14px; color: var(--otto-ink); }
.otto-load-notify{ margin-left: auto; font-size: 12px; color: var(--otto-blue); font-weight: 600; }
.otto-load-bar-row{ display: flex; align-items: center; gap: 12px; }
.otto-load-est{ font-size: 12px; color: var(--otto-dim); white-space: nowrap; }
.otto-load-bar{ flex: 1; height: 6px; border-radius: 999px; background: rgba(20,20,18,.08); overflow: hidden; }
.otto-load-bar i{ display: block; height: 100%; width: 0; border-radius: 999px; background: #4CA83A; transition: width 1.4s ease; }
.otto-load-phase-row{ display: flex; align-items: center; gap: 10px; }
.otto-load-phase{ font-size: 13px; color: var(--otto-ink); display: inline-flex; align-items: center; gap: 8px; }
.otto-load-phase::before{ content: ''; width: 14px; height: 14px; flex-shrink: 0; border: 2px solid var(--otto-green); border-top-color: transparent; border-radius: 50%; animation: otto-spin .7s linear infinite; }
.otto-load-count{ margin-left: auto; font-size: 12px; font-weight: 600; color: var(--otto-dim); }
@keyframes otto-spin{ to{ transform: rotate(360deg); } }

/* processing card is expandable — click to open Workflow and sources while it works */
.otto-load[role="button"]{ cursor: pointer; transition: border-color .2s ease; }
.otto-load[role="button"]:hover{ border-color: var(--otto-blue); }
.otto-load[role="button"]:focus-visible{ outline: 2px solid var(--otto-blue); outline-offset: 2px; }
.otto-load-chev{ flex-shrink: 0; color: var(--otto-dim); font-size: 11px; line-height: 1; transition: transform .25s ease; }
.otto-load[aria-expanded="true"] .otto-load-chev{ transform: rotate(180deg); }

/* run-state toggles: hide answer + actions while working, hide loader when done */
.otto-ai[data-otto-run] .otto-ai-body,
.otto-ai[data-otto-run] .otto-actions{ display: none; }
.otto-ai[data-otto-run].done .otto-load{ display: none; }
.otto-ai[data-otto-run].done .otto-ai-body{ display: block; }
.otto-ai[data-otto-run].done .otto-actions{ display: flex; }
.otto-replay-row{ display: flex; justify-content: center; margin-top: 12px; }
.otto-replay{ display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--otto-border); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 12px; font-weight: 600; color: var(--otto-dim); cursor: pointer; }
.otto-replay:hover{ color: var(--otto-ink); border-color: var(--otto-blue); }
.otto-replay svg{ width: 14px; height: 14px; }
@media(prefers-reduced-motion: reduce){ .otto-load-phase::before{ animation: none; } }

/* sources cited inline, attached to the step that consulted them */
.otto-step-src{ display: grid; gap: 6px; margin-top: 8px; }
.otto-step-src .otto-src{ padding: 7px 10px; border-radius: 9px; }
.otto-step-src .otto-src-ic{ width: 26px; height: 26px; border-radius: 7px; }
.otto-step-src .otto-src-ic svg, .otto-step-src .otto-src-ic img{ width: 15px; height: 15px; }
.otto-step-src .otto-src-t{ font-size: 12.5px; }
.otto-step-src .otto-src-d{ font-size: 11px; }
/* default "All steps" view: sources sit inline, so hide the consolidated end list */
.otto-wfs-panel:not(.src-only) .otto-src-list{ display: none; }

/* "Sources only" filter hides steps + group headers, revealing the flat list */
.otto-wfs-panel.src-only .otto-step-group,
.otto-wfs-panel.src-only .otto-step{ display: none; }
.otto-wfs-panel.src-only .otto-src-list{ margin-top: 0; padding-top: 0; border-top: none; }

/* Priority / status tags */
.otto-tag{ display: inline-block; font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.otto-tag.red{ color: var(--otto-red); background: var(--otto-red-bg); }
.otto-tag.amber{ color: var(--otto-amber); background: var(--otto-amber-bg); }
.otto-tag.purple{ color: var(--otto-purple); background: var(--otto-purple-bg); }

/* Inline entity chip */
.otto-chip{
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--otto-card); color: var(--otto-ink);
  border-radius: var(--otto-radius-sm); padding: 1px 8px;
  font-size: .93em; font-weight: 600; white-space: nowrap;
}

/* Composer — white pill, + on left, green mic on right */
.otto-composer-wrap{ padding: 10px 22px 8px; }
.otto-composer{
  display: flex; align-items: center; gap: 12px;
  background: var(--otto-surface);
  border-radius: var(--otto-pill);
  box-shadow: 0 1px 2px rgba(20,20,18,.05), 0 8px 22px rgba(20,20,18,.08);
  padding: 10px 12px 10px 18px;
}
.otto-composer .otto-plus{ color: var(--otto-ink); display: inline-flex; flex-shrink: 0; }
.otto-composer .otto-plus svg{ width: 22px; height: 22px; }
.otto-input{
  flex: 1; border: none; outline: none; background: transparent;
  font: inherit; font-size: 16px; color: var(--otto-ink);
  padding: 6px 0;
}
.otto-input::placeholder{ color: var(--otto-dim); }
.otto-mic{
  width: 44px; height: 44px; border: none; border-radius: 50%;
  background: var(--otto-green); color: #0d3b12; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.otto-mic svg{ width: 20px; height: 20px; }
.otto-disclaimer{ text-align: center; font-size: 12px; color: var(--otto-dim); margin: 8px 0 6px; }