<!-- Account Settings Popup -->
<div class="form-popup" id="account_settings_form" style="display: none; overflow: hidden; position: absolute; width: 500px; height: 550px; border-radius: 10px;">

    <!-- Draggable Header Section -->
    <div class="dialog-header" id="account_settings_header">
        <h1>Account Settings</h1>
        <button class="dialog-close-btn" onclick="UI.account.closeAccountSettings()">&times;</button>
    </div>

    <!-- Tabs -->
    <div class="account-tabs">
        <button class="account-tab active" data-tab="profile" onclick="UI.account.switchTab('profile')">Profile</button>
        <button class="account-tab" data-tab="wallet" onclick="UI.account.switchTab('wallet')">Wallet</button>
    </div>

    <!-- Main Content -->
    <div class="form-container" style="padding: 15px; overflow-y: auto; height: calc(100% - 100px);">

        <!-- Profile Tab -->
        <div id="profile_tab" class="tab-panel active">
            <div class="settings-section">
                <h4>Email</h4>
                <div class="settings-row">
                    <label>Current Email:</label>
                    <span id="current_email">Not set</span>
                </div>
                <div class="settings-row">
                    <input type="email" id="new_email" placeholder="Enter new email">
                    <button class="btn" onclick="UI.account.updateEmail()">Update</button>
                </div>
            </div>

            <div class="settings-section">
                <h4>Password</h4>
                <div class="settings-row">
                    <input type="password" id="current_password" placeholder="Current password">
                </div>
                <div class="settings-row">
                    <input type="password" id="new_password" placeholder="New password">
                </div>
                <div class="settings-row">
                    <input type="password" id="confirm_password" placeholder="Confirm new password">
                </div>
                <div class="settings-row">
                    <button class="btn" onclick="UI.account.updatePassword()" style="width: 200px;">Change Password</button>
                </div>
            </div>
        </div>

        <!-- Wallet Tab -->
        <div id="wallet_tab" class="tab-panel">
            <div id="wallet_section">
                <div id="no_wallet" style="display: none;">
                    <p style="font-size: 13px; margin-bottom: 5px;">You haven't created a wallet yet.</p>
                    <p style="font-size: 11px; color: #888; margin: 8px 0;">
                        Generate a wallet to deposit BTC and pay for premium strategies.
                        Two addresses will be created:
                    </p>
                    <ul style="font-size: 11px; color: #666; margin: 5px 0 10px 20px; padding: 0;">
                        <li><strong>Fee Address</strong> - For strategy fees (we manage, limited to ~$50)</li>
                        <li><strong>Sweep Address</strong> - Your personal address (only you control)</li>
                    </ul>
                    <button class="btn" onclick="UI.account.showSetupDialog()">Setup Wallet</button>
                </div>

                <div id="wallet_info" style="display: none;">
                    <!-- Fee Address -->
                    <div class="wallet-row">
                        <label>Fee Address <span id="wallet_network" style="font-size: 10px; color: #888;"></span>:</label>
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <code id="btc_address" style="word-break: break-all; font-size: 11px; background: #f8f9fa; padding: 5px 8px; border-radius: 3px; flex: 1;"></code>
                            <button class="btn" onclick="UI.account.copyAddress('fee')" style="padding: 3px 10px; font-size: 10px;">Copy</button>
                        </div>
                        <p style="font-size: 10px; color: #888; margin: 3px 0 0 0;">Deposit here for strategy fees. Max ~$50. Excess auto-sweeps.</p>
                    </div>

                    <!-- Sweep Address -->
                    <div class="wallet-row">
                        <label>Sweep Address (Your Control):</label>
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <code id="sweep_address" style="word-break: break-all; font-size: 11px; background: #f8f9fa; padding: 5px 8px; border-radius: 3px; flex: 1;"></code>
                            <button class="btn" onclick="UI.account.copyAddress('sweep')" style="padding: 3px 10px; font-size: 10px;">Copy</button>
                        </div>
                        <p style="font-size: 10px; color: #888; margin: 3px 0 0 0;">Excess funds auto-sent here. Only you have the private key.</p>
                    </div>

                    <div class="wallet-row">
                        <label>Spendable Credits:</label>
                        <span id="credits_balance" style="font-weight: bold; font-size: 14px;">0</span>
                        <span style="font-size: 12px; color: #666;">BTC</span>
                    </div>

                    <div id="wallet_disabled_warning" style="display: none; background: #fff3cd; border: 1px solid #ffc107; color: #856404; padding: 8px; border-radius: 4px; font-size: 11px; margin: 10px 0;">
                        Wallet disabled - balance over $50 cap. Funds will be auto-swept to your sweep address.
                    </div>

                    <div style="margin: 10px 0;">
                        <button class="btn" onclick="UI.account.showWithdrawDialog()">Withdraw</button>
                        <button class="btn" onclick="UI.account.showViewKeysDialog()">View Keys</button>
                        <button class="btn" onclick="UI.account.showCreditDialog()">Test Credit</button>
                    </div>

                    <p style="font-size: 11px; color: #888; margin: 8px 0;">
                        <strong>Reminder:</strong> Keep only funds you intend to use. Excess over ~$50 is auto-swept to your sweep address.
                    </p>
                </div>
            </div>

            <!-- Transaction History -->
            <div class="settings-section" style="margin-top: 15px;">
                <h4>Recent Activity</h4>
                <div id="transactions_container" style="max-height: 150px; overflow-y: auto;">
                    <table id="transactions_table" style="width: 100%; border-collapse: collapse; font-size: 11px;">
                        <thead>
                            <tr style="background: #f8f9fa;">
                                <th style="text-align: left; padding: 5px; border-bottom: 1px solid #ddd;">Date</th>
                                <th style="text-align: left; padding: 5px; border-bottom: 1px solid #ddd;">Type</th>
                                <th style="text-align: left; padding: 5px; border-bottom: 1px solid #ddd;">Amount</th>
                                <th style="text-align: left; padding: 5px; border-bottom: 1px solid #ddd;">Reference</th>
                            </tr>
                        </thead>
                        <tbody id="transactions_body">
                            <tr>
                                <td colspan="4" style="text-align: center; color: #888; font-style: italic; padding: 10px;">No transactions yet</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- Resizer -->
    <div id="resize-account" class="resize-handle"></div>
