/* ============================================
   LLM Content Styling
   Stili dedicati per il contenuto HTML generato
   dagli LLM all'interno di .chat-conversation-container .message-content
   ============================================ */

/* Div generico */

.chat-conversation-container .message-content .message-text > div:not(.message-artifact) {
    font-family: inherit !important;
    padding: inherit !important;
    border: inherit !important;
    border-radius: inherit !important;
    background-color: inherit !important;
}

/* Titoli */
.chat-conversation-container .message-content h1,
.chat-conversation-container .message-content h2,
.chat-conversation-container .message-content h3,
.chat-conversation-container .message-content h4,
.chat-conversation-container .message-content h5,
.chat-conversation-container .message-content h6 {
    font-weight: 600 !important;
    color: #2d2d2d !important;
    margin-top: 24px !important;
    margin-bottom: 16px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.3px !important;
}

.chat-conversation-container .message-content h2:first-child,
.chat-conversation-container .message-content h3:first-child,
.chat-conversation-container .message-content h4:first-child,
.chat-conversation-container .message-content h5:first-child,
.chat-conversation-container .message-content h6:first-child {
    margin-top: -6px !important;
}

.chat-conversation-container .message-content h1 {
    font-size: 28px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #e5e5e5 !important;
    margin-top: -4px !important;
}

.chat-conversation-container .message-content h2 {
    font-size: 24px !important;
    padding-bottom: 8px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.chat-conversation-container .message-content h3 {
    font-size: 20px !important;
}

.chat-conversation-container .message-content h4 {
    font-size: 18px !important;
}

.chat-conversation-container .message-content h5 {
    font-size: 16px !important;
}

.chat-conversation-container .message-content h6 {
    font-size: 15px !important;
    color: #666 !important;
}

/* Paragrafi */
.chat-conversation-container .message-content p {
    margin-bottom: 16px !important;
    line-height: 1.7 !important;
    color: #2d2d2d !important;
}

.chat-conversation-container .message-content p:last-child {
    margin-bottom: 0 !important;
}

/* Link */
.chat-conversation-container .message-content a {
    color: #1F77BC !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.2s !important;
}

.chat-conversation-container .message-content a:hover {
    color: #1a5f9a !important;
    border-bottom-color: #1a5f9a !important;
}

.chat-conversation-container .message-content a:visited {
    color: #9B59B6 !important;
}

/* Enfasi */
.chat-conversation-container .message-content strong,
.chat-conversation-container .message-content b {
    font-weight: 600 !important;
    color: #2d2d2d !important;
}

.chat-conversation-container .message-content em,
.chat-conversation-container .message-content i {
    font-style: italic !important;
    color: #666 !important;
}

.chat-conversation-container .message-content mark {
    background-color: #fff3cd !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
}

/* Liste */
.chat-conversation-container .message-content ul,
.chat-conversation-container .message-content ol {
    margin: 0 0 16px 0 !important;
    padding-left: 28px !important;
}

.chat-conversation-container .message-content ul {
    list-style-type: disc !important;
}

.chat-conversation-container .message-content ol {
    list-style-type: decimal !important;
}

.chat-conversation-container .message-content li {
    margin-bottom: 8px !important;
    line-height: 1.6 !important;
    padding-left: 8px !important;
}

.chat-conversation-container .message-content li:last-child {
    margin-bottom: 0 !important;
}

.chat-conversation-container .message-content li > ul,
.chat-conversation-container .message-content li > ol {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
}

.chat-conversation-container .message-content ul ul {
    list-style-type: circle !important;
}

.chat-conversation-container .message-content ul ul ul {
    list-style-type: square !important;
}

/* Liste di definizione */
.chat-conversation-container .message-content dl {
    margin: 0 0 16px 0 !important;
}

.chat-conversation-container .message-content dt {
    font-weight: 600 !important;
    color: #2d2d2d !important;
    margin-top: 12px !important;
    margin-bottom: 4px !important;
}

.chat-conversation-container .message-content dt:first-child {
    margin-top: 0 !important;
}

.chat-conversation-container .message-content dd {
    margin-left: 24px !important;
    margin-bottom: 8px !important;
    color: #666 !important;
    line-height: 1.6 !important;
}

/* Tabelle */
.chat-conversation-container .message-content table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 0 20px 0 !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.chat-conversation-container .message-content thead {
    background-color: #f9f9f9 !important;
}

.chat-conversation-container .message-content thead th {
    font-weight: 600 !important;
    color: #2d2d2d !important;
    text-align: left !important;
    padding: 12px 16px !important;
    border-bottom: 2px solid #e5e5e5 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.chat-conversation-container .message-content tbody tr {
    border-bottom: 1px solid #f0f0f0 !important;
    transition: background-color 0.2s !important;
}

.chat-conversation-container .message-content tbody tr:last-child {
    border-bottom: none !important;
}

.chat-conversation-container .message-content tbody tr:hover {
    background-color: #f9f9f9 !important;
}

.chat-conversation-container .message-content tbody td {
    padding: 12px 16px !important;
    color: #2d2d2d !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.chat-conversation-container .message-content tbody td:first-child {
    font-weight: 500 !important;
}

/* Tabelle responsive */
@media (max-width: 768px) {
    .chat-conversation-container .message-content table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }
}

