/*
 * iOS-inspired visual system for the legacy customer-service UI.
 * Load this file after framework and page styles.
 */

:root {
    color-scheme: light;
    --ios-blue: #007aff;
    --ios-blue-hover: #006ee6;
    --ios-green: #34c759;
    --ios-orange: #ff9500;
    --ios-red: #ff3b30;
    --ios-purple: #af52de;
    --ios-label: #1c1c1e;
    --ios-secondary-label: #636366;
    --ios-tertiary-label: #8e8e93;
    --ios-background: #f2f2f7;
    --ios-surface: #ffffff;
    --ios-surface-muted: #f8f8fa;
    --ios-fill: #e9e9ee;
    --ios-separator: rgba(60, 60, 67, 0.18);
    --ios-separator-strong: rgba(60, 60, 67, 0.28);
    --ios-focus: rgba(0, 122, 255, 0.18);
    --ios-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
    --ios-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    --ios-radius: 8px;
    --ios-control-radius: 8px;
}

html {
    background: var(--ios-background);
    font-family: var(--ios-font);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: var(--ios-background);
    color: var(--ios-label);
    font-family: var(--ios-font) !important;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body,
button,
input,
select,
textarea {
    font-family: var(--ios-font) !important;
    letter-spacing: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

::selection {
    background: rgba(0, 122, 255, 0.18);
    color: var(--ios-label);
}

a {
    color: var(--ios-blue);
    transition: color 160ms ease, background-color 160ms ease, opacity 160ms ease;
}

a:hover {
    color: var(--ios-blue-hover);
}

:focus-visible {
    outline: 3px solid var(--ios-focus) !important;
    outline-offset: 2px;
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 8px;
    background: rgba(60, 60, 67, 0.28);
    background-clip: padding-box;
}

/* Controls */
.layui-btn,
.pear-btn,
.btn,
.am-btn,
button[type="submit"],
input[type="submit"] {
    min-height: 36px;
    border: 1px solid transparent !important;
    border-radius: var(--ios-control-radius) !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 34px;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 120ms ease, opacity 160ms ease;
}

.layui-btn:active,
.pear-btn:active,
.btn:active,
.am-btn:active,
button[type="submit"]:active,
input[type="submit"]:active {
    transform: scale(0.98);
}

.layui-btn-normal,
.layui-btn-primary:hover,
.pear-btn-primary,
.pear-btn-success,
.btn-primary,
.am-btn-primary,
button[type="submit"],
input[type="submit"] {
    border-color: var(--ios-blue) !important;
    background: var(--ios-blue) !important;
    color: #ffffff !important;
}

.layui-btn-normal:hover,
.pear-btn-primary:hover,
.pear-btn-success:hover,
.btn-primary:hover,
.am-btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    border-color: var(--ios-blue-hover) !important;
    background: var(--ios-blue-hover) !important;
}

.layui-btn-primary,
.pear-btn-secondary,
.btn-secondary,
.am-btn-default {
    border-color: var(--ios-separator) !important;
    background: var(--ios-surface) !important;
    color: var(--ios-label) !important;
}

.layui-btn-danger,
.pear-btn-danger,
.btn-danger,
.am-btn-danger {
    border-color: var(--ios-red) !important;
    background: var(--ios-red) !important;
    color: #ffffff !important;
}

.layui-btn-warm,
.pear-btn-warning,
.btn-warning,
.am-btn-warning {
    border-color: var(--ios-orange) !important;
    background: var(--ios-orange) !important;
    color: #ffffff !important;
}

.layui-btn-disabled,
.layui-btn-disabled:hover,
.pear-btn[disabled],
.btn:disabled,
button:disabled,
input:disabled {
    cursor: not-allowed !important;
    opacity: 0.45 !important;
    transform: none !important;
}

.layui-btn-sm,
.pear-btn-sm,
.btn-sm {
    min-height: 30px;
    padding: 0 12px;
    font-size: 13px !important;
    line-height: 28px;
}

.layui-input,
.layui-textarea,
.layui-select,
.form-control,
.am-form-field,
.select2-selection,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
select,
textarea {
    border: 1px solid var(--ios-separator-strong) !important;
    border-radius: var(--ios-control-radius) !important;
    background: var(--ios-surface) !important;
    box-shadow: none !important;
    color: var(--ios-label) !important;
    font-size: 14px !important;
    caret-color: var(--ios-blue);
    transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.layui-input,
.layui-select,
.form-control,
.am-form-field,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
select {
    min-height: 38px;
}

.layui-textarea,
textarea {
    min-height: 92px;
    padding: 10px 12px !important;
    resize: vertical;
}

.layui-input:focus,
.layui-textarea:focus,
.form-control:focus,
.am-form-field:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--ios-blue) !important;
    box-shadow: 0 0 0 3px var(--ios-focus) !important;
    outline: 0 !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--ios-tertiary-label) !important;
    opacity: 1;
}

