/* 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 side; 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); }
/* --- the two sides, for people who answer tickets: «Τα αιτήματά μου» | «Διαχείριση», a switch in the
   header. One side shows at a time. The management side has no tab row here (its block brings its
   status tabs), another title and the platform's edit accent under the header, so that asking for
   help and answering others are not mistaken for each other. --- */
.cv-tk-side { display: inline-flex; flex-shrink: 0; gap: 2px; padding: 2px; border-radius: var(--radius-pill, 999px); background: rgba(255, 255, 255, .16); }
.cv-tk-sidebtn {
    display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: #fff;
    padding: 3px 11px; border-radius: var(--radius-pill, 999px); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.cv-tk-sidebtn:hover, .cv-tk-sidebtn:focus-visible { background: rgba(255, 255, 255, .2); outline: none; }
.cv-tk-sidebtn.is-active, .cv-tk-sidebtn.is-active:hover { background: #fff; color: var(--cv-dark, #1a3558); }
.cv-tk-sidebtn .cv-tk-n { margin-left: 0; }
.cv-tk.is-manage .cv-tk-tabs { display: none; }
.cv-tk.is-manage .cv-tk-head { box-shadow: inset 0 -3px 0 var(--cv-edit, #d97706); }
.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)); }
    /* a phone's header: the switch takes the title's place and the whole width */
    .cv-tk-head:has(.cv-tk-side) .cv-tk-title { display: none; }
    .cv-tk-side { flex: 1; }
    .cv-tk-sidebtn { flex: 1; justify-content: center; }
    .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; }