/* Codice inline */
.chat-conversation-container .message-content code {
    background-color: #f5f5f5 !important;
    color: #E74C3C !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    font-size: 13px !important;
    border: 1px solid #e5e5e5 !important;
}

/* Blocchi di codice */
.chat-conversation-container .message-content pre {
    background-color: #2d2d2d !important;
    color: #f8f8f2 !important;
    padding: 16px !important;
    border-radius: 8px !important;
    overflow-x: auto !important;
    margin: 0 0 20px 0 !important;
    border: 1px solid #1a1a1a !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.chat-conversation-container .message-content pre code {
    background-color: transparent !important;
    color: inherit !important;
    padding: 0 !important;
    border: none !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
}

/* Scrollbar per blocchi di codice */
.chat-conversation-container .message-content pre::-webkit-scrollbar {
    height: 8px !important;
}

.chat-conversation-container .message-content pre::-webkit-scrollbar-track {
    background: #1a1a1a !important;
    border-radius: 4px !important;
}

.chat-conversation-container .message-content pre::-webkit-scrollbar-thumb {
    background: #555 !important;
    border-radius: 4px !important;
}

.chat-conversation-container .message-content pre::-webkit-scrollbar-thumb:hover {
    background: #666 !important;
}

/* Citazioni */
.chat-conversation-container .message-content blockquote {
    margin: 0 0 20px 0 !important;
    padding: 16px 20px !important;
    border-left: 4px solid #1F77BC !important;
    background-color: #f9f9f9 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #666 !important;
    font-style: italic !important;
}

.chat-conversation-container .message-content blockquote p {
    margin-bottom: 8px !important;
}

.chat-conversation-container .message-content blockquote p:last-child {
    margin-bottom: 0 !important;
}

.chat-conversation-container .message-content blockquote cite {
    display: block !important;
    margin-top: 8px !important;
    font-size: 13px !important;
    color: #999 !important;
    font-style: normal !important;
}

.chat-conversation-container .message-content blockquote cite::before {
    content: "— " !important;
}

/* Linee orizzontali */
.chat-conversation-container .message-content hr {
    margin: 32px 0 !important;
    border: none !important;
    border-top: 2px solid #e5e5e5 !important;
}

/* Immagini */
.chat-conversation-container .message-content img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
    margin: 20px 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.chat-conversation-container .message-content figure {
    margin: 0 0 20px 0 !important;
}

.chat-conversation-container .message-content figcaption {
    margin-top: 8px !important;
    font-size: 13px !important;
    color: #999 !important;
    text-align: center !important;
    font-style: italic !important;
}

