:root{
    --bg:#070417; /* darker background tuned for purple */
    --panel: #230d46; /* panel with deeper purple tint */
    --main-bg: #2a053a; /* deep/dark purple for main container */
    --muted:#b7b7b7; /* softer muted purple */
    --accent:#53fc18; /* primary purple accent */
    --accent-strong:#b664ff; /* stronger/lighter purple for gradients */
    --glass: rgba(255,255,255,0.04);
    --card-radius:12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;min-height:100vh;display:flex;flex-direction:column;
    font-family: 'Outfit', Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(150deg,#5e28f2 0%, #f7d346 80%);
    color: #ffffff; /* slightly warm light text for purple */
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

header{
    display:flex;align-items:center;gap:1rem;padding:18px 24px;
    background: linear-gradient(90deg, rgba(255,255,255,0.02), transparent);
    border-bottom: 1px solid var(--glass);
}

/* Right-side control grouping in header */
.right-controls{margin-left:auto;display:inline-flex;align-items:center;gap:8px}
.right-controls .filter-btn{margin-left:6px}

/* Prevent labels in right-controls from wrapping into multiple lines */
.right-controls{white-space:nowrap}

/* Senders box on the right side */
#senders-box{position:fixed;right:12px;top:84px;width:220px;background:rgba(255,255,255,0.03);backdrop-filter:blur(6px);border-radius:10px;padding:8px;border:1px solid rgba(255,255,255,0.04);box-shadow:0 6px 18px rgba(0,0,0,0.35);z-index:60}
#senders-box .sb-header{font-weight:600;color:var(--muted);font-size:0.85rem;padding:6px 8px;border-bottom:1px solid rgba(255,255,255,0.02);}
#senders-box .sb-body{max-height:calc(100vh - 160px);overflow:auto;padding:6px 4px}
.sender-item{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:6px;background:transparent}
.sender-name{font-size:0.9rem;color:var(--muted);font-weight:600}
.sender-time{font-size:0.77rem;color:var(--muted);opacity:0.9}
.avatar-small{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;background:rgba(255,255,255,0.02);color:#fff;font-weight:700}

/* Tool buttons (export/clear) — compact pill style, keep text single-line */
.tool-btn{padding:.4rem .6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--muted);font-size:0.85rem;white-space:nowrap}
.tool-btn:hover{transform:translateY(-2px)}
.tool-btn:active{transform:translateY(0)}
.icon-btn{padding:.35rem .45rem;display:inline-flex;align-items:center;gap:6px}

header h3{margin:0;font-weight:600;letter-spacing:.2px}

/* Avatar next to the title */
.title-with-avatar{display:flex;align-items:center;gap:10px}
.title-with-avatar .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,0.06);box-shadow:0 6px 18px rgba(0,0,0,0.35)}

label{color:var(--muted);font-size:.95rem}
/* hide the channel label and input per user request */
label[for="channel"], input#channel{display:none !important}

input[type="text"], input, button{
    font-size:0.95rem;border-radius:10px;padding:.5rem .75rem;border:1px solid rgba(255,255,255,0.04);
}

/* Bulk-open controls in header */
#bulk-count{width:72px;border-radius:8px;padding:.35rem .5rem;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
#bulk-open{margin-left:6px;padding:.45rem .65rem;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent-strong));color:#12021a;border:0;cursor:pointer}
#bulk-open:hover{transform:translateY(-2px)}

input#channel{background:transparent;color:inherit;border:1px solid rgba(255,255,255,0.04);min-width:180px}

button{
    background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.04);padding:.45rem .75rem;border-radius:10px;cursor:pointer;transition:all .14s ease
}
button#connect{background:linear-gradient(90deg,var(--accent),var(--accent-strong));color:#12021a;box-shadow:0 6px 18px rgba(151,29,222,0.08);border:0}
button#disconnect{opacity:.85}
button:disabled{opacity:.45;cursor:not-allowed}

/* loading state for connect button */
button.loading{position:relative;padding-left:2.2rem}
button.loading::before{content:'';position:absolute;left:8px;top:50%;transform:translateY(-50%);width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,0.18);border-top-color:var(--accent);animation:spin .9s linear infinite}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}

