/* ── JOHNNY — chat assistant: u istom stubu kao Instagram/WhatsApp, iznad njih ── */
.jn-launch {
  position: static; align-self: flex-end;
  display: flex; align-items: center; gap: .9rem;
  padding: .45rem 1.6rem .45rem .45rem; border-radius: 70px;
  background: var(--paper); color: var(--white);
  border: 2px solid var(--accent);
  box-shadow: 0 12px 36px rgba(60,47,30,.42), 0 2px 8px rgba(60,47,30,.22);
  transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s;
}
.jn-launch.jn-fixed { position: fixed; right: 2rem; bottom: 8rem; z-index: 9000; }
.jn-launch:hover { transform: translateY(-3px); box-shadow: 0 16px 44px rgba(60,47,30,.5); }
.jn-launch:focus-visible, .jn-send:focus-visible, .jn-chip:focus-visible, .jn-x:focus-visible, .jn-bubble-x:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.jn-face { position: relative; flex: none; width: 74px; height: 74px; }
.jn-face img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #23201b; border: 2px solid var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.jn-face::after {
  content: ''; position: absolute; right: 2px; bottom: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: #2fbf5b; border: 3px solid var(--paper);
}
.jn-txt { display: flex; flex-direction: column; text-align: start; line-height: 1.15; }
.jn-lbl { font: 700 1.2rem/1.1 var(--sans); letter-spacing: .04em; }
.jn-role { font: 500 0.89rem/1.2 var(--sans); color: var(--muted); margin-top: .2rem; }

/* Kratka poruka lijevo od dugmeta (jednom po sesiji) */
.jn-bubble {
  position: fixed; right: 12rem; bottom: 8rem; z-index: 9000; max-width: 280px;
  padding: .85rem 2.2rem .85rem 1rem; border-radius: 14px 14px 3px 14px;
  background: var(--paper); color: var(--text); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(60,47,30,.32);
  font: 500 1rem/1.4 var(--sans); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .35s, transform .35s, visibility .35s;
}
.jn-bubble.show { opacity: 1; visibility: visible; transform: none; }
.jn-bubble-x { position: absolute; top: 4px; inset-inline-end: 4px; width: 26px; height: 26px; border-radius: 50%; color: var(--muted); font-size: 0.87rem; }
.jn-bubble-x:hover { background: var(--bg3); }

.jn-panel {
  position: fixed; right: 12rem; bottom: 2rem; z-index: 9001;
  width: min(430px, calc(100vw - 2rem)); height: min(680px, calc(100svh - 4rem));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); color: var(--text);
  border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 28px 70px -12px rgba(40,30,16,.55);
  opacity: 0; visibility: hidden; transform: translateY(14px) scale(.98); transform-origin: bottom right;
  transition: opacity .28s, transform .38s cubic-bezier(.16,1,.3,1), visibility .28s;
}
.jn-panel.open { opacity: 1; visibility: visible; transform: none; }

