/* ==== Profile links and Memory (profile-memory design, 10-11; src/views/home.js profileLinks, src/views/memory-files.js) ==== */

/* ---- the profile's links (devil-profilelinks 10-13, X's profile line and GitHub's sidebar): under the about line, 12 below
   it (the head's rhythm), in the about line's type (body, 24 a line) and the handle's grey. Each its icon and its words,
   220 at most, the words cut with an ellipsis; side by side 16 apart, wrapping 4 apart; the words underlined under the
   pointer (no ground: they are not rows), no tooltip. The whole of each is the link; an invisible ring takes the press 2
   past it above and below (the rows' gap, so two never overlap) and 6 to each side. The first icon's drawing stands on
   the words' left edge (taste: a thing with no ground at rest lines up its content). ---- */
.prof-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-3); min-width: 0; }
.prof-link { position: relative; display: inline-flex; align-items: center; gap: 6px; max-width: min(220px, 100%); min-width: 0; color: var(--muted); font: var(--level-body); text-decoration: none; }
.prof-link > svg { flex: none; display: block; width: 18px; height: 18px; }
.prof-link > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prof-link::after { content: ""; position: absolute; inset: -2px -6px; }
.prof-link:hover > span { text-decoration: underline; text-underline-offset: 3px; }
/* Edit profile's links: their own small title (a field's label size, grey), the fields 16 apart as the dialog's */
.prof-link-fields { display: grid; gap: var(--sp-4); margin-top: var(--sp-2); }
.prof-link-fields-title { margin: 0; color: var(--fg); font: 500 var(--fs-body)/var(--lh-body) var(--font); } /* the dialog's other labels (Name) */

/* ---- Memory's files (and the Embed tab's lists): rows between lines as the posts are (home.css .home-item: Bluesky's rows,
   16 past the words on each side, a plain rectangle of ground under the pointer); in each, an icon, the name an item over
   its first words (body, grey, one line fading at its end); a row's one action, if it has one, at its right. ---- */
.mem-list { list-style: none; margin: var(--sp-2) calc(-1 * var(--panel-pad, var(--sp-4))) 0; padding: 0; }
.mem-row, .mem-folder {
  position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; column-gap: var(--sp-3); align-items: start;
  padding: var(--sp-3) var(--panel-pad, var(--sp-4));
}
.mem-list > li + li { border-top: 1px solid var(--c-divider, var(--c-bg-3)); }
.mem-row:hover { background: var(--c-bg-2); }
.mem-row-link { position: absolute; inset: 0; z-index: 1; }
.mem-row-link:focus-visible { outline: none; }
.mem-row:has(.mem-row-link:focus-visible) { outline: 2px solid var(--c-text); outline-offset: -2px; }
.mem-ico { display: grid; place-items: center; height: var(--lh-item); color: var(--c-text-2); }
.mem-main { display: contents; }
.mem-ico { grid-column: 1; grid-row: 1; }
.mem-name { grid-column: 2; grid-row: 1; min-width: 0; font: var(--level-row); color: var(--c-text); overflow-wrap: anywhere; }
.mem-words {
  grid-column: 2 / 4; grid-row: 2; min-width: 0; margin-top: var(--sp-1); font: var(--level-body); color: var(--c-text-2); white-space: nowrap; overflow: hidden;
  --fade: 48px;
}
/* a folder: its name, its count (the same size, grey, regular: taste), then the chevron; a label's hover (the words' colour,
   no ground: taste), its files under it, their icons on its name */
