/* HChat Professional UI v2
   Yalnızca görünüm katmanıdır; mevcut IRC/Socket.IO olaylarına dokunmaz. */

:root {
  --hc-bg: #edf2f4;
  --hc-surface: #ffffff;
  --hc-surface-soft: #f6f9fa;
  --hc-surface-muted: #e8eef0;
  --hc-line: #dbe4e7;
  --hc-line-soft: #edf2f3;
  --hc-text: #26343c;
  --hc-muted: #74838c;
  --hc-primary: #16a6a1;
  --hc-primary-dark: #0d817e;
  --hc-primary-soft: #e6f7f5;
  --hc-header: #142a34;
  --hc-header-2: #173d45;
  --hc-danger: #e45d68;
  --hc-success: #2ab98f;
  --hc-warning: #f1ad45;
  --hc-shadow: 0 12px 34px rgba(32, 61, 71, .12);
  --hc-radius: 16px;
}

/* Genel chat kabuğu */
body.hchat-ui-v2 { overflow: hidden; background: var(--hc-bg); }
body.hchat-ui-v2 #chat,
body.hchat-ui-v2 .sohbetkismi {
  min-height: 100vh;
  background: var(--hc-bg);
}
body.hchat-ui-v2 .sohbetkismi {
  display: flex;
  flex-direction: column;
}

/* Üst bar */
body.hchat-ui-v2 .chat-ust {
  position: relative;
  z-index: 40;
  flex: 0 0 66px;
  min-height: 66px;
  padding: 0 18px !important;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  background:
    radial-gradient(circle at 18% -90%, rgba(43, 210, 201, .23), transparent 48%),
    linear-gradient(100deg, var(--hc-header), var(--hc-header-2));
  box-shadow: 0 7px 28px rgba(21, 47, 57, .18);
}
body.hchat-ui-v2 .chat-ust > .row {
  height: 66px;
  padding-left: 190px;
}
body.hchat-ui-v2 .hchat-chat-brand {
  position: absolute;
  left: 20px;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 66px;
  color: #fff;
  user-select: none;
}
body.hchat-ui-v2 .hchat-chat-brand-mark {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: linear-gradient(145deg, #20bcb6, #0c817f);
  box-shadow: 0 8px 20px rgba(9, 112, 109, .3);
  font-size: 20px;
  font-weight: 800;
}
body.hchat-ui-v2 .hchat-chat-brand-copy { display: flex; flex-direction: column; line-height: 1.05; }
body.hchat-ui-v2 .hchat-chat-brand-copy strong { font-size: 16px; font-weight: 700; letter-spacing: -.2px; }
body.hchat-ui-v2 .hchat-chat-brand-copy small { margin-top: 5px; color: rgba(255,255,255,.52); font-size: 8px; font-weight: 600; letter-spacing: 1.45px; }
body.hchat-ui-v2 .s-genel-bar { padding-left: 3px; }
body.hchat-ui-v2 .s-genel-bar .text-1 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 16px;
  font-weight: 650;
}
body.hchat-ui-v2 .s-genel-bar .text-1::before {
  content: "#";
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  color: #6fe4de;
  background: rgba(255,255,255,.09);
  font-weight: 700;
}
body.hchat-ui-v2 .s-genel-bar .text-2 {
  margin-left: 3px;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 999px;
  color: #79ddd7;
  background: rgba(0,0,0,.13);
  font-size: 10px;
}
body.hchat-ui-v2 .menu-one ul { gap: 5px; }
body.hchat-ui-v2 .menu-one ul li.menu-nickname {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 36px;
  margin-right: 4px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 11px;
  color: rgba(255,255,255,.62);
  background: rgba(255,255,255,.055);
}
body.hchat-ui-v2 .menu-one ul li.menu-nickname strong { color: #7de3dd; font-weight: 650; }
body.hchat-ui-v2 .menu-one ul li a {
  display: flex;
  height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.055);
  transition: .18s ease;
}
body.hchat-ui-v2 .menu-one ul li a:hover {
  border-color: rgba(105, 229, 222, .28);
  color: #fff;
  background: rgba(22,166,161,.28);
  transform: translateY(-1px);
}
body.hchat-ui-v2 .menu-one ul li a .ml-2 { font-size: 10px; }

