/* 
 * Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license.
 * See LICENSE in the project root for license information.
 */

 html,
 body {
     width: 100%;
     height: 100%;
     margin: 0;
     padding: 0;
 }
 
 ul {
     margin: 0;
     padding: 0;
 }
 
 .ms-welcome__header {
     padding: 20px;
     padding-bottom: 30px;
     padding-top: 100px;
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: column;
     flex-direction: column;
     align-items: center;
 }
 
 .ms-welcome__main {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-direction: column;
     flex-direction: column;
     -webkit-flex-wrap: nowrap;
     flex-wrap: nowrap;
     -webkit-align-items: center;
     align-items: center;
     -webkit-flex: 1 0 0;
     flex: 1 0 0;
     padding: 10px 20px;
     min-height: 60vh;
     height: 100%;
     box-sizing: border-box;
 }
 
 .ms-welcome__main > h2 {
     width: 100%;
     text-align: center;
 }
 
 .ms-welcome__features {
     list-style-type: none;
     margin-top: 20px;
 }
 
 .ms-welcome__features.ms-List .ms-ListItem {
     padding-bottom: 20px;
     display: -webkit-flex;
     display: flex;
 }
 
 .ms-welcome__features.ms-List .ms-ListItem > .ms-Icon {
     margin-right: 10px;
 }
 
 .ms-welcome__action.ms-Button--hero {
     margin-top: 30px;
 }
 
 .ms-Button.ms-Button--hero .ms-Button-label {
     color: #0078d7;
 }
 
 .ms-Button.ms-Button--hero:hover .ms-Button-label,
 .ms-Button.ms-Button--hero:focus .ms-Button-label {
     color: #005a9e;
     cursor: pointer;
 }
 
 b {
     font-weight: bold;
 }
 
 #summarizeBtn {
     background: #B2E6F0;
     color: #015162;
     border: none;
     border-radius: 6px;
     padding: 0.75em 2em;
     font-size: 1.2em;
     box-shadow: 0 2px 4px rgba(0,0,0,0.05);
     margin-top: 10px;
     cursor: pointer;
     display: block;              /* Ensures block-level for margin auto */
     margin-left: auto;           /* Center horizontally */
     margin-right: auto;          /* Center horizontally */
     min-width: 160px;            /* Looks better on mobile */
     max-width: 90vw;             /* Responsive on mobile */
     width: fit-content;          /* Shrinks to fit content, expands to min/max */
     transition: background 0.2s;
 }
 
 #summarizeBtn:hover, #summarizeBtn:focus {
     background: #81C1CB;
 }
 
 /* ----------- MARKDOWN RENDERING STYLES ----------- */
 #summaryOutput {
     margin-top: 2em;
     border: 1px solid #ccc;
     padding: 1em;
     border-radius: 7px;
     min-height: 40px;
     max-width: 95%;
     width: 100%;
     background: #fff;
     white-space: pre-wrap;      /* Wrap text, preserve line breaks */
     overflow-y: auto;           /* Vertical scroll if needed */
     overflow-x: hidden;         /* Prevent horizontal scroll */
     max-height: 400px;
     font-size: 1.08em;
     color: #13485b;
     box-shadow: 0 2px 8px rgba(0,0,0,0.07);
     scrollbar-width: thin;
     scrollbar-color: #81C1CB #e0e0e0;
     word-break: break-word;
 }
 
 /* Custom scrollbars */
 #summaryOutput::-webkit-scrollbar {
     width: 8px;
 }
 #summaryOutput::-webkit-scrollbar-thumb {
     background: #81C1CB;
     border-radius: 4px;
 }
 #summaryOutput::-webkit-scrollbar-track {
     background: #e0e0e0;
     border-radius: 4px;
 }

/* ============================================================================
   COMPACT MARKDOWN RENDERING (CHAT / ASSISTANT)
   ============================================================================ */
.markdown-content {
    font-size: 13px;
    line-height: 1.4;
}