/* Contenitori speciali */
.chat-conversation-container .message-content .note,
.chat-conversation-container .message-content .warning,
.chat-conversation-container .message-content .info,
.chat-conversation-container .message-content .tip {
    padding: 16px 20px !important;
    border-radius: 8px !important;
    margin: 0 0 20px 0 !important;
    border-left: 4px solid !important;
}

.chat-conversation-container .message-content .note {
    background-color: #e8f4fc !important;
    border-color: #1F77BC !important;
    color: #1a5f9a !important;
}

.chat-conversation-container .message-content .warning {
    background-color: #fff3e0 !important;
    border-color: #F39C12 !important;
    color: #d68910 !important;
}

.chat-conversation-container .message-content .info {
    background-color: #e8f5e9 !important;
    border-color: #27AE60 !important;
    color: #1e8449 !important;
}

.chat-conversation-container .message-content .tip {
    background-color: #f3e5f5 !important;
    border-color: #9B59B6 !important;
    color: #7d3c98 !important;
}

/* Dettagli/Summary */
.chat-conversation-container .message-content details {
    margin: 0 0 16px 0 !important;
    padding: 16px !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 8px !important;
}

.chat-conversation-container .message-content summary {
    cursor: pointer !important;
    font-weight: 600 !important;
    color: #1F77BC !important;
    user-select: none !important;
    padding: 4px 0 !important;
}

.chat-conversation-container .message-content summary:hover {
    color: #1a5f9a !important;
}

.chat-conversation-container .message-content details[open] summary {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #e5e5e5 !important;
}

/* Abbreviazioni */
.chat-conversation-container .message-content abbr {
    text-decoration: underline dotted !important;
    cursor: help !important;
    border-bottom: 1px dotted #999 !important;
}

/* Testo barrato */
.chat-conversation-container .message-content del,
.chat-conversation-container .message-content s {
    text-decoration: line-through !important;
    color: #999 !important;
}

/* Testo sottolineato */
.chat-conversation-container .message-content ins,
.chat-conversation-container .message-content u {
    text-decoration: underline !important;
    color: #27AE60 !important;
}

/* Testo piccolo */
.chat-conversation-container .message-content small {
    font-size: 13px !important;
    color: #999 !important;
}

/* Subscript e Superscript */
.chat-conversation-container .message-content sub,
.chat-conversation-container .message-content sup {
    font-size: 11px !important;
    line-height: 0 !important;
}

/* Tastiera */
.chat-conversation-container .message-content kbd {
    background-color: #2d2d2d !important;
    color: #ffffff !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    font-size: 12px !important;
    border: 1px solid #1a1a1a !important;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Variabili */
.chat-conversation-container .message-content var {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    font-style: italic !important;
    color: #9B59B6 !important;
}

/* Sample output */
.chat-conversation-container .message-content samp {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
    background-color: #f5f5f5 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
}

/* Task lists (GitHub style) */
.chat-conversation-container .message-content input[type="checkbox"] {
    margin-right: 8px !important;
    cursor: pointer !important;
}

.chat-conversation-container .message-content li input[type="checkbox"] {
    margin-left: -24px !important;
    margin-right: 8px !important;
}

/* Responsive */
@media (max-width: 768px) {
    .chat-conversation-container .message-content h1 {
        font-size: 24px !important;
    }
    
    .chat-conversation-container .message-content h2 {
        font-size: 20px !important;
    }
    
    .chat-conversation-container .message-content h3 {
        font-size: 18px !important;
    }
    
    .chat-conversation-container .message-content h4 {
        font-size: 16px !important;
    }
    
    .chat-conversation-container .message-content ul,
    .chat-conversation-container .message-content ol {
        padding-left: 20px !important;
    }
    
    .chat-conversation-container .message-content blockquote {
        padding: 12px 16px !important;
    }
    
    .chat-conversation-container .message-content pre {
        padding: 12px !important;
        font-size: 12px !important;
    }
}