: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;
}
/* ============================================================
   ★ 2026-09-27 修复：桌面端「回复输入框被顶出视口」事故
   ------------------------------------------------------------
   现象：桌面端（>992px）打开历史工单较多的工单对话页，
        底部回复输入框"消失"，页面下方大片空白，无法回复。
   根因：.ticket-chat-layout 是 display:grid 但未声明 grid-template-rows，
        隐式行高 = auto = 内容最高者。右侧 .ticket-sidebar 渲染 50 条
        历史工单后自然高约 3700px，把这一行撑成 3727px，再经
        align-items:stretch 拉高同行的 .ticket-chat-main，
        使 .chat-body{flex:1 1 0%} 吃满 3451px，把 .chat-footer
        推到 3682px 处 —— 远超 900px 视口，用户看不见输入框。
   为什么原 max-height 无效：max-height 只裁剪 grid 容器自身的渲染盒，
        【不参与 grid-template-rows 的计算】，行高照样按内容算 3727px。
        而 .ticket-sidebar{overflow:hidden} + .ticket-history-list{flex:1;
        overflow-y:auto} 这套是 flex 思维，在 grid 布局下拿不到约束，
        侧栏获得 3727px 空间后"没有溢出可滚"，50 条卡片全展开，自洽放大。
   为什么只影响部分用户：历史工单 ≤5 条时侧栏自然高 < 780px，取 min-height
        780px 布局正常。这是【老客户才会踩】的 bug，与工单状态无关。
   修复：给 grid 显式行高 minmax(0,1fr) + 子项 min-height:0
        —— CSS Grid 经典陷阱，grid item 默认 min-height:auto 必须压制。
   ============================================================ */
.ticket-chat-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 280px !important;
    /* ★ 显式单行 + minmax(0,1fr)：把行高锁死为容器高，禁止被内容撑破 */
    grid-template-rows: minmax(0, 1fr) !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 1220px !important;
    margin: 0 auto !important;
    /* 高度自适应：减去顶栏(70px) + 面包屑区 + 底部留白，避免「发送回复」被视口裁掉。
       dvh 优先（移动端动态视口更准），回退 vh。原 120px 余量偏乐观，
       实测 1440x900 下页面顶部已占 144px，导致容器整体下沉 24px。 */
    min-height: calc(100dvh - var(--tk-vh-offset, 148px)) !important;
    max-height: calc(100dvh - var(--tk-vh-offset, 148px)) !important;
    align-items: stretch !important;
}
@supports not (height: 100dvh) {
    .ticket-chat-layout {
        min-height: calc(100vh - var(--tk-vh-offset, 148px)) !important;
        max-height: calc(100vh - var(--tk-vh-offset, 148px)) !important;
    }
}
/* ★ 两个 grid item 都必须 min-height:0，否则 min-height:auto 会再次撑破行高 */
.ticket-chat-main,
.ticket-sidebar {
    min-height: 0 !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;
    /* ★ 固定不压缩：侧栏高度被 grid 锁死后，头部必须保留自身高度，
       否则标题/搜索框会被 flex 压缩成一条线 */
    flex: 0 0 auto !important;
}
/* 提交新工单：侧栏主 CTA */
.sidebar-cta {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 10px !important;
    padding: 11px 13px !important;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 10px 22px -13px rgba(37, 99, 235, .9) !important;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease !important;
}
.sidebar-cta:hover {
    transform: translateY(-2px);
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 14px 26px -13px rgba(37, 99, 235, 1) !important;
}
.sidebar-cta__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .2);
    font-size: 13px;
}
.sidebar-cta__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.32;
}
.sidebar-cta__text strong {
    font-size: 13.5px;
    font-weight: 650;
    letter-spacing: .2px;
}
.sidebar-cta__text small {
    font-size: 11px;
    opacity: .8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-cta__arrow {
    margin-left: auto;
    font-size: 12px;
    opacity: .85;
    transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.sidebar-cta:hover .sidebar-cta__arrow { transform: translateX(3px); }
.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-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    max-width: min(100%, 420px) !important;
    margin-top: 10px !important;
    padding-top: 8px !important;
    border-top: 1px dashed rgba(148, 163, 184, 0.3) !important;
}

/* 对话附件只展示文件名，不把原图直接撑进消息气泡；点击文件行仍可打开原图。 */
.chat-attachment-file {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: min(100%, 360px) !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding: 7px 10px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 8px !important;
    background: #f8fafc !important;
    color: #334155 !important;
    text-decoration: none !important;
    line-height: 1.35 !important;
    transition: border-color .16s ease, background .16s ease, color .16s ease !important;
}
.chat-attachment-file:hover {
    border-color: #93c5fd !important;
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    text-decoration: none !important;
}
.chat-attachment-file > .fa-image {
    flex: 0 0 auto !important;
    color: #2563eb !important;
    font-size: 14px !important;
}
.chat-attachment-filename {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
}
.chat-attachment-open {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    color: #94a3b8 !important;
    font-size: 11px !important;
}
.chat-attachment-file:hover .chat-attachment-open { color: #2563eb !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;
}
/* 2026-09-27 移除 .sky-title::before 蓝色竖条：
   本文件是工单页专用样式，但经 includes/head.tpl 全局引入，且 .sky-title
   只出现在会员中心（clientarea.tpl / includes/recharge.tpl），
   导致用户中心所有卡片标题左侧多出一条蓝色图标式竖条。
   保留一条不产内容的兜底，防止任何缓存/残留定义再次画出竖条。 */
.sky-card .sky-title::before {
    content: none !important;
    display: none !important;
}
.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; }
}

