.chip-widget, .shiftflow-widget{
  max-width: 640px;
  margin: 0 auto;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(0,0,0,.06);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: #fff;
  overflow: visible;
  position: relative;
  display: flex;
  flex-direction: column;
}
.chip-header, .shiftflow-header{
  display:flex; align-items:center;
  padding:12px 12px 6px 12px;
  position:relative;
}
.chip-avatar, .shiftflow-avatar{
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0;
  border: 1px solid rgba(0,0,0,.08);
  position: absolute;
  right: 40px;
  top: 8px;
}
.chip-titles, .shiftflow-titles{ flex:1; }
.chip-name, .shiftflow-name{ font-weight:700; font-size:15px; }
.chip-disclaimer{ font-size:11px; color:#555; opacity:.9; margin-top:2px; line-height:1.3; }
.chip-menu-wrap{ position:absolute; right:8px; top:8px; }
.chip-menu-btn{ background:transparent; border:0; font-size:20px; cursor:pointer; }
.chip-close-btn{
  position:absolute;
  right:10px;
  top:10px;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid #d9d9d9;
  background:#fff;
  color:#555;
  font-size:15px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.chip-close-btn:hover{ background:#f4f4f4; }
.chip-menu-btn{ color:#555; width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.chip-menu{
  position:absolute; right:0; top:28px; background:#fff; border:1px solid #eee;
  border-radius:12px; overflow:hidden; min-width:200px; box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.chip-menu-item{ display:block; padding:10px 14px; text-decoration:none; color:#222; font-size:14px; }
.chip-menu-item:hover{ background:#f6f6f6; }
.chip-terms-link{ 
  display:block !important; 
  padding:12px 16px; 
  text-align:center; 
  font-size:13px; 
  color:#2b6cb0; 
  text-decoration:none; 
  border-top:2px solid #2b6cb0; 
  background:#f0f8ff;
  font-weight:600;
  position:relative;
  z-index:10;
}
.chip-terms-link:hover{ 
  background:#e6f3ff; 
  color:#1e4a7a;
  border-top-color:#1e4a7a;
}
.chip-body{ padding:12px 12px 14px 12px; height:auto; flex:1; min-height:0; overflow:auto; background:#fafafa; }
.chip-msg{ margin-bottom:12px; max-width: 100%; }
.chip-msg.bot .chip-text{ background:#fff; border:1px solid #eee; }
.chip-msg.user{ margin-left:auto; }
.chip-msg.user .chip-text{ background:#2b6cb0; color:#fff; }
.chip-text{ padding:8px 10px; border-radius:12px; line-height:1.35; font-size:13px; }
.chip-options{ margin-top:7px; display:flex; flex-direction:column; gap:8px; width:100%; }
.chip-opt{ border:1px solid #2b6cb0; background:#2b6cb0; color:#fff; padding:8px 10px; min-height:42px; width:100%; border-radius:999px; cursor:pointer; transition:all 0.2s ease; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.1; font-size:14px; }
.chip-opt:hover{ background:#1e4a7a; border-color:#1e4a7a; }
.chip-top-option{ border:1px solid #2b6cb0; background:#2b6cb0; color:#fff; padding:8px 10px; min-height:44px; width:100%; border-radius:999px; display:flex; align-items:center; justify-content:center; text-align:center; line-height:1.1; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; font-size:13px; box-sizing:border-box; margin:2px 0 10px; cursor:pointer; }
.chip-top-option:hover, .chip-top-option:focus{ background:#1e4a7a; border-color:#1e4a7a; outline:none; }
.chip-footer{ display:flex; gap:8px; padding:12px; border-top:1px solid #eee; background:#fff; }
.chip-input{ flex:1; padding:10px 12px; border-radius:999px; border:1px solid #ddd; }
.chip-send{ border:0; padding:0 14px; border-radius:999px; background:#2b6cb0; color:#fff; cursor:pointer; }

/* Floating widget (CSS backup; inline style in PHP already sets right/left) */
.chip-floating, .shiftflow-floating{
  position: fixed !important;
  right: auto !important;
  left: 50% !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
  width: 430px;
  max-width: calc(100vw - 24px);
  height: 560px;
  max-height: calc(100vh - 64px);
  z-index: 2147483647 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Launcher button */
.chip-launcher, .shiftflow-launcher{
  position: fixed !important;
  right: 12px !important;
  left: auto !important;
  bottom: 56px !important;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #1f2937;
  box-shadow: none;
  z-index: 1000000;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  overflow: hidden;
}
.chip-launcher:hover, .shiftflow-launcher:hover{ filter: brightness(1.05); }
.chip-launcher-hidden, .shiftflow-launcher-hidden{ display:none; }
.shiftflow-launcher-hidden-by-account{ visibility:hidden !important; opacity:0 !important; pointer-events:none !important; }
.shiftflow-launcher{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
}

.shiftflow-launcher-icon{
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
}

.shiftflow-help-bubble{
  position: fixed;
  right: 12px;
  bottom: 124px;
  background: #fff;
  color: #333;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 4px 14px rgba(0,0,0,.14);
  z-index: 2147483646;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}
.shiftflow-help-bubble::after{
  content: '';
  position: absolute;
  right: 22px;
  top: 100%;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #fff;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.1));
}
.shiftflow-help-bubble-hidden{
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

@media (max-width: 480px){
  .chip-floating, .shiftflow-floating{ right: auto !important; left: 50% !important; top: 50% !important; bottom: auto !important; transform: translate(-50%, -50%); width: calc(100vw - 16px); height: min(80vh, 600px); max-height: calc(100vh - 20px); z-index: 2147483647 !important; }
  .chip-launcher, .shiftflow-launcher{ right: 12px !important; bottom: 58px !important; }
  .shiftflow-help-bubble{ right: 12px; bottom: 124px; font-size: 11px; }
}

/* Hidden on phones and small tablets.

   The launcher and its bubble are fixed to the bottom right, which is exactly
   where the In and Out buttons sit on the punch list, so on a narrow screen the
   assistant covers them. A mis-tap there costs someone a clocking, which is a
   worse outcome than not having the assistant to hand.

   Support is still reachable on mobile: the WhatsApp float sits bottom left and
   is unaffected. The panel itself needs no rule, because it can only be opened
   by tapping one of these two elements. */
@media (max-width: 768px){
  .chip-launcher,
  .shiftflow-launcher,
  .shiftflow-help-bubble{
    display: none !important;
  }
}