/* =========================================================
   Mimoza AI Assistant – Chat Widget Styles
   ========================================================= */

:root {
    --mai-primary:       #0ea5e9;
    --mai-primary-dark:  #0284c7;
    --mai-primary-light: #e0f2fe;
    --mai-bg:            #ffffff;
    --mai-surface:       #f8fafc;
    --mai-border:        #e2e8f0;
    --mai-text:          #1e293b;
    --mai-text-muted:    #64748b;
    --mai-user-bg:       var(--mai-primary);
    --mai-user-text:     #ffffff;
    --mai-bot-bg:        #f1f5f9;
    --mai-bot-text:      #1e293b;
    --mai-radius:        16px;
    --mai-shadow:        0 4px 24px rgba(0,0,0,0.10);
    --mai-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Wrapper ── */
.mimoza-ai-wrapper {
    font-family:   var(--mai-font);
    border:        1px solid var(--mai-border);
    border-radius: var(--mai-radius);
    box-shadow:    var(--mai-shadow);
    overflow:      hidden;
    display:       flex;
    flex-direction:column;
    background:    var(--mai-bg);
    max-width:     100%;
}

/* ── Header ── */
.mai-header {
    background:      var(--mai-primary);
    color:           #fff;
    padding:         14px 18px;
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-shrink:     0;
}
.mai-header-left {
    display:     flex;
    align-items: center;
    gap:         12px;
}
.mai-avatar {
    width:           42px;
    height:          42px;
    border-radius:   50%;
    background:      rgba(255,255,255,0.2);
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}
.mai-title {
    font-weight: 700;
    font-size:   15px;
    line-height: 1.2;
}
.mai-status {
    font-size:   12px;
    opacity:     0.85;
    display:     flex;
    align-items: center;
    gap:         5px;
    margin-top:  2px;
}
.mai-status-dot {
    width:            8px;
    height:           8px;
    border-radius:    50%;
    background:       #4ade80;
    animation:        mai-pulse 2s infinite;
    flex-shrink:      0;
}
@keyframes mai-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}
.mai-clear-btn {
    background:    none;
    border:        none;
    color:         rgba(255,255,255,0.8);
    cursor:        pointer;
    padding:       6px;
    border-radius: 6px;
    transition:    background 0.2s;
    display:       flex;
    align-items:   center;
}
.mai-clear-btn:hover {
    background: rgba(255,255,255,0.15);
    color:      #fff;
}

/* ── Messages Area ── */
.mai-messages {
    overflow-y:    auto;
    padding:       18px;
    display:       flex;
    flex-direction:column;
    gap:           12px;
    background:    var(--mai-surface);
    flex-grow:     1;
}
.mai-messages::-webkit-scrollbar { width: 5px; }
.mai-messages::-webkit-scrollbar-track  { background: transparent; }
.mai-messages::-webkit-scrollbar-thumb  { background: var(--mai-border); border-radius: 4px; }

/* ── Individual Message ── */
.mai-message {
    display:        flex;
    flex-direction: column;
    max-width:      82%;
    animation:      mai-fade-in 0.25s ease;
}
@keyframes mai-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

.mai-bubble {
    padding:       12px 16px;
    border-radius: var(--mai-radius);
    font-size:     14px;
    line-height:   1.6;
    word-break:    break-word;
}
.mai-message.mai-user .mai-bubble {
    background:          var(--mai-primary);
    color:               var(--mai-user-text);
    border-bottom-right-radius: 4px;
}
.mai-message.mai-bot .mai-bubble {
    background:         var(--mai-bot-bg);
    color:              var(--mai-bot-text);
    border-bottom-left-radius: 4px;
}
.mai-bubble strong { font-weight: 600; }
.mai-bubble a { color: var(--mai-primary); }
.mai-bubble ul, .mai-bubble ol { padding-left: 18px; margin: 6px 0; }
.mai-bubble li { margin-bottom: 4px; }
.mai-bubble p { margin: 0 0 8px; }
.mai-bubble p:last-child { margin-bottom: 0; }

/* Image inside bubble */
.mai-bubble img.mai-msg-image {
    max-width:     100%;
    border-radius: 8px;
    margin-bottom: 8px;
    display:       block;
}

/* Time stamp */
.mai-time {
    font-size:  11px;
    color:      var(--mai-text-muted);
    margin-top: 4px;
    padding:    0 4px;
}

/* ── Typing Indicator ── */
.mai-typing {
    display:     flex;
    align-items: center;
    gap:         5px;
    padding:     12px 16px;
    background:  var(--mai-bot-bg);
    border-radius: var(--mai-radius);
    border-bottom-left-radius: 4px;
    width:       fit-content;
}
.mai-typing span {
    width:         7px;
    height:        7px;
    border-radius: 50%;
    background:    var(--mai-text-muted);
    animation:     mai-bounce 1.2s infinite;
    display:       inline-block;
}
.mai-typing span:nth-child(2) { animation-delay: 0.2s; }
.mai-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes mai-bounce {
    0%, 60%, 100% { transform: translateY(0); }
    30%            { transform: translateY(-6px); }
}