.mem-folder { grid-template-columns: 20px minmax(0, 1fr); cursor: pointer; }
.mem-folder-name { display: inline-flex; align-items: center; gap: var(--sp-2); font: var(--level-item); color: var(--c-text); }
.mem-count { font: var(--level-body); line-height: var(--lh-item); color: var(--c-text-2); }
.mem-chev { color: var(--c-text-2); }
.mem-folder:hover .mem-folder-name, .mem-folder:hover .mem-chev { color: var(--c-text-2); }
.mem-row.is-child { padding-left: calc(var(--panel-pad, var(--sp-4)) + var(--sp-8)); }
.mem-list > li.is-child { border-top: 0; }
.mem-folder + .is-child { padding-top: 0; }
/* Gaps (design/49): the number right after the label, the same size, grey, regular (a folder's count); its list's rows have
   Dismiss at the right */
.mem-gaps-count { margin-left: 6px; }
.mem-gap-act { grid-column: 3; grid-row: 1 / 3; align-self: center; margin: 0; }
.mem-gaps-note { margin: var(--sp-2) 0 0; font: var(--level-body); color: var(--muted); }
/* New file: a row like the others, its words the muted grey until the pointer is on it */
.mem-new .mem-name { color: var(--c-text-2); }
.mem-new:hover .mem-name, .mem-new:hover .mem-ico { color: var(--c-text); }



/* ---- a file's page: its name the title, who can read it and More at the title's right; its body the site's editable
   block (taste: solid ground, always, no effect when you click into it), as tall as what it says and at least most of a
   window, the page scrolling (no box of its own to scroll) ---- */
.mem-file { padding-top: var(--sp-2); }
.mem-doc.memory-text.fc-rich { min-height: 60vh; max-height: 75vh; overflow-y: auto; padding: var(--sp-4); border-radius: 12px; }
.mem-doc :is(h1, h2, h3) { font: var(--level-item); }
.mem-doc :is(p, li) { font: var(--level-body); }
.mem-doc > :is(h1, h2, h3):not(:first-child) { margin-top: var(--sp-4); }
.mem-more { color: var(--muted); }
.mem-more:hover, .mem-more:has(+ .menu:popover-open) { color: var(--fg); }
.mem-more-menu { width: 200px; }
@supports (anchor-name: --a) { .mem-more-menu { inset: auto; margin: 0; top: calc(anchor(bottom) + 6px); right: anchor(right); } }
.mem-more-menu .mem-delete { color: var(--danger); }

/* New file's name: ".md" a grey suffix inside the field that cannot be deleted (the handle's @, mirrored) */
.md-field { position: relative; display: block; }
.md-field > .md-input { width: 100%; padding-right: var(--sp-12); }
.md-suffix { position: absolute; top: 0; bottom: 0; right: 12px; display: flex; align-items: center; color: var(--c-text-2); font: var(--level-body); pointer-events: none; user-select: none; }

/* ---- Edit agent: Memory first; the sections 24 apart as the profile's groups ---- */
.ag-body > #memory .mem-list { margin-top: var(--sp-2); }
/* a long path ("posts/what-is-earthonline.md") fades at its end before the title's controls (taste: extreme cases fade) */
main:has(> .mem-file) > .panel-band > h1 { min-width: 0; overflow: hidden; white-space: nowrap; }
/* a link's field: the site's mark a grey prefix inside the field (the handle's @ field, ui.css .at-field) */
.prof-link-fields { gap: var(--sp-2); }
.link-field { position: relative; display: block; }
.link-prefix { position: absolute; top: 0; bottom: 0; left: 12px; display: flex; align-items: center; color: var(--muted); pointer-events: none; }
.link-prefix > svg { width: 18px; height: 18px; }
.link-field > .link-input { width: 100%; padding-left: 40px; }

/* ---- Settings in four (views/me.js, data.four): the one section-title style: Settings, the agent page and the embed flow (Theme, Language, Embeds, Allowed sites) ---- */
.sec-h { margin: var(--sp-4) 0 var(--sp-2); color: var(--fg); font: 600 var(--text-lg)/var(--lh-lg) var(--font); }
.me-sec-head + .sec-h { margin-top: var(--sp-2); }

