/* Mount positioning presets (desktop) */
.pieter-avatar-mount { position: relative; }
.pieter-avatar-mount.position-top-left { position: absolute; left: 24px; top: 24px; }
.pieter-avatar-mount.position-top-right { position: absolute; right: 24px; top: 24px; }
.pieter-avatar-mount.position-bottom-left { position: absolute; left: 24px; bottom: 24px; }
.pieter-avatar-mount.position-bottom-right { position: absolute; right: 24px; bottom: 24px; }

/* Wrapper */
.pieter-wrap { position: relative; display: inline-block; z-index: 1000; }
.pieter-avatar { cursor: pointer; width: 120px; height: 120px; border-radius: 9999px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.18); background: #fff; }
.pieter-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pieter-speech { position: absolute; left: 50%; transform: translateX(-50%); bottom: 110%; background: #fff; border: 1px solid #e5e7eb; padding: .5rem .75rem; border-radius: 14px; box-shadow: 0 10px 24px rgba(0,0,0,.12); white-space: nowrap; }
.pieter-speech:after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border-width: 8px 8px 0 8px; border-style: solid; border-color: #fff transparent transparent transparent; }

/* Panel (desktop) */
.pieter-panel { position: fixed; right: 24px; bottom: 24px; width: 340px; max-height: 70vh; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; box-shadow: 0 20px 40px rgba(0,0,0,.2); display: none; flex-direction: column; overflow: hidden; }
.pieter-wrap.open .pieter-panel { display: flex; }

.pieter-header { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; border-bottom: 1px solid #eee; background: #fafafa; }
.pieter-header .pieter-close { margin-left: auto; border: 0; background: transparent; font-size: 20px; line-height: 1; cursor: pointer; }

.pieter-messages { padding: 1rem; overflow: auto; flex: 1; }
.msg { margin-bottom: .75rem; }
.msg .bubble { display: inline-block; padding: .5rem .75rem; border-radius: 14px; border: 1px solid #e5e7eb; background: #fff; }
.msg-user .bubble { background: #eef6ff; border-color: #cfe3ff; }
.msg-bot .bubble { background: #f8f8f8; }

.pieter-options { display: flex; flex-direction: column; gap: .5rem; margin: .5rem 0; }
.pieter-options .opt { text-align: left; border: 1px solid #e5e7eb; background: #fff; padding: .5rem .75rem; border-radius: 10px; cursor: pointer; }
.pieter-options .opt:hover { background: #f5f7ff; }

.pieter-form { display: flex; gap: .5rem; padding: .75rem; border-top: 1px solid #eee; }
.pieter-input { flex: 1; padding: .5rem .75rem; border: 1px solid #ddd; border-radius: 10px; }
.pieter-send { border: 0; background: #111827; color: #fff; padding: .5rem .9rem; border-radius: 10px; cursor: pointer; }

/* Mobile slide-out */
.pieter-tab { display: none; }

@media (max-width: 768px){
  .pieter-speech { display: none; }
  .pieter-panel { position: fixed; top: 0; bottom: 0; width: 85vw; max-width: 420px; right: auto; left: auto; border-radius: 0; }
  .pieter-wrap.edge-right .pieter-panel { right: -100%; }
  .pieter-wrap.edge-left  .pieter-panel { left: -100%; }
  .pieter-wrap.open.edge-right .pieter-panel { right: 0; }
  .pieter-wrap.open.edge-left  .pieter-panel { left: 0; }

  .pieter-tab { display: block; position: fixed; top: 40%; transform: translateY(-50%); border: 0; background: #111827; color: #fff; padding: .6rem .8rem; }
  .pieter-wrap.edge-right .pieter-tab { right: 0; border-radius: 8px 0 0 8px; }
  .pieter-wrap.edge-left  .pieter-tab { left: 0; border-radius: 0 8px 8px 0; }

  .pieter-avatar { display: none; }
}