/* Sağ/sol panel düğmeleri */
body.hchat-ui-v2 .hchat-chat-controls {
  position: absolute;
  right: 17px;
  bottom: -22px;
  z-index: 45;
  display: flex;
  gap: 6px;
}
body.hchat-ui-v2 .hchat-panel-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--hc-line);
  border-radius: 9px;
  color: #61717a;
  background: rgba(255,255,255,.96);
  box-shadow: 0 5px 16px rgba(32,61,71,.1);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
}
body.hchat-ui-v2 .hchat-panel-toggle:hover { color: var(--hc-primary-dark); border-color: #bfe0de; background: #f3fbfa; }

/* Ana 3 kolonlu yerleşim: kanallar | sohbet | kişiler */
body.hchat-ui-v2 .main-content {
  flex: 1 1 auto;
  min-height: 0;
  padding: 10px;
  background: var(--hc-bg);
}
body.hchat-ui-v2 .main-content .main-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 250px 230px;
  grid-template-areas: "chat users channels";
  gap: 10px;
  height: 100%;
  min-height: 0;
}
body.hchat-ui-v2 .main-content .main-row > .main-col {
  width: auto !important;
  min-width: 0;
  border: 0 !important;
  border-radius: var(--hc-radius);
  background: var(--hc-surface);
  box-shadow: 0 5px 22px rgba(35, 65, 75, .07);
  overflow: hidden;
}
body.hchat-ui-v2 #chatPanel { grid-area: chat; display: flex; min-width: 0; }
body.hchat-ui-v2 .main-row > .main-col:nth-child(2) { grid-area: users; display: flex; flex-direction: column; }
body.hchat-ui-v2 .main-row > .channel-lister { grid-area: channels; display: flex; flex-direction: column; }
body.hchat-ui-v2.hchat-hide-channels .main-content .main-row { grid-template-columns: minmax(0,1fr) 250px 0; gap-left: 0; }
body.hchat-ui-v2.hchat-hide-channels .main-row > .channel-lister { opacity: 0; pointer-events: none; }
body.hchat-ui-v2.hchat-hide-users .main-content .main-row { grid-template-columns: minmax(0,1fr) 0 230px; }
body.hchat-ui-v2.hchat-hide-users .main-row > .main-col:nth-child(2) { opacity: 0; pointer-events: none; }
body.hchat-ui-v2.hchat-hide-users.hchat-hide-channels .main-content .main-row { grid-template-columns: 0 minmax(0,1fr) 0; }

