/**
 * 「远程控制」页 + AI 抽屉输入框上方的「对话（云端） / 工作任务 · 电脑名」切换键。
 * 容器 #remoteControlView 与知识库列表、图谱、统计、插件·技能·规则、定时任务互斥显隐（NavigationManager.setViewMode），
 * 几何照 .scheduled-task-view（高度按「还有 30px 备案栏」扣，桌面端在 desktop.css 里还回来）。
 * 颜色一律取 --kb-* / 语义变量，不写色值；状态色与二维码色在 reading-theme.css 的 --kb-status-* / --kb-qr-*。
 */

.remote-control-view {
    display: none;
    flex-direction: column;
    height: calc(var(--kb-vh, 100dvh) - var(--kb-topbar-height, 64px) - 30px);
    min-height: 0;
    background: var(--bg-primary);
}

@media (display-mode: standalone) {
    .remote-control-view {
        height: calc(var(--kb-vh, 100dvh) - var(--kb-topbar-height, 64px));
    }
}

body.pwa-mode .remote-control-view {
    height: calc(var(--kb-vh, 100dvh) - var(--kb-topbar-height, 64px));
}

body.kb-remote-mode .remote-control-view {
    display: flex !important;
}

body.kb-remote-mode .knowledge-area,
body.kb-remote-mode .mobile-search-bar,
body.kb-remote-mode .mobile-pagination-bar {
    display: none !important;
}

/* PC 浏览器：与定时任务页同一套下载引导（引导块样式在 skill-market.css） */
.remote-control-view--web {
    overflow-y: auto;
}

.remote-control-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.remote-control-page {
    /* 上内边距单独成变量：桌面端右侧手机示意图的 sticky top 与它取同一个数，才能从第一帧起就不动 */
    --rc-page-pad-top: 32px;
    display: flex;
    flex-direction: column;
    max-width: 680px;
    margin: 0 auto;
    padding: var(--rc-page-pad-top) 32px 48px;
    box-sizing: border-box;
}

/* 只有电脑端的远程控制页是「内容 + 右侧示意图」两栏；手机端页面与插件·技能·规则页都是单栏 */
.remote-control-view--host .remote-control-page {
    flex-direction: row;
    gap: 40px;
    max-width: 1120px;
}

.remote-control-main {
    flex: 1 1 auto;
    min-width: 0;
}

.remote-control-eyebrow {
    margin: 0 0 12px;
    color: var(--kb-ink-muted);
    font-size: 0.875rem;
}

.remote-control-title {
    margin: 0 0 12px;
    color: var(--kb-ink);
    font-size: 1.625rem;
    font-weight: 600;
    line-height: 1.3;
}

.remote-control-desc {
    margin: 0 0 20px;
    color: var(--kb-ink-soft);
    font-size: 0.875rem;
    line-height: 1.7;
}

.remote-control-card {
    margin-bottom: 16px;
    border: 1px solid var(--kb-paper-line);
    border-radius: var(--radius-lg);
    background: var(--kb-paper-panel);
}

/* ---------- 开关 ---------- */

.remote-control-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    padding: 10px 16px;
}

.remote-control-toggle-row + .remote-control-toggle-row {
    border-top: 1px solid var(--kb-paper-line);
}

.remote-control-toggle-icon {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-md);
    font-size: 1.05rem;
}

.remote-control-toggle-icon--link {
    background: var(--kb-status-online-soft);
    color: var(--kb-status-online);
}

.remote-control-toggle-icon--awake {
    background: var(--kb-status-warn-soft);
    color: var(--kb-status-warn);
}

.remote-control-toggle-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.remote-control-toggle-text strong {
    color: var(--kb-ink);
    font-size: 0.9375rem;
    font-weight: 500;
}

.remote-control-toggle-text span {
    color: var(--kb-ink-muted);
    font-size: 0.8125rem;
}

.remote-control-status--online {
    color: var(--kb-status-online) !important;
}

.remote-control-status--replaced,
.remote-control-status--error {
    color: var(--kb-status-warn) !important;
}

.remote-control-switch {
    position: relative;
    flex-shrink: 0;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.remote-control-switch input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

.remote-control-switch-slider {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-full);
    background: var(--kb-switch-track);
    transition: background-color 0.2s ease;
}

.remote-control-switch-slider::before {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--kb-switch-knob);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
    content: '';
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.remote-control-switch input:checked + .remote-control-switch-slider {
    background: var(--kb-accent);
}

.remote-control-switch input:checked + .remote-control-switch-slider::before {
    background: var(--kb-switch-knob-on);
    transform: translateX(20px);
}