.markdown-content p {
    margin: 0 0 4px 0;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
    margin: 4px 0 2px 0;
    line-height: 1;
}

.markdown-content h1 { font-size: 16px; }
.markdown-content h2 { font-size: 15px; }
.markdown-content h3 { font-size: 14px; }
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 { font-size: 13px; }

.markdown-content ul,
.markdown-content ol {
    margin: 0 0 4px 18px;
    padding-left: 16px;
}

.markdown-content li {
    margin: 1px 0;
}

.markdown-content code {
    font-size: 12px;
}

.markdown-content pre {
    margin: 4px 0;
    padding: 6px 8px;
    font-size: 12px;
}

.chat-history::-webkit-scrollbar,
.document-content::-webkit-scrollbar,
.diff-comparison::-webkit-scrollbar {
    width: 6px;
}

.chat-history::-webkit-scrollbar-thumb,
.document-content::-webkit-scrollbar-thumb,
.diff-comparison::-webkit-scrollbar-thumb {
    background: #b9c7ce;
    border-radius: 6px;
}

.chat-history::-webkit-scrollbar-track,
.document-content::-webkit-scrollbar-track,
.diff-comparison::-webkit-scrollbar-track {
    background: transparent;
}

 /* ============================================================================
    TAB NAVIGATION
    ============================================================================ */
 .evraka-tabs {
     display: flex;
     gap: 10px;
     margin-bottom: 20px;
     width: 100%;
     border-bottom: 2px solid #e0e0e0;
     padding: 0 10px;
 }

 .evraka-tab-btn {
     padding: 12px 20px;
     border: none;
     background: transparent;
     color: #666;
     font-size: 0.95em;
     font-weight: 500;
     cursor: pointer;
     border-bottom: 3px solid transparent;
     transition: all 0.2s;
 }

 .evraka-tab-btn:hover {
     color: #015162;
 }

 .evraka-tab-btn.active {
     color: #015162;
     border-bottom-color: #81C1CB;
 }

 .evraka-tab-content {
     display: none;
     width: 100%;
     padding: 20px;
     animation: fadeIn 0.3s;
 }

 .evraka-tab-content.active {
     display: block;
 }

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

 /* ============================================================================
    CHAT INTERFACE
    ============================================================================ */
 .chat-container {
     display: flex;
     flex-direction: column;
     height: 500px;
     border: 1px solid #e0e0e0;
     border-radius: 8px;
     overflow: hidden;
     background: #fff;
 }

 .chat-history {
     flex: 1;
     overflow-y: auto;
     padding: 15px;
     background: #fafafa;
    scrollbar-width: thin;
    scrollbar-color: #b9c7ce transparent;
 }

.assistant-chat-controls {
    margin-bottom: 12px;
}

.assistant-chat-tabs {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    justify-content: space-between;
}

.assistant-chat-list {
    display: flex;
    align-items: flex-end;
    flex: 1;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-width: thin;
    scrollbar-color: #b9c7ce transparent;
}

.assistant-chat-list::-webkit-scrollbar {
    height: 6px;
}

.assistant-chat-list::-webkit-scrollbar-thumb {
    background: #b9c7ce;
    border-radius: 6px;
}

.assistant-chat-list::-webkit-scrollbar-track {
    background: transparent;
}

.assistant-chat-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    background: #f4f5f7;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.04);
}

.assistant-chat-item:not(:first-child) {
    margin-left: -8px;
    box-shadow: -6px 0 8px rgba(0, 0, 0, 0.08);
}

.assistant-chat-item.active {
    border-color: #81C1CB;
    background: #fff;
    color: #013b4d;
    z-index: 2;
    box-shadow: 0 -1px 0 #fff, 0 2px 6px rgba(0, 0, 0, 0.08);
}

.assistant-chat-item-title {
    font-size: 0.9em;
    color: #013b4d;
}

.assistant-chat-item-meta {
    display: none;
}

.assistant-chat-item-actions {
    display: flex;
    align-items: center;
}

