body {
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #b3cba5 0%, #f6edcd 100%);
    background-attachment: fixed;

    /* never rescale for phone */
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -moz-text-size-adjust: none;
}

* {
    font-family: Arial, Helvetica, sans-serif;
}

.output {
    display: inline-block;
    width: 30%;
    background-color: #fffc;
    padding: 10px;
    border-radius: 8px;
    vertical-align: top;
    margin-left: 5px;
}


.difference:not(.hidden) {
    background-color: #e3e995;
}

.button_panel {
    text-align: center;
    margin-top: 5px;
}

input[type="button"] {
    background: #fff;
    border: none;
    border-radius: 8px;
    font-size: large;
    box-shadow: 0 2px 4px #0001;
}


input[type="button"]:hover:not(:disabled) {
    background: #ffd;
    cursor: pointer;
}

input[type="button"]:disabled {
    background: #bbb;
    cursor: not-allowed;
}

label {
    user-select: none;
}

.white-box {
    border-radius: 8px;
    background: #fff;
    padding: 15pt;
    box-shadow: 0 4px 6px #0000001a
}

.output_block {
    margin-bottom: 20px;
}

.model_name {
    font-weight: bold;
    font-size: 0.9em;
    color: #555;
    margin-bottom: 5px;
    padding: 2px 0;
}

/* Character hover and highlighting */
.tgt_char:hover {
    background-color: #ccc;
    cursor: pointer;
}

.src_char:hover {
    background-color: #ccc;
}

.src_char.highlighted,
.tgt_char.highlighted {
    background-color: #ccc;
}

.highlighted_active {
    background-color: #aaf !important;
}

/* Error span colors */
.error_unknown {
    background-color: #ddf;
}

.error_neutral {
    background-color: #edd;
}

.error_minor {
    background-color: #fcc;
}

.error_major {
    background-color: #e88;
}

.error_critical {
    background-color: #c44;
}

/* Span toolbox */
.span_toolbox {
    background-color: white;
    padding: 6px 8px;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0dcc8;
}

.span_toolbox_parent {
    position: fixed;
    padding: 6px 14px 8px 14px;
    min-width: max-content;
    z-index: 1000;
}

/* Error severity buttons */
input[type="button"].error_neutral {
    background-color: #ecc9 !important;
    width: 100%;
    text-align: center;
    border-radius: 8px;
}

input[type="button"].error_neutral:hover {
    background-color: #ecc !important;
}

input[type="button"].error_minor {
    background-color: #fcc !important;
    width: 100%;
    text-align: center;
    border-radius: 8px;
}

input[type="button"].error_minor:hover {
    background-color: #daa !important;
}

input[type="button"].error_major {
    background-color: #e88 !important;
    width: 100%;
    text-align: center;
    border-radius: 8px;
}

input[type="button"].error_major:hover {
    background-color: #c66 !important;
}

input[type="button"].error_critical {
    background-color: #c44 !important;
    width: 100%;
    text-align: center;
    border-radius: 8px;
}

input[type="button"].error_critical:hover {
    background-color: #a22 !important;
}

input[type="button"].error_delete {
    background-color: #ddd !important;
    font-size: 10pt;
    width: 100%;
    text-align: center;
    border-radius: 8px;
}

input[type="button"].error_delete:hover {
    background-color: #ccc !important;
}

#button_error_minor:hover,
#button_error_major:hover {
    opacity: 0.8;
    cursor: pointer;
}

input[type="button"][selected] {
    border-radius: 2px;
}

/* Progress bar */
#progress span {
    font-size: 0pt;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    line-height: 2em;
    margin-left: 2px;
    box-shadow: 0 1px 1px #0002;
    width: 10px;
    height: 10px;
}

#progress span:hover,
#progress span.progress_current,
#progress span.progress_incomplete:last-child {
    cursor: pointer;
    user-select: none;
    position: relative;
    top: 7.5px;
    width: 22px;
    height: 22px;
    font-size: 8pt;
    margin-left: -5px;
    margin-right: -5px;
    box-shadow: 0 1px 3px #0002;
    margin-bottom: 2px;
}

#progress span:hover {
    z-index: 100;
}

#progress span.progress_complete {
    color: white;
    background: #3b5238;
}