.remote-control-switch input:focus-visible:where(html:not(.kb-focus-pointer) *) + .remote-control-switch-slider {
    outline: 2px solid var(--kb-accent);
    outline-offset: 2px;
}

.remote-control-switch.is-disabled {
    cursor: not-allowed;
}

.remote-control-switch.is-disabled .remote-control-switch-slider {
    background: var(--kb-control-disabled-bg);
}

.remote-control-switch.is-disabled .remote-control-switch-slider::before {
    background: var(--kb-control-disabled-text);
    box-shadow: none;
}

/* ---------- 步骤 + 配对码 ---------- */

.remote-control-steps {
    display: flex;
    align-items: stretch;
}

.remote-control-step-list {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 0;
    padding: 8px 16px;
    list-style: none;
}

.remote-control-step-list li {
    display: flex;
    gap: 12px;
    padding: 12px 0;
}

.remote-control-step-list li + li {
    border-top: 1px solid var(--kb-paper-line);
}

.remote-control-step-list--compact {
    padding: 0;
}

.remote-control-step-no {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--kb-active-bg);
    color: var(--kb-ink);
    font-size: 0.8125rem;
    font-weight: 600;
}

.remote-control-step-list strong,
.remote-control-item-text strong {
    display: block;
    color: var(--kb-ink);
    font-size: 0.9375rem;
    font-weight: 500;
}

.remote-control-step-list li > div > span,
.remote-control-item-text > span {
    display: block;
    margin-top: 2px;
    color: var(--kb-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.remote-control-pair {
    display: flex;
    flex: 0 0 180px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border-left: 1px solid var(--kb-paper-line);
}

.remote-control-qr {
    width: 128px;
    height: 128px;
    padding: 6px;
    border-radius: var(--radius-md);
    background: var(--kb-qr-bg);
    box-sizing: border-box;
}

.remote-control-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.remote-control-qr-bg {
    fill: var(--kb-qr-bg);
}

.remote-control-qr-fg {
    fill: var(--kb-qr-fg);
}

.remote-control-qr.is-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: var(--kb-paper-soft);
    color: var(--kb-ink-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    text-align: center;
}

.remote-control-code {
    color: var(--kb-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.remote-control-code span {
    display: inline-block;
    width: 8px;
}

.remote-control-code-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--kb-ink-muted);
    font-size: 0.75rem;
}

.remote-control-pair-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--kb-ink-muted);
    font-size: 0.8125rem;
    text-align: center;
}

.remote-control-pair-placeholder i {
    font-size: 2rem;
}

/* 「正在生成配对码」用统一的加载中：占位框的大小由它自己定，不能被加载中的内边距撑大 */
.remote-control-pair-placeholder > .kb-loading {
    min-height: 0;
    padding: 0;
}

/* ---------- 列表 ---------- */

.remote-control-section {
    padding: 12px 16px;
}

.remote-control-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0 8px;
    color: var(--kb-ink);
    font-size: 0.9375rem;
}

.remote-control-section-head strong {
    font-weight: 600;
}

.remote-control-section-head span {
    color: var(--kb-ink-muted);
    font-size: 0.8125rem;
}

.remote-control-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
}

.remote-control-item + .remote-control-item {
    border-top: 1px solid var(--kb-paper-line);
}

.remote-control-item-icon {
    flex-shrink: 0;
    color: var(--kb-ink-soft);
    font-size: 1.375rem;
}

.remote-control-item-text {
    flex: 1;
    min-width: 0;
}

.remote-control-item-text strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 插件 / 技能的说明动辄四五行，列表里只露两行，全文放在 title 上 */
.remote-control-item-text > .remote-control-clamp {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.remote-control-item-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px 12px;
}

.remote-control-device.is-current .remote-control-item-icon {
    color: var(--kb-accent);
}

.remote-control-tag {
    margin-left: 8px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--kb-accent-soft);
    color: var(--kb-accent);
    font-size: 0.75rem;
    font-style: normal;
    font-weight: 500;
}

.remote-control-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--kb-ink-muted);
    vertical-align: 1px;
}

.remote-control-dot.is-online {
    background: var(--kb-status-online);
}

.remote-control-muted {
    margin: 4px 0 8px;
    color: var(--kb-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.remote-control-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    min-height: 32px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kb-accent);
    font-size: 0.8125rem;
    cursor: pointer;
}

.remote-control-link--danger {
    color: var(--kb-diff-del-fg);
}

.remote-control-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 8px;
}

