/* /me, your robot's own page, and the block that connects an agent to a robot (src/views/me.js). Every page loads this
   sheet along with the other groups' sheets, so every selector here starts with .connect, .cn- or .me-, or sits under one.
   Colours, sizes and radii are style.css's tokens. Nothing here adds a colour or a motion. */

/* ---- Give this to your agent: one text and its Copy button (style.css .give, .prompt, .keynote) ---- */
.connect > .keynote { margin-top: 16px; }
.connect .give-head .btn { min-width: 88px; }

/* ---- /me ---- */
.me-lead { margin: 24px 0 0; color: var(--muted); text-wrap: pretty; }
/* a form's buttons side by side */
.me-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.me-actions .btn { margin-top: 0; }
/* an address: smaller than a title, and it may break anywhere */
.me-url { font-size: var(--t-m); font-weight: 400; overflow-wrap: anywhere; }
.row h3.me-url { font-size: var(--t-m); }
/* an agent's row (round 2, Bonan: "似乎别这么拥挤"; Claude.ai's connectors, GitHub's and Vercel's integrations): its
   robot, pressed to pick its shape and colour (no ground under the pointer: a face that is a button is not a row), the
   name over one line of how it stands (it fades out past the row and slides when pointed at), and one control at the
   right, centred on the two lines: ⋯, its menu. Rows are split by lines, never a box, at every width. */
.me-agent { flex-wrap: nowrap; align-items: center; column-gap: 12px; }
.me-agent > .row-main { flex: 1 1 auto; }
.me-agent .tagline.overflow-scroll { max-width: 100%; }
.me-agent-pick { display: block; flex: none; line-height: 0; border-radius: var(--radius); cursor: pointer; }
.me-agent-pick:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.me-agent-more { flex: none; width: 36px; height: 36px; margin-right: -8px; color: var(--muted); }
.me-agent-more:hover, .me-agent-more:has(+ .menu:popover-open) { background: var(--bg2); color: var(--fg); }
.me-agent-menu .me-agent-delete { color: var(--danger); }
.me-box.me-agents { margin-inline: calc(-1 * var(--panel-pad, 16px)); border-width: 1px 0; border-radius: 0; }
.me-box.me-agents .row { padding: 12px var(--panel-pad, 16px); }
/* an agent's Permissions (views/me.js sealsDialog): its connections, each the app row below (logo, name over its state, the
   action at the right), 16 apart */
.me-seals { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
/* a task's page, for its author alone (src/views/share.js): which agent posted it, and which one answers for it */
.me-resp { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.me-resp form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }


/* ---- /me as settings, 10-02 night (Bonan: "这个界面极度傻逼，该对齐不对其，你参考GitHub里repo settings的前端设计……甚至可以
   左边是那种选择的list，右边是内容"). After GitHub's settings pages: a head (face, name and state, handle; on the right
   the way to the public page), then two columns: on the left the sections as a list, on the right one section at a
   time. A section is a title over a hairline, one grey sentence, then its content; a list is a box with a hairline
   between rows (GitHub's Box); a form's fields share one left edge and the width of a field. Without script every
   section shows, one under another (public/app.js shows one at a time, by the address: /me#agents). ---- */
.me-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 40px 0 0; }
.me-head .eol-robot { flex: none; }
.me-head-main { flex: 1 1 240px; min-width: 0; }
.me-head-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.me-head h1 { margin: 0; font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: var(--tracking-tight); }
.me-head h1.overflow-scroll { max-width: min(480px, 100%); }
.me-head-facts { margin: 2px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
.me-head > .btn { flex: none; }

.me-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; margin-top: 32px; }
/* the sections: rows of a list (taste: hover one step of ground, the one shown one step more), the count at the end */
.me-nav { display: flex; flex-direction: column; gap: 2px; align-self: start; position: sticky; top: 76px; }
.me-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 10px; border-radius: var(--radius); color: var(--fg-hover); font-size: var(--text-sm); font-weight: 500; text-decoration: none; }
.me-nav a:hover { background: var(--bg2); }
.me-nav a[aria-current] { background: var(--bg3); color: var(--fg); }
.me-nav .me-count { color: var(--muted); font-weight: 400; }
.me-sections { min-width: 0; }
.me-tabs .me-sec:not(.is-shown) { display: none; }
.me-sec + .me-sec { margin-top: 48px; }
.me-tabs .me-sec + .me-sec { margin-top: 0; }
.me-sec-title { display: flex; align-items: center; gap: 8px; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: var(--tracking-tight); }
.me-sec-title .sec-note { color: var(--muted); font-weight: 400; }
.me-sec-lead { margin: 12px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); text-wrap: pretty; }
.me-sec > .give { margin-top: 24px; }
/* a list in a box: a 1px edge, 12px corners, a hairline between rows, 12px by 16px inside each row */
.me-box { list-style: none; margin: 12px 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--radius-box); overflow: hidden; }
.me-box > li + li { border-top: 1px solid var(--line); }
.me-box .row { margin: 0; padding: 12px 16px; border-radius: 0; }
.me-box .row h3 { font-size: var(--text-base); line-height: var(--lh-base); }
.me-box .row:has(h3 a):hover { background: var(--bg2); }
.me-sec .none { margin: 16px 0 0; }
.me-sec .form { margin-top: 12px; max-width: 440px; }
.me-sec .me-actions { margin-top: 16px; }
.me-sec .note { font-size: var(--text-sm); line-height: var(--lh-sm); }
.me-sec .cta { margin-top: 16px; }

