:root {
  --primary: #165dff;
  --primary-hover: #0f4bcc;
  --primary-active: #0c3a99;
  --success: #52c41a;
  --danger: #ff4d4f;
  --warning: #faad14;
  --txtcolor: #040F43;
}
.workviewticket .workOrderInformation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}
.workviewticket .workOrderInformation .ticket-info-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
}
.workviewticket .workOrderInformation .ticket-info-item .ticket-info-item-title {
    min-width: 68px;
    white-space: nowrap;
    color: #5c5f66;
}
.workviewticket .workOrderInformation .ticket-info-item .ticket-info-item-content.Number {
    color: var(--primary);
}
.workviewticket .chat-container {
    display: flex;
    flex-direction: column;
    padding: 0;
}
.workviewticket .chat-container .chat-message {
    border-radius: 1px;
    padding: 18px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
}
.workviewticket .chat-container .chat-message .message-header {
    display: flex;
    align-items: center;
}
.workviewticket .chat-container .chat-message .message-header .user-type {
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 2px;
    background-color: var(--primary);
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}
.workviewticket .chat-container .chat-message .message-header .realname, .workviewticket .chat-container .chat-message .message-header .message-date {
    margin-right: 10px;
}
.workviewticket .chat-container .chat-message .message-header .message-date {
    color: #999;
}
.workviewticket .chat-container .chat-message .message-content {
    margin-top: 12px;
}
.workviewticket .chat-container .chat-message .message-content * {
    width: 100% !important;
    max-width: 100% !important;
}
.workviewticket .chat-container .chat-message .message-attachments {
    margin-top: 12px;
    display: flex;
}
.workviewticket .chat-container .chat-message .message-attachments a {
    margin-right: 8px;
    width: 56px;
    height: 56px;
    background-image: url(../images/zjzp_hz.png);
    background-size: cover;
    background-position: center;
    border-radius: 1px;
    font-size: 12px;
    display: flex;
    color: #fff;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    box-shadow: 0 2px 4px 0 #ccc;
    padding-bottom: 0px;
    position: relative;
}
.workviewticket .chat-container .chat-message .message-attachments a:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 18px;
    background: rgba(0, 0, 0, 0.08);
}
.workviewticket .chat-container .admin {
    background: #eff2f7;
    margin-right: 80px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.workviewticket .chat-container .user {
    background-color: #fff;
    margin-left: 80px;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.workviewticket .chat-container .user .message-header {
    justify-content: flex-start;
    flex-direction: row-reverse;
}
.workviewticket .chat-container .user .message-header .user-type {
    background: var(--danger);
}
.workOrderList .workOrderTitle {
    max-width: calc(30vw - 40px);
}
.workOrderList .workOrderTitle.replyReceived a:before {
    background-image: url(../images/Unprocessed.svg);
}
.workOrderList .workOrderTitle a {
    font-weight: 500;
    color: var(--primary) !important;
    padding-left: 30px;
    position: relative;
    display: flex;
}
.workOrderList .workOrderTitle a:before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background-image: url(../images/Processed.svg);
    background-size: cover;
    background-position: center;
}
.workOrderList .workOrderTitle a p {
    max-width: calc(30vw - 40px);
    color: var(--txtcolor) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 40px;
    font-weight: 400;
}
.workOrderList .workOrdercontent {
    max-width: calc(20vw - 40px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.workOrderList .processingStatus {
    display: flex;
    align-items: center;
}
.workOrderList .processingStatus .origin {
    border-radius: 1px;
    display: inline-block;
    height: 4px;
    margin-right: 6px;
    position: relative;
    width: 4px;
}
.selectDepartment {
    box-shadow: 0 2px 4px 0 #ccc;
    padding-bottom: 60px;
}
.selectDepartment .problemSearch .btn-primary {
    font-size: 14px;
    font-weight: 500;
}
.selectDepartment .selectDepartment-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 26px;
}
.selectDepartment .selectDepartment-content .selectDepartment-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    gap: 20px;
}
.selectDepartment .selectDepartment-content .selectDepartment-row .selectDepartment-item {
    min-height: 80px;
    display: flex;
    border: 1px solid #cfd5de;
    margin-bottom: 10px;
    padding: 28px 20px;
    cursor: pointer;
    gap: 12px;
    align-items: center;
}
.selectDepartment .selectDepartment-content .selectDepartment-row .selectDepartment-item:hover {
    background-color: #f7f9fd;
    border: 1px solid #006eff;
}
.selectDepartment .selectDepartment-content .selectDepartment-row .selectDepartment-item .selectDepartment-item-icon {
    height: 32px;
    width: 32px;
}
.selectDepartment .selectDepartment-content .selectDepartment-row .selectDepartment-item .selectDepartment-item-icon img {
    height: 32px;
    width: 32px;
}
.selectDepartment .selectDepartment-content .selectDepartment-row .selectDepartment-item .selectDepartment-item-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
.selectDepartment .selectDepartment-content .selectDepartment-row .selectDepartment-item .selectDepartment-item-text .selectDepartment-item-title {
    font-size: 15px;
    font-weight: 900;
    color: #000;
}
.selectDepartment .selectDepartment-content .selectDepartment-row .selectDepartment-item .selectDepartment-item-text .selectDepartment-item-content {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
    color: #999;
}
.workOrderContent {
    box-shadow: 0 2px 4px 0 #ccc;
}
.workOrderContent .form-control-label {
    font-size: 12px;
    color: var(--txtcolor);
    font-weight: 500;
}
body.inherit .nav-tabs-custom .nav-item .nav-link.active,
body.inherit .page-item.active .page-link,
body.inherit .sky-step .step-item.active .step-item-num {
    background: #20b486 !important;
    border-color: #20b486 !important;
    color: #ffffff !important;
}
.ticket-chat-page {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}
.ticket-chat-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 1220px !important;
    margin: 0 auto !important;
    min-height: calc(100vh - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    align-items: stretch !important;
}
.ticket-sidebar {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
.ticket-sidebar-header {
    padding: 14px 14px 10px !important;
    border-bottom: 1px solid #edf2f7 !important;
    background: #fafcff !important;
}
.ticket-search-box {
    position: relative !important;
}
.ticket-search-box .search-icon {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    font-size: 12px !important;
}
.ticket-search-box input {
    padding-left: 28px !important;
    border-radius: 6px !important;
    border-color: #cbd5e1 !important;
    font-size: 12px !important;
}
.ticket-history-list {
    flex: 1 1 0% !important;
    overflow-y: auto !important;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.ticket-history-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 10px 12px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    text-decoration: none !important;
    transition: all 0.18s ease !important;
    color: #334155 !important;
}
.ticket-history-card:hover {
    border-color: #93c5fd !important;
    background: #f8fafc !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}
.ticket-history-card.active {
    border-color: #10b981 !important;
    background: #f0fdf4 !important;
    box-shadow: 0 3px 10px rgba(16, 185, 129, 0.12) !important;
}
.ticket-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px !important;
}
.ticket-card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 1 0% !important;
}
.ticket-history-card.active .ticket-card-title {
    color: #047857 !important;
}
.ticket-card-meta {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 11px !important;
    color: #64748b !important;
}
.chat-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
}
.chat-status-pill.status-open {
    background: #fffbeb !important;
    color: #b45309 !important;
    border: 1px solid #fde68a !important;
}
.chat-status-pill.status-answered {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}
.chat-status-pill.status-customer {
    background: #f0fdf4 !important;
    color: #047857 !important;
    border: 1px solid #86efac !important;
}
.chat-status-pill.status-closed {
    background: #f1f5f9 !important;
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
}
.ticket-chat-main {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}
.chat-header {
    padding: 12px 18px !important;
    border-bottom: 1px solid #edf2f7 !important;
    background: #fafcff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
.ticket-badge-number {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #0284c7 !important;
    background: #e0f2fe !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
}
.chat-ticket-title {
    font-size: 16px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 480px !important;
}
.ticket-priority-tag {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    background: #f8fafc !important;
}
/* 优先级配色变体（由模板 ticketLevel() 输出 default/success/warning/danger） */
.ticket-priority-tag.priority_default {
    border-color: #cbd5e1 !important;
    color: #475569 !important;
    background: #f8fafc !important;
}
.ticket-priority-tag.priority_success {
    border-color: #86efac !important;
    color: #15803d !important;
    background: #f0fdf4 !important;
}
.ticket-priority-tag.priority_warning {
    border-color: #fcd34d !important;
    color: #b45309 !important;
    background: #fffbeb !important;
}
.ticket-priority-tag.priority_danger {
    border-color: #fca5a5 !important;
    color: #b91c1c !important;
    background: #fef2f2 !important;
}
/* 旧版作用域变体（.workviewticket 内的 priority_*）兼容保留 */
.workviewticket .priority_warning,
.workOrderList .priority_warning {
    color: #b45309 !important;
}
.workviewticket .priority_danger,
.workOrderList .priority_danger {
    color: #b91c1c !important;
}
.workviewticket .priority_success,
.workOrderList .priority_success {
    color: #15803d !important;
}
.chat-meta-bar {
    display: flex !important;
    gap: 14px !important;
    font-size: 12px !important;
    color: #64748b !important;
}
.chat-meta-bar strong {
    color: #334155 !important;
}
.ticket-department-highlight,
body.inherit .ticket-department-highlight {
    color: #e11d48 !important;
    font-weight: 750 !important;
}
.chat-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
}
.chat-body {
    flex: 1 1 0% !important;
    overflow-y: auto !important;
    padding: 20px 22px !important;
    background: #f8fafc !important;
}
.chat-stream {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}
.chat-item {
    display: flex !important;
    gap: 12px !important;
    max-width: 82% !important;
}
.chat-avatar-wrap {
    position: relative !important;
    width: 44px !important;
    height: 44px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: transparent !important;
}
.chat-avatar-wrap * {
    animation: none !important;
}
.chat-item-admin {
    align-self: flex-start !important;
    flex-direction: row !important;
}
.chat-item-admin .avatar-kf-img {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    max-width: 44px !important;
    max-height: 44px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
}
.chat-item-admin .chat-bubble-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    max-width: 100% !important;
    min-width: 0 !important;
}
.chat-item-admin .chat-bubble-box {
    display: inline-block !important;
    width: auto !important;
    width: fit-content !important;
    max-width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 2px 14px 14px 14px !important;
    padding: 10px 14px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
}
.chat-item-user {
    align-self: flex-end !important;
    flex-direction: row-reverse !important;
}
.chat-item-user .avatar-user-img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    object-fit: cover !important;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
    display: block !important;
    border: 0 !important;
}
.chat-item-user .avatar-user-img.avatar-v4-user {
    border: 1.5px solid #f59e0b !important;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.5) !important;
}
.chat-item-user .chat-bubble-wrap {
    align-items: flex-end !important;
}
.chat-item-user .chat-bubble-box {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border: 1px solid #047857 !important;
    border-radius: 14px 2px 14px 14px !important;
    padding: 12px 16px !important;
    box-shadow: 0 3px 12px rgba(4, 120, 87, 0.22) !important;
    color: #ffffff !important;
    font-size: 13.5px !important;
    line-height: 1.65 !important;
}
.chat-item-user .chat-bubble-box * {
    color: #ffffff !important;
}
.chat-bubble-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    min-width: 0 !important;
}
.chat-bubble-meta {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 11.5px !important;
    color: #64748b !important;
}
.chat-text-content {
    word-break: break-word !important;
}
.chat-text-content p {
    margin-bottom: 6px !important;
}
.chat-text-content p:last-child {
    margin-bottom: 0 !important;
}
.chat-attachments {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(148, 163, 184, 0.3) !important;
}
.chat-footer {
    padding: 12px 18px !important;
    border-top: 1px solid #edf2f7 !important;
    background: #ffffff !important;
}
.chat-closed-banner {
    background: #f8fafc !important;
    border: 1px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 14px !important;
    text-align: center !important;
    font-size: 13px !important;
    color: #64748b !important;
}
.chat-tools-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
}
.chat-shortcut-hint {
    font-size: 11.5px !important;
}
.chat-textarea {
    border-radius: 8px !important;
    resize: none !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
    padding: 10px 12px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    outline: none !important;
}
.chat-textarea:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
    background: #ffffff !important;
    outline: none !important;
}
.chat-submit-bar {
    display: flex !important;
    justify-content: flex-end !important;
    margin-top: 8px !important;
}
/* ============================================================
   侧栏历史工单搜索：无结果占位提示
   （由 viewticket.tpl 的 #ticketSearchInput input 事件动态插入）
   ============================================================ */
