/* ============================================
    Sofia Chat Section – WhatsApp-Inspired Styles
    Lawgic Support Assistant
   ============================================ */

/* ==================== VARIABLES ==================== */
:root {
     --sofia-primary: #4F6AFF;
     --sofia-primary-dark: #3D54CC;
     --sofia-primary-light: #E8ECFF;
     --sofia-bg: #EFEAE2;
     --sofia-chat-bg: #EFEAE2;
     --sofia-text: #111B21;
     --sofia-text-muted: #667781;
     --sofia-border: #E5E7EB;
     --sofia-user-bubble: #D9FDD3;
     --sofia-sofia-bubble: #FFFFFF;
     --sofia-header-bg: #075E54;
     --sofia-input-bg: #F0F2F5;
     --sofia-timestamp: #667781;
     --sofia-check: #53BDEB;
}

/* ==================== MAIN CONTAINER ==================== */
.sofia-container {
     display: flex;
     flex-direction: column;
     height: calc(100vh - 60px);
     max-height: calc(100vh - 60px);
     background: var(--sofia-chat-bg);
     font-family: 'Plus Jakarta Sans', sans-serif;
     position: relative;
     overflow: hidden;
}

/* Chat wallpaper pattern */
.sofia-container::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c9c2b7' fill-opacity='0.15'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
     opacity: 0.6;
     pointer-events: none;
     z-index: 0;
}

/* ==================== HEADER ==================== */
.sofia-header {
     display: flex;
     align-items: center;
     gap: 14px;
     padding: 10px 16px;
     background: var(--sofia-header-bg);
     color: white;
     flex-shrink: 0;
     z-index: 2;
     box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.sofia-avatar {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.2);
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 700;
     font-size: 18px;
     flex-shrink: 0;
     border: 2px solid rgba(255,255,255,0.3);
}

.sofia-header-info {
     flex: 1;
     min-width: 0;
}

.sofia-header-name {
     font-size: 16px;
     font-weight: 600;
     margin-bottom: 1px;
}

.sofia-header-status {
     font-size: 12px;
     opacity: 0.85;
     display: flex;
     align-items: center;
     gap: 6px;
}

.sofia-status-dot {
     width: 8px;
     height: 8px;
     background: #25D366;
     border-radius: 50%;
     animation: sofiaPulse 2s infinite;
     box-shadow: 0 0 4px rgba(37, 211, 102, 0.5);
}

/* ==================== MESSAGES AREA ==================== */
.sofia-messages {
     flex: 1;
     overflow-y: auto;
     padding: 12px 48px 12px 48px;
     display: flex;
     flex-direction: column;
     gap: 2px;
     scroll-behavior: smooth;
     z-index: 1;
     position: relative;
}

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

.sofia-messages::-webkit-scrollbar-track {
     background: transparent;
}

.sofia-messages::-webkit-scrollbar-thumb {
     background: rgba(0,0,0,0.2);
     border-radius: 3px;
}

.sofia-messages::-webkit-scrollbar-thumb:hover {
     background: rgba(0,0,0,0.3);
}

/* ==================== MESSAGE BUBBLES ==================== */
.sofia-message {
     display: flex;
     gap: 0;
     max-width: 65%;
     animation: sofiaMessageIn 0.2s ease;
     position: relative;
     margin-bottom: 2px;
}

.sofia-message.user {
     align-self: flex-end;
     flex-direction: row-reverse;
}

.sofia-message.sofia {
     align-self: flex-start;
}

/* Hide the avatar - WhatsApp style doesn't show avatars inline */
.sofia-message-avatar {
     display: none;
}

.sofia-message-bubble {
     padding: 6px 8px 8px 9px;
     border-radius: 8px;
     font-size: 14.2px;
     line-height: 1.35;
     word-wrap: break-word;
     white-space: pre-wrap;
     position: relative;
     box-shadow: 0 1px 0.5px rgba(11,20,26,0.13);
     min-width: 80px;
}

/* Sofia (received) bubble */
.sofia-message.sofia .sofia-message-bubble {
     background: var(--sofia-sofia-bubble);
     color: var(--sofia-text);
     border-top-left-radius: 0;
}

/* Sofia bubble tail */
.sofia-message.sofia .sofia-message-bubble::before {
     content: '';
     position: absolute;
     top: 0;
     left: -8px;
     width: 0;
     height: 0;
     border-top: 0px solid transparent;
     border-right: 8px solid var(--sofia-sofia-bubble);
     border-bottom: 8px solid transparent;
}

