/* (Keep all the same CSS styles from previous implementation) */
    .custom-mode-panel {
        display: none;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: white;
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        z-index: 1000000;
        max-height: 70vh;
        overflow-y: auto;
    }

    .custom-mode-text-sound-container{
        margin-top: 10px;
    }
    
    .custom-mode-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        border-bottom: 1px solid var(--border-color);
    }
    .custom-mode-header h3 {
        color: var(--color-gray-500);
        font-weight: 700;
        font-size: 16px;
    }

    .custom-mode-content {
          padding: 0px 16px 16px 16px;
    }
    .close-panel-btn {
        background: none;
        border: none;
        font-size: 24px;
        cursor: pointer;
        color: var(--color-gray-500);
    }
    
    #customInstructionsInputMobile {
        width: 100%;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin: 16px 0;
        resize: none;
    }

    .custom-mode-generate-container{
        display: flex;
        justify-content: space-between;
        gap: 10px;
        align-items: center;
    }
    
    .generate-btn {
        width: 62%;
        height: 50px;
        background-color: var(--color-primary-light);
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
    }
    
    .generate-btn:hover {
        background-color: var(--color-primary-dark);
    }
    
    .mode-btn {
        white-space: nowrap;
        /* overflow: hidden; */
        text-overflow: ellipsis;
        /* max-width: 100px; */
    }
    
    .suggestions-section, .recent-searches-section {
        margin-bottom: 16px;
    }
    
    .custom-mode-text-sound{
        color: var(--color-gray-500);
        font-weight: 700;
        font-size: 14px;

    }

    .suggestions-section h4, .recent-searches-section h4 {
        margin-bottom: 8px;
         color: var(--color-text-505050);
        font-weight: 700;
        font-size: 14px;
    }
    
    .suggestion-tags, .recent-searches {
        display: flex;
        flex-direction: column;
        gap: 8px;
        color: var(--color-text-505050);
        font-size: 12px;
    }
    
    .suggestion-tag, .recent-search-tag {
        border-radius: 16px;
        cursor: pointer;
        font-size: 14px;
    }
    
    .no-recent {
        color: #999;
        font-style: italic;
        font-size: 14px;
    }