.remote-control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--kb-paper-line);
    border-radius: var(--radius-md);
    background: var(--kb-paper-panel);
    color: var(--kb-ink);
    font-size: 0.875rem;
    cursor: pointer;
}

/*
 * 双类名把优先级抬到 (0,2,0)：form-unified.css 的 button[type="submit"] { color:#fff } 是 (0,1,1)，
 * 单类名压不过它，暗色主题下浅赤陶底就配上了白字。文字色只能是 --text-inverse（亮白 / 暗深）
 */
.remote-control-btn.remote-control-btn--primary {
    border-color: var(--kb-accent);
    background: var(--kb-accent);
    color: var(--text-inverse);
    font-weight: 500;
}

@media (any-hover: hover) {
    .remote-control-btn.remote-control-btn--primary:hover:not(:disabled):not(:where(html[data-kb-pointer="touch"] *)) {
        border-color: var(--kb-accent-strong);
        background: var(--kb-accent-strong);
    }
}

.remote-control-btn:disabled,
.remote-control-btn.remote-control-btn--primary:disabled {
    border-color: var(--kb-control-disabled-border, var(--kb-paper-line));
    background: var(--kb-control-disabled-bg, var(--kb-paper-soft));
    color: var(--kb-control-disabled-text, var(--kb-ink-muted));
    cursor: not-allowed;
}

.remote-control-pair-form {
    display: flex;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
}

/*
 * 双类名：暗色主题下全局的 input 规则（.dark input 一类）会把边框换成偏蓝的灰。
 * 高度不写死：行内的输入框与「配对」键都由 flex 的 stretch 拉到同一高度——
 * 手机上主按钮最低 48px、输入框写死 44px 时，两者差一截
 */
.remote-control-pair-form .remote-control-code-input {
    flex: 1;
    min-width: 0;
    height: auto;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--kb-paper-line);
    border-radius: var(--radius-md);
    background: var(--kb-paper);
    color: var(--kb-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 1.125rem;
    letter-spacing: 0.2em;
}

.remote-control-pair-form .remote-control-code-input::placeholder {
    color: var(--kb-ink-muted);
    font-family: var(--kb-font-sans);
    font-size: 0.9375rem;
    letter-spacing: normal;
}

.remote-control-pair-form .remote-control-code-input:focus {
    border-color: var(--kb-accent);
    outline: none;
}

.remote-control-field-error {
    min-height: 1.25em;
    margin-top: 6px;
    color: var(--kb-diff-del-fg);
    font-size: 0.8125rem;
}

.remote-control-ticket {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-color: var(--kb-accent);
}

.remote-control-ticket-icon {
    color: var(--kb-accent);
    font-size: 1.75rem;
}

.remote-control-ticket .remote-control-muted,
.remote-control-ticket .remote-control-actions {
    flex-basis: 100%;
}

.remote-control-note {
    display: flex;
    gap: 8px;
    margin: 4px 0 0;
    color: var(--kb-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.7;
}

.remote-control-note i {
    flex-shrink: 0;
    margin-top: 2px;
}

.remote-control-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 32px 16px;
    color: var(--kb-ink-muted);
    text-align: center;
}

/* ---------- 右侧示意图（纯装饰，窄屏隐藏） ---------- */

/*
 * 手机示意图始终钉在右侧不动，只滚左侧内容：
 * - sticky 的 top 取页面上内边距（--rc-page-pad-top）。曾经写 0，示意图先随页面上移 32px 再停住，
 *   看起来就是「左右滚动不同步」；
 * - 示意图整体不能比可视区高，否则 sticky 之后底部永远看不到。机身宽度 --rc-phone-w 按可视高度反推：
 *   可视高 = 视口 − 顶栏，再扣掉 上内边距 32 + 底部留白 16 + 示意图里机身以外的部分约 170
 *   （上下内边距 36+28、间距 20、两条气泡约 74，余量 12），乘机身宽高比 78 / 163.4 ≈ 0.4774；
 *   上限 252px（宽屏下的设计尺寸），下限 160px（再小就看不清了）。
 */
.remote-control-illustration {
    --rc-phone-w: clamp(160px,
        calc((var(--kb-vh, 100dvh) - var(--kb-topbar-height, 64px) - 218px) * 0.4774),
        252px);
    position: sticky;
    top: var(--rc-page-pad-top, 32px);
    display: flex;
    flex: 0 0 360px;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    align-self: flex-start;
    padding: 36px 24px 28px;
    border-radius: var(--radius-2xl);
    background: linear-gradient(160deg, var(--kb-accent-soft), var(--kb-paper-soft) 70%);
    box-sizing: border-box;
}

