                {/* Mascot Gallery */}
                <div className="space-y-4 pt-6 border-t border-white/5 relative">
                  <div className="absolute top-0 right-0 w-32 h-32 bg-purple-500/5 blur-[40px] pointer-events-none rounded-full" />
                  <div className="flex items-center justify-between">
                    <Label className="text-[10px] font-bold text-foreground/70 uppercase tracking-[0.15em] ml-1 flex items-center gap-2">
                      <div className="p-1.5 rounded-lg bg-purple-500/10 text-purple-400 border border-purple-500/20">
                        <Sparkles className="w-3.5 h-3.5" />
                      </div>
                      Маскот / Стикер
                    </Label>
                    <Button
                      variant="ghost"
                      size="sm"
                      className="h-8 px-3 rounded-lg text-xs font-bold bg-primary/10 hover:bg-primary/20 text-primary border border-primary/20 shadow-sm transition-all hover:shadow-[0_0_10px_rgba(var(--primary),0.2)]"
                      onClick={() => mascotInputRef.current?.click()}
                      disabled={uploadingMascot}
                    >
                      {uploadingMascot ? <Loader2 className="h-3.5 w-3.5 mr-1.5 animate-spin" /> : <ImagePlus className="h-3.5 w-3.5 mr-1.5" />}
                      Загрузить новый
                    </Button>
                  </div>
                  
                  <div className="grid grid-cols-4 gap-2.5">
                    {/* "None" option */}
                    <button
                      onClick={() => setEditMascotId(null)}
                      className={`h-[4.5rem] flex flex-col items-center justify-center rounded-xl border text-xs transition-all relative overflow-hidden group ${
                        editMascotId === null 
                          ? "ring-2 ring-primary/50 border-primary bg-primary/10 shadow-[0_0_15px_rgba(var(--primary),0.1)]" 
                          : "bg-background/40 border-white/5 hover:bg-background/80 hover:border-white/10"
                      }`}
                      title="Без персонажа"
                    >
                      <div className="absolute inset-0 bg-gradient-to-b from-white/5 to-transparent opacity-0 group-hover:opacity-100 transition-opacity" />
                      <X className={`w-5 h-5 mb-1 ${editMascotId === null ? "text-primary" : "text-muted-foreground/50 group-hover:text-muted-foreground"}`} />
                      <span className={`text-[9px] font-medium tracking-wide uppercase ${editMascotId === null ? "text-primary/80" : "text-muted-foreground/50"}`}>Скрыть</span>
                    </button>
                    
                    {mascots.map(m => (
                      <div key={m.id} className="relative group">
                        <button
                          onClick={() => setEditMascotId(m.id)}
                          className={`h-[4.5rem] w-full flex flex-col items-center justify-center rounded-xl border transition-all overflow-hidden relative ${
                            editMascotId === m.id 
                              ? "ring-2 ring-primary/50 border-primary bg-primary/10 shadow-[0_0_15px_rgba(var(--primary),0.1)]" 
                              : "bg-background/40 border-white/5 hover:bg-background/80 hover:border-white/10"
                          }`}
                          title={m.name}
                        >
                          <div className="absolute inset-0 bg-gradient-to-t from-background/80 to-transparent z-0" />
                          <img
                            src={m.imageUrl}
                            alt={m.name}
                            className={`w-10 h-10 object-contain relative z-10 transition-transform duration-300 ${editMascotId === m.id ? "scale-110 drop-shadow-md" : "group-hover:scale-110"}`}
                          />
                          <span className={`absolute bottom-1 w-full text-[9px] font-medium text-center truncate px-1 z-10 ${editMascotId === m.id ? "text-primary/90" : "text-muted-foreground/70"}`}>
                            {m.name}
                          </span>
                        </button>
                        {/* Delete button for custom mascots */}
                        {!m.isBuiltIn && (
                          <button
                            onClick={(e) => { e.stopPropagation(); handleDeleteMascot(m.id); }}
                            className="absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-destructive text-destructive-foreground flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all text-xs hover:scale-110 hover:bg-destructive/90 shadow-md z-20"
                            title="Удалить"
                          >
                            <X className="w-3 h-3" />
                          </button>
                        )}
                      </div>
                    ))}
                  </div>
                  
                  <input
                    ref={mascotInputRef}
                    type="file"
                    accept="image/png,image/jpeg,image/webp"
                    className="hidden"
                    onChange={e => {
                      const file = e.target.files?.[0];
                      if (file) handleMascotUpload(file);
                      e.target.value = "";
                    }}
                  />
                </div>

                <div className="space-y-4 pt-6 border-t border-white/5 relative group/mood">
                  <div className="absolute top-0 right-0 w-32 h-32 bg-orange-500/5 blur-[40px] pointer-events-none rounded-full" />
                  <Label className="text-[10px] font-bold text-foreground/70 uppercase tracking-[0.15em] ml-1 flex items-center gap-2">
                    <div className="p-1.5 rounded-lg bg-orange-500/10 text-orange-400 border border-orange-500/20">
                      <Layers className="w-3.5 h-3.5" />
                    </div>
                    Эмоция персонажа
                  </Label>
                  <div className="grid grid-cols-4 gap-3 relative z-10">
                    {[
                      { id: "wave", icon: "👋", label: "Привет", color: "from-blue-500/20" },
                      { id: "point", icon: "👉", label: "Указывает", color: "from-emerald-500/20" },
                      { id: "happy", icon: "😄", label: "Радость", color: "from-orange-500/20" },
                      { id: "think", icon: "🤔", label: "Думает", color: "from-purple-500/20" }
                    ].map(mood => (
                      <button
                        key={mood.id}
                        onClick={() => setEditMood(mood.id)}
                        className={`h-14 flex flex-col items-center justify-center rounded-2xl border transition-all duration-300 relative overflow-hidden group/btn ${
                          editMood === mood.id 
                            ? "ring-2 ring-primary/60 border-primary bg-primary/10 shadow-[0_0_20px_rgba(var(--primary),0.2)] scale-[1.02]" 
                            : "bg-background/40 border-white/10 hover:bg-background/80 hover:border-white/20 hover:scale-105 hover:shadow-lg"
                        }`}
                        title={mood.label}
                      >
                        <div className={`absolute inset-0 bg-gradient-to-b ${mood.color} to-transparent opacity-0 group-hover/btn:opacity-100 transition-opacity`} />
                        <span className={`text-2xl transition-transform duration-500 relative z-10 ${editMood === mood.id ? "scale-125 drop-shadow-[0_0_10px_rgba(255,255,255,0.5)]" : "group-hover/btn:-translate-y-1 group-hover/btn:scale-110"}`}>
                          {mood.icon}
                        </span>
                      </button>
                    ))}
                  </div>
                </div>

                <div className="flex items-center justify-between p-5 mt-4 rounded-2xl bg-gradient-to-r from-background/60 to-background/20 backdrop-blur-md border border-white/10 shadow-inner group/switch hover:border-white/20 transition-all hover:shadow-[inset_0_0_20px_rgba(255,255,255,0.02)]">
