1|     1|.report-page { 
     2|     2|    display: flex; 
     3|     3|    flex-direction: column; 
     4|     4|    height: calc(100vh - 80px); 
     5|     5|}
     6|     6|
     7|     7|.chat-window { 
     8|     8|    flex: 1; 
     9|     9|    border: 1px solid var(--border); 
    10|    10|    background: var(--card-bg); 
    11|    11|    padding: 20px; 
    12|    12|    overflow-y: auto; 
    13|    13|    margin-bottom: 20px; 
    14|    14|    border-radius: var(--radius-md); 
    15|    15|    box-shadow: var(--shadow);
    16|    16|}
    17|    17|
    18|    18|.msg { 
    19|    19|    margin-bottom: 15px; 
    20|    20|    padding: 12px 16px; 
    21|    21|    border-radius: var(--radius-md); 
    22|    22|    max-width: 80%; 
    23|    23|    line-height: 1.5;
    24|    24|    font-size: 14px;
    25|    25|}
    26|    26|
    27|    27|.msg.user { 
    28|    28|    background: var(--msg-user); 
    29|    29|    align-self: flex-end; 
    30|    30|    margin-left: auto; 
    31|    31|    border-bottom-right-radius: 2px;
    32|    32|}
    33|    33|
    34|    34|.msg.system { 
    35|    35|    background: var(--msg-system); 
    36|    36|    align-self: flex-start; 
    37|    37|    border-bottom-left-radius: 2px;
    38|    38|}
    39|    39|
    40|    40|.msg.result { 
    41|    41|    background: var(--msg-result); 
    42|    42|    border: 1px solid #2196f3; 
    43|    43|    border-bottom-left-radius: 2px;
    44|    44|}
    45|    45|
    46|    46|.input-container { 
    47|    47|    display: flex; 
    48|    48|    flex-direction: column; 
    49|    49|    gap: 15px; 
    50|    50|    margin-bottom: 20px; 
    51|    51|}
    52|    52|
    54|    54|    display: flex; 
    55|    55|    gap: 15px; 
    56|    56|    align-items: flex-end; 
    57|    57|}
    58|    58|
    60|    60|    display: flex; 
    61|    61|    flex-direction: column; 
    62|    62|    gap: 5px; 
    63|    63|}
    64|    64|
    66|    66|    font-size: 12px; 
    67|    67|    font-weight: 600; 
    68|    68|    color: var(--text-secondary); 
    69|    69|}
    70|    70|
    72|    72|    padding: 8px; 
    73|    73|    border-radius: var(--radius-sm); 
    74|    74|    border: 1px solid var(--border); 
    75|    75|    background: white;
    76|    76|}
    77|    77|
    79|    79|    display: flex; 
    80|    80|    gap: 10px; 
    81|    81|}
    82|    82|
    84|    84|    flex: 1; 
    85|    85|    height: 60px; 
    86|    86|    padding: 10px; 
    87|    87|    border-radius: var(--radius-sm); 
    88|    88|    border: 1px solid var(--border); 
    89|    89|    font-family: inherit;
    90|    90|}
    91|    91|
    93|    93|    padding: 0 20px; 
    94|    94|    cursor: pointer; 
    95|    95|    background: var(--primary); 
    96|    96|    color: white; 
    97|    97|    border: none; 
    98|    98|    border-radius: var(--radius-sm); 
    99|    99|    transition: background 0.2s ease;
   100|   100|}
   101|   101|
   103|   103|    background: var(--primary-light);
   104|   104|}
   105|   105|
   106|   106|.spinner {
   107|   107|    width: 18px; height: 18px; border: 2px solid #f3f3f3;
   108|   108|    border-top: 2px solid #3498db; border-radius: 50%;
   109|   109|    animation: spin 1s linear infinite; display: inline-block;
   110|   110|    vertical-align: middle; margin-right: 10px;
   111|   111|}
   112|   112|
   113|   113|@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
   114|   114|
   115|   115|@media (max-width: 768px) {
   118|   118|    .msg { max-width: 90%; }
   119|   119|}
   120|   120|
   121|
   122|.result-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
   123|.result-title { font-weight: 800; font-size: 15px; color: var(--primary); }
   124|.severity-badge { 
   125|    padding: 2px 8px; 
   126|    border-radius: 10px; 
   127|    font-size: 11px; 
   128|    font-weight: bold; 
   129|    color: white; 
   130|    text-transform: uppercase;
   131|}
   132|.severity-p0 { background: var(--danger); }
   133|.severity-p1 { background: var(--warning); }
   134|.severity-p2 { background: #f1c40f; color: #333; }
   135|.severity-p3 { background: var(--success); }
   136|
   137|.result-body { font-size: 13px; }
   138|.result-item { margin-bottom: 8px; }
   139|.result-divider { border: 0; border-top: 1px solid var(--border); margin: 10px 0; }
   140|.result-diagnostic { margin-bottom: 10px; line-height: 1.6; }
   141|.result-info { font-size: 12px; color: var(--text-secondary); background: rgba(0,0,0,0.03); padding: 8px; border-radius: var(--radius-sm); }
   142|.result-footer { margin-top: 10px; text-align: right; border-top: 1px solid var(--border); padding-top: 5px; }
   143|

.page-title { margin-bottom: 20px; font-weight: 800; }

.input-container { 
    display: flex; 
    flex-direction: column; 
    gap: 15px; 
    margin-bottom: 20px; 
}

.input-row.top-row { 
    display: flex; 
    gap: 15px; 
    align-items: center; 
}

.input-group { 
    display: flex; 
    flex-direction: column; 
    gap: 5px; 
}

.input-group label { 
    font-size: 12px; 
    font-weight: 600; 
    color: var(--text-secondary); 
}

.input-group select { 
    padding: 8px; 
    border-radius: var(--radius-sm); 
    border: 1px solid var(--border); 
    background: var(--card-bg);
    color: var(--text-primary);
}

.textarea-wrapper { 
    position: relative; 
    display: flex; 
    flex-direction: column;
    gap: 10px;
}

.textarea-wrapper textarea { 
    width: 100%; 
    height: 200px; 
    padding: 15px; 
    border-radius: var(--radius-md); 
    border: 1px solid var(--border); 
    font-family: inherit;
    font-size: 14px;
    background: var(--card-bg);
    color: var(--text-primary);
    box-sizing: border-box;
    resize: vertical;
    box-shadow: var(--shadow);
}

.textarea-wrapper button { 
    align-self: flex-end; 
    padding: 12px 30px; 
    cursor: pointer; 
    background: var(--primary); 
    color: white; 
    border: none; 
    border-radius: var(--radius-sm); 
    font-weight: 600;
    transition: background 0.2s ease;
    box-shadow: var(--shadow);
}

.textarea-wrapper button:hover { 
    background: var(--primary-light); 
}

.chat-window { 
    flex: 1; 
    border: 1px solid var(--border); 
    background: var(--card-bg); 
    padding: 20px; 
    overflow-y: auto; 
    margin-bottom: 20px; 
    border-radius: var(--radius-md); 
    box-shadow: var(--shadow);
}