/* Zahy prompt composer: image chips, the @ menu and the numbered tray of reference images.
   Shared by index.html and app.html; the tile size comes from --tile. */
.editor{display:block;width:100%;border:0;outline:0;background:transparent;overflow-y:auto;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}
.editor:empty::before{content:attr(data-ph);color:var(--faint,#9F9FA9);pointer-events:none}
.ref{display:inline-flex;align-items:center;gap:5px;vertical-align:-.3em;height:1.75em;padding:0 9px 0 3px;margin:0 1px;border-radius:99px;background:var(--primary-soft,#F4F0FF);color:var(--primary-ink,#5B1FD3);
  font-size:.86em;font-weight:600;line-height:1;white-space:nowrap;user-select:all;box-shadow:inset 0 0 0 1px rgba(139,61,255,.22)}
.ref img{width:1.35em;height:1.35em;border-radius:50%;object-fit:cover;background:#fff;display:block}
.ref.logo img,.ref.style img{border-radius:6px}
.ref.place{background:#E3F6F3;color:#0E4D45;box-shadow:inset 0 0 0 1px rgba(20,184,166,.3)}
.ref.product{background:#FFE9F2;color:#A3165A;box-shadow:inset 0 0 0 1px rgba(255,77,154,.25)}
.ref.person{background:#E8ECFF;color:#2236C9;box-shadow:inset 0 0 0 1px rgba(46,64,255,.22)}
/* @ menu, placed under the caret */
.mention{position:absolute;z-index:8;width:250px;background:#fff;border-radius:var(--r-lg,12px);padding:6px;text-align:start;
  box-shadow:var(--sh-pop,0 20px 50px -14px rgba(22,22,24,.35),0 0 0 1px rgba(22,22,24,.07))}
.mention h6{margin:4px 8px 6px;font-size:11.5px;font-weight:500;color:var(--stone,#6B6A70)}
.mention button{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;padding:6px 8px;border-radius:10px;cursor:pointer;text-align:start;font-size:13.5px}
.mention button[aria-selected="true"],.mention button:hover{background:var(--soft,#F4F4F5)}
.mention img{width:30px;height:30px;border-radius:8px;object-fit:cover;flex:none;background:var(--app,#F7F7F8)}
.mention small{margin-inline-start:auto;font-size:11.5px;color:var(--stone,#6B6A70)}
.mention .adds{display:flex;flex-wrap:wrap;gap:4px;padding:6px 4px 2px;margin-top:4px;border-top:1px solid var(--line,#EBEBEE)}
.mention .adds button{width:auto;font-size:12px;font-weight:600;padding:5px 10px;background:var(--soft,#F4F4F5);color:var(--ink-2,#3F3F46)}
.mention .adds button:hover{background:var(--soft-2,#ECECEF)}
/* reference images: a numbered row above the text; tapping one drops it into the sentence */
.tray{display:flex;gap:8px;padding:12px 14px 0;overflow-x:auto;scrollbar-width:thin}
.tray:empty{display:none}
.asset{flex:none;width:var(--tile,92px);position:relative}
.asset .pick{display:block;position:relative;width:var(--tile,92px);height:var(--tile,92px);padding:0;border:0;border-radius:14px;overflow:hidden;cursor:pointer;background:var(--app,#F7F7F8);
  box-shadow:inset 0 0 0 1px rgba(22,22,24,.08);transition:box-shadow .15s,transform .15s}
.asset .pick:hover{transform:translateY(-1px);box-shadow:0 0 0 2px var(--violet,#8B3DFF),0 10px 20px -12px rgba(60,40,140,.6)}
.asset .ph{width:100%;height:100%;object-fit:cover;display:block}
.asset.logo .ph,.asset.product .ph{object-fit:contain;padding:8px;background:#fff}
.asset .no{position:absolute;bottom:5px;inset-inline-start:5px;min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:rgba(22,22,24,.78);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;backdrop-filter:blur(4px)}
.asset .type{position:absolute;top:5px;inset-inline-start:5px;font-size:10px;font-weight:600;padding:1px 7px;border-radius:99px;background:rgba(255,255,255,.92);color:#232326;pointer-events:none}
.asset .x{position:absolute;top:-6px;inset-inline-end:-6px;width:22px;height:22px;border-radius:50%;border:0;background:#fff;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center;box-shadow:0 1px 5px rgba(0,0,0,.2),0 0 0 1px rgba(22,22,24,.06);opacity:0;transition:opacity .15s}
.asset:hover .x,.asset:focus-within .x{opacity:1}
@media (hover:none){.asset .x{opacity:1}}
.asset input{width:100%;margin-top:5px;height:26px;border:0;border-radius:8px;background:var(--app,#F7F7F8);padding:0 7px;font-size:12px;outline:0;box-shadow:inset 0 0 0 1px rgba(22,22,24,.06)}
.asset input:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--violet,#8B3DFF)}
.asset.logo input,.asset.style input{display:none}
.asset.logo .cap,.asset.style .cap{display:block;margin-top:5px;font-size:11.5px;color:var(--stone,#6B6A70);text-align:center}
.asset .cap{display:none}