/* Landing Page Styles */
.landing-page {
    min-height: 100vh;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.landing-content {
    max-width: 600px;
    text-align: center;
    background: white;
    padding: 52px 44px 24px;
    border-radius: 10px;
    border: 1px solid #E0E0E0;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.landing-header {
    margin-bottom: 28px;
}

.landing-logo {
    height: 36px;
    margin-bottom: 8px;
}

@media (min-width: 520px) {
    .landing-header {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
    }
    .landing-logo {
        margin-bottom: 0;
    }
}

.landing-title {
    font-size: 3rem;
    font-weight: 800;
    color: #0A0A0A;
    margin: 0;
    letter-spacing: -0.04em;
    font-family: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.landing-option-description--hidden {
    visibility: hidden;
}

.landing-description {
    margin-bottom: 32px;
}

.landing-description p {
    font-size: 0.95rem;
    color: #AAA;
    margin: 0;
    line-height: 1.5;
}

.landing-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
    align-items: center;
    width: 100%;
}

.landing-options-header {
    width: 100%;
    max-width: 640px;
    margin: 0 0 4px 0;
    padding-left: 22px;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: #555;
}

/* The Document Review divider uses a centered rule with the label
   inlined — reads as a structural note rather than a section heading. */
.landing-options-header--divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    padding-top: 0;
    border-top: none;
    padding-left: 0;
    text-align: center;
    font-size: 0.72rem;
    color: #BBB;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.landing-options-header--divider::before,
.landing-options-header--divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #EBEBEB;
}

.landing-option-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
    row-gap: 8px;
    width: 100%;
    max-width: 640px;
    padding: 18px 22px;
    border-radius: 7px;
    box-sizing: border-box;
}

.landing-option-row .landing-option-label {
    justify-self: start;
    text-align: left;
    white-space: normal;
    min-width: 0;
}

.landing-option-row .landing-option-select {
    justify-self: end;
    width: 240px;
    max-width: 100%;
    min-width: 0;
}

.landing-option-row--featured {
    background: #fff;
    border: 1px solid #CFCFCF;
    padding-top: 10px;
    padding-bottom: 10px;
}

.landing-option-description {
    font-size: 0.8rem;
    color: #AAA;
    margin: 10px 0 4px 0;
    line-height: 1.5;
    max-width: 640px;
    text-align: center;
    padding: 0;
}
.landing-legal-links {
    text-align: center;
    padding: 16px 0 0;
    margin-top: auto;
    font-size: 11px;
}
.landing-legal-links a {
    color: #BBBBBB;
    text-decoration: none;
}
.landing-legal-links a:hover {
    color: #888;
    text-decoration: underline;
}
.landing-legal-sep {
    color: #CCCCCC;
    margin: 0 6px;
}

.landing-option-row--featured .landing-option-label {
    color: #333;
    font-size: 1.05rem;
}

.landing-option-row--secondary {
    background: #F8F8F8;
    border: none;
}

.landing-option-row--secondary.company-picker-row {
    background: #FAFAFA;
    border: 1px solid #DCDCDC;
}

/* When a custom-select sits directly inside a row with no label, stretch it
   across the full grid width so it aligns with the row above/below.
   Extra class on the row bumps specificity above the base .custom-select rule. */
.landing-option-row.landing-option-row--featured > .custom-select,
.landing-option-row.landing-option-row--secondary > .custom-select {
    justify-self: stretch;
    width: 100%;
    max-width: none;
}

.landing-option-row--secondary .landing-option-label {
    color: #777;
    font-weight: 500;
    font-size: 0.95rem;
}

.landing-option-row--secondary .landing-option-select {
    border-color: #d4cae0;
    color: #555;
    font-size: 14px;
}

.landing-option-label {
    font-size: 1rem;
    color: #333;
    font-weight: 500;
}

.landing-option-recommended {
    color: #6a4c93;
    font-weight: 600;
    font-size: 0.9rem;
}

.landing-option-select {
    background: #fff;
    border: 1px solid #b9a8d1;
    color: #333;
    padding: 10px 16px;
    border-radius: 22px;
    font-size: 15px;
    cursor: pointer;
    min-width: 260px;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236a4c93'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    padding-right: 38px;
}

.landing-option-select:hover {
    border-color: #6a4c93;
    box-shadow: 0 2px 8px rgba(106, 76, 147, 0.15);
}

.landing-option-select:focus {
    outline: none;
    border-color: #6a4c93;
    box-shadow: 0 0 0 3px rgba(106, 76, 147, 0.2);
}

.landing-option-select option:disabled {
    color: #aaa;
}

.landing-option-select:disabled {
    background-color: #f5f3f8;
    color: #aaa;
    cursor: not-allowed;
    opacity: 0.7;
}

