#mi-widget { position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; align-items:flex-end; z-index:9999; pointer-events:none; box-sizing:border-box; }
  #mi-widget *, #mi-widget *::before, #mi-widget *::after { box-sizing:border-box; }
  #mi-chat { width:370px; max-width:calc(100vw - 32px); border-radius:18px; background:#fff; border:1px solid rgba(0,0,0,0.10); box-shadow:0 8px 40px rgba(0,0,0,0.18); display:flex; flex-direction:column; overflow:hidden; margin-bottom:14px; transition:opacity 0.25s ease, transform 0.25s ease; pointer-events:all; max-height:min(640px, calc(100vh - 110px)); max-height:min(640px, calc(100dvh - 110px)); }
  #mi-chat.hidden { opacity:0; pointer-events:none; transform:translateY(20px) scale(0.96); }
  .mi-header { background:#004B9B; padding:13px 16px; display:flex; align-items:center; gap:10px; flex-shrink:0; }
  .mi-header-logo { width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .mi-header-text { flex:1; }
  .mi-header-title { color:#fff; font-weight:500; font-size:14px; line-height:1.3; font-family:'DM Sans',sans-serif; }
  .mi-header-sub { color:rgba(255,255,255,0.6); font-size:11px; margin-top:1px; font-family:'DM Sans',sans-serif; }
  .mi-close-btn { background:none; border:none; cursor:pointer; color:rgba(255,255,255,0.65); font-size:20px; line-height:1; padding:4px 8px; border-radius:6px; transition:background 0.15s; }
  .mi-close-btn:hover { background:rgba(255,255,255,0.12); color:#fff; }
  #mi-welcome { background:#f7f8fa; padding:24px 20px 20px; display:flex; flex-direction:column; align-items:center; gap:14px; border-bottom:1px solid #ebebeb; flex-shrink:0; overflow-y:auto; }
  #mi-welcome.hidden { display:none; }
  .mi-welcome-icon { width:64px; height:64px; border-radius:50%; background:#004B9B; display:flex; align-items:center; justify-content:center; border:3px solid #F8991D; }
  .mi-welcome-icon svg { width:32px; height:32px; fill:#fff; }
  .mi-welcome-title { font-family:'Playfair Display',serif; font-size:17px; color:#004B9B; text-align:center; font-weight:600; }
  .mi-welcome-sub { font-size:13px; color:#666; text-align:center; line-height:1.55; max-width:280px; font-family:'DM Sans',sans-serif; }
  .mi-welcome-chips { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; width:100%; }
  .mi-welcome-chip { font-size:12px; padding:7px 14px; border-radius:20px; border:1.5px solid #004B9B; color:#004B9B; background:#fff; cursor:pointer; font-family:'DM Sans',sans-serif; transition:background 0.15s, color 0.15s, transform 0.1s; }
  .mi-welcome-chip:hover { background:#004B9B; color:#fff; transform:translateY(-1px); }
  .mi-start-btn { background:#F8991D; color:#fff; border:none; border-radius:22px; padding:10px 28px; font-size:13.5px; font-family:'DM Sans',sans-serif; font-weight:500; cursor:pointer; transition:background 0.15s, transform 0.1s; }
  .mi-start-btn:hover { background:#d97d0a; transform:translateY(-1px); }
  #mi-messages { flex:1 1 auto; overflow-y:auto; padding:14px 14px 8px; display:flex; flex-direction:column; gap:10px; min-height:180px; max-height:none; background:#f7f8fa; position:relative; -webkit-overflow-scrolling:touch; }
  #mi-messages.hidden { display:none; }
  #mi-messages::-webkit-scrollbar { width:4px; }
  #mi-messages::-webkit-scrollbar-thumb { background:#d0d0d0; border-radius:4px; }
  .mi-msg { display:flex; gap:8px; align-items:flex-end; }
  .mi-msg.user { flex-direction:row-reverse; }
  .mi-msg-col { display:flex; flex-direction:column; gap:4px; max-width:80%; }
  .mi-msg.user .mi-msg-col { align-items:flex-end; }
  .mi-avatar { width:28px; height:28px; border-radius:50%; flex-shrink:0; background:#004B9B; display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff; font-weight:600; font-family:'DM Sans',sans-serif; }
  .mi-msg.user .mi-avatar { background:#F8991D; }
  .mi-bubble-msg { padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.55; color:#1a1a1a; background:#fff; border:1px solid #e8e8e8; font-family:'DM Sans',sans-serif; }
  .mi-msg.user .mi-bubble-msg { background:#004B9B; color:#fff; border-color:#004B9B; }
  .mi-ts { font-size:10px; color:#bbb; padding:0 4px; font-family:'DM Sans',sans-serif; }
  .mi-feedback { display:flex; gap:6px; align-items:center; padding:0 2px; }
  .mi-fb-btn { background:none; border:1px solid #e0e0e0; border-radius:12px; padding:2px 8px; cursor:pointer; font-size:12px; color:#999; transition:all 0.15s; display:flex; align-items:center; gap:3px; font-family:'DM Sans',sans-serif; }
  .mi-fb-btn:hover { border-color:#004B9B; color:#004B9B; }
  .mi-fb-btn.active-up { background:#e6f0ff; border-color:#004B9B; color:#004B9B; }
  .mi-fb-btn.active-down { background:#fff4e0; border-color:#F8991D; color:#F8991D; }
  .mi-fb-thanks { font-size:11px; color:#888; font-style:italic; font-family:'DM Sans',sans-serif; }
  .mi-typing { display:flex; gap:5px; align-items:center; padding:10px 14px; }
  .mi-typing span { width:7px; height:7px; border-radius:50%; background:#004B9B; display:inline-block; animation:mi-dot 1.2s infinite ease-in-out; }
  .mi-typing span:nth-child(2) { animation-delay:0.2s; }
  .mi-typing span:nth-child(3) { animation-delay:0.4s; }
  @keyframes mi-dot { 0%,80%,100%{opacity:0.2;transform:scale(0.8)} 40%{opacity:1;transform:scale(1)} }
  #mi-scroll-btn { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); background:#004B9B; color:#fff; border:none; border-radius:16px; padding:5px 14px; font-size:11.5px; cursor:pointer; font-family:'DM Sans',sans-serif; display:flex; align-items:center; gap:5px; opacity:0; pointer-events:none; transition:opacity 0.2s; white-space:nowrap; }
  #mi-scroll-btn.visible { opacity:1; pointer-events:all; }
  #mi-scroll-btn svg { width:12px; height:12px; fill:#fff; }
  .mi-chips { display:flex; flex-wrap:wrap; gap:6px; padding:8px 14px; background:#f7f8fa; border-top:1px solid #ebebeb; flex-shrink:0; }
  .mi-chips.hidden { display:none; }
  .mi-chip { font-size:11.5px; padding:5px 11px; border-radius:20px; border:1px solid #004B9B; color:#004B9B; background:transparent; cursor:pointer; font-family:'DM Sans',sans-serif; transition:background 0.15s, color 0.15s; }
  .mi-chip:hover { background:#004B9B; color:#fff; }
  .mi-input-row { display:flex; gap:8px; padding:10px 12px; border-top:1px solid #ebebeb; background:#fff; align-items:center; flex-shrink:0; }
  .mi-input-row.hidden { display:none; }
  .mi-input-row input { flex:1; min-width:0; border:1px solid #ddd; border-radius:22px; padding:8px 15px; font-size:16px; font-family:'DM Sans',sans-serif; background:#f7f8fa; color:#1a1a1a; outline:none; transition:border-color 0.15s; }
  .mi-input-row input::placeholder { color:#aaa; }
  .mi-input-row input:focus { border-color:#004B9B; background:#fff; }
  .mi-send { width:36px; height:36px; border-radius:50%; background:#004B9B; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background 0.15s, transform 0.1s; }
  .mi-send:hover { background:#F8991D; }
  .mi-send:active { transform:scale(0.93); }
  .mi-send svg { width:15px; height:15px; fill:#fff; }
  .mi-powered { text-align:center; font-size:10px; color:#bbb; padding:4px 0 7px; background:#fff; letter-spacing:0.3px; font-family:'DM Sans',sans-serif; flex-shrink:0; }
  #mi-bubble-wrap { position:relative; width:60px; height:60px; pointer-events:all; }
  #mi-bubble-wrap.hidden { display:none; }
  #mi-bubble { width:60px; height:60px; border-radius:50%; background:#004B9B; border:3px solid #F8991D; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 18px rgba(0,75,155,0.4); transition:transform 0.2s; position:relative; }
  #mi-bubble:hover { transform:scale(1.08); }
  #mi-bubble svg { width:28px; height:28px; fill:#fff; }
  #mi-bubble::after { content:''; position:absolute; width:60px; height:60px; border-radius:50%; border:2px solid #F8991D; animation:mi-pulse 2s infinite; }
  @keyframes mi-pulse { 0%{opacity:0.7;transform:scale(1)} 100%{opacity:0;transform:scale(1.55)} }
  #mi-badge { position:absolute; top:-4px; right:-4px; background:#F8991D; color:#fff; border-radius:10px; min-width:20px; height:20px; display:none; align-items:center; justify-content:center; font-size:11px; font-weight:500; padding:0 5px; border:2px solid #fff; }
  /* Tablet & small laptop */
  @media (max-width:768px) {
    #mi-widget { bottom:20px; right:18px; }
    #mi-chat { width:360px; }
  }

  /* Phones (landscape & portrait) */
  @media (max-width:480px) {
    #mi-widget {
      bottom:calc(14px + env(safe-area-inset-bottom, 0px));
      right:calc(10px + env(safe-area-inset-right, 0px));
      left:calc(10px + env(safe-area-inset-left, 0px));
      align-items:flex-end;
      pointer-events:none;
    }
    #mi-chat {
      width:100%;
      max-width:100%;
      max-height:min(620px, calc(100vh - 90px));
      max-height:min(620px, calc(100dvh - 90px));
      border-radius:16px;
      pointer-events:all;
    }
    #mi-messages { min-height:160px; }
    .mi-header-title { font-size:13px; }
    .mi-header-sub { font-size:10px; }
    #mi-bubble, #mi-bubble-wrap { width:54px; height:54px; }
    #mi-bubble svg { width:25px; height:25px; }
  }

  /* Very small / short phones (e.g. SE-sized screens, landscape mode) */
  @media (max-width:380px), (max-height:560px) {
    #mi-widget { bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
    #mi-chat { max-height:min(560px, calc(100vh - 70px)); max-height:min(560px, calc(100dvh - 70px)); border-radius:14px; }
    #mi-welcome { padding:16px 14px 14px; gap:10px; }
    .mi-welcome-icon { width:52px; height:52px; }
    .mi-welcome-icon svg { width:26px; height:26px; }
    .mi-welcome-title { font-size:15px; }
    .mi-welcome-sub { font-size:12px; }
    #mi-messages { min-height:120px; padding:10px 10px 6px; }
    .mi-bubble-msg { font-size:13px; padding:8px 11px; }
  }

  /* Fold/very narrow widths */
  @media (max-width:340px) {
    #mi-chat { border-radius:12px; }
    .mi-msg-col { max-width:86%; }
  }

  /* Tall desktop / large screens: let the panel breathe but stay capped */
  @media (min-width:1200px) {
    #mi-chat { max-height:min(680px, calc(100vh - 130px)); max-height:min(680px, calc(100dvh - 130px)); }
  }