/* Make the main container dark purple, large, and with minimal padding */
/* Ensure main fills remaining height and allows internal scrolling for children */
main{
    padding:4px; /* small padding */
    display:flex;flex-direction:column;align-items:center;flex:1 1 auto;min-height:0;
    background: linear-gradient(150deg,#5e28f2 0%, #f7d346 80%);
    width:100%;
}

#messages{
    width:100%;background:var(--panel);border-radius:var(--card-radius);padding:8px;flex:1 1 auto;overflow:auto;min-height:0;
    box-shadow: 0 20px 60px rgba(3,8,20,0.75);border:1px solid rgba(255,255,255,0.045);
}
#messages{
    width:100%;background:transparent;border-radius:var(--card-radius);padding:8px;flex:1 1 auto;overflow:auto;min-height:0;
}

/* Two-column main layout: messages (left) and new users (right) */
.app-main{display:grid;/* left: flexible, right: compact */grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:start;padding:12px 24px;width:100%;max-width:none;flex:1 1 auto;min-height:0}
.card{background:var(--panel);border:1px solid rgba(255,255,255,0.04);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,0.45);overflow:hidden}
.card-header{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.02);background:transparent}
.card-header h4{margin:0;font-size:1rem;color:var(--muted)}
.card-body{padding:10px}
.card-list{display:flex;flex-direction:column;gap:8px}
.user-card{display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;background:rgba(255,255,255,0.01)}
.user-card .avatar-small{width:36px;height:36px;border-radius:8px;object-fit:cover;border:1px solid rgba(255,255,255,0.03)}
.user-card .user-meta{display:flex;flex-direction:column}
.user-card .user-name{font-weight:600;color:#f0eaff}
.user-card .user-joined{font-size:0.8rem;color:var(--muted)}

@media (max-width:900px){
    .app-main{grid-template-columns:1fr;padding:8px}
    .right-col{order:2}
}

/* Right column: make users card compact and less prominent */
.right-col{align-self:start;display:flex;flex-direction:column;align-items:flex-end;position:relative}
.right-col .card{width:240px;max-width:240px;margin-left:0}
.left-col{min-width:0}
.card-messages{margin-left:0;display:flex;flex-direction:column;min-height:0;height:calc(100vh - 110px)}
.card-users{background:var(--panel);border:1px solid rgba(255,255,255,0.04);box-shadow:0 10px 30px rgba(0,0,0,0.45);min-height:0;display:flex;flex-direction:column}
.card-users .card-header{padding:8px 10px;flex:0 0 auto}
.card-users .card-body{padding:8px;overflow:auto;min-height:0;flex:1 1 auto}

/* Make messages card take full left column height and use internal scrolling */
.card-messages{width:100%}
.card-messages .card-body{padding:14px;display:flex;flex-direction:column;min-height:0}
/* messages list scrolls internally */
#messages{flex:1 1 auto;overflow:auto;padding:0}

/* users card: fixed to half of messages card height and scrolls internally when content exceeds */
.card-users{height:calc((100vh - 110px)/2)}
@media (max-width:900px){ .card-users{height:auto} }

/* Avoid body-level extra whitespace by ensuring html/body height and main/message layout use min-height:0 */
html, body, main { height: 100%; }

/* For very wide viewports, let the card use most of the available width */
@media (min-width:2000px){
    #messages{width:95%;max-width:none}
}

.msg{
    padding:.6rem .9rem;border-radius:10px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
    background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.015));
    border:1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 8px 20px rgba(2,6,23,0.45);
}
.msg{
    padding:.6rem .9rem;border-radius:10px;margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;gap:.75rem;
    background: rgba(8,6,12,0.65); /* slightly darker card for each message */
    border:1px solid rgba(255,255,255,0.03);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.02), 0 8px 20px rgba(2,6,23,0.35);
}

.msg .left{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;min-width:0;flex:1 1 auto}

