#broduss-app{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#182230;max-width:760px;margin:24px auto;background:#f5f7fa;border:1px solid #e7ebf0;border-radius:22px;overflow:hidden;min-height:620px;box-shadow:0 12px 40px rgba(20,35,55,.08)}#broduss-app *{box-sizing:border-box}.broduss-login{max-width:340px;margin:100px auto;padding:24px;text-align:center}.broduss-mark,.broduss-avatar{width:54px;height:54px;border-radius:18px;background:#1f75e5;color:#fff;display:grid;place-items:center;font-size:27px;font-weight:700;margin:0 auto 18px}.broduss-login h1{font-size:30px;margin:0}.broduss-login p{color:#7a8797;margin:6px 0 26px}.broduss-login input,.broduss-login button{width:100%;padding:14px 16px;border:1px solid #dce2e9;border-radius:12px;margin:6px 0;font-size:16px}.broduss-login button{background:#1f75e5;color:white;border:0;font-weight:650;cursor:pointer}.broduss-error{color:#bd3434;font-size:13px;min-height:20px}.broduss-chat{height:680px;max-height:85vh;display:flex;flex-direction:column;background:#f5f7fa}.broduss-chat[hidden],.broduss-login[hidden]{display:none}.broduss-chat header{height:76px;background:white;border-bottom:1px solid #e9edf2;display:flex;align-items:center;padding:12px 18px;gap:12px}.broduss-chat .broduss-avatar{width:42px;height:42px;margin:0;border-radius:50%;font-size:21px}.broduss-chat header strong,.broduss-chat header small{display:block}.broduss-chat header small{color:#8994a3;font-size:12px;margin-top:3px}.broduss-lock{margin-left:auto;color:#39875d;font-size:12px}.broduss-chat main{flex:1;overflow:auto;padding:22px 16px;display:flex;flex-direction:column;gap:12px}.broduss-bubble{max-width:78%;padding:12px 15px;border-radius:18px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere}.broduss-bubble small{display:block;font-size:10px;opacity:.65;text-align:right;margin-top:5px}.broduss-bubble.mine{align-self:flex-end;background:#2678e8;color:white;border-bottom-right-radius:5px}.broduss-bubble.theirs{align-self:flex-start;background:white;color:#202b39;border-bottom-left-radius:5px}.broduss-chat form#broduss-send{display:flex;gap:9px;padding:12px;background:white;border-top:1px solid #e9edf2}.broduss-chat form#broduss-send input{flex:1;min-width:0;border:0;background:#f1f3f6;border-radius:22px;padding:13px 16px;font-size:15px;outline:none}.broduss-chat form#broduss-send button{width:46px;border:0;border-radius:50%;background:#2678e8;color:white;font-size:22px}.broduss-exit{margin:0 12px 12px;padding:13px;border:0;border-radius:12px;background:#fff0f0;color:#b83c3c;font-weight:700;letter-spacing:.04em;cursor:pointer}@media(max-width:600px){#broduss-app{margin:0;border-radius:0;min-height:100dvh;border:0}.broduss-chat{height:100dvh;max-height:none}.broduss-login{margin:16vh auto}}


/* BRODUSS 0.1.1 — standalone app viewport */
html:has(body.broduss-app-page),
body.broduss-app-page {
  width:100%;
  min-width:320px;
  min-height:100%;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden;
  background:#f5f7fa;
}
body.broduss-app-page { min-height:100vh; min-height:100dvh; }
body.broduss-app-page #broduss-app {
  position:relative;
  width:100%;
  max-width:none;
  height:100vh;
  height:100dvh;
  min-height:100vh;
  min-height:100dvh;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
}
body.broduss-app-page #broduss-app .broduss-login {
  width:min(100% - 40px, 360px);
  margin:0 auto;
  padding:24px;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}