/* Panel başlıkları */
body.hchat-ui-v2 .hchat-side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 51px;
  height: 51px;
  padding: 0 14px;
  border-bottom: 1px solid var(--hc-line-soft);
  color: var(--hc-text);
  background: linear-gradient(#fff, #fbfcfd);
}
body.hchat-ui-v2 .hchat-side-head-title { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; }
body.hchat-ui-v2 .hchat-side-head-title i {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 9px;
  color: var(--hc-primary-dark);
  background: var(--hc-primary-soft);
  font-size: 12px;
}
body.hchat-ui-v2 .hchat-side-head small { color: #9aa6ac; font-size: 8px; font-weight: 600; letter-spacing: .65px; }

/* Kanal paneli */
body.hchat-ui-v2 .channel-lister { border: 1px solid rgba(214,226,230,.8) !important; background: var(--hc-surface) !important; }
body.hchat-ui-v2 .channel-lister #chatListKanal { flex: 1; min-height: 0; overflow: auto; }
body.hchat-ui-v2 .channel-list { padding: 11px 10px 16px; }
body.hchat-ui-v2 .channel-list li {
  min-height: 42px;
  margin-bottom: 6px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #65757e;
  background: #f7f9fa;
  box-shadow: none;
  transition: .17s ease;
}
body.hchat-ui-v2 .channel-list li:hover {
  border-color: #cce5e3;
  color: var(--hc-primary-dark);
  background: #f1faf9;
  transform: translateX(2px);
}
body.hchat-ui-v2 .channel-list li.current {
  border-color: transparent;
  color: #fff !important;
  background: linear-gradient(135deg, #18aaa5, #0e8582);
  box-shadow: 0 9px 18px rgba(16, 139, 135, .21);
}
body.hchat-ui-v2 .channel-list li .cl-table .cl-cell { font-size: 12px; font-weight: 600; }
body.hchat-ui-v2 .channel-list li .cl-table .cl-cell:nth-child(1) { width: 23%; }
body.hchat-ui-v2 .channel-list li .cl-table .cl-cell:nth-child(3) { opacity: .65; }
body.hchat-ui-v2 .channel-list li.current .cl-hash-grey { filter: brightness(0) invert(1); opacity: .95; }

/* Kullanıcı paneli */
body.hchat-ui-v2 .main-row > .main-col:nth-child(2) { border: 1px solid rgba(214,226,230,.8) !important; }
body.hchat-ui-v2 .user-search { padding: 10px 11px; border-bottom: 1px solid var(--hc-line-soft); background: #fff; }
body.hchat-ui-v2 .user-search input {
  height: 38px !important;
  padding: 0 13px 0 36px !important;
  border: 1px solid var(--hc-line) !important;
  border-radius: 11px;
  color: var(--hc-text);
  background-color: var(--hc-surface-soft) !important;
  background-position: left 12px center !important;
  font-size: 10px;
  transition: .18s ease;
}
body.hchat-ui-v2 .user-search input:focus {
  border-color: #91d2ce !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 3px rgba(22,166,161,.09);
}
body.hchat-ui-v2 .user-lists { flex: 1; min-height: 0; overflow: auto; background: #fff; }
body.hchat-ui-v2 .us-ul li,
body.hchat-ui-v2 #chatListUser .list-group-item {
  min-height: 42px;
  border-bottom: 1px solid var(--hc-line-soft);
  color: #52626b;
  background: #fff;
  transition: .16s ease;
}
body.hchat-ui-v2 .us-ul li:hover,
body.hchat-ui-v2 #chatListUser .list-group-item:hover { color: var(--hc-primary-dark); background: #eff9f8; }
body.hchat-ui-v2 .us-ul .us-table .us-cell,
body.hchat-ui-v2 #chatListUser { font-size: 11px; }
body.hchat-ui-v2 .us-green,
body.hchat-ui-v2 .us-red,
body.hchat-ui-v2 .us-blue,
body.hchat-ui-v2 .us-purple,
body.hchat-ui-v2 .us-grey { box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 0 0 4px rgba(35,70,80,.08); }

/* Sohbet orta alanı */
body.hchat-ui-v2 #panelSol {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}
body.hchat-ui-v2 .chat-content {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border: 0 !important;
  background-color: #fbfcfd !important;
  background-image:
    linear-gradient(rgba(255,255,255,.82), rgba(255,255,255,.82)),
    radial-gradient(#cfdde0 .65px, transparent .65px) !important;
  background-size: auto, 18px 18px !important;
  overflow: auto;
}
body.hchat-ui-v2 .m-topic {
  position: relative !important;
  z-index: 4;
  width: auto !important;
  height: 49px;
  padding: 14px 105px 0 17px;
  border: 0;
  border-bottom: 1px solid var(--hc-line-soft);
  color: #6d7b84;
  background: rgba(255,255,255,.94);
  box-shadow: 0 2px 10px rgba(35,65,75,.035);
  font-size: 11px;
  font-weight: 500;
}
body.hchat-ui-v2 #sayio {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 6;
  margin: 0;
  padding: 5px 9px;
  border: 1px solid #d9e8e7;
  border-radius: 999px;
  color: var(--hc-primary-dark);
  background: #eff9f8;
  font-size: 9px;
}
body.hchat-ui-v2 .chat-panelimiz { padding: 12px 16px 18px; }
body.hchat-ui-v2 .chat-panel { list-style: none; }
body.hchat-ui-v2 .mesaj,
body.hchat-ui-v2 .chat-message {
  margin: 3px 0;
  padding: 5px 8px;
  border-radius: 8px;
  color: #3e4d55;
  line-height: 1.55;
  transition: background .14s ease;
}
body.hchat-ui-v2 .mesaj:hover,
body.hchat-ui-v2 .chat-message:hover { background: rgba(228,243,242,.63); }
body.hchat-ui-v2 .mesaj.not,
body.hchat-ui-v2 .not-blue {
  border-left: 3px solid #63c7c2;
  color: #61717a;
  background: #edf8f7;
}
body.hchat-ui-v2 .irc-bold,
body.hchat-ui-v2 .cm-nick { color: #167f7c; font-weight: 700; }

/* Mesaj editörü */
body.hchat-ui-v2 .chat-editor {
  position: relative;
  flex: 0 0 100px;
  height: 100px !important;
  border: 0 !important;
  border-top: 1px solid var(--hc-line) !important;
  background: #fff;
}
body.hchat-ui-v2 .ce-top {
  height: 40px;
  border-bottom: 1px solid var(--hc-line-soft);
  background: #f8fafb;
}
body.hchat-ui-v2 .ce-top .ce-left .cel-col,
body.hchat-ui-v2 .ce-top .ce-right .cer-col { border-color: var(--hc-line-soft); }
body.hchat-ui-v2 .cel-col,
body.hchat-ui-v2 .cer-col {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 40px;
  color: #718089;
}
body.hchat-ui-v2 .cel-col:hover,
body.hchat-ui-v2 .cer-col:hover { color: var(--hc-primary-dark); background: var(--hc-primary-soft); }
body.hchat-ui-v2 .farkli-surum { color: #74838c; font-size: 9px; }
body.hchat-ui-v2 .ce-bot {
  height: 59px;
  padding: 9px 10px;
  background: #fff;
}
body.hchat-ui-v2 .ce-bot .ceb-col { display: flex; align-items: center; }
body.hchat-ui-v2 .ce-bot .ceb-col:not(.inputdiv) { justify-content: center; min-width: 34px; }
body.hchat-ui-v2 .message-option-icon,
body.hchat-ui-v2 .message-search-icon,
body.hchat-ui-v2 .inputemoji {
  opacity: .72;
  transition: .15s ease;
}
body.hchat-ui-v2 .message-option-icon:hover,
body.hchat-ui-v2 .message-search-icon:hover,
body.hchat-ui-v2 .inputemoji:hover { opacity: 1; transform: scale(1.06); }
body.hchat-ui-v2 .inputdiv { flex: 1; min-width: 0; padding: 0 8px; }
body.hchat-ui-v2 .inputyolla,
body.hchat-ui-v2 #btn-input {
  width: 100%;
  height: 41px !important;
  padding: 0 44px 0 15px !important;
  border: 1px solid var(--hc-line) !important;
  border-radius: 13px !important;
  color: var(--hc-text);
  background: #f6f9fa !important;
  font-size: 11px;
  box-shadow: none !important;
}
body.hchat-ui-v2 .inputyolla:focus,
body.hchat-ui-v2 #btn-input:focus {
  border-color: #8fd1ce !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(22,166,161,.09) !important;
}
body.hchat-ui-v2 .send-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 94px;
  height: 41px !important;
  padding: 0 15px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #19afa9, #0d8582);
  box-shadow: 0 8px 18px rgba(14,139,135,.2);
  font-size: 10px;
  font-weight: 700;
  line-height: 41px !important;
  letter-spacing: .2px;
  transition: .17s ease;
}
body.hchat-ui-v2 .send-button:hover { background: linear-gradient(135deg, #22bdb7, #0d7d7a); transform: translateY(-1px); }
body.hchat-ui-v2 .send-button i { font-size: 11px; }

/* Modal ve açılır menüler */
body.hchat-ui-v2 .jconfirm .jconfirm-box,
body.hchat-ui-v2 .modal-content {
  border: 1px solid rgba(218,229,232,.9) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 65px rgba(27,54,65,.22) !important;
  overflow: hidden;
}
body.hchat-ui-v2 .mobile-menu,
body.hchat-ui-v2 .mob-dropdown { border-radius: 0 0 14px 14px; box-shadow: var(--hc-shadow); }

/* Scrollbar */
body.hchat-ui-v2 *::-webkit-scrollbar { width: 7px; height: 7px; }
body.hchat-ui-v2 *::-webkit-scrollbar-track { background: #eef3f4; }
body.hchat-ui-v2 *::-webkit-scrollbar-thumb { border: 2px solid #eef3f4; border-radius: 999px; background: #b8c7cb; }
body.hchat-ui-v2 *::-webkit-scrollbar-thumb:hover { background: #8fa5aa; }

/* Tablet / mobil */
@media (max-width: 991px) {
  body.hchat-ui-v2 .chat-ust { flex-basis: 54px; min-height: 54px; padding: 0 !important; }
  body.hchat-ui-v2 .chat-ust > .row.ht-mob-hide,
  body.hchat-ui-v2 .hchat-chat-brand,
  body.hchat-ui-v2 .hchat-chat-controls { display: none !important; }
  body.hchat-ui-v2 .mob-top-menu > .row {
    height: 54px;
    color: #fff;
    background: linear-gradient(100deg, var(--hc-header), #146b6b);
    box-shadow: 0 5px 18px rgba(25,52,63,.18);
  }
  body.hchat-ui-v2 .mob-channel-title { height: 54px !important; line-height: 54px !important; border-color: rgba(255,255,255,.1) !important; }
  body.hchat-ui-v2 .main-content { padding: 0; }
  body.hchat-ui-v2 .main-content .main-row {
    grid-template-columns: minmax(0, 1fr) 126px;
    grid-template-areas: "chat users";
    gap: 0;
    height: 100%;
  }
  body.hchat-ui-v2 .main-content .main-row > .main-col { border-radius: 0; box-shadow: none; }
  body.hchat-ui-v2 .main-row > .channel-lister { display: none !important; }
  body.hchat-ui-v2 .main-row > .main-col:nth-child(2) { border-left: 1px solid var(--hc-line) !important; }
  body.hchat-ui-v2 .hchat-side-head { display: none; }
  body.hchat-ui-v2 .user-search { padding: 6px; }
  body.hchat-ui-v2 .user-search input { height: 33px !important; padding-left: 29px !important; font-size: 9px; background-position: left 9px center !important; }
  body.hchat-ui-v2 .m-topic { height: 39px; padding: 11px 70px 0 11px; font-size: 9px; }
  body.hchat-ui-v2 #sayio { top: 7px; right: 7px; padding: 4px 7px; font-size: 8px; }
  body.hchat-ui-v2 .chat-panelimiz { padding: 8px 9px 55px; }
  body.hchat-ui-v2 .chat-editor {
    position: fixed;
    right: 126px;
    bottom: 0;
    left: 0;
    z-index: 30;
    flex-basis: 48px;
    width: auto;
    height: 48px !important;
    border-top: 1px solid var(--hc-line) !important;
  }
  body.hchat-ui-v2 .ce-top { display: none; }
  body.hchat-ui-v2 .ce-bot { height: 47px; padding: 5px; }
  body.hchat-ui-v2 .ce-bot .ceb-col:not(.inputdiv) { min-width: 28px; }
  body.hchat-ui-v2 .inputdiv { padding: 0 4px; }
  body.hchat-ui-v2 .inputyolla,
  body.hchat-ui-v2 #btn-input { height: 35px !important; padding-left: 11px !important; border-radius: 10px !important; font-size: 10px; }
  body.hchat-ui-v2 .send-button { min-width: 64px; height: 35px !important; padding: 0 10px; border-radius: 10px; font-size: 9px; line-height: 35px !important; }
  body.hchat-ui-v2 .send-button i { display: none; }
}

@media (max-width: 520px) {
  body.hchat-ui-v2 .main-content .main-row { grid-template-columns: minmax(0, 1fr) 104px; }
  body.hchat-ui-v2 .chat-editor { right: 104px; }
  body.hchat-ui-v2 .send-button { min-width: 51px; padding: 0 7px; }
  body.hchat-ui-v2 .ce-bot .ceb-col:first-child { display: none; }
  body.hchat-ui-v2 .chat-panelimiz { padding-right: 6px; padding-left: 6px; }
}