:root{--red:#8c1017;--red-dark:#6b0e15;--pine:#116239;--pine-dark:#08452d;--green-border:#d5a85e;--ink:#253044;--muted:#5c6170;--warm:#faf5ec;--cream:#fffaf2;--line:#d9c7a8;--font-title:"Cinzel",Georgia,"Times New Roman",serif;--font-body:"Inter",Arial,sans-serif;--shadow:0 8px 26px rgba(62,46,28,.10)}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#ece9e5;font-family:var(--font-body);font-size:16px;-webkit-font-smoothing:antialiased}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid #a67b36;outline-offset:3px}a{color:inherit}svg{flex-shrink:0}.shell{max-width:1160px;margin:0 auto;min-height:100dvh;background:var(--warm);box-shadow:0 12px 55px rgba(23,23,23,.12);overflow:clip}
    .site-header{height:106px;position:sticky;top:0;z-index:30;background:rgba(255,251,245,.97);display:flex;align-items:center;gap:10px;padding:12px clamp(18px,4vw,45px);box-shadow:0 4px 16px rgba(61,45,24,.055);border-bottom:1px solid rgba(138,95,48,.12);backdrop-filter:blur(14px);transition:height .4s ease,padding .4s ease}
    .brand{display:flex;align-items:center;text-decoration:none;min-width:0;flex:1;gap:9px}.santa-logo{height:86px;width:135px;object-fit:contain;object-position:left center;mix-blend-mode:multiply;flex:none;transition:height .35s,width .35s}.brand-copy{display:flex;flex-direction:column;min-width:0}.brand-name{font-family:var(--font-title);font-size:clamp(19px,2.75vw,37px);font-weight:600;letter-spacing:-.9px;line-height:1.18;color:var(--red-dark);white-space:nowrap}.brand-tag{font-family:var(--font-title);font-size:clamp(8px,1.05vw,13px);letter-spacing:.21em;color:#80592f;line-height:1.5;white-space:nowrap;margin-top:2px}.top-actions{display:flex;align-items:center;gap:10px}.header-icon{background:#f8f2e8;border:1px solid #e8decf;border-radius:17px;width:56px;height:56px;display:grid;place-items:center;color:var(--ink);text-decoration:none;box-shadow:0 2px 8px rgba(88,61,25,.035);transition:transform .18s,background .18s}.header-icon svg{height:24px;width:24px}.header-icon:hover{transform:translateY(-1px);background:#fff}.header-icon.phone{color:var(--pine)}.header-icon[aria-expanded="true"]{background:#e9f1e7}.menu{position:absolute;top:calc(100% - 3px);right:28px;width:min(280px,calc(100vw - 32px));padding:12px;background:#fffaf3;border:1px solid #e4d5bd;box-shadow:var(--shadow);border-radius:16px;display:none;flex-direction:column;gap:3px}.menu.show{display:flex}.menu a,.menu button{border:0;background:none;color:#493c2d;font-size:14px;font-weight:600;padding:13px 14px;text-align:left;border-radius:8px;text-decoration:none}.menu a:hover,.menu button:hover{background:#f3e7d7}
    .hero{position:relative;min-height:590px;background:radial-gradient(circle at 22% 16%,rgba(255,255,255,.94) 0,rgba(255,255,255,0) 44%),linear-gradient(140deg,#fff9ed 0%,#f9edda 45%,#dae1e2 100%);overflow:hidden;max-height:800px;transition:max-height .65s cubic-bezier(.22,.75,.24,1),min-height .65s ease,opacity .45s ease,padding .5s ease}.hero::after{content:"";position:absolute;inset:auto 0 0;height:100px;background:linear-gradient(transparent,#fff9f0);pointer-events:none}.hero-snow{position:absolute;inset:0;opacity:.22;pointer-events:none;background-image:radial-gradient(#fff 1px,transparent 1px),radial-gradient(#c7bbab .9px,transparent .9px);background-size:44px 44px,69px 69px;background-position:0 0,25px 32px}.hero-art{position:absolute;right:0;bottom:-7px;height:102%;width:60%;object-fit:cover;object-position:54% center;filter:saturate(.96);-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 13%,#000 36%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.18) 13%,#000 36%)}.hero-copy{position:relative;z-index:2;width:56%;padding:56px 0 62px clamp(26px,5.2vw,70px)}.hero-copy h1{font-family:var(--font-title);font-size:clamp(38px,4.15vw,58px);font-weight:600;letter-spacing:-1px;line-height:1.22;margin:0;color:var(--red);text-shadow:0 1px rgba(255,255,255,.42)}.hero-copy h1 span{display:block;color:#876134}.ornament{display:flex;gap:12px;align-items:center;margin:22px 0;width:min(335px,85%);color:#ad884e;font-size:25px}.ornament::before,.ornament::after{content:"";height:1px;background:#b89562;flex:1}.hero-desc{font-family:var(--font-title);font-size:clamp(16px,1.65vw,22px);line-height:1.58;max-width:450px;font-weight:500;letter-spacing:.02em;margin:0;color:#26354e}.price-tag{display:inline-flex;flex-direction:column;align-items:center;margin-top:28px;padding:18px 27px 16px;background:linear-gradient(#fffcf6,#f7e7cb);border:1px solid #e9d6b7;outline:1px solid rgba(197,159,110,.18);outline-offset:4px;border-radius:10px;box-shadow:0 5px 24px rgba(78,52,23,.13);font-family:var(--font-title);max-width:100%}.price-tag strong{font-size:clamp(30px,3.1vw,43px);color:var(--red);line-height:1.15}.price-tag small{font-family:var(--font-body);font-size:14px;color:#60442c;font-weight:600;letter-spacing:.02em;margin-top:4px}
    .separator{display:flex;align-items:center;gap:14px;padding:18px clamp(22px,4vw,46px) 12px;background:#fff9f0;color:#a88245;transition:padding .3s}.separator span{height:1px;background:linear-gradient(to right,transparent,#a88245);flex:1}.separator span:last-child{background:linear-gradient(to left,transparent,#a88245)}.separator svg{height:26px;width:26px}
    .chat-area{position:relative;padding:14px clamp(15px,4vw,52px) 25px;background:radial-gradient(ellipse 75% 52% at 48% 8%,rgba(255,255,255,.85),transparent),linear-gradient(160deg,#fffaf4 0%,#f8f1e7 65%,#f3eee7 100%);scroll-margin-top:85px}.chat-area::after{position:absolute;content:"";height:190px;bottom:0;left:0;right:0;opacity:.19;pointer-events:none;background:url('../images/snezna-pozadina.webp') center bottom/100% auto no-repeat}.chat-area::before{content:"✳                         ❄                             ✧                     ❄";position:absolute;inset:0;color:#c8a671;opacity:.14;font-size:31px;letter-spacing:32px;overflow:hidden;pointer-events:none;white-space:pre-wrap;line-height:250px}
    .chat-card{position:relative;z-index:1;max-width:980px;margin:0 auto;display:flex;flex-direction:column;min-height:390px;transition:min-height .35s ease;scroll-margin-top:105px}.chat-status{font-size:13px;text-align:center;color:#8c8170;letter-spacing:.08em;padding:6px 0 17px;font-family:var(--font-title);display:none}.thread{display:flex;flex-direction:column;align-items:stretch;gap:22px;min-height:210px;max-height:530px;overflow-y:auto;overflow-x:hidden;scrollbar-color:#e6d9c6 transparent;scrollbar-width:thin;padding:10px 10px 18px 8px;scroll-behavior:smooth}.chat-message{display:flex;align-items:flex-start;gap:15px;animation:floatin .3s ease-out both}.avatar{width:91px;height:91px;object-fit:cover;object-position:center;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 15px rgba(86,64,30,.14);flex:none;background:#f5ead4}.bubble-wrap{max-width:min(710px,calc(100% - 108px));display:flex;flex-direction:column;align-items:flex-start}.bubble{background:rgba(255,255,255,.83);border:1px solid #e8ddd0;border-radius:24px;padding:22px 27px;box-shadow:var(--shadow);font-family:Georgia,"Times New Roman",serif;font-size:clamp(17px,1.9vw,21px);line-height:1.55;color:#34435b;white-space:pre-line;overflow-wrap:anywhere}.bubble strong{font-family:var(--font-title);font-size:clamp(17px,1.8vw,23px);font-weight:600;color:#20243c}.msg-time{font:13px var(--font-body);margin:7px 7px 0;color:#a1978b}.chat-message.user{justify-content:flex-end}.user .bubble-wrap{align-items:flex-end;max-width:78%}.user .bubble{background:#157041;color:#fff;border-color:#197444;border-radius:23px 23px 5px 23px;font-family:var(--font-body);font-size:16px;line-height:1.6;padding:15px 20px;box-shadow:0 5px 16px rgba(16,96,55,.12)}
    .choices{display:grid;grid-template-columns:1fr;gap:10px;max-width:570px;width:100%;margin-top:15px}.choices.used{display:none}.retro-btn{appearance:none;display:flex;align-items:center;justify-content:flex-start;gap:16px;min-height:58px;padding:12px 22px;color:#fffef7;text-decoration:none;text-align:left;font-family:var(--font-title);font-size:clamp(14px,1.75vw,18px);font-weight:600;line-height:1.35;letter-spacing:.025em;background:linear-gradient(155deg,#20784b,#075031);border:2px solid #bda06c;border-radius:13px;outline:1px solid #165d34;outline-offset:3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -2px 2px rgba(0,0,0,.19),0 3px 13px rgba(32,63,34,.14);transition:filter .15s,transform .15s}.retro-btn:hover{filter:brightness(1.09);transform:translateY(-1px)}.retro-btn svg{height:24px;width:24px;color:#efd59b}.retro-btn .arrow{margin-left:auto;color:#f8df9f}.retro-btn.secondary{background:linear-gradient(140deg,#286c4a,#155139)}.retro-btn.small{font-size:14px;padding:12px 16px;min-height:49px}.retro-btn.ghost{background:linear-gradient(160deg,#fbf7ed,#f2e8d7);color:#346143;outline-color:#d4c1a2;border-color:#dac29f}.retro-btn.ghost svg{color:#3b7352}
    .intro-choices{margin-left:109px}.chat-message .choices{margin-left:0}.message-actions{margin:0 0 0 109px}.letter-preview{margin:14px 0 0;padding:26px 29px;background:#fffcf2;border:1px solid #d6c3a1;border-radius:8px;box-shadow:0 7px 24px rgba(70,52,28,.08);font-family:Georgia,serif;font-size:17px;line-height:1.75;color:#3b3d37;white-space:pre-line;max-width:560px}.letter-preview em{font-family:var(--font-title);color:#9a2026;font-style:normal;font-size:13px;display:block;margin-bottom:12px}.letter-preview .signed{display:block;margin-top:13px;text-align:right;font-style:italic;color:#9a2026}.muted-note{color:#8c8075;font-size:13px;margin-top:9px}
    .composer{margin-top:22px;display:flex;align-items:flex-end;gap:12px;padding:12px;background:rgba(255,253,250,.88);border:1px solid #e7dfd1;border-radius:28px;box-shadow:0 5px 24px rgba(75,55,25,.06)}.composer textarea{min-height:49px;max-height:130px;resize:none;flex:1;background:#fff;border:1px solid #e7ded4;border-radius:24px;outline:none;padding:14px 20px;color:#333f44;line-height:1.45;font-family:var(--font-body);font-size:15px;box-shadow:inset 0 1px 5px rgba(0,0,0,.03);overflow-y:auto}.composer textarea::placeholder{color:#989a9e}.composer button{width:50px;height:50px;display:grid;place-items:center;flex:none;border:1px solid #1c7544;border-radius:50%;color:#fff;background:linear-gradient(135deg,#318851,#086438);box-shadow:0 3px 9px rgba(17,86,47,.14)}.composer button:disabled{background:#aeb6ae;border-color:#abb5ab;box-shadow:none;cursor:default}.composer button svg{width:22px;height:22px}.chat-footnote{margin:12px 4px 2px;text-align:center;font-size:13px;color:#85796a;line-height:1.6}.typing{display:flex;gap:5px;align-items:center;padding:5px 0}.typing i{width:7px;height:7px;border-radius:50%;background:#80ad8a;animation:pulse 1s infinite}.typing i:nth-child(2){animation-delay:.14s}.typing i:nth-child(3){animation-delay:.28s}
    .site-footer{position:relative;z-index:3;border-top:1px solid #d5bd98;background:#fff8ef;display:flex;justify-content:center;align-items:center;gap:22px;flex-wrap:wrap;padding:21px 20px 24px;color:#76614d;font-family:var(--font-title);font-size:12px;letter-spacing:.06em}.site-footer a{text-decoration:none}.site-footer a:hover{text-decoration:underline}.site-footer .line{height:16px;background:#c7af8f;width:1px}.site-footer small{display:block;width:100%;text-align:center;font:12px var(--font-body);color:#968572}
    body.is-chatting .site-header{height:78px;padding-top:6px;padding-bottom:6px}body.is-chatting .santa-logo{height:58px;width:90px}body.is-chatting .brand-name{font-size:clamp(17px,2.1vw,27px)}body.is-chatting .brand-tag{font-size:clamp(7px,.9vw,10px)}body.is-chatting .hero{max-height:0;min-height:0;opacity:0;pointer-events:none}body.is-chatting .separator{padding:5px 25px 0}body.is-chatting .chat-area{padding-top:6px}body.is-chatting .chat-status{display:block}body.is-chatting .chat-card{min-height:min(660px,calc(100dvh - 200px))}body.is-chatting .thread{flex:1;max-height:min(600px,calc(100dvh - 295px));min-height:250px}body.is-chatting .composer{position:sticky;bottom:8px;z-index:4}
    @keyframes floatin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,70%,100%{opacity:.2}35%{opacity:1}}
    @media(max-width:760px){.site-header{height:78px;padding:8px 13px;gap:5px}.santa-logo{height:59px;width:71px}.brand{gap:3px}.brand-name{font-size:clamp(16px,3.8vw,27px);letter-spacing:-.5px}.brand-tag{font-size:clamp(7px,1.65vw,10px);letter-spacing:.1em}.top-actions{gap:6px}.header-icon{width:41px;height:41px;border-radius:12px}.header-icon svg{height:21px;width:21px}.hero{min-height:530px}.hero-copy{padding:29px 13px 22px 25px;width:86%}.hero-copy h1{font-size:clamp(31px,6vw,46px);max-width:500px}.hero-desc{font-size:clamp(14px,2.4vw,19px);max-width:330px}.ornament{margin:15px 0;font-size:18px;width:56%}.price-tag{padding:11px 16px;margin-top:16px}.price-tag strong{font-size:clamp(23px,5vw,35px)}.price-tag small{font-size:12px}.hero-art{width:93%;height:68%;bottom:0;object-position:60% 45%;-webkit-mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.15) 28%,#000 57%),linear-gradient(to bottom,transparent 0%,#000 23%);mask-image:linear-gradient(to right,transparent 0%,rgba(0,0,0,.15) 28%,#000 57%),linear-gradient(to bottom,transparent 0%,#000 23%);-webkit-mask-composite:source-in;mask-composite:intersect}.separator{padding:16px 17px 9px}.chat-area{padding:10px 12px 24px}.chat-message{gap:11px}.avatar{width:65px;height:65px}.bubble-wrap{max-width:calc(100% - 76px)}.bubble{padding:15px 17px;border-radius:19px;font-size:17px}.bubble strong{font-size:17px}.choices{max-width:100%;gap:10px}.intro-choices{margin-left:76px;width:calc(100% - 83px)}.message-actions{margin-left:76px}.retro-btn{min-height:51px;padding:10px 14px;font-size:clamp(13px,2.7vw,16px);outline-offset:2px}.retro-btn svg{height:20px;width:20px}.composer{padding:7px;gap:7px;border-radius:23px;margin-top:16px}.composer textarea{padding:13px 12px;min-height:45px;font-size:14px}.composer button{width:45px;height:45px}.chat-footnote{font-size:12px}.letter-preview{font-size:15px;padding:16px}.site-footer{gap:12px;padding:20px 12px;font-size:10px;letter-spacing:0}body.is-chatting .site-header{height:64px;padding:5px 12px}body.is-chatting .santa-logo{height:45px;width:58px}body.is-chatting .brand-name{font-size:clamp(15px,3.65vw,22px)}body.is-chatting .header-icon{width:38px;height:38px}body.is-chatting .chat-card{min-height:calc(100dvh - 168px)}body.is-chatting .thread{max-height:calc(100dvh - 245px);min-height:200px}}
    @media(max-width:420px){.brand-name{font-size:15px}.brand-tag{font-size:7px}.santa-logo{width:59px;height:55px}.header-icon{width:35px;height:38px}.header-icon svg{height:19px;width:19px}.hero{min-height:500px}.hero-copy{width:100%;padding-left:18px}.hero-copy h1{font-size:32px}.hero-desc{font-size:14px;max-width:235px}.hero-art{width:100%;height:61%;object-position:61% center}.price-tag{margin-top:12px}.price-tag strong{font-size:26px}.price-tag small{font-size:11px}.avatar{width:51px;height:51px}.bubble-wrap{max-width:calc(100% - 62px)}.bubble{font-size:16px}.intro-choices{margin-left:62px;width:calc(100% - 70px)}.message-actions{margin-left:62px}.retro-btn{font-size:12px;gap:8px}.site-footer{font-size:9px}body.is-chatting .brand-name{font-size:14px}}
    @media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}
  

/* ===== Novi virtuelni sajt: dorade prema priloženom vizuelnom rešenju ===== */
:root {
  --red: #950c17;
  --pine: #0c613b;
  --ink: #1b2c4b;
}
body { background: #f3eee9; }
.shell { max-width: 1160px; }
.site-header {
  height: 120px;
  padding-inline: clamp(22px, 4.3vw, 58px);
}
.santa-logo { height: 104px; width: 160px; }
.brand { gap: 8px; }
.brand-name { font-size: clamp(27px, 4.05vw, 48px); letter-spacing: -.04em; }
.brand-tag { font-size: clamp(9px, 1.22vw, 16px); letter-spacing: .22em; }
.header-icon { width: 69px; height: 69px; border-radius: 18px; }
.header-icon svg { width: 29px; height: 29px; }
.top-actions { gap: 18px; }
.hero {
  min-height: 615px;
  background: radial-gradient(ellipse at 20% 18%, rgba(255,255,255,.55), transparent 55%),
              linear-gradient(145deg, #fdf3e6 0%, #f5e9df 43%, #cedae6 100%);
}
.hero-copy { width: 63%; padding: 69px 0 65px clamp(35px,6.8vw,82px); }
.hero-copy h1 { font-size: clamp(46px, 6.4vw, 78px); letter-spacing: -.045em; line-height: 1.13; }
.hero-copy h1 span { letter-spacing: -.052em; }
.hero-art { width: 65%; height: 103%; object-position: 55% 50%; }
.ornament { width: min(445px,90%); margin: 26px 0 20px; font-size: 30px; }
.hero-desc {
  font-family: Georgia,'Times New Roman',serif;
  font-size: clamp(22px,2.75vw,34px);
  line-height: 1.35;
  max-width: 460px;
}
.price-tag { margin-top: 30px; padding: 13px 34px 17px; }
.price-tag strong { font-size: clamp(34px,4.4vw,54px); }
.price-tag small { font-family: Georgia,serif; font-size: clamp(14px,1.55vw,20px); text-transform: uppercase; letter-spacing: .03em; }
.separator { padding: 17px clamp(23px,4vw,52px) 16px; }
.separator svg { width: 40px; height: 40px; }
.chat-area {
  padding-top: 18px;
  padding-bottom: 36px;
  background: radial-gradient(ellipse 90% 40% at 50% 10%, rgba(255,255,255,.95),transparent),
              linear-gradient(175deg,#fffaf3,#f7f0e6 70%,#f9f5ed);
}
.chat-area::after { height: 285px; opacity: .34; }
.chat-card { max-width: 980px; }
.thread { max-height: 580px; gap: 15px; padding-bottom: 12px; }
.chat-message.bot { margin-left: clamp(0px,3.2vw,55px); }
.avatar { width: 118px; height: 118px; }
.bubble-wrap { max-width: min(670px,calc(100% - 141px)); }
.bubble { font-size: clamp(19px, 2.15vw, 27px); padding: 23px 31px; border-radius: 34px; }
.bubble strong { font-size: clamp(19px,2.25vw,29px); }
.intro-choices { max-width: 515px; width: calc(100% - 40px); margin: 6px auto 4px; }
.retro-btn { min-height: 72px; font-size: clamp(17px,1.9vw,23px); border-color: #bd9b5f; }
.retro-btn svg { height: 29px; width: 29px; }
.composer { margin-top: 27px; border-radius: 45px; padding: 11px; gap: 13px; align-items: center; }
.composer textarea { min-height: 64px; padding: 20px 12px; font-family: Georgia,serif; font-size: clamp(18px,2vw,24px); background: transparent; border: 0; box-shadow: none; }
.composer .send-button { width: 66px; height: 66px; }
.composer .attach-button {
  width: 52px; height: 52px; border: 0; background: transparent;
  color: #9299a5; box-shadow: none; cursor: not-allowed; opacity: .8;
}
.composer .attach-button svg { width: 28px; height: 28px; }
.composer .send-button svg { width: 29px; height: 29px; }
.chat-footnote { font-family: var(--font-body); font-size: 12px; }
.site-footer { min-height: 92px; font-size: 13px; }
.social-icons { display: flex; gap: 17px; color: #9b8f80; align-items: center; }
.social-icons svg { width: 22px; height: 22px; }
.site-footer .line { flex: 0 0 1px; }
.typing { padding: 2px 7px; }
.typing i { width: 10px; height: 10px; }
/* Tajmer za automatsku poruku ne postoji: završetak animacije pokreće prikaz poruke. */
.typing-finish { width: 0; height: 0; position: absolute; pointer-events: none; animation: typingCycle 1.45s linear 1 both; }
@keyframes typingCycle { 0% { opacity: 0 } 100% { opacity: 1 } }
.demo-message .bubble { font-size: 17px; }
.composer textarea:focus-visible { outline: none; }
.composer:focus-within { outline: 2px solid #c5a477; outline-offset: 3px; }
body.is-chatting .hero { padding-top: 0; padding-bottom: 0; }
body.is-chatting .thread { max-height: min(610px,calc(100dvh - 285px)); }
body.is-chatting .intro-choices { margin-top: 15px; }
body.is-chatting .site-header { height: 78px; }
body.is-chatting .santa-logo { height: 59px; width: 93px; }
body.is-chatting .brand-name { font-size: clamp(20px,2.4vw,28px); }
body.is-chatting .header-icon { height: 49px; width: 49px; }
body.is-chatting .composer { position: sticky; bottom: 10px; }
@media(max-width: 760px) {
  .site-header { height: 78px; padding: 7px 12px; }
  .santa-logo { width: 78px; height: 64px; }
  .brand-name { font-size: clamp(17px, 3.7vw, 27px); }
  .brand-tag { font-size: clamp(7px,1.4vw,10px); letter-spacing: .08em; }
  .top-actions { gap: 6px; }
  .header-icon { width: 42px; height: 42px; border-radius: 12px; }
  .header-icon svg { height: 21px; width: 21px; }
  .hero { min-height: 545px; }
  .hero-copy { width: 95%; padding: 30px 12px 20px 22px; }
  .hero-copy h1 { font-size: clamp(32px,6.5vw,49px); max-width: 600px; }
  .hero-desc { font-size: clamp(16px,2.9vw,22px); max-width: 340px; }
  .hero-art { width: 96%; height: 69%; object-position: 60% center; }
  .price-tag { padding: 12px 20px; margin-top: 15px; }
  .price-tag strong { font-size: clamp(26px,5.3vw,39px); }
  .price-tag small { font-size: 13px; }
  .chat-area { padding-top: 12px; }
  .chat-message.bot { margin-left: 0; }
  .avatar { width: 66px; height: 66px; }
  .bubble-wrap { max-width: calc(100% - 78px); }
  .bubble { font-size: 17px; padding: 16px 18px; border-radius: 23px; }
  .bubble strong { font-size: 18px; }
  .intro-choices { width: calc(100% - 82px); margin-left: 80px; margin-right: 0; }
  .retro-btn { min-height: 58px; font-size: clamp(13px,2.6vw,18px); padding: 10px 14px; }
  .retro-btn svg { width: 23px; height: 23px; }
  .composer { padding: 7px; gap: 5px; margin-top: 20px; }
  .composer textarea { min-height: 48px; padding: 13px 6px; font-size: 16px; }
  .composer .attach-button { width: 39px; height: 43px; }
  .composer .attach-button svg { height: 23px; width: 23px; }
  .composer .send-button { width: 47px; height: 47px; }
  .composer .send-button svg { height: 22px; width: 22px; }
  .site-footer { gap: 12px; padding: 21px 15px; }
  .site-footer .social-icons { width: 100%; justify-content: center; }
  body.is-chatting .site-header { height: 65px; }
  body.is-chatting .santa-logo { height: 45px; width: 58px; }
  body.is-chatting .brand-name { font-size: clamp(15px,3.5vw,22px); }
  body.is-chatting .header-icon { width: 38px; height: 38px; }
  body.is-chatting .chat-card { min-height: calc(100dvh - 165px); }
}
@media(max-width: 420px) {
  .brand { gap: 2px; }
  .santa-logo { width: 59px; height: 55px; }
  .brand-name { font-size: 15px; }
  .brand-tag { font-size: 7px; }
  .hero { min-height: 510px; }
  .hero-copy h1 { font-size: clamp(30px,8vw,34px); }
  .hero-desc { font-size: 16px; max-width: 275px; }
  .hero-art { width: 100%; height: 61%; }
  .avatar { width: 54px; height: 54px; }
  .bubble-wrap { max-width: calc(100% - 64px); }
  .intro-choices { margin-left: 65px; width: calc(100% - 69px); }
  .retro-btn { gap: 9px; font-size: 12px; }
  .site-footer { font-size: 10px; }
}
@media(prefers-reduced-motion:reduce) { .typing-finish { animation-duration: .01ms; } }

/* Početni ekran: verno prenošenje dostavljenog dizajna. */
.site-header { z-index: 100; }
.hero-art { background: transparent; }
.intro-choices { margin-left: auto; margin-right: auto; }
.retro-btn { cursor: pointer; }
.retro-btn:focus-visible,.header-icon:focus-visible {outline: 3px solid #d1a65f; outline-offset:5px;}
/* U postojećem prototipu polje je uvek na dnu razgovora. */
.composer { position: relative; }
.composer .send-button {border-radius:50%;background:linear-gradient(145deg,#378651,#10643a);}
.composer .send-button:disabled { opacity: .55; }
.composer .attach-button { flex: 0 0 52px; padding: 0; }
.composer .attach-button[disabled] { cursor: not-allowed; }
.typing-avatar { flex: none; }
.demo-note { margin: 12px 4px 0; text-align:center; font-size:12px; color:#877e73; }
.chat-bubble-link { color:#0b643b; text-decoration:underline; }
.ornament {font-size:30px;}
.typing-finish { display:inline-block; position:absolute; width:1px; height:1px; overflow:hidden; animation: typingCycle 1.5s linear 1 both; }
@keyframes typingCycle { from { opacity:0 } to { opacity:1 } }
.site-footer .social-icons {display:flex;gap:14px;align-items:center;color:#8a8379;}
.site-footer .social-icons svg {width:21px;height:21px;}
.site-footer small {display:none;}
.site-footer {margin: 0 25px;}
@media(max-width:760px){
  .site-footer {margin: 0 14px;}
  .intro-choices {margin-left:auto;margin-right:auto;width:min(100%,460px);}
  .chat-area::after {background-size:cover;opacity:.24;}
}
@media(max-width:420px){
  .intro-choices {margin-left:auto;width:100%;}
  .site-footer {margin: 0 10px;}
}

/* Bočna snežna scenografija, bez dupliranja sadržaja prototipa. */
.chat-area::after {
  height: 300px; opacity: .44;
  background-image: url('../images/snow-left.webp'),url('../images/snow-right.webp');
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, right bottom;
  background-size: auto 100%, auto 100%;
  -webkit-mask-image: linear-gradient(to bottom,transparent 0%,#000 38%);
  mask-image: linear-gradient(to bottom,transparent 0%,#000 38%);
}
.sr-only {
 position:absolute!important;width:1px!important;height:1px!important;padding:0!important;
 margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;
 white-space:nowrap!important;border:0!important;
}
.demo-note {display:none;}
body.is-chatting .demo-note {display:block;}

/* Novi tok personalizacije: jedan jedini scrollbar pripada dokumentu. */
.thread,
body.is-chatting .thread {
  max-height: none !important;
  overflow: visible !important;
  scroll-behavior: auto;
}
body.is-chatting .chat-card {min-height:calc(100dvh - 135px);}
.chat-area {overflow:visible;}
.chat-card {overflow:visible;}
.chat-message.bot .bubble {white-space:pre-line;}
body.is-chatting .composer {
  position:sticky;
  bottom:max(10px,env(safe-area-inset-bottom));
  z-index:20;
  margin-left:0;
  margin-right:0;
  box-shadow:0 8px 30px rgba(45,42,29,.16);
}
.chat-message.bot .bubble-wrap:has(.letter-display){max-width:min(760px,calc(100% - 130px));width:100%;}
.letter-display {width:100%;min-width:0;margin:15px 0 10px;}
.letter-display-title {font:600 15px/1.5 var(--font-title);color:#7a2d20;text-align:center;margin:0 0 13px;}
.letter-sheet {position:relative;min-height:825px;max-width:640px;margin:0 auto;box-shadow:0 12px 35px #4833153b;background:#fff9e9 center top/100% 100% no-repeat;border:1px solid #e2cda7;padding:175px 47px 95px;}
.letter-text {font-family:'EB Garamond',Georgia,'Times New Roman',serif;font-size:19px;line-height:1.55;color:#242b26;overflow-wrap:anywhere;}
.letter-text p,.letter-text div {margin:0 0 12px;}
.letter-text em {font-style:normal;}
.letter-instructions {font:13px/1.65 var(--font-body);text-align:center;color:#75634c;margin:13px auto 0;max-width:600px;}
.chat-error {padding:13px 20px;background:#fff2e9;border:1px solid #b55c46;border-radius:12px;color:#963a28;max-width:680px;margin-left:100px;}
#chat-notice:not(:empty) {display:block;color:#71654f;margin:12px auto;}
@media(max-width:760px){
 .chat-message.bot .bubble-wrap:has(.letter-display){max-width:calc(100% - 80px);}
 .letter-sheet{min-height:510px;padding:25% 7% 18%;}
 .letter-text{font-size:clamp(10px,2.65vw,18px);line-height:1.45;}
 .letter-text p,.letter-text div {margin-bottom:6px;}
 .letter-display-title{font-size:12px;}
 .chat-error{margin-left:0;}
 body.is-chatting .composer{bottom:max(6px,env(safe-area-inset-bottom));}
}
@media(max-width:420px){
 .chat-message.bot .bubble-wrap:has(.letter-display){max-width:calc(100% - 63px);}
 .letter-sheet{min-height:390px;padding:27% 5.5% 17%;}
 .letter-text{font-size:10px;}
}