/* ── Quote Bar ── */
.mai-quote-bar {
    background:   var(--mai-primary-light);
    border-top:   1px solid var(--mai-border);
    padding:      10px 18px;
    display:      flex;
    align-items:  center;
    flex-shrink:  0;
}
.mai-quote-bar-btn {
    background:    var(--mai-primary);
    color:         #fff;
    border:        none;
    border-radius: 8px;
    padding:       8px 18px;
    font-size:     14px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background 0.2s, transform 0.1s;
    width:         100%;
}
.mai-quote-bar-btn:hover {
    background: var(--mai-primary-dark);
    transform:  translateY(-1px);
}

/* ── Input Area ── */
.mai-input-area {
    border-top:  1px solid var(--mai-border);
    padding:     12px 16px;
    background:  var(--mai-bg);
    flex-shrink: 0;
}
.mai-image-preview {
    position:    relative;
    display:     inline-block;
    margin-bottom: 10px;
}
.mai-image-preview img {
    height:        80px;
    border-radius: 8px;
    border:        2px solid var(--mai-primary);
}
.mai-remove-img {
    position:      absolute;
    top:           -6px;
    right:         -6px;
    background:    #ef4444;
    color:         #fff;
    border:        none;
    border-radius: 50%;
    width:         20px;
    height:        20px;
    font-size:     11px;
    cursor:        pointer;
    display:       flex;
    align-items:   center;
    justify-content: center;
    line-height:   1;
}
.mai-input-row {
    display:     flex;
    align-items: flex-end;
    gap:         8px;
}
.mai-attach-btn {
    flex-shrink:   0;
    width:         38px;
    height:        38px;
    display:       flex;
    align-items:   center;
    justify-content: center;
    border:        1px solid var(--mai-border);
    border-radius: 8px;
    cursor:        pointer;
    color:         var(--mai-text-muted);
    background:    var(--mai-surface);
    transition:    border-color 0.2s, color 0.2s;
}
.mai-attach-btn:hover {
    border-color: var(--mai-primary);
    color:        var(--mai-primary);
}
.mai-textarea {
    flex:          1;
    border:        1px solid var(--mai-border);
    border-radius: 10px;
    padding:       9px 14px;
    font-size:     14px;
    font-family:   var(--mai-font);
    resize:        none;
    outline:       none;
    line-height:   1.5;
    min-height:    38px;
    max-height:    120px;
    overflow-y:    auto;
    transition:    border-color 0.2s;
    color:         var(--mai-text);
    background:    var(--mai-bg);
}
.mai-textarea:focus {
    border-color: var(--mai-primary);
    box-shadow:   0 0 0 3px rgba(14,165,233,0.12);
}
.mai-send-btn {
    flex-shrink:     0;
    width:           38px;
    height:          38px;
    background:      var(--mai-primary);
    border:          none;
    border-radius:   8px;
    color:           #fff;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.2s, transform 0.1s;
}
.mai-send-btn:hover {
    background: var(--mai-primary-dark);
    transform:  scale(1.05);
}
.mai-send-btn:disabled {
    background: var(--mai-border);
    cursor:     not-allowed;
    transform:  none;
}
.mai-footer-note {
    font-size:  11px;
    color:      var(--mai-text-muted);
    margin-top: 8px;
    text-align: center;
}

/* ── Quote Badge inside bubble ── */
.mai-quote-badge {
    display:        inline-flex;
    align-items:    center;
    gap:            6px;
    background:     linear-gradient(135deg, var(--mai-primary) 0%, var(--mai-primary-dark) 100%);
    color:          #fff;
    border-radius:  8px;
    padding:        10px 16px;
    margin-top:     10px;
    font-size:      13px;
    font-weight:    600;
    cursor:         pointer;
    border:         none;
    transition:     transform 0.15s, box-shadow 0.15s;
}
.mai-quote-badge:hover {
    transform:  translateY(-2px);
    box-shadow: 0 4px 12px rgba(14,165,233,0.4);
}

