/* ===========================================================================
   Queries page (Query Dashboard) — matched to the Carisma prototype.
   Green #0F7A4A, red #D9473F / #A31F15, blue #2F6BB0, amber #D9A13B, brand var(--primary-color).
   =========================================================================== */

.cqry-page {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* -------------------------------- banner --------------------------------- */
.cqry-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    background: linear-gradient(120deg, #f7ecef 0%, #faf3ee 55%, #f6f3fb 100%);
    border: 1px solid #f1e6e8;
    border-radius: 18px;
    padding: 12px 24px;
}

.cqry-banner__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.cqry-crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
    font-size: .85rem;
    margin-bottom: 4px;
    color: #6b5f63;
}

.cqry-crumb a {
    color: #6b5f63;
    text-decoration: none;
}

.cqry-crumb a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.cqry-crumb strong {
    color: #1c1416;
    font-weight: 700;
}

.cqry-crumb__sep {
    color: #cdbfc3;
}

.cqry-title {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #1c1416;
    margin: 0 0 2px;
}

.cqry-sub {
    color: #6b5f63;
    font-size: .85rem;
    margin: 0;
}

.cqry-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.cqry-h2 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: #1c1416;
    margin: 0 0 4px;
}

/* ---------------------------- segmented control -------------------------- */
.cqry-seg {
    display: inline-flex;
    flex-wrap: wrap;
    background: #f4f1f0;
    border-radius: 12px;
    padding: 4px;
    gap: 2px;
}

.cqry-seg__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 600;
    color: #4b4145;
    padding: 9px 16px;
    border-radius: 9px;
    white-space: nowrap;
}

.cqry-seg__btn:hover:not(:disabled):not(.is-active) {
    color: var(--primary-color);
}

.cqry-seg__btn:disabled {
    cursor: default;
}

.cqry-seg__btn.is-active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 2px 6px rgba(122, 31, 43, .3);
}

.cqry-seg__btn .material-symbols-rounded {
    font-size: 17px;
}

.cqry-seg__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    background: #fff;
    color: var(--primary-color);
}

.cqry-seg__count--dark {
    background: var(--primary-color);
    color: #fff;
}

/* buttons + chips */
.cqry-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    padding: 0 18px;
    cursor: pointer;
    border: 1px solid #ddd5d1;
    border-radius: 10px;
    background: #fff;
    color: var(--primary-color);
    font-size: .9rem;
    font-weight: 600;
}

.cqry-btn:hover:not(:disabled) {
    background: #fbf4f6;
    border-color: var(--primary-color);
}

.cqry-btn:disabled {
    cursor: default;
}

.cqry-btn .material-symbols-rounded {
    font-size: 18px;
}

.cqry-btn--sm {
    height: 30px;
    padding: 0 12px;
    font-size: .78rem;
}

.cqry-chip {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.cqry-chip--brand {
    background: #f6e9ed;
    color: var(--primary-color);
}

/* --------------------------------- card ---------------------------------- */
.cqry-card {
    background: #fff;
    border: 1px solid #ece6e2;
    border-top: 3px solid #e9c7d2;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(20, 20, 40, .04);
    overflow: hidden;
}

.cqry-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid #f1ece9;
}

.cqry-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: #1c1416;
}

.cqry-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f6e9ed;
    color: var(--primary-color);
}

.cqry-card__note {
    font-size: .78rem;
    font-weight: 500;
    color: #6b5f63;
}

/* ------------------------------ count cards ------------------------------ */
.cqry-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 20px;
    border-bottom: 1px solid #f1ece9;
}

.cqry-bc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #faf8f6;
    min-width: 0;
    border: 1px solid #f1ece9;
    box-shadow: inset 4px 0 0 var(--acc);
}

.cqry-bc.is-on {
    border-color: var(--primary-color);
    box-shadow: inset 4px 0 0 var(--acc), inset 0 0 0 1px var(--primary-color);
}

.cqry-bc__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
}

.cqry-bc__col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.cqry-lbl {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #3d3236;
}