.assistant-chat-item-delete {
    border: none;
    background: transparent;
    color: #6c757d;
    padding: 2px 2px;
    cursor: pointer;
}

.assistant-chat-item:hover .assistant-chat-item-delete {
    color: #dc3545;
}

.assistant-chat-item-undo {
    border-color: #ffc107;
    background: #fff8e1;
}

.assistant-chat-item-undo .assistant-chat-item-title {
    color: #856404;
}

.assistant-new-chat-btn {
    white-space: nowrap;
    border-radius: 8px;
    align-self: flex-end;
}

.assistant-chat-thread {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    margin-bottom: 12px;
}

.assistant-chat-thread .chat-history {
    max-height: 220px;
    overflow-y: auto;
}

.assistant-chat-history-toggle {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}

.assistant-chat-history-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: transparent;
    color: #6c757d;
    font-size: 12px;
    padding: 2px 0;
    cursor: pointer;
}

.assistant-chat-history-toggle-btn i {
    font-size: 12px;
}

.assistant-chat-history-toggle-btn:hover {
    color: #015162;
}

 .chat-message {
     margin-bottom: 12px;
     display: flex;
     animation: slideIn 0.3s;
 }

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

 .chat-message-user {
     justify-content: flex-end;
 }

 .chat-message-user .chat-message-content {
     background: #81C1CB;
     color: #fff;
 }

 .chat-message-assistant {
     justify-content: flex-start;
 }

 .chat-message-assistant .chat-message-content {
     background: #e8f4f8;
     color: #013b4d;
 }

 .chat-message-system {
     justify-content: center;
 }

 .chat-message-system .chat-message-content {
     background: #fff3cd;
     color: #664d03;
     font-size: 0.9em;
 }

 .chat-message-content {
     max-width: 80%;
     padding: 10px 12px;
     border-radius: 6px;
     word-wrap: break-word;
     line-height: 1.4;
 }

 .chat-message-content p {
     margin: 0 0 5px 0;
 }

 .chat-message-content p:last-child {
     margin: 0;
 }

 /* ============================================================================
    CHAT INPUT AREA
    ============================================================================ */
 .chat-input-area {
     padding: 12px;
     border-top: 1px solid #e0e0e0;
     background: #fff;
 }

 #chatInput {
     width: 100%;
     padding: 10px;
     border: 1px solid #ddd;
     border-radius: 6px;
     font-family: inherit;
     font-size: 0.95em;
     resize: none;
     margin-bottom: 8px;
     box-sizing: border-box;
 }

 #chatInput:focus {
     outline: none;
     border-color: #81C1CB;
     box-shadow: 0 0 0 3px rgba(129, 193, 203, 0.1);
 }

 .chat-button-group {
     display: flex;
     gap: 8px;
 }

 .btn-send, .btn-accept, .btn-reject {
     flex: 1;
     padding: 10px 15px;
     border: none;
     border-radius: 6px;
     font-weight: 500;
     cursor: pointer;
     transition: all 0.2s;
 }

 .btn-send {
     background: #81C1CB;
     color: #fff;
 }

 .btn-send:hover {
     background: #6db5be;
     transform: translateY(-1px);
     box-shadow: 0 2px 6px rgba(129, 193, 203, 0.3);
 }

 .btn-accept {
     background: #28a745;
     color: #fff;
 }

 .btn-accept:hover {
     background: #218838;
 }

 .btn-reject {
     background: #dc3545;
     color: #fff;
 }

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

 /* ============================================================================
    REDLINE DIFF STYLING
    ============================================================================ */
 .redline-diff {
     margin: 15px 0;
     padding: 12px;
     background: #f8f9fa;
     border-left: 4px solid #81C1CB;
     border-radius: 6px;
 }

 .diff-explanation {
     margin-bottom: 12px;
 }

 .diff-explanation strong {
     color: #015162;
 }

/* ============================================================================
    SEARCH RESULTS STYLING
    ============================================================================ */