/* ---------- Custom select (themed dropdown for landing page) ---------- */
.custom-select {
    position: relative;
    justify-self: end;
    width: 260px;
    max-width: 100%;
}
#landingUnifiedCustom {
    width: 100%;
    justify-self: stretch;
}
.custom-select-trigger {
    width: 100%;
    background: transparent;
    border: none;
    color: #333;
    padding: 10px 38px 10px 16px;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23BBBBBB'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    display: block;
    line-height: 1.3;
}
.custom-select-trigger:hover {
    background-color: rgba(0,0,0,0.03);
}
.custom-select-trigger:focus {
    outline: none;
    background-color: rgba(0,0,0,0.03);
}
.custom-select-label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.custom-select-menu {
    position: fixed;
    z-index: 2000;
    width: 280px;
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 7px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.09);
    padding: 6px;
    max-height: 70vh;
    overflow-y: auto;
}
.custom-select-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    color: #333;
}
.custom-select-option:hover { background: #F5F5F5; }
.custom-select-option.is-active { background: #F5F5F5; }
.custom-select-option-title {
    display: block;
    font-weight: 600;
    font-size: 12px;
    color: #333;
    margin-bottom: 2px;
}
.custom-select-option-desc {
    display: block;
    font-size: 11px;
    color: #888;
    line-height: 1.3;
}
.custom-select-section {
    padding: 5px 10px 4px;
    font-size: 10px;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.06em;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
    background: #EBEBEB;
    border-radius: 4px;
    margin: 4px 0 2px;
}

/* Badge shown next to law-firm template options — small Pīwakawaka logo */
.badge--template {
    display: inline-flex;
    align-items: center;
    background: #5b3fa6;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px 1px 4px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 5px;
    letter-spacing: 0.02em;
    border: 1px solid #4a2e75;
    white-space: nowrap;
    gap: 3px;
}
.badge--template img {
    height: 12px;
    width: auto;
    display: inline-block;
    filter: brightness(0) invert(1);
}

/* Tag shown next to Raw AI options */
.badge--ai {
    display: inline-block;
    background: #fff3b0;
    color: #5a4200;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 5px;
    letter-spacing: 0.02em;
    border: 1px solid #e8c800;
    white-space: nowrap;
}

/* Section headings inside the Bulma in-editor hamburger dropdown */
.bulma-dropdown-section-heading {
    padding: 6px 12px 3px;
    font-size: 10px;
    text-transform: uppercase;
    color: #999;
    letter-spacing: 0.05em;
    pointer-events: none;
    user-select: none;
    font-weight: 600;
}
.bulma-dropdown-section-heading:not(:first-child) {
    margin-top: 4px;
    border-top: 1px solid #f0eaf8;
    padding-top: 8px;
}

.landing-option-button {
    background: #6a4c93;
    border: 1px solid #6a4c93;
    color: #fff;
    padding: 8px 18px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 240px;
    max-width: 100%;
    justify-self: end;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    letter-spacing: 0.02em;
}

.landing-option-button::before {
    content: "↑";
    font-size: 16px;
    line-height: 1;
}

.landing-option-button:hover {
    background: #5a3d80;
    border-color: #5a3d80;
}

/* Full-width tool buttons used by the Document Review section on the
   landing page — the row no longer carries a separate label, the button
   itself spans the row and is the entire affordance. */
.landing-option-row--full {
    grid-template-columns: minmax(0, 1fr);
    padding: 10px 14px;
}
.landing-option-button--full {
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    padding: 12px 20px;
    font-size: 0.98rem;
    font-weight: 600;
    color: #4a2e75;
    text-decoration: none;
}
.landing-option-button--full::before { content: none; }

.landing-config-link {
    display: block;
    margin-top: 18px;
    font-size: 12px;
    color: #9b8ab0;
    text-decoration: underline;
    text-align: center;
    text-underline-offset: 3px;
}
.landing-config-link:hover {
    color: #4a2e75;
}

@media (max-width: 600px) {
    .landing-option-row {
        grid-template-columns: 1fr;
    }
    .landing-option-label {
        white-space: normal;
    }
    .landing-option-row .landing-option-select {
        justify-self: stretch;
        width: 100%;
        min-width: 0;
    }
}

.pure-ai-banner {
    background: #fff8e1;
    border: 1px solid #f0d97a;
    color: #6b5512;
    padding: 8px 14px;
    margin: 0 0 12px 0;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
}

.landing-chat-preview {
    background: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    padding: 20px;
    max-width: 400px;
    margin: 0 auto;
}

.preview-chat-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-weight: 500;
    color: #6a4c93;
    font-size: 14px;
}

.preview-chat-content {
    background: white;
    border-radius: 10px;
    padding: 15px;
    border: 1px solid #e8e8e8;
}

.preview-message {
    color: #666;
    font-size: 14px;
    line-height: 1.4;
    font-style: italic;
}

.chat-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 35vh;
    background: #ffffff;
    color: #333;
    z-index: 1000;
    padding: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border-bottom: 1px solid #E0E0E0;
    flex-direction: column;
}

.chat-content {
    max-width: 800px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    width: 100%;
    gap: 5px;
}

/* Side navigation visible on desktop screen sizes only */
.side-navigation {
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 100vh;
    background: #ffffff;
    z-index: 1001;
    display: none; /* Hidden by default for landing page */
    flex-direction: column;
    align-items: center;
    padding: 20px 0;
    gap: 20px;
    border-right: 1px solid #E0E0E0;
}

/* Mobile top navigation - only shown on mobile when not on landing */
.mobile-top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: #ffffff;
    border-bottom: 1px solid #E0E0E0;
    z-index: 1001;
    display: none;
    align-items: center;
    padding: 0 15px;
}

.mobile-top-nav .mobile-logo {
    height: 24px;
    margin-right: 10px;
}

.mobile-top-nav .bulma-dropdown-trigger {
    background: transparent;
    border: none;
    font-size: 18px;
    padding: 8px;
    cursor: pointer;
    color: #666;
}

.mobile-top-nav .bulma-dropdown-menu {
    top: 100%;
    left: 0;
    transform: none;
    margin-top: 5px;
    min-width: 250px;
}

.side-logo {
    height: 35px;
}

/* Show side navigation on desktop when not on landing page */
@media (min-width: 769px) {
    body:not(.landing-active) .side-navigation {
        display: flex;
    }
}

.side-navigation .piwakawaka-logo {
    height: 35px;
}

.side-navigation .bulma-dropdown {
    position: relative;
    width: 100%;
    background: #fafafa;
    border-radius: 8px;
}

.side-navigation .bulma-dropdown-menu {
    left: 100%;
    top: 0;
    transform: none;
    margin-left: 10px;
    margin-top: 0;
    min-width: 480px;
}

/* Adjust layout for side navigation on all screens */
.chat-banner {
    height: 35vh;
    width: 100%;
    left: 0;
    right: 0;
    border-bottom: 1px solid #E0E0E0;
    padding: 5px 10px;
}

/* When side navigation is visible on desktop, adjust chat banner */
@media (min-width: 769px) {
    body:not(.landing-active) .chat-banner {
        width: calc(100% - 60px);
        left: 60px;
        border-left: 1px solid #e0e0e0;
    }
}

.document-container {
    margin-top: 35vh;
    margin-left: 0;
    margin-right: 0;
    min-height: 65vh;
    padding-top: 40px;
}

/* When side navigation is visible on desktop, adjust document container */
@media (min-width: 769px) {
    body:not(.landing-active) .document-container {
        margin-left: 60px;
    }
}

/* Hide the main logo since we have side nav */
.doc-type-buttons img {
    display: none !important;
}

/* Hide the main dropdown since we use side nav */
.doc-type-buttons .bulma-dropdown {
    display: none !important;
}

.chat-area {
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    padding: 8px;
    background: #fafafa;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.document-container {
    /* Sit flush against the bottom of the fixed ``.chat-banner`` —
       the banner is ``height: 35vh`` so the document container must
       start at exactly 35vh. The previous 45vh value left a 10vh
       strip of body background showing as a "weird white space"
       between the chat interface and the document gutter. */
    margin-top: 35vh;
    min-height: 65vh;
    background-color: #f5f5f5;
    padding: 40px 20px;
    /* Positioning context for the per-paragraph .fc-panel margin notes
       so they scroll with the document content instead of floating on
       top of the viewport. */
    position: relative;
}

