.tnx-semantic-preview,
.tnx-semantic-review {
    margin-top: .75rem;
    padding: .85rem .95rem;
    border: 1px solid #bfd8ca;
    border-radius: 12px;
    background: #f2faf5;
}

.tnx-semantic-preview[hidden] {
    display: none;
}

.tnx-semantic-preview {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    border-color: #b9dec8;
    border-radius: 16px;
    background: linear-gradient(145deg, #f7fcf9 0%, #edf8f1 100%);
    box-shadow: 0 10px 30px rgba(22, 88, 49, .065);
    overflow: hidden;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.tnx-semantic-preview.is-smart {
    border-color: #a8d7bb;
    box-shadow: 0 12px 34px rgba(22, 88, 49, .09);
}

.tnx-semantic-preview.needs-review {
    border-color: #ead4a0;
    background: linear-gradient(145deg, #fffdf7 0%, #fff8e9 100%);
}

.tnx-semantic-preview-icon {
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #177844;
    font-size: 1rem;
    font-weight: 900;
    box-shadow: 0 5px 14px rgba(23, 120, 68, .2);
}

.tnx-semantic-preview.is-thinking .tnx-semantic-preview-icon span {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    color: transparent;
    animation: tnx-semantic-spin .75s linear infinite;
}

@keyframes tnx-semantic-spin {
    to { transform: rotate(360deg); }
}

.tnx-semantic-preview-copy {
    display: grid;
    min-width: 0;
    gap: .2rem;
}

.tnx-semantic-preview-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .35rem .75rem;
}

.tnx-semantic-quality {
    padding: .22rem .45rem;
    border-radius: 999px;
    color: #12663a;
    background: rgba(23, 120, 68, .09);
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .015em;
}

.tnx-semantic-preview-copy > strong {
    color: #17291f;
    font-size: 1rem;
    line-height: 1.25;
}

.tnx-semantic-preview small,
.tnx-semantic-review > small {
    color: #647168;
}

.tnx-semantic-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .45rem;
}

.tnx-semantic-chips > span {
    display: inline-flex;
    align-items: baseline;
    gap: .3rem;
    max-width: 100%;
    padding: .38rem .55rem;
    border: 1px solid rgba(23, 120, 68, .14);
    border-radius: 999px;
    color: #183d29;
    background: rgba(255, 255, 255, .8);
    font-size: .76rem;
    line-height: 1.15;
}

.tnx-semantic-chips small {
    color: #6a7b70;
    font-size: .65rem;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.tnx-semantic-chips strong {
    overflow-wrap: anywhere;
}

.tnx-semantic-correction {
    margin-top: .55rem;
    border-top: 1px solid rgba(23, 120, 68, .13);
}

.tnx-semantic-correction > summary {
    padding: .65rem 0 .15rem;
    color: #17693d;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 800;
    list-style: none;
    width: max-content;
}

.tnx-semantic-correction > summary::-webkit-details-marker {
    display: none;
}

.tnx-semantic-correction > summary::after {
    content: '›';
    display: inline-block;
    margin-left: .35rem;
    transition: transform .18s ease;
}

.tnx-semantic-correction[open] > summary::after {
    transform: rotate(90deg);
}

.tnx-semantic-correction-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
    margin: .65rem 0;
}

.tnx-semantic-correction-grid fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    grid-column: span 2;
}

.tnx-semantic-correction-grid legend,
.tnx-semantic-correction-grid > label {
    color: #34473b;
    font-size: .75rem;
    font-weight: 750;
}

.tnx-semantic-person-options {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .35rem;
}

.tnx-semantic-person-options label {
    position: relative;
}

.tnx-semantic-person-options input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tnx-semantic-person-options span {
    display: block;
    padding: .45rem .58rem;
    border: 1px solid #d8e1db;
    border-radius: 999px;
    background: #fff;
    font-size: .72rem;
}

.tnx-semantic-person-options input:checked + span {
    border-color: #177844;
    color: #0f6034;
    background: #e8f6ed;
    box-shadow: 0 0 0 1px #177844 inset;
}

.tnx-semantic-review {
    border-color: #f2cd75;
    background: #fff9e9;
}

.tnx-semantic-review > p {
    margin: .3rem 0 .75rem;
}

.tnx-semantic-choices {
    display: grid;
    gap: .5rem;
    margin-bottom: .7rem;
}

.tnx-semantic-choices label,
.tnx-duplicate-confirm {
    display: flex;
    gap: .65rem;
    align-items: flex-start;
    padding: .7rem;
    border: 1px solid rgba(120, 105, 63, .22);
    border-radius: 10px;
    background: rgba(255, 255, 255, .72);
}

.tnx-semantic-choices input,
.tnx-duplicate-confirm input {
    width: auto;
    margin: .2rem 0 0;
}

.tnx-semantic-choices span {
    display: grid;
    gap: .15rem;
}

.tnx-semantic-choices small {
    color: #746c57;
}

.tnx-concept-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.tnx-concept-card > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
}

.tnx-concept-card > div span,
.tnx-concept-card > p {
    color: #6f7680;
    font-size: .82rem;
}

.tnx-concept-card form {
    display: flex;
    align-items: flex-end;
    gap: .6rem;
}

.tnx-concept-card form label {
    flex: 1;
}

@media (max-width: 680px) {
    .tnx-semantic-preview {
        padding: .85rem;
        border-radius: 14px;
    }

    .tnx-semantic-preview-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
    }

    .tnx-semantic-preview-copy > strong {
        font-size: .94rem;
    }

    .tnx-semantic-chips > span {
        min-width: 0;
        max-width: 100%;
    }

    .tnx-semantic-correction-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tnx-semantic-correction-grid fieldset {
        grid-column: 1 / -1;
    }

    .tnx-semantic-correction-grid > label:first-child,
    .tnx-semantic-correction-grid > label:last-child {
        grid-column: 1 / -1;
    }

    .tnx-concept-grid {
        grid-template-columns: 1fr;
    }

    .tnx-concept-card form {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tnx-semantic-preview,
    .tnx-semantic-correction > summary::after {
        transition: none;
    }

    .tnx-semantic-preview.is-thinking .tnx-semantic-preview-icon span {
        animation: none;
    }
}