/* Settings → Welcome & Leave (v3.1.176). Own classes only (.sb-wl-*); cards, switches, fields and chips
   are the site's shared ones. See HOOKS.md ("Welcome & Leave"). */
#screen .sb-wl{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
#screen .sb-wl .card{margin-bottom:14px}
#screen .sb-wl-head{margin-top:18px}
#screen .sb-wl-head h2{margin:0}
#screen .sb-wl-headhint{margin:6px 0 0;font-size:13px;line-height:1.5}

/* Status */
#screen .sb-wl-statushead{align-items:center}
#screen .sb-wl-big{margin:14px 0 6px;font-size:20px;font-weight:750;color:#f5edff;line-height:1.3;overflow-wrap:anywhere}
#screen .sb-wl-chips{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px}
#screen .sb-wl-chips .cc-status{display:inline-flex;align-items:center;gap:7px;text-transform:uppercase}
#screen .sb-wl .cc-status[data-state="idle"]{color:#b7aabe}
#screen .sb-wl-save{font-size:12px;color:#9e91aa}
#screen .sb-wl-save[data-state="saving"]{color:#dcc6f5}
#screen .sb-wl-save[data-state="error"]{color:#f3a1b4}
#screen .sb-wl-ok{margin:10px 0 0;color:#6fdc9c;font-size:14px;line-height:1.5}
#screen .sb-wl-warn{margin:10px 0 0;color:#f0c36a;font-size:14px;line-height:1.5;overflow-wrap:anywhere}
#screen .sb-wl-note{margin:10px 0 0;color:#c9b8d8;font-size:13px;line-height:1.5;overflow-wrap:anywhere}

