/* ==========================================================================
   访客帮助中心（落地页 / 登录页 / 忘记密码页）
   这两类页面是独立 Blade（不走 layouts/app），所以这里自包含一份「帮助中心壳层」样式。
   视觉与登录后工作台内的帮助中心（feedback.css 里的 .help-dialog 系列）保持一致：
   同一组类名、同一组浅/深色令牌，改一处必须同步 feedback.css，避免两个入口长得不一样。
   仅在访客页面比工作台多出：浮动入口按钮（.help-float）与页面内文字触发器。
   「反馈」面板的表单与按钮样式同样要在这里复制一份：访客页面既不加载 feedback.css，
   也不加载 designer-ui.css / jinshuju-ui.css，.button / .button--primary 在这里没有别的定义处。
   ========================================================================== */

/* 浮动入口：48px 圆形，右下角，可拖动（拖拽逻辑在 guest-help.js） */
.help-float {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 90;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--help-line);
    border-radius: 50%;
    background: var(--help-panel);
    color: var(--help-muted);
    cursor: grab;
    touch-action: none;
    box-shadow: 0 4px 16px #10182826;
    transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}

.help-float:hover { border-color: #bcd4ff; background: var(--help-soft); color: #1d4ed8; }
.help-float:active { cursor: grabbing; }
.help-float:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(37, 99, 235, .18); }
.help-float svg { width: 22px; height: 22px; }

/* 对话框：position:fixed + inset:0 + margin:auto 居中，配合 showModal() 的原生遮罩 */
.help-dialog {
    --help-panel: #fff;
    --help-soft: #f5f8fa;
    --help-line: #dce3e9;
    --help-muted: #5f6b7a;
    position: fixed;
    inset: 0;
    margin: auto;
    width: min(440px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: 0;
    border: 1px solid var(--help-line);
    border-radius: 16px;
    overflow: hidden auto;
    background: var(--help-panel);
    color: #253041;
    box-shadow: 0 12px 36px #10182824;
}

.help-dialog::backdrop { background: #10182866; }
.help-dialog__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 18px; border-bottom: 1px solid var(--help-line); border-radius: 15px 15px 0 0; background: var(--help-soft); }
.help-dialog__header h2 { margin: 0; font-size: 16px; line-height: 24px; font-weight: 700; }
.help-dialog__close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--help-muted); font-size: 24px; line-height: 1; cursor: pointer; }
.help-dialog__close:hover { background: var(--help-line); color: inherit; }

.help-dialog__tabs { display: flex; gap: 16px; padding: 0 18px; border-bottom: 1px solid var(--help-line); }
.help-dialog__tabs button { flex: 0 1 auto; min-width: 0; min-height: 44px; padding: 10px 4px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: inherit; font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; }
.help-dialog__tabs button[aria-selected="true"] { border-bottom-color: #2563eb; color: #175cd3; font-weight: 600; }

.help-dialog [role="tabpanel"] { padding: 8px 18px 18px; }
.help-dialog [hidden] { display: none !important; }

.help-dialog details { border-bottom: 1px solid var(--help-line); }
.help-dialog summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; list-style: none; font-size: 13px; font-weight: 600; line-height: 1.5; cursor: pointer; }
.help-dialog summary::-webkit-details-marker { display: none; }
.help-dialog summary::after { content: ""; flex: none; width: 7px; height: 7px; margin-right: 3px; border-right: 1.5px solid var(--help-muted); border-bottom: 1.5px solid var(--help-muted); transform: rotate(45deg); }
.help-dialog details[open] summary::after { transform: rotate(225deg); }
.help-dialog details p { margin: 0 16px 16px 0; color: var(--help-muted); font-size: 13px; line-height: 1.7; }

