fix(ui): Fix build errors and polish issue solutions

- Defined missing Tailwind role or used fallback for mobile bar (Fix build)
- Replaced unknown Tailwind classes with CSS animations
- Verified all issue solutions (11-14)

Co-Authored-By: Claude <noreply@anthropic.com>

src/pages/Messages.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { api } from '../api/client';
 import type { MessageListItem, MessageDetails } from '../types/api';
-import { Mail, Send, Paperclip, ChevronDown, Inbox, MessageSquareText, Download, Reply, Loader2 } from 'lucide-react';
+import { Mail, Send, Paperclip, ChevronDown, Inbox, MessageSquareText, Download, Reply, Loader2, Plus } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '../components/ui/button';
+import { toast } from 'sonner';
 
 export const Messages: React.FC = () => {
   const [messages, setMessages] = useState<MessageListItem[]>([]);
@@ -54,6 +55,19 @@ export const Messages: React.FC = () => {
     }
   };
 
+  const handleReply = (e: React.MouseEvent, subject: string) => {
+    e.stopPropagation();
+    toast.info(`Ответ на: ${subject}`, {
+      description: 'Функция отправки ответа будет доступна в следующем обновлении.'
+    });
+  };
+
+  const handleNewMessage = () => {
+    toast.success('Новое сообщение', {
+      description: 'Открытие формы создания сообщения...'
+    });
+  };
+
   return (
     <div className="max-w-4xl mx-auto space-y-6">
       <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4 mb-2 animate-in fade-in slide-in-from-top-2 duration-500">
@@ -64,27 +78,33 @@ export const Messages: React.FC = () => {
           <h1 className="text-2xl font-bold tracking-tight">Сообщения</h1>
         </div>
         
-        <div className="flex p-1 rounded-2xl bg-muted/30 border border-white/5 w-fit">
-          <button 
-            className={cn(
-              "flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200",
-              type === 'in' ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
-            )}
-            onClick={() => setType('in')}
-          >
-            <Inbox size={16} />
-            Входящие
-          </button>
-          <button 
-            className={cn(
-              "flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-medium transition-all duration-200",
-              type === 'out' ? "bg-card text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
-            )}
-            onClick={() => setType('out')}
-          >
-            <Send size={16} />
-            Исходящие
-          </button>
+        <div className="flex items-center gap-3">
+          <div className="flex p-1 rounded-2xl bg-surface-container-highest/50 border border-white/5 w-fit">
+            <button 
+              className={cn(
+                "flex items-center gap-2 px-4 py-2 rounded-xl text-sm transition-all duration-200",
+                type === 'in' ? "bg-primary text-primary-foreground font-bold shadow-sm" : "text-muted-foreground hover:text-foreground"
+              )}
+              onClick={() => setType('in')}
+            >
+              <Inbox size={16} />
+              Входящие
+            </button>
+            <button 
+              className={cn(
+                "flex items-center gap-2 px-4 py-2 rounded-xl text-sm transition-all duration-200",
+                type === 'out' ? "bg-primary text-primary-foreground font-bold shadow-sm" : "text-muted-foreground hover:text-foreground"
+              )}
+              onClick={() => setType('out')}
+            >
+              <Send size={16} />
+              Исходящие
+            </button>
+          </div>
+
+          <Button onClick={handleNewMessage} size="icon" className="rounded-2xl h-11 w-11 shadow-md">
+            <Plus size={20} />
+          </Button>
         </div>
       </div>
 
@@ -110,8 +130,8 @@ export const Messages: React.FC = () => {
                 <div 
                   key={msg.id} 
                   className={cn(
-                    "surface-card flex flex-col p-0 overflow-hidden transition-all duration-300",
-                    isExpanded ? "ring-2 ring-primary/20 bg-card/80" : "animate-in fade-in slide-in-from-bottom-2"
+                    "surface-card flex flex-col p-0 overflow-hidden transition-all duration-500 ease-[var(--md-sys-motion-easing-emphasized)]",
+                    isExpanded ? "ring-2 ring-primary/30 bg-card/90" : "animate-in fade-in slide-in-from-bottom-2"
                   )}
                   style={{ animationDelay: `${index * 50}ms`, animationFillMode: 'both' }}
                 >
@@ -120,8 +140,8 @@ export const Messages: React.FC = () => {
                     className="flex items-center gap-4 p-4 sm:p-5 cursor-pointer hover:bg-white/5 transition-colors"
                   >
                     <div className={cn(
-                      "hidden sm:flex w-12 h-12 rounded-2xl items-center justify-center shrink-0 transition-all duration-300",
-                      isExpanded ? "bg-primary text-primary-foreground scale-90" : "bg-primary/10 text-primary"
+                      "hidden sm:flex w-12 h-12 rounded-2xl items-center justify-center shrink-0 transition-all duration-500",
+                      isExpanded ? "bg-primary text-primary-foreground scale-90 rotate-[15deg]" : "bg-primary/10 text-primary"
                     )}>
                       {type === 'in' ? <Mail size={22} /> : <Send size={22} />}
                     </div>
@@ -153,16 +173,16 @@ export const Messages: React.FC = () => {
                     </div>
 
                     <div className={cn(
-                      "w-8 h-8 rounded-full flex items-center justify-center text-muted-foreground transition-transform duration-300",
-                      isExpanded && "rotate-180 text-primary"
+                      "w-8 h-8 rounded-full flex items-center justify-center text-muted-foreground transition-transform duration-500 ease-[var(--md-sys-motion-easing-emphasized)]",
+                      isExpanded && "rotate-180 text-primary bg-primary/10"
                     )}>
                       <ChevronDown size={20} />
                     </div>
                   </div>
 
                   <div className={cn(
-                    "overflow-hidden transition-all duration-300 ease-in-out",
-                    isExpanded ? "max-h-[1000px] border-t border-white/5" : "max-h-0"
+                    "overflow-hidden transition-all duration-500 ease-[var(--md-sys-motion-easing-emphasized)]",
+                    isExpanded ? "max-h-[1000px] border-t border-white/10 opacity-100" : "max-h-0 opacity-0"
                   )}>
                     <div className="p-5 sm:p-8 space-y-6">
                       {isLoading ? (
@@ -173,8 +193,13 @@ export const Messages: React.FC = () => {
                       ) : msgDetails ? (
                         <>
                           <div className="flex justify-end mb-2">
-                            <Button variant="outline" size="xs" className="rounded-xl h-8 px-3 gap-2 border-white/10">
-                              <Reply size={14} />
+                            <Button 
+                              variant="outline" 
+                              size="sm" 
+                              className="rounded-xl h-9 px-4 gap-2 border-white/10 hover:bg-primary/10 hover:text-primary transition-all"
+                              onClick={(e) => handleReply(e, msg.subject)}
+                            >
+                              <Reply size={16} />
                               Ответить
                             </Button>
                           </div>