/* Support tickets: the round button and the support window of index.jsp (scripts/cv_tickets.js,
   tickets.jsp), with the «Διαχείριση» tab of the people who answer inside it (scripts/tickets_staff.js,
   tickets_staff.jsp?frag=1). Site palette tokens only (coursevo.css :root). */

/* --- the button: rightmost in the bottom-right row. While it shows (body.cv-tk-on, set by
   cvTickets.sync), the online-users and AI buttons move one place left of their cechat.css
   places (8px / 60px); without it (guests) the row stays as it was. --- */
.cv-ticket-btn {
    right: 8px;
    background: var(--cv-mid, #2d5a8e);
}
body.cv-tk-on #ce-presence { right: 60px; }
body.cv-tk-on #ce-aibot { right: 112px; }
.cv-ticket-btn:hover, .cv-ticket-btn:focus-visible { background: var(--cv-dark, #1a3558); outline: none; box-shadow: 0 4px 12px rgba(20, 40, 70, .4); }
.cv-ticket-btn .presence-badge { background: var(--c-danger, #dc2626); }

/* the hidden attribute must win over Bootstrap's input[type=file]{display:block} and .cv-ui-btn's flex
   (file picker input, «Λήψη οθόνης» without getDisplayMedia, «Κλείσιμο αιτήματος» on a closed ticket) */
.cv-tk [hidden], .cv-tk-comp [hidden] { display: none !important; }

/* --- the window. Normal size for the user's own tabs; wide on «Διαχείριση» (.is-wide); nearly the
   whole screen with the header's bigger / smaller button (.is-max, kept per browser). It never
   covers the corner buttons, so it can always be closed and opened again where it was. --- */
.cv-tk-panel {
    position: fixed;
    right: 8px;
    bottom: 60px;
    width: 460px;
    max-width: calc(100% - 16px);          /* of the viewport without its scrollbar (100vw would include it) */
    max-height: calc(100vh - 80px);
    display: none;
    flex-direction: column;
    background: var(--c-surface, #fff);
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(20, 40, 70, .28);
    overflow: hidden;
    z-index: 1052;
    font-size: 14px;
}
.cv-tk-panel.is-open { display: flex; }
.cv-tk-panel.is-wide { width: min(1080px, calc(100% - 16px)); height: calc(100vh - 80px); }
.cv-tk-panel.is-max { top: 8px; left: 8px; width: auto; height: auto; max-width: none; max-height: none; }
.cv-tk { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.cv-tk-head {
    display: flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--cv-dark, #1a3558) 0%, var(--cv-mid, #2d5a8e) 100%);
    color: #fff;
}
.cv-tk-title { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tk-x {
    border: 0; background: rgba(255, 255, 255, .14); color: #fff; border-radius: var(--radius-pill, 999px);
    padding: 4px 9px; font-size: 14px; font-weight: 600; cursor: pointer;
}
.cv-tk-x:hover, .cv-tk-x:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }
.cv-tk-n:empty { display: none; }
.cv-tk-n {
    display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px;
    border-radius: 9px; background: var(--c-danger, #dc2626); color: #fff;
    font-size: 11px; line-height: 18px; text-align: center;
}
.cv-tk-tabs { display: flex; gap: 2px; padding: 0 8px; flex-shrink: 0; border-bottom: 2px solid var(--cv-panel-border, #c8daf0); background: var(--c-surface-2, #f8fafc); }
.cv-tk-tab {
    border: 0; background: none; padding: 8px 10px; margin-bottom: -2px;
    border-bottom: 2px solid transparent; color: #475569; font-weight: 600; font-size: 13px; cursor: pointer;
}
.cv-tk-tab:hover, .cv-tk-tab:focus-visible { color: var(--cv-dark, #1a3558); background: var(--cv-item-hover, #e8f2fb); outline: none; }
.cv-tk-tab.is-active { color: var(--cv-dark, #1a3558); border-bottom-color: var(--cv-mid, #2d5a8e); }
.cv-tk-tab .cv-tk-n { background: var(--cv-mid, #2d5a8e); }
.cv-tk-tab--manage { margin-left: auto; }                                   /* the site admins' tab, apart from the user's own */
.cv-tk-tab--manage .cv-tk-n { background: var(--c-danger, #dc2626); }       /* tickets waiting for staff */
.cv-tk-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
.cv-tk-view { display: none; }
.cv-tk-view.is-active { display: block; }
.cv-tk .cv-ui-field { margin-bottom: 10px; }
.cv-tk-ctx { font-size: 12px; margin: 4px 0 10px; }
.cv-tk-actions { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
/* the user's own views keep a readable width when the window is wide or maximised */
.cv-tk-panel.is-max .cv-tk-view:not(.cv-tk-manage) { max-width: 760px; margin: 0 auto; }

/* --- the category: one colour each, the same on the form, on list rows and on a ticket --- */
.cv-tk-cat--problem  { --tk-cat: var(--c-danger, #dc2626);    --tk-cat-soft: var(--c-danger-soft, #fef2f2); }
.cv-tk-cat--question { --tk-cat: var(--cv-mid, #2d5a8e);      --tk-cat-soft: var(--cv-item-hover, #e8f2fb); }
.cv-tk-cat--feedback { --tk-cat: var(--cv-edit-dark, #92400e); --tk-cat-soft: var(--c-warning-soft, #fffbeb); }
.cv-tk-cat--other    { --tk-cat: var(--c-muted, #6b7280);     --tk-cat-soft: var(--c-surface-2, #f8fafc); }
.cv-tk-cat {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px;
    border-radius: var(--radius-pill, 999px); background: var(--tk-cat); color: #fff;
    font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap;
}
/* the form: the first field, four big choices */
.cv-tk-catfield { padding: 10px; border-radius: var(--radius-md, 8px); background: var(--c-surface-2, #f8fafc); border: 1px solid var(--cv-panel-border, #c8daf0); }
.cv-tk-catfield .cv-ui-label { font-size: 14px; color: var(--cv-dark, #1a3558); }
.cv-tk-catpick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.cv-tk-catopt { position: relative; margin: 0; cursor: pointer; }
.cv-tk-catopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.cv-tk-catopt > span {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px;
    border: 2px solid var(--tk-cat); border-radius: var(--radius-md, 8px);
    background: var(--tk-cat-soft); color: var(--tk-cat);
    font-size: 13px; font-weight: 700; text-align: center; line-height: 1.2;
}
.cv-tk-catopt > span .fa { font-size: 18px; }
.cv-tk-catopt:hover > span { box-shadow: 0 2px 8px rgba(20, 40, 70, .18); }
.cv-tk-catopt input:checked + span { background: var(--tk-cat); color: #fff; box-shadow: 0 2px 8px rgba(20, 40, 70, .25); }
.cv-tk-catopt input:focus-visible + span { outline: 2px solid var(--c-brand, #3C84BD); outline-offset: 2px; }

/* --- the scope: the site, or an activity space whose admins answer. On the form two choices under
   the category (with the space's list when the user has several); everywhere else a small label. --- */
.cv-tk-scopebox { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--cv-panel-border, #c8daf0); }
.cv-tk-scopepick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cv-tk-scopeopt { position: relative; margin: 0; cursor: pointer; }
.cv-tk-scopeopt input { position: absolute; opacity: 0; width: 0; height: 0; }
.cv-tk-scopeopt > span {
    display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 6px;
    border: 2px solid var(--cv-mid, #2d5a8e); border-radius: var(--radius-md, 8px);
    background: #fff; color: var(--cv-mid, #2d5a8e); font-size: 13px; font-weight: 700; text-align: center; line-height: 1.2;
}
.cv-tk-scopeopt:hover > span { box-shadow: 0 2px 8px rgba(20, 40, 70, .18); }
.cv-tk-scopeopt input:checked + span { background: var(--cv-mid, #2d5a8e); color: #fff; box-shadow: 0 2px 8px rgba(20, 40, 70, .25); }
.cv-tk-scopeopt input:focus-visible + span { outline: 2px solid var(--c-brand, #3C84BD); outline-offset: 2px; }
.cv-tk-space { margin-top: 6px; }
.cv-tk-scopehint { margin: 6px 0 0; font-size: 12px; }
.cv-tk-scope {
    display: inline-flex; align-items: center; gap: 5px; max-width: 240px; padding: 1px 9px;
    border: 1px solid var(--cv-panel-border, #c8daf0); border-radius: var(--radius-pill, 999px);
    background: #fff; color: var(--cv-dark, #1a3558); font-size: 12px; font-weight: 600; line-height: 1.5;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle;
}
.cv-tk-scope.is-space { border-color: var(--cv-mid, #2d5a8e); background: var(--cv-item-hover, #e8f2fb); }
.cv-tk-scope.is-site { color: var(--c-muted, #6b7280); font-weight: 400; }

/* --- composer (the user's views and the management view) --- */
.cv-tk-comp .tox-tinymce { border-radius: var(--radius-md, 8px); }
.cv-tk-drop {
    margin-top: 8px; padding: 8px 10px;
    border: 1px dashed var(--cv-panel-border, #c8daf0); border-radius: var(--radius-md, 8px);
    background: var(--c-surface-2, #f8fafc); color: var(--c-muted, #6b7280); font-size: 12px;
}
.cv-tk-drop:focus-visible { outline: 2px solid var(--c-brand, #3C84BD); outline-offset: 2px; }
.cv-tk-drop.is-over { border-color: var(--cv-mid, #2d5a8e); background: var(--c-brand-softer, #f3f9fd); color: var(--cv-dark, #1a3558); }
.cv-tk-drop-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.cv-tk-drop-acts .cv-ui-btn { margin: 0; }
.cv-tk-drop-hint { margin-left: auto; font-size: 11px; }
.cv-tk-files { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.cv-tk-files:empty { display: none; }
.cv-tk-file {
    display: flex; align-items: center; gap: 8px; padding: 4px 6px;
    border: 1px solid var(--c-border-soft, #f1f5f9); border-radius: var(--radius, 6px); background: #fff; font-size: 12px;
}
.cv-tk-file img { width: 40px; height: 30px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
.cv-tk-file > .fa { width: 40px; text-align: center; color: var(--c-muted, #6b7280); flex-shrink: 0; }
.cv-tk-fname { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tk-file small { color: var(--c-muted, #6b7280); flex-shrink: 0; }
.cv-tk-frm, .cv-tk-fpen { border: 0; background: none; color: var(--c-muted, #6b7280); padding: 2px 6px; cursor: pointer; border-radius: 4px; }
.cv-tk-frm:hover, .cv-tk-frm:focus-visible { color: var(--c-danger, #dc2626); background: var(--c-danger-soft, #fef2f2); outline: none; }
.cv-tk-fpen { color: var(--cv-mid, #2d5a8e); }
.cv-tk-fpen:hover, .cv-tk-fpen:focus-visible { color: var(--cv-dark, #1a3558); background: var(--cv-item-hover, #e8f2fb); outline: none; }

/* --- the pen: an attached image on a framed sheet in the middle of the page (cv_tickets.js drawOn).
   The sheet takes most of the page but not all of it (at most 92% x 90%; the whole page was mistaken for
   the site, two thirds was too small to point at things). The page stays visible around it, dimmed and blurred: a
   captured screen must not be taken for the page itself. Above the window and the editor's own
   dialogs, below the confirm dialogs and toasts. --- */
.cv-tk-draw {
    position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2000;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(15, 23, 42, .55);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.cv-tk-draw:focus { outline: none; }
.cv-tk-draw-card {
    display: flex; flex-direction: column; min-width: min(560px, 100%); max-width: min(1600px, 92vw); max-height: 90vh;
    border: 3px solid var(--cv-mid, #2d5a8e); border-radius: 12px; overflow: hidden;
    background: var(--c-surface-2, #f8fafc); box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
}
.cv-tk-draw-bar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap; flex-shrink: 0;
    padding: 8px 12px; background: var(--c-surface, #fff); border-bottom: 1px solid var(--cv-panel-border, #c8daf0);
}
.cv-tk-draw-bar .cv-ui-btn { margin: 0; }
.cv-tk-draw-title { font-weight: 700; color: var(--cv-dark, #1a3558); margin-right: 6px; }
.cv-tk-draw-group { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid var(--cv-panel-border, #c8daf0); border-radius: var(--radius-pill, 999px); }
.cv-tk-draw-color { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--cv-panel-border, #c8daf0); cursor: pointer; }
.cv-tk-draw-color.is-on { box-shadow: 0 0 0 2px var(--cv-dark, #1a3558); }
.cv-tk-draw-w { width: 30px; height: 22px; padding: 0 5px; border: 0; border-radius: 6px; background: none; cursor: pointer; display: inline-flex; align-items: center; }
.cv-tk-draw-w i { display: block; width: 100%; border-radius: 4px; background: var(--cv-dark, #1a3558); }
.cv-tk-draw-w.is-on { background: var(--cv-item-active, #ddeeff); }
.cv-tk-draw-color:focus-visible, .cv-tk-draw-w:focus-visible { outline: 2px solid var(--c-brand, #3C84BD); outline-offset: 2px; }
.cv-tk-draw-end { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }   /* Cancel / Done stay together when the bar wraps */
.cv-tk-draw-hint { flex-shrink: 0; padding: 6px 12px 0; color: var(--c-muted, #6b7280); font-size: 13px; text-align: center; }
.cv-tk-draw-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px 14px 14px; }
/* the picture keeps its proportions inside the sheet (90vh less the bar, the hint and the paddings) */
.cv-tk-draw-stage canvas {
    display: block; max-width: 100%; max-height: calc(90vh - 130px); background: #fff;
    border: 1px solid var(--cv-panel-border, #c8daf0); border-radius: 4px;
    box-shadow: 0 2px 10px rgba(15, 23, 42, .25); cursor: crosshair; touch-action: none;
}
@media (max-width: 600px) {
    .cv-tk-draw { padding: 8px; }
    .cv-tk-draw-card { max-width: 100%; max-height: 94vh; }
    .cv-tk-draw-stage canvas { max-height: calc(94vh - 170px); }
}

/* --- the user's lists --- */
.cv-tk-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.cv-tk-item {
    display: block; width: 100%; text-align: left; padding: 8px 10px; cursor: pointer;
    border: 1px solid var(--cv-panel-border, #c8daf0); border-radius: var(--radius-md, 8px); background: #fff;
}
.cv-tk-item:hover, .cv-tk-item:focus-visible { background: var(--cv-item-hover, #e8f2fb); outline: none; }
.cv-tk-item.is-unread { border-left: 3px solid var(--c-danger, #dc2626); }
.cv-tk-item-cat { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.cv-tk-item-top { display: block; color: var(--cv-dark, #1a3558); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tk-item-meta { display: block; margin-top: 4px; color: var(--c-muted, #6b7280); font-size: 12px; }
.cv-tk-dot, .cv-tkm-dot {
    display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%;
    background: var(--c-danger, #dc2626); vertical-align: middle;
}
.cv-tk-empty { list-style: none; padding: 18px 8px; text-align: center; color: var(--c-muted, #6b7280); }

/* --- one ticket --- */
.cv-tk-back { display: inline-block; border: 0; background: none; padding: 0 0 8px; color: var(--cv-mid, #2d5a8e); font-weight: 600; cursor: pointer; }
.cv-tk-back:hover, .cv-tk-back:focus-visible { color: var(--cv-dark, #1a3558); outline: none; text-decoration: underline; }
.cv-tk-thead { margin-bottom: 8px; }
.cv-tk-tcat { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.cv-tk-tsubj { color: var(--cv-dark, #1a3558); font-weight: 600; word-break: break-word; }
.cv-tk-tmeta { margin-top: 4px; color: var(--c-muted, #6b7280); font-size: 12px; }
.cv-tk-view:not(.cv-tk-manage) .cv-tk-thread { max-height: 42vh; overflow-y: auto; padding-right: 2px; }
.cv-tk-thread { display: flex; flex-direction: column; gap: 8px; }
.cv-tk-msg {
    padding: 8px 10px; border-radius: var(--radius-md, 8px);
    border: 1px solid var(--c-border-soft, #f1f5f9); background: var(--c-surface-2, #f8fafc);
}
.cv-tk-msg.is-staff { background: var(--c-brand-softer, #f3f9fd); border-color: var(--cv-panel-border, #c8daf0); }
.cv-tk-msg.is-internal { background: var(--c-warning-soft, #fffbeb); border-color: var(--cv-edit-line, #f5d08a); }
.cv-tk-msg header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; font-size: 13px; }
.cv-tk-msg header strong { color: var(--cv-dark, #1a3558); }
.cv-tk-msg header time { margin-left: auto; color: var(--c-muted, #6b7280); font-size: 12px; }
.cv-tk-msgbody { word-break: break-word; }
.cv-tk-msgbody p { margin: 0 0 6px; }
.cv-tk-msgbody p:last-child { margin-bottom: 0; }
.cv-tk-msgbody ul, .cv-tk-msgbody ol { margin: 0 0 6px; padding-left: 20px; }
.cv-tk-att { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cv-tk-thumb { display: block; border: 1px solid var(--cv-panel-border, #c8daf0); border-radius: 6px; overflow: hidden; background: #fff; }
.cv-tk-thumb img { display: block; width: 120px; height: 80px; object-fit: cover; }
.cv-tk-thumb:hover, .cv-tk-thumb:focus-visible { border-color: var(--cv-mid, #2d5a8e); outline: none; }
.cv-tk-filelink {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; max-width: 100%;
    border: 1px solid var(--cv-panel-border, #c8daf0); border-radius: var(--radius-pill, 999px); background: #fff; font-size: 12px;
}
.cv-tk-filelink span { color: var(--c-muted, #6b7280); }
.cv-tk-event { text-align: center; color: var(--c-muted, #6b7280); font-size: 12px; }
.cv-tk-event span { margin-left: 4px; }
.cv-tk-reply { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--cv-panel-border, #c8daf0); }
.cv-tk-reply .cv-tk-actions { margin-top: 8px; }
.cv-tk-closednote { margin: 0 0 8px; }

@media (max-width: 600px) {
    .cv-tk-panel, .cv-tk-panel.is-wide, .cv-tk-panel.is-max { top: 0; right: 0; bottom: 0; left: 0; width: auto; height: auto; max-width: none; max-height: none; border-radius: 0; }
    .cv-tk-max { display: none; }                      /* the window already fills a phone's screen */
    .cv-tk-view:not(.cv-tk-manage) .cv-tk-thread { max-height: none; }
    .cv-tk-catpick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cv-tk-tab--manage { margin-left: 0; }
    .cv-tk-tabs { overflow-x: auto; }
    .cv-tk-tab { white-space: nowrap; }
}

/* --- «Διαχείριση»: the tickets a person handles (site admins, space admins, assignees; the block of
   tickets_staff.jsp?frag=1) --- */
.cv-tk-manage.is-loading { opacity: .6; pointer-events: none; }
.cv-tkm .cv-ui-tabs { margin-bottom: 10px; }
/* the way to the e-mail setting, at the end of the status tabs */
.cv-tkm-bell {
    margin-left: auto; align-self: center; padding: 3px 10px; white-space: nowrap;
    border: 1px solid var(--cv-panel-border, #c8daf0); border-radius: var(--radius-pill, 999px);
    background: #fff; color: var(--cv-mid, #2d5a8e); font-size: 13px; font-weight: 600;
}
.cv-tkm-bell:hover, .cv-tkm-bell:focus-visible { background: var(--cv-item-hover, #e8f2fb); color: var(--cv-dark, #1a3558); text-decoration: none; outline: none; }
.cv-tkm-notify .cv-ui-hint { margin: 0 0 12px; }
.cv-tkm-notify .cv-ui-select { max-width: 420px; }
.cv-tkm-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.cv-tkm-filters .cv-ui-input { flex: 1 1 200px; width: auto; min-width: 140px; max-width: 320px; }
.cv-tkm-filters .cv-ui-select { flex: 0 1 auto; width: auto; max-width: 230px; }   /* a long space name does not stretch the row */
.cv-tkm-filters .cv-ui-select.is-set { border-color: var(--cv-mid, #2d5a8e); background-color: var(--cv-item-active, #ddeeff); font-weight: 600; }
.cv-tkm-filters .cv-ui-btn { margin: 0; }
.cv-tkm-clear { font-size: 13px; font-weight: 600; white-space: nowrap; }
.cv-tkm-found {
    margin-left: auto; padding: 2px 10px; border-radius: var(--radius-pill, 999px);
    background: rgba(15, 23, 42, .08); color: #334155; font-size: 12px; font-weight: 700;
}
.cv-tkm-table td { vertical-align: top; }
.cv-tkm-table .cv-ui-badge { white-space: nowrap; }
.cv-tkm-row { cursor: pointer; }
.cv-tkm-row:hover, .cv-tkm-row:focus-visible { background: var(--cv-item-hover, #e8f2fb); outline: none; }
.cv-tkm-row.is-unread .cv-tkm-subj strong { color: var(--cv-dark, #1a3558); }
.cv-tkm-row:not(.is-unread) .cv-tkm-subj strong { font-weight: 600; }
/* a ticket assigned to me: an accent bar at the row's start and my chip filled */
.cv-tkm-row.is-mine > td:first-child { box-shadow: inset 4px 0 0 var(--c-success, #16a34a); }
.cv-tkm-row.is-mine { background: var(--c-success-soft, #f0fdf4); }
.cv-tkm-row.is-mine:hover, .cv-tkm-row.is-mine:focus-visible { background: var(--cv-item-hover, #e8f2fb); }
.cv-tkm-rowtop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.cv-tkm-asgchip {
    display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px;
    border: 1px solid var(--cv-panel-border, #c8daf0); border-radius: var(--radius-pill, 999px);
    background: #fff; color: var(--cv-dark, #1a3558); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.cv-tkm-asgchip.is-me { border-color: var(--c-success, #16a34a); background: var(--c-success, #16a34a); color: #fff; }
.cv-tkm-asgchip.is-none { border-style: dashed; color: var(--c-muted, #6b7280); font-weight: 400; }
.cv-tkm-id { white-space: nowrap; color: var(--c-muted, #6b7280); }
.cv-tkm-clip, .cv-tkm-mail { color: var(--c-muted, #6b7280); font-size: 12px; }
.cv-tkm-clip { margin-left: 6px; white-space: nowrap; }
.cv-tkm-date { white-space: nowrap; }
.cv-tkm-prio--1 { color: var(--c-muted, #6b7280); }
.cv-tkm-prio--3 { color: var(--c-danger, #dc2626); font-weight: 700; }
.cv-tkm-foot { padding: 8px 16px; }
.cv-tkm-hid { color: var(--c-muted, #6b7280); }
/* one ticket */
.cv-tkm-dhead { margin-bottom: 10px; }
.cv-tkm-dcat { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.cv-tkm-dtitle { font-size: 17px; color: var(--cv-dark, #1a3558); word-break: break-word; }
.cv-tkm-dtitle .cv-ui-badge { vertical-align: middle; margin-left: 4px; }
.cv-tkm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; align-items: start; }
.cv-tkm-grid .cv-ui-card { margin-bottom: 12px; }
.cv-tkm-facts { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 10px; font-size: 13px; }
.cv-tkm-facts dt { color: var(--c-muted, #6b7280); font-weight: 600; }
.cv-tkm-facts dd { margin: 0; word-break: break-word; }
.cv-tkm-code { font-family: Consolas, Menlo, monospace; font-size: 12px; }
.cv-tkm-muted { color: var(--c-muted, #6b7280); }
.cv-tkm-replyopts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.cv-tkm-after { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; font-size: 13px; }
.cv-tkm-after .cv-ui-select { width: auto; }
/* assignees: one chip per admin (the site's, then the ticket's space's), ticked = assigned; below, who assigned each and when */
.cv-tkm-asghead { margin: 8px 0 4px; color: var(--c-muted, #6b7280); font-size: 12px; font-weight: 700; }
.cv-ui-label + .cv-tkm-asghead { margin-top: 0; }
.cv-tkm-asg--other { margin-top: 6px; }
.cv-tkm-asg { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-tkm-asg .cv-ui-chiptog { margin: 0; }
.cv-tkm-asglog { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.cv-tkm-asglog li { color: var(--cv-dark, #1a3558); }
.cv-tkm-asglog .fa { color: var(--c-success, #16a34a); }
.cv-tkm-asglog span { display: block; padding-left: 18px; color: var(--c-muted, #6b7280); }
.cv-tk-event--asg { color: var(--cv-mid, #2d5a8e); }
/* narrower than the wide window (a small screen): one column */
@media (max-width: 900px) {
    .cv-tkm-grid { grid-template-columns: minmax(0, 1fr); }
    .cv-tkm-found { margin-left: 0; }
}
/* the site-admin menu entry (mng_site_tickets.jsp as a page): a note and the button that opens the window */
.cv-tkm-stub .cv-ui-card-body p { margin: 0 0 12px; }