.layui-form-label,
.col-form-label,
.am-form-label,
label {
    color: var(--ios-secondary-label);
    font-weight: 500;
}

.layui-form-item {
    margin-bottom: 18px;
}

.layui-form-switch {
    width: 46px !important;
    min-width: 46px;
    height: 26px !important;
    margin-top: 6px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 13px !important;
    background: #d1d1d6 !important;
    line-height: 26px !important;
}

.layui-form-switch i {
    top: 2px !important;
    left: 2px !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22) !important;
}

.layui-form-onswitch {
    background: var(--ios-green) !important;
}

.layui-form-onswitch i {
    left: 22px !important;
}

.layui-form-checkbox[lay-skin="primary"] i,
.layui-form-radio > i {
    border-color: var(--ios-separator-strong) !important;
}

.layui-form-checked[lay-skin="primary"] i,
.layui-form-radioed > i {
    border-color: var(--ios-blue) !important;
    background: var(--ios-blue) !important;
    color: #ffffff !important;
}

/* Surfaces and data */
.layui-card,
.pear-card,
.card,
.am-panel,
.panel,
.main-r-content,
.layui-panel {
    border: 1px solid var(--ios-separator) !important;
    border-radius: var(--ios-radius) !important;
    background: var(--ios-surface) !important;
    box-shadow: var(--ios-shadow) !important;
}

.layui-card-header,
.pear-card-header,
.card-header,
.am-panel-hd,
.panel-heading {
    min-height: 48px;
    border-bottom: 1px solid var(--ios-separator) !important;
    background: transparent !important;
    color: var(--ios-label) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 48px;
}

.layui-card-body,
.pear-card-body,
.card-body,
.am-panel-bd,
.panel-body {
    color: var(--ios-label);
}

.pear-container,
.layui-container,
.layui-fluid {
    color: var(--ios-label);
}

.pear-container,
.layui-fluid {
    padding: 16px !important;
}

.layui-table,
.pear-table,
.table,
.am-table {
    border-color: var(--ios-separator) !important;
    background: var(--ios-surface) !important;
    color: var(--ios-label) !important;
    font-size: 13px !important;
}

.layui-table th,
.pear-table th,
.table th,
.am-table th,
.layui-table-header {
    border-color: var(--ios-separator) !important;
    background: var(--ios-surface-muted) !important;
    color: var(--ios-secondary-label) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.layui-table td,
.pear-table td,
.table td,
.am-table td,
.layui-table-cell {
    border-color: var(--ios-separator) !important;
}

.layui-table tbody tr:hover,
.pear-table tbody tr:hover,
.table-hover tbody tr:hover,
.am-table-hover tbody tr:hover,
.layui-table-hover {
    background: rgba(0, 122, 255, 0.055) !important;
}

.layui-table-page,
.layui-table-tool,
.layui-table-total {
    border-color: var(--ios-separator) !important;
    background: var(--ios-surface) !important;
}

.layui-laypage a,
.layui-laypage span,
.pagination .page-link,
.pagination li a,
.pagination li span {
    min-width: 32px;
    height: 32px !important;
    margin: 0 2px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--ios-secondary-label) !important;
    line-height: 32px !important;
    text-align: center;
}

.layui-laypage .layui-laypage-curr .layui-laypage-em,
.pagination .active .page-link,
.pagination li.active a,
.pagination li.active span {
    border-radius: 8px !important;
    background: var(--ios-blue) !important;
}

.layui-laypage .layui-laypage-curr em,
.pagination .active .page-link,
.pagination li.active a,
.pagination li.active span {
    color: #ffffff !important;
}

.layui-tab-title,
.nav-tabs {
    border-bottom: 1px solid var(--ios-separator) !important;
}