.document-paper {
    max-width: 800px;
    margin: 0 auto;
    background: white;
    padding: 60px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    border-radius: 5px;
    min-height: 600px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

.chat-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.chat-input-group {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
}

.chat-input-container {
    position: relative;
    flex: 1;
}

.form-control {
    background: white;
    border: 1px solid #CFCFCF;
    border-radius: 8px;
    padding: 12px 45px 12px 12px;
    width: 100%;
    font-size: 13px;
    box-sizing: border-box;
}

.form-control:focus {
    outline: none;
    border-color: #6a4c93;
    box-shadow: 0 0 0 2px rgba(106, 76, 147, 0.2);
}

.submit-button-inside {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: #6a4c93;
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.3s ease;
    line-height: 1;
}

.submit-button-inside:hover {
    background: #5a3d7a;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    background: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 3px;
    min-height: 140px;
    width: 100%;
    box-sizing: border-box;
}

.chat-message {
    margin-bottom: 12px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}

.chat-message.user {
    background: #F0EBF8;
    text-align: right;
    margin-left: 20%;
}

.chat-message.assistant {
    background: #f8f9fa;
    text-align: left;
    margin-right: 20%;
    border-left: 3px solid #6a4c93;
    color: #6a4c93;
}

.chat-message.loading {
    background: rgba(106, 76, 147, 0.2);
    font-style: italic;
    color: #4a3869;
}

.chat-message.error {
    background: #f8d7da;
    color: #721c24;
}

.btn {
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: #6a4c93;
    color: white;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 14px;
    min-width: 36px;
}

.btn-primary:hover {
    background: #5a3d7a;
}

.doc-type-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 0;
    flex-wrap: wrap;
    position: relative;
    align-items: center;
    height: 35px;
    flex-shrink: 0;
    padding-top: 0;
}

/* Hide entire doc-type-buttons div when not on landing page */
body:not(.landing-active) .doc-type-buttons {
    display: none;
}

/* Hide regular doc-type buttons in main screen */
.doc-type-buttons .doc-type-btn {
    display: none;
}

/* Bulma dropdown styles */
.bulma-dropdown {
    display: block;
    position: relative;
}

.bulma-dropdown-trigger {
    background: #fafafa;
    border: none;
    border-radius: 8px;
    padding: 0;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 44px;
}

.bulma-dropdown-trigger:hover {
    background: #f0f0f0;
    color: #6a4c93;
}

.bulma-dropdown-trigger .icon {
    font-size: 14px;
}

.bulma-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 200px;
    margin-top: 5px;
    padding: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.bulma-dropdown.is-active .bulma-dropdown-menu {
    display: block;
}

.bulma-dropdown-content {
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
}

.bulma-dropdown-item {
    display: block;
    width: 100%;
    padding: 7px 16px;
    border: none;
    background: white;
    color: #666;
    cursor: pointer;
    text-align: left;
    font-size: 14px;
    border-bottom: 1px solid #eee;
    transition: all 0.3s ease;
}

.bulma-dropdown-item:hover {
    background: #f8f4ff;
    color: #6a4c93;
}

.bulma-dropdown-item:last-child {
    border-bottom: none;
}

.bulma-dropdown-section {
    padding: 10px 16px 6px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6a4c93;
    background: #f8f4ff;
    border-bottom: 1px solid #eee;
    text-align: left;
    cursor: default;
}

.bulma-dropdown-section:first-child {
    padding-top: 12px;
}

.bulma-dropdown-item.is-active {
    background: #6a4c93;
    color: white;
}

.chat-interface {
    display: none;
    flex: 1;
    min-height: 0;
}