.jn-head { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; background: linear-gradient(135deg, #4a3a26, #2c2216); color: #f6efe1; }
.jn-head .jn-face { width: 58px; height: 58px; }
.jn-head .jn-face::after { border-color: #2c2216; width: 14px; height: 14px; }
.jn-name { font: 600 1.5rem/1.05 var(--serif); }
.jn-sub { font: 500 0.87rem/1.3 var(--sans); color: #d8cab0; letter-spacing: .04em; margin-top: .15rem; }
.jn-x { margin-inline-start: auto; width: 36px; height: 36px; border-radius: 50%; color: #d8cab0; font-size: 1.05rem; flex: none; }
.jn-x:hover { background: rgba(255,255,255,.12); color: #fff; }

.jn-log { flex: 1; overflow-y: auto; padding: 1.1rem; display: flex; flex-direction: column; gap: .75rem; overscroll-behavior: contain; scroll-behavior: smooth; }
.jn-line { display: flex; align-items: flex-end; gap: .5rem; max-width: 94%; align-self: flex-start; animation: jnIn .35s cubic-bezier(.16,1,.3,1) both; }
.jn-line.me { align-self: flex-end; }
.jn-mini { width: 32px; height: 32px; border-radius: 50%; flex: none; object-fit: cover; background: #23201b; border: 1px solid var(--accent); }
.jn-msg { padding: .7rem .95rem; border-radius: 14px; font: 500 1.05rem/1.5 var(--sans); overflow-wrap: anywhere; }
.jn-msg a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.jn-bot { background: var(--bg3); border-end-start-radius: 3px; }
.jn-me  { background: var(--accent); color: #fff; border-end-end-radius: 3px; }
@keyframes jnIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.jn-typing { display: flex; gap: 5px; padding: .95rem 1rem; }
.jn-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); animation: jnDot 1.1s ease-in-out infinite; }
.jn-typing i:nth-child(2) { animation-delay: .15s; } .jn-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes jnDot { 0%,60%,100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.jn-row { display: flex; flex-wrap: wrap; gap: .5rem; align-self: flex-start; padding-inline-start: 40px; }
.jn-chip {
  padding: .5rem 1rem; border-radius: 50px; border: 1.5px solid var(--accent); color: var(--accent);
  font: 600 0.97rem/1.2 var(--sans); letter-spacing: .02em; transition: background .2s, color .2s; text-decoration: none; display: inline-block;
}
.jn-chip:hover { background: var(--accent); color: #fff; }

.jn-lead { display: flex; flex-direction: column; gap: .5rem; min-width: 250px; }
.jn-lead input { padding: .6rem .8rem; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.65); color: var(--text); font: 500 1rem var(--sans); }
.jn-lead input:focus { outline: none; border-color: var(--accent); }
.jn-lead button { padding: .65rem; border-radius: 8px; background: var(--accent); color: #fff; font: 700 1rem var(--sans); letter-spacing: .04em; }
.jn-lead button:disabled { opacity: .6; }
.jn-lead .jn-err { color: #a33; font-size: 0.92rem; min-height: 1em; }
.jn-hp { position: absolute; left: -9999px; height: 0; width: 0; overflow: hidden; }

.jn-form { display: flex; gap: .6rem; padding: .8rem; border-top: 1px solid var(--line); }
.jn-in { flex: 1; min-width: 0; padding: .75rem 1rem; border-radius: 50px; border: 1px solid var(--line); background: rgba(255,255,255,.55); color: var(--text); font: 500 1.05rem var(--sans); }
.jn-in:focus { outline: none; border-color: var(--accent); }
.jn-send { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; transition: transform .2s; }
.jn-send:hover { transform: scale(1.06); }
.jn-send:disabled { opacity: .5; transform: none; cursor: default; }
html[dir="rtl"] .jn-send svg { transform: scaleX(-1); }

html[data-theme="dark"] .jn-launch, html[data-theme="dark"] .jn-panel, html[data-theme="dark"] .jn-bubble { background: #221d15; color: #e8dcc4; border-color: rgba(210,178,106,.4); }
html[data-theme="dark"] .jn-launch { border-color: #d2b26a; color: #f1e7d0; }
html[data-theme="dark"] .jn-face::after { border-color: #221d15; }
html[data-theme="dark"] .jn-role { color: #b9a982; }
html[data-theme="dark"] .jn-bot { background: #2e2719; }
html[data-theme="dark"] .jn-in, html[data-theme="dark"] .jn-lead input { background: rgba(255,255,255,.07); color: #e8dcc4; border-color: rgba(210,178,106,.25); }
html[data-theme="dark"] .jn-chip { color: #d2b26a; border-color: #d2b26a; }
html[data-theme="dark"] .jn-chip:hover { background: #d2b26a; color: #1c1812; }
html[data-theme="dark"] .jn-me, html[data-theme="dark"] .jn-send, html[data-theme="dark"] .jn-lead button { background: #a6842f; }

@media (max-width: 640px) {
  .jn-launch { padding: .35rem; gap: 0; }
  .jn-txt { display: none; }
  .jn-face { width: 68px; height: 68px; }
  .jn-launch.jn-fixed { right: 1.2rem; bottom: 8.5rem; }
  .jn-panel { inset: .5rem !important; width: auto !important; height: auto !important; border-radius: 14px; transform-origin: bottom right; }
  .jn-in, .jn-lead input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .jn-panel, .jn-line, .jn-bubble { transition: none; animation: none; }
  .jn-typing i { animation: none; opacity: .6; }
}


/* ── Dugme: iste veličine kao Instagram / WhatsApp (≈52px visine) ── */
.jn-launch {
  gap: .55rem; min-height: 52px; padding: .4rem 1.05rem .4rem .4rem; border-width: 2px;
  box-shadow: 0 4px 18px rgba(60,47,30,.35), 0 2px 8px rgba(60,47,30,.2);
}
.jn-launch:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 8px 26px rgba(60,47,30,.45); }
.jn-launch .jn-face { width: 40px; height: 40px; }
.jn-launch .jn-face img { border-width: 1.5px; }
.jn-launch .jn-face::after { width: 11px; height: 11px; right: -1px; bottom: -1px; border-width: 2px; }
.jn-launch .jn-role { display: none; }
.jn-launch .jn-lbl { font: 700 .95rem/1 var(--sans); letter-spacing: .06em; }
@media (max-width: 640px) {
  .jn-launch { padding: .3rem; gap: 0; width: 54px; height: 54px; min-height: 0; justify-content: center; }
  .jn-launch .jn-face { width: 44px; height: 44px; }
  .jn-launch.jn-fixed { right: 1.2rem; bottom: 8.5rem; }
}