.layui-tab-title li,
.nav-tabs .nav-link {
    color: var(--ios-secondary-label) !important;
    font-size: 14px;
    font-weight: 500;
}

.layui-tab-title .layui-this,
.nav-tabs .nav-link.active {
    border-color: var(--ios-blue) !important;
    background: transparent !important;
    color: var(--ios-blue) !important;
    font-weight: 600;
}

.layui-tab-title .layui-this::after {
    border-color: transparent transparent var(--ios-blue) !important;
}

.layui-badge,
.layui-badge-dot,
.badge,
.wc__badge {
    background: var(--ios-red) !important;
    color: #ffffff !important;
}

.layui-bg-green,
.badge-success {
    background: var(--ios-green) !important;
}

.layui-bg-orange,
.badge-warning {
    background: var(--ios-orange) !important;
}

/* Popovers, menus and feedback */
.layui-layer {
    overflow: hidden;
    border: 1px solid var(--ios-separator) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18) !important;
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
}

.layui-layer-title {
    height: 48px !important;
    border-bottom: 1px solid var(--ios-separator) !important;
    background: transparent !important;
    color: var(--ios-label) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 48px !important;
}

.layui-layer-content {
    color: var(--ios-label) !important;
}

.layui-layer-btn {
    border-top: 1px solid var(--ios-separator);
    padding: 10px 12px !important;
}

.layui-layer-btn a {
    min-width: 72px;
    height: 34px !important;
    border: 1px solid var(--ios-separator) !important;
    border-radius: 8px !important;
    background: var(--ios-surface) !important;
    color: var(--ios-blue) !important;
    font-weight: 600;
    line-height: 32px !important;
}

.layui-layer-btn .layui-layer-btn0 {
    border-color: var(--ios-blue) !important;
    background: var(--ios-blue) !important;
    color: #ffffff !important;
}

.layui-layer-dialog .layui-layer-content,
.layui-layer-msg {
    font-size: 14px !important;
}

.layui-nav-child,
.dropdown-menu,
.select2-dropdown,
.am-dropdown-content {
    overflow: hidden;
    border: 1px solid var(--ios-separator) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: var(--ios-shadow) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
}

.layui-nav-child a,
.dropdown-item,
.select2-results__option,
.am-dropdown-content a {
    color: var(--ios-label) !important;
}

.layui-nav-child a:hover,
.dropdown-item:hover,
.select2-results__option--highlighted,
.am-dropdown-content a:hover {
    background: rgba(0, 122, 255, 0.08) !important;
    color: var(--ios-blue) !important;
}

.layui-progress {
    overflow: hidden;
    border-radius: 8px !important;
    background: var(--ios-fill) !important;
}

.layui-progress-bar {
    background: var(--ios-blue) !important;
}

.swal2-popup,
.swal-popup {
    border: 1px solid var(--ios-separator) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18) !important;
}

