/* Existing Styles... */
:root {
  --bg-color: #f8f9fa; /* Light background similar to a workspace */
  --card-bg: #eaeaea;
  --text-primary: #000000;
  --text-secondary: #666666;
  --accent-green: #2ecc71;
  --border-color: #e0e0e0;
  --font-family: "Inter", sans-serif;
  --card-radius: 20px;
  --app-padding: 20px 40px;
  --glass-bg: rgba(255, 255, 255, 0.7);
  --glass-border: rgba(255, 255, 255, 0.3);
  --shadow-premium: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  background-color: #ffffff;
  color: var(--text-primary);
  height: 100vh;
  margin: 0;
  overflow: hidden; /* Prevent scroll for the "app" feel */
}

/* Main App Container (the "Canvas" from Figma) */
/* Main App Container (the "Canvas" from Figma) */
.app-container {
  padding: var(--app-padding);
  background: #ffffff;
}

.avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #6e8efb, #a777e3); /* Premium gradient */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #fff;
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1; /* Reset line height for better centering */
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-email {
  font-size: 14px;
  color: var(--text-secondary);
}

.logout-btn {
  background: transparent;
  border: 1px solid var(--text-secondary);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.logout-btn:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

.column-title {
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  color: #000;
  margin-bottom: 8px;
}

.text-card {
  background-color: #ffffff;
  border: 3px solid #eaeaea; /* Light thick border as seen in image */
  border-radius: 12px;
  padding: 24px;
  flex: 1; /* Fill height of column */
  font-size: 16px;
  color: #000;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
  transition: all 0.2s ease;

  /* ADDED: Scroll logic */
  max-height: 55vh;
  overflow-y: auto;
}

#changed-text-content {
  min-height: 100%;
  cursor: text;
}

.text-card:hover {
  border-color: #d0d0d0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.highlight-green {
  color: var(--accent-green);
  font-weight: 500;
}

/* Diff Highlighting */
.diff-original {
  color: #ff4d4d; /* Red */
  background-color: #fff0f0;
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 500;
}
.diff-ai {
  color: #2ecc71; /* Green */
  background-color: #f0fff4;
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 500;
}
.diff-changed {
  color: #007bff; /* Blue */
  background-color: #e7f3ff;
  padding: 0 4px;
  border-radius: 4px;
  font-weight: 500;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-weight: 500;
}

.logo-text {
  font-size: 16px;
  color: #555;
}

.confirm-btn {
  background: #ffffff;
  border: 1px solid #000000;
  border-radius: 50px;
  padding: 12px 48px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
}

.confirm-btn:hover {
  background: #000000;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Responsiveness */
/* Responsiveness - Mostly handled by Bootstrap Grid */
/* We can keep specific tweaks if necessary, but removing custom grid overrides */

/* Modal Styles */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at top right, #f8f9fa, #e9ecef),
    url("https://www.transparenttextures.com/patterns/cubes.png");
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
}

.hidden {
  display: none !important;
}

.modal-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-card {
  width: 100%;
  max-width: 420px;
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  padding: 40px;
  box-shadow: var(--shadow-premium);
  display: flex;
  flex-direction: column;
  gap: 24px;
  transform: translateY(0);
  transition: transform 0.3s ease;
}

#auth-modal.hidden .modal-card {
  transform: translateY(20px);
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  font-size: 32px;
  line-height: 1;
  color: #999;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
  padding: 5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.modal-close-btn:hover {
  color: #000;
  background-color: rgba(0, 0, 0, 0.05);
}

.modal-gray-box {
  width: 100%;
  height: 20vh; /* Was 150px fixed */
  background-color: #d9d9d9; /* The big gray box at top */
  border-radius: 4px;
  padding: 20px;
  overflow-y: auto;
  font-size: 16px;
  color: #000;
  line-height: 1.5;
}

.modal-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 0 20px;
}

.input-group {
  display: grid;
  grid-template-columns: 25% 1fr; /* Was 200px fixed */
  align-items: center;
  gap: 20px;
}

.input-group label {
  font-size: 18px;
  font-weight: 400;
  color: #000;
  text-align: right;
}

.input-group select,
.input-group textarea {
  width: 100%;
  padding: 12px;
  background-color: #d9d9d9; /* Gray input background */
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-size: 14px;
  resize: none;
}

.input-group textarea {
  height: 15vh; /* Was 100px */
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.modal-confirm-btn {
  background: #ffffff;
  border: 1px solid #777;
  border-radius: 50px;
  padding: 10px 48px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  color: #000;
}

.modal-confirm-btn:hover {
  background: #000;
  color: #fff;
  border-color: #000;
}

/* Sidebar Styles */
.sidebar-panel {
  width: 380px;
  height: 100vh;
  background-color: #d9d9d9;
  display: flex;
  flex-direction: column;
  padding: 32px;
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.1);
  transform: translateX(-100%);
  animation: slideIn 0.3s forwards;
  overflow-x: hidden; /* Prevent horizontal scroll */
}

@keyframes slideIn {
  to {
    transform: translateX(0);
  }
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 48px;
}

.sidebar-header .avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}

