:root{--purple:#6c3df3;--violet:#8b5cf6;--deep:#33206f;--pink:#ec4899;--blue:#3b82f6;--green:#19b982;--orange:#f59e0b;--ink:#202335;--muted:#7a8098;--line:#e9eaf2;--soft:#f6f6fb;--card:#fff;--shadow:0 10px 32px rgba(64,42,130,.08);--radius:18px; /* shell geometry — the sidebar runs full height and the topbar sits beside it */ --rail:252px;--topbar-h:74px; --radius-sm:12px;--radius-lg:20px; --brand-grad:linear-gradient(135deg,#6c3df3,#9f67ff); --shadow-sm:0 2px 10px rgba(64,42,130,.06); --ring:0 0 0 3px rgba(108,61,243,.14); --nav-idle:#5b6076;--nav-hover:#f4f0ff;--nav-active:linear-gradient(90deg,#6c3df3,#8250f6)}*{box-sizing:border-box} /* The hidden attribute only sets display:none at the UA level, so any rule here that sets display (flex, grid, block) silently un-hides the element. Panels toggled from JS with .hidden rely on this, so it must win outright. */ [hidden]{display:none!important} html{scroll-behavior:smooth}/* The stack had no emoji face in it, so an emoji fell through to whatever the platform picked last - often a flat or monochrome fallback. Naming each platform's colour emoji font makes every device use its own good one. */ body{margin:0;background:#f8f8fc;color:var(--ink);font-size:15px;line-height:1.5; font-family:Inter,"Segoe UI",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Twemoji Mozilla"}button,input,textarea,select{font:inherit}button,a{transition:.2s ease}a{color:inherit;text-decoration:none}button{cursor:pointer}.topbar{height:var(--topbar-h);background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 24px;position:fixed;top:0;right:0;left:var(--rail);z-index:50}.brand{display:flex;align-items:center;gap:11px;font-size:20px}.brand-copy{display:flex;flex-direction:column;line-height:1.15}.brand-copy b{font-weight:800;letter-spacing:-.4px}.brand small{color:var(--purple);font-weight:700;font-size:10px;letter-spacing:.4px}.brand-mark{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:14px 14px 14px 5px;background:var(--brand-grad);color:#fff;font-weight:900;font-size:22px;box-shadow:0 7px 18px rgba(108,61,243,.28)}.global-search{height:46px;max-width:520px;flex:1;background:var(--soft);border:1px solid transparent;border-radius:14px;display:flex;align-items:center;padding:0 6px 0 16px;gap:8px}.global-search:focus-within{border-color:#cfc2fa;background:#fff;box-shadow:var(--ring)}.global-search input{border:0;outline:0;background:transparent;width:100%;color:var(--ink);font-size:13.5px}.search-go{border:0;background:transparent;color:var(--muted);width:34px;height:34px;display:grid;place-items:center;border-radius:10px}.search-go:hover{color:var(--purple);background:#f0eaff}.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.top-divider{width:1px;height:26px;background:var(--line);margin:0 4px}.icon-button{width:42px;height:42px;background:var(--soft);border:0;border-radius:13px;display:grid;place-items:center;position:relative;color:var(--nav-idle)}.icon-button:hover{background:#f0eaff;color:var(--purple)}.icon-button>i{position:absolute;width:8px;height:8px;background:var(--pink);border:2px solid #fff;border-radius:50%;right:8px;top:8px}.dot-badge{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:var(--pink);color:#fff;font-size:9px;font-weight:800;font-style:normal;display:grid;place-items:center;border:2px solid #fff} /* The Chat tab in the bottom bar carries the same badge, tucked against the icon rather than floating off a 42px button. */ .tab-badge{top:2px;right:auto;left:calc(50% + 4px);transform:none} /* The new-message toast is a link, so it needs to read as one. */ .toast-tap{cursor:pointer;text-decoration:none;display:block} .toast-tap:after{content:" \2192";font-weight:700}.theme-btn .icon-moon{display:none}html[data-theme="dark"] .theme-btn .icon-sun{display:none}html[data-theme="dark"] .theme-btn .icon-moon{display:block}@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .theme-btn .icon-sun{display:none}html:not([data-theme="light"]) .theme-btn .icon-moon{display:block}}.create-btn{height:44px;gap:7px;padding:0 20px;border-radius:13px;font-size:13.5px}.create-btn .nav-icon{width:17px;height:17px}/* Needs .nav-icon in the selector: the generic .nav-icon rule below sets display:inline-grid, which would otherwise stack the three bars into one. */ .nav-icon.burger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:18px;height:14px}.nav-icon.burger i{display:block;height:2px;width:100%;border-radius:2px;background:currentColor;position:static}.mini-profile{display:flex;align-items:center;gap:9px}.mini-profile span{display:flex;flex-direction:column}.mini-profile b{font-size:13px}.mini-profile small{font-size:11px;color:var(--muted)}.avatar{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}.avatar-fallback{background:linear-gradient(135deg,#d4c7ff,#ffd0e5);color:var(--deep);font-weight:800}.avatar.small{width:36px;height:36px;font-size:12px}.avatar.tiny{width:30px;height:30px;font-size:10px}.avatar.large{width:74px;height:74px;font-size:22px}.avatar.xlarge{width:96px;height:96px;font-size:28px}.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--rail);background:#fff;border-right:1px solid var(--line);padding:0 14px 20px;display:flex;flex-direction:column;gap:14px;z-index:60;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin}.sidebar-brand{height:var(--topbar-h);flex:0 0 auto;padding:0 6px;position:sticky;top:0;background:inherit;z-index:1}.sidebar nav{display:flex;flex-direction:column;gap:3px}.sidebar nav a{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:13px;color:var(--nav-idle);font-weight:600;font-size:13.5px}.sidebar nav a:hover{background:var(--nav-hover);color:var(--purple)}.sidebar nav a.active{background:var(--nav-active);color:#fff;box-shadow:0 8px 18px rgba(108,61,243,.25)}.sidebar nav a.active .count-badge{background:rgba(255,255,255,.25)} /* Icons are inline SVG: they take their size here and their colour from the text. */ .nav-icon{display:inline-grid;place-items:center;width:20px;height:20px;flex:0 0 auto}.nav-icon svg{width:100%;height:100%;display:block}.nav-icon.flip{transform:rotate(180deg)}.caret{width:14px;height:14px;color:var(--muted)} .sidebar nav em{margin-left:auto;font-size:9px;font-style:normal;padding:2px 7px;border-radius:20px;background:#fae9f3;color:var(--pink)}.nav-label{font-size:10px;text-transform:uppercase;letter-spacing:1.2px;color:#aaaebe;padding:14px 14px 2px;margin:0}.sidebar-card{margin:0 3px;padding:18px;border-radius:16px;color:#fff;background:linear-gradient(145deg,#6b3ff0,#9b5ce8);display:flex;flex-direction:column;box-shadow:0 14px 28px rgba(108,61,243,.22)}.sidebar-card span{font-size:10px;opacity:.8}.sidebar-card b{font-size:14px;margin:7px 0}.sidebar-card a{font-size:11px;font-weight:700}.app-main{margin-left:var(--rail);padding:calc(var(--topbar-h) + 26px) 28px 30px;min-height:100vh;max-width:1600px}.three-column{display:grid;grid-template-columns:minmax(480px,690px) 320px;justify-content:center;gap:24px}.feed{min-width:0}.rightbar{display:flex;flex-direction:column;gap:18px}.stories,.composer,.post-card,.widget,.content-card,.entity-card,.campaign-card,.settings-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.stories{display:flex;gap:18px;padding:16px 22px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;margin-bottom:16px} .stories::-webkit-scrollbar{display:none}.stories a{display:flex;align-items:center;flex-direction:column;gap:5px;font-size:11px}.story-ring{display:grid;padding:3px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--pink),var(--orange))}.story-avatar{width:52px;height:52px;border:3px solid #fff}.composer{padding:16px 18px;margin-bottom:16px;display:grid;grid-template-columns:44px 1fr;gap:12px}.composer>button{border:0;background:var(--soft);text-align:left;color:var(--muted);border-radius:24px;padding:0 17px}.composer>div{grid-column:2;display:flex;gap:24px;color:var(--muted);font-size:12px}.composer>div span:first-child{color:var(--green)}.composer>div span:nth-child(2){color:var(--pink)}.composer>div span:nth-child(3){color:var(--blue)}.post-card{margin-bottom:18px;overflow:hidden;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.post-card:hover{box-shadow:var(--shadow)}.post-head{display:flex;gap:11px;align-items:center;padding:16px 18px 10px}.post-head div{display:flex;flex-direction:column;min-width:0}.post-head b{display:flex;align-items:center;gap:4px;font-size:13.5px}.post-head small{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11.5px;margin-top:1px}.nav-icon.scope{width:12px;height:12px;opacity:.75}.verified{display:inline-grid;place-items:center;color:#fff;background:var(--blue);border-radius:50%;width:15px;height:15px;flex:0 0 auto}.verified .nav-icon{width:9px;height:9px}.verified svg{stroke-width:3.4}.more{margin-left:auto;border:0;background:transparent;color:var(--muted);width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto}.more:hover{background:var(--soft);color:var(--ink)}.sponsored-label{margin:0;padding:8px 18px;color:var(--purple);font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;background:#f7f4ff;border-bottom:1px solid var(--line)}.ad-chip{padding:2px 7px;border-radius:20px;background:#f0eaff;color:var(--purple);font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px}.post-body{margin:2px 18px 14px;font-size:14px;line-height:1.55}.post-media{display:block;width:100%;max-height:470px;object-fit:cover} /* Meta strip: who reacted on the left, counts and the bookmark on the right. */ .post-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px 9px 18px;color:var(--muted);font-size:11.5px;border-top:1px solid var(--line)}.post-meta em{font-style:normal}.meta-right{display:flex;align-items:center;gap:14px}.meta-right>a,.meta-right>span{display:flex;align-items:center;gap:5px;color:var(--muted)}.meta-right>a:hover{color:var(--purple)}.meta-right .nav-icon{width:14px;height:14px}.save-inline{display:flex;margin-left:2px}.save-btn{border:0;background:transparent;color:var(--muted);width:32px;height:32px;border-radius:9px;display:grid;place-items:center}.save-btn:hover{background:var(--soft);color:var(--purple)}.save-btn.is-saved{color:var(--purple)}.save-btn.is-saved svg{fill:currentColor} .post-actions{height:48px;padding:4px 12px;display:flex;align-items:center;justify-content:space-around;border-top:1px solid var(--line)}.post-actions form{flex:1}.post-actions button{border:0;background:transparent;color:#696e82;font-size:12px;font-weight:600;padding:8px;display:flex;align-items:center;gap:7px;justify-content:center;width:100%;border-radius:10px}.post-actions .nav-icon{width:17px;height:17px}.post-actions button:hover,.post-actions button.liked{color:var(--purple);background:#f7f3ff}.reaction-main .nav-icon{width:17px;height:17px} /* An async form in flight: dimmed and not clickable again, so a tap is acknowledged straight away instead of looking like nothing happened. */ form.is-busy{opacity:.55;pointer-events:none;transition:opacity .12s ease} form.is-busy button{cursor:progress} /* --- sizes for the icons that replaced the last glyph placeholders --- */ .call-btn .nav-icon{width:24px;height:24px} .incoming-call button .nav-icon{width:17px;height:17px} .group-dot .nav-icon{width:9px;height:9px} .feature-list li span .nav-icon{width:16px;height:16px} .feature-list li span{display:inline-grid;place-items:center;flex:0 0 auto} .play-badge .nav-icon{width:30px;height:30px} .empty-feed>span .nav-icon,.feed-empty>span .nav-icon{width:40px;height:40px;color:#d8d3e8} /* --- dressed file picker (replaces the raw "Choose File" control) --- */ .file-field{display:flex;align-items:center;gap:10px;min-height:46px;padding:7px 9px;cursor:pointer; border:1px dashed var(--line);border-radius:12px;background:var(--soft);transition:.15s ease} .file-field:hover{border-color:#cfc2fa;background:var(--nav-hover)} .file-field.has-file{border-style:solid;background:var(--card)} .file-field input[type=file]{display:none} .file-pick{flex:0 0 auto;padding:6px 12px;border-radius:9px;background:var(--card);border:1px solid var(--line); font-size:11.5px;font-weight:700;color:var(--purple);white-space:nowrap} .file-field:hover .file-pick{border-color:#cfc2fa} .file-name{flex:1;min-width:0;font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .has-file .file-name{color:var(--ink);font-weight:600} .file-thumbs{display:flex;gap:5px;flex:0 0 auto} .file-thumbs img{width:34px;height:34px;border-radius:8px;object-fit:cover;display:block} .file-clear{flex:0 0 auto;border:0;background:transparent;color:var(--muted);font-size:18px;line-height:1;padding:0 5px} .file-clear:hover{color:#c82b60} /* --- confirmation sheet, in place of the browser's own confirm() dialog --- */ .confirm-sheet{position:fixed;inset:0;z-index:220;display:grid;place-items:center;padding:20px; background:rgba(25,18,50,.5);backdrop-filter:blur(3px)} .confirm-card{width:min(400px,100%);background:var(--card);color:var(--ink);border-radius:18px;padding:24px; box-shadow:0 30px 80px rgba(20,10,50,.32);animation:confirm-in .16s ease} @keyframes confirm-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}} .confirm-card p{margin:0 0 20px;font-size:14px;line-height:1.55} .confirm-actions{display:flex;justify-content:flex-end;gap:9px} .confirm-actions button{min-width:96px;justify-content:center} .confirm-actions .is-danger{background:linear-gradient(135deg,#e0356b,#c82b60);box-shadow:0 7px 16px rgba(200,43,96,.26)} .confirm-actions .is-danger:hover{box-shadow:0 10px 20px rgba(200,43,96,.34)} /* The confirm button takes focus on open, so give that ring the app's own look rather than the browser's default black outline. */ .confirm-actions button:focus{outline:none;box-shadow:0 0 0 3px rgba(108,61,243,.35)} .confirm-actions .is-danger:focus{box-shadow:0 0 0 3px rgba(200,43,96,.35)} @media (max-width:820px){ .confirm-sheet{place-items:end;padding:0} .confirm-card{width:100%;border-radius:20px 20px 0 0;padding:22px 18px calc(22px + var(--safe-bottom))} .confirm-actions button{flex:1} }.comment-row{padding:12px 17px;display:flex;gap:9px;align-items:center;border-top:1px solid var(--line)}.comment-row input{flex:1;border:0;background:#f6f5f9;border-radius:18px;padding:9px 13px;outline:none}.comment-row button{border:0;background:transparent;color:var(--purple);font-weight:700}/* A button that cannot be used yet reads as unavailable, and the reason lives beside it rather than only appearing after the form is rejected. */ .primary-btn[disabled],.secondary-btn[disabled],.primary-btn:disabled,.secondary-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none} .threshold-note{margin:6px 0 0;font-size:12px;color:var(--muted);max-width:40ch} .widget{padding:19px}.widget h3{margin:5px 0 7px}.widget p{font-size:12px;color:var(--muted)}.welcome{background:linear-gradient(145deg,#f0eaff,#fff 74%);position:relative;overflow:hidden}.welcome:after{content:'✦';position:absolute;font-size:100px;color:#e8dfff;right:-8px;bottom:-35px}.eyebrow{font-size:10px;letter-spacing:1.4px;font-weight:800;color:var(--purple)}.widget-title{display:flex;align-items:center;justify-content:space-between;gap:15px}.widget-title h2,.widget-title h3{margin:0}.widget-title a{font-size:11px;color:var(--purple);font-weight:700}.person-row{display:flex;align-items:center;gap:9px;padding:10px 0}.person-row>div{display:flex;flex-direction:column;min-width:0}.person-row b{font-size:12px}.person-row small{font-size:10px;color:var(--muted)}.person-row button{margin-left:auto;border:1px solid #d7cff7;color:var(--purple);background:#fff;border-radius:9px;padding:5px 9px;font-size:10px;font-weight:700}.campaign-widget{background:linear-gradient(145deg,#fff4f9,#f5efff)}.pill{display:inline-block;padding:4px 9px;border-radius:20px;background:#eee8ff;color:var(--purple);font-size:9px;font-weight:800;text-transform:uppercase}.progress{height:7px;background:#e9e5f2;border-radius:20px;overflow:hidden;margin:15px 0}.progress i{height:100%;display:block;background:linear-gradient(90deg,var(--purple),var(--pink));border-radius:20px}.primary-btn,.secondary-btn{display:inline-flex;align-items:center;justify-content:center;border-radius:11px;padding:10px 17px;border:0;font-weight:700;font-size:12px}.primary-btn{color:#fff;background:linear-gradient(135deg,var(--purple),#8f56f4);box-shadow:0 7px 16px rgba(108,61,243,.2)}.primary-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(108,61,243,.28)}.primary-btn:disabled{opacity:.5;cursor:not-allowed}.secondary-btn{border:1px solid #dcd8ea;background:#fff}.wide{width:100%}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1180px;margin:0 auto 22px}.page-heading h1{margin:0;font-size:25px}.page-heading p{margin:3px 0 0;color:var(--muted);font-size:13px}.tabs{display:flex;gap:5px;max-width:1180px;margin:0 auto 18px;border-bottom:1px solid var(--line)}.tabs button{border:0;background:transparent;padding:10px 16px;color:var(--muted);font-weight:600}.tabs button.active{color:var(--purple);border-bottom:2px solid var(--purple)}.tabs.small{margin:0;border:0}.tabs.small button{padding:7px 10px;font-size:11px}.tabs.small button.active{background:#f0eaff;border:0;border-radius:9px}.content-card{max-width:1180px;margin:0 auto 20px;padding:22px}.content-card h2{font-size:17px;margin:0 0 18px}.people-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.people-grid article{text-align:center;border:1px solid var(--line);padding:20px 14px;border-radius:15px;background:#fcfcfe}.people-grid h3{margin:8px 0 0}.people-grid span,.people-grid p{color:var(--muted);font-size:11px} .people-grid .person-open{color:inherit;text-decoration:none;display:inline-block} .people-grid .person-open:hover h3,.people-grid h3 .person-open:hover{text-decoration:underline}.trend-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.trend-grid a{padding:16px;border-radius:13px;background:linear-gradient(135deg,#f3efff,#fff5fa);display:flex;flex-direction:column}.trend-grid small,.trend-grid span{font-size:10px;color:var(--muted)}.trend-grid b{margin:4px 0;color:var(--deep)}.card-grid,.campaign-grid{max-width:1180px;margin:auto;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.entity-card{overflow:hidden}/* Explore renders this as a
, the Pages and Groups directories render it as an that opens the entity. An is inline, so height did nothing and the cover collapsed, clipping the logo that overlaps it. */ .entity-cover{display:block;height:116px;background-size:cover}.purple-cover{background:linear-gradient(135deg,#7040f1,#e879b8)}.group-cover{background:linear-gradient(135deg,#a7d7ff,#8c65ec)}.entity-body{padding:18px;text-align:center;position:relative}.entity-logo{width:62px;height:62px;border:5px solid #fff;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#efe9ff,#ffd3e7);font-size:22px;font-weight:900;color:var(--purple);margin:-50px auto 9px}.entity-body h3{margin:0}.entity-body small,.entity-body p{color:var(--muted);font-size:11px}.entity-body>div{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:15px 0}.entity-body>div span{color:var(--muted);font-size:10px}.modal{display:none;position:fixed;z-index:100;inset:0;background:rgba(25,18,50,.48);backdrop-filter:blur(3px);place-items:center;padding:20px}.modal.open{display:grid}.modal-card{background:#fff;border-radius:20px;width:min(540px,100%);padding:25px;box-shadow:0 30px 80px rgba(20,10,50,.28);max-height:90vh;overflow:auto;position:relative}.modal-card h2{margin:0 0 16px}.modal-card>p{color:var(--muted);font-size:12px}.modal-close{position:absolute;right:16px;top:13px;border:0;background:#f4f2f8;border-radius:50%;width:32px;height:32px;font-size:20px}.modal-card label,.auth-card label{display:flex;flex-direction:column;gap:5px;font-size:11px;font-weight:700;margin:12px 0}.modal-card input,.modal-card textarea,.modal-card select,.auth-card input,.settings-card input,.settings-card textarea{border:1px solid var(--line);border-radius:10px;padding:11px 12px;outline:none}.modal-card input:focus,.modal-card textarea:focus,.modal-card select:focus,.auth-card input:focus{border-color:#aa91fa;box-shadow:0 0 0 3px #f1ecff}.user-line{display:flex;align-items:center;gap:10px}.composer-tools{display:flex;gap:17px;margin:13px 0;color:var(--muted);font-size:12px}/* grid-template-rows + min-height:0 keep the two panes inside the shell's own height. Without them the row is sized to its content, so a long thread grows the section past the shell and pushes the composer off the bottom. */ .chat-shell{max-width:1180px;height:calc(100vh - var(--topbar-h) - 176px);min-height:480px;margin:auto;display:grid;grid-template-columns:330px 1fr;grid-template-rows:minmax(0,1fr);background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}.chat-shell>aside{border-right:1px solid var(--line);overflow:auto;min-height:0}.chat-search{margin:15px;padding:10px;background:#f5f4f9;border-radius:11px;display:flex;align-items:center;gap:8px}.chat-search input{border:0;background:transparent;outline:0;width:100%;min-width:0} /* Every chat control now carries an SVG, so size them where they sit. */ .chat-search .nav-icon{width:16px;height:16px;color:var(--muted);flex:0 0 auto} .chat-shell header button .nav-icon,.thread-menu-toggle .nav-icon{width:17px;height:17px} .chat-search-inline button .nav-icon,.chat-search-inline .media-link .nav-icon{width:16px;height:16px} .chat-side-head a .nav-icon,.reply-bar button .nav-icon{width:15px;height:15px} .emoji-btn .nav-icon,.message-box .attach .nav-icon,.voice-record-btn .nav-icon{width:18px;height:18px} .message-box .send .nav-icon{width:17px;height:17px;margin-left:-1px} .chat-blank>span{display:grid;place-items:center} .chat-blank>span .nav-icon{width:46px;height:46px;color:#d8d3e8} /* --- per-message menu --- The chevron stays faintly visible instead of appearing only on hover: the old hover-only controls meant Delete and Forward were effectively missing. */ /* ---- the message menu no longer sits on top of the message ---- The toggle is absolutely placed in the bubble''s top-right corner and was drawn at opacity .45 on every bubble, on every device. On a short message - a single emoji, one word - it landed straight on the text and the time. It now has room reserved for it: the bubble keeps a minimum width so the corner is never over the content, and the chevron only comes up to full strength when the bubble is hovered or its menu is open. */ .msg-menu{position:absolute;top:3px;right:5px;z-index:6} .bubble{min-width:0} .bubble.is-emoji,.bubble.is-deleted{min-width:0} .received .msg-menu{right:4px} /* Hidden until it is wanted. Drawn on every bubble it landed on the text of a short message and on the timestamp of a one-line one - there is no corner free on a bubble that is only as wide as the word in it. A pointer reveals it on hover; a finger opens the same menu by pressing and holding the bubble, which is the gesture a messenger has trained everyone to use. */ .msg-menu-toggle{width:22px;height:20px;border:0;border-radius:6px;display:grid;place-items:center; background:transparent;color:currentColor;opacity:0;padding:0;pointer-events:none; transition:opacity .15s ease,background .15s ease} @media (hover:hover){ .bubble:hover .msg-menu-toggle{opacity:.45;pointer-events:auto} } .msg-menu-toggle[aria-expanded="true"]{opacity:.85;pointer-events:auto} .bubble.is-pressed{transform:scale(.985);transition:transform .12s ease} .bubble:hover .msg-menu-toggle,.msg-menu-toggle[aria-expanded="true"]{opacity:1;background:rgba(0,0,0,.10)} .sent .msg-menu-toggle:hover,.sent .msg-menu-toggle[aria-expanded="true"]{background:rgba(255,255,255,.22)} .msg-menu-toggle .nav-icon{width:13px;height:13px} .msg-menu-panel{position:absolute;top:22px;right:0;width:210px;background:var(--card);border:1px solid var(--line); border-radius:12px;box-shadow:0 16px 40px rgba(30,16,70,.22);padding:5px;z-index:40;color:var(--ink)} .received .msg-menu-panel{right:auto;left:0} .msg-menu-panel form{display:contents} .msg-menu-panel>button,.msg-menu-panel form>button{width:100%;height:auto;margin:0;border:0;background:transparent; display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font-size:12.5px;font-weight:600; color:#4a4f66;text-align:left;white-space:nowrap} .msg-menu-panel>button:hover,.msg-menu-panel form>button:hover{background:var(--nav-hover);color:var(--purple)} .msg-menu-panel .nav-icon{width:15px;height:15px;color:var(--muted)} .msg-menu-panel button:hover .nav-icon{color:var(--purple)} .msg-menu-panel .danger{color:#c82b60} .msg-menu-panel .danger:hover{background:#fff0f5;color:#c82b60} .msg-menu-panel .danger .nav-icon{color:#c82b60} /* Quick reactions sit at the top of the same menu. */ .msg-menu-react{display:flex;gap:1px;padding:3px 2px 6px;margin-bottom:4px;border-bottom:1px solid var(--line)} .msg-menu-react form{display:block;flex:1} .msg-menu-react button{width:100%;height:30px;border:0;background:transparent;border-radius:8px;font-size:16px;padding:0} .msg-menu-react button:hover{background:var(--nav-hover);transform:scale(1.15)} .msg-menu-react button.is-mine{background:#f0eaff} .bubble-actions button .nav-icon{width:15px;height:15px} /* Inbox / Archived switch above the thread list */ .thread-views{display:flex;gap:4px;padding:0 15px 10px} .thread-views a{flex:1;text-align:center;padding:8px;border-radius:10px;font-size:11.5px;font-weight:700;color:var(--muted);background:var(--soft)} .thread-views a.active{background:#f0eaff;color:var(--purple)} .thread-views em{font-style:normal;margin-left:4px;opacity:.75} /* "New messages" marker: where this person last left the thread */ /* Purple, not pink: this marks where you left off, and pink reads as a warning. */ .unread-divider{display:flex;align-items:center;gap:10px;margin:8px 0 4px;color:var(--purple);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px} .unread-divider:before,.unread-divider:after{content:"";flex:1;height:1px;background:currentColor;opacity:.35} /* Inline edit field inside a bubble */ .msg-edit-form{display:flex;align-items:center;gap:6px;margin-top:6px} .msg-edit-form input[name=body]{flex:1;min-width:0;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:14px;padding:7px 11px;outline:none;font-size:13px} .msg-edit-form input[name=body]:focus{border-color:#aa91fa} .edited-tag{font-style:italic;opacity:.8;margin-right:4px} /* Files staged in the composer, before they are sent */ .attach-preview{order:-1;width:100%;display:flex;flex-wrap:wrap;gap:7px;padding:8px 2px 2px} .attach-chip{display:flex;align-items:center;gap:7px;max-width:210px;padding:5px 6px 5px 8px;border:1px solid var(--line);border-radius:11px;background:var(--soft)} .attach-chip img{width:30px;height:30px;border-radius:7px;object-fit:cover;flex:0 0 auto} .attach-chip small{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .attach-drop{border:0;background:transparent;color:var(--muted);font-size:16px;line-height:1;padding:0 3px;flex:0 0 auto} .attach-drop:hover{color:#c82b60} /* Full-size media viewer */ .lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:32px;background:rgba(16,10,34,.9);backdrop-filter:blur(4px)} .lightbox-stage{max-width:100%;max-height:100%;display:grid;place-items:center} .lightbox-stage img,.lightbox-stage video{max-width:100%;max-height:calc(100vh - 64px);border-radius:12px;display:block} .lightbox-close{position:fixed;top:18px;right:18px;width:42px;height:42px;border:0;border-radius:12px;display:grid;place-items:center;background:rgba(255,255,255,.16);color:#fff} .lightbox-close:hover{background:rgba(255,255,255,.28)} .lightbox-close .nav-icon{width:18px;height:18px} /* Global search results, above the thread list */ .global-hits{border-bottom:1px solid var(--line);padding:0 12px 10px} .global-hits-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:2px 3px 8px;font-size:11.5px} .global-hits-head a{color:var(--purple);font-weight:700;font-size:11px} .global-hit{display:grid;grid-template-columns:1fr auto;gap:2px 8px;padding:8px 9px;border-radius:10px} .global-hit:hover{background:var(--soft)} .global-hit b{font-size:12px} .global-hit small{grid-column:1;color:var(--muted);font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .global-hit time{grid-row:1;grid-column:2;font-size:10px;color:var(--muted);white-space:nowrap} /* Jump to the newest message when scrolled up */ .jump-latest{position:absolute;left:50%;bottom:86px;z-index:12;transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:8px 14px;border:1px solid var(--line);border-radius:20px;background:var(--card);color:var(--purple);font-size:11.5px;font-weight:700;box-shadow:0 8px 22px rgba(30,16,70,.16)} .jump-latest:hover{background:#f7f4ff} .jump-latest .nav-icon{width:14px;height:14px} /* Voice note: the browser's own audio control, kept inside the bubble. min-width:0 is what stops the fixed-width player from overflowing, and the pale tray keeps the native control legible on the purple sent bubble — inverting its colours turned it almost black instead. */ /* ---- voice note ---- This used to be the browser's own