/* 功能页右下角的 AI 与发布功能页的页面（web/appai.js，docs/STYLE_PORTAL.md“功能页的 AI 与 /p/ 页”）。
   对话的样子同编辑页右边的对话（app.css 的 .as-* 一套），这里只写抽屉，右下角的键，框选与框选的小块。 */

/* 发布功能页的页面：内容区整块一个框架，同任务同步页 */
.fa-site { display: block; width: 100%; height: 100%; border: 0; background: var(--page); }

/* 右下角的键：黑底白字的胶囊，星标加“AI”，浮起一档；抽屉开着时收起 */
.fa-btn { position: fixed; right: 24px; bottom: 24px; z-index: 30; height: 40px; padding: 0 16px 0 12px; border: 0; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 6px; background: var(--btn-pri); color: var(--on-btn-pri); font-size: 14px; font-weight: 600; letter-spacing: .02em;
  box-shadow: var(--pop-shadow); cursor: pointer; transition: transform var(--t-fast) ease, box-shadow var(--t-fast) ease, background-color var(--t-fast) ease;
  animation: fa-in .28s var(--ease-out) both; }
.fa-btn svg.i { width: 18px; height: 18px; }
.fa-btn:hover:not(:disabled) { background: var(--btn-pri-hover); transform: translateY(-1px); }
.fa-btn:active:not(:disabled) { transform: scale(.96); transition-duration: .06s; }
.fa-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.fa-btn:disabled { background: var(--grey-bg); color: var(--ink4); box-shadow: var(--sh-xs); cursor: not-allowed; }
.fa-btn[hidden] { display: none; }
/* 页面里开着对话框或抽屉，左下角的 AI 助手开着（只读的人在功能页上照旧开浮着的面板）：键让开，不挡它们的按钮 */
body.fa-modal .fa-btn, body.assist-open .fa-btn { opacity: 0; transform: scale(.9); pointer-events: none; }
@keyframes fa-in { from { opacity: 0; transform: translateY(8px) scale(.96); } }

/* 抽屉：同 AI 助手的面板，右边 400px，内容区让位；窄屏盖在上面，手机宽整屏 */
.fa-drawer { position: fixed; top: var(--hd-h); right: 0; bottom: 0; width: var(--as-w); z-index: 26; display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border-left: 1px solid var(--border); border-radius: var(--r-xl) 0 0 var(--r-xl); box-shadow: var(--pop-shadow); }
.fa-drawer:not([hidden]) { animation: as-in var(--t-panel) var(--ease-panel) both; }
.fa-drawer.leaving { pointer-events: none; animation: as-out .2s var(--ease-in) both; }
.fa-drawer.fa-hide { visibility: hidden; }
body.fa-open main { padding-right: var(--as-w); }
.fa-h { gap: 10px; padding: 0 8px 0 16px; }
.fa-h b { flex: 0 1 auto; min-width: 0; font-size: 14px; font-weight: 600; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-h .fa-vis { flex: none; margin-right: auto; }
.fa-h .as-av { margin-top: 0; }
.fa-msgs:empty { background: var(--card); }

/* 自己说的话：框选的那一块的小图在气泡上面 */
.fa-u { align-self: flex-end; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 86%; min-width: 0; }
.fa-u .as-u { max-width: 100%; }
.fa-u-sel { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 12px; color: var(--ink3); }
.fa-u-sel img { display: block; max-width: 220px; max-height: 128px; border-radius: var(--r); border: 1px solid var(--border); background: var(--card); object-fit: contain; }
.fa-note { margin-top: 6px; font-size: 12.5px; line-height: 18px; color: var(--ink3); }

/* 一句改的文件点开：项目文件（web/projfiles.css）盖在功能页的内容区上，抽屉开着时（1280 以上）让出抽屉那一块；收起回到功能页。
   右下角的 AI 键浮在它上面，对比与树的底部多留一段 */
.fa-pf { position: fixed; top: var(--hd-h); left: var(--sd-w); right: 0; bottom: 0; z-index: 24; pointer-events: none;
  transition: left var(--t-panel) var(--ease-panel), right var(--t-panel) var(--ease-panel); }
.fa-pf > .pf { padding: 12px; pointer-events: auto; }
.fa-pf .pf-diff, .fa-pf .pf-sb { padding-bottom: 72px; }
body.fa-open .fa-pf { right: var(--as-w); }

/* 页面里点到别的网站：确认框里写要打开的网址（AF.openLink） */
.fa-link-u { margin: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--th-bg); color: var(--ink);
  font: 13px/20px var(--mono); overflow-wrap: anywhere; word-break: break-all; }