/* ---- the profile's Agents tab: the person's agent, one row as Who is online's (X's People row): its face (48, the online
   dot at its corner), its name an item over how it stands (body, grey), the row a link to the agent's own page; Connect
   agent at the right while it is your own and not connected. Rows reach 16 past the words, a line under each, a plain
   rectangle of ground under the pointer, as the posts' ---- */
.prof-agents { list-style: none; margin: 0 calc(-1 * var(--panel-pad, 16px)); padding: 0; }
.prof-agent { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: var(--sp-3); align-items: center; padding: var(--sp-3) var(--panel-pad, 16px); border-bottom: 1px solid var(--rail-line, var(--bg3)); }
.prof-agent:hover { background: var(--bg2); }
.prof-agent-link { position: absolute; inset: 0; z-index: 1; }
.prof-agent-main { display: grid; min-width: 0; }
.prof-agent-main > b { font: var(--level-item); color: var(--fg); }
.prof-agent-main > span { font: var(--level-body); line-height: var(--lh-item); color: var(--muted); }
.prof-agent-act { position: relative; z-index: 2; }

/* ---- the agent's page for a visitor: Memory's public files, no labels; a file read as a post is (its words, no box) ---- */
.mem-read { padding-top: var(--sp-2); }
.mem-read > * { margin: 0; }
.mem-read > * + * { margin-top: var(--sp-3); }
.mem-read :is(h1, h2, h3) { font: var(--level-item); }
.mem-read > :is(h1, h2, h3):not(:first-child) { margin-top: var(--sp-6); }
.mem-read :is(p, li) { font: var(--level-body); }
.mem-read ul { padding-left: 24px; }
.ag-page .home-who-facts a { color: inherit; text-decoration: none; }
.ag-page .home-who-facts a:hover { color: var(--link); }

/* ---- someone else's profile: the posts alone, no tab bar (10-11: one tab says nothing); a line between
   the head and the first post, the posts' own line, as the tab bar's was; the head's own 16 above it, at every width ---- */
.prof-only-posts > .home-list { margin-top: 0; border-top: 1px solid var(--rail-line, var(--bg3)); }
.prof-only-posts > .none { margin-top: 48px; text-align: center; }

/* ---- the agent's page keeps its title row beside the rail (a profile drops it: its head is its title), so its way back
   is there (10-11, Bonan: "我点到某一个agent页面后，怎么返回呢"): ← and the agent's name, as a post's "← Post"; scrolled away,
   the floating row (the round glass back, the name in the pill; rail.css .panel-pill-at) ---- */
@media (min-width: 761px) {
  body[data-rail] main.wrap:has(> .ag-page) > .panel-band { display: flex; }
  body[data-rail] main.wrap:has(> .ag-page) .ag-page > .home-row { padding-top: var(--sp-2); }
}

/* ---- the agent's page: its tabs (the profile's tab bar); on a phone one row that scrolls sideways, no scrollbar, its far
   end fading (taste: a sideways row of tabs) ---- */
.ag-tabs.fade-clip.is-clipped { -webkit-mask-image: none; mask-image: none; } /* the fade is the phone's (below) */
.ag-tabs { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.ag-tabs::-webkit-scrollbar { display: none; }
@media (max-width: 640px) {
  .ag-tabs.fade-clip.is-clipped { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--fade, 32px)), transparent); mask-image: linear-gradient(to right, #000 calc(100% - var(--fade, 32px)), transparent); }
}
.ag-body[data-tab]:not([data-tab="memory"]) { padding-top: var(--sp-2); }
/* Runs on: Use your own AI, the quieter way in under Add subscription */
.ag-runs .ag-own .me-add-words { color: var(--muted); }
.ag-runs .ag-own:hover .me-add-words { color: var(--fg); }
/* a tile with our own icon (email, push): the vendor tiles' box, the icon in the text's grey */
.ag-icon-tile { color: var(--muted); }
.ag-embed .me-sec-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: var(--sp-3); }
/* its two ways in sit in the list's own rhythm (16 between rows, as the rows above, which have no ground of their own) */
.ag-runs .me-add { margin: 0; padding: 0; border: 0; }
.ag-runs .me-add:hover { background: none; }
.ag-runs .me-add:hover .me-add-face { background: var(--bg3); color: var(--fg); }