.cqry-bc__num {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: #1c1416;
    font-variant-numeric: tabular-nums;
}

.cqry-bc__num.is-zero,
.cqry-leg__num.is-zero {
    color: #a99da1;
}

.cqry-unit {
    font-size: .78rem;
    color: #6b5f63;
    text-align: right;
}

.cqry-track {
    display: flex;
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
    background: #f1ece9;
}

.cqry-track span {
    display: block;
    height: 100%;
}

.cqry-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cqry-leg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 10px;
    cursor: pointer;
    border: 1.5px solid transparent;
    background: transparent;
    font: inherit;
    font-size: .78rem;
    color: #3d3236;
}

.cqry-leg.is-on {
    background: #fff;
    border-color: var(--primary-color);
}

.cqry-leg__dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex: 0 0 10px;
}

.cqry-leg__num {
    font-size: 1rem;
    font-weight: 700;
    color: #1c1416;
}

.cqry-pickbar {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .82rem;
    font-weight: 600;
    padding: 12px 20px;
    border-bottom: 1px solid #f1ece9;
}

/* --------------------------------- grid ---------------------------------- */
.cqry-tablewrap {
    overflow-x: auto;
}

.cqry-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
    font-size: .88rem;
}

.cqry-table th {
    background: #f6ecef;
    color: #5a2636;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: left;
    white-space: nowrap;
    border-bottom: 1px solid #ece6e2;
}

.cqry-table td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1ece9;
    vertical-align: middle;
    font-variant-numeric: tabular-nums;
}

.cqry-table tbody tr.cqry-row {
    background: #fff;
    cursor: pointer;
}

.cqry-table tbody tr.cqry-row:nth-child(odd) {
    background: #fcf8f9;
}

.cqry-table tbody tr.cqry-row:hover {
    background: #f9eef2;
}

.cqry-table .cqry-bl {
    border-left: 1px solid #ece6e2;
}

.cqry-c {
    text-align: center !important;
}

.cqry-row.is-mine .cqry-jid {
    box-shadow: inset 3px 0 0 var(--primary-color);
}

.cqry-jid {
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--primary-color);
}

.cqry-jname {
    font-weight: 600;
    min-width: 190px;
    color: #1c1416;
}

.cqry-strong {
    font-weight: 700;
}

.cqry-ok {
    color: #0d6a40;
}

.cqry-bad {
    font-weight: 700;
    color: #b42318;
}

.cqry-nil {
    color: #a99da1;
}

.cqry-held {
    font-size: .82rem;
}

.cqry-total td {
    background: #faf8f6;
    font-weight: 700;
}

.cqry-total .cqry-ok {
    color: #0d6a40;
}

.cqry-total .cqry-bad {
    color: #a31f15;
}

.cqry-go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    border: 1px solid #ddd5d1;
    background: #fff;
    color: var(--primary-color);
    cursor: pointer;
    padding: 0;
}

.cqry-go .material-symbols-rounded {
    font-size: 20px;
}

.cqry-go:hover {
    background: #fbf4f6;
    border-color: var(--primary-color);
}

.cqry-jname a {
    color: inherit;
    text-decoration: none;
}

.cqry-jname a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.cqry-btn--solid {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    height: 40px;
}

.cqry-btn--solid:hover:not(:disabled) {
    background: #6a1229;
    border-color: #6a1229;
}

.cqry-btn--solid:disabled {
    opacity: .5;
}

.cqry-btn--dark-text {
    color: #1c1416;
    text-decoration: none;
}

.cqry-btn--sm.cqry-btn--solid {
    height: 34px;
}

.cqry-empty {
    align-items: center;
    text-align: center;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: #6b5f63;
}

.cqry-empty .material-symbols-rounded {
    font-size: 36px;
    color: #cdbfc3;
}

