/* =====================================================================
 * 真实下单（MCP 通道）样式 · rlo- 前缀
 * 覆盖：通道选择弹层附加样式、真实下单全屏面板、确认卡、支付卡、设置页。
 * 视觉基调与「吃了么」独立 App 一致：奶酪黄底 + 可爱黑边粗框。
 * ===================================================================== */

/* ---------------- 通道选择弹层微调（复用 ss2tk-choice-* 基础样式） ---------------- */
#rlo-channel-modal { z-index: 1200; }
#rlo-channel-modal .rlo-channel-content { width: min(92vw, 360px); }
#rlo-channel-modal .rlo-choice-real .ss2tk-choice-ic { color: #c47f17; }
#rlo-channel-modal .rlo-choice-settings .ss2tk-choice-tx b { font-weight: 600; }

/* ---------------- 全屏面板 ---------------- */
#rlo-panel {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1210;
    background: rgba(0, 0, 0, 0.45);
    align-items: center;
    justify-content: center;
}
#rlo-panel.show { display: flex; }

#rlo-panel .rlo-shell {
    display: flex;
    flex-direction: column;
    width: min(94vw, 420px);
    height: min(92vh, 720px);
    background: #FFFDF2;
    border: 3px solid #2e3640;
    border-radius: 24px;
    box-shadow: 0 10px 30px rgba(46, 54, 64, 0.2);
    overflow: hidden;
}

.rlo-header {
    display: flex;
    align-items: center;
    gap: 8px;
    /* 全屏手机态会直接贴住真实视口：顶部避开 iPhone 灵动岛/刘海，
       左右同时兼容横屏挖孔及 Android 原生注入的安全区变量。 */
    padding: calc(12px + var(--safe-area-inset-top, env(safe-area-inset-top, 0px)))
             max(14px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px)))
             12px
             max(14px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px)));
    padding: calc(12px + var(--safe-area-inset-top, 0px))
             max(14px, var(--safe-area-inset-right, 0px))
             12px
             max(14px, var(--safe-area-inset-left, 0px));
    border-bottom: 2px solid #2e3640;
    background: #FFE9A8;
    flex-shrink: 0;
}
.rlo-title { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.rlo-title b { font-size: 16px; color: #2e3640; }
.rlo-title span { font-size: 11px; color: #8a7a45; }
.rlo-icon-btn {
    width: 40px;
    height: 40px;
    border: 2px solid #2e3640;
    border-radius: 10px;
    background: #fff;
    color: #2e3640;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.rlo-icon-btn:active { transform: scale(0.94); }

.rlo-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px max(12px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px)))
             8px max(12px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px)));
    padding: 8px max(12px, var(--safe-area-inset-right, 0px))
             8px max(12px, var(--safe-area-inset-left, 0px));
    border-bottom: 1px dashed #d8c98e;
    flex-shrink: 0;
}
.rlo-provider-chips { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; min-width: 0; }
.rlo-chip {
    padding: 4px 12px;
    border: 2px solid #2e3640;
    border-radius: 999px;
    background: #fff;
    color: #2e3640;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.rlo-chip.is-active { background: #2e3640; color: #FFE9A8; }
.rlo-char-select {
    max-width: 46%;
    padding: 4px 6px;
    border: 2px solid #2e3640;
    border-radius: 10px;
    background: #fff;
    color: #2e3640;
    font-size: 12px;
}

.rlo-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px max(12px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px)))
             12px max(12px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px)));
    padding: 12px max(12px, var(--safe-area-inset-right, 0px))
             12px max(12px, var(--safe-area-inset-left, 0px));
}
.rlo-messages { display: flex; flex-direction: column; gap: 10px; }

.rlo-msg { display: flex; }
.rlo-msg--user { justify-content: flex-end; }
.rlo-msg--assistant { justify-content: flex-start; }
.rlo-msg--status,
.rlo-msg--tool,
.rlo-msg--confirm,
.rlo-msg--pay { justify-content: center; }

