/* Base styles */
body {
    font-family: 'Vazirmatn', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f7fa;
    direction: rtl;
    text-align: right;
}

/* Editor styles */
#editor {
    padding: 20px;
    border: 1px solid #ced4da;
    border-radius: 4px;
    font-family: 'Vazirmatn', 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.8;
    background-color: #fff;
    direction: rtl;
    text-align: right;
}

#editor:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* RTL specific styles */
.btn {
    margin-left: 0;
    margin-right: 0;
}

.card-header {
    text-align: right;
}

/* Highlighting styles */
.highlighted-clause {
    background-color: rgba(255, 192, 105, 0.4);
    border-radius: 2px;
    padding: 2px 0;
    position: relative;
    display: inline;
    box-shadow: 0 0 3px rgba(255, 100, 0, 0.4);
    border-bottom: 1px dashed #ff8c00;
}

.active-highlight {
    background-color: rgba(255, 130, 47, 0.6);
    border-radius: 2px;
    padding: 2px 0;
    font-weight: 500;
    box-shadow: 0 0 5px rgba(255, 100, 0, 0.6);
    border-bottom: 2px solid #ff6600;
}

/* Styles for corrected clauses */
.corrected-clause {
    background-color: rgba(40, 167, 69, 0.3);
    border-radius: 2px;
    padding: 2px 0;
    position: relative;
    display: inline;
    box-shadow: 0 0 3px rgba(40, 167, 69, 0.4);
    border-bottom: 1px dashed #28a745;
}

.active-corrected {
    background-color: rgba(40, 167, 69, 0.6);
    border-radius: 2px;
    padding: 2px 0;
    font-weight: 500;
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.6);
    border-bottom: 2px solid #28a745;
}

/* Special highlight for signature mismatches */
.highlighted-clause[data-issue-type="signature"] {
    background-color: rgba(255, 70, 70, 0.3);
    border-bottom: 1px dashed #ff0000;
}

.active-highlight[data-issue-type="signature"] {
    background-color: rgba(255, 70, 70, 0.5);
    border-bottom: 2px solid #ff0000;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5);
}

/* Corrected signature clauses */
.corrected-clause[data-issue-type="signature"] {
    background-color: rgba(40, 167, 69, 0.3);
    border-bottom: 1px dashed #28a745;
}

.active-corrected[data-issue-type="signature"] {
    background-color: rgba(40, 167, 69, 0.6);
    border-bottom: 2px solid #28a745;
    box-shadow: 0 0 5px rgba(40, 167, 69, 0.5);
}

/* Temporary highlight when direct highlighting fails */
.temporary-highlight {
    background-color: rgba(255, 130, 47, 0.5);
    border: 2px solid #ff6600;
    border-radius: 4px;
    padding: 10px;
    margin: 10px 0;
    animation: pulse 1.5s infinite alternate;
}

@keyframes pulse {
    0% { background-color: rgba(255, 130, 47, 0.5); }
    100% { background-color: rgba(255, 130, 47, 0.8); }
}

/* Issue list styles */
.issue-item {
    cursor: pointer;
    padding: 12px;
    border-right: 3px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    transition: all 0.2s ease-in-out;
    margin-bottom: 5px;
    border-radius: 4px;
}

.issue-item:hover {
    background-color: #f0f7ff;
    transform: translateX(-3px);
}

.issue-item.active {
    background-color: #e2f0ff;
    border-right: 4px solid #0d6efd;
}

/* Style for signature mismatch issues */
.issue-item[data-issue-type="signature"] {
    border-right-color: #dc3545;
}

.issue-item[data-issue-type="signature"].active {
    border-right-color: #dc3545;
    background-color: #fff0f0;
}

/* Style for corrected issues in list */
.list-group-item.bg-light .issue-item {
    opacity: 0.85;
}

.list-group-item.bg-light .issue-item:hover {
    opacity: 1;
}

.issue-rule {
    font-size: 0.8rem;
    color: #dc3545;
    font-weight: 500;
    margin-top: 5px;
}

.issue-explanation {
    font-size: 0.9rem;
    color: #495057;
    margin-top: 5px;
    line-height: 1.5;
}

/* Raw response styles */
.raw-response-container {
    max-height: 400px;
    overflow-y: auto;
    padding: 10px;
    background-color: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #dee2e6;
    direction: ltr;
}

.raw-response-container pre {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
    padding: 10px;
    text-align: left;
    color: #333;
}

.diff {
    overflow-x: hidden;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.diff-added {
    background-color: #e6ffe6;
    color: green;
}

.diff-removed {
    background-color: #ffe6e6;
    color: red;
    text-decoration: line-through;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Add styles for model selection */
.model-selector {
    display: flex;
    align-items: center;
    margin-right: 1rem;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 5px 10px;
    border-radius: 4px;
}

.model-selector select {
    min-width: 150px;
}

.model-badge {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.model-badge .badge {
    font-size: 0.9rem;
    padding: 5px 10px;
}

/* Highlight change animation */
@keyframes highlightBackground {
    0% { background-color: transparent; }
    50% { background-color: rgba(40, 167, 69, 0.2); }
    100% { background-color: transparent; }
}

.highlight-change {
    animation: highlightBackground 1s ease;
}

/* Feedback section styles */
#feedback-section {
    border-top: 1px solid #dee2e6;
    padding-top: 15px;
    margin-top: 20px;
}

.feedback-controls .btn {
    transition: all 0.2s ease;
}

.feedback-controls .btn.active.btn-outline-success {
    background-color: #28a745;
    color: white;
}

.feedback-controls .btn.active.btn-outline-danger {
    background-color: #dc3545;
    color: white;
}

#send-feedback {
    transition: all 0.3s ease;
}

#send-feedback.success {
    background-color: #28a745;
    border-color: #28a745;
}

