/* Landing Page Styles */
.landing-page {
    min-height: 100vh;
    background: linear-gradient(135deg, #fbfbfc 0%, #f1f3f6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.landing-content {
    max-width: 600px;
    text-align: center;
    background: white;
    padding: 60px 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

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

.landing-logo {
    height: 60px;
    margin-bottom: 20px;
}

.landing-title {
    font-size: 3rem;
    font-weight: bold;
    color: #333;
    margin: 0;
    font-family: 'Helvetica', Arial, sans-serif;
}

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

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

.landing-options {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-bottom: 40px;
    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;
}

/* Subsequent section headings inside .landing-options get a little
   extra top spacing + a faint divider so the two groupings (Drafting /
   Document Review) read as distinct sections rather than one long
   list. */
.landing-options-header--divider {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #e6dff0;
}

.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: 14px;
    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: linear-gradient(135deg, #f3eef9 0%, #e7dcf3 100%);
    border: 1px solid #c8b4e0;
    box-shadow: 0 4px 14px rgba(106, 76, 147, 0.12);
}

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

.landing-option-row--secondary {
    background: transparent;
    border: 1px solid #d4cae0;
}

.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%;
}
.custom-select-trigger {
    width: 100%;
    background: #fff;
    border: 1px solid #b9a8d1;
    color: #333;
    padding: 10px 38px 10px 16px;
    border-radius: 22px;
    font-size: 15px;
    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='%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;
    display: block;
    line-height: 1.3;
}
.custom-select-trigger:hover {
    border-color: #6a4c93;
    box-shadow: 0 2px 8px rgba(106, 76, 147, 0.15);
}
.custom-select-trigger:focus {
    outline: none;
    border-color: #6a4c93;
    box-shadow: 0 0 0 3px rgba(106, 76, 147, 0.2);
}
.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 #c8b4e0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(20, 28, 60, 0.18);
    padding: 6px;
    max-height: 70vh;
    overflow-y: auto;
}
.custom-select-option {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    color: #333;
}
.custom-select-option:hover { background: #f3eef9; }
.custom-select-option.is-active { background: #f3eef9; }
.custom-select-option-title {
    display: block;
    font-weight: 600;
    font-size: 13px;
    color: #6a4c93;
    margin-bottom: 2px;
}
.custom-select-option-desc {
    display: block;
    font-size: 11px;
    color: #555;
    line-height: 1.3;
}
.custom-select-section {
    padding: 6px 10px 4px;
    font-size: 10px;
    text-transform: uppercase;
    color: #888;
    letter-spacing: 0.04em;
}

.landing-option-button {
    background: #fff;
    border: 1px solid #b9a8d1;
    color: #6a4c93;
    padding: 10px 20px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 500;
    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;
}

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

.landing-option-button:hover {
    background: #f3eef9;
    border-color: #6a4c93;
}

/* 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-option-button--ghost {
    border: 1px dashed #c8b4e0;
    background: transparent;
    color: #7a6398;
    font-weight: 400;
    font-size: 13px;
    padding: 8px 18px;
    text-decoration: none;
}
.landing-option-button--ghost::before { content: none; }
.landing-option-button--ghost:hover {
    background: #f3eef9;
    border-style: solid;
    border-color: #6a4c93;
    color: #4a2e75;
}
.landing-option-row--muted .landing-option-label {
    color: #8a8090;
    font-weight: 400;
}
.landing-option-row--muted {
    min-height: 0;
    padding-top: 8px;
    padding-bottom: 8px;
}
.landing-option-row--muted .landing-option-label,
.landing-option-row--muted .landing-option-button--ghost {
    font-size: 13px;
}

@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: 6px;
    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: #fafafa;
    color: #333;
    z-index: 1000;
    padding: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    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: #fafafa;
    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: #fafafa;
    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;
}

.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;
}

/* 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 #d0d0d0;
    border-radius: 10px;
    padding: 8px;
    background: #fafafa;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

.document-container {
    margin-top: 45vh;
    min-height: 55vh;
    background-color: #f5f5f5;
    padding: 40px 20px;
}

.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: 'Times New Roman', 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 #ddd;
    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: #e3f2fd;
    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;
}

.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: 12px 16px;
    border: none;
    background: white;
    color: #666;
    cursor: pointer;
    text-align: center;
    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 {
    background: rgba(216, 197, 242, 0.22);
}
.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);
}
.comment-bubble {
    position: relative;
    margin: 8px 0 12px 28px;
    padding: 8px 12px 8px 14px;
    background: #f4eefb;
    border: 1px solid #d8c5f2;
    border-radius: 10px;
    font-size: 13px;
    color: #2b2b2b;
    max-width: 80%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.comment-bubble::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 16px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #d8c5f2;
}
.comment-bubble::after {
    content: '';
    position: absolute;
    top: -6px;
    left: 17px;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #f4eefb;
}
.comment-bubble-label {
    font-weight: 600;
    color: #5a3fa0;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 6px;
}
.comment-bubble-text {
    white-space: pre-wrap;
    word-wrap: break-word;
}
.comment-bubble-actions {
    margin-top: 8px;
    font-size: 11px;
}
.comment-bubble-actions button {
    background: none;
    border: none;
    color: #5a3fa0;
    text-decoration: underline;
    cursor: pointer;
    padding: 0 8px 0 0;
    font-size: 11px;
}
.comment-bubble-actions button:hover {
    color: #3d2870;
}
.comment-editor {
    margin: 8px 0 12px 28px;
    padding: 8px;
    background: #faf8fd;
    /* A softened theme purple — clearly purple (not lavender, not yellow)
       but with enough transparency that the frame doesn't visually
       overpower the small textarea inside it. */
    border: 1px solid rgba(90, 63, 160, 0.55);
    border-radius: 10px;
    max-width: 80%;
}
/* While the inline editor is open on a paragraph, suppress that
   paragraph's "+ ask" pill — clicking it would otherwise tear down the
   editor (and the half-typed question) and start over. */
.doc-para:has(.comment-editor) .add-comment-btn {
    display: none !important;
}

/* Tables: the wrapper around a table is non-interactive (no hover bg,
   no wrapper-level "+ ask" pill) — we attach commenting per-cell so
   the user can ask about a single cell 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-commentable.has-comment {
    background: rgba(216, 197, 242, 0.28);
}
/* Cell-level "+ ask" pill — same styling as the paragraph pill, just
   tucked into the top-right of the cell and only shown on cell hover
   (not on row/table hover) so the affordance maps to one cell only. */
.cell-add-comment-btn {
    top: 2px;
    right: 2px;
}
.cell-commentable:hover > .cell-add-comment-btn {
    opacity: 1;
}
.cell-commentable:has(.comment-editor) > .cell-add-comment-btn {
    display: none !important;
}
.comment-editor textarea,
.comment-editor .comment-editor-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #c9b8e8;
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    box-sizing: border-box;
    background: #ffffff;
    color: #2b2b2b;
}
.comment-editor textarea {
    min-height: 60px;
    resize: vertical;
}
.comment-editor .comment-editor-input {
    /* Single-line input keeps the prior comment thread visible above
       while the user is typing, so they can see what they're replying to. */
    height: 32px;
}
.comment-editor textarea:focus,
.comment-editor .comment-editor-input:focus {
    /* Replace the browser default focus ring (which renders as a
       yellow/orange dotted outline in some browsers) with a clear
       purple frame that matches the rest of the comments UI. */
    outline: none;
    border-color: #5a3fa0;
    box-shadow: 0 0 0 2px rgba(90, 63, 160, 0.18);
}
.comment-editor-actions {
    margin-top: 6px;
    text-align: right;
}
.comment-editor-actions button {
    margin-left: 6px;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid #c9b8e8;
    background: #fff;
    color: #5a3fa0;
}
.comment-editor-actions button.primary {
    background: #5a3fa0;
    color: #fff;
    border-color: #5a3fa0;
}
.comment-editor-actions button[disabled],
.comment-bubble-actions button[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}
.comment-editor-status {
    margin-top: 6px;
    font-size: 12px;
    color: #5a3fa0;
    font-style: italic;
}
.comment-thread {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.comment-msg {
    padding: 6px 8px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid #e3d6f4;
}
.comment-msg-assistant {
    background: #ede2fa;
    border-color: #c9b8e8;
}
.comment-msg-author {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
    color: #5a3fa0;
    display: flex;
    align-items: center;
}
.comment-msg-author:empty {
    /* User messages render with no label — collapse the row so the message
       text doesn't sit below an empty band. */
    display: none;
}
.comment-msg-icon {
    height: 16px;
    width: auto;
    display: inline-block;
}
.ask-btn-icon {
    height: 14px;
    width: auto;
    vertical-align: middle;
    margin-left: 4px;
    display: inline-block;
    filter: brightness(0) invert(1);
}
.comment-msg-text {
    white-space: pre-wrap;
    word-wrap: break-word;
    color: #2b2b2b;
}

.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 {
        margin-top: calc(45vh + 40px);
        min-height: calc(55vh - 40px);
        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: 4px;
    }

    #actionButtons .btn-legal-advice {
        padding: 6px 10px;
        font-size: 11px;
        min-width: auto;
    }

    #actionButtons .btn-icon {
        padding: 6px 8px;
        min-width: 30px;
    }
}

    .chat-area {
        padding: 6px;
    }

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

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

    #actionButtons {
        gap: 4px;
    }

    #actionButtons .btn-legal-advice {
        padding: 8px 12px;
        font-size: 12px;
    }
}

