/* Safari browser frame */
        .browser {
            width: 80%;
            max-width: 1200px;
            height: 750px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 12px;
            margin: 50px auto;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        /* Top bar with Safari buttons */
        .toolbar {
            height: 50px;
            display: flex;
            align-items: center;
            background-color: #eaeaea;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            padding-left: 15px;
            position: relative;
        }

        /* Safari traffic lights buttons */
        .traffic-lights {
            display: flex;
            gap: 8px;
        }

        .traffic-light {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            cursor: pointer;
        }

        .traffic-light.red { background-color: #ff605c; }
        .traffic-light.yellow { background-color: #ffbd44; }
        .traffic-light.green { background-color: #00ca4e; }

        /* URL bar */
        .url-bar {
            flex-grow: 1;
            height: 30px;
            margin-left: 20px;
            border: 1px solid #ccc;
            border-radius: 8px;
            padding-left: 15px;
            font-size: 14px;
            color: #333;
            background-color: #fdfdfd;
        }

        /* Plugin button */
        .plugin-btn {
            width: 24px;
            height: 24px;
            background-color: #0073e6;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            position: absolute;
            left: 50px;
            animation: pulse 1.5s infinite;
        }
        
        /* Animation to make plugin button "light up" */
        @keyframes pulse {
            0% { box-shadow: 0 0 0 0 rgba(0, 115, 230, 0.7); }
            70% { box-shadow: 0 0 0 10px rgba(0, 115, 230, 0); }
            100% { box-shadow: 0 0 0 0 rgba(0, 115, 230, 0); }
        }

        
        
        /* Pop-up window */
        .popup {
            display: none;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            width: 400px;
            height: 300px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            z-index: 999;
            padding: 20px;
        }

        .popup h2 {
            margin: 0;
            font-size: 18px;
        }

        /* Tabs */
        .tab-header {
            display: flex;
            border-bottom: 1px solid #ccc;
            margin-top: 20px;
        }

        .tab-header div {
            flex: 1;
            text-align: center;
            padding: 10px;
            cursor: pointer;
        }

        .active-tab {
            border-bottom: 2px solid #0073e6;
            font-weight: bold;
        }

        .tab-content {
            padding: 20px;
            font-size: 14px;
            color: #333;
        }

        .tab-content small {
            font-size: 12px;
            color: gray;
        }

        /* Button for the second tab */
        .popup-btn {
            background-color: #0073e6;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        /* Style for the arrow, line, and text */
        .shining-arrow {
            position: absolute;
            top: -40px; /* Adjust to position it correctly above the plugin button */
            left: 25px; /* Align it with the plugin button's position */
            display: flex;
            flex-direction: column;
            align-items: center;
            z-index: 1000;
            animation: shine 1s infinite; /* Shining effect */

        }

        /* Text above the arrow */
        .shining-arrow .click-text {
            color: red;
            font-weight: bold;
            font-size: 16px;
            margin-bottom: 5px; /* Space between text and arrow */
        }

        /* Horizontal line leading to the arrow */
        .shining-arrow .line {
            width: 100px; /* Adjust the length of the line */
            height: 2px;
            background-color: red;
            margin-bottom: 5px; /* Space between line and arrow */
        }

        /* Arrow pointing downwards */
        .shining-arrow .arrow {
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-top: 20px solid red; /* Creates a downwards pointing triangle */
        }

        @keyframes shine {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }


        /* New Browser Window */
        .new-browser-window {
            display: block;
            position: fixed;
            top: 10%;
            left: 20%;
            width: 600px;
            height: 600px;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            overflow-y: auto; /* Makes content scrollable if overflow */
            z-index: 1000;
        }

        
        
        /* Safari-like top toolbar */
        .new-browser-toolbar {
            height: 40px;
            background-color: #eaeaea;
            display: flex;
            align-items: center;
            padding-left: 15px;
            border-top-left-radius: 12px;
            border-top-right-radius: 12px;
            position: sticky;
            top: 0;
        }

        /* Same traffic lights for new window */
        .new-browser-toolbar .traffic-lights {
            display: flex;
            gap: 8px;
        }

        .new-browser-toolbar .traffic-light {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            cursor: pointer;
        }

        .new-browser-toolbar .traffic-light.red { background-color: #ff605c; }
        .new-browser-toolbar .traffic-light.yellow { background-color: #ffbd44; }
        .new-browser-toolbar .traffic-light.green { background-color: #00ca4e; }

        /* Content inside the new window */
        .new-browser-content {
            padding: 20px;
            font-size: 14px;
        }
        
        
        
        /* Twitter profile simulation */
        .twitter-page {
            background-color: #fff;
            border-top: 1px solid #ccc;
            padding: 20px;
            height: 100%;
            overflow-y: auto;
        }

        /* Twitter Profile Header */
        .profile-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            border-bottom: 1px solid #eaeaea;
            padding-bottom: 20px;
        }

        .profile-banner {
            width: 100%;
            height: 150px;
            background-color: #1da1f2;
        }

        .profile-picture {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: #ddd;
            border: 4px solid #fff;
            margin-top: -50px;
        }

        .profile-info {
            text-align: center;
            margin-top: 10px;
        }

        .profile-info h2 {
            margin: 0;
            font-size: 22px;
        }

        .profile-info p {
            margin: 5px 0;
            color: gray;
        }

        .profile-stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 10px;
        }

        .profile-stats div {
            text-align: center;
        }

        .profile-stats div span {
            font-weight: bold;
        }

        /* Tweets Section */
        .tweets-section {
            margin-top: 20px;
        }

        .tweet {
            border-bottom: 1px solid #eaeaea;
            padding: 15px 0;
            display: flex;
            gap: 15px;
        }

        .tweet .profile-pic {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ddd;
        }

        .tweet-content {
            flex-grow: 1;
        }

        .tweet-content h3 {
            margin: 0;
            font-size: 16px;
            font-weight: bold;
        }

        .tweet-content .username {
            color: gray;
            font-size: 14px;
        }

        .tweet-content .time {
            color: gray;
            font-size: 12px;
        }

        .tweet-content p {
            margin: 10px 0;
            font-size: 14px;
        }

        .tweet-engagement {
            display: flex;
            gap: 15px;
            font-size: 12px;
            color: gray;
        }

        .tweet-engagement div {
            display: flex;
            align-items: center;
            gap: 5px;
        }

        .retweet {
            color: green;
        }

        .like {
            color: red;
        }

        .retweeted-by, .liked-by {
            font-size: 12px;
            color: gray;
            margin-bottom: 5px;
            margin-left: 65px;
        }
        
                
        /* Tweet Box Hashtag */
        .tweet-box-hashtag {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            min-height: 100px;
            font-size: 14px;
        }
        
        
                /* Tweet box */
        .tweet-box {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-bottom: 10px;
            min-height: 80px;
            cursor: pointer;
            font-size: 14px;
        }

        .tweet-box.active {
            background-color: #f5f5f5;
        }

        /* Paraphrase Button */
        .paraphrase-btn {
            background-color: #e74c3c;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
        }

        /* Paraphrased result box */
        .result-box {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            margin-top: 10px;
            font-size: 14px;
            min-height: 60px;
        }

        .result-box .red-text {
            color: red;
            cursor: pointer;
        }

        .result-box .red-text:hover {
            text-decoration: underline;
        }

        /* Accuracy reduction */
        .accuracy-info {
            margin-top: 10px;
            font-size: 14px;
        }
        
        
        /* Reset Button */
        .reset-btn {
            margin-top: 20px;
            background-color: #3498db;
            color: white;
            padding: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: block;
            width: 100%;
            text-align: center;
        }
        
        
        /* Follow/Unfollow List */
        .account-list {
            margin-bottom: 30px;
        }

        .account-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .account-item .profile-info {
            display: flex;
            align-items: center;
        }

        .account-item img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 10px;
        }

        .account-item .username {
            font-size: 16px;
        }

        .follow-btn, .unfollow-btn {
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .follow-btn {
            background-color: #2ecc71;
            color: white;
        }

        .unfollow-btn {
            background-color: #e74c3c;
            color: white;
        }

        .followed, .unfollowed {
            background-color: #95a5a6;
            color: white;
        }

        /* Hashtag List */
        .hashtag-list {
            margin-bottom: 30px;
        }

        .hashtag-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        .hashtag-item .hashtag {
            font-size: 16px;
            font-weight: bold;
        }

        .add-hashtag-btn {
            padding: 8px 12px;
            border: none;
            border-radius: 4px;
            background-color: #3498db;
            color: white;
            cursor: pointer;
        }