/* Archive-mode additions for the Instagram, Facebook and LinkedIn rooms (social-archive.js).
   Everything is scoped to .social-archive so the demo rooms keep their exact look; the chrome
   itself (headers, feeds, profiles, conversations, bottom navs) comes from social.css. */

.social-archive [hidden]{display:none!important}
.social-archive .social-content{overflow-wrap:anywhere}
.social-archive .sa-pre{white-space:pre-line}
.social-archive .archive-state{margin:10px 12px}
.social-archive .archive-empty-panel{background:#fff}
.social-archive .sa-quiet{color:#6f6b64;font-size:12px;line-height:1.45}
.social-archive .sa-center{text-align:center;padding:26px 14px}
.social-archive .sa-pad{padding:4px 14px 10px}
.social-archive .sa-lede{padding:0 15px 10px;font-size:12px;line-height:1.45;color:#6f6b64}
.social-archive .sa-count-label{font-size:12px;color:#777;font-weight:400}
.social-archive .sa-section-title{display:flex;align-items:baseline;gap:8px;font-size:16px!important;line-height:1.25;padding:14px 14px 6px}
.social-archive .sa-section-title>span{font-size:12px;font-weight:400;color:#777}
.social-archive .sa-status{display:inline-block;align-self:center;padding:2px 6px;border-radius:4px;background:#efe9df;color:#5b574f;font:600 9px/1.3 var(--font-data,monospace);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.social-archive .sa-chip{flex-shrink:0;padding:3px 8px;border-radius:12px;background:#efefef;color:#555;font-size:10px;white-space:nowrap}
.social-archive .sa-more-link{display:block;padding:12px 0;font-weight:600;color:#bc3900!important}
.social-archive .sa-loading,.social-archive .sa-error{margin:8px 0 14px!important;padding:8px 10px;font:11px/1.45 var(--font-data,monospace);text-align:center}
.social-archive .sa-loading{color:#555;background:#f4f1eb}
.social-archive .sa-error{background:#f6dcd2;color:#7a1d12}
.social-archive .sa-block-link{display:block}

/* Avatars: a released profile photo fills the circle; other people get an initial, never the stamp. */
.social-archive .avatar.avatar-photo{background:#ddd}
.social-archive .avatar.avatar-photo img{width:100%;height:100%;object-fit:cover}
.social-archive .sa-initial{font:600 15px/1 var(--font-body,"IBM Plex Sans",sans-serif);color:#5b574f;background:#ece7dd}
.social-archive .social-message-row>.sa-initial{font-size:20px}
.social-archive .chat-row>.avatar{width:26px;height:26px;font-size:11px}

/* Media */
.social-archive .sa-media{position:relative;background:#111}
.social-archive .sa-media .sa-img,.social-archive .sa-media .sa-video{display:block;width:100%;height:auto;max-height:560px;object-fit:contain;background:#111}
.social-archive .sa-media .sa-missing{min-height:150px;background:#ece7dd}
.social-archive .sa-missing span{max-width:260px;line-height:1.5}
.social-archive .sa-carousel{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.social-archive .sa-carousel::-webkit-scrollbar{display:none}
.social-archive .sa-carousel:focus-visible{outline:2px solid #ff4f00;outline-offset:-2px}
.social-archive .sa-slide{flex:0 0 100%;min-width:0;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;background:#111}
.social-archive .sa-carousel-badge{position:absolute;top:10px;right:10px;display:inline-flex;align-items:center;gap:3px;padding:3px 7px;border-radius:12px;background:#000000a6;color:#fff;font:600 11px var(--font-body,sans-serif);pointer-events:none}
.social-archive .sa-carousel-badge .icon{width:13px;height:13px}
.social-archive .sa-media-note{margin:6px 13px!important;padding:0!important;font:10px/1.45 var(--font-data,monospace)!important;color:#6a665e}
.social-archive .sa-media .sa-media-note{margin:0!important;padding:10px 12px!important;color:#e6e1d8;background:#111}
.social-archive .sa-audio{display:block;width:calc(100% - 24px);margin:10px 12px}
.social-archive .sa-video-tile{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:80px;background:#1a1a1a;color:#fff}

/* Grids (Instagram profile, Facebook photos, albums) */
.social-archive .sa-grid{margin-bottom:12px}
.social-archive .sa-tile{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;background:#ece7dd}
.social-archive .sa-tile>.sa-img,.social-archive .sa-tile>.sa-video-tile{display:block;width:100%;height:100%;object-fit:cover}
.social-archive .sa-tile-badge{position:absolute;top:6px;right:6px;color:#fff;filter:drop-shadow(0 1px 2px #0009)}
.social-archive .sa-tile-badge .icon{width:16px;height:16px}
.social-archive .sa-tile-text{display:block;height:100%;padding:9px;overflow:hidden;font-size:10px;line-height:1.4;color:#333;background:#f4f1eb}
.social-archive .sa-tile-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#8a857d}
.social-archive .sa-tile-label{position:absolute;left:5px;bottom:5px;padding:2px 5px;border-radius:4px;background:#000000a6;color:#fff;font:600 9px var(--font-body,sans-serif)}

/* Posts */
.social-archive .ig-post-author>.sa-status{margin-right:4px}
.social-archive .ig-post-caption>.sa-quiet{margin-bottom:6px}
.social-archive .sa-activity-line{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:#555}
.social-archive .sa-place{display:flex!important;align-items:center;gap:7px;padding:0 13px 10px!important;font-size:12px!important;color:#555}
.social-archive .sa-place .icon{width:16px;height:16px;color:#777}
.social-archive .fb-post-author>.sa-status,.social-archive .li-post-author>.sa-status{align-self:flex-start}
.social-archive .li-post-author{align-items:flex-start}
.social-archive .li-post .li-link-preview{margin:0}
.social-archive .sa-comments{padding:4px 13px 16px;border-top:1px solid #eee;background:#fff}
.social-archive .sa-comments>.sa-section-title{padding:12px 0 6px}
.social-archive .sa-comment{display:flex;gap:9px;padding:8px 0}
.social-archive .sa-comment>.avatar{width:30px;height:30px}
.social-archive .sa-comment p{font-size:13px;line-height:1.4}
.social-archive .sa-comment small{display:block;margin-top:3px;color:#777}
.social-archive .sa-composer-note{flex:1;font-size:13px;color:#8a8a8a}

/* Profiles */
.social-archive .ig-profile-stats>a{display:flex;flex-direction:column;flex:1;gap:3px;text-align:center;font-size:12px}
.social-archive .ig-profile-bio{padding-bottom:14px}
.social-archive .ig-profile-bio>p{margin-top:4px}
.social-archive .sa-url{display:flex!important;align-items:center;gap:5px;margin-top:5px;color:#171717!important;font-weight:600}
.social-archive .sa-url .icon{width:15px;height:15px}
.social-archive .sa-cover{display:flex;align-items:flex-end;justify-content:center;height:182px;overflow:hidden;background:#ff4f00}
.social-archive .sa-cover .sa-img{width:100%;height:100%;object-fit:cover}
.social-archive .sa-cover-plain img{width:62%;max-height:150px;object-fit:contain;transform:rotate(-8deg);margin-bottom:-6px}
.social-archive .sa-li-cover{height:110px;background:#ddd8cf}
.social-archive .sa-li-cover img{width:42%;max-height:96px}
.social-archive .fb-profile-intro>p{margin-bottom:6px}
.social-archive .fb-profile-tabs{border-top:0}
.social-archive .fb-details>p>span{min-width:0}
.social-archive .li-profile-intro .li-profile-actions{margin-top:10px}
.social-archive .li-profile-section>.sa-quiet{margin-top:2px}
.social-archive .sa-entry{padding:12px 0;border-top:1px solid #eee}
.social-archive .li-profile-section>h3+.sa-entry{border-top:0;padding-top:2px}
.social-archive .sa-entry>.avatar{width:44px;height:44px;border-radius:4px;font-size:17px}
.social-archive .sa-entry>div{min-width:0;flex:1}
.social-archive .sa-entry small{display:block}
.social-archive .sa-desc{margin-top:6px!important;font-size:12px;line-height:1.5;color:#333}
.social-archive .sa-entry-plain{padding:10px 0}

/* Message lists and conversations */
.social-archive .social-section-label .sa-count-label{font-size:12px}
.social-archive .sa-thread-row>span:not(.avatar){min-width:0}
.social-archive .sa-thread-row small{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.social-archive .sa-thread-intro{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 0 18px;text-align:center}
.social-archive .sa-thread-intro .sa-thread-hero{width:76px;height:76px;font-size:30px}
.social-archive .sa-thread-intro strong{font-size:16px}
.social-archive .sa-thread-intro small{color:#777;max-width:300px}
.social-archive .sa-msg{display:flex;flex-direction:column;align-items:flex-start;gap:3px;max-width:78%;min-width:0}
.social-archive .chat-row.sent .sa-msg{align-items:flex-end}
.social-archive .sa-msg .chat-bubble{max-width:100%}
.social-archive .chat-sender{margin:0 0 0 12px;font-size:10px!important;color:#777}
.social-archive .sa-subject{display:block;margin-bottom:3px}
.social-archive .sa-bubble-unsent{background:transparent!important;border:1px solid #dcdcdc;color:#777!important;font-style:italic}
.social-archive .sa-share{display:flex;gap:7px;align-items:flex-start;margin-top:5px;padding:7px 9px;border-radius:12px;background:#ffffff8c}
.social-archive .sa-share .icon{width:16px;height:16px;margin-top:1px}
.social-archive .sa-share>span{display:flex;flex-direction:column;gap:2px;min-width:0}
.social-archive .sa-share small{color:#555;font-size:10px}
.social-archive .sa-reactions{display:inline-flex;margin-top:-7px;padding:1px 7px;border-radius:12px;border:1px solid #e3e3e3;background:#fff;font-size:12px;box-shadow:0 1px 2px #0000001a}
.social-archive .sa-msg-status{font-size:9px!important;color:#888}
.social-archive .chat-attachment.sa-chat-media{margin-left:0;width:210px;max-width:100%}
.social-archive .sa-chat-media .sa-img,.social-archive .sa-chat-media .sa-video{display:block;width:100%;height:auto;background:#111}
.social-archive .sa-chat-media .sa-missing{min-height:120px;margin:0}
.social-archive .sa-chat-audio .sa-audio{width:220px;max-width:100%;margin:0}
.social-archive .sa-chat-file{display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #e3e3e3;border-radius:14px;font-size:11px;color:#555}
.social-archive .sa-chat-file .icon{width:18px;height:18px}
.social-archive .sa-readonly-composer{margin-bottom:14px}
.social-archive .sa-readonly-composer .chat-placeholder{padding:9px 12px;font-size:11px!important;color:#777!important}

/* Search */
.social-archive .sa-search .social-search-field{cursor:text}
.social-archive .sa-search .social-search-field:focus-within{outline:2px solid #ff4f00;outline-offset:1px}
.social-archive .sa-search input{flex:1;min-width:0;border:0;padding:0;background:transparent;color:#171717;font:inherit;outline:none}
.social-archive .sa-search input::-webkit-search-cancel-button{cursor:pointer}
.social-archive .sa-search .social-record-note{padding:8px 2px 0}
.social-archive .sa-results{padding:0 14px}
.social-archive .sa-result-thumb{display:block;width:52px;height:52px;flex-shrink:0;overflow:hidden;border-radius:6px;background:#ece7dd}
.social-archive .sa-result-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.social-archive .sa-result-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;flex-shrink:0;border-radius:50%;background:#efefef;color:#555}
/* social.css stretches every non-avatar span in a message row (flex:1); thumbnails, icons and chips keep their size. */
.social-archive .social-message-row>.sa-result-thumb{display:block;flex:0 0 52px;gap:0}
.social-archive .social-message-row>.sa-result-icon{display:flex;flex:0 0 52px;flex-direction:row;gap:0}
.social-archive .social-message-row>.sa-chip,.social-archive .social-message-row>.sa-status{display:inline-block;flex:0 0 auto}
.social-archive .sa-result>span:not(.avatar):not(.sa-result-thumb):not(.sa-result-icon){min-width:0}
.social-archive .sa-result small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Menus and people lists */
.social-archive .sa-menu-row{display:flex;align-items:center;gap:12px;padding:15px 0;border-bottom:1px solid #eee}
.social-archive .sa-menu-row>strong{flex:1;font-size:14px}
.social-archive .sa-menu-row>small{font-size:11px;color:#777;text-align:right}
.social-archive .sa-menu-row>.icon:last-child{width:18px}
.facebook-app.social-archive.social-tab-more .sa-menu-row{margin:8px 0;padding:15px 12px;border:1px solid #eee;border-radius:9px;background:#fff}
.social-archive .social-menu>.social-record-note{padding:14px 0}
.social-archive .social-notifications>.sa-lede{padding:0 0 6px}
.social-archive .social-notifications>.sa-section-title{padding:14px 0 4px}
.social-archive .social-notifications>.sa-more-link{padding:12px 2px}
.social-archive .sa-people-page{padding-bottom:12px;background:#fff}
.social-archive .fb-friend-request.sa-person{align-items:center;padding:7px 14px}
.social-archive .sa-person>.avatar{width:48px;height:48px;font-size:18px}
.social-archive .sa-person strong{font-size:14px}
.social-archive .sa-person small{margin:3px 0 0!important}
.social-archive .fb-friends>h3{padding:14px 14px 6px}
.social-archive .li-network .li-invitations{border-bottom:1px solid #e9e6e1}
.social-archive .li-network .li-invitations+h3,.social-archive .li-network .sa-people-page{border-top:6px solid #e9e6e1}

/* Stories and reels */
.social-archive .sa-story{min-height:100%;padding:10px 0 16px;background:#111;color:#fff}
.social-archive .sa-story-bar{height:2px;margin:0 10px 10px;border-radius:2px;background:#ffffff40}
.social-archive .sa-story-bar span{display:block;width:100%;height:100%;background:#fff}
.social-archive .sa-story-head{display:flex;align-items:center;gap:8px;padding:0 12px 10px}
.social-archive .sa-story-head .avatar{width:32px;height:32px}
.social-archive .sa-story-head small{color:#cfcfcf}
.social-archive .sa-story-media .sa-media{background:#000}
.social-archive .sa-story .sa-media-note{color:#bdbdbd}
.social-archive .sa-story .sa-quiet{padding:30px 14px;color:#bbb;text-align:center}
.social-archive .sa-story-caption{padding:10px 14px 0;font-size:13px}
.social-archive .sa-story-nav{display:flex;justify-content:space-between;padding:14px}
.social-archive .sa-story-step{color:#fff!important;font-size:12px;font-weight:600}
.social-archive .social-reel.sa-reel{min-height:0;height:auto;padding-bottom:16px;border-bottom:1px solid #333}
.social-archive .sa-reel .sa-media{background:#000}
.social-archive .sa-reel .sa-media-note{color:#bdbdbd}
.social-archive .sa-reel .sa-quiet{padding:40px 14px;color:#bbb;text-align:center}
.social-archive .sa-reel .reel-caption{position:static;padding:12px 14px 0}
.social-archive .sa-reel .reel-caption .sa-status{background:#333;color:#ddd}
.social-archive .sa-reel-stats{display:flex;gap:16px;padding:10px 14px 0;font-size:11px}
.social-archive .sa-reel-stats>span{display:inline-flex;align-items:center;gap:4px}
.social-archive .sa-reel-stats .icon{width:20px;height:20px}
.social-archive .sa-reel-open{color:#fff!important;font-size:11px;text-decoration:underline!important}
.social-archive .sa-dark{min-height:320px;padding:1px 0;background:#1a1a1a}
.social-archive .sa-dark .archive-empty-panel{background:transparent;border-color:#666;color:#ddd}
.social-archive .fb-story.sa-fb-story>.sa-img,.social-archive .fb-story.sa-fb-story>.sa-video-tile{display:block;width:100%;height:100%;object-fit:cover}

/* Facebook photos, albums, memories */
.social-archive .sa-albums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:0 14px 16px}
.social-archive .sa-album{display:flex;flex-direction:column;gap:3px;min-width:0}
.social-archive .sa-album-cover{display:flex;align-items:center;justify-content:center;aspect-ratio:1;overflow:hidden;border-radius:8px;background:#ece7dd;color:#8a857d}
.social-archive .sa-album-cover .sa-img{width:100%;height:100%;object-fit:cover}
.social-archive .sa-album strong{font-size:13px}
.social-archive .sa-album small{color:#777}
.social-archive .sa-album-head{padding:14px}
.social-archive .sa-album-head h2{font-size:21px}
.social-archive .sa-album-head small{display:block;margin-top:4px;color:#777}
.social-archive .sa-album-head p{margin-top:8px;font-size:13px;line-height:1.45}
.social-archive .sa-albums-of{padding:0 13px 12px!important;font-size:12px!important}
.social-archive .sa-albums-of a{font-weight:600;color:#bc3900}
.social-archive .sa-photo>.sa-quiet{padding:6px 13px!important;font-size:12px!important}
.social-archive .sa-year{border-bottom:5px solid #d8d6d3}
.social-archive .sa-memory{padding:10px 14px}
.social-archive .sa-memory>span:not(.sa-result-thumb):not(.sa-result-icon){min-width:0}

/* LinkedIn articles and the read-only composer */
.social-archive .sa-article{padding-bottom:20px;background:#fff}
.social-archive .sa-article h1{margin:0;padding:16px 14px 10px;font:700 23px/1.2 var(--font-body,sans-serif)}
.social-archive .sa-article-body{padding:12px 14px;font-size:14px;line-height:1.6}
.social-archive .sa-readonly-note{margin:14px 0!important;padding:10px 12px;border:1px dashed #b9b3a8;font:11px/1.5 var(--font-data,monospace);color:#555}
.social-archive .social-post-composer .sa-section-title{padding:6px 0}
.social-archive .li-search .social-search-wrap{padding:10px 0 12px}
.social-archive .li-search .sa-results{padding:0}
.social-archive .li-search>.li-post{margin:10px -15px 0}