/* SRS Platform Custom Styles */

body {
  scroll-behavior: smooth;
}

.nav-link {
  @apply items-center space-x-1.5 px-3 py-2 rounded-xl text-sm font-medium transition-all duration-200;
  @apply text-gray-500 hover:text-sky-600 hover:bg-sky-50;
}

.nav-link.active {
  @apply text-cyan-700 bg-cyan-100;
}

.card {
  @apply bg-white rounded-2xl shadow-sm border border-gray-100 p-6 transition-all duration-200;
}

.card:hover {
  @apply shadow-md;
}

.btn {
  @apply inline-flex items-center justify-center px-4 py-2 rounded-xl font-medium text-sm transition-all duration-200;
  @apply focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply btn bg-sky-500 text-white hover:bg-sky-600 focus:ring-sky-500;
}

.btn-secondary {
  @apply btn bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-400;
}

.btn-danger {
  @apply btn bg-red-50 text-red-600 hover:bg-red-100 focus:ring-red-400;
}

.input-field {
  @apply w-full px-4 py-2.5 rounded-xl border border-gray-200 text-sm transition-all duration-200;
  @apply focus:outline-none focus:ring-2 focus:ring-sky-500 focus:border-transparent;
  @apply placeholder:text-gray-400;
}

.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-green {
  @apply badge bg-green-100 text-green-700;
}

.badge-yellow {
  @apply badge bg-yellow-100 text-yellow-700;
}

.badge-red {
  @apply badge bg-red-100 text-red-700;
}

.badge-blue {
  @apply badge bg-blue-100 text-blue-700;
}

.badge-purple {
  @apply badge bg-purple-100 text-purple-700;
}

/* Chat styles */
.chat-container {
  height: calc(100vh - 12rem);
  @apply flex flex-col;
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  @apply space-y-4 p-4;
}

.chat-message {
  @apply flex items-start space-x-3 max-w-3xl;
}

.chat-message.user {
  @apply flex-row-reverse space-x-reverse ml-auto;
}

.message-label {
  @apply text-[10px] font-medium mb-0.5;
  color: #94a3b8;
  letter-spacing: 0.02em;
}

.chat-message.user .message-label {
  @apply text-right w-full;
}

.chat-bubble {
  @apply rounded-2xl px-4 py-3 text-sm leading-relaxed;
}

.chat-message.assistant .chat-bubble {
  @apply bg-white border border-gray-200 text-gray-800;
}

.chat-message.user .chat-bubble {
  @apply bg-sky-500 text-white;
}

.chat-input-container {
  @apply bg-white border-t border-gray-100 p-4 rounded-2xl;
}

/* Markdown in chat bubbles */
.chat-bubble p {
  margin: 0;
}
.chat-bubble p + p {
  margin-top: 0.75em;
}
.chat-bubble strong {
  font-weight: 600;
}
.chat-bubble em {
  font-style: italic;
}
.chat-bubble h1, .chat-bubble h2, .chat-bubble h3, .chat-bubble h4 {
  font-weight: 600;
  line-height: 1.3;
  margin-top: 1em;
  margin-bottom: 0.4em;
}
.chat-bubble h1 { font-size: 1.25rem; }
.chat-bubble h2 { font-size: 1.1rem; }
.chat-bubble h3 { font-size: 1rem; }
.chat-bubble h4 { font-size: 0.95rem; }
.chat-bubble ul, .chat-bubble ol {
  padding-left: 1.5em;
  margin: 0.5em 0;
}
.chat-bubble li {
  margin: 0.25em 0;
}
.chat-bubble code {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
  font-size: 0.85em;
  background: #f1f5f9;
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
.chat-bubble pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  overflow-x: auto;
  margin: 0.6em 0;
  font-size: 0.82rem;
  line-height: 1.5;
}
.chat-bubble pre code {
  background: none;
  padding: 0;
  color: inherit;
  font-size: inherit;
}
.chat-bubble blockquote {
  border-left: 3px solid #94a3b8;
  padding-left: 0.75em;
  margin: 0.6em 0;
  color: #64748b;
}
.chat-bubble hr {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 0.8em 0;
}
.chat-bubble a {
  color: #0284c7;
  text-decoration: underline;
}
.chat-bubble a:hover {
  color: #0369a1;
}
.chat-bubble table {
  border-collapse: collapse;
  margin: 0.6em 0;
  font-size: 0.85rem;
  width: 100%;
}
.chat-bubble th, .chat-bubble td {
  border: 1px solid #e2e8f0;
  padding: 0.4em 0.6em;
  text-align: left;
}
.chat-bubble th {
  background: #f8fafc;
  font-weight: 600;
}
.chat-bubble.typing::after {
  content: '|';
  animation: cursorBlink 0.8s step-end infinite;
  color: #94a3b8;
  font-weight: 300;
}
@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.chat-message.user .chat-bubble p + p {
  margin-top: 0.4em;
}
.chat-message.user .chat-bubble code {
  background: rgba(255,255,255,0.2);
}

