/* chat2.css — p52 (2026-11-08): Grok Bot's look and the quiet conversation. Loaded last; every rule is under
   html[data-look="chats"][data-chat2], so with the switch off (app_flags.chat2_orgs) nothing here applies.

   Albert, 2026-11-08: "also copy the grok bot design same colors it looks way more premium like make ours way more premium
   too its look very cheap and has many bugs in terms of layout and design too". The colours are sampled off his screenshot
   of the real Grok Bot desktop app (images/9.webp, the most common pixel of each surface): the chat #111111, the sidebar
   #0e0e0e, a reply / a chosen row / a card / the message box #1f1f1f, his own line #146fd2 with white words, the blue
   badge and button #116dd2, an avatar's blue #1883fc. Words: #f4f4f1, secondary #8e8e8a, faint #6f6f6b (grok-bot-local).
   One ground, no boxes: the sidebar and the chat sit edge to edge as in Grok (the p46/p49 boxes stay for the switch off). */

html[data-look="chats"][data-chat2]{
  --g-side:#0e0e0e; --g-chat:#111111; --g-bub:#1f1f1f; --g-hover:#171717; --g-sel:#1f1f1f; --g-line:#1c1c1c; --g-line2:#262626;
  --g-blue:#146fd2; --g-blue-h:#1a7ae0; --g-badge:#116dd2; --g-av:#1883fc; --g-ink:#f4f4f1; --g-text:#e9e9e6; --g-mute:#8e8e8a; --g-faint:#6f6f6b;
  --bg:#111111; --side:#0e0e0e; --card:#1f1f1f; --card2:#1f1f1f; --line:#1c1c1c; --line2:#262626;
  --text:#f4f4f1; --muted:#a3a39f; --faint:#8e8e8a; --frame:#0e0e0e; --group:transparent;
  --c-composer:#1f1f1f; --c-card:#1f1f1f; --c-cardline:#262626; --c-sec:#1f1f1f;
}
html[data-look="chats"][data-chat2] body{background:var(--g-chat);color:var(--g-ink)}
html[data-look="chats"][data-chat2] :focus-visible{outline-color:var(--g-blue)}

/* ------------------------------------------------------------------ one ground: the sidebar and the chat edge to edge */
@media (min-width:801px){
  html[data-look="chats"][data-chat2] .app{background:var(--g-chat);padding:0;column-gap:0}
  html[data-look="chats"][data-chat2] #chats-side{background:var(--g-side);border-radius:0;border-right:1px solid var(--g-line)}
  html[data-look="chats"][data-chat2] .chats-stripin{background:var(--g-side);border-radius:0;border-right:1px solid var(--g-line)}
  html[data-look="chats"][data-chat2] #app>main>.page-head::before,
  html[data-look="chats"][data-chat2] #app>main>.page-head::after{background:var(--g-chat);border-radius:0}
  html[data-look="chats"][data-chat2] #app>main>.main-col{background:var(--g-chat);border-radius:0}
  html[data-look="chats"][data-chat2] .emp-room[data-mode="team"]::before{background:var(--g-chat);border-radius:0}
  html[data-look="chats"][data-chat2] .emp-room[data-mode="team"]{column-gap:0}
  html[data-look="chats"][data-chat2] .emp-room[data-mode="team"]>.chats-panel{background:var(--g-side);border-radius:0;border-left:1px solid var(--g-line)}
  html[data-look="chats"][data-chat2] .chchat-rail,html[data-look="chats"][data-chat2] .chflow-rail{background:var(--g-side);border-radius:0}
  html[data-look="chats"][data-chat2] .chchat-main,html[data-look="chats"][data-chat2] .chflow-panel,html[data-look="chats"][data-chat2] .fl-canvas{background-color:var(--g-chat);border-radius:0}
  html[data-look="chats"][data-chat2] .chchat-root,html[data-look="chats"][data-chat2] .chflow-root{column-gap:0}
}
html[data-look="chats"][data-chat2] .main-col,html[data-look="chats"][data-chat2] .emp-room,html[data-look="chats"][data-chat2] .emp-scroll{background:var(--g-chat)}

/* the strip: the sidebar's own ground, quiet icons */
html[data-look="chats"][data-chat2] .chats-strip :is(.chats-striphome,.chfeat-tile,.chats-proj,.chats-conn,.chats-me):hover{background:var(--g-hover)}
html[data-look="chats"][data-chat2] .chats-strip :is(.chats-striphome,.chfeat-tile,.chats-proj,.chats-conn)[aria-current="page"]{background:var(--g-sel)}
html[data-look="chats"][data-chat2] .chats-stripfoot{border-top-color:var(--g-line)}