.swal2-title,
.swal-title {
    color: var(--ios-label) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.swal2-confirm,
.swal-confirm,
.swal2-cancel,
.swal-cancel {
    min-height: 40px !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.swal2-confirm,
.swal-confirm {
    background: var(--ios-blue) !important;
    color: #ffffff !important;
}

.swal2-cancel,
.swal-cancel {
    background: var(--ios-fill) !important;
    color: var(--ios-label) !important;
}

/* Pear desktop shell */
.pear-admin {
    background: var(--ios-background) !important;
}

.pear-admin .layui-header {
    left: 230px !important;
    width: calc(100% - 230px) !important;
    height: 60px !important;
    border-bottom: 1px solid var(--ios-separator) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
}

.pear-admin .layui-logo {
    width: 230px !important;
    height: 60px !important;
    border-right: 1px solid var(--ios-separator) !important;
    border-bottom: 1px solid var(--ios-separator) !important;
    background: rgba(248, 248, 250, 0.96) !important;
    color: var(--ios-label) !important;
    line-height: 60px !important;
}

.pear-admin .layui-logo .title,
.pear-admin .layui-logo div {
    color: var(--ios-label) !important;
    font-size: 16px !important;
    font-weight: 650 !important;
}

.pear-admin .layui-side,
.pear-admin .layui-side-scroll {
    width: 230px !important;
    background: rgba(248, 248, 250, 0.98) !important;
    box-shadow: none !important;
}

.pear-admin .layui-side {
    border-right: 1px solid var(--ios-separator) !important;
}

.pear-admin .layui-side-scroll {
    padding: 10px 8px 18px;
}

.pear-admin .layui-nav-tree,
.pear-admin .layui-nav-tree .layui-nav-item,
.pear-admin .layui-nav-tree .layui-nav-itemed,
.pear-admin .layui-nav-tree .layui-nav-child {
    background: transparent !important;
}

.pear-admin .layui-nav-tree .layui-nav-item > a,
.pear-admin .layui-nav-tree .layui-nav-child a {
    min-height: 42px;
    margin: 2px 0;
    padding-right: 14px;
    border-radius: 8px;
    color: var(--ios-secondary-label) !important;
    font-size: 14px;
    line-height: 42px;
}

.pear-admin .layui-nav-tree .layui-nav-item > a:hover,
.pear-admin .layui-nav-tree .layui-nav-child a:hover {
    background: rgba(0, 122, 255, 0.075) !important;
    color: var(--ios-blue) !important;
}

.pear-admin .layui-nav-tree .layui-this > a,
.pear-admin .layui-nav-tree .layui-nav-itemed > a,
.pear-admin .layui-nav-tree .layui-nav-child .layui-this > a {
    background: rgba(0, 122, 255, 0.12) !important;
    color: var(--ios-blue) !important;
    font-weight: 600;
}

.pear-admin .layui-nav-tree .layui-this::after {
    display: none;
}

.pear-admin .layui-header .layui-nav,
.pear-admin .layui-header .layui-nav-item,
.pear-admin .layui-header .layui-nav-item > a {
    height: 60px !important;
    background: transparent !important;
    line-height: 60px !important;
}

.pear-admin .layui-header .layui-nav-item > a,
.pear-admin .layui-header .layui-icon {
    color: var(--ios-secondary-label) !important;
}

.pear-admin .layui-header .layui-nav-item > a:hover,
.pear-admin .layui-header .layui-icon:hover {
    color: var(--ios-blue) !important;
}

.pear-admin .layui-body {
    left: 230px !important;
    top: 60px !important;
    background: var(--ios-background) !important;
}

.pear-mini .layui-header {
    left: 60px !important;
    width: calc(100% - 60px) !important;
}

.pear-mini .layui-logo,
.pear-mini .layui-side,
.pear-mini .layui-side-scroll {
    width: 60px !important;
}

.pear-mini .layui-body {
    left: 60px !important;
}

.pear-collasped-pe {
    width: 42px !important;
    height: 42px !important;
    border: 1px solid var(--ios-separator) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: var(--ios-shadow) !important;
    line-height: 42px !important;
}

.pear-collasped-pe a {
    color: var(--ios-blue) !important;
}

/* Chat workspaces */
.chatbox-name,
.chatbox-name .chatbox-info,
.chat-record-search,
.all_content .layui-tab-content {
    border-color: var(--ios-separator) !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--ios-label) !important;
}

.chatbox-name,
.chatbox-name .chatbox-info {
    height: 56px !important;
    line-height: 56px !important;
}

.chat-record-search {
    min-height: 52px;
    padding: 8px 10px !important;
}

.chat-search-input-wrap,
.search-input,
.search > input {
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: var(--ios-fill) !important;
}

.chat-search-input-wrap:focus-within {
    border-color: var(--ios-blue) !important;
    box-shadow: 0 0 0 3px var(--ios-focus);
}

.visiter,
.chat-search-result,
.wc__recordChat-list ul li {
    border-color: var(--ios-separator) !important;
    background: var(--ios-surface) !important;
    transition: background-color 150ms ease;
}

.visiter:hover,
.chat-search-result:hover,
.chat-search-result.active,
.wc__recordChat-list ul li:active {
    background: rgba(0, 122, 255, 0.07) !important;
}

.visit_content.selected,
.visiter.active,
.chat-search-result.active {
    box-shadow: inset 3px 0 0 var(--ios-blue);
}

.v-avatar,
.w-avatar,
.chat-search-avatar,
.layui-nav-img,
.my-circle {
    object-fit: cover;
}

.conversation,
.chatmsg,
.chatmsg_no {
    color: var(--ios-label);
}

.conversation {
    background: var(--ios-background) !important;
}

.conversation .customer,
.conversation .service,
.chatmsg .customer,
.chatmsg .service,
.chatmsg_no .customer,
.chatmsg_no .service {
    max-width: min(76%, 560px) !important;
    margin-top: 6px !important;
    padding: 9px 13px !important;
    border-radius: 17px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    word-break: break-word;
}

.ios-visitor-ui .customer,
.ios-visitor-ui .conversation .customer,
.workarea .conversation .customer,
.dialog .conversation .customer {
    border: 1px solid var(--ios-blue) !important;
    background: var(--ios-blue) !important;
    color: #ffffff !important;
}

.ios-visitor-ui .service,
.ios-visitor-ui .conversation .service,
.workarea .conversation .service,
.dialog .conversation .service {
    border: 1px solid var(--ios-separator) !important;
    background: var(--ios-surface) !important;
    color: var(--ios-label) !important;
}

.ios-agent-ui .service,
.ios-agent-ui .conversation .service,
.chatbox .conversation .service,
.chatbox .chatmsg .service {
    border: 1px solid var(--ios-blue) !important;
    background: var(--ios-blue) !important;
    color: #ffffff !important;
}

.ios-agent-ui .customer,
.ios-agent-ui .conversation .customer,
.chatbox .conversation .customer,
.chatbox .chatmsg .customer {
    border: 1px solid var(--ios-separator) !important;
    background: var(--ios-surface) !important;
    color: var(--ios-label) !important;
}

.outer-right::before,
.outer-left::before,
.outer-right > i,
.outer-left > i {
    display: none !important;
}

.showtime,
.service-name,
.chat-search-meta,
.wait_name,
.c_name {
    color: var(--ios-tertiary-label) !important;
}

.ios-visitor-ui .footer,
.ios-agent-ui .footer,
.chatbox .footer,
.dialog .footer,
.msg-input,
.msg-toolbar,
.tool_box,
.toolbar-box,
.foot_msg,
.foot_msg1 {
    border-color: var(--ios-separator) !important;
    background: rgba(255, 255, 255, 0.96) !important;
}

.msg-input,
.input-box {
    color: var(--ios-label) !important;
}

.msg-toolbar-footer,
.msg-toolbar-footer .msg-send-btn,
.msg-toolbar-footer .showinfo,
.send-btn,
.btn-send {
    border-color: var(--ios-blue) !important;
    background: var(--ios-blue) !important;
    color: #ffffff !important;
}

.msg-toolbar-footer {
    overflow: hidden;
    border-radius: 8px !important;
}

.tool_box,
.wl_faces_content,
.fuceng-li,
.group-list {
    border: 1px solid var(--ios-separator) !important;
    border-radius: 8px !important;
    background: var(--ios-surface) !important;
    box-shadow: var(--ios-shadow) !important;
}

.fuceng-li:hover,
.fuceng-li.selected-li,
.group-item:active {
    background: rgba(0, 122, 255, 0.08) !important;
    color: var(--ios-blue) !important;
}

/* Mobile agent and visitor UI */
.wechat__panel,
.wc__home-wrapper {
    background: var(--ios-background) !important;
    color: var(--ios-label);
    min-height: 100vh;
    min-height: 100dvh;
}

.wc__headerBar .inner,
.wc__headerBar .inner.wc__theme01 {
    border-bottom: 1px solid var(--ios-separator) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
}

.wc__headerBar .inner .barTit,
.wc__headerBar .inner .barTxt,
.wc__headerBar .inner .barTitLg {
    color: var(--ios-label) !important;
    font-weight: 600;
}

.wc__headerBar .inner .back,
.wc__headerBar .inner .close {
    filter: invert(1);
}

.wechat__tabBar,
.wechat__tabBar ul {
    border-top: 1px solid var(--ios-separator) !important;
    background: rgba(255, 255, 255, 0.92) !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
}

.wechat__tabBar ul li span,
.wechat__tabBar ul li p {
    color: var(--ios-tertiary-label) !important;
    font-size: 11px !important;
}

.wechat__tabBar ul li.swiper-pagination-bullet-active span,
.wechat__tabBar ul li.swiper-pagination-bullet-active p {
    color: var(--ios-blue) !important;
}

.wc__recordChat-list,
.wc__ucenter-list,
.wc__chatMsg-panel {
    background: var(--ios-background) !important;
}

.wc__ucenter-list ul,
.wc__recordChat-list ul {
    background: var(--ios-surface) !important;
}

.wc__ucenter-list ul li,
.wc__ucenter-list ul li .item,
.wc__recordChat-list ul li {
    border-color: var(--ios-separator) !important;
    color: var(--ios-label) !important;
}

.wc__ucenter-list ul li .item::after,
.wc__recordChat-list ul li::after,
.wc__borT::before,
.wc__borB::after {
    border-color: var(--ios-separator) !important;
    color: var(--ios-separator) !important;
}

.wc__ucenter-list ul li .item.quit {
    border: 1px solid rgba(255, 59, 48, 0.26) !important;
    background: rgba(255, 59, 48, 0.07) !important;
}

.wc__ucenter-list ul li .item.quit span {
    color: var(--ios-red) !important;
    font-weight: 600;
}

.wc__footer,
.wc__chatMsg-panel .footer,
.ios-mobile-composer {
    padding-bottom: env(safe-area-inset-bottom);
}

/* Platform and Bootstrap screens */
.navbar {
    border-bottom: 1px solid var(--ios-separator) !important;
    background-color: rgba(255, 255, 255, 0.92) !important;
    background-image: none !important;
    color: var(--ios-label) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: saturate(180%) blur(18px);
    backdrop-filter: saturate(180%) blur(18px);
}

.navbar .navbar-brand,
.navbar .nav-link,
.navbar .nav-text,
.navbar .menu-item {
    color: var(--ios-secondary-label) !important;
}

.navbar .nav-link:hover,
.navbar .menu-item:hover,
.navbar .menu-item.active {
    color: var(--ios-blue) !important;
}

.navbar .menu-item.active {
    border-color: var(--ios-blue) !important;
}

.child-menu {
    border: 1px solid var(--ios-separator) !important;
    border-radius: 8px !important;
    background: var(--ios-surface) !important;
    box-shadow: var(--ios-shadow) !important;
}

.child-menu a {
    color: var(--ios-secondary-label) !important;
}

.child-menu .active {
    background: rgba(0, 122, 255, 0.08) !important;
    color: var(--ios-blue) !important;
}

.modal-content {
    overflow: hidden;
    border: 1px solid var(--ios-separator) !important;
    border-radius: 8px !important;
    background: var(--ios-surface) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18) !important;
}