.assistant-search-results {
    margin: 20px 0;
    width: 100%;
}

.search-results-content {
    width: 100%;
}

.search-results-header {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid #e0e0e0;
}

.search-results-header h3 {
    font-size: 18px;
    color: #015162;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.search-results-count {
    color: #666;
    font-size: 14px;
}

.search-results-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.case-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.case-card:hover {
    border-color: #81C1CB;
    box-shadow: 0 4px 8px rgba(129, 193, 203, 0.15);
    transform: translateY(-2px);
}

.case-card.expanded {
    border-color: #81C1CB;
    box-shadow: 0 4px 12px rgba(129, 193, 203, 0.2);
}

.case-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.case-title {
    font-size: 16px;
    font-weight: 600;
    color: #015162;
    margin: 0;
    flex: 1;
    line-height: 1.4;
}

.case-expand-icon {
    color: #81C1CB;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.case-card.expanded .case-expand-icon {
    transform: rotate(180deg);
}

.case-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #666;
}

.case-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.case-meta-item strong {
    color: #015162;
    font-weight: 600;
}

.case-summary {
    color: #333;
    font-size: 14px;
    line-height: 1.6;
    margin-top: 12px;
    display: none;
}

.case-card.expanded .case-summary {
    display: block;
}

.case-url {
    margin-top: 12px;
    display: block;
}

.case-url a {
    color: #81C1CB;
    text-decoration: none;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.case-url a:hover {
    text-decoration: underline;
}

.search-results-empty {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.search-results-error {
    padding: 16px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    color: #664d03;
    margin: 16px 0;
}

/* ============================================================================
   DOCUMENT MODAL STYLING
   ============================================================================ */
.document-modal {
    display: none;
    position: fixed;
    z-index: 10000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
}

.document-modal-content {
    background-color: #fff;
    margin: 2% auto;
    padding: 0;
    border: 1px solid #888;
    border-radius: 8px;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.document-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
}

.document-modal-header h3 {
    margin: 0;
    color: #015162;
    font-size: 1.3em;
}

.document-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    font-weight: bold;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.document-modal-close:hover {
    background: #e0e0e0;
    color: #000;
}

.document-content {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    max-height: calc(90vh - 80px);
    scrollbar-width: thin;
    scrollbar-color: #b9c7ce transparent;
}

.structured-document {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: #333;
}

.document-header-section {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #81C1CB;
}

.document-header-text {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    white-space: pre-wrap;
    word-wrap: break-word;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    border-left: 4px solid #81C1CB;
    margin: 0;
}

.document-main-section {
    margin-top: 20px;
}

.document-main-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95em;
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.8;
    padding: 15px;
    background: #fff;
    border-radius: 4px;
    margin: 0;
}

.document-content .loading {
    text-align: center;
    padding: 40px;
    color: #666;
    font-size: 1.1em;
}

.document-content .error {
    text-align: center;
    padding: 40px;
    color: #d32f2f;
    font-size: 1.1em;
    background: #ffebee;
    border-radius: 4px;
}

/* Document Search Controls */
.document-search-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
    flex: 1;
    max-width: 400px;
}

.document-search-input {
    flex: 1;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    min-width: 150px;
}

.document-search-input:focus {
    outline: none;
    border-color: #81C1CB;
    box-shadow: 0 0 0 2px rgba(129, 193, 203, 0.2);
}

.document-search-btn {
    padding: 6px 12px;
    background: #81C1CB;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.document-search-btn:hover {
    background: #6ba8b3;
}

.document-search-results {
    font-size: 12px;
    color: #666;
    min-width: 60px;
    text-align: center;
}

.document-search-nav {
    padding: 4px 8px;
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    min-width: 28px;
}

.document-search-nav:hover:not(:disabled) {
    background: #e0e0e0;
}

.document-search-nav:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.document-search-highlight {
    background-color: #ffeb3b;
    color: #000;
    padding: 2px 0;
    font-weight: 500;
}