@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 {
        padding: 30px 20px;
    }

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

    .document-container {
        margin-top: 50vh;
        min-height: 50vh;
    }

    .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 {
        margin-top: 50vh;
        min-height: 50vh;
    }

    .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 #ddd;
    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;
}

/* 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;
}

.modal-card {
    z-index: 2002;
    max-width: 600px;
    margin: 0 auto;
}

/* Form validation styling - only show borders after validation */
.input:valid, .textarea:valid {
    border-color: #6a4c93; /* Changed to purple */
}

/* Remove default invalid styling - let JavaScript handle validation display */
.input:invalid, .textarea:invalid {
    border-color: #dbdbdb;
}

/* Improved modal content spacing */
.modal-card-body .field {
    margin-bottom: 1.5rem;
}

.modal-card-body .message {
    margin-top: 1rem;
}

/* Better button styling in modal */
.modal-card-foot {
    justify-content: flex-end;
    gap: 0.75rem;
}

.modal-card-foot .button {
    min-width: 100px;
}

.modal-card-foot .button.is-primary {
    background-color: #6a4c93;
    border-color: #6a4c93;
}

.modal-card-foot .button.is-primary:hover {
    background-color: #5a3d7a;
    border-color: #5a3d7a;
}

/* Custom modal styling */
.modal-card-head {
    background-color: #e8e3f0 !important;
    border-bottom: 1px solid rgba(106, 76, 147, 0.2);
}