.modal-header,
.modal-footer {
    border-color: var(--ios-separator) !important;
}

/* Legacy manager shell */
.ios-manager-ui {
    background: var(--ios-background) !important;
    color: var(--ios-label);
}

.ios-manager-ui #layout-west {
    border-right: 1px solid var(--ios-separator);
    background: var(--ios-surface-muted) !important;
    box-shadow: none !important;
}

.ios-manager-ui #layout-menus,
.ios-manager-ui #layout-menus-lists,
.ios-manager-ui #layout-menus-lists ul,
.ios-manager-ui #layout-menus-lists li,
.ios-manager-ui #layout-menus-lists .sub-menus,
.ios-manager-ui #layout-menus-lists .sub-menus li {
    background: transparent !important;
}

.ios-manager-ui #layout-menus-info {
    border-bottom: 1px solid var(--ios-separator);
    background: transparent !important;
}

.ios-manager-ui #layout-menus-info .info {
    color: var(--ios-label) !important;
}

.ios-manager-ui #layout-menus-lists {
    padding: 8px;
}

.ios-manager-ui #layout-menus-lists li {
    margin: 2px 0;
    border: 0 !important;
    border-radius: 8px;
}

.ios-manager-ui #layout-menus-lists a {
    border-radius: 8px;
    color: var(--ios-secondary-label) !important;
}

