/* WhatsApp benzeri sohbet görünümü. Kendi çizimimiz: WhatsApp logosu/ikonu/varlığı yok.
   Renkler burada sabittir (bir uygulamanın taklidi; marka değil). */

.wa{--wa-green:#008069;--wa-dark:#006b58;--wa-out:#d9fdd3;--wa-in:#fff;--wa-text:#111b21;--wa-meta:#667781;--wa-blue:#027eb5;--wa-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
  position:relative;display:flex;flex-direction:column;height:100%;font:400 14.5px/1.35 var(--wa-font);color:var(--wa-text);background:#efeae2}

.wa-status{flex:none;height:46px;padding:14px 26px 0 30px;display:flex;justify-content:space-between;align-items:center;background:var(--wa-dark);color:#fff;font:600 14px/1 var(--wa-font)}
.wa-status__icons{display:flex;align-items:center;gap:5px}
.wa-status__icons svg{display:block}

.wa-head{flex:none;height:54px;display:grid;grid-template-columns:26px 38px 1fr auto;align-items:center;gap:8px;padding:0 10px 0 8px;background:var(--wa-green);color:#fff;z-index:3}
.wa-head__back{display:grid;place-items:center}
.wa-head__avatar{width:36px;height:36px;border-radius:50%;object-fit:cover}
.wa-head__title{line-height:1.15;min-width:0}
.wa-head__title b{display:block;font:600 16px/1.2 var(--wa-font);white-space:nowrap}
.wa-head__title span{display:block;font-size:12px;opacity:.85}
.wa-head__icons{display:flex;align-items:center;gap:14px}

.wa-chat{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;background:
  radial-gradient(circle at 14px 16px,rgba(120,100,70,.10) 1.6px,transparent 1.8px) 0 0/44px 48px,
  radial-gradient(circle at 34px 40px,rgba(120,100,70,.07) 1.2px,transparent 1.4px) 0 0/52px 56px,
  #efeae2}
.wa-chat::-webkit-scrollbar{display:none}
.wa-chat__inner{min-height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;padding:10px 10px 12px}
.wa-day{align-self:center;margin:2px 0 6px}
.wa-day span{display:inline-block;padding:4px 11px;border-radius:8px;background:#fff;color:#54656f;font:500 11.5px/1.4 var(--wa-font);text-transform:uppercase;box-shadow:0 1px .5px rgba(11,20,26,.13)}

.wa-msg{display:flex;flex-direction:column;max-width:86%;animation:wa-in .24s cubic-bezier(.2,.8,.3,1) both}
.wa-msg.no-anim,.is-calm .wa-msg{animation:none}
@keyframes wa-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.wa-msg--in{align-self:flex-start;align-items:stretch}
.wa-msg--actions{min-width:212px}
.wa-msg--out{align-self:flex-end;align-items:flex-end}
.wa-bubble{position:relative;padding:6px 9px 5px;border-radius:9px;background:var(--wa-in);box-shadow:0 1px .5px rgba(11,20,26,.13);overflow-wrap:anywhere}
.wa-msg--in .wa-bubble{border-top-left-radius:2px}
.wa-msg--out .wa-bubble{background:var(--wa-out);border-top-right-radius:2px}
.wa-text b{font-weight:650}
.wa-text code{font:500 13px ui-monospace,SFMono-Regular,Menlo,monospace;background:rgba(0,0,0,.06);padding:1px 4px;border-radius:4px}
.wa-time{float:right;margin:6px 0 -3px 10px;display:inline-flex;align-items:center;gap:3px;font-size:11px;line-height:1;color:var(--wa-meta)}
.wa-ticks{display:inline-flex;color:#53bdeb}
.wa-bubble::after{content:"";display:block;clear:both}
.wa-header{font:650 13.5px/1.3 var(--wa-font);margin-bottom:3px}
.wa-footer{margin-top:4px;font-size:12px;color:var(--wa-meta)}
.tg-cmd{color:var(--wa-blue)}

/* yazıyor balonu */
.wa-msg--typing .wa-bubble{display:flex;gap:4px;align-items:center;padding:12px 12px}
.wa-msg--typing i{width:6px;height:6px;border-radius:50%;background:#8696a0;animation:wa-bounce 1.1s infinite ease-in-out}
.wa-msg--typing i:nth-child(2){animation-delay:.15s}
.wa-msg--typing i:nth-child(3){animation-delay:.3s}
@keyframes wa-bounce{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.is-calm .wa-msg--typing i{animation:none}

/* belge */
.wa-doc{margin:-2px -4px 4px;background:rgba(11,20,26,.05);border-radius:7px;overflow:hidden;min-width:200px}
.wa-doc__preview{height:62px;padding:10px 14px;display:grid;gap:6px;align-content:start;background:#fff;opacity:.9}
.wa-doc__preview i{display:block;height:5px;border-radius:3px;background:#dfe5e8}
.wa-doc__preview i:nth-child(1){width:46%;background:#c9d2d6}
.wa-doc__preview i:nth-child(3){width:78%}
.wa-doc__preview i:nth-child(4){width:60%}
.wa-doc__row{display:flex;align-items:center;gap:9px;padding:8px 9px}
.wa-doc__badge{flex:none;display:grid;place-items:center;width:30px;height:34px;border-radius:5px;background:#e64a4a;color:#fff;font:700 9px/1 var(--wa-font);letter-spacing:.02em}
.wa-doc__badge--xlsx{background:#1d9a57}
.wa-doc__badge--png{background:#4a7be6}
.wa-doc__meta{display:grid;min-width:0}
.wa-doc__meta b{font:550 13px/1.25 var(--wa-font);overflow-wrap:anywhere}
.wa-doc__meta small{font-size:11.5px;color:var(--wa-meta)}
.wa-link{margin:-2px -4px 4px;padding:8px 10px;border-left:3px solid var(--wa-green);background:rgba(11,20,26,.05);border-radius:5px;display:grid}
.wa-link b{font:600 13.5px/1.25 var(--wa-font)}
.wa-link small{font-size:12px;color:var(--wa-blue);overflow-wrap:anywhere}

/* etkileşimli düğmeler (yanıt düğmeleri / liste düğmesi) */
.wa-actions{display:grid;gap:2px;margin-top:2px}
.wa-btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 10px;border:0;border-radius:8px;background:#fff;color:var(--wa-blue);font:550 14px/1.2 var(--wa-font);box-shadow:0 1px .5px rgba(11,20,26,.13);cursor:default;transition:background .2s,transform .15s}
.wa-btn.is-pressed{background:#e8f3f8}
.wa-btn.is-tapping{animation:wa-tap .35s ease}
@keyframes wa-tap{0%{transform:scale(1)}40%{transform:scale(.97);background:#d6ebf4}100%{transform:scale(1)}}

/* yazı alanı */
.wa-composer{flex:none;display:flex;align-items:flex-end;gap:6px;padding:6px 8px;background:#efeae2}
.wa-field{flex:1;min-width:0;display:flex;align-items:flex-end;gap:8px;min-height:40px;padding:7px 12px;border-radius:22px;background:#fff;color:#8696a0}
.wa-field__icon{flex:none;display:grid;place-items:center;height:26px}
.wa-field__text{flex:1;min-width:0;color:var(--wa-text);line-height:1.3;padding:3px 0;overflow-wrap:anywhere}
.wa-field__placeholder{color:#8696a0}
.is-typing .wa-field__placeholder{display:none}
.is-typing .wa-field__camera{display:none}
.is-typing [data-input]::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--wa-green);animation:wa-caret 1s steps(2) infinite}
@keyframes wa-caret{50%{opacity:0}}
.wa-fab{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--wa-green);color:#fff}
.wa-fab i{grid-area:1/1;display:grid;place-items:center}
.wa-fab__send{display:none!important}
.is-typing .wa-fab__mic{display:none!important}
.is-typing .wa-fab__send{display:grid!important}
.wa-home{flex:none;height:20px;background:#efeae2;position:relative}
.wa-home::after{content:"";position:absolute;left:50%;bottom:7px;width:112px;height:4px;border-radius:3px;background:#0b0f17;transform:translateX(-50%);opacity:.85}

/* liste seçim sayfası */
.wa-sheet{position:absolute;inset:0;z-index:6;pointer-events:none;background:rgba(11,20,26,0);transition:background .3s}
.wa-sheet.is-open{background:rgba(11,20,26,.45)}
.wa-sheet__panel{position:absolute;left:0;right:0;bottom:0;padding:10px 0 16px;background:#fff;border-radius:16px 16px 0 0;transform:translateY(105%);transition:transform .4s cubic-bezier(.3,.8,.3,1)}
.wa-sheet.is-open .wa-sheet__panel{transform:none}
.wa-sheet__panel header{display:flex;align-items:center;gap:14px;padding:6px 16px 10px;color:#54656f}
.wa-sheet__panel header b{font:600 15px/1.2 var(--wa-font);color:var(--wa-text)}
.wa-sheet__panel ul{list-style:none;margin:0;padding:0}
.wa-sheet__panel li{display:flex;align-items:center;gap:14px;padding:10px 16px;color:#8696a0}
.wa-sheet__panel li.is-on{background:#f0f2f5;color:var(--wa-green)}
.wa-sheet__panel li b{display:block;font:550 14px/1.25 var(--wa-font);color:var(--wa-text)}
.wa-sheet__panel li small{display:block;font-size:12px;color:var(--wa-meta)}
.wa-sheet__send{margin:12px 16px 0;padding:11px;border-radius:22px;background:var(--wa-green);color:#fff;text-align:center;font:600 14.5px/1.2 var(--wa-font)}
.is-calm .wa-sheet,.is-calm .wa-sheet__panel{transition:none}

/* bildirim şeridi */
.wa-notify{position:absolute;left:10px;right:10px;top:42px;z-index:7;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;padding:10px 12px;border-radius:20px;background:rgba(246,247,249,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 28px rgba(10,20,40,.28);transform:translateY(-140%);opacity:0;transition:transform .45s cubic-bezier(.2,.9,.3,1),opacity .3s}
.wa-notify.is-shown{transform:none;opacity:1}
.wa-notify__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--wa-green);color:#fff}
.wa-notify b{display:block;font:600 13px/1.2 var(--wa-font)}
.wa-notify span:not(.wa-notify__icon){display:block;font-size:12.5px;line-height:1.3;color:#2b3640}
.wa-notify small{align-self:start;font-size:11px;color:var(--wa-meta)}
.is-calm .wa-notify{transition:none}

/* ipucu (nudge) kartı */
.wa-nudge{display:flex;align-items:flex-start;gap:9px;margin:-2px -4px 4px;padding:7px 10px 7px 8px;border-left:3px solid #d98f1e;background:rgba(217,143,30,.1);border-radius:5px}
.wa-nudge__icon{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#d98f1e;color:#fff}
.wa-nudge__meta{display:grid;gap:1px;min-width:0}
.wa-nudge__meta b{font:650 12.5px/1.25 var(--wa-font);color:#a9680d}
.wa-nudge__meta span{font-size:14px;line-height:1.3}

/* belge önizleme ve yükleme çubuğu */
.wa-thumb{margin:-2px -4px 5px;padding:5px;background:rgba(11,20,26,.05);border-radius:7px}
.wa-thumb .pv,.wa-doc .pv{max-height:112px}
.wa-doc--up .wa-doc__row{position:relative;overflow:hidden}
.wa-doc--up .wa-doc__row::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--wa-green);transform-origin:0 50%;transform:scaleX(0);animation:wa-up 1.6s linear .15s forwards}
@keyframes wa-up{to{transform:scaleX(1)}}
.wa-doc--up .wa-doc__row::after{animation-name:wa-up,wa-up-hide;animation-duration:1.6s,.2s;animation-delay:.15s,1.8s;animation-fill-mode:forwards,forwards}
@keyframes wa-up-hide{to{opacity:0}}
.no-anim .wa-doc--up .wa-doc__row::after,.is-calm .wa-doc--up .wa-doc__row::after{display:none}

/* rapor grafiği (botun gönderdiği görsel) */
.wa-chart{margin:-2px -4px 5px}
.wa-chart .chart{border-radius:7px;background:rgba(20,30,45,.05)}