/* User (sent) bubble */
.sofia-message.user .sofia-message-bubble {
     background: var(--sofia-user-bubble);
     color: var(--sofia-text);
     border-top-right-radius: 0;
}

/* User bubble tail */
.sofia-message.user .sofia-message-bubble::before {
     content: '';
     position: absolute;
     top: 0;
     right: -8px;
     width: 0;
     height: 0;
     border-top: 0px solid transparent;
     border-left: 8px solid var(--sofia-user-bubble);
     border-bottom: 8px solid transparent;
}

/* Timestamp inside bubble */
.sofia-message-time {
     float: right;
     font-size: 11px;
     color: var(--sofia-timestamp);
     margin-left: 12px;
     margin-top: 4px;
     display: flex;
     align-items: center;
     gap: 3px;
     line-height: 1;
     position: relative;
     top: 4px;
}

/* Read receipt checks */
.sofia-message-checks {
     display: inline-flex;
     margin-left: 2px;
     color: var(--sofia-check);
}

.sofia-message-checks svg {
     width: 16px;
     height: 11px;
}

/* ==================== TYPING INDICATOR ==================== */
.sofia-typing-container {
     align-self: flex-start;
     max-width: 65%;
}

.sofia-typing-container .sofia-message-avatar {
     display: none;
}

.sofia-typing {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 10px 14px;
     background: var(--sofia-sofia-bubble);
     border-radius: 8px;
     border-top-left-radius: 0;
     box-shadow: 0 1px 0.5px rgba(11,20,26,0.13);
     position: relative;
}

.sofia-typing::before {
     content: '';
     position: absolute;
     top: 0;
     left: -8px;
     width: 0;
     height: 0;
     border-right: 8px solid var(--sofia-sofia-bubble);
     border-bottom: 8px solid transparent;
}

.sofia-typing-dots {
     display: flex;
     gap: 4px;
}

.sofia-typing-dot {
     width: 7px;
     height: 7px;
     background: #9CA3AF;
     border-radius: 50%;
     animation: sofiaTyping 1.4s infinite;
}

.sofia-typing-dot:nth-child(2) {
     animation-delay: 0.2s;
}

.sofia-typing-dot:nth-child(3) {
     animation-delay: 0.4s;
}

.sofia-typing-text {
     font-size: 12px;
     color: var(--sofia-text-muted);
     font-style: italic;
}

/* ==================== WELCOME MESSAGE ==================== */
.sofia-welcome {
     text-align: center;
     padding: 40px 20px;
     margin: auto 0;
     z-index: 1;
}

.sofia-welcome-icon {
     font-size: 56px;
     margin-bottom: 16px;
}

.sofia-welcome h3 {
     font-size: 20px;
     font-weight: 700;
     color: var(--sofia-text);
     margin-bottom: 10px;
}

.sofia-welcome p {
     font-size: 14px;
     line-height: 1.6;
     max-width: 320px;
     margin: 0 auto;
     color: var(--sofia-text-muted);
}

/* System message pill (for welcome/date separators) */
.sofia-system-msg {
     align-self: center;
     background: #E2DACE;
     color: var(--sofia-text);
     font-size: 12px;
     padding: 5px 12px;
     border-radius: 8px;
     box-shadow: 0 1px 0.5px rgba(11,20,26,0.13);
     margin: 8px 0;
     z-index: 1;
}

/* ==================== INPUT AREA ==================== */
.sofia-input-area {
     display: flex;
     align-items: flex-end;
     gap: 8px;
     padding: 6px 10px 6px 6px;
     background: #F0F2F5;
     flex-shrink: 0;
     z-index: 2;
}

#sofiaInput {
     flex: 1;
     padding: 9px 12px;
     border: none;
     border-radius: 8px;
     font-size: 15px;
     font-family: 'Plus Jakarta Sans', sans-serif;
     color: var(--sofia-text);
     background: white;
     outline: none;
     resize: none;
     max-height: 100px;
     min-height: 42px;
     transition: box-shadow 0.2s;
     line-height: 1.4;
}

#sofiaInput:focus {
     box-shadow: none;
}

#sofiaInput::placeholder {
     color: #9CA3AF;
}

