/* ai.css — Chat (ChatView.swift as CSS). Owned by the Chat agent; contract:
   docs/web-redesign-spec/4-surfaces.md §4.2. Base carries the sub-rail, the
   .rowbtn rows, the island composer, chips, state words, sheets and the
   markdown reader; only the chat-* parts live here. */

/* --- the list of conversations (in #subrail[data-on="ai"]) --- */
.chat-new{padding:12px 8px 12px}
.chat-row{gap:10px}
.chat-row .ico{width:22px}
.chat-row .lbl{display:flex;flex-direction:column;gap:1px;line-height:1.3}
.chat-row .lbl>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-row:has(.chat-sub){height:48px}
.chat-sub{font-size:12.5px;color:var(--faint);font-weight:400}
.chat-row .cnt{color:var(--muted)}
.chat-row .xbtn{visibility:hidden;margin-right:-6px}
.chat-row:hover .xbtn,.chat-row:focus-within .xbtn{visibility:visible}

/* --- the room --- */
#chat-room{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
.chat-empty{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:24px;width:100%;max-width:720px;margin:0 auto;padding:24px 16px 14vh}
.chat-empty>b{font-size:20px;font-weight:600;color:var(--text)}
.chat-float{border-radius:var(--r-float)}
.chat-thread{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:16px 24px}
.chat-thread>*{width:100%;max-width:760px;align-self:center;flex:none}
.chat-dock{flex:none;padding:0 24px 16px}
.chat-dock .island{border-radius:var(--r-island)}

/* --- rows --- */
.chat-you{align-self:flex-end;width:auto;max-width:calc(min(100%, 760px) - 72px);margin-left:72px;margin-right:max(0px, calc((100% - 760px) / 2));background:var(--card2);
  border-radius:var(--r-bubble);padding:10px 15px;font-size:14.5px;line-height:1.45;color:var(--text);white-space:pre-wrap;overflow-wrap:anywhere}
.chat-ai{display:flex;gap:11px;align-items:flex-start}
.chat-ai-mark{flex:none;padding-top:1px}
.chat-body{min-width:0;flex:1;display:flex;flex-direction:column;gap:8px;position:relative}
.chat-body .md{max-width:640px}
.chat-proof{padding:8px 12px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--warn) 10%,transparent);
  font-size:12.5px;color:var(--warn);line-height:1.45}
.chat-foot{display:flex;align-items:center;flex-wrap:nowrap;min-width:0;gap:8px 12px;font-size:12.5px;color:var(--faint)}
.chat-foot .btn.quiet{height:22px;padding:0 6px;margin-left:-6px;font-size:12.5px;color:var(--faint)}
.chat-foot .btn.quiet:hover{color:var(--text)}
.chat-foot>span{display:inline-flex;align-items:center;gap:6px}
.chat-foot>span:not(:last-child){min-width:0;overflow:hidden;white-space:nowrap}
.chat-foot>span>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-foot>.btn,.chat-foot>span>svg,.chat-foot>span>img,.chat-foot .maker-logo{flex:none}
.chat-foot>span:last-child{flex:none;margin-left:auto;font-variant-numeric:tabular-nums}
.chat-foot>.btn.chat-route{flex:none;min-width:0;gap:6px}   /* the cost stays whole; "Looked it up…" gives way */
@media (max-width:760px){.chat-foot>.btn.chat-route{flex-shrink:1}}
.chat-foot>.btn.quiet.chat-route:not(:first-child){margin-left:0}
.chat-foot>.btn.chat-route[aria-expanded="true"]{color:var(--text)}
.chat-route>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-routepop{position:absolute;z-index:30;width:300px;max-width:100%;box-sizing:border-box;padding:8px;background:var(--card);
  border:1px solid var(--line2);border-radius:var(--r-md);box-shadow:0 8px 30px rgba(0,0,0,.4);outline:none}
