/**
 * =========================================================
 *  File: styles.css
 * =========================================================
 */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

body {
    font-family: 'Poppins', Arial, sans-serif;
    font-size: 18px;
    background-color: #2c3e50;
    color: #E0E0E0;
    margin: 0;
    padding-top: 25px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

.home-button, .menu-button {
    position: relative;
    margin-right: 5px;
    background-color: #2c3e50;
    border: 1px solid #2c3e50;
    cursor: pointer;
    z-index: 10000;
    padding: 7px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #4A90E2;
    font-size: 22px;
}

.home-button:hover, .menu-button:hover {
    background-color: #343434;
    transform: scale(1.05);
}

.menu-button.open, .menu-button.open .menu-icon {
    background-color: #242424 !important;
    color: #FF6347;
}

.side-menu {
    height: calc(100% - 110px - 102px);
    width: 0;
    position: fixed;
    z-index: 99999;
    top: 110px;
    left: 10px;
    bottom: 102px;
    background-color: #202020;
    overflow-x: hidden;
    transition: 0.5s;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4);
    padding-top: 20px;
}

.side-menu a {
    padding: 10px 15px;
    text-decoration: none;
    font-size: 18px;
    color: #B0B0B0;
    display: block;
    transition: 0.3s;
}

.side-menu a:hover { color: #4A90E2; }

.side-menu .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 30px;
    margin-left: 50px;
    cursor: pointer;
    color: #D0D0D0;
}

.overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 2;
    cursor: pointer;
}

.result-list {
    position: relative;
    max-width: 98%;
    margin: 0 auto 1.5rem;
    min-height: 100px;
    opacity: 1;
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, height;
}