#progress span.progress_complete:hover {
    background: #2e3e2b;
}

#progress span.progress_current {
    background: #91b08d;
}

#progress span.progress_current:hover {
    background: #739c6f;
}

#progress span.progress_incomplete {
    background: #bbb;
    color: #555;
}

#progress span.progress_incomplete:hover {
    background: #aaa;
}

/* Validation warning indicator */
.validation_warning {
    margin-right: 5px;
    position: relative;
    top: -5px;
}

.char_missing {
    font-family: monospace;
}

/* Form styling */
.form-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
}

.form-field {
    margin-bottom: 20px;
}

.form-label {
    font-size: 14pt;
    margin-bottom: 8px;
    color: #333;
}

.form-input {
    width: 100%;
    padding: 10px;
    font-size: 12pt;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

.form-input:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 5px rgba(76, 175, 80, 0.3);
}

/* ============================================================
   THOUGHT protocol — Transcript Viewer (Phase 2)
   ============================================================ */

/* Override flex layout to single column for THOUGHT items */
.thought-output-block .output_item {
    display: block;
}

.thought-output-block .output_scrollable {
    display: block;
    overflow-x: visible;
    padding-bottom: 10px;
}

.thought-output-block .output_candidate {
    display: block;
    width: 100%;
}

.thought-output-block .output_tgt {
    max-width: none;
    margin: 0;
    min-width: unset;
}

