/* Desktop refinement layer. Mobile/APK behavior remains owned by mobile.css. */
@media (min-width: 769px) and (pointer: fine) {
  :root {
    --desktop-primary: #1677d2;
    --desktop-primary-hover: #0f66b7;
    --desktop-primary-pressed: #0b579e;
    --desktop-ink: #16202d;
    --desktop-muted: #687586;
    --desktop-line: #dfe4eb;
    --desktop-line-strong: #cfd6df;
    --desktop-canvas: #f3f5f8;
    --desktop-surface: #ffffff;
    --desktop-surface-soft: #f8fafc;
    --desktop-hover: #eef3f8;
    --desktop-active: #e7f1fb;
    --desktop-focus: rgba(22, 119, 210, 0.2);
    --desktop-shadow-1: 0 1px 2px rgba(24, 39, 58, 0.06), 0 4px 12px rgba(24, 39, 58, 0.04);
    --desktop-shadow-2: 0 12px 32px rgba(24, 39, 58, 0.13), 0 3px 10px rgba(24, 39, 58, 0.07);
  }

  body {
    color: var(--desktop-ink);
    background: var(--desktop-canvas);
    font-family: "Segoe UI Variable", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    text-rendering: optimizeLegibility;
  }

  ::selection { color: #fff; background: rgba(22, 119, 210, 0.82); }
  ::-webkit-scrollbar { width: 8px; height: 8px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: #c4ccd6; border: 2px solid transparent; border-radius: 8px; background-clip: padding-box; }
  ::-webkit-scrollbar-thumb:hover { background: #aeb8c5; border: 2px solid transparent; background-clip: padding-box; }

  button,
  [role="button"] {
    letter-spacing: 0;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease,
      box-shadow 150ms ease, transform 100ms ease, opacity 150ms ease;
  }

  button:focus-visible,
  [role="button"]:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--desktop-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--desktop-focus);
  }

  button:active:not(:disabled),
  [role="button"]:active:not([aria-disabled="true"]) { transform: translateY(1px); }
  button:disabled,
  [aria-disabled="true"] { cursor: not-allowed; opacity: 0.52; }

  .btn-primary,
  .set-btn,
  .send-btn,
  .btn-mini {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #fff;
    background: var(--desktop-primary);
    border: 1px solid #0f69bc;
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(11, 87, 158, 0.18);
    font-weight: 600;
  }

  .btn-primary:hover:not(:disabled),
  .set-btn:hover:not(:disabled),
  .send-btn:hover:not(:disabled),
  .btn-mini:hover:not(:disabled) {
    background: var(--desktop-primary-hover);
    border-color: #0b5ca8;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 4px 10px rgba(11, 87, 158, 0.16);
  }

  .btn-primary:active:not(:disabled),
  .set-btn:active:not(:disabled),
  .send-btn:active:not(:disabled),
  .btn-mini:active:not(:disabled) { background: var(--desktop-primary-pressed); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.14); }

  .btn-secondary,
  .set-btn-line,
  .snip-btn,
  .fwd-actions button:not(.btn-primary) {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #344256;
    background: var(--desktop-surface);
    border: 1px solid var(--desktop-line-strong);
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(24, 39, 58, 0.05);
    font-weight: 550;
  }

  .btn-secondary:hover:not(:disabled),
  .set-btn-line:hover:not(:disabled),
  .snip-btn:hover:not(:disabled),
  .fwd-actions button:not(.btn-primary):hover:not(:disabled) {
    color: var(--desktop-primary);
    background: #f7fbff;
    border-color: #9fc4e7;
    box-shadow: 0 3px 9px rgba(24, 82, 132, 0.09);
  }

  .btn-danger {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #c73545;
    background: #fff;
    border: 1px solid #e2a7ae;
    border-radius: 7px;
    box-shadow: 0 1px 2px rgba(111, 28, 39, 0.04);
    font-weight: 600;
  }
  .btn-danger:hover:not(:disabled) { color: #a82332; background: #fff6f7; border-color: #d77a85; }

  .icon-btn,
  .tool-btn,
  .company-icon-button,
  .file-folder-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #435268;
    background: #f1f4f7;
    border: 1px solid transparent;
    border-radius: 7px;
  }
  .icon-btn:hover:not(:disabled),
  .tool-btn:hover:not(:disabled),
  .company-icon-button:hover:not(:disabled),
  .file-folder-btn:hover:not(:disabled) {
    color: var(--desktop-primary);
    background: #e8f1f9;
    border-color: #d5e5f3;
  }

  input:not([type="checkbox"]):not([type="radio"]),
  textarea,
  select,
  .search-box,
  .set-input {
    min-height: 36px;
    color: var(--desktop-ink);
    background: #fff;
    border: 1px solid var(--desktop-line-strong);
    border-radius: 7px;
    box-shadow: inset 0 1px 2px rgba(24, 39, 58, 0.035);
    transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
  }
  input:not([type="checkbox"]):not([type="radio"]):hover,
  textarea:hover,
  select:hover { border-color: #b8c3cf; }
  input:not([type="checkbox"]):not([type="radio"]):focus,
  textarea:focus,
  select:focus { border-color: var(--desktop-primary); box-shadow: 0 0 0 3px var(--desktop-focus); }

  .rail {
    width: 76px;
    padding: 16px 8px 12px;
    gap: 5px;
    background: #f9fbfd;
    border-right-color: var(--desktop-line);
    box-shadow: 1px 0 0 rgba(255, 255, 255, 0.8);
  }
  .rail .avatar { width: 42px; height: 42px; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 4px 12px rgba(22, 119, 210, 0.2); }
  .rail-item {
    width: 60px;
    height: 54px;
    border-radius: 8px;
    color: #667386;
    font-size: 11px;
    font-weight: 550;
    gap: 3px;
  }
  .rail-item .icon { display: inline-flex; font-size: 0; }
  .rail-item .icon svg { width: 21px; height: 21px; stroke-width: 1.9; }
  .rail-item:hover { color: #2f4055; background: var(--desktop-hover); }
  .rail-item.active { color: #0e68ba; background: var(--desktop-active); box-shadow: inset 3px 0 0 var(--desktop-primary); }

  .panel-list {
    width: 300px;
    background: #f6f8fa;
    border-right-color: var(--desktop-line);
  }
  .panel-list .head { min-height: 58px; padding: 12px 14px 10px; gap: 9px; }
  .search-box { padding: 8px 11px; background: #eef1f4; border-color: transparent; }
  .search-box:focus { background: #fff; }
  .section-title { padding: 13px 16px 7px; color: var(--desktop-muted); font-weight: 600; }

  .conv-item,
  .contact-item,
  .dept-head { margin: 2px 8px; border-radius: 7px; }
  .conv-item { padding: 10px 9px; }
  .conv-item:hover,
  .contact-item:hover,
  .dept-head:hover { background: #edf1f5; }
  .conv-item.active,
  .contact-item.active { background: #e2edf8; box-shadow: inset 3px 0 0 var(--desktop-primary); }
  .conv-item .name { color: #243044; font-weight: 550; }

  .main-area,
  .settings-wrap,
  .detail-pane { background: var(--desktop-surface); }
  .chat-header {
    height: 60px;
    padding: 0 22px;
    border-bottom-color: var(--desktop-line);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  }
  .chat-header .title { color: #172235; font-size: 17px; font-weight: 650; }
  .msg-list { padding: 22px 24px; gap: 16px; background: #fbfcfd; }
  .bubble { border: 1px solid rgba(30, 48, 70, 0.045); box-shadow: 0 1px 2px rgba(24, 39, 58, 0.035); }
  .input-area { padding: 9px 18px 14px; border-top-color: var(--desktop-line); box-shadow: 0 -2px 10px rgba(24, 39, 58, 0.025); }
  .input-row textarea { min-height: 70px; padding: 10px 12px; border-color: transparent; box-shadow: none; }
  .input-row textarea:focus { background: #fbfdff; border-color: #b9d6ef; }
  .send-btn { min-height: 38px; padding-inline: 22px; }

  .settings-nav { width: 236px; padding: 22px 14px; background: #f6f8fa; border-right-color: var(--desktop-line); }
  .settings-title { color: #182438; font-size: 19px; padding: 3px 12px 17px; }
  .set-nav-item { min-height: 40px; display: flex; align-items: center; padding: 9px 13px; border-radius: 7px; color: #4b586b; }
  .set-nav-item:hover { background: #edf1f5; }
  .set-nav-item.active { color: #0e68ba; background: #e3eef9; box-shadow: inset 3px 0 0 var(--desktop-primary); }
  .settings-main { padding: 34px 44px 48px; background: #fbfcfd; }
  .set-h { color: #172235; font-size: 20px; }
  .set-card {
    max-width: 640px;
    padding: 22px 24px;
    background: #fff;
    border-color: var(--desktop-line);
    border-radius: 8px;
    box-shadow: var(--desktop-shadow-1);
  }

  .work-area { background: var(--desktop-canvas); }
  .work-head { padding: 26px 30px 0; }
  .work-head h1 { color: #162236; font-size: 22px; }
  .module-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; padding: 20px 30px 30px; }
  .module-card {
    width: 100%;
    padding: 19px;
    color: inherit;
    text-align: left;
    border: 1px solid var(--desktop-line);
    border-radius: 8px;
    box-shadow: var(--desktop-shadow-1);
  }
  .module-card .icon {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #176db8;
    background: #eaf3fb;
    border: 1px solid #d4e6f5;
    border-radius: 8px;
  }
  .module-card .icon svg { width: 21px; height: 21px; stroke-width: 1.8; }
  .module-card-admin .icon { color: #536176; background: #f0f2f5; border-color: #dde2e8; }
  .module-card:hover { transform: translateY(-2px); border-color: #a9c8e5; box-shadow: 0 10px 24px rgba(24, 59, 94, 0.11); }
  .module-card h3 { color: #1c293d; font-size: 15px; }
  .module-card p { color: var(--desktop-muted); }
  .module-panel { max-width: 1120px; padding: 24px 30px 34px; }
  .module-panel .panel-head { min-height: 42px; margin-bottom: 17px; }
  .card {
    padding: 19px 20px;
    border: 1px solid var(--desktop-line);
    border-radius: 8px;
    box-shadow: var(--desktop-shadow-1);
  }
  .tabs { gap: 5px; padding: 3px; border: 1px solid var(--desktop-line); border-radius: 8px; background: #e9edf2; width: fit-content; }
  .tab { min-height: 34px; padding: 7px 15px; border-radius: 6px; color: #566477; background: transparent; font-weight: 550; }
  .tab:hover { color: #26364c; background: rgba(255, 255, 255, 0.62); }
  .tab.active { color: #164f82; background: #fff; box-shadow: 0 1px 4px rgba(24, 39, 58, 0.13); }
  .table { border: 1px solid var(--desktop-line); border-radius: 8px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
  .table th { padding: 10px 12px; color: #536174; background: #f5f7f9; font-weight: 650; }
  .table td { padding: 10px 12px; background: #fff; }
  .table tr:hover td { background: #f8fbfe; }

  #modal-container .mask { background: rgba(22, 31, 43, 0.42); backdrop-filter: blur(2px); }
  .modal { border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 8px; box-shadow: var(--desktop-shadow-2); }
  .modal h3 { color: #172235; font-size: 17px; }
  .toast { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 7px; box-shadow: 0 8px 24px rgba(20, 31, 45, 0.18); }

  .login-page { background: #e9edf3; }
  .login-card { border: 1px solid rgba(255, 255, 255, 0.9); border-radius: 8px; box-shadow: var(--desktop-shadow-2); }
  .login-card .btn-primary { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  button,
  [role="button"],
  .module-card { transition: none !important; }
}