/* Lucian UX/UI Prompt #215 · MIT License (c) 2026 Seokwoooo · https://lucianlabs.dev/uxui-prompt/#215 */
.u215{position:relative;width:300px;height:480px;border-radius:32px;overflow:hidden;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 60px -36px var(--ux-shadow-strong);color:var(--ux-ink)}
.u215-pg{position:absolute;inset:0;padding:22px 18px}
.u215-pg nav{display:flex;gap:12px;font-size:11.5px;font-weight:800;color:var(--ux-ink-2)}
.u215-pg nav b{margin-right:auto;color:var(--ux-ink);font-weight:900}
.u215-pg i{display:block;margin-top:14px;height:120px;border-radius:16px;background:var(--ux-surface-2)}
.u215-pg i+i{height:70px}
.u215-ln{position:absolute;right:16px;bottom:16px;z-index:3;width:54px;height:54px;border:0;border-radius:50%;background:var(--ux-accent);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 14px 28px -10px var(--ux-accent);transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.u215-ln svg{position:absolute;width:24px;height:24px;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .2s}
.u215-ln .x{transform:rotate(-90deg) scale(.5);opacity:0}
.u215.is-open .u215-ln .c{transform:rotate(90deg) scale(.5);opacity:0}
.u215.is-open .u215-ln .x{transform:none;opacity:1}
.u215-ln:active{transform:scale(.92)}
.u215-wg{position:absolute;right:12px;bottom:80px;left:12px;top:14px;z-index:2;display:flex;flex-direction:column;border-radius:22px;background:var(--ux-surface);box-shadow:0 0 0 1px var(--ux-line),0 30px 50px -20px rgba(0,0,0,.4);overflow:hidden;transform-origin:calc(100% - 31px) calc(100% + 39px);transform:scale(.1);opacity:0;pointer-events:none;transition:transform .45s cubic-bezier(.3,1.15,.4,1),opacity .25s}
.u215.is-open .u215-wg{transform:none;opacity:1;pointer-events:auto}
.u215-wh{padding:16px 16px 14px;background:var(--ux-grad);color:#fff}
.u215-fs{display:flex}
.u215-fs>img{display:block;width:40px;height:40px;border-radius:50%;object-fit:contain;background:#fff}
.u215-ln>img.c{position:absolute;width:44px;height:44px;border-radius:50%;object-fit:contain;background:#fff;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .2s}
.u215-fs i{width:26px;height:26px;margin-right:-7px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9);display:grid;place-items:center;font-style:normal;font-size:10px;font-weight:850}
.u215-wh b{display:block;margin-top:10px;font-size:15px;font-weight:900}
.u215-wh small{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:10px;font-weight:700;opacity:.9}
.u215-wh small::before{content:"";width:6px;height:6px;border-radius:50%;background:#4ADE80}
.u215-ms{flex:1;overflow-y:auto;scrollbar-width:none;padding:12px 12px 4px;display:flex;flex-direction:column;gap:7px}
.u215-ms::-webkit-scrollbar{display:none}
.u215-b{max-width:82%;padding:8px 11px;border-radius:14px;font-size:11px;line-height:1.45;font-weight:650;animation:u215-in .35s cubic-bezier(.3,1.4,.5,1) backwards}
@keyframes u215-in{from{opacity:0;transform:translateY(8px) scale(.96)}}
.u215-b.bt{align-self:flex-start;background:var(--ux-surface-2);border-bottom-left-radius:5px}
.u215-b.me{align-self:flex-end;background:var(--ux-accent);color:#fff;border-bottom-right-radius:5px}
.u215-b.ag{align-self:flex-start;background:color-mix(in srgb,#EC4899 12%,var(--ux-surface));border-bottom-left-radius:5px}
.u215-ty{align-self:flex-start;display:flex;gap:3px;padding:10px 12px;border-radius:14px;border-bottom-left-radius:5px;background:var(--ux-surface-2)}
.u215-ty i{width:6px;height:6px;border-radius:50%;background:var(--ux-ink-3);animation:u215-dt 1s ease-in-out infinite}
.u215-ty i:nth-child(2){animation-delay:.15s}.u215-ty i:nth-child(3){animation-delay:.3s}
@keyframes u215-dt{30%{transform:translateY(-4px);opacity:.6}}
.u215-ar{display:flex;align-items:center;gap:8px;margin-top:6px;padding:7px;border-radius:10px;background:var(--ux-surface);box-shadow:inset 0 0 0 1px var(--ux-line)}
.u215-ar i{flex:none;width:28px;height:28px;border-radius:7px;background:linear-gradient(135deg,#A5B4FC,#F0ABFC)}
.u215-ar b{display:block;font-size:10.5px;font-weight:850}
.u215-ar small{display:block;font-size:9px;font-weight:700;color:var(--ux-ink-3)}
.u215-sy{align-self:center;padding:3px 9px;border-radius:999px;background:var(--ux-surface-2);font-size:9.5px;font-weight:800;color:var(--ux-ink-3);animation:u215-in .35s backwards}
.u215-qs{display:flex;flex-wrap:wrap;gap:5px;padding:4px 12px 8px;justify-content:flex-end}
.u215-qk{height:28px;padding:0 10px;border:0;border-radius:999px;background:var(--ux-surface);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--ux-accent) 50%,transparent);color:var(--ux-accent);font:inherit;font-size:10.5px;font-weight:800;cursor:pointer;transition:opacity .2s}
.u215-qk:disabled{opacity:.35;cursor:default}
.u215-ip{display:flex;gap:6px;padding:8px 10px 10px;border-top:1px solid var(--ux-line)}
.u215-ip input{flex:1;min-width:0;height:34px;padding:0 11px;border:0;border-radius:10px;background:var(--ux-surface-2);color:var(--ux-ink);font:inherit;font-size:11px;font-weight:650;outline:none}
.u215 button:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
@media (prefers-reduced-motion: reduce){.u215-wg,.u215-ln svg{transition:none}.u215-b,.u215-sy{animation:none}.u215-ty i{animation:none}}
/* Studio adapts #215's container for a full conversation, retaining its shapes and motion. */
#YGAssistant{position:fixed;right:20px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:85;width:min(440px,calc(100% - 40px));height:54px;max-width:none;max-height:none;background:transparent;box-shadow:none;overflow:visible;pointer-events:none;font-family:inherit;--ux-surface:var(--st-surface,#fff);--ux-surface-2:var(--yg-color-muted,#eceee5);--ux-ink:var(--yg-color-ink,#183d33);--ux-ink-2:var(--yg-color-ink,#183d33);--ux-ink-3:var(--st-muted,#68756c);--ux-line:var(--st-line,#d9ded3);--ux-accent:#183d33;--yg-chat-on-accent:#f8f8f2;--ux-grad:linear-gradient(135deg,#234b3b,#183d33)}
html[data-theme=dark] #YGAssistant{--ux-accent:#defa78;--yg-chat-on-accent:#183d33;--ux-grad:linear-gradient(135deg,#234b3b,#183d33)}
#YGAssistant .u215-ln{right:0;bottom:0;pointer-events:auto;color:var(--yg-chat-on-accent)}
#YGAssistant .u215-wg{top:auto;left:auto;right:0;bottom:78px;width:100%;max-width:none;height:min(680px,calc(100dvh - 120px - env(safe-area-inset-bottom,0px)));min-height:0;font-family:inherit;color:var(--ux-ink);background:var(--ux-surface);transform-origin:calc(100% - 27px) calc(100% + 51px)}
#YGAssistant .u215-wh{display:grid;grid-template-columns:40px minmax(0,1fr) 32px 36px;grid-template-rows:auto auto;column-gap:10px;align-items:center;flex:none;padding:18px 18px 17px;background:var(--ux-grad);color:#f8f8f2}
#YGAssistant .u215-fs{grid-column:1;grid-row:1 / span 2;align-items:center}
#YGAssistant .u215-fs i{width:28px;height:28px;flex:none}
#YGAssistant .u215-fs i:nth-child(1){background:#defa78;color:#183d33}
#YGAssistant .u215-fs i:nth-child(2){background:#dfe9c8;color:#183d33}
#YGAssistant .u215-fs i:nth-child(3){background:#f8f8f2;color:#183d33}
#YGAssistant .u215-wh b{grid-column:2;grid-row:1;margin:0;font-size:16px;line-height:1.5;font-weight:800;letter-spacing:-.02em}
#YGAssistant .u215-wh small{grid-column:2;grid-row:2;margin:3px 0 0;font-size:11px;line-height:1.5;font-weight:600;opacity:1;color:#dfe9d8}
#YGAssistant .u215-close,#YGAssistant .u215-reset{grid-column:4;grid-row:1 / span 2;display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #ffffff35;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
#YGAssistant .u215-reset{grid-column:3;width:32px;height:32px}
#YGAssistant .u215-reset svg{width:18px;height:18px}
#YGAssistant .u215-fs img{max-width:100%;height:auto}
#YGAssistant .u215-close svg{width:18px;height:18px}
#YGAssistant .u215-ms{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:20px 16px 16px;gap:12px;scrollbar-width:thin;scrollbar-color:var(--ux-line) transparent;scroll-padding-block:16px}
#YGAssistant .u215-ms::-webkit-scrollbar{display:block;width:4px}
#YGAssistant .u215-ms::-webkit-scrollbar-thumb{background:var(--ux-line);border-radius:4px}
#YGAssistant .u215-b{max-width:92%;padding:12px 14px;font-size:15px;line-height:1.65;font-weight:500;overflow-wrap:anywhere;white-space:pre-line;flex:none}
#YGAssistant .u215-b strong{font-weight:800}
#YGAssistant .u215-b.me{max-width:86%;background:var(--ux-accent);color:var(--yg-chat-on-accent)}
#YGAssistant .u215-b.bt{color:var(--ux-ink);background:var(--ux-surface-2)}
#YGAssistant .u215-ar{gap:10px;margin-top:10px;padding:10px;border-radius:10px;color:var(--ux-ink);text-decoration:none;white-space:normal;background:var(--ux-surface)}
#YGAssistant .u215-ar>div{min-width:0}
#YGAssistant .u215-ar b{font-size:13px;line-height:1.5;font-weight:800}
#YGAssistant .u215-ar small{margin-top:3px;font-size:12px;line-height:1.5;font-weight:500;color:var(--ux-ink-3)}
#YGAssistant .u215-ar>img{flex:none;width:44px;height:52px;border-radius:7px;object-fit:cover;background:var(--ux-surface-2)}
#YGAssistant .u215-ar i{width:32px;height:32px;background:var(--ux-accent);opacity:.25}
#YGAssistant .u215-qs{flex:none;align-self:flex-start;max-width:100%;gap:7px;padding:0;justify-content:flex-start}
#YGAssistant .u215-qs:empty,#YGAssistant .u215-qs[hidden]{display:none}
#YGAssistant .u215-qk{height:auto;min-height:36px;max-width:100%;padding:8px 12px;font-size:12px;line-height:1.5;font-weight:700;white-space:normal;text-align:left;color:var(--ux-accent)}
#YGAssistant .u215-ip{margin:0;flex:none;gap:8px;padding:12px 16px 10px;background:var(--ux-surface)}
#YGAssistant .u215-ip input{height:44px;padding:0 13px;border:1px solid transparent;border-radius:10px;font-size:16px;line-height:1.5;font-weight:500;background:var(--ux-surface-2);color:var(--ux-ink)}
#YGAssistant .u215-ip input::placeholder{color:var(--ux-ink-3);opacity:1}
#YGAssistant .u215-ip input:focus-visible{outline:2px solid var(--ux-accent);outline-offset:2px}
#YGAssistant .u215-send{flex:none;display:grid;place-items:center;width:44px;height:44px;min-height:0;padding:0;border:0;border-radius:10px;background:var(--ux-accent);color:var(--yg-chat-on-accent);font-size:24px;line-height:1;cursor:pointer}
#YGAssistant .u215-send:disabled{opacity:.4;cursor:default}
#YGAssistant .u215-note{margin:0;flex:none;padding:0 18px 14px;color:var(--ux-ink-3);font-size:11px;line-height:1.5;background:var(--ux-surface)}
#YGAssistant .u215-sy{white-space:normal;text-align:center;flex:none;font-size:11px;line-height:1.5}
@media(max-width:767px){#YGAssistant{right:12px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:calc(100% - 24px)}#YGAssistant .u215-wg{bottom:74px;height:min(650px,calc(100dvh - 108px - env(safe-area-inset-bottom,0px)))}#YGAssistant .u215-wh{grid-template-columns:52px minmax(0,1fr) 36px;column-gap:10px;padding:16px 14px}#YGAssistant .u215-fs i{width:25px;height:25px}#YGAssistant .u215-wh b{font-size:15px}#YGAssistant .u215-ms{padding:16px 12px 14px}#YGAssistant .u215-b{max-width:94%;font-size:15px}#YGAssistant .u215-ip{padding-inline:12px}#YGAssistant .u215-note{padding-inline:14px}}

@media(max-width:767px){#YGAssistant .u215-wh{grid-template-columns:36px minmax(0,1fr) 28px 32px;column-gap:6px}#YGAssistant .u215-close{width:32px;height:32px}#YGAssistant .u215-reset{width:28px;height:28px}}