/* RAG toggle */
.rag-toggle {
  @apply flex items-center space-x-1.5 px-2.5 py-2 rounded-xl text-xs font-medium transition-all duration-200 border cursor-pointer;
}
.rag-toggle.rag-on {
  @apply bg-sky-50 border-sky-300 text-sky-700;
}
.rag-toggle.rag-off {
  @apply bg-gray-100 border-gray-300 text-gray-500;
}
.rag-dot {
  @apply w-2 h-2 rounded-full;
}
.rag-on .rag-dot {
  @apply bg-sky-500;
}
.rag-off .rag-dot {
  @apply bg-gray-400;
}
.rag-label {
  @apply font-semibold tracking-wide text-[11px];
}

/* Privacy toggle */
.privacy-toggle {
  @apply flex items-center space-x-1 px-2.5 py-1.5 rounded-xl border transition-all duration-200 cursor-pointer bg-transparent border-none;
}
.privacy-on {
  @apply text-indigo-600 bg-indigo-50;
}
.privacy-off {
  @apply text-red-500 bg-red-50;
}
.privacy-icon {
  width: 16px;
  height: 16px;
}
.privacy-label {
  @apply font-semibold tracking-wide text-[11px];
}

/* Confidential badge */
.confidential-badge {
  @apply flex-shrink-0 text-[11px] cursor-help;
  font-size: 0.65rem;
}

/* Chat sources */
.chat-sources {
  margin-top: 0.4rem;
  margin-left: 2.75rem;
}
.chat-sources-toggle {
  @apply flex items-center space-x-1.5 text-[11px] text-gray-400 hover:text-gray-600 transition-colors cursor-pointer bg-transparent border-none;
}
.chat-sources-toggle svg.rotate-180 {
  transform: rotate(180deg);
}
.chat-sources-list {
  margin-top: 0.4rem;
  @apply space-y-1;
}
.chat-source-item {
  @apply flex items-center space-x-2 px-2.5 py-1.5 rounded-lg bg-white border border-gray-100 text-xs;
}
.chat-source-type {
  @apply text-gray-400 flex-shrink-0 text-[10px];
}
.chat-source-title {
  @apply text-gray-700 flex-1 min-w-0 truncate;
}
.chat-source-score {
  @apply text-gray-400 flex-shrink-0 font-mono text-[10px];
}