.chat-routerow{display:flex;align-items:center;gap:8px;min-height:26px;padding:3px 6px;box-sizing:border-box;font-size:12.5px;line-height:1.4;color:var(--muted)}
.chat-routerow>span:not(.maker-logo){flex:1;min-width:0;overflow-wrap:anywhere}
.chat-routerow>span:not(.maker-logo)+span{flex:none;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.chat-routerow[data-kind="total"]{margin-top:4px;padding-top:4px;border-top:1px solid var(--line)}
.chat-routepop .hint.fine{margin:6px 6px 2px}
.chat-status{align-self:center;text-align:center;font-size:12.5px;color:var(--muted);line-height:1.5;max-width:640px}
.chat-status.err{color:var(--bad)}
.chat-agent{align-self:flex-start}

/* --- the work panel: the busy word and its clock, the steps, one browse group per search --- */
.chat-work{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;
  display:flex;flex-direction:column;gap:8px;max-width:640px}
.chat-now{display:flex;align-items:center;gap:8px;min-height:18px;min-width:0}
.chat-now .state{overflow:hidden;text-overflow:ellipsis;display:inline-flex;max-width:100%;min-width:0}
.chat-now>.live-spin{color:var(--text)}
.chat-nowword{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600}
.chat-step>.live-spin{color:var(--text)}
.chat-clock{margin-left:auto;flex:none;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.chat-steps{display:flex;flex-direction:column;gap:4px}
.chat-step{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);min-height:18px}
.chat-step svg{flex:none;color:var(--faint)}
.chat-step[data-state="doing"]{color:var(--text)}
.chat-step[data-state="doing"] svg{color:var(--text)}
.chat-step[data-state="done"]{color:var(--faint)}

/* a group folds to its query line while the answer is written (a 240 ms row transition, not an animation) */
.chat-browse{display:grid;grid-template-rows:auto 1fr;padding-top:8px;border-top:1px solid var(--line);min-width:0;
  transition:grid-template-rows .24s cubic-bezier(.2,.8,.2,1)}
.chat-work[data-phase="writing"] .chat-browse{grid-template-rows:auto 0fr}
.chat-query{position:relative;overflow:hidden;display:flex;align-items:center;gap:6px;min-width:0;min-height:20px;
  padding:2px 6px;margin:0 -6px;border-radius:var(--r-sm);font-size:12.5px;font-weight:500;color:var(--text)}
.chat-query>svg{flex:none;color:var(--muted)}
.chat-query-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-count{margin-left:auto;flex:none;font-size:12.5px;font-weight:400;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.chat-pages{list-style:none;margin:0;padding:0;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:2px}
.chat-page:first-child{margin-top:4px}
.chat-page a{position:relative;overflow:hidden;display:grid;grid-template-columns:14px auto minmax(0,1fr);align-items:center;gap:8px;
  height:24px;padding:0 6px;margin:0 -6px;border-radius:var(--r-sm);font-size:12.5px;color:var(--faint);text-decoration:none}
.chat-page a:hover{background:var(--card2)}
.chat-page a:hover .chat-ptitle,.chat-page[data-state="reading"] .chat-ptitle{color:var(--text)}
.chat-site{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted)}
.chat-site:empty{display:none}
.chat-page a:has(>.chat-site:empty){grid-template-columns:14px minmax(0,1fr)}
.chat-ptitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--faint)}
.chat-fav{width:14px;height:14px;flex:none;display:grid;place-items:center;overflow:hidden;border-radius:4px;background:var(--card2);
  color:var(--muted);font-size:11px;font-weight:600;line-height:1;transition:opacity .12s}
.chat-fav img{display:block;width:14px;height:14px;border-radius:3px;object-fit:cover}
.chat-fav svg{color:var(--muted)}
.chat-page[data-state="reading"] .chat-fav{opacity:.6}

/* motion (§1.3): a row's one entrance, and one travelling band on the query being searched or the page being read */
.chat-browse.is-new,.chat-page.is-new{animation:chat-in .18s cubic-bezier(.2,.8,.2,1) both}
.chat-query[data-state="searching"]::after,.chat-page[data-state="reading"] a::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--text) 9%,transparent),transparent);
  transform:translateX(-100%);animation:chat-sweep 1.2s cubic-bezier(.4,0,.2,1) infinite}
@keyframes chat-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes chat-sweep{to{transform:translateX(100%)}}

/* --- sources under an answer, and the numbered marks inside it --- */
.chat-srcrow{display:flex;flex-direction:column;align-items:flex-start;gap:6px;max-width:640px}
.chat-srcrow .srcs{margin-top:0}
.chat-srcbtn{height:24px;padding:0 6px;margin-left:-6px;gap:8px;font-size:12.5px;color:var(--muted)}
.chat-srcbtn:hover{color:var(--text)}
.chat-srcrow .srcs>.chat-srcbtn{height:20px;margin-left:0}
.chat-favs{display:inline-flex;align-items:center}
.chat-favs .chat-fav{outline:2px solid var(--bg)}
.chat-favs .chat-fav+.chat-fav{margin-left:2px}
.chat-favs .chat-fav:has(img)+.chat-fav:has(img){margin-left:-4px}
.chat-cite{font-size:11px;font-weight:600;line-height:0;margin-left:1px;vertical-align:super}
.chat-cite a{display:inline;line-height:14px;padding:0 3px;border-radius:4px;
  background:var(--card2);color:var(--muted);font-size:11px;font-weight:600;text-decoration:none;cursor:pointer}
.chat-cite a:hover{background:var(--line2);color:var(--text)}

/* --- the composer's model chip --- */
.chat-model{cursor:pointer;flex:none;color:var(--text);font-weight:500;background:var(--card);
  margin-bottom:7px;align-self:flex-end}