#send-feedback.error {
    background-color: #dc3545;
    border-color: #dc3545;
}

/* Individual violation feedback */
.issue-feedback {
    border-top: 1px dashed #dee2e6;
    padding-top: 10px;
    margin-top: 10px;
}

/* Add a subtle animation when feedback is submitted */
@keyframes feedback-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

.feedback-submitted {
    animation: feedback-pulse 1s ease;
}

.form-check-input {
    width: 1.2em;
    height: 1.2em;
    border: 2px solid #333;
    background-color: white;
}
.form-check-input:checked {
    background-color: #0d6efd; /* Bootstrap primary */
    border-color: #0d6efd;
}

#extra-text:disabled {
    background-color: #f8f9fa; /* Light grey */
    border: 1px solid #ced4da;
    color: #6c757d;
    cursor: not-allowed;
}

#extra-text:not(:disabled) {
    background-color: #ffffff;
    border: 2px solid #343a40; /* Dark border */
    color: #212529;
}

#extra-text {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Chat Panel Styles */
.chat-container {
    height: 400px;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    background-color: #f8f9fa;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message {
    display: flex;
    flex-direction: column;
    max-width: 80%;
    animation: messageSlideIn 0.3s ease;
}

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

.user-message {
    align-self: flex-end;
    align-items: flex-end;
}

.assistant-message {
    align-self: flex-start;
    align-items: flex-start;
}

.message-content {
    padding: 0.75rem 1rem;
    border-radius: 18px;
    word-wrap: break-word;
    white-space: pre-wrap;
    line-height: 1.4;
}

.user-message .message-content {
    background-color: #007bff;
    color: white;
    margin-left: 0.5rem;
}

.assistant-message .message-content {
    background-color: white;
    color: #333;
    border: 1px solid #dee2e6;
    margin-right: 0.5rem;
}

.message-time {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
    direction: ltr;
    text-align: left;
}

.user-message .message-time {
    text-align: right;
    direction: rtl;
}

/* Streaming message indicator */
.message.streaming .message-content::after {
    content: "▊";
    animation: blink 1s infinite;
    color: #007bff;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Typing indicator */
.typing-indicator {
    padding: 0 1rem;
}

.typing-dots {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

.typing-dots span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #6c757d;
    animation: typing 1.4s infinite ease-in-out;
}

.typing-dots span:nth-child(1) { animation-delay: 0s; }
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
    0%, 60%, 100% {
        transform: translateY(0);
        opacity: 0.4;
    }
    30% {
        transform: translateY(-10px);
        opacity: 1;
    }
}

/* Chat input */
.chat-input-container {
    padding: 1rem;
    background-color: white;
    border-top: 1px solid #dee2e6;
}

.chat-input-container .input-group {
    margin-bottom: 0;
}

#chat-input {
    border-radius: 25px;
    border: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
    resize: none;
    direction: rtl;
    text-align: right;
}

#chat-input:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

#send-chat-btn {
    border-radius: 50%;
    width: 45px;
    height: 45px;
    margin-right: 0.5rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#send-chat-btn:hover:not(:disabled) {
    transform: scale(1.05);
}

#send-chat-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Chat status */
.chat-status {
    text-align: center;
}

.chat-status small {
    font-size: 0.8rem;
}

/* Welcome message */
.welcome-message .message-content {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
}

/* Disabled chat tab
.nav-link[href="#chat-panel"].disabled {
    opacity: 0.5;
    pointer-events: none;
} */

/* Chat header */
.chat-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.chat-header h5 {
    color: #495057;
    font-weight: 600;
}

.chat-header p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* Responsive design */
@media (max-width: 768px) {
    .chat-container {
        height: 300px;
    }
    
    .message {
        max-width: 90%;
    }
    
    .message-content {
        padding: 0.6rem 0.8rem;
        font-size: 0.9rem;
    }
    
    #chat-input {
        font-size: 16px; /* Prevent zoom on iOS */
    }
}

/* Scrollbar styling for chat */
.chat-messages::-webkit-scrollbar {
    width: 6px;
}

.chat-messages::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 10px;
}

.chat-messages::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Error messages in chat */
.message.error .message-content {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* Comparison Panel Styles */
#diff-output {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
    max-height: 500px;
    overflow-y: auto;
    font-family: 'Vazirmatn', 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap; /* This preserves whitespace and line breaks */
    word-wrap: break-word;
    direction: rtl;
    text-align: right;
}

/* Diff styling with better spacing */
.diff {
    white-space: pre-wrap; /* Preserve whitespace and line breaks */
    word-wrap: break-word;
    font-family: inherit;
    line-height: 1.6;
}

.diff-added {
    background-color: #d4edda;
    color: #155724;
    border-radius: 2px;
    padding: 1px 2px;
    white-space: pre-wrap; /* Preserve whitespace */
}