body.broduss-app-page #broduss-app .broduss-chat {
  width:100%;
  height:100%;
  max-height:none;
  min-height:0;
}
body.broduss-app-page #broduss-app .broduss-chat main {
  min-height:0;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
body.broduss-app-page #broduss-app .broduss-chat form#broduss-send {
  padding-bottom:max(12px, env(safe-area-inset-bottom));
}
body.broduss-app-page #broduss-app .broduss-exit {
  margin-bottom:max(12px, env(safe-area-inset-bottom));
}
body.broduss-app-page #wpadminbar { display:none !important; }
@media (min-width:700px) {
  body.broduss-app-page #broduss-app .broduss-chat header { padding-left:clamp(18px,4vw,56px); padding-right:clamp(18px,4vw,56px); }
  body.broduss-app-page #broduss-app .broduss-chat main { padding-left:clamp(16px,8vw,120px); padding-right:clamp(16px,8vw,120px); }
  body.broduss-app-page #broduss-app .broduss-chat form#broduss-send,
  body.broduss-app-page #broduss-app .broduss-exit { padding-left:clamp(12px,4vw,56px); padding-right:clamp(12px,4vw,56px); }
}


/* BRODUSS 0.2.1 – camera sits INSIDE the original message field.
   The blue send button intentionally keeps the original 0.1.1 styling. */
#broduss-app .broduss-chat form#broduss-send {
  display:flex;
  align-items:center;
  gap:9px;
}
#broduss-app .broduss-chat form#broduss-send .broduss-input-wrap {
  display:flex;
  align-items:center;
  flex:1 1 auto;
  min-width:0;
  height:46px;
  padding:0 8px 0 16px;
  background:#f1f3f6;
  border-radius:22px;
}
#broduss-app .broduss-chat form#broduss-send #broduss-text {
  flex:1 1 auto;
  width:100%;
  min-width:0;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  outline:none;
  background:transparent;
  border-radius:0;
  font-size:15px;
  box-shadow:none;
}
#broduss-app .broduss-chat form#broduss-send .broduss-camera {
  flex:0 0 30px;
  width:30px;
  height:34px;
  margin:0;
  padding:0;
  display:grid;
  place-items:center;
  border:0;
  border-radius:0;
  background:transparent;
  color:#667587;
  font-size:17px;
  line-height:1;
  cursor:pointer;
  box-shadow:none;
}
#broduss-app .broduss-chat form#broduss-send .broduss-camera:disabled {
  opacity:.5;
  cursor:wait;
}
/* Explicitly preserve the original round blue send control. */
#broduss-app .broduss-chat form#broduss-send > button[type="submit"] {
  flex:0 0 46px;
  width:46px;
  height:46px;
  min-width:46px;
  margin:0;
  padding:0;
  border:0;
  border-radius:50%;
  background:#2678e8;
  color:#fff;
  font-size:22px;
  line-height:1;
  display:grid;
  place-items:center;
  box-shadow:none;
}
#broduss-app .broduss-bubble .broduss-message-image {
  display:block;
  width:auto;
  max-width:min(100%,360px);
  max-height:420px;
  object-fit:contain;
  border-radius:12px;
}
#broduss-app .broduss-bubble:has(.broduss-message-image) { padding:7px; }
#broduss-app .broduss-bubble:has(.broduss-message-image) small { padding:0 6px 2px; }

/* BRODUSS 0.2.3 – tap/click image to view it large */
#broduss-app .broduss-message-image {
  cursor: zoom-in;
}
#broduss-app .broduss-message-image:focus-visible {
  outline: 3px solid #2678e8;
  outline-offset: 3px;
}
.broduss-image-viewer {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  background: rgba(10, 16, 26, .94);
  box-sizing: border-box;
  cursor: zoom-out;
}
.broduss-image-viewer-full {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  cursor: default;
  box-shadow: 0 12px 48px rgba(0,0,0,.35);
}
.broduss-image-viewer-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.16);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
}