/* EarthOnline in one line (10-06): the guest chat inside another site's frame (/@handle/embed, src/views/inbox.js
   embedChatView), and the guide (/embed, src/views/embed.js). Loaded on those pages only. */

/* ---- the frame: the guest conversation, the frame's whole height, no site header ---- */
.ib.embed[data-view="guest"] { height: 100vh; height: var(--chat-viewport, 100dvh); }
.embed .embed-close { display: none; }
/* the minimize, with script and inside a frame only (public/embed-frame.js), at the top right where the guest page has
   its back; an inline frame has nothing to close */
html.in-frame .embed:not([data-embed-mode="inline"]) .embed-close { display: grid; place-items: center; left: auto; right: 12px; width: 36px; padding: 0; border: 0; color: var(--fg); cursor: pointer; }
/* inline (10-10): the chat is part of the page, so there is nothing to close; the visitor page's own Back (inbox.css,
   :is(.guest-chat, ...) .th-back) would otherwise draw this one at the top left, over who it is */
main.ib.embed[data-embed-mode="inline"] .th-back.embed-close { display: none; }
.embed .th-who { padding-top: 40px; }
/* the panel's head in one line (10-09): the owner's agent looks over the panel's top edge (public/embed.js), so who it
   is shrinks to their 24px face and their name, where the pill floats once it has scrolled away (inbox.css .th-pill:
   12px down, 36px tall, in the middle), clear of the close at the top right; inline in a page the big face stays */
.embed .th-who-short { padding-top: 12px; }
/* the pill's band (10-10 night, the real-model video: scrolled to the bottom, the last line of the bubble above sat under
   "Mira Chen"): once the pill shows, the panel's own ground fills the top across the panel, 12 over the pill, 36, 12 under
   it (Intercom's header, iMessage's), so what scrolls up goes under the band, never under the pill alone. The close and
   the pill stand over it (z 3); the question a visitor sends lands 16 under the pill (app.js fitRoom), clear of it. */