/* ------------------------------- job header ------------------------------ */
.cqry-job {
    background: #fff;
    border: 1px solid #ece6e2;
    border-radius: 18px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cqry-job__top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.cqry-job__code {
    font-size: .75rem;
    letter-spacing: .02em;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

.cqry-job__name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1c1416;
}

.cqry-job__client {
    text-decoration: underline;
    text-decoration-color: #d4a3b2;
    text-underline-offset: 4px;
}

.cqry-job__meta {
    font-size: .82rem;
    color: #6b5f63;
}

.cqry-job__right {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: flex-end;
}

.cqry-job__people {
    display: flex;
    flex-direction: column;
    font-size: .82rem;
    line-height: 1.5;
    color: #6b5f63;
    text-align: right;
    padding-right: 20px;
    border-right: 1px solid #ece6e2;
}

.cqry-job__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.cqry-job__actions .cqry-btn {
    height: 40px;
    padding: 0 16px;
    font-size: .85rem;
}

.cqry-stepper {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.cqry-step {
    flex: 1 1 130px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.35;
}

.cqry-step--current {
    color: #fff;
}

.cqry-step--done {
    background: #e3f3ea;
    color: #0d6a40;
}

.cqry-step--todo {
    background: #f7f5f3;
    color: #5e5357;
}

.cqry-step__actor {
    font-weight: 400;
    font-size: .7rem;
    opacity: .9;
}

/* ------------------------------ Raise Query ------------------------------ */
.cqry-modal {
    position: fixed;
    inset: 0;
    z-index: 1055;
    background: rgba(28, 20, 22, .5);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 12px;
    overflow-y: auto;
}

.cqry-modal__box {
    width: 100%;
    max-width: 860px;
    background: #fff;
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
}

.cqry-modal__head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    justify-content: space-between;
}

.cqry-modal__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cqry-modal__title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1c1416;
}

.cqry-modal__sub {
    font-size: .82rem;
    color: #6b5f63;
}

.cqry-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cqry-field__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cqry-field__label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6b5f63;
}

.cqry-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cqry-pill {
    height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #ddd5d1;
    background: #fff;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    color: #1c1416;
    box-shadow: 0 1px 0 #f1e6e8;
}

.cqry-pill:hover {
    border-color: var(--primary-color);
}

.cqry-pill.is-on {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.cqry-search {
    margin-left: auto;
    height: 34px;
    width: 220px;
    max-width: 100%;
    border: 1px solid #ddd5d1;
    border-radius: 10px;
    padding: 0 10px;
    font-size: .82rem;
}

.cqry-ledgers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 6px;
    max-height: 240px;
    overflow-y: auto;
    padding: 2px;
}

.cqry-ledger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    text-align: left;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 10px;
    background: transparent;
    font-size: .82rem;
    font-weight: 600;
    color: #1c1416;
}

.cqry-ledger:hover {
    background: #fcf8f9;
}

.cqry-ledger.is-on {
    background: #f6e9ed;
    border-color: var(--primary-color);
}

.cqry-note {
    font-size: .82rem;
    color: #6b5f63;
}

.cqry-note--err {
    color: #a31f15;
}