</div>

<!-- Wallet Setup Modal with Terms -->
<div class="form-popup" id="wallet_setup_modal" style="display: none; overflow: hidden; position: absolute; width: 550px; height: 600px; border-radius: 10px;">
    <div class="dialog-header" id="wallet_setup_header">
        <h1>Setup Bitcoin Wallet</h1>
        <button class="dialog-close-btn" onclick="UI.account.closeSetupDialog()">&times;</button>
    </div>

    <div class="form-container" style="padding: 15px; overflow-y: auto; height: calc(100% - 60px);">
        <div class="terms-section">
            <h5 style="margin-top: 0; font-size: 13px;">Terms of Service - Wallet Custody</h5>
            <div style="background: #f8f9fa; border: 1px solid #ddd; border-radius: 4px; padding: 15px; max-height: 200px; overflow-y: auto; font-size: 12px; margin-bottom: 15px;">
                <p style="margin: 10px 0 5px 0;"><strong>Two-Address System:</strong></p>
                <ul style="margin: 5px 0 10px 20px; padding: 0;">
                    <li style="margin-bottom: 5px;"><strong>Fee Address:</strong> We generate and store the private key for this address to manage strategy fee transactions. You will receive a copy of the private key for your records.</li>
                    <li style="margin-bottom: 5px;"><strong>Sweep Address:</strong> Your personal wallet where excess funds are sent. You can provide your own address (e.g., from PayPal, Coinbase, hardware wallet) or we can generate one for you.</li>
                </ul>

                <p style="margin: 10px 0 5px 0;"><strong>Balance Cap & Auto-Sweep:</strong></p>
                <ul style="margin: 5px 0 10px 20px; padding: 0;">
                    <li style="margin-bottom: 5px;">The Fee Address has a ~$50 USD balance cap to limit liability.</li>
                    <li style="margin-bottom: 5px;">Any amount exceeding this cap will be automatically transferred to your Sweep Address.</li>
                </ul>

                <p style="margin: 10px 0 5px 0;"><strong>Your Responsibilities:</strong></p>
                <ul style="margin: 5px 0 10px 20px; padding: 0;">
                    <li style="margin-bottom: 5px;">You are the sole custodian of both Bitcoin addresses.</li>
                    <li style="margin-bottom: 5px;">You can deposit and withdraw from the Fee Address at any time.</li>
                    <li style="margin-bottom: 5px;">Only keep funds you intend to use for strategy fees in the Fee Address.</li>
                    <li style="margin-bottom: 5px;"><strong>Save your private keys securely</strong> - we cannot recover keys we don't store.</li>
                </ul>

                <p style="margin: 10px 0 5px 0;"><strong>Disclaimers:</strong></p>
                <ul style="margin: 5px 0 10px 20px; padding: 0;">
                    <li style="margin-bottom: 5px;">We are not responsible for blockchain transaction failures, delays, or fees.</li>
                    <li style="margin-bottom: 5px;">While we strive to keep our systems secure, we are not responsible for losses due to security breaches. Do not store excess funds.</li>
                    <li style="margin-bottom: 5px;">You grant us permission to withdraw strategy fees from the Fee Address and transfer excess funds to your Sweep Address.</li>
                </ul>
            </div>

            <!-- Sweep Address Option -->
            <div style="margin: 15px 0; padding: 15px; background: #f8f9fa; border: 1px solid #ddd; border-radius: 4px;">
                <h5 style="margin: 0 0 5px 0; font-size: 13px;">Sweep Address</h5>
                <p style="font-size: 11px; color: #666; margin-bottom: 10px;">Where should excess funds (over ~$50) be sent?</p>

                <div style="margin: 10px 0;">
                    <label style="display: block; padding: 10px; margin: 5px 0; background: white; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; height: 64px;">
                        <input type="radio" name="sweep_option" value="generate" checked onchange="UI.account.toggleSweepOption()" style="margin-right: 8px;">
                        <span style="font-size: 12px;">Generate a new address for me</span>
                        <span style="display: block; margin-left: 22px; font-size: 11px; color: #666;">(We'll create a new address and show you the private key)</span>
                    </label>
                    <label style="display: block; padding: 10px; margin: 5px 0; background: white; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; height: 64px;">
                        <input type="radio" name="sweep_option" value="own" onchange="UI.account.toggleSweepOption()" style="margin-right: 8px;">
                        <span style="font-size: 12px;">Use my own address</span>
                        <span style="display: block; margin-left: 22px; font-size: 11px; color: #666;">(Enter an address from PayPal, Coinbase, hardware wallet, etc.)</span>
                    </label>
                </div>

                <div id="own_address_input" style="display: none; margin-top: 10px; padding: 10px; background: #fff8e1; border: 1px solid #ffc107; border-radius: 4px;">
                    <label style="display: block; font-size: 12px; margin-bottom: 5px;">Your Bitcoin Address:</label>
                    <input type="text" id="user_sweep_address" placeholder="Enter your Bitcoin address (tb1..., m..., n..., etc.)" style="width: 100%; padding: 8px; font-size: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
                    <p style="font-size: 10px; color: #666; margin: 5px 0 0 0;">Make sure this is a valid testnet address that you control.</p>
                </div>
            </div>

            <div style="display: flex; align-items: flex-start; gap: 10px; margin: 15px 0; font-size: 12px;">
                <input type="checkbox" id="terms_checkbox" style="margin-top: 3px;">
                <label for="terms_checkbox" style="cursor: pointer;">I have read, understand, and agree to these terms. I understand that I am responsible for my wallet keys.</label>
            </div>
        </div>

        <div style="text-align: center; margin-top: 15px;">
            <button class="btn cancel" onclick="UI.account.closeSetupDialog()">Cancel</button>
            <button class="btn" id="create_wallet_btn" onclick="UI.account.createWallet()" disabled>Create Wallet</button>
        </div>
    </div>

    <div id="resize-wallet-setup" class="resize-handle"></div>
</div>

<!-- Keys Display Modal (shown after creation, requires acknowledgment) -->
<div class="form-popup" id="wallet_keys_modal" style="display: none; overflow: hidden; position: absolute; width: 550px; height: 500px; border-radius: 10px;">
    <div class="dialog-header warning" id="wallet_keys_header">
        <h1>Your Wallet Keys - SAVE THESE NOW</h1>
    </div>

    <div class="form-container" style="padding: 15px; overflow-y: auto; height: calc(100% - 60px);">
        <p style="color: #c00; font-size: 12px; margin-bottom: 15px;">
            <strong>CRITICAL:</strong> Save these keys securely before closing this dialog.
            The Sweep Address private key will <strong>NOT</strong> be stored and <strong>CANNOT</strong> be recovered.
        </p>

        <div style="margin: 15px 0;">
            <div style="background: #f8f9fa; border: 1px solid #ddd; border-radius: 4px; padding: 12px; margin-bottom: 15px;">
                <h5 style="margin: 0 0 10px 0; font-size: 12px;">Fee Address (We Manage)</h5>
                <div style="margin-bottom: 10px;">
                    <label style="display: block; font-size: 11px; color: #666; margin-bottom: 3px;">Network:</label>
                    <code id="modal_network"></code>
                </div>
                <div style="margin-bottom: 10px;">
                    <label style="display: block; font-size: 11px; color: #666; margin-bottom: 3px;">Address:</label>
                    <div style="display: flex; align-items: center; gap: 5px;">
                        <code id="modal_fee_address" style="flex: 1; word-break: break-all; font-size: 11px; background: white; padding: 6px 8px; border-radius: 3px; border: 1px solid #ddd;"></code>
                        <button class="btn" onclick="UI.account.copyKey('modal_fee_address')" style="padding: 2px 8px; font-size: 9px;">Copy</button>
                    </div>
                </div>
                <div style="margin-bottom: 10px;">
                    <label style="display: block; font-size: 11px; color: #666; margin-bottom: 3px;">Private Key (WIF):</label>
                    <div style="display: flex; align-items: center; gap: 5px;">
                        <code id="modal_fee_private_key" style="flex: 1; word-break: break-all; font-size: 11px; background: #ffe0e0; padding: 6px 8px; border-radius: 3px; border: 1px solid #f5c6cb;"></code>
                        <button class="btn" onclick="UI.account.copyKey('modal_fee_private_key')" style="padding: 2px 8px; font-size: 9px;">Copy</button>
                    </div>
                </div>
            </div>

            <div class="sweep-section" style="background: #fff8e1; border: 1px solid #ffc107; border-radius: 4px; padding: 12px; margin-bottom: 15px;">
                <h5 style="margin: 0 0 10px 0; font-size: 12px;">Sweep Address (You Control - SAVE THIS KEY!)</h5>
                <div style="margin-bottom: 10px;">
                    <label style="display: block; font-size: 11px; color: #666; margin-bottom: 3px;">Address:</label>
                    <div style="display: flex; align-items: center; gap: 5px;">
                        <code id="modal_sweep_address" style="flex: 1; word-break: break-all; font-size: 11px; background: white; padding: 6px 8px; border-radius: 3px; border: 1px solid #ddd;"></code>
                        <button class="btn" onclick="UI.account.copyKey('modal_sweep_address')" style="padding: 2px 8px; font-size: 9px;">Copy</button>
                    </div>
                </div>
                <div style="margin-bottom: 10px;">
                    <label style="display: block; font-size: 11px; color: #666; margin-bottom: 3px;">Private Key (WIF) - <span style="color: #c00; font-weight: bold;">SAVE THIS - NOT STORED!</span>:</label>
                    <div style="display: flex; align-items: center; gap: 5px;">
                        <code id="modal_sweep_private_key" style="flex: 1; word-break: break-all; font-size: 11px; background: #ffcccc; padding: 6px 8px; border-radius: 3px; border: 1px solid #ff6666;"></code>
                        <button class="btn" onclick="UI.account.copyKey('modal_sweep_private_key')" style="padding: 2px 8px; font-size: 9px;">Copy</button>
                    </div>
                </div>
            </div>
        </div>

        <div style="display: flex; align-items: flex-start; gap: 10px; margin: 15px 0; font-size: 12px;">
            <input type="checkbox" id="keys_saved_checkbox" style="margin-top: 3px;">
            <label for="keys_saved_checkbox" style="cursor: pointer;">I have securely saved both private keys. I understand the Sweep Address key cannot be recovered.</label>
        </div>

        <div style="text-align: center;">
            <button class="btn" id="close_keys_btn" onclick="UI.account.closeKeysModal()" disabled>
                I've Saved My Keys - Close
            </button>
        </div>
    </div>

    <div id="resize-wallet-keys" class="resize-handle"></div>
</div>

<!-- View Keys Modal (for viewing fee address keys later) -->
<div class="form-popup" id="view_keys_modal" style="display: none; overflow: hidden; position: absolute; width: 450px; height: 320px; border-radius: 10px;">
    <div class="dialog-header" id="view_keys_header">
        <h1>Fee Address Keys</h1>
        <button class="dialog-close-btn" onclick="UI.account.closeViewKeysDialog()">&times;</button>
    </div>

    <div class="form-container" style="padding: 15px; overflow-y: auto; height: calc(100% - 60px);">
        <p style="font-size: 11px; color: #666; margin-bottom: 10px;">These are the keys for your Fee Address (managed wallet).</p>

        <div style="margin-bottom: 10px;">
            <label style="display: block; font-size: 11px; color: #666; margin-bottom: 3px;">Network:</label>
            <code id="view_network"></code>
        </div>
        <div style="margin-bottom: 10px;">
            <label style="display: block; font-size: 11px; color: #666; margin-bottom: 3px;">Address:</label>
            <div style="display: flex; align-items: center; gap: 5px;">
                <code id="view_fee_address" style="flex: 1; word-break: break-all; font-size: 11px; background: #f8f9fa; padding: 6px 8px; border-radius: 3px; border: 1px solid #ddd;"></code>
                <button class="btn" onclick="UI.account.copyKey('view_fee_address')" style="padding: 2px 8px; font-size: 9px;">Copy</button>
            </div>
        </div>
        <div style="margin-bottom: 10px;">
            <label style="display: block; font-size: 11px; color: #666; margin-bottom: 3px;">Private Key (WIF):</label>
            <div style="display: flex; align-items: center; gap: 5px;">
                <code id="view_fee_private_key" style="flex: 1; word-break: break-all; font-size: 11px; background: #ffe0e0; padding: 6px 8px; border-radius: 3px; border: 1px solid #f5c6cb;"></code>
                <button class="btn" onclick="UI.account.copyKey('view_fee_private_key')" style="padding: 2px 8px; font-size: 9px;">Copy</button>
            </div>
        </div>

        <p style="color: #c00; font-size: 12px; margin-top: 15px;">
            Note: Sweep Address private key is not stored. If you lost it, those funds are unrecoverable.
        </p>

        <div style="text-align: center; margin-top: 15px;">
            <button class="btn" onclick="UI.account.closeViewKeysDialog()">Close</button>
        </div>
    </div>

    <div id="resize-view-keys" class="resize-handle"></div>
</div>

<!-- Withdraw Dialog -->
<div class="form-popup" id="withdraw_modal" style="display: none; overflow: hidden; position: absolute; width: 400px; height: 250px; border-radius: 10px;">
    <div class="dialog-header" id="withdraw_header">
        <h1>Withdraw BTC</h1>
        <button class="dialog-close-btn" onclick="UI.account.closeWithdrawDialog()">&times;</button>
    </div>

    <div class="form-container" style="padding: 15px;">
        <div style="margin-bottom: 12px;">
            <label style="display: block; font-size: 12px; margin-bottom: 4px;">Amount (BTC):</label>
            <input type="text" id="withdraw_amount" placeholder="0.0001" style="width: 100%; padding: 8px; font-size: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
        </div>
        <div style="margin-bottom: 12px;">
            <label style="display: block; font-size: 12px; margin-bottom: 4px;">Destination Address:</label>
            <input type="text" id="withdraw_address" placeholder="tb1... or m/n..." style="width: 100%; padding: 8px; font-size: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
        </div>
        <div style="text-align: center; margin-top: 15px;">
            <button class="btn cancel" onclick="UI.account.closeWithdrawDialog()">Cancel</button>
            <button class="btn" onclick="UI.account.submitWithdrawal()">Withdraw</button>
        </div>
    </div>

    <div id="resize-withdraw" class="resize-handle"></div>
</div>

<!-- Test Credit Dialog -->
<div class="form-popup" id="credit_modal" style="display: none; overflow: hidden; position: absolute; width: 350px; height: 220px; border-radius: 10px;">
    <div class="dialog-header" id="credit_header">
        <h1>Add Test Credit</h1>
        <button class="dialog-close-btn" onclick="UI.account.closeCreditDialog()">&times;</button>
    </div>

    <div class="form-container" style="padding: 15px;">
        <p style="font-size: 11px; color: #666; margin-bottom: 10px;">This is for POC testing. Credits will be added instantly.</p>
        <div style="margin-bottom: 12px;">
            <label style="display: block; font-size: 12px; margin-bottom: 4px;">Amount (satoshis):</label>
            <input type="number" id="credit_amount" placeholder="10000" value="10000" style="width: 100%; padding: 8px; font-size: 12px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;">
        </div>
        <div style="text-align: center; margin-top: 15px;">
            <button class="btn cancel" onclick="UI.account.closeCreditDialog()">Cancel</button>
            <button class="btn" onclick="UI.account.submitCredit()">Add Credit</button>
        </div>
    </div>

    <div id="resize-credit" class="resize-handle"></div>
</div>

<style>
/* Username link style - styled as a clickable badge/pill */
.username-link {
    cursor: pointer;
    text-decoration: none;
    color: white;
    background: linear-gradient(135deg, #3E3AF2 0%, #6366f1 100%);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(62, 58, 242, 0.3);
    margin-right: 10px;
    height: 26px;
}

.username-link:hover {
    background: linear-gradient(135deg, #5754f7 0%, #818cf8 100%);
    box-shadow: 0 4px 8px rgba(62, 58, 242, 0.4);
    transform: translateY(-1px);
}

.username-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(62, 58, 242, 0.3);
}

/* Add a user icon before the username */
.username-link::before {
    content: "\1F464";  /* Unicode user silhouette */
    margin-right: 6px;
    font-size: 12px;
}

/* Account tabs */
.account-tabs {
    display: flex;
    border-bottom: 1px solid #ddd;
    background: #f8f9fa;
}

.account-tab {
    flex: 1;
    padding: 10px 15px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 13px;
    color: #666;
    border-bottom: 3px solid transparent;
}

.account-tab:hover {
    background: #e9ecef;
}

.account-tab.active {
    color: #3E3AF2;
    border-bottom-color: #3E3AF2;
    background: white;
}

/* Tab panels */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

/* Settings sections */
.settings-section {
    margin-bottom: 20px;
}

.settings-section h4 {
    font-size: 13px;
    color: #333;
    margin: 0 0 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #eee;
}

.settings-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.settings-row label {
    font-size: 12px;
    color: #666;
    min-width: 100px;
}

.settings-row input {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 12px;
}

.settings-row input:focus {
    border-color: #3E3AF2;
    outline: none;
}

/* Wallet row */
.wallet-row {
    margin-bottom: 12px;
}

.wallet-row label {
    display: block;
    font-size: 11px;
    color: #666;
    margin-bottom: 3px;
}

/* Transaction table colors */
.tx-positive {
    color: #28a745;
}

.tx-negative {
    color: #dc3545;
}

/* Resize handle (if not defined elsewhere) */
.resize-handle {
    width: 20px;
    height: 20px;
    background-color: #000;
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: se-resize;
    z-index: 10;
    border-radius: 3px;
}
</style>