.sidebar-header .user-email {
  font-size: 16px;
  color: #333;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-content {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden; /* Prevent horizontal scroll in content area */
}

.sidebar-footer {
  margin-top: auto;
  padding-top: 24px;
}

#history-btn {
  cursor: pointer;
  transition: opacity 0.2s;
}

#history-btn:hover {
  opacity: 0.7;
}

.history-subtitle {
  font-size: 16px;
  color: #000;
  margin-bottom: 16px;
  font-weight: 500;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.history-item {
  display: flex;
  flex-direction: column; /* Changed to column to match potential multiline text, but image shows row. Sticky to row? Image shows row. */
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 0; /* Removing padding/bg from list items to match clean look in image */
  background: transparent;
}

.history-item.completed .history-text {
  /* No line-through in the image for left side "AI Text", but standard for todo apps. Keeping it or removing based on user preference? 
       User said "check mark near done", didn't specify strikethrough. 
       Re-checking image... The right side "Changed Text" has green highlight. The sidebar itself is just a gray block. 
       I'll keep standard behavior but maybe remove background */
  color: #555;
}

/* Custom Checkbox */
.checkbox-wrapper {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}

.checkbox-wrapper input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.custom-checkbox {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  background-color: transparent;
  border: 1.5px solid #555;
  border-radius: 4px;
  transition: all 0.2s;
}

.checkbox-wrapper input:checked ~ .custom-checkbox {
  background-color: #555;
  border-color: #555;
}

.checkbox-wrapper .custom-checkbox:after {
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  position: absolute;
  content: "";
  display: none;
}

.checkbox-wrapper input:checked ~ .custom-checkbox:after {
  display: block;
}

.history-text {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1; /* Allow it to take up remaining space */
}

.history-item.active {
  background-color: #e0e0e0;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 -12px;
  width: auto;
}

.history-expand-btn {
  padding: 8px 0;
  cursor: pointer;
  color: #888;
  font-size: 13px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.history-expand-btn:hover {
  color: #000;
  transform: translateX(4px);
}

.history-expand-btn::before {
  content: "+";
  font-size: 16px;
  font-weight: bold;
}

/* AUTH MODAL STYLES */
.auth-input {
  width: 100%;
  padding: 12px;
  background-color: #d9d9d9;
  border: none;
  border-radius: 4px;
  margin-bottom: 16px;
  font-family: inherit;
  font-size: 16px;
}

.auth-header {
  text-align: center;
  font-size: 32px;
  font-weight: 600;
  margin-bottom: 8px;
  background: linear-gradient(135deg, #000 0%, #444 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

.auth-subtitle {
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
}

/* Bypass Google Button Height Limits */
.g_id_signin {
  transform: scale(1.15);
  transform-origin: center;
  margin: 10px 0;
}

.auth-toggle {
  margin-top: 16px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  text-decoration: underline;
  color: #555;
}
/* Multi-select Rule Styles */
.rule-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
  min-height: 32px;
}

.rule-tag {
  background: #000;
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.rule-tag .remove-btn {
  cursor: pointer;
  font-weight: bold;
  font-size: 16px;
  line-height: 1;
}

.searchable-select-container {
  position: relative;
  width: 100%;
}

.rule-search-input {
  width: 100%;
  padding: 12px;
  background-color: #d9d9d9;
  border: 2px solid transparent;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.rule-search-input:focus {
  border-color: #555;
  outline: none;
}

.rules-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 200px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0 0 8px 8px;
  overflow-y: auto;
  z-index: 1100;
  display: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.rules-dropdown.active {
  display: block;
}

.rule-option {
  padding: 10px 16px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid #f0f0f0;
}

.rule-option:hover {
  background-color: #f5f5f5;
}

.rule-option.selected {
  background-color: #e0e0e0;
  color: #888;
  cursor: default;
}

.rule-option.hidden {
  display: none;
}

/* Admin Panel Styles */
.admin-tab:hover {
  background-color: #dee2e6 !important;
}
.admin-tab.active {
  background-color: #fff !important;
  border-bottom: 2px solid #000 !important;
}

.admin-table tr:hover {
  background-color: #f1f3f5;
}

.admin-table select {
  padding: 2px 4px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
}

.admin-btn-trigger {
  width: 100%;
  padding: 12px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.admin-btn-trigger:hover {
  background: #333;
}

.admin-modal-body::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

/* --- Diff Modal Specific Overrides --- */
#diff-modal .modal-card {
  max-width: 900px; /* Restoring spacious feel */
  width: 95%;
  height: auto;
  max-height: 90vh;
  overflow-y: auto;
  padding: 48px; /* More generous padding */
}

#diff-modal .input-group {
  display: grid;
  grid-template-columns: 180px 1fr; /* Fixed width for labels to prevent squeezing */
  align-items: center;
  gap: 24px;
}

#diff-modal .input-group label {
  text-align: right;
  font-weight: 500;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 0;
  line-height: 1.2;
}

#diff-modal .modal-gray-box {
  font-size: 18px;
  padding: 24px;
  min-height: 200px;
  margin-bottom: 12px;
}

#diff-modal .modal-form {
  padding: 0;
  gap: 32px;
}

.hidden {
  display: none !important;
}