.chat-interface.active {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.alert {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    font-size: 14px;
}

.alert-danger {
    background: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.alert-info {
    background: #d1ecf1;
    border: 1px solid #bee5eb;
    color: #0c5460;
}

.alert-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

.document-content {
    white-space: pre-wrap;
    font-size: 14px;
    color: #333;
}

/* === Per-paragraph commenting === */
.doc-para {
    position: relative;
    padding: 4px 8px;
    margin: 0 -8px;
    border-radius: 4px;
    transition: background 0.12s ease;
}
.doc-para:hover {
    background: rgba(212, 197, 240, 0.18);
}
/* (.doc-para.has-comment styling lives further down in the floating-panel
   block — it gets a purple left rail + lavender wash there.) */
.add-comment-btn {
    position: absolute;
    top: 2px;
    right: 6px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    color: #ffffff;
    background: #5a3fa0;
    border: 1px solid #5a3fa0;
    border-radius: 12px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease;
    z-index: 5;
    user-select: none;
}
.doc-para:hover .add-comment-btn {
    opacity: 1;
}
.add-comment-btn:hover {
    background: #3d2870;
    border-color: #3d2870;
}
/* Comments palette — keyed off the app's purple theme so the bubbles
   feel like part of the chat experience rather than a sticky note. */
/* All three Piwakawaka icon usages inside the comments feature share an
   "inverted" treatment — pure white silhouette on transparent — so the
   bird stands out against the purple/lavender surfaces of the comments
   UI. brightness(0) collapses the icon to black, then invert(1) flips it
   to white while leaving the alpha channel alone. */
.add-comment-btn-icon {
    height: 14px;
    width: auto;
    vertical-align: middle;
    margin-left: 4px;
    display: inline-block;
    filter: brightness(0) invert(1);
}
/* Commented paragraph: purple left rail + soft lavender wash so the
   anchor is visible at a glance, plus a count indicator pinned to the
   top-right. The +ask pill is suppressed once a thread exists so the
   indicator becomes the sole click target for the floating panel. */
.doc-para.has-comment,
.cell-commentable.has-comment {
    border-left: 3px solid #5a3fa0;
    padding-left: 9px;
    background: rgba(216, 197, 242, 0.20);
}
.doc-para.comment-active,
.cell-commentable.comment-active {
    background: rgba(216, 197, 242, 0.34);
    box-shadow: inset 0 0 0 1px rgba(90, 63, 160, 0.30);
}
.has-comment .add-comment-btn { display: none !important; }

.comment-indicator {
    position: absolute;
    top: 2px;
    right: 6px;
    background: #5a3fa0;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 10px;
    cursor: pointer;
    text-align: center;
    user-select: none;
    z-index: 5;
    box-shadow: 0 1px 3px rgba(90, 63, 160, 0.35);
}
.comment-indicator:hover { background: #3d2870; }
.ask-btn-icon {
    height: 14px;
    width: auto;
    vertical-align: middle;
    margin-left: 4px;
    display: inline-block;
    filter: brightness(0) invert(1);
}

/* Tables: the wrapper around a table is non-interactive (no hover bg,
   no wrapper-level "+ ask" pill) — we attach commenting per-row so
   the user can ask about a single row rather than the whole table. */
.doc-para.doc-para-table {
    padding: 0;
    margin: 0;
}
.doc-para.doc-para-table:hover {
    background: transparent;
}
.cell-commentable {
    position: relative;
    transition: background 0.12s ease;
}
.cell-commentable:hover {
    background: rgba(212, 197, 240, 0.22);
}
.cell-add-comment-btn {
    top: 2px;
    right: 2px;
}
/* The +ask pill is appended into the row's last <td>, so it is a
   descendant — not a direct child — of the .cell-commentable row.
   Use the descendant combinator so the pill actually becomes visible
   on row hover. */
.cell-commentable:hover .cell-add-comment-btn {
    opacity: 1;
}

/* =============================================================================
   Per-paragraph comment thread panels (variant: FloatingBubbles).
   Each commented paragraph gets its own compact panel positioned in the
   right-hand gutter alongside the paragraph. Panels are positioned
   `absolute` inside `.document-container`, so they scroll with the
   document rather than following the viewport. Only the currently
   "active" panel shows the reply input; others are collapsed to just
   their message bubbles + a Reply hint so several can coexist without
   overwhelming the page.
   ========================================================================== */
.fc-panel {
    position: absolute;
    z-index: 30;
    display: flex;
    flex-direction: column;
    width: 300px;
    background: #ffffff;
    border: 1px solid #e6dcf3;
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(60, 35, 110, 0.10);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.fc-panel-active {
    border-color: #c8b4e0;
    box-shadow: 0 8px 24px rgba(60, 35, 110, 0.18);
    z-index: 40;
}
/* Collapsed (non-active) panels: hide the reply input and trim message
   list height so the panel only takes up roughly the height of its
   visible bubbles. Clicking anywhere on the panel activates it. */
.fc-panel:not(.fc-panel-active) .fc-input { display: none; }
.fc-panel:not(.fc-panel-active) {
    cursor: pointer;
}
.fc-panel:not(.fc-panel-active):hover {
    border-color: #c8b4e0;
    box-shadow: 0 6px 18px rgba(60, 35, 110, 0.14);
}
.fc-panel:not(.fc-panel-active) .fc-messages {
    max-height: 180px;
    padding-bottom: 10px;
}
/* Fully-collapsed (X-clicked) panel: only the header remains visible.
   The anchor line to the document paragraph is preserved via the panel's
   absolute positioning, which reflowAllPanels keeps next to the
   commented paragraph. */
.fc-panel.fc-panel-collapsed .fc-messages,
.fc-panel.fc-panel-collapsed .fc-input { display: none; }
.fc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #faf8fd;
    border-bottom: 1px solid #ece4f7;
    min-height: 30px;
}
.fc-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #2b2b2b;
    font-size: 12px;
    font-weight: 600;
}
.fc-thread-icon { color: #5a3fa0; }
.fc-count {
    background: #ece4f7;
    color: #5a3fa0;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 8px;
    border-radius: 10px;
}
.fc-header-right { display: flex; gap: 2px; }
.fc-icon-btn {
    background: none;
    border: none;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #888;
    cursor: pointer;
    border-radius: 6px;
    padding: 0;
}
.fc-icon-btn:hover { background: #ece4f7; color: #5a3fa0; }
.fc-messages {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px 12px 6px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    max-height: 280px;
}
.fc-messages:empty::before {
    content: 'No messages yet — type a note or question below.';
    color: #9e93b0;
    font-size: 12px;
    font-style: italic;
    padding: 4px 2px;
}
.fc-msg {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.fc-avatar {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    background: #ece4f7;
    color: #5a3fa0;
    overflow: hidden;
}
.fc-msg-assistant .fc-avatar {
    background: #5a3fa0;
}
.fc-msg-assistant .fc-avatar img {
    width: 18px;
    height: 18px;
    filter: brightness(0) invert(1);
}
.fc-msg-body { flex: 1 1 auto; min-width: 0; }
.fc-msg-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    min-height: 16px;
}
.fc-msg-author {
    font-size: 12px;
    font-weight: 600;
    color: #2b2b2b;
}
.fc-msg-del {
    background: none;
    border: none;
    color: #c4b8d8;
    width: 20px;
    height: 20px;
    line-height: 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    padding: 0;
    opacity: 0;
    transition: opacity 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.fc-msg:hover .fc-msg-del { opacity: 1; }
.fc-msg-del:hover { color: #c0392b; background: #fbeae8; }
/* On collapsed (non-active) panels, the per-message delete button is
   hidden — the user has to focus the thread first before mutating it. */
.fc-panel:not(.fc-panel-active) .fc-msg-del { display: none; }
.fc-msg-text {
    background: #f4eefb;
    border: 1px solid #ece4f7;
    border-radius: 12px;
    border-top-left-radius: 4px;
    padding: 8px 11px;
    font-size: 13px;
    line-height: 1.5;
    color: #2b2b2b;
    white-space: pre-wrap;
    word-wrap: break-word;
}
.fc-msg-assistant .fc-msg-text {
    background: #faf8fd;
    border-color: #e6dcf3;
}
.fc-input {
    border-top: 1px solid #ece4f7;
    padding: 8px 10px 10px;
    background: #fdfcff;
}
.fc-textarea {
    width: 100%;
    border: 1px solid #d8c5f2;
    border-radius: 8px;
    padding: 6px 9px;
    font-family: inherit;
    font-size: 12px;
    resize: vertical;
    min-height: 44px;
    box-sizing: border-box;
    background: #ffffff;
    color: #2b2b2b;
}
.fc-textarea:focus {
    outline: none;
    border-color: #5a3fa0;
    box-shadow: 0 0 0 3px rgba(90, 63, 160, 0.15);
}
.fc-input-status {
    margin-top: 6px;
    font-size: 12px;
    color: #5a3fa0;
    font-style: italic;
}
.fc-input-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}
.fc-btn-secondary,
.fc-btn-primary {
    border: none;
    border-radius: 18px;
    padding: 6px 16px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: background 0.12s ease;
}
.fc-btn-secondary {
    background: transparent;
    color: #5a3fa0;
}
.fc-btn-secondary:hover { background: #ece4f7; }
.fc-btn-primary {
    background: #5a3fa0;
    color: #ffffff;
}
.fc-btn-primary:hover { background: #3d2870; }
.fc-btn-primary:disabled,
.fc-btn-secondary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* On narrow viewports the gutter beside the document disappears, so
   show only the currently-active panel as a bottom sheet pinned to the
   viewport. Collapsed/non-active panels are hidden — the user reaches
   them via the purple count indicator on each commented paragraph.
   Breakpoint is 640px (well below the 769px side-nav breakpoint) so
   that panels keep their normal absolute/gutter position at the mid-
   range widths where the side nav is already visible. */
@media (max-width: 640px) {
    .fc-panel:not(.fc-panel-active) { display: none !important; }
    .fc-panel.fc-panel-active {
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        top: auto !important;
        bottom: 12px !important;
        width: auto !important;
        max-height: 60vh;
        z-index: 60;
    }
    .fc-panel.fc-panel-active .fc-messages { max-height: 40vh; }
}

.no-chat {
    text-align: center;
    color: #999;
    font-style: italic;
    padding: 20px;
}

/* Simple mobile adjustments */
@media (max-width: 768px) {
    /* Hide side navigation on mobile */
    .side-navigation {
        display: none !important;
    }

    /* Show mobile top navigation on mobile when not on landing */
    body:not(.landing-active) .mobile-top-nav {
        display: flex;
    }

    /* Adjust chat banner for mobile top nav */
    body:not(.landing-active) .chat-banner {
        top: 40px;
        height: calc(45vh - 40px);
        width: 100%;
        left: 0;
        padding: 8px;
    }

    .document-container {
        /* Mobile editor: the chat-banner sits at ``top: 40px`` with
           ``height: calc(45vh - 40px)``, so its bottom edge is at
           exactly 45vh. The previous ``calc(45vh + 40px)`` was
           double-counting the 40px mobile-top-nav and leaving a 40px
           gap of body background between the chat banner and the
           document gutter. */
        margin-top: 45vh;
        min-height: 55vh;
        margin-left: 0;
    }

    /* When on landing page (no top nav) */
    body.landing-active .chat-banner {
        height: 45vh;
        top: 0;
    }

    body.landing-active .document-container {
        margin-top: 45vh;
        min-height: 55vh;
    }

    #actionButtons {
        gap: 3px;
    }

    /* Action-button + label-swap shrink rules live in the
       dedicated mobile-override block further down in this file
       (right after the global ``#actionButtons`` rules) so they
       actually win the cascade. Don't re-add them here — they get
       silently overridden by the globals below. */

    .chat-area {
        padding: 6px;
    }

    .chat-messages {
        margin-bottom: 4px;
        min-height: 80px;
    }

    .chat-input-group {
        gap: 4px;
    }

    /* Bring the document text closer to the edge of the white "page" on
       mobile (was 30px 20px → felt like wasted side margin), and shrink
       the surrounding grey gutter so the page itself can use more of
       the screen width. Top padding is collapsed to match the side
       gutter so there is no awkward white/grey strip between the chat
       interface and the start of the document text. */
    .document-container {
        padding: 12px 12px 24px;
    }

    .document-paper {
        padding: 14px 14px 28px;
    }
}

@media (max-width: 768px) {
    .landing-content {
        padding: 40px 20px;
        margin: 20px;
    }

    .landing-title {
        font-size: 2.5rem;
    }

    .landing-description p {
        font-size: 1.1rem;
    }

    .landing-doc-type-btn {
        width: 100%;
        max-width: 280px;
        padding: 12px 30px;
        font-size: 15px;
    }

    .landing-chat-preview {
        max-width: 100%;
    }

    /* .document-paper mobile padding is set in the earlier @media
       (max-width: 768px) block above (28px 14px) — kept there so the
       chat-area / button shrink rules and the page-padding rules live
       together. */

    .chat-banner {
        height: 50vh;
        padding: 15px;
    }

    .document-container {
        /* Match the bottom of ``.chat-banner`` (45vh on mobile editor
           — see the ``body:not(.landing-active) .chat-banner`` rule
           above). 50vh left a 5vh gap of body background. */
        margin-top: 45vh;
        min-height: 55vh;
    }

    .doc-type-buttons {
        justify-content: center;
        margin-bottom: 5px;
    }

    .chat-message.user {
        margin-left: 10%;
    }

    .chat-message.assistant {
        margin-right: 10%;
    }

    .chat-messages {
        min-height: 50px;
    }
}

@media (max-width: 480px) {
    .landing-content {
        padding: 30px 15px;
        margin: 10px;
    }

    .landing-title {
        font-size: 2rem;
    }

    .landing-logo {
        height: 50px;
    }

    .landing-description p {
        font-size: 1rem;
    }

    .chat-banner {
        height: 50vh;
        padding: 10px;
    }

    .document-container {
        /* See note in the 768px block — chat-banner ends at 45vh on
           mobile editor regardless of viewport, so the document
           container starts at 45vh too. */
        margin-top: 45vh;
        min-height: 55vh;
    }

    .doc-type-buttons {
        margin-bottom: 10px;
    }
}

#actionButtons {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
}

#actionButtons .doc-type-btn {
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    background: white;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
}

#actionButtons .doc-type-btn:hover {
    background: #f8f4ff;
    border-color: #6a4c93;
    color: #6a4c93;
}

#actionButtons .btn-legal-advice {
    background: #6a4c93;
    color: white;
    border: 1px solid #6a4c93;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(106, 76, 147, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

#actionButtons .btn-legal-advice:hover {
    background: #5a3d7a;
    border-color: #5a3d7a;
    box-shadow: 0 4px 8px rgba(106, 76, 147, 0.3);
    transform: translateY(-1px);
}

#actionButtons .btn-icon {
    padding: 8px 10px;
    font-size: 16px;
    border-radius: 6px;
    border: 1px solid #E0E0E0;
    background: white;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#actionButtons .btn-icon:hover {
    background: #f8f4ff;
    border-color: #6a4c93;
    color: #6a4c93;
}

/* Default (desktop) state for the Ask-a-lawyer label swap. The
   button has two spans — the long label and a short mobile label —
   and the mobile @media block below flips which one is visible.
   Without this default rule, both labels render on desktop and the
   button reads "Ask a lawyerAsk lawyer". */
.btn-legal-advice .btn-label-full { display: inline; }
.btn-legal-advice .btn-label-short { display: none; }

/* === Mobile chat-row shrink ===
   These overrides MUST sit AFTER the global ``#actionButtons``
   rules above. Media queries don't add CSS specificity, so an
   identically-specific rule defined later in the file wins at
   every viewport — which is exactly what was happening: the
   earlier mobile block (around line 1200) was being silently
   overridden by the global ``padding: 8px 10px / 10px 16px``
   rules, so the buttons stayed full-size on mobile and squashed
   the chat input.
   On a 375px screen the input was only getting ~150px of width
   between the row's left edge and the action buttons. Shrinking
   the buttons + the inline submit pip + the input's right
   padding hands the input back roughly another 80–100px. */
@media (max-width: 768px) {
    .chat-input-group {
        gap: 3px;
    }

    .chat-input-container {
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Pull the inline submit pip in tight so the text input can
       use the full width up to the right edge of the container. */
    .form-control {
        padding: 10px 36px 10px 10px;
        font-size: 13px;
    }

    .submit-button-inside {
        width: 26px;
        height: 26px;
        right: 4px;
        font-size: 11px;
    }

    #actionButtons {
        gap: 3px;
        flex-shrink: 0;
    }

    #actionButtons .btn-icon {
        padding: 3px 5px;
        font-size: 12px;
        min-width: 24px;
    }

    #actionButtons .btn-legal-advice {
        padding: 4px 7px;
        font-size: 10.5px;
        font-weight: 600;
        box-shadow: none;
    }

    /* Long "Ask a lawyer" → short "Ask lawyer" on mobile. */
    .btn-legal-advice .btn-label-full { display: none; }
    .btn-legal-advice .btn-label-short { display: inline; }
}