.diff-removed {
    background-color: #f8d7da;
    color: #721c24;
    text-decoration: line-through;
    border-radius: 2px;
    padding: 1px 2px;
    white-space: pre-wrap; /* Preserve whitespace */
}

.diff-unchanged {
    white-space: pre-wrap; /* Preserve whitespace */
}

/* Comparison container styling */
.comparison-container {
    background-color: white;
    border-radius: 8px;
    padding: 1rem;
}

.comparison-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.comparison-controls {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 1rem;
}

/* Comparison status */
#comparison-status {
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

/* Better scrollbar for comparison output */
#diff-output::-webkit-scrollbar {
    width: 8px;
}

#diff-output::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#diff-output::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

#diff-output::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Loading state for comparison */
.comparison-loading {
    text-align: center;
    padding: 2rem;
    color: #6c757d;
}

.comparison-loading .spinner-border {
    width: 2rem;
    height: 2rem;
}

/* Empty comparison state */
.comparison-empty {
    text-align: center;
    padding: 3rem;
    color: #6c757d;
}

.comparison-empty i {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

/* Comparison metadata */
.comparison-metadata {
    background-color: #e9ecef;
    border-radius: 4px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.comparison-metadata .row > div {
    padding: 0.25rem 0;
}

/* Better responsive design for comparison */
@media (max-width: 768px) {
    #diff-output {
        font-size: 12px;
        padding: 0.75rem;
        max-height: 300px;
    }
    
    .comparison-controls .row {
        gap: 0.5rem;
    }
    
    .comparison-controls .col-md-5 {
        width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .comparison-controls .col-md-2 {
        display: none; /* Hide the arrow on mobile */
    }
}

/* Contract Generation Panel Styles */
.generation-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
}

.generation-header h5 {
    color: #495057;
    font-weight: 600;
}

.templates-info {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
}

.templates-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.template-category {
    background: white;
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid #e9ecef;
}

.category-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.category-description {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
}

.templates-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.template-item {
    background: #f8f9fa;
    border-radius: 4px;
    padding: 0.75rem;
    border-left: 3px solid #007bff;
}

.template-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.template-name {
    font-weight: 500;
    color: #495057;
    margin-bottom: 0;
}

.remove-template-btn {
    opacity: 0.7;
    transition: all 0.3s ease;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 4px;
}

.remove-template-btn:hover {
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
}

.template-item:hover .remove-template-btn {
    opacity: 1;
}

.template-description {
    font-size: 0.85rem;
    color: #6c757d;
}

.template-file {
    font-size: 0.75rem;
    color: #6c757d;
    margin-top: 0.25rem;
    font-style: italic;
}

.user-requirements {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
}

.requirements-form textarea {
    direction: rtl;
    text-align: right;
    font-family: 'Vazirmatn', sans-serif;
    line-height: 1.6;
}

.requirements-form textarea:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
}

.generation-controls {
    text-align: center;
}

#generate-contract-btn {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
    padding: 0.75rem 2rem;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

#generate-contract-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
}

#generate-contract-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.generation-status {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 1rem;
}

.progress {
    height: 8px;
    border-radius: 4px;
}

.generation-results {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
}

.matched-templates .list-group-item {
    border: none;
    background: #f8f9fa;
    margin-bottom: 0.5rem;
    border-radius: 4px;
    padding: 0.75rem;
    border-left: 3px solid #28a745;
}

.requirements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.req-item {
    background: #f8f9fa;
    padding: 0.75rem;
    border-radius: 4px;
    border-left: 3px solid #17a2b8;
}

.generated-contract textarea {
    direction: rtl;
    text-align: right;
    font-family: 'Vazirmatn', monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    background: #f8f9fa;
    border: 2px solid #dee2e6;
}

.contract-actions {
    display: flex;
    gap: 0.5rem;
}

.contract-actions .btn {
    white-space: nowrap;
}

/* Responsive design */
@media (max-width: 768px) {
    .templates-grid {
        gap: 0.75rem;
    }
    
    .template-category {
        padding: 0.75rem;
    }
    
    .user-requirements {
        padding: 0.75rem;
    }
    
    .generation-results {
        padding: 1rem;
    }
    
    .requirements-grid {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .contract-actions {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .contract-actions .btn {
        width: 100%;
    }
}

/* Animation effects */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.generation-results {
    animation: slideInUp 0.5s ease;
}

.template-item:hover {
    background: #e9ecef;
    transform: translateX(-2px);
    transition: all 0.2s ease;
}

/* Contract Generation Modal Styles */
#contractGenerationModal .modal-dialog {
    max-width: 90vw;
    width: 1200px;
}

#contractGenerationModal .modal-body {
    max-height: 80vh;
    overflow-y: auto;
    padding: 2rem;
}

#generate-contract-modal-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    transition: all 0.3s ease;
}

#generate-contract-modal-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
}

@media (max-width: 768px) {
    #contractGenerationModal .modal-dialog {
        max-width: 95vw;
        margin: 0.5rem;
    }
}

/* Empty State Button Styling */
.empty-state .btn {
    min-width: 200px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.empty-state .btn-success {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.2);
}

.empty-state .btn-success:hover {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.empty-state .btn-primary {
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2);
}

.empty-state .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* Responsive empty state buttons */
@media (max-width: 576px) {
    .empty-state .btn {
        min-width: 100%;
        margin-bottom: 0.5rem;
    }
    
    .empty-state .d-flex {
        flex-direction: column !important;
    }
}