/* ============================================================
 * 工单模块 2.0 —— 企业级控制台视觉系统
 * ------------------------------------------------------------
 * 设计口径：专业 / 有序 / 克制。以站点主蓝为品牌色，中性色偏冷，
 *          状态色语义化（待处理=琥珀、已回复=翠绿、客户回复=靛蓝、已关闭=灰）。
 * 命名空间：tk-*（ticket），与主题既有样式完全隔离，避免回归。
 * ============================================================ */

.tk-dept-page,
.tk-list-page,
.tk-form-page {
    --tk-ink: #0f172a;
    --tk-ink-2: #334155;
    --tk-ink-3: #64748b;
    --tk-ink-4: #94a3b8;
    --tk-line: #e6ebf2;
    --tk-line-2: #eef2f7;
    --tk-bg: #ffffff;
    --tk-bg-2: #f8fafc;
    --tk-brand: #2563eb;
    --tk-brand-deep: #1d4ed8;
    --tk-radius: 12px;
    color: var(--tk-ink);
}

/* ---------- 顶部说明 ---------- */
.tk-note {
    display: flex;
    gap: 14px;
    padding: 18px 20px;
    margin-bottom: 18px;
    border: 1px solid #e0ecff;
    border-left: 3px solid var(--tk-brand);
    border-radius: var(--tk-radius);
    background: linear-gradient(180deg, #f7faff 0%, #ffffff 100%);
}
.tk-note__mark {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(37, 99, 235, .09);
    color: var(--tk-brand);
    font-size: 19px;
}
.tk-note__body { flex: 1 1 auto; min-width: 0; }
.tk-note__body p {
    margin: 0 0 4px;
    color: var(--tk-ink-2);
    font-size: 13px;
    line-height: 1.85;
}
.tk-note__body p:last-child { margin-bottom: 0; }

/* ---------- 步骤条 ---------- */
.tk-steps {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 0 18px;
    padding: 16px 22px;
    list-style: none;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    background: var(--tk-bg);
}
.tk-steps__item {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1 1 0;
    min-width: 0;
    color: var(--tk-ink-4);
    font-size: 13.5px;
    font-weight: 500;
}
.tk-steps__item + .tk-steps__item::before {
    content: "";
    flex: 0 0 auto;
    width: 26px;
    height: 1px;
    margin-right: 12px;
    background: var(--tk-line);
}
.tk-steps__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #d8dfe9;
    border-radius: 50%;
    background: #fff;
    color: var(--tk-ink-4);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
}
.tk-steps__item.is-active { color: var(--tk-brand); }
.tk-steps__item.is-active .tk-steps__num {
    border-color: var(--tk-brand);
    background: var(--tk-brand);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
/* 已完成步骤：可点击返回 */
.tk-steps__item.is-done { color: var(--tk-ink-2); }
.tk-steps__item.is-done .tk-steps__num {
    border-color: #bfe6d2;
    background: #ecfdf5;
    color: #059669;
}
.tk-steps__item.is-done .tk-steps__num i { font-size: 15px; }
.tk-steps__link {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: inherit !important;
    text-decoration: none !important;
}
.tk-steps__link:hover { color: #059669 !important; }
.tk-steps__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- 面板 ---------- */
.tk-panel {
    padding: 24px 26px 26px;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    background: var(--tk-bg);
}
.tk-panel__head { margin-bottom: 20px; }
.tk-panel__title {
    position: relative;
    margin: 0 0 8px;
    padding-left: 12px;
    color: var(--tk-ink);
    font-size: 16px;
    font-weight: 600;
}
.tk-panel__title::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 0;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--tk-brand);
}
.tk-panel__hint {
    margin: 0;
    padding-left: 12px;
    color: var(--tk-ink-3);
    font-size: 12.5px;
    line-height: 1.7;
}