/* === Short-viewport (height) overrides ===
   The desktop chat-banner is fixed at ``height: 35vh``. Below ~700px
   viewport height that becomes <245px, which is too small to fit the
   chat-messages area (``min-height: 140px``) PLUS the input row PLUS
   the action buttons (download / reset / AI mode / ask-lawyer) PLUS
   padding. The overflow gets clipped behind the document area below,
   so the input and buttons progressively disappear from view as the
   viewport shrinks. The 768px width breakpoint already handles this
   on narrow screens by switching to compact buttons + a smaller chat
   area, but on a wide-but-short window (laptop with browser dev
   tools docked, split-screen, etc.) none of those rules fire. These
   max-height blocks apply the same compaction triggered by viewport
   height instead of width, and pin the banner to a content-sized
   fixed pixel height so the input row always stays visible. */
@media (max-height: 700px) {
    body:not(.landing-active) .chat-banner {
        height: 245px;
    }
    body:not(.landing-active) .document-container {
        margin-top: 245px;
    }
    .chat-messages {
        min-height: 70px;
    }
    .chat-input-group {
        gap: 4px;
    }
    .chat-input-container {
        flex: 1 1 auto;
        min-width: 0;
    }
    .form-control {
        padding: 8px 32px 8px 10px;
        font-size: 13px;
    }
    .submit-button-inside {
        width: 26px;
        height: 26px;
        right: 4px;
        font-size: 11px;
    }
    #actionButtons {
        gap: 3px;
        flex-shrink: 0;
    }
    #actionButtons .btn-icon {
        padding: 4px 6px;
        font-size: 13px;
        min-width: 26px;
    }
    #actionButtons .btn-legal-advice {
        padding: 5px 8px;
        font-size: 11px;
        font-weight: 600;
        box-shadow: none;
    }
    /* Long "Ask a lawyer" → short "Ask lawyer" on short screens. */
    .btn-legal-advice .btn-label-full { display: none; }
    .btn-legal-advice .btn-label-short { display: inline; }
}