/* 「反馈」面板：表单控件与 feedback.css 的 .help-dialog form 系列等价 */
.help-dialog form { display: grid; gap: 12px; padding-top: 10px; }
/* 只作用于直接子级 label，避免串到 .help-dialog__type-options 里的选项 label */
.help-dialog form > label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.help-dialog__type { min-width: 0; margin: 0; padding: 0; border: 0; }
.help-dialog__type legend { margin-bottom: 7px; font-size: 13px; font-weight: 600; }
.help-dialog__type-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.help-dialog__type-options label { position: relative; display: grid; place-items: center; min-height: 36px; border: 1px solid var(--help-line); border-radius: 4px; background: var(--help-soft); color: var(--help-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.help-dialog__type-options label:has(input:checked) { border-color: #2563eb; background: #eff6ff; color: #175cd3; }
.help-dialog__type-options input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.help-dialog form textarea { box-sizing: border-box; width: 100%; min-height: 100px; padding: 9px; border: 1px solid var(--help-line); border-radius: 4px; background: var(--help-panel); color: inherit; font: inherit; line-height: 1.6; resize: vertical; }
.help-dialog form input[type="file"] { width: 100%; min-width: 0; font-size: 12px; font-weight: 400; }
.help-dialog form input[type="file"]::file-selector-button { margin-right: 10px; padding: 7px 10px; border: 1px solid var(--help-line); border-radius: 4px; background: var(--help-soft); color: inherit; cursor: pointer; }
.help-dialog form small { margin-top: -7px; color: var(--help-muted); font-size: 12px; }

/* 提交结果：成功用中性蓝，失败切 [data-state="error"] */
.help-dialog__status { margin: 0; padding: 8px 10px; border-radius: 4px; background: #eff6ff; color: #175cd3; font-size: 12px; line-height: 1.5; }
.help-dialog__status[data-state="error"] { background: #fef3f2; color: #b42318; }

.help-dialog__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--help-line); }
.help-dialog__actions a { color: #175cd3; font-size: 12px; }
.help-dialog__actions--plain { justify-content: flex-start; gap: 14px; margin-top: 14px; padding-top: 0; border-top: 0; }

/* 按钮：访客页面没有全局 .button 定义，这里给一份最小实现 */
.help-dialog .button { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 7px 14px; border: 1px solid var(--help-line); border-radius: 4px; background: var(--help-soft); color: inherit; font-size: 13px; font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; }
.help-dialog .button:hover { border-color: #93c5fd; background: #eff6ff; color: #1d4ed8; }
.help-dialog .button--primary { border-color: #2563eb; background: #2563eb; color: #fff; }
.help-dialog .button--primary:hover { border-color: #1d4ed8; background: #1d4ed8; color: #fff; }
.help-dialog .button:disabled { opacity: .6; cursor: default; }

/* 未登录访客的登录引导 */
.help-dialog__gate { padding-top: 4px; }
.help-dialog__gate p { margin: 0; color: var(--help-muted); font-size: 13px; line-height: 1.75; }

/* 「联系我们」面板 */
.help-dialog [data-ghelp-panel="contact"] { padding-top: 20px; text-align: center; }
.help-dialog [data-ghelp-panel="contact"] p { margin: 0; color: var(--help-muted); font-size: 13px; line-height: 1.6; }
.help-dialog__qr { display: block; width: min(192px, 100%); height: auto; margin: 16px auto 4px; object-fit: contain; }

/* 常见问题面板底部的补充说明 */
.help-dialog__note { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--help-line); color: var(--help-muted); font-size: 12px; line-height: 1.6; }
.help-dialog__note a { color: #175cd3; }

.help-dialog button:focus-visible,
.help-dialog summary:focus-visible,
.help-dialog textarea:focus-visible,
.help-dialog input[type="file"]:focus-visible,
.help-dialog a:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }

/* 深色主题：与 feedback.css 的同名覆盖保持一致 */
html[data-color-mode="dark"] .help-dialog {
    --help-panel: #18202b;
    --help-soft: #202b38;
    --help-line: #344054;
    --help-muted: #aab4c3;
    color: #f2f4f7;
}
html[data-color-mode="dark"] .help-dialog__tabs button[aria-selected="true"],
html[data-color-mode="dark"] .help-dialog__note a,
html[data-color-mode="dark"] .help-dialog__actions a,
html[data-color-mode="dark"] .help-dialog__status { color: #93c5fd; }
html[data-color-mode="dark"] .help-float:hover { border-color: #60a5fa; color: #93c5fd; }
html[data-color-mode="dark"] .help-dialog__qr { background: #fff; }
html[data-color-mode="dark"] .help-dialog__status { background: #1e3a5f; }
html[data-color-mode="dark"] .help-dialog__status[data-state="error"] { background: #4c1d24; color: #fecaca; }
html[data-color-mode="dark"] .help-dialog__type-options label:has(input:checked) { border-color: #60a5fa; background: #1e3a5f; color: #bfdbfe; }
html[data-color-mode="dark"] .help-dialog .button:hover { border-color: #60a5fa; background: #1e3a5f; color: #bfdbfe; }
html[data-color-mode="dark"] .help-dialog .button--primary,
html[data-color-mode="dark"] .help-dialog .button--primary:hover { border-color: #2563eb; background: #2563eb; color: #fff; }

@media (max-width: 400px) {
    .help-dialog__tabs { justify-content: space-between; gap: 4px; }
    .help-dialog__actions { flex-wrap: wrap; }
}