/* 工具 05 · 邮件自动回复
   独立视觉：仿邮件客户端预览窗口（标题栏圆点 / 主题行 / 正文区），商务蓝 + 信封橙。 */
.ooo {
    --a1: #2f62a8; --a1b: #d5893a; --a1s: #e8f0fb; --a1i: #224c86;
    --a2: #7db6f5; --a2b: #f0bb79; --a2s: rgba(125, 182, 245, .16); --a2i: #a9d0fb;
    --h15-h1: clamp(29px, 3.5vw, 40px);
}
.ooo .ooo-h1 { letter-spacing: -.02em; }
.ooo-hero {
    background:
        repeating-linear-gradient(90deg, transparent 0 38px, rgba(47, 98, 168, .035) 38px 39px),
        radial-gradient(620px 240px at 88% -10%, rgba(213, 137, 58, .16), transparent 70%),
        linear-gradient(125deg, #f6f9ff 0%, #eaf2fd 100%);
    border-color: #d6e3f5;
}
.ooo-hero::before { background: linear-gradient(180deg, var(--a1), #5aa0d8); }
:root[data-theme="dark"] .ooo .ooo-hero {
    background: repeating-linear-gradient(90deg, transparent 0 38px, rgba(125, 182, 245, .035) 38px 39px),
                linear-gradient(125deg, #101d2c 0%, #14263a 100%);
    border-color: #27405c;
}
.ooo-envelope { position: absolute; right: 38px; top: 22px; font-size: 88px; line-height: 1; color: rgba(47, 98, 168, .13); transform: rotate(-12deg); }
@media (max-width: 620px) { .ooo-envelope { display: none; } }
.ooo-quick { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.ooo-quick-f { display: grid; gap: 4px; min-width: 132px; }
.ooo-quick-f > span { font-size: var(--h15-fs-12); font-weight: 700; color: var(--h15-ink-2); }
.ooo-go { padding-left: 22px; padding-right: 22px; }

.ooo-desk { display: grid; grid-template-columns: 384px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 980px) { .ooo-desk { grid-template-columns: 1fr; } }
.ooo-compose .h15-note { margin-top: 16px; }

.ooo-mail { border: 1px solid var(--h15-line); border-radius: 16px; overflow: hidden; background: var(--h15-card); box-shadow: var(--h15-shadow); }
.ooo-mail-bar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: var(--h15-card-2); border-bottom: 1px solid var(--h15-line); }
.ooo-dots { display: inline-flex; gap: 5px; }
.ooo-dots i { width: 9px; height: 9px; border-radius: 50%; background: #e26d5f; }
.ooo-dots i:nth-child(2) { background: #e8be4d; }
.ooo-dots i:nth-child(3) { background: #62b37d; }
.ooo-mail-title { font-size: var(--h15-fs-13); font-weight: 750; color: var(--h15-ink-2); }
.ooo-mail-badge { margin-left: auto; padding: 2px 10px; border-radius: 999px; background: var(--h15-accent-soft); color: var(--h15-accent-ink); font-size: var(--h15-fs-11); font-weight: 700; }
.ooo-mail-meta { display: flex; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--h15-line-2); font-size: var(--h15-fs-13); }
.ooo-mail-meta > span:first-child { width: 38px; flex: none; color: var(--h15-ink-3); font-size: var(--h15-fs-12); }
.ooo-mail-meta strong { font-weight: 700; color: var(--h15-ink); word-break: break-word; }
.ooo-fmt { display: inline-flex; gap: 4px; padding: 3px; border-radius: 999px; background: var(--h15-card-2); }
.ooo-fmt button { padding: 4px 12px; border: 0; border-radius: 999px; background: transparent; color: var(--h15-ink-2); font-family: inherit; font-size: var(--h15-fs-12); cursor: pointer; }
.ooo-fmt button.is-on { background: var(--h15-accent); color: #fff; font-weight: 700; }
:root[data-theme="dark"] .ooo .ooo-fmt button.is-on { color: #0b1c2e; }
.ooo-mail-body { min-height: 300px; padding: 24px 26px; background: #fff; color: #1c2733; }
:root[data-theme="dark"] .ooo .ooo-mail-body { background: #111c26; color: #e2ecf5; }
.ooo-mail-body .h15-empty { color: #87939d; }
.ooo-letter { font-size: 14px; line-height: 2; }
.ooo-letter p { margin: 0 0 13px; }
.ooo-letter .ooo-letter-sub { font-size: 15px; font-weight: 700; }
.ooo-letter .ooo-letter-sign { margin-top: 20px; padding-top: 12px; border-top: 1px solid #e3e8ee; color: #46586a; }
:root[data-theme="dark"] .ooo .ooo-letter .ooo-letter-sign { border-top-color: #2b3d4d; color: #a9bac9; }
.ooo-letter .ooo-letter-sep { margin: 18px 0; border: 0; border-top: 1px dashed #cfd8e3; }
.ooo-mail-foot { display: flex; justify-content: space-between; gap: 10px; padding: 10px 18px; border-top: 1px solid var(--h15-line); background: var(--h15-card-2); font-size: var(--h15-fs-12); color: var(--h15-ink-3); }

.ooo-versions { margin-top: 20px; }
.ooo-ver-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.ooo-ver-list .h15-empty { grid-column: 1 / -1; }
.ooo-ver { padding: 13px 14px; border: 1px solid var(--h15-line); border-radius: 12px; background: var(--h15-card-2); cursor: pointer; transition: border-color .14s, transform .14s; }
.ooo-ver:hover { transform: translateY(-2px); }
.ooo-ver.is-on { border-color: var(--h15-accent); box-shadow: 0 0 0 2px var(--h15-accent-soft); }
.ooo-ver-n { font-family: var(--h15-font-num); font-size: var(--h15-fs-11); font-weight: 700; color: var(--h15-accent-ink); }
.ooo-ver-t { display: block; margin: 5px 0; font-size: var(--h15-fs-13); font-weight: 700; color: var(--h15-ink); line-height: 1.5; }
.ooo-ver-p { margin: 0; font-size: var(--h15-fs-12); color: var(--h15-ink-3); line-height: 1.7; }
.ooo-tools { align-items: center; }
.ooo-esc-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.ooo-esc-label .h15-select { width: 118px; padding: 5px 8px; }
.ooo-ai { display: grid; gap: 8px; justify-items: start; margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--h15-line); }
.ooo-ai-box { width: 100%; padding: 14px 16px; border: 1px solid var(--h15-line); border-radius: 11px; background: var(--h15-card-2); white-space: pre-wrap; font-size: var(--h15-fs-13); line-height: 1.9; }
.ooo-code { margin: 0; white-space: pre-wrap; word-break: break-word; font-family: var(--h15-font-num); font-size: var(--h15-fs-12); line-height: 1.8; }
.ooo-faq .h15-faq-q { color: var(--h15-accent-ink); }