/* Empty state text update */
.empty-state p {
    max-width: 400px;
    margin: 0 auto 1.5rem auto;
    line-height: 1.5;
}

/* Templates Toggle Button Styling */
#toggle-templates-btn {
    transition: all 0.3s ease;
    border-radius: 20px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

#toggle-templates-btn:hover {
    transform: translateY(-1px);
}

#toggle-templates-btn.btn-outline-secondary {
    color: #6c757d;
    border-color: #6c757d;
}

#toggle-templates-btn.btn-outline-secondary:hover {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

#toggle-templates-btn.btn-outline-primary {
    color: #007bff;
    border-color: #007bff;
}

#toggle-templates-btn.btn-outline-primary:hover {
    background-color: #007bff;
    border-color: #007bff;
    color: white;
}

/* Templates container transition */
.templates-grid-container {
    transition: all 0.3s ease;
    overflow: hidden;
}

/* Templates info section styling */
#contractGenerationModal .templates-info {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
}

#contractGenerationModal .templates-info h6 {
    color: #495057;
    font-weight: 600;
}

/* Smooth collapse animation */
.templates-grid-container[style*="display: none"] {
    animation: slideUp 0.3s ease;
}

.templates-grid-container[style*="display: block"] {
    animation: slideDown 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 1;
        max-height: 400px;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 400px;
        transform: translateY(0);
    }
}

/* Icon rotation animation */
#toggle-templates-btn i {
    transition: transform 0.3s ease;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #toggle-templates-btn {
        font-size: 0.8rem;
        padding: 0.25rem 0.5rem;
    }
    
    #toggle-templates-btn .toggle-text {
        display: none;
    }
    
    #toggle-templates-btn i {
        margin: 0 !important;
    }
}

/* Header flex layout */
#contractGenerationModal .templates-info .d-flex {
    align-items: center;
    gap: 1rem;
}

/* Better spacing for templates info */
#contractGenerationModal .templates-info {
    margin-bottom: 1.5rem;
}

#contractGenerationModal .templates-info:has(.templates-grid-container[style*="display: none"]) {
    margin-bottom: 1rem;
}

/* Upload Sample Contract Section Styles */
.upload-sample-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.upload-sample-section h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 0;
}

#upload-sample-contract-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    color: white;
    transition: all 0.3s ease;
    border-radius: 20px;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
}

#upload-sample-contract-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40, 167, 69, 0.3);
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
}

#upload-status {
    border-radius: 6px;
    padding: 0.75rem;
    margin-top: 0.5rem;
}

#upload-status .review-results h6 {
    color: #495057;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

#upload-status .review-results .small {
    line-height: 1.4;
}

#upload-status .review-results .small > div {
    margin-bottom: 0.25rem;
}

/* Animation for upload status */
#upload-status {
    animation: slideInUp 0.3s ease;
}

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

/* Responsive design for upload section */
@media (max-width: 768px) {
    .upload-sample-section {
        padding: 0.75rem;
    }
    
    .upload-sample-section .d-flex {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    #upload-sample-contract-btn {
        align-self: flex-start;
    }
}
/* Simple Logo Styling */
.navbar-logo {
    height: 40px;
    width: auto;
    margin-left: 0.5rem;
    vertical-align: middle;
}

@media (max-width: 768px) {
    .navbar-logo {
        height: 40px;
    }
}

/* Animation keyframes for notification messages */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Clause and correction box styling */
.clause-box, .correction-box {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    padding: 12px;
    margin: 8px 0;
    max-height: 150px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-family: 'Vazirmatn', sans-serif;
    font-size: 0.9em;
    direction: rtl;
    text-align: right;
    line-height: 1.6;
}

/* Specific styling for clause box (problematic clause) */
.clause-box {
    background-color: #fff3cd;
    border-color: #ffeeba;
    border-left: 4px solid #ffc107;
}

/* Specific styling for correction box (suggested fix) */
.correction-box {
    background-color: #d4edda;
    border-color: #c3e6cb;
    border-left: 4px solid #28a745;
}

/* Issue rule styling */
.issue-rule {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 4px;
    padding: 8px 12px;
    margin: 5px 0;
    color: #721c24;
    font-size: 0.85rem;
    font-weight: 500;
    border-left: 3px solid #dc3545;
}

/* Issue explanation styling */
.issue-explanation {
    background-color: #e2f3ff;
    border: 1px solid #b6d7ff;
    border-radius: 4px;
    padding: 10px 12px;
    margin: 5px 0;
    color: #0c5460;
    font-size: 0.9rem;
    line-height: 1.5;
    border-left: 3px solid #17a2b8;
}

/* Issue item styling improvements */
.issue-item {
    cursor: pointer;
    padding: 16px;
    border-right: 3px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
    transition: all 0.2s ease-in-out;
    margin-bottom: 8px;
    border-radius: 8px;
    background-color: #ffffff;
}

