#start-joop { position: fixed; z-index: 80; right: max(16px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); width: min(440px, calc(100vw - 32px)); margin: 0; border: 1px solid var(--rule); border-radius: 18px; background: var(--surface); color: var(--fg); box-shadow: 0 8px 36px var(--shadow); overflow: hidden; font-size: 15px; }
#start-joop [hidden] { display: none !important; }
.joop-toggle { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 12px 16px; border: 0; text-align: left; background: var(--surface); cursor: pointer; }
.joop-avatar { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; background: var(--orange-bg); color: var(--orange-ink); font-size: 22px; font-weight: 800; }
.joop-heading { flex: 1; }
.joop-heading strong { display: block; font-size: 16px; }
.joop-heading small { display: block; color: var(--muted); font-size: 12px; }
.joop-toggle-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.joop-body { display: flex; flex-direction: column; max-height: min(70vh, 640px); max-height: min(70dvh, 640px); border-top: 1px solid var(--rule); overflow: auto; overscroll-behavior: contain; }
.joop-body > *, .joop-chat > * { flex-shrink: 0; }
.joop-intro { margin: 0; padding: 12px 16px 0; font-size: 13px; color: var(--muted); }
.joop-login { padding: 0 16px 16px; }
.joop-login label, .joop-compose label { display: block; margin: 12px 0 6px; font-weight: 650; }
#start-joop input, #start-joop textarea { display: block; width: 100%; border: 1px solid var(--faint); border-radius: 10px; padding: 11px 12px; background: var(--surface-2); color: var(--fg); font: inherit; font-size: 16px; }
#start-joop textarea { resize: vertical; min-height: 70px; max-height: 140px; }
.joop-primary, .joop-text-button { min-height: 44px; border-radius: 9px; font: inherit; cursor: pointer; }
.joop-primary { padding: 9px 16px; border: 1px solid var(--orange-ink); background: var(--orange-bg); color: var(--orange-ink); font-weight: 700; }
.joop-login .joop-primary { width: 100%; margin-top: 12px; }
.joop-text-button { border: 0; background: transparent; padding: 6px 8px; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
#start-joop button:disabled { opacity: .6; cursor: default; }
.joop-chat { display: flex; flex-direction: column; min-height: 0; }
.joop-chat-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 8px; }
.joop-log { overflow: auto; min-height: 120px; max-height: 36vh; max-height: 36dvh; padding: 4px 16px 12px; overscroll-behavior: contain; scroll-behavior: auto; }
.joop-message { border-radius: 12px; padding: 11px 12px; margin: 8px 0; background: var(--surface-2); overflow-wrap: anywhere; }
.joop-message[data-speaker="user"] { background: var(--blue-bg); margin-left: 24px; }
.joop-message strong { display: block; font-size: 12px; margin-bottom: 5px; color: var(--muted); }
.joop-message p { margin: 0; white-space: pre-wrap; }
.joop-sources { padding: 10px 0 0; margin: 0; list-style: none; }
.joop-sources li + li { margin-top: 8px; }
.joop-sources a { display: block; min-height: 32px; font-size: 13px; line-height: 1.4; }
.joop-compose { padding: 0 16px 12px; border-top: 1px solid var(--rule); }
.joop-compose-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.joop-compose-row small { color: var(--muted); font-size: 12px; }
.joop-status { margin: 0; padding: 0 16px 10px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.joop-status[data-error="true"] { color: var(--red); }
.joop-privacy { padding: 0 16px 12px; margin: 0; color: var(--muted); font-size: 11px; }
body:has(#start-joop) .wrap { padding-bottom: 112px; }
@media (max-width: 520px) { #start-joop { right: 10px; width: calc(100vw - 20px); bottom: max(8px, env(safe-area-inset-bottom)); } .joop-body { max-height: 72vh; max-height: 72dvh; } }
.joop-feedback-toolbar { display: flex; flex-wrap: wrap; gap: 0 8px; padding: 0 8px 4px; border-bottom: 1px solid var(--rule); }
.joop-feedback-form { padding: 4px 16px 12px; }
.joop-feedback-form h3 { margin: 8px 0; font-size: 17px; }
.joop-feedback-form p { font-size: 13px; color: var(--muted); }
.joop-feedback-form label { display: block; margin: 10px 0 5px; font-weight: 650; }
#start-joop select { width: 100%; min-height: 44px; padding: 10px; font: inherit; color: var(--fg); background: var(--surface-2); border: 1px solid var(--faint); border-radius: 9px; }
.joop-feedback-notice { padding: 10px; border-left: 3px solid var(--orange); background: var(--orange-bg); }
.joop-feedback-actions { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
#joop-feedback-status[data-error="true"] { color: var(--red); }
.joop-feedback-item { padding: 10px 0; margin: 8px 0; border-top: 1px solid var(--rule); }
.joop-feedback-item small { display: block; color: var(--muted); margin: 4px 0; }
.joop-feedback-item details { margin-top: 8px; }
.joop-feedback-item p { white-space: pre-wrap; }