.ticket-search-empty {
    padding: 22px 12px !important;
    text-align: center !important;
    font-size: 12.5px !important;
    color: #94a3b8 !important;
    background: #f8fafc !important;
    border: 1px dashed #e2e8f0 !important;
    border-radius: 10px !important;
    margin-top: 4px !important;
}

/* ============================================================
   侧栏历史工单搜索：过滤隐藏态
   必须用 !important 且与 .ticket-history-card{display:flex!important}
   同级且写在后面，才能压过它（两者都是 !important 时按源码顺序取后者）
   ============================================================ */
.ticket-history-card.is-filtered-out {
    display: none !important;
}
.ticket-search-empty.is-filtered-out {
    display: none !important;
}

/* ============================================================
   提交工单页（/submitticket）版式补齐
   ------------------------------------------------------------
   说明：userCenter 主题把步骤条样式写在 body.inherit 作用域下，
   default 主题 body 无 inherit 类，导致步骤条 / 提示框退化为
   裸列表（显示为 1 选择部门类型 2 提交内容 3 等待处理 的纯文本）。
   这里补一份不带作用域前缀的等价实现。
   ============================================================ */

/* 布局容器 */
.sky-flex-container { display: flex; flex-direction: column; width: 100%; }
.sky-column { display: flex; flex-direction: column; width: 100%; }
.sky-flex-100 { width: 100%; }