.cqry-link {
    border: 0;
    background: none;
    padding: 0;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.cqry-newledger {
    height: 32px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px dashed var(--primary-color);
    background: #fff;
    color: var(--primary-color);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.cqry-addledger {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    background: #faf8f6;
    border: 1px solid #ece6e2;
    border-radius: 10px;
    padding: 8px 10px;
}

.cqry-addledger__label {
    font-size: .75rem;
    font-weight: 600;
    color: #3d3236;
}

.cqry-addledger__input {
    flex: 1 1 220px;
    min-width: 0;
    height: 34px;
    border: 1px solid #ddd5d1;
    border-radius: 6px;
    padding: 0 10px;
    font-size: .82rem;
}

.cqry-addledger__hint {
    flex-basis: 100%;
    font-size: .7rem;
    color: #9a8d92;
}

.cqry-note--ok {
    color: #0d6a40;
}

.cqry-addledger__err {
    flex-basis: 100%;
    font-size: .78rem;
    color: #a31f15;
}

/* ------------------------- Raise Query: 3. Query ------------------------- */
.cqry-field--step {
    border-top: 1px solid #f1ece9;
    padding-top: 12px;
}

.cqry-q__ledger {
    font-size: .9rem;
    font-weight: 700;
    color: #1c1416;
}

.cqry-mode {
    margin-left: auto;
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: #f7f5f3;
    border: 1px solid #ece6e2;
}

.cqry-mode__btn {
    height: 32px;
    padding: 0 14px;
    border-radius: 6px;
    border: 0;
    background: transparent;
    color: #5e5357;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.cqry-mode__btn:disabled {
    opacity: .55;
    cursor: default;
}

.cqry-mode__btn.is-on {
    background: var(--primary-color);
    color: #fff;
}

.cqry-typerow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 20px;
}

.cqry-typerow__end {
    margin-left: auto;
}

.cqry-sources {
    display: flex;
    gap: 6px;
}

.cqry-source {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid #ddd5d1;
    background: #fff;
    color: #3d3236;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
}

.cqry-source:hover {
    border-color: var(--primary-color);
}

.cqry-source--cli.is-on {
    background: #1a4f91;
    border-color: #1a4f91;
    color: #fff;
}

.cqry-source--int.is-on {
    background: #8a5200;
    border-color: #8a5200;
    color: #fff;
}

.cqry-types {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border-radius: 10px;
    background: #f7f5f3;
    border: 1px solid #ece6e2;
}

.cqry-type {
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    border: 0;
    background: transparent;
    color: #5e5357;
    font-size: .82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.cqry-type:hover:not(.is-on) {
    color: var(--primary-color);
}

.cqry-type.is-on {
    background: var(--primary-color);
    color: #fff;
}

.cqry-textarea {
    width: 100%;
    border: 1px solid #ddd5d1;
    border-radius: 10px;
    padding: 10px 12px;
    resize: vertical;
    font: inherit;
    font-size: .9rem;
}

.cqry-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.cqry-q__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cqry-q__foot .cqry-note {
    flex: 1 1 260px;
}

.cqry-btn--lg {
    height: 42px;
    padding: 0 18px;
    font-size: .9rem;
}

.cqry-qc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: .78rem;
}

.cqry-qc__score {
    font-weight: 700;
    color: #3d3236;
    margin-right: 2px;
}

.cqry-qc__chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    cursor: default;
}

.cqry-qc__chip.is-ok {
    background: #e3f3ea;
    color: #0d6a40;
}

.cqry-qc__chip.is-warn {
    background: #fcf0dc;
    color: #8a5200;
}

.cqry-qc__tidy {
    margin-left: auto;
}

.cqry-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: #e3f3ea;
    color: #0d6a40;
    font-size: .88rem;
    font-weight: 600;
}

.cqry-toast .material-symbols-rounded {
    font-size: 20px;
}

.cqry-toast__x {
    margin-left: auto;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    padding: 0;
}

.cqry-emptyrow {
    text-align: center;
    color: #6b5f63;
    padding: 24px !important;
}

/* ------------------------ job page: query list, card view ------------------------ */
.cqry-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #ece6e2;
}

.cqry-tab {
    border: 0;
    background: none;
    padding: 10px 14px;
    font-size: .9rem;
    font-weight: 600;
    color: #5e5357;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.cqry-tab.is-on {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.cqry-pickbar--bare {
    padding: 0;
    border: 0;
}

.cqry-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cqry-group__head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cqry-group__name {
    font-size: 1rem;
    font-weight: 700;
    color: #1c1416;
}

.cqry-group__count {
    font-size: .78rem;
    color: #6b5f63;
}

.cqry-group__rule {
    flex: 1;
    height: 1px;
    background: #ece6e2;
}