/* ---------- 部门卡片（每张不同色系 · 卡片式） ---------- */
.tk-dept-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.tk-dept {
    --c-main: #2563eb;
    --c-deep: #1e40af;
    --c-soft: #eff6ff;
    --c-line: #c7ddff;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 188px;
    padding: 24px 24px 20px;
    overflow: hidden;
    border: 1px solid var(--tk-line);
    border-radius: 16px;
    background: #fff;
    text-decoration: none !important;
    transition: transform .24s cubic-bezier(.22, 1, .36, 1),
                box-shadow .24s cubic-bezier(.22, 1, .36, 1),
                border-color .24s ease;
}
/* 顶部色带：区分部门色系 */
.tk-dept::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--c-main), var(--c-deep));
}
/* 右上角柔光：强化色系识别又不喧哗 */
.tk-dept__aura {
    position: absolute;
    top: -66px;
    right: -66px;
    width: 176px;
    height: 176px;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, var(--c-main) 0%, rgba(255, 255, 255, 0) 68%);
    opacity: .12;
    pointer-events: none;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .3s ease;
}
/* 图标：实心渐变块，比浅色底更有分量 */
.tk-dept__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--c-main), var(--c-deep));
    color: #fff;
    font-size: 23px;
    line-height: 1;
    box-shadow: 0 9px 18px -9px var(--c-main);
}
.tk-dept__name {
    position: relative;
    z-index: 1;
    margin-bottom: 8px;
    color: var(--tk-ink);
    font-size: 16.5px;
    font-weight: 650;
    letter-spacing: .2px;
}
.tk-dept__desc {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--tk-ink-3);
    font-size: 12.5px;
    line-height: 1.72;
}
/* 行动区：胶囊按钮，hover 时整块填色 */
.tk-dept__go {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 5px;
    margin-top: auto;
    padding: 7px 13px;
    border-radius: 10px;
    background: var(--c-soft);
    color: var(--c-main);
    font-size: 13px;
    font-weight: 600;
    transition: background .2s ease, color .2s ease;
}
.tk-dept__go i { font-size: 17px; transition: transform .22s cubic-bezier(.22, 1, .36, 1); }
.tk-dept:hover {
    transform: translateY(-3px);
    border-color: var(--c-main);
    box-shadow: 0 14px 30px -14px rgba(15, 23, 42, .26);
    box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--c-main) 46%, transparent);
}
.tk-dept:hover .tk-dept__aura { transform: scale(1.16); opacity: .2; }
.tk-dept:hover .tk-dept__go { background: var(--c-main); color: #fff; }
.tk-dept:hover .tk-dept__go i { transform: translateX(2px); }
.tk-dept:focus-visible {
    outline: none;
    border-color: var(--c-main);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-main) 22%, transparent);
}