.issue-item:hover {
    background-color: #f0f7ff;
    transform: translateX(-2px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.issue-item.active {
    background-color: #e7f3ff;
    border-right: 4px solid #0d6efd;
    box-shadow: 0 4px 12px rgba(13,110,253,0.15);
}

/* Issue header styling */
.issue-header {
    border-bottom: 1px solid #dee2e6;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.issue-header h5 {
    color: #495057;
    font-weight: 600;
}

/* Issue text styling */
.issue-text {
    margin-bottom: 12px;
}

.issue-text strong {
    color: #495057;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

/* Correction section styling */
.issue-correction {
    border-top: 1px dashed #dee2e6;
    padding-top: 12px;
}

.issue-correction strong {
    color: #28a745;
    font-weight: 600;
    display: block;
    margin-bottom: 5px;
}

/* Button styling in issue items */
.issue-item .btn-group .btn {
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 4px;
}

.apply-correction-btn {
    background: linear-gradient(45deg, #28a745, #20c997);
    border: none;
    color: white;
    transition: all 0.2s ease;
}

.apply-correction-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(40,167,69,0.3);
}

.apply-correction-btn:disabled {
    opacity: 0.6;
    transform: none;
}

.undo-correction-btn {
    background: linear-gradient(45deg, #dc3545, #e74c3c);
    border: none;
    color: white;
    transition: all 0.2s ease;
}

.undo-correction-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(220,53,69,0.3);
}

/* Corrected badge styling */
.badge.bg-success {
    background: linear-gradient(45deg, #28a745, #20c997) !important;
}

/* Signature issue specific styling */
.issue-item[data-issue-type="signature"] {
    border-right-color: #dc3545;
    background: linear-gradient(to right, #fff5f5, #ffffff);
}

.issue-item[data-issue-type="signature"].active {
    border-right-color: #dc3545;
    background: linear-gradient(to right, #fee, #fff0f0);
}

.issue-item[data-issue-type="signature"] .issue-rule {
    background-color: #f8d7da;
    border-color: #f1aeb5;
    color: #842029;
}

/* Responsive design */
@media (max-width: 768px) {
    .clause-box, .correction-box {
        font-size: 0.8rem;
        padding: 10px;
        max-height: 120px;
    }
    
    .issue-item {
        padding: 12px;
        margin-bottom: 6px;
    }
    
    .issue-rule, .issue-explanation {
        font-size: 0.8rem;
        padding: 8px 10px;
    }
}

/* Animation for newly added issues */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.issue-item {
    animation: slideInRight 0.3s ease-out;
}

/* Scrollbar styling for boxes */
.clause-box::-webkit-scrollbar,
.correction-box::-webkit-scrollbar {
    width: 6px;
}

.clause-box::-webkit-scrollbar-track,
.correction-box::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.clause-box::-webkit-scrollbar-thumb,
.correction-box::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.clause-box::-webkit-scrollbar-thumb:hover,
.correction-box::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
.analysis-progress {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 1rem;
}

.rule-group {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    background: #fff;
}

.rule-group-header {
    background: #f8f9fa !important;
    border: 1px solid #dee2e6;
}

.rule-results {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
}

.progress {
    height: 10px;
}


.contract-line:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.highlighted-line {
    background-color: rgba(255, 193, 7, 0.3);
    border-left: 3px solid #ffc107;
    padding-left: 5px;
}

.highlighted-line.active-highlight {
    background-color: rgba(255, 193, 7, 0.5);
    border-left-color: #ff9800;
}

.editor-instance {
    overflow-y: auto;
    max-height: calc(100vh - 200px);
    position: relative;
    font-family: 'Vazirmatn', monospace;
    line-height: 1.6;
}

.contract-line {
    min-height: 1.5em;
    padding: 2px 8px;
    position: relative;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.6;
}

.contract-line:empty {
    min-height: 1.5em;
}

/* Ensure nbsp is visible */
.contract-line:empty::before {
    content: '\00A0';
}

.contract-line:empty::after {
    content: '\00A0'; /* Non-breaking space for empty lines */
}

.corrected-line {
    background-color: rgba(40, 167, 69, 0.2) !important;
    border-left-color: #28a745 !important;
}

.corrected-line.active-highlight {
    background-color: rgba(40, 167, 69, 0.4) !important;
}
/* Tab container and tab styling */
.tab-container {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 0.5rem 0;
}

.contract-tab {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 6px 6px 0 0;
    padding: 0.5rem 0.75rem;
    margin-left: 2px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 0; /* Allow flex items to shrink */
    max-width: 200px; /* Maximum tab width */
    flex-shrink: 0; /* Prevent tabs from shrinking too much */
}

.contract-tab.active {
    background: #fff;
    border-bottom-color: #fff;
    box-shadow: 0 -2px 4px rgba(0,0,0,0.1);
}

.contract-tab:hover {
    background: #e9ecef;
}

.contract-tab.active:hover {
    background: #fff;
}

/* Tab icon styling */
.tab-icon {
    font-size: 0.8rem;
    margin-left: 0.5rem;
    flex-shrink: 0;
    color: #6c757d;
}

/* Tab title styling - this is the key part */
.tab-title {
    font-size: 0.8rem; /* Smaller font size */
    font-weight: 500;
    margin: 0 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* Allow text to shrink */
    flex: 1; /* Take available space */
    max-width: 120px; /* Maximum width for title text */
}

/* Close button styling */
.close-btn {
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0 0.25rem;
    border-radius: 2px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.close-btn:hover {
    background: #b8f1f1;
}

/* Modified tab indicator for different contract types */
.contract-tab[data-contract-type="reference"] .tab-icon {
    color: #28a745;
}

.contract-tab.modified .tab-title::after {
    content: "•";
    color: #ffc107;
    font-weight: bold;
    margin-right: 0.25rem;
}

/* Rules Management Modal Styles */
#rulesManagementModal .modal-dialog {
    max-width: 90vw;
    width: 1000px;
}

#rulesManagementModal .modal-body {
    max-height: 70vh;
    overflow-y: auto;
}

.upload-rule-section {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
}

.upload-rule-section h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 1rem;
}

.rule-item {
    background: white;
    transition: all 0.2s ease;
    border: 1px solid #dee2e6 !important;
}

.rule-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.rule-info h6 {
    color: #495057;
    font-weight: 600;
}

.rule-actions .btn {
    min-width: 40px;
    transition: all 0.2s ease;
}

.rule-actions .btn:hover {
    transform: translateY(-1px);
}

.edit-rule-btn {
    color: #007bff;
    border-color: #007bff;
}

.edit-rule-btn:hover {
    background-color: #007bff;
    color: white;
}

.delete-rule-btn {
    color: #dc3545;
    border-color: #dc3545;
}

.delete-rule-btn:hover {
    background-color: #dc3545;
    color: white;
}

.edit-form {
    background: #f8f9fa;
    border-radius: 6px;
    padding: 1rem;
    margin-top: 1rem;
}

.edit-form .form-control-sm {
    font-size: 0.875rem;
}

.edit-form .btn {
    min-width: 36px;
}

#upload-new-rule-btn {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
    transition: all 0.3s ease;
}

#upload-new-rule-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.3);
}

#upload-new-rule-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

#manage-rules-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    transition: all 0.3s ease;
}

#manage-rules-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
}