.ios-manager-ui #layout-menus-lists li:hover,
.ios-manager-ui #layout-menus-lists li.am-active,
.ios-manager-ui #layout-menus-lists li[style*="background"] {
    border-left: 0 !important;
    background: rgba(0, 122, 255, 0.1) !important;
}

.ios-manager-ui #layout-menus-lists li:hover > a,
.ios-manager-ui #layout-menus-lists li.am-active > a,
.ios-manager-ui #layout-menus-lists li[style*="background"] > a {
    color: var(--ios-blue) !important;
    font-weight: 600;
}

.ios-manager-ui #layout-center,
.ios-manager-ui #layout-main,
.ios-manager-ui .main-r {
    background: var(--ios-background) !important;
}

.ios-manager-ui #location {
    border-bottom: 1px solid var(--ios-separator) !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: none !important;
}

/* Authentication screens */
.ios-form-ui {
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--ios-background) !important;
}

.ios-form-ui #app,
.ios-form-ui .opacity {
    min-height: 100vh;
    min-height: 100dvh;
    background: transparent !important;
}

.ios-form-ui .login-card {
    width: min(390px, calc(100% - 32px)) !important;
    overflow: hidden;
    border: 1px solid var(--ios-separator) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12) !important;
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
}

.ios-form-ui .login-img,
.ios-form-ui .login-form {
    background-color: transparent !important;
    background-image: none !important;
}