/* 六套色系，按出现顺序轮转 */
.tk-dept:nth-child(6n+1) { --c-main:#2563eb; --c-deep:#1e40af; --c-soft:#eff6ff; --c-line:#c7ddff; }
.tk-dept:nth-child(6n+2) { --c-main:#7c3aed; --c-deep:#5b21b6; --c-soft:#f5f3ff; --c-line:#ddd6fe; }
.tk-dept:nth-child(6n+3) { --c-main:#0891b2; --c-deep:#155e75; --c-soft:#ecfeff; --c-line:#a5f3fc; }
.tk-dept:nth-child(6n+4) { --c-main:#059669; --c-deep:#065f46; --c-soft:#ecfdf5; --c-line:#a7f3d0; }
.tk-dept:nth-child(6n+5) { --c-main:#d97706; --c-deep:#92400e; --c-soft:#fffbeb; --c-line:#fde68a; }
.tk-dept:nth-child(6n+6) { --c-main:#e11d48; --c-deep:#9f1239; --c-soft:#fff1f2; --c-line:#fecdd3; }

/* ---------- 列表页：工具条 ---------- */
.tk-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}
.tk-bar__meta { display: inline-flex; align-items: baseline; gap: 7px; }
.tk-bar__label { color: var(--tk-ink-3); font-size: 13px; }
.tk-bar__value {
    color: var(--tk-ink);
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.tk-bar__unit { color: var(--tk-ink-4); font-size: 12px; }

.tk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border: 0;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.tk-btn i { font-size: 17px; }
.tk-btn--primary {
    background: linear-gradient(135deg, var(--tk-brand) 0%, var(--tk-brand-deep) 100%);
    color: #fff !important;
    box-shadow: 0 6px 16px -8px rgba(37, 99, 235, .75);
}
.tk-btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -9px rgba(37, 99, 235, .85);
}
.tk-btn--ghost {
    border: 1px solid var(--tk-line);
    background: #fff;
    color: var(--tk-ink-2) !important;
}
.tk-btn--ghost:hover {
    border-color: #cbd5e1;
    background: var(--tk-bg-2);
    color: var(--tk-ink) !important;
}

/* ============================================================
 * 提交工单（step 2）：工单信息编辑板块
 * ------------------------------------------------------------
 * 设计口径：表单分区化 + 明确的字段层级 + 克制的强调色，
 *          与部门卡片页 / 工单列表页共用同一套 tk-* token。
 * ============================================================ */
.tk-form-card {
    border: 1px solid var(--tk-line);
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.tk-form-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 26px;
    border-bottom: 1px solid var(--tk-line-2);
    background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}
.tk-form-card__title {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}
.tk-form-card__mark {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--tk-brand) 0%, var(--tk-brand-deep) 100%);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 8px 18px -9px var(--tk-brand);
}
.tk-form-card__title h2 {
    margin: 0 0 3px;
    color: var(--tk-ink);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: .2px;
}
.tk-form-card__title p {
    margin: 0;
    color: var(--tk-ink-3);
    font-size: 12.5px;
    line-height: 1.6;
}
.tk-form-card__title p em { color: #e11d48; font-style: normal; font-weight: 700; }
.tk-form-card__badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid #d7f0e3;
    border-radius: 999px;
    background: #f2fdf7;
    color: #047857;
    font-size: 12px;
    font-weight: 600;
}
.tk-form-card__badge i { font-size: 15px; }

.tk-form__body {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 26px 6px;
}
.tk-form__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 20px;
}
.tk-field { min-width: 0; }
.tk-field--full { grid-column: 1 / -1; }
.tk-field__label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--tk-ink-2);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .1px;
}
.tk-field__label i { color: var(--tk-ink-4); font-size: 15px; }
.tk-field__label em {
    color: #e11d48;
    font-style: normal;
    font-weight: 700;
    margin-left: -2px;
}
.tk-field__hint {
    margin-left: 4px;
    color: var(--tk-ink-4);
    font-size: 11.5px;
    font-weight: 500;
}