#reload-rules-btn {
    color: #007bff;
    border-color: #007bff;
    transition: all 0.2s ease;
}

#reload-rules-btn:hover {
    background-color: #007bff;
    color: white;
    transform: translateY(-1px);
}

/* Form validation styles */
.form-control.is-valid {
    border-color: #28a745;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='m2.3 6.73.8-.8-.8-.8 1.6-1.6.8.8 1.6-1.6.8.8-2.4 2.4-2.4-2.4z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-control.is-invalid {
    border-color: #dc3545;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath d='m5.8 5.8 2.4 2.4m0-2.4-2.4 2.4'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Badge styling */
.rule-item .badge {
    font-size: 0.75rem;
}

.rule-item .badge.bg-secondary {
    background: linear-gradient(45deg, #6c757d, #5a6268) !important;
}

.rule-item .badge.bg-success {
    background: linear-gradient(45deg, #28a745, #20c997) !important;
}

.rule-item .badge.bg-warning {
    background: linear-gradient(45deg, #ffc107, #fd7e14) !important;
    color: #000 !important;
}

/* Animation for rule items */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rule-item {
    animation: slideInUp 0.3s ease;
}

/* Responsive design */
@media (max-width: 768px) {
    #rulesManagementModal .modal-dialog {
        max-width: 95vw;
        margin: 0.5rem;
    }
    
    .upload-rule-section {
        padding: 1rem;
    }
    
    .rule-actions {
        margin-top: 0.5rem;
    }
    
    .rule-actions .btn {
        margin-bottom: 0.25rem;
    }
    
    .edit-form .row {
        gap: 0.5rem;
    }
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
    .contract-tab {
        max-width: 150px;
        padding: 0.375rem 0.5rem;
    }
    
    .tab-title {
        font-size: 0.75rem;
        max-width: 80px;
    }
    
    .tab-icon {
        font-size: 0.7rem;
        margin-left: 0.25rem;
    }
}

/* Contract Comparison Modal Styles */
#contractComparisonModal .modal-dialog {
    max-width: 100vw;
    margin: 0;
    height: 100vh;
}

#contractComparisonModal .modal-content {
    height: 100vh;
    border-radius: 0;
}

#contractComparisonModal .modal-body {
    padding: 2rem;
    overflow-y: auto;
    height: calc(100vh - 120px);
}

.comparison-modal-header {
    padding-bottom: 0.5rem;
}

.contract-info-card {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    height: 100%;
}

.contract-info-card .contract-title {
    color: #495057;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.contract-info-card .contract-meta {
    color: #6c757d;
    font-size: 0.875rem;
}

.comparison-statistics {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.comparison-statistics .stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.comparison-statistics .stat-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.comparison-statistics .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.comparison-statistics .stat-label {
    font-size: 0.9rem;
    color: #6c757d;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.comparison-controls {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
}

.view-options .btn-group {
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}

.view-options .btn {
    padding: 0.5rem 1rem;
    border: 1px solid #dee2e6;
    background: white;
    color: #495057;
    transition: all 0.2s ease;
}

.view-options .btn-check:checked + .btn {
    background: #007bff;
    border-color: #007bff;
    color: white;
}

.comparison-options {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.comparison-options .form-check {
    margin-bottom: 0;
}

.comparison-options .form-check-label {
    font-size: 0.9rem;
    color: #495057;
    cursor: pointer;
    user-select: none;
}

.comparison-content {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    min-height: 60vh;
    overflow: hidden;
}

.comparison-view {
    height: 100%;
}

.diff-container {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.diff-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: #495057;
}

.diff-content {
    flex: 1;
    padding: 1rem;
    overflow-y: auto;
    font-family: 'Vazirmatn', monospace;
    font-size: 0.9rem;
    line-height: 1.8;
    direction: rtl;
    text-align: right;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Split view specific styles */
#split-comparison .diff-container {
    height: 60vh;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    position: relative;
}

/* Visual indicator for sync scrolling disabled */
#split-comparison .diff-container.sync-disabled::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border: 2px dashed #dc3545;
    border-radius: 6px;
    opacity: 0.3;
}

#split-comparison .col-md-6 {
    padding: 0 0.5rem;
}

