@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");
/* Little Lace（Archangel 工作台）样式：全部限定在 .archangel-app 下面 */
.archangel-app{position:relative;width:100%;height:100%;overflow:hidden}
.archangel-app {--ease:cubic-bezier(.22,.61,.36,1);--sw:320px}
.archangel-app, .archangel-app * {box-sizing:border-box}
.archangel-app {width:100%;height:100%;min-height:100%;margin:0;background:#f4f6f9;touch-action:pan-x pan-y}
.archangel-app {width:100%;height:100%;min-height:100%;margin:0;overflow:hidden;color:#3e454e;font:15px/1.6 Inter,"Segoe UI","Microsoft YaHei",Arial,sans-serif;background-color:#f4f6f9;background-image:linear-gradient(rgba(255,255,255,.76),rgba(244,246,249,.86)),url("../assets/背景/bb背景.png");background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;touch-action:pan-x pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.archangel-app input, .archangel-app [contenteditable=true] {-webkit-user-select:text;user-select:text}
.archangel-app .app {position:relative;width:100%;height:100vh;height:100dvh;min-height:100%;display:grid;grid-template-rows:calc(68px + env(safe-area-inset-top,0px)) 1fr calc(72px + env(safe-area-inset-bottom,0px));padding:0;background:transparent;animation:ar-fade .38s ease both}
.archangel-app .av {width:100%;height:100%;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:linear-gradient(145deg,#f3f5f8,#d3dae4);color:#6b7580;overflow:hidden}
.archangel-app .av img {width:100%;height:100%;object-fit:cover;display:block}
.archangel-app .ai .av {background:linear-gradient(145deg,#6b727c,#23272d);color:#f3f5f8}
.archangel-app .top {position:relative;height:calc(68px + env(safe-area-inset-top,0px));min-height:calc(68px + env(safe-area-inset-top,0px));width:100%;display:flex;align-items:center;justify-content:center;padding:env(safe-area-inset-top,0px) 0 0;border-bottom:1px solid rgba(220,225,232,.72);background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(244,248,253,.56));backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:60}
.archangel-app .title {margin:0;padding:0;text-align:center;color:#68737f;font-family:"Great Vibes","Snell Roundhand",cursive,sans-serif;font-size:34px;font-weight:400;line-height:1;text-shadow:0 1px 2px rgba(255,255,255,.9),0 4px 12px rgba(125,135,149,.15);pointer-events:none}
.archangel-app #ar-menu {position:absolute;left:16px;width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.86);border-radius:50%;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(218,224,232,.54));box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 12px 26px rgba(125,135,149,.22);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);color:#727c87;transition:opacity .22s ease,transform .22s ease}
.archangel-app #ar-menu:hover {opacity:.82;transform:translateY(-1px)}
.archangel-app .main {position:relative;min-height:0;display:grid;grid-template-columns:var(--sw) 1fr;overflow:hidden;transition:grid-template-columns .34s var(--ease)}
.archangel-app .main.collapsed {grid-template-columns:0 1fr}
.archangel-app #ar-side {min-width:0;overflow:hidden;border-right:1px solid rgba(208,215,224,.7);background:rgba(255,255,255,.62);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);z-index:80;transition:border-color .34s,visibility 0s linear 0s}
.archangel-app #ar-side.closed {visibility:hidden;border-color:transparent;transition:border-color .34s,visibility 0s linear .34s}
.archangel-app .sin {width:var(--sw);padding:calc(16px + env(safe-area-inset-top,0px)) 16px 16px;height:100%;overflow-y:auto;transition:opacity .3s,transform .34s var(--ease)}
.archangel-app #ar-side.closed .sin {opacity:0;transform:translateX(-18px)}
.archangel-app .sin h3 {margin:18px 0 10px;font-size:13px;font-weight:700;color:#68727d;text-align:center;letter-spacing:.04em}
.archangel-app .sin h3:first-child {margin-top:0}
.archangel-app .sin label {display:flex;flex-direction:column;gap:5px;margin-bottom:12px;font-size:12px;font-weight:600;color:#7a838d}
.archangel-app .sin label>span {display:inline-block;padding-left:30px}
.archangel-app .sin input, .archangel-app .sin select {display:block;width:100%;height:38px;padding:0 14px;font-size:13px;color:#414951;border:1px solid rgba(205,212,222,.75);border-radius:20px;outline:0;background:rgba(255,255,255,.8);box-shadow:inset 0 1px 2px rgba(160,170,185,.08);transition:border-color .2s ease,background .2s ease}
.archangel-app .sin input:focus, .archangel-app .sin select:focus {border-color:#a2afbf;background:#fff}
.archangel-app .sin .row {display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.archangel-app .sin button {height:36px;padding:0 14px;border:1px solid rgba(205,212,222,.8);border-radius:20px;color:#5d6670;font-size:13px;font-weight:600;white-space:nowrap;background:rgba(255,255,255,.82);box-shadow:0 3px 8px rgba(140,150,165,.1);transition:all .2s ease}
.archangel-app .sin button:hover {background:#fff;transform:translateY(-1px);box-shadow:0 5px 12px rgba(140,150,165,.18)}
.archangel-app .sin .full {width:100%}
.archangel-app .sin small {display:block;text-align:center;font-size:11px;color:#9aa2ac;margin-top:4px}
.archangel-app .history-title {margin:14px 0 8px;padding-left:15px;color:#7a838d;font-size:11px;font-weight:600;text-align:left}
.archangel-app .history-list {display:grid;gap:7px;max-height:190px;overflow-y:auto;padding:0 2px}
.archangel-app .history-item {width:100%;min-height:36px;padding:0 13px;overflow:hidden;color:#68727d;text-align:left;text-overflow:ellipsis;white-space:nowrap;border:1px solid rgba(205,212,222,.72);border-radius:18px;background:rgba(255,255,255,.52);transition:background .2s ease,border-color .2s ease,transform .2s ease}
.archangel-app .history-item:hover {background:rgba(255,255,255,.86);border-color:rgba(160,172,187,.82);transform:translateY(-1px)}
.archangel-app .history-empty {padding:5px 15px;color:#a1a9b3;font-size:11px;text-align:left}
.archangel-app .abody {white-space:pre-wrap;word-break:break-word}
.archangel-app .think p {white-space:pre-wrap}
.archangel-app .step.fail .dot circle {animation:none;stroke:#c4002b}
.archangel-app #ar-chat {min-height:0;overflow-y:auto;padding:18px 24px}
.archangel-app .hint {margin:0 auto 16px;max-width:520px;text-align:center;font-size:12px;color:#8a929c}
.archangel-app .enter {animation:ar-fade .4s ease both}
.archangel-app .head {width:56px;display:flex;flex-direction:column;align-items:center}
.archangel-app .frame {width:56px;height:56px;padding:3px;border-radius:50%;background:linear-gradient(145deg,#fff,#c4cdd9 55%,#fff);box-shadow:0 0 0 1px rgba(255,255,255,.9),0 10px 22px rgba(120,130,145,.22)}
.archangel-app .av {width:100%;height:100%;display:grid;place-items:center;border-radius:50%;border:2px solid rgba(255,255,255,.9);background:linear-gradient(145deg,#f3f5f8,#d3dae4);color:#6b7580}
.archangel-app .ai .av {background:linear-gradient(145deg,#6b727c,#23272d);color:#f3f5f8}
.archangel-app .pill {position:relative;z-index:1;margin-top:-13px;padding:2px 11px;font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap;color:rgba(88,98,108,.92);border:1px solid rgba(255,255,255,.7);border-radius:99px;background:rgba(255,255,255,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.archangel-app .urow {display:flex;justify-content:flex-end;margin-bottom:18px}
.archangel-app .ucol {position:relative;min-width:min(230px,82%);max-width:min(620px,82%);display:flex;flex-direction:column;align-items:flex-end}
.archangel-app .ubody {margin:6px 44px 0 0;display:flex;flex-direction:column;align-items:flex-end}
.archangel-app .b1 {position:relative;max-width:100%}
.archangel-app .bubble.more {margin-top:3px}
.archangel-app .elbow {position:absolute;right:-16px;top:-6px;width:16px;height:calc(50% + 6px);border:1.5px solid #aab3bf;border-width:0 1.5px 1.5px 0;border-bottom-right-radius:9px}
.archangel-app .bubble {padding:6px 16px;white-space:pre-wrap;word-break:break-word;border:1px solid rgba(213,219,227,.8);border-radius:20px;background:rgba(248,249,251,.9);box-shadow:0 8px 22px rgba(145,153,166,.14)}
.archangel-app .pending .bubble {border-style:dashed}
.archangel-app .arow {position:relative;max-width:min(720px,94%);margin-bottom:22px}
.archangel-app .step {display:flex;align-items:center;height:30px;font-size:14px;color:#8a929c}
.archangel-app .step svg {flex:none}
.archangel-app .step .ic {width:24px;height:24px;padding:4px;margin-right:9px;border-radius:8px;background:#fff;box-shadow:0 2px 6px rgba(130,140,155,.16);fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:#aab3bf;transition:all .3s}
.archangel-app .step.done .ic {color:#4a525c}
.archangel-app .ic .f {fill:currentColor;fill-opacity:.18;stroke:none}
.archangel-app .step .dot line {stroke:#aab3bf;stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;animation:ar-draw .5s .1s forwards}
.archangel-app .step .dot circle {fill:#fff;stroke:#aab3bf;stroke-width:1.5;animation:ar-pulse 1s infinite}
.archangel-app .step.done {color:#5d6670}
.archangel-app .step.done .dot circle {fill:#4a5058;stroke:#4a5058;animation:none}
.archangel-app .ahead {display:flex;align-items:flex-start;gap:14px}
.archangel-app .think {margin:21px 0 0;color:#7b838d}
.archangel-app .think summary {cursor:pointer;width:max-content;list-style:none;font:400 26px/1.2 "Great Vibes","Snell Roundhand",cursive;color:#6b7682}
.archangel-app .think summary::-webkit-details-marker {display:none}
.archangel-app .think p {max-width:min(480px,calc(100vw - 140px));margin:6px 0 0;padding:8px 12px;font-size:13px;border-left:2px solid #c4ccd7;background:rgba(255,255,255,.5);border-radius:0 8px 8px 0}
.archangel-app .abody {margin:4px 0 10px 56px;padding:6px 16px;font-size:13px;line-height:1.55;border:1px solid rgba(213,219,227,.76);border-radius:20px;background:rgba(255,255,255,.64);box-shadow:0 8px 24px rgba(145,153,166,.12)}
.archangel-app .cards {margin:0 0 12px 56px;display:grid;gap:3px}
.archangel-app .card {width:100%;display:flex;align-items:center;gap:10px;padding:5px 14px;text-align:left;border:1px solid #e3e7ee;border-radius:16px;background:#fff;box-shadow:0 4px 12px rgba(130,140,155,.1);transition:box-shadow .2s}
.archangel-app .card:hover {box-shadow:0 8px 18px rgba(130,140,155,.2)}
.archangel-app .card b {max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;color:#3e454e}
.archangel-app .card em {flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-size:12px;color:#8a929c}
.archangel-app .card i {flex:none;white-space:nowrap;font-style:normal;font-size:12px;padding:0 10px;border-radius:99px;color:#c4002b;background:#ffe1e6}
.archangel-app .fitem.ok i {color:#007a33;background:#d9fbe5}
.archangel-app .fdiff {display:grid;grid-template-rows:0fr;transition:grid-template-rows .32s var(--ease)}
.archangel-app .fitem.open .fdiff {grid-template-rows:1fr}
.archangel-app .fdiff>div {overflow:hidden}
.archangel-app .diff {margin-top:3px;overflow:auto;border:1px solid #e3e7ee;border-radius:14px;background:#fff;font:12px/1.7 Consolas,monospace}
.archangel-app .confirm {max-width:calc(100% - 56px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:56px;height:40px;padding:0 24px;border:0;border-radius:99px;color:#4a525c;font-weight:600;background:rgba(255,255,255,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 18px rgba(130,140,155,.18);transition:background .2s}
.archangel-app .confirm:hover {background:rgba(255,255,255,.7)}
.archangel-app .confirm:disabled {opacity:.6;cursor:default}
.archangel-app .bottom {padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid rgba(220,225,232,.7);background:rgba(255,255,255,.48);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:10}
.archangel-app .comp {--w:52px;position:relative;height:40px}
.archangel-app #ar-prompt {width:calc(100% - var(--w));height:40px;padding:0 calc(var(--w) + 14px) 0 18px;border:0;outline:0;border-radius:99px;color:#414951;background:rgba(255,255,255,.74);box-shadow:0 6px 16px rgba(130,140,155,.1)}
.archangel-app .act {position:absolute;top:0;right:0;height:40px;display:flex;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.42);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 8px 18px rgba(130,140,155,.18)}
.archangel-app .act button {white-space:nowrap;width:var(--w);border:0;background:transparent;color:#5d6670;font-size:13px;font-weight:600;letter-spacing:.06em;transition:background .2s}
.archangel-app .act button:hover {background:rgba(255,255,255,.55)}
.archangel-app .act span {width:1px;margin:10px 0;background:rgba(93,102,112,.28)}
.archangel-app .ln {display:flex;color:#9aa2ac;white-space:pre}
.archangel-app .ln span {flex:none;width:28px;text-align:center}
.archangel-app .ln code {padding-right:14px}
.archangel-app .ln.del {color:#c4002b;background:#ffe1e6;box-shadow:inset 3px 0 #ff2d55;font-weight:600}
.archangel-app .ln.add {color:#007a33;background:#d4fbe2;box-shadow:inset 3px 0 #00c853;font-weight:600}
.archangel-app #ar-toast {position:fixed;left:50%;top:14px;z-index:90;max-width:min(420px,calc(100vw - 140px));padding:7px 18px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;border-radius:99px;background:rgba(255,255,255,.92);box-shadow:0 10px 28px rgba(130,140,153,.22);opacity:0;pointer-events:none;transform:translateX(-50%)}
.archangel-app #ar-toast.show {animation:ar-toast 2.4s both}
.archangel-app .mask {flex-wrap:wrap;padding:6px;position:absolute;inset:-4px;z-index:5;display:flex;align-items:center;justify-content:center;gap:10px;border-radius:18px;background:rgba(236,240,245,.7);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);animation:ar-fade .25s both}
.archangel-app .mask button, .archangel-app #ar-selbar button {flex:none;white-space:nowrap;height:34px;padding:0 16px;border:0;border-radius:99px;color:#5d6670;font-weight:600;background:rgba(255,255,255,.8);box-shadow:0 6px 14px rgba(130,140,155,.2)}
.archangel-app #ar-chat {-webkit-touch-callout:none}
.archangel-app.sel .urow, .archangel-app.sel .arow {position:relative;padding-left:30px;cursor:pointer}
.archangel-app.sel .urow::before, .archangel-app.sel .arow::before {content:"";position:absolute;left:0;top:10px;width:20px;height:20px;border-radius:50%;border:1.5px solid #aab3bf;background:rgba(255,255,255,.85)}
.archangel-app .picked::before {background:#5d6670!important;border-color:#5d6670!important;box-shadow:inset 0 0 0 4px #fff}
.archangel-app #ar-selbar {position:fixed;left:0;right:0;bottom:0;height:72px;z-index:30;display:none;align-items:center;justify-content:space-between;padding:0 28px;font-size:13px;color:#6d7680;background:rgba(255,255,255,.72);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:1px solid rgba(220,225,232,.7)}
.archangel-app.sel #ar-selbar {display:flex;animation:ar-fade .3s}
.archangel-app #ar-selbar button {margin-left:8px}
.archangel-app #ar-seldel {color:#c4002b!important}
.archangel-app .editing .bubble {outline:2px solid #aab3bf;outline-offset:1px;background:#fff}
.archangel-app .edone {white-space:nowrap;margin:6px 44px 0 0;height:28px;padding:0 16px;border:0;border-radius:99px;color:#5d6670;font-size:13px;font-weight:600;background:rgba(255,255,255,.8);box-shadow:0 6px 14px rgba(130,140,155,.2)}
.archangel-app .sidebar-backdrop {display:none}
@media(max-width:900px) {
.archangel-app .sidebar-backdrop {display:block;position:fixed;inset:0;background:rgba(0,0,0,.22);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:85;opacity:1;visibility:visible;transition:opacity .3s ease,visibility .3s ease}
.archangel-app .sidebar-backdrop.closed {opacity:0;visibility:hidden;pointer-events:none}
}
.archangel-app .lace-frame {position:fixed;inset:9px;pointer-events:none!important;border:1px solid rgba(255,255,255,.88);border-radius:8px;z-index:15}
.archangel-app .lace-frame::before {content:"";position:absolute;inset:5px;pointer-events:none!important;border:9px solid transparent;border-radius:8px;background:radial-gradient(circle at 8px 8px,rgba(255,255,255,.94) 0 3px,transparent 3.5px) 0 0/16px 16px,linear-gradient(rgba(255,255,255,.48),rgba(255,255,255,.48)) padding-box;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;padding:9px}
@keyframes ar-fade {from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes ar-shine {50%{background-position:100% 50%}}
@keyframes ar-draw {to{stroke-dashoffset:0}}
@keyframes ar-pulse {50%{stroke:#4a5058}}
@keyframes ar-toast {0%{opacity:0}15%,82%{opacity:1}100%{opacity:0}}
@media(max-width:900px) {
.archangel-app .main, .archangel-app .main.collapsed {grid-template-columns:1fr}
.archangel-app #ar-side {position:fixed;top:0;bottom:0;left:0;width:min(320px,86vw);height:100vh;height:100dvh;z-index:90;background:rgba(255,255,255,.68);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);box-shadow:10px 0 32px rgba(120,130,145,.28);transform:translateX(0);transition:transform .34s var(--ease),visibility 0s linear 0s}
.archangel-app #ar-side.closed {transform:translateX(-100%);transition:transform .34s var(--ease),visibility 0s linear .34s}
.archangel-app .sin {width:100%}
.archangel-app #ar-chat {padding:14px 12px}
}

/* ===== 我的气泡右边的小尾巴（assets/角标/github角标.png）=====
   在这里改位置和大小：
   --tail-w       大小：小尾巴的宽度（px），高度自动按比例缩放；越大越大
   --tail-right   左右：数值越大，尾巴越往气泡里面收；负数往右伸出气泡（现在是 -10px，伸出 10px）
   --tail-bottom  上下：数值越大，尾巴越往上；负数往下伸出气泡底边（现在是 -4px，伸出 4px）
*/
.archangel-app{
  --tail-w: 20px;
  --tail-right: -9px;
  --tail-bottom: 13px;
  --tail-opacity: 0.9;   /* 小尾巴透明度：0 全透明，1 实色；现在是半透明（0.3），想要更深就调大 */
}
.archangel-app .bubble{position:relative}
.archangel-app .tail-img{
  position:absolute; right:var(--tail-right); bottom:var(--tail-bottom);
  width:var(--tail-w); height:auto; pointer-events:none; display:none; opacity:var(--tail-opacity);
}
/* 小尾巴的显示由设置决定：关 / 只第一条 / 每一条；只有我的气泡（.urow）才有 */
.archangel-app[data-tail="first"] .urow .bubble.first .tail-img,
.archangel-app[data-tail="all"] .urow .bubble .tail-img{display:block}

/* ===== 顶栏右上角的设置按钮 ===== */
.archangel-app [hidden]{display:none !important}
.archangel-app #ar-set{
  position:absolute; right:16px; width:44px; height:44px; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.86); border-radius:50%;
  background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(218,224,232,.54));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 12px 26px rgba(125,135,149,.22);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); color:#727c87; cursor:pointer;
}

/* ===== 设置面板 ===== */
.archangel-app .ar-sheet{
  position:absolute; inset:0; z-index:200; display:grid; place-items:center;
  background:rgba(60,66,76,.28); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .22s ease;
}
.archangel-app .ar-sheet-card{
  width:min(330px,88%); padding:18px 18px 16px; border-radius:22px; background:rgba(255,255,255,.94);
  box-shadow:0 18px 40px rgba(60,66,76,.22); display:flex; flex-direction:column; gap:12px; color:#4b535d;
}
.archangel-app .ar-sheet-title{font-size:16px; font-weight:600; text-align:center}
.archangel-app .ar-sec{font-size:11px; color:#8a929c; letter-spacing:.3px}
.archangel-app .ar-seg{display:flex; gap:3px; padding:3px; border-radius:999px; background:#eef1f5}
.archangel-app .ar-seg button{flex:1; border:0; background:transparent; padding:7px 0; border-radius:999px; font-size:12px; font-weight:600; color:#8a929c; cursor:pointer}
.archangel-app .ar-seg button.on{background:#fff; color:#2b3138; box-shadow:0 1px 4px rgba(0,0,0,.12)}
.archangel-app .ar-avrow{display:flex; gap:12px; justify-content:center}
.archangel-app .ar-av{display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; font-size:12px; color:#5b636d}
.archangel-app .ar-av img{width:68px; height:68px; border-radius:50%; object-fit:cover; border:2px solid #fff; box-shadow:0 4px 12px rgba(125,135,149,.25); background:#e6eaf0}
.archangel-app .ar-exit{height:40px; border:0; border-radius:999px; background:#f3eded; color:#b0453c; font-size:14px; font-weight:600; cursor:pointer}
.archangel-app .ar-close{height:40px; border:0; border-radius:999px; background:#eef1f5; color:#4b535d; font-size:14px; cursor:pointer}

/* 设置弹窗渐显（配合 JS 里的 .show 类） */
.archangel-app .ar-sheet.show{opacity:1}

/* 退出 / 关闭：两个按钮挨近一点，整组往下移（移组改 margin-top，间距改 gap） */
.archangel-app .ar-foot{display:flex; flex-direction:column; gap:6px; margin-top:10px}

/* 顶栏花字：颜色接近原来的灰，只在顶部从淡蓝往下渐变到灰（顶部颜色、渐变长度在这里改） */
.archangel-app .title{
  background:linear-gradient(180deg,#9cc3e6 0%,#68737f 45%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
  text-shadow:none; filter:drop-shadow(0 1px 2px rgba(255,255,255,.9));
}

/* ===== 点开应用：只渐显，不上滑（去掉原来 ar-fade 里的 translateY） ===== */
@keyframes ar-open{from{opacity:0}to{opacity:1}}
.archangel-app .app{animation:ar-open .42s ease both}

/* ===== 开场：对面的头像框 + 胶囊 + HI 字样 + 三个胶囊 ===== */
.archangel-app .ar-intro{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  margin:18px auto 22px; animation:ar-open .5s ease both;
}
/* 头像框放大：改 .ar-intro .frame 的 width / height（px） */
.archangel-app .ar-intro .head{width:auto}
.archangel-app .ar-intro .frame{width:84px;height:84px}
/* 「HI, I'm Little Lace」：和头像框下面的胶囊同款 */
.archangel-app .ar-hi{
  margin-top:4px; padding:3px 14px; font-size:12px; font-weight:600; line-height:1.5; white-space:nowrap;
  color:rgba(88,98,108,.92); border:1px solid rgba(255,255,255,.7); border-radius:99px;
  background:rgba(255,255,255,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 6px 16px rgba(125,135,149,.14);
}
/* 小蕾（Little Lace）：淡粉色从下往上渐变（颜色在这里改） */
.archangel-app .ar-name{
  background:linear-gradient(to top,#ec97b8 0%,#f6bfd3 55%,#fde4ee 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent; font-weight:700;
}
/* 三个胶囊平铺 */
.archangel-app .ar-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:8px}
.archangel-app .ar-chip{
  border:1px solid rgba(255,255,255,.86); border-radius:99px; padding:6px 14px; font-size:12px; color:#5b636d; cursor:pointer;
  background:linear-gradient(145deg,rgba(255,255,255,.9),rgba(218,224,232,.5));
  box-shadow:0 6px 16px rgba(125,135,149,.18);
}

/* ===== 气泡字号：比原来小一点（改 font-size 即可） ===== */
.archangel-app .bubble{font-size:13px; line-height:1.55}

/* ===== 模式面板：提示词文本框 / 保存按钮 ===== */
.archangel-app .ar-mode-text{
  width:100%; box-sizing:border-box; resize:none; border:0; border-radius:14px; padding:10px 12px;
  background:#f1f4f8; color:#3e454e; font-size:12px; line-height:1.6; font-family:inherit; outline:none;
}
.archangel-app .ar-mode-text[readonly]{color:#7d8792; background:#eef1f5}
.archangel-app .ar-save{
  height:40px; border:0; border-radius:999px; background:#2b3138; color:#fff; font-size:14px; font-weight:600; cursor:pointer;
}
.archangel-app .ar-save:disabled{background:#c8ced6; color:#f5f7fa; cursor:not-allowed}

/* ===== 治疗天使提示词：锁住 ===== */
.archangel-app .ar-mode-text.locked{cursor:not-allowed; color:#8b939d; background:#e9edf2; opacity:.9}
.archangel-app .ar-lock{vertical-align:-2px; margin-right:2px}

/* ===== 应用里的弹窗：更透明一点 ===== */
.archangel-app .ar-sheet{background:rgba(60,66,76,.12) !important}
.archangel-app .ar-sheet-card{background:rgba(255,255,255,.7) !important}
.archangel-app .mask{background:rgba(236,240,245,.4) !important}

/* ===== 弹窗背景：模糊遮罩变淡（颜色和模糊程度在这里改） ===== */
.archangel-app .ar-sheet{background:rgba(60,66,76,.05) !important; backdrop-filter:blur(1px) !important; -webkit-backdrop-filter:blur(1px) !important}

/* ===== AI 接口：继承设置 API / 单独设置 API（选中是淡粉色） ===== */
.archangel-app #ar-apiSrc{display:flex; gap:6px; margin:6px 0 4px}
.archangel-app #ar-apiSrc button{
  flex:1; padding:6px 8px; border:1px solid #d5dbe3; border-radius:999px; background:#fff;
  font-size:12px; color:#4b535d; cursor:pointer;
}
.archangel-app #ar-apiSrc button.on{background:#f8d3e3; border-color:#f2a8c5; color:#7a3b55}
.archangel-app #ar-apiSrcInfo{display:block; font-size:11px; color:#8a929c; margin-bottom:6px}

/* ===== 对面名字下面：调取计时（秒）和用了多少 tk ===== */
.archangel-app .ar-meta{
  display:flex; flex-direction:column; align-items:center; margin-top:3px;
  font-size:10px; line-height:1.35; color:#8a929c; white-space:nowrap;
}
/* ===== 对面气泡对齐：和思考文字对齐（头像列 56px + 间距 14px = 70px） ===== */
.archangel-app .arow .abody{margin-left:70px}
/* 对面名字下面的计时 / tk：不挤、不被截断 */
.archangel-app .ar-meta{width:max-content; max-width:none; overflow:visible}

/* ===== AI 接口按钮：选中为浅粉色，选中去掉边框（内边距补偿 1px，避免跳动） ===== */
.archangel-app #ar-apiSrc button{padding:6px 8px}
.archangel-app #ar-apiSrc button.on{background:#fcebf3; border:0; padding:7px 9px; color:#8a4a68}

/* ===== 对面气泡位置微调：top 负数 = 往上，left 负数 = 往左（单位 px，改这里；现在 left -10px） ===== */
.archangel-app .arow .abody{position:relative; top:-20px; left:-10px}

/* ===== 顶栏下面的半透明蕾丝花边（扇贝形，用 CSS 画，不需要图片）=====
   height：花边高度（px）  bottom：花边在顶栏下面的位置（负数 = 伸到下面）
   背景里的 14px 7px：一个扇贝的宽和高，想要更密就调小宽度 */
.archangel-app .top::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:7px; z-index:61; pointer-events:none;
  background:
    radial-gradient(circle at 50% 0, rgba(255,255,255,.78) 4.2px, transparent 4.8px) 0 0 / 14px 7px repeat-x,
    radial-gradient(circle at 50% 0, rgba(190,200,212,.55) 5px, transparent 5.6px) 0 0 / 14px 7px repeat-x;
}

/* ===== 底栏顶部的蕾丝花边（扇贝朝上，和顶栏花边同色）===== */
.archangel-app .bottom{position:relative}
.archangel-app .bottom::before{
  content:""; position:absolute; left:0; right:0; top:-7px; height:7px; z-index:61; pointer-events:none;
  background:
    radial-gradient(circle at 50% 100%, rgba(255,255,255,.78) 4.2px, transparent 4.8px) 0 0 / 14px 7px repeat-x,
    radial-gradient(circle at 50% 100%, rgba(190,200,212,.55) 5px, transparent 5.6px) 0 0 / 14px 7px repeat-x;
}

/* ===== 思考步骤：图标只留爱心，没有底色；从第一个最浅到最后一个最深（颜色在这里改） ===== */
.archangel-app .step .ic{background:none !important; box-shadow:none !important; padding:0 !important; border-radius:0 !important}
.archangel-app .steps .step:nth-child(1) .ic{color:#e2e8ef !important}
.archangel-app .steps .step:nth-child(2) .ic{color:#b3bdc9 !important}
.archangel-app .steps .step:nth-child(3) .ic{color:#7a8594 !important}
.archangel-app .steps .step:nth-child(4) .ic{color:#363e48 !important}

/* ===== 模式面板标题：英文花字（天使选择） ===== */
.archangel-app .ar-sheet-title.ar-script{font-size:10.5px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:#8a929c}

/* ===== 思考步骤：处理完自动收起，点“思考过程”再展开 ===== */


/* ===== 提示词：邮票边（四边圆孔），字写在邮票中间 =====
   颜色：background（纸色）；圆孔大小：4px 半径，间距：12px（改下面的 12px / 4px） */
.archangel-app .ar-stamp{
  position:relative; padding:14px 16px 12px; background:#fbfaf6; border-radius:4px;
  box-shadow:0 6px 16px rgba(120,130,145,.14);
  -webkit-mask:
    radial-gradient(circle 4px at 6px 0, #0000 98%, #000) 0 0 / 12px 100% repeat-x,
    radial-gradient(circle 4px at 6px 100%, #0000 98%, #000) 0 0 / 12px 100% repeat-x,
    radial-gradient(circle 4px at 0 6px, #0000 98%, #000) 0 0 / 100% 12px repeat-y,
    radial-gradient(circle 4px at 100% 6px, #0000 98%, #000) 0 0 / 100% 12px repeat-y;
          mask:
    radial-gradient(circle 4px at 6px 0, #0000 98%, #000) 0 0 / 12px 100% repeat-x,
    radial-gradient(circle 4px at 6px 100%, #0000 98%, #000) 0 0 / 12px 100% repeat-x,
    radial-gradient(circle 4px at 0 6px, #0000 98%, #000) 0 0 / 100% 12px repeat-y,
    radial-gradient(circle 4px at 100% 6px, #0000 98%, #000) 0 0 / 100% 12px repeat-y;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.archangel-app .ar-stamp-label{font-size:10.5px; font-weight:600; letter-spacing:3px; text-transform:uppercase; color:#8a929c; text-align:center; margin-bottom:4px}
.archangel-app .ar-stamp .ar-mode-text{background:transparent; text-align:center; padding:8px 4px; border:0; color:#3e454e}
.archangel-app .ar-stamp .ar-mode-text[readonly]{background:transparent; color:#7d8792}
.archangel-app .ar-stamp .ar-sec{text-align:center}

/* ===== 邮票：纯白实色，纵向缩短（文本框高度、内边距在这里改） ===== */
.archangel-app .ar-stamp{background:#ffffff !important; padding:10px 16px 8px}
.archangel-app .ar-stamp .ar-mode-text{height:80px !important; min-height:0; max-height:80px}

/* ===== 思考过程：默认展开，按钮在思考步骤下面、与步骤左对齐 ===== */


/* ===== 竖线：从第一个圆点连到最后一个圆点，画在圆点和爱心下面 =====
   left：竖线离思维链左边的距离（px，= 圆点列中心 28px）
   width：线的粗细 */
.archangel-app .steps{position:relative}
.archangel-app .steps::before{
  content:""; position:absolute; left:28px; top:15px; bottom:15px; width:1.5px;
  background:#aab3bf; z-index:0; pointer-events:none;
}
.archangel-app .step{position:relative; z-index:1}
.archangel-app .step .dot line{display:none}

/* ===== 对面布局变量（改这里，预览文件里也是这一组）=====
   --ai-head      头像列宽（px）
   --ai-gap       头像和思考文字之间的间距（px）
   --ai-bubble-dx 回复气泡左右偏移（负数往左）
   --ai-bubble-dy 回复气泡上下偏移（负数往上）
   --ai-line-x    竖线离思维链左边的距离（px，= 圆点列中心）
   --ai-line-w    竖线粗细（px）
*/
.archangel-app{
  --ai-head: 56px; --ai-gap: 14px;
  --ai-bubble-dx: -10px; --ai-bubble-dy: -20px;
  --ai-line-x: 42px; --ai-line-w: 1.5px;
}
.archangel-app .arow .abody{
  margin-left: calc(var(--ai-head) + var(--ai-gap));
  position: relative; top: var(--ai-bubble-dy); left: var(--ai-bubble-dx);
}
/* 竖线：从第一个圆点连到最后一个，从上往下画出来 */
@keyframes ar-line-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.archangel-app .steps:empty::before{
  display:none;
}
.archangel-app .steps::before{
  left: var(--ai-line-x); top: -8px; width: var(--ai-line-w);
  transform-origin: top; animation: ar-line-grow .7s ease .1s both;
}
.archangel-app .arow:not(:has(.steps .step)):not(:has(.think)) .abody{
  top: 0;
}

/* ===== 爱心：缩小（改 width / height，px）===== */
.archangel-app .step .ic{width:15px !important; height:15px !important; stroke-dashoffset:18}