.rlo-bubble {
    max-width: 82%;
    padding: 8px 12px;
    border: 2px solid #2e3640;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.55;
    color: #2e3640;
    word-break: break-word;
}
.rlo-msg--user .rlo-bubble { background: #DFF3C8; border-bottom-right-radius: 4px; }
.rlo-msg--assistant .rlo-bubble { background: #fff; border-bottom-left-radius: 4px; }

.rlo-msg--status span {
    font-size: 11px;
    color: #8a7a45;
    background: rgba(255, 233, 168, 0.6);
    border-radius: 999px;
    padding: 3px 12px;
    text-align: center;
}

/* ---------------- 工具执行卡（可折叠） ---------------- */
.rlo-tool-card {
    width: 92%;
    border: 1.5px dashed #b8a862;
    border-radius: 12px;
    background: #FFFBE6;
    font-size: 12px;
    color: #5c5233;
    overflow: hidden;
}
.rlo-tool-card.is-error { border-color: #d9534f; background: #FFF1F0; }
.rlo-tool-card summary { padding: 7px 10px; cursor: pointer; user-select: none; font-weight: 600; }
.rlo-tool-sec { padding: 0 10px 8px; }
.rlo-tool-sec b { font-size: 11px; color: #8a7a45; }
.rlo-tool-sec pre {
    margin: 4px 0 0;
    padding: 6px 8px;
    background: #fff;
    border: 1px solid #e6dbae;
    border-radius: 8px;
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 220px;
    overflow-y: auto;
}

/* ---------------- 真实操作确认卡（安全门） ---------------- */
.rlo-confirm-card {
    width: 94%;
    border: 2.5px solid #d9534f;
    border-radius: 16px;
    background: #fff;
    padding: 12px;
    box-shadow: 0 4px 14px rgba(217, 83, 79, 0.18);
    font-size: 13px;
    color: #2e3640;
}
.rlo-confirm-title { font-weight: 700; color: #c9302c; margin-bottom: 6px; }
.rlo-confirm-say { line-height: 1.5; margin-bottom: 6px; }
.rlo-confirm-tool { font-size: 12px; color: #666; margin-bottom: 4px; }
.rlo-confirm-tool code { background: #f4f0e0; border-radius: 6px; padding: 1px 6px; }
.rlo-confirm-amount { font-size: 14px; margin: 6px 0; }
.rlo-confirm-amount b { color: #c9302c; font-size: 17px; }
.rlo-confirm-amount--unknown { color: #c47f17; font-size: 12px; }
.rlo-confirm-amount--free { color: #5a8f4a; font-size: 12px; }
.rlo-confirm-args summary { font-size: 12px; color: #8a7a45; cursor: pointer; }
.rlo-confirm-args pre {
    margin: 4px 0 0;
    padding: 6px 8px;
    background: #FFFBE6;
    border: 1px solid #e6dbae;
    border-radius: 8px;
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 200px;
    overflow-y: auto;
}
.rlo-confirm-btns { display: flex; gap: 10px; margin-top: 10px; }
.rlo-confirm-btns button {
    flex: 1;
    padding: 8px 0;
    border-radius: 12px;
    border: 2px solid #2e3640;
    font-size: 14px;
    cursor: pointer;
}
.rlo-confirm-no { background: #fff; color: #2e3640; }
.rlo-confirm-yes { background: #d9534f; border-color: #a94442 !important; color: #fff; font-weight: 700; }
.rlo-confirm-result { flex: 1; text-align: center; font-size: 13px; color: #666; padding: 6px 0; }

/* ---------------- 支付卡（二维码 / 链接） ---------------- */
.rlo-pay-card {
    width: 94%;
    border: 2.5px solid #2e3640;
    border-radius: 16px;
    background: #fff;
    padding: 12px;
    text-align: center;
    font-size: 13px;
    color: #2e3640;
}
.rlo-pay-title { font-weight: 700; margin-bottom: 8px; }
.rlo-pay-qr img {
    width: min(200px, 60vw);
    height: auto;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}
.rlo-pay-link {
    display: inline-block;
    margin: 6px 4px 0;
    padding: 7px 16px;
    border: 2px solid #2e3640;
    border-radius: 999px;
    background: #FFE9A8;
    color: #2e3640;
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
}
.rlo-pay-hint { margin-top: 8px; font-size: 11px; color: #8a7a45; }

/* ---------------- 底部输入区 ---------------- */
.rlo-footer {
    flex-shrink: 0;
    border-top: 2px solid #2e3640;
    background: #FFF7DB;
    padding: 8px max(12px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px)))
             calc(10px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))
             max(12px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px)));
    padding: 8px max(12px, var(--safe-area-inset-right, 0px))
             calc(10px + var(--safe-area-inset-bottom, 0px))
             max(12px, var(--safe-area-inset-left, 0px));
}
.rlo-disclaimer { font-size: 10px; color: #a08c4d; line-height: 1.4; margin-bottom: 6px; }
.rlo-input-row { display: flex; gap: 8px; align-items: flex-end; }
#rlo-input {
    flex: 1;
    min-height: 38px;
    max-height: 96px;
    padding: 8px 12px;
    border: 2px solid #2e3640;
    border-radius: 14px;
    background: #fff;
    color: #2e3640;
    font-size: 13px;
    line-height: 1.4;
    resize: none;
    outline: none;
}
.rlo-send-btn {
    flex-shrink: 0;
    padding: 9px 18px;
    border: 2px solid #2e3640;
    border-radius: 14px;
    background: #2e3640;
    color: #FFE9A8;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.rlo-send-btn:active { transform: scale(0.96); }

/* ---------------- 设置页 ---------------- */
.rlo-settings {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px max(12px, var(--safe-area-inset-right, env(safe-area-inset-right, 0px)))
             calc(12px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))
             max(12px, var(--safe-area-inset-left, env(safe-area-inset-left, 0px)));
    padding: 12px max(12px, var(--safe-area-inset-right, 0px))
             calc(12px + var(--safe-area-inset-bottom, 0px))
             max(12px, var(--safe-area-inset-left, 0px));
}
.rlo-set-wrap { display: flex; flex-direction: column; gap: 12px; }
.rlo-set-card {
    border: 2px solid #2e3640;
    border-radius: 16px;
    background: #fff;
    padding: 12px;
}
.rlo-set-card--master { background: #FFF3C4; }
.rlo-set-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #2e3640; cursor: pointer; }
.rlo-set-toggle input { width: 18px; height: 18px; accent-color: #2e3640; }
.rlo-set-note { margin: 6px 0 0; font-size: 11px; color: #8a7a45; line-height: 1.5; }
.rlo-set-note--kfc { padding: 0 4px; }
.rlo-set-field { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; font-size: 12px; color: #5c5233; }
.rlo-set-field input {
    padding: 8px 10px;
    border: 1.5px solid #2e3640;
    border-radius: 10px;
    background: #FFFDF2;
    color: #2e3640;
    font-size: 13px;
    outline: none;
}
.rlo-set-link { display: inline-block; margin-top: 8px; font-size: 12px; color: #1a73e8; text-decoration: none; }
.rlo-set-btns { display: flex; gap: 10px; padding-bottom: 8px; }
.rlo-set-btns button {
    flex: 1;
    padding: 10px 0;
    border-radius: 14px;
    border: 2px solid #2e3640;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}
.rlo-set-back { background: #fff; color: #2e3640; }
.rlo-set-save { background: #2e3640; color: #FFE9A8; }

/* 小屏适配：面板铺满 */
@media (max-width: 480px) {
    #rlo-panel .rlo-shell {
        width: 100vw;
        height: 100%;
        height: 100dvh;
        border: none;
        border-radius: 0;
    }
}