:root { --g: #1f4d36; --g2: #e3eee6; --am: #b0692f; }
.bubble { position: relative; display: inline-flex; align-items: center; gap: 9px; height: 52px; padding: 0 20px 0 16px; border-radius: 26px; border: 0; background: #1f4d36; color: #fff; font: 700 16px/1 inherit; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.bubble::after { content: ""; position: absolute; right: 22px; bottom: -8px; border: 9px solid transparent; border-top-color: #1f4d36; border-bottom: 0; }
.bubble svg { flex: none; }
.bubble:hover { background: #17402d; }
.bubble:focus-visible { outline: 3px solid #b0692f; outline-offset: 2px; }
.panel { width: min(420px, 100%); height: 540px; background: #fff; border-radius: 16px; box-shadow: 0 8px 30px rgba(0,0,0,.25); display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d9d3c7; }
.panel-head { display: flex; align-items: center; gap: 10px; background: var(--g); color: #fff; padding: 10px 12px; }
.panel-head img { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--am); object-fit: cover; background: #f3ece0; }
.panel-head div { display: grid; flex: 1; line-height: 1.2; } .panel-head span { font-size: 12px; opacity: .85; }
.ghost { background: none; border: 0; color: #fff; font-size: 18px; min-width: 36px; min-height: 36px; cursor: pointer; }
.thread { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: #faf7f1; }
.msg { max-width: 86%; padding: 9px 12px; border-radius: 14px; font-size: 15px; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.bot { align-self: flex-start; background: var(--g2); color: #17301f; border-bottom-left-radius: 4px; }
.msg.me { align-self: flex-end; background: var(--am); color: #fff; border-bottom-right-radius: 4px; }
.recap { background: #fff; border: 1px solid #d9d3c7; border-radius: 12px; padding: 10px 12px; display: grid; gap: 6px; font-size: 14px; }
.recap div:not(.chips) { display: grid; grid-template-columns: 110px 1fr; gap: 8px; } .recap span { color: #666; } .recap b { font-weight: 600; overflow-wrap: anywhere; }
.recap p { margin: 4px 0 0; font-size: 13px; color: #555; overflow-wrap: anywhere; }
.composer { border-top: 1px solid #d9d3c7; padding: 8px 10px; display: grid; gap: 6px; background: #fff; max-height: 48%; overflow-y: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { border: 1px solid var(--g); background: #fff; color: var(--g); border-radius: 999px; padding: 6px 12px; font-size: 14px; min-height: 36px; cursor: pointer; text-align: left; }
.chip:hover { background: var(--g2); }
.composer .row { display: flex; gap: 8px; }
.composer input { flex: 1; min-width: 0; border: 1px solid #d9d3c7; border-radius: 10px; padding: 10px; font-size: 16px; }
.chip.primary { background: var(--g); color: #fff; text-decoration: none; display: inline-flex; align-items: center; }
.send { background: var(--g); color: #fff; border: 0; border-radius: 10px; padding: 0 14px; min-height: 44px; font-size: 15px; cursor: pointer; }
.err { color: #9b2c1c; font-size: 13px; }
.lnp-bubble{position:fixed;right:16px;bottom:16px;z-index:9998}.lnp-panel{position:fixed;right:12px;bottom:12px;z-index:9999;width:min(420px,calc(100vw - 24px));height:min(560px,calc(100dvh - 24px))}.lnp-panel .panel{width:100%;height:100%}.lnp-panel[hidden],.lnp-bubble[hidden]{display:none}