.cqry-q {
    background: #fff;
    border: 1px solid #ece6e2;
    border-radius: 18px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cqry-q__top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cqry-q__ledger-name {
    font-size: .9rem;
    font-weight: 600;
    color: #1c1416;
    text-decoration: underline;
    text-decoration-color: #d4a3b2;
    text-underline-offset: 4px;
}

.cqry-q__ref {
    font-size: .78rem;
    letter-spacing: .02em;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}

.cqry-q__text {
    margin: 0;
    font-size: .92rem;
    line-height: 1.55;
    color: #1c1416;
}

.cqry-tag {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.cqry-tag--cli {
    background: #e6eef9;
    color: #1a4f91;
}

.cqry-tag--int {
    background: #fcf0dc;
    color: #8a5200;
}

.cqry-tag--type {
    background: #f1ece9;
    color: #4a3f43;
}


.cqry-loop {
    border-top: 1px solid #f1ece9;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cqry-loop__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.cqry-loop__label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6b5f63;
}

.cqry-loop__round {
    font-size: .78rem;
    color: #6b5f63;
}

/* ------------------------------ chat thread (Carisma view) ------------------------------
   Our (Carisma) messages on the right, the client's on the left, like WhatsApp / Teams. */
/* extra bottom margin: the last row's tools hang below the bubble (absolutely positioned, so it doesn't
   grow this container's own box) and would otherwise sit under the composer below it */
.cqry-chat {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 16px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: linear-gradient(180deg, #faf7f5 0%, #f6f1ee 100%);
}

.cqry-chatrow {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.cqry-chatrow--ours {
    flex-direction: row-reverse;
}

.cqry-avatar {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
}

.cqry-avatar .material-symbols-rounded {
    font-size: 18px;
}

.cqry-avatar--ours {
    background: linear-gradient(135deg, #9b2347, var(--primary-color));
}

.cqry-avatar--theirs {
    background: linear-gradient(135deg, #4b7bb8, #1a4f91);
}

.cqry-msg {
    position: relative;
    max-width: min(620px, 76%);
    padding: 10px 14px 8px;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(28, 20, 22, .06);
}

.cqry-msg--theirs {
    background: #fff;
    border: 1px solid #ebe5e1;
    border-bottom-left-radius: 6px;
}

.cqry-msg--ours {
    background: #f7e9ee;
    border: 1px solid #efd3dc;
    border-bottom-right-radius: 6px;
}

.cqry-msg__meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 18px;
    font-size: .72rem;
    margin-bottom: 3px;
}

.cqry-msg__from {
    font-weight: 700;
    color: #1c1416;
}

.cqry-msg__at {
    color: #7b6f73;
    white-space: nowrap;
}

.cqry-msg__text {
    font-size: .9rem;
    line-height: 1.55;
    color: #1c1416;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.cqry-msg__file {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eef3fa;
    font-size: .78rem;
    font-weight: 600;
    color: #1a4f91;
}

.cqry-msg__file .material-symbols-rounded {
    font-size: 16px;
}

/* review state under our own messages */
.cqry-msg__review {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 2px 9px 2px 6px;
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 700;
}

.cqry-msg__review .material-symbols-rounded {
    font-size: 14px;
}

.cqry-msg--ours .cqry-msg__review {
    float: right;
}

.cqry-msg__review--pending {
    background: #fcf0dc;
    color: #8a5200;
}

.cqry-msg__review--approved {
    background: #e3f3ea;
    color: #0d6a40;
}

.cqry-msg__review--rejected {
    background: #fbe7e5;
    color: #a31f15;
}

.cqry-msg__review--endclient {
    background: #e6eef9;
    color: #1a4f91;
}

.cqry-msg::after {
    content: "";
    display: block;
    clear: both;
}

/* tools on our own messages, alongside the review badge */
.cqry-msg__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 6px;
}

.cqry-msg__tools {
    display: inline-flex;
    gap: 2px;
    margin-left: -4px;
}

.cqry-tool {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    background: none;
    color: #6b5f63;
    cursor: pointer;
    padding: 0;
    transition: background .15s, color .15s;
}

.cqry-tool:hover {
    background: #f4eef0;
    color: var(--primary-color);
}

.cqry-tool--endclient:hover {
    background: #e6eef9;
    color: #1a4f91;
}

.cqry-tool .material-symbols-rounded {
    font-size: 19px;
}

/* edit textarea: reused by the edit-query modal */
.cqry-edit__input {
    width: 100%;
    min-height: 96px;
    padding: 10px 12px;
    border: 1px solid #e2cfd6;
    border-radius: 12px;
    background: #fff;
    resize: vertical;
    font: inherit;
    font-size: .9rem;
    line-height: 1.5;
    outline: none;
}

.cqry-edit__input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(122, 31, 43, .12);
}

.cqry-pillbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 16px;
    border-radius: 999px;
    border: 1px solid #ddd5d1;
    background: #fff;
    color: #3d3236;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.cqry-pillbtn:hover:not(:disabled) {
    background: #f7f5f3;
    border-color: #cdbfc3;
}

.cqry-pillbtn--primary {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.cqry-pillbtn--primary:hover:not(:disabled) {
    background: #6a1229;
    border-color: #6a1229;
}

.cqry-pillbtn:disabled {
    opacity: .5;
    cursor: default;
}

.cqry-pillbtn .material-symbols-rounded {
    font-size: 18px;
}

.cqry-pillbtn--wide {
    padding: 0 16px 0 12px;
}

.cqry-msg__resolved {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed #bfe0cd;
    font-size: .78rem;
    font-weight: 700;
    color: #0d6a40;
}

.cqry-msg__resolved .material-symbols-rounded {
    font-size: 18px;
    font-variation-settings: 'FILL' 1;
}

/* "move to end client" row below a message, same treatment as the resolve prompt on the internal page */
.cqry-resolve {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed #e2e7ec;
}

.cqry-linkerr--flush {
    padding: 0;
}

/* message box: always available under the thread */
.cqry-wa {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 2px;
    padding: 6px 6px 6px 8px;
    background: #fff;
    border: 1px solid #e6dfdb;
    border-radius: 28px;
    box-shadow: 0 2px 10px rgba(28, 20, 22, .06);
    transition: border-color .15s, box-shadow .15s;
}

.cqry-wa:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(122, 31, 43, .12);
}

.cqry-wa__input {
    flex: 1;
    min-width: 0;
    min-height: 28px;
    max-height: 140px;
    border: 0;
    outline: none;
    resize: none;
    field-sizing: content;
    padding: 10px 0;
    font: inherit;
    font-size: .92rem;
    line-height: 1.4;
    background: transparent;
}

.cqry-wa__send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #9b2347, var(--primary-color));
    color: #fff;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 4px 10px rgba(122, 31, 43, .35);
    transition: transform .12s, box-shadow .12s;
}

.cqry-wa__send:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 6px 14px rgba(122, 31, 43, .42);
}