.ios-form-ui .form-title {
    color: var(--ios-label) !important;
    font-weight: 700;
}

.ios-form-ui .login-form a {
    color: var(--ios-blue) !important;
}

.ios-form-ui .username,
.ios-form-ui .password,
.ios-form-ui .captcha_code {
    height: 40px !important;
    padding: 0 12px !important;
    border: 1px solid var(--ios-separator-strong) !important;
    border-radius: 8px !important;
    background: var(--ios-surface) !important;
}

.ios-form-ui button.login {
    height: 40px !important;
    border-radius: 8px !important;
    background: var(--ios-blue) !important;
    box-shadow: none !important;
}

.login-main,
.layadmin-user-login-main,
body[background] > .layui-form,
.card.login {
    border: 1px solid var(--ios-separator) !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.12) !important;
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
}

.login-main .login-top,
.login-main .login-bottom,
.layadmin-user-login-box,
.card.login .card-body {
    background: transparent !important;
}

.login-main .login-top,
.layadmin-user-login-header,
body[background] > .layui-form .title,
.card.login h1,
.card.login h2 {
    color: var(--ios-label) !important;
    font-weight: 700 !important;
}

.login-main .login-bottom .btn,
.layadmin-user-login-body .layui-btn,
body[background] > .layui-form button,
.card.login .btn-primary {
    border-color: var(--ios-blue) !important;
    background: var(--ios-blue) !important;
    color: #ffffff !important;
}

/* Accessibility and compact layouts */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media screen and (max-width: 768px) {
    body {
        font-size: 14px;
    }

    .pear-admin .layui-header {
        left: 0 !important;
        width: 100% !important;
        padding-top: env(safe-area-inset-top);
    }

    .pear-admin .layui-side {
        top: 0 !important;
        padding-top: env(safe-area-inset-top);
    }

    .pear-admin .layui-body,
    .pear-mini .layui-body {
        left: 0 !important;
    }

    .pear-container,
    .layui-fluid {
        padding: 12px !important;
    }

    .wechat__panel input,
    .wechat__panel textarea,
    .ios-visitor-ui input,
    .ios-visitor-ui textarea,
    .ios-agent-ui input,
    .ios-agent-ui textarea {
        font-size: 16px !important;
    }

    .layui-form-label {
        float: none;
        width: auto !important;
        padding: 0 0 7px !important;
        text-align: left !important;
    }

    .layui-input-block,
    .layui-input-inline {
        width: 100% !important;
        margin-left: 0 !important;
    }

    .layui-layer {
        max-width: calc(100vw - 24px) !important;
    }

    .layui-card-body,
    .pear-card-body,
    .table-responsive,
    .layui-table-view {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .layui-card,
    .pear-card {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }

    .layui-card-body,
    .pear-card-body {
        width: 100%;
        min-width: 0;
    }

    .layui-card-body > .layui-table,
    .pear-card-body > .layui-table,
    .table-responsive > .table {
        min-width: 620px;
    }

    .conversation .customer,
    .conversation .service,
    .chatmsg .customer,
    .chatmsg .service {
        max-width: 82% !important;
    }

    .login-main,
    .layadmin-user-login-main,
    body[background] > .layui-form,
    .card.login {
        width: calc(100% - 32px) !important;
        max-width: 420px;
        margin-right: auto !important;
        margin-left: auto !important;
    }

    .wechat__tabBar {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

@supports (padding: max(0px)) {
    .ios-visitor-ui .footer,
    .ios-agent-ui .footer,
    .wechat__tabBar,
    .wc__footer {
        padding-bottom: max(env(safe-area-inset-bottom), 8px);
    }
}