/* ══════════════════════════════════════
   MODAL
══════════════════════════════════════ */
.mai-modal-overlay {
    position:         fixed;
    inset:            0;
    background:       rgba(0,0,0,0.55);
    z-index:          999999;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    padding:          16px;
    backdrop-filter:  blur(4px);
    animation:        mai-fade-in 0.2s ease;
}
.mai-modal {
    background:    #fff;
    border-radius: 16px;
    width:         100%;
    max-width:     720px;
    max-height:    90vh;
    overflow-y:    auto;
    box-shadow:    0 20px 60px rgba(0,0,0,0.25);
    display:       flex;
    flex-direction:column;
}
.mai-modal-header {
    padding:         18px 24px;
    border-bottom:   1px solid var(--mai-border);
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    position:        sticky;
    top:             0;
    background:      #fff;
    z-index:         1;
}
.mai-modal-header h2 {
    margin:      0;
    font-size:   18px;
    color:       var(--mai-text);
    font-weight: 700;
}
.mai-modal-close {
    background:    none;
    border:        none;
    font-size:     20px;
    cursor:        pointer;
    color:         var(--mai-text-muted);
    padding:       4px 8px;
    border-radius: 6px;
    line-height:   1;
    transition:    background 0.2s;
}
.mai-modal-close:hover { background: #f1f5f9; }

.mai-modal-body {
    padding:  20px 24px;
    flex-grow: 1;
}
.mai-quote-section {
    margin-bottom: 22px;
}
.mai-quote-section h3 {
    font-size:    14px;
    font-weight:  700;
    color:        var(--mai-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin:       0 0 12px;
}
.mai-form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   10px;
}
.mai-input-field {
    border:        1px solid var(--mai-border);
    border-radius: 8px;
    padding:       9px 12px;
    font-size:     14px;
    font-family:   var(--mai-font);
    outline:       none;
    width:         100%;
    box-sizing:    border-box;
    transition:    border-color 0.2s;
    color:         var(--mai-text);
}
.mai-input-field:focus {
    border-color: var(--mai-primary);
    box-shadow:   0 0 0 3px rgba(14,165,233,0.1);
}

/* Items Table */
.mai-items-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       14px;
}
.mai-items-table th {
    background:    var(--mai-surface);
    padding:       8px 10px;
    text-align:    left;
    font-weight:   600;
    border-bottom: 2px solid var(--mai-border);
    color:         var(--mai-text-muted);
    font-size:     12px;
    white-space:   nowrap;
}
.mai-items-table td {
    padding:       6px 8px;
    border-bottom: 1px solid var(--mai-border);
    vertical-align: middle;
}
.mai-items-table input {
    border:        1px solid var(--mai-border);
    border-radius: 6px;
    padding:       6px 8px;
    font-size:     13px;
    width:         100%;
    box-sizing:    border-box;
    font-family:   var(--mai-font);
    outline:       none;
}
.mai-items-table input:focus {
    border-color: var(--mai-primary);
}
.mai-col-service     { width: 22%; }
.mai-col-description { width: 35%; }
.mai-col-qty         { width: 8%; }
.mai-col-price       { width: 14%; }
.mai-col-total       { width: 14%; font-weight: 600; }
.mai-col-del         { width: 7%; text-align: center; }

.mai-del-row {
    background:    none;
    border:        none;
    color:         #ef4444;
    cursor:        pointer;
    font-size:     16px;
    padding:       4px 6px;
    border-radius: 4px;
}
.mai-del-row:hover { background: #fee2e2; }

.mai-add-item-btn {
    margin-top:    10px;
    background:    none;
    border:        1px dashed var(--mai-primary);
    color:         var(--mai-primary);
    border-radius: 8px;
    padding:       7px 14px;
    font-size:     13px;
    cursor:        pointer;
    transition:    background 0.2s;
    font-family:   var(--mai-font);
}
.mai-add-item-btn:hover { background: var(--mai-primary-light); }

/* Totals */
.mai-totals {
    background:    var(--mai-surface);
    border-radius: 10px;
    padding:       14px 18px;
    margin:        16px 0;
}
.mai-total-row {
    display:         flex;
    justify-content: space-between;
    font-size:       14px;
    padding:         5px 0;
    color:           var(--mai-text);
    border-bottom:   1px solid var(--mai-border);
}
.mai-total-row:last-child { border-bottom: none; }
.mai-total-row.mai-grand {
    font-size:   17px;
    font-weight: 800;
    color:       var(--mai-primary);
    padding-top: 10px;
    margin-top:  4px;
}

/* Modal Footer */
.mai-modal-footer {
    padding:         16px 24px;
    border-top:      1px solid var(--mai-border);
    display:         flex;
    gap:             10px;
    justify-content: flex-end;
    position:        sticky;
    bottom:          0;
    background:      #fff;
}
.mai-btn-primary {
    background:    var(--mai-primary);
    color:         #fff;
    border:        none;
    border-radius: 8px;
    padding:       10px 22px;
    font-size:     14px;
    font-weight:   700;
    cursor:        pointer;
    transition:    background 0.2s, transform 0.1s;
    font-family:   var(--mai-font);
}
.mai-btn-primary:hover {
    background: var(--mai-primary-dark);
    transform:  translateY(-1px);
}
.mai-btn-secondary {
    background:    transparent;
    color:         var(--mai-text-muted);
    border:        1px solid var(--mai-border);
    border-radius: 8px;
    padding:       10px 18px;
    font-size:     14px;
    cursor:        pointer;
    transition:    background 0.2s;
    font-family:   var(--mai-font);
}
.mai-btn-secondary:hover { background: var(--mai-surface); }

/* ══ Error message ══ */
.mai-error-bubble {
    background:    #fee2e2;
    color:         #b91c1c;
    border-left:   4px solid #ef4444;
    padding:       10px 14px;
    border-radius: 8px;
    font-size:     13px;
}

/* ══ Responsive ══ */
@media (max-width: 600px) {
    .mai-message         { max-width: 92%; }
    .mai-form-grid       { grid-template-columns: 1fr; }
    .mai-items-table th,
    .mai-items-table td  { padding: 5px 6px; font-size: 12px; }
    .mai-modal           { max-height: 95vh; }
    .mai-col-description { display: none; }
}