.document-search-highlight.active {
    background-color: #ff9800;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0 4px rgba(255, 152, 0, 0.5);
}

.document-header-text,
.document-main-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    line-height: 1.8;
}

.document-header-text {
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
    background: #f8f9fa;
    padding: 15px;
    border-radius: 4px;
    border-left: 4px solid #81C1CB;
}

.document-main-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 0.95em;
    padding: 15px;
    background: #fff;
    border-radius: 4px;
}

 .diff-explanation p {
     margin: 5px 0 0 0;
     font-size: 0.9em;
     color: #666;
 }

 .diff-content {
     background: #fff;
     padding: 10px;
     border-radius: 4px;
     font-size: 0.95em;
     line-height: 1.6;
     word-break: break-word;
 }

 .redline-view {
     display: inline;
 }

 .redline-insertion {
     background-color: rgba(40, 167, 69, 0.2);
     color: #155724;
     padding: 2px 4px;
     border-radius: 3px;
     border-bottom: 2px solid #28a745;
     font-weight: 500;
 }

 .redline-deletion {
     background-color: rgba(220, 53, 69, 0.2);
     color: #721c24;
     padding: 2px 4px;
     border-radius: 3px;
     text-decoration: line-through;
     opacity: 0.7;
 }

 .diff-comparison {
     display: flex;
     gap: 12px;
     max-height: 200px;
     overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #b9c7ce transparent;
 }

 .diff-column {
     flex: 1;
 }

 .diff-column h4 {
     margin: 0 0 8px 0;
     font-size: 0.9em;
     color: #015162;
 }

 .diff-column p {
     margin: 0;
     line-height: 1.5;
     word-break: break-word;
 }

 .word-original {
     background: rgba(220, 53, 69, 0.15);
     padding: 2px 4px;
     border-radius: 3px;
     text-decoration: line-through;
     color: #856404;
 }

 .word-edited {
     background: rgba(40, 167, 69, 0.15);
     padding: 2px 4px;
     border-radius: 3px;
     color: #155724;
 }