#split-comparison .col-md-6:first-child {
    padding-left: 0;
}

#split-comparison .col-md-6:last-child {
    padding-right: 0;
}

/* Enhanced diff styling for modal */
.diff-content .diff-line {
    display: block;
    margin: 0;
    padding: 0.25rem 0.5rem;
    border-radius: 3px;
    position: relative;
    min-height: 1.5rem;
}

.diff-content .diff-line:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

.diff-content .diff-line.line-added {
    background-color: #e6ffed;
    border-left: 3px solid #28a745;
}

.diff-content .diff-line.line-removed {
    background-color: #ffeef0;
    border-left: 3px solid #dc3545;
    text-decoration: line-through;
}

.diff-content .diff-line.line-modified {
    background-color: #fff3cd;
    border-left: 3px solid #ffc107;
}

.diff-content .diff-line.line-context {
    background-color: transparent;
}

.diff-content .line-number {
    display: inline-block;
    width: 50px;
    text-align: center;
    color: #6c757d;
    font-size: 0.8rem;
    margin-left: 1rem;
    user-select: none;
}

.diff-content .line-content {
    display: inline-block;
    flex: 1;
    padding-right: 0.5rem;
}

/* Character-level diff highlighting */
.diff-content .char-added {
    background-color: #acf2bd;
    border-radius: 2px;
    padding: 0 1px;
}

.diff-content .char-removed {
    background-color: #ffb3ba;
    border-radius: 2px;
    padding: 0 1px;
    text-decoration: line-through;
}

.diff-content .char-modified {
    background-color: #ffe066;
    border-radius: 2px;
    padding: 0 1px;
}

/* Unified view specific styles */
#unified-comparison .diff-content {
    max-height: 60vh;
}

/* Scrollbar styling for diff content */
.diff-content::-webkit-scrollbar {
    width: 8px;
}

.diff-content::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.diff-content::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.diff-content::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Loading state for comparison modal */
.comparison-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 40vh;
    color: #6c757d;
}

.comparison-loading .spinner-border {
    width: 3rem;
    height: 3rem;
    margin-bottom: 1rem;
}

.comparison-loading .loading-text {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Export button styling */
#export-comparison-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    transition: all 0.3s ease;
}

#export-comparison-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%);
}

/* Responsive design for comparison modal */
@media (max-width: 768px) {
    #contractComparisonModal .modal-body {
        padding: 1rem;
    }
    
    .comparison-modal-header .row {
        flex-direction: column;
        gap: 1rem;
    }
    
    .comparison-statistics {
        padding: 1rem;
    }
    
    .comparison-statistics .stat-item {
        padding: 0.75rem;
        margin-bottom: 0.5rem;
    }
    
    .comparison-statistics .stat-value {
        font-size: 1.5rem;
    }
    
    .comparison-statistics .stat-label {
        font-size: 0.8rem;
    }
    
    .comparison-controls {
        flex-direction: column;
        gap: 1rem;
    }
    
    .view-options,
    .comparison-options {
        justify-content: center;
    }
    
    .comparison-options {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .diff-content {
        font-size: 0.8rem;
        line-height: 1.6;
    }
    
    .diff-content .line-number {
        width: 40px;
        font-size: 0.7rem;
    }
    
    #split-comparison .col-md-6 {
        margin-bottom: 1rem;
    }
    
    #split-comparison .diff-container {
        height: 40vh;
    }
    
    /* Responsive differences panel */
    .differences-panel {
        height: 30vh;
        margin-bottom: 1rem;
    }
    
    .differences-header {
        padding: 0.75rem;
    }
    
    .differences-title {
        font-size: 0.85rem;
    }
    
    .difference-item {
        padding: 0.5rem;
        margin-bottom: 0.25rem;
    }
    
    .difference-text {
        font-size: 0.8rem;
    }
    
    .difference-location {
        font-size: 0.7rem;
    }
}

/* Differences List Panel */
.differences-panel {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    height: 60vh;
    display: flex;
    flex-direction: column;
}

.differences-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
    background: white;
    border-radius: 8px 8px 0 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.differences-title {
    margin: 0;
    color: #495057;
    font-weight: 600;
    font-size: 0.95rem;
}

.differences-count .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

.differences-content {
    flex: 1;
    overflow: hidden;
}

.differences-list {
    height: 100%;
    overflow-y: auto;
    padding: 0.5rem;
}

.no-differences {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #6c757d;
    text-align: center;
}