.chat-model:hover,.chat-model[aria-expanded="true"]{background:var(--card2);border-color:var(--line2)}
.chat-model>span:first-of-type{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-model .tag{padding:2px 6px}
.chat-model>svg{color:var(--muted);flex:none}

/* --- maker logos, in their own colours as the Mac's MakerLogo draws them --- */
.maker-logo{display:block;flex:none;width:14px;height:14px;object-fit:contain}
.maker-logo[data-size="15"]{width:15px;height:15px}
.chat-makers .maker-logo{width:11px;height:11px}
.maker-logo.gemini{background:linear-gradient(135deg,#4285F4 0%,#4C8CEA 30%,#6E7FDB 52%,#9476C5 72%,#CD656E 100%);
  -webkit-mask:url("../assets/models/gemini_mask.svg") center/contain no-repeat;mask:url("../assets/models/gemini_mask.svg") center/contain no-repeat}
.maker-logo.letter{display:grid;place-items:center;color:var(--muted);font-size:11px;font-weight:600;line-height:1}
.chat-makers{display:inline-flex;align-items:center;flex:none}
.chat-makers>span{width:17px;height:17px;flex:none;display:grid;place-items:center;border-radius:50%;background:var(--card2);border:1px solid var(--line2);position:relative}
.chat-makers>span+span{margin-left:-6px}
.chat-makers>span:nth-child(1){z-index:3}
.chat-makers>span:nth-child(2){z-index:2}

/* --- the picker: the EU only row, then rows in a scrolling pane --- */
.chat-euonly{flex:none;display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 24px;border-bottom:1px solid var(--line)}
.chat-euonly .swlab{font-size:14.5px}
.chat-euonly .hint{margin:0}
.chat-model-row{gap:9px;height:40px}
.chat-model-row .lbl{flex:none;color:var(--text)}
.chat-model-row[aria-current] .lbl{font-weight:500}
.chat-model-note{flex:1;min-width:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-model-row:has(.chat-makers){height:auto;min-height:40px;padding-top:6px;padding-bottom:6px}
.chat-model-row:has(.chat-makers) .chat-model-note{white-space:normal;line-height:1.35}
.chat-model-row>svg{flex:none;color:var(--text)}

/* --- narrow windows. Below 940 px the room and the list of chats no longer fit side by side (at 768 the
   field was 8 px wide), so Chat becomes two screens: the room first, the list of chats behind the header's
   back chevron (#chat-room[data-phone="list"], ai.js chat_phoneList). Below 600 px the rail is also a menu
   over the page, as Employees, Knowledge and the Ontology do, and the room keeps a 16 px gutter. */
.chat-phonehead,.chat-lead{display:none}
#emp-head-lead:has(>.chat-lead){display:none}
@media (max-width:939px){
  /* the room: one header row, the chevron before the title, the tools on the right */
  #subrail[data-on="ai"]{display:none}
  .page-head.chat-head{flex-wrap:nowrap;height:var(--h-head)}
  .page-head.chat-head .page-title-row{flex:1 1 auto;min-width:0;align-items:center;gap:6px}
  .page-head.chat-head #view-title{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
  .page-head.chat-head #head-tools{width:auto;flex:0 0 auto;margin-left:auto;overflow:visible;display:flex;align-items:center;gap:4px}
  #emp-head-lead:has(>.chat-lead){display:flex}
  .chat-lead{display:inline-grid;width:30px;height:30px;margin-left:-6px;color:var(--text)}

  /* the list: the whole width, under its own head */
  main:has(.surf-pane[data-surf="ai"]:not([hidden]) #chat-room[data-phone="list"])>#subrail[data-on="ai"]{display:flex;flex:1 1 auto;width:auto;border-right:0}
  main:has(.surf-pane[data-surf="ai"]:not([hidden]) #chat-room[data-phone="list"])>.main-col{display:none}
  .chat-phonehead{display:flex;align-items:center;gap:6px;min-height:var(--h-head);margin:0 -8px;padding:0 24px;border-bottom:1px solid var(--line)}
  .chat-phonetitle{font-size:20px;font-weight:600;line-height:1.2}
}
@media (max-width:599px){
  .app:has(.surf-pane[data-surf="ai"]:not([hidden])){grid-template-columns:minmax(0,1fr)}
  .app:has(.surf-pane[data-surf="ai"]:not([hidden]))>aside#rail{position:fixed;z-index:60;top:0;bottom:0;left:0;width:min(var(--rail),86vw);
    transform:translateX(-100%);visibility:hidden;transition:transform .2s ease-in,visibility 0s linear .2s}
  .app[data-emp-rail="open"]:has(.surf-pane[data-surf="ai"]:not([hidden]))>aside#rail{transform:none;visibility:visible;transition:transform .24s ease-out;
    box-shadow:0 0 0 100vmax color-mix(in srgb,var(--bg) 70%,transparent)}
  .page-head.chat-head,.chat-phonehead{height:auto;min-height:56px;padding:8px 12px 8px 16px}
  .chat-thread{padding:16px}
  .chat-dock{padding:0 16px 12px}
  .chat-you{margin-left:48px;max-width:calc(100% - 48px);margin-right:0}
  .chat-empty{padding:24px 16px 10vh}
  /* the field keeps room to type in: the model chip gives way first (its name ends in "…") */
  .island.chat .island-row{gap:4px;padding:8px 8px 8px 6px}
  .island.chat .island-clip{width:34px}
  .chat-model{flex:0 1 auto;min-width:0}
  .chat-model>.tag,.chat-model>svg,.chat-model>.maker-logo{flex:none}
  .island.chat .island-row textarea{min-width:96px}
}
@media (hover:none){
  .chat-row .xbtn{visibility:visible}
}