.cqry-wa__send:disabled {
    background: #e3d9dc;
    box-shadow: none;
    cursor: default;
}

.cqry-wa__send .material-symbols-rounded {
    font-size: 22px;
    font-variation-settings: 'FILL' 1;
}

/* remove confirmation */
.cqry-confirm {
    width: 100%;
    max-width: 420px;
    margin-top: 12vh;
    background: #fff;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.cqry-confirm__icon {
    align-self: flex-start;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fbe7e5;
    color: #a31f15;
}

.cqry-confirm__icon--info {
    background: #e6eef9;
    color: #1a4f91;
}

.cqry-confirm__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1c1416;
}

.cqry-confirm__body {
    font-size: .88rem;
    color: #6b5f63;
    line-height: 1.5;
}

.cqry-confirm__quote {
    padding: 8px 12px;
    border-left: 3px solid #e2cfd6;
    border-radius: 4px;
    background: #faf7f5;
    font-size: .85rem;
    color: #3d3236;
    max-height: 90px;
    overflow: hidden;
}

.cqry-confirm__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 640px) {
    .cqry-msg {
        max-width: 88%;
    }
}

/* edit-query modal (client query page): overlay reuses .cqry-modal; card matches .cqry-confirm's visual weight */
.cqry-editmodal {
    width: 100%;
    max-width: 560px;
    margin-top: 8vh;
    background: #fff;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
}