/* 顶部说明提示框 */
.bgw { margin-bottom: 18px; }
.layui-elem-quote,
.layui-elem-quote.blue-theme {
    position: relative;
    margin: 0;
    padding: 16px 20px;
    border: 1px solid #dbeafe;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    background: #f5f9ff;
    color: #475569;
    font-size: 13px;
    line-height: 1.9;
}
.layui-elem-quote p { margin: 0; }

/* 步骤条 */
.sky-step { margin-bottom: 18px; }
.sky-step ol {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}
.sky-step .step-item {
    position: relative;
    display: flex;
    flex: 1;
    align-items: center;
    min-width: 0;
}
.sky-step .step-item-title {
    display: flex;
    align-items: center;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
}
.sky-step .step-item-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    background: #fff;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1;
}
.sky-step .step-item.active .step-item-title { color: #2563eb; }
.sky-step .step-item.active .step-item-num {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}
.sky-step .step-arrow {
    position: relative;
    flex: 1;
    height: 1px;
    margin: 0 14px;
    background: #e2e8f0;
}
.sky-step .step-arrow::after {
    content: "";
    position: absolute;
    top: -3px;
    right: 0;
    width: 7px;
    height: 7px;
    border-top: 1px solid #cbd5e1;
    border-right: 1px solid #cbd5e1;
    transform: rotate(45deg);
}

/* 卡片与标题 */
.sky-card {
    padding: 22px 24px;
    border: 1px solid #e5eaf1;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.sky-card .sky-title {
    position: relative;
    margin: 0 0 16px;
    padding: 0 0 10px 12px;
    border-bottom: 1px solid #eef2f7;
    color: #1e293b;
    font-size: 15px;
    font-weight: 600;
}
.sky-card .sky-title::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 4px;
    height: 15px;
    border-radius: 3px;
    background: #2563eb;
}
.selectDepartment .problemSearch { margin-bottom: 4px; }

/* 移动端 */
@media (max-width: 768px) {
    .sky-step ol { flex-direction: column; align-items: flex-start; }
    .sky-step .step-item { width: 100%; }
    .sky-step .step-arrow { display: none; }
    .selectDepartment .selectDepartment-content .selectDepartment-row {
        grid-template-columns: 1fr;
    }
    .sky-card { padding: 18px 16px; }
}