/* Joop chat panel. Uses the app's theme variables, so dark, light and own themes apply. */
.joop-open{display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-width:44px;min-height:44px;margin:0;padding:0;line-height:1}
.topbar .joop-open{flex-basis:48px;width:48px;height:48px;min-width:48px;min-height:48px}
.joop-open svg{display:block;width:24px;height:24px;pointer-events:none}
.joop-open[hidden]{display:none!important}
dialog.joop{width:min(760px,calc(100vw - 24px));max-width:none;height:min(860px,calc(100vh - 24px));max-height:none;padding:0;border:1px solid var(--line,#303a43);border-radius:12px;background:var(--bg,#101317);color:var(--fg,var(--text,#e8ecef));display:none;flex-direction:column;overflow:hidden}
dialog.joop[open]{display:flex}
dialog.joop::backdrop{background:rgba(0,0,0,.55)}
.joop-head{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;align-items:flex-start;padding:12px 14px;border-bottom:1px solid var(--line,#303a43);background:var(--panel,#191f24)}
.joop-head h2{margin:0;font-size:20px}
.joop-state{margin:2px 0 0;color:var(--muted,#aeb8c1);font-size:13px}
.joop-actions{display:flex;flex-wrap:wrap;gap:6px}
.joop-actions button,.joop-card-actions button,.joop-line button,.joop-view>button{width:auto;margin:0;min-height:40px;padding:6px 12px}
.joop-log,.joop-view{flex:1;overflow:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.joop-view{display:block}
.joop-view,.joop-body{min-width:0;overflow-wrap:break-word;word-wrap:break-word}
.joop-head,.joop-form,.joop-journal,.joop-footnote{flex-shrink:0}
.joop-help{line-height:1.55}
.joop-help>button{margin-bottom:14px}
.joop-help .joop-document>h3{font-size:20px;margin:0 0 12px;line-height:1.25}
.joop-help .joop-document>h4{font-size:16px;margin:22px 0 8px;padding-top:12px;border-top:1px solid var(--line,#303a43);line-height:1.35}
.joop-help .joop-document>p{margin:8px 0 12px}
.joop-table{width:100%;table-layout:fixed;border-collapse:collapse;white-space:normal;margin:16px 0;font-size:inherit;text-align:left}
.joop-table th,.joop-table td{padding:10px;vertical-align:top;border:1px solid var(--line,#303a43);overflow-wrap:break-word;word-wrap:break-word}
.joop-table thead,.joop-table th[scope=row]{background:var(--panel,#191f24)}
.joop-table th[scope=row]{font-weight:650}
.joop-msg{max-width:92%;padding:8px 12px;border-radius:10px;border:1px solid var(--line,#303a43);background:var(--panel,#191f24)}
.joop-msg.joop-user{align-self:flex-end;background:var(--active-bg,#302719)}
.joop-who{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted,#aeb8c1);text-transform:uppercase}
.joop-body{white-space:pre-wrap;word-wrap:break-word;overflow-wrap:break-word;overflow-wrap:anywhere}
.joop-body p,.joop-view p{margin:.35em 0}
.joop-body ul,.joop-body ol,.joop-view ul,.joop-view ol{margin:.35em 0;padding-left:1.4em;white-space:normal}
.joop-body h3,.joop-body h4,.joop-view h3,.joop-view h4{margin:.6em 0 .2em;font-size:15px}
.joop-body pre,.joop-view pre{white-space:pre-wrap;padding:6px;border-radius:6px;background:var(--subtle,#141a1f)}
.joop-line{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px;color:var(--muted,#aeb8c1)}
.joop-line.joop-done{color:var(--fg,var(--text,#e8ecef))}
.joop-line.joop-warn{color:var(--fg,var(--text,#e8ecef));border-left:3px solid var(--accent,#ffad21);padding-left:8px}
.joop-cards{display:flex;flex-direction:column;gap:8px;padding:0 14px}
.joop-cards:empty{display:none}
.joop-card{border:2px solid var(--accent,#ffad21);border-radius:10px;padding:10px 12px;background:var(--panel,#191f24)}
.joop-card h3{margin:0 0 4px;font-size:16px}
.joop-card p{margin:.3em 0}
.joop-reason{color:var(--muted,#aeb8c1)}
.joop-warn{font-weight:600}
.joop-card-actions{display:flex;gap:8px;margin-top:8px}
.joop-card.joop-running{opacity:.6}
.joop-form{display:flex;gap:8px;align-items:flex-end;padding:10px 14px;border-top:1px solid var(--line,#303a43)}
.joop-form textarea{flex:1;min-height:52px;max-height:160px;resize:vertical;font:inherit;color:inherit;background:var(--panel,#191f24);border:1px solid var(--line,#303a43);border-radius:8px;padding:8px}
.joop-form button{width:auto;margin:0;min-height:52px;padding:0 16px}
dialog.joop.joop-waiting .joop-form button{opacity:.5;pointer-events:none}
.joop-journal{padding:0 14px 6px;font-size:13px;color:var(--muted,#aeb8c1)}
.joop-journal ul{margin:4px 0;padding-left:1.2em;max-height:120px;overflow:auto}
.joop-footnote{margin:0;padding:0 14px 10px;font-size:12px;color:var(--muted,#aeb8c1)}
@media (max-width:560px){dialog.joop{width:100vw;height:100vh;max-height:none;border-radius:0;border:0}.joop-actions button{min-height:36px;padding:4px 8px;font-size:11px}}

/* Safari 12 has neither flex-gap nor native modal dialog layout. */
.joop-actions>*,.joop-card-actions>*,.joop-line>*,.joop-form>*{margin:3px}
.joop-log>*+*,.joop-cards>*+*{margin-top:10px}
.joop-log,.joop-view{min-height:0}
html dialog.compat-dialog.joop[open],html dialog.native-compat-dialog.joop[open]{display:flex;flex-direction:column;top:12px;bottom:12px;left:12px;right:12px;width:calc(100% - 24px);height:calc(100vh - 24px);max-width:760px;max-height:860px;overflow:hidden}
@media(max-width:560px){html dialog.compat-dialog.joop[open],html dialog.native-compat-dialog.joop[open]{top:0;bottom:0;left:0;right:0;width:100vw;height:100vh;max-height:none}}
@media(max-width:640px){
 .joop-table,.joop-table tbody,.joop-table tr,.joop-table th,.joop-table td{display:block;width:100%}
 .joop-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 .joop-table tbody tr{margin:12px 0;border:1px solid var(--line,#303a43);border-radius:8px;overflow:hidden}
 .joop-table th,.joop-table td{border:0}
 .joop-table td{border-top:1px solid var(--line,#303a43)}
 .joop-table td::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;color:var(--muted,#aeb8c1);margin-bottom:4px}
}

.joop-evening{position:fixed;right:16px;bottom:16px;z-index:1500;width:calc(100vw - 32px);max-width:390px;box-sizing:border-box;padding:16px;border:1px solid var(--accent,#ffb42a);border-radius:14px;background:var(--panel,#182025);color:var(--text,#fff);box-shadow:0 8px 28px #0008}.joop-evening[hidden]{display:none}.joop-evening p{margin:8px 0}.joop-evening small{display:block;margin-bottom:12px}