/* Metadata header bar */
.thought-meta {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e5e2d8;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.thought-meta-id {
    font-weight: bold;
    font-family: 'Courier New', monospace;
    font-size: 10pt;
    color: #333;
}

.thought-meta-badge {
    background: #e0d8c0;
    border-radius: 4px;
    padding: 2px 10px;
    font-size: 9pt;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.thought-meta-stat {
    color: #777;
    font-size: 9pt;
    margin-left: auto;
}

.thought-meta-stat + .thought-meta-stat {
    margin-left: 0;
}

.thought-meta-separator {
    color: #ccc;
    font-size: 9pt;
}

/* Transcript body */
.thought-transcript {
    font-size: 13pt !important;
    line-height: 2.0 !important;
    padding: 24px 28px !important;
    background: #fff !important;
    border: 1px solid #e5e2d8;
    border-radius: 8px;
    color: #2c2c2c;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Audio cue badges — styled inline within character spans */
.thought-audio-cue {
    font-family: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    font-size: 0.78em;
    color: #8a7e6b;
    background: #f0ece0;
    border-radius: 3px;
    padding: 1px 3px;
    margin: 0 1px;
    cursor: default;
}

.thought-audio-cue-start {
    border-radius: 3px 0 0 3px;
    padding-left: 5px;
}

.thought-audio-cue-end {
    border-radius: 0 3px 3px 0;
    padding-right: 5px;
}

/* Cue type variants */
.thought-audio-cue.thought-cue-pause {
    background: #ede6d4;
    color: #997;
}

.thought-audio-cue.thought-cue-laughter {
    background: #e0e8d0;
    color: #696;
}

.thought-audio-cue.thought-cue-unclear {
    background: #e8dce0;
    color: #968;
}

.thought-audio-cue.thought-cue-emphasis {
    background: #d8e0e8;
    color: #669;
}

/* Hover override: don't show pointer cursor on audio cue chars */
.thought-audio-cue:hover {
    background-color: inherit;
    cursor: default;
}

/* ============================================================
   THOUGHT protocol — Annotation UI (Phase 3)
   ============================================================ */

/* Toolbar (layer buttons + mode dropdown + relation toggle) */
.thought-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #e5e2d8;
    border-radius: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.thought-mode-select {
    padding: 5px 8px;
    font-size: 9pt;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

/* Workspace: transcript + sidebar side by side */
.thought-workspace {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.thought-transcript-col {
    flex: 1;
    min-width: 0;
}

.thought-sidebar {
    width: 300px;
    flex-shrink: 0;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid #e5e2d8;
    border-radius: 8px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* Span Inspector */
.thought-inspector {
    border-bottom: 1px solid #e5e2d8;
    padding-bottom: 12px;
    margin-bottom: 12px;
}

.thought-inspector-empty {
    font-style: italic;
    color: #999;
    font-size: 9.5pt;
    padding: 10px 0;
}

.thought-inspector-text {
    font-size: 9.5pt;
    color: #333;
    padding: 6px 10px;
    margin-bottom: 10px;
    background: #fff;
    border-radius: 4px;
    word-break: break-word;
}

.thought-inspector-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.thought-inspector-label {
    font-size: 8.5pt;
    text-transform: uppercase;
    color: #666;
    min-width: 65px;
    font-weight: 600;
}

.thought-inspector-tag {
    flex: 1;
    height: 2em;
    font-size: 9pt;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px 6px;
}

.thought-inspector-btns {
    display: flex;
    gap: 3px;
}

/* Sidebar buttons (strength/confidence) */
.thought-sb-btn {
    width: 32px;
    height: 30px;
    font-size: 10pt;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fafafa;
    cursor: pointer;
    transition: all 0.1s;
}

.thought-sb-btn:hover {
    background: #f0f0f0;
    border-color: #ccc;
}

.thought-sb-btn[data-active="true"] {
    background: #4a9d5b;
    color: #fff;
    border-color: #3d8a4e;
    font-weight: 600;
}

/* Delete button */
.thought-sb-delete {
    margin-top: 10px;
    width: 100%;
    padding: 5px;
    font-size: 9pt;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #f5f5f5;
    cursor: pointer;
    color: #555;
}

.thought-sb-delete:hover {
    background: #d9534f;
    color: #fff;
    border-color: #d43f3a;
}

/* Span list */
.thought-span-list-header {
    font-size: 9pt;
    font-weight: bold;
    color: #555;
    margin-bottom: 8px;
}

.thought-span-list-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 9pt;
    transition: background 0.1s;
    margin-bottom: 2px;
}

.thought-span-list-item:hover {
    background: #eee8d5;
}

.thought-span-list-item[data-selected="true"] {
    background: #e0d8c0;
    font-weight: bold;
}

.thought-span-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.thought-span-tag {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333;
}

.thought-span-dim {
    color: #888;
    font-size: 8pt;
    flex-shrink: 0;
}

.thought-span-stars {
    color: #b8860b;
    font-size: 8pt;
    flex-shrink: 0;
}

.thought-span-check {
    color: #5cb85c;
    font-weight: bold;
    flex-shrink: 0;
}

.thought-span-incomplete {
    color: #d9534f;
    flex-shrink: 0;
}

/* Selected span highlight in transcript */
.thought-span-selected {
    font-weight: bold;
    border-bottom-width: 3px !important;
    background-color: rgba(74, 157, 91, 0.12) !important;
}

.thought-layer-label {
    font-size: 9pt;
    font-weight: bold;
    color: #555;
    white-space: nowrap;
}

.thought-layer-buttons {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.thought-layer-btn {
    padding: 5px 14px;
    font-size: 10pt;
    border: none;
    border-radius: 20px;
    background: #f0ede5;
    cursor: pointer;
    transition: all 0.15s;
    border-bottom: 3px solid transparent;
}

.thought-layer-btn:hover {
    background: #e8e4da;
}

.thought-layer-btn.thought-layer-active {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    font-weight: 600;
}

.thought-relation-toggle {
    margin-left: auto;
    padding: 4px 12px;
    font-size: 9pt;
    border: 1px solid #aaa;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    transition: background 0.15s;
}

.thought-relation-toggle:hover {
    background: #eee;
}

.thought-relation-toggle.thought-relation-active {
    background: #d9534f;
    color: #fff;
    border-color: #d43f3a;
}

/* Span character styling */
.thought-span-char {
    cursor: pointer;
    transition: background-color 0.15s;
    border-bottom-style: solid;
}


/* Document scores panel */
.thought-doc-scores {
    margin-top: 16px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #e5e2d8;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.thought-doc-scores h4 {
    margin: 0 0 10px 0;
    font-size: 10pt;
    color: #444;
}

.thought-doc-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px 20px;
}

.thought-doc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.thought-doc-field label {
    font-size: 8.5pt;
    color: #666;
    font-weight: 600;
}

.thought-doc-field select,
.thought-doc-field input[type="number"] {
    height: 2.2em;
    font-size: 9pt;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 2px 8px;
    width: 100%;
    box-sizing: border-box;
}

.thought-doc-notes {
    grid-column: 1 / -1;
    margin-top: 4px;
}

.thought-doc-notes label {
    font-size: 8.5pt;
    color: #666;
    font-weight: 600;
    display: block;
    margin-bottom: 4px;
}

.thought-doc-notes textarea {
    width: 100%;
    height: 50px;
    font-size: 9pt;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 8px;
    resize: vertical;
    box-sizing: border-box;
}

/* Relations panel */
.thought-relations-panel {
    margin-top: 12px;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #e5e2d8;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.thought-relations-panel h4 {
    margin: 0 0 8px 0;
    font-size: 10pt;
    color: #444;
}

.thought-rel-count {
    font-weight: normal;
    color: #888;
}

.thought-relation-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    margin-bottom: 4px;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #eee;
    transition: background 0.1s;
}

.thought-relation-item:hover {
    background: #faf8f0;
}

.thought-rel-label {
    font-size: 9pt;
    font-weight: bold;
    color: #333;
}

.thought-rel-type {
    font-size: 8.5pt;
    color: #888;
    font-style: italic;
}

.thought-rel-delete {
    margin-left: auto;
    width: 20px;
    height: 20px;
    font-size: 9pt;
    border: 1px solid #ccc;
    border-radius: 3px;
    background: #f5f5f5;
    cursor: pointer;
    line-height: 1;
}

.thought-rel-delete:hover {
    background: #d9534f;
    color: #fff;
    border-color: #d43f3a;
}

/* Relation modal overlay */
.thought-relation-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thought-relation-modal {
    background: #fff;
    padding: 20px 24px;
    border-radius: 8px;
    min-width: 340px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.thought-relation-modal h4 {
    margin: 0 0 12px 0;
    font-size: 11pt;
}

.thought-relation-modal-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
}

.thought-rel-modal-cancel,
.thought-rel-modal-confirm {
    padding: 6px 16px;
    font-size: 9pt;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.thought-rel-modal-cancel {
    background: #f5f5f5;
}

.thought-rel-modal-confirm {
    background: #5cb85c;
    color: #fff;
    border-color: #4cae4c;
}

.thought-rel-modal-confirm:disabled {
    background: #ccc;
    border-color: #bbb;
    cursor: not-allowed;
}

.thought-rel-str-btn {
    width: 26px;
    height: 24px;
    font-size: 9pt;
    border: 1px solid #bbb;
    border-radius: 3px;
    background: #f5f5f5;
    cursor: pointer;
}

.thought-rel-str-btn[selected] {
    background: #5cb85c;
    color: #fff;
    border-color: #4cae4c;
}

.thought-rel-str-btn:hover {
    background: #e0e0e0;
}

/* ============================================================
   CHATTER Theme — calm, clean overrides for THOUGHT protocol
   Applied via body.chatter-theme class set by annotate.ts
   ============================================================ */

body.chatter-theme {
    background: #f5f5f0;
    background-attachment: fixed;
}

body.chatter-theme * {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

body.chatter-theme .white-box {
    background: #fff;
    border: 1px solid #e5e2d8;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Override the inline yellow-green instruction bar */
body.chatter-theme .white-box[style*="e7e2cf"] {
    background-color: #fafaf6 !important;
}

/* Progress bar — neutral greys + teal accent */
body.chatter-theme #progress span.progress_complete {
    background: #5a7a6e;
}
body.chatter-theme #progress span.progress_complete:hover {
    background: #4a6a5e;
}
body.chatter-theme #progress span.progress_current {
    background: #7eb8a8;
}
body.chatter-theme #progress span.progress_current:hover {
    background: #6aa898;
}
body.chatter-theme #progress span.progress_incomplete {
    background: #ccc;
    color: #666;
}
body.chatter-theme #progress span.progress_incomplete:hover {
    background: #bbb;
}

/* Footer */
body.chatter-theme footer {
    color: #999;
}
body.chatter-theme footer a {
    color: #999;
}

/* Span list items in chatter theme */
body.chatter-theme .thought-span-list-item:hover {
    background: #f0f0ec;
}
body.chatter-theme .thought-span-list-item[data-selected="true"] {
    background: #e8e8e2;
}

/* Meta badges */
body.chatter-theme .thought-meta-badge {
    background: #eae6dc;
}