.cqry-editmodal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.cqry-editmodal__titles {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.cqry-editmodal__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1c1416;
}

.cqry-editmodal__sub {
    font-size: .82rem;
    color: #6b5f63;
}

.cqry-editmodal__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cqry-editmodal__label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #6b5f63;
}

.cqry-editmodal__body .cqry-linkfield {
    margin-top: 6px;
}

.cqry-editmodal__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px solid #f1ece9;
}

.cqry-editmodal__note {
    font-size: .78rem;
    color: #6b5f63;
    flex: 1 1 220px;
}

.cqry-editmodal__footbtns {
    display: flex;
    gap: 8px;
}

/* attachment link (links only, no files) */
.cqry-msg__link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 12px 4px 8px;
    border-radius: 999px;
    background: #e6eef9;
    color: #1a4f91;
    font-size: .78rem;
    font-weight: 700;
    text-decoration: none;
    transition: background .15s;
}

.cqry-msg__link:hover {
    background: #d3e2f6;
    text-decoration: underline;
}

.cqry-msg__link .material-symbols-rounded {
    font-size: 16px;
}

.cqry-composer {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cqry-linkfield {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 6px 0 12px;
    height: 40px;
    background: #fff;
    border: 1px solid #e2cfd6;
    border-radius: 12px;
    color: #6b5f63;
}

.cqry-linkfield:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(122, 31, 43, .12);
}

.cqry-linkfield.is-ok {
    border-color: #0f7a4a;
    color: #0f7a4a;
}

.cqry-linkfield.is-bad {
    border-color: #c0392b;
    color: #c0392b;
}

.cqry-linkfield--bar {
    border-radius: 999px;
    padding-left: 16px;
}

.cqry-linkfield .material-symbols-rounded {
    font-size: 20px;
}

.cqry-linkfield__input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: .88rem;
    color: #1c1416;
}

.cqry-linkerr {
    padding: 0 14px;
    font-size: .75rem;
    color: #c0392b;
}

.cqry-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b5f63;
    cursor: pointer;
    padding: 0;
    transition: background .15s, color .15s;
}

.cqry-icon:hover:not(:disabled) {
    background: #f4eef0;
    color: var(--primary-color);
}

.cqry-icon:disabled {
    opacity: .4;
    cursor: default;
}

.cqry-icon .material-symbols-rounded {
    font-size: 20px;
}

/* "Attach link" button in the message box: a labelled pill so it is obvious what it does (links only, no files) */
.cqry-linkbtn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 14px 0 10px;
    border: 1px solid #ecd9df;
    border-radius: 999px;
    background: #fbf4f6;
    color: var(--primary-color);
    font: inherit;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}

.cqry-linkbtn:hover:not(:disabled) {
    background: #f6e9ed;
    border-color: #e2c3cd;
}

.cqry-linkbtn.is-on {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.cqry-linkbtn:disabled {
    opacity: .45;
    cursor: default;
}

.cqry-linkbtn .material-symbols-rounded {
    font-size: 19px;
}

@media (max-width: 520px) {
    .cqry-linkbtn__text { display: none; }
    .cqry-linkbtn { padding: 0 10px; }
}

.cqry-preview-note {
    padding: 0 14px;
    font-size: .72rem;
    color: #9a8d92;
}
/* ---- WhatsApp-style "new messages" ---- */
.cqry-new-badge {
    margin-left: auto; padding: 2px 10px; border-radius: 999px; background: #1f8f4e; color: #fff;
    font-size: .74rem; font-weight: 700; white-space: nowrap;
}
.cqry-newline { display: flex; align-items: center; justify-content: center; margin: 6px 0 2px; position: relative; }
.cqry-newline::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #cfe8d9; }
.cqry-newline span {
    position: relative; padding: 4px 14px; border-radius: 999px; background: #e3f4ea; color: #146c3a;
    font-size: .78rem; font-weight: 700; box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}