{{--
    文件功能：商店面板视图（嵌入聊天室右侧）
    展示单次卡、周卡、改名卡，支持购买和改名操作
    采用紧凑卡片设计，适配窄侧边栏
--}}

<style>
    /* ── 商店面板样式 ──────────────────────────────── */
    #shop-panel {
        display: none;
        position: absolute;
        /* 顶部 tab 栏高度约 56px，底部状态栏约 22px */
        top: 56px;
        left: 0;
        right: 0;
        bottom: 22px;
        flex-direction: column;
        background: #0f0c29;
        z-index: 10;
    }

    .shop-tab.active { color: #e2e8f0 !important; border-bottom-color: #818cf8 !important; }
    .shop-tab:hover { color: #c7d2fe; }

    #shop-balance-bar {
        padding: 6px 8px;
        background: linear-gradient(135deg, #1e1b4b, #312e81);
        border-bottom: 1px solid #4f46e5;
        font-size: 11px;
        color: #a5b4fc;
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }

    #shop-jjb {
        color: #fbbf24;
        font-weight: 800;
        font-size: 12px;
    }

    #shop-week-badge {
        display: none;
        margin-left: auto;
        font-size: 10px;
        background: #4338ca;
        padding: 1px 5px;
        border-radius: 10px;
        color: #c7d2fe;
        white-space: nowrap;
    }

    #shop-toast {
        display: none;
        margin: 4px 6px;
        padding: 5px 8px;
        border-radius: 6px;
        font-size: 11px;
        font-weight: bold;
        flex-shrink: 0;
    }

    #shop-items-list {
        flex: 1;
        overflow-y: auto;
        padding: 6px 5px;
        scrollbar-width: thin;
        scrollbar-color: #4338ca #0f0c29;
    }

    /* 分组标题 */
    .shop-group-label {
        font-size: 10px;
        font-weight: 800;
        color: #818cf8;
        letter-spacing: .5px;
        text-transform: uppercase;
        padding: 4px 2px 3px;
        border-bottom: 1px solid #312e81;
        margin-bottom: 5px;
    }

    .shop-group-desc {
        font-size: 9px;
        color: #6b7280;
        margin-bottom: 5px;
        line-height: 1.3;
    }

    /* 商品卡片 */
    .shop-card {
        background: linear-gradient(135deg, #1e1b4b 60%, #2d2a6e);
        border: 1px solid #3730a3;
        border-radius: 8px;
        padding: 7px 8px;
        margin-bottom: 5px;
        transition: border-color .2s, box-shadow .2s;
        cursor: default;
    }

    .shop-card:hover {
        border-color: #6366f1;
        box-shadow: 0 0 8px rgba(99, 102, 241, .35);
    }

    .shop-card-row {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .shop-card-icon {
        font-size: 18px;
        flex-shrink: 0;
        width: 26px;
        text-align: center;
        line-height: 1;
    }

    .shop-card-name {
        font-size: 11px;
        font-weight: 700;
        color: #e0e7ff;
        flex: 1;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .shop-card-desc {
        font-size: 9px;
        color: #6b7280;
        margin-top: 3px;
        line-height: 1.35;
    }

    .shop-validity {
        margin-top: 2px;
        color: #8b93a7;
        font-size: 9px;
        font-weight: normal;
        line-height: 1.35;
    }

    /* 购买按钮 */
    .shop-btn {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 3px 7px;
        cursor: pointer;
        font-size: 10px;
        font-weight: 800;
        white-space: nowrap;
        flex-shrink: 0;
        transition: opacity .15s, transform .1s;
    }

    .shop-btn:hover {
        opacity: .85;
        transform: scale(1.04);
    }

    .shop-btn-use {
        background: linear-gradient(135deg, #7c3aed, #a855f7);
    }

    /* 改名弹框 */
    #rename-modal {
        display: none;
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, .75);
        z-index: 300;
        align-items: center;
        justify-content: center;
    }

    #rename-modal-inner {
        background: linear-gradient(160deg, #1e1b4b, #1a1060);
        border: 1px solid #6366f1;
        border-radius: 10px;
        padding: 14px 12px;
        width: 190px;
        box-shadow: 0 8px 30px rgba(99, 102, 241, .4);
    }

    #rename-modal-title {
        font-size: 12px;
        font-weight: 800;
        color: #c7d2fe;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    #rename-input {
        width: 100%;
        background: #312e81;
        border: 1px solid #4f46e5;
        border-radius: 5px;
        padding: 5px 7px;
        color: #e0e7ff;
        font-size: 12px;
        box-sizing: border-box;
        margin-bottom: 8px;
        outline: none;
    }

    #rename-input:focus {
        border-color: #818cf8;
    }

    .rename-btn-row {
        display: flex;
        gap: 6px;
    }

    #rename-confirm {
        flex: 1;
        background: linear-gradient(135deg, #4f46e5, #7c3aed);
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 5px;
        cursor: pointer;
        font-size: 11px;
        font-weight: 700;
    }

    #rename-cancel {
        flex: 1;
        background: #374151;
        color: #9ca3af;
        border: none;
        border-radius: 5px;
        padding: 5px;
        cursor: pointer;
        font-size: 11px;
    }

    #rename-err {
        color: #f87171;
        font-size: 10px;
        margin-top: 5px;
        min-height: 14px;
    }

    /* ── 装扮卡片状态标签 ────────────── */
    .decoration-status {
        font-size: 9px;
        padding: 1px 6px;
        border-radius: 8px;
        margin-left: 6px;
    }
    .decoration-status.active { background: #065f46; color: #6ee7b7; }
    .decoration-expiry { font-size: 9px; color: #9ca3af; margin-top: 2px; }

    .decoration-note {
        grid-column: 1 / -1;
        margin: 0 0 6px;
        padding: 7px 8px;
        border: 1px solid rgba(251, 191, 36, .35);
        border-radius: 8px;
        background: rgba(120, 53, 15, .28);
        color: #fde68a;
        font-size: 10px;
        line-height: 1.45;
    }

    #shop-decorations-list {
        flex: 1;
        overflow-y: auto;
        padding: 6px 5px;
        scrollbar-width: thin;
        scrollbar-color: #4338ca #0f0c29;
        display: none;
    }
</style>

<div id="shop-panel"
    data-shop-items-url="{{ route('shop.items') }}"
    data-shop-buy-url="{{ route('shop.buy') }}"
    data-shop-rename-url="{{ route('shop.rename') }}">

    {{-- 余额栏 --}}
    <div id="shop-balance-bar">
        💰 <span id="shop-jjb">--</span> 金币
        <span id="shop-week-badge"></span>
    </div>

    {{-- Tab 导航 --}}
    <div id="shop-tabs" style="display:flex; border-bottom: 1px solid #3730a3; flex-shrink: 0;">
        <button class="shop-tab active" data-shop-tab="items" style="flex:1; padding: 6px; background: transparent; border: none; color: #a5b4fc; font-size: 11px; cursor: pointer; border-bottom: 2px solid transparent;">特效道具</button>
        <button class="shop-tab" data-shop-tab="decorations" style="flex:1; padding: 6px; background: transparent; border: none; color: #6b7280; font-size: 11px; cursor: pointer; border-bottom: 2px solid transparent;">个人装扮</button>
    </div>

    {{-- Toast --}}
    <div id="shop-toast"></div>

    {{-- 特效道具列表 --}}
    <div id="shop-items-list">
        <div style="text-align:center;color:#6366f1;padding:20px 0;font-size:11px;">加载中…</div>
    </div>

    {{-- 个人装扮列表 --}}
    <div id="shop-decorations-list">
        <div style="text-align:center;color:#6366f1;padding:20px 0;font-size:11px;">加载中…</div>
    </div>

    {{-- 改名弹框 --}}
    <div id="rename-modal">
        <div id="rename-modal-inner">
            <div id="rename-modal-title">🎭 使用改名卡</div>
            <input id="rename-input" type="text" maxlength="10" placeholder="输入新昵称（1-10字）">
            <div class="rename-btn-row">
                <button id="rename-confirm" data-shop-rename-confirm>确认改名</button>
                <button id="rename-cancel" data-shop-rename-cancel>取消</button>
            </div>
            <div id="rename-err"></div>
        </div>
    </div>
</div>


{{-- 紧凑商店面板脚本已迁移到 resources/js/chat-room/compact-shop-panel.js --}}