modernchatgpt by mason20121981

/* ==UserStyle==
@name           Modern ChatGPT Revamp
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Modernize ChatGPT interface with glossy effects and rearrangements.
@author         FutureStyleFan
==/UserStyle== */

@-moz-document domain("chat.openai.com") {

/* General UI Enhancements */
body {
    font-family: "Segoe UI", Arial, sans-serif;
    background: linear-gradient(to bottom, #f5f7fa, #d7e0e8);
    color: #333;
    transition: all 0.3s ease-in-out;
}

/* Move profile picture to the left */
.chat-header-profile {
    position: absolute;
    top: 10px;
    left: 10px;
    border-radius: 50%;
    border: 2px solid #ccc;
    width: 50px;
    height: 50px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    background: #fff;
}

/* Move sidebar to the right */
.chat-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100vh;
    background: #ffffff;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 10;
    transition: all 0.3s ease-in-out;
    border-left: 1px solid #ddd;
}

/* Sidebar toggle button for smaller screens */
.sidebar-toggle {
    position: fixed;
    top: 15px;
    right: 260px;
    background: #0078D7;
    color: #fff;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Chat messages styling */
.chat-message {
    margin: 10px 0;
    padding: 15px;
    border-radius: 8px;
    background: #eaf4fe;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Enhance user messages */
.chat-message.user {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
}

/* Enhance AI messages */
.chat-message.ai {
    background: #fefefe;
    border: 1px solid #f5f5f5;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Add glossy button effects */
button {
    background: linear-gradient(to bottom, #0078D7, #005BB5);
    color: #fff;
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

button:hover {
    background: linear-gradient(to bottom, #005BB5, #003F8F);
    transform: scale(1.05);
}

/* Placeholder: Unlimited AI images container */
.unlimited-ai-images {
    position: fixed;
    bottom: 20px;
    right: 280px;
    width: 300px;
    height: 150px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    display: none; /* Set to block when activated */
}

/* Smooth transitions for interactions */
* {
    transition: all 0.3s ease-in-out;
}
}