Update public/custom.css

public/custom.css

@@ -1,364 +1,383 @@
-/* =============================================================================
-   CUSTOM STYLES - AGENT COLLABORATIF UGE
-   Basé sur le dark template fourni
-   ============================================================================= */
-
-:root {
-  /* Couleurs principales du dark template */
-  /*--primary-violet: #7C3AED;
-  --primary-violet-light: #A78BFA;
-  --accent-pink: #EC4899;
-  --bg-dark: #0F0F23;
-  --bg-card: #1A1B2E;
-  --bg-card-hover: #252641;
-  --text-primary: #F9FAFB;
-  --text-secondary: #9CA3AF;
-  --text-tertiary: #6B7280;
-  --border-color: rgba(124, 58, 237, 0.2);
-  --shadow-primary: rgba(124, 58, 237, 0.3);
-  --shadow-glow: rgba(124, 58, 237, 0.5);
-*/
-  --primary-violet: #016157; /* Vert-Cyan dominant */
-  --primary-violet-light: #34857c; /* Version plus claire du vert-cyan */
-  --accent-pink: #296383; /* Bleu secondaire pour l'accentuation (Bleu acier/Bleu céruléen) */
-  --bg-dark: #0F0F23; /* Fond sombre (inchangé, fonctionne bien avec le vert/bleu) */
-  --bg-card: #1A1B2E; /* Fond de carte (inchangé, neutre sombre) */
-  --bg-card-hover: #252641; /* Hover de carte (inchangé, neutre sombre) */
-  --text-primary: #F9FAFB; /* Texte principal (blanc/clair, inchangé) */
-  --text-secondary: #9CA3AF; /* Texte secondaire (gris moyen, inchangé) */
-  --text-tertiary: #6B7280; /* Texte tertiaire (gris foncé, inchangé) */
-  --border-color: rgba(0, 168, 150, 0.2); /* Bordure (Basée sur le nouveau --primary-green) */
-  --shadow-primary: rgba(0, 168, 150, 0.3); /* Ombre (Basée sur le nouveau --primary-green) */
-  --shadow-glow: rgba(0, 168, 150, 0.5); /* Effet lumineux (Basé sur le nouveau --primary-green) */
-}
-.logo{opacity:1!important;}
-.-ml-1\.5 {
-  margin-top:.375rem!important;
-  margin-left: -.375rem;
-}
-/* Body et fond principal */
-body {
-  background-color: var(--bg-dark) !important;
-  color: var(--text-primary) !important;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif !important;
-}
-
-/* Container principal */
-#root {
-  background-color: var(--bg-dark);
-}
-
-/* Cartes et panneaux */
-.MuiPaper-root {
-  background-color: var(--bg-card) !important;
-  border: 1px solid var(--border-color) !important;
-  border-radius: 16px !important;
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
-  transition: all 0.3s ease !important;
-}
-
-.MuiPaper-root:hover {
-  background-color: var(--bg-card-hover) !important;
-  border-color: var(--primary-violet) !important;
-  box-shadow: 0 12px 48px var(--shadow-primary) !important;
-}
-
-/* Messages */
-/*
-.step {
-  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(26, 27, 46, 0.8) 100%) !important;
-  border-left: 3px solid var(--primary-violet) !important;
-  border-radius: 12px !important;
-  */
-  /*margin: 12px 0 !important;*/
-/*  padding: 16px !important;
-  backdrop-filter: blur(10px) !important;
-}*/
-/*
-.step:hover {
-  border-left-color: var(--accent-pink) !important;
-  transform: translateX(4px) !important;
-}
-*/
-
-/* Boutons principaux */
-button, .MuiButton-root {
-  background: linear-gradient(135deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
-  color: white !important;
-  border: none !important;
-  border-radius: 12px !important;
-  padding: 12px 24px !important;
-  font-weight: 600 !important;
-  text-transform: none !important;
-  box-shadow: 0 4px 16px var(--shadow-primary) !important;
-  transition: all 0.3s ease !important;
-}
-
-button:hover, .MuiButton-root:hover {
-  transform: translateY(-2px) !important;
-  box-shadow: 0 8px 24px var(--shadow-glow) !important;
-}
-
-/* Starters - Style des cartes de démarrage */
-.starter {
-  background: var(--bg-card) !important;
-  border: 1px solid var(--border-color) !important;
-  border-radius: 16px !important;
-  padding: 20px !important;
-  cursor: pointer !important;
-  transition: all 0.3s ease !important;
-  position: relative !important;
-  overflow: hidden !important;
-}
-
-.starter::before {
-  content: '' !important;
-  position: absolute !important;
-  top: 0 !important;
-  left: 0 !important;
-  right: 0 !important;
-  height: 4px !important;
-  background: linear-gradient(90deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
-  transform: scaleX(0) !important;
-  transition: transform 0.3s ease !important;
-}
-
-.starter:hover::before {
-  transform: scaleX(1) !important;
-}
-
-.starter:hover {
-  background-color: var(--bg-card-hover) !important;
-  border-color: var(--primary-violet) !important;
-  transform: translateY(-4px) scale(1.02) !important;
-  box-shadow: 0 12px 32px var(--shadow-primary) !important;
-}
-
-/* Icônes des starters */
-.starter svg, .starter img {
-  width: 48px !important;
-  height: 48px !important;
-  margin-bottom: 12px !important;
-  filter: drop-shadow(0 4px 8px var(--shadow-primary)) !important;
-}
-
-/* Input de message */
-.MuiTextField-root, textarea, input {
-  background-color: var(--bg-card) !important;
-  border: 1px solid var(--border-color) !important;
-  border-radius: 12px !important;
-  color: var(--text-primary) !important;
-  padding: 12px !important;
-}
-
-.MuiTextField-root:focus, textarea:focus, input:focus {
-  border-color: var(--primary-violet) !important;
-  box-shadow: 0 0 0 3px var(--shadow-primary) !important;
-  outline: none !important;
-}
-
-/* Steps (Chain of Thought) */
-.step-header {
-  background: linear-gradient(90deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
-  -webkit-background-clip: text !important;
-  -webkit-text-fill-color: transparent !important;
-  background-clip: text !important;
-  font-weight: 700 !important;
-  font-size: 1.1rem !important;
-  margin-bottom: 8px !important;
-}
-
-/* Badges et tags */
-.MuiChip-root {
-  background: linear-gradient(135deg, var(--primary-violet-light) 0%, var(--primary-violet) 100%) !important;
-  color: white !important;
-  border: none !important;
-  border-radius: 8px !important;
-  font-weight: 600 !important;
-}
-
-/* Scrollbar personnalisée */
-::-webkit-scrollbar {
-  width: 10px !important;
-  height: 10px !important;
-}
-
-::-webkit-scrollbar-track {
-  background: var(--bg-dark) !important;
-  border-radius: 10px !important;
-}
-
-::-webkit-scrollbar-thumb {
-  background: linear-gradient(180deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
-  border-radius: 10px !important;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  background: var(--primary-violet-light) !important;
-}
-
-/* Headers */
-h1, h2, h3, h4, h5, h6 {
-  color: var(--text-primary) !important;
-  font-weight: 700 !important;
-}
-
-h1 {
-  background: linear-gradient(135deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
-  -webkit-background-clip: text !important;
-  -webkit-text-fill-color: transparent !important;
-  background-clip: text !important;
-}
-
-/* Liens */
-a {
-  color: var(--primary-violet-light) !important;
-  text-decoration: none !important;
-  transition: all 0.3s ease !important;
-}
-
-a:hover {
-  color: var(--accent-pink) !important;
-  text-decoration: underline !important;
-}
-
-/* Code blocks */
-pre, code {
-  background-color: rgba(15, 15, 35, 0.8) !important;
-  border: 1px solid var(--border-color) !important;
-  border-radius: 8px !important;
-  color: var(--primary-violet-light) !important;
-  padding: 12px !important;
-  font-family: 'Fira Code', 'Courier New', monospace !important;
-}
-
-/* Citations */
-blockquote {
-  border-left: 4px solid var(--primary-violet) !important;
-  background-color: var(--bg-card) !important;
-  padding: 16px !important;
-  margin: 16px 0 !important;
-  border-radius: 0 8px 8px 0 !important;
-}
-
-/* Messages utilisateur */
-.user-message {
-  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%) !important;
-  border: 1px solid var(--primary-violet) !important;
-  border-radius: 16px 16px 4px 16px !important;
-  padding: 16px !important;
-  margin-bottom: 16px !important;
-}
-
-/* Messages assistant */
-.assistant-message {
-  background-color: var(--bg-card) !important;
-  border: 1px solid var(--border-color) !important;
-  border-radius: 16px 16px 16px 4px !important;
-  padding: 16px !important;
-  margin-bottom: 16px !important;
-}
-
-/* Loader animé */
-.loader {
-  border: 3px solid var(--bg-card) !important;
-  border-top: 3px solid var(--primary-violet) !important;
-  border-radius: 50% !important;
-  animation: spin 1s linear infinite !important;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Effet de glow sur les éléments importants */
-.glow-effect {
-  box-shadow: 0 0 20px var(--shadow-glow) !important;
-  animation: pulse-glow 2s ease-in-out infinite !important;
-}
-
-@keyframes pulse-glow {
-  0%, 100% {
-    box-shadow: 0 0 20px var(--shadow-glow);
-  }
-  50% {
-    box-shadow: 0 0 30px var(--shadow-glow);
-  }
-}
-
-/* Sidebar */
-.sidebar {
-  background-color: var(--bg-card) !important;
-  border-right: 1px solid var(--border-color) !important;
-}
-
-/* Tooltips */
-.MuiTooltip-tooltip {
-  background-color: var(--bg-card) !important;
-  border: 1px solid var(--primary-violet) !important;
-  color: var(--text-primary) !important;
-  font-size: 0.875rem !important;
-  border-radius: 8px !important;
-  box-shadow: 0 4px 16px var(--shadow-primary) !important;
-}
-
-/* Avatar */
-.avatar {
-  border: 2px solid var(--primary-violet) !important;
-  box-shadow: 0 4px 12px var(--shadow-primary) !important;
-}
-
-/* Tables */
-table {
-  border-collapse: separate !important;
-  border-spacing: 0 8px !important;
-}
-
-th {
-  background: linear-gradient(135deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
-  color: white !important;
-  padding: 12px !important;
-  font-weight: 600 !important;
-  border-radius: 8px 8px 0 0 !important;
-}
-
-td {
-  background-color: var(--bg-card) !important;
-  padding: 12px !important;
-  border: 1px solid var(--border-color) !important;
-  color: var(--text-primary) !important;
-}
-
-tr:hover td {
-  background-color: var(--bg-card-hover) !important;
-}
-
-/* Animations d'entrée */
-@keyframes fadeInUp {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-.fade-in-up {
-  animation: fadeInUp 0.5s ease-out !important;
-}
-
-/* Responsive */
-@media (max-width: 768px) {
-  .starter {
-    padding: 16px !important;
-  }
-  
-  button, .MuiButton-root {
-    padding: 10px 20px !important;
-  }
-}
+/* =============================================================================
+   CUSTOM STYLES - AGENT COLLABORATIF UGE
+   Basé sur le dark template fourni
+   ============================================================================= */
+
+:root {
+  /* Couleurs principales du dark template */
+  /*--primary-violet: #7C3AED;
+  --primary-violet-light: #A78BFA;
+  --accent-pink: #EC4899;
+  --bg-dark: #0F0F23;
+  --bg-card: #1A1B2E;
+  --bg-card-hover: #252641;
+  --text-primary: #F9FAFB;
+  --text-secondary: #9CA3AF;
+  --text-tertiary: #6B7280;
+  --border-color: rgba(124, 58, 237, 0.2);
+  --shadow-primary: rgba(124, 58, 237, 0.3);
+  --shadow-glow: rgba(124, 58, 237, 0.5);
+*/
+  --primary-violet: #016157; /* Vert-Cyan dominant */
+  --primary-violet-light: #34857c; /* Version plus claire du vert-cyan */
+  --accent-pink: #296383; /* Bleu secondaire pour l'accentuation (Bleu acier/Bleu céruléen) */
+  --bg-dark: #0F0F23; /* Fond sombre (inchangé, fonctionne bien avec le vert/bleu) */
+  --bg-card: #1A1B2E; /* Fond de carte (inchangé, neutre sombre) */
+  --bg-card-hover: #252641; /* Hover de carte (inchangé, neutre sombre) */
+  --text-primary: #F9FAFB; /* Texte principal (blanc/clair, inchangé) */
+  --text-secondary: #9CA3AF; /* Texte secondaire (gris moyen, inchangé) */
+  --text-tertiary: #6B7280; /* Texte tertiaire (gris foncé, inchangé) */
+  --border-color: rgba(0, 168, 150, 0.2); /* Bordure (Basée sur le nouveau --primary-green) */
+  --shadow-primary: rgba(0, 168, 150, 0.3); /* Ombre (Basée sur le nouveau --primary-green) */
+  --shadow-glow: rgba(0, 168, 150, 0.5); /* Effet lumineux (Basé sur le nouveau --primary-green) */
+}
+.logo{opacity:1!important;}
+.-ml-1\.5 {
+  margin-top:.375rem!important;
+  margin-left: -.375rem;
+}
+/* Body et fond principal */
+body {
+  background-color: var(--bg-dark) !important;
+  color: var(--text-primary) !important;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif !important;
+}
+
+/* Container principal */
+#root {
+  background-color: var(--bg-dark);
+}
+
+/* Cartes et panneaux */
+.MuiPaper-root {
+  background-color: var(--bg-card) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: 16px !important;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
+  transition: all 0.3s ease !important;
+}
+
+.MuiPaper-root:hover {
+  background-color: var(--bg-card-hover) !important;
+  border-color: var(--primary-violet) !important;
+  box-shadow: 0 12px 48px var(--shadow-primary) !important;
+}
+
+/* Messages */
+/*
+.step {
+  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(26, 27, 46, 0.8) 100%) !important;
+  border-left: 3px solid var(--primary-violet) !important;
+  border-radius: 12px !important;
+  */
+  /*margin: 12px 0 !important;*/
+/*  padding: 16px !important;
+  backdrop-filter: blur(10px) !important;
+}*/
+/*
+.step:hover {
+  border-left-color: var(--accent-pink) !important;
+  transform: translateX(4px) !important;
+}
+*/
+
+/* Boutons principaux */
+button, .MuiButton-root {
+  background: linear-gradient(135deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 12px !important;
+  padding: 12px 24px !important;
+  font-weight: 600 !important;
+  text-transform: none !important;
+  box-shadow: 0 4px 16px var(--shadow-primary) !important;
+  transition: all 0.3s ease !important;
+}
+button[data-sidebar="rail"] {
+  background: transparent !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 0px !important;
+  padding: 0px !important;
+  font-weight: 600 !important;
+  text-transform: none !important;
+  box-shadow: 0 0 0 var(--shadow-primary) !important;
+  transition: all 0.3s ease !important;
+}
+button:hover, .MuiButton-root:hover {
+  transform: translateY(-2px) !important;
+  box-shadow: 0 8px 24px var(--shadow-glow) !important;
+}
+button[data-sidebar="rail"]:hover {
+  transform: translateY(-2px) !important;
+  box-shadow: 0 2px 26px var(--shadow-glow) !important;
+}
+
+/* Starters - Style des cartes de démarrage */
+.starter {
+  background: var(--bg-card) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: 16px !important;
+  padding: 20px !important;
+  cursor: pointer !important;
+  transition: all 0.3s ease !important;
+  position: relative !important;
+  overflow: hidden !important;
+}
+
+.starter::before {
+  content: '' !important;
+  position: absolute !important;
+  top: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  height: 4px !important;
+  background: linear-gradient(90deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
+  transform: scaleX(0) !important;
+  transition: transform 0.3s ease !important;
+}
+
+.starter:hover::before {
+  transform: scaleX(1) !important;
+}
+
+.starter:hover {
+  background-color: var(--bg-card-hover) !important;
+  border-color: var(--primary-violet) !important;
+  transform: translateY(-4px) scale(1.02) !important;
+  box-shadow: 0 12px 32px var(--shadow-primary) !important;
+}
+
+/* Icônes des starters */
+.starter svg, .starter img {
+  width: 48px !important;
+  height: 48px !important;
+  margin-bottom: 12px !important;
+  filter: drop-shadow(0 4px 8px var(--shadow-primary)) !important;
+}
+
+/* Input de message */
+.MuiTextField-root, textarea, input {
+  background-color: var(--bg-card) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: 12px !important;
+  color: var(--text-primary) !important;
+  padding: 12px !important;
+}
+
+.MuiTextField-root:focus, textarea:focus, input:focus {
+  border-color: var(--primary-violet) !important;
+  box-shadow: 0 0 0 3px var(--shadow-primary) !important;
+  outline: none !important;
+}
+
+/* Steps (Chain of Thought) */
+.step-header {
+  background: linear-gradient(90deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
+  -webkit-background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+  background-clip: text !important;
+  font-weight: 700 !important;
+  font-size: 1.1rem !important;
+  margin-bottom: 8px !important;
+}
+
+/* Badges et tags */
+.MuiChip-root {
+  background: linear-gradient(135deg, var(--primary-violet-light) 0%, var(--primary-violet) 100%) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  font-weight: 600 !important;
+}
+
+/* Scrollbar personnalisée */
+::-webkit-scrollbar {
+  width: 2px !important;
+  /*height: 10px !important;*/
+}
+
+::-webkit-scrollbar-track {
+  width: 2px !important;
+  background: var(--bg-dark) !important;
+  /*border-radius: 10px !important;*/
+}
+
+::-webkit-scrollbar-thumb {
+  width: 2px !important;
+  background: linear-gradient(180deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
+  /*border-radius: 10px !important;*/
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--primary-violet-light) !important;
+}
+
+/* Headers */
+h1,h2, h3, h4, h5, h6 {
+  font-size:90%!important;color: var(--text-primary) !important;
+  font-weight: 700 !important;
+}
+/*
+h1 {
+  background: linear-gradient(135deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
+  -webkit-background-clip: text !important;
+  -webkit-text-fill-color: transparent !important;
+  background-clip: text !important;
+}
+*/
+/* Liens */
+a {
+  color: var(--primary-violet-light) !important;
+  text-decoration: none !important;
+  transition: all 0.3s ease !important;
+}
+
+a:hover {
+  color: var(--accent-pink) !important;
+  text-decoration: underline !important;
+}
+
+/* Code blocks */
+pre, code {
+  background-color: rgba(15, 15, 35, 0.8) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: 8px !important;
+  color: var(--primary-violet-light) !important;
+  padding: 12px !important;
+  font-family: 'Fira Code', 'Courier New', monospace !important;
+}
+
+/* Citations */
+blockquote {
+  border-left: 4px solid var(--primary-violet) !important;
+  background-color: var(--bg-card) !important;
+  padding: 16px !important;
+  margin: 16px 0 !important;
+  border-radius: 0 8px 8px 0 !important;
+}
+
+/* Messages utilisateur */
+.user-message {
+  background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%) !important;
+  border: 1px solid var(--primary-violet) !important;
+  border-radius: 16px 16px 4px 16px !important;
+  padding: 16px !important;
+  margin-bottom: 16px !important;
+}
+
+/* Messages assistant */
+.assistant-message {
+  background-color: var(--bg-card) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: 16px 16px 16px 4px !important;
+  padding: 16px !important;
+  margin-bottom: 16px !important;
+}
+
+/* Loader animé */
+.loader {
+  border: 3px solid var(--bg-card) !important;
+  border-top: 3px solid var(--primary-violet) !important;
+  border-radius: 50% !important;
+  animation: spin 1s linear infinite !important;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Effet de glow sur les éléments importants */
+.glow-effect {
+  box-shadow: 0 0 20px var(--shadow-glow) !important;
+  animation: pulse-glow 2s ease-in-out infinite !important;
+}
+
+@keyframes pulse-glow {
+  0%, 100% {
+    box-shadow: 0 0 20px var(--shadow-glow);
+  }
+  50% {
+    box-shadow: 0 0 30px var(--shadow-glow);
+  }
+}
+
+/* Sidebar */
+.sidebar {
+  background-color: var(--bg-card) !important;
+  border-right: 1px solid var(--border-color) !important;
+}
+
+/* Tooltips */
+.MuiTooltip-tooltip {
+  background-color: var(--bg-card) !important;
+  border: 1px solid var(--primary-violet) !important;
+  color: var(--text-primary) !important;
+  font-size: 0.875rem !important;
+  border-radius: 8px !important;
+  box-shadow: 0 4px 16px var(--shadow-primary) !important;
+}
+
+/* Avatar */
+.avatar {
+  border: 2px solid var(--primary-violet) !important;
+  box-shadow: 0 4px 12px var(--shadow-primary) !important;
+}
+
+/* Tables */
+table {
+  border-collapse: separate !important;
+  border-spacing: 0 8px !important;
+}
+
+th {
+  background: linear-gradient(135deg, var(--primary-violet) 0%, var(--accent-pink) 100%) !important;
+  color: white !important;
+  padding: 12px !important;
+  font-weight: 600 !important;
+  border-radius: 8px 8px 0 0 !important;
+}
+
+td {
+  background-color: var(--bg-card) !important;
+  padding: 12px !important;
+  border: 1px solid var(--border-color) !important;
+  color: var(--text-primary) !important;
+}
+
+tr:hover td {
+  background-color: var(--bg-card-hover) !important;
+}
+
+/* Animations d'entrée */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in-up {
+  animation: fadeInUp 0.5s ease-out !important;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .starter {
+    padding: 16px !important;
+  }
+  
+  button, .MuiButton-root {
+    padding: 10px 20px !important;
+  }
+}
+div#message-composer div:nth-child(2){margin-top:5px}
+button#user-nav-button > span > span{background-color:transparent!important}
+button#readme-button, button#theme-toggle, button#upload-button, div.watermark{display:none!important}