@media (max-height: 600px) {
    body:not(.landing-active) .chat-banner {
        height: 210px;
    }
    body:not(.landing-active) .document-container {
        margin-top: 210px;
    }
    .chat-messages {
        min-height: 50px;
        padding: 8px;
    }
    #actionButtons .btn-icon {
        padding: 3px 5px;
        font-size: 12px;
        min-width: 24px;
    }
    #actionButtons .btn-legal-advice {
        padding: 4px 7px;
        font-size: 10.5px;
    }
}

/* Tooltip styles */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 8px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 12px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* Modal z-index to appear above chat interface */
.modal {
    z-index: 2000;
}

.modal-background {
    z-index: 2001;
    cursor: pointer;
}

/* ---------- Lawyer Concierge Card modal ---------- */
.lcc-wrap {
    position: fixed;
    inset: 0;
    z-index: 2002;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    pointer-events: none;
}

.lcc-trust-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 0.75rem;
    pointer-events: auto;
}

.lcc-trust-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: #888;
}

.lcc-trust-item svg {
    flex-shrink: 0;
    color: #AAAAAA;
}

.lcc-card {
    background: #ffffff;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.10);
    width: 100%;
    max-width: 480px;
    position: relative;
    pointer-events: auto;
    overflow: hidden;
}

.lcc-close-btn {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    color: #BBBBBB;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.lcc-close-btn:hover {
    background: #F5F5F5;
    color: #666;
}

.lcc-card-header {
    padding: 2rem 2rem 1.25rem;
    text-align: center;
}

.lcc-icon-block {
    width: 52px;
    height: 52px;
    border-radius: 4px;
    background: #6a4c93;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.lcc-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 0.35rem;
}

.lcc-subtitle {
    font-size: 0.75rem;
    color: #888;
    line-height: 1.5;
    margin: 0;
    max-width: 340px;
    margin-inline: auto;
}

.lcc-body {
    padding: 0 2rem 2rem;
}

.lcc-field {
    margin-bottom: 1rem;
}

.lcc-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #AAAAAA;
    margin-bottom: 0.4rem;
}

.lcc-optional {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    font-size: 0.65rem;
    color: #C0C0C0;
}

.lcc-input-wrap {
    position: relative;
}

.lcc-input-icon {
    position: absolute;
    left: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: #BBBBBB;
    pointer-events: none;
}

.lcc-textarea-wrap .lcc-textarea-icon {
    top: 0.75rem;
    transform: none;
}

.lcc-input {
    width: 100%;
    padding: 0.65rem 0.75rem 0.65rem 2.2rem;
    font-size: 0.82rem;
    background: #FAFAFA;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    color: #333;
    box-sizing: border-box;
    transition: border-color 0.15s;
    font-family: inherit;
}

.lcc-input::placeholder {
    color: #BBBBBB;
}

.lcc-input:focus {
    outline: none;
    border-color: #6a4c93;
}

.lcc-textarea {
    resize: none;
    padding-top: 0.65rem;
}

.lcc-error {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    color: #b91c1c;
    font-size: 0.78rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 0.75rem;
}

.lcc-btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #6a4c93;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 600;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.15s;
    font-family: inherit;
    margin-top: 0.25rem;
}

.lcc-btn-primary:hover:not(:disabled) {
    opacity: 0.88;
}

.lcc-btn-primary:disabled {
    opacity: 0.35;
    cursor: default;
}

.lcc-confirm-btn {
    flex: 2;
    width: auto;
}

.lcc-consent {
    text-align: center;
    font-size: 0.68rem;
    color: #C0C0C0;
    line-height: 1.5;
    margin: 0.6rem 0 0;
}

/* Review step */
.lcc-review-summary {
    background: #FAFAFA;
    border-radius: 4px;
    padding: 0.9rem 1rem;
    margin-bottom: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lcc-review-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.lcc-review-row svg {
    color: #BBBBBB;
    margin-top: 0.15rem;
    flex-shrink: 0;
}

.lcc-review-label {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #AAAAAA;
    margin: 0 0 0.15rem;
}

.lcc-review-value {
    font-size: 0.82rem;
    color: #333;
    margin: 0;
}

.lcc-what-next {
    background: #FFF8E1;
    border-radius: 4px;
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
}

.lcc-what-next-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6B5512;
    margin: 0 0 0.4rem;
}

.lcc-what-next-list {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.lcc-what-next-list li {
    font-size: 0.72rem;
    color: #6B5512;
    line-height: 1.45;
    padding-left: 0.1rem;
}

.lcc-what-next-list li::marker {
    color: #6a4c93;
    font-weight: 700;
}

.lcc-review-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
}

.lcc-btn-secondary {
    flex: 1;
    padding: 0.7rem 1rem;
    font-size: 0.82rem;
    color: #888;
    background: #fff;
    border: 1px solid #E0E0E0;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.lcc-btn-secondary:hover {
    background: #FAFAFA;
}

/* Sent step */
.lcc-sent {
    text-align: center;
    padding-top: 1rem;
    padding-bottom: 2.25rem;
}

