/* ════════════════════════════════════════════════════════════════
   Client Area Custom Styles — extracted from blade templates
   Note: :root { --cp-primary: ... } stays inline in layout.blade.php
   because it uses a PHP/Blade variable.
   ════════════════════════════════════════════════════════════════ */

* { box-sizing:border-box; margin:0; padding:0; }
body { font-family:var(--font-main); background:var(--cp-bg); color:#2d3748; min-height:100vh; }

/* ── Sidebar ── */
.cp-sidebar { position:fixed; top:0; inset-inline-start:0; width:var(--cp-sidebar-w); height:100vh; background:var(--cp-primary); display:flex; flex-direction:column; z-index:100; overflow-y:auto; transition:transform .3s; }
.cp-sidebar__logo { padding:28px 24px 20px; border-bottom:1px solid rgba(255,255,255,.1); display:flex; align-items:center; gap:12px; }
.cp-sidebar__logo img { width:40px; filter:brightness(0) invert(1); }
.cp-sidebar__logo span { color:#fff; font-size:1.1rem; font-weight:600; }
.cp-nav { padding:16px 0; flex:1; }
.cp-nav__item { display:flex; align-items:center; gap:12px; padding:12px 24px; color:rgba(255,255,255,.75); font-size:14px; font-weight:500; text-decoration:none; border-inline-start:3px solid transparent; transition:all .2s; }
.cp-nav__item:hover { color:#fff; background:rgba(255,255,255,.08); }
.cp-nav__item.active { color:#fff; background:rgba(255,255,255,.12); border-inline-start-color:#fff; }
.cp-nav__item i { width:20px; text-align:center; font-size:15px; }
.cp-nav__section { padding:16px 24px 6px; font-size:10px; font-weight:700; letter-spacing:.1em; color:rgba(255,255,255,.4); text-transform:uppercase; }
.cp-sidebar__footer { padding:16px 24px; border-top:1px solid rgba(255,255,255,.1); }
.cp-sidebar__user { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.cp-sidebar__avatar { width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; color:#fff; font-size:13px; font-weight:600; flex-shrink:0; }
.cp-sidebar__name  { color:#fff; font-size:13px; font-weight:500; line-height:1.3; }
.cp-sidebar__email { color:rgba(255,255,255,.5); font-size:11px; }
.cp-logout { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.65); font-size:13px; text-decoration:none; padding:8px 0; transition:color .2s; }
.cp-logout:hover { color:#fff; }

/* ── Main content ── */
.cp-main { margin-inline-start:var(--cp-sidebar-w); min-height:100vh; display:flex; flex-direction:column; }
.cp-topbar { background:#fff; padding:0 28px; height:62px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid #e2e8f0; position:sticky; top:0; z-index:50; box-shadow:0 1px 4px rgba(0,0,0,.06); }
.cp-topbar__title   { font-size:1.05rem; font-weight:600; color:var(--cp-primary); }
.cp-topbar__actions { display:flex; align-items:center; gap:14px; }
.cp-topbar__lang a  { font-size:13px; color:#718096; text-decoration:none; font-weight:500; }
.cp-topbar__lang a:hover { color:var(--cp-primary); }
.cp-content { padding:28px; flex:1; }

/* ── Cards ── */
.cp-card { background:#fff; border-radius:12px; box-shadow:0 1px 6px rgba(0,0,0,.07); overflow:hidden; }
.cp-card__header { padding:18px 22px 14px; border-bottom:1px solid #f0f4f8; display:flex; align-items:center; justify-content:space-between; }
.cp-card__title  { font-size:.95rem; font-weight:600; color:#2d3748; }
.cp-card__body   { padding:20px 22px; }

/* ── Stat cards ── */
.cp-stat { background:#fff; border-radius:12px; padding:22px; display:flex; align-items:center; gap:16px; box-shadow:0 1px 6px rgba(0,0,0,.07); }
.cp-stat__icon  { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.cp-stat__num   { font-size:1.6rem; font-weight:700; line-height:1; color:#1a202c; }
.cp-stat__label { font-size:12px; color:#718096; margin-top:4px; }

/* ── Badge ── */
.cp-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:50px; font-size:11px; font-weight:600; }
.cp-badge--new     { background:#ebf8ff; color:#2b6cb0; }
.cp-badge--process { background:#fffaf0; color:#c05621; }
.cp-badge--solved  { background:#f0fff4; color:#276749; }
.cp-badge--paid    { background:#f0fff4; color:#276749; }
.cp-badge--unpaid  { background:#fff5f5; color:#c53030; }

/* ── Button ── */
.cp-btn { display:inline-flex; align-items:center; gap:7px; padding:9px 20px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; border:none; transition:all .2s; }
.cp-btn--primary { background:var(--cp-primary); color:#fff; }
.cp-btn--primary:hover { background:var(--cp-primary-d); color:#fff; }
.cp-btn--outline  { background:transparent; border:1.5px solid var(--cp-primary); color:var(--cp-primary); }
.cp-btn--outline:hover { background:var(--cp-primary); color:#fff; }
.cp-btn--sm { padding:6px 14px; font-size:12px; }

/* ── Table ── */
.cp-table { width:100%; border-collapse:collapse; }
.cp-table th { padding:11px 14px; font-size:11px; font-weight:700; color:#718096; text-transform:uppercase; letter-spacing:.06em; background:#f7fafc; border-bottom:1px solid #e2e8f0; }
.cp-table td { padding:13px 14px; font-size:13px; color:#2d3748; border-bottom:1px solid #f0f4f8; vertical-align:middle; }
.cp-table tr:last-child td { border-bottom:none; }
.cp-table tr:hover td { background:#fafbff; }

/* ── Form ── */
.cp-form-group { margin-bottom:20px; }
.cp-form-group label { display:block; font-size:13px; font-weight:600; color:#4a5568; margin-bottom:7px; }
.cp-form-control { width:100%; padding:10px 14px; padding-inline-end:34px; border:1.5px solid #e2e8f0; border-radius:8px; font-family:var(--font-main); font-size:14px; color:#2d3748; background:#fff; transition:border-color .2s; }
select.cp-form-control {
    appearance:none;
    -webkit-appearance:none;
    background-color:#fff;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 256 256'%3E%3Cpath fill='%23718096' d='M216.49 104.49l-80 80a12 12 0 0 1-17 0l-80-80a12 12 0 0 1 17-17L128 159l71.51-71.52a12 12 0 0 1 17 17Z'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-size:14px 14px;
    background-position:left 14px center;
    padding-inline-start:14px;
    padding-inline-end:40px;
}
[dir="ltr"] select.cp-form-control {
    background-position:right 14px center;
    padding-inline-start:14px;
    padding-inline-end:40px;
}
.cp-form-control:focus { outline:none; border-color:var(--cp-accent); }
.cp-form-control.is-invalid { border-color:#fc8181; }
.cp-invalid-feedback { font-size:12px; color:#e53e3e; margin-top:5px; }

/* ── Empty state ── */
.cp-empty { text-align:center; padding:48px 24px; }
.cp-empty i { font-size:40px; color:#cbd5e0; margin-bottom:12px; display:block; }
.cp-empty p { color:#a0aec0; font-size:14px; }

/* ── Ticket conversation ── */
.cp-msg { display:flex; gap:12px; margin-bottom:20px; }
.cp-msg--admin { flex-direction:row-reverse; }
.cp-msg__avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.cp-msg__avatar--client { background:#ebf8ff; color:var(--cp-primary); }
.cp-msg__avatar--admin  { background:var(--cp-primary); color:#fff; }
.cp-msg__bubble { max-width:75%; padding:12px 16px; border-radius:12px; font-size:14px; line-height:1.7; }
.cp-msg__bubble--client { background:#ebf8ff; color:#2d3748; border-start-start-radius:2px; }
.cp-msg__bubble--admin  { background:var(--cp-primary); color:#fff; border-start-end-radius:2px; }
.cp-msg__time { font-size:11px; color:#a0aec0; margin-top:5px; }

/* ── Mobile ── */
.cp-hamburger { display:none; background:none; border:none; cursor:pointer; font-size:20px; color:var(--cp-primary); }
.cp-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:90; }
@media (max-width:768px) {
    .cp-sidebar { transform:translateX(calc(-1 * var(--cp-sidebar-w))); }
    [dir=rtl] .cp-sidebar { transform:translateX(var(--cp-sidebar-w)); }
    .cp-sidebar.open { transform:translateX(0); }
    .cp-main { margin-inline-start:0; }
    .cp-hamburger { display:block; }
    .cp-overlay.open { display:block; }
    .cp-content { padding:16px; }
}

/* ── Create ticket page ── */
.ct-section-label { display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:#2d3748; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid #f0f4f8; }
.ct-step { width:24px; height:24px; border-radius:50%; background:var(--cp-primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.ct-opt { font-size:12px; font-weight:400; color:#a0aec0; }
.ct-project-select-wrap { position:relative; }
.ct-native-project-select {
    display:none !important;
}
.ct-project-picker__trigger {
    width:100%;
    min-height:42px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 14px;
    padding-inline-end:18px;
    border:1.5px solid #e2e8f0;
    border-radius:8px;
    background:#fff;
    color:#111827;
    font-family:var(--font-main);
    font-size:14px;
    line-height:1.4;
    text-align:start;
    cursor:pointer;
    transition:border-color .2s, box-shadow .2s;
}
.ct-project-picker__trigger:hover,
.ct-project-picker__trigger.is-open {
    border-color:var(--cp-accent);
    box-shadow:0 0 0 3px rgba(43,108,176,.08);
}
.ct-project-picker__trigger i {
    margin-inline-start:auto;
    color:#718096;
    font-size:13px;
    padding-inline-start:10px;
    transition:transform .2s;
}
.ct-project-picker__trigger.is-open i { transform:rotate(180deg); }
.ct-project-status-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:#16a34a;
    opacity:0;
    flex:0 0 7px;
    pointer-events:none;
}
.ct-project-status-dot.is-visible { opacity:1; }
.ct-project-status-dot.is-expired { background:#dc2626; }
.ct-project-picker__menu {
    position:absolute;
    z-index:30;
    top:calc(100% + 6px);
    inset-inline:0;
    display:none;
    max-height:240px;
    overflow:auto;
    padding:6px;
    border:1px solid #e2e8f0;
    border-radius:10px;
    background:#fff;
    box-shadow:0 14px 34px rgba(15,23,42,.14);
}
.ct-project-picker__menu.is-open { display:block; }
.ct-project-picker__item {
    width:100%;
    display:flex;
    align-items:center;
    gap:9px;
    padding:10px 11px;
    border:0;
    border-radius:7px;
    background:transparent;
    color:#111827;
    font-family:var(--font-main);
    font-size:14px;
    text-align:start;
    cursor:pointer;
}
.ct-project-picker__item:hover,
.ct-project-picker__item.is-active {
    background:#f1f7fc;
}
.ct-project-picker__dot {
    width:7px;
    height:7px;
    border-radius:50%;
    flex:0 0 7px;
    background:#16a34a;
}
.ct-project-picker__dot.is-expired { background:#dc2626; }
.ct-project-picker__label {
    color:#111827;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    flex:0 1 auto;
    min-width:0;
}
.ct-project-picker__empty {
    padding:10px 11px;
    color:#a0aec0;
    font-size:13px;
}
.ct-empty-notice { padding:12px 16px; background:#fafbff; border:1.5px dashed #e2e8f0; border-radius:8px; font-size:13px; color:#a0aec0; display:flex; align-items:center; gap:8px; }
.ct-empty-notice--warn { background:#fffaf0; border-color:#fbd38d; color:#c05621; }
.ct-ext-row { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.ct-ext-badge { padding:2px 8px; border-radius:4px; background:#ebf8ff; color:#2b6cb0; font-size:10px; font-weight:700; font-family:monospace,sans-serif; border:1px solid #bee3f8; }
.ct-ext-note { font-size:11px; color:#a0aec0; }
.ct-upload-zone { border:2px dashed #e2e8f0; border-radius:12px; padding:30px 20px; text-align:center; position:relative; cursor:pointer; transition:border-color .2s,background .2s; background:#fafbff; }
.ct-upload-zone:hover { border-color:var(--cp-accent); background:#f0f7ff; }
.ct-upload-zone__icon { font-size:36px; color:#cbd5e0; display:block; margin-bottom:8px; }
.ct-upload-zone__text { font-size:14px; font-weight:600; color:#4a5568; display:block; margin-bottom:4px; }
.ct-upload-zone__sub  { font-size:11px; color:#a0aec0; display:block; }
.priority-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:576px) { .priority-grid { grid-template-columns:repeat(2,1fr); } }
.priority-card { display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 10px; border:2px solid #e2e8f0; border-radius:12px; cursor:pointer; transition:all .2s; background:#fff; position:relative; user-select:none; }
.priority-card--active,.priority-card:has(input:checked) { border-color:var(--p-border); background:var(--p-bg); box-shadow:0 2px 10px rgba(0,0,0,.07); }
.priority-card:hover { border-color:var(--p-border); transform:translateY(-2px); }
.priority-dot { width:18px; height:18px; border-radius:50%; background:var(--p-color); display:block; flex-shrink:0; box-shadow:0 2px 6px rgba(0,0,0,.15); }
.priority-label { font-size:13px; font-weight:600; color:#4a5568; text-align:center; }
.priority-card--active .priority-label,.priority-card:has(input:checked) .priority-label { color:var(--p-color); }
.priority-check { position:absolute; top:6px; inset-inline-end:8px; font-size:10px; color:var(--p-color); opacity:0; transition:opacity .15s; }
.priority-card--active .priority-check,.priority-card:has(input:checked) .priority-check { opacity:1; }
.ct-field-error { border-color:#e53e3e !important; box-shadow:0 0 0 3px rgba(229,62,62,.15) !important; }
@keyframes ctShakeAnim {
    0%,100% { transform:translateX(0); }
    20%      { transform:translateX(-8px); }
    40%      { transform:translateX(8px); }
    60%      { transform:translateX(-5px); }
    80%      { transform:translateX(5px); }
}
.ct-shake { animation:ctShakeAnim .4s ease; }

/* ── Project list (pj-*) ── */
.pj-tabs { display:flex; gap:8px; flex-wrap:wrap; }
.pj-tab { display:inline-flex; align-items:center; gap:7px; padding:8px 18px; border-radius:22px; font-size:13px; font-weight:600; border:1.5px solid #e2e8f0; background:#fff; color:#718096; cursor:pointer; transition:all .2s; font-family:inherit; }
.pj-tab:hover { border-color:var(--cp-accent); color:var(--cp-accent); }
.pj-tab--on { background:var(--cp-primary); border-color:var(--cp-primary); color:#fff !important; }
.pj-tab--active    { background:#2b6cb0; border-color:#2b6cb0; }
.pj-tab--completed { background:#276749; border-color:#276749; }
.pj-tab--suspended { background:#c05621; border-color:#c05621; }
.pj-tab__dot { width:7px; height:7px; border-radius:50%; display:inline-block; flex-shrink:0; }
.pj-tab__count { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:rgba(255,255,255,.25); font-size:11px; font-weight:700; }
.pj-tab:not(.pj-tab--on) .pj-tab__count { background:#f0f4f8; color:#718096; }
.pj-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; }
.pj-card { display:flex; flex-direction:column; background:#fff; border-radius:16px; border:1.5px solid #e8edf3; box-shadow:0 2px 12px rgba(0,0,0,.06); text-decoration:none; color:inherit; transition:transform .2s, box-shadow .2s, border-color .2s; overflow:hidden; }
.pj-card:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.11); border-color:#c3d4e8; color:inherit; }
.pj-card__bar { height:4px; }
.pj-card__body { padding:18px 20px 14px; flex:1; }
.pj-card__head { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:12px; }
.pj-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:20px; font-size:11px; font-weight:700; flex-shrink:0; }
.pj-badge__dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; }
.pj-service { font-size:11px; color:#a0aec0; display:flex; align-items:center; gap:4px; }
.pj-service i { font-size:10px; }
.pj-card__title { font-size:.95rem; font-weight:700; color:#1a202c; margin:0 0 8px; line-height:1.4; }
.pj-card__desc { font-size:12.5px; color:#718096; line-height:1.7; margin:0 0 14px; }
.pj-prog { margin-bottom:14px; }
.pj-prog__top { display:flex; justify-content:space-between; align-items:center; margin-bottom:5px; }
.pj-prog__label { font-size:11px; color:#a0aec0; font-weight:600; }
.pj-prog__pct { font-size:12px; font-weight:800; }
.pj-prog__track { height:7px; border-radius:10px; background:#edf2f7; overflow:hidden; }
.pj-prog__fill { height:100%; border-radius:10px; transition:width .6s ease; }
.pj-card__dates { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.pj-date-item { font-size:11.5px; color:#718096; display:inline-flex; align-items:center; gap:4px; }
.pj-date-item--late { color:#e53e3e; }
.pj-date-item i { font-size:10px; }
.pj-date-sep { color:#cbd5e0; font-size:12px; }
.pj-card__footer { padding:10px 20px; border-top:1px solid #f0f4f8; background:#fafbff; }
.pj-card__cta { font-size:12px; font-weight:700; color:var(--cp-accent); display:flex; align-items:center; gap:6px; }
.pj-card__cta i { font-size:10px; }

/* ── View project (vp-*, spin) ── */
@keyframes spin { to { transform:rotate(360deg); } }
.vp-status-badge { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:12px; font-weight:700; }
.vp-prog-wrap { }
.vp-prog-info { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.vp-prog-title { font-size:13px; font-weight:700; color:#2d3748; }
.vp-prog-pct { font-size:22px; font-weight:900; line-height:1; }
.vp-prog-track { height:12px; border-radius:12px; background:#edf2f7; overflow:hidden; }
.vp-prog-fill { height:100%; border-radius:12px; transition:width .8s ease; }
.vp-info-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:14px; }
.vp-info-card { }
.vp-info-icon { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:16px; margin-bottom:10px; }
.vp-info-label { font-size:11px; color:#a0aec0; font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:4px; }
.vp-info-val { font-size:14px; font-weight:700; color:#2d3748; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.vp-info-val--late { color:#e53e3e; }
.vp-late-badge { font-size:10px; font-weight:700; background:#fff5f5; color:#e53e3e; padding:2px 8px; border-radius:10px; }

/* ── Upload zone extras ── */
.ct-upload-zone__input { position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; height:100%; }
.ct-upload-zone__loading { margin-top:10px; font-size:13px; color:#718096; }

/* ── File list ── */
.ct-file-list { display:flex; flex-direction:column; gap:8px; margin-bottom:20px; }
.ct-file-item { display:flex; align-items:center; gap:12px; padding:10px 14px; background:#fff; border:1.5px solid #e2e8f0; border-radius:10px; transition:border-color .2s; }
.ct-file-item:hover { border-color:var(--cp-accent); }
.ct-file-item__thumb { width:44px; height:44px; border-radius:8px; background:#f0f4f8; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:20px; color:#718096; }
.ct-file-item__thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.ct-file-item__info { flex:1; min-width:0; }
.ct-file-item__name { font-size:13px; font-weight:500; color:#2d3748; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ct-file-item__size { font-size:11px; color:#a0aec0; margin-top:2px; }
.ct-file-item__remove { width:28px; height:28px; border-radius:50%; background:#fff5f5; color:#e53e3e; border:none; cursor:pointer; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; transition:background .2s; }
.ct-file-item__remove:hover { background:#fed7d7; }

/* ── No-project alert ── */
.ct-no-project-alert { display:flex; gap:12px; align-items:flex-start; padding:12px 16px; border-radius:10px; background:#fffaf0; border:1.5px solid #fbd38d; }
.ct-no-project-alert__icon { width:34px; height:34px; border-radius:50%; flex-shrink:0; background:#fef3c7; display:flex; align-items:center; justify-content:center; font-size:15px; color:#d97706; }
.ct-no-project-alert__body { flex:1; }
.ct-no-project-alert__title { font-size:12px; font-weight:700; color:#92400e; margin-bottom:4px; }
.ct-no-project-alert__msg { font-size:11px; color:#b45309; line-height:1.6; margin-bottom:8px; }
.ct-no-project-alert__hint { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:#d97706; background:#fef3c7; padding:4px 10px; border-radius:20px; }

/* ── Ticket list (tl-*) ── */
.tl-filters { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.tl-search-wrap { position:relative; flex:1; min-width:180px; }
.tl-search-icon { position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); color:#a0aec0; font-size:13px; pointer-events:none; }
.tl-search-input { padding-inline-start:36px !important; margin-bottom:0 !important; }
.tl-chips { display:flex; gap:6px; flex-wrap:wrap; }
.tl-chip { display:inline-flex; align-items:center; gap:5px; padding:6px 14px; border-radius:20px; font-size:12px; font-weight:600; border:1.5px solid #e2e8f0; background:#fff; color:#718096; cursor:pointer; transition:all .2s; font-family:inherit; }
.tl-chip:hover { border-color:var(--cp-accent); color:var(--cp-accent); }
.tl-chip--on { background:var(--cp-primary); border-color:var(--cp-primary); color:#fff !important; }
.tl-chip--blue-on   { background:#2b6cb0; border-color:#2b6cb0; }
.tl-chip--orange-on { background:#c05621; border-color:#c05621; }
.tl-chip--purple-on { background:#6b46c1; border-color:#6b46c1; }
.tl-chip--green-on  { background:#276749; border-color:#276749; }
.tl-chip__dot { width:6px; height:6px; border-radius:50%; display:inline-block; flex-shrink:0; }
.tl-row { cursor:pointer; }
.tl-row:hover td { background:#f7fbff !important; }
.tl-num   { font-size:12px; font-weight:700; color:var(--cp-primary); font-family:monospace,sans-serif; letter-spacing:.5px; }
.tl-title { font-size:13px; font-weight:500; color:#2d3748; }
.tl-type  { font-size:12px; color:#718096; }
.tl-date  { font-size:12px; color:#a0aec0; }
.cp-badge--waiting { background:#faf5ff; color:#6b46c1; }

/* ── View ticket (vt-*) ── */
.vt-header       { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; }
.vt-header__main { flex:1; min-width:0; }
.vt-title        { font-size:1rem; font-weight:700; color:#1a202c; margin:0 0 8px; line-height:1.4; }
.vt-meta-bar     { display:flex; align-items:center; flex-wrap:wrap; gap:5px; font-size:12px; color:#718096; }
.vt-meta-bar__item { display:inline-flex; align-items:center; gap:4px; }
.vt-meta-bar__sep  { color:#dde2ea; }
.vt-badges       { display:flex; align-items:center; gap:8px; flex-shrink:0; flex-wrap:wrap; }
.vt-chat { padding:28px 26px; background:#f7f9fb; display:flex; flex-direction:column; gap:26px; border-radius:0 0 16px 16px; }
.vt-row { display:flex; align-items:flex-start; gap:12px; }
.vt-row--admin { flex-direction:row-reverse; }
.vt-av { width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:700; line-height:1; color:#fff; box-shadow:0 2px 8px rgba(0,0,0,.12); }
.vt-av--blue { background:linear-gradient(135deg,#3b82f6,#1d4ed8); }
.vt-av--dark { background:linear-gradient(135deg,var(--default-color),#0f3452); }
.vt-col { display:flex; flex-direction:column; gap:6px; max-width:72%; }
.vt-who { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.vt-who--admin { flex-direction:row-reverse; }
.vt-who__name  { font-size:13px; font-weight:700; color:#374151; }
.vt-who__time  { font-size:10.5px; color:#b0b8c4; font-weight:300; }
.vt-bubble { padding:14px 18px; background:#d9efe8; color:#1e2d3d; border-radius:18px; font-size:14px; line-height:1.8; white-space:pre-wrap; word-break:break-word; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.vt-bubble--admin { background:#cce5f6; }
.vt-files { display:flex; flex-wrap:wrap; gap:8px; margin-top:2px; }
.vt-file--img { display:block; width:82px; height:82px; border-radius:10px; overflow:hidden; border:2px solid rgba(0,0,0,.08); flex-shrink:0; }
.vt-file--img img { width:100%; height:100%; object-fit:cover; display:block; }
.vt-file--doc { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:9px; background:#fff; color:#374151; font-size:12px; font-weight:500; text-decoration:none; border:1px solid #e5e7eb; max-width:220px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,.06); }
.vt-file--doc span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0; }
.vt-file--doc:hover { background:#f9fafb; }
.cp-btn--danger-outline { color:#e53e3e; border:1.5px solid #e53e3e; background:transparent; }
.cp-btn--danger-outline:hover, .cp-btn--danger-outline:focus { background:#e53e3e; border-color:#e53e3e; color:#fff !important; }