.media-picker{width:400px;height:500px;background-color:#2f3136bd;backdrop-filter:blur(20px) url(#chat-input-glass-filter);-webkit-backdrop-filter:blur(20px);border-radius:12px;display:flex;flex-direction:column;box-shadow:#0000001f 0 2px 8px;position:absolute;bottom:100%;right:12px;margin-bottom:8px;z-index:1000;transform:translateZ(0);isolation:isolate;overflow:clip}.media-picker-portal{position:fixed;z-index:11500}.media-picker:before{content:"";position:absolute;inset:0;border-radius:12px;padding:1px;background:conic-gradient(from 135deg at 50% 50%,#ffffff2e,#ffffff0f 60deg,#ffffff03 120deg 180deg,#ffffff03 240deg,#ffffff0f,#ffffff2e 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}.media-picker:after{content:"";position:absolute;inset:0;border-radius:12px;padding:1px;background:conic-gradient(from 315deg at 50% 50%,#ffffff1f,#ffffff0a 60deg,#ffffff03 120deg 180deg,#ffffff03 240deg,#ffffff0a,#ffffff1f 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}.media-picker-header{background:#2c2c2c4d;border-radius:12px 12px 0 0;border-bottom:1px solid rgba(255,255,255,.08);padding:12px 16px;display:flex;flex-direction:column;gap:12px;box-sizing:border-box;position:relative;z-index:2}.media-picker-header-row{display:flex;align-items:center;justify-content:center;gap:8px;height:24px}.media-picker-back-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:#b5bac1;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .15s ease}.media-picker-back-btn:hover{background:#ffffff1a;border-color:#ffffff26;color:#fff}.media-picker-title{color:#fff;font-size:17px;font-weight:600;text-align:center}.media-picker-powered-by{color:#84858c;font-size:12px;font-weight:400}.media-picker-header-right{margin-left:auto;display:flex;align-items:center;gap:8px;position:relative}.media-picker-lang-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:#b5bac1;font-size:11px;font-weight:600;letter-spacing:.3px;border-radius:8px;cursor:pointer;transition:all .15s ease;line-height:1}.media-picker-lang-btn:hover,.media-picker-lang-btn.active{background:#ffffff1a;border-color:#ffffff26;color:#fff}.media-picker-lang-icon{display:inline-flex;align-items:center}.media-picker-lang-dropdown{position:absolute;top:calc(100% + 6px);right:0;min-width:200px;max-height:280px;overflow-y:auto;background:#1c1c1cfa;border:1px solid rgba(255,255,255,.1);border-radius:10px;box-shadow:0 8px 24px #00000073;padding:4px;z-index:50}.media-picker-lang-item{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;background:transparent;border:none;color:#d1d2d6;font-size:13px;text-align:left;cursor:pointer;border-radius:6px;transition:background .12s ease}.media-picker-lang-item:hover{background:#ffffff14;color:#fff}.media-picker-lang-item.selected{background:#ffffff0f;color:#fff}.media-picker-lang-item-code{font-size:11px;font-weight:600;letter-spacing:.3px;color:#84858c;min-width:42px;text-transform:none}.media-picker-lang-item.selected .media-picker-lang-item-code{color:#fff}.media-picker-lang-item-name{flex:1}.media-picker-lang-sep{height:1px;background:#ffffff14;margin:4px 6px}.media-picker-tabs{display:flex;gap:8px}.media-picker-tab{padding:8px 16px;border-radius:10px;background:transparent;border:1px solid transparent;color:#fff9;font-size:14px;font-weight:500;cursor:pointer;transition:all .15s ease}.media-picker-tab:hover{background:#ffffff14;color:#ffffffe6}.media-picker-tab.active{background:#ffffff1a;border-color:#ffffff14;color:#fff}.media-picker-search{position:relative}.media-picker-search-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#616165;pointer-events:none;z-index:3}.media-picker-search-input{width:100%;padding:10px 14px 10px 38px;background:#232323;border:1px solid rgb(136 136 136 / 35%);border-radius:10px;color:#fff;font-size:15px;outline:none;transition:all .15s ease;box-sizing:border-box;position:relative}.media-picker-search-input::placeholder{color:#616165}.media-picker-search-input:focus{border-color:#828282;background:#282828}.media-picker-search:before{content:"";position:absolute;inset:0;border-radius:10px;padding:1px;background:conic-gradient(from 135deg at 50% 50%,#ffffff2e,#ffffff0f 60deg,#ffffff03 120deg 180deg,#ffffff03 240deg,#ffffff0f,#ffffff2e 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:1}.media-picker-search:after{content:"";position:absolute;inset:0;border-radius:10px;padding:1px;background:conic-gradient(from 315deg at 50% 50%,#ffffff1f,#ffffff0a 60deg,#ffffff03 120deg 180deg,#ffffff03 240deg,#ffffff0a,#ffffff1f 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}.media-picker-content{flex:1;background:#2c2c2c33;border-radius:0 0 12px 12px;overflow:hidden;position:relative;display:flex;flex-direction:column;z-index:2}.media-picker-back{padding:8px 12px;background:#ffffff14;border:1px solid rgba(255,255,255,.08);border-radius:8px;color:#fff;cursor:pointer;font-size:14px;display:flex;align-items:center;gap:4px;transition:all .15s ease;margin:12px 16px 0;width:fit-content}.media-picker-back:hover{background:#ffffff1f;border-color:#ffffff1f}.media-picker-categories{padding:16px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;overflow-y:auto;flex:1;min-height:0;align-content:start;grid-auto-rows:min-content}.media-picker-category{aspect-ratio:3/2;border-radius:12px;overflow:hidden;cursor:pointer;position:relative;transition:all .15s ease;border:2px solid rgba(255,255,255,.08);min-height:100px}.media-picker-category:hover{transform:scale(1.02);border-color:#589df299;box-shadow:0 4px 16px #589df233}.media-picker-category-image{width:100%;height:100%;object-fit:cover}.media-picker-category-name{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,#000c);color:#fff;padding:12px 8px 8px;font-size:14px;font-weight:600;text-align:center}.media-picker-grid{padding:16px;overflow-y:auto;flex:1;min-height:0}.media-picker-content:has(.media-picker-back) .media-picker-grid{padding-top:0}.emoji-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.emoji-grid-item{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:10px;cursor:pointer;transition:all .15s ease;font-size:26px;background:#ffffff0a;border:1px solid rgba(255,255,255,.06)}.emoji-grid-item:hover{background:#ffffff1f;border-color:#ffffff26;transform:scale(1.08)}.emoji-grid-item:active{transform:scale(.95);background:#ffffff2e}.emoji-grid-item img{width:28px;height:28px}.emoji-grid-item .emoji-sprite{image-rendering:-webkit-optimize-contrast}.gif-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.gif-grid-item{border-radius:10px;overflow:hidden;cursor:pointer;transition:all .15s ease;position:relative;border:2px solid rgba(255,255,255,.06);background:#ffffff0a;aspect-ratio:1 / 1}.gif-grid-item-bg{position:absolute;inset:0;background-size:cover;background-position:center;filter:blur(16px) brightness(.6);z-index:0}.gif-grid-item img{position:relative;width:100%;height:100%;object-fit:contain;z-index:1}.gif-grid-item:hover{border-color:#589df299;box-shadow:0 4px 16px #589df233;transform:scale(1.02)}.gif-grid-item-count{position:absolute;top:4px;left:4px;background:#000000bf;color:#fff;font-size:11px;font-weight:600;padding:2px 6px;border-radius:6px;pointer-events:none;z-index:1}.gif-grid-item video{position:relative;width:100%;height:100%;object-fit:contain;z-index:1}.media-picker-loading{display:flex;align-items:center;justify-content:center;height:200px;color:#ffffff80;font-size:14px}.media-picker-loading-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.1);border-top:2px solid rgba(88,157,242,.8);border-radius:50%;animation:spin 1s linear infinite;margin-right:8px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.media-picker-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:#ffffff80;font-size:14px;text-align:center;gap:8px}.emoji-category-section{margin-bottom:20px;content-visibility:auto;contain-intrinsic-size:auto none}.emoji-category-title{color:#ffffff80;font-size:11px;font-weight:600;margin-bottom:10px;padding:0 4px;text-transform:uppercase;letter-spacing:.8px}@media(max-width:480px){.media-picker{width:350px;height:450px}.gif-grid{grid-template-columns:1fr 1fr}.emoji-grid{grid-template-columns:repeat(6,1fr)}}.media-picker.emoji-reaction-picker{width:360px;height:420px;bottom:auto;right:auto;margin-bottom:0;animation:reaction-picker-appear .15s cubic-bezier(.34,1.56,.64,1)}@keyframes reaction-picker-appear{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.media-picker.emoji-reaction-picker .media-picker-header{padding:10px 14px;gap:10px}.media-picker.emoji-reaction-picker .emoji-grid{grid-template-columns:repeat(7,1fr);gap:6px}.media-picker.emoji-reaction-picker .emoji-grid-item{font-size:22px;border-radius:8px}.media-picker.emoji-reaction-picker .emoji-grid-item img{width:26px;height:26px}.media-picker .media-picker-mode-switch{display:flex;gap:2px;padding:3px;background:#232323;border:1px solid rgb(136 136 136 / 25%);border-radius:10px;box-sizing:border-box}.media-picker .media-picker-mode-btn{flex:1;padding:6px 12px;background:transparent;border:1px solid transparent;border-radius:8px;color:#b5bac1;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s ease}.media-picker .media-picker-mode-btn:hover{color:#fff;background:#ffffff0f}.media-picker .media-picker-mode-btn.active{background:#ffffff1a;border-color:#ffffff1f;color:#fff}.media-picker .media-picker-sticker-home{display:flex;flex-direction:column;flex:1;min-height:0}.media-picker .media-picker-recent-searches{display:flex;flex-wrap:wrap;gap:6px;padding:12px 16px 0;flex-shrink:0}.media-picker .media-picker-recent-chip{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#d1d2d6;font-size:12px;font-weight:500;cursor:pointer;transition:all .15s ease;line-height:1;max-width:160px}.media-picker .media-picker-recent-chip:hover{background:#ffffff1f;border-color:#ffffff2e;color:#fff}.media-picker .media-picker-recent-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.media-picker .media-picker-recent-chip-remove{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;border-radius:50%;color:#84858c;font-size:13px;transition:all .15s ease}.media-picker .media-picker-recent-chip-remove:hover{background:#ffffff26;color:#fff}.media-picker .media-picker-most-used-chip{background:#589df21f;border-color:#589df24d;color:#a8c7f0}.media-picker .media-picker-most-used-chip:hover{background:#589df233;border-color:#589df273;color:#fff}.media-picker .media-picker-section-label{color:#ffffff80;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;padding:12px 16px 0;flex-shrink:0}.media-picker .media-picker-sticker-home .media-picker-grid{padding-top:10px}.media-picker .gif-grid.sticker-grid{grid-template-columns:repeat(3,1fr)}.media-picker .gif-grid-item.sticker-grid-item{background:#ffffff08}.media-picker .gif-grid-item.sticker-grid-item img{padding:8px;box-sizing:border-box}.media-picker-search-input{padding-right:44px}.media-picker-emote-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;display:flex;align-items:center;justify-content:center;padding:0;z-index:3;cursor:pointer;border:1px solid rgba(255,255,255,.14);border-radius:8px;color:#c9ced6;background:linear-gradient(160deg,#ffffff24,#ffffff0d);transition:all .15s ease}.media-picker-emote-toggle:hover{color:#fff;border-color:#ffffff38}.media-picker-emote-toggle-on{color:#d6f5e0;border-color:#90ee9066;background:linear-gradient(160deg,#4a7c59e6,#5a8c69e6);box-shadow:0 2px 8px #4a7c594d}.media-picker-emote-toggle-hidden{display:none}.media-picker-emote-close{position:absolute;top:10px;right:10px;z-index:6;width:28px;height:28px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;color:#c9ced6;border:1px solid rgba(255,255,255,.14);border-radius:8px;background:#ffffff12;transition:all .15s ease}.media-picker-emote-close:hover{color:#fff;background:#ffffff24}.media-picker-emote-close-hidden{display:none}