/* ------------------------------------------------------------------ the list: avatar · name · one grey line */
html[data-look="chats"][data-chat2] #chats-side>.chfeat-tiles,html[data-look="chats"][data-chat2] #chats-side>.chats-list{background:none;border-radius:0;margin:0;padding:0 8px 8px}
html[data-look="chats"][data-chat2] .chats-search{background:var(--g-bub);border-radius:12px;margin:0 12px 10px;color:var(--g-mute)}
html[data-look="chats"][data-chat2] .chats-search:focus-within{box-shadow:0 0 0 1px var(--g-blue)}
html[data-look="chats"][data-chat2] .chats-row{min-height:62px;padding:8px 10px 8px 8px;border-radius:12px;gap:12px}
html[data-look="chats"][data-chat2] #chats-side .chats-row:hover{background:var(--g-hover)}
html[data-look="chats"][data-chat2] #chats-side .chats-row[aria-current="page"]{background:var(--g-sel)}
html[data-look="chats"][data-chat2] .chats-name{color:var(--g-ink);font-weight:500;font-size:15px;letter-spacing:0}
html[data-look="chats"][data-chat2] .chats-line,
html[data-look="chats"][data-chat2] #chats-side .chats-row:is(:hover,[aria-current="page"]):not([data-kind="warn"]) .chats-line{color:var(--g-mute);font-size:13.5px}
/* no word pills beside the name (Grok has none, and at 920 px they cut the names): the line says what it does, a question
   is amber and the avatar carries the dot */
