#dwr-chat-widget {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 99999;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      }

      #dwr-chat-toggle {
        background: linear-gradient(160deg, #2f90da 0%, #14487e 100%);
        color: #fff;
        border: none;
        border-radius: 50%;
        width: 60px;
        height: 60px;
        font-size: 24px;
        cursor: pointer;
        box-shadow: 0 6px 18px rgba(20, 72, 126, 0.45);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s;
      }

      #dwr-chat-toggle:hover {
        transform: scale(1.05);
      }

      #dwr-chat-toggle img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%;
        display: block;
      }

      #dwr-chat-box {
        display: none;
        width: 350px;
        height: 500px;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2);
        flex-direction: column;
        overflow: hidden;
        position: absolute;
        bottom: 80px;
        right: 0;
      }

      #dwr-chat-box.open {
        display: flex;
      }

      .dwr-chat-header {
        background: #1a5276;
        color: #fff;
        padding: 15px;
        display: flex;
        align-items: center;
        gap: 10px;
      }

      .dwr-chat-header img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
      }

      .dwr-chat-header-info {
        flex: 1;
      }

      .dwr-chat-header-info h4 {
        margin: 0;
        font-size: 16px;
        color: #fff;
      }

      .dwr-chat-header-info span {
        font-size: 12px;
        color: #a9cce3;
      }

      .dwr-chat-close {
        background: none;
        border: none;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
      }

      .dwr-chat-messages {
        flex: 1;
        padding: 15px;
        overflow-y: auto;
        background: #f0f2f5;
        display: flex;
        flex-direction: column;
        gap: 10px;
      }

      .dwr-chat-action {
        background: none;
        border: none;
        color: #fff;
        cursor: pointer;
        padding: 4px;
        opacity: 0.8;
      }

      .dwr-chat-action:hover {
        opacity: 1;
      }

      .dwr-msg-wrapper {
        display: flex;
        flex-direction: column;
        max-width: 80%;
      }

      .dwr-msg-wrapper.bot {
        align-self: flex-start;
      }

      .dwr-msg-wrapper.user {
        align-self: flex-end;
        align-items: flex-end;
      }

      .dwr-msg-time {
        font-size: 10px;
        color: #999;
        margin-top: 4px;
        margin-bottom: 2px;
      }

      .dwr-msg {
        padding: 10px 14px;
        border-radius: 14px;
        font-size: 14px;
        line-height: 1.4;
        word-wrap: break-word;
      }

      .dwr-msg.bot {
        background: #fff;
        color: #333;
        border-bottom-left-radius: 4px;
        border: 1px solid #e1e8ed;
      }

      .dwr-msg.user {
        background: #1a5276;
        color: #fff;
        border-bottom-right-radius: 4px;
      }

      .dwr-typing-indicator {
        display: flex;
        gap: 4px;
        padding: 12px 16px;
        background: #fff;
        border: 1px solid #e1e8ed;
        border-radius: 14px;
        align-self: flex-start;
        border-bottom-left-radius: 4px;
        width: auto;
        margin-bottom: 10px;
      }

      .dwr-typing-indicator span {
        width: 6px;
        height: 6px;
        background-color: #999;
        border-radius: 50%;
        animation: dwr-typing 1.4s infinite ease-in-out both;
      }

      .dwr-typing-indicator span:nth-child(1) {
        animation-delay: -0.32s;
      }

      .dwr-typing-indicator span:nth-child(2) {
        animation-delay: -0.16s;
      }

      @keyframes dwr-typing {

        0%,
        80%,
        100% {
          transform: scale(0);
        }

        40% {
          transform: scale(1);
        }
      }

      .dwr-quick-replies {
        display: flex;
        gap: 8px;
        padding: 0 15px 15px 15px;
        flex-wrap: wrap;
        background: #f0f2f5;
      }

      .dwr-quick-replies button {
        background: #fff;
        border: 1px solid #1a5276;
        color: #1a5276;
        padding: 6px 12px;
        border-radius: 12px;
        font-size: 12px;
        cursor: pointer;
        transition: all 0.2s;
      }

      .dwr-quick-replies button:hover {
        background: #1a5276;
        color: #fff;
      }

      .dwr-chat-input-area {
        padding: 15px;
        background: #fff;
        border-top: 1px solid #e1e8ed;
        display: flex;
        gap: 10px;
        align-items: center;
      }

      .dwr-chat-attach {
        cursor: pointer;
        padding: 8px;
        color: #1a5276;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.2s;
      }

      .dwr-chat-attach:hover {
        opacity: 0.8;
      }

      .dwr-chat-input-area input[type="text"] {
        flex: 1;
        padding: 10px 15px;
        border: 1px solid #ccd0d4;
        border-radius: 20px;
        outline: none;
        transition: border-color 0.2s;
        font-family: inherit;
        font-size: 14px;
      }

      .dwr-chat-input-area input[type="text"]:focus {
        border-color: #1a5276;
      }

      .dwr-chat-input-area button {
        background: #1a5276;
        color: #fff;
        border: none;
        padding: 10px 20px;
        border-radius: 20px;
        cursor: pointer;
        font-weight: bold;
        font-family: inherit;
        font-size: 14px;
        transition: background 0.2s;
      }

      .dwr-chat-input-area button:hover {
        background: #154360;
      }

      @media (max-width: 480px) {
        #dwr-chat-box {
          width: calc(100vw - 40px);
          height: calc(100vh - 120px);
          position: fixed;
          bottom: 100px;
          right: 20px;
        }
      }

      /* === Status badge in header === */
      .dwr-status-badge {
        display: inline-block;
        font-size: 10px;
        font-weight: 600;
        padding: 2px 7px;
        border-radius: 10px;
        margin-left: 6px;
        vertical-align: middle;
        line-height: 1.4;
        letter-spacing: 0.02em;
      }
      .dwr-status-badge.dwr-status-bot {
        background: rgba(255, 255, 255, 0.18);
        color: #d6eaff;
      }
      .dwr-status-badge.dwr-status-waiting {
        background: rgba(255, 200, 0, 0.25);
        color: #ffe18a;
      }
      .dwr-status-badge.dwr-status-human {
        background: rgba(0, 200, 100, 0.25);
        color: #b9f5d3;
      }

      /* === Handoff icon button (header) === */
      .dwr-chat-handoff {
        position: relative;
      }
      .dwr-chat-handoff[disabled],
      .dwr-chat-handoff.dwr-handoff-hidden {
        display: none !important;
      }

      /* === System message bubble (centered) === */
      .dwr-msg-wrapper.system {
        align-items: center !important;
        text-align: center;
        margin: 8px auto;
      }
      .dwr-msg.system {
        background: #fff8e1;
        color: #6b5800;
        border: 1px dashed #f0c040;
        border-radius: 12px;
        padding: 6px 12px;
        font-size: 12px;
        max-width: 85%;
        display: inline-block;
        line-height: 1.5;
      }
      .dwr-msg-wrapper.system .dwr-msg-time {
        text-align: center;
      }

      /* ═══════════════════════════════════════════════════════════════
         WCAG 2.1 Level AAA — contrast-only fixes.
         (The universal :focus-visible rule lives in dwr-shared/
          assets/css/dwr-frontend-theme.css and applies via the
          #dwr-chat-widget scope already declared there.)
         ─────────────────────────────────────────────────────────────── */
      /* Header subtitle was #a9cce3 (1.6:1 — FAIL).
         Promote to #d6e8f3 = 7.1:1 on #1a5276 = AAA. */
      #dwr-chat-header .dwr-chat-status,
      #dwr-chat-header small {
        color: #d6e8f3 !important;
      }
      /* Timestamps were #999 (2.85:1 — FAIL).
         #4a4a4a = 9.0:1 on white = AAA. */
      .dwr-msg-time,
      .dwr-msg-meta {
        color: #4a4a4a !important;
        font-size: 13px !important;
        font-weight: 500 !important;
      }
      /* Placeholder #999 (FAIL) → #5e5e5e (7.0:1 = AAA), opacity:1 for Firefox. */
      #dwr-chat-input::placeholder,
      input.dwr-chat-input::placeholder {
        color: #5e5e5e !important;
        opacity: 1 !important;
      }