/* ---- round 5 (10-11) ---- */
/* the profile's Agents tab wears the eye the right column's "Viewing …" chip wears: only you see it */
.prof-tab-in > .prof-tab-eye { flex: none; margin-right: 6px; color: var(--muted); }
.prof-tab[aria-current] .prof-tab-eye { color: var(--fg); }
/* your agent not connected: the right column's lure (the 404's robot, Connect agent), in the middle of the column */
.prof-agents-empty { display: grid; justify-items: center; gap: var(--sp-4); padding: 40px 0 24px; }
/* a row's one action (Copy, Remove), level with the row's middle, above the row's link */
.ag-add { grid-column: 2 / 4; margin: 0; align-self: center; }
.ag-add-site > .mem-ico { align-self: center; }
.ag-row-act { grid-column: 3; grid-row: 1 / 3; align-self: center; position: relative; z-index: 2; display: flex; }
.ag-embed-row .mem-words, .mem-row.is-still .mem-words { grid-column: 2; }
.mem-row.is-still:hover { background: none; }
.mem-row.is-still .mem-name { font: var(--level-body); }
/* View all: X's "Show more", the site's link blue, no icon */
.ag-more { grid-template-columns: minmax(0, 1fr); }
.ag-more .mem-name { grid-column: 1; color: var(--link); font: var(--level-body); }
.ag-more .mem-main { grid-column: 1; }
/* the Embed tab's two blocks, one under the other, the page scrolling as one */
.ag-block + .ag-block { margin-top: var(--sp-6); }
.ag-block > .sec-h { margin: var(--sp-4) 0 0; }
.ag-anyone { margin: var(--sp-2) 0 0; color: var(--muted); font: var(--level-body); }
/* the embed flow, an embed opened: its type shown, the others there but locked */
.sx-tile.is-locked { opacity: .4; cursor: not-allowed; }
.sx-tile.is-locked:hover { background: none; }
.ex-locked-note { margin-top: var(--sp-3); }
.sx .ex-locked-note a, .sx .ex-sites-note a { color: var(--link); font-weight: 400; text-decoration: none; }
.sx .ex-locked-note a:hover, .sx .ex-sites-note a:hover { text-decoration: underline; }
.ex-sites-note { margin-top: var(--sp-4); }
.prof-agents-empty .nf-art { width: 96px; height: 96px; } /* the right column's size at every width (rail.css sets it inside its own media query) */

