/* RPC – Mobile UI */

@media (hover: none) and (pointer: coarse) {
    .app-container, .sidebar, .right-sidebar { display: none !important; }
    #rpc-mobile { display: flex !important; }
}

#rpc-mobile {
    display: none; flex-direction: column; height: 100dvh;
    background: #111116; color: #e8e8e8;
    font-family: 'Inter','Helvetica Neue',Arial,sans-serif;
    overflow: hidden; position: fixed; inset: 0; z-index: 9999;
}

/* Top bar */
.rm-topbar { display:flex; align-items:center; padding:11px 16px; border-bottom:1px solid rgba(255,255,255,0.08); gap:10px; flex-shrink:0; }
.rm-logo { height:21px; opacity:.9; }
.rm-title { font-size:13px; font-weight:700; flex:1; }
.rm-badge { font-size:9px; padding:2px 7px; border-radius:10px; background:rgba(38,128,235,.2); color:#60a8f0; font-weight:700; text-transform:uppercase; letter-spacing:.06em; }

/* Tab bar */
.rm-tabs { display:flex; border-bottom:1px solid rgba(255,255,255,0.08); flex-shrink:0; background:#1a1a24; position:relative; }
.rm-tab { flex:1; padding:11px 4px 11px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:rgba(255,255,255,.35); border:none; background:none; cursor:pointer; border-bottom:2px solid transparent; transition:color .15s,border-color .15s; -webkit-tap-highlight-color:transparent; position:relative; }
.rm-tab.active { color:#2680eb; border-bottom-color:#2680eb; }
.rm-tab-badge { display:none; margin-left:4px; min-width:15px; height:15px; background:#2680eb; color:#fff; font-size:9px; font-weight:700; border-radius:8px; align-items:center; justify-content:center; padding:0 4px; vertical-align:middle; }
.rm-tab-badge.visible { display:inline-flex; }

/* Panes */
.rm-pane { display:none; flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:12px 14px 100px; }
.rm-pane.active { display:block; }

/* Section heads */
.rm-section-head { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:rgba(255,255,255,.35); margin:16px 0 8px; }
.rm-section-head:first-child { margin-top:0; }

/* Component cards */
.rm-card-wrap { margin-bottom:6px; border-radius:8px; overflow:hidden; background:rgba(255,255,255,.05); border:1px solid transparent; transition:border-color .15s; }
.rm-card-wrap.expanded { border-color:rgba(38,128,235,.3); }
.rm-card { display:flex; align-items:center; gap:12px; padding:10px 12px; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; }
.rm-card-img { width:72px; height:40px; object-fit:contain; flex-shrink:0; border-radius:3px; }
.rm-card-info { flex:1; min-width:0; }
.rm-card-name { font-size:13px; font-weight:700; color:#e8e8e8; }
.rm-card-sub { font-size:11px; color:rgba(255,255,255,.45); margin-top:2px; }
.rm-card-chevron { flex-shrink:0; font-size:14px; color:rgba(255,255,255,.3); transition:transform 0.2s; font-family:monospace; font-style:normal; -webkit-font-smoothing:antialiased; }
.rm-card-chevron::after { content:'\25B6\FE0E'; } /* ▶ + text variation selector */
.rm-card-wrap.expanded .rm-card-chevron { transform:rotate(90deg); }

/* Expanded info */
.rm-card-detail { display:none; padding:0 12px 12px; }
.rm-card-wrap.expanded .rm-card-detail { display:block; }
.rm-card-detail-inner { background:rgba(0,0,0,.25); border-radius:6px; padding:10px 12px; }
.rm-card-detail-photo { width:100%; max-height:80px; object-fit:contain; margin-bottom:8px; border-radius:4px; display:block; }
.rm-card-detail-desc { font-size:11px; color:rgba(255,255,255,.55); line-height:1.65; }
.rm-card-detail-desc li { margin-bottom:3px; }
.rm-card-add-btn {
    display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%; margin-top:10px; padding:9px;
    background:rgba(38,128,235,.18); border:1px solid rgba(38,128,235,.35);
    border-radius:6px; color:#60a8f0; font-size:12px; font-weight:700;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:background .15s, transform .1s;
}
.rm-card-add-btn:active { background:rgba(38,128,235,.35); transform:scale(.97); }
.rm-add-fly {
    position:fixed; width:32px; height:32px; border-radius:50%;
    background:#2680eb; color:#fff; font-size:18px; font-weight:300;
    display:flex; align-items:center; justify-content:center;
    z-index:99999; pointer-events:none;
    animation: rmFly 0.55s cubic-bezier(.4,0,.6,1) forwards;
}
@keyframes rmFly {
    0%   { opacity:1; transform:scale(1); }
    60%  { opacity:.9; transform:scale(.7); }
    100% { opacity:0; transform:scale(.2); }
}

/* Quick Build panel canvas */
#rm-panel-canvas { display:block; width:100%; border-radius:6px; touch-action:none; }
.rm-qb-info { display:flex; gap:8px; align-items:center; font-size:11px; color:rgba(255,255,255,.4); margin-top:8px; }
.rm-qb-info strong { color:#e8e8e8; }

/* Preset cards */
.rm-preset-card { background:rgba(255,255,255,.05); border-radius:10px; padding:12px; margin-bottom:10px; border:1px solid rgba(255,255,255,.07); }
.rm-preset-name { font-size:14px; font-weight:700; color:#e8e8e8; margin-bottom:6px; }
#rm-preset-canvas { display:block; width:100%; border-radius:6px; margin-top:8px; }

/* About */
.rm-about-block { background:rgba(255,255,255,.04); border-radius:10px; padding:14px 16px; margin-bottom:10px; }
.rm-about-head { font-size:13px; font-weight:700; margin-bottom:5px; }
.rm-about-body { font-size:12px; color:rgba(255,255,255,.55); line-height:1.6; }

/* CTA */
.rm-cta-bar { position:fixed; bottom:0; left:0; right:0; padding:10px 14px 14px; background:linear-gradient(to top,#111116 70%,transparent); z-index:10; }
.rm-cta-btn { width:100%; padding:13px; background:#1a1a2a; color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.12); border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px; }