/* Harabe New Applet v1 — light UI */
:root{
  --bg:#f4f2ed;
  --surface:#fffdf9;
  --surface-2:#f8f6f1;
  --surface-3:#efede7;
  --line:#e5e1d8;
  --line-strong:#d7d0c4;
  --text:#17233d;
  --text-2:#536077;
  --text-3:#8a91a0;
  --navy:#263a67;
  --navy-2:#1e2f58;
  --gold:#d7a929;
  --gold-2:#bd8f16;
  --green:#2d9c6b;
  --red:#c9515b;
  --violet:#725ea8;
  --teal:#3f8790;
  --shadow:0 20px 60px rgba(35,48,74,.12);
  --shadow-soft:0 8px 24px rgba(35,48,74,.08);
  --radius:18px;
  --radius-sm:12px;
  --topbar:76px;
  --left:272px;
  --right:270px;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);overflow:hidden}
button,input,textarea{font:inherit}
button{cursor:pointer}
[hidden]{display:none!important}

.app-shell{height:100dvh;min-height:100vh}

/* Login */
.login-screen{
  position:relative;height:100%;display:grid;place-items:center;padding:24px;overflow:hidden;
  background:
    linear-gradient(120deg,rgba(255,255,255,.72),rgba(244,242,237,.96)),
    radial-gradient(circle at 20% 20%,#fff 0,transparent 45%);
}
.login-backdrop{position:absolute;border-radius:999px;filter:blur(2px);opacity:.7;pointer-events:none}
.login-backdrop-a{width:420px;height:420px;background:#e7dfc9;top:-170px;right:-120px}
.login-backdrop-b{width:380px;height:380px;background:#dde2ed;bottom:-170px;left:-100px}

.login-card{
  position:relative;width:min(460px,100%);padding:46px 46px 34px;background:rgba(255,253,249,.95);
  border:1px solid rgba(214,208,196,.9);border-radius:28px;box-shadow:var(--shadow);backdrop-filter:blur(18px)
}
.brand-mark,.brand-symbol{display:flex;align-items:flex-end;gap:4px}
.brand-mark{width:58px;height:42px;margin-bottom:22px}
.brand-mark span,.brand-symbol span{display:block;border-radius:10px;background:var(--navy)}
.brand-mark span:nth-child(1){width:11px;height:25px}
.brand-mark span:nth-child(2){width:11px;height:39px;background:var(--gold)}
.brand-mark span:nth-child(3){width:11px;height:31px}
.login-kicker{font:700 11px/1 Manrope,sans-serif;letter-spacing:.24em;color:var(--gold-2);margin-bottom:10px}
.login-card h1{margin:0;font:800 34px/1.14 Manrope,sans-serif;letter-spacing:-.035em}
.login-card>p{color:var(--text-2);font-size:14px;margin:12px 0 28px}
.login-form label{display:block;font-size:12px;font-weight:700;margin:0 0 8px;color:var(--text-2)}
.input-wrap{position:relative}
.input-icon{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--gold-2);font-weight:700}
.login-form input{
  width:100%;height:50px;border:1px solid var(--line-strong);border-radius:14px;background:#fff;
  color:var(--text);padding:0 15px 0 39px;outline:none;transition:.2s
}
.login-form input:focus{border-color:var(--navy);box-shadow:0 0 0 4px rgba(38,58,103,.08)}
.login-error{min-height:22px;padding-top:7px;font-size:12px;color:var(--red)}
.primary-btn{
  border:0;border-radius:14px;background:var(--navy);color:#fff;font-weight:700;min-height:48px;
  padding:0 18px;display:flex;align-items:center;justify-content:center;gap:12px;transition:.2s
}
.login-form .primary-btn{width:100%;justify-content:space-between;padding:0 18px 0 21px}
.primary-btn:hover{background:var(--navy-2);transform:translateY(-1px)}
.primary-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-arrow{width:28px;height:28px;border-radius:9px;background:rgba(255,255,255,.13);display:grid;place-items:center}
.login-meta{border-top:1px solid var(--line);margin-top:28px;padding-top:18px;display:flex;justify-content:space-between;gap:14px;color:var(--text-3);font-size:10px}
.status-dot{width:7px;height:7px;background:var(--green);border-radius:50%;display:inline-block;margin-right:6px}

/* Main layout */
.chat-screen{height:100%;display:grid;grid-template-rows:var(--topbar) 1fr;background:var(--surface)}
.topbar{
  display:grid;grid-template-columns:var(--left) 1fr var(--right);height:var(--topbar);
  border-bottom:1px solid var(--line);background:rgba(255,253,249,.96);z-index:20
}
.topbar-left,.channel-heading,.topbar-actions{display:flex;align-items:center}
.topbar-left{padding:0 22px;border-right:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:11px;color:inherit;text-decoration:none}
.brand-symbol{height:26px}
.brand-symbol span{width:6px}
.brand-symbol span:nth-child(1){height:16px}
.brand-symbol span:nth-child(2){height:25px;background:var(--gold)}
.brand-symbol span:nth-child(3){height:20px}
.brand strong{display:block;font:800 18px/1 Manrope,sans-serif;letter-spacing:-.02em}
.brand small{font:700 8px/1 Manrope,sans-serif;letter-spacing:.26em;color:var(--gold-2)}
.channel-heading{padding:0 24px}
.channel-name{font:800 16px/1.2 Manrope,sans-serif}
.channel-topic{font-size:11px;color:var(--text-3);margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:680px}
.topbar-actions{padding:0 18px;justify-content:flex-end;gap:8px;border-left:1px solid var(--line)}
.icon-btn{
  width:38px;height:38px;border:1px solid var(--line);border-radius:11px;background:var(--surface);
  color:var(--text-2);display:grid;place-items:center;font-size:18px
}
.icon-btn:hover{background:var(--surface-2);color:var(--navy)}
.icon-btn.small{width:32px;height:32px}
.connection-pill{
  height:32px;padding:0 11px;border:1px solid var(--line);border-radius:999px;
  display:flex;align-items:center;gap:7px;color:var(--text-2);font-size:10px;font-weight:700
}
.connection-dot{width:7px;height:7px;border-radius:50%;background:var(--gold)}
.connection-pill.online .connection-dot{background:var(--green)}
.connection-pill.offline .connection-dot{background:var(--red)}

.workspace{min-height:0;display:grid;grid-template-columns:var(--left) minmax(0,1fr) var(--right)}
.sidebar{min-height:0;background:var(--surface-2)}
.channels-sidebar{border-right:1px solid var(--line);display:grid;grid-template-rows:1fr auto}
.sidebar-scroll{overflow:auto;padding:18px 14px}
.sidebar-section+.sidebar-section{margin-top:26px}
.sidebar-title{display:flex;align-items:center;justify-content:space-between;padding:0 8px 8px;font-size:9px;font-weight:800;letter-spacing:.15em;color:var(--text-3)}
.mini-action{width:24px;height:24px;border:0;border-radius:8px;background:transparent;color:var(--text-2);font-size:17px}
.mini-action:hover{background:var(--surface-3)}
.channel-list,.private-list{display:flex;flex-direction:column;gap:4px}
.channel-item,.private-item{
  position:relative;width:100%;border:0;background:transparent;color:var(--text-2);border-radius:11px;
  min-height:39px;padding:0 11px;display:flex;align-items:center;gap:9px;text-align:left;font-size:12px;font-weight:600
}
.channel-item:hover,.private-item:hover{background:#eeebe4;color:var(--text)}
.channel-item.active,.private-item.active{background:#e9e5da;color:var(--navy);font-weight:800}
.channel-item.active:before,.private-item.active:before{
  content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:4px;background:var(--gold)
}
.channel-hash{font-weight:800;color:var(--gold-2)}
.channel-unread{margin-left:auto;width:7px;height:7px;border-radius:50%;background:var(--gold)}
.private-avatar{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;background:#dde1ea;color:var(--navy);font-size:10px;font-weight:800}
.private-close{margin-left:auto;color:var(--text-3);font-size:14px}
.empty-private{padding:10px 9px;font-size:10px;color:var(--text-3)}
.me-card{height:72px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;padding:0 14px;background:#f2efe8}
.avatar{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:#dce2ed;color:var(--navy);font-size:12px;font-weight:800}
.avatar-me{background:var(--navy);color:#fff}
.me-info{min-width:0;flex:1}
.me-info strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me-info span{display:flex;align-items:center;gap:5px;color:var(--text-3);font-size:9px;margin-top:3px}
.online-dot{width:6px;height:6px;border-radius:50%;background:var(--green)}
.logout-btn{width:31px;height:31px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--text-3)}
.logout-btn:hover{color:var(--red);border-color:#e8c8ca}

/* Chat */
.chat-main{min-width:0;min-height:0;display:grid;grid-template-rows:auto 1fr auto auto;background:var(--surface);position:relative}
.search-bar{padding:9px 15px;border-bottom:1px solid var(--line);display:flex;gap:8px;background:var(--surface-2)}
.search-bar input{flex:1;border:1px solid var(--line);border-radius:10px;padding:8px 11px;outline:none;background:#fff}
.search-bar button{border:0;background:transparent;font-size:18px;color:var(--text-3)}
.messages{overflow:auto;padding:24px 26px 18px;scroll-behavior:smooth}
.welcome-block{padding:36px 12px 30px;border-bottom:1px solid var(--line);margin-bottom:15px}
.welcome-icon{width:52px;height:52px;border-radius:16px;background:#e7e2d4;color:var(--gold-2);display:grid;place-items:center;font-size:25px;font-weight:800}
.welcome-block h2{font:800 26px/1.1 Manrope,sans-serif;margin:14px 0 6px;letter-spacing:-.03em}
.welcome-block p{margin:0;color:var(--text-2);font-size:12px}

.message-row{display:grid;grid-template-columns:36px minmax(0,1fr);gap:11px;padding:7px 9px;border-radius:11px;position:relative}
.message-row:hover{background:#faf8f4}
.message-avatar{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#e4e7ee;color:var(--navy);font-size:10px;font-weight:800}
.message-head{display:flex;align-items:baseline;gap:8px;min-width:0}
.message-nick{font-size:11px;font-weight:800;color:var(--navy);cursor:pointer}
.message-time{font-size:9px;color:var(--text-3)}
.message-text{font-size:12px;line-height:1.55;color:#28354e;margin-top:2px;word-break:break-word}
.message-row.own .message-avatar{background:#e7dfc9;color:#806412}
.message-row.own .message-nick{color:#8a6d12}

.system-row{display:flex;align-items:center;gap:8px;margin:5px 8px;padding:5px 0;color:var(--text-3);font-size:10px}
.system-row:before{content:"";width:5px;height:5px;border-radius:50%;background:#c9c3b8}
.system-row.error{color:var(--red)}
.notice-row{margin:8px;padding:9px 11px;border-radius:10px;background:#f5f1e6;border:1px solid #e7dfc6;color:#68591f;font-size:10px}
.day-divider{display:flex;align-items:center;gap:12px;margin:15px 0;color:var(--text-3);font-size:9px}
.day-divider:before,.day-divider:after{content:"";height:1px;background:var(--line);flex:1}
.typing-line{min-height:18px;padding:0 20px 2px;color:var(--text-3);font-size:9px}

.composer{position:relative;margin:0 18px 18px;border:1px solid var(--line-strong);border-radius:15px;background:#fff;min-height:54px;display:flex;align-items:flex-end;padding:8px;box-shadow:0 5px 18px rgba(30,47,88,.04)}
.composer:focus-within{border-color:#b8b0a0;box-shadow:0 0 0 4px rgba(215,169,41,.08)}
.composer-btn{width:36px;height:36px;flex:0 0 auto;border:0;border-radius:10px;background:transparent;color:var(--text-3);font-size:20px}
.composer-btn:hover{background:var(--surface-2);color:var(--gold-2)}
.composer textarea{min-height:36px;max-height:130px;resize:none;overflow:auto;flex:1;border:0;outline:0;background:transparent;color:var(--text);padding:9px 7px 7px;font-size:12px;line-height:1.4}
.composer-tools{display:flex;align-items:center;gap:7px}
.char-count{font-size:8px;color:var(--text-3)}
.send-btn{width:38px;height:38px;border:0;border-radius:11px;background:var(--navy);color:#fff;display:grid;place-items:center}
.send-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.send-btn:hover{background:var(--navy-2)}
.emoji-popover{position:absolute;left:5px;bottom:61px;width:190px;padding:10px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-soft);display:grid;grid-template-columns:repeat(6,1fr);gap:4px;z-index:15}
.emoji-popover button{border:0;background:transparent;border-radius:7px;padding:5px;font-size:16px}
.emoji-popover button:hover{background:var(--surface-2)}

/* Users */
.users-sidebar{border-left:1px solid var(--line);padding:15px 13px;overflow:hidden;display:grid;grid-template-rows:auto auto 1fr}
.users-head{display:flex;align-items:center;justify-content:space-between;padding:4px 5px 13px}
.users-head strong{display:block;font:800 12px/1.2 Manrope,sans-serif}
.users-head span{display:block;color:var(--text-3);font-size:9px;margin-top:3px}
.user-search-wrap{height:36px;border:1px solid var(--line);border-radius:11px;background:#fff;display:flex;align-items:center;padding:0 10px;gap:7px;color:var(--text-3)}
.user-search-wrap input{width:100%;border:0;outline:0;background:transparent;font-size:10px;color:var(--text)}
.user-list{overflow:auto;padding-top:13px}
.role-group{margin-bottom:15px}
.role-title{font-size:8px;font-weight:800;letter-spacing:.13em;color:var(--text-3);padding:0 5px 5px}
.user-item{width:100%;min-height:39px;padding:4px 5px;border:0;border-radius:10px;background:transparent;display:flex;align-items:center;gap:8px;color:var(--text-2);text-align:left}
.user-item:hover{background:#eeebe4}
.user-avatar{width:29px;height:29px;border-radius:10px;display:grid;place-items:center;background:#e3e6ec;color:var(--navy);font-size:9px;font-weight:800}
.user-meta{min-width:0;flex:1}
.user-meta strong{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.user-meta span{display:block;font-size:8px;color:var(--text-3);margin-top:2px}
.user-prefix{font-size:10px;font-weight:800;color:var(--gold-2)}
.user-item[data-role="founder"] .user-prefix,.user-item[data-role="founder"] strong{color:#9c4f78}
.user-item[data-role="sop"] .user-prefix,.user-item[data-role="sop"] strong{color:var(--violet)}
.user-item[data-role="op"] .user-prefix,.user-item[data-role="op"] strong{color:#9c7215}
.user-item[data-role="halfop"] .user-prefix,.user-item[data-role="halfop"] strong{color:var(--teal)}
.users-empty{font-size:10px;color:var(--text-3);padding:12px 6px}

/* Modals + toasts */
.simple-modal{position:fixed;inset:0;background:rgba(23,35,61,.24);backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px;z-index:100}
.simple-modal-card{position:relative;width:min(390px,100%);background:#fffdf9;border:1px solid var(--line);border-radius:22px;padding:28px;box-shadow:var(--shadow)}
.modal-x{position:absolute;right:14px;top:14px;width:32px;height:32px;border:0;border-radius:10px;background:var(--surface-2);color:var(--text-3);font-size:20px}
.modal-icon{width:42px;height:42px;border-radius:13px;background:#ece7db;color:var(--gold-2);display:grid;place-items:center;font-size:21px;font-weight:800}
.simple-modal h3{margin:13px 0 5px;font:800 21px/1.2 Manrope,sans-serif}
.simple-modal p{margin:0 0 17px;color:var(--text-2);font-size:11px}
.simple-modal form{display:flex;gap:8px}
.simple-modal input{min-width:0;flex:1;height:46px;border:1px solid var(--line-strong);border-radius:12px;padding:0 12px;outline:none}
.simple-modal form .primary-btn{min-height:46px}
.user-card-modal{text-align:center}
.profile-avatar{margin:auto;width:62px;height:62px;border-radius:20px;background:var(--navy);color:#fff;display:grid;place-items:center;font:800 19px Manrope,sans-serif}
.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.secondary-btn{min-height:48px;border:1px solid var(--line-strong);border-radius:14px;background:#fff;color:var(--navy);font-weight:700}
.toast-stack{position:fixed;right:18px;bottom:18px;display:flex;flex-direction:column;gap:8px;z-index:120}
.toast{width:min(340px,calc(100vw - 36px));background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 14px;box-shadow:var(--shadow-soft);font-size:10px;color:var(--text-2)}
.toast strong{display:block;color:var(--text);font-size:11px;margin-bottom:3px}
.toast.error{border-left:3px solid var(--red)}
.toast.success{border-left:3px solid var(--green)}

.mobile-only{display:none}
.mobile-scrim{position:fixed;inset:var(--topbar) 0 0;background:rgba(23,35,61,.22);z-index:39}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:#d4cec2 transparent}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#d4cec2;border-radius:10px;border:2px solid transparent;background-clip:padding-box}

/* Mobile */
@media (max-width: 900px){
  :root{--topbar:64px}
  .mobile-only{display:grid}
  .topbar{grid-template-columns:auto 1fr auto}
  .topbar-left{padding:0 10px;border-right:0;gap:8px}
  .brand>div:last-child{display:none}
  .brand-symbol{height:24px}
  .channel-heading{padding:0 10px;min-width:0}
  .channel-topic{max-width:40vw}
  .topbar-actions{padding:0 9px;border-left:0}
  .connection-pill{display:none}
  .workspace{grid-template-columns:1fr}
  .chat-main{grid-column:1}
  .channels-sidebar,.users-sidebar{
    position:fixed;top:var(--topbar);bottom:0;z-index:50;width:min(84vw,310px);box-shadow:var(--shadow);
    transition:transform .25s ease
  }
  .channels-sidebar{left:0;transform:translateX(-105%)}
  .channels-sidebar.open{transform:translateX(0)}
  .users-sidebar{right:0;transform:translateX(105%)}
  .users-sidebar.open{transform:translateX(0)}
  .messages{padding:15px 9px 12px}
  .welcome-block{padding:20px 6px}
  .welcome-icon{width:46px;height:46px}
  .welcome-block h2{font-size:22px}
  .message-row{grid-template-columns:32px minmax(0,1fr);padding:6px 5px;gap:8px}
  .message-avatar{width:31px;height:31px}
  .composer{margin:0 8px calc(8px + env(safe-area-inset-bottom));min-height:52px}
  .composer .char-count{display:none}
  .emoji-popover{left:0;bottom:59px}
  .simple-modal form{display:grid}
}

@media (max-width: 520px){
  .login-card{padding:34px 24px 27px;border-radius:23px}
  .login-card h1{font-size:29px}
  .login-meta{font-size:9px;flex-direction:column}
  .channel-topic{display:none}
  .topbar .icon-btn{width:35px;height:35px}
  .search-bar{padding:7px}
}


/* ===== V2 refinements ===== */
:root{
  --surface:#fffefa;
  --surface-2:#f7f4ee;
  --surface-3:#ece7dd;
}

.sidebar-title{font-size:10px}
.channel-item,.private-item{font-size:13px;min-height:42px}
.me-info strong{font-size:12px}
.me-info span{font-size:10px}

.channel-name{font-size:18px}
.channel-topic{font-size:12px}
.connection-pill{font-size:11px}

.welcome-block p{font-size:13px}
.message-row{grid-template-columns:40px minmax(0,1fr);gap:12px;padding:9px 10px}
.message-avatar{width:38px;height:38px;border-radius:12px;font-size:11px}
.message-nick{font-size:13px}
.message-time{font-size:10px}
.message-text{font-size:14px;line-height:1.58}

.system-row{
  margin:3px 10px;
  padding:4px 2px;
  font-size:11px;
  color:#8a91a0;
  background:transparent;
  border:0;
}
.system-row:before{width:4px;height:4px;background:#c8c1b5}
.system-row.error{
  margin:7px 8px;
  padding:9px 11px;
  border:1px solid #eccfd2;
  border-radius:10px;
  background:#fff8f8;
  color:var(--red);
}
.system-row.error:before{background:var(--red)}

.notice-row{
  margin:4px 8px;
  padding:6px 3px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#697386;
  font-size:11px;
}
.notice-row strong{color:#66531a}

.users-head strong{font-size:13px}
.users-head span{font-size:10px}
.user-search-wrap input{font-size:11px}
.role-title{font-size:9px}
.user-item{min-height:43px}
.user-avatar{width:32px;height:32px}
.user-meta strong{font-size:11px}
.user-meta span{font-size:9px}

.composer textarea{font-size:13px}
.status-glyph{
  width:18px;
  text-align:center;
  color:var(--gold-2);
  font-weight:800;
}
.status-item.active{
  background:#e7e3d8;
}
.system-section + .sidebar-section{margin-top:20px}

.status-log-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  margin:0 0 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#faf7ef;
  color:var(--text-2);
  font-size:11px;
}
.status-log-head strong{color:var(--text)}
.status-entry{
  display:grid;
  grid-template-columns:88px minmax(0,1fr) 42px;
  align-items:start;
  gap:10px;
  padding:7px 10px;
  margin:1px 0;
  border-bottom:1px solid #f0ece4;
  font-size:11px;
  line-height:1.45;
}
.status-entry:last-child{border-bottom:0}
.status-entry-source{
  font-weight:800;
  color:#735f22;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.status-entry-text{color:#657086;word-break:break-word}
.status-entry-time{font-size:9px;color:var(--text-3);text-align:right}

@media (max-width:900px){
  .message-row{grid-template-columns:35px minmax(0,1fr);gap:9px}
  .message-avatar{width:34px;height:34px}
  .message-text{font-size:13px}
  .message-nick{font-size:12px}
  .status-entry{grid-template-columns:72px minmax(0,1fr);gap:7px}
  .status-entry-time{display:none}
}


/* ===== V3 NickServ + command UX ===== */
.nickserv-card{max-width:410px}
.modal-kicker{
  margin:14px 0 4px;
  color:var(--gold-2);
  font:800 9px/1 Manrope,sans-serif;
  letter-spacing:.18em;
}
.key-icon{
  font-size:24px;
  color:var(--navy);
  background:#e8e4d9;
}
.nickserv-form{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:8px!important;
}
.nickserv-form input{width:100%}
.modal-inline-error{
  min-height:17px;
  color:var(--red);
  font-size:10px;
  text-align:left;
}
.privacy-note{
  margin-top:13px;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:var(--text-3);
  font-size:9px;
  line-height:1.5;
}
.command-line{
  margin:4px 9px;
  padding:6px 9px;
  border-left:2px solid var(--gold);
  background:#faf8f2;
  color:#6b7280;
  font-size:10px;
  line-height:1.5;
}
.command-line strong{color:var(--text)}


/* ===== V3.1 mIRC formatting ===== */
.format-btn{
  font-family:Georgia,serif;
  font-weight:700;
  font-size:17px;
}
.format-popover{
  position:absolute;
  left:46px;
  bottom:61px;
  width:248px;
  padding:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow-soft);
  z-index:16;
}
.format-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin-bottom:10px;
}
.format-head strong{font-size:11px}
.format-head span{font-size:8px;color:var(--text-3)}
.format-actions{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:5px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}
.format-actions button{
  height:31px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#faf9f6;
  color:var(--text);
  font-size:11px;
}
.format-actions button:hover{
  border-color:#c9bfab;
  background:#f3efe6;
}
.format-label{
  margin:10px 0 7px;
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;
  color:var(--text-3);
}
.mirc-color-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:5px;
}
.mirc-swatch{
  position:relative;
  aspect-ratio:1;
  padding:0;
  border:1px solid rgba(23,35,61,.14);
  border-radius:7px;
  background:var(--swatch)!important;
}
.mirc-swatch:hover{
  transform:scale(1.08);
  box-shadow:0 2px 8px rgba(23,35,61,.18);
}
.mirc-swatch span{
  position:absolute;
  inset:auto 2px 1px auto;
  padding:1px 2px;
  border-radius:3px;
  background:rgba(255,255,255,.72);
  color:#111;
  font-size:6px;
  line-height:1;
}
.format-foot{
  margin-top:9px;
  color:var(--text-3);
  font-size:8px;
  line-height:1.4;
}
.irc-format{
  border-radius:2px;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.irc-white-on-light{
  text-shadow:0 0 1px rgba(0,0,0,.5);
}
.message-text a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
@media(max-width:900px){
  .format-popover{left:37px;max-width:calc(100vw - 28px)}
}


/* ===== V3.3 Harabe FM persistent audio ===== */
.radio-toggle{
  overflow:hidden;
}

.radio-toggle.is-playing{
  color:#fff;
  background:var(--navy);
  border-color:var(--navy);
}

.radio-eq{
  width:22px;
  height:20px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:2px;
}

.radio-eq i{
  display:block;
  width:3px;
  height:5px;
  border-radius:3px 3px 1px 1px;
  background:currentColor;
  transform-origin:bottom center;
}

.radio-toggle.is-playing .radio-eq i:nth-child(1){
  animation:harabeEq1 .72s ease-in-out infinite alternate;
}
.radio-toggle.is-playing .radio-eq i:nth-child(2){
  animation:harabeEq2 .48s ease-in-out infinite alternate;
}
.radio-toggle.is-playing .radio-eq i:nth-child(3){
  animation:harabeEq3 .62s ease-in-out infinite alternate;
}
.radio-toggle.is-playing .radio-eq i:nth-child(4){
  animation:harabeEq4 .43s ease-in-out infinite alternate;
}
.radio-toggle.is-playing .radio-eq i:nth-child(5){
  animation:harabeEq5 .68s ease-in-out infinite alternate;
}

.radio-toggle:not(.is-playing) .radio-eq i:nth-child(1){height:5px}
.radio-toggle:not(.is-playing) .radio-eq i:nth-child(2){height:10px}
.radio-toggle:not(.is-playing) .radio-eq i:nth-child(3){height:15px}
.radio-toggle:not(.is-playing) .radio-eq i:nth-child(4){height:9px}
.radio-toggle:not(.is-playing) .radio-eq i:nth-child(5){height:6px}

@keyframes harabeEq1{from{height:4px}to{height:16px}}
@keyframes harabeEq2{from{height:15px}to{height:6px}}
@keyframes harabeEq3{from{height:7px}to{height:19px}}
@keyframes harabeEq4{from{height:18px}to{height:5px}}
@keyframes harabeEq5{from{height:6px}to{height:14px}}

@media (prefers-reduced-motion: reduce){
  .radio-toggle.is-playing .radio-eq i{
    animation:none!important;
  }
  .radio-toggle.is-playing .radio-eq i:nth-child(1){height:7px}
  .radio-toggle.is-playing .radio-eq i:nth-child(2){height:14px}
  .radio-toggle.is-playing .radio-eq i:nth-child(3){height:18px}
  .radio-toggle.is-playing .radio-eq i:nth-child(4){height:11px}
  .radio-toggle.is-playing .radio-eq i:nth-child(5){height:8px}
}


/* ===== V3.4 universal mobile responsive ===== */

/* Safer sizing on all browsers */
html{
  width:100%;
  max-width:100%;
  overflow:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  width:100%;
  max-width:100%;
  height:var(--app-height,100dvh);
  min-height:0;
  overflow:hidden;
  overscroll-behavior:none;
}

.app-shell,
.chat-screen{
  width:100%;
  max-width:100%;
  height:var(--app-height,100dvh);
  min-height:0;
  overflow:hidden;
}

.workspace,
.chat-main,
.messages,
.composer,
.topbar,
.topbar-left,
.channel-heading,
.topbar-actions{
  min-width:0;
}

img,svg,video,iframe{
  max-width:100%;
}

.message-text{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Tablet */
@media (max-width: 1100px){
  :root{
    --left:238px;
    --right:240px;
  }

  .topbar{
    grid-template-columns:var(--left) minmax(0,1fr) var(--right);
  }

  .channel-topic{
    max-width:46vw;
  }

  .messages{
    padding-left:20px;
    padding-right:20px;
  }
}

/* Main mobile layout */
@media (max-width: 900px){
  :root{
    --topbar:64px;
  }

  body{
    background:var(--surface);
  }

  .chat-screen{
    grid-template-rows:var(--topbar) minmax(0,1fr);
  }

  .topbar{
    width:100%;
    grid-template-columns:auto minmax(0,1fr) auto;
    padding:
      env(safe-area-inset-top)
      env(safe-area-inset-right)
      0
      env(safe-area-inset-left);
    height:calc(var(--topbar) + env(safe-area-inset-top));
  }

  .workspace{
    height:100%;
    min-height:0;
    overflow:hidden;
  }

  .topbar-left{
    padding:0 8px;
    gap:6px;
  }

  .channel-heading{
    padding:0 8px;
    overflow:hidden;
  }

  .channel-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:17px;
  }

  .topbar-actions{
    padding:0 8px 0 4px;
    gap:6px;
  }

  .topbar .icon-btn{
    width:36px;
    height:36px;
    border-radius:11px;
    flex:0 0 auto;
  }

  .brand{
    flex:0 0 auto;
  }

  .brand-symbol{
    width:28px;
    flex:0 0 28px;
  }

  .brand-symbol span{
    width:5px;
  }

  .chat-main{
    height:100%;
    min-height:0;
    overflow:hidden;
    grid-template-rows:auto minmax(0,1fr) auto auto;
  }

  .messages{
    min-height:0;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding:
      14px
      max(10px,env(safe-area-inset-right))
      12px
      max(10px,env(safe-area-inset-left));
  }

  .welcome-block{
    padding:20px 10px 22px;
    margin-bottom:10px;
  }

  .welcome-icon{
    width:48px;
    height:48px;
    border-radius:15px;
  }

  .welcome-block h2{
    margin-top:13px;
    font-size:24px;
  }

  .welcome-block p{
    max-width:100%;
    font-size:12px;
    line-height:1.5;
  }

  .message-row{
    grid-template-columns:36px minmax(0,1fr);
    gap:9px;
    padding:7px 5px;
  }

  .message-avatar{
    width:34px;
    height:34px;
    border-radius:11px;
    font-size:10px;
  }

  .message-head{
    flex-wrap:wrap;
    gap:5px 7px;
  }

  .message-nick{
    max-width:70vw;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:12px;
  }

  .message-time{
    font-size:9px;
  }

  .message-text{
    font-size:13px;
    line-height:1.52;
  }

  .typing-line{
    padding:0 12px 2px;
  }

  .composer{
    width:auto;
    min-width:0;
    min-height:52px;
    margin:
      0
      max(8px,env(safe-area-inset-right))
      max(8px,env(safe-area-inset-bottom))
      max(8px,env(safe-area-inset-left));
    padding:7px;
    gap:2px;
    border-radius:16px;
  }

  .composer-btn{
    width:34px;
    height:36px;
    flex:0 0 34px;
    padding:0;
  }

  .composer textarea{
    min-width:0;
    width:100%;
    min-height:36px;
    padding:9px 5px 7px;
    font-size:13px;
  }

  .composer-tools{
    flex:0 0 auto;
  }

  .send-btn{
    width:39px;
    height:39px;
    flex:0 0 39px;
  }

  .channels-sidebar,
  .users-sidebar{
    top:calc(var(--topbar) + env(safe-area-inset-top));
    bottom:0;
    height:auto;
    width:min(86vw,320px);
    padding-bottom:env(safe-area-inset-bottom);
  }

  .channels-sidebar{
    padding-bottom:0;
  }

  .sidebar-scroll{
    padding-top:14px;
  }

  .me-card{
    padding-bottom:env(safe-area-inset-bottom);
    height:calc(72px + env(safe-area-inset-bottom));
  }

  .mobile-scrim{
    top:calc(var(--topbar) + env(safe-area-inset-top));
  }

  .simple-modal{
    padding:
      max(14px,env(safe-area-inset-top))
      max(14px,env(safe-area-inset-right))
      max(14px,env(safe-area-inset-bottom))
      max(14px,env(safe-area-inset-left));
  }

  .simple-modal-card{
    max-height:calc(var(--app-height,100dvh) - 28px);
    overflow:auto;
  }

  .toast-stack{
    right:max(10px,env(safe-area-inset-right));
    left:max(10px,env(safe-area-inset-left));
    bottom:calc(78px + env(safe-area-inset-bottom));
  }

  .toast{
    width:100%;
  }
}

/* Normal phones 390–520 */
@media (max-width: 520px){
  :root{
    --topbar:60px;
  }

  .topbar-left{
    padding-left:6px;
    padding-right:4px;
  }

  .topbar-actions{
    padding-right:6px;
    gap:5px;
  }

  .topbar .icon-btn{
    width:35px;
    height:35px;
  }

  .brand-symbol{
    width:26px;
    flex-basis:26px;
  }

  .channel-heading{
    padding:0 5px;
  }

  .channel-name{
    font-size:16px;
  }

  .channel-topic{
    display:none;
  }

  .messages{
    padding-top:10px;
  }

  .welcome-block{
    padding:16px 9px 18px;
  }

  .welcome-icon{
    width:44px;
    height:44px;
  }

  .welcome-block h2{
    font-size:22px;
  }

  .welcome-block p{
    font-size:11.5px;
  }

  .composer{
    margin-left:7px;
    margin-right:7px;
  }

  .composer-btn{
    width:32px;
    flex-basis:32px;
  }

  .composer textarea{
    font-size:12.5px;
  }

  .send-btn{
    width:38px;
    height:38px;
  }

  .format-popover,
  .emoji-popover{
    bottom:58px;
  }
}

/* Small phones: 320–389 */
@media (max-width: 389px){
  :root{
    --topbar:56px;
  }

  .topbar-left{
    padding:0 4px;
    gap:3px;
  }

  .topbar-actions{
    padding:0 4px 0 2px;
    gap:3px;
  }

  .topbar .icon-btn{
    width:33px;
    height:33px;
    border-radius:10px;
  }

  .brand-symbol{
    width:22px;
    flex-basis:22px;
    height:22px;
  }

  .brand-symbol span{
    width:4px;
  }

  .channel-heading{
    padding:0 4px;
  }

  .channel-name{
    font-size:15px;
  }

  /* Keep radio + users; hide search on very narrow screens */
  #searchToggleBtn{
    display:none;
  }

  .messages{
    padding-left:6px;
    padding-right:6px;
  }

  .welcome-block{
    padding-left:4px;
    padding-right:4px;
  }

  .message-row{
    grid-template-columns:32px minmax(0,1fr);
    gap:7px;
    padding-left:3px;
    padding-right:3px;
  }

  .message-avatar{
    width:31px;
    height:31px;
  }

  .message-nick{
    max-width:58vw;
    font-size:11.5px;
  }

  .message-text{
    font-size:12.5px;
  }

  .composer{
    min-height:50px;
    padding:6px;
    margin-left:5px;
    margin-right:5px;
  }

  .composer-btn{
    width:30px;
    flex-basis:30px;
    height:34px;
    font-size:17px;
  }

  .composer textarea{
    padding-left:3px;
    padding-right:3px;
    font-size:12px;
  }

  .send-btn{
    width:36px;
    height:36px;
  }

  .radio-eq{
    width:19px;
  }

  .radio-eq i{
    width:2.5px;
  }

  .channels-sidebar,
  .users-sidebar{
    width:min(90vw,300px);
  }
}

/* Very narrow phones */
@media (max-width: 340px){
  .brand-symbol{
    display:none;
  }

  .channel-heading{
    padding-left:3px;
    padding-right:3px;
  }

  .channel-name{
    font-size:14px;
  }

  #nickservBtn{
    display:none;
  }

  .topbar-actions{
    gap:2px;
  }

  .composer-btn.format-btn{
    display:none;
  }
}

/* Mobile landscape / low-height screens */
@media (max-width:900px) and (orientation:landscape) and (max-height:520px){
  :root{
    --topbar:50px;
  }

  .topbar .icon-btn{
    width:32px;
    height:32px;
  }

  .welcome-block{
    display:none;
  }

  .messages{
    padding-top:7px;
  }

  .composer{
    min-height:46px;
    margin-bottom:max(5px,env(safe-area-inset-bottom));
  }

  .composer-btn{
    height:32px;
  }

  .send-btn{
    width:34px;
    height:34px;
  }

  .channels-sidebar,
  .users-sidebar{
    top:calc(var(--topbar) + env(safe-area-inset-top));
  }
}

/* Tablet portrait */
@media (min-width:601px) and (max-width:900px){
  .channels-sidebar,
  .users-sidebar{
    width:min(62vw,340px);
  }

  .messages{
    padding-left:20px;
    padding-right:20px;
  }

  .composer{
    margin-left:16px;
    margin-right:16px;
  }
}

/* Avoid hover-only behavior on touch devices */
@media (hover:none) and (pointer:coarse){
  .channel-item:hover,
  .private-item:hover,
  .user-item:hover,
  .icon-btn:hover,
  .composer-btn:hover{
    transform:none;
  }

  button{
    -webkit-tap-highlight-color:transparent;
  }
}


/* ===== V3.5 Nick menu + IRC moderation ===== */

.user-menu-overlay{
  background:rgba(23,35,61,.08);
  backdrop-filter:none;
}

.user-card-modal{
  width:318px;
  padding:18px;
  text-align:left;
  border-radius:18px;
}

.user-menu-profile{
  display:flex;
  align-items:center;
  gap:11px;
  padding:1px 35px 13px 1px;
  border-bottom:1px solid var(--line);
}

.user-card-modal .profile-avatar{
  width:48px;
  height:48px;
  margin:0;
  flex:0 0 48px;
  border-radius:15px;
  font-size:14px;
}

.user-menu-profile-text{
  min-width:0;
}

.user-card-modal .user-menu-profile h3{
  margin:0;
  max-width:195px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:16px;
}

.user-card-modal .user-menu-profile p{
  margin:3px 0 0;
  font-size:9px;
}

.user-menu-profile-text > span{
  display:block;
  margin-top:3px;
  color:var(--text-3);
  font-size:8px;
}

.user-menu-section-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:13px 2px 7px;
  color:var(--text-3);
  font-size:8px;
  font-weight:800;
  letter-spacing:.13em;
}

.user-menu-section-title > span{
  color:var(--gold-2);
  letter-spacing:0;
  font-size:8px;
}

.user-menu-actions{
  display:grid;
  gap:6px;
}

.user-menu-actions.quick{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

.user-menu-actions.admin-actions{
  grid-template-columns:repeat(2,minmax(0,1fr));
}

.user-action{
  min-width:0;
  min-height:42px;
  padding:8px 7px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
  color:var(--text-2);
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:7px;
  font-size:9px;
  font-weight:700;
  text-align:left;
}

.user-action:hover{
  border-color:#c9bfab;
  background:#f7f4ed;
}

.user-action.primary-action{
  color:#fff;
  border-color:var(--navy);
  background:var(--navy);
}

.user-action.danger-soft{
  color:#a34848;
  border-color:#ecd5d3;
  background:#fff9f8;
}

.user-action:disabled,
.user-action.is-hidden{
  display:none;
}

.user-action-icon{
  width:23px;
  height:23px;
  flex:0 0 23px;
  display:grid;
  place-items:center;
  border-radius:7px;
  background:#f0eee8;
  color:var(--navy);
  font-size:10px;
  font-weight:900;
}

.primary-action .user-action-icon{
  color:var(--navy);
  background:#fff;
}

.danger-soft .user-action-icon{
  color:#a34848;
  background:#faeae8;
}

.user-admin-section{
  margin-top:3px;
}

.user-menu-note{
  margin-top:9px;
  padding:8px 9px;
  border-radius:9px;
  background:#f8f6f1;
  color:var(--text-3);
  font-size:7.5px;
  line-height:1.45;
}

/* Desktop: compact menu anchored next to clicked nick */
@media (min-width:901px){
  .user-menu-overlay{
    display:block;
    padding:0;
  }

  .user-menu-overlay .user-card-modal{
    position:fixed;
    left:var(--user-menu-left,50%);
    top:var(--user-menu-top,50%);
    max-height:min(650px,calc(100vh - 24px));
    overflow:auto;
    box-shadow:0 18px 52px rgba(23,35,61,.20);
  }
}

/* Mobile: native-feeling bottom sheet */
@media (max-width:900px){
  .user-menu-overlay{
    display:flex;
    align-items:flex-end;
    justify-content:stretch;
    padding:0;
    background:rgba(23,35,61,.27);
    backdrop-filter:blur(3px);
  }

  .user-menu-overlay .user-card-modal{
    position:relative!important;
    left:auto!important;
    top:auto!important;
    width:100%;
    max-width:none;
    max-height:min(82vh,720px);
    padding:
      18px
      max(16px,env(safe-area-inset-right))
      calc(15px + env(safe-area-inset-bottom))
      max(16px,env(safe-area-inset-left));
    border:0;
    border-top:1px solid var(--line);
    border-radius:21px 21px 0 0;
    overflow:auto;
    box-shadow:0 -18px 50px rgba(23,35,61,.18);
  }

  .user-menu-overlay .user-card-modal::before{
    content:"";
    display:block;
    width:38px;
    height:4px;
    margin:-8px auto 11px;
    border-radius:999px;
    background:#d9d4cb;
  }

  .user-card-modal .user-menu-profile h3{
    max-width:62vw;
    font-size:17px;
  }

  .user-menu-actions.quick{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .user-action{
    min-height:45px;
    font-size:10px;
  }
}

@media (max-width:370px){
  .user-menu-actions.quick{
    grid-template-columns:1fr;
  }

  .user-menu-actions.admin-actions{
    grid-template-columns:1fr 1fr;
  }
}


/* V3.6.3: kanal mesaj alanı üst topic'e güveniyor; tekrar intro yok */


@media (min-width:901px){
  .messages{
    padding-top:14px;
  }
}

@media (max-width:900px){
  .messages{
    padding-top:10px;
  }
}


/* V3.6.4: Status satırlarında tüm mIRC renklerini koru */
.status-entry-text .irc-format,
.status-entry-source .irc-format {
  border-radius: 3px;
  padding: 0 1px;
}


/* ===== V3.7 Right Hub: Odalar | Kullanıcılar ===== */

/* NickServ doğrulaması otomatik kalır; manuel üst bar kısayolu gösterilmez. */
#nickservBtn{
  display:none!important;
}

/* Left rail now contains only system + private messages. */
.channels-sidebar .private-section{
  margin-top:26px;
}

/* Combined right panel */
.users-sidebar.right-hub{
  padding:0;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}

.right-hub-head{
  min-height:58px;
  padding:10px 10px 8px;
  display:flex;
  align-items:center;
  gap:7px;
  border-bottom:1px solid var(--line);
  background:var(--surface-2);
}

.right-hub-tabs{
  min-width:0;
  flex:1;
  height:38px;
  padding:3px;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:3px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#ece8df;
}

.right-hub-tab{
  min-width:0;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text-3);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:9px;
  font-weight:800;
  white-space:nowrap;
}

.right-hub-tab:hover{
  color:var(--navy);
}

.right-hub-tab.active{
  background:#fff;
  color:var(--navy);
  box-shadow:0 1px 5px rgba(23,35,61,.07);
}

.right-tab-icon{
  font-size:11px;
  font-weight:900;
  color:var(--gold-2);
}

.right-hub-pane{
  min-height:0;
  overflow:hidden;
}

.right-hub-pane[hidden]{
  display:none!important;
}

.rooms-pane{
  height:100%;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  padding:13px 12px 14px;
}

.rooms-pane-head{
  padding:2px 3px 11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}

.rooms-pane-head strong{
  display:block;
  font:800 12px/1.2 Manrope,sans-serif;
}

.rooms-pane-head > div > span{
  display:block;
  margin-top:3px;
  color:var(--text-3);
  font-size:9px;
}

.room-add-btn{
  height:30px;
  padding:0 9px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#fff;
  color:var(--navy);
  display:flex;
  align-items:center;
  gap:5px;
  font-size:8px;
  font-weight:800;
}

.room-add-btn span{
  color:var(--gold-2);
  font-size:15px;
  line-height:1;
}

.right-channel-list{
  min-height:0;
  overflow:auto;
  padding:1px 0 8px;
}

.right-channel-list .channel-item{
  min-height:42px;
  padding:0 10px;
}

.users-pane{
  height:100%;
  min-height:0;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  padding:13px 12px 14px;
}

.users-pane .users-head{
  padding:2px 3px 11px;
}

.users-pane .user-list{
  min-height:0;
}

/* Desktop: both tabs remain visible at all times in right column. */
@media (min-width:901px){
  .right-hub{
    background:var(--surface-2);
  }
}

/* Mobile: right hub opens as one drawer with the same two tabs. */
@media (max-width:900px){
  .users-sidebar.right-hub{
    padding:0;
    grid-template-rows:auto minmax(0,1fr);
  }

  .right-hub-head{
    min-height:57px;
    padding:
      9px
      max(9px,env(safe-area-inset-right))
      8px
      9px;
  }

  .right-hub-tabs{
    height:39px;
  }

  .right-hub-tab{
    font-size:10px;
  }

  .rooms-pane,
  .users-pane{
    padding:
      12px
      max(12px,env(safe-area-inset-right))
      calc(12px + env(safe-area-inset-bottom))
      12px;
  }
}

@media (max-width:389px){
  .right-hub-tabs{
    grid-template-columns:1fr 1.18fr;
  }

  .right-hub-tab{
    gap:4px;
    font-size:9px;
  }
}


/* ===== V3.8 Desktop: Odalar + Kullanıcılar yan yana ===== */
@media (min-width:901px){
  :root{ --right:420px; }

  .topbar{
    grid-template-columns:var(--left) minmax(0,1fr) var(--right);
  }

  .workspace{
    grid-template-columns:var(--left) minmax(0,1fr) var(--right);
  }

  .users-sidebar.right-hub{
    display:grid;
    grid-template-rows:minmax(0,1fr);
    background:var(--surface-2);
  }

  .right-hub-head{
    display:none;
  }

  .right-hub-split{
    min-height:0;
    height:100%;
    display:grid;
    grid-template-columns:150px minmax(0,1fr);
  }

  .right-hub-pane,
  .right-hub-pane[hidden]{
    display:grid!important;
    min-height:0;
    height:100%;
  }

  .rooms-pane{
    grid-template-rows:auto minmax(0,1fr);
    padding:14px 10px;
    border-right:1px solid var(--line);
    background:#f7f4ed;
  }

  .users-pane{
    grid-template-rows:auto auto minmax(0,1fr);
    padding:14px 11px;
    background:var(--surface-2);
  }

  .rooms-pane-head{
    padding:2px 1px 10px;
    align-items:flex-start;
  }

  .rooms-pane-head > div > span{
    display:none;
  }

  .room-add-btn{
    width:28px;
    min-width:28px;
    padding:0;
    justify-content:center;
    font-size:0;
  }

  .room-add-btn > span{
    margin:0;
  }

  .right-channel-list .channel-item{
    min-height:40px;
    padding:0 8px;
    gap:7px;
  }

  .right-channel-list .channel-item > span:nth-child(2){
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .users-pane .users-head{
    padding:2px 2px 10px;
  }
}

@media (max-width:900px){
  .right-hub-split{
    min-height:0;
    height:100%;
    display:block;
  }

  .right-hub-head{
    display:flex;
  }

  .right-hub-pane[hidden]{
    display:none!important;
  }

  .right-hub-pane:not([hidden]){
    display:grid;
  }

  .rooms-pane,
  .users-pane{
    height:100%;
  }
}


/* ===== V3.9 ALL NAVIGATION ON RIGHT ===== */

@media (min-width:901px){
  :root{
    --right:300px;
  }

  .topbar{
    grid-template-columns:210px minmax(0,1fr) var(--right)!important;
  }

  .topbar-left{
    border-right:1px solid var(--line);
    padding:0 18px;
  }

  .workspace.all-right-workspace{
    grid-template-columns:minmax(0,1fr) var(--right)!important;
  }

  .all-right-sidebar{
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    width:auto!important;
    height:100%!important;
    border-left:1px solid var(--line);
    padding:0!important;
    display:grid!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    overflow:hidden!important;
    background:var(--surface-2);
  }
}

.all-right-scroll{
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  padding:14px 12px 10px;
}

.right-section{
  min-width:0;
}

.right-section + .right-section{
  margin-top:20px;
}

.all-right-sidebar .sidebar-title{
  margin:0 3px 8px;
}

.system-right-section .channel-item,
.rooms-right-section .channel-item{
  min-height:39px;
}

.right-all-channel-list{
  display:grid;
  gap:3px;
}

.right-private-list{
  display:grid;
  gap:3px;
  max-height:150px;
  overflow:auto;
}

.private-right-section .private-item{
  min-height:39px;
}

.users-right-section{
  min-height:240px;
}

.users-right-section .users-head{
  padding:0 3px 9px;
}

.users-right-section .user-search-wrap{
  margin-bottom:8px;
}

.users-right-section .user-list{
  min-height:150px;
  max-height:none;
}

.right-me-card{
  width:100%;
  flex:0 0 auto;
  border-top:1px solid var(--line);
  background:#f2efe8;
}

/* Hide obsolete right-tab/split UI from previous experiments. */
.right-hub-head,
.right-hub-split,
.right-hub-tabs{
  display:none!important;
}

/* Mobile: one drawer contains Status + Odalar + Özel Mesajlar + Kullanıcılar. */
@media (max-width:900px){
  .workspace.all-right-workspace{
    grid-template-columns:1fr!important;
  }

  .all-right-sidebar{
    position:fixed!important;
    top:calc(var(--topbar) + env(safe-area-inset-top))!important;
    right:0!important;
    bottom:0!important;
    left:auto!important;
    width:min(88vw,330px)!important;
    height:auto!important;
    z-index:50;
    display:grid!important;
    grid-template-rows:auto minmax(0,1fr) auto!important;
    padding:0!important;
    transform:translateX(105%)!important;
    transition:transform .24s ease;
    border-left:1px solid var(--line);
    background:var(--surface-2);
    box-shadow:var(--shadow);
  }

  .all-right-sidebar.open{
    transform:translateX(0)!important;
  }

  .all-right-mobile-head{
    min-height:50px;
    padding:8px 10px 8px 14px;
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid var(--line);
  }

  .all-right-mobile-head strong{
    font-size:11px;
  }

  .all-right-scroll{
    padding:
      13px
      max(12px,env(safe-area-inset-right))
      12px
      12px;
  }

  .right-section + .right-section{
    margin-top:18px;
  }

  .right-private-list{
    max-height:130px;
  }

  .users-right-section .user-list{
    min-height:180px;
  }

  .right-me-card{
    padding-bottom:env(safe-area-inset-bottom);
    height:calc(72px + env(safe-area-inset-bottom));
  }

  /* Only one mobile navigation button is needed. */
  #mobileUsersBtn{
    display:none!important;
  }
}

/* Small phones */
@media (max-width:389px){
  .all-right-sidebar{
    width:min(92vw,310px)!important;
  }
}


/* ===== V3.10 Daha sade sağ panel ===== */

/* Role group headings are no longer rendered. */
.role-group,
.role-title{
  display:none!important;
}

.all-right-scroll{
  padding-top:12px;
}

.right-section + .right-section{
  margin-top:16px;
}

.all-right-sidebar .sidebar-title{
  margin:0 3px 6px;
}

.all-right-sidebar .sidebar-title > span{
  font-size:7px;
  letter-spacing:.12em;
}

.all-right-sidebar .channel-item,
.all-right-sidebar .private-item{
  min-height:35px;
  font-size:9px;
}

.all-right-sidebar .channel-hash,
.all-right-sidebar .status-glyph{
  font-size:10px;
}

.users-right-section .users-head{
  padding-bottom:7px;
}

.users-right-section .users-head strong{
  font-size:10px;
}

.users-right-section .users-head span{
  margin-top:2px;
  font-size:8px;
}

.users-right-section .user-search-wrap{
  height:32px;
  margin-bottom:5px;
  padding:0 8px;
}

.users-right-section .user-search-wrap input{
  font-size:9px;
}

.users-right-section .user-list{
  padding-top:3px;
}

.compact-user-item{
  min-height:34px!important;
  padding:3px 4px!important;
  gap:7px!important;
  border-radius:8px!important;
}

.compact-user-item .user-avatar{
  width:26px;
  height:26px;
  border-radius:8px;
  font-size:8px;
}

.compact-user-item .user-meta strong{
  font-size:9px;
  line-height:1.2;
}

.compact-user-item .user-meta > span{
  display:none!important;
}

.compact-user-item .user-prefix{
  min-width:12px;
  text-align:center;
  font-size:10px;
  font-weight:900;
}

/* Preserve authority distinction only with nick color + IRC prefix. */
.compact-user-item[data-role="founder"] strong,
.compact-user-item[data-role="founder"] .user-prefix{
  color:#9c4f78;
}

.compact-user-item[data-role="sop"] strong,
.compact-user-item[data-role="sop"] .user-prefix{
  color:var(--violet);
}

.compact-user-item[data-role="op"] strong,
.compact-user-item[data-role="op"] .user-prefix{
  color:#9c7215;
}

.compact-user-item[data-role="halfop"] strong,
.compact-user-item[data-role="halfop"] .user-prefix{
  color:var(--teal);
}

.compact-user-item[data-role="voice"] .user-prefix{
  color:var(--gold-2);
}

.private-right-section .empty-private,
.users-empty{
  font-size:8.5px;
}

.right-me-card{
  min-height:62px;
  height:62px;
}

.right-me-card .avatar-me{
  width:31px;
  height:31px;
  font-size:9px;
}

.right-me-card .me-info strong{
  font-size:9px;
}

.right-me-card .me-info span{
  font-size:7.5px;
}

@media (max-width:900px){
  .right-section + .right-section{
    margin-top:15px;
  }

  .compact-user-item{
    min-height:37px!important;
  }

  .compact-user-item .user-meta strong{
    font-size:10px;
  }
}


/* ===== V3.11 Yazılar bir tık büyütüldü ===== */
.all-right-sidebar .sidebar-title > span{
  font-size:7.8px;
}

.all-right-sidebar .channel-item,
.all-right-sidebar .private-item{
  min-height:37px;
  font-size:10px;
}

.all-right-sidebar .channel-hash,
.all-right-sidebar .status-glyph{
  font-size:11px;
}

.users-right-section .users-head strong{
  font-size:10.8px;
}

.users-right-section .users-head span{
  font-size:8.6px;
}

.users-right-section .user-search-wrap input{
  font-size:9.8px;
}

.compact-user-item{
  min-height:36px!important;
}

.compact-user-item .user-avatar{
  width:28px;
  height:28px;
  font-size:8.6px;
}

.compact-user-item .user-meta strong{
  font-size:10px;
}

.compact-user-item .user-prefix{
  font-size:10.8px;
}

.private-right-section .empty-private,
.users-empty{
  font-size:9px;
}

.right-me-card .avatar-me{
  width:33px;
  height:33px;
  font-size:9.5px;
}

.right-me-card .me-info strong{
  font-size:9.8px;
}

.right-me-card .me-info span{
  font-size:8px;
}

@media (max-width:900px){
  .compact-user-item .user-meta strong{
    font-size:10.5px;
  }

  .users-right-section .user-search-wrap input{
    font-size:10.5px;
  }
}


/* ===== V3.12 Daha dar sağ panel + renkli topic ===== */
@media (min-width:901px){
  :root{
    --right:270px;
  }
}

.channel-topic .irc-format{
  border-radius:3px;
  padding:0 1px;
}

/* Topic içinde background color varsa satır yüksekliğini bozmasın. */
.channel-topic{
  line-height:1.45;
}


/* ===== V4.0 Özel mesaj + seslenme/bildirim ===== */

.notify-toggle{
  position:relative;
}

.notify-toggle svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.notify-state-dot{
  position:absolute;
  right:6px;
  top:6px;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#bbb5aa;
  box-shadow:0 0 0 2px var(--surface);
}

.notify-toggle.active{
  color:#fff;
  background:var(--navy);
  border-color:var(--navy);
}

.notify-toggle.active .notify-state-dot{
  background:#4ed69a;
  box-shadow:0 0 0 2px var(--navy);
}

.notify-toggle.blocked{
  color:var(--red);
}

.unread-counter{
  width:auto!important;
  min-width:16px;
  height:16px!important;
  padding:0 4px;
  border-radius:999px!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--gold)!important;
  color:#fff;
  font-size:7px;
  font-weight:800;
  line-height:1;
}

.unread-counter:empty{
  min-width:7px;
  width:7px!important;
  height:7px!important;
  padding:0;
}

.mention-counter{
  background:#ba5467!important;
}

.message-row.mention{
  background:#fff8df;
  box-shadow:inset 3px 0 0 var(--gold);
}

.message-row.mention:hover{
  background:#fff5d3;
}

.message-row.mention .message-nick{
  color:#9a7110;
}

.message-row.mention::after{
  content:"SANA";
  position:absolute;
  right:8px;
  top:8px;
  padding:2px 5px;
  border-radius:999px;
  color:#8c6814;
  background:#f5e7b7;
  font-size:6.5px;
  font-weight:900;
  letter-spacing:.08em;
}

.private-item .unread-counter{
  margin-left:auto;
}

.private-item .unread-counter + .private-close{
  margin-left:2px;
}

@media(max-width:900px){
  .notify-toggle{
    display:grid;
  }

  .message-row.mention::after{
    right:5px;
    top:5px;
  }
}

@media(max-width:389px){
  /* Keep radio + notification + essential navigation on narrow phones. */
  #notificationToggleBtn{
    width:33px;
    height:33px;
  }
}


/* ===== V4.1 Kanal Yönetimi ===== */

.channel-tools-btn svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.channel-tools-btn:not([hidden]){
  display:grid;
}

.channel-tools-card{
  width:min(560px,calc(100vw - 30px));
  max-width:560px;
  max-height:min(86dvh,760px);
  padding:19px;
  overflow:auto;
  text-align:left;
}

.channel-tools-head{
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 34px 14px 0;
  border-bottom:1px solid var(--line);
}

.channel-tools-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  border-radius:14px;
  color:#fff;
  background:var(--navy);
  font-size:19px;
  font-weight:900;
}

.channel-tools-head .modal-kicker{
  margin:0 0 4px;
}

.channel-tools-head h3{
  margin:0;
  font-size:17px;
}

.channel-tools-head p{
  margin:4px 0 0;
  color:var(--text-3);
  font-size:9px;
}

.channel-tools-head p strong{
  color:var(--text-2);
}

.channel-tools-mode-summary{
  margin-left:6px;
  padding:2px 6px;
  border-radius:999px;
  background:#f0ece2;
  color:#80641b;
  font-size:8px;
  font-weight:800;
}

.channel-tools-section{
  padding:15px 0;
  border-bottom:1px solid var(--line);
}

.channel-tools-section:last-child{
  padding-bottom:0;
  border-bottom:0;
}

.channel-tools-section-head{
  margin-bottom:9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.channel-tools-section-head strong{
  display:block;
  font-size:11px;
}

.channel-tools-section-head > div > span{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px;
}

.channel-topic-input{
  width:100%;
  min-height:72px;
  resize:vertical;
  border:1px solid var(--line);
  border-radius:11px;
  padding:10px 11px;
  outline:none;
  background:#fff;
  color:var(--text);
  font:500 10px/1.55 Inter,sans-serif;
}

.channel-topic-input:focus{
  border-color:#b8ad96;
  box-shadow:0 0 0 3px rgba(187,163,76,.08);
}

.channel-tools-row-end{
  margin-top:9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.channel-field-hint{
  color:var(--text-3);
  font-size:8px;
}

.compact-primary{
  width:auto;
  min-width:108px;
  min-height:33px;
  padding:0 12px;
  font-size:9px;
}

.tiny-btn{
  width:auto;
  min-height:29px;
  padding:0 10px;
  font-size:8px;
}

.channel-mode-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.channel-mode-option{
  position:relative;
  min-height:54px;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:11px;
  display:flex;
  align-items:center;
  gap:8px;
  background:#fff;
  cursor:pointer;
}

.channel-mode-option input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.mode-check{
  width:19px;
  height:19px;
  flex:0 0 19px;
  border:1px solid #cbc4b7;
  border-radius:6px;
  background:#faf9f6;
  position:relative;
}

.channel-mode-option input:checked + .mode-check{
  border-color:var(--navy);
  background:var(--navy);
}

.channel-mode-option input:checked + .mode-check::after{
  content:"";
  position:absolute;
  left:6px;
  top:3px;
  width:4px;
  height:8px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(42deg);
}

.channel-mode-option input:disabled ~ *{
  opacity:.45;
}

.channel-mode-option strong{
  display:block;
  color:var(--navy);
  font-size:10px;
}

.channel-mode-option small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:7.5px;
}

.ban-list{
  max-height:190px;
  overflow:auto;
  border:1px solid var(--line);
  border-radius:11px;
  background:#fff;
}

.ban-list-empty{
  padding:17px 12px;
  color:var(--text-3);
  font-size:8.5px;
  text-align:center;
}

.ban-list-row{
  min-height:48px;
  padding:7px 8px 7px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  border-bottom:1px solid #f0ece5;
}

.ban-list-row:last-child{
  border-bottom:0;
}

.ban-mask{
  min-width:0;
  flex:1;
}

.ban-mask strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text-2);
  font:700 9px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

.ban-mask span{
  display:block;
  margin-top:3px;
  color:var(--text-3);
  font-size:7.5px;
}

.ban-remove-btn{
  flex:0 0 auto;
  min-height:27px;
  padding:0 8px;
  border:1px solid #ecd3d1;
  border-radius:8px;
  background:#fff9f8;
  color:#9c4747;
  font-size:7.5px;
  font-weight:800;
}

.ban-remove-btn:disabled{
  opacity:.4;
}

@media(max-width:900px){
  .channel-tools-overlay{
    align-items:flex-end;
    padding:0;
  }

  .channel-tools-card{
    width:100%;
    max-width:none;
    max-height:88dvh;
    border:0;
    border-radius:20px 20px 0 0;
    padding:
      18px
      max(15px,env(safe-area-inset-right))
      calc(15px + env(safe-area-inset-bottom))
      max(15px,env(safe-area-inset-left));
  }

  .channel-mode-grid{
    grid-template-columns:1fr;
  }

  .channel-tools-row-end{
    align-items:flex-end;
  }
}


/* ===== V4.1.1 IRC LIST / tüm sunucu kanalları ===== */

.rooms-title-actions{
  display:flex;
  align-items:center;
  gap:4px;
}

.room-refresh-action{
  font-size:12px!important;
}

.room-refresh-action.loading{
  animation:channelListSpin .8s linear infinite;
}

@keyframes channelListSpin{
  to{transform:rotate(360deg)}
}

.channel-name-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.channel-population{
  min-width:16px;
  height:16px;
  margin-left:auto;
  padding:0 4px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#ece8df;
  color:var(--text-3);
  font-size:7px;
  font-weight:700;
}

.directory-channel:not(.active){
  color:#697384;
}

.directory-channel:not(.active) .channel-hash{
  opacity:.62;
}

.joined-channel .channel-name-text{
  color:inherit;
}


/* ===== V4.1.3 Kanal kapatma / PART düğmesi ===== */

.channel-row-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
}

.channel-row-actions .channel-population,
.channel-row-actions .channel-unread{
  margin-left:0;
}

.channel-close{
  width:20px;
  height:20px;
  flex:0 0 20px;
  display:grid;
  place-items:center;
  border-radius:6px;
  color:#9b968d;
  font-size:13px;
  font-weight:500;
  line-height:1;
  cursor:pointer;
  opacity:.72;
}

.channel-close:hover,
.channel-close:focus-visible{
  color:#994d4d;
  background:#f2e4e2;
  opacity:1;
  outline:none;
}

.channel-item.active .channel-close{
  color:#827d74;
}

.directory-channel .channel-close{
  display:none!important;
}

@media (hover:hover) and (pointer:fine){
  .joined-channel .channel-close{
    opacity:0;
  }

  .joined-channel:hover .channel-close,
  .joined-channel.active .channel-close,
  .joined-channel .channel-close:focus-visible{
    opacity:1;
  }
}

@media (max-width:900px){
  .channel-close{
    width:24px;
    height:24px;
    flex-basis:24px;
    font-size:15px;
    opacity:1;
  }
}


/* ===== V4.1.4 JOIN-only room sidebar ===== */
.rooms-title-actions,
.room-refresh-action,
.channel-population,
.directory-channel{
  display:none!important;
}

.rooms-empty{
  padding:8px 8px;
  color:var(--text-3);
  font-size:8.5px;
  line-height:1.4;
}



/* ===== V4.2 Bağlantı dayanıklılığı ===== */
.chat-screen{
  position:relative;
}

.connection-pill.reconnecting{
  border-color:#e4d8a7;
  background:#fff9e4;
  color:#806516;
}

.connection-pill.reconnecting .connection-dot{
  background:#d4a916;
  animation:connectionPulse 1s ease-in-out infinite;
}

@keyframes connectionPulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.78)}
}

.reconnect-banner{
  position:absolute;
  top:calc(var(--topbar) + 8px);
  left:50%;
  z-index:88;
  min-height:36px;
  max-width:min(520px,calc(100vw - 30px));
  padding:7px 9px 7px 11px;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid #eadca9;
  border-radius:11px;
  background:#fff9e6;
  color:#6f5a19;
  box-shadow:0 8px 25px rgba(35,44,69,.10);
  font-size:8.5px;
  font-weight:700;
}

.reconnect-banner[hidden]{
  display:none!important;
}

.reconnect-spinner{
  width:13px;
  height:13px;
  flex:0 0 13px;
  border:2px solid rgba(128,101,22,.20);
  border-top-color:#9e7d18;
  border-radius:50%;
  animation:reconnectSpin .75s linear infinite;
}

@keyframes reconnectSpin{
  to{transform:rotate(360deg)}
}

.reconnect-banner button{
  flex:0 0 auto;
  min-height:24px;
  margin-left:4px;
  padding:0 8px;
  border:1px solid #d8c677;
  border-radius:7px;
  background:#fff;
  color:#6f5a19;
  font-size:7.5px;
  font-weight:800;
}

.reconnect-banner.failed{
  border-color:#e6c7c4;
  background:#fff3f1;
  color:#944747;
}

.reconnect-banner.failed .reconnect-spinner{
  display:none;
}

@media(max-width:900px){
  .reconnect-banner{
    position:fixed;
    top:calc(var(--topbar) + env(safe-area-inset-top) + 7px);
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
    max-width:none;
    transform:none;
    font-size:9px;
  }
}


/* ===== V4.3 Klasik WHOIS ===== */

.whois-card{
  width:min(520px,calc(100vw - 30px));
  max-width:520px;
  padding:21px;
  text-align:left;
}

.whois-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 34px 14px 0;
  border-bottom:1px solid var(--line);
}

.whois-avatar{
  width:52px;
  height:52px;
  flex:0 0 52px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:var(--navy);
  color:#fff;
  font:800 15px/1 Manrope,sans-serif;
}

.whois-head-main{
  min-width:0;
}

.whois-head .modal-kicker{
  margin:0 0 3px;
}

.whois-head h3{
  margin:0;
  max-width:320px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:19px;
}

.whois-badges{
  min-height:18px;
  margin-top:6px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px;
}

.whois-badge{
  height:18px;
  padding:0 6px;
  display:inline-flex;
  align-items:center;
  border-radius:999px;
  background:#eeeae2;
  color:var(--text-2);
  font-size:7px;
  font-weight:800;
}

.whois-badge.registered{
  background:#edf4ff;
  color:#48688b;
}

.whois-badge.operator{
  background:#f3e9f3;
  color:#855a85;
}

.whois-badge.secure{
  background:#e9f5ee;
  color:#3e7658;
}

.whois-badge.away{
  background:#fff2dd;
  color:#8b6a22;
}

.whois-loading{
  min-height:34px;
  margin:11px 0 0;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  border-radius:9px;
  background:#f7f5ef;
  color:var(--text-3);
  font-size:8.5px;
}

.whois-loading[hidden]{
  display:none!important;
}

.whois-loading-spinner{
  width:12px;
  height:12px;
  border:2px solid #ddd6c7;
  border-top-color:var(--gold-2);
  border-radius:50%;
  animation:whoisSpin .75s linear infinite;
}

@keyframes whoisSpin{
  to{transform:rotate(360deg)}
}

.whois-error{
  margin:10px 0 0;
  padding:8px 10px;
  border:1px solid #ebcfcc;
  border-radius:9px;
  background:#fff6f5;
  color:#984b4b;
  font-size:8.5px;
}

.whois-grid{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.whois-field{
  min-width:0;
  min-height:51px;
  padding:8px 9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}

.whois-field > span,
.whois-wide-field > span{
  display:block;
  margin-bottom:4px;
  color:var(--text-3);
  font-size:7px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.whois-field strong{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--text-2);
  font-size:9px;
  line-height:1.35;
}

.whois-wide-field{
  margin-top:7px;
  padding:9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}

.whois-channels{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  color:var(--text-2);
  font-size:8.5px;
}

.whois-channel-chip{
  min-height:23px;
  padding:0 7px;
  border:1px solid #dfd9cd;
  border-radius:7px;
  background:#f8f6f1;
  color:var(--navy);
  font-size:8px;
  font-weight:700;
}

.whois-away strong{
  color:#7a6327;
  font-size:9px;
}

.whois-extra-line{
  padding:2px 0;
  color:var(--text-2);
  font-size:8px;
  line-height:1.4;
}

.whois-actions{
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

.whois-actions .primary-btn,
.whois-actions .secondary-btn{
  min-height:39px;
  border-radius:11px;
  font-size:9px;
}

@media(max-width:900px){
  .whois-overlay{
    align-items:flex-end;
    padding:0;
  }

  .whois-card{
    width:100%;
    max-width:none;
    max-height:86dvh;
    padding:
      18px
      max(15px,env(safe-area-inset-right))
      calc(15px + env(safe-area-inset-bottom))
      max(15px,env(safe-area-inset-left));
    overflow:auto;
    border:0;
    border-radius:20px 20px 0 0;
  }

  .whois-grid{
    grid-template-columns:1fr;
  }

  .whois-head h3{
    max-width:65vw;
  }
}


/* =====================================================================
   V4.4 — MOBİL KLASİK IRC GÖRÜNÜMÜ
   Desktop remains unchanged.
   ===================================================================== */

@media (max-width:900px){

  :root{
    --mobile-users-width:36vw;
    --mobile-topbar:70px;
  }

  /* ---------- Screen skeleton ---------- */
  .chat-screen{
    grid-template-rows:
      calc(var(--mobile-topbar) + env(safe-area-inset-top))
      auto
      minmax(0,1fr)!important;
    background:#fbfaf7;
  }

  .topbar{
    height:calc(var(--mobile-topbar) + env(safe-area-inset-top))!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    padding:
      env(safe-area-inset-top)
      max(8px,env(safe-area-inset-right))
      0
      max(8px,env(safe-area-inset-left))!important;
    border-bottom:1px solid #e9e4da;
    background:#fffdfa;
  }

  .channel-heading{
    display:none!important;
  }

  .topbar-left{
    min-width:0;
    height:100%;
    padding:0!important;
    gap:8px!important;
    border:0!important;
  }

  #mobileChannelsBtn{
    display:grid!important;
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    border:1px solid #e4ded3;
    border-radius:11px!important;
    background:#fff;
    color:#172d52;
    font-size:20px;
  }

  .brand{
    min-width:0;
    gap:7px;
  }

  .brand-symbol{
    width:23px!important;
    flex:0 0 23px!important;
  }

  .brand-symbol span{
    width:4px!important;
  }

  .brand strong{
    font-size:18px!important;
    letter-spacing:-.02em;
  }

  .brand small{
    font-size:7px!important;
    letter-spacing:.22em;
  }

  .topbar-actions{
    height:100%;
    padding:0!important;
    gap:5px!important;
    border:0!important;
  }

  /* Keep only radio + private button in compact mobile header */
  .topbar-actions .connection-pill,
  .topbar-actions #notificationToggleBtn,
  .topbar-actions #channelToolsBtn,
  .topbar-actions #searchToggleBtn{
    display:none!important;
  }

  #radioToggleBtn{
    display:grid!important;
    width:44px!important;
    height:40px!important;
    flex:0 0 44px!important;
    border-radius:11px!important;
  }

  .radio-eq{
    transform:scale(.86);
  }

  .mobile-private-trigger{
    min-width:70px;
    height:40px;
    padding:0 9px;
    border:0;
    border-radius:11px;
    background:#17335f;
    color:#fff;
    font-size:9px;
    font-weight:800;
    letter-spacing:.02em;
    box-shadow:0 5px 14px rgba(23,51,95,.12);
  }

  /* ---------- Always-visible autojoin channels ---------- */
  .mobile-classic-tabs{
    width:100%;
    min-height:51px;
    padding:
      7px
      max(8px,env(safe-area-inset-right))
      7px
      max(8px,env(safe-area-inset-left));
    display:flex!important;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    border-bottom:1px solid #e8e3da;
    background:#fffdfa;
    overflow:visible;
  }

  .mobile-room-list{
    display:contents;
  }

  .mobile-room-tab{
    position:relative;
    min-width:74px;
    max-width:145px;
    height:38px;
    padding:0 24px 0 11px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    border:1px solid #e2ddd3;
    border-radius:10px;
    background:#fff;
    color:#14294b;
    font-size:10px;
    font-weight:750;
    white-space:nowrap;
    overflow:hidden;
  }

  .mobile-room-tab.status-tab{
    padding:0 11px;
  }

  .mobile-room-tab.active{
    border-color:#17335f;
    background:#17335f;
    color:#fff;
    box-shadow:inset 0 -2px 0 #e9a914;
  }

  .mobile-room-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mobile-room-close{
    position:absolute;
    top:50%;
    right:6px;
    width:17px;
    height:17px;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    border-radius:5px;
    color:#a6afbc;
    font-size:13px;
    line-height:1;
  }

  .mobile-room-tab.active .mobile-room-close{
    color:#d3dae5;
  }

  .mobile-room-badge,
  .mobile-tab-unread{
    position:absolute;
    top:3px;
    right:3px;
    min-width:13px;
    height:13px;
    padding:0 3px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:#d9a719;
    color:#fff;
    font-size:6px;
    font-weight:900;
  }

  .mobile-room-badge.mention{
    background:#c94c45;
  }

  .mobile-room-add{
    min-width:40px;
    width:40px;
    padding:0;
    font-size:20px;
    font-weight:400;
  }

  /* ---------- Chat + nick list permanently side-by-side ---------- */
  .workspace.all-right-workspace{
    position:relative;
    min-height:0;
    display:grid!important;
    grid-template-columns:
      minmax(0,calc(100% - var(--mobile-users-width)))
      var(--mobile-users-width)!important;
    overflow:hidden;
    transition:grid-template-columns .2s ease;
  }

  .chat-main{
    min-width:0;
    height:100%;
    border-right:1px solid #e6e1d8;
  }

  .all-right-sidebar{
    position:relative!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    z-index:2!important;
    width:auto!important;
    height:100%!important;
    min-width:0!important;
    padding:0!important;
    display:block!important;
    transform:none!important;
    transition:none!important;
    border-left:0!important;
    box-shadow:none!important;
    background:#fff!important;
    overflow:hidden!important;
  }

  .all-right-mobile-head,
  .system-right-section,
  .rooms-right-section,
  .private-right-section,
  .right-me-card{
    display:none!important;
  }

  .all-right-scroll{
    width:100%;
    height:100%;
    padding:0!important;
    overflow:hidden!important;
  }

  .users-right-section{
    width:100%;
    height:100%;
    min-height:0!important;
    margin:0!important;
    padding:8px 7px 0;
    display:grid;
    grid-template-rows:auto auto minmax(0,1fr);
    background:#fff;
  }

  .users-right-section .users-head{
    padding:0 2px 5px!important;
  }

  .users-right-section .users-head strong{
    font-size:9px!important;
  }

  .users-right-section .users-head span{
    font-size:7px!important;
  }

  .users-right-section .user-search-wrap{
    width:100%;
    height:34px!important;
    margin:0 0 5px!important;
    padding:0 6px!important;
    border-radius:8px!important;
    background:#fff;
  }

  .users-right-section .user-search-wrap span{
    font-size:11px;
  }

  .users-right-section .user-search-wrap input{
    min-width:0;
    width:100%;
    font-size:9px!important;
  }

  .users-right-section .user-list{
    min-height:0!important;
    height:100%;
    padding:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
  }

  .compact-user-item{
    width:100%;
    min-width:0;
    min-height:34px!important;
    padding:3px 2px!important;
    gap:5px!important;
    border-radius:5px!important;
    border-bottom:1px solid #f0ede7;
  }

  .compact-user-item .user-avatar{
    width:25px!important;
    height:25px!important;
    flex:0 0 25px;
    border-radius:50%!important;
    font-size:8px!important;
  }

  .compact-user-item .user-meta{
    min-width:0;
  }

  .compact-user-item .user-meta strong{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:9.5px!important;
  }

  .compact-user-item .user-prefix{
    flex:0 0 auto;
    font-size:9px!important;
  }

  /* Divider collapse button */
  .mobile-users-collapse{
    position:absolute;
    top:50%;
    right:calc(var(--mobile-users-width) - 12px);
    z-index:9;
    width:24px;
    height:46px;
    transform:translateY(-50%);
    display:grid!important;
    place-items:center;
    border:1px solid #e2ddd4;
    border-radius:8px;
    background:#fffdfa;
    color:#18345f;
    font-size:18px;
    box-shadow:0 3px 10px rgba(31,45,70,.08);
    transition:right .2s ease;
  }

  .chat-screen.mobile-users-collapsed .workspace.all-right-workspace{
    grid-template-columns:minmax(0,1fr) 0!important;
  }

  .chat-screen.mobile-users-collapsed .all-right-sidebar{
    visibility:hidden!important;
    pointer-events:none!important;
  }

  .chat-screen.mobile-users-collapsed .mobile-users-collapse{
    right:3px;
  }

  /* ---------- Compact classic message area ---------- */
  .messages{
    padding:
      9px
      7px
      8px
      max(8px,env(safe-area-inset-left))!important;
    background:#fbfaf7;
  }

  .welcome-block{
    display:none!important;
  }

  .message-row{
    grid-template-columns:minmax(0,1fr)!important;
    gap:0!important;
    padding:5px 3px!important;
    border-radius:5px!important;
  }

  .message-avatar{
    display:none!important;
  }

  .message-head{
    gap:5px!important;
    margin-bottom:2px;
  }

  .message-nick{
    max-width:100%!important;
    font-size:10.5px!important;
    font-weight:800;
  }

  .message-time{
    font-size:7.5px!important;
  }

  .message-text{
    font-size:11px!important;
    line-height:1.38!important;
  }

  .system-row,
  .notice-row{
    padding:4px 3px!important;
    font-size:9.5px!important;
    line-height:1.4;
  }

  .status-entry{
    padding:5px 3px!important;
  }

  /* ---------- Composer: formatting row + input row ---------- */
  .composer{
    width:auto!important;
    min-height:0!important;
    margin:
      0
      5px
      max(5px,env(safe-area-inset-bottom))
      5px!important;
    padding:5px!important;
    display:grid!important;
    grid-template-columns:34px minmax(0,1fr) 43px!important;
    grid-template-areas:
      "mobileformat mobileformat mobileformat"
      "emoji input tools"!important;
    gap:5px!important;
    align-items:center!important;
    border-radius:11px!important;
  }

  .mobile-compose-formatbar{
    grid-area:mobileformat;
    display:flex!important;
    align-items:center;
    gap:4px;
    min-height:29px;
    padding-bottom:4px;
    border-bottom:1px solid #eee9df;
  }

  .mobile-compose-formatbar button{
    width:29px;
    height:27px;
    display:grid;
    place-items:center;
    border:1px solid #e1dbcf;
    border-radius:6px;
    background:#fff;
    color:#18345f;
    font-size:12px;
  }

  #mobileColorBtn{
    color:#d7a018;
  }

  #emojiBtn{
    grid-area:emoji;
    width:34px!important;
    height:38px!important;
    display:grid!important;
    border:1px solid #e7e1d6;
    border-radius:8px!important;
    font-size:18px;
  }

  #formatBtn{
    display:none!important;
  }

  .composer textarea{
    grid-area:input;
    width:100%!important;
    min-width:0!important;
    min-height:38px!important;
    max-height:90px!important;
    padding:9px 6px!important;
    font-size:11px!important;
  }

  .composer-tools{
    grid-area:tools;
    width:43px;
  }

  .send-btn{
    width:43px!important;
    height:40px!important;
    border-radius:9px!important;
  }

  .format-popover{
    left:0!important;
    right:0!important;
    bottom:calc(100% - 30px)!important;
    width:auto!important;
    max-width:100%!important;
  }

  /* ---------- Private message bottom sheet ---------- */
  .mobile-private-sheet{
    position:fixed;
    inset:0;
    z-index:95;
    display:block!important;
  }

  .mobile-private-sheet[hidden]{
    display:none!important;
  }

  .mobile-private-backdrop{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:rgba(18,31,52,.24);
  }

  .mobile-private-card{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    max-height:min(72dvh,560px);
    padding:
      0
      max(12px,env(safe-area-inset-right))
      calc(12px + env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left));
    border-radius:18px 18px 0 0;
    background:#fffdfa;
    box-shadow:0 -12px 34px rgba(24,37,59,.14);
    overflow:hidden;
  }

  .mobile-private-card header{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #ece7de;
  }

  .mobile-private-card header strong{
    display:block;
    font-size:12px;
  }

  .mobile-private-card header span{
    display:block;
    margin-top:2px;
    color:#8a9098;
    font-size:8px;
  }

  #mobilePrivateCloseBtn{
    width:34px;
    height:34px;
    border:1px solid #e4ded4;
    border-radius:9px;
    background:#fff;
    color:#213653;
    font-size:19px;
  }

  .mobile-private-list{
    max-height:calc(72dvh - 76px);
    padding:7px 0;
    overflow:auto;
  }

  .mobile-private-item{
    width:100%;
    min-height:46px;
    padding:5px 7px;
    display:grid;
    grid-template-columns:31px minmax(0,1fr) auto 24px;
    align-items:center;
    gap:7px;
    border:0;
    border-bottom:1px solid #efebe4;
    background:transparent;
    text-align:left;
  }

  .mobile-private-item.active{
    background:#f1eee6;
  }

  .mobile-private-avatar{
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#17335f;
    color:#fff;
    font-size:9px;
    font-weight:800;
  }

  .mobile-private-name{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#162b4d;
    font-size:10px;
    font-weight:800;
  }

  .mobile-private-unread{
    min-width:18px;
    height:18px;
    padding:0 4px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:#d7a31a;
    color:#fff;
    font-size:7px;
    font-weight:900;
  }

  .mobile-private-x{
    color:#a3abb5;
    font-size:16px;
    text-align:center;
  }

  /* No drawer/scrim behavior in the new default mobile layout */
  #mobileScrim{
    display:none!important;
  }
}

/* Narrow phones: slightly narrower nick list so chat remains usable. */
@media (max-width:389px){
  :root{
    --mobile-users-width:35vw;
  }

  .mobile-room-tab{
    min-width:68px;
    height:36px;
    font-size:9px;
  }

  .brand strong{
    font-size:16px!important;
  }

  .mobile-private-trigger{
    min-width:64px;
    padding:0 7px;
    font-size:8px;
  }

  .compact-user-item .user-avatar{
    width:23px!important;
    height:23px!important;
    flex-basis:23px;
  }

  .compact-user-item .user-meta strong{
    font-size:8.8px!important;
  }
}

/* Landscape mobile: nick list can be a little narrower. */
@media (max-width:900px) and (orientation:landscape){
  :root{
    --mobile-users-width:30vw;
    --mobile-topbar:58px;
  }

  .mobile-classic-tabs{
    padding-top:4px;
    padding-bottom:4px;
    gap:4px;
  }

  .mobile-room-tab{
    height:34px;
  }

  .users-right-section{
    padding-top:5px;
  }
}


/* =====================================================================
   V4.5 — MOBİL MENÜ / BİRLEŞİK MESAJ ALANI
   BASE: V4.4
   ===================================================================== */

@media (max-width:900px){

  /* Restore Harabe text next to the logo on the refined mobile header. */
  .topbar .brand > div:last-child{
    display:block!important;
  }

  .topbar .brand{
    gap:6px!important;
  }

  .topbar .brand strong{
    display:block!important;
    font-size:15px!important;
  }

  .topbar .brand small{
    display:block!important;
    font-size:6px!important;
  }

  /* Compact private-message icon instead of the large ÖZEL rectangle. */
  .mobile-private-trigger{
    position:relative;
    width:42px!important;
    min-width:42px!important;
    height:40px!important;
    padding:0!important;
    display:grid!important;
    place-items:center;
    border:1px solid #e3ddd2!important;
    border-radius:10px!important;
    background:#fff!important;
    color:#17335f!important;
    box-shadow:none!important;
  }

  .mobile-private-trigger svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
  }

  .mobile-private-badge{
    position:absolute;
    top:-5px;
    right:-5px;
    min-width:17px;
    height:17px;
    padding:0 4px;
    display:grid;
    place-items:center;
    border:2px solid #fffdfa;
    border-radius:999px;
    background:#17335f;
    color:#fff;
    font-size:7px;
    font-weight:900;
    line-height:1;
  }

  .mobile-private-badge[hidden]{
    display:none!important;
  }

  /* + channel button was moved into hamburger menu. */
  .mobile-room-add{
    display:none!important;
  }

  /* ---------- Unified composer ---------- */
  .composer{
    width:auto!important;
    margin:
      0
      6px
      max(6px,env(safe-area-inset-bottom))
      6px!important;
    padding:0!important;
    display:block!important;
    border:1px solid #ddd7cc!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:0 3px 12px rgba(28,42,64,.045)!important;
    overflow:visible!important;
  }

  .mobile-compose-formatbar{
    min-height:34px!important;
    padding:4px 6px!important;
    gap:3px!important;
    border-bottom:1px solid #ebe6dd!important;
    background:#fbfaf7;
    border-radius:9px 9px 0 0;
  }

  .mobile-compose-formatbar button{
    width:29px!important;
    height:26px!important;
    border:0!important;
    border-right:1px solid #e9e4dc!important;
    border-radius:0!important;
    background:transparent!important;
    font-size:12px!important;
  }

  .mobile-compose-formatbar button:last-child{
    border-right:0!important;
  }

  .mobile-compose-inputrow{
    min-height:50px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 48px;
    align-items:stretch;
    background:#fff;
    border-radius:0 0 9px 9px;
    overflow:hidden;
  }

  .mobile-compose-inputrow #emojiBtn{
    grid-area:auto!important;
    width:38px!important;
    height:auto!important;
    min-height:48px!important;
    border:0!important;
    border-right:1px solid #eee9e0!important;
    border-radius:0!important;
    background:transparent!important;
    color:#8b929a!important;
    font-size:18px!important;
  }

  .mobile-compose-inputrow #formatBtn{
    display:none!important;
  }

  .mobile-compose-inputrow textarea{
    grid-area:auto!important;
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    max-height:96px!important;
    margin:0!important;
    padding:13px 9px!important;
    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    box-shadow:none!important;
    outline:none!important;
    font-size:11px!important;
    line-height:1.35!important;
  }

  .mobile-compose-inputrow .composer-tools{
    grid-area:auto!important;
    width:48px!important;
    min-width:48px;
    display:block!important;
    position:relative;
    border-left:1px solid #eee9e0;
  }

  .mobile-compose-inputrow .char-count{
    display:none!important;
  }

  .mobile-compose-inputrow .send-btn{
    width:100%!important;
    height:100%!important;
    min-height:48px!important;
    margin:0!important;
    border-radius:0!important;
    background:#17335f!important;
  }

  .mobile-compose-inputrow .send-btn svg{
    width:20px!important;
    height:20px!important;
  }

  .composer .emoji-popover{
    left:4px!important;
    bottom:52px!important;
  }

  .composer .format-popover{
    left:4px!important;
    right:4px!important;
    bottom:52px!important;
  }

  /* ---------- Main hamburger menu ---------- */
  .mobile-main-menu{
    position:fixed;
    inset:0;
    z-index:140;
    display:block!important;
  }

  .mobile-main-menu[hidden]{
    display:none!important;
  }

  .mobile-menu-backdrop{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:rgba(14,28,49,.26);
    backdrop-filter:blur(2px);
  }

  .mobile-menu-card{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:min(82vw,330px);
    padding:
      calc(12px + env(safe-area-inset-top))
      12px
      calc(13px + env(safe-area-inset-bottom))
      max(12px,env(safe-area-inset-left));
    display:flex;
    flex-direction:column;
    background:#fffdfa;
    box-shadow:15px 0 38px rgba(23,38,63,.14);
    overflow:auto;
  }

  .mobile-menu-head{
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #ece7de;
  }

  .mobile-menu-brand{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .mobile-menu-brand .brand-symbol{
    width:25px!important;
    height:29px!important;
  }

  .mobile-menu-brand strong{
    display:block;
    color:#17335f;
    font:800 16px/1 Manrope,sans-serif;
  }

  .mobile-menu-brand small{
    display:block;
    margin-top:4px;
    color:#d29a13;
    font-size:6px;
    font-weight:800;
    letter-spacing:.22em;
  }

  #mobileMenuCloseBtn{
    width:33px;
    height:33px;
    border:1px solid #e5dfd4;
    border-radius:8px;
    background:#fff;
    color:#637087;
    font-size:19px;
  }

  .mobile-menu-account{
    margin:12px 0;
    padding:10px;
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid #e8e2d7;
    border-radius:10px;
    background:#f8f6f1;
  }

  .mobile-menu-avatar{
    width:35px;
    height:35px;
    flex:0 0 35px;
    display:grid;
    place-items:center;
    border-radius:9px;
    background:#17335f;
    color:#fff;
    font-size:10px;
    font-weight:900;
  }

  .mobile-menu-account strong{
    display:block;
    color:#182d4d;
    font-size:10px;
  }

  .mobile-menu-account span{
    display:block;
    margin-top:2px;
    color:#8a9098;
    font-size:7.5px;
  }

  .mobile-menu-actions{
    display:flex;
    flex-direction:column;
  }

  .mobile-menu-actions > button{
    width:100%;
    min-height:52px;
    padding:6px 4px;
    display:grid;
    grid-template-columns:33px minmax(0,1fr) 16px;
    align-items:center;
    gap:8px;
    border:0;
    border-bottom:1px solid #eee9e1;
    background:transparent;
    text-align:left;
  }

  .menu-action-icon{
    width:31px;
    height:31px;
    display:grid;
    place-items:center;
    border:1px solid #e3ddd2;
    border-radius:8px;
    background:#fff;
    color:#17335f;
    font-size:11px;
    font-weight:900;
  }

  .mobile-menu-actions button strong{
    display:block;
    color:#1b2f4e;
    font-size:9.5px;
    font-weight:800;
  }

  .mobile-menu-actions button small{
    display:block;
    margin-top:2px;
    color:#90969e;
    font-size:7px;
    font-weight:500;
  }

  .mobile-menu-actions button > i{
    color:#a7adb5;
    font-size:16px;
    font-style:normal;
    text-align:right;
  }

  .mobile-menu-logout{
    width:100%;
    min-height:39px;
    margin-top:auto;
    border:1px solid #ead9d6;
    border-radius:8px;
    background:#fff7f5;
    color:#a6524e;
    font-size:9px;
    font-weight:800;
  }

  /* ---------- Service forms ---------- */
  .mobile-service-card{
    width:min(410px,100%);
  }

  .stacked-service-form{
    display:flex!important;
    flex-direction:column;
    gap:9px!important;
  }

  .stacked-service-form label{
    display:block;
  }

  .stacked-service-form label > span{
    display:block;
    margin:0 0 4px 2px;
    color:#687384;
    font-size:7.5px;
    font-weight:800;
    letter-spacing:.03em;
  }

  .stacked-service-form label em{
    color:#9ba0a6;
    font-size:7px;
    font-style:normal;
    font-weight:500;
  }

  .stacked-service-form input{
    width:100%;
    min-width:0;
    flex:none!important;
  }

  .stacked-service-form .primary-btn{
    width:100%;
  }

  .about-brand-symbol{
    width:44px;
    height:44px;
    display:flex;
    align-items:flex-end;
    gap:4px;
    margin-bottom:11px;
  }

  .about-brand-symbol span{
    width:7px;
    border-radius:4px;
    background:#d49b14;
  }

  .about-brand-symbol span:nth-child(1){height:20px}
  .about-brand-symbol span:nth-child(2){height:36px}
  .about-brand-symbol span:nth-child(3){height:27px}

  .about-info-list{
    margin-top:14px;
    border-top:1px solid #ece7de;
  }

  .about-info-list > div{
    min-height:39px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    border-bottom:1px solid #f0ece5;
  }

  .about-info-list span{
    color:#8b9199;
    font-size:8px;
  }

  .about-info-list strong{
    color:#243653;
    font-size:8.5px;
  }
}

/* Narrow phone refinement */
@media(max-width:389px){
  .topbar .brand strong{
    font-size:14px!important;
  }

  .mobile-private-trigger{
    width:39px!important;
    min-width:39px!important;
  }
}


/* =====================================================================
   V4.6 — MOBİL TAM GENİŞLİK MESAJ ALANI
   BASE: V4.5
   ===================================================================== */

@media (max-width:900px){

  :root{
    --mobile-composer-height:86px;
  }

  /*
   * Composer is intentionally full-viewport width.
   * It is no longer constrained by the left chat column, therefore
   * the right nick list sits above it rather than beside it.
   */
  .composer{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:0!important;
    z-index:74!important;

    width:100%!important;
    max-width:none!important;
    min-height:var(--mobile-composer-height)!important;

    margin:0!important;
    padding:0!important;

    border:0!important;
    border-top:1px solid #dcd7ce!important;
    border-radius:0!important;

    background:#fff!important;
    box-shadow:0 -3px 12px rgba(28,42,64,.045)!important;
  }

  /*
   * Reserve vertical room for the fixed composer.
   * Both the chat text and the nick list can scroll all the way to the
   * last item without being hidden behind the message bar.
   */
  .workspace.all-right-workspace{
    padding-bottom:var(--mobile-composer-height)!important;
    background:#fbfaf7;
  }

  .chat-main{
    min-height:0!important;
    height:100%!important;
  }

  .messages{
    padding-bottom:18px!important;
  }

  .all-right-sidebar{
    min-height:0!important;
    height:100%!important;
  }

  .users-right-section{
    min-height:0!important;
    height:100%!important;
    padding-bottom:0!important;
  }

  .users-right-section .user-list{
    min-height:0!important;
    height:100%!important;
    overflow-y:scroll!important;
    overflow-x:hidden!important;
    padding-bottom:10px!important;

    scrollbar-width:thin;
    scrollbar-gutter:stable;
    overscroll-behavior:contain;
  }

  /* Classic flat IRC formatting strip. */
  .mobile-compose-formatbar{
    height:35px!important;
    min-height:35px!important;

    padding:0 8px!important;
    display:flex!important;
    align-items:center!important;
    gap:0!important;

    border:0!important;
    border-bottom:1px solid #e6e1d8!important;
    border-radius:0!important;

    background:#faf9f6!important;
  }

  .mobile-compose-formatbar button{
    width:39px!important;
    height:35px!important;

    border:0!important;
    border-right:1px solid #e5e0d7!important;
    border-radius:0!important;

    background:transparent!important;
    color:#1c355e!important;

    font-size:13px!important;
  }

  .mobile-compose-formatbar button:first-child{
    border-left:1px solid #e5e0d7!important;
  }

  /* Input + emoji + send is one single rectangular row. */
  .mobile-compose-inputrow{
    width:100%!important;
    min-height:51px!important;
    height:51px!important;

    display:grid!important;
    grid-template-columns:48px minmax(0,1fr) 58px!important;
    align-items:stretch!important;

    border:0!important;
    border-radius:0!important;
    background:#fff!important;
    overflow:hidden!important;
  }

  .mobile-compose-inputrow #emojiBtn{
    width:48px!important;
    height:51px!important;
    min-height:51px!important;

    margin:0!important;

    border:0!important;
    border-right:1px solid #e6e1d8!important;
    border-radius:0!important;

    background:#fff!important;
    color:#858d98!important;

    font-size:19px!important;
  }

  .mobile-compose-inputrow textarea{
    width:100%!important;
    height:51px!important;
    min-height:51px!important;
    max-height:51px!important;

    margin:0!important;
    padding:14px 12px!important;

    border:0!important;
    border-radius:0!important;

    background:#fff!important;
    box-shadow:none!important;
    outline:0!important;

    color:#263850!important;
    font-size:11px!important;
    line-height:1.35!important;

    resize:none!important;
  }

  .mobile-compose-inputrow textarea::placeholder{
    color:#8e949c!important;
  }

  .mobile-compose-inputrow .composer-tools{
    width:58px!important;
    min-width:58px!important;
    height:51px!important;

    margin:0!important;

    border:0!important;
    border-left:1px solid #e6e1d8!important;
    border-radius:0!important;
  }

  .mobile-compose-inputrow .send-btn{
    width:58px!important;
    min-width:58px!important;
    height:51px!important;
    min-height:51px!important;

    margin:0!important;

    border:0!important;
    border-radius:0!important;

    background:#17335f!important;
  }

  .mobile-compose-inputrow .send-btn svg{
    width:22px!important;
    height:22px!important;
  }

  /*
   * The right nick panel is deliberately flat.
   * Items remain separated by fine lines; large card-like rounded rows
   * are removed for a more classic IRC-client appearance.
   */
  .compact-user-item{
    min-height:38px!important;
    padding:4px 3px!important;

    border-radius:0!important;
    border-bottom:1px solid #eeebe5!important;

    background:transparent!important;
    box-shadow:none!important;
  }

  .compact-user-item:hover,
  .compact-user-item.active{
    border-radius:0!important;
    background:#f7f5f0!important;
  }

  .users-right-section .user-search-wrap{
    border-radius:0!important;
  }

  /*
   * The divider must stop above the full-width composer.
   */
  .mobile-users-collapse{
    top:calc((100% - var(--mobile-composer-height)) / 2)!important;
  }

  /*
   * Popovers open above the fixed composer instead of being clipped by
   * its former rounded container.
   */
  .composer .emoji-popover,
  .composer .format-popover{
    position:absolute!important;
    bottom:calc(100% + 5px)!important;
    z-index:90!important;
  }

  .composer .emoji-popover{
    left:6px!important;
  }

  .composer .format-popover{
    left:6px!important;
    right:6px!important;
    width:auto!important;
  }
}

/* The keyboard takes more vertical space on small phones; keep the bar compact. */
@media (max-width:389px){
  :root{
    --mobile-composer-height:82px;
  }

  .mobile-compose-formatbar{
    height:33px!important;
    min-height:33px!important;
  }

  .mobile-compose-formatbar button{
    width:36px!important;
    height:33px!important;
  }

  .mobile-compose-inputrow,
  .mobile-compose-inputrow #emojiBtn,
  .mobile-compose-inputrow textarea,
  .mobile-compose-inputrow .composer-tools,
  .mobile-compose-inputrow .send-btn{
    height:49px!important;
    min-height:49px!important;
  }
}


/* =====================================================================
   V4.6.1 — DESKTOP COMPOSER FIX
   Mobil wrapper masaüstü grid yapısını bozmamalı.
   ===================================================================== */

/* Desktop/default: wrapper is structurally invisible to composer grid. */
.mobile-compose-inputrow{
  display:contents;
}

/*
 * Mobile V4.5/V4.6 rules later in this stylesheet use
 * display:grid!important, therefore the mobile layout is unchanged.
 */
@media (min-width:901px){
  .composer{
    overflow:visible;
  }

  .composer > .mobile-compose-formatbar{
    display:none!important;
  }

  .mobile-compose-inputrow > #emojiBtn,
  .mobile-compose-inputrow > #formatBtn,
  .mobile-compose-inputrow > #messageInput,
  .mobile-compose-inputrow > .composer-tools{
    min-width:0;
  }
}


/* =====================================================================
   V4.6.2 — HER NİCK İÇİN SABİT MESAJ RENGİ
   ===================================================================== */

.message-nick{
  color:var(--nick-color, var(--navy))!important;
}

/*
 * mIRC renkleri yalnızca mesaj içeriğinde çalışmaya devam eder.
 * Nick etiketi kendi sabit rengini korur.
 */
.message-row .message-nick,
.private-message .message-nick{
  color:var(--nick-color, var(--navy))!important;
}

/* Mobile readability */
@media(max-width:900px){
  .message-nick{
    font-weight:800!important;
  }
}


/* =====================================================================
   V4.7 FINAL — LOGIN CREDIT / AWAY / IGNORE
   ===================================================================== */

.login-credits{
  margin-top:14px;
  padding-top:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  border-top:1px solid var(--line);
  text-align:center;
}

.login-credits strong{
  color:var(--navy);
  font-size:9px;
  font-weight:800;
}

.login-credits span{
  color:var(--text-3);
  font-size:7.5px;
  line-height:1.4;
}

.login-credits small{
  color:#94989d;
  font-size:7px;
  line-height:1.4;
}

.login-credits b{
  color:#6b7480;
  font-weight:800;
}

/* Away users remain present but visually quieter. */
.compact-user-item.is-away{
  opacity:.62;
}

.compact-user-item.is-away .user-avatar{
  filter:grayscale(.35);
}

.user-away-mark{
  flex:0 0 auto;
  min-width:18px;
  height:16px;
  padding:0 3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:5px;
  background:#f2eee5;
  color:#8b7e66;
  font-size:6.5px;
  font-weight:900;
  letter-spacing:.02em;
}

/* Ignore is a client-side/session-only state. */
.compact-user-item.is-ignored{
  opacity:.42;
}

.ignore-action.is-active{
  border-color:#dfcec7!important;
  background:#fff5f1!important;
  color:#98574c!important;
}

@media(max-width:900px){
  .login-credits{
    margin-top:11px;
    padding-top:10px;
  }

  .user-away-mark{
    min-width:16px;
    height:15px;
    font-size:6px;
  }
}


/* =====================================================================
   V4.7.1 — DESKTOP / WEB ANA MENÜ
   BASE: V4.7 FINAL
   ===================================================================== */

.desktop-menu-trigger svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}

@media (min-width:901px){

  /* The shared menu must be usable on desktop too. */
  .app-main-menu{
    position:fixed;
    inset:0;
    z-index:140;
    display:block;
  }

  .app-main-menu[hidden]{
    display:none!important;
  }

  .app-main-menu .mobile-menu-backdrop{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    background:rgba(14,28,49,.18);
    backdrop-filter:blur(1.5px);
  }

  .app-main-menu .mobile-menu-card{
    position:absolute;
    top:72px;
    right:18px;
    left:auto;
    bottom:auto;

    width:320px;
    max-height:calc(100vh - 92px);

    padding:12px;
    display:flex;
    flex-direction:column;

    border:1px solid #e3ddd2;
    border-radius:14px;

    background:#fffdfa;
    box-shadow:0 18px 48px rgba(21,36,61,.16);

    overflow:auto;
  }

  .app-main-menu .mobile-menu-head{
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #ece7de;
  }

  .app-main-menu .mobile-menu-brand{
    display:flex;
    align-items:center;
    gap:8px;
  }

  .app-main-menu .mobile-menu-brand .brand-symbol{
    width:24px;
    height:28px;
  }

  .app-main-menu .mobile-menu-brand strong{
    display:block;
    color:#17335f;
    font:800 15px/1 Manrope,sans-serif;
  }

  .app-main-menu .mobile-menu-brand small{
    display:block;
    margin-top:4px;
    color:#d29a13;
    font-size:6px;
    font-weight:800;
    letter-spacing:.22em;
  }

  .app-main-menu #mobileMenuCloseBtn{
    width:31px;
    height:31px;
    border:1px solid #e5dfd4;
    border-radius:8px;
    background:#fff;
    color:#637087;
    font-size:18px;
  }

  .app-main-menu .mobile-menu-account{
    margin:10px 0;
    padding:9px;
    display:flex;
    align-items:center;
    gap:9px;
    border:1px solid #e8e2d7;
    border-radius:9px;
    background:#f8f6f1;
  }

  .app-main-menu .mobile-menu-avatar{
    width:34px;
    height:34px;
    flex:0 0 34px;
    display:grid;
    place-items:center;
    border-radius:8px;
    background:#17335f;
    color:#fff;
    font-size:9px;
    font-weight:900;
  }

  .app-main-menu .mobile-menu-account strong{
    display:block;
    color:#182d4d;
    font-size:9px;
  }

  .app-main-menu .mobile-menu-account span{
    display:block;
    margin-top:2px;
    color:#8a9098;
    font-size:7px;
  }

  .app-main-menu .mobile-menu-actions{
    display:flex;
    flex-direction:column;
  }

  .app-main-menu .mobile-menu-actions > button{
    width:100%;
    min-height:49px;
    padding:5px 4px;
    display:grid;
    grid-template-columns:31px minmax(0,1fr) 15px;
    align-items:center;
    gap:8px;
    border:0;
    border-bottom:1px solid #eee9e1;
    background:transparent;
    text-align:left;
    cursor:pointer;
  }

  .app-main-menu .mobile-menu-actions > button:hover{
    background:#f8f6f1;
  }

  .app-main-menu .menu-action-icon{
    width:29px;
    height:29px;
    display:grid;
    place-items:center;
    border:1px solid #e3ddd2;
    border-radius:7px;
    background:#fff;
    color:#17335f;
    font-size:10px;
    font-weight:900;
  }

  .app-main-menu .mobile-menu-actions button strong{
    display:block;
    color:#1b2f4e;
    font-size:8.5px;
    font-weight:800;
  }

  .app-main-menu .mobile-menu-actions button small{
    display:block;
    margin-top:2px;
    color:#90969e;
    font-size:6.8px;
    font-weight:500;
  }

  .app-main-menu .mobile-menu-actions button > i{
    color:#a7adb5;
    font-size:15px;
    font-style:normal;
    text-align:right;
  }

  .app-main-menu .mobile-menu-logout{
    width:100%;
    min-height:37px;
    margin-top:10px;
    border:1px solid #ead9d6;
    border-radius:8px;
    background:#fff7f5;
    color:#a6524e;
    font-size:8px;
    font-weight:800;
    cursor:pointer;
  }

  .desktop-menu-trigger{
    display:grid!important;
  }
}

/* Mobile behavior remains the V4.5/V4.7 left-side drawer. */
@media (max-width:900px){
  .app-main-menu{
    position:fixed;
    inset:0;
    z-index:140;
    display:block!important;
  }

  .app-main-menu[hidden]{
    display:none!important;
  }
}


/* =====================================================================
   V4.7.2 — Bildirim popup kapalı / mesaj geçmişi daima son satırda
   ===================================================================== */

.messages{
  scroll-behavior:auto!important;
  overflow-anchor:none;
}


/* =====================================================================
   V4.7.3 — TEMALAR + MOBİL ÇİFT MENÜ DÜZELTMESİ
   ===================================================================== */

/* Default/classic variables are inherited from the existing stylesheet. */
:root[data-theme="classic"]{
  --theme-accent:#17335f;
  --theme-accent-2:#d49b14;
}

/* Blue */
:root[data-theme="blue"]{
  --navy:#24577e;
  --navy-2:#3477a8;
  --gold:#4f95c7;
  --gold-2:#3d82b6;
  --text-1:#23394b;
  --text-2:#465d6e;
  --text-3:#7a8c99;
  --line:#dbe5eb;
  --soft:#f3f8fb;
  --theme-accent:#24577e;
  --theme-accent-2:#4f95c7;
}

/* Burgundy */
:root[data-theme="burgundy"]{
  --navy:#6d2638;
  --navy-2:#8b3449;
  --gold:#b78151;
  --gold-2:#9f6840;
  --text-1:#4e3137;
  --text-2:#6a5054;
  --text-3:#927d80;
  --line:#e7dcd8;
  --soft:#fbf6f3;
  --theme-accent:#6d2638;
  --theme-accent-2:#b78151;
}

/* Petrol */
:root[data-theme="petrol"]{
  --navy:#225d5c;
  --navy-2:#317774;
  --gold:#a48b4e;
  --gold-2:#92793f;
  --text-1:#304b49;
  --text-2:#526865;
  --text-3:#84918f;
  --line:#dce5e1;
  --soft:#f4f8f6;
  --theme-accent:#225d5c;
  --theme-accent-2:#a48b4e;
}

/* Theme-aware major accent surfaces. */
:root[data-theme="blue"] .send-btn,
:root[data-theme="blue"] .mobile-compose-inputrow .send-btn,
:root[data-theme="blue"] .mobile-menu-avatar,
:root[data-theme="blue"] .whois-avatar,
:root[data-theme="blue"] .mobile-private-avatar,
:root[data-theme="blue"] .mobile-room-tab.active,
:root[data-theme="burgundy"] .send-btn,
:root[data-theme="burgundy"] .mobile-compose-inputrow .send-btn,
:root[data-theme="burgundy"] .mobile-menu-avatar,
:root[data-theme="burgundy"] .whois-avatar,
:root[data-theme="burgundy"] .mobile-private-avatar,
:root[data-theme="burgundy"] .mobile-room-tab.active,
:root[data-theme="petrol"] .send-btn,
:root[data-theme="petrol"] .mobile-compose-inputrow .send-btn,
:root[data-theme="petrol"] .mobile-menu-avatar,
:root[data-theme="petrol"] .whois-avatar,
:root[data-theme="petrol"] .mobile-private-avatar,
:root[data-theme="petrol"] .mobile-room-tab.active{
  background:var(--theme-accent)!important;
}

:root[data-theme="blue"] .brand strong,
:root[data-theme="blue"] .channel-name,
:root[data-theme="burgundy"] .brand strong,
:root[data-theme="burgundy"] .channel-name,
:root[data-theme="petrol"] .brand strong,
:root[data-theme="petrol"] .channel-name{
  color:var(--theme-accent)!important;
}

:root[data-theme="blue"] .brand-symbol span,
:root[data-theme="burgundy"] .brand-symbol span,
:root[data-theme="petrol"] .brand-symbol span{
  background:var(--theme-accent-2)!important;
}

/* Theme modal */
.theme-card{
  width:min(430px,calc(100vw - 28px));
}

.theme-options{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.theme-option{
  width:100%;
  min-height:55px;
  padding:7px 8px;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 20px;
  align-items:center;
  gap:9px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  text-align:left;
}

.theme-option.active{
  border-color:var(--theme-accent,var(--navy));
  background:var(--soft,#f7f5f0);
}

.theme-option > span:nth-child(2){
  min-width:0;
}

.theme-option strong{
  display:block;
  color:var(--text-1);
  font-size:9px;
}

.theme-option small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:7px;
}

.theme-option > i{
  color:var(--theme-accent,var(--navy));
  font-size:13px;
  font-style:normal;
  opacity:0;
}

.theme-option.active > i{
  opacity:1;
}

.theme-swatch{
  width:36px;
  height:36px;
  display:block;
  border:1px solid rgba(0,0,0,.06);
  border-radius:8px;
}

.swatch-classic{
  background:linear-gradient(135deg,#17335f 0 50%,#d49b14 50%);
}

.swatch-blue{
  background:linear-gradient(135deg,#24577e 0 50%,#4f95c7 50%);
}

.swatch-burgundy{
  background:linear-gradient(135deg,#6d2638 0 50%,#b78151 50%);
}

.swatch-petrol{
  background:linear-gradient(135deg,#225d5c 0 50%,#a48b4e 50%);
}

/*
 * CRITICAL: desktop menu button must NEVER appear on mobile.
 * The generic .desktop-only class from older CSS had conflicting responsive rules.
 */
@media (max-width:900px){
  #desktopMenuBtn,
  .desktop-menu-trigger,
  .desktop-only{
    display:none!important;
  }

  /*
   * Only the original mobile hamburger is shown on mobile.
   * Avoid old secondary mobile user/menu trigger appearing beside it.
   */
  #mobileUsersBtn{
    display:none!important;
  }
}

/* Desktop: mobile hamburger must remain hidden. */
@media (min-width:901px){
  #mobileChannelsBtn,
  #mobileUsersBtn,
  .mobile-only{
    display:none!important;
  }

  #desktopMenuBtn{
    display:grid!important;
  }
}


/* =====================================================================
   V4.7.4 — TAM SAYFA TEMA SİSTEMİ
   Tema artık sadece vurgu değil, tüm arayüz yüzeylerini değiştirir.
   ===================================================================== */

/* Classic baseline */
:root[data-theme="classic"]{
  --theme-page:#f8f7f3;
  --theme-surface:#fffdfa;
  --theme-surface-2:#f7f4ee;
  --theme-surface-3:#f1eee7;
  --theme-border:#e5dfd5;
  --theme-border-strong:#d8d1c5;
  --theme-text:#26364d;
  --theme-text-2:#5f6b79;
  --theme-text-3:#8b9199;
  --theme-accent:#17335f;
  --theme-accent-hover:#214577;
  --theme-accent-soft:#edf1f7;
  --theme-accent-2:#d49b14;
  --theme-accent-2-soft:#fbf2d8;
  --theme-danger:#a6524e;
  --theme-shadow:rgba(25,38,59,.10);
  --theme-message-own:#f2f5fa;
  --theme-message-hover:#f8f6f1;
  --theme-input:#ffffff;
}

:root[data-theme="blue"]{
  --theme-page:#eef5f9;
  --theme-surface:#f9fcfe;
  --theme-surface-2:#edf5fa;
  --theme-surface-3:#e3eef5;
  --theme-border:#cfdee8;
  --theme-border-strong:#bacfdd;
  --theme-text:#21394b;
  --theme-text-2:#4b6475;
  --theme-text-3:#7d929f;
  --theme-accent:#24577e;
  --theme-accent-hover:#2e6a98;
  --theme-accent-soft:#e4f0f7;
  --theme-accent-2:#4f95c7;
  --theme-accent-2-soft:#e6f3fb;
  --theme-danger:#a6535d;
  --theme-shadow:rgba(31,72,101,.11);
  --theme-message-own:#eaf3f9;
  --theme-message-hover:#f1f7fa;
  --theme-input:#ffffff;
}

:root[data-theme="burgundy"]{
  --theme-page:#f7f0ef;
  --theme-surface:#fffafa;
  --theme-surface-2:#f7ecea;
  --theme-surface-3:#f0e1de;
  --theme-border:#e3d1ce;
  --theme-border-strong:#d5bebb;
  --theme-text:#4e3037;
  --theme-text-2:#705159;
  --theme-text-3:#967f84;
  --theme-accent:#6d2638;
  --theme-accent-hover:#853248;
  --theme-accent-soft:#f4e5e9;
  --theme-accent-2:#b78151;
  --theme-accent-2-soft:#f7ecdf;
  --theme-danger:#9c453f;
  --theme-shadow:rgba(92,39,50,.11);
  --theme-message-own:#f6e9ec;
  --theme-message-hover:#faf3f2;
  --theme-input:#fffdfd;
}

:root[data-theme="petrol"]{
  --theme-page:#eef5f2;
  --theme-surface:#fbfdfc;
  --theme-surface-2:#edf4f1;
  --theme-surface-3:#e3ede9;
  --theme-border:#cfddd8;
  --theme-border-strong:#bacfc8;
  --theme-text:#2d4745;
  --theme-text-2:#556d69;
  --theme-text-3:#84958f;
  --theme-accent:#225d5c;
  --theme-accent-hover:#2b7370;
  --theme-accent-soft:#e4f0ed;
  --theme-accent-2:#a48b4e;
  --theme-accent-2-soft:#f3eedf;
  --theme-danger:#9c5149;
  --theme-shadow:rgba(29,75,72,.11);
  --theme-message-own:#e8f2ef;
  --theme-message-hover:#f2f7f5;
  --theme-input:#ffffff;
}

/* Bridge old design tokens into the new full theme variables. */
:root[data-theme]{
  --navy:var(--theme-accent);
  --navy-2:var(--theme-accent-hover);
  --gold:var(--theme-accent-2);
  --gold-2:var(--theme-accent-2);
  --text-1:var(--theme-text);
  --text-2:var(--theme-text-2);
  --text-3:var(--theme-text-3);
  --line:var(--theme-border);
  --soft:var(--theme-surface-2);
}

/* Whole application surfaces */
html,
body,
.app-shell,
.login-screen,
.chat-screen{
  background:var(--theme-page)!important;
  color:var(--theme-text)!important;
}

.login-card,
.topbar,
.mobile-classic-tabs,
.chat-main,
.users-sidebar,
.all-right-sidebar,
.simple-modal-card,
.mobile-menu-card,
.mobile-private-card,
.theme-card{
  background:var(--theme-surface)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}

/* Secondary panels and cards */
.login-meta,
.login-credits,
.channel-item,
.status-tab-btn,
.user-search-wrap,
.compact-user-item,
.right-me-card,
.mobile-menu-account,
.whois-field,
.whois-wide-field,
.about-info-list,
.stacked-service-form input,
.join-form input,
.simple-modal-card input,
.simple-modal-card textarea,
.theme-option,
.mobile-private-item,
.status-log-head,
.reconnect-banner{
  border-color:var(--theme-border)!important;
}

.user-search-wrap,
.right-me-card,
.mobile-menu-account,
.whois-field,
.whois-wide-field,
.status-log-head,
.theme-option,
.login-meta{
  background:var(--theme-surface-2)!important;
}

/* Main message viewport */
.messages{
  background:var(--theme-page)!important;
  color:var(--theme-text)!important;
}

.message-row:hover,
.compact-user-item:hover,
.mobile-private-item:hover,
.mobile-menu-actions > button:hover{
  background:var(--theme-message-hover)!important;
}

.message-row.own,
.mobile-private-item.active,
.channel-item.active:not(.joined-channel),
.status-tab-btn.active{
  background:var(--theme-message-own)!important;
}

.message-text,
.status-entry,
.system-row,
.notice-row,
.channel-name-text,
.user-meta strong,
.mobile-private-name,
.whois-field strong,
.about-info-list strong{
  color:var(--theme-text)!important;
}

.message-time,
.user-search-wrap input::placeholder,
.mobile-menu-actions button small,
.whois-field > span,
.whois-wide-field > span,
.about-info-list span,
.login-credits span,
.login-credits small{
  color:var(--theme-text-3)!important;
}

/* Channel tabs / active navigation */
.channel-item,
.status-tab-btn,
.mobile-room-tab,
.mobile-menu-actions > button,
.mobile-private-item{
  color:var(--theme-text-2)!important;
}

.channel-item:hover,
.status-tab-btn:hover,
.mobile-room-tab:not(.active):hover{
  background:var(--theme-surface-2)!important;
}

.channel-item.active,
.mobile-room-tab.active,
.send-btn,
.primary-btn,
.mobile-menu-avatar,
.whois-avatar,
.mobile-private-avatar{
  background:var(--theme-accent)!important;
  color:#fff!important;
}

.channel-item.active .channel-name-text,
.mobile-room-tab.active .mobile-room-name{
  color:#fff!important;
}

/* Brand / buttons / links */
.brand strong,
.channel-heading strong,
.modal-kicker,
.mobile-menu-brand strong,
.mobile-menu-actions button strong,
.theme-option strong{
  color:var(--theme-accent)!important;
}

.brand-symbol span,
.about-brand-symbol span{
  background:var(--theme-accent-2)!important;
}

.icon-btn,
.composer-btn,
.secondary-btn,
.mini-action,
.mobile-users-collapse,
#mobileMenuCloseBtn,
#mobilePrivateCloseBtn{
  background:var(--theme-surface)!important;
  color:var(--theme-accent)!important;
  border-color:var(--theme-border)!important;
}

.icon-btn:hover,
.composer-btn:hover,
.secondary-btn:hover,
.mini-action:hover{
  background:var(--theme-accent-soft)!important;
}

/* Composer / input areas */
.composer,
.mobile-compose-inputrow,
.mobile-compose-inputrow textarea,
.composer textarea,
#messageInput,
.simple-modal-card input,
.simple-modal-card textarea{
  background:var(--theme-input)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
}

.mobile-compose-formatbar{
  background:var(--theme-surface-2)!important;
  border-color:var(--theme-border)!important;
}

.mobile-compose-formatbar button{
  color:var(--theme-accent)!important;
  border-color:var(--theme-border)!important;
}

/* Right user panel and separators */
.users-right-section,
.all-right-scroll{
  background:var(--theme-surface)!important;
}

.compact-user-item{
  border-color:var(--theme-border)!important;
}

/* Modals / popovers */
.emoji-popover,
.format-popover,
.nick-menu,
.user-menu,
.channel-tools-card{
  background:var(--theme-surface)!important;
  color:var(--theme-text)!important;
  border-color:var(--theme-border)!important;
  box-shadow:0 12px 32px var(--theme-shadow)!important;
}

/* Scrollbars */
.messages,
.user-list,
.mobile-private-list,
.mobile-menu-card,
.all-right-scroll{
  scrollbar-color:var(--theme-border-strong) transparent;
}

.messages::-webkit-scrollbar-thumb,
.user-list::-webkit-scrollbar-thumb,
.mobile-private-list::-webkit-scrollbar-thumb,
.mobile-menu-card::-webkit-scrollbar-thumb,
.all-right-scroll::-webkit-scrollbar-thumb{
  background:var(--theme-border-strong)!important;
}

/* Theme selection itself */
.theme-option.active{
  border-color:var(--theme-accent)!important;
  background:var(--theme-accent-soft)!important;
}

.theme-option.active > i{
  color:var(--theme-accent)!important;
}

/* Mobile header and full-width composer also follow theme */
@media(max-width:900px){
  .topbar,
  .mobile-classic-tabs,
  .composer,
  .mobile-compose-inputrow,
  .mobile-private-trigger{
    background:var(--theme-surface)!important;
    border-color:var(--theme-border)!important;
  }

  .workspace.all-right-workspace,
  .messages{
    background:var(--theme-page)!important;
  }

  .all-right-sidebar,
  .users-right-section{
    background:var(--theme-surface)!important;
  }

  .mobile-users-collapse{
    background:var(--theme-surface)!important;
    color:var(--theme-accent)!important;
  }
}


/* =====================================================================
   V4.7.5 — MOBİL STATUS TAM GENİŞLİK
   Status bir kanal değildir; mobilde nick listesi gösterilmez.
   ===================================================================== */

@media (max-width:900px){

  .chat-screen.status-active .workspace.all-right-workspace{
    grid-template-columns:minmax(0,1fr) 0!important;
  }

  .chat-screen.status-active .all-right-sidebar{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
    width:0!important;
    min-width:0!important;
    border:0!important;
  }

  .chat-screen.status-active .mobile-users-collapse{
    display:none!important;
  }

  .chat-screen.status-active .chat-main{
    width:100%!important;
    max-width:none!important;
    border-right:0!important;
  }

  .chat-screen.status-active .messages{
    width:100%!important;
    max-width:none!important;
  }
}


/* =====================================================================
   V4.8 — KALİTE PAKETİ
   Yeni mesaj ayracı / akıllı scroll / performans / tema-nick kontrastı
   ===================================================================== */

/* A visible boundary between previously read and unread history. */
.new-messages-divider{
  position:relative;
  width:100%;
  min-height:26px;
  margin:10px 0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}

.new-messages-divider::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:1px;
  background:var(--theme-accent-2,var(--gold));
  opacity:.60;
}

.new-messages-divider span{
  position:relative;
  z-index:1;
  padding:3px 10px;
  border:1px solid
    color-mix(
      in srgb,
      var(--theme-accent-2,var(--gold)) 55%,
      var(--theme-surface,#fff) 45%
    );
  border-radius:999px;
  background:var(--theme-surface,#fff);
  color:var(--theme-accent,var(--navy));
  font-size:7px;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}

/* Appears only when the user has intentionally scrolled up. */
.new-message-jump{
  position:absolute;
  right:18px;
  bottom:82px;
  z-index:24;

  min-height:34px;
  padding:0 12px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;

  border:1px solid var(--theme-border,var(--line));
  border-radius:10px;

  background:var(--theme-accent,var(--navy));
  color:#fff;

  box-shadow:0 8px 24px var(--theme-shadow,rgba(20,35,55,.14));
  cursor:pointer;

  font:800 8px/1 Manrope,Arial,sans-serif;
}

.new-message-jump[hidden]{
  display:none!important;
}

.new-message-jump > span{
  font-size:15px;
  line-height:1;
}

.new-message-jump > strong{
  color:inherit!important;
  font:inherit;
}

/* Prevent browser scroll anchoring from fighting our explicit IRC behavior. */
.messages{
  overflow-anchor:none!important;
}

/* Theme-aware nick colors are always readable on all current light themes. */
.message-nick{
  font-weight:800;
  text-shadow:0 0 0 transparent;
}

@media(max-width:900px){
  .new-message-jump{
    position:fixed;
    right:max(12px,env(safe-area-inset-right));
    bottom:calc(
      var(--mobile-composer-height,86px) +
      10px +
      env(safe-area-inset-bottom)
    );

    min-height:32px;
    padding:0 10px;
    border-radius:8px;
    font-size:7.5px;
  }

  /*
   * On a channel the nick list may occupy the right side, but the button
   * stays over the message viewport rather than under the fixed composer.
   */
  .chat-screen:not(.status-active) .new-message-jump{
    right:calc(
      36vw +
      10px +
      env(safe-area-inset-right)
    );
  }

  .chat-screen.status-active .new-message-jump{
    right:max(12px,env(safe-area-inset-right));
  }

  .new-messages-divider{
    margin:8px 0 10px;
  }

  .new-messages-divider span{
    font-size:6.6px;
    padding:3px 8px;
  }
}

@media(max-width:430px){
  .chat-screen:not(.status-active) .new-message-jump{
    right:calc(
      35vw +
      8px +
      env(safe-area-inset-right)
    );
  }
}


/* =====================================================================
   V4.9 — IPHONE / MOBİL KULLANILABİLİRLİK
   Uzun basmaya bağlı değil: dokunma tabanlı IRC aksiyonları.
   ===================================================================== */

/* ---------- Composer suggestions ---------- */
.composer-assist{
  position:absolute;
  left:46px;
  right:58px;
  bottom:calc(100% + 7px);
  z-index:45;

  max-height:260px;
  padding:7px;

  border:1px solid var(--theme-border,var(--line));
  border-radius:11px;

  background:var(--theme-surface,#fff);
  color:var(--theme-text);

  box-shadow:0 12px 32px var(--theme-shadow,rgba(20,35,55,.14));
  overflow:auto;
}

.composer-assist[hidden]{
  display:none!important;
}

.composer-assist-head{
  min-height:30px;
  padding:3px 7px 7px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  border-bottom:1px solid var(--theme-border,var(--line));
}

.composer-assist-head strong{
  color:var(--theme-accent,var(--navy));
  font-size:8px;
  font-weight:900;
}

.composer-assist-head span{
  color:var(--theme-text-3,var(--text-3));
  font-size:7px;
}

.composer-assist-list{
  display:flex;
  flex-direction:column;
  padding-top:3px;
}

.composer-assist-item{
  width:100%;
  min-height:36px;
  padding:5px 7px;

  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  align-items:center;
  gap:8px;

  border:0;
  border-bottom:1px solid
    var(--theme-border,var(--line));

  background:transparent;
  text-align:left;
  cursor:pointer;
}

.composer-assist-item:last-child{
  border-bottom:0;
}

.composer-assist-item:hover{
  background:var(--theme-accent-soft,var(--soft));
}

.composer-assist-item strong{
  color:var(--theme-accent,var(--navy));
  font-size:8.5px;
  font-weight:900;
}

.composer-assist-item span{
  color:var(--theme-text-2,var(--text-2));
  font-size:7px;
}

/* ---------- Message action: explicit tap button, iPhone-safe ---------- */
.message-more-btn{
  width:25px;
  height:23px;
  margin-left:auto;

  display:grid;
  place-items:center;

  border:0;
  border-radius:6px;

  background:transparent;
  color:var(--theme-text-3,var(--text-3));

  font-size:16px;
  line-height:1;
  cursor:pointer;

  opacity:0;
}

.message-row:hover .message-more-btn,
.message-more-btn:focus-visible{
  opacity:1;
}

.message-action-card{
  width:min(380px,calc(100vw - 26px));
}

.message-action-preview{
  max-height:116px;
  margin:10px 0 14px;
  padding:9px 10px;

  border:1px solid var(--theme-border,var(--line));
  border-radius:8px;

  background:var(--theme-surface-2,var(--soft));
  color:var(--theme-text-2,var(--text-2));

  font-size:9px;
  line-height:1.5;

  overflow:auto;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}

.message-action-buttons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
}

/* ---------- iOS / mobile keyboard ---------- */
@media(max-width:900px){

  /*
   * Full width composer remains fixed, but on iOS it follows the
   * visual viewport keyboard inset rather than hiding underneath it.
   */
  .composer{
    bottom:var(--keyboard-inset-bottom,0px)!important;
  }

  .chat-screen.keyboard-open .composer{
    box-shadow:
      0 -4px 16px
      var(--theme-shadow,rgba(20,35,55,.10))!important;
  }

  .composer-assist{
    position:fixed;
    left:7px;
    right:7px;
    bottom:calc(
      var(--mobile-composer-height,86px) +
      var(--keyboard-inset-bottom,0px) +
      6px
    );

    max-height:min(250px,35vh);
    border-radius:8px;
  }

  /*
   * There is no long-press requirement on mobile.
   * The ⋯ target is always visible and comfortably tappable.
   */
  .message-more-btn{
    width:30px;
    height:28px;
    min-width:30px;
    opacity:1;
    color:var(--theme-text-3,var(--text-3));
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .message-nick,
  .compact-user-item{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .message-head{
    align-items:center;
  }

  .message-action-modal{
    padding:0!important;
    align-items:end!important;
  }

  .message-action-modal .message-action-card{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:20px 16px
      calc(16px + env(safe-area-inset-bottom))!important;

    border-radius:14px 14px 0 0!important;
    border-left:0!important;
    border-right:0!important;
    border-bottom:0!important;
  }

  .message-action-buttons{
    grid-template-columns:1fr 1fr;
  }
}

@media(max-width:430px){
  .composer-assist-item{
    grid-template-columns:82px minmax(0,1fr);
  }
}


/* =====================================================================
   V4.9.1 — HARABE FM PREMIUM ANİMASYONLU RADYO TUŞU
   Ses/radyo mantığı değişmedi; sadece mevcut #radioToggleBtn geliştirildi.
   ===================================================================== */

.premium-radio{
  position:relative!important;
  width:auto!important;
  min-width:104px;
  height:42px;

  padding:0 12px 0 10px!important;

  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:8px;

  overflow:hidden!important;

  border:1px solid var(--theme-border,var(--line))!important;
  border-radius:12px!important;

  background:
    linear-gradient(
      145deg,
      var(--theme-surface,#fff) 0%,
      var(--theme-surface-2,#f6f4ee) 100%
    )!important;

  color:var(--theme-accent,var(--navy))!important;

  box-shadow:
    0 3px 10px
    var(--theme-shadow,rgba(20,35,55,.08));

  transition:
    background .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    transform .16s ease!important;
}

.premium-radio:hover{
  transform:translateY(-1px);
  border-color:
    color-mix(
      in srgb,
      var(--theme-accent,var(--navy)) 40%,
      var(--theme-border,var(--line)) 60%
    )!important;
}

.premium-radio:active{
  transform:translateY(0) scale(.98);
}

/* Soft moving highlight; visible only while streaming. */
.radio-glow{
  position:absolute;
  inset:-1px;
  z-index:0;
  opacity:0;
  pointer-events:none;

  background:
    linear-gradient(
      105deg,
      transparent 0 28%,
      rgba(255,255,255,.24) 45%,
      transparent 62%
    );

  transform:translateX(-120%);
}

.premium-radio.is-playing .radio-glow{
  opacity:1;
  animation:harabeRadioSweep 3.2s ease-in-out infinite;
}

/* Equalizer */
.premium-radio .radio-eq{
  position:relative;
  z-index:2;

  width:25px;
  height:23px;

  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:2px;

  flex:0 0 25px;
}

.premium-radio .radio-eq i{
  width:3px;
  min-height:4px;

  border-radius:3px 3px 1px 1px;

  background:var(--theme-text-3,#8b9199);

  box-shadow:none;

  transition:
    height .18s ease,
    background .2s ease,
    box-shadow .2s ease;
}

/* Paused waveform */
.premium-radio:not(.is-playing) .radio-eq i:nth-child(1){height:6px}
.premium-radio:not(.is-playing) .radio-eq i:nth-child(2){height:11px}
.premium-radio:not(.is-playing) .radio-eq i:nth-child(3){height:17px}
.premium-radio:not(.is-playing) .radio-eq i:nth-child(4){height:12px}
.premium-radio:not(.is-playing) .radio-eq i:nth-child(5){height:7px}

/* Playing button */
.premium-radio.is-playing{
  border-color:
    color-mix(
      in srgb,
      var(--theme-accent-2,var(--gold)) 58%,
      var(--theme-accent,var(--navy)) 42%
    )!important;

  background:
    linear-gradient(
      135deg,
      var(--theme-accent,var(--navy)) 0%,
      var(--theme-accent-hover,var(--navy-2)) 100%
    )!important;

  color:#fff!important;

  box-shadow:
    0 5px 16px var(--theme-shadow,rgba(20,35,55,.16)),
    0 0 0 2px
      color-mix(
        in srgb,
        var(--theme-accent-2,var(--gold)) 17%,
        transparent
      )!important;
}

/* White + gold alternating bars give a real radio-console feel. */
.premium-radio.is-playing .radio-eq i:nth-child(odd){
  background:#fff;
  box-shadow:0 0 7px rgba(255,255,255,.35);
}

.premium-radio.is-playing .radio-eq i:nth-child(even){
  background:var(--theme-accent-2,var(--gold));
  box-shadow:
    0 0 8px
    color-mix(
      in srgb,
      var(--theme-accent-2,var(--gold)) 60%,
      transparent
    );
}

.premium-radio.is-playing .radio-eq i:nth-child(1){
  animation:harabePremiumEq1 .62s ease-in-out infinite alternate;
}
.premium-radio.is-playing .radio-eq i:nth-child(2){
  animation:harabePremiumEq2 .44s ease-in-out infinite alternate;
}
.premium-radio.is-playing .radio-eq i:nth-child(3){
  animation:harabePremiumEq3 .72s ease-in-out infinite alternate;
}
.premium-radio.is-playing .radio-eq i:nth-child(4){
  animation:harabePremiumEq4 .49s ease-in-out infinite alternate;
}
.premium-radio.is-playing .radio-eq i:nth-child(5){
  animation:harabePremiumEq5 .58s ease-in-out infinite alternate;
}

/* Desktop text */
.radio-copy{
  position:relative;
  z-index:2;

  min-width:42px;

  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;

  line-height:1;
}

.radio-copy strong{
  color:inherit!important;
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.01em;
}

.radio-copy small{
  margin-top:4px;
  color:var(--theme-text-3,var(--text-3));
  font-size:6.5px;
  font-weight:700;
}

.premium-radio.is-playing .radio-copy small{
  color:
    color-mix(
      in srgb,
      #fff 74%,
      var(--theme-accent-2,var(--gold)) 26%
    );
}

/* Live indicator */
.radio-live-dot{
  position:relative;
  z-index:2;

  width:6px;
  height:6px;

  flex:0 0 6px;

  border-radius:50%;
  background:var(--theme-text-3,#999);

  transition:
    background .2s ease,
    box-shadow .2s ease;
}

.premium-radio.is-playing .radio-live-dot{
  background:var(--theme-accent-2,var(--gold));
  box-shadow:
    0 0 0 3px
      color-mix(
        in srgb,
        var(--theme-accent-2,var(--gold)) 18%,
        transparent
      ),
    0 0 8px
      color-mix(
        in srgb,
        var(--theme-accent-2,var(--gold)) 60%,
        transparent
      );

  animation:harabeRadioDot 1.45s ease-in-out infinite;
}

/* Animations */
@keyframes harabePremiumEq1{
  from{height:5px}
  to{height:18px}
}
@keyframes harabePremiumEq2{
  from{height:17px}
  to{height:7px}
}
@keyframes harabePremiumEq3{
  from{height:8px}
  to{height:22px}
}
@keyframes harabePremiumEq4{
  from{height:20px}
  to{height:6px}
}
@keyframes harabePremiumEq5{
  from{height:7px}
  to{height:16px}
}

@keyframes harabeRadioSweep{
  0%,45%{
    transform:translateX(-120%);
  }
  70%,100%{
    transform:translateX(120%);
  }
}

@keyframes harabeRadioDot{
  0%,100%{
    opacity:.72;
    transform:scale(.88);
  }
  50%{
    opacity:1;
    transform:scale(1.12);
  }
}

/* Mobile: preserve the compact header size, only improve animation. */
@media(max-width:900px){
  #radioToggleBtn.premium-radio{
    width:44px!important;
    min-width:44px!important;
    height:40px!important;
    flex:0 0 44px!important;

    padding:0!important;
    gap:0!important;

    border-radius:11px!important;
  }

  #radioToggleBtn .radio-copy,
  #radioToggleBtn .radio-live-dot{
    display:none!important;
  }

  #radioToggleBtn .radio-eq{
    width:24px;
    height:22px;
    transform:none!important;
  }

  #radioToggleBtn.premium-radio.is-playing{
    box-shadow:
      0 4px 14px
      var(--theme-shadow,rgba(20,35,55,.16)),
      0 0 0 2px
      color-mix(
        in srgb,
        var(--theme-accent-2,var(--gold)) 16%,
        transparent
      )!important;
  }
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  .premium-radio.is-playing .radio-eq i,
  .premium-radio.is-playing .radio-glow,
  .premium-radio.is-playing .radio-live-dot{
    animation:none!important;
  }

  .premium-radio.is-playing .radio-eq i:nth-child(1){height:8px}
  .premium-radio.is-playing .radio-eq i:nth-child(2){height:15px}
  .premium-radio.is-playing .radio-eq i:nth-child(3){height:21px}
  .premium-radio.is-playing .radio-eq i:nth-child(4){height:13px}
  .premium-radio.is-playing .radio-eq i:nth-child(5){height:9px}
}


/* =====================================================================
   V4.9.2 — MASAÜSTÜ ÜST MENÜ SIKIŞMA DÜZELTMESİ
   Premium radyo ile birlikte tüm aksiyonlar eksiksiz görünür.
   ===================================================================== */

@media (min-width:901px){

  /*
   * Eski tasarımda 3. kolon --right (270px) idi.
   * Premium radyo sonrası aksiyonların toplamı 270px'i aştığı için
   * butonlar sola taşıyor/örtüşüyordu.
   *
   * Sağ üst kolon artık içeriğinin gerçek genişliğini kullanır.
   */
  .topbar{
    grid-template-columns:
      var(--left)
      minmax(180px,1fr)
      max-content!important;
  }

  .channel-heading{
    min-width:0!important;
    overflow:hidden!important;
  }

  .channel-heading > div{
    min-width:0!important;
    max-width:100%!important;
  }

  .channel-topic{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .topbar-actions{
    width:max-content!important;
    min-width:max-content!important;

    padding:0 14px!important;
    gap:7px!important;

    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    justify-content:flex-end!important;

    overflow:visible!important;
  }

  .topbar-actions > *{
    flex:0 0 auto!important;
  }

  .topbar-actions .icon-btn{
    flex-shrink:0!important;
  }

  .topbar-actions .connection-pill{
    flex:0 0 auto!important;
    white-space:nowrap!important;
  }

  /* Premium radio remains rich but slightly tighter than V4.9.1. */
  #radioToggleBtn.premium-radio{
    min-width:94px!important;
    height:40px!important;
    padding:0 10px 0 8px!important;
    gap:6px!important;
  }

  #radioToggleBtn .radio-eq{
    width:23px!important;
    flex-basis:23px!important;
  }

  #radioToggleBtn .radio-copy{
    min-width:38px!important;
  }

  #radioToggleBtn .radio-copy strong{
    font-size:8px!important;
  }

  #radioToggleBtn .radio-copy small{
    font-size:6px!important;
  }
}

/*
 * Orta boy masaüstü/tablet-yatay:
 * tüm kontroller kalır, yalnızca radyo metni gizlenerek alan kazanılır.
 */
@media (min-width:901px) and (max-width:1120px){

  #radioToggleBtn.premium-radio{
    width:46px!important;
    min-width:46px!important;
    padding:0!important;
    gap:0!important;
  }

  #radioToggleBtn .radio-copy,
  #radioToggleBtn .radio-live-dot{
    display:none!important;
  }

  .topbar-actions{
    padding-left:9px!important;
    padding-right:9px!important;
    gap:5px!important;
  }

  .connection-pill{
    padding-left:9px!important;
    padding-right:9px!important;
  }
}

/*
 * Mobile kuralları desktop max-content davranışını kesin olarak sıfırlar.
 */
@media (max-width:900px){

  .topbar{
    grid-template-columns:auto minmax(0,1fr) auto!important;
  }

  .topbar-actions{
    width:auto!important;
    min-width:0!important;
    max-width:none!important;

    padding:0 9px!important;
    gap:7px!important;

    overflow:visible!important;
  }

  #radioToggleBtn.premium-radio{
    width:44px!important;
    min-width:44px!important;
    height:40px!important;
    padding:0!important;
  }
}


/* =====================================================================
   V4.9.3 — KLASİK HAKKINDA PENCERESİ
   ===================================================================== */

.classic-about-card{
  width:min(430px,calc(100vw - 28px))!important;
  padding:24px 26px 19px!important;
  border:1px solid var(--theme-border,var(--line))!important;
  border-radius:18px!important;
  background:var(--theme-surface,#fff)!important;
  box-shadow:
    0 22px 55px
    color-mix(
      in srgb,
      var(--theme-accent,var(--navy)) 12%,
      transparent
    )!important;
}

.about-classic-head{
  padding-right:30px;
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:start;
  gap:13px;
}

.classic-about-card .about-brand-symbol{
  width:32px;
  height:39px;
  margin:1px 0 0!important;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:4px;
}

.classic-about-card .about-brand-symbol span{
  width:5px;
  border-radius:4px 4px 1px 1px;
  background:var(--theme-accent-2,var(--gold))!important;
}

.classic-about-card .about-brand-symbol span:nth-child(1){height:20px}
.classic-about-card .about-brand-symbol span:nth-child(2){
  height:32px;
  background:var(--theme-accent,var(--navy))!important;
}
.classic-about-card .about-brand-symbol span:nth-child(3){height:25px}

.about-classic-title{
  min-width:0;
}

.about-classic-title .modal-kicker{
  margin:1px 0 7px!important;
  color:var(--theme-accent,var(--navy))!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.20em!important;
}

.about-classic-title h3{
  margin:0!important;
  color:var(--theme-text,var(--text-1))!important;
  font-size:19px!important;
  font-weight:850!important;
  line-height:1.15!important;
  letter-spacing:-.025em;
}

.about-classic-title p{
  max-width:320px;
  margin:7px 0 0!important;
  color:var(--theme-text-2,var(--text-2))!important;
  font-size:8px!important;
  line-height:1.45!important;
}

.about-divider{
  width:100%;
  height:1px;
  margin:17px 0 5px;
  background:var(--theme-border,var(--line));
}

.classic-about-info{
  width:100%;
  margin:0!important;
  padding:0!important;
  display:block!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
}

.classic-about-info > div{
  min-height:42px;
  padding:0 2px!important;
  display:grid!important;
  grid-template-columns:145px minmax(0,1fr)!important;
  align-items:center!important;
  gap:14px!important;
  border:0!important;
  border-bottom:1px solid
    color-mix(
      in srgb,
      var(--theme-border,var(--line)) 76%,
      transparent
    )!important;
  background:transparent!important;
}

.classic-about-info > div:last-child{
  border-bottom:0!important;
}

.classic-about-info > div > span{
  color:var(--theme-text-3,var(--text-3))!important;
  font-size:7.5px!important;
  font-weight:700!important;
  line-height:1.2!important;
}

.classic-about-info > div > strong{
  min-width:0;
  color:var(--theme-text,var(--text-1))!important;
  font-size:8.5px!important;
  font-weight:800!important;
  line-height:1.25!important;
  text-align:right;
  overflow-wrap:anywhere;
}

.classic-about-info .about-version{
  justify-self:end;
  padding:4px 7px;
  border:1px solid
    color-mix(
      in srgb,
      var(--theme-accent,var(--navy)) 16%,
      var(--theme-border,var(--line)) 84%
    );
  border-radius:6px;
  background:var(--theme-accent-soft,var(--soft));
  color:var(--theme-accent,var(--navy))!important;
  font-size:7px!important;
  letter-spacing:.03em;
}

.about-classic-foot{
  min-height:24px;
  margin-top:9px;
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--theme-text-3,var(--text-3));
  font-size:6.8px;
  font-weight:650;
}

.about-classic-foot i{
  color:var(--theme-border-strong,var(--line));
  font-style:normal;
}

.about-online-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#34b768;
  box-shadow:0 0 0 3px rgba(52,183,104,.10);
}

.classic-about-card .modal-x{
  top:14px!important;
  right:14px!important;
  width:31px!important;
  height:31px!important;
  border:1px solid var(--theme-border,var(--line))!important;
  border-radius:9px!important;
  background:var(--theme-surface-2,var(--soft))!important;
  color:var(--theme-text-3,var(--text-3))!important;
  font-size:17px!important;
}

.classic-about-card .modal-x:hover{
  color:var(--theme-accent,var(--navy))!important;
  background:var(--theme-accent-soft,var(--soft))!important;
}

@media(max-width:900px){
  .classic-about-card{
    width:min(400px,calc(100vw - 24px))!important;
    padding:21px 19px 16px!important;
    border-radius:15px!important;
  }

  .about-classic-head{
    grid-template-columns:32px minmax(0,1fr);
    gap:11px;
  }

  .classic-about-card .about-brand-symbol{
    width:28px;
    height:34px;
  }

  .classic-about-card .about-brand-symbol span{width:4px}
  .classic-about-card .about-brand-symbol span:nth-child(1){height:17px}
  .classic-about-card .about-brand-symbol span:nth-child(2){height:28px}
  .classic-about-card .about-brand-symbol span:nth-child(3){height:22px}

  .about-classic-title h3{
    font-size:17px!important;
  }

  .about-classic-title p{
    font-size:7.7px!important;
  }

  .classic-about-info > div{
    min-height:40px;
    grid-template-columns:116px minmax(0,1fr)!important;
    gap:10px!important;
  }

  .classic-about-info > div > span{
    font-size:7px!important;
  }

  .classic-about-info > div > strong{
    font-size:8px!important;
  }
}

@media(max-width:380px){
  .classic-about-info > div{
    grid-template-columns:105px minmax(0,1fr)!important;
  }
}


/* =====================================================================
   V4.9.4 — UNIFIED CLASSIC UI
   Tüm menüler / modallar / popoverlar aynı klasik Harabe tasarım dilinde.
   ===================================================================== */

/* ---------- Common modal shell ---------- */
.simple-modal{
  background:
    color-mix(
      in srgb,
      var(--theme-text,var(--text-1)) 18%,
      transparent
    )!important;
  backdrop-filter:blur(2px);
}

.classic-ui-card{
  width:min(420px,calc(100vw - 28px));
  padding:22px 24px 18px!important;

  border:1px solid var(--theme-border,var(--line))!important;
  border-radius:16px!important;

  background:var(--theme-surface,#fff)!important;
  color:var(--theme-text,var(--text-1))!important;

  box-shadow:
    0 22px 55px
    color-mix(
      in srgb,
      var(--theme-accent,var(--navy)) 11%,
      transparent
    )!important;
}

.classic-ui-card > .modal-icon{
  width:31px!important;
  height:31px!important;
  margin:0 0 10px!important;

  display:grid!important;
  place-items:center!important;

  border:1px solid var(--theme-border,var(--line))!important;
  border-radius:8px!important;

  background:var(--theme-surface-2,var(--soft))!important;
  color:var(--theme-accent,var(--navy))!important;

  font-size:12px!important;
  font-weight:900!important;
}

.classic-ui-card > .modal-kicker,
.classic-ui-card .modal-kicker{
  margin:0 0 6px!important;
  color:var(--theme-accent,var(--navy))!important;
  font-size:7px!important;
  font-weight:900!important;
  letter-spacing:.18em!important;
}

.classic-ui-card > h3,
.classic-ui-card .whois-head h3,
.classic-ui-card .channel-tools-head h3{
  margin:0!important;
  color:var(--theme-text,var(--text-1))!important;
  font-size:18px!important;
  font-weight:850!important;
  line-height:1.16!important;
  letter-spacing:-.02em!important;
}

.classic-ui-card > p{
  margin:6px 0 14px!important;
  color:var(--theme-text-2,var(--text-2))!important;
  font-size:8px!important;
  line-height:1.45!important;
}

.classic-ui-card .modal-x{
  top:13px!important;
  right:13px!important;

  width:30px!important;
  height:30px!important;

  border:1px solid var(--theme-border,var(--line))!important;
  border-radius:8px!important;

  background:var(--theme-surface-2,var(--soft))!important;
  color:var(--theme-text-3,var(--text-3))!important;

  font-size:16px!important;
  box-shadow:none!important;
}

.classic-ui-card .modal-x:hover{
  background:var(--theme-accent-soft,var(--soft))!important;
  color:var(--theme-accent,var(--navy))!important;
}

/* About already has its own polished header; only share outer family. */
.classic-about-card{
  width:min(430px,calc(100vw - 28px))!important;
}

/* ---------- Forms: NickServ / Join / Register / OPER ---------- */
.nickserv-form,
#joinForm,
.stacked-service-form{
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}

.stacked-service-form label{
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
}

.stacked-service-form label > span{
  color:var(--theme-text-2,var(--text-2))!important;
  font-size:7.3px!important;
  font-weight:800!important;
}

.stacked-service-form label > span em{
  color:var(--theme-text-3,var(--text-3))!important;
  font-size:6.5px!important;
  font-style:normal!important;
  font-weight:600!important;
}

.nickserv-form input,
#joinForm input,
.stacked-service-form input,
.channel-topic-input{
  width:100%!important;
  min-height:40px!important;
  padding:0 11px!important;

  border:1px solid var(--theme-border,var(--line))!important;
  border-radius:8px!important;

  background:var(--theme-input,#fff)!important;
  color:var(--theme-text,var(--text-1))!important;

  font-size:8.5px!important;
  outline:none!important;
  box-shadow:none!important;
}

.channel-topic-input{
  min-height:82px!important;
  padding:10px 11px!important;
  resize:vertical!important;
}

.nickserv-form input:focus,
#joinForm input:focus,
.stacked-service-form input:focus,
.channel-topic-input:focus{
  border-color:
    color-mix(
      in srgb,
      var(--theme-accent,var(--navy)) 48%,
      var(--theme-border,var(--line)) 52%
    )!important;

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--theme-accent,var(--navy)) 8%,
      transparent
    )!important;
}

.classic-ui-card .primary-btn{
  min-height:39px!important;
  border-radius:8px!important;
  box-shadow:none!important;
  font-size:8px!important;
  font-weight:850!important;
}

.classic-ui-card .secondary-btn{
  min-height:35px!important;
  border-radius:8px!important;
  border-color:var(--theme-border,var(--line))!important;
  background:var(--theme-surface,#fff)!important;
  color:var(--theme-accent,var(--navy))!important;
  box-shadow:none!important;
}

.modal-inline-error{
  min-height:0!important;
  color:#a84f4b!important;
  font-size:7px!important;
  line-height:1.4!important;
}

.privacy-note{
  margin-top:13px!important;
  padding:10px 0 0!important;

  border:0!important;
  border-top:1px solid var(--theme-border,var(--line))!important;
  border-radius:0!important;

  background:transparent!important;
  color:var(--theme-text-3,var(--text-3))!important;

  font-size:6.8px!important;
  line-height:1.45!important;
}

/* ---------- Theme ---------- */
.theme-card{
  width:min(430px,calc(100vw - 28px))!important;
}

.theme-options{
  margin-top:14px!important;
  gap:0!important;

  border-top:1px solid var(--theme-border,var(--line));
}

.theme-option{
  min-height:53px!important;
  padding:7px 3px!important;

  grid-template-columns:36px minmax(0,1fr) 20px!important;
  gap:10px!important;

  border:0!important;
  border-bottom:1px solid var(--theme-border,var(--line))!important;
  border-radius:0!important;

  background:transparent!important;
}

.theme-option:last-child{
  border-bottom:0!important;
}

.theme-option:hover{
  background:var(--theme-surface-2,var(--soft))!important;
}

.theme-option.active{
  background:var(--theme-accent-soft,var(--soft))!important;
}

.theme-swatch{
  width:31px!important;
  height:31px!important;
  border-radius:7px!important;
}

.theme-option strong{
  font-size:8.4px!important;
}

.theme-option small{
  font-size:6.8px!important;
}

/* ---------- WHOIS ---------- */
.whois-card{
  width:min(540px,calc(100vw - 28px))!important;
}

.whois-head{
  min-height:54px!important;
  padding:0 36px 13px 0!important;
  gap:11px!important;

  border-bottom:1px solid var(--theme-border,var(--line))!important;
}

.whois-avatar{
  width:38px!important;
  height:38px!important;
  border-radius:9px!important;

  background:var(--theme-accent-soft,var(--soft))!important;
  color:var(--theme-accent,var(--navy))!important;

  border:1px solid var(--theme-border,var(--line))!important;
}

.whois-loading,
.whois-error{
  margin:12px 0 0!important;
  border-radius:7px!important;
  font-size:7.4px!important;
}

.whois-grid{
  margin-top:10px!important;
  display:block!important;
  border-top:1px solid var(--theme-border,var(--line))!important;
}

.whois-field,
.whois-wide-field{
  min-height:40px!important;
  padding:7px 2px!important;

  display:grid!important;
  grid-template-columns:125px minmax(0,1fr)!important;
  align-items:center!important;
  gap:12px!important;

  border:0!important;
  border-bottom:1px solid var(--theme-border,var(--line))!important;
  border-radius:0!important;

  background:transparent!important;
}

.whois-field > span,
.whois-wide-field > span{
  color:var(--theme-text-3,var(--text-3))!important;
  font-size:7px!important;
  font-weight:750!important;
}

.whois-field > strong,
.whois-wide-field > strong,
.whois-channels{
  color:var(--theme-text,var(--text-1))!important;
  font-size:8px!important;
  text-align:right!important;
}

.whois-channels{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:flex-end!important;
  gap:5px!important;
}

.whois-actions{
  margin-top:13px!important;
  padding-top:12px!important;
  border-top:1px solid var(--theme-border,var(--line))!important;
}

/* ---------- Channel management ---------- */
.channel-tools-card{
  width:min(620px,calc(100vw - 28px))!important;
}

.channel-tools-head{
  min-height:58px!important;
  padding:0 36px 13px 0!important;
  gap:11px!important;

  border-bottom:1px solid var(--theme-border,var(--line))!important;
}

.channel-tools-icon{
  width:38px!important;
  height:38px!important;
  border-radius:9px!important;

  background:var(--theme-accent-soft,var(--soft))!important;
  color:var(--theme-accent,var(--navy))!important;
  border:1px solid var(--theme-border,var(--line))!important;
}

.channel-tools-head p{
  margin:4px 0 0!important;
  color:var(--theme-text-2,var(--text-2))!important;
  font-size:7px!important;
}

.channel-tools-section{
  margin:0!important;
  padding:15px 2px!important;

  border:0!important;
  border-bottom:1px solid var(--theme-border,var(--line))!important;
  border-radius:0!important;

  background:transparent!important;
}

.channel-tools-section:last-child{
  border-bottom:0!important;
}

.channel-tools-section-head{
  margin-bottom:10px!important;
}

.channel-tools-section-head strong{
  color:var(--theme-text,var(--text-1))!important;
  font-size:8.3px!important;
}

.channel-tools-section-head span,
.channel-field-hint{
  color:var(--theme-text-3,var(--text-3))!important;
  font-size:6.8px!important;
}

.channel-mode-grid{
  gap:6px!important;
}

.channel-mode-option{
  min-height:47px!important;
  padding:7px 9px!important;

  border:1px solid var(--theme-border,var(--line))!important;
  border-radius:8px!important;

  background:var(--theme-surface-2,var(--soft))!important;
}

.ban-list{
  border-color:var(--theme-border,var(--line))!important;
  border-radius:8px!important;
  background:var(--theme-surface,#fff)!important;
}

/* ---------- User/Nick menu ---------- */
.user-card-modal{
  width:min(390px,calc(100vw - 28px))!important;
}

.user-menu-profile{
  min-height:58px!important;
  padding:0 34px 13px 0!important;

  border-bottom:1px solid var(--theme-border,var(--line))!important;
}

.profile-avatar{
  width:39px!important;
  height:39px!important;
  border-radius:9px!important;

  background:var(--theme-accent-soft,var(--soft))!important;
  color:var(--theme-accent,var(--navy))!important;

  border:1px solid var(--theme-border,var(--line))!important;
}

.user-menu-profile-text h3{
  font-size:15px!important;
}

.user-menu-profile-text p,
.user-menu-profile-text span{
  font-size:7px!important;
}

.user-menu-section-title{
  margin:13px 0 5px!important;
  color:var(--theme-text-3,var(--text-3))!important;
  font-size:6.5px!important;
  letter-spacing:.16em!important;
}

.user-menu-actions{
  display:grid!important;
  gap:0!important;

  border-top:1px solid var(--theme-border,var(--line))!important;
}

.user-action{
  min-height:41px!important;
  padding:5px 3px!important;

  display:grid!important;
  grid-template-columns:31px minmax(0,1fr)!important;
  align-items:center!important;
  gap:8px!important;

  border:0!important;
  border-bottom:1px solid var(--theme-border,var(--line))!important;
  border-radius:0!important;

  background:transparent!important;
  color:var(--theme-text,var(--text-1))!important;

  box-shadow:none!important;
}

.user-action:last-child{
  border-bottom:0!important;
}

.user-action:hover{
  background:var(--theme-surface-2,var(--soft))!important;
}

.user-action.primary-action{
  background:var(--theme-accent-soft,var(--soft))!important;
  color:var(--theme-accent,var(--navy))!important;
}

.user-action-icon{
  width:28px!important;
  height:28px!important;

  display:grid!important;
  place-items:center!important;

  border:1px solid var(--theme-border,var(--line))!important;
  border-radius:7px!important;

  background:var(--theme-surface,#fff)!important;
  color:var(--theme-accent,var(--navy))!important;
}

/* ---------- Message actions ---------- */
.message-action-card{
  width:min(380px,calc(100vw - 28px))!important;
}

.message-action-preview{
  margin:11px 0 13px!important;
  padding:10px 2px!important;

  border:0!important;
  border-top:1px solid var(--theme-border,var(--line))!important;
  border-bottom:1px solid var(--theme-border,var(--line))!important;
  border-radius:0!important;

  background:transparent!important;

  color:var(--theme-text-2,var(--text-2))!important;
  font-size:8px!important;
}

.message-action-buttons{
  gap:0!important;
  display:block!important;
  border-top:1px solid var(--theme-border,var(--line))!important;
}

/* ---------- Main application menu ---------- */
.app-main-menu .mobile-menu-card{
  border:1px solid var(--theme-border,var(--line))!important;
  background:var(--theme-surface,#fff)!important;

  box-shadow:
    0 22px 55px
    color-mix(
      in srgb,
      var(--theme-accent,var(--navy)) 11%,
      transparent
    )!important;
}

.mobile-menu-head{
  min-height:50px!important;
  padding-bottom:10px!important;
  border-bottom:1px solid var(--theme-border,var(--line))!important;
}

.mobile-menu-brand .brand-symbol{
  width:26px!important;
}

.mobile-menu-account{
  margin:10px 0 5px!important;
  padding:8px!important;

  border:1px solid var(--theme-border,var(--line))!important;
  border-radius:8px!important;

  background:var(--theme-surface-2,var(--soft))!important;
}

.mobile-menu-actions{
  border-top:1px solid var(--theme-border,var(--line))!important;
}

.mobile-menu-actions > button{
  min-height:48px!important;
  border-bottom:1px solid var(--theme-border,var(--line))!important;
  background:transparent!important;
}

.mobile-menu-actions > button:hover{
  background:var(--theme-surface-2,var(--soft))!important;
}

.menu-action-icon{
  border-color:var(--theme-border,var(--line))!important;
  border-radius:7px!important;
  background:var(--theme-surface,#fff)!important;
  color:var(--theme-accent,var(--navy))!important;
}

.mobile-menu-logout{
  margin-top:10px!important;
  min-height:38px!important;

  border:1px solid
    color-mix(
      in srgb,
      var(--theme-danger,#a6524e) 24%,
      var(--theme-border,var(--line)) 76%
    )!important;

  border-radius:8px!important;
  box-shadow:none!important;
}

/* ---------- Private message sheet ---------- */
.mobile-private-card{
  border:1px solid var(--theme-border,var(--line))!important;
  background:var(--theme-surface,#fff)!important;
  box-shadow:
    0 20px 48px
    color-mix(
      in srgb,
      var(--theme-accent,var(--navy)) 10%,
      transparent
    )!important;
}

.mobile-private-card > header{
  min-height:52px!important;
  border-bottom:1px solid var(--theme-border,var(--line))!important;
}

.mobile-private-card > header strong{
  color:var(--theme-text,var(--text-1))!important;
  font-size:9px!important;
}

.mobile-private-card > header span{
  color:var(--theme-text-3,var(--text-3))!important;
  font-size:6.8px!important;
}

.mobile-private-item{
  min-height:46px!important;
  border-bottom:1px solid var(--theme-border,var(--line))!important;
  border-radius:0!important;
}

/* ---------- Emoji / format / command suggestions ---------- */
.emoji-popover,
.format-popover,
.composer-assist{
  border:1px solid var(--theme-border,var(--line))!important;
  border-radius:10px!important;

  background:var(--theme-surface,#fff)!important;

  box-shadow:
    0 15px 38px
    color-mix(
      in srgb,
      var(--theme-accent,var(--navy)) 10%,
      transparent
    )!important;
}

.emoji-popover button,
.format-actions button{
  border:1px solid var(--theme-border,var(--line))!important;
  border-radius:7px!important;
  background:var(--theme-surface-2,var(--soft))!important;
  box-shadow:none!important;
}

.format-head,
.composer-assist-head{
  border-bottom:1px solid var(--theme-border,var(--line))!important;
}

.composer-assist-item{
  border-bottom:1px solid var(--theme-border,var(--line))!important;
}

/* ---------- Responsive ---------- */
@media(max-width:900px){

  .classic-ui-card{
    width:min(400px,calc(100vw - 22px))!important;
    padding:19px 18px 15px!important;
    border-radius:14px!important;
  }

  .whois-card,
  .channel-tools-card{
    width:min(520px,calc(100vw - 20px))!important;
    max-height:calc(var(--app-height,100vh) - 20px)!important;
    overflow:auto!important;
  }

  .whois-field,
  .whois-wide-field{
    grid-template-columns:105px minmax(0,1fr)!important;
  }

  .channel-mode-grid{
    grid-template-columns:1fr!important;
  }

  .user-card-modal{
    width:min(390px,calc(100vw - 22px))!important;
  }

  /*
   * Message menu remains iPhone friendly bottom sheet,
   * but uses the same classic rows.
   */
  .message-action-modal .message-action-card{
    border-radius:14px 14px 0 0!important;
  }

  .app-main-menu .mobile-menu-card{
    border-radius:0 14px 14px 0!important;
  }

  .mobile-private-card{
    border-radius:14px 14px 0 0!important;
  }
}

@media(max-width:390px){

  .classic-ui-card{
    padding-left:15px!important;
    padding-right:15px!important;
  }

  .whois-field,
  .whois-wide-field{
    grid-template-columns:90px minmax(0,1fr)!important;
    gap:8px!important;
  }
}


/* =====================================================================
   V4.9.5 — RENKLİ NICK LİSTESİ / YETKİ RENKLERİ
   ===================================================================== */

/*
 * Normal kullanıcılar nick adına göre sabit renk alır.
 * Yetkililer ise rol rengine göre görünür:
 * founder ~ / sop & / op @ / halfop % / voice +
 */
.compact-user-item .user-meta strong{
  color:var(--user-nick-color,var(--theme-text))!important;
  font-weight:800!important;
}

.compact-user-item .user-prefix{
  color:var(--user-nick-color,var(--theme-text-2))!important;
  font-weight:900!important;
}

/* Avatar gets a subtle tint from the same nick/role color. */
.compact-user-item .user-avatar{
  color:var(--user-nick-color,var(--theme-accent))!important;
  border:1px solid
    color-mix(
      in srgb,
      var(--user-nick-color,var(--theme-accent)) 18%,
      var(--theme-border,var(--line)) 82%
    )!important;

  background:
    color-mix(
      in srgb,
      var(--user-nick-color,var(--theme-accent)) 9%,
      var(--theme-surface-2,var(--soft)) 91%
    )!important;
}

/* Role-specific emphasis: classic, not flashy. */
.compact-user-item[data-role="founder"] .user-meta strong,
.compact-user-item[data-role="sop"] .user-meta strong,
.compact-user-item[data-role="op"] .user-meta strong,
.compact-user-item[data-role="halfop"] .user-meta strong,
.compact-user-item[data-role="voice"] .user-meta strong{
  font-weight:900!important;
}

/* Small role marker on the row edge. */
.compact-user-item[data-role="founder"],
.compact-user-item[data-role="sop"],
.compact-user-item[data-role="op"],
.compact-user-item[data-role="halfop"],
.compact-user-item[data-role="voice"]{
  position:relative;
}

.compact-user-item[data-role="founder"]::before,
.compact-user-item[data-role="sop"]::before,
.compact-user-item[data-role="op"]::before,
.compact-user-item[data-role="halfop"]::before,
.compact-user-item[data-role="voice"]::before{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:2px;
  border-radius:2px;
  background:var(--user-nick-color);
  opacity:.78;
}

/* Hover keeps the user's own color readable. */
.compact-user-item:hover .user-meta strong,
.compact-user-item:hover .user-prefix{
  color:var(--user-nick-color,var(--theme-accent))!important;
}

/* Away/ignore still work, but color identity remains visible. */
.compact-user-item.is-away .user-meta strong{
  color:var(--user-nick-color,var(--theme-text-2))!important;
}

.compact-user-item.is-ignored .user-meta strong{
  color:var(--user-nick-color,var(--theme-text-3))!important;
}

/* Mobile: same scheme, slightly stronger readability. */
@media(max-width:900px){
  .compact-user-item .user-meta strong{
    font-weight:850!important;
  }

  .compact-user-item[data-role="founder"]::before,
  .compact-user-item[data-role="sop"]::before,
  .compact-user-item[data-role="op"]::before,
  .compact-user-item[data-role="halfop"]::before,
  .compact-user-item[data-role="voice"]::before{
    top:7px;
    bottom:7px;
  }
}


/* =====================================================================
   V4.9.6 — MOBİL ÖZEL KONUŞMA TAM GENİŞLİK
   Özel mesajda kanal nick listesi gösterilmez.
   ===================================================================== */

@media (max-width:900px){

  .chat-screen.private-active .workspace.all-right-workspace{
    grid-template-columns:minmax(0,1fr) 0!important;
  }

  .chat-screen.private-active .all-right-sidebar{
    display:none!important;
    visibility:hidden!important;
    pointer-events:none!important;
    width:0!important;
    min-width:0!important;
    border:0!important;
  }

  .chat-screen.private-active .mobile-users-collapse{
    display:none!important;
  }

  .chat-screen.private-active .chat-main{
    width:100%!important;
    max-width:none!important;
    border-right:0!important;
  }

  .chat-screen.private-active .messages{
    width:100%!important;
    max-width:none!important;
  }

  /*
   * V4.8 new-message button was offset to clear the nick list.
   * In private chat there is no nick list, so return it to screen edge.
   */
  .chat-screen.private-active .new-message-jump{
    right:max(12px,env(safe-area-inset-right))!important;
  }
}


/* =====================================================================
   V4.9.7 — NORMAL KULLANICI SİYAH / YETKİLİLER RENKLİ
   ===================================================================== */

/* Normal kullanıcı */
.compact-user-item[data-role="normal"]{
  --user-nick-color:var(--theme-text,#20242a)!important;
}

.compact-user-item[data-role="normal"] .user-meta strong{
  color:var(--theme-text,#20242a)!important;
  font-weight:750!important;
}

.compact-user-item[data-role="normal"] .user-prefix{
  color:var(--theme-text-3,#8b9199)!important;
}

.compact-user-item[data-role="normal"] .user-avatar{
  color:var(--theme-text-2,#5f6b79)!important;
  border-color:var(--theme-border,var(--line))!important;
  background:var(--theme-surface-2,var(--soft))!important;
}

/* Yetkililer eski rol renklerini korur */
.compact-user-item:not([data-role="normal"]) .user-meta strong,
.compact-user-item:not([data-role="normal"]) .user-prefix{
  color:var(--user-nick-color)!important;
}


/* =====================================================================
   V5.0 STABLE — KANAL KONUSU + UNREAD SAYAÇLARI
   ===================================================================== */

.channel-topic{
  position:relative;
  min-width:0;
  cursor:default;
}

.channel-topic.is-clickable{
  cursor:pointer;
  transition:color .16s ease,opacity .16s ease;
}

.channel-topic.is-clickable:hover{
  color:var(--theme-accent,var(--navy))!important;
}

.channel-topic.is-clickable:focus-visible{
  outline:1px solid
    color-mix(
      in srgb,
      var(--theme-accent,var(--navy)) 45%,
      transparent
    );
  outline-offset:3px;
  border-radius:3px;
}

.topic-view-card{
  width:min(520px,calc(100vw - 28px))!important;
}

.topic-view-content{
  min-height:72px;
  max-height:min(280px,40vh);
  margin:14px 0 12px;
  padding:13px 3px;

  border-top:1px solid var(--theme-border,var(--line));
  border-bottom:1px solid var(--theme-border,var(--line));

  color:var(--theme-text,var(--text-1));
  font-size:9px;
  line-height:1.65;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  overflow:auto;
}

.topic-view-actions{
  display:flex;
  justify-content:flex-end;
}

.topic-view-actions .secondary-btn{
  min-width:116px;
}

/* Existing unread badges now consistently display the actual total. */
.channel-unread.unread-counter,
.mobile-room-badge{
  min-width:18px!important;
  height:18px!important;
  padding:0 5px!important;

  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;

  border:1px solid
    color-mix(
      in srgb,
      var(--theme-accent,var(--navy)) 20%,
      var(--theme-border,var(--line)) 80%
    )!important;

  border-radius:999px!important;
  background:var(--theme-accent-soft,var(--soft))!important;
  color:var(--theme-accent,var(--navy))!important;

  font-size:6.8px!important;
  font-weight:900!important;
  line-height:1!important;
}

.channel-unread.mention-counter,
.mobile-room-badge.mention{
  border-color:
    color-mix(
      in srgb,
      var(--theme-accent-2,var(--gold)) 58%,
      var(--theme-border,var(--line)) 42%
    )!important;

  background:var(--theme-accent-2-soft,#fbf2d8)!important;
  color:
    color-mix(
      in srgb,
      var(--theme-accent-2,var(--gold)) 72%,
      #5d4a12 28%
    )!important;
}

@media(max-width:900px){
  .topic-view-card{
    width:min(500px,calc(100vw - 22px))!important;
  }

  .topic-view-content{
    max-height:34vh;
    font-size:8.2px;
  }

  .mobile-room-badge{
    min-width:17px!important;
    height:17px!important;
    padding:0 4px!important;
    font-size:6.4px!important;
  }
}


/* =====================================================================
   V5.0.1 — HARABE.ORG DYNAMIC SVG BRAND SYSTEM
   PNG yok: logo tema renklerini doğrudan CSS değişkenlerinden alır.
   ===================================================================== */

.harabe-logo,
.harabe-logo-mark-wrap{
  --logo-main:var(--theme-accent,var(--navy,#263a67));
  --logo-accent:var(--theme-accent-2,var(--gold,#d7a929));
  --logo-soft:
    color-mix(
      in srgb,
      var(--logo-accent) 26%,
      transparent
    );
}

.harabe-logo{
  display:flex;
  align-items:center;
  min-width:0;
  color:var(--logo-main);
}

.harabe-logo-mark{
  display:block;
  width:38px;
  height:38px;
  flex:0 0 38px;
  overflow:visible;
}

.harabe-logo-bar{
  transform-box:fill-box;
  transform-origin:center bottom;
}

.harabe-logo-bar-a,
.harabe-logo-bar-c{
  fill:var(--logo-main);
}

.harabe-logo-bar-b{
  fill:var(--logo-accent);
}

.harabe-logo-orbit{
  transform-box:view-box;
  transform-origin:27px 29px;
  opacity:.56;
  pointer-events:none;
  animation:harabeLogoOrbit 9s linear infinite;
}

.harabe-logo-orbit ellipse{
  fill:none;
  stroke:var(--logo-accent);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-dasharray:9 7;
  transform:rotate(-17deg);
  transform-origin:27px 29px;
}

.harabe-logo-orbit circle{
  fill:var(--logo-accent);
  filter:drop-shadow(0 0 2px var(--logo-soft));
}

.harabe-logo-bar-a{
  animation:harabeLogoBarA 4.1s ease-in-out infinite;
}

.harabe-logo-bar-b{
  animation:harabeLogoBarB 4.6s ease-in-out infinite;
}

.harabe-logo-bar-c{
  animation:harabeLogoBarC 3.8s ease-in-out infinite;
}

.harabe-wordmark{
  min-width:0;
  display:flex;
  align-items:center;
}

.harabe-wordmark strong{
  display:block!important;
  margin:0!important;
  color:var(--logo-main)!important;

  font-family:Manrope,Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:18px!important;
  font-weight:850!important;
  line-height:1!important;
  letter-spacing:-.035em!important;

  white-space:nowrap;
}

.harabe-wordmark .harabe-org{
  margin-left:1px;
  color:var(--logo-accent);
  font-size:.59em;
  font-weight:900;
  letter-spacing:.015em;
  vertical-align:.17em;
}

/* Header identity */
.harabe-header-logo{
  gap:8px!important;
}

.harabe-header-logo .harabe-logo-mark{
  width:34px;
  height:34px;
  flex-basis:34px;
}

/* Login identity: larger, no duplicate HARABE.ORG kicker. */
.harabe-login-logo{
  width:max-content;
  max-width:100%;
  margin:0 0 22px;
  gap:11px;
}

.harabe-login-logo .harabe-logo-mark{
  width:50px;
  height:50px;
  flex-basis:50px;
}

.harabe-login-logo .harabe-wordmark strong{
  font-size:25px!important;
}

.harabe-login-logo .harabe-wordmark .harabe-org{
  font-size:.55em;
}

/* Mobile/menu identity */
.harabe-menu-logo{
  gap:8px!important;
}

.harabe-menu-logo .harabe-logo-mark{
  width:31px;
  height:31px;
  flex-basis:31px;
}

.harabe-menu-logo .harabe-wordmark strong{
  font-size:15px!important;
}

/* About icon uses the exact same SVG language. */
.about-brand-symbol.harabe-logo-mark-wrap{
  width:36px!important;
  height:40px!important;
  margin:0!important;
  display:grid!important;
  place-items:center!important;
}

.about-brand-symbol.harabe-logo-mark-wrap .harabe-logo-mark{
  width:35px;
  height:35px;
}

/* Remove old visual assumptions where legacy .brand children existed. */
.harabe-header-logo > .harabe-wordmark,
.harabe-menu-logo > .harabe-wordmark{
  display:flex!important;
}

.harabe-header-logo small,
.harabe-menu-logo small{
  display:none!important;
}

/* Subtle premium motion — designed not to compete with chat content. */
@keyframes harabeLogoOrbit{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

@keyframes harabeLogoBarA{
  0%,100%{transform:scaleY(.94)}
  50%{transform:scaleY(1.04)}
}

@keyframes harabeLogoBarB{
  0%,100%{transform:scaleY(1)}
  50%{transform:scaleY(.95)}
}

@keyframes harabeLogoBarC{
  0%,100%{transform:scaleY(.97)}
  50%{transform:scaleY(1.045)}
}

.brand.harabe-logo:hover .harabe-logo-orbit{
  animation-duration:5.5s;
  opacity:.82;
}

/* Explicit theme mapping. */
:root[data-theme="classic"] .harabe-logo,
:root[data-theme="classic"] .harabe-logo-mark-wrap{
  --logo-main:var(--theme-accent,#17335f);
  --logo-accent:var(--theme-accent-2,#d49b14);
}

:root[data-theme="blue"] .harabe-logo,
:root[data-theme="blue"] .harabe-logo-mark-wrap{
  --logo-main:var(--theme-accent,#24577e);
  --logo-accent:var(--theme-accent-2,#4f95c7);
}

:root[data-theme="burgundy"] .harabe-logo,
:root[data-theme="burgundy"] .harabe-logo-mark-wrap{
  --logo-main:var(--theme-accent,#6d2638);
  --logo-accent:var(--theme-accent-2,#b78151);
}

:root[data-theme="petrol"] .harabe-logo,
:root[data-theme="petrol"] .harabe-logo-mark-wrap{
  --logo-main:var(--theme-accent,#225d5c);
  --logo-accent:var(--theme-accent-2,#a48b4e);
}

/* Keep header compact at medium widths. */
@media(min-width:901px) and (max-width:1120px){
  .harabe-header-logo{
    gap:6px!important;
  }

  .harabe-header-logo .harabe-logo-mark{
    width:30px;
    height:30px;
    flex-basis:30px;
  }

  .harabe-header-logo .harabe-wordmark strong{
    font-size:16px!important;
  }
}

/* Mobile */
@media(max-width:900px){
  .topbar .harabe-header-logo{
    gap:5px!important;
  }

  .topbar .harabe-header-logo > .harabe-wordmark{
    display:flex!important;
  }

  .harabe-header-logo .harabe-logo-mark{
    width:27px;
    height:27px;
    flex-basis:27px;
  }

  .topbar .harabe-header-logo .harabe-wordmark strong{
    display:block!important;
    font-size:14px!important;
  }

  .topbar .harabe-header-logo .harabe-org{
    font-size:.56em;
  }

  .harabe-menu-logo .harabe-logo-mark{
    width:29px;
    height:29px;
    flex-basis:29px;
  }

  .harabe-login-logo{
    margin-bottom:18px;
  }

  .harabe-login-logo .harabe-logo-mark{
    width:44px;
    height:44px;
    flex-basis:44px;
  }

  .harabe-login-logo .harabe-wordmark strong{
    font-size:22px!important;
  }
}

@media(max-width:390px){
  .harabe-header-logo .harabe-logo-mark{
    width:24px;
    height:24px;
    flex-basis:24px;
  }

  .topbar .harabe-header-logo .harabe-wordmark strong{
    font-size:12.5px!important;
  }
}

/* Accessibility: respect users who prefer less animation. */
@media(prefers-reduced-motion:reduce){
  .harabe-logo-orbit,
  .harabe-logo-bar-a,
  .harabe-logo-bar-b,
  .harabe-logo-bar-c{
    animation:none!important;
  }
}