/* Sohbet paneli: ekranın altında parşömen şerit. Oyun tuvali üstte kalan alana sığdırılır (piksel oranı korunur). */
:root { --sohbet-h: 30vh; }
body.sohbet-kapali { --sohbet-h: 2.6em; }
#sahne { bottom: var(--sohbet-h) !important; }
#sohbet { position: fixed; left: 0; right: 0; bottom: 0; height: var(--sohbet-h); min-height: 2.6em; z-index: 12; font-size: var(--b, 16px);
  display: flex; flex-direction: column; color: var(--murekkep, #3a2616); box-sizing: border-box;
  border-top: calc(var(--b) * 1.2) solid transparent; border-image: url(../assets/ui/pencere_parsomen.png) 6 / calc(var(--b) * 1.2) calc(var(--b) * .6) 0 stretch;
  background: linear-gradient(180deg, #f6e9c9, #ecd9ae) padding-box; image-rendering: pixelated; }
#sohbet .ust { display: flex; align-items: center; gap: .3em; padding: 0 .6em; flex: none; flex-wrap: nowrap; overflow-x: auto; }
#sohbet .kanal { font: inherit; font-size: .92em; cursor: pointer; padding: .25em .8em; border: .12em solid var(--kenar, #2b1a12); border-bottom: 0; border-radius: .45em .45em 0 0;
  background: #e2cd9e; color: var(--murekkep, #3a2616); white-space: nowrap; position: relative; }
#sohbet .kanal.acik { background: #fff7e2; font-weight: bold; }
#sohbet .kanal .sayi { display: inline-block; min-width: 1.2em; margin-left: .35em; padding: 0 .3em; border-radius: .6em; background: #b8452e; color: #fff; font-size: .75em; text-align: center; }
#sohbet .kanal .kapa { margin-left: .4em; opacity: .6; } #sohbet .kanal .kapa:hover { opacity: 1; }
#sohbet .katla { margin-left: auto; font: inherit; font-size: .85em; cursor: pointer; background: none; border: 0; color: var(--murekkep); white-space: nowrap; }
#sohbet .govde { flex: 1; display: flex; min-height: 0; border-top: .12em solid var(--kenar, #2b1a12); background: #fff7e2; }
body.sohbet-kapali #sohbet .govde { display: none; }
#sohbet .akis { flex: 1; overflow-y: auto; padding: .35em .7em; line-height: 1.45; }
#sohbet .mesaj { margin: .05em 0; word-wrap: break-word; }
#sohbet .mesaj .saat { font-size: .75em; color: #9a7b58; margin-right: .35em; font-variant-numeric: tabular-nums; }
#sohbet .mesaj .kim { font-weight: bold; cursor: pointer; } #sohbet .mesaj .kim:hover { text-decoration: underline; }
#sohbet .mesaj .unvan { font-size: .72em; color: #7a5a3c; margin-right: .3em; font-style: italic; }
#sohbet .mesaj .rozet { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; border-radius: 50%; font-size: .72em; font-weight: bold; border: .1em solid #2b1a12; margin-right: .25em; vertical-align: .1em; background: #f5e8c8; }
#sohbet .mesaj .rozet.r1 { background: #f0c048; } #sohbet .mesaj .rozet.r2 { background: #d8dce6; } #sohbet .mesaj .rozet.r3 { background: #d88c50; }
#sohbet .mesaj.ben .kim { color: #2f5fb0; }
#sohbet .mesaj.sistem { color: #6b4a2c; font-style: italic; background: linear-gradient(90deg, rgba(217,165,58,.25), transparent); border-left: .2em solid #d9a53a; padding-left: .4em; }
#sohbet .mesaj.sistem img { width: 1.3em; height: 1.3em; vertical-align: -.3em; image-rendering: pixelated; margin-right: .25em; }
#sohbet .s-knight { color: #9a3322; } #sohbet .s-mage { color: #5b3aa8; } #sohbet .s-archer { color: #2f7a2a; } #sohbet .s-druid { color: #8a5a1a; }
#sohbet .yan { width: 16em; flex: none; border-left: .1em solid #e0cda6; padding: .4em .6em; overflow-y: auto; font-size: .88em; background: #fbf0d6; }
#sohbet .yan h4 { margin: 0 0 .3em; font-size: 1em; }
#sohbet .yan .uye { display: flex; align-items: center; gap: .35em; margin: .15em 0; cursor: pointer; }
#sohbet .yan .uye i { width: .55em; height: .55em; border-radius: 50%; background: #9a9a9a; flex: none; } #sohbet .yan .uye i.cevrim { background: #4f8a3a; }
#sohbet .yan .bos-yer { color: #b09a78; font-style: italic; }
#sohbet .yan .hedef { height: .55em; background: #d8c29a; border-radius: .3em; overflow: hidden; margin: .2em 0 .1em; } #sohbet .yan .hedef > b { display: block; height: 100%; background: linear-gradient(90deg, #d9a53a, #f0c048); }
#sohbet .alt { display: flex; gap: .4em; padding: .3em .6em .4em; flex: none; background: #fff7e2; border-top: .08em solid #e0cda6; }
body.sohbet-kapali #sohbet .alt { display: none; }
#sohbet .alt input { flex: 1; font: inherit; padding: .3em .6em; border: .12em solid #2b1a12; border-radius: .3em; background: #fffdf4; color: #3a2616; min-width: 0; }
#sohbet .alt .kalan { font-size: .75em; color: #9a7b58; align-self: center; white-space: nowrap; }
.kisi-menu { position: fixed; z-index: 45; background: #f5e8c8; border: .15em solid #2b1a12; border-radius: .35em; box-shadow: 0 .4em 1em rgba(0,0,0,.45); font-size: var(--b, 16px); min-width: 11em; overflow: hidden; }
.kisi-menu .bas { padding: .4em .7em; background: #e2cd9e; font-weight: bold; } .kisi-menu .bas small { display: block; font-weight: normal; font-size: .78em; color: #6b4a2c; }
.kisi-menu button { display: block; width: 100%; text-align: left; font: inherit; padding: .35em .7em; border: 0; background: none; cursor: pointer; color: #3a2616; }
.kisi-menu button:hover { background: #fff7e2; }
@media (max-width: 900px) { :root { --sohbet-h: 36vh; } #sohbet .yan { display: none; } }
/* Diyalog ve macera paneli sohbetin üstünde durur; açılır pencereler oyun alanında ortalanır */
.diyalog { bottom: calc(var(--sohbet-h) + 1em) !important; }
#sayac .panel { bottom: calc(var(--sohbet-h) + 1em) !important; }
.ui-katman { bottom: var(--sohbet-h) !important; }
#sayac { bottom: var(--sohbet-h) !important; }
.ui-katman .pencere { max-height: calc(100vh - var(--sohbet-h) - 1.5em) !important; }