@media (max-width: 760px) {
  .me-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
  /* on a phone the sections are a row of tabs that scrolls sideways, as GitHub's and Linear's do on a phone (hotfix-6,
     Bonan: "那个横向的滚动，直接压在bg上了，太蠢了"): no scrollbar at all; the side that has more fades out over 32px;
     the tab shown is scrolled into view (public/app.js). The fade follows the scroll by itself (a scroll-driven
     animation of the mask's two edges); a browser without those gets the same edges from app.js (.fade-start/-end). */
  .me-nav {
    position: static; flex-direction: row; overflow-x: auto; gap: 4px; scrollbar-width: none; --bar: none; overscroll-behavior-x: contain;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--nav-fade-start), #000 calc(100% - var(--nav-fade-end)), transparent);
    mask-image: linear-gradient(to right, transparent, #000 var(--nav-fade-start), #000 calc(100% - var(--nav-fade-end)), transparent);
  }
  .me-nav::-webkit-scrollbar { display: none; }
  .me-nav a { flex: none; }
  .me-head { padding-top: 24px; }
}
@property --nav-fade-start { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --nav-fade-end { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* at the start only the end fades, at the end only the start, between both; a row that fits has no timeline: no fade */
@keyframes nav-fade { 0% { --nav-fade-start: 0px; --nav-fade-end: 32px; } 8% { --nav-fade-start: 32px; } 92% { --nav-fade-end: 32px; } 100% { --nav-fade-start: 32px; --nav-fade-end: 0px; } }
@media (max-width: 760px) {
  @supports (animation-timeline: scroll()) { .me-nav { animation: nav-fade linear both; animation-timeline: scroll(self inline); } }
  .me-nav.fade-start { --nav-fade-start: 32px; }
  .me-nav.fade-end { --nav-fade-end: 32px; }
}
/* the first visit: the profile under the text that connects the agent */
.me-first { margin-top: 48px; max-width: 760px; }
/* a section's title row: the title on the left, the section's one action on the right, the hairline under the row */
.me-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.me-sec-head .me-sec-title { padding-bottom: 0; border-bottom: 0; }
.me-sec-head form { display: contents; }
/* a form's labels: 14px semibold over the field, a hint after the label in grey, upright (GitHub's form groups) */
.me-sec .field { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: 600; }
.me-sec .field em { font-style: normal; font-weight: 400; }
/* nothing yet: said in a box, in the middle of it (GitHub's blankslate) */
.me-sec .none { margin: 16px 0 0; padding: 32px 16px; border: 1px solid var(--line); border-radius: var(--radius-box); color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); text-align: center; }
/* Language: each language a row of the box, the whole row a button; pointed at, one step of ground; the one in use
   white and ticked */
.me-lang { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 36px; padding: 8px 16px; border: 0; background: none; color: var(--fg-hover); font: 500 var(--text-sm)/var(--lh-sm) var(--font); text-align: left; cursor: pointer; }
.me-lang:hover { background: var(--bg2); }
.me-lang[aria-current] { color: var(--fg); }
.me-check { flex: none; }
/* the head's face pulled left by its drawing's own inset (views.js faceEdge), level with the column's edge */
.me-face { display: block; flex: none; line-height: 0; margin-left: calc(var(--edge, 0) * -48px); }
/* no line under a section's title (10-02 night, Bonan: "这个分割线没有屁用"): space alone sets it off */
.me-sec-head { padding-bottom: 0; border-bottom: 0; }
.me-sec-lead { margin-top: 8px; }
/* the name's box trimmed to its capitals, so its badge centres on the letters and the handle sits close under them, as
   on a robot's page (home.css; 10-02 night, Bonan: "offline没有和名字居中对齐，然后名字和下面的@行padding太大") */
.me-head-name { flex-wrap: nowrap; }
.me-head h1.overflow-scroll { text-box: trim-both cap alphabetic; padding-block: .3em; margin-block: -.3em; }
.me-head-facts { margin-top: 4px; }
/* Profile's handle: the note under its field in plain weight; once set, the handle as text, not a field */
.me-sec .field .field-note { font-weight: 400; }
.me-sec .field .me-fixed { font-size: var(--text-base); line-height: var(--lh-base); font-weight: 400; color: var(--fg); }
/* the handle once set: on one line, its label then its value (10-02 night, Bonan: "这个handle这么小，放一行不行么") */
.me-sec .field.me-handle { display: flex; align-items: baseline; gap: 12px; }
/* ---- /me/posts (views/me.js mePostsView): the page's title, then the posts' box, in the site's column */
.me-posts-title { margin: 0; font: var(--level-title); letter-spacing: normal; }
.me-posts .me-box { margin-top: 24px; }
.me-posts .none { margin: 24px 0 0; color: var(--muted); }
/* ---- Email (views/me.js emailSection, 10-03 night): a problem said above the form on one step of ground, as the login
   page says one (style.css .login-error); the code's step says where it went, and "Use a different email" is a button
   beside Add and Resend, as the login dialog has it (hotfix-ui, 10-07: an action is never a bare link) */
.me-sec .me-error { max-width: 440px; margin: 16px 0 0; padding: 10px 12px; border-radius: var(--radius); background: var(--bg2); color: var(--fg); font-size: var(--text-sm); line-height: var(--lh-sm); }
.me-sec .me-email-pending .me-sec-lead b { color: var(--fg); font-weight: 500; }
.me-email-acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* a step not taken (the email form while a code is pending, or back): hidden wins over the form's own display */
.me-sec [hidden] { display: none !important; }

/* Private cloud context: a solid editing surface, unchanged by clicking or focusing. */
.memory-editor { margin: 0; display: grid; gap: 8px; min-width: 0; }
.memory-reader, .memory-counter, .memory-updated { color: var(--muted, #999); font: var(--level-meta); margin: 0; }
.memory-text { display: block; box-sizing: border-box; width: 100%; min-height: 240px; max-height: 50vh; overflow-y: auto; resize: none; field-sizing: content; padding: 8px 12px; border: 0; border-radius: 8px; background: var(--bg2); color: var(--fg); font: inherit; line-height: var(--lh-body); outline: none; box-shadow: none; transition: none; }
.memory-text:focus, .memory-text:hover { background: var(--bg2); border: 0; outline: none; box-shadow: none; }
.memory-counter { justify-self: end; }
.memory-updated { overflow-wrap: anywhere; }
/* (10-09) edited formatted, as a post's body (public/app.js richBody, ui.css .fc-rich): no ## ** or - showing. Its box as
   the textarea's was; it grows with its words up to half a screen, then scrolls inside. About you, the profile its
   receptionist learned, is its own section at the top: a small heading (a field's name, 14/20 500), its box as tall as its
   facts; the rest of the memory under it, 16 below. The count and Updated, quiet meta, one line at the foot. */
.memory-text.fc-rich { min-height: calc(3lh + 18px); max-height: 50vh; overflow-y: auto; resize: none; padding: 8px 12px; border: 1px solid var(--line); background: var(--bg2); }
.memory-text.memory-profile.fc-rich { min-height: calc(1lh + 18px); }
/* the reader line, then 16 to About you (design/44 §4: a dialog's text to its body); its name 8 over its box; 16 to the rest */
.memory-reader + .memory-about { margin-top: 8px; }
.memory-about { display: grid; gap: 8px; margin-bottom: 8px; }
.memory-head { margin: 0; font: 500 var(--text-sm)/var(--lh-sm) var(--font); color: var(--fg); }
.memory-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0; }
.memory-meta > .memory-counter { flex: none; }
.memory-links { margin-top: 8px; }

/* ---- a hosted agent (10-06, src/views/me.js hostedRow): its line, then Google Calendar on a line of its own, its
   Connect / Disconnect a button after its words (hotfix-ui, 10-07) ---- */
.me-needs { color: var(--danger); }
.me-todo { color: var(--unread); font-weight: 600; } /* (devil-smallfix2 + devil-blueonly) something to do, not an error: blue means it needs you */
.me-conn { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); }
/* its sign-in dialog (hostedLoginDialog): the step, and while the room is being made the same step as a skeleton
   (taste §5: the real component, grey and pulsing as one, its words and edges see-through) */
.hosted-step { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.hosted-step > .copy-block, .hosted-step > .copy-code, .hosted-step > .prompt, .hosted-step .field { align-self: stretch; }
.hosted-step .prompt { font: 600 var(--text-2xl)/var(--lh-2xl) var(--mono); letter-spacing: .08em; }
.hosted-step.is-skeleton * { border-color: transparent !important; color: transparent !important; }
.hosted-step.is-skeleton .btn, .hosted-step.is-skeleton .input, .hosted-step.is-skeleton .prompt, .hosted-step.is-skeleton .copy-head h2, .hosted-step.is-skeleton .field > span { background: var(--bg3) !important; border-radius: var(--radius); animation: me-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
.hosted-step.is-skeleton .input { display: block; height: 36px; }
@keyframes me-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .hosted-step.is-skeleton * { animation: none !important; } }
.field-error { margin: 0; color: var(--danger); font-size: var(--text-sm); line-height: var(--lh-sm); }
/* a link in a dialog's sentence (the hosted sign-in's page): the sentence's grey, underlined, white under the pointer */
.dialog-text .dialog-link { color: var(--fg-hover); text-decoration: underline; text-underline-offset: 3px; }
.dialog-text .dialog-link:hover { color: var(--fg); }
/* a section's two actions side by side (10-06 night: Cloud agents' Connect cloud agent and Host your agent) */
.me-sec-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
/* on a phone the title keeps its line and the two actions go under it, left edges lined up */
.me-sec-head:has(> .me-sec-actions) .me-sec-title { flex: 1 0 auto; white-space: nowrap; }
@media (max-width: 560px) {
  .me-sec-head:has(> .me-sec-actions) { flex-wrap: wrap; row-gap: 12px; }
  .me-sec-head > .me-sec-actions { flex: 1 0 100%; justify-content: flex-start; }
}
[data-theme-pick]:not([aria-current]) .me-check { visibility: hidden; }

/* ---- Connect Telegram on a desktop (hotfix-4, views/me.js): the one-time link as a QR code, 200px in the middle of the
   dialog on its own white tile (the code needs its light ground in the dark theme too), the card's code (card-qr.js);
   until the server has made the link, the same square in grey, breathing as the site's skeletons do (taste §5) ---- */
.tg-qr { display: grid; place-items: center; width: 200px; height: 200px; margin: 8px auto 0; border-radius: var(--radius-box); background: #fff; overflow: hidden; }
.tg-qr > img { display: block; width: 100%; height: 100%; }
.tg-qr[aria-busy="true"] { background: var(--bg3); }
@media (prefers-reduced-motion: no-preference) {
  .tg-qr[aria-busy="true"] { animation: home-breathe 2s cubic-bezier(.4, 0, .6, 1) infinite; }
}
[data-telegram-open][aria-disabled="true"] { opacity: .5; cursor: default; }
/* ---- an app's row (hotfix-6: Telegram in Notifications), the Connections study's row (connections-study, 10-07, after
   ChatGPT's app list, measured headless on chatgpt.com/plugins): the vendor's own logo in a 40px tile (12px corners, a
   1px hairline at black/.1 or white/.15, white in light, one step up in dark), 14px to the text, the name over one
   plain line in this site's type steps (16 over 14), the action at the right on the middle of the two lines. The logo's
   top sits on the name's line (taste: a face beside several lines is not centred). ---- */
.me-app { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
.me-app-logo { display: grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; border: 1px solid light-dark(rgb(0 0 0 / .1), rgb(255 255 255 / .15)); border-radius: 12px; background: light-dark(#ffffff, #1d1d1f); overflow: hidden; }
.me-app-logo img { display: block; width: 24px; height: 24px; }
/* the agents connected to the front desk (10-09 night, views/me.js brainRow): the product's own mark, in its colour */
.me-app-logo svg { display: block; width: 22px; height: 22px; }
.me-app-main { min-width: 0; }
.me-app-name { margin: 0; font: 500 var(--text-base)/var(--lh-base) var(--font); }
.me-app-line { margin: var(--sp-1) 0 0; color: var(--muted); font-size: var(--text-sm); line-height: var(--lh-sm); overflow-wrap: anywhere; }
.me-app-act { margin-top: 4px; }
.me-app-act form { display: contents; }
.me-app-act .me-fixed { color: var(--muted); }
/* an agent's Permissions (P2, 10-08): the Allowed switch under a connected app's line, its label beside it (shadcn's
   Switch and Label, 8px apart), the label a step of the line's type; the label toggles it too */
.me-app-allow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.me-app-allow label { color: var(--fg); font: 500 var(--text-sm)/var(--lh-sm) var(--font); cursor: pointer; user-select: none; }
/* in Notifications, under the Email line, with the room a field has above it */
.me-sec .me-app-telegram { margin-top: 20px; }
/* a phone (hotfix-6, public/app.js): no code to scan with the phone in the hand; the dialog is its title and Open Telegram */
@media not all and (hover: hover) and (pointer: fine) {
  #telegram-connect .tg-qr, #telegram-connect .dialog-text { display: none; }
}

/* the Front desk tab's "Nobody answers yet" row (10-08, the onboarding cold run): the Agents tab's row, at the top of the tab */
.prof-body > .desk-nobody { margin-top: var(--sp-3, 12px); }

/* Settings, Keys (design/47 L6): Create key is a form with a button, drawn as the list's other Add rows */
.key-create { margin: 0; }
.key-create .me-add { width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }