/* 
 * Vigthoria LLM Chat Layout Fixes
 * Fixes for desktop and mobile layouts
 * Version: 1.0.0
 */

/* ===== Desktop Layout Fixes ===== */

/* Make sure the dashboard content fits properly */
.dashboard-content {
  max-width: 100vw;
  width: 100%;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: 280px 1fr;
}

/* Fix sidebar width */
.dashboard-sidebar {
  width: 280px;
  max-width: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Ensure NEURAL CONNECTION section buttons are fully visible */
.sidebar-section {
  width: 100%;
  max-width: 100%;
  padding: 1rem;
  box-sizing: border-box;
}

.sidebar-section button {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Fix NEURAL CONNECTION section layout */
.connection-buttons {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  width: 100%;
  margin: 0.5rem 0;
}

.connection-buttons button {
  flex: 1;
  max-width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.85rem;
  padding: 0.5rem;
}

/* Ensure chat container is properly positioned and sized */
.chat-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100vh - 170px); /* Account for header and dashboard panel */
  position: relative;
}

/* Fix chat messages container */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 150px); /* Allow space for chat form */
  min-height: 200px;
}

/* Put template buttons in one line */
.templates-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 0.5rem;
}

.panel-row .templates {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.templates label {
  white-space: nowrap;
}

.templates select {
  flex: 1;
}

/* Put export buttons in one row */
.export-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  width: 100%;
}

.export-buttons button {
  flex: 0 1 auto;
  white-space: nowrap;
  font-size: 0.9rem;
  padding: 0.5rem 0.75rem;
}

/* Fix chat form */
.chat-form {
  position: absolute; 
  bottom: 0;
  width: 100%;
  padding: 1rem;
  background-color: var(--bg-secondary);
  border-top: 1px solid var(--border-primary);
}

/* Fix input container and textarea */
.input-container {
  display: flex;
  position: relative;
  width: 100%;
  margin-bottom: 0.5rem;
}

.chat-input {
  width: 100%;
  min-height: 60px;
  max-height: 150px;
  resize: none;
  padding-right: 40px; /* Room for the send icon */
}

.send-icon-button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-accent);
  cursor: pointer;
  font-size: 1.25rem;
}

/* Arrange chat buttons in one horizontal line */
.chat-buttons {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
}

.chat-buttons button {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9rem;
  padding: 0.5rem;
  height: 40px; /* Fixed height for consistency */
}

/* Improved status badges layout */
.status-badge-group {
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 1px solid rgba(0, 242, 255, 0.2);
  border-radius: 4px;
  padding: 0.5rem;
  background-color: rgba(0, 0, 0, 0.2);
  margin-top: 0.5rem;
}