/* 表单控件统一外观 */
.tk-form .form-control,
.tk-form .bootstrap-select > .dropdown-toggle {
    min-height: 42px;
    padding: 9px 13px;
    border: 1px solid #dde4ee;
    border-radius: 10px;
    background-color: #fcfdff;
    color: var(--tk-ink);
    font-size: 13.5px;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.tk-form .bootstrap-select > .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
}
.tk-form .form-control::placeholder { color: #a6b2c2; }
.tk-form .form-control:hover,
.tk-form .bootstrap-select > .dropdown-toggle:hover { border-color: #c9d6e6; }
.tk-form .form-control:focus,
.tk-form .bootstrap-select.show > .dropdown-toggle {
    border-color: var(--tk-brand);
    background-color: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.tk-form .bootstrap-select .dropdown-menu {
    border: 1px solid var(--tk-line);
    border-radius: 12px;
    box-shadow: 0 16px 34px -16px rgba(15, 23, 42, .3);
    padding: 6px;
}
.tk-form .bootstrap-select .dropdown-menu li a {
    border-radius: 8px;
    color: var(--tk-ink-2);
    font-size: 13px;
}
.tk-form .bootstrap-select .dropdown-menu li a:hover,
.tk-form .bootstrap-select .dropdown-menu li.selected a {
    background: #eef4ff;
    color: var(--tk-brand);
}

/* 内容编辑区 */
.tk-editor {
    position: relative;
    border-radius: 12px;
}
.tk-editor .form-control {
    min-height: 190px;
    padding: 14px 15px;
    line-height: 1.75;
    resize: vertical;
}

/* 附件上传区 */
.tk-upload {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.tk-upload .image-preview-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.tk-upload .image-preview-container .placeholder { display: none; }
.tk-upload .image-preview-container img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border: 1px solid var(--tk-line);
    border-radius: 10px;
    background: var(--tk-bg-2);
}
.tk-upload .upload-btn-container { width: 100%; }
.tk-upload__btn {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    width: 100%;
    min-height: 104px;
    padding: 18px;
    border: 1.5px dashed #cfdbea !important;
    border-radius: 12px;
    background: #fbfdff !important;
    color: var(--tk-ink-3) !important;
    font-weight: 500;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.tk-upload__btn:hover {
    border-color: var(--tk-brand) !important;
    background: #f4f8ff !important;
    color: var(--tk-brand) !important;
}
.tk-upload__icon { font-size: 26px; line-height: 1; color: var(--tk-brand); }
.tk-upload__text { font-size: 13.5px; font-weight: 600; }
.tk-upload__sub { font-size: 11.5px; color: var(--tk-ink-4); }

/* 开关型自定义字段 */
.tk-switch {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid #dde4ee;
    border-radius: 10px;
    background: #fcfdff;
}

/* 底部操作区 */
.tk-form__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 18px;
    padding: 18px 26px;
    border-top: 1px solid var(--tk-line-2);
    background: var(--tk-bg-2);
}
.tk-form__foot-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--tk-ink-3);
    font-size: 12.5px;
}
.tk-form__foot-hint i { color: #d97706; font-size: 16px; }
.tk-form__foot-actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.tk-form__foot-actions .tk-btn { min-width: 108px; justify-content: center; }
.tk-form__foot-actions .tk-btn--primary { min-width: 138px; }

/* ---------- 列表页：状态概览 ---------- */
.tk-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.tk-stat {
    --s: var(--tk-ink-3);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 16px 18px 15px 20px;
    overflow: hidden;
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    background: var(--tk-bg);
}
.tk-stat::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: var(--s);
}
.tk-stat__num {
    color: var(--tk-ink);
    font-size: 24px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.tk-stat__text { color: var(--tk-ink-3); font-size: 12.5px; }
.tk-stat--all      { --s: #2563eb; }
.tk-stat--open     { --s: #d97706; }
.tk-stat--answered { --s: #059669; }
.tk-stat--closed   { --s: #94a3b8; }

/* ---------- 列表页：表格 ---------- */
.tk-card {
    border: 1px solid var(--tk-line);
    border-radius: var(--tk-radius);
    background: var(--tk-bg);
    overflow: hidden;
}
.tk-tablewrap { width: 100%; overflow-x: auto; }
.tk-table {
    width: 100%;
    min-width: 1080px;
    border-collapse: collapse;
    margin: 0;
}
.tk-table thead th {
    padding: 13px 18px;
    border-bottom: 1px solid var(--tk-line);
    background: var(--tk-bg-2);
    color: var(--tk-ink-3);
    font-size: 12.5px;
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}
.tk-table tbody td {
    padding: 16px 18px;
    border-bottom: 1px solid var(--tk-line-2);
    color: var(--tk-ink-2);
    font-size: 13.5px;
    vertical-align: middle;
}
.tk-table tbody tr:last-child td { border-bottom: 0; }
.tk-table tbody tr { transition: background .16s ease; }
.tk-table tbody tr:hover { background: #f7faff; }
.tk-col-op { text-align: right !important; }

.tk-tag {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 10px;
    border: 1px solid var(--tk-line);
    border-radius: 6px;
    background: var(--tk-bg-2);
    color: var(--tk-ink-2);
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tk-subject {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-decoration: none !important;
    min-width: 0;
}
.tk-subject__no {
    color: var(--tk-ink-4);
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .3px;
}
.tk-subject__text {
    color: var(--tk-ink);
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .16s ease;
}
.tk-subject:hover .tk-subject__text { color: var(--tk-brand); }

.tk-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 9px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}
.tk-status i {
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.tk-status.is-open     { background: #fffbeb; color: #b45309; }
.tk-status.is-answered { background: #ecfdf5; color: #047857; }
.tk-status.is-customer { background: #eef2ff; color: #4338ca; }
.tk-status.is-closed   { background: #f1f5f9; color: #64748b; }

.tk-dim { color: var(--tk-ink-3) !important; }
.tk-time {
    color: var(--tk-ink-3) !important;
    font-size: 12.5px !important;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tk-op {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: var(--tk-brand);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none !important;
    white-space: nowrap;
}
.tk-op i { font-size: 17px; transition: transform .18s ease; }
.tk-op:hover { color: var(--tk-brand-deep); }
.tk-op:hover i { transform: translateX(3px); }

.tk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 54px 20px;
    text-align: center;
}
.tk-empty i { color: #cbd5e1; font-size: 42px; line-height: 1; }
.tk-empty__title { margin: 6px 0 0; color: var(--tk-ink-2); font-size: 14px; font-weight: 500; }
.tk-empty__hint { margin: 0; color: var(--tk-ink-4); font-size: 12.5px; }

/* ---------- 列表页：底部分页 ---------- */
.tk-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-top: 1px solid var(--tk-line);
    background: var(--tk-bg-2);
}
.tk-foot__info { color: var(--tk-ink-3); font-size: 12.5px; }
.tk-pager { margin: 0 !important; }
.tk-pager .page-link {
    min-width: 32px;
    margin: 0 2px;
    padding: 6px 9px;
    border: 1px solid var(--tk-line) !important;
    border-radius: 7px !important;
    background: #fff;
    color: var(--tk-ink-2);
    font-size: 12.5px;
    text-align: center;
}
.tk-pager .page-item.active .page-link {
    border-color: var(--tk-brand) !important;
    background: var(--tk-brand) !important;
    color: #fff !important;
}
.tk-pager .page-item.disabled .page-link { opacity: .45; }

/* ---------- 响应式 ---------- */
@media (max-width: 992px) {
    .tk-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tk-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tk-field--full { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .tk-panel { padding: 18px 16px 20px; }
    .tk-steps { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
    .tk-steps__item { width: 100%; }
    .tk-steps__item + .tk-steps__item::before { display: none; }
    .tk-dept-grid { grid-template-columns: 1fr; }
    .tk-dept { min-height: 0; }
    .tk-bar { flex-wrap: wrap; }
    .tk-foot { flex-direction: column; align-items: flex-start; }
    .tk-note { padding: 15px 16px; }

    /* 提交工单：单列堆叠 + 底部操作区纵向排列 */
    .tk-form__grid { grid-template-columns: 1fr; }
    .tk-form-card__head { padding: 16px; flex-direction: column; align-items: flex-start; gap: 10px; }
    .tk-form__body { padding: 18px 16px 4px; gap: 16px; }
    .tk-form__foot {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }
    .tk-form__foot-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }
    .tk-form__foot-actions .tk-btn { width: 100%; }
    .tk-form__foot-actions .tk-btn--primary { order: -1; }
}

/* ============================================================
   工单对话页（/viewticket）移动端适配
   ------------------------------------------------------------
   问题：.ticket-chat-layout 用固定两列 grid（minmax(0,1fr) 280px），
        但完全没有移动端媒体查询。手机（375px）下第二列 280px 无法收缩，
        第一列被压成 31px 只剩一条缝，历史工单侧栏吃掉整个视口，
        用户既看不到消息也点不到回复框。
   方案：
     1. ≤992px：grid 塌成单列，主对话区 order:-1 置顶，侧栏整体下移
     2. ≤992px：历史工单侧栏折叠为「可展开面板」，默认收起，
        点击标题栏展开/收起（避免 50 条历史把回复框顶到屏幕外）
     3. 解除桌面端 max-height 锁死（手机用整页自然滚动更自然）
     4. 收紧内边距、气泡宽度、头像尺寸，保证窄屏可读可点
   ============================================================ */

/* ---- 移动端：历史工单折叠开关（桌面端不显示） ---- */
.ticket-sidebar-toggle {
    display: none;
}

@media (max-width: 992px) {
    /* 1. 单列堆叠：主对话区置顶，侧栏在后 */
    .ticket-chat-page {
        padding: 0 10px !important;
    }
    .ticket-chat-layout {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 12px !important;
        min-height: 0 !important;
        max-height: none !important;
        align-items: start !important;
    }
    .ticket-chat-main {
        order: -1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }
    .ticket-sidebar {
        order: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* 2. 侧栏折叠：标题栏变成可点的折叠开关 */
    .ticket-sidebar-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 13px 14px !important;
        border: 0 !important;
        border-bottom: 1px solid #edf2f7 !important;
        background: #fafcff !important;
        cursor: pointer !important;
        text-align: left !important;
    }
    .ticket-sidebar-toggle__label {
        display: flex !important;
        align-items: center !important;
        gap: 7px !important;
        font-size: 13.5px !important;
        font-weight: 700 !important;
        color: #0f172a !important;
    }
    .ticket-sidebar-toggle__label i {
        color: #2563eb !important;
    }
    .ticket-sidebar-toggle__count {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 20px !important;
        height: 20px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        background: #e0f2fe !important;
        color: #0284c7 !important;
        font-size: 11px !important;
        font-weight: 800 !important;
    }
    .ticket-sidebar-toggle__chevron {
        color: #94a3b8 !important;
        font-size: 12px !important;
        transition: transform .22s cubic-bezier(.22, 1, .36, 1) !important;
    }
    .ticket-sidebar.is-open .ticket-sidebar-toggle__chevron {
        transform: rotate(180deg) !important;
    }

    /* 默认收起：头部与列表都隐藏，只留折叠开关 */
    .ticket-sidebar-header,
    .ticket-history-list {
        display: none !important;
    }
    .ticket-sidebar.is-open .ticket-sidebar-header {
        display: block !important;
    }
    .ticket-sidebar.is-open .ticket-history-list {
        display: flex !important;
        max-height: 46vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* 3. 头部信息区在窄屏纵向排开 */
    .chat-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }
    .chat-header-info {
        min-width: 0 !important;
    }
    .chat-ticket-title {
        max-width: 100% !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        word-break: break-word !important;
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
    .chat-meta-bar {
        flex-wrap: wrap !important;
        gap: 6px 12px !important;
        font-size: 11.5px !important;
    }
    .chat-header-actions {
        width: 100% !important;
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }
    .btn-back-list {
        white-space: nowrap !important;
    }

    /* 4. 消息区：手机用整页滚动，不被视口高度锁死 */
    .chat-body {
        flex: 0 0 auto !important;
        min-height: 200px !important;
        max-height: none !important;
        overflow-y: visible !important;
        padding: 14px 12px !important;
    }
    .chat-stream {
        gap: 14px !important;
    }
    .chat-item {
        max-width: 92% !important;
        gap: 8px !important;
    }
    .chat-avatar-wrap {
        width: 34px !important;
        height: 34px !important;
        border-radius: 8px !important;
    }
    .chat-bubble-wrap {
        min-width: 0 !important;
    }
    .chat-bubble-box {
        padding: 9px 11px !important;
        font-size: 13px !important;
        line-height: 1.6 !important;
        word-break: break-word !important;
    }
    .chat-text-content,
    .chat-text-content p {
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
    .chat-text-content img {
        max-width: 100% !important;
        height: auto !important;
    }
    .chat-bubble-meta {
        flex-wrap: wrap !important;
        gap: 4px 8px !important;
        font-size: 11.5px !important;
    }

    /* 5. 回复区：输入框铺满、发送按钮整行，保证可点 */
    .chat-footer {
        padding: 12px 14px 16px !important;
    }
    .chat-tools-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 8px !important;
    }
    .chat-shortcut-hint {
        display: none !important;
    }
    .chat-textarea {
        font-size: 16px !important;  /* ≥16px 防 iOS 聚焦自动放大 */
        min-height: 92px !important;
    }
    .chat-submit-bar {
        justify-content: stretch !important;
    }
    .btn-chat-send {
        width: 100% !important;
        padding: 11px 16px !important;
        font-size: 15px !important;
    }
    .chat-closed-banner {
        font-size: 12.5px !important;
        padding: 12px !important;
        line-height: 1.6 !important;
    }

    /* 6. 侧栏内部：手机端卡片略紧凑 */
    .ticket-history-list {
        padding: 8px !important;
    }
    .ticket-card-title {
        font-size: 12.5px !important;
    }
    .ticket-sidebar-header {
        padding: 12px 12px 10px !important;
    }
}

/* ---- 超窄屏（≤400px）进一步收紧 ---- */
@media (max-width: 400px) {
    .ticket-chat-page {
        padding: 0 6px !important;
    }
    .chat-item {
        max-width: 95% !important;
        gap: 6px !important;
    }
    .chat-avatar-wrap {
        width: 30px !important;
        height: 30px !important;
    }
    .chat-bubble-box {
        padding: 8px 10px !important;
        font-size: 12.5px !important;
    }
    .chat-body {
        padding: 12px 10px !important;
    }
    .chat-footer {
        padding: 10px 12px 14px !important;
    }
}