.sofia-send-btn {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     border: none;
     background: #00A884;
     color: white;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.15s;
     flex-shrink: 0;
}

.sofia-send-btn:hover:not(:disabled) {
     background: #008F72;
}

.sofia-send-btn:active:not(:disabled) {
     transform: scale(0.95);
}

.sofia-send-btn:disabled {
     background: #B0B3B8;
     cursor: not-allowed;
}

.sofia-send-btn svg {
     width: 20px;
     height: 20px;
}

/* ==================== ATTACHMENT BUTTON ==================== */
.sofia-attach-btn {
     width: 42px;
     height: 42px;
     border-radius: 50%;
     border: none;
     background: transparent;
     color: #54656F;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.15s;
     flex-shrink: 0;
}

.sofia-attach-btn:hover {
     color: var(--sofia-text);
     background: rgba(0,0,0,0.05);
}

.sofia-attach-btn:active {
     transform: scale(0.95);
}

.sofia-attach-btn svg {
     width: 24px;
     height: 24px;
}

/* ==================== ATTACHMENT PREVIEW ==================== */
.sofia-attachment-preview {
     padding: 8px 16px;
     background: #F0F2F5;
     border-top: 1px solid #E5E7EB;
     z-index: 2;
}

.sofia-attachment-item {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 8px 12px;
     background: white;
     border: 1px solid var(--sofia-border);
     border-radius: 8px;
     max-width: 300px;
}

.sofia-attachment-item img {
     max-width: 60px;
     max-height: 60px;
     border-radius: 6px;
     object-fit: cover;
}

.sofia-preview-doc {
     display: flex;
     align-items: center;
     gap: 8px;
     color: var(--sofia-text);
     font-size: 13px;
     flex: 1;
     min-width: 0;
}

.sofia-preview-doc svg {
     flex-shrink: 0;
     color: var(--sofia-primary);
}

.sofia-preview-doc span {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}

.sofia-remove-attachment {
     width: 28px;
     height: 28px;
     border-radius: 50%;
     border: none;
     background: #F3F4F6;
     color: var(--sofia-text-muted);
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.15s;
     flex-shrink: 0;
}

.sofia-remove-attachment:hover {
     background: #FEE2E2;
     color: #DC2626;
}

/* ==================== ERROR STATE ==================== */
.sofia-error {
     display: flex;
     align-items: center;
     gap: 8px;
     padding: 8px 12px;
     background: #FEF2F2;
     border-radius: 8px;
     color: #DC2626;
     font-size: 13px;
     animation: sofiaMessageIn 0.2s ease;
     align-self: center;
     box-shadow: 0 1px 0.5px rgba(11,20,26,0.13);
     z-index: 1;
}

.sofia-error-icon {
     flex-shrink: 0;
}

/* ==================== IMAGES IN CHAT ==================== */
.sofia-message-image {
     max-width: 280px;
     max-height: 280px;
     border-radius: 6px;
     margin-top: 6px;
     cursor: pointer;
     transition: opacity 0.15s;
     display: block;
}

.sofia-message-image:hover {
     opacity: 0.92;
}

/* ==================== DOCUMENTS IN CHAT ==================== */
.sofia-message-document {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 8px 12px;
     background: rgba(0,0,0,0.04);
     border-radius: 6px;
     margin-top: 6px;
     cursor: pointer;
     transition: background 0.15s;
}

.sofia-message.user .sofia-message-document {
     background: rgba(0,0,0,0.06);
}

.sofia-message-document:hover {
     background: rgba(0,0,0,0.08);
}

.sofia-message-document svg {
     flex-shrink: 0;
     color: #54656F;
}

.sofia-message-document-info {
     flex: 1;
     min-width: 0;
}

.sofia-message-document-name {
     font-size: 13px;
     font-weight: 500;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
}

.sofia-message-document-size {
     font-size: 11px;
     color: var(--sofia-text-muted);
}

/* ==================== IMAGE LIGHTBOX ==================== */
.sofia-lightbox {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0,0,0,0.92);
     display: flex;
     align-items: center;
     justify-content: center;
     z-index: 10000;
     cursor: zoom-out;
     animation: sofiaFadeIn 0.2s ease;
}

.sofia-lightbox img {
     max-width: 90%;
     max-height: 90%;
     border-radius: 4px;
     box-shadow: 0 4px 30px rgba(0,0,0,0.3);
}