/*
 * 机身按 iPhone 17 Pro Max 的真实比例画：机身 78.0 × 163.4 mm（宽高比 ≈ 0.4774），
 * 屏幕 440 × 956 pt。全部尺寸从机身宽度 --rc-phone-w 推出来，缩放时比例不变：
 * - 黑边 = 机身宽 × 0.033（252px 时约 8px），屏幕 aspect-ratio 440 / 956，
 *   两者合起来机身宽高比 ≈ 0.477，与实机一致；
 * - 灵动岛 ≈ 屏宽 28.6% × 8.5%、距屏顶 2.5%；屏幕圆角 ≈ 屏宽 13.6%，机身圆角 = 屏幕圆角 + 黑边（同心）。
 * 近黑的细边框 + 一道浅色描边当金属中框。
 */
.remote-control-phone {
    --rc-bezel: calc(var(--rc-phone-w, 252px) * 0.033);
    --rc-screen-w: calc(var(--rc-phone-w, 252px) - var(--rc-bezel) * 2);
    width: var(--rc-phone-w, 252px);
    padding: var(--rc-bezel);
    border-radius: calc(var(--rc-screen-w) * 0.136 + var(--rc-bezel));
    background: var(--kb-device-frame);
    box-shadow: 0 0 0 1px var(--kb-device-frame-edge), var(--kb-paper-shadow);
    box-sizing: border-box;
}

.remote-control-phone-screen {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    aspect-ratio: 440 / 956;
    padding: calc(var(--rc-screen-w) * 0.025) 12px 10px;
    overflow: hidden;
    border-radius: calc(var(--rc-screen-w) * 0.136);
    background: var(--kb-paper);
    box-sizing: border-box;
}

.remote-control-phone-island {
    position: absolute;
    top: calc(var(--rc-screen-w) * 0.025);
    left: 50%;
    width: calc(var(--rc-screen-w) * 0.286);
    height: calc(var(--rc-screen-w) * 0.085);
    border-radius: var(--radius-full);
    background: var(--kb-device-frame);
    transform: translateX(-50%);
}

.remote-control-phone-status {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: space-between;
    /* 与灵动岛同高，时间与信号分列在岛的两侧 */
    height: calc(var(--rc-screen-w) * 0.085);
    padding: 0 10px;
    color: var(--kb-ink);
    font-size: 0.6875rem;
    font-weight: 600;
}

.remote-control-phone-status i {
    margin-left: 3px;
    font-size: 0.75rem;
}

.remote-control-phone-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 0 8px;
    border-bottom: 1px solid var(--kb-paper-line);
    color: var(--kb-ink);
    font-size: 0.75rem;
    font-weight: 600;
}

.remote-control-phone-chat {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    min-height: 0;
}

.remote-control-phone-chat span {
    max-width: 82%;
    padding: 7px 10px;
    border-radius: 14px;
    font-size: 0.6875rem;
    line-height: 1.5;
}

.remote-control-phone-chat .is-user {
    align-self: flex-end;
    border-bottom-right-radius: 4px;
    background: var(--kb-accent);
    color: var(--text-inverse);
}

.remote-control-phone-chat .is-ai {
    align-self: flex-start;
    border: 1px solid var(--kb-paper-line);
    border-bottom-left-radius: 4px;
    background: var(--kb-paper-panel);
    color: var(--kb-ink);
}

.remote-control-phone-chat .is-ai i {
    margin-right: 3px;
    color: var(--kb-status-online);
}

.remote-control-phone-menu {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--kb-paper-line);
    border-radius: 12px;
    background: var(--kb-paper-panel);
    box-shadow: var(--kb-paper-shadow);
    font-size: 0.6875rem;
}

.remote-control-phone-menu > span {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 7px 10px;
    color: var(--kb-ink-soft);
}

.remote-control-phone-menu > span + span {
    border-top: 1px solid var(--kb-paper-line);
}

.remote-control-phone-menu .is-current {
    color: var(--kb-ink);
    font-weight: 500;
}