/* Chat media gallery */
.chat-media-gallery {
  margin-top: 0.5rem;
  margin-left: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chat-media-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.chat-media-image {
  max-width: 200px;
  max-height: 160px;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  object-fit: cover;
  transition: opacity 0.15s;
}
.chat-media-image:hover {
  opacity: 0.85;
}
.chat-media-video {
  max-width: 320px;
  max-height: 200px;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background: #000;
}
.chat-media-label {
  font-size: 0.7rem;
  color: #9ca3af;
  text-align: center;
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Machine card */
.machine-card {
  @apply bg-white rounded-2xl shadow-sm border border-gray-100 p-5 transition-all duration-200 cursor-pointer;
}

.machine-card:hover {
  @apply shadow-md border-sky-200;
}

.machine-status {
  @apply w-2.5 h-2.5 rounded-full inline-block;
}

.machine-status.online {
  @apply bg-green-500;
}

.machine-status.offline {
  @apply bg-red-400;
}

.machine-status.maintenance {
  @apply bg-yellow-400;
}

/* Component card */
.component-card {
  @apply bg-white rounded-2xl shadow-sm border border-gray-100 p-5 transition-all duration-200 cursor-pointer;
}

.component-card:hover {
  @apply shadow-md border-violet-200;
}

.kg-node.component {
  @apply bg-violet-100 border-violet-300 text-violet-800;
}

/* Knowledge graph */
#kg-visual {
  width: 100%;
  height: 380px;
  border-radius: 0.75rem;
  border: 1px solid #e5e7eb;
  background: #fafbfc;
  position: relative;
  overflow: hidden;
}

.kg-node {
  @apply rounded-xl px-3 py-2 text-xs font-medium border;
}

.kg-node.machine {
  @apply bg-sky-100 border-sky-300 text-sky-800;
}

.kg-node.manual {
  @apply bg-purple-100 border-purple-300 text-purple-800;
}

.kg-node.ticket {
  @apply bg-amber-100 border-amber-300 text-amber-800;
}

.kg-node.resource {
  @apply bg-green-100 border-green-300 text-green-800;
}

.kg-node.software {
  @apply bg-indigo-100 border-indigo-300 text-indigo-800;
}

/* Animations */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.fade-in {
  animation: fadeIn 0.3s ease-out;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.slide-up {
  animation: slideUp 0.4s ease-out;
}

/* Toast */
.toast {
  @apply px-4 py-3 rounded-xl shadow-lg text-sm font-medium;
  animation: slideUp 0.3s ease-out;
}

.toast-success {
  @apply bg-green-600 text-white;
}

.toast-error {
  @apply bg-red-600 text-white;
}

.toast-info {
  @apply bg-sky-600 text-white;
}

.toast-warning {
  @apply bg-amber-600 text-white;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  @apply bg-transparent;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-300 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-400;
}

/* Chat sidebar session list */
.sidebar-item {
  transition: all 0.15s ease;
}

.sidebar-item.active {
  background: #eef2ff;
  border-color: #6366f1;
}

/* Chat input area */
.chat-input-wrapper {
  @apply flex-shrink-0 border-t border-gray-100 bg-white;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}

#chat-input {
  resize: none;
}

/* Chat message improvements */
.chat-message.user .chat-bubble {
  @apply bg-sky-500 text-white shadow-sm;
}

.chat-message.assistant .chat-bubble {
  @apply bg-white border border-gray-200 text-gray-800 shadow-sm;
}

/* Better source list */
.chat-source-item {
  @apply flex items-center space-x-2 px-2.5 py-1.5 rounded-lg bg-white border border-gray-100 text-xs;
  transition: all 0.1s ease;
}

.chat-source-item:hover {
  @apply bg-gray-50 border-gray-200;
}

.chat-source-item.source-clickable {
  cursor: pointer;
  transition: all 0.15s ease;
}

.chat-source-item.source-clickable:hover {
  @apply bg-indigo-50 border-indigo-200;
}

.page-badge {
  @apply inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium;
  background: #eef2ff;
  color: #4338ca;
  flex-shrink: 0;
}

.open-indicator {
  @apply text-[10px] flex-shrink-0;
  color: #a5b4fc;
  margin-left: 1px;
}

.source-clickable:hover .open-indicator {
  color: #6366f1;
}

.chat-confidential-notice {
  margin-top: 0.5rem;
  margin-left: 2.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.7rem;
  color: #6d28d9;
  background: #f5f3ff;
  border: 1px solid #e9d5ff;
  border-radius: 0.5rem;
  line-height: 1.4;
}

.lang-switcher {
  position: relative;
}

#lang-btn {
  cursor: pointer;
}

#lang-dropdown {
  min-width: 120px;
}

#lang-dropdown.hidden {
  display: none;
}

.lang-option {
  cursor: pointer;
  transition: background 0.15s;
}

/* Form section for grouping related fields */
.form-section {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  padding: 1rem;
}
.form-section + .form-section {
  margin-top: 1rem;
}
.form-section-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.75rem;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

/* Slightly more visible input borders */
.input-field {
  border-color: #d1d5db;
}

/* Dashboard section wrappers */
.dashboard-section {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  padding: 1.5rem;
}
.dashboard-section + .dashboard-section {
  margin-top: 1.5rem;
}