.meta{color:#f0eaff;font-size:.87rem;font-weight:600;white-space:nowrap}
.content{font-size:.95rem;color:var(--accent);overflow:hidden;display:block;padding:.45rem .6rem;border-radius:8px;background:rgba(255,255,255,0.01);width:100%}

.content a{color:var(--accent);text-decoration:none;display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.content:hover{background:rgba(255,255,255,0.02)}

.content a.visited{opacity:0.6;color:var(--muted);text-decoration:line-through}

.content .ctx{color:var(--muted);margin-right:.6rem;display:inline-block;max-width:55%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.full-message{white-space:normal}

/* show the full message under each row */
.full-message{display:block;padding-top:.5rem;color:#e6ddff;font-size:.9rem;border-top:1px solid rgba(255,255,255,0.02);margin-top:.5rem}

#close-btn{background:rgba(255,255,255,0.02);border:0;color:var(--muted);padding:.25rem .45rem;border-radius:8px;cursor:pointer;transition:all .12s ease}
.close-btn:hover{transform:translateY(-1px);background:rgba(255,255,255,0.035);color:#ff8b8b}

#status{margin-left:auto;color:var(--accent);font-weight:700}

footer{padding:16px;text-align:center;color:var(--muted);font-size:.885rem}

.error{color:#ff8b8b}

@media (max-width:720px){
    header{padding:12px}
    /* keep messages large on mobile but use slightly more comfortable padding */
    #messages{height:56vh;padding:6px}
    .meta{font-size:.82rem}
}

#status {
    margin-left: auto;
    color: var(--accent);
    font-weight: 600;
}

#status-msg{margin-left:12px;color:var(--muted);font-weight:600;min-width:220px;text-align:right}

.status-wrap{display:inline-flex;align-items:center;gap:8px;margin-left:auto}
.status-wrap #status{color:var(--accent);font-weight:700}
.status-wrap #status-msg{margin-left:0;min-width:160px;text-align:right;color:var(--muted);font-weight:600}

/* Rates widget (inside right column, aligned under the users card) */
#rates-widget{position:relative;right:0;bottom:0;width:240px;background:var(--panel);border:1px solid rgba(255,255,255,0.04);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,0.5);overflow:hidden;z-index:20;margin-top:16px}
#rates-widget .rates-header{display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,0.02);font-weight:700;color:var(--muted)}
#rates-widget .rates-body{padding:8px;display:flex;flex-direction:column;gap:6px}
.rate-row{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;border-radius:8px;background:rgba(255,255,255,0.01)}
.rate-label{font-size:0.85rem;color:var(--muted)}
.rate-value{font-weight:700;color:var(--accent-strong)}
.rates-foot{font-size:0.75rem;color:var(--muted);padding:6px 8px;border-top:1px solid rgba(255,255,255,0.02);background:transparent}

footer {
    padding: 1rem;
    font-size: .85rem;
    color: #d0c0e8;
}

.error {
    color: #ffb0c0;
}

.log-info{margin-top:.5rem;color:#b8aee0;font-size:.85rem}

/* Added styles moved from inline JS */
#auth-overlay{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(2,6,10,0.85);display:flex;align-items:center;justify-content:center;z-index:20000}
#auth-overlay .auth-panel{background:#071826;padding:20px;border-radius:10px;box-shadow:0 20px 40px rgba(0,0,0,0.6);min-width:320px}
.auth-title{margin-bottom:10px;color:#efe6ff;font-weight:600}
.auth-input{width:100%;padding:8px;margin-bottom:8px}
.auth-msg{color:#f6a6a6;min-height:18px;margin-bottom:8px}
.auth-btn{width:100%}

#filter-bar{display:inline-flex;gap:6px;margin-left:12px}
.filter-btn{padding:6px 8px;font-size:13px;border-radius:6px;border:1px solid rgba(0,0,0,0.08);background:transparent;color:#ddd;cursor:pointer}
.filter-btn.active{background:transparent;color:inherit;border-color:rgba(255,255,255,0.06);box-shadow:none}

/* Per-platform active frame (border + soft shadow) */
.filter-btn.youtube.active{border:2px solid #FF0000;box-shadow:0 6px 18px rgba(255,0,0,0.08)}
.filter-btn.twitter.active{border:2px solid #1DA1F2;box-shadow:0 6px 18px rgba(29,161,242,0.08)}
.filter-btn.instagram.active{border:2px solid #E1306C;box-shadow:0 6px 18px rgba(225,49,108,0.08)}
.filter-btn.all.active{border:2px solid var(--accent);box-shadow:0 6px 18px rgba(83,252,24,0.06)}
/* Bluesky (cyan) active frame */
.filter-btn.bluesky.active{border:2px solid #0EBEFF;box-shadow:0 6px 18px rgba(14,190,255,0.08)}
/* Reddit (orange) active frame */
.filter-btn.reddit.active{border:2px solid #FF4500;box-shadow:0 6px 18px rgba(255,69,0,0.08)}


/* Icon-only filter buttons (small square) */
.filter-btn svg{display:block}
/* unify icon button size */
.filter-btn{width:40px;height:40px;padding:6px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px}
.filter-btn svg{width:18px;height:18px}
/* Make the twitter filter icon slightly larger to match other badges */
.filter-btn.twitter svg{width:22px;height:22px}
.filter-btn.youtube{width:64px;padding:6px 12px;border-radius:8px} /* YouTube rectangular - slightly wider */
/* Make the YouTube SVG slightly larger for visual weight */
.filter-btn.youtube svg{width:22px;height:22px}
.filter-btn.youtube{width:64px;padding:6px 12px;border-radius:8px} /* YouTube rectangular */
/* Make the YouTube SVG fill more of the rectangular button similar to Bluesky */
.filter-btn.youtube svg{width:44px;height:28px;display:block}
.filter-btn.youtube svg > *{transform-origin:center;}
.filter-btn:hover{transform:translateY(-2px);}
.filter-btn:focus{outline:none;box-shadow:0 8px 24px rgba(0,0,0,0.12)}

.link-row{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;width:100%}
.platform-icon{display:inline-flex;width:18px;height:18px;margin-right:8px;flex:0 0 18px;align-items:center;justify-content:center;align-self:center}
.platform-icon{color:var(--accent)}
/* Larger Twitter icon inside message rows */
.platform-icon.twitter{width:28px;height:28px;flex:0 0 28px}
.platform-icon.twitter svg{width:24px;height:24px}
.platform-icon.reddit{width:26px;height:26px;flex:0 0 26px}
.platform-icon.reddit svg{width:20px;height:20px}
.inline-link{display:inline-block;width:auto;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inline-link.visited{text-decoration:line-through;opacity:0.65;color:var(--muted)}

.saved-badge{font-size:.8rem;padding:2px 6px;border-radius:8px;background:rgba(255,255,255,0.03);color:var(--muted);margin-left:8px}

.preview-btn{margin-right:8px}
.created-iso{font-size:0.75em;color:#666;margin-left:8px;align-self:flex-start}

#side-preview{position:fixed;right:20px;top:80px;width:420px;max-height:70vh;overflow:auto;background:linear-gradient(180deg, rgba(10,14,20,0.98), rgba(6,10,14,0.96));border:1px solid rgba(255,255,255,0.04);border-radius:8px;padding:10px;box-shadow:0 20px 40px rgba(0,0,0,0.6);display:none;z-index:10000}
#side-preview .sp-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
#side-preview-title{color:#efe6ff;font-weight:600}
.sp-close{background:transparent;border:none;color:#bfb3c8;cursor:pointer}
#side-preview #side-preview-body a{color:var(--accent)}

/* Ensure preview content wraps and doesn't create horizontal scroll */
#side-preview, #side-preview *{
    box-sizing: border-box;
}
#side-preview #side-preview-body{
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
}
/* Make embedded oEmbed HTML and long links wrap properly */
.tweet-card, .tweet-card *{max-width:100%;}
.tweet-card img, .tweet-card iframe, .side-iframe{max-width:100%;height:auto}
.tweet-content{word-break:break-word;overflow-wrap:anywhere}
.tweet-link-row a{word-break:break-all;overflow-wrap:anywhere;display:block}

.tweet-card{background:rgba(24,14,30,0.9);border:1px solid rgba(255,255,255,0.04);padding:10px;border-radius:8px;color:#efe6ff;font-size:14px;line-height:1.35}
.reddit-card .tweet-author{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reddit-card .tweet-content{max-height:10em;overflow:auto}
.tweet-header{display:flex;align-items:center;margin-bottom:8px}
.tweet-author{font-weight:700;margin-right:8px}
.tweet-meta{color:var(--muted);font-size:12px}
.tweet-content{margin-bottom:8px}
.tweet-link-row{font-size:12px;color:var(--accent)}
.side-iframe{width:100%;max-height:60vh}
.side-link{color:var(--accent)}

/* New-user pulsing animation for recently-seen senders */
.card-users .user-card.new-user{ animation: pulse 1.6s ease-in-out infinite; position:relative; }

@keyframes pulse{
    0%{
        box-shadow: inset 0 0 0 0 rgba(128,90,248,0.0);
        background-color: rgba(255,255,255,0.008);
        filter: brightness(1);
        border-color: rgba(255,255,255,0.03);
    }
    50%{
        /* inner glow on the element itself + slight brighten */
        box-shadow: inset 0 0 18px 6px rgba(128,90,248,0.18);
        background-color: rgba(255,255,255,0.02);
        filter: brightness(1.08);
        border-color: rgba(128,90,248,0.28);
    }
    100%{
        box-shadow: inset 0 0 0 0 rgba(128,90,248,0.0);
        background-color: rgba(255,255,255,0.008);
        filter: brightness(1);
        border-color: rgba(255,255,255,0.03);
    }
}

/* Header layout for users card (title + action) */
.users-header{display:flex;align-items:center;justify-content:space-between;gap:8px}
.okundu-btn{background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);color:white;padding:6px 8px;border-radius:8px;cursor:pointer;font-weight:600;font-size:13px}
.okundu-btn:hover{filter:brightness(1.05)}