/* Rows and fields */
#screen .sb-wl-switchrow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0}
#screen .sb-wl-switchtext{display:flex;flex-direction:column;gap:3px;min-width:0}
#screen .sb-wl-switchtext strong{font-size:15px;color:#f1e8fb;font-weight:650}
#screen .sb-wl-switchtext small,#screen .sb-wl-fieldhint,#screen .sb-wl-picked{color:#b7aabe;font-size:12.5px;line-height:1.45}
#screen .sb-wl-switchrow .live-switch{margin-top:0}
#screen .sb-wl-field{margin-top:4px}
#screen .sb-wl-field .field{margin-top:12px!important}
#screen .sb-wl-fieldhint,#screen .sb-wl-picked{display:block;margin-top:6px}
#screen .sb-wl input[type="text"],#screen .sb-wl textarea,#screen .sb-wl select{width:100%;max-width:100%;box-sizing:border-box}
#screen .sb-wl select.sb-wl-pick{min-height:44px}
@media (hover:hover) and (pointer:fine){#screen .sb-wl select.sb-wl-pick{height:150px}}
#screen .sb-wl-sub{margin:22px 0 2px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#c6a5e7}
#screen .sb-wl-sep{height:1px;margin:6px 0;background:rgba(200,180,230,.12)}

/* Message cards (collapsible) */
#screen .sb-wl-kindhead{display:flex;align-items:center;gap:12px;margin:-4px 0}
#screen .sb-wl-kindtitle{flex:1;min-width:0;display:flex;align-items:center;gap:12px;padding:14px 0;background:none;border:0;color:inherit;text-align:left;font:inherit;cursor:pointer;min-height:44px;box-shadow:none;-webkit-tap-highlight-color:transparent}
#screen .sb-wl-kindtitle:focus-visible{outline:2px solid #b388eb;outline-offset:4px;border-radius:12px}
#screen .sb-wl-kindtext{display:flex;flex-direction:column;gap:4px;min-width:0}
#screen .sb-wl-kindtext strong{font-size:16px;color:#f5edff;font-weight:700}
#screen .sb-wl-kindtext small{font-size:13px;color:#b7aabe;line-height:1.45;overflow-wrap:anywhere}
#screen .sb-wl-chev{flex:none;width:8px;height:8px;margin-left:auto;border-right:2px solid #b388eb;border-bottom:2px solid #b388eb;transform:rotate(-45deg);transition:transform .2s}
#screen .sb-wl-kindtitle[aria-expanded="true"] .sb-wl-chev{transform:rotate(45deg)}
#screen .sb-wl-light{flex:none;width:10px;height:10px;border-radius:50%;background:rgba(183,170,190,.35);transition:background .25s,box-shadow .25s}
#screen .sb-wl-light[data-on="true"]{background:#6fdc9c;box-shadow:0 0 6px rgba(111,220,156,.85),0 0 14px rgba(111,220,156,.45)}
#screen .sb-wl-kindhead .live-switch{margin-top:0}
#screen .sb-wl-body{margin-top:8px;padding-top:6px;border-top:1px solid rgba(200,180,230,.12)}

/* Style picker */
#screen .sb-wl-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;padding:4px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(200,180,230,.14)}
#screen .sb-wl-segbtn{min-height:44px;padding:6px 8px;border-radius:10px;border:0;background:none;color:#c9b8d8;font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;box-shadow:none;line-height:1.2}
#screen .sb-wl-segbtn[aria-pressed="true"]{background:rgba(179,136,235,.24);color:#f5edff;box-shadow:inset 0 0 0 1px rgba(179,136,235,.55)}
#screen .sb-wl-segbtn:focus-visible{outline:2px solid #b388eb;outline-offset:2px}

/* Messages */
#screen .sb-wl-tokens{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
#screen .sb-wl-token{min-height:44px;min-width:44px;padding:0 12px;border-radius:999px;border:1px solid rgba(179,136,235,.4);background:rgba(179,136,235,.1);color:#e3d2f7;font:600 13px/1 ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer;box-shadow:none}
#screen .sb-wl-msgs{display:grid;gap:10px;margin:10px 0}
#screen .sb-wl-msgrow{display:flex;align-items:flex-start;gap:8px}
#screen .sb-wl textarea.sb-wl-msg{flex:1;min-width:0;min-height:64px;resize:vertical;font-size:16px;line-height:1.45}
#screen .sb-wl-x{flex:none;width:44px;height:44px;min-height:0;padding:0;border-radius:50%;border:1px solid rgba(200,180,230,.25);background:none;color:#c9b8d8;font-size:14px;cursor:pointer;box-shadow:none}
#screen .sb-wl-add{width:100%}

/* Designers */
#screen .sb-wl-swatches{display:flex;flex-wrap:wrap;gap:10px}
#screen .sb-wl-swatch{width:44px;height:44px;min-height:0;padding:0;border-radius:12px;border:2px solid rgba(255,255,255,.12);cursor:pointer;box-shadow:none;color:#f5edff;font-size:18px;line-height:1}
#screen .sb-wl-swatch[aria-checked="true"]{border-color:#f5edff;box-shadow:0 0 0 2px rgba(179,136,235,.7)}
#screen .sb-wl-swatchpic{background:rgba(255,255,255,.06);border-style:dashed}
#screen .sb-wl-swatchpic[aria-checked="true"]{border-style:solid}
#screen .sb-wl-file{display:none}
#screen .sb-wl input.sb-wl-range{width:100%!important;min-height:44px!important;accent-color:#b388eb}
#screen .sb-wl-colorrow{display:flex;align-items:center;gap:12px}
#screen .sb-wl-colorrow small{color:#b7aabe;font-size:12.5px;line-height:1.45}
#screen .sb-wl input.sb-wl-color{flex:none;width:56px!important;height:44px!important;min-height:44px!important;padding:2px!important;border-radius:10px;border:1px solid rgba(200,180,230,.25);background:none;cursor:pointer}

/* Preview: a Discord message */
#screen .sb-wl-preview{margin-top:10px}
#screen .sb-wl-discord{padding:14px 12px;border-radius:14px;background:#313338;border:1px solid rgba(255,255,255,.06)}
#screen .sb-wl-dmsg{display:flex;gap:12px;align-items:flex-start}
#screen .sb-wl-dav{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover}
#screen .sb-wl-dbody{flex:1;min-width:0}
#screen .sb-wl-dname{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:2px}
#screen .sb-wl-dname strong{color:#f2f3f5;font-size:15px;font-weight:600}
#screen .sb-wl-dname small{color:#949ba4;font-size:12px}
#screen .sb-wl-dtag{padding:1px 5px;border-radius:4px;background:#5865f2;color:#fff;font-size:10px;font-weight:700;letter-spacing:.02em}
#screen .sb-wl-dtext{color:#dbdee1;font-size:15px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
#screen .sb-wl-dtext strong{color:#f2f3f5}
#screen .sb-wl-empty{color:#949ba4}
#screen .sb-wl-mention{padding:0 2px;border-radius:3px;background:rgba(88,101,242,.3);color:#c9cdfb;font-weight:500}
#screen .sb-wl-embed{display:flex;gap:12px;margin-top:6px;padding:10px 12px 12px;max-width:440px;border-radius:4px;border-left:4px solid #b388eb;background:#2b2d31}
#screen .sb-wl-emain{flex:1;min-width:0;display:grid;gap:6px}
#screen .sb-wl-etitle{color:#f2f3f5;font-size:15px;font-weight:700;overflow-wrap:anywhere}
#screen .sb-wl-edesc{color:#dbdee1;font-size:14px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
#screen .sb-wl-efield{color:#dbdee1;font-size:14px;line-height:1.35}
#screen .sb-wl-efield strong{display:block;color:#f2f3f5;font-size:13px;margin-bottom:2px}
#screen .sb-wl-efoot{color:#b5bac1;font-size:12px}
#screen .sb-wl-ethumb{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover}
#screen .sb-wl-letter{display:flex;align-items:center;justify-content:center;background:#241a34;color:#f5edff;font-weight:800;font-size:26px}
#screen .sb-wl-canvas{display:block;width:100%;max-width:440px;height:auto;margin-top:6px;border-radius:8px}
#screen .sb-wl-another{margin-top:10px;width:100%;min-height:44px;border-radius:12px;border:1px solid rgba(200,180,230,.25);background:none;color:#dcc6f5;font:inherit;font-size:13.5px;cursor:pointer;box-shadow:none}

/* Test */
#screen .sb-wl-test{display:grid;gap:8px;margin-top:16px}
#screen .sb-wl-test button{width:100%}
#screen .sb-wl-test small{color:#b7aabe;font-size:12.5px;line-height:1.45}
/* The switch is small to look at; its tap area is 44 px (design-system.css sizes #screen inputs with !important). */
#screen .sb-wl .live-switch .live-switch-input{inset:auto!important;left:-4px!important;top:-11px!important;width:46px!important;height:44px!important;min-height:44px!important;max-width:none!important;padding:0!important}

/* v3.1.178: formatting and server emoji tools; the Messages page's preview window */
#screen .sb-wl-tools{margin:8px 0 2px}
#screen .sb-wl-toolbtns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
#screen .sb-wl-toolbtn{min-height:44px;padding:0 10px;border-radius:12px;border:1px solid rgba(200,180,230,.25);background:rgba(255,255,255,.04);color:#e3d2f7;font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;box-shadow:none}
#screen .sb-wl-toolbtn[aria-expanded="true"]{background:rgba(179,136,235,.18);border-color:rgba(179,136,235,.55)}
#screen .sb-wl-panel{margin-top:10px;padding:12px;border-radius:14px;border:1px solid rgba(200,180,230,.14);background:rgba(255,255,255,.03)}
#screen .sb-wl-panel[hidden]{display:none}
#screen .sb-wl-fmtgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#screen .sb-wl-fmt{min-height:44px;padding:4px 6px;border-radius:10px;border:1px solid rgba(200,180,230,.2);background:none;color:#e3d2f7;font:inherit;font-size:13px;font-weight:600;line-height:1.2;cursor:pointer;box-shadow:none}
#screen .sb-wl .sb-wl-shell{margin:10px 0 0}
#screen .sb-wl .sb-wl-shell .sb-wl-canvas{margin-top:6px}
#screen .sb-wl .sb-emoji-item{min-height:44px!important}