/* WL11 自助建站／AI 建站：在共用網站引擎的 styles.css 之上，加 AI 助手（✦ 按鈕、預估對話框）、銷售頁比較、開始頁點數與升級、
   以及 699「一個輸入窗」（沿用原版 699 的版面：左邊對話、右邊預覽、底部切頁、＋選單、櫻桃助理抽屜）。沒有行內 style、沒有外部字型。 */
:root { --ai: #6B4FD8; --ai-dark: #5639C4; --ai-soft: #F1EDFC; --ai-line: #DDD3FA; --rose: #C2457A; }

/* ── AI 按鈕與點數 ── */
.ai-chip { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--ai-line); background: var(--ai-soft); color: var(--ai-dark); border-radius: 999px; padding: .25em .8em; font: 600 .8rem/1.4 var(--font); cursor: pointer; align-self: flex-start; }
.ai-chip:hover { background: #E7E0FB; }
.field .ai-chip { margin-top: 2px; }
.credit-chip { display: inline-flex; align-items: center; gap: 4px; font-size: .8rem; font-weight: 600; color: var(--ai-dark); background: var(--ai-soft); border-radius: 999px; padding: .15em .7em; margin-right: 6px; }
.ed-site .credit-chip { align-self: flex-start; }
.ed-ai-link { display: block; margin: 0 0 10px; padding: .6em .9em; border-radius: 12px; text-decoration: none; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--ai), #A04FD0); }
.ed-ai-link.is-upsell { background: var(--ai-soft); color: var(--ai-dark); border: 1px dashed var(--ai-line); }
.ai-style { border-top: 1px dashed var(--line); padding-top: 12px; margin: 4px 0 12px; }
.ai-style input { flex: 1; min-width: 180px; }
.ai-dialog { border: 0; border-radius: 20px; padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(29,31,35,.3); }
.ai-dialog::backdrop { background: rgba(29,31,35,.45); }
.ai-dialog-body { padding: 22px 22px 18px; }
.ai-dialog h2 { font-size: 1.15rem; }
.ai-estimate { background: var(--ai-soft); border-radius: 12px; padding: .7em .9em; color: var(--ink-2); font-size: .92rem; min-height: 2.6em; }
.ai-estimate:empty { display: none; }
.ai-estimate.is-error, .is-error { color: var(--danger); }
.ai-estimate.is-error { background: var(--danger-soft); }
.ai-estimate a { color: inherit; font-weight: 700; }
.ai-result { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; white-space: pre-wrap; max-height: 40vh; overflow: auto; margin-bottom: 12px; }
.ai-result img { border-radius: 10px; }
.ai-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.readiness { background: var(--warn-soft); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.readiness.is-ok { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.readiness ul { margin: 0; padding-left: 1.2em; font-size: .9rem; }
.readiness .ready-info { color: var(--muted); }

/* ── 銷售頁、開始頁 ── */
.ai-mock { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 14px; padding: 0; align-items: start; }
.mock-chat { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); font-size: .78rem; }
.mock-chat p { margin: 0; padding: 8px 10px; border-radius: 12px; line-height: 1.5; }
.mock-ai { background: var(--line-2); }
.mock-me { background: var(--ai); color: #fff; }
.mock-input { display: flex; justify-content: space-between; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; color: var(--muted); }
.mock-input b { background: var(--ai); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; }
.mock-rose .mock-logo, .mock-rose .mock-btn { background: var(--rose); }
.mock-rose .mock-hero small { color: var(--rose); }
.mock-rose .mock-hero b { color: #43223A; }
.plans .plan-grid .plan-card { max-width: none; margin: 0; }
.plan-card.is-featured { border-color: var(--ai); }
.plan-card.is-featured .plan-ribbon { background: var(--ai); }
.ai-costs, .upgrade-note { max-width: 820px; margin: 32px auto 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.ai-costs h3, .upgrade-note h3 { font-size: 1.12rem; margin-bottom: .3em; }
.ai-costs ul { list-style: none; padding: 0; margin: 12px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; }
.ai-costs li { display: flex; align-items: center; gap: 8px; background: var(--ai-soft); border-radius: 12px; padding: .55em .9em; }
.ai-costs li span { flex: 1; }
.ai-costs li b { color: var(--ai-dark); }
.ai-costs li small { font-size: .7rem; font-weight: 700; color: #fff; background: var(--ai); border-radius: 999px; padding: 0 .5em; }
.upgrade-note { background: var(--ai-soft); border-color: var(--ai-line); }
.upgrade-note p { margin: 0; }
.start-credits, .start-upgrade { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 22px; margin-top: 16px; }
.start-credits h2, .start-upgrade h2 { font-size: 1.05rem; }
.start-credits strong { font-size: 1.6rem; color: var(--ai-dark); }
.start-upgrade { border-color: var(--ai-line); background: var(--ai-soft); }

/* ── 699 一個輸入窗 ── */
.is-app { background: #FBFAFE; }
.app-strip { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 6px 16px; padding: 6px 16px; font-size: .78rem; color: var(--ink-2); background: linear-gradient(90deg, #FFF1E6, #F6EEFF); border-bottom: 1px solid var(--line-2); }
.strip-dot { width: 10px; height: 10px; border-radius: 50%; background: #F08A3C; box-shadow: 0 0 0 4px #FDE3CF; }
.app-head { display: flex; align-items: center; gap: 12px; padding: 10px 24px; background: var(--surface); border-bottom: 1px solid var(--line-2); }
.app-brand .brand-logo { height: 40px; width: auto; }
.save-state { margin-left: auto; font-size: .85rem; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.save-state i { width: 8px; height: 8px; border-radius: 50%; background: #3FB46A; }
.help-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; background: var(--ai-soft); color: var(--ink); border-radius: 999px; padding: .45em 1em .45em .45em; font: 700 .95rem var(--font); cursor: pointer; }
.help-btn span { width: 28px; height: 28px; border-radius: 50%; background: var(--rose); color: #fff; display: grid; place-items: center; font-size: .8rem; }
.app { display: grid; grid-template-columns: minmax(340px, 40%) minmax(0, 1fr); height: calc(100vh - 92px); min-height: 560px; }
.chat { display: flex; flex-direction: column; padding: 22px 26px 12px; border-right: 1px solid var(--line-2); background: linear-gradient(180deg, #fff, #FCFBFF); min-height: 0; }
.chat-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.chat-head .eyebrow { color: var(--ai); letter-spacing: .08em; }
.chat-head h1 { font-size: 1.8rem; margin: 0; }
.icon-round { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: #fff; font-size: 1.05rem; cursor: pointer; display: grid; place-items: center; color: var(--ink-2); }
.icon-round:hover { background: var(--ai-soft); }
.icon-round:disabled { opacity: .4; cursor: not-allowed; }
.icon-round.is-on { background: var(--danger); color: #fff; border-color: var(--danger); }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 18px 2px; margin-top: 10px; min-height: 0; border-top: 1px solid var(--line-2); }
.msg-row { display: flex; align-items: flex-start; gap: 10px; }
.msg-row.is-me { justify-content: flex-end; }
.avatar { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--ai); color: #fff; font-size: .8rem; font-weight: 700; display: grid; place-items: center; overflow: hidden; }
.avatar .avatar-mark { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.avatar.me { background: var(--ai-soft); color: var(--ai-dark); }
.bubble { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px 16px; max-width: 88%; box-shadow: 0 1px 2px rgba(29,31,35,.04); }
.bubble h2 { font-size: 1rem; margin-bottom: .3em; }
.bubble p { margin: 0 0 .4em; color: var(--ink-2); font-size: .94rem; }
.bubble p:last-child { margin-bottom: 0; }
.bubble.me { background: linear-gradient(135deg, var(--ai), #7D55E0); border: 0; color: #fff; }
.bubble.me p { color: #fff; }
.is-estimate .bubble { border-color: var(--ai-line); background: var(--ai-soft); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tags span { font-size: .75rem; font-weight: 700; background: var(--ai-soft); color: var(--ai-dark); border-radius: 999px; padding: .1em .7em; }
.starters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px !important; }
.starter { border: 1px solid var(--ai-line); background: var(--ai-soft); color: var(--ai-dark); border-radius: 999px; padding: .35em .9em; font: 600 .85rem var(--font); cursor: pointer; }
.confirm-row { display: flex; gap: 8px; flex-wrap: wrap; }
.composer { position: relative; border: 1px solid var(--line); border-radius: 18px; background: #fff; padding: 12px 12px 10px; box-shadow: 0 8px 24px rgba(107,79,216,.08); }
.composer textarea { width: 100%; border: 0; resize: none; font: inherit; font-size: 1rem; outline: none; padding: 4px 6px; min-height: 64px; }
.composer:focus-within { border-color: var(--ai); box-shadow: 0 0 0 3px var(--ai-soft); }
.composer-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.regen-btn { border: 1px solid var(--ai-line); background: #fff; color: var(--ink); border-radius: 999px; padding: 6px 12px; font: 600 .8rem/1.2 var(--font); cursor: pointer; }
.regen-btn[aria-pressed="true"] { background: var(--ai); border-color: var(--ai); color: #fff; }
.pkg-opt { display: flex; gap: 8px; align-items: flex-start; font-weight: 600; font-size: .92rem; margin: 6px 0; cursor: pointer; }
.pkg-opt input { margin-top: 4px; flex-shrink: 0; }
.pkg-note { color: var(--warn, #A86A12); font-size: .9rem; }
.composer-hint { margin-left: auto; color: var(--muted); font-size: .76rem; text-align: right; }
.composer-send { background: var(--ai); border-color: var(--ai); }
.composer-send:hover { background: var(--ai-dark); }
.composer-send span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #fff; color: var(--ai); margin-left: 4px; font-weight: 800; }
.composer-foot { text-align: center; color: var(--muted); font-size: .74rem; margin: 6px 0 0; }
.plus-menu { position: absolute; left: 10px; bottom: calc(100% + 8px); z-index: 20; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 20px 50px rgba(29,31,35,.18); padding: 6px; width: min(340px, calc(100vw - 48px)); display: flex; flex-direction: column; }
.plus-menu > * { display: flex; flex-direction: column; text-align: left; border: 0; background: none; padding: 10px 12px; border-radius: 12px; cursor: pointer; text-decoration: none; font: inherit; color: var(--ink); }
.plus-menu > *:hover { background: var(--ai-soft); }
.plus-menu small { color: var(--muted); font-size: .78rem; }
.plus-menu [aria-disabled="true"] b { color: var(--muted); }
.stage { display: flex; flex-direction: column; background: #EFEDF5; min-width: 0; min-height: 0; }
.stage-bar { display: flex; align-items: center; gap: 12px; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--line-2); flex-wrap: wrap; }
.live-dot { display: inline-flex; align-items: center; gap: 6px; background: var(--ok-soft); color: var(--ok); font-size: .75rem; font-weight: 700; border-radius: 999px; padding: .2em .8em; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.stage-title { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.stage-title small { color: var(--muted); font-size: .76rem; }
.stage-tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tool { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: .4em .8em; font: 600 .8rem var(--font); cursor: pointer; color: var(--ink-2); }
.tool:hover { background: var(--ai-soft); }
.stage .seg { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff; }
.stage-frame { flex: 1; padding: 20px; display: flex; justify-content: center; min-height: 0; overflow: auto; }
.browser { position: relative; overflow: hidden; width: 100%; height: 100%; min-height: 480px; background: #fff; border-radius: 16px; border: 1px solid var(--line); box-shadow: 0 20px 50px rgba(29,31,35,.08); overflow: hidden; display: flex; flex-direction: column; }
.browser-bar { display: flex; align-items: center; gap: 6px; padding: 9px 14px; border-bottom: 1px solid var(--line-2); }
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #F2A49F; }
.browser-bar i:nth-child(2) { background: #F3D28A; }
.browser-bar i:nth-child(3) { background: #9FD3A9; }
.browser-bar span { flex: 1; margin-left: 10px; background: var(--line-2); border-radius: 999px; font-size: .72rem; color: var(--muted); text-align: center; padding: 3px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser iframe { flex: 1; width: 100%; border: 0; display: block; }
.stage-frame[data-device-frame="mobile"] .browser { width: 390px; max-width: 100%; border-radius: 34px; border: 10px solid var(--ink); }
.stage-frame[data-device-frame="mobile"] .browser-bar { display: none; }
.stage.is-working .browser { opacity: .55; transition: opacity .3s; }
.preview-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 32px; background: radial-gradient(circle at 50% 40%, #F6F1FF, #fff 60%); }
.preview-empty h2 { font-size: 2rem; margin: 4px 0 8px; }
.preview-empty p { color: var(--muted); max-width: 460px; }
.preview-empty .eyebrow { color: var(--ai); }
.empty-icon { width: 64px; height: 64px; border-radius: 18px; background: linear-gradient(135deg, #FFF3E8, #F1EDFC); color: var(--ai); font-size: 1.6rem; display: grid; place-items: center; transform: rotate(6deg); box-shadow: var(--shadow); margin-bottom: 14px; }
.flow { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; }
.flow span { border: 1px solid var(--line); border-radius: 999px; padding: .2em .8em; background: #fff; }
.stage-foot { display: flex; align-items: center; gap: 10px; padding: 8px 20px; background: #fff; border-top: 1px solid var(--line-2); }
.page-tabs { display: flex; gap: 4px; overflow-x: auto; flex: 1; scrollbar-width: thin; }
.page-tab { border: 0; background: none; padding: .35em .8em; border-radius: 8px; font: 600 .82rem var(--font); cursor: pointer; white-space: nowrap; color: var(--ink-2); }
.page-tab[aria-current="page"] { background: var(--ai-soft); color: var(--ai-dark); }
.stage-foot-tools { display: flex; gap: 6px; flex: none; }
.sheet, .drawer { border: 0; padding: 22px; border-radius: 20px; width: min(560px, calc(100vw - 32px)); box-shadow: 0 30px 80px rgba(29,31,35,.3); }
.sheet::backdrop, .drawer::backdrop { background: rgba(29,31,35,.45); }
.drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; border-radius: 20px 0 0 20px; width: min(420px, 100vw); overflow-y: auto; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 10px; }
.sheet-head h2 { margin: 0; font-size: 1.2rem; }
.sheet-actions { display: flex; justify-content: flex-end; margin-top: 12px; }
.pm-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 6px; }
.pm-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto auto auto; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; }
.pm-list input { border: 1px solid transparent; border-radius: 8px; padding: .3em .5em; font: 600 .95rem var(--font); min-width: 0; }
.pm-list input:hover, .pm-list input:focus { border-color: var(--line); }
.pm-list small { color: var(--muted); font-size: .75rem; }
.ready-sum { background: var(--ai-soft); border-radius: 12px; padding: .7em .9em; font-weight: 600; }
.ready-sum.is-ok { background: var(--ok-soft); color: var(--ok); }
.ready-list { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.ready-list li { border-left: 3px solid #E5B36A; background: #FFF8EC; border-radius: 10px; padding: 8px 12px; display: flex; flex-direction: column; font-size: .9rem; }
.ready-list li b { font-size: .75rem; color: var(--warn); }
.ready-list .ready-info { border-left-color: #B9C3D6; background: #F6F8FB; }
.ready-list .ready-info b { color: var(--muted); }
.caps { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.caps li { display: flex; justify-content: space-between; gap: 10px; border-radius: 10px; padding: 8px 12px; font-size: .9rem; }
.caps li span { color: var(--muted); font-size: .82rem; text-align: right; }
.cap-on { background: var(--ok-soft); }
.cap-on b::before { content: "✓ "; color: var(--ok); }
.cap-soon { background: var(--line-2); }
.cap-soon b::before { content: "… "; color: var(--muted); }
.howto { padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; color: var(--ink-2); }
.drawer details { border-top: 1px solid var(--line-2); padding: 10px 0; }
.drawer summary { font-weight: 700; cursor: pointer; }
.sheet .publish-card { border: 0; padding: 0; box-shadow: none; }

@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; height: auto; }
  .chat { border-right: 0; padding: 16px 16px 10px; min-height: 0; }
  .chat-head h1 { font-size: 1.4rem; }
  .chat-log { max-height: 46vh; min-height: 140px; }
  .stage-frame { padding: 12px; }
  .browser { min-height: 70vh; }
  .stage-bar { padding: 10px 16px; }
  .stage-tools { margin-left: 0; width: 100%; }
  .app-head { padding: 8px 16px; flex-wrap: wrap; }
  .app-brand .brand-logo { height: 32px; }
  .help-btn { font-size: .85rem; }
  .ai-mock { grid-template-columns: 1fr; }
  .mock-chat { order: 2; }
}
@media (max-width: 768px) { .plans .plan-grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .save-state { display: none; }
  .app-head .btn-ghost { margin-left: auto; }
  .composer-hint { display: none; }
  .composer-send { margin-left: auto; }
  .stage-foot { flex-wrap: wrap; padding: 8px 12px; }
  .pm-list li { grid-template-columns: 24px minmax(0, 1fr) auto auto auto; }
  .pm-list li small:first-of-type { display: none; }
}
/* 手機：側邊選單變成橫向一排時，AI 入口不要被擠成直排 */
@media (max-width: 768px) { .ed-side .ed-ai-link { flex: none; white-space: nowrap; margin: 0; padding: .45em .8em; font-size: .85rem; } }