/* update 3: chip inputs + upload form */
.sw-chipf{position:relative}
.sw-chips-box{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:44px;padding:6px 8px;border-radius:10px;background:var(--color-elevated,#1f1f1f);border:1px solid var(--color-border,#333);cursor:text}
.sw-chips-box:focus-within{border-color:var(--color-primary,#1db954)}
.sw-chips-err .sw-chips-box{border-color:#ef4444}
.sw-chip{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:4px 4px 4px 10px;border-radius:999px;background:var(--color-pill,#2a2a2a);font-size:13px;font-weight:600;line-height:1.2}
.sw-chip-new{outline:1px dashed var(--color-primary,#1db954)}
.sw-chip button{display:grid;place-items:center;width:20px;height:20px;border-radius:999px;font-size:15px;line-height:1;opacity:.7}
.sw-chip button:hover{opacity:1;background:rgba(127,127,127,.25)}
.sw-chips-in{flex:1;min-width:120px;background:transparent;border:0;outline:0;font-size:14px;padding:4px 2px;color:inherit}
.sw-chips-sug{position:absolute;z-index:40;left:0;right:0;margin-top:4px;max-height:260px;overflow:auto;border-radius:10px;background:var(--color-elevated,#1f1f1f);border:1px solid var(--color-border,#333);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.sw-sug{display:flex;width:100%;align-items:center;gap:8px;padding:9px 12px;text-align:left;font-size:14px}
.sw-sug img{width:24px;height:24px;border-radius:999px;object-fit:cover}
.sw-sug.on,.sw-sug:hover{background:var(--color-pill,#2a2a2a)}
.sw-sug-new{color:var(--color-primary,#1db954);font-weight:600}
.sw-more>summary{list-style:none}.sw-more>summary::-webkit-details-marker{display:none}
.sw-more>summary::after{content:'▾';margin-left:8px;transition:transform .2s}.sw-more[open]>summary::after{transform:rotate(180deg)}
.sw-more[open] [data-more-sum]{display:none}
.sw-savebar{position:sticky;z-index:30;bottom:calc(76px + env(safe-area-inset-bottom,0px));margin:20px -16px 0;padding:10px 16px;background:linear-gradient(to top,var(--color-bg,#121212) 70%,transparent)}
.sw-savebar button{width:100%;justify-content:center}
@media (min-width:768px){.sw-savebar{bottom:calc(96px + env(safe-area-inset-bottom,0px))}}
.sw-savebar-admin{bottom:0;margin:12px 0 0;padding:10px 0}
/* update 9: sticky save bar never hides content; "Tùy chọn thêm" summary layout */
.sw-savebar{background:color-mix(in srgb,var(--color-bg,#121212) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--color-border,rgba(255,255,255,.1));padding-bottom:10px}
.sw-savebar-admin{bottom:0;margin:16px -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px))}
form:has(>.sw-savebar),form:has(.sw-savebar){scroll-padding-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
.sw-more{margin-bottom:12px;scroll-margin-bottom:calc(150px + env(safe-area-inset-bottom,0px))}
.sw-more>summary{display:flex;align-items:center;gap:10px;min-width:0}
.sw-more>summary>span:first-child{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.sw-more>summary>[data-more-sum]{flex:1 1 auto;min-width:0;margin-left:0;padding-left:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:400;opacity:.75}
.sw-more>summary::after{flex:0 0 auto}
@media (max-width:480px){.sw-more>summary{flex-wrap:wrap;row-gap:2px}.sw-more>summary>[data-more-sum]{order:3;flex-basis:100%;text-align:left}.sw-more>summary::after{margin-left:auto}}
form:has(.sw-savebar){padding-bottom:env(safe-area-inset-bottom,0px)}
/* update 10: nothing inside the track forms may widen the page (long file names, chips, titles, errors) */
main,#app,.sw-admin-main{overflow-x:clip}
form [class*="flex"]>*,form .grid>*,.sw-drop,#dropzone{min-width:0}
.sw-drop{max-width:100%;overflow:hidden}
#fileName{display:flex;max-width:100%;min-width:0;justify-content:center;white-space:nowrap}
#fileName .fn-h{overflow:hidden;text-overflow:ellipsis;min-width:0}
#fileName .fn-t{flex:0 0 auto}
.sw-chips{min-width:0;max-width:100%;flex-wrap:wrap}
.sw-chip{max-width:100%;min-width:0}
.sw-chip>:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
[data-file-err],[role=alert],.sw-toast,#upPct,.sw-flash{overflow-wrap:anywhere;word-break:break-word;max-width:100%}
form input,form select,form textarea{max-width:100%;min-width:0}
.sw-chip{overflow-wrap:anywhere;word-break:break-word}
.sw-chip>button{flex:0 0 auto}
