/* style.css (Adjustments for Standard Audio Player) */

/* ... (Keep all previous styles: Basic Reset, Page Container, Top Bar, Menu, Main Content Padding, Textarea, Boxes, Action Bar etc.) ... */


/* AI Reply Section Styles */
.main-content p strong {
    display: block;
    margin-bottom: 0.5rem;
}

#loading {
  font-style: italic;
  margin: 10px 0;
  color: #666;
}

/* --- Remove/Comment Out Styles for Custom Play Button --- */
/*
.ai-reply-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#playBtn {
  font-size: 1.8rem;
  padding: 0;
}
*/

/* --- Styles for Standard Audio Player Wrapper (Optional) --- */
.ai-reply-audio {
    margin-top: 0.5rem; /* Add some space above the player */
}
audio#replyAudio {
    width: 100%; /* Ensure player takes full width */
    height: 50px; /* Standard height, adjust if needed */
    display: block; /* Make sure it's block to respect width */
    /* Add any other desired styling */
}


/* --- Styles for Text Controls Wrapper --- */
.ai-reply-text-controls {
    margin-top: 0.75rem; /* Space above the text buttons */
    display: flex; /* Align buttons horizontally */
    gap: 0.5rem; /* Space between buttons */
    flex-wrap: wrap; /* Allow wrapping on small screens */
}
.ai-reply-text-controls button {
    padding: 0.3rem 0.6rem;
    font-size: 0.85rem;
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
}
.ai-reply-text-controls button:hover {
    background-color: #e0e0e0;
}


/* ... (Keep .box, .tips styles) ... */

/* ... (Keep .action-bar and its button styles) ... */

/* --- Desktop Adjustments --- */
@media (min-width: 601px) {
    /* ... (Keep previous desktop overrides) ... */

    audio#replyAudio {
        /* Maybe slightly less width on desktop? */
        /* width: 80%; */
    }

    .ai-reply-text-controls {
        /* Keep flex or adjust alignment */
    }
}