html[data-look="chats"][data-chat2] .chats-tag{display:none}
html[data-look="chats"][data-chat2] .chats-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html[data-look="chats"][data-chat2] .chats-row[data-kind="warn"] .chats-line{color:#d9b46a}

/* ------------------------------------------------------------------ the head: the name, round buttons */
html[data-look="chats"][data-chat2] .chats-chathead #view-title{font-size:15px;font-weight:600;color:var(--g-ink)}
html[data-look="chats"][data-chat2] .chats-iconbtn{color:#c9c9c6;border-radius:50%}
html[data-look="chats"][data-chat2] .chats-iconbtn:hover{background:var(--g-bub);color:#fff}
html[data-look="chats"][data-chat2] .chats-menu{background:#1a1a1a;border:1px solid var(--g-line2);border-radius:14px}

/* ------------------------------------------------------------------ the conversation */
html[data-look="chats"][data-chat2] .emp-feed{--bub:min(660px,86%)}
/* his own lines: Grok's blue pill, white words */
html[data-look="chats"][data-chat2] .emp-feed .emp-said{background:var(--g-blue);color:#fff;border-radius:22px;padding:10px 16px;font-size:15px;line-height:22px}
html[data-look="chats"][data-chat2] .emp-feed>.emp-said[data-gap="same"]{border-top-right-radius:8px}
html[data-look="chats"][data-chat2] .emp-feed>.emp-said:has(+.emp-said[data-gap="same"]){border-bottom-right-radius:8px}
html[data-look="chats"][data-chat2] .emp-said .emp-saidfile{background:rgba(255,255,255,.18);color:#fff;border:0}
html[data-look="chats"][data-chat2] .emp-said .emp-saidfile svg{color:#fff}
/* a reply: a dark grey rounded bubble */
html[data-look="chats"][data-chat2] .talk-reply>.talk-body,html[data-look="chats"][data-chat2] .chats-open2 .talk-body{background:var(--g-bub);color:var(--g-text);
  border-radius:20px;padding:11px 16px;font-size:15px;line-height:23px}
html[data-look="chats"][data-chat2] .talk-body .md-p+.md-p{margin-top:8px}
html[data-look="chats"][data-chat2] .talk-body code,html[data-look="chats"][data-chat2] .talk-body .md-tick{background:#262626;color:#eaeaea;border-radius:6px}
html[data-look="chats"][data-chat2] .talk-body a{color:#6cb2ff}
html[data-look="chats"][data-chat2] .chats-day{color:var(--g-faint);font-size:12.5px}
/* "New since …", the follow-up rows, the sources pill and "Full report": not in the quiet conversation (the fold keeps the pages) */
html[data-look="chats"][data-chat2] .chats-new,
html[data-look="chats"][data-chat2] .talk-follow,
html[data-look="chats"][data-chat2] .talk-pill,
html[data-look="chats"][data-chat2] .talk-fullbtn,html[data-look="chats"][data-chat2] .talk-fullw{display:none!important}

/* the head line of finished work ("Gearbeitet 4 Min ›") and its fold */
html[data-look="chats"][data-chat2] .talk-head,html[data-look="chats"][data-chat2] .talk-headtxt{color:var(--g-mute);font-size:13.5px}
html[data-look="chats"][data-chat2] .talk-wrows{color:#b9b9b5}
html[data-look="chats"][data-chat2] .talk-check{color:#5fb3ff}

/* the one working line: no shimmering words, a still spinner; in an employee's own chat no name (it is that employee) */
html[data-look="chats"][data-chat2] .talk-tickline.shimmer,html[data-look="chats"][data-chat2] .shimmer{background:none!important;-webkit-text-fill-color:currentColor!important;
  color:#b5b5b1!important;animation:none!important}
html[data-look="chats"][data-chat2] .talk-tickline.in,html[data-look="chats"][data-chat2] .talk-tickline.out{animation:none}
html[data-look="chats"][data-chat2] .talk-act{color:#b5b5b1;font-size:14px}
html[data-look="chats"][data-chat2] .tg-run{border-color:rgba(24,131,252,.25);border-top-color:var(--g-av)}


/* questions: Grok's card — the question on the dark card, the choices as pills with a blue edge on hover; no
   "type your own answer" field (the message box answers), no ×, no "Skipped" chip */
html[data-look="chats"][data-chat2] .talk-askcard.talk-qb{background:var(--g-bub);border:0;border-radius:20px;padding:12px 16px 14px}
html[data-look="chats"][data-chat2] .talk-askcard .talk-askq{color:var(--g-text);font-size:15px;line-height:22px}
html[data-look="chats"][data-chat2] .talk-askcard .talk-askwho{color:var(--g-mute);font-size:13px}
html[data-look="chats"][data-chat2] .talk-askcard .talk-qtype,html[data-look="chats"][data-chat2] .talk-askcard .talk-qx,
html[data-look="chats"][data-chat2] .talk-askcard .talk-also{display:none!important}
html[data-look="chats"][data-chat2] .talk-askcard.done{opacity:1}
html[data-look="chats"][data-chat2] .talk-askcard.done .talk-askopts{display:none}
html[data-look="chats"][data-chat2] .talk-askopts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
html[data-look="chats"][data-chat2] .talk-opt{background:#262626;border:1px solid #2e2e2e;border-radius:999px;color:var(--g-ink);font-size:14px;min-height:34px;padding:6px 15px}
html[data-look="chats"][data-chat2] .talk-opt:hover:not(:disabled){background:#2a2a2a;border-color:var(--g-blue)}
html[data-look="chats"][data-chat2] .talk-opt.no{background:none;border-color:#2e2e2e}

/* a file in the chat */
html[data-look="chats"][data-chat2] .talk-file{background:#181818;border:1px solid #262626;border-radius:14px;height:52px}
html[data-look="chats"][data-chat2] .talk-file:hover{background:#1c1c1c;border-color:#2e2e2e}
html[data-look="chats"][data-chat2] .talk-filedl{background:#262626;border-radius:999px;color:#eaeaea}
html[data-look="chats"][data-chat2] .talk-file:hover>.talk-filedl{background:var(--g-blue);color:#fff}
html[data-look="chats"][data-chat2] .talk-body .talk-files{margin-top:10px}
html[data-look="chats"][data-chat2] .chat2-filerow{align-self:flex-start;width:min(100%,var(--bub,660px));margin-top:-8px}

/* ------------------------------------------------------------------ the message box: + · words · send */
html[data-look="chats"][data-chat2] .emp-frame .island{background:var(--g-bub);border-radius:26px;box-shadow:none}
html[data-look="chats"][data-chat2] .emp-frame .island:focus-within{box-shadow:inset 0 0 0 1px #2c2c2c}
html[data-look="chats"][data-chat2] .emp-frame .island-row{min-height:52px;padding:0 10px;align-items:center}
html[data-look="chats"][data-chat2] .emp-frame .island-row textarea{min-height:52px;padding:15px 4px;font-size:15px;line-height:22px;color:var(--g-ink)}
html[data-look="chats"][data-chat2] .emp-frame .island-row>*:not(textarea){margin-bottom:0}
html[data-look="chats"][data-chat2] .emp-frame .island-clip{width:34px;height:34px;color:#d6d6d3}
html[data-look="chats"][data-chat2] .emp-frame .island-clip:hover{background:#2a2a2a;color:#fff}
html[data-look="chats"][data-chat2] .emp-frame .island-send{width:34px;height:34px;background:var(--g-blue);color:#fff}
html[data-look="chats"][data-chat2] .emp-frame .island-send:hover:not(:disabled){background:var(--g-blue-h)}
html[data-look="chats"][data-chat2] .emp-frame .island-send:disabled{background:#2a2a2a;color:#7a7a77}
/* Workflow and the approval switch live in the + menu (chat2.js); kept in the page, out of sight, so their own menus work */
html[data-look="chats"][data-chat2] .emp-dock .emp-mt-tag,html[data-look="chats"][data-chat2] .emp-dock .talk-apsw{display:none!important}
html[data-look="chats"][data-chat2] .emp-dock .chflow-wfbtn:not(.on):not([data-chat2-show]){position:absolute!important;left:12px;bottom:10px;width:1px!important;height:1px!important;
  padding:0!important;overflow:hidden;opacity:0;pointer-events:none}
html[data-look="chats"][data-chat2] .emp-dock{position:relative}
.chat2-menu{position:fixed;z-index:80;min-width:300px;padding:6px;
  background:#1a1a1a;border:1px solid #2a2a2a;border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px}
.chat2-mi{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:100%;padding:9px 12px;border:0;border-radius:10px;background:none;color:#f4f4f1;
  font:inherit;font-size:14.5px;text-align:left;cursor:pointer}
.chat2-mi:hover,.chat2-mi:focus-visible{background:#242424;outline:none}
.chat2-mis{font-size:12.5px;color:#8e8e8a}
.chat2-mh{padding:10px 12px 4px;font-size:12.5px;color:#8e8e8a}
.chat2-seg{display:flex;gap:4px;padding:2px 6px 6px}
.chat2-segb{flex:1 1 auto;white-space:nowrap;padding:0 10px;height:30px;border:1px solid #2a2a2a;border-radius:999px;background:none;color:#d6d6d3;font:inherit;font-size:12.5px;cursor:pointer}
.chat2-segb.on{background:var(--g-blue,#146fd2);border-color:var(--g-blue,#146fd2);color:#fff}
.chat2-segb:hover:not(.on){border-color:#3a3a3a;color:#fff}

/* ------------------------------------------------------------------ the one working line (p52: goals, mockup scenes) */
.p52-work{display:flex;align-items:center;gap:8px;align-self:flex-start;box-sizing:border-box;max-width:min(100%,660px);min-height:26px;margin:0;padding:0;border:0;
  background:none;font:inherit;font-size:14px;line-height:20px;color:#a9a9a6;text-align:left}
button.p52-work{cursor:pointer}
.p52-work .chats-av{flex:none;width:var(--s);height:var(--s);margin:0}
.p52-glyph{flex:none;display:inline-grid;place-items:center;width:16px;height:16px}
.p52-dot{width:7px;height:7px;border-radius:50%;background:#1883fc}
.p52-dot.live{animation:chat2-breathe 2.4s ease-in-out infinite}
.p52-dot.wait,.p52-dot.stuck{background:#f5b73b}
@keyframes chat2-breathe{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.p52-dot.live{animation:none}}
.p52-who{flex:none;color:#f4f4f1;font-weight:500;white-space:nowrap}
.p52-sep{flex:none;color:#5c5c59}
.p52-what{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#c4c4c0}
.p52-time{flex:none;color:#8e8e8a;white-space:nowrap}
.p52-act{flex:none;margin-left:4px;padding:0 10px;height:26px;border:1px solid #2a2a2a;border-radius:999px;background:transparent;color:#d6d6d3;font:inherit;font-size:12.5px;cursor:pointer}
.p52-act:hover{border-color:#146fd2;color:#fff}
.p52-chev{flex:none;color:#8e8e8a;font-size:15px;margin-left:2px;transition:transform .15s}
.p52-work[data-open] .p52-chev{transform:rotate(90deg)}
.p52-chips{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start;max-width:min(100%,660px)}
.chat2-goalmsg{display:flex;flex-direction:column;align-items:flex-start;gap:8px;align-self:flex-start;width:100%}
.chat2-goalmsg>.talk-reply{max-width:var(--bub,min(660px,86%))}
.chat2-goal{display:flex;flex-direction:column;align-items:flex-start;gap:6px;align-self:flex-start;width:min(100%,660px)}
.chat2-gfold{padding:2px 0 4px 24px;color:#b9b9b5;font-size:13.5px}
.chat2-gfold .talk-wrows{margin:0 0 8px;padding:0;list-style:none}
.chat2-gacts{display:flex;gap:8px}
.chat2-worker{padding-left:4px}
@media (max-width:600px){.p52-work .p52-time,.p52-work .p52-tsep{display:none}}

/* ------------------------------------------------------------------ phone: edge to edge, the same colours */
@media (max-width:800px){
  html[data-look="chats"][data-chat2] #chats-side{background:var(--g-side)}
  html[data-look="chats"][data-chat2] .emp-feed .emp-said{max-width:84%}
  html[data-look="chats"][data-chat2] .emp-frame .island{border-radius:24px}
}