.modal-card-head .modal-card-title {
    color: #6a4c93;
    font-weight: 600;
}

.message.is-info .message-body {
    background-color: #f5f5f5 !important;
    border-left: 3px solid #6a4c93;
    color: #555;
}

/* Responsive modal improvements */
@media (max-width: 768px) {
    .modal-card {
        max-width: 95%;
        margin: 20px;
    }

    .modal-card-foot {
        flex-direction: column;
    }

    .modal-card-foot .button {
        width: 100%;
    }
}
/* ---------- NZBN Company Picker ---------- */
.company-picker-block { margin-bottom: 1.25rem; }
.company-picker-row { align-items: flex-start; }
.company-picker-input-wrap {
    position: relative;
    flex: 1;
    min-width: 0;
}
.company-picker-input {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 1px solid #c8cdd6;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
}
.company-picker-input:focus {
    outline: none;
    border-color: #4a6cf7;
    box-shadow: 0 0 0 3px rgba(74, 108, 247, 0.15);
}
.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 {
    margin-top: 4px;
    font-size: 0.8rem;
    color: #6b7280;
    min-height: 1em;
}
.selected-company-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #eaf2ff;
    border: 1px solid #b3ccff;
    color: #1f3a93;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    font-size: 0.95rem;
    flex: 1;
}
.selected-company-label { font-weight: 600; }
.selected-company-nzbn { color: #4a5b8a; font-size: 0.85rem; }
.selected-company-clear {
    background: transparent;
    border: none;
    color: #1f3a93;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.25rem;
}
.selected-company-clear:hover { color: #b91c1c; }

/* ---------- 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-company-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: #eaf2ff;
    border: 1px solid #b3ccff;
    color: #1f3a93;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    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: #dde9ff; }
.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 so the two chips can't be confused at a glance. */
.editor-counterparty-chip {
    background: #f1ebff;
    border-color: #c5b3ff;
    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: #1f3a93;
    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(31, 58, 147, 0.15);
}
.editor-company-picker {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 100;
    width: 320px;
    background: #fff;
    border: 1px solid #c8cdd6;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(20, 28, 60, 0.18);
    padding: 0.6rem;
    cursor: default;
}
.editor-company-picker .company-picker-input { font-size: 0.9rem; }

/* ---------- 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; }
}