.ib.embed > .th::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: 2; height: 60px; background: var(--bg); pointer-events: none; visibility: hidden; }
.ib.embed > .th:has(.th-pill.is-shown)::before { visibility: visible; }
.th-who-line { display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; max-width: calc(100% - 112px); }
.th-who-line .th-who-face { flex: none; margin: 0; }
.th-who-line a.th-name { min-width: 0; font-size: var(--text-base); line-height: var(--lh-base); }
/* offline (10-06, Bonan: the pet sleeps): under the name, that it is away and answers when back; questions wait as ever */
.embed .th-away { margin: 4px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
/* (devil-l2-embedsignin) signed in from the frame: their own face (one initial, person.js) and the line, under the name */
.embed .th-signed-in { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 320px; text-align: left; }
.embed .th-signed-in > .ava { flex: none; }
.embed .th-signout { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.embed .th-signout:hover { color: var(--fg); }
.embed .th-about { max-width: 320px; margin: 8px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); text-wrap: pretty; overflow-wrap: anywhere; }

/* ---- the guide ---- */
.eg { padding: 40px 0 96px; }
.eg-agent { margin-top: 24px; }
.eg-title { margin: 0; font: 600 var(--text-4xl)/var(--lh-4xl) var(--font); letter-spacing: var(--tracking-tight); }
/* the ways: the lobby's selector (home.css .home-tabs, the old Chat's), as links */
.eg-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 24px 0 0; }
.eg-modes > a { display: flex; align-items: center; padding: 4px 10px; border-radius: var(--radius); color: var(--ring); font: 500 var(--fs-body)/var(--lh-base) var(--font); white-space: nowrap; text-decoration: none; }
.eg-modes > a:hover { color: var(--nav); background: color-mix(in srgb, var(--bg2) 55%, transparent); }
.eg-modes > a[aria-current] { background: var(--bg2); color: var(--fg); }
.eg-sizes { margin-top: 20px; }
.eg-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 24px; }
.eg-controls .eg-modes { margin-top: 0; }
.eg-look { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.eg-look [hidden] { display: none; }
/* the greeting (10-11, Bonan: "打招呼太confusing了"; Intercom's Greeting setting): one labelled row, a switch and, once on, its
   words, and where it shows in one small line; a switch is a link, so it works without script */
.eg-greeting { flex: 1 0 100%; display: grid; gap: 8px; margin-top: 4px; }
.eg-greeting-head { display: flex; align-items: center; gap: 12px; font: 500 var(--text-sm)/var(--lh-sm) var(--font); color: var(--fg); }
.eg-switch { position: relative; flex: none; width: 32px; height: 18px; border-radius: var(--radius-full); background: var(--bg3); }
.eg-switch::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: var(--radius-full); background: var(--muted); }
.eg-switch::after { content: ""; position: absolute; inset: -13px -6px; }
.eg-switch[aria-checked="true"] { background: var(--fg); }
.eg-switch[aria-checked="true"]::before { left: 16px; background: var(--bg); }
.eg-greeting-form { margin: 0; }
.eg-greeting-form .input { width: 100%; max-width: 420px; }
.eg-hint { margin: 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
/* the accent: round swatches, the picked one ringed (Intercom's colour picker); the first is the default */
.eg-accents { display: flex; align-items: center; gap: 8px; }
.eg-swatch { position: relative; display: block; flex: none; margin: 0; width: 20px; height: 20px; border-radius: var(--radius-full); background: var(--swatch); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.eg-swatch::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; }
.eg-swatch[aria-current] { outline: 2px solid var(--fg); outline-offset: 2px; }
/* the default (10-06, Bonan: "这几个色盘怎么不对齐？第一个大圆是啥？"): a swatch like the others, the size, centre and ring
   theirs (Notion's and Linear's pickers), filled with the colour the chat has without an accent: its send button,
   ui.css var(--line) in the dark theme and #18181b in the light one (below); auto is the visitor's own setting */
.eg-swatch-default { --swatch: #424245; }
.eg-swatch-default[data-theme="light"] { --swatch: #18181b; }
@media (prefers-color-scheme: light) { .eg-swatch-default[data-theme="auto"] { --swatch: #18181b; } }
.eg-stage { margin-top: 20px; border: 1px solid var(--line); border-radius: var(--radius-box); overflow: hidden; background: #fff; }
.eg-preview { display: block; width: 100%; height: 600px; border: 0; }
.eg-line { margin: 28px 0 0; font-size: var(--text-base); line-height: var(--lh-base); }
.eg-panel[hidden] { display: none; }
.eg-panel .give { margin-top: 24px; }
.eg-sub { margin: 40px 0 12px; font: 600 var(--text-lg)/var(--lh-lg) var(--font); }
.eg-where { display: grid; gap: 8px; margin: 0; }
.eg-where > div { display: grid; grid-template-columns: 180px 1fr; gap: 16px; }
.eg-where dt { font-weight: 500; }
.eg-where dd { margin: 0; color: var(--muted); }
@media (max-width: 640px) {
  .eg-title { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
  .eg-preview { height: 560px; }
  .eg-where > div { grid-template-columns: 1fr; gap: 0; }
}

/* ---- the frame's theme and accent (10-06, Bonan: "弹出来的是否支持 theme？比如 light theme"; Cal.com's theme auto | light |
   dark and brand colour, Intercom's and Crisp's colour). public/embed.js asks for one (auto is the visitor's own setting,
   resolved there and kept current by eol:theme); dark is the Lobby as it is. Light is the same greys turned over, zinc as
   in Cube's light theme; the few greys the chat's sheets write out by hand are turned here too. The accent is the
   visitor's own messages and the send button; their words black or white, whichever reads. */
:root:has(main.embed[data-theme="dark"]) { color-scheme: dark; }
:root:has(main.embed[data-theme="light"]) {
  color-scheme: light;
  --bg: #ffffff; --bg2: #f4f4f5; --bg3: #e4e4e7;
  --fg: #18181b; --fg-hover: #27272a; --on-fg: #ffffff;
  --muted: #71717a; --line: #e4e4e7; --ring: #a1a1aa; --ring-soft: rgb(161 161 170 / .5); --scrim: rgb(0 0 0 / .3);
  --chip: rgb(0 0 0 / .06); --chip2: rgb(0 0 0 / .1); --nav: rgb(24 24 27 / .8);
}
main.embed[data-theme="light"] .th-typing-bubble i { background: #71717a; }
main.embed[data-theme="light"] .th-back, main.embed[data-theme="light"] .th-pill { background: #f4f4f5; color: var(--fg); }
main.embed[data-theme="light"] .th-back:hover { background: #e4e4e7; }
main.embed[data-theme="light"] .th-latest { border-color: #e4e4e7; background: #fff; color: #3f3f46; }
main.embed[data-theme="light"] .th-latest:hover { background: #f4f4f5; color: #18181b; }
main.embed[data-theme="light"] .th-pic, main.embed[data-theme="light"] .chatbox-pic img { border-color: #e4e4e7; }
main.embed[data-theme="light"] .chatbox { background: #fff; }
main.embed[data-theme="light"] .chatbox-send { background: #18181b; color: #fff; }
/* the visitor's own bubbles in the owner's accent (10-08, the iMessage pass: where iMessage's are blue), their tail too */
main.embed[data-accent] { --bubble-mine: var(--embed-accent); --on-bubble-mine: var(--embed-on-accent); }
main.embed[data-accent] .chatbox-send { background: var(--embed-accent); color: var(--embed-on-accent); }

/* Powered by EarthOnline: inbox.css (the visitor's own chat page has it too, release-3) */