/* ---- round 6 (10-11): Runs on in two blocks, Permissions as a connector list ---- */
/* a block's title (an item) over its one line (meta, grey), 16 above its rows */
.ag-block-head { margin: var(--sp-4) 0 var(--sp-4); }
.ag-block-title { margin: 0; font: var(--level-row); }
.ag-block-line { margin: 2px 0 0; font: var(--level-meta); color: var(--muted); }
.ag-default { margin-left: 6px; vertical-align: 1px; }
/* the agent page's rows: the button (or ⋯) level with the row's middle, as the site's list rows */
.ag-body .me-app { align-items: center; }
.ag-body .me-app-act { margin-top: 0; }
/* Notifications: a row without a tile (a thing to switch, the second notice); a channel's switch beside its Disconnect */
.ag-body .me-app-bare { grid-template-columns: minmax(0, 1fr) auto; }
.ag-body .me-app-act { display: flex; align-items: center; gap: 12px; }
.ag-body > .me-app-line { margin-top: var(--sp-3); }
/* Settings' Keys: the same row, Revoke level with the row's middle */
.ag-apps { margin-top: var(--sp-4); }
.ag-apps .me-app { align-items: center; }
.ag-apps .me-app-act { margin-top: 0; }
/* a key's row: Revoke, then its ⋯ (Rename) */
.ag-key-act { display: flex; align-items: center; gap: 4px; }
.ag-key-act .me-agent-more { margin-right: -8px; }
/* the new key, shown whole once: the site's prompt box, the one sentence under it */
.ag-key-whole { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.ag-key-say { margin-top: var(--sp-3); }
/* (design/47 L2) the autosave's one quiet line under the file: Saved, or why not */
.mem-status { min-height: 1lh; margin: var(--sp-2) 0 0; color: var(--muted); font: var(--level-item); }

/* ---- a file row's right-click / long-press menu (10-11; views/memory-files.js fileMenu, public/memory-ctx.js). The inbox row's
   menu (inbox.css .ctx-menu, the account menu's grammar) at the pointer; the row it was asked on keeps one step of ground
   while it is open; the phone's callout and text selection are off on rows, so a long press is ours. ---- */
.menu.mem-ctx { inset: auto; width: 220px; }
.mem-ctx [hidden] { display: none !important; }
.mem-ctx .menu-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-ctx .menu-row > svg { flex: none; }
.mem-ctx .mem-delete { color: var(--c-danger); }
.mem-ctx .menu-row:focus-visible { outline: none; background: var(--c-bg-3); }
.mem-row.is-ctx { background: var(--bg2); }
.mem-row[data-mem-path] .mem-row-link { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* the Agent page with nobody connected (Bonan: "一个巨大的引诱图"): the right column's lure, grown to the page, centred */
.ag-lure { display: grid; justify-items: center; align-content: center; gap: 0; min-height: 60vh; padding: var(--sp-6) 0; }
.ag-lure .nf-art { width: 96px; height: 96px; } .ag-lure .nf-art { margin-bottom: var(--sp-3); } .ag-lure .nf-copy { margin-bottom: var(--sp-4); } /* the same size and gap as the right column's empty module (rail.css .rcol-empty) */

/* Permissions: who was given what, under each connected app (public/perm-list.js); a tool that changes things is red */
.pl-rules { list-style: none; margin: var(--sp-2) 0 0; padding: 0; }
.pl-rule { display: flex; align-items: center; gap: 12px; margin: 0; padding: 2px 0; font: var(--level-body); color: var(--muted); }
.pl-text { min-width: 0; overflow-wrap: anywhere; }
.pl-who { color: var(--fg); }
.pl-act { flex: none; border: 0; background: none; padding: 0; font: inherit; color: var(--muted); text-decoration: underline; cursor: pointer; }
.pl-act:hover { color: var(--fg); }
.pl-act[disabled] { opacity: .5; cursor: default; }
/* an app row with rules under it: its logo and button stay level with the name, not the middle of the whole row */
.ag-body .me-app:has(.pl-rules) { align-items: start; }
/* the line under a connected app that opens who may use it, and the rows in that dialog */
.pl-count { display: block; margin-top: var(--sp-1); border: 0; background: none; padding: 0; font: var(--level-body); color: var(--muted); cursor: pointer; text-align: left; }
.pl-count:hover { color: var(--fg); text-decoration: underline; }
.dialog .pl-people { list-style: none; margin: 0; padding: 0; }
.pl-person { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.pl-person-main { flex: 1; min-width: 0; font: var(--level-body); }
.pl-sub { margin: 2px 0 0; }
.dialog .pl-rule { padding: 2px 0; }
.dialog .pl-text { flex: 1; }
.pl-face { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden; background: var(--bg3); color: var(--muted); font: 600 var(--text-sm)/1 var(--font); }
.pl-face img { width: 100%; height: 100%; object-fit: cover; }
.pl-handle { color: var(--muted); }
.pl-text .grant-ico { vertical-align: -2px; margin-right: 6px; } /* views/notes.js writeIcon, the permission card's pencil */
/* (devil-grantviews, 10-13) Who can use your apps (views/agent-page.js peopleSection): one row for each person, their face round
   as everywhere a person is, and under the name each thing given, one line each, Take back at its end */
.ag-people .pp-face { border: 0; border-radius: 50%; background: var(--bg3); color: var(--muted); font: 600 var(--text-base)/1 var(--font); }
.ag-people .pp-face img { width: 100%; height: 100%; object-fit: cover; }
.ag-people .me-app { grid-template-columns: 40px minmax(0, 1fr); }
.ag-people .me-app-act:empty { display: none; }
.pp-items { margin-top: var(--sp-1); }
.pp-item { justify-content: space-between; padding: 4px 0; }
.pp-item .pl-text { flex: 1; color: var(--fg); }
/* (devil-grantviews) a connected app's account is one line, cut with "…" at its end on a phone (never "…gmail.co / m") */
.ag-perms .me-app-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; overflow-wrap: normal; }
/* (devil-embedallow, 10-14) the account's allowed sites, one piece on the embed flow's sites screen and the agent page's Embed tab
   (views/embed-sites-panel.js): the switch "Allow on any website" on its own row, label left and switch right (the style screen's
   "Let visitors attach files"); the rows as the flow draws a site (a favicon, the domain in the link blue, Remove quiet); a site
   waiting for the owner tagged in the site blue (what needs you is blue, Bonan 10-12), its Allow beside it. While the switch is
   on, the list and Add are grey and out of reach (inert), kept as they were. Here as well as in setup.css, as the Embed tab
   loads no setup.css. */
.as-any { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3, 12px); min-height: 40px; margin: 0 0 var(--sp-2, 8px); font: var(--level-body); }
.as-said { margin: 0 0 var(--sp-3, 12px); color: var(--muted); font: var(--level-body); }
.ex-sites-box .as-any, .ex-sites-box .as-said { padding-inline: var(--panel-pad, 16px); } /* the flow's list keeps its rows inside the column: the switch lines up with them */
.as-list[inert] { opacity: .4; }
.as-panel .ex-site { align-items: center; }
.as-panel .ex-site .mem-ico { align-self: center; }
.as-panel .ex-site .ag-row-act { grid-row: 1; }
.as-panel .ex-site .ex-site-ico { color: inherit; }
.as-panel .ex-site-name { vertical-align: baseline; }
.as-panel .ex-remove { color: var(--muted); }
.as-panel .site-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; vertical-align: -3px; color: var(--link); font-weight: inherit; text-decoration: none; overflow-wrap: anywhere; }
.as-panel .site-chip:hover { text-decoration: underline; text-underline-offset: 3px; }
.as-panel .site-ico { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 4px; overflow: hidden; vertical-align: -3px; }
.as-panel .site-ico > img { display: block; width: 16px; height: 16px; }
.as-panel .site-ico.is-globe { color: var(--muted); border-radius: 0; }
.as-panel .site-ico.is-globe > svg { display: block; width: 16px; height: 16px; }
.as-panel .ex-new { display: inline-flex; align-items: center; height: 20px; margin-left: var(--sp-2, 8px); padding: 0 6px; border-radius: 6px; background: var(--bg3); color: var(--muted); font: 500 13px/20px var(--font); font-style: normal; vertical-align: 1px; white-space: nowrap; }
.as-panel .as-pending .mem-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--sp-2, 8px); } /* the tag under the name on a phone, at its left edge */
.as-panel .as-pending .ex-new { margin-left: 0; }
.as-panel .as-inside { color: var(--muted); }
/* (devil-sitelabel) a pen's own part of its address, "(c-0838791…2eb2)": one piece, never broken at its hyphens */
.as-panel .as-id { white-space: nowrap; }
.as-panel .ex-new.as-new-off { background: color-mix(in srgb, var(--unread) 14%, transparent); color: var(--unread); }