.no-differences i {
    font-size: 2rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.no-differences p {
    margin: 0;
    font-size: 0.9rem;
}

.difference-item {
    background: white;
    border: 1px solid #dee2e6;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    padding: 0.75rem;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.difference-item:hover {
    background: #e9ecef;
    border-color: #007bff;
    transform: translateX(2px);
}

.difference-item.active {
    background: #e7f3ff;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.difference-type {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.difference-type.addition {
    background: #d4edda;
    color: #155724;
}

.difference-type.deletion {
    background: #f8d7da;
    color: #721c24;
}

.difference-type.modification {
    background: #fff3cd;
    color: #856404;
}

.difference-text {
    font-size: 0.85rem;
    color: #495057;
    line-height: 1.4;
    margin-bottom: 0.5rem;
    direction: rtl;
    text-align: right;
}

.difference-location {
    font-size: 0.75rem;
    color: #6c757d;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.difference-location i {
    font-size: 0.7rem;
}

.difference-preview {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    padding: 0.5rem;
    margin-top: 0.5rem;
    font-family: 'Vazirmatn', monospace;
    font-size: 0.8rem;
    max-height: 60px;
    overflow: hidden;
    position: relative;
    direction: rtl;
    text-align: right;
}

.difference-preview::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 20px;
    background: linear-gradient(transparent, #f8f9fa);
}

.difference-preview .preview-added {
    background: #d4edda;
    color: #155724;
    padding: 0 2px;
    border-radius: 2px;
}

.difference-preview .preview-removed {
    background: #f8d7da;
    color: #721c24;
    padding: 0 2px;
    border-radius: 2px;
    text-decoration: line-through;
}

/* Scrollbar styling for differences list */
.differences-list::-webkit-scrollbar {
    width: 6px;
}

.differences-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.differences-list::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.differences-list::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Animation for modal appearance */
@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

#contractComparisonModal .modal-content {
    animation: modalSlideIn 0.3s ease;
}

/* Highlight animation for changes */
@keyframes changeHighlight {
    0% { background-color: transparent; }
    50% { background-color: rgba(255, 193, 7, 0.3); }
    100% { background-color: transparent; }
}

.diff-content .diff-line.highlight-change {
    animation: changeHighlight 2s ease;
}

/* Chat Rules Dropdown Styles */
#chat-rules-dropdown {
    position: relative;
}

#chat-rules-btn {
    border-radius: 50%;
    width: 45px;
    height: 45px;
    margin-left: 0.25rem;
    margin-right: 12px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#chat-rules-btn:hover {
    transform: scale(1.05);
}

#chat-rules-btn.btn-outline-primary {
    background-color: rgba(0, 123, 255, 0.1);
    border-color: #007bff;
    color: #007bff;
}

#chat-rules-btn.btn-outline-primary:hover {
    background-color: #007bff;
    color: white;
}

#chat-rules-menu {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    background: white;
    direction: rtl;
    text-align: right;
}

#chat-rules-menu .dropdown-header {
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    margin: -0.75rem -0.75rem 0.75rem -0.75rem;
    padding: 0.75rem;
    font-weight: 600;
    color: #495057;
    border-radius: 8px 8px 0 0;
}

.chat-rules-selection {
    max-height: 200px;
    overflow-y: auto;
}

.chat-rules-selection .form-check {
    padding: 0.5rem 0;
    transition: background-color 0.2s ease;
    border-radius: 4px;
    margin: 0.5rem 0;
}

.chat-rules-selection .form-check:hover {
    background-color: #f8f9fa;
}

.chat-rules-selection .form-check-input {
    margin-right: 0.75rem;
    margin-left: 0;
}

.chat-rules-selection .form-check-input:disabled {
    opacity: 0.5;
}

.chat-rules-selection .form-check-label {
    font-size: 0.9rem;
    color: #495057;
    cursor: pointer;
    user-select: none;
    padding-right: 5px;
    padding-top: 3px;
}

.chat-rules-selection .form-check-input:disabled + .form-check-label {
    color: #6c757d;
    cursor: not-allowed;
}

#chat-rules-count {
    font-size: 0.8rem;
    color: #6c757d;
}

#clear-chat-rules {
    font-size: 0.8rem;
    color: #dc3545;
    text-decoration: none;
    transition: color 0.2s ease;
}

#clear-chat-rules:hover {
    color: #c82333;
    text-decoration: underline;
}

/* Chat input group styling */
.chat-input-container .input-group {
    align-items: stretch;
}

.chat-input-container .input-group > * {
    z-index: 1;
}

.chat-input-container .dropdown-toggle::after {
    display: none; /* Hide default dropdown arrow */
}

/* Dropdown animation */
#chat-rules-menu {
    animation: dropdownSlideIn 0.2s ease-out;
}

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

/* Scrollbar for rules selection */
.chat-rules-selection::-webkit-scrollbar {
    width: 6px;
}

.chat-rules-selection::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.chat-rules-selection::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.chat-rules-selection::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Responsive adjustments for rules dropdown */
@media (max-width: 768px) {
    #chat-rules-menu {
        min-width: 280px !important;
        left: auto !important;
        right: 0 !important;
    }
    
    #chat-rules-btn {
        width: 40px;
        height: 40px;
        margin-left: 0.2rem;
        margin-right: 1rem;
    }
    
    .chat-rules-selection {
        max-height: 150px;
    }
    
    .chat-rules-selection .form-check {
        padding: 0.4rem 0;
        margin: 0.4rem 0;
    }
    
    .chat-rules-selection .form-check-input {
        margin-right: 0.6rem;
    }
    
    .chat-rules-selection .form-check-label {
        font-size: 0.85rem;
    }
}