.sofia-lightbox-close {
     position: absolute;
     top: 16px;
     right: 16px;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     border: none;
     background: rgba(255,255,255,0.1);
     color: white;
     cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: background 0.15s;
}

.sofia-lightbox-close:hover {
     background: rgba(255,255,255,0.2);
}

/* ==================== ANIMATIONS ==================== */
@keyframes sofiaPulse {
     0%, 100% { opacity: 1; }
     50% { opacity: 0.5; }
}

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

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

@keyframes sofiaFadeIn {
     from { opacity: 0; }
     to { opacity: 1; }
}

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
     .sofia-container {
            height: calc(100vh - 56px);
            max-height: calc(100vh - 56px);
     }

  .sofia-header {
         padding: 8px 12px;
  }

  .sofia-avatar {
         width: 38px;
         height: 38px;
         font-size: 16px;
  }

  .sofia-header-name {
         font-size: 15px;
  }

  .sofia-messages {
         padding: 8px 16px;
  }

  .sofia-message {
         max-width: 80%;
  }

  .sofia-input-area {
         padding: 4px 8px;
  }

  #sofiaInput {
         padding: 8px 12px;
         font-size: 14px;
         min-height: 38px;
  }

  .sofia-send-btn {
         width: 38px;
         height: 38px;
  }

  .sofia-attach-btn {
         width: 38px;
         height: 38px;
  }
}

@media (max-width: 480px) {
     .sofia-message {
            max-width: 88%;
     }

  .sofia-messages {
         padding: 6px 12px;
  }

  .sofia-message-bubble {
         padding: 5px 7px 6px 8px;
         font-size: 14px;
  }

  .sofia-message-image {
         max-width: 200px;
         max-height: 200px;
  }
}

/* ============================================
   Sofia Proposals Section - Approval System
   ============================================ */

/* Container */
.propuestas-container {
     padding: 20px;
     max-width: 1200px;
     margin: 0 auto;
}

.proposals-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
     margin-top: 20px;
}

/* Loading & Empty States */
.proposals-loading,
.proposals-empty,
.proposals-error {
     text-align: center;
     padding: 60px 20px;
     color: var(--sofia-text-muted);
}

.proposals-empty-icon {
     margin-bottom: 20px;
     color: #10B981;
}

.proposals-empty h3 {
     font-size: 18px;
     font-weight: 600;
     color: var(--sofia-text);
     margin-bottom: 8px;
}

.proposals-empty p {
     font-size: 14px;
}

.proposals-error {
     color: #EF4444;
}

.btn-retry {
     margin-top: 16px;
     padding: 8px 16px;
     background: var(--sofia-primary);
     color: white;
     border: none;
     border-radius: 6px;
     cursor: pointer;
     font-size: 14px;
}

.btn-retry:hover {
     background: var(--sofia-primary-dark);
}

/* Proposal Card */
.sofia-proposal {
     background: white;
     border-radius: 12px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
     overflow: hidden;
     border: 1px solid var(--sofia-border);
}