.review-playbook-controls {
    display: flex;
    gap: 8px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.review-playbook-controls .form-select {
    min-width: 220px;
    flex: 1 1 220px;
}

.review-playbook-status {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
}

.review-playbook-results {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.review-playbook-result-card {
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
}

.review-playbook-result-header {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: flex-start;
    margin-bottom: 4px;
}

.review-playbook-result-card:not(.expanded) .review-playbook-result-body {
    display: none;
}

.review-playbook-result-toggle {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    margin-right: 4px;
    color: #666;
    flex-shrink: 0;
}

.review-playbook-result-toggle:hover {
    color: #015162;
}

.review-playbook-result-header-content {
    flex: 1;
    min-width: 0;
}

.review-playbook-result-body {
    margin-top: 8px;
}

.review-playbook-result-meta {
    font-size: 12px;
    color: #666;
}

/* Guideline citation as tooltip — centered on screen, never wider than taskpane */
.review-guideline-tooltip {
    position: relative;
    display: inline;
}
.review-guideline-tooltip-trigger {
    cursor: help;
    color: var(--bs-primary, #0d6efd);
    text-decoration: underline;
    text-decoration-style: dotted;
    margin-left: 2px;
}
.review-guideline-tooltip-content {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 14px;
    width: max-content;
    max-width: calc(100vw - 24px);
    min-width: 180px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
    background: #263238;
    color: #eceff1;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
    z-index: 10000;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    box-sizing: border-box;
}
.review-guideline-tooltip:hover .review-guideline-tooltip-content {
    visibility: visible;
    opacity: 1;
}

.review-playbook-result-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Pre-review confirmation UI */
/* Pre-review confirmation UI (modal overlay) */
.pre-review-confirmation-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 2100;
}

.pre-review-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 24px 28px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
    max-width: 620px;
    width: 95%;
    max-height: 90vh;
    overflow-y: auto;
}

.pre-review-card h3 {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 18px;
    color: #333;
}

.pre-review-card h4 {
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 14px;
    color: #555;
    font-weight: 600;
}

.pre-review-warning {
    padding: 12px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 6px;
    margin-bottom: 16px;
    color: #856404;
    font-size: 13px;
}

.pre-review-success {
    padding: 12px;
    background: #d4edda;
    border: 1px solid #28a745;
    border-radius: 6px;
    margin-bottom: 16px;
    color: #155724;
    font-size: 13px;
}

/* Review progress */
.review-progress-container {
    margin-top: 16px;
    margin-bottom: 16px;
}

.review-progress-text {
    margin-top: 8px;
    font-size: 13px;
    color: #666;
}

.pre-review-section {
    margin-bottom: 20px;
}

.parties-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.party-item {
    display: flex;
    gap: 8px;
    align-items: center;
}

.party-name-input,
.party-role-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

.party-name-input:focus,
.party-role-input:focus {
    outline: none;
    border-color: #0078d7;
}

.btn-remove-party {
    width: 32px;
    height: 32px;
    border: 1px solid #dc3545;
    background: #fff;
    color: #dc3545;
    border-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.btn-remove-party:hover {
    background: #dc3545;
    color: #fff;
}

.btn-add-party {
    padding: 8px 16px;
    border: 1px dashed #0078d7;
    background: #fff;
    color: #0078d7;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}

.btn-add-party:hover {
    background: #e8f4f8;
}

.pre-review-section .form-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    background: #fff;
}

.pre-review-section .form-select:focus {
    outline: none;
    border-color: #0078d7;
}

.subject-matter {
    padding: 12px;
    background: #f8f9fa;
    border-radius: 4px;
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin: 0;
}

.pre-review-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
}

.pre-review-actions .btn {
    flex: 1;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.pre-review-actions .btn-primary {
    background: #0078d7;
    color: #fff;
}

.pre-review-actions .btn-primary:hover {
    background: #005a9e;
}

.pre-review-actions .btn-secondary {
    background: #f8f9fa;
    color: #333;
    border: 1px solid #ddd;
}

.pre-review-actions .btn-secondary:hover {
    background: #e9ecef;
}

/* Clause Aspects Display */
.clause-aspects-container {
    margin-top: 16px;
    margin-bottom: 16px;
}

.clause-aspects-card {
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.clause-aspects-header h3 {
    margin-top: 0;
    margin-bottom: 4px;
    font-size: 16px;
    color: #333;
}

.clause-aspects-subtitle {
    margin-top: 0;
    margin-bottom: 16px;
    font-size: 12px;
    color: #666;
}

.clause-aspects-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.clause-aspect-item {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #f8f9fa;
    transition: all 0.2s;
}

.clause-aspect-item:hover {
    border-color: #0078d7;
    background: #fff;
}

.clause-aspect-item.expanded {
    border-color: #0078d7;
    background: #fff;
}

.clause-aspect-header {
    padding: 12px;
    cursor: pointer;
    user-select: none;
}

.clause-aspect-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #333;
}

.clause-aspect-icon {
    font-size: 12px;
    color: #666;
    transition: transform 0.2s;
}

.clause-aspect-item.expanded .clause-aspect-icon {
    transform: rotate(90deg);
}

.clause-aspect-body {
    padding: 0 12px 12px 28px;
    border-top: 1px solid #e0e0e0;
    margin-top: 8px;
    padding-top: 12px;
}

.clause-aspect-key-terms {
    font-size: 13px;
    color: #555;
    line-height: 1.6;
    padding: 8px;
    background: #f8f9fa;
    border-radius: 4px;
    border-left: 3px solid #0078d7;
}

/* Compliance Score Badge */
.compliance-score-badge {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.compliance-score-label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.compliance-score-value {
    font-size: 28px;
    font-weight: 700;
    color: #0078d7;
    line-height: 1;
}

/* Review completed view */
.review-completed-view {
    margin-top: 0;
}

.review-completed-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding: 16px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

.review-completed-header .compliance-score-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.review-completed-header .compliance-score-label {
    font-size: 11px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.review-completed-header .compliance-score-value {
    font-size: 28px;
    font-weight: 700;
    color: #0078d7;
    line-height: 1;
}

.review-content-tabs {
    margin-top: 12px;
}

.review-content-tab-buttons {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 12px;
}

.review-content-tab-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.review-content-tab-btn:hover {
    color: #333;
}

.review-content-tab-btn.active {
    color: #0078d7;
    border-bottom-color: #0078d7;
}

.review-suggestions-badge {
    display: inline-block;
    min-width: 1.4em;
    padding: 2px 6px;
    margin-left: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: #81C1CB;
    border-radius: 10px;
    vertical-align: middle;
}

.review-playbook-result-card.applied {
    border-color: #c3e6cb;
    background: #f0f9f2;
}

.review-playbook-result-card.applied .review-apply-btn {
    background: #28a745;
    color: #fff;
    cursor: default;
    opacity: 0.9;
}

.review-content-tab-panel {
    display: none;
    min-height: 120px;
}

.review-content-tab-panel.active {
    display: block;
}

/* Unsupported (browser) placeholder: fill viewport and prevent scroll to login below */
#unsupported-screen.signin-container {
    min-height: 100vh;
    box-sizing: border-box;
}

body:has(#unsupported-screen:not(.d-none)) {
    overflow: hidden;
}

.input-container-inner {
    position: relative;
    flex: 1;
    min-width: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.fill-gaps-cta {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.fill-gaps-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    border: none;
    border-radius: 8px;
    background: #0078d7;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.fill-gaps-start-btn:hover {
    background: #005a9e;
}

/* Fill Gaps mode: hide prompt input and center the CTA */
.input-container.fill-gaps-mode #homeInput {
    display: none;
}

/* Keep the actions row visible so the selected-action pill (X) and Stop button remain usable. */
.input-container.fill-gaps-mode #input-attach-btn,
.input-container.fill-gaps-mode #input-simplify-btn,
.input-container.fill-gaps-mode #homeVoiceInputBtn,
.input-container.fill-gaps-mode #homeInputSendBtn {
    display: none;
}

.input-container.fill-gaps-mode .fill-gaps-cta {
    justify-content: center;
    margin-top: 0;
    padding: 12px 0 2px;
}

.attached-files-indicator {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 10px 6px;
    background: #e8f4fd;
    border: 1px solid #b3d9f7;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    font-size: 12px;
    color: #015162;
    box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.04);
    flex-shrink: 0;
}

/* iPhone-style wheel picker: one row visible, scroll to change document */
.attached-files-list {
    position: relative;
    height: 28px;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.attached-files-list::-webkit-scrollbar {
    display: none;
}

/* Fade edges so items “behind” are visible when scrolling */
.attached-files-list::before,
.attached-files-list::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 8px;
    z-index: 1;
    pointer-events: none;
}

.attached-files-list::before {
    top: 0;
    background: linear-gradient(to bottom, #e8f4fd 20%, transparent);
}

.attached-files-list::after {
    bottom: 0;
    background: linear-gradient(to top, #e8f4fd 20%, transparent);
}

/* One item in view, others behind (clipped); snap per item */
.attached-file-item {
    position: relative;
    left: 0;
    right: 0;
    height: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px 0 4px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #b3d9f7;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

.attached-file-item-icon {
    flex-shrink: 0;
    font-size: 12px;
    opacity: 0.9;
}

.attached-file-item-name {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    font-weight: 500;
    cursor: pointer;
    padding: 2px 4px;
    margin: 0 -4px;
    border-radius: 3px;
    transition: background 0.15s ease;
    -webkit-overflow-scrolling: touch;
}

.attached-file-item-name::-webkit-scrollbar {
    height: 2px;
}

.attached-file-item-name::-webkit-scrollbar-thumb {
    background: rgba(1, 81, 98, 0.3);
    border-radius: 1px;
}

.attached-file-item-name:hover {
    background: rgba(1, 81, 98, 0.08);
}

.attached-file-item-remove {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: #015162;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.attached-file-item-remove:hover {
    background: rgba(1, 81, 98, 0.12);
    color: #013a45;
}

.attached-file-item-remove i {
    font-size: 12px;
}

.input-container.has-attached-file .input-wrapper #homeInput {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Full filename tooltip on click */
.attached-files-fullname-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: 320px;
    padding: 6px 10px;
    background: #1a1a1a;
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
    word-break: break-all;
}

.attached-files-fullname-tooltip.visible {
    opacity: 1;
    visibility: visible;
}

/* =============================================================================
   Attach file: drag-and-drop overlay and animations
   ============================================================================= */
.attach-drop-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.attach-drop-backdrop.open {
    display: flex;
    opacity: 1;
}

.attach-drop-container {
    position: relative;
    width: 100%;
    max-width: 360px;
}

.attach-drop-zone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 28px 24px;
    background: #fff;
    border: 2px dashed #c8c8c8;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.25s ease, box-shadow 0.25s ease;
    animation: attachZoneAppear 0.35s ease-out;
}

.attach-drop-zone:hover {
    border-color: #0078d4;
    background: #f8fbff;
}

/* Hint animation: "drag" phase – icon moves in from top-left */
.attach-drop-zone.run-drag-hint .attach-drop-icon-wrap {
    animation: attachDragHint 0.8s ease-in-out forwards;
}

/* Hint animation: "drop" phase – icon settles into place */
.attach-drop-zone.run-drop-hint .attach-drop-icon-wrap {
    animation: attachDropHint 0.5s ease-out forwards;
}

/* User is dragging a file over the zone */
.attach-drop-zone.drag-over {
    border-color: #0078d4;
    background: #e8f4fd;
    transform: scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 120, 212, 0.2);
}

.attach-drop-zone.drag-over .attach-drop-icon-wrap {
    animation: attachDragOverBounce 0.4s ease-out;
}

/* User dropped a file (or selected via browse) – success state */
.attach-drop-zone.drop-success .attach-drop-icon-wrap {
    animation: attachDropSuccess 0.5s ease-out forwards;
}

.attach-drop-zone.drop-success {
    border-color: #107c10;
    background: #e6f4ea;
    pointer-events: none;
}

@keyframes attachZoneAppear {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes attachDragHint {
    0% {
        opacity: 0;
        transform: translate(-24px, -24px) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translate(0, -8px) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}

@keyframes attachDropHint {
    0% {
        transform: translate(0, -8px) scale(1.05);
    }
    70% {
        transform: translate(0, 2px) scale(1);
    }
    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes attachDragOverBounce {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.15);
    }
    70% {
        transform: scale(0.98);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes attachDropSuccess {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    30% {
        transform: scale(1.2);
        opacity: 1;
    }
    60% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.attach-drop-icon-wrap {
    margin-bottom: 12px;
    color: #0078d4;
}

.attach-drop-zone.drag-over .attach-drop-icon-wrap,
.attach-drop-zone.drop-success .attach-drop-icon-wrap {
    color: #0078d4;
}

.attach-drop-zone.drop-success .attach-drop-icon-wrap .attach-drop-icon {
    font-variation-settings: normal;
}

.attach-drop-icon {
    font-size: 42px;
    display: block;
}

.attach-drop-text {
    margin: 0 0 12px;
    font-size: 14px;
    color: #333;
    text-align: center;
    line-height: 1.4;
}

.attach-drop-browse {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: #0078d4;
    background: transparent;
    border: 1px solid #0078d4;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.attach-drop-browse:hover {
    background: #0078d4;
    color: #fff;
}

.attach-drop-close {
    position: absolute;
    top: -40px;
    right: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 8px;
    color: #333;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: background 0.2s ease, color 0.2s ease;
}

.attach-drop-close:hover {
    background: #fff;
    color: #000;
}