.badge-labels, .badge-values {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.badge-labels {
  margin-bottom: 0.25rem;
  border-bottom: 1px solid rgba(0, 242, 255, 0.1);
  padding-bottom: 0.25rem;
}

.badge-label {
  font-weight: bold;
  color: rgba(0, 242, 255, 0.8);
}

.badge-value {
  font-weight: normal;
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

/* Make existing status badges hidden since we're replacing them */
.status-badge {
  display: none;
}

/* Light mode styles for status badge group */
[data-theme="light"] .status-badge-group {
  background-color: rgba(240, 240, 240, 0.8);
  border-color: rgba(0, 120, 212, 0.3);
}

[data-theme="light"] .badge-labels {
  border-bottom: 1px solid rgba(0, 120, 212, 0.2);
}

[data-theme="light"] .badge-label {
  color: rgba(0, 120, 212, 0.9);
}

[data-theme="light"] .badge-value {
  color: rgba(30, 30, 30, 0.9);
}

/* Light mode general theming overrides */
[data-theme="light"] .connection-buttons button {
  background-color: rgba(0, 120, 212, 0.1);
  border-color: rgba(0, 120, 212, 0.4);
  color: rgba(0, 90, 170, 0.9);
}

[data-theme="light"] .connection-buttons button:hover {
  background-color: rgba(0, 120, 212, 0.2);
  border-color: rgba(0, 120, 212, 0.6);
}

/* Welcome message styling */
.welcome-message {
  text-align: center;
  padding: 20px 15px;
  margin: 20px auto;
  max-width: 90%;
  width: 600px;
  color: var(--text-primary, rgba(255, 255, 255, 0.8));
  background-color: rgba(0, 10, 30, 0.3);
  border-radius: 10px;
  border: 1px solid rgba(0, 242, 255, 0.2);
  box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
  animation: fadeIn 0.5s ease-in;
}

/* Light mode styling for welcome message */
[data-theme="light"] .welcome-message {
  background-color: rgba(240, 245, 255, 0.7);
  border: 1px solid rgba(0, 120, 212, 0.3);
  box-shadow: 0 0 20px rgba(0, 120, 212, 0.1);
  color: var(--text-primary, #333);
}

.welcome-title {
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 15px;
  font-family: 'Orbitron', sans-serif;
  color: var(--primary-color, #00f0ff);
}

[data-theme="light"] .welcome-title {
  color: var(--primary-color, #0078d4);
}

.welcome-subtitle {
  font-size: 16px;
  margin-bottom: 20px;
  opacity: 0.9;
}

.welcome-instructions {
  text-align: left;
  margin: 15px 0;
  line-height: 1.5;
  font-size: 14px;
}

.welcome-footer {
  margin-top: 20px;
  font-style: italic;
  opacity: 0.7;
}

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

/* Mobile welcome message adjustments */
@media screen and (max-width: 480px) {
  .welcome-message {
    padding: 15px 10px;
    margin: 10px auto;
    width: 95%;
  }
  
  .welcome-title {
    font-size: 18px;
  }
  
  .welcome-subtitle {
    font-size: 14px;
  }
  
  .welcome-instructions {
    font-size: 13px;
  }
}

/* ===== Mobile Layout Fixes ===== */

@media screen and (max-width: 768px) {
  /* Fix header layout on small screens */
  .dashboard-header {
    padding: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  .header-title {
    font-size: 1rem;
  }
  
  .header-button {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
  }
  
  /* Hide less important elements */
  .connection-status,
  .version-badge {
    display: none;
  }
  
  /* Fix mobile panel layout */
  #mobile-container {
    height: calc(100vh - 110px); /* Account for header and nav */
  }
  
  /* Fix mobile chat container */
  #mobile-chat-panel .chat-container {
    height: 100%;
    padding: 0;
  }
  
  #mobile-chat-panel .chat-messages {
    height: calc(100% - 120px);
  }
  
  #mobile-chat-panel .chat-form {
    position: absolute;
    bottom: 0;
    padding: 0.75rem;
  }
  
  /* Make sure buttons are big enough for touch */
  .chat-buttons button,
  .panel-tab {
    min-height: 44px;
  }
}

/* Small screens (phone) */
@media screen and (max-width: 480px) {
  .header-button span {
    display: none; /* Hide text, show only icons */
  }
  
  .chat-form {
    padding: 0.5rem;
  }
  
  .chat-buttons {
    flex-wrap: nowrap; /* Keep buttons in one row */
    gap: 0.35rem; /* Smaller gap for small screens */
  }
  
  .chat-buttons button {
    flex: 1;
    min-width: 0; /* Allow shrinking below content width */
    padding: 0.5rem 0.25rem; /* Less horizontal padding */
    font-size: 0.7rem; /* Smaller font */
    height: 38px; /* Slightly smaller height for mobile */
  }
  
  /* Improve mobile chat input */
  .chat-input {
    min-height: 44px;
    font-size: 14px;
    padding: 8px 36px 8px 8px;
  }
  
  .send-icon-button {
    right: 8px;
    font-size: 18px;
  }
  
  /* Make sure mobile panels are visible */
  #mobile-container {
    display: block !important;
  }
    /* Ensure desktop containers are hidden on mobile */
  .dashboard-sidebar,
  .dashboard-main {
    display: none !important;
  }
  
  /* Enhance mobile navigation tabs for better visibility */
  .mobile-navigation {
    padding: 5px 0;
    background-color: rgba(0, 0, 20, 0.85);
    border-top: 1px solid var(--border-primary, rgba(0, 242, 255, 0.3));
  }
  
  .panel-tab {
    padding: 8px 0;
  }
  
  .panel-tab-icon {
    font-size: 16px;
    margin-bottom: 4px;
  }
  
  .panel-tab-label {
    font-size: 12px;
  }
  
  /* Make mobile panel content take full height */
  .mobile-panel .panel-content {
    height: calc(100% - 45px); /* Account for panel header */
  }
  
  /* Improve visibility of mobile chat panel */
  #mobile-chat-panel {
    overflow: hidden;
  }
  
  #mobile-chat-panel .panel-content {
    overflow: hidden;
    position: relative;
  }
}

/* Fix for admin portal link on login page */
.login-card .card-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.login-card .card-footer p {
  margin: 0.25rem 0;
}

.admin-portal-link {
  color: var(--text-accent);
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.admin-portal-link:hover {
  opacity: 1;
  text-decoration: underline;
}