/* 输入框左下：框选键（同 Know-how 键的样子），框好以后换成一块浅蓝的“框选的一块”带小图与小叉 */
.fa-pick { flex: none; height: 26px; padding: 0 8px 0 6px; border: 0; border-radius: var(--r-sm); background: var(--grey-bg); color: var(--ink2);
  display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; cursor: pointer; transition: background-color var(--t-fast) ease, color var(--t-fast) ease; }
.fa-pick svg.i { width: 15px; height: 15px; }
.fa-pick:hover { background: var(--hover2); color: var(--ink); }
.fa-pick.on { background: var(--primary-bg); color: var(--primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 40%, transparent); }
.fa-pick:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.fa-pick[hidden] { display: none; }
.fa-chip { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 6px 0 3px; border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--primary) 40%, transparent); background: var(--primary-bg); color: var(--primary); font-size: 12px;
  animation: pop-in .2s var(--ease-out) both; transform-origin: left center; }
.fa-chip[hidden] { display: none; }
.fa-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-chip > svg.i { width: 15px; height: 15px; margin-left: 3px; flex: none; }
.fa-chip img { flex: none; height: 22px; width: 36px; border-radius: 4px; object-fit: cover; object-position: left top; border: 1px solid var(--border); background: var(--card); }
.fa-spin { flex: none; width: 12px; height: 12px; margin-left: 4px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }

/* 框选：盖在这一页上，十字光标，上面正中一句提示；拖出来的框帆软蓝 2px，框外压暗 */
.fa-sel { position: fixed; z-index: 40; overflow: hidden; cursor: crosshair; background: rgba(16, 24, 40, .04); touch-action: none; user-select: none; }
.fa-sel-tip { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 6px 0 14px;
  border-radius: var(--r); background: var(--btn-pri); color: var(--on-btn-pri); font-size: 13px; box-shadow: var(--pop-shadow); white-space: nowrap; cursor: default;
  animation: fa-in .2s var(--ease-out) both; }
.fa-sel-tip[hidden] { display: none; }
.fa-sel-tip kbd { font: inherit; font-size: 11px; line-height: 16px; padding: 0 5px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .28); opacity: .8; }
:root[data-theme="dark"] .fa-sel-tip kbd { border-color: rgba(0, 0, 0, .24); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fa-sel-tip kbd { border-color: rgba(0, 0, 0, .24); } }
.fa-sel-tip.touch { top: auto; bottom: 16px; left: 12px; right: 12px; transform: none; justify-content: space-between; padding-right: 6px; animation-name: fa-up; }
.fa-sel-tip.touch > span { flex: 1; min-width: 0; text-align: left; }
.fa-sel-x { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: var(--r-sm); background: rgba(255, 255, 255, .16);
  color: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; transition: background-color var(--t-fast) ease; }
.fa-sel-x:hover { background: rgba(255, 255, 255, .24); }
@keyframes fa-up { from { opacity: 0; transform: translateY(8px); } }
:root[data-theme="dark"] .fa-sel-x { background: rgba(0, 0, 0, .08); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fa-sel-x { background: rgba(0, 0, 0, .08); } }
.fa-sel-box { position: absolute; border: 2px solid var(--primary-fill); border-radius: 4px; background: rgba(54, 133, 242, .06); box-shadow: 0 0 0 9999px rgba(16, 24, 40, .22); pointer-events: none; }
.fa-sel-box[hidden] { display: none; }

@media (max-width: 1279px) {
  body.fa-open main { padding-right: 0; }
  body.fa-open .fa-pf { right: 0; }
  .fa-drawer { box-shadow: var(--pop-shadow); }
}
@media (max-width: 640px) {
  .fa-drawer { width: 100%; border-left: 0; border-radius: 0; }
  .fa-btn { right: 16px; bottom: 16px; }
  .fa-pf > .pf { padding: 8px; }
  .fa-sel-tip { height: auto; min-height: 40px; padding: 6px 6px 6px 14px; line-height: 20px; white-space: normal; max-width: none; }
}
@media (prefers-reduced-motion: reduce) { .fa-btn, .fa-sel-tip { animation-duration: .01s; } }

/* 平台有新版任务同步页（11-01 D2）：框上面一条浅主色的提示（同编辑页画布上的提示条），右边小号描边“合并新版”；只在有新版时出，框往下让一条。
   左右与上沿跟框里那一页的内容对齐：那一页宽过 900 时内容离边 28，上 20；窄了 16（web/ts/ts.css 的 .content，appai.js 的 baseNote 量了加 narrow） */