.lcc-sent-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f0f9f4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
}

.lcc-sent-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0 0 0.3rem;
}

.lcc-sent-sub {
    font-size: 0.75rem;
    color: #888;
    margin: 0 0 1.25rem;
}

.lcc-btn-text {
    background: none;
    border: none;
    color: #6a4c93;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}
.lcc-btn-text:hover {
    opacity: 0.75;
}

@media (max-width: 600px) {
    .lcc-trust-row { display: none; }
    .lcc-card { max-width: 100%; }
    .lcc-card-header { padding: 1.5rem 1.25rem 1rem; }
    .lcc-body { padding: 0 1.25rem 1.5rem; }
}
/* ---------- NZBN Company Picker ---------- */
.company-picker-block { margin-bottom: 1.8rem; gap: 4px; }
.company-picker-row { display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; }
.company-picker-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.company-picker-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: none;
    border-radius: 4px;
    font-size: 0.9rem;
    box-sizing: border-box;
    background: transparent;
}
.company-picker-input:focus {
    outline: none;
}
.company-picker-hint {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: #6b7280;
}
.company-search-results {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 50;
    background: #fff;
    border: 1px solid #c8cdd6;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(20, 28, 60, 0.12);
    max-height: 280px;
    overflow-y: auto;
}
.company-search-item {
    padding: 0.55rem 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid #eef0f5;
}
.company-search-item:last-child { border-bottom: none; }
.company-search-item:hover { background: #f3f6ff; }
.company-search-item-name { font-weight: 600; color: #1f2937; }
.company-search-item-meta { font-size: 0.8rem; color: #6b7280; margin-top: 2px; }
.company-search-empty,
.company-search-error {
    padding: 0.6rem 0.75rem;
    font-size: 0.9rem;
    color: #6b7280;
}
.company-search-error { color: #b91c1c; }
.company-search-status {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    right: 0;
    font-size: 0.8rem;
    color: #6b7280;
}
.selected-company-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #6a4c93;
    border: 1px solid #6a4c93;
    color: #fff;
    padding: 0.45rem 0.75rem;
    border-radius: 4px;
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    white-space: nowrap;
    flex: 1;
}
.selected-company-label { font-weight: 600; }
.selected-company-nzbn { color: rgba(255,255,255,0.75); font-size: 0.85rem; }
.selected-company-clear {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.7);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}
.selected-company-clear:hover { color: #fff; }

/* ---------- Editor company indicator ---------- */
/* Sits inline next to the disclaimer text at the bottom of the chat
   pane, so it scales with the layout instead of floating over content. */
.chat-footer-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0;
    flex-wrap: wrap;
    position: relative;
}
.chat-disclaimer {
    font-size: 10px;
    color: #888;
    opacity: 0.7;
    text-align: center;
    margin: 0;
    line-height: 1.15;
}
.editor-legal-links {
    text-align: center;
    padding: 28px 0 8px;
    font-size: 11px;
    opacity: 0.6;
}
.editor-legal-links a {
    color: #888;
    text-decoration: none;
}
.editor-legal-links a:hover {
    color: #555;
    text-decoration: underline;
}
.editor-company-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #6a4c93;
    border: 1px solid #6a4c93;
    color: #fff;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    cursor: pointer;
    max-width: 260px;
    white-space: nowrap;
    overflow: visible;
    flex-shrink: 0;
}
.editor-company-picker {
    bottom: calc(100% + 6px);
    top: auto;
}
.editor-company-chip:hover { background: #5a3d80; border-color: #5a3d80; }
.editor-company-chip.is-empty {
    background: #f4f5f7;
    border: 1px dashed #b8bcc4;
    color: #8a8f99;
}
.editor-company-chip.is-empty:hover {
    background: #ecedf0;
    border-color: #9aa0aa;
    color: #6b7280;
}
.editor-company-chip.is-empty .editor-company-chip-remove { display: none; }

/* Counterparty chip — sits next to the company chip in the editor footer.
   Visually distinct: lighter purple tint vs. the solid-purple company chip. */
.editor-counterparty-chip {
    background: #f1ebff;
    border: 1px solid #c5b3ff;
    border-radius: 4px;
    color: #4a2f8a;
    margin-left: 0.4rem;
}
.editor-counterparty-chip:hover { background: #e6dcff; }
.editor-counterparty-chip.is-empty {
    background: #f4f5f7;
    border: 1px dashed #b8bcc4;
    color: #8a8f99;
}
.editor-counterparty-chip.is-empty:hover {
    background: #ecedf0;
    border-color: #9aa0aa;
    color: #6b7280;
}
.editor-counterparty-chip .editor-company-chip-remove {
    color: #4a2f8a;
}
.editor-counterparty-chip .editor-company-chip-remove:hover {
    background: rgba(74, 47, 138, 0.15);
}

/* Locked state — the active client's NATIVE templates lock the COMPANY
   chip (you can't re-pick your own company on your own template). */
.editor-company-chip.is-locked {
    cursor: default;
    pointer-events: none;
    opacity: 0.85;
}
.editor-company-chip.is-locked .editor-company-chip-remove { display: none; }

/* ---------- AI mode picker (button + dropdown) ---------- */
.ai-mode-wrap { position: relative; }
#actionButtons .ai-mode-btn {
    font-weight: 700;
    font-size: 14px;
    color: #6a4c93;
}
.ai-mode-menu {
    position: fixed;
    z-index: 2000;
    width: 240px;
    background: #fff;
    border: 1px solid #c8cdd6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 28, 60, 0.18);
    padding: 4px;
    text-align: left;
}
.ai-mode-menu-option {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 8px 10px;
    cursor: pointer;
    text-align: left;
    gap: 2px;
}
.ai-mode-menu-option:hover { background: #f4f5f7; }
.ai-mode-menu-option.is-active { background: #eaf2ff; }
.ai-mode-menu-title {
    font-weight: 600;
    font-size: 13px;
    color: #6a4c93;
}
.ai-mode-menu-option.is-active { background: #f3eef9; }
.ai-mode-menu-desc {
    font-size: 11px;
    color: #555;
    line-height: 1.3;
}

/* ---------- (deprecated) AI mode toggle slider ---------- */
.ai-mode-toggle {
    display: inline-flex;
    align-items: center;
    border: 1px solid #c8cdd6;
    border-radius: 999px;
    background: #f4f5f7;
    padding: 1px;
    margin-right: 0.4rem;
    font-size: 0.63rem;
    line-height: 1.3;
}
.ai-mode-option {
    appearance: none;
    border: none;
    background: transparent;
    color: #4a5160;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 500;
}
.ai-mode-option:hover { color: #1f3a93; }
.ai-mode-option.is-active {
    background: #1f3a93;
    color: #fff;
    cursor: default;
}
.editor-company-chip #editorCompanyName {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}
.editor-company-chip-remove {
    appearance: none;
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    padding: 0;
    margin: 0 0.1rem 0 -0.15rem;
    font-size: 0.95rem;
    line-height: 1;
    width: 14px;
    height: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.12s ease, background 0.12s ease;
}
.editor-company-chip:hover .editor-company-chip-remove {
    opacity: 1;
}
.editor-company-chip-remove:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}
.editor-company-picker {
    position: absolute;
    top: calc(100% + 6px);
    bottom: auto;
    left: 0;
    z-index: 100;
    width: 320px;
    background: #F5F5F5;
    border: 1px solid #E0E0E0;
    border-radius: 7px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.09);
    padding: 4px 12px;
    cursor: default;
}
.editor-company-picker .company-picker-input {
    font-size: 0.9rem;
    background: transparent;
    border-radius: 4px;
    padding: 0.3rem 0.75rem;
}
/* Status line ("Searching…") sits in normal flow under the input
   inside the popover, instead of absolutely-positioned where it
   stacked behind the text the user was typing. */
.editor-company-picker .company-search-status {
    position: static;
    margin-top: 0.35rem;
    text-align: right;
    font-style: italic;
}

/* ---------- Document "working" overlay (auto-prompt indicator) ----------
   The overlay covers the full document container (which can be many
   screens tall for a long template), so we deliberately anchor its inner
   content near the TOP of the overlay rather than vertically centering
   it. Otherwise the spinner + status text would land at the midpoint of
   a multi-page document — well below the fold — and the user would have
   to scroll down to discover that anything is happening. */
.document-working-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.78);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 1.5rem;
    z-index: 50;
    backdrop-filter: blur(1px);
}
.document-working-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    color: #1f3a93;
    font-weight: 500;
    /* Stick the indicator to the top of the viewport as the user scrolls
       through the document so it stays visible for the whole wait, not
       just at the initial scroll position. */
    position: sticky;
    top: 1.5rem;
}
.document-working-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #d6e0ff;
    border-top-color: #4a6cf7;
    border-radius: 50%;
    animation: docWorkingSpin 0.9s linear infinite;
}
.document-working-label {
    font-size: 0.95rem;
    color: #1f3a93;
}
@keyframes docWorkingSpin {
    to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------------------
 * Review-flow reasoning panel.
 *
 * Rendered above the document in the editor when the session was seeded
 * by /review/start. Mirrors the structure of the downloadable "Review
 * reasoning" .docx so the user can scan the AI's per-rule analysis on
 * screen before downloading. Hidden in every other flow.
 * ---------------------------------------------------------------------- */
.review-reasoning-panel {
    max-width: 960px;
    margin: 16px auto 24px;
    background: #fff;
    border: 1px solid #c8b4e0;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(74, 46, 117, 0.06);
    overflow: hidden;
}
.review-reasoning-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: linear-gradient(135deg, #f3eef9 0%, #e7dcf3 100%);
    border-bottom: 1px solid #c8b4e0;
}
.review-reasoning-title {
    font-size: 1rem; font-weight: 700; color: #4a2e75;
}
.review-reasoning-title--link {
    text-decoration: none; cursor: pointer;
    display: inline-flex; align-items: baseline; gap: 8px;
    border-bottom: 1px dashed transparent;
    transition: border-color .12s, color .12s;
}
.review-reasoning-title--link:hover {
    color: #6a4c93; border-bottom-color: #6a4c93;
}
.review-reasoning-download-hint {
    font-size: .72rem; font-weight: 500; color: #6a4c93;
    text-transform: uppercase; letter-spacing: .04em;
}
.review-reasoning-sub {
    font-size: .82rem; color: #6a4c93; margin-top: 2px;
}
.review-reasoning-toggle {
    background: #fff; border: 1px solid #c8b4e0; color: #6a4c93;
    font-size: .82rem; font-weight: 600;
    padding: 4px 12px; border-radius: 999px; cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.review-reasoning-toggle:hover {
    background: #6a4c93; border-color: #6a4c93; color: #fff;
}
.review-reasoning-body { padding: 14px 18px 18px; }
.review-reasoning-intro {
    font-size: .88rem; color: #555; margin: 0 0 12px; line-height: 1.45;
}
.review-reasoning-intro em { color: #4a2e75; font-style: normal; font-weight: 600; }
.review-reasoning-table-wrap {
    border: 1px solid #ece6f3; border-radius: 8px; overflow: hidden;
}
.review-reasoning-table {
    width: 100%; border-collapse: collapse; font-size: .9rem;
}
.review-reasoning-table th,
.review-reasoning-table td {
    padding: 10px 12px;
    text-align: left; vertical-align: top;
    border-bottom: 1px solid #ece6f3;
}
.review-reasoning-table thead th {
    background: #faf7fc; color: #4a2e75;
    font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 1px solid #c8b4e0;
}
.review-reasoning-table tbody tr:last-child td { border-bottom: none; }
.review-reasoning-table tbody tr:hover { background: #faf7fc; }
.review-reasoning-table .rrt-rule { width: 22%; }
.review-reasoning-table .rrt-outcome { width: 14%; white-space: nowrap; }
.review-reasoning-table .rrt-clauses { width: 22%; color: #444; font-size: .85rem; }
.review-reasoning-table .rrt-reasoning { color: #333; line-height: 1.5; }
.rrt-rule-name { font-weight: 600; color: #222; }
.rrt-rule-type {
    font-size: .72rem; color: #888; margin-top: 2px;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 600;
}
.rrt-pill {
    display: inline-block;
    padding: 3px 10px; border-radius: 999px;
    font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    border: 1px solid transparent;
}
.rrt-pill-amended   { background: #f3eef9; color: #4a2e75; border-color: #c8b4e0; }
.rrt-pill-compliant { background: #e8f4ec; color: #1f6e3a; border-color: #b8dac3; }
.rrt-pill-commented { background: #fdf3df; color: #7a5500; border-color: #f0d97a; }
.rrt-pill-noaction  { background: #f1f1f3; color: #555;    border-color: #d4d4dc; }
@media (max-width: 720px) {
    .review-reasoning-table thead { display: none; }
    .review-reasoning-table tbody tr {
        display: block; padding: 12px 14px;
        border-bottom: 1px solid #ece6f3;
    }
    .review-reasoning-table tbody tr:last-child { border-bottom: none; }
    .review-reasoning-table td {
        display: block; width: auto !important;
        padding: 4px 0; border: none;
    }
    .review-reasoning-table .rrt-outcome { margin: 4px 0; }
}

/* Macron kerning fix — the ī glyph's diacritic extends horizontally,
   causing the browser to leave a wider advance gap before the next
   letter. A small negative letter-spacing on just that character
   pulls the following letter back to match the rhythm of the rest. */
.macron-i {
    letter-spacing: -0.07em;
}

.landing-title {
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}