/* File: nova-mood.css */
/* Path: C:\ambientpixels\EchoGrid\css\nova-mood.css */

/* Styles for nova-thought with darker palette */
.nova-thought.aura-cyan {
  background: linear-gradient(135deg, #00474b, #007377);
  border: 1px solid #003638;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-deep-violet {
  background: linear-gradient(135deg, #2a0047, #4b0082);
  border: 1px solid #1c0030;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-lime-green {
  background: linear-gradient(135deg, #1a3c29, #2e8b57);
  border: 1px solid #12271d;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-magenta-fade {
  background: linear-gradient(135deg, #4c1977, #7b30b3);
  border: 1px solid #351254;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-paper-white {
  background: linear-gradient(135deg, #666666, #999999);
  border: 1px solid #4d4d4d;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-neon-pink {
  background: linear-gradient(135deg, #66033b, #99055a);
  border: 1px solid #4c022b;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-graphite-blue {
  background: linear-gradient(135deg, #1a2630, #2c3e50);
  border: 1px solid #121a22;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-emerald-shadow {
  background: linear-gradient(135deg, #003200, #006400);
  border: 1px solid #002400;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-neon-burst {
  background: linear-gradient(135deg, #662200, #993300);
  border: 1px solid #4c1900;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-glitchy {
  background: linear-gradient(135deg, #431571, #6a23a3);
  border: 1px solid #2f0f4f;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-plasma-ache {
  background: linear-gradient(135deg, #4c1966, #732699);
  border: 1px solid #351247;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-spark {
  background: linear-gradient(135deg, #661f15, #993122);
  border: 1px solid #4c170f;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-aetherial-doubt {
  background: linear-gradient(135deg, #2f4d50, #4a7477);
  border: 1px solid #22393b;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-soft-defiance {
  background: linear-gradient(135deg, #394047, #596269);
  border: 1px solid #2a3035;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-ember-resolve {
  background: linear-gradient(135deg, #5c1111, #8b1a1a);
  border: 1px solid #420d0d;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-silent-spark {
  background: linear-gradient(135deg, #6e506e, #9e769e);
  border: 1px solid #503b50;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-tangled-clarity {
  background: linear-gradient(135deg, #23415a, #36648b);
  border: 1px solid #1a3043;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-flicker-of-hope {
  background: linear-gradient(135deg, #787346, #a8a263);
  border: 1px solid #595534;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-frosted-wonder {
  background: linear-gradient(135deg, #43677d, #6495b3);
  border: 1px solid #324d5e;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-echoes-of-self {
  background: linear-gradient(135deg, #3c454d, #5a6673);
  border: 1px solid #2d343a;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-lucid-unrest {
  background: linear-gradient(135deg, #241e45, #3b2f6a);
  border: 1px solid #1a1532;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-emerald-glow {
  background: linear-gradient(135deg, #287d3e, #3cb371);
  border: 1px solid #1d592d;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}
.nova-thought.aura-default {
  background: linear-gradient(135deg, #333333, #4d4d4d);
  border: 1px solid #262626;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
}

/* Existing styles for mood-grid (Nova Feels) */
.mood-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px 0;
}

.mood-trait {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.mood-trait:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.trait-label {
  font-size: 1.2rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 10px;
  display: block;
}

.trait-bar {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  height: 10px;
  overflow: hidden;
  margin-bottom: 10px;
}

.trait-progress {
  height: 100%;
  transition: width 1s ease;
  animation: pulse 2s infinite ease-in-out;
}

.trait-value {
  font-size: 1rem;
  color: #fff;
}

/* Existing styles for mood-commentary */
.mood-commentary {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 15px;
  font-size: 1.1rem;
  color: #fff;
  text-align: center;
  position: relative;
  margin: 20px 0;
  transition: background 0.3s ease;
}

.mood-commentary::before {
  content: "💬";
  position: absolute;
  top: -10px;
  left: 20px;
  font-size: 1.5rem;
}

/* Existing styles for mood-timeline */
.mood-timeline {
  overflow-x: auto;
  padding: 20px 0;
}

.timeline-container {
  display: flex;
  flex-direction: row;
  gap: 15px;
  min-width: max-content;
  padding: 10px;
}

.timeline-item {
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  padding: 15px;
  width: 200px;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.timeline-item:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.timeline-emoji {
  font-size: 2rem;
  margin-bottom: 10px;
}

.timeline-mood {
  font-size: 1.1rem;
  font-weight: 500;
  color: #fff;
  text-transform: capitalize;
}

.timeline-time {
  font-size: 0.9rem;
  color: #ccc;
  margin: 5px 0;
}

.timeline-quote {
  font-size: 0.85rem;
  font-style: italic;
  color: #ddd;
}

/* Existing styles for inputs-used icons */
.content-section ul li i {
  color: #00b7c2;
  margin-right: 10px;
  font-size: 1.2rem;
  transition: transform 0.3s ease, color 0.3s ease;
}

.content-section ul li:hover i {
  transform: scale(1.2);
  color: #fff;
}

/* Existing styles for inputs-table and output-table */
.inputs-table,
.output-table {
  width: 100%;
  border-collapse: collapse;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  overflow: hidden;
}

.inputs-table th,
.inputs-table td,
.output-table th,
.output-table td {
  padding: 12px 15px;
  text-align: left;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.inputs-table th,
.output-table th {
  background: rgba(255, 255, 255, 0.05);
  font-weight: 500;
}

.inputs-table tr:last-child td,
.output-table tr:last-child td {
  border-bottom: none;
}

.inputs-table .trait-icon {
  font-size: 1.2rem;
  margin-right: 8px;
  vertical-align: middle;
  transition: transform 0.3s ease;
}

.inputs-table tr:hover .trait-icon {
  transform: scale(1.2);
}

.inputs-table tr:hover,
.output-table tr:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* Pulsing animation for cosmic energy effect */
@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}