#view:has(> .fa-base) { display: flex; flex-direction: column; }
#view:has(> .fa-base) > .fa-site { flex: 1 1 auto; min-height: 0; height: auto; }
.fa-base { flex: none; display: flex; align-items: center; gap: 8px; margin: 20px 28px 0; min-height: 40px; padding: 5px 6px 5px 12px; font-size: 14px; line-height: 20px;
  color: var(--ink); background: var(--primary-bg); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--card)); border-radius: var(--r-lg);
  animation: fa-in .28s var(--ease-out) both; }
.fa-base.narrow { margin: 16px 16px 0; }
.fa-base > svg.i { flex: none; width: 16px; height: 16px; color: var(--primary); }
.fa-base > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fa-base > .btn { flex: none; }

/* 平台画的确认框（页面里要人确认的写）：上面一句话，下面浅灰底的一块两列，名目灰字，值正文色（appai.js 的 confirmBody） */
.fa-cf { display: flex; flex-direction: column; gap: 12px; }
.dlg .body .fa-cf-p { margin: 0; color: var(--ink2); line-height: 22px; overflow-wrap: anywhere; }
.fa-cf-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 20px; margin: 0; padding: 12px 16px; border-radius: var(--r);
  background: var(--th-bg); border: 1px solid var(--border); font-size: 14px; line-height: 22px; }
.fa-cf-kv > div { display: contents; }
.fa-cf-kv dt { color: var(--ink3); white-space: nowrap; }
.fa-cf-kv dd { margin: 0; min-width: 0; color: var(--ink); overflow-wrap: anywhere; }

/* 合并新版时合不上：上面一句几处合不上，下面整页一起选“保留现在的，用新版的”，分段切换撑满一行，两块一样宽 */
.fa-mg { display: flex; flex-direction: column; gap: 12px; }
.fa-mg-seg { display: flex; width: 100%; }
.fa-mg-seg button { flex: 1 1 0; justify-content: center; height: 32px; font-size: 14px; }
.fa-mg-seg button:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
/* 深色下轨道比卡片亮一档，选中的一块用卡片色就陷下去了：换成比轨道再亮一档，同工具条里的分段切换 */
:root[data-theme="dark"] .fa-mg-seg .on { background: color-mix(in srgb, var(--ink) 18%, var(--card)); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fa-mg-seg .on { background: color-mix(in srgb, var(--ink) 18%, var(--card)); box-shadow: none; } }

/* 平台的对话框开着（确认框，合并新版）：右下角的 AI 键同页面里开着对话框时一样淡出让开，不在遮罩上面抢眼 */
body:has(#dialog.on) .fa-btn { opacity: 0; transform: scale(.9); pointer-events: none; }

/* 编辑页（任务同步那个工作流）画布上方的提示条“平台有新版任务同步页 · 去合并”：用编辑页自己的提示条（.afe-note，web/editor.css），
   位置，底色，高度同放草稿，流程改过那几条；编辑页自己的提示条出来时让给它，同一个位置一次只摆一条（web/app.js 的 tsBaseToast） */
/* 照字数宽（同“AI 改了”那一条），“去合并”是小号描边按钮（同功能页上方那一条的“合并新版”），紧跟在字后面，再后面关闭叉 */
.afe-cv:has(> .afe-note:not(.ts-base-note):not([hidden])) > .ts-base-note { display: none; }
.afe-note.ts-base-note { right: auto; width: max-content; max-width: min(560px, calc(100% - 24px)); padding-right: 4px; }
.ts-base-note .t { flex: 0 1 auto; margin-right: 8px; }
.ts-base-note > svg.i { flex: none; width: 16px; height: 16px; color: var(--primary); }
.afe-note.ts-base-note .afe-btn.sm { height: 28px; padding: 0 10px; font-size: 13px; }
.ts-base-note .afe-ib svg.i { width: 16px; height: 16px; }
/* 手机宽撑满画布的宽（左右各 12），字占剩下的，按钮与关闭叉靠右 */
@media (max-width: 640px) {
  .afe-note.ts-base-note { right: 12px; width: auto; max-width: none; }
  .ts-base-note .t { flex: 1 1 auto; }
}

/* 答复最下面一排链接（11-04）：新页面，在画布上看改动，新窗口打开这一页；平台替它跑一次时写一行在跑（appai.js linksPart） */
.fa-links { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin-top: 10px; min-height: 24px; font-size: 13px; }
.fa-link { display: inline-flex; align-items: center; gap: 5px; color: var(--primary); text-decoration: none; cursor: pointer; }
.fa-link svg.i { width: 15px; height: 15px; fill: currentColor; flex: none; }
.fa-link:hover span { text-decoration: underline; }
.fa-link:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
.fa-link.run { color: var(--ink3); cursor: default; }
.fa-link.run:hover span { text-decoration: none; }