/* Sefid corner widget - the skin of the approved preview build.
   Extracted from the preview stylesheet so every page can wear it
   without loading the whole home page css. Marker: Sefid widget v1 */
.sf-chat{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  font-family:inherit}
.sf-launch{order:2;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;cursor:pointer;
  background:#111;color:#fbfaf9;border:1px solid #111;font-size:14px;font-weight:500;letter-spacing:-.005em;
  transition:background .18s ease,color .18s ease}
.sf-launch:hover{background:#fbfaf9;color:#111}
.sf-launch-mark{width:9px;height:9px;background:currentColor;display:inline-block}
.sf-chat.sf-nudge .sf-launch-mark{animation:sfBlink 2.4s ease-in-out infinite}
@keyframes sfBlink{0%,100%{opacity:1}50%{opacity:.25}}
.sf-panel{order:1;width:360px;max-width:calc(100vw - 32px);background:#fff;border:1px solid rgba(17,17,17,.14);
  display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .18s ease,transform .22s ease,visibility .18s}
.sf-chat.is-open .sf-panel{opacity:1;visibility:visible;transform:none}
.sf-panel-top{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid rgba(17,17,17,.14)}
.sf-id{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:500}
.sf-live{width:7px;height:7px;background:#111;display:inline-block}
.sf-x{border:0;background:transparent;font-size:20px;line-height:1;cursor:pointer;color:rgba(17,17,17,.5);padding:0 2px}
.sf-x:hover{color:#111}
.sf-log{padding:16px;display:flex;flex-direction:column;gap:10px;height:320px;overflow-y:auto}
.sf-row{display:flex}
.sf-row--user{justify-content:flex-end}
.sf-bub{max-width:82%;padding:10px 12px;font-size:13px;line-height:1.5;border:1px solid rgba(17,17,17,.14);
  background:#fbfaf9;color:#111}
.sf-row--user .sf-bub{background:#111;color:#fbfaf9;border-color:#111}
.sf-typing .sf-bub{display:inline-flex;gap:4px;align-items:center;padding:12px}
.sf-typing i{width:5px;height:5px;background:rgba(17,17,17,.45);display:inline-block;animation:sfDot 1s infinite}
.sf-typing i:nth-child(2){animation-delay:.15s}
.sf-typing i:nth-child(3){animation-delay:.3s}
.sf-field{display:flex;border-top:1px solid rgba(17,17,17,.14)}
.sf-input{flex:1;min-width:0;border:0;padding:13px 14px;font:inherit;font-size:13px;background:transparent;outline:none}
.sf-send{border:0;border-left:1px solid rgba(17,17,17,.14);background:transparent;padding:0 18px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:500;color:#111}
.sf-send:hover{background:#111;color:#fbfaf9}
.sf-foot{padding:9px 16px;border-top:1px solid rgba(17,17,17,.14);font-size:11px;letter-spacing:.04em;
  color:rgba(17,17,17,.45)}
@media (max-width:1023px){
.sf-chat{right:12px;bottom:12px}
.sf-log{height:260px}
}
@media (prefers-reduced-motion:reduce){
.sf-chat.sf-nudge .sf-launch-mark,.sf-typing i{animation:none}
}
.sf-teaser{order:0;position:relative;width:294px;max-width:calc(100vw - 32px);background:#111;color:#fbfaf9;
  border:1px solid #111;padding:10px 34px 10px 16px;cursor:pointer;opacity:0;visibility:hidden;
  transform:translateY(8px);transition:opacity .2s ease,transform .24s ease,visibility .2s}
.sf-chat.sf-teased .sf-teaser{opacity:1;visibility:visible;transform:none}
.sf-chat.is-open .sf-teaser{opacity:0;visibility:hidden}
.sf-teaser-t{margin:0 0 4px;font-size:13px;font-weight:500;letter-spacing:-.005em}
.sf-teaser-d{margin:0;font-size:12px;line-height:1.5;color:rgba(251,250,249,.62)}
.sf-teaser-x{position:absolute;top:6px;right:8px;border:0;background:transparent;color:rgba(251,250,249,.55);
  font-size:16px;line-height:1;cursor:pointer;padding:2px}
.sf-teaser-x:hover{color:#fbfaf9}
.sf-foot strong{font-weight:500;color:#111}
.sf-panel{position:absolute;right:0;bottom:60px;order:0;margin:0}
.sf-chat{gap:10px}
.sf-teaser{order:1;width:auto;max-width:calc(100vw - 32px);display:inline-flex;align-items:center;gap:10px;
  padding:6px 10px 6px 14px;position:relative}
.sf-teaser-t{margin:0;font-size:12.5px;font-weight:500;white-space:nowrap}
.sf-teaser-x{position:static;font-size:14px;padding:0 2px;line-height:1}
.sf-launch{order:2}
.sf-top-r{display:flex;align-items:center;gap:10px}
.sf-lang{font-size:11px;letter-spacing:.06em;border:1px solid rgba(17,17,17,.16);padding:2px 6px;
  color:rgba(17,17,17,.55)}
.sf-log{height:360px}
.sf-div{font-size:11px;letter-spacing:.05em;color:rgba(17,17,17,.4);text-align:center;padding:2px 0 4px}
.sf-qr{display:flex;flex-wrap:wrap;gap:6px;padding-top:2px}
.sf-chip{border:1px solid rgba(17,17,17,.2);background:#fff;font:inherit;font-size:12px;padding:6px 10px;
  cursor:pointer;color:#111}
.sf-chip:hover{background:#111;color:#fbfaf9;border-color:#111}
.sf-card{border:1px solid rgba(17,17,17,.14);padding:14px}
.sf-card-t{font-size:12px;letter-spacing:.05em;color:rgba(17,17,17,.5);margin-bottom:12px}
.sf-steps{list-style:none;margin:0;padding:0;font-size:12.5px}
.sf-steps li{padding:6px 0 6px 18px;position:relative;color:rgba(17,17,17,.45)}
.sf-steps li::before{content:'';position:absolute;left:0;top:11px;width:7px;height:7px;
  border:1px solid rgba(17,17,17,.3)}
.sf-steps li.done{color:rgba(17,17,17,.6)}
.sf-steps li.done::before{background:rgba(17,17,17,.35);border-color:rgba(17,17,17,.35)}
.sf-steps li.now{color:#111;font-weight:500}
.sf-steps li.now::before{background:#111;border-color:#111}
.sf-card-f{margin-top:12px;padding-top:10px;border-top:1px solid rgba(17,17,17,.12);font-size:12px;
  color:rgba(17,17,17,.55)}
.sf-prods{display:flex;flex-direction:column;gap:8px}
.sf-prod{display:flex;gap:12px;border:1px solid rgba(17,17,17,.14);padding:10px}
.sf-prod-x{width:46px;height:46px;flex:0 0 46px;background:repeating-linear-gradient(135deg,
  rgba(17,17,17,.07) 0 4px,transparent 4px 8px);border:1px solid rgba(17,17,17,.1)}
.sf-prod-b{flex:1;min-width:0}
.sf-prod-t{margin:0;font-size:13px;font-weight:500}
.sf-prod-m{margin:2px 0 0;font-size:11.5px;color:rgba(17,17,17,.5)}
.sf-prod-p{margin:6px 0 8px;font-size:13px}
.sf-buy{border:1px solid #111;background:#111;color:#fbfaf9;font:inherit;font-size:12px;padding:5px 12px;
  cursor:pointer}
.sf-buy:disabled{background:#fff;color:rgba(17,17,17,.45);border-color:rgba(17,17,17,.2);cursor:default}
.sf-link{display:block;text-align:center;border:1px solid #111;background:#111;color:#fbfaf9;
  font-size:12.5px;padding:10px;text-decoration:none}
.sf-link:hover{background:#fbfaf9;color:#111}
.sf-form{border:1px solid rgba(17,17,17,.14);padding:14px;display:flex;flex-direction:column;gap:8px}
.sf-form-t{margin:0 0 2px;font-size:12px;letter-spacing:.05em;color:rgba(17,17,17,.5)}
.sf-in{border:1px solid rgba(17,17,17,.16);padding:9px 10px;font:inherit;font-size:12.5px;outline:none;
  background:#fff;resize:none;width:100%;box-sizing:border-box}
.sf-in:focus{border-color:#111}
.sf-gdpr{margin:0;font-size:10.5px;line-height:1.5;color:rgba(17,17,17,.45)}
.sf-err{margin:0;font-size:11px;color:#b00020}
.sf-btn{border:1px solid #111;background:#111;color:#fbfaf9;font:inherit;font-size:12.5px;padding:9px;
  cursor:pointer}
.sf-btn:hover{background:#fbfaf9;color:#111}
.sf-clip{border:0;border-right:1px solid rgba(17,17,17,.14);background:transparent;font:inherit;
  font-size:16px;line-height:1;padding:0 14px;cursor:pointer;color:rgba(17,17,17,.5)}
.sf-clip:hover{color:#111}
@media (max-width:1023px){
.sf-log{height:300px}
.sf-teaser-t{white-space:normal}
}
@media (max-width:640px){
.sf-teaser{max-width:calc(100vw - 96px)}
}
body.nav-open .sf-chat{visibility:hidden}
@media (max-width:640px){
.sf-chat{right:14px;bottom:calc(14px + env(safe-area-inset-bottom))}
}
body.nav-open .sf-teaser,body.nav-open .sf-launch,body.nav-open .sf-panel{visibility:hidden;pointer-events:none}

/* ---------------- round 141: the parts the migration never carried over ----
   Every rule below is either a class the react widget already renders but the
   skin never styled, or a mirror rule scoped to .sf-rtl so the european
   edition cannot be touched by it. Nothing existing is redefined. */
.sf-launch{position:relative}
.sf-launch-label{white-space:nowrap}
.sf-badge{position:absolute;top:-8px;right:-8px;min-width:18px;height:18px;padding:0 5px;background:#c8451f;
  color:#fff;font-size:11px;line-height:18px;text-align:center;font-weight:500}
.sf-id-name{font-weight:500}
.sf-act{border:1px solid rgba(17,17,17,.16);background:transparent;font:inherit;font-size:14px;line-height:1;
  padding:3px 8px;cursor:pointer;color:rgba(17,17,17,.55)}
.sf-act:hover{color:#111;border-color:#111}
.sf-more-wrap{position:relative;display:inline-flex}
.sf-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:194px;background:#fff;
  border:1px solid rgba(17,17,17,.14);box-shadow:0 10px 26px rgba(17,17,17,.12);padding:4px;z-index:6;
  display:flex;flex-direction:column}
.sf-mi{border:0;background:transparent;font:inherit;font-size:12.5px;padding:9px 10px;cursor:pointer;
  color:#111;display:flex;align-items:center;gap:9px;white-space:nowrap;text-align:left}
.sf-mi:hover{background:#f4f3f1}
.sf-mi i{font-style:normal;width:14px;display:inline-block;text-align:center;color:rgba(17,17,17,.5)}

/* ---- persian edition: the whole widget mirrors ---- */
.sf-chat.sf-rtl{direction:rtl;text-align:right}
.sf-chat.sf-rtl .sf-row--user{justify-content:flex-start}
.sf-chat.sf-rtl .sf-row--bot{justify-content:flex-end}
.sf-chat.sf-rtl .sf-send{border-left:0;border-right:1px solid rgba(17,17,17,.14)}
.sf-chat.sf-rtl .sf-menu{right:auto;left:0}
.sf-chat.sf-rtl .sf-mi{text-align:right}
.sf-chat.sf-rtl .sf-badge{right:auto;left:-8px}
.sf-chat.sf-rtl .sf-teaser{padding:6px 14px 6px 10px}
.sf-chat.sf-rtl .sf-teaser-x{margin-right:0;margin-left:2px}

/* ==========================================================================
   round 142 - minimal transcript, options inside the header, phone full screen
   ========================================================================== */

/* brand mark + the state the visitor asked for */
.sf-panel-top{gap:8px}
.sf-logo{font-size:13px;font-weight:600;letter-spacing:-.01em;color:#111}
.sf-logo i{font-style:normal;color:#c8451f}
.sf-id{gap:7px}
.sf-id-name{display:none}
.sf-live{width:6px;height:6px;border-radius:50%;background:#1d9a63;box-shadow:0 0 0 3px rgba(29,154,99,.14)}
.sf-state{font-size:11px;letter-spacing:.01em;color:rgba(17,17,17,.52)}
.sf-chat.sf-off .sf-live{background:#b7b7b1;box-shadow:none}

/* the three dot button: a real icon button, not a text glyph */
.sf-top-r{display:flex;align-items:center;gap:2px}
.sf-dots{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:0;background:transparent;border-radius:0;cursor:pointer;color:rgba(17,17,17,.55);padding:0}
.sf-dots:hover{background:#f2f1ee;color:#111}
.sf-dots svg{display:block}

/* the options replace the header content, no floating box */
.sf-panel-top.is-opts{gap:6px}
.sf-back{width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:0;
  background:transparent;border-radius:0;cursor:pointer;color:rgba(17,17,17,.6);padding:0}
.sf-back:hover{background:#f2f1ee;color:#111}
.sf-chat.sf-rtl .sf-back svg{transform:scaleX(-1)}
.sf-opts{flex:1;display:flex;align-items:center;gap:6px;min-width:0}
.sf-opt{border:1px solid rgba(17,17,17,.14);background:#fff;border-radius:0;padding:5px 11px;
  font:inherit;font-size:12px;color:#111;cursor:pointer;white-space:nowrap}
.sf-opt:hover{background:#111;color:#fbfaf9;border-color:#111}

/* minimal transcript: the customer on soft grey, the agent on plain paper */
.sf-log{gap:8px}
.sf-bub{border:0;background:transparent;color:#111;max-width:86%;padding:2px 0;border-radius:0}
.sf-row--bot .sf-bub{background:transparent;border:0;color:#111}
.sf-row--user .sf-bub{background:#f1f0ec;border:0;color:#111;padding:9px 12px;border-radius:0}
.sf-typing .sf-bub{background:transparent;border:0;padding:4px 0}
.sf-time{display:block;margin-top:4px;font-size:10px;letter-spacing:.02em;color:rgba(17,17,17,.36)}
.sf-day{align-self:center;font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(17,17,17,.36);padding:2px 0}

/* a text area instead of a single line input, growing with the message */
.sf-input{resize:none;max-height:116px;line-height:1.5;padding:12px 14px}
.sf-send:disabled{opacity:.4;cursor:default}
.sf-send:disabled:hover{background:transparent;color:inherit}

/* full screen on a phone */
@media (max-width: 640px){
  .sf-chat.is-open{position:fixed;inset:0;right:0;left:0;bottom:0;top:0;gap:0;align-items:stretch}
  .sf-chat.is-open .sf-panel{position:fixed;inset:0;width:100%;max-width:none;height:100%;
    margin:0;border:0;border-radius:0;display:flex;flex-direction:column}
  .sf-chat.is-open .sf-log{height:auto;flex:1 1 auto;min-height:0}
  .sf-chat.is-open .sf-launch,.sf-chat.is-open .sf-teaser{display:none}
  .sf-chat.is-open .sf-panel-top{padding-top:14px}
}

/* ==========================================================================
   round 143 - the real identity in the header, and a send button that only
   shows up when there is something to send
   ========================================================================== */

/* the sefid mark sits beside the name the owner saved in the panel */
.sf-logo{display:inline-flex;align-items:center;gap:6px;line-height:1}
.sf-mark{width:15px;height:15px;flex:none;color:#111}
.sf-avatar{width:17px;height:17px;flex:none;border-radius:50%;object-fit:cover}
.sf-logo-name{font-size:13px;font-weight:600;letter-spacing:-.01em;color:#111}

/* the send button: black, quiet, and invisible until the visitor types */
.sf-field{align-items:flex-end}
.sf-send{display:none;border:0;margin:7px 8px;padding:0 15px;height:32px;
  background:#111;color:#fbfaf9;font:inherit;font-size:12.5px;font-weight:500;
  cursor:pointer;align-items:center;justify-content:center}
.sf-field.is-ready .sf-send{display:inline-flex}
.sf-send:hover{background:#000;color:#fbfaf9}
.sf-send:disabled{display:none}
.sf-chat.sf-rtl .sf-send{border-right:0;border-left:0}


/* ============================================================ round 145 ===
   The widget lives inside a shadow root on customer pages, where the host
   page reset never reaches. Without border-box the textarea autosize counts
   its own padding twice, which is exactly the send bar that pretends to be
   two rows while holding one line. On sefid.dev the corner widget sits in the
   page itself and inherits the site reset, which is why it always looked
   right there and only broke everywhere else. */
.sf-chat,.sf-chat *{box-sizing:border-box}

/* The header order never depends on markup order again: the logo, then the
   name, then the online dot and word, in every widget on every site. */
.sf-id .sf-logo{order:0}
.sf-id .sf-live{order:1}
.sf-id .sf-state{order:2}
.sf-logo .sf-avatar,.sf-logo .sf-mark{order:0}
.sf-logo .sf-logo-name{order:1}

/* The owner can seat the widget on the left side from the panel. */
.sf-chat.sf-left{right:auto;left:24px;align-items:flex-start}
.sf-chat.sf-left .sf-panel{right:auto;left:0}
@media(max-width:640px){.sf-chat.sf-left{right:auto;left:14px}}


/* ============================================================ round 146 ===
   Two families, one rule, both widgets. The conversation reads in Vazirmatn
   because it is a reading face; every label around it (brand, name, state,
   launcher, options, footer, send) is Yekan because those are titles. Naming
   the families here instead of inheriting them is what makes the widget look
   the same on sefid.dev and on a customer page: inheriting handed the widget
   the host page's font, or nothing at all inside the shadow root. */
.sf-chat{--sf-font-chat:"Vazirmatn",Tahoma,system-ui,sans-serif;
  --sf-font-ui:"Yekan","Vazirmatn",Tahoma,system-ui,sans-serif;
  font-family:var(--sf-font-chat)}
.sf-bub,.sf-input,.sf-time,.sf-in,.sf-card,.sf-prod{font-family:var(--sf-font-chat)}
.sf-launch,.sf-launch-label,.sf-logo,.sf-logo-name,.sf-id,.sf-id-name,.sf-state,.sf-foot,
.sf-teaser,.sf-teaser-t,.sf-teaser-d,.sf-opt,.sf-mi,.sf-send,.sf-day,.sf-div,.sf-chip,
.sf-btn,.sf-buy,.sf-link,.sf-lang{font-family:var(--sf-font-ui)}

/* The teaser used to sit in the launcher's column while hidden, so it pushed
   the launcher up by its own height plus the gap: that is the whole reason the
   button looked lifted off the corner on customer pages. Out of the flow it
   goes, exactly like the panel. */
.sf-teaser{position:absolute;right:0;bottom:60px;margin:0}
.sf-chat.sf-left .sf-teaser{right:auto;left:0}
.sf-chat:not(.sf-teased) .sf-teaser{pointer-events:none}
@media (max-width:640px){.sf-chat.is-open .sf-teaser{display:none}}

/* ============================================================ round 147 === */
/* One widget everywhere. The look is untouched: the only new rule lets the
   closed bubble wear the icon the owner picked in the panel, in place of the
   small square mark, at the same size and the same colour. */
.sf-launch-mark.has-icon{background:none;width:16px;height:16px}
.sf-launch-mark svg{width:16px;height:16px;display:block;fill:none;
  stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ============================================================ round 148 ===
   The log can now carry what the react widget carried: product cards, order
   cards and link buttons. Same paper, same hairlines - these rules only
   dress the blocks the log did not know before. */
.sf-prod{background:#fff}
.sf-prod-img{width:46px;height:46px;flex:0 0 46px;object-fit:cover;border:1px solid rgba(17,17,17,.1)}
.sf-prod-hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.sf-prod-pr{font-size:12.5px;font-weight:600;color:#111;white-space:nowrap}
button.sf-prod{font:inherit;font-family:var(--sf-font-chat);text-align:inherit;width:100%;cursor:pointer;color:#111}
button.sf-prod:hover{background:#fbfaf9}
.sf-status{display:inline-block;margin-top:6px;border:1px solid rgba(17,17,17,.2);padding:2px 8px;font-size:11px;color:rgba(17,17,17,.6)}

/* ---- Round 149: in-chat forms ---------------------------------------- */
.sf-form{margin:10px 0 4px;padding:12px;border:1px solid rgba(0,0,0,.12);border-radius:0;background:#fff;display:flex;flex-direction:column;gap:8px}
.sf-form-t{margin:0;font-size:13px;font-weight:600}
.sf-form .sf-in{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid rgba(0,0,0,.16);border-radius:0;font:inherit;font-size:13px;background:#fbfaf9}
.sf-form .sf-area{min-height:64px;resize:vertical}
.sf-form .sf-file{font-size:12px}
.sf-btn{align-self:flex-start;padding:8px 14px;border:1px solid #111;border-radius:0;background:#111;color:#fbfaf9;font:inherit;font-size:13px;cursor:pointer}
.sf-btn:hover{background:#fbfaf9;color:#111}
.sf-btn:disabled{opacity:.5;cursor:default}
.sf-btn:disabled:hover{background:#111;color:#fbfaf9}
.sf-gdpr{margin:0;font-size:11px;color:rgba(0,0,0,.55)}
.sf-gdpr a{color:inherit;text-decoration:underline}
.sf-err{display:none;font-size:12px;color:#b3261e}
.sf-form .sf-err{display:block}

/* ============================================================ round 150 ===
   1) The shadow root blocks the host page's stylesheets, but the browser's
   own defaults still apply inside - the blue underlined link is the loudest
   of them. Every anchor in the widget wears the widget's ink instead. */
.sf-chat{color:#111}
.sf-chat a{color:inherit}
.sf-bub a{color:#111;text-decoration:underline}
.sf-foot a{color:#111;text-decoration:none}
.sf-foot a:hover{text-decoration:underline}

/* 2) The transcript scrolls on the right even in persian. The scroller
   itself runs ltr so the gutter sits on the right; every child runs rtl
   again, so nothing else changes. */
.sf-chat.sf-rtl .sf-log{direction:ltr}
.sf-chat.sf-rtl .sf-log>*{direction:rtl}

/* 3) A hairline scrollbar of our own that only shows while the log is
   actually moving - the widget toggles .is-scrolling from the scroll event.
   Scrolling the log no longer drags the host page along either. */
.sf-log{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:transparent transparent}
.sf-log.is-scrolling{scrollbar-color:rgba(17,17,17,.3) transparent}
.sf-log::-webkit-scrollbar{width:4px;background:transparent}
.sf-log::-webkit-scrollbar-track{background:transparent}
.sf-log::-webkit-scrollbar-thumb{background:transparent}
.sf-log.is-scrolling::-webkit-scrollbar-thumb{background:rgba(17,17,17,.3)}

/* ==== round 151: one widget, one face ==== */
/* Corners are locked sharp everywhere; no per-site option can round them. */
.sf-panel,.sf-launch,.sf-btn,.sf-bub,.sf-row--user .sf-bub,.sf-form,.sf-form .sf-in{border-radius:0}
/* round 163: the same lock for every button and field of the widget,
   including the new conversation button and the mute button. */
.sf-opt,.sf-dots,.sf-back,.sf-chip,.sf-send,.sf-close,.sf-card,.sf-qr,.sf-ta,.sf-in,
.sf-pay,.sf-prod,.sf-img,.sf-tag,.sf-note,.sf-top,.sf-panel-top,.sf-foot{border-radius:0}

/* round 154: chat motion. The typing dots referenced sfDot which was
   never defined - that is why they sat still. Defined here, plus a
   gentle entrance for chat rows. Simple, calm, and respectful of
   prefers-reduced-motion. */
@keyframes sfDot{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-3px);opacity:1}}
@keyframes sfMsgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.sf-row{animation:sfMsgIn .22s ease-out both}
@media (prefers-reduced-motion:reduce){.sf-row{animation:none}}

/* ---------------- round 167: the launcher without its text ----
   "no text" under launcher text in the panel: a compact square bubble,
   just the mark, same height, no label. */
.sf-launch.sf-nolabel{width:48px;padding:0;justify-content:center}
.sf-launch.sf-nolabel .sf-launch-label{display:none}