/* ==== design/50: the conversation's details (views/details.js, public/details.js) and the Agent page's folders and apps ====
   The dialog is the site's one dialog: 1px edge, 12px corners, no shadow, no animation. Its box does not change height from
   tab to tab: the head and the tabs stay, a tab's inside scrolls. */
dialog.dialog.dlg-details { width: 560px; }
.dd-inner { display: flex; flex-direction: column; height: min(640px, calc(85vh - 2px)); overflow: hidden; }
.dd-head { display: flex; align-items: center; gap: 16px; flex: none; }
.dd-face { display: flex; flex: none; }
.dd-who { min-width: 0; }
.dd-name { margin: 0; font: var(--level-title); letter-spacing: var(--tracking-tight); }
.dd-handle { margin: 2px 0 0; color: var(--muted); font: var(--level-body); }

/* the tabs: the site's underline tabs (rail.css .prof-tab) in the dialog's width, one line under the row */
.dd-tabs { display: flex; flex: none; margin: 16px -24px 0; padding: 0 12px; border-bottom: 1px solid var(--line); }
.dd-tab {
  position: relative; flex: none; padding: 12px; border: 0; border-radius: 0; background: transparent; color: var(--muted);
  font: 600 var(--fs-body)/var(--lh-base) var(--font); cursor: pointer; white-space: nowrap;
}
.dd-tab:hover { color: var(--fg); }
.dd-tab[aria-selected="true"] { color: var(--fg); font-weight: 700; }
.dd-tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 2px; background: var(--fg); }
.dd-tab:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }

.dd-panels { flex: 1; min-height: 0; margin: 0 -24px; overflow-y: auto; overscroll-behavior: contain; }
.dd-panel { padding: 16px 24px 8px; }
.dd-panel[hidden] { display: none; }
/* Memory fills the box: the file scrolls inside, Undo and Save stay at the foot */
.dd-panel[data-dd-panel="memory"]:not([hidden]) { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding-bottom: 0; }
.dd-inner > .dialog-actions { flex: none; margin-top: 16px; }
.dd-mem-load { padding: 0; border: 0; background: none; color: var(--fg); font: 500 var(--text-sm)/var(--lh-sm) var(--font); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Permissions: only the rules there are; each a row, the app's mark, "App · tool" over how it stands, ⋯ at the right */
.dd-rules { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.dd-rule { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; align-items: start; }
.dd-rule-main { min-width: 0; }
.dd-rule-title { margin: 0; font: 500 var(--text-base)/var(--lh-base) var(--font); overflow-wrap: anywhere; }
.dd-rule-line { margin: 0; color: var(--muted); font: var(--level-body); }
.dd-more { align-self: center; }
.dd-menu .is-danger { color: var(--danger); }
.dd-menu .menu-row > svg { flex: none; }
.dd-logo-letter { font: 600 var(--text-sm)/1 var(--font); color: var(--muted); }
.dd-empty { margin: 8px 0 16px; color: var(--muted); font: var(--level-body); }
/* Memory: their one file, edited as the Memory page edits a file; the path small over it; Undo and Save under it */
[hidden].btn, .dd-mem-bar [hidden] { display: none; }
.dd-mem { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.dd-mem .mem-doc.memory-text.fc-rich { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }
.dd-mem-bar { flex: none; display: flex; align-items: center; gap: 12px; min-height: 28px; padding: 8px 0; }
.dd-mem-status { color: var(--muted); font: var(--level-meta); }
.dd-skel-doc { height: 200px; border-radius: 8px; background: var(--bg3); }

/* Settings: Restrict, Block, Delete conversation: red words, a pale red ground under the pointer */
.dd-danger-list { display: grid; gap: 4px; margin: 0 -12px; }
.dd-danger { display: grid; gap: 2px; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--danger); text-align: left; cursor: pointer; }
.dd-danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.dd-danger-label { font: 500 var(--text-base)/var(--lh-base) var(--font); }
.dd-danger-about { color: var(--muted); font: var(--level-body); }

/* loading: the real rows with blank words, grey and breathing (Tailwind's animate-pulse) */
.dd-rule.is-skel .dd-rule-title, .dd-rule.is-skel .dd-rule-line { width: fit-content; border-radius: 6px; background: var(--bg3); color: transparent; }
.dd-rule.is-skel .dd-logo { border-color: transparent; background: var(--bg3); }
@media (prefers-reduced-motion: no-preference) {
  .dd-rule.is-skel, .dd-skel-doc { animation: home-breathe 2s cubic-bezier(.4, 0, .6, 1) infinite; }
}

/* the name that opens it: a link that is also a button */
a.th-name[data-dialog="conv-details"], .th-pill[data-dialog="conv-details"] { cursor: pointer; }

/* ==== devil-accesspanel: the conversation's Access (views/access.js, public/access.js), Google Docs' "You can view" ====
   The site's one dialog; two parts, You gave <them> and <They> gave you, each the details dialog's rows (the app's mark, its
   name over what and until when, the owner's ⋯ at the right) or one line, Nothing shared. */
.ax-part + .ax-part { margin-top: 24px; }
.ax-h { margin: 0 0 12px; font: 600 var(--text-base)/var(--lh-base) var(--font); overflow-wrap: anywhere; }
.ax-empty { margin: 0; color: var(--muted); font: var(--level-body); }
.ax-rows .grant-ico { vertical-align: -2px; margin-right: 6px; } /* views/notes.js writeIcon, the permission card's pencil */

/* ---- the Agent page ---- */
/* Memory: the folders General and People; a folder's name, then its count, then the triangle (taste: name first); the label
   changes its words' colour under the pointer and has no ground; closed, the triangle points right */
.mem-folder:focus-visible { outline: 2px solid var(--c-text); outline-offset: -2px; }
.mem-folder.is-closed .mem-chev { transform: rotate(-90deg); }
.mem-list > li[hidden] { display: none; }
.mem-who { grid-column: 2 / 4; grid-row: 2; min-width: 0; margin-top: 2px; font: var(--level-meta); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mem-nobody { color: var(--c-text-2); }

/* Permissions: the connected apps only; Connect more apps at the foot */
.ag-more-apps { margin-top: var(--sp-4); }
.ag-catalog-search { width: 100%; }
.ag-catalog-list { margin: 16px -12px 0; padding: 0; list-style: none; max-height: 360px; overflow-y: auto; overscroll-behavior: contain; }
.ag-catalog-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px; align-items: center; margin: 0; padding: 8px 12px; border-radius: 8px; }
.ag-catalog-row:hover { background: var(--bg3); }
.ag-catalog-row form { margin: 0; }
.ag-catalog-line { margin: 0; color: var(--muted); font: var(--level-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ag-catalog-empty { margin: 16px 0 0; color: var(--muted); font: var(--level-body); }
.ag-perms .me-agent-add > .me-add { width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.ag-perms .me-agent-add > .me-add:hover { background: none; }
.ag-perms .me-add:hover .me-add-face { background: var(--bg3); color: var(--fg); }
.ag-perms .me-add-words { color: var(--muted); }
.ag-perms .me-add:hover .me-add-words { color: var(--fg); }
.ag-catalog-row.is-skel { grid-template-columns: 40px minmax(0, 1fr); }