.result {
    position: absolute;
    padding: 10px 5px;
    overflow: hidden;
    background-color: #34495e;
    border: 1px solid rgba(204, 204, 204, 0.1);
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateY(0);
    will-change: transform, box-shadow, left, top, width;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.result:hover {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
    z-index: 10;
}

/* Entrada suave */
.result:not(.show) { opacity: 0; transform: translateY(20px); }
.result.show { opacity: 1; transform: translateY(0); animation: fadeInUp 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.result h2, .result p { color: #CCCCCC; }

.result img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
}

.result h2 {
    font-size: 16px;
    margin: 8px 10px 3px 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.result p {
    font-size: 14px;
    margin: 3px 10px;
    line-height: 1.4;
    flex-shrink: 0;
}

.result p:last-child { margin-bottom: 10px; }

.result .favicon-and-site { margin: 5px 10px; flex-shrink: 0; }

.result .share-buttons-container { margin: 5px 10px 10px 10px; flex-shrink: 0; }

.result div[style*="position: relative"] { flex-shrink: 0; margin-bottom: 10px; }

#tags-container p { margin: 5px 10px !important; }

/* Elementos embutidos */
.result iframe,
.result .facebook-embed,
.result .tiktok-embed,
.result .youtube-thumbnail { margin-bottom: 10px; }

/* -------- Novo topo do card: avatar + @author -------- */
.card-header{
    display:flex;
    align-items:center;
    justify-content: space-between;
    margin: 2px 8px 6px 8px;
}
.card-header .author-block{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
}
.card-header .author-name{
    font-size:14px;
    font-weight:600;
    color:#E0E0E0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
/* (O tamanho do avatar é controlado inline, mas deixo o hover existente) */
.author-avatar {
    border-color: #CCC !important;
    transition: transform 0.3s ease;
}
.author-avatar:hover { transform: scale(1.5); }
/* ----------------------------------------------------- */

/* Mobile */
@media (max-width: 500px) {
    .result {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        margin-bottom: 15px;
        transition: none !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    .result-list { height: auto !important; display: block !important; }
}

/* Botão Voltar ao Topo */
.back-to-top-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 18px;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}
.back-to-top-btn:hover { background-color: #0056b3; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 123, 255, 0.4); }
.back-to-top-btn.show { opacity: 1; visibility: visible; }

/* Loading */
.loading-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(34, 34, 34, 0.95);
    color: #E0E0E0;
    padding: 20px;
    border-radius: 10px;
    display: none;
    align-items: center;
    gap: 15px;
    z-index: 10000;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
.loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid #444;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* Search button width */
#search-button { width: 30%; }
@media (max-width: 768px) { #search-button { width: 7% !important; } }

/* Short/Full text helpers */
@media (max-width: 768px) { .full-text { display: none; } .short-text { display: inline; } }
@media (min-width: 4800px) { .result-list { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } }

@media (max-width: 768px) {
    .menu-icon { left: 10px; }
    .search-bar { flex-direction: row; flex-wrap: nowrap; }
    .search-bar input[type="text"] { flex: 1; padding-left: 35px; }
    #search-button { flex-shrink: 0; width: 40%; justify-content: center; }
}
@media (max-width: 768px) { #search-button span { font-size: 95%; } }
@media screen and (max-width: 768px) { .side-menu.open { width: 95%; } }

/* Ícone + texto no botão de busca */
#search-button i, #search-button .full-text { margin-right: 5px; }
@media (max-width: 768px) { #search-button .full-text { display: none; } }
@media (min-width: 769px) { #search-button .short-text { display: none; } }

.search-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 100;
    position: fixed;
    top: 0; left: 0; right: 0;
    background-color: #FFFFFF;
    border-radius: 2rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 1rem;
    width: 90%;
    margin-top: .01rem;
    margin-bottom: 1rem;
    margin-left: auto;
    margin-right: auto;
    margin: 0.5rem auto;
    max-width: 90%;
}

.search-bar input[type="text"] {
    flex-grow: 1;
    font-size: 1.6rem;
    border: none;
    border-radius: .5rem;
    padding: 1rem;
    margin-right: .2rem;
    height: 1rem;
    background-color: #F7F7F7;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s ease-in-out;
}

.search-bar input[type="text"] {
    padding-left: 40px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    outline: none;
    margin-top: 1px;
    margin-bottom: 1px;
}

.search-bar input[type="text"]:focus {
    background-color: #eef;
    width: 100%;
}

.header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #ff0000;
    text-align: center;
    margin-top: 5px;
}

.logo { color: #ff0000; font-size: 300%; margin-top: 5rem; margin-bottom: .2rem; }

.search-bar {
    display: flex;
    align-items: center;
    background-color: #2c3e50;
    border-radius: .4rem;
    padding: .1rem;
    margin-top: .2rem;
    margin-bottom: 1rem;
}

#search-query {
    width: 80%;
    font-size: 1.3rem;
    border: none;
    background-color: #FFFFFF;
    margin-right: 1rem;
    flex-grow: 1;
    border-radius: 0.5rem;
    padding: 10px 15px;
    margin: 0 10px;
    padding-left: 10px;
}

#search-button {
    background-color: #2c3e50;
    border: none;
    border-radius: .4rem;
    color: #ff0000;
    cursor: pointer;
    font-size: 24px;
    font-weight: bold;
    height: 2rem;
    width: 15%;
    outline: none;
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
    margin-right: 5px;
}

#search-button:hover { background-color: #2c3e50; }
#search-button:hover .search-icon { transform: scale(1.5); }

.result { border: 1px solid #ccc; padding: 5px; margin-bottom: 5px; }
.result p { margin: 0; line-height: 1.4; }

.result a {
    color: #4A90E2;
    font-weight: bold;
    transition: transform 0.3s ease, color 0.3s ease;
}
.result a:hover { color: #1E75C3; transform: scale(1.05); }

.result img { margin-right: 10px; }

.embed-holder {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}
.embed-holder iframe {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
}

/* Rodapé */
footer {
    position: fixed;
    left: 0; bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 8px;
    padding: 3px;
    background-color: #f2f2f2;
    border-top: 1px solid #ccc;
}

.search-input {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
    max-width: 100%;
    width: 90%;
}

.left-arrow, .right-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; background-color: transparent; border-radius: 50%;
  font-size: 1.2rem; color: #dddddd; cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.left-arrow:hover, .right-arrow:hover { background-color: #dddddd; transform: scale(1.1); }

.button.pin {
    background-color: #2c3e50;
    color: #007bff;
    font-weight: bold;
    font-size: 24px;
    text-decoration: none;
    border: none;
    padding: 0 5px;
    border-radius: 4px;
    line-height: 32px;
    transition: background-color 0.3s ease;
}
.button.pin:hover { color: #007bff; background-color: #2c3e50; transform: scale(1.2); }

/* Favicon + nome do site */
.favicon-and-site {
  display: flex;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 5px;
}
.favicon-and-site a {
  display: flex; align-items: center; text-decoration: none;
}
.source-name { margin-left: 1px; }

.result { text-align: left; }
.read-more-link { margin-top: 5px; margin-bottom: 10px; display: inline-block; }

#myBtn {
    display: none;
    position: fixed;
    bottom: 22px;
    right: 12px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: red;
    color: white;
    cursor: pointer;
    padding: 5px;
    border-radius: 4px;
}
#myBtn:hover { background-color: #d2d3d2; }

.container {
    z-index: 50;
    position: relative;
    min-height: 5vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: auto;
    max-width: 80%;
    margin: 18px auto 10px;
    margin-bottom: 5px;
}

.login-register-section {
    z-index: 50;
    text-align: center;
    padding: 1px;
    background-color: #2c3e50;
    border: 1px solid #181818;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    font-family: 'Roboto', sans-serif;
    color: #333;
    width: auto;
    max-width: 70%;
    margin: 15px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}
.login-register-section a {
    display: inline-block;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    padding: 2px 7.5px;
    margin: 1.5px 5px;
    border-radius: 5px;
    font-size: 15px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}
.login-register-section a:hover {
    background-color: #d2d3d2;
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
#loginSection { margin: 0 auto 10px; }

#tags-container { width: 80%; margin-left: auto; margin-right: auto; text-align: center; }
#tags-container a {
    display: inline-block;
    margin-bottom: 5px;
    background-color: #e0e0e0;
    color: #333;
    border: 2px solid black;
    padding: 3px 8px;
    margin-right: 5px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 16px;
    transition: transform 0.2s ease-in-out;
}
#tags-container a:hover { transform: scale(1.1); }
.tag-search-link { transition: transform 0.2s ease-in-out; }
.tag-search-link:hover { transform: scale(1.1); }

:root {
    --facebook-blue: #4267B2;
    --twitter-blue: #1DA1F2;
    --linkedin-blue: #0077b5;
    --whatsapp-green: #25D366;
    --pinterest-red: #BD081C;
    --telegram-blue: #0088CC;
    --reddit-orange: #FF4500;
    --copy-gray: #607D8B;
    --share-button-color: #FFC107;
    --share-button-hover-color: #FFD54F;

    --padding-small: 2px;
    --padding-medium: 6px;
    --icon-size: 21px;
    --hover-scale: 1.15;
}

.share-button-container { position: relative; display: inline-block; }
.share-icon-button {
    background: none; border: none; cursor: pointer;
    font-size: 18px; padding: 1px; color: #74808a;
}
.share-icon-button:hover i { transform: scale(1.1); transition: transform 0.2s ease-in-out; }

.share-options {
    display: flex; justify-content: center;
    position: absolute; top: 50%; left: 100%;
    transform: translateY(-50%);
    background: white; border-radius: 6px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    padding: var(--padding-small); flex-direction: row; align-items: center; white-space: nowrap; margin-left: 3px;
}
.share-options button {
    background: none; border: none; cursor: pointer; display: inline-flex; align-items: center;
    padding: 1px; margin-right: var(--padding-small); transition: transform 0.2s ease-in-out;
}
.share-options button i { font-size: var(--icon-size); color: var(--copy-gray); transition: color 0.3s; }
.share-options button i.fa-facebook-f { color: var(--facebook-blue); }
.share-options button i.fa-twitter { color: var(--twitter-blue); }
.share-options button i.fa-linkedin { color: var(--linkedin-blue); }
.share-options button i.fa-whatsapp { color: var(--whatsapp-green); }
.share-options button i.fa-pinterest { color: var(--pinterest-red); }
.share-options button i.fa-telegram-plane { color: var(--telegram-blue); }
.share-options button i.fa-reddit-alien { color: var(--reddit-orange); }
.share-options button i.fa-copy { color: var(--copy-gray); }
.share-options button:hover i { transform: scale(var(--hover-scale)); }

.copy-iframe-btn {
    padding: var(--padding-small);
    border: none;
    background-color: var(--share-button-color);
    color: white;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--icon-size);
}
.copy-iframe-btn:hover, .copy-iframe-btn:focus { background-color: white; outline: none; transform: scale(var(--hover-scale)); }
.copy-iframe-btn i { margin-right: 5px; }

.responsive-iframe-container { position: relative; overflow: hidden; padding-top: 56.25%; }
.responsive-iframe-container iframe {
    position: absolute; top: 0; left: 0;
    width: 80%; height: 80%; border: none;
}

/* Facebook/TikTok placeholders */
.facebook-embed, .tiktok-embed { background-color: #f0f0f0; position: relative; margin-bottom: 10px; }
.facebook-embed div, .tiktok-embed div { display: flex; align-items: center; justify-content: center; color: #999; font-size: 16px; }

/* Likes/Comments/Save */
.like-dislike-container {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; background-color: transparent; padding: 8px; border-radius: 8px; position: relative;
}
.right-save-button { margin-left: auto; }
.like-btn, .dislike-btn, .save-btn {
    background-color: transparent; border: none; font-size: 15px; cursor: pointer;
    transition: transform 0.2s, color 0.2s; padding: .1px; border-radius: 50%;
}
.like-btn { color: #cccccc; margin-right: 10px; }
.dislike-btn { color: #cccccc; margin-left: 10px; }
.like-btn.liked { color: #FFC107; }
.dislike-btn.disliked { color: #ff0000; }
.like-btn:hover { color: #cccccc; transform: scale(1.1); }
.dislike-btn:hover { color: #cccccc; transform: scale(1.1); }

.like-count, .dislike-count {
    margin-left: 8px; font-size: 15px; font-weight: 600; color: #cccccc; transition: color 0.2s;
}
.like-btn:hover .like-count, .dislike-btn:hover .dislike-count { color: #cccccc; }
.like-btn:active, .dislike-btn:active { transform: scale(1.05); }

.save-btn { color: #cccccc; margin-left: 20px; font-size: 15px; transition: color 0.2s, transform 0.2s; border: none; background-color: transparent; cursor: pointer; }
.save-btn:not(.saved):hover { color: #cccccc; transform: scale(1.1); }
.save-btn.saved { color: #28a745; }
.save-btn.saved:hover { color: #218838; }

/* Comments */
.comment-section {
    margin-top: 15px; background-color: #34495e; padding: 10px; border-radius: 5px;
    max-width: 100%; position: relative; box-sizing: border-box; font-size: 14px; display: flex; flex-direction: column; overflow: hidden;
}
.comment-section textarea {
    width: 100%; height: auto; min-height: 50px; margin-bottom: 10px; border-radius: 5px; padding: 10px;
    border: 1px solid #2c3e50; font-size: 16px; background-color: #34495e; color: #cccccc; resize: none;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.comment-section textarea::-webkit-scrollbar { display: none; }
.comment-section { -ms-overflow-style: none; scrollbar-width: none; }
.post-comment-btn { align-self: flex-end; margin-top: 10px; background-color: transparent; border: none; cursor: pointer; position: relative; z-index: 1; }
.post-comment-btn i { color: #4A90E2; font-size: 24px; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.post-comment-btn:hover i { transform: scale(1.3); color: #1E75C3; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15); }
.post-comment-btn:active i { transform: scale(1.1); color: #004494; }

.comment {
    display: flex; align-items: center; margin-bottom: 10px; font-size: 14px; color: #ffffff; padding: 8px; background-color: #2c3e50; border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.comment:hover { background-color: #34495e; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }
.comment p { margin: 0; color: #cccccc; padding-bottom: 10px; line-height: 1.5; max-width: 98%; overflow-wrap: break-word; }

textarea::placeholder { color: rgba(170, 170, 170, 0.8); font-size: 13px; font-style: italic; }
textarea:hover { border-color: #2c3e50; }
textarea:focus::placeholder { color: transparent; }

/* =========================================================
   FOLLOW ICON-ONLY (CHANNEL & TAGS) + POPUP + ajustes visuais
   ========================================================= */

/* Cores base usadas nos ícones e efeitos */
:root{
  --follow-green: #2ecc71;
  --follow-red: #ff5c5c;
  --btn-surface: rgba(255,255,255,.06);
  --btn-border: rgba(255,255,255,.18);
  --btn-surface-hover: rgba(255,255,255,.1);
}

/* ---------- Header com @author: mantém pill com texto (como antes) ---------- */
.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 2px 8px 6px 8px;
}
.card-header .author-block{ display:flex; align-items:center; gap:6px; min-width:0; }
.card-header .author-name{
  font-size:14px; font-weight:600; color:#E0E0E0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Pill de autor continua igual (texto Follow/Following) */
.follow-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; font-size:12.5px; line-height:1; font-weight:700; letter-spacing:.2px;
  border-radius:999px; border:none; cursor:pointer; user-select:none;
  transition:transform .15s ease, filter .15s ease, background-color .15s ease;
  background:#FFC107; color:#1d2833; box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.follow-btn i{ font-size:12px; }
.follow-btn:hover{ filter:brightness(1.03); background:#FFD54F; transform:translateY(-1px); }
.follow-btn.following{ background:var(--follow-green); color:#fff; }
.follow-btn.following:hover{ filter:brightness(1.03); }

/* ---------- Linha do Channel compacta ---------- */
.channel-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin: 4px 10px 2px 10px;
}
.channel-left{
  display:flex; align-items:center; gap:6px; min-width:0;
  color:#bfc8d6; font-size:12px;
}
.channel-left .source-name{ 
  max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Remove “Channel:” pesado; usa pseudo (leve) */
.channel-left .label{ opacity:.75; margin-right:4px; }

/* ---------- Ícones de follow (CHANNEL & TAG) – APENAS ÍCONE ---------- */
.follow-icon-btn{
  --accent: #4A90E2;               /* é sobrescrito inline por JS */
  width:24px; height:24px; min-width:24px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; border:1px solid var(--btn-border);
  background: var(--btn-surface);
  cursor:pointer; user-select:none;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.22);
}
.follow-icon-btn i{ font-size:12px; line-height:1; }
/* Estado “não seguindo” => plus branco */
.follow-icon-btn.plus i{ color:#ffffff; }
/* Estado “seguindo” => check verde + borda/efeito na cor do item */
.follow-icon-btn.following{
  border-color: var(--accent);
  box-shadow: 0 2px 10px rgba(0,0,0,.26), 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
}
.follow-icon-btn.following i{ color: var(--follow-green); }
/* Hover sutil */
.follow-icon-btn:hover{
  transform: translateY(-1px);
  background: var(--btn-surface-hover);
  box-shadow: 0 6px 18px rgba(0,0,0,.28), 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---------- Tags menores e organizadas ---------- */
.tags-row{ display:flex; flex-wrap:wrap; gap:6px; margin: 6px 10px 8px 10px; }
.tag-chip{ display:inline-flex; align-items:center; gap:6px; }

.tag-chip a{
  font-size:12px; font-weight:600;
  padding: 2px 6px; border-radius:5px; border:2px solid #000;
  max-width: 150px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:inline-block;
}

/* Botão de tag = só ícone */
.tag-follow-icon{ width:22px; height:22px; min-width:22px; }
.tag-follow-icon i{ font-size:11px; }
.tag-follow-icon.plus i{ color:#fff; }

/* ---------- Follow Popup (toasts com cores dinâmicas) ---------- */
#follow-popup-container{
  position: fixed; right: 20px; bottom: 20px; z-index: 999999;
  display:flex; flex-direction:column; gap:12px; pointer-events:none;
}
.follow-popup{
  --accent: #4A90E2;             /* sobrescrito inline */
  background: #0f172a;           /* painel escuro */
  color: #e2e8f0;
  border-radius: 12px;
  padding: 10px 12px;
  position: relative;
  overflow: hidden;
  min-width: 240px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, rgba(255,255,255,.08));
  pointer-events:auto;
  opacity:0; transform: translateX(16px) scale(.98);
  animation: fp-enter .35s cubic-bezier(.2,.8,.2,1) forwards;
}
.follow-popup::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(120px 120px at 10% 10%, color-mix(in srgb, var(--accent) 40%, transparent), transparent 60%);
  filter: blur(12px); opacity:.45; pointer-events:none;
}
.follow-popup .bar{
  position:absolute; left:0; top:0; bottom:0; width:4px; background: var(--accent);
}
.follow-popup .content{ display:flex; align-items:center; gap:10px; }
.follow-popup .icon{
  width:28px; height:28px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.follow-popup .icon i{ font-size:14px; }
.follow-popup .title{ font-weight:800; font-size:13px; line-height:1.1; }
.follow-popup .subtitle{ font-size:12px; opacity:.85; }

/* saída */
.follow-popup.leave{ animation: fp-leave .28s ease forwards; }

@keyframes fp-enter{
  to{ opacity:1; transform: translateX(0) scale(1); }
}
@keyframes fp-leave{
  from{ opacity:1; transform: translateX(0) scale(1); }
  to{ opacity:0; transform: translateX(12px) scale(.98); }
}

/* ---------- Ajustes menores ---------- */
/* diminui a densidade do parágrafo de data */
.result p{ margin: 3px 10px; }


/* =========================================================
   CARDS + CHANNEL + FOLLOW ICON-ONLY + FAVICON STRIP (SITE-STRIP)
   POPUPS CENTRAIS (Follow/Like/Save/Embed) + AÇÕES + RÓTULOS
   My Follows (filtro), Modal de Unfollow, Confetti
   ========================================================= */

/* ---------- Aparência geral do card ---------- */
.result{
  background: linear-gradient(180deg, #33475b 0%, #2f4254 100%);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  overflow: hidden;
}
.result h2{
  font-size: 16px;
  margin: 8px 12px 4px 12px;
}
.result p{
  margin: 3px 12px;
}

/* ---------- Header com @author ---------- */
.card-header{
  display:flex; align-items:center; justify-content:space-between;
  padding: 6px 10px 2px 10px;
}
.card-header .author-block{ display:flex; align-items:center; gap:6px; min-width:0; }
.card-header .author-name{
  font-size:14px; font-weight:600; color:#E0E0E0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.follow-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; font-size:12.5px; line-height:1; font-weight:700;
  border-radius:999px; border:none; cursor:pointer; user-select:none;
  transition:transform .15s ease, filter .15s ease, background-color .15s ease;
  background:#FFC107; color:#1d2833; box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.follow-btn i{ font-size:12px; }
.follow-btn:hover{ filter:brightness(1.03); background:#FFD54F; transform:translateY(-1px); }
.follow-btn.following{ background:#2ecc71; color:#fff; }

/* ---------- “Channel” compacto ---------- */
.channel-row{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin: 8px 10px 6px 10px; padding: 6px 8px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border-left: 4px solid color-mix(in srgb, var(--channel-accent, #4A90E2) 80%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.channel-left{
  display:flex; align-items:center; gap:8px; min-width:0;
  font-size:12.5px; color:#d7e0ea; text-decoration:none;
}
.channel-left:hover{ filter:brightness(1.05); }
.channel-left .badge{
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  padding: 3px 8px; border-radius: 999px; white-space:nowrap;
}
.channel-left .source-name{
  max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.channel-left .fa-globe{ opacity:.9; }

/* ---------- Tags menores ---------- */
.tags-row{ display:flex; flex-wrap:wrap; gap:6px; margin: 6px 10px 8px 10px; }
.tag-chip{ display:inline-flex; align-items:center; gap:6px; }
.tag-chip a{
  font-size:12px; font-weight:700;
  padding: 2px 6px; border-radius:5px; border:2px solid #000;
  max-width: 160px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:inline-block;
}

/* ---------- Favicon + link do site (SITE-STRIP) – abaixo das TAGS ---------- */
.site-strip{
  display:flex; align-items:center; gap:8px;
  margin: 6px 10px 2px 10px; padding: 6px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
.site-strip img{ width:18px; height:18px; border-radius:4px; }
.site-strip .site-name{
  color:#dfe7f1; font-size:12.5px; max-width: 220px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* ---------- FOLLOW ícone-only (para Channel e Tags) ---------- */
.follow-icon{
  background:none; border:none; outline:none; cursor:pointer;
  padding:0; margin:0;
  transition: transform .12s ease, filter .12s ease, text-shadow .12s ease;
}
.follow-icon i{
  font-size:18px; line-height:1;
  color:#ffffff; text-shadow: 0 0 8px rgba(255,255,255,.18);
}
.follow-icon.following i{
  color:#2ecc71; text-shadow: 0 0 10px rgba(46,204,113,.4);
}
.follow-icon:hover{ transform: translateY(-1px); filter: brightness(1.05); }

/* ---------- Ações: Like / Dislike / Save / Embed ---------- */
.actions-row{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding: 6px 10px 8px 10px;
}
.actions-left, .actions-right{ display:flex; align-items:center; gap:12px; }

.action-btn{
  background:none; border:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:#cfd9e5;
  transition: transform .12s ease, color .12s ease, text-shadow .12s ease;
}
.action-btn i{ font-size:17px; }
.action-btn .label{ font-weight:700; font-size:12.5px; opacity:.95; }
.action-btn .count{ font-weight:700; font-size:12.5px; opacity:.9; }

.action-btn:hover{ transform: translateY(-1px); color:#fff; text-shadow: 0 0 10px rgba(255,255,255,.25); }
.action-btn.liked i{ color:#ffca2b; text-shadow: 0 0 10px rgba(255,202,43,.35); }
.action-btn.disliked i{ color:#ff5c5c; text-shadow: 0 0 10px rgba(255,92,92,.35); }
.action-btn.saved i{ color:#40c4ff; text-shadow: 0 0 10px rgba(64,196,255,.35); }

/* ---------- POPUPS (toasts) ---------- */
#toast-overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  z-index:999999; pointer-events:none;
}
.toast{
  --accent:#4A90E2;
  background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--accent) 12%, #0b1220) 0%, #0b1220 60%);
  color:#e8f0fb;
  border:1px solid color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.08));
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent);
  backdrop-filter: blur(8px);
  border-radius: 16px;
  padding: 14px 16px;
  min-width: 280px; max-width: 88vw;
  transform: scale(.96) translateY(8px);
  opacity: 0;
  animation: toast-in .35s cubic-bezier(.2,.8,.2,1) forwards;
}
.toast .head{ display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.toast .head .icon{
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  border-radius:10px; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent);
}
.toast .head .icon i{ font-size:16px; }
.toast .title{ font-weight:800; font-size:14px; line-height:1.1; }
.toast .subtitle{ font-size:12.5px; opacity:.9; }
.toast.leave{ animation: toast-out .25s ease forwards; }

@keyframes toast-in{ 60%{ transform: scale(1.02) translateY(0); opacity:1; } 100%{ transform: scale(1) translateY(0); opacity:1; } }
@keyframes toast-out{ to{ transform: scale(.96) translateY(10px); opacity:0; } }

/* ---------- Filterbar: All / My Follows ---------- */
.feed-filterbar{
  width: 80%;
  margin: 8px auto 6px auto;
  display:flex; gap:8px; justify-content:center; align-items:center;
}
.filter-tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.05); color:#e6eef9;
  cursor:pointer; font-size:13px; font-weight:700;
  transition: transform .15s ease, filter .15s ease, background .15s ease;
}
.filter-tab i{ font-size:14px; }
.filter-tab:hover{ filter:brightness(1.05); transform:translateY(-1px); }
.filter-tab.active{ background:#4A90E2; color:#fff; border-color:rgba(255,255,255,.2); }

/* ---------- Modal de confirmação de Unfollow ---------- */
#confirm-overlay{
  position: fixed; inset: 0; display:none; align-items:center; justify-content:center;
  background: rgba(2,10,20,.55); z-index: 999998; backdrop-filter: blur(4px);
}
.confirm-modal{
  width: min(420px, 92vw);
  background: linear-gradient(180deg, #0f1926 0%, #0b1220 100%);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px; color:#eaf2ff; box-shadow: 0 20px 70px rgba(0,0,0,.6);
  transform: translateY(10px) scale(.97); opacity:0;
  animation: confirm-in .25s ease forwards;
  padding: 14px;
}
.confirm-modal .cm-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.confirm-modal .cm-icon{
  width:34px;height:34px;border-radius:10px; display:flex;align-items:center;justify-content:center;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
}
.confirm-modal .cm-icon i{ font-size:16px; }
.confirm-modal h3{ margin:0; font-size:16px; }
.confirm-modal p{ margin:6px 0 12px 0; font-size:13px; opacity:.9; }
.confirm-modal .cm-actions{ display:flex; justify-content:flex-end; gap:8px; }
.btn{
  display:inline-flex; align-items:center; gap:8px; border:none; cursor:pointer;
  padding:8px 12px; border-radius:8px; font-weight:800; font-size:13px;
}
.btn.cancel{ background: rgba(255,255,255,.06); color:#e8f0fb; }
.btn.danger{ background: #ff5c5c; color:#fff; }
.btn:hover{ filter:brightness(1.05); transform:translateY(-1px); }

@keyframes confirm-in{ to{ transform: translateY(0) scale(1); opacity:1; } }

/* ---------- Confetti ---------- */
.confetti{
  position: fixed; inset:0; pointer-events:none; z-index: 999997;
}
.confetti i{
  position:absolute; width:7px; height:7px; border-radius:2px;
  background: var(--c, #fff); left: var(--x, 50%); top: var(--y, 45%);
  transform: translate(0,0); opacity:.95;
  animation: confetti-burst .7s ease-out forwards;
}
@keyframes confetti-burst{
  to{ transform: translate(var(--dx), var(--dy)); opacity:0; }
}


/* --- Ajustes complementares para Follow/Save/Actions --- */
.follow-btn.following:hover .label{
  /* ao passar o mouse em Following, o JS troca label para "Unfollow";
     aqui só garantimos contraste agradável no hover */
  filter: brightness(1.03);
}

/* reforço visual para o botão de salvar quando ativo */
.action-btn.saved i{
  color:#40c4ff;
  text-shadow: 0 0 10px rgba(64,196,255,.35);
}

/* garante que os botões da fileira de ações fiquem sempre visíveis/alinhados */
.actions-row{ display:flex; align-items:center; justify-content:space-between; }
.actions-left, .actions-right{ display:flex; align-items:center; gap:12px; }