:root{--social-bg:#f4f6f8;--social-surface:#fff;--social-surface-secondary:#eef1f4;--social-text:#17202a;--social-muted:#667085;--social-border:#d8dee6;--social-primary:#f2b705;--social-primary-text:#251b00;--social-secondary:#176b87;--social-success:#177245;--social-warning:#9a6200;--social-danger:#b42318;--social-focus:#175cd3;--social-shadow:0 12px 30px rgba(17,24,39,.09);--social-radius:18px;--social-max:1440px} html[data-social-theme="dark"]{--social-bg:#101418;--social-surface:#191f25;--social-surface-secondary:#222a32;--social-text:#f3f5f7;--social-muted:#b7c0ca;--social-border:#38434e;--social-primary:#ffd34d;--social-primary-text:#241b00;--social-secondary:#68c5dc;--social-focus:#8bb6ff;--social-shadow:0 12px 30px rgba(0,0,0,.3)} html[data-social-theme="black-white"]{--social-bg:#fff;--social-surface:#fff;--social-surface-secondary:#f2f2f2;--social-text:#000;--social-muted:#3d3d3d;--social-border:#000;--social-primary:#000;--social-primary-text:#fff;--social-secondary:#000;--social-success:#000;--social-warning:#000;--social-danger:#000;--social-focus:#000;--social-shadow:none} html[data-color-mode="protanopia"]{--social-primary:#e1b000;--social-secondary:#176b87;--social-success:#237a8b;--social-warning:#9c6b00;--social-danger:#9c4f87} html[data-color-mode="deuteranopia"]{--social-primary:#e2b400;--social-secondary:#176b87;--social-success:#3b718f;--social-warning:#9a6a00;--social-danger:#9d4e7d} html[data-color-mode="tritanopia"]{--social-primary:#e09b2d;--social-secondary:#7a4f9d;--social-success:#28755d;--social-warning:#a35f21;--social-danger:#b23a48} html[data-color-mode="monochrome"]{--social-primary:#333;--social-primary-text:#fff;--social-secondary:#555;--social-success:#222;--social-warning:#555;--social-danger:#111;--social-focus:#000} *{box-sizing:border-box}html{background:var(--social-bg);color-scheme:light}html[data-social-theme="dark"]{color-scheme:dark}body{margin:0;background:var(--social-bg);color:var(--social-text);font:15px/1.5 Inter,system-ui,sans-serif;min-width:0}a{color:inherit;text-decoration:none}button,select{font:inherit}img{max-width:100%;object-fit:cover}.social-skip{position:fixed;z-index:100;left:1rem;top:-5rem;background:var(--social-text);color:var(--social-surface);padding:.75rem 1rem;border-radius:10px}.social-skip:focus{top:1rem}:focus-visible{outline:3px solid var(--social-focus);outline-offset:3px}.social-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.social-brand{font:800 1.65rem/1 "Baloo 2",sans-serif;display:flex;align-items:center;gap:.55rem}.social-brand span{width:15px;height:15px;background:var(--social-primary);border-radius:50%;border:2px solid var(--social-text)} .social-app{width:min(100%,var(--social-max));margin:auto;display:grid;grid-template-columns:240px minmax(0,680px) 300px;gap:24px;padding:20px 24px 60px}.social-sidebar,.social-right{position:sticky;top:20px;height:calc(100vh - 40px)}.social-sidebar{display:flex;flex-direction:column;padding:10px}.social-sidebar nav{display:grid;gap:3px;margin-top:28px;overflow:auto}.social-sidebar nav a,.social-more{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;border:0;background:transparent;color:var(--social-text);font-weight:650}.social-sidebar nav a:hover,.social-sidebar nav a[aria-current="page"],.social-more:hover{background:var(--social-surface-secondary)}.social-sidebar nav i{font-size:1.2rem;width:22px}.social-nav-label{font-size:.68rem;font-weight:800;letter-spacing:.12em;color:var(--social-muted);padding:18px 12px 4px}.social-more{margin-top:auto;cursor:pointer}.social-main{min-width:0}.social-right{display:grid;align-content:start;gap:14px}.social-panel,.social-feed-card,.social-composer,.social-empty,.social-profile-page,.social-connection-card,.social-discovery-intro{background:var(--social-surface);border:1px solid var(--social-border);border-radius:var(--social-radius);box-shadow:var(--social-shadow)}.social-panel{padding:16px}.social-panel h2{font-size:1rem;margin:0 0 12px}.social-profile-summary{display:flex;align-items:center;gap:12px}.social-profile-summary img,.social-avatar-fallback{width:52px;height:52px;border-radius:50%;background:var(--social-surface-secondary);display:grid;place-items:center;flex:0 0 auto}.social-profile-summary div{display:grid;min-width:0}.social-profile-summary a,.social-rail-link small,.social-muted{color:var(--social-muted)}.social-rail-link{display:grid;padding:9px 0;border-bottom:1px solid var(--social-border)}.social-rail-link span{font-weight:700;overflow-wrap:anywhere}.social-panel-more{display:inline-block;color:var(--social-secondary);font-weight:750;margin-top:12px} .social-mobile-header{display:none}.social-icon-button{border:0;background:transparent;color:var(--social-text);display:grid;place-items:center;width:42px;height:42px;border-radius:50%;cursor:pointer}.social-icon-button:hover{background:var(--social-surface-secondary)}.social-stories{display:flex;align-items:center;gap:14px;overflow-x:auto;padding:8px 4px 18px;scrollbar-width:thin}.social-story{border:0;background:transparent;color:var(--social-text);display:grid;gap:5px;justify-items:center;flex:0 0 auto;cursor:pointer}.social-story>span{width:64px;height:64px;border:2px solid var(--social-primary);border-radius:50%;display:grid;place-items:center;background:var(--social-surface)}.social-story strong{font-size:.75rem}.social-story-placeholder{min-width:280px;min-height:64px;display:flex;align-items:center;gap:10px;color:var(--social-muted);font-size:.8rem;border:1px dashed var(--social-border);border-radius:14px;padding:10px 14px;background:var(--social-surface)}.social-tabs{display:grid;grid-template-columns:repeat(4,1fr);background:var(--social-surface);border:1px solid var(--social-border);border-radius:14px;padding:5px;margin-bottom:14px;position:sticky;top:8px;z-index:5}.social-tabs a{text-align:center;padding:9px 5px;border-radius:10px;font-weight:700;font-size:.84rem}.social-tabs a[aria-current="page"]{background:var(--social-text);color:var(--social-surface)}.social-composer{padding:12px;margin-bottom:14px}.social-composer button{width:100%;display:flex;align-items:center;gap:10px;border:1px solid var(--social-border);background:var(--social-surface-secondary);color:var(--social-muted);padding:12px 15px;border-radius:999px;text-align:left;cursor:pointer}.social-discovery-intro{display:flex;gap:15px;align-items:center;padding:18px;margin-bottom:14px;background:linear-gradient(135deg,var(--social-surface),var(--social-surface-secondary))}.social-discovery-intro>i{font-size:2rem;color:var(--social-secondary)}.social-discovery-intro h1,.social-discovery-intro p{margin:0}.social-feed-card{overflow:hidden;margin-bottom:16px}.social-feed-card header{padding:13px 16px;border-bottom:1px solid var(--social-border)}.social-recommendation{font-size:.75rem;font-weight:800;color:var(--social-secondary);display:flex;gap:7px;align-items:center}.social-feed-image{width:100%;max-height:420px}.social-feed-card>div{padding:17px}.social-feed-card h2{font:750 1.25rem/1.25 "Baloo 2",sans-serif;margin:0}.social-feed-card p{overflow-wrap:anywhere}.social-feed-card small{display:flex;gap:5px;color:var(--social-muted)}.social-empty{text-align:center;padding:36px 22px;margin:14px 0}.social-empty>i{font-size:2rem;color:var(--social-secondary)}.social-empty h1,.social-empty h2{font-family:"Baloo 2";margin:.4rem 0}.social-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.social-actions a,.social-button{border:0;border-radius:10px;background:var(--social-primary);color:var(--social-primary-text);font-weight:800;padding:9px 14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}.social-button-secondary{background:var(--social-surface-secondary);color:var(--social-text);border:1px solid var(--social-border)} .social-page-heading,.social-list-heading{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:4px 3px 18px}.social-page-heading span{color:var(--social-secondary);font-weight:800;text-transform:uppercase;font-size:.7rem;letter-spacing:.12em}.social-page-heading h1,.social-list-heading h1,.social-list-heading h2{font-family:"Baloo 2";line-height:1.1;margin:0}.social-list-heading a{color:var(--social-secondary);font-weight:750}.social-segmented{display:grid;grid-template-columns:1fr 1fr;background:var(--social-surface-secondary);padding:4px;border-radius:12px;margin-bottom:14px}.social-segmented button{border:0;border-radius:9px;padding:10px;background:transparent;color:var(--social-text);font-weight:750;cursor:pointer}.social-segmented button[aria-selected="true"]{background:var(--social-surface);box-shadow:var(--social-shadow)}.social-connection-list{display:grid;gap:10px}.social-connection-card{display:flex;align-items:center;gap:12px;padding:14px;min-width:0}.social-connection-card>img{width:58px;height:58px;border-radius:50%;flex:0 0 auto}.social-connection-body{display:grid;min-width:0;flex:1}.social-connection-body strong,.social-connection-body p{overflow-wrap:anywhere}.social-connection-body span,.social-connection-body small{color:var(--social-muted);font-size:.78rem}.social-connection-body p{margin:4px 0;font-size:.86rem}.social-connection-card form{flex:0 0 auto} .social-profile-page{overflow:hidden}.social-profile-cover{height:170px;background:linear-gradient(120deg,var(--social-secondary),var(--social-primary))}.social-profile-page>header{display:flex;align-items:end;gap:15px;padding:0 22px;transform:translateY(-34px)}.social-profile-page>header img,.social-profile-avatar{width:112px;height:112px;border:5px solid var(--social-surface);border-radius:50%;background:var(--social-surface-secondary);display:grid;place-items:center;font-size:2rem}.social-profile-title{flex:1;min-width:0}.social-profile-title h1{font-family:"Baloo 2";line-height:1;margin:0;overflow-wrap:anywhere}.social-profile-title span{color:var(--social-muted)}.social-profile-stats,.social-profile-bio{padding:0 22px 20px}.social-profile-stats{display:flex;gap:24px}.social-profile-bio small,.social-profile-bio span{display:block;margin-top:10px;color:var(--social-muted)} .social-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:30}.social-drawer{position:fixed;z-index:31;left:0;top:0;bottom:0;width:min(90vw,370px);background:var(--social-surface);border-right:1px solid var(--social-border);padding:16px;overflow:auto;transform:translateX(-105%);transition:transform .2s ease}.social-drawer[data-open]{transform:none}.social-drawer header{display:flex;justify-content:space-between;align-items:center}.social-drawer nav{display:grid;margin:12px 0}.social-drawer nav a{padding:8px 4px;font-weight:650}.social-drawer hr{border:0;border-top:1px solid var(--social-border);width:100%}.social-preferences{border-top:1px solid var(--social-border);padding-top:12px}.social-preferences h2{font-size:.85rem;margin:12px 0 7px}.social-preferences div{display:flex;gap:6px;flex-wrap:wrap}.social-preferences button,.social-preferences select{background:var(--social-surface-secondary);color:var(--social-text);border:1px solid var(--social-border);border-radius:9px;padding:8px}.social-preferences label{display:block;font-size:.75rem;color:var(--social-muted)}.social-preferences select{width:100%}.social-bottom-nav{display:none}.social-dialog{max-width:420px;width:calc(100% - 30px);border:1px solid var(--social-border);border-radius:var(--social-radius);background:var(--social-surface);color:var(--social-text);box-shadow:var(--social-shadow)}.social-dialog::backdrop{background:rgba(0,0,0,.5)}.social-dialog form>button{margin-left:auto}.social-dialog h2{font-family:"Baloo 2"}.social-dialog form>div{display:grid;gap:8px}.social-dialog a{display:flex;gap:9px;padding:11px;border-radius:10px;background:var(--social-surface-secondary);font-weight:700} .botuka-consent{position:fixed;z-index:60;left:1rem;right:1rem;bottom:1rem;background:var(--social-surface);color:var(--social-text);border:1px solid var(--social-border);border-radius:15px;box-shadow:var(--social-shadow);padding:16px;display:flex;align-items:center;gap:16px}.botuka-consent[hidden]{display:none}.botuka-consent__content{flex:1}.botuka-consent__content p{margin:.3rem 0;font-size:.8rem}.botuka-consent__actions{display:flex;gap:8px}.btn-botuka{border:1px solid var(--social-border);border-radius:9px;padding:8px 12px;background:var(--social-surface-secondary);color:var(--social-text)}.btn-yellow{background:var(--social-primary);color:var(--social-primary-text)} @media(max-width:1160px){.social-app{grid-template-columns:220px minmax(0,700px);justify-content:center}.social-right{display:none}} @media(max-width:880px){.social-mobile-header{height:58px;display:flex;position:sticky;top:0;z-index:20;align-items:center;justify-content:space-between;background:color-mix(in srgb,var(--social-surface) 92%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--social-border);padding:6px 12px}.social-app{display:block;padding:12px 12px 88px;max-width:720px}.social-sidebar{display:none}.social-tabs{top:66px}.social-bottom-nav{position:fixed;z-index:20;display:grid;grid-template-columns:repeat(5,1fr);bottom:0;left:0;right:0;background:var(--social-surface);border-top:1px solid var(--social-border);padding:7px max(8px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom))}.social-bottom-nav a,.social-bottom-nav button{border:0;background:transparent;color:var(--social-muted);display:grid;justify-items:center;gap:1px;font-size:.65rem}.social-bottom-nav i{font-size:1.25rem}.social-bottom-nav a[aria-current="page"]{color:var(--social-text);font-weight:800}.social-bottom-nav button{width:48px;height:48px;place-self:center;background:var(--social-primary);color:var(--social-primary-text);border-radius:50%;transform:translateY(-18px)}.social-stories{margin-inline:-4px}.social-right{display:none}} @media(max-width:480px){.social-app{padding-inline:8px}.social-tabs a{font-size:.72rem}.social-connection-card{align-items:flex-start;flex-wrap:wrap}.social-connection-body{width:calc(100% - 74px)}.social-connection-card form{width:100%;padding-left:70px}.social-connection-card form button{width:100%}.social-profile-cover{height:125px}.social-profile-page>header{align-items:center;flex-wrap:wrap;padding-inline:15px}.social-profile-page>header img,.social-profile-avatar{width:88px;height:88px}.social-profile-title{width:calc(100% - 105px)}.social-profile-page>header form{width:100%}.social-profile-page>header form button{width:100%}.botuka-consent{display:block}.botuka-consent__actions{margin-top:10px;flex-wrap:wrap}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}} @media(prefers-color-scheme:dark){html:not([data-theme-selected="true"]){--social-bg:#101418;--social-surface:#191f25;--social-surface-secondary:#222a32;--social-text:#f3f5f7;--social-muted:#b7c0ca;--social-border:#38434e;--social-primary:#ffd34d;--social-primary-text:#241b00;--social-secondary:#68c5dc;--social-focus:#8bb6ff;--social-shadow:0 12px 30px rgba(0,0,0,.3);color-scheme:dark}} .social-post-card{overflow:hidden}.social-post-card>header,.social-post-card>footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.social-post-card>header a{display:grid}.social-post-card>a>img{display:block;width:100%;max-height:680px;object-fit:cover;border-radius:var(--social-radius);margin:14px 0}.social-post-card>footer{justify-content:flex-start;flex-wrap:wrap}.social-post-card p,.social-shared{overflow-wrap:anywhere;word-break:break-word}.social-shared{padding:20px;border:1px solid var(--social-border);border-radius:var(--social-radius);display:grid}.social-content-card form p{display:grid;gap:6px}.social-content-card input,.social-content-card textarea,.social-content-card select{max-width:100%;padding:12px;border:1px solid var(--social-border);border-radius:10px;background:var(--social-surface);color:var(--social-text)}.social-story img{width:58px;height:58px;object-fit:cover;border-radius:50%;border:3px solid var(--social-primary)}.social-drawer form button{width:100%;text-align:left;background:none;border:0;color:inherit;padding:10px;cursor:pointer} .social-back-site{border:1px solid var(--social-border)!important;margin-bottom:8px}.social-viewer{display:grid;grid-template-columns:minmax(280px,42%) minmax(0,58%);height:min(88vh,860px);background:var(--social-surface);border:1px solid var(--social-border);border-radius:20px;overflow:hidden}.social-viewer-header{grid-column:1;display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--social-border)}.social-viewer-header>a:nth-child(2){display:grid;min-width:0}.social-viewer-header small{color:var(--social-muted)}.social-viewer-header details{margin-left:auto}.social-viewer-info{grid-column:1;min-height:0;display:flex;flex-direction:column;padding:16px;overflow:hidden}.social-comments{min-height:0;overflow:auto;flex:1;border-block:1px solid var(--social-border);margin-block:12px;padding-block:8px}.social-comments p,.social-official-detail p{overflow-wrap:anywhere}.social-viewer-actions{display:flex;gap:8px}.social-viewer-actions button{width:42px;height:42px;border:1px solid var(--social-border);border-radius:50%;background:var(--social-surface-secondary);color:var(--social-text)}.social-comment-form,.social-message-form,.social-story-reply,.social-conversation>form{display:flex;gap:8px;padding-top:10px}.social-comment-form input,.social-story-reply input,.social-conversation input,.social-message-form select{min-width:0;flex:1;padding:10px;border:1px solid var(--social-border);border-radius:10px;background:var(--social-surface);color:var(--social-text)}.social-message-form label{display:flex;gap:8px;flex:1}.social-viewer-media{grid-column:2;grid-row:1/span 2;position:relative;display:grid;place-items:center;overflow:auto;background:#080a0d;touch-action:pan-x pan-y pinch-zoom}.social-viewer-media img{width:100%;height:100%;object-fit:contain;transition:transform .2s}.social-viewer-media.is-zoomed img{transform:scale(1.8)}.social-viewer-media button{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border:0;border-radius:50%;background:#000b;color:#fff}.social-story-viewer{position:relative;min-height:min(88vh,860px);display:grid;place-items:center;background:#080a0d;border-radius:20px;overflow:hidden;color:#fff;touch-action:pan-x pan-y}.social-story-viewer>header{position:absolute;z-index:2;inset:0 0 auto;display:flex;gap:12px;align-items:center;padding:16px;background:linear-gradient(#000b,transparent)}.social-story-viewer>header>a:nth-child(2){display:grid}.social-story-viewer>header form{margin-left:auto}.social-story-viewer button,.social-story-viewer a{color:#fff}.social-story-media{width:100%;height:min(88vh,860px);display:grid;place-items:center}.social-story-media img{width:100%;height:100%;object-fit:contain}.social-story-viewer>nav{position:absolute;inset:50% 14px auto;display:flex;justify-content:space-between}.social-story-reply{position:absolute;z-index:2;left:16px;right:16px;bottom:16px}.social-story-reply input{background:#111c;color:#fff}.social-request{padding:12px;border-top:1px solid var(--social-border)}.social-request>div{display:flex;gap:8px}.social-conversation-link{display:block;padding:14px;border-top:1px solid var(--social-border)}.social-conversation,.social-official-detail{background:var(--social-surface);border:1px solid var(--social-border);border-radius:var(--social-radius);padding:18px}.social-message-list{height:60vh;overflow:auto;display:grid;align-content:start;gap:8px}.social-message-list article{max-width:75%;padding:10px;background:var(--social-surface-secondary);border-radius:12px}.social-message-list article.is-own{margin-left:auto;background:color-mix(in srgb,var(--social-primary) 35%,var(--social-surface))}.social-official-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.social-official-grid article{padding:16px}.social-official-grid img,.social-official-detail>img{width:100%;max-height:360px;object-fit:cover;border-radius:12px}.social-official-detail h1{overflow-wrap:anywhere} @media(max-width:880px){.social-viewer{display:flex;flex-direction:column;height:auto;min-height:calc(100dvh - 82px);border-radius:0}.social-viewer-header{order:0}.social-viewer-media{order:1;min-height:55vh;max-height:70vh}.social-viewer-info{order:2;overflow:visible}.social-comments{max-height:none;overflow:visible}.social-message-form{flex-wrap:wrap}.social-message-form label{width:100%;flex-wrap:wrap}.social-story-viewer{position:fixed;z-index:25;inset:0;min-height:100dvh;border-radius:0}.social-story-media{height:100dvh}.social-official-grid{grid-template-columns:1fr}} /* ============================================================ BOTUKA SOCIAL — STORY VIEWER FULLSCREEN ============================================================ */ .social-story-viewer { position: fixed !important; inset: 0 !important; z-index: 1000 !important; width: 100vw !important; height: 100dvh !important; min-height: 100dvh !important; background: #080a0d !important; overflow: hidden !important; border-radius: 0 !important; color: #fff !important; } .social-story-media { position: absolute !important; inset: 0 !important; width: 100vw !important; height: 100dvh !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #080a0d !important; overflow: hidden !important; } .social-story-media img { display: block !important; width: auto !important; height: auto !important; max-width: 100vw !important; max-height: 100dvh !important; object-fit: contain !important; object-position: center !important; opacity: 1 !important; visibility: visible !important; } .social-story-viewer > header { position: absolute !important; z-index: 20 !important; top: 0 !important; left: 0 !important; right: 0 !important; display: flex !important; align-items: center !important; gap: 12px !important; padding: 16px !important; background: linear-gradient( rgba(0, 0, 0, .8), rgba(0, 0, 0, 0) ) !important; } .social-story-viewer > nav { position: absolute !important; z-index: 20 !important; top: 50% !important; left: 16px !important; right: 16px !important; display: flex !important; justify-content: space-between !important; transform: translateY(-50%) !important; } .social-story-reply { position: absolute !important; z-index: 20 !important; left: 16px !important; right: 16px !important; bottom: max(16px, env(safe-area-inset-bottom)) !important; } /* Social 2.0: interações persistentes, mensagens e notificações. */ .social-header-actions, .social-story-actions, .social-story-reactions, .social-message-status, .social-notification-actions { display: flex; align-items: center; gap: .625rem; min-width: 0; } .social-icon-button { position: relative; } .social-badge { position: absolute; inset-block-start: -.25rem; inset-inline-end: -.35rem; min-width: 1.15rem; min-height: 1.15rem; padding: .08rem .3rem; border-radius: 999px; background: var(--social-accent, #1667d9); color: #fff; font-size: .68rem; font-weight: 700; line-height: 1; text-align: center; } .social-story-progress { position: absolute; z-index: 25; inset: .5rem 1rem auto; height: .2rem; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / .35); } .social-story-progress > span { display: block; width: 100%; height: 100%; background: #fff; } .social-story-interactions { position: absolute; z-index: 24; inset-inline: 1rem; bottom: max(4.5rem, calc(env(safe-area-inset-bottom) + 4rem)); display: grid; gap: .65rem; } .social-story-reactions { flex-wrap: wrap; } .social-story-reactions button { min-width: 2.75rem; min-height: 2.75rem; border: 1px solid rgb(255 255 255 / .45); border-radius: 999px; background: rgb(0 0 0 / .5); color: #fff; font-size: 1.2rem; cursor: pointer; } .social-story-reactions button[aria-pressed="true"] { outline: 3px solid #fff; outline-offset: 2px; } .social-story-insights { max-width: 38rem; margin: 1rem auto; overflow-wrap: anywhere; } .social-message-context { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .65rem; align-items: center; max-width: 100%; padding: .5rem; border-inline-start: .2rem solid var(--social-accent, #1667d9); } .social-message-context img { width: 3rem; height: 3rem; border-radius: .5rem; object-fit: cover; } .social-message-context > * { min-width: 0; overflow-wrap: anywhere; } .social-message-status { justify-content: flex-end; font-size: .75rem; opacity: .75; } .social-typing[hidden], .social-badge[hidden] { display: none !important; } .social-notification-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; } .social-notification { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .75rem; align-items: start; padding: 1rem; border-radius: .85rem; background: var(--social-surface, #fff); overflow-wrap: anywhere; } .social-notification.is-unread { border-inline-start: .25rem solid var(--social-accent, #1667d9); } @media (max-width: 640px) { .social-story-reactions { justify-content: center; } .social-notification { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .social-story-progress > span { animation: none !important; } } /* BOTUKA STORY VIEWER HOTFIX 20260818 */ .social-story-insights { position: absolute !important; z-index: 40 !important; left: 50% !important; right: auto !important; bottom: max(1rem, calc(env(safe-area-inset-bottom) + .75rem)) !important; width: min(94vw, 46rem) !important; margin: 0 !important; padding: .9rem 1rem !important; transform: translateX(-50%) !important; display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: .6rem !important; border: 1px solid rgb(255 255 255 / .22) !important; border-radius: 1rem !important; background: rgb(0 0 0 / .62) !important; color: #fff !important; backdrop-filter: blur(14px); box-shadow: 0 .8rem 2rem rgb(0 0 0 / .3); } .social-story-insights > strong { grid-column: 1 / -1; font-size: .9rem; } .social-story-insights > span { min-width: 0; text-align: center; font-size: .76rem; color: rgb(255 255 255 / .82); overflow-wrap: anywhere; } .social-story-interactions { position: absolute !important; z-index: 40 !important; left: 50% !important; right: auto !important; inset-inline: auto !important; bottom: max(1rem, calc(env(safe-area-inset-bottom) + .75rem)) !important; width: min(94vw, 46rem) !important; transform: translateX(-50%) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: center !important; gap: .6rem !important; } .social-story-interactions .social-story-reply { position: static !important; inset: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; padding: 0 !important; display: flex !important; gap: .5rem !important; } .social-story-reply input { height: 3rem !important; min-width: 0 !important; padding: 0 1rem !important; border: 1px solid rgb(255 255 255 / .45) !important; border-radius: 999px !important; background: rgb(0 0 0 / .58) !important; color: #fff !important; backdrop-filter: blur(12px); } .social-story-reply input::placeholder { color: rgb(255 255 255 / .72); } .social-story-reply button, .social-story-like, .social-reaction-picker > summary { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 3rem !important; height: 3rem !important; padding: 0 .75rem !important; border: 1px solid rgb(255 255 255 / .45) !important; border-radius: 999px !important; background: rgb(0 0 0 / .58) !important; color: #fff !important; cursor: pointer !important; list-style: none !important; backdrop-filter: blur(12px); } .social-reaction-picker { position: relative !important; } .social-reaction-picker > summary::-webkit-details-marker { display: none; } .social-story-reactions { position: absolute !important; right: 0 !important; bottom: calc(100% + .6rem) !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: .3rem !important; padding: .45rem !important; border: 1px solid rgb(255 255 255 / .2) !important; border-radius: 999px !important; background: rgb(8 10 13 / .94) !important; box-shadow: 0 .8rem 2rem rgb(0 0 0 / .4); backdrop-filter: blur(14px); } .social-story-reactions button { display: grid !important; place-items: center !important; width: 2.8rem !important; height: 2.8rem !important; min-width: 2.8rem !important; min-height: 2.8rem !important; padding: 0 !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; font-size: 1.35rem !important; } .social-story-like[aria-pressed='true'] { background: rgb(190 30 55 / .85) !important; } @media (min-width: 881px) { .social-story-media img { width: min(100vw, 720px) !important; height: 100dvh !important; max-width: min(100vw, 720px) !important; max-height: 100dvh !important; object-fit: contain !important; } } @media (max-width: 640px) { .social-story-insights { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; width: calc(100vw - 1rem) !important; } .social-story-interactions { width: calc(100vw - 1rem) !important; } .social-story-reactions { right: 0 !important; max-width: calc(100vw - 1rem) !important; overflow-x: auto !important; } } /* BOTUKA PENDING CONVERSATION THREADS 20260818 */ .social-request-panel { display: grid; gap: 1rem; } .social-request-panel-heading h2 { margin-bottom: .25rem; } .social-request-panel-heading p { margin: 0; } .social-request-list { display: grid; gap: 1rem; } .social-request-thread { padding: 0; overflow: hidden; border: 1px solid var(--social-border); border-radius: var(--social-radius); background: var(--social-surface); } .social-request-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--social-border); } .social-request-person { display: flex; align-items: center; gap: .75rem; min-width: 0; } .social-request-person > div { display: grid; min-width: 0; } .social-request-person strong { overflow-wrap: anywhere; } .social-request-avatar { width: 3rem; height: 3rem; flex: 0 0 3rem; object-fit: cover; border-radius: 50%; } .social-request-count { flex: 0 0 auto; padding: .35rem .65rem; border-radius: 999px; background: var(--social-surface-secondary); color: var(--social-muted); font-size: .78rem; font-weight: 700; } .social-request-messages { display: grid; gap: .65rem; padding: 1rem; background: var(--social-surface-secondary); } .social-request-message { width: min(100%, 42rem); padding: .85rem 1rem; border: 1px solid var(--social-border); border-radius: .9rem; background: var(--social-surface); } .social-request-message-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; } .social-request-message-time { display: block; margin-top: .45rem; color: var(--social-muted); font-size: .72rem; } .social-request-context { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .65rem; align-items: center; margin-bottom: .75rem; padding: .5rem; border-inline-start: .2rem solid var(--social-primary); background: var(--social-surface-secondary); border-radius: .5rem; } .social-request-context img { width: 3rem; height: 3rem; object-fit: cover; border-radius: .45rem; } .social-request-context > div { display: grid; min-width: 0; } .social-request-context small { color: var(--social-muted); } .social-request-context strong { overflow-wrap: anywhere; } .social-request-actions { display: flex; justify-content: flex-end; gap: .65rem; padding: 1rem; border-top: 1px solid var(--social-border); } .social-request-actions form { margin: 0; } .social-request-actions button { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.65rem; padding: 0 1rem; border-radius: .7rem; cursor: pointer; font-weight: 700; } .social-request-accept { border: 1px solid var(--social-primary); background: var(--social-primary); color: var(--social-primary-text); } .social-request-reject { border: 1px solid var(--social-border); background: var(--social-surface); color: var(--social-text); } @media (max-width: 640px) { .social-request-header { align-items: flex-start; flex-direction: column; } .social-request-actions { display: grid; grid-template-columns: 1fr 1fr; } .social-request-actions button { width: 100%; } } /* ============================================================ BOTUKA STORY VIEWER — RESPONSIVO CONSOLIDADO 20260818 Desktop + Tablet + Mobile ============================================================ */ /* * O viewer ocupa a viewport inteira. * Todas as interacoes ficam dentro dele. */ .social-story-viewer { position: fixed !important; inset: 0 !important; z-index: 1000 !important; width: 100% !important; height: 100dvh !important; min-height: 100dvh !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 0 !important; border-radius: 0 !important; background: #080a0d !important; } /* ------------------------------------------------------------ MIDIA ------------------------------------------------------------ */ .social-story-media { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100dvh !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; background: #080a0d !important; } .social-story-media img { display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: 100dvh !important; object-fit: contain !important; object-position: center !important; } /* ------------------------------------------------------------ CABECALHO ------------------------------------------------------------ */ .social-story-viewer > header { position: absolute !important; z-index: 50 !important; top: 0 !important; left: 0 !important; right: 0 !important; min-width: 0 !important; display: flex !important; align-items: center !important; gap: .65rem !important; padding: max(.75rem, env(safe-area-inset-top)) max(.85rem, env(safe-area-inset-right)) .9rem max(.85rem, env(safe-area-inset-left)) !important; background: linear-gradient( to bottom, rgba(0,0,0,.82), rgba(0,0,0,.42) 55%, transparent ) !important; } .social-story-viewer > header > a:nth-child(2) { min-width: 0 !important; display: grid !important; } .social-story-viewer > header strong, .social-story-viewer > header small { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } /* ------------------------------------------------------------ NAVEGACAO ------------------------------------------------------------ */ .social-story-viewer > nav { position: absolute !important; z-index: 30 !important; top: 50% !important; left: 1rem !important; right: 1rem !important; display: flex !important; justify-content: space-between !important; pointer-events: none !important; transform: translateY(-50%) !important; } .social-story-viewer > nav a { pointer-events: auto !important; } /* ------------------------------------------------------------ BARRA DE INTERACOES ------------------------------------------------------------ */ .social-story-interactions { position: absolute !important; z-index: 60 !important; left: 50% !important; right: auto !important; bottom: max( 1rem, calc(env(safe-area-inset-bottom) + .75rem) ) !important; transform: translateX(-50%) !important; width: min(calc(100vw - 2rem), 46rem) !important; max-width: calc(100vw - 2rem) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto auto !important; align-items: center !important; gap: .55rem !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------------ FORMULARIO ------------------------------------------------------------ */ .social-story-interactions .social-story-reply { position: static !important; inset: auto !important; width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: .4rem !important; margin: 0 !important; padding: 0 !important; } /* ------------------------------------------------------------ INPUT ------------------------------------------------------------ */ .social-story-interactions .social-story-reply input[name="texto"] { display: block !important; width: 100% !important; min-width: 0 !important; height: 3rem !important; margin: 0 !important; padding: 0 1rem !important; border: 1px solid rgba(255,255,255,.55) !important; border-radius: 999px !important; background: rgba(8,10,13,.66) !important; color: #fff !important; outline: none !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .social-story-interactions .social-story-reply input[name="texto"]::placeholder { color: rgba(255,255,255,.78) !important; } /* ------------------------------------------------------------ BOTOES ------------------------------------------------------------ */ .social-story-interactions .social-story-reply button, .social-story-interactions .social-story-like, .social-story-interactions .social-reaction-picker > summary { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 3rem !important; min-width: 3rem !important; height: 3rem !important; margin: 0 !important; padding: 0 !important; border: 1px solid rgba(255,255,255,.48) !important; border-radius: 50% !important; background: rgba(8,10,13,.66) !important; color: #fff !important; cursor: pointer !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* contador de curtidas */ .social-story-like { gap: .2rem !important; } /* ------------------------------------------------------------ REACOES ------------------------------------------------------------ */ .social-reaction-picker { position: relative !important; margin: 0 !important; padding: 0 !important; } .social-reaction-picker > summary { list-style: none !important; } .social-reaction-picker > summary::-webkit-details-marker { display: none !important; } .social-story-interactions .social-story-reactions { position: absolute !important; z-index: 80 !important; right: 0 !important; bottom: calc(100% + .65rem) !important; display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: .25rem !important; max-width: min(90vw, 25rem) !important; padding: .4rem !important; overflow-x: auto !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 999px !important; background: rgba(8,10,13,.94) !important; box-shadow: 0 .8rem 2rem rgba(0,0,0,.45) !important; } /* ------------------------------------------------------------ DESKTOP ------------------------------------------------------------ */ @media (min-width: 881px) { /* * Story vertical centralizado. * O fundo preto ocupa o restante da tela. */ .social-story-media img { width: min(100%, 720px) !important; height: 100dvh !important; max-width: 720px !important; max-height: 100dvh !important; object-fit: contain !important; } /* * Barra alinhada ao Story, sem atravessar * toda a largura do monitor. */ .social-story-interactions { width: min(calc(100vw - 2rem), 700px) !important; } } /* ------------------------------------------------------------ TABLET / CELULAR ------------------------------------------------------------ */ @media (max-width: 880px) { .social-story-media img { width: 100% !important; height: 100dvh !important; max-width: 100% !important; max-height: 100dvh !important; object-fit: contain !important; } .social-story-interactions { width: calc( 100vw - max(1rem, env(safe-area-inset-left)) - max(1rem, env(safe-area-inset-right)) ) !important; max-width: none !important; } } /* ------------------------------------------------------------ CELULAR PEQUENO ------------------------------------------------------------ */ @media (max-width: 520px) { .social-story-viewer > header { gap: .5rem !important; } .social-story-interactions { grid-template-columns: minmax(0, 1fr) 2.75rem 2.75rem !important; gap: .35rem !important; bottom: max( .6rem, calc(env(safe-area-inset-bottom) + .5rem) ) !important; } .social-story-interactions .social-story-reply { grid-template-columns: minmax(0, 1fr) 2.75rem !important; gap: .3rem !important; } .social-story-interactions .social-story-reply input[name="texto"] { height: 2.75rem !important; padding-left: .85rem !important; padding-right: .85rem !important; font-size: 16px !important; } .social-story-interactions .social-story-reply button, .social-story-interactions .social-story-like, .social-story-interactions .social-reaction-picker > summary { width: 2.75rem !important; min-width: 2.75rem !important; height: 2.75rem !important; } .social-story-like span[data-story-like-count] { font-size: .7rem !important; } .social-story-interactions .social-story-reactions { max-width: calc(100vw - 1rem) !important; } } /* ------------------------------------------------------------ CELULAR MUITO ESTREITO ------------------------------------------------------------ */ @media (max-width: 380px) { .social-story-interactions { width: calc(100vw - .75rem) !important; gap: .25rem !important; } .social-story-interactions .social-story-reply input[name="texto"] { padding-left: .7rem !important; padding-right: .7rem !important; } } /* BOTUKA_STORY_COMPOSER_MULTILINE_START */ /* * Barra inferior principal. * Fica sobre o Story, sem criar segunda faixa desconectada. */ .social-story-interactions { position: absolute !important; z-index: 100 !important; left: 50% !important; right: auto !important; bottom: max( .75rem, calc( env(safe-area-inset-bottom) + .5rem ) ) !important; transform: translateX(-50%) !important; width: min( calc(100vw - 2rem), 44rem ) !important; max-width: calc(100vw - 1rem) !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 3rem 3rem !important; gap: .45rem !important; align-items: end !important; margin: 0 !important; padding: .4rem !important; border: 1px solid rgba(255, 255, 255, .13) !important; border-radius: 1.75rem !important; background: rgba(5, 8, 11, .74) !important; box-shadow: 0 .6rem 2rem rgba(0, 0, 0, .28) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; } /* * Form = textarea + botão enviar. */ .social-story-interactions .social-story-reply { position: static !important; inset: auto !important; width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) 3rem !important; align-items: end !important; gap: .4rem !important; margin: 0 !important; padding: 0 !important; } /* * Campo real de mensagem. */ .social-story-interactions .social-story-reply textarea[name="texto"] { box-sizing: border-box !important; display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 3rem !important; /* * JS controla o máximo real de 20 linhas. */ max-height: none !important; margin: 0 !important; padding: .8rem 1rem !important; resize: none !important; overflow-x: hidden !important; overflow-y: hidden; white-space: pre-wrap !important; overflow-wrap: anywhere !important; word-break: break-word !important; border: 1px solid rgba(255, 255, 255, .48) !important; border-radius: 1.5rem !important; background: rgba(13, 17, 22, .76) !important; color: #fff !important; font: inherit !important; font-size: 1rem !important; line-height: 1.35 !important; outline: none !important; scrollbar-width: thin; } .social-story-interactions .social-story-reply textarea[name="texto"]:focus { border-color: rgba(255, 255, 255, .9) !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, .12) !important; } .social-story-interactions .social-story-reply textarea[name="texto"]::placeholder { color: rgba(255, 255, 255, .72) !important; } /* * Todos os controles ficam sempre disponíveis. */ .social-story-interactions .social-story-reply button, .social-story-interactions .social-story-like, .social-story-interactions .social-reaction-picker > summary { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 3rem !important; min-width: 3rem !important; height: 3rem !important; min-height: 3rem !important; margin: 0 !important; padding: 0 !important; flex: 0 0 3rem !important; border: 1px solid rgba(255,255,255,.42) !important; border-radius: 50% !important; background: rgba(13,17,22,.78) !important; color: #fff !important; cursor: pointer !important; visibility: visible !important; opacity: 1 !important; } /* * Ícones nunca podem encolher ou desaparecer. */ .social-story-interactions button i, .social-story-interactions summary i, .social-story-interactions summary span { flex: 0 0 auto !important; font-size: 1.15rem !important; line-height: 1 !important; } /* * Curtidas. */ .social-story-like { gap: .15rem !important; } .social-story-like [data-story-like-count] { font-size: .7rem !important; line-height: 1 !important; } /* * Reações. */ .social-reaction-picker { position: relative !important; display: block !important; margin: 0 !important; } .social-reaction-picker > summary { list-style: none !important; } .social-reaction-picker > summary::-webkit-details-marker { display: none !important; } .social-story-interactions .social-story-reactions { position: absolute !important; z-index: 150 !important; right: 0 !important; bottom: calc(100% + .65rem) !important; display: flex !important; align-items: center !important; gap: .25rem !important; width: max-content !important; max-width: min( calc(100vw - 1rem), 30rem ) !important; padding: .45rem !important; overflow-x: auto !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 999px !important; background: rgba(5,8,11,.96) !important; box-shadow: 0 .8rem 2rem rgba(0,0,0,.55) !important; } .social-story-reactions button { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 2.6rem !important; width: 2.6rem !important; height: 2.6rem !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: rgba(255,255,255,.08) !important; font-size: 1.35rem !important; } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 600px) { .social-story-interactions { left: max( .5rem, env(safe-area-inset-left) ) !important; right: max( .5rem, env(safe-area-inset-right) ) !important; width: auto !important; max-width: none !important; transform: none !important; grid-template-columns: minmax(0, 1fr) 2.75rem 2.75rem !important; gap: .3rem !important; padding: .3rem !important; border-radius: 1.55rem !important; } .social-story-interactions .social-story-reply { grid-template-columns: minmax(0, 1fr) 2.75rem !important; gap: .3rem !important; } .social-story-interactions .social-story-reply textarea[name="texto"] { min-height: 2.75rem !important; padding: .7rem .85rem !important; /* * Evita zoom automático no iPhone. */ font-size: 16px !important; line-height: 1.35 !important; border-radius: 1.35rem !important; } .social-story-interactions .social-story-reply button, .social-story-interactions .social-story-like, .social-story-interactions .social-reaction-picker > summary { width: 2.75rem !important; min-width: 2.75rem !important; height: 2.75rem !important; min-height: 2.75rem !important; flex-basis: 2.75rem !important; } /* * Quando o textarea cresce muito, * a caixa pode ocupar boa parte da tela, * mas mantém os botões na base. */ .social-story-interactions.has-expanded-reply { align-items: end !important; } } /* ============================================================ MOBILE MUITO ESTREITO ============================================================ */ @media (max-width: 380px) { .social-story-interactions { left: .3rem !important; right: .3rem !important; grid-template-columns: minmax(0, 1fr) 2.55rem 2.55rem !important; gap: .2rem !important; } .social-story-interactions .social-story-reply { grid-template-columns: minmax(0, 1fr) 2.55rem !important; gap: .2rem !important; } .social-story-interactions .social-story-reply button, .social-story-interactions .social-story-like, .social-story-interactions .social-reaction-picker > summary { width: 2.55rem !important; min-width: 2.55rem !important; height: 2.55rem !important; min-height: 2.55rem !important; flex-basis: 2.55rem !important; } } /* BOTUKA_STORY_COMPOSER_MULTILINE_END */ /* ===================================================================== BOTUKA SOCIAL — MENSAGENS / LISTA DE CONVERSAS UI/UX 2026-08 ===================================================================== */ .social-conversations-panel { padding: 18px 16px; } .social-conversations-panel > h2 { margin: 0 0 12px; font-size: 1.05rem; font-weight: 700; } .social-conversation-list { display: flex; flex-direction: column; gap: 6px; } /* --------------------------------------------------------------------- CARD --------------------------------------------------------------------- */ .social-conversation-card { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 14px; width: 100%; min-height: 96px; padding: 12px 14px; border: 1px solid transparent; border-radius: 16px; text-decoration: none; color: inherit; background: transparent; transition: background-color .18s ease, border-color .18s ease, transform .18s ease; } .social-conversation-card:hover { background: rgba(255,255,255,.035); border-color: rgba(255,255,255,.07); } .social-conversation-card:focus-visible { outline: 2px solid var(--social-accent, #5edff2); outline-offset: 2px; } /* --------------------------------------------------------------------- AVATAR — SEMPRE PEQUENO E A ESQUERDA --------------------------------------------------------------------- */ .social-conversation-avatar { position: relative; width: 72px; height: 72px; min-width: 72px; max-width: 72px; min-height: 72px; max-height: 72px; overflow: hidden; border-radius: 16px; background: rgba(255,255,255,.055); flex: 0 0 72px; } .social-conversation-avatar img { display: block; width: 100% !important; height: 100% !important; max-width: 72px !important; max-height: 72px !important; object-fit: cover; object-position: center; border-radius: inherit; } .social-conversation-avatar > span { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; font-size: 1.4rem; font-weight: 700; } /* --------------------------------------------------------------------- CONTEUDO CENTRAL --------------------------------------------------------------------- */ .social-conversation-summary { min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 3px; } /* nome + horario */ .social-conversation-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; } .social-conversation-topline strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1rem; font-weight: 700; color: var(--social-text, #f5f7f8); } .social-conversation-topline time { flex: 0 0 auto; font-size: .78rem; line-height: 1; color: var(--social-muted, #a8b0ba); } /* username */ .social-conversation-username { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; color: var(--social-muted, #a8b0ba); } /* --------------------------------------------------------------------- ULTIMA MENSAGEM MAXIMO 3 LINHAS --------------------------------------------------------------------- */ .social-conversation-preview { display: -webkit-box; margin: 4px 0 0; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; max-height: 4.2em; font-size: .9rem; line-height: 1.4; color: var(--social-text-soft, #d7dce1); overflow-wrap: anywhere; word-break: break-word; } .social-conversation-preview.social-muted { color: var(--social-muted, #8f99a5); } /* --------------------------------------------------------------------- META DIREITA --------------------------------------------------------------------- */ .social-conversation-meta { align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-width: 34px; } .social-conversation-unread { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; font-size: .76rem; font-weight: 700; color: #071116; background: var(--social-accent, #5edff2); } .social-conversation-meta .bi-chevron-right { font-size: .9rem; color: var(--social-muted, #8f99a5); } /* --------------------------------------------------------------------- SEPARADOR SUAVE --------------------------------------------------------------------- */ .social-conversation-card + .social-conversation-card::before { content: ""; position: absolute; top: -3px; left: 86px; right: 14px; height: 1px; background: rgba(255,255,255,.055); } /* --------------------------------------------------------------------- MOBILE --------------------------------------------------------------------- */ @media (max-width: 720px) { .social-conversations-panel { padding: 14px 10px; } .social-conversation-card { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 11px; min-height: 82px; padding: 10px 8px; border-radius: 14px; } .social-conversation-avatar { width: 58px; height: 58px; min-width: 58px; max-width: 58px; min-height: 58px; max-height: 58px; flex-basis: 58px; border-radius: 14px; } .social-conversation-avatar img { max-width: 58px !important; max-height: 58px !important; } .social-conversation-topline strong { font-size: .94rem; } .social-conversation-username { font-size: .77rem; } .social-conversation-preview { font-size: .84rem; /* * No celular mantemos compacto. * Continua limitado a no máximo 3 linhas. */ -webkit-line-clamp: 2; line-clamp: 2; max-height: 2.8em; } .social-conversation-card + .social-conversation-card::before { left: 69px; } } /* --------------------------------------------------------------------- TELAS MUITO PEQUENAS --------------------------------------------------------------------- */ @media (max-width: 420px) { .social-conversation-card { grid-template-columns: 52px minmax(0, 1fr) 26px; } .social-conversation-avatar { width: 52px; height: 52px; min-width: 52px; max-width: 52px; min-height: 52px; max-height: 52px; } .social-conversation-avatar img { max-width: 52px !important; max-height: 52px !important; } .social-conversation-topline time { font-size: .7rem; } .social-conversation-meta { min-width: 26px; } }