.message-widget {
      position: fixed;
      left: 24px;
      bottom: 24px;
      width: 340px;
      max-width: calc(100vw - 48px);
      background: #ffffff;
      border-radius: 24px;
      box-shadow: 0 20px 48px -8px rgba(0, 20, 30, 0.35), 
                  0 8px 16px -6px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(2px);
      z-index: 9999;
      overflow: hidden;

      /* 初始状态：隐藏（在屏幕下方） */
      opacity: 0;
      transform: translateY(60px) scale(0.96);
      pointer-events: none;
      transition: none; /* 初始无过渡，由动画控制 */
    }

    /* 入场动画：从下往上慢慢出现 */
    .message-widget.show {
      animation: slideUpIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
      pointer-events: auto;
    }

    /* 关闭状态：向下滑出 */
    .message-widget.closed {
      animation: slideDownOut 0.5s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
      pointer-events: none;
    }

    /* 从下往上滑入 */
    @keyframes slideUpIn {
      0% {
        opacity: 0;
        transform: translateY(60px) scale(0.96);
      }
      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    /* 向下滑出（关闭） */
    @keyframes slideDownOut {
      0% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
      100% {
        opacity: 0;
        transform: translateY(60px) scale(0.96);
      }
    }

    .widget-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 20px 8px 20px;
      background: transparent;
    }

    .widget-header h3 {
      font-size: 1.1rem;
      font-weight: 600;
      color: #0426a1;
      letter-spacing: -0.01em;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .widget-header h3::before {
      content: "💬";
      font-size: 1.3rem;
      line-height: 1;
    }

    .close-btn {
      background: #f0f4f8;
      border: none;
      width: 36px;
      height: 36px;
      border-radius: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      font-weight: 300;
      color: #0426a1;
      cursor: pointer;
      transition: background 0.2s, transform 0.15s;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
      line-height: 1;
      padding: 0;
    }

    .close-btn:hover {
      background: #e2eaf0;
      transform: scale(1.04);
    }

    .close-btn:active {
      transform: scale(0.94);
      background: #d0dbe4;
    }

    .widget-body {
      padding: 6px 20px 22px 20px;
    }

    .widget-body label {
      display: block;
      font-size: 0.85rem;
      font-weight: 500;
      color: #333;
      margin-bottom: 4px;
      letter-spacing: 0.02em;
    }

    .widget-body input,
    .widget-body textarea {
      width: 100%;
      padding: 12px 14px;
      margin-bottom: 16px;
      border: 1px solid #dedede;
      border-radius: 16px;
      font-size: 0.95rem;
      background: #f9fcfe;
      transition: border 0.2s, box-shadow 0.2s;
      outline: none;
      color: #666;
    }

    .widget-body input:focus,
    .widget-body textarea:focus {
      border-color: #4a8bb7;
      box-shadow: 0 0 0 4px rgba(70, 130, 180, 0.15);
      background: #ffffff;
    }

    .widget-body textarea {
      min-height: 82px;
      resize: vertical;
      font-family: inherit;
    }

    .widget-body .submit-btn {
      width: 100%;
      background: #0426a1;
      border: none;
      padding: 14px 18px;
      border-radius: 40px;
      font-size: 1rem;
      font-weight: 600;
      color: white;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
      box-shadow: 0 6px 14px rgba(26, 67, 99, 0.25);
      letter-spacing: 0.3px;
      margin-top: 4px;
    }

    .widget-body .submit-btn:hover {
      background: #0426a1;
      box-shadow: 0 8px 18px rgba(18, 58, 85, 0.3);
      transform: scale(1.01);

    }

    .widget-body .submit-btn:active {
      transform: scale(0.97);
      background: #0e2e44;
    }

    @media (max-width: 480px) {
      .message-widget {
        left: 16px;
        bottom: 16px;
        width: calc(100vw - 32px);
        border-radius: 20px;
      }

      .widget-header {
        padding: 14px 16px 4px 16px;
      }

      .widget-body {
        padding: 4px 16px 18px 16px;
      }
    }