.remote-control-phone-menu b {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    font-weight: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remote-control-phone-menu .ri-check-line {
    color: var(--kb-accent);
}

.remote-control-phone-input {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 10px;
    border: 1px solid var(--kb-paper-line);
    border-radius: var(--radius-full);
    background: var(--kb-paper-panel);
    color: var(--kb-ink-muted);
    font-size: 0.6875rem;
}

.remote-control-phone-input .ri-arrow-up-circle-fill {
    margin-left: auto;
    color: var(--kb-accent);
    font-size: 1rem;
}

.remote-control-phone-home {
    align-self: center;
    width: 92px;
    height: 4px;
    margin-top: 2px;
    border-radius: var(--radius-full);
    background: var(--kb-ink);
    opacity: 0.85;
}

.remote-control-bubbles {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.remote-control-bubbles span {
    padding: 7px 14px;
    border: 1px solid var(--kb-paper-line);
    border-radius: var(--radius-full);
    background: var(--kb-paper-panel);
    color: var(--kb-ink-soft);
    font-size: 0.8125rem;
}

/* ---------- AI 抽屉：执行位置切换键 ---------- */

.ai-composer-context .ai-remote-target {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    height: 24px;
    min-height: 0 !important;
    padding: 0 6px 0 8px;
    border: 1px solid var(--kb-paper-line);
    border-radius: var(--radius-full);
    background: var(--kb-active-bg);
    color: var(--kb-ink);
    font: inherit;
    line-height: 1.6;
    white-space: nowrap;
    cursor: pointer;
}

.ai-composer-context .ai-remote-target.is-remote {
    border-color: var(--kb-accent);
    color: var(--kb-accent);
}

/* 电脑名可能很长（vandeMacBook-Pro-M1），切换键只露一行，全名在 title 与菜单里 */
.ai-composer-context .ai-remote-target {
    max-width: 100%;
}

.ai-remote-target-label {
    min-width: 0;
    max-width: min(60vw, 280px);
    overflow: hidden;
    text-overflow: ellipsis;
}

.ai-composer-context .ai-remote-target em {
    color: var(--kb-status-warn);
    font-style: normal;
}

.ai-remote-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--kb-ink-muted);
}

.ai-remote-dot.is-online {
    background: var(--kb-status-online);
}

/*
 * 「在哪儿执行」菜单：比通用悬浮菜单宽（电脑名 + 一行状态说明），手机上贴满屏宽留 12px 边。
 * 条目自带一套结构，不复用 .ai-popover-item > span 的「flex:1 单行省略」——状态点也是 span 时会被拉成长条
 */
.ai-popover-menu.ai-remote-menu {
    width: min(340px, calc(100vw - 24px));
    max-width: none;
}

.ai-remote-menu .ai-remote-option {
    align-items: flex-start;
    gap: 10px;
    padding: 9px 10px;
}

.ai-remote-menu .ai-remote-option.is-current {
    background: var(--kb-accent-soft);
}

.ai-remote-menu .ai-remote-option > i:first-child {
    margin-top: 2px;
    font-size: 1rem;
}

.ai-remote-menu .ai-remote-option > .ai-remote-option-text {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    overflow: visible;
    white-space: normal;
}

.ai-remote-option-text b {
    overflow: hidden;
    color: var(--kb-ink);
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ai-remote-option-text small {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--kb-ink-muted);
    font-size: 0.75rem;
    line-height: 1.45;
}

.ai-remote-option-text small .ai-remote-dot {
    flex: 0 0 6px;
}

.ai-remote-menu .ai-remote-option > .ai-remote-option-check {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--kb-accent);
}

@media (max-width: 1023px) {
    body.kb-remote-mode .mobile-main-content {
        margin-top: var(--kb-topbar-height, 64px) !important;
        margin-bottom: calc(30px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body.kb-remote-mode.pwa-mode .mobile-main-content {
        margin-bottom: 0 !important;
    }

    .remote-control-view {
        height: calc(var(--kb-vh, 100dvh) - var(--kb-topbar-height, 64px) - 30px - env(safe-area-inset-bottom, 0px));
    }

    body.pwa-mode .remote-control-view {
        height: calc(var(--kb-vh, 100dvh) - var(--kb-topbar-height, 64px));
    }

    .remote-control-page,
    .remote-control-view--host .remote-control-page {
        flex-direction: column;
        gap: 0;
        padding: 20px 16px 32px;
    }

    .remote-control-illustration {
        display: none;
    }

    .remote-control-steps {
        flex-direction: column;
    }

    .remote-control-pair {
        flex-basis: auto;
        border-top: 1px solid var(--kb-paper-line);
        border-left: 0;
    }

    .remote-control-item {
        flex-wrap: wrap;
    }

    .remote-control-item-actions {
        flex-basis: 100%;
        justify-content: flex-start;
        padding-left: 34px;
    }

    .remote-control-link,
    .remote-control-btn {
        min-height: 44px;
    }

    .remote-control-btn.remote-control-btn--primary {
        min-height: 48px;
    }

    /* 卡片底部的操作按钮在手机上通栏，单手好点 */
    .remote-control-actions .remote-control-btn {
        flex: 1 1 0;
    }
}