.proposal-header {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 16px 20px;
     background: linear-gradient(135deg, #4F6AFF 0%, #3D54CC 100%);
     color: white;
}

.proposal-badge {
     background: rgba(255, 255, 255, 0.2);
     padding: 4px 10px;
     border-radius: 20px;
     font-size: 12px;
     font-weight: 600;
}

.proposal-ticket-id {
     font-family: monospace;
     font-size: 12px;
     opacity: 0.9;
}

.proposal-time {
     margin-left: auto;
     font-size: 12px;
     opacity: 0.8;
}

/* Ticket Info */
.proposal-ticket-info {
     padding: 16px 20px;
     background: #F8FAFC;
     border-bottom: 1px solid var(--sofia-border);
}

.proposal-client {
     font-size: 14px;
     margin-bottom: 4px;
}

.proposal-client strong {
     color: var(--sofia-text);
}

.proposal-subject {
     font-size: 15px;
     font-weight: 600;
     color: var(--sofia-text);
     margin-bottom: 8px;
}

.proposal-message {
     font-size: 13px;
     color: var(--sofia-text-muted);
     line-height: 1.5;
     max-height: 60px;
     overflow: hidden;
     text-overflow: ellipsis;
}

/* Proposed Response */
.proposal-response {
     padding: 16px 20px;
}

.proposal-response label {
     display: block;
     font-size: 13px;
     font-weight: 600;
     color: var(--sofia-text-muted);
     margin-bottom: 8px;
}

.proposal-textarea {
     width: 100%;
     min-height: 120px;
     padding: 12px;
     border: 1px solid var(--sofia-border);
     border-radius: 8px;
     font-size: 14px;
     font-family: inherit;
     line-height: 1.6;
     resize: vertical;
     transition: border-color 0.2s, box-shadow 0.2s;
}

.proposal-textarea:focus {
     outline: none;
     border-color: var(--sofia-primary);
     box-shadow: 0 0 0 3px rgba(79, 106, 255, 0.1);
}

/* Action Buttons */
.proposal-actions {
     display: flex;
     gap: 12px;
     padding: 16px 20px;
     background: #F8FAFC;
     border-top: 1px solid var(--sofia-border);
}

.proposal-actions button {
     display: flex;
     align-items: center;
     gap: 6px;
     padding: 10px 16px;
     border: none;
     border-radius: 8px;
     font-size: 14px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s;
}

.btn-approve {
     background: #10B981;
     color: white;
}

.btn-approve:hover {
     background: #059669;
}

.btn-edit {
     background: #F59E0B;
     color: white;
}

.btn-edit:hover {
     background: #D97706;
}

.btn-reject {
     background: white;
     color: #EF4444;
     border: 1px solid #EF4444 !important;
}

.btn-reject:hover {
     background: #FEE2E2;
}

.proposal-actions button:disabled {
     opacity: 0.6;
     cursor: not-allowed;
}

/* Feedback Box */
.proposal-feedback-box {
     padding: 16px 20px;
     background: #FEF3C7;
     border-top: 1px solid #FCD34D;
}

.proposal-feedback-box label {
     display: block;
     font-size: 13px;
     font-weight: 600;
     color: #92400E;
     margin-bottom: 8px;
}

.proposal-feedback-box textarea {
     width: 100%;
     min-height: 80px;
     padding: 12px;
     border: 1px solid #FCD34D;
     border-radius: 8px;
     font-size: 14px;
     font-family: inherit;
     resize: vertical;
     margin-bottom: 12px;
}

.proposal-feedback-box textarea:focus {
     outline: none;
     border-color: #F59E0B;
}

.feedback-actions {
     display: flex;
     gap: 12px;
}

.btn-submit-feedback {
     background: #EF4444;
     color: white;
     padding: 8px 16px;
     border: none;
     border-radius: 6px;
     font-size: 14px;
     cursor: pointer;
}

.btn-submit-feedback:hover {
     background: #DC2626;
}

.btn-cancel-feedback {
     background: white;
     color: var(--sofia-text-muted);
     padding: 8px 16px;
     border: 1px solid var(--sofia-border);
     border-radius: 6px;
     font-size: 14px;
     cursor: pointer;
}

.btn-cancel-feedback:hover {
     background: #F3F4F6;
}

/* Badge Count in Sidebar */
.badge-count {
     background: #EF4444;
     color: white;
     font-size: 11px;
     font-weight: 600;
     padding: 2px 6px;
     border-radius: 10px;
     margin-left: 8px;
     min-width: 18px;
     text-align: center;
}

/* Notification Toast */
.proposal-notification {
     position: fixed;
     bottom: 20px;
     right: 20px;
     padding: 12px 20px;
     border-radius: 8px;
     font-size: 14px;
     font-weight: 500;
     z-index: 10000;
     animation: slideIn 0.3s ease;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.proposal-notification-success {
     background: #10B981;
     color: white;
}

.proposal-notification-error {
     background: #EF4444;
     color: white;
}

.proposal-notification-info {
     background: #3B82F6;
     color: white;
}

.proposal-notification.fade-out {
     animation: fadeOut 0.3s ease forwards;
}

@keyframes slideIn {
     from {
          transform: translateX(100%);
          opacity: 0;
     }
     to {
          transform: translateX(0);
          opacity: 1;
     }
}

@keyframes fadeOut {
     to {
          opacity: 0;
          transform: translateY(10px);
     }
}

/* Responsive */
@media (max-width: 768px) {
     .propuestas-container {
          padding: 12px;
     }

     .proposal-actions {
          flex-wrap: wrap;
     }

     .proposal-actions button {
          flex: 1;
          min-width: 120px;
          justify-content: center;
     }
}