/* =========================================================
   CRIMORA CITY COMMUNICATIONS V2
   Docked, non-overlapping, Torn-inspired chat architecture.
   All selectors are namespaced to avoid affecting game pages.
========================================================= */

:root{
    /* Aliased to the shared design tokens so the comms dock matches the rest
       of the site's palette instead of running its own slightly-different
       neutral scheme. */
    --echo-chat-bg:var(--ec-bg);
    --echo-chat-panel:var(--ec-panel);
    --echo-chat-panel-2:var(--ec-panel-2);
    --echo-chat-panel-3:var(--ec-panel-3);
    --echo-chat-border:var(--ec-line-strong);
    --echo-chat-border-soft:var(--ec-line);
    --echo-chat-text:var(--ec-text);
    --echo-chat-muted:var(--ec-muted);
    --echo-chat-gold:var(--ec-gold);
    --echo-chat-gold-bright:var(--ec-gold-bright);
    --echo-chat-red:var(--ec-red);
    --echo-chat-red-bright:var(--ec-red);
    --echo-chat-violet:var(--ec-purple);
    --echo-chat-violet-bright:var(--ec-purple);
    --echo-chat-blue:var(--ec-blue);
    --echo-chat-blue-bright:var(--ec-blue);
    --echo-chat-green:var(--ec-green);
    --echo-chat-danger:var(--ec-red);
    --echo-chat-shadow:0 18px 46px rgba(0,0,0,.5),0 4px 14px rgba(0,0,0,.4);
    --echo-chat-radius:10px;
    --echo-chat-dock-height:48px;
}

/* Old copied markup is intentionally suppressed during the migration. */
body > #chatBubble,
body > #chatWindow,
body > #openChatContainer,
body > #miniChatContainer{
    display:none !important;
}

.echo-chat-root,
.echo-chat-root *{
    box-sizing:border-box;
}

.echo-chat-root button,
.echo-chat-root input,
.echo-chat-root textarea,
.echo-chat-root select{
    font:inherit;
}

.echo-chat-workspace{
    position:fixed;
    inset:0;
    z-index:285000;
    pointer-events:none;
}

/* =========================================================
   BOTTOM COMMUNICATIONS DOCK
========================================================= */

.echo-chat-dock{
    position:fixed;
    right:16px;
    bottom:12px;
    z-index:300000;
    min-height:var(--echo-chat-dock-height);
    max-width:calc(100vw - 32px);
    display:flex;
    align-items:stretch;
    gap:0;
    color:var(--echo-chat-text);
    background:linear-gradient(180deg, var(--echo-chat-panel-2), var(--echo-chat-bg));
    border:1px solid var(--echo-chat-border);
    border-radius:var(--echo-chat-radius);
    box-shadow:var(--echo-chat-shadow),inset 0 1px rgba(255,255,255,.04);
    overflow:hidden;
}

.echo-chat-dock-brand{
    width:52px;
    flex:0 0 52px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    border-right:1px solid var(--echo-chat-border);
    background:linear-gradient(145deg, var(--ec-panel-3), var(--ec-bg-raised));
    color:var(--echo-chat-gold-bright);
    user-select:none;
}

.echo-chat-dock-brand span{
    font-family:var(--ec-font-display,inherit);
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    line-height:1;
}

.echo-chat-dock-brand small{
    margin-top:3px;
    font-family:var(--ec-font-mono,inherit);
    color:var(--echo-chat-muted);
    font-size:7px;
    font-weight:700;
    letter-spacing:1.2px;
}

.echo-chat-dock-channels{
    display:flex;
    align-items:stretch;
    min-width:0;
}

.echo-chat-dock-button{
    position:relative;
    min-width:84px;
    min-height:var(--echo-chat-dock-height);
    padding:0 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    border:0;
    border-right:1px solid var(--echo-chat-border-soft);
    color:var(--echo-chat-muted);
    background:transparent;
    cursor:pointer;
    transition:background .14s ease,color .14s ease;
}

.echo-chat-dock-button::before{
    content:"";
    position:absolute;
    left:10px;
    right:10px;
    bottom:0;
    height:2px;
    border-radius:2px 2px 0 0;
    background:var(--echo-chat-gold);
    opacity:0;
    transform:scaleX(.6);
    transition:.16s ease;
}

.echo-chat-dock-button:hover,
.echo-chat-dock-button.is-minimised{
    color:#fff;
    background:rgba(255,255,255,.045);
}

.echo-chat-dock-button.is-active{
    color:#fff;
    background:rgba(255,255,255,.07);
}

.echo-chat-dock-button.is-active::before,
.echo-chat-dock-button.is-minimised::before{
    opacity:1;
    transform:scaleX(1);
}

.echo-chat-dock-button.accent-red::before{background:var(--echo-chat-red-bright)}
.echo-chat-dock-button.accent-violet::before{background:var(--echo-chat-violet-bright)}
.echo-chat-dock-button.accent-blue::before{background:var(--echo-chat-blue-bright)}

.echo-chat-dock-button.is-locked{
    opacity:.43;
    cursor:not-allowed;
}

.echo-chat-dock-icon{
    width:18px;
    color:var(--echo-chat-gold-bright);
    font-size:12px;
    text-align:center;
}

.accent-red .echo-chat-dock-icon{color:var(--echo-chat-red-bright)}
.accent-violet .echo-chat-dock-icon{color:var(--echo-chat-violet-bright)}
.accent-blue .echo-chat-dock-icon{color:var(--echo-chat-blue-bright)}

.echo-chat-dock-label{
    font-family:var(--ec-font-display,inherit);
    font-size:11px;
    font-weight:600;
    letter-spacing:.03em;
    text-transform:uppercase;
    white-space:nowrap;
}

.echo-chat-dock-badge,
.echo-chat-player-unread{
    min-width:18px;
    height:18px;
    padding:0 5px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:var(--echo-chat-danger);
    color:#fff;
    font-family:var(--ec-font-mono,inherit);
    font-size:9px;
    font-weight:700;
    box-shadow:0 0 0 2px var(--echo-chat-panel);
}

.echo-chat-dock-divider{
    width:1px;
    margin:8px 0;
    flex:0 0 1px;
    background:#44464b;
}

.echo-chat-player-tabs{
    min-width:0;
    max-width:min(560px,42vw);
    display:flex;
    align-items:stretch;
    overflow-x:auto;
    scrollbar-width:none;
}

.echo-chat-player-tabs::-webkit-scrollbar{display:none}

.echo-chat-player-tab{
    position:relative;
    min-width:138px;
    max-width:180px;
    height:50px;
    padding:0 8px 0 10px;
    display:flex;
    align-items:center;
    gap:8px;
    border:0;
    border-right:1px solid var(--echo-chat-border-soft);
    color:#d9dbe0;
    background:transparent;
    cursor:pointer;
    transition:.16s ease;
}

.echo-chat-player-tab:hover,
.echo-chat-player-tab.is-active{
    background:rgba(82,122,168,.14);
    color:#fff;
}

.echo-chat-player-avatar-wrap{
    position:relative;
    width:28px;
    height:28px;
    flex:0 0 28px;
}

.echo-chat-player-avatar-wrap img{
    width:28px;
    height:28px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid #555a63;
}

.echo-chat-player-avatar-wrap i,
.echo-conversation-avatar i{
    position:absolute;
    right:-1px;
    bottom:-1px;
    width:8px;
    height:8px;
    border-radius:50%;
    border:2px solid #1a1c20;
    background:#5c6068;
}

.echo-chat-player-avatar-wrap i.is-online,
.echo-conversation-avatar i.is-online{
    background:var(--echo-chat-green);
}

.echo-chat-player-name{
    min-width:0;
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:11px;
    font-weight:800;
}

.echo-chat-player-tab-close{
    width:18px;
    height:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:5px;
    color:#777c85;
    font-size:15px;
    line-height:1;
}

.echo-chat-player-tab-close:hover{
    color:#fff;
    background:rgba(198,83,83,.55);
}

/* =========================================================
   NON-OVERLAPPING CHAT WINDOWS
========================================================= */

.echo-chat-window{
    position:fixed;
    /* Default docked corner before JS applies its precise per-window offset in
       layoutWindows() -- restoreWindows() (chatLoader.js) awaits opening every
       previously-open window before it calls layoutWindows() once at the end,
       so without this default a restored window renders unpositioned (falls
       into normal document flow, roughly mid-page) for that whole stretch,
       not just one frame. 70px mirrors chatWindow.js's own dockHeight-based
       fallback (52 + 18) so the common single-window case shows no jump at all. */
    bottom:70px;
    right:16px;
    width:382px;
    height:540px;
    display:flex;
    flex-direction:column;
    pointer-events:auto;
    overflow:hidden;
    color:var(--echo-chat-text);
    background:linear-gradient(180deg,#1b1d20 0,#111214 100%);
    border:1px solid #3d4046;
    border-radius:var(--echo-chat-radius);
    box-shadow:var(--echo-chat-shadow);
    transition:right .18s ease,bottom .18s ease,box-shadow .18s ease;
}

.echo-chat-window.is-focused{
    border-color:#555961;
    box-shadow:0 25px 70px rgba(0,0,0,.64),0 0 0 1px rgba(215,180,90,.08);
}

.echo-chat-window::before{
    content:"";
    position:absolute;
    z-index:2;
    left:0;
    right:0;
    top:0;
    height:2px;
    background:var(--echo-chat-gold);
}

.echo-chat-window.accent-red::before{background:var(--echo-chat-red-bright)}
.echo-chat-window.accent-violet::before{background:var(--echo-chat-violet-bright)}
.echo-chat-window.accent-blue::before{background:var(--echo-chat-blue-bright)}

.echo-chat-window-header{
    min-height:58px;
    padding:9px 9px 8px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    flex:0 0 auto;
    border-bottom:1px solid #33363b;
    background:linear-gradient(180deg,#25272b,#1c1e21);
}

.echo-chat-window-identity{
    min-width:0;
    display:flex;
    align-items:center;
    gap:10px;
}

.echo-chat-window-channel-icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 34px;
    border-radius:9px;
    color:var(--echo-chat-gold-bright);
    background:#171817;
    border:1px solid #444139;
    font-size:13px;
}

.accent-red .echo-chat-window-channel-icon{color:var(--echo-chat-red-bright);border-color:#563638}
.accent-violet .echo-chat-window-channel-icon{color:var(--echo-chat-violet-bright);border-color:#49405b}
.accent-blue .echo-chat-window-channel-icon{color:var(--echo-chat-blue-bright);border-color:#35495f}

.echo-chat-window-avatar-link{
    width:36px;
    height:36px;
    flex:0 0 36px;
}

.echo-chat-window-avatar-link img{
    width:36px;
    height:36px;
    border-radius:8px;
    object-fit:cover;
    border:1px solid #5c6067;
}

.echo-chat-window-heading{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.echo-chat-window-title{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#f2f0e9;
    font-size:13px;
    font-weight:900;
    letter-spacing:.2px;
    text-decoration:none;
}

.echo-chat-window-title[href]:hover{color:var(--echo-chat-gold-bright)}

.echo-chat-window-subtitle{
    margin-top:3px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#8e929b;
    font-size:9px;
    font-weight:700;
    letter-spacing:.25px;
}

.echo-chat-window-controls{
    display:flex;
    align-items:center;
    gap:5px;
}

.echo-chat-icon-button{
    width:28px;
    height:28px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #3e4147;
    border-radius:7px;
    color:#aeb1b7;
    background:#17191c;
    cursor:pointer;
}

.echo-chat-icon-button:hover{
    color:#fff;
    background:#2a2d31;
    border-color:#5c6068;
}

.echo-chat-icon-button.is-close:hover{
    background:#6f3032;
    border-color:#9e484b;
}

.echo-chat-window-body{
    min-height:0;
    flex:1;
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

/* =========================================================
   CHANNEL WINDOWS
========================================================= */

.echo-channel-layout,
.echo-private-layout,
.echo-inbox-layout{
    min-height:0;
    height:100%;
    display:flex;
    flex-direction:column;
}

.echo-channel-toolbar{
    min-height:38px;
    padding:6px 9px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex:0 0 auto;
    border-bottom:1px solid #2e3035;
    background:#16181a;
}

.echo-channel-toolbar > span{
    color:#858a93;
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.echo-channel-toolbar > span[data-status-type="online"]::before{
    content:"";
    width:6px;
    height:6px;
    margin-right:6px;
    display:inline-block;
    border-radius:50%;
    background:var(--echo-chat-green);
    box-shadow:0 0 8px rgba(83,166,108,.5);
}

.echo-channel-toolbar > div{display:flex;gap:5px}

.echo-channel-tool{
    height:26px;
    padding:0 8px;
    border:1px solid #3a3d42;
    border-radius:6px;
    color:#aeb1b7;
    background:#202226;
    font-size:9px;
    font-weight:800;
    cursor:pointer;
}

.echo-channel-tool:hover{color:#fff;border-color:#656a74}
.echo-channel-tool.is-market{color:#f0b2b2;border-color:#663d3f;background:#2a1d1e}

.echo-pinned-message{
    flex:0 0 auto;
    border-bottom:1px solid #3b382d;
    background:linear-gradient(90deg,rgba(215,180,90,.11),rgba(215,180,90,.025));
}

.echo-pinned-message.is-hidden,
.echo-reply-banner.is-hidden{display:none}

.echo-pinned-message button{
    width:100%;
    padding:8px 10px;
    display:flex;
    gap:9px;
    border:0;
    color:var(--echo-chat-text);
    background:transparent;
    text-align:left;
    cursor:pointer;
}

.echo-pinned-message button > span{color:var(--echo-chat-gold-bright)}
.echo-pinned-message div{min-width:0}
.echo-pinned-message small{display:block;color:#8d836a;font-size:8px;text-transform:uppercase}
.echo-pinned-message strong{font-size:10px}
.echo-pinned-message p{margin:2px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b9b7ae;font-size:9px}

.echo-channel-messages,
.echo-private-messages{
    min-height:0;
    flex:1;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#4b4e54 #151618;
}

.echo-channel-messages{padding:8px 7px 12px}
.echo-private-messages{padding:10px 9px}

.echo-channel-message{
    position:relative;
    display:grid;
    grid-template-columns:34px minmax(0,1fr);
    gap:8px;
    padding:7px 6px;
    border-radius:8px;
    transition:background .12s ease;
}

.echo-channel-message:hover{background:rgba(255,255,255,.035)}
.echo-channel-message.is-mine{background:rgba(215,180,90,.035)}
.echo-channel-message.is-deleted{opacity:.55}

.echo-message-avatar{
    width:32px;
    height:32px;
    display:block;
}

.echo-message-avatar img{
    width:32px;
    height:32px;
    border-radius:7px;
    object-fit:cover;
    border:1px solid #444850;
}

.echo-message-main{min-width:0}

.echo-message-main > header{
    min-height:18px;
    display:flex;
    align-items:baseline;
    gap:6px;
    flex-wrap:wrap;
}

.echo-message-main > header a{
    color:#e4d19c;
    font-size:11px;
    font-weight:900;
    text-decoration:none;
}

.echo-message-main > header a:hover{text-decoration:underline}
.echo-message-main > header .echo-message-author.is-administrator{color:#ff545f;text-shadow:0 0 12px rgba(255,48,64,.18)}
.echo-message-main > header .echo-message-author.is-staff{color:#55d98d;text-shadow:0 0 12px rgba(85,217,141,.18)}
.echo-message-main > header .echo-message-author.is-moderator{color:#56adff;text-shadow:0 0 12px rgba(86,173,255,.18)}
.echo-role-badge{
    padding:1px 5px;
    border-radius:4px;
    color:#aaaeb7;
    background:#292c31;
    font-size:7px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.echo-role-badge.is-admin{color:#f2d681;background:#42391e}

.echo-message-text{
    margin-top:2px;
    color:#d3d5d9;
    font-size:11px;
    line-height:1.42;
    overflow-wrap:anywhere;
    white-space:pre-wrap;
}

.echo-message-text a{color:#8fb5df;text-decoration:none}
.echo-message-text a:hover{text-decoration:underline}
.echo-message-text em{color:#777b83}

.echo-message-reply-preview{
    width:100%;
    margin:3px 0 4px;
    padding:5px 7px;
    display:block;
    border:0;
    border-left:2px solid #666b74;
    color:#92969e;
    background:#181a1d;
    text-align:left;
    font-size:8px;
    cursor:pointer;
}

.echo-message-time{
    display:block;
    margin-top:3px;
    text-align:right;
    color:#6f737b;
    font-size:8px;
}

.echo-message-icon-row{
    position:absolute;
    top:5px;
    right:5px;
    display:flex;
    gap:4px;
    opacity:0;
    transition:.12s ease;
}

.echo-channel-message:hover .echo-message-icon-row,
.echo-channel-message:focus-within .echo-message-icon-row{opacity:1}

.echo-message-reply-icon,
.echo-message-delete-icon{
    width:15px;
    height:15px;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(255,255,255,.09);
    border-radius:5px;
    color:#9297a0;
    background:rgba(255,255,255,.07);
    font-size:8px;
    cursor:pointer;
}

.echo-message-reply-icon:hover{color:#e8e9ec;background:#2a2d32}
.echo-message-delete-icon:hover{color:#ffb4b8;background:rgba(240,109,114,.16);border-color:rgba(240,109,114,.3)}

.echo-reply-banner{
    min-height:42px;
    padding:7px 9px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex:0 0 auto;
    border-top:1px solid #33363b;
    background:#1b1d21;
}

.echo-reply-banner div{min-width:0}
.echo-reply-banner small{display:block;color:#8f939b;font-size:8px}
.echo-reply-banner strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.echo-reply-banner button{border:0;color:#8e929a;background:transparent;cursor:pointer}

.echo-channel-composer,
.echo-private-composer{
    padding:8px;
    display:flex;
    align-items:flex-end;
    gap:7px;
    flex:0 0 auto;
    border-top:1px solid #303339;
    background:#151719;
}

.echo-channel-composer{display:block}

.echo-channel-composer textarea,
.echo-private-composer textarea{
    width:100%;
    min-height:38px;
    max-height:120px;
    padding:9px 10px;
    resize:none;
    outline:none;
    border:1px solid #3b3e44;
    border-radius:8px;
    color:#eee;
    background:#212328;
    font-size:11px;
    line-height:1.35;
}

.echo-channel-composer textarea:focus,
.echo-private-composer textarea:focus{
    border-color:#756a4b;
    box-shadow:0 0 0 2px rgba(215,180,90,.08);
}

.echo-composer-footer{
    margin-top:6px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.echo-composer-footer span{color:#72767e;font-size:8px}

.echo-composer-footer button,
.echo-private-composer > button{
    min-width:62px;
    height:30px;
    padding:0 12px;
    border:1px solid #78683e;
    border-radius:7px;
    color:#181611;
    background:linear-gradient(180deg,var(--echo-chat-gold-bright),#c39e46);
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}

.echo-composer-footer button:hover,
.echo-private-composer > button:hover{filter:brightness(1.08)}
.echo-composer-footer button:disabled,
.echo-private-composer > button:disabled{opacity:.5;cursor:not-allowed}

/* =========================================================
   PRIVATE INBOX
========================================================= */

.echo-private-search{
    position:relative;
    padding:9px;
    display:flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    border-bottom:1px solid #303339;
    background:#16181a;
}

.echo-private-search > span{color:#777c84;font-size:12px}

.echo-private-search input{
    min-width:0;
    flex:1;
    height:34px;
    padding:0 10px;
    outline:none;
    border:1px solid #3a3d43;
    border-radius:7px;
    color:#eee;
    background:#222429;
    font-size:10px;
}

.echo-private-search button{
    width:32px;
    height:32px;
    border:1px solid #3d4046;
    border-radius:7px;
    color:#aeb2b9;
    background:#222429;
    cursor:pointer;
}

.echo-player-search-results{
    display:none;
    max-height:210px;
    overflow-y:auto;
    flex:0 0 auto;
    border-bottom:1px solid #35383e;
    background:#1b1d20;
}

.echo-player-search-results.is-open{display:block}
.echo-player-search-results button{
    width:100%;
    padding:7px 10px;
    display:flex;
    align-items:center;
    gap:8px;
    border:0;
    border-bottom:1px solid #292c31;
    color:#eee;
    background:transparent;
    text-align:left;
    cursor:pointer;
}
.echo-player-search-results button:hover{background:#26292e}
.echo-player-search-results button > span:last-child{min-width:0;display:flex;flex-direction:column}
.echo-player-search-results strong{font-size:10px}
.echo-player-search-results small{color:#868b94;font-size:8px}
.echo-search-empty{padding:16px;color:#81858e;text-align:center;font-size:10px}

.echo-inbox-heading{
    min-height:35px;
    padding:0 11px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:0 0 auto;
    border-bottom:1px solid #2d3035;
    color:#9ca0a8;
    background:#181a1d;
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.7px;
}

.echo-inbox-heading span{
    min-width:22px;
    padding:2px 6px;
    border-radius:8px;
    color:#c4c7cd;
    background:#2a2d32;
    text-align:center;
}

.echo-conversation-list{
    min-height:0;
    flex:1;
    overflow-y:auto;
}

.echo-conversation-item{
    position:relative;
    border-bottom:1px solid #292c31;
}

.echo-conversation-open{
    width:100%;
    min-height:65px;
    padding:8px 35px 8px 10px;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto;
    align-items:center;
    gap:9px;
    border:0;
    color:#eceef0;
    background:transparent;
    text-align:left;
    cursor:pointer;
}

.echo-conversation-open:hover{background:#22252a}

.echo-conversation-avatar{
    position:relative;
    width:38px;
    height:38px;
}

.echo-conversation-avatar img{
    width:38px;
    height:38px;
    border-radius:8px;
    object-fit:cover;
    border:1px solid #454950;
}

.echo-conversation-copy{min-width:0;display:flex;flex-direction:column;gap:3px}
.echo-conversation-copy strong{font-size:10px}
.echo-conversation-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#8d9199;font-size:9px}
.echo-conversation-meta{display:flex;flex-direction:column;align-items:flex-end;gap:5px}
.echo-conversation-meta time{color:#6f737b;font-size:7px}
.echo-conversation-meta em{min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center;border-radius:9px;color:#fff;background:#a23b3e;font-size:8px;font-style:normal;font-weight:900}

.echo-conversation-hide{
    position:absolute;
    right:8px;
    top:22px;
    width:22px;
    height:22px;
    border:0;
    border-radius:5px;
    color:#696e77;
    background:transparent;
    cursor:pointer;
}
.echo-conversation-hide:hover{color:#fff;background:#663235}

/* =========================================================
   PRIVATE PLAYER CHAT
========================================================= */

.echo-private-toolbar{
    min-height:46px;
    padding:6px 9px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    flex:0 0 auto;
    border-bottom:1px solid #303339;
    background:#16181a;
}

.echo-private-profile-link{
    min-width:0;
    display:flex;
    align-items:center;
    color:#eee;
    text-decoration:none;
}

.echo-chat-dock-badge[hidden],
.echo-chat-player-unread[hidden]{
    display:none !important;
}

.echo-private-profile-link span{min-width:0;display:flex;flex-direction:column}
.echo-private-profile-link strong{font-size:10px}
.echo-private-profile-link small{margin-top:2px;color:#7f848d;font-size:8px}

.echo-private-toolbar > button{
    width:30px;
    height:30px;
    border:1px solid #3e4147;
    border-radius:7px;
    color:#a6abb3;
    background:#222429;
    cursor:pointer;
}

.echo-private-message{
    max-width:80%;
    margin-bottom:7px;
    padding:7px 9px 5px;
    border-radius:9px;
    color:#e9eaed;
    background:#272a2f;
    border:1px solid #34383e;
    font-size:10px;
    line-height:1.42;
    overflow-wrap:anywhere;
}

.echo-private-message-row{
    display:block;
    margin-bottom:7px;
}

.echo-private-message-row .echo-private-message{margin-bottom:0}

.echo-private-message.is-mine{
    margin-left:auto;
    color:#191713;
    background:linear-gradient(145deg,#ddc06f,#c6a14e);
    border-color:#d7ba65;
}

.echo-private-message footer{
    margin-top:4px;
    display:flex;
    justify-content:flex-end;
    gap:6px;
    color:#777c84;
    font-size:7px;
}

.echo-private-message.is-mine footer{color:#67572f}

.echo-private-composer textarea{flex:1}

/* =========================================================
   EMPTY, LOADING AND MODAL STATES
========================================================= */

.echo-chat-loading,
.echo-chat-empty{
    min-height:160px;
    padding:24px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color:#777b84;
    text-align:center;
}

.echo-chat-loading{font-size:10px}
.echo-chat-loading::before{
    content:"";
    width:22px;
    height:22px;
    margin-bottom:10px;
    border:2px solid #34373c;
    border-top-color:var(--echo-chat-gold);
    border-radius:50%;
    animation:echo-chat-spin .75s linear infinite;
}

.echo-chat-empty span{font-size:24px;filter:grayscale(.3)}
.echo-chat-empty strong{margin-top:8px;color:#b1b4ba;font-size:11px}
.echo-chat-empty p{max-width:220px;margin:4px 0 0;color:#737780;font-size:9px;line-height:1.5}

@keyframes echo-chat-spin{to{transform:rotate(360deg)}}

.echo-chat-modal[hidden]{display:none !important}

.echo-chat-modal{
    position:fixed;
    inset:0;
    z-index:320000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
}

.echo-chat-modal-backdrop{
    position:absolute;
    inset:0;
    border:0;
    background:rgba(5,6,7,.78);
    backdrop-filter:blur(3px);
}

.echo-chat-modal-card{
    position:relative;
    width:min(440px,100%);
    max-height:min(720px,90vh);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid #4a4d53;
    border-radius:13px;
    color:var(--echo-chat-text);
    background:#181a1d;
    box-shadow:0 30px 90px rgba(0,0,0,.72);
}

.echo-chat-modal-card.is-wide{width:min(620px,100%)}

.echo-chat-modal-header{
    min-height:64px;
    padding:11px 12px 10px 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid #36393f;
    background:linear-gradient(180deg,#282a2e,#1e2023);
}

.echo-chat-modal-header small{display:block;color:#7f7560;font-size:7px;text-transform:uppercase;letter-spacing:1px}
.echo-chat-modal-header h2{margin:3px 0 0;color:#f1efe8;font-size:15px}
.echo-chat-modal-body{min-height:0;padding:15px;overflow-y:auto}
.echo-chat-modal-actions{padding:10px 12px;display:flex;justify-content:flex-end;gap:7px;border-top:1px solid #33363b;background:#141618}

.echo-chat-modal-button{
    min-height:34px;
    padding:0 14px;
    border:1px solid #484c53;
    border-radius:7px;
    color:#dddfe3;
    background:#25282d;
    font-size:10px;
    font-weight:900;
    cursor:pointer;
}
.echo-chat-modal-button.is-primary{color:#191611;border-color:#8e773e;background:linear-gradient(180deg,#e0c269,#c39e45)}
.echo-chat-modal-button.is-secondary{color:#aeb2b9;background:#22252a}
.echo-chat-modal-button.is-danger{color:#fff;border-color:#8a4144;background:#713437}
.echo-chat-modal-button:disabled{opacity:.5;cursor:wait}

.echo-chat-modal-copy{margin:0;color:#c2c5ca;font-size:11px;line-height:1.55}
.echo-chat-modal-hint{margin:10px 0 0;color:#787d86;font-size:8px;line-height:1.5}
.echo-field-label{display:flex;flex-direction:column;gap:5px;color:#9b9fa7;font-size:8px;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.echo-modal-field{width:100%;min-height:38px;padding:8px 9px;outline:none;border:1px solid #3e4249;border-radius:7px;color:#eee;background:#23262a;font-size:10px;text-transform:none;letter-spacing:0}
textarea.echo-modal-field{resize:vertical;min-height:90px}
.echo-modal-field:focus{border-color:#756a4b;box-shadow:0 0 0 2px rgba(215,180,90,.08)}




/* =========================================================
   TOASTS
========================================================= */

.echo-chat-toast-region{
    position:fixed;
    right:16px;
    bottom:78px;
    z-index:325000;
    width:min(330px,calc(100vw - 32px));
    display:flex;
    flex-direction:column;
    gap:7px;
    pointer-events:none;
}

.echo-chat-toast{
    padding:10px 10px 10px 12px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
    pointer-events:auto;
    opacity:0;
    transform:translateY(8px);
    border:1px solid #44484f;
    border-left:3px solid var(--echo-chat-gold);
    border-radius:8px;
    color:#eceef0;
    background:#202328;
    box-shadow:0 12px 32px rgba(0,0,0,.5);
    transition:.2s ease;
}
.echo-chat-toast.is-visible{opacity:1;transform:none}
.echo-chat-toast.is-danger{border-left-color:var(--echo-chat-danger)}
.echo-chat-toast.is-warning{border-left-color:#c78b42}
.echo-chat-toast.is-success{border-left-color:var(--echo-chat-green)}
.echo-chat-toast strong{display:block;font-size:10px}
.echo-chat-toast p{margin:3px 0 0;color:#989ca4;font-size:8px;line-height:1.4}
.echo-chat-toast button{border:0;color:#777c84;background:transparent;cursor:pointer}

/* =========================================================
   RESPONSIVE LAYOUT
========================================================= */

@media (max-width:1120px){
    .echo-chat-dock-button{min-width:78px;padding:0 10px}
    .echo-chat-dock-label{font-size:10px}
    .echo-chat-player-tab{min-width:126px}
}

@media (max-width:760px){
    :root{--echo-chat-dock-height:54px}

    .echo-chat-dock{
        left:6px;
        right:6px;
        bottom:6px;
        max-width:none;
        overflow-x:auto;
        scrollbar-width:none;
    }
    .echo-chat-dock::-webkit-scrollbar{display:none}
    .echo-chat-dock-brand{display:none}
    .echo-chat-dock-channels{flex:0 0 auto}
    .echo-chat-dock-button{min-width:72px;height:52px;padding:0 8px;flex-direction:column;gap:2px}
    .echo-chat-dock-icon{font-size:10px}
    .echo-chat-dock-label{font-size:8px}
    .echo-chat-dock-badge{position:absolute;right:5px;top:4px}
    .echo-chat-player-tabs{max-width:none;flex:0 0 auto}
    .echo-chat-player-tab{min-width:116px;height:52px}

    .echo-chat-window{
        border-radius:11px;
    }
    .echo-chat-window-header{min-height:54px}
    .echo-chat-window-title{font-size:12px}
    .echo-chat-window-subtitle{font-size:8px}
    .echo-message-icon-row{opacity:1}
    .echo-chat-toast-region{left:10px;right:10px;bottom:70px;width:auto}
}

@media (max-width:460px){
    .echo-chat-window{height:min(74vh,570px) !important}
    .echo-channel-message{grid-template-columns:30px minmax(0,1fr);gap:7px}
    .echo-message-avatar,.echo-message-avatar img{width:29px;height:29px}
}

@media (prefers-reduced-motion:reduce){
    .echo-chat-root *,
    .echo-chat-root *::before,
    .echo-chat-root *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
    }
}

.echo-message-avatar{position:relative}
.echo-message-avatar i{
    position:absolute;
    right:-1px;
    bottom:-1px;
    width:8px;
    height:8px;
    border:2px solid #17191c;
    border-radius:50%;
    background:#5c6068;
}
.echo-message-avatar i.is-online{background:var(--echo-chat-green)}
.echo-channel-message.is-highlighted{
    background:rgba(215,180,90,.13);
    box-shadow:inset 2px 0 var(--echo-chat-gold);
}
.echo-role-badge.is-staff{color:#8ccaff;background:#123654}
.echo-role-badge.is-moderator{color:#c8a4ff;background:#35205a}


/* Compact communications layout */
:root { --echo-chat-dock-height: 48px; }
.echo-chat-dock-button { min-width:84px; min-height:46px; padding-left:11px; padding-right:11px; gap:6px; }
.echo-chat-dock-brand { width:54px; flex-basis:54px; }
.echo-chat-window { width:352px; height:500px; }
.echo-chat-window-header { min-height:50px; padding-top:8px; padding-bottom:8px; }
.echo-channel-messages { padding:6px 6px 9px; }
.echo-private-messages { padding:8px 8px; }
.echo-channel-message { grid-template-columns:30px minmax(0,1fr); gap:7px; padding:6px 5px; }
.echo-message-avatar, .echo-message-avatar img { width:29px; height:29px; }
.echo-private-message { max-width:76%; margin-bottom:6px; padding:6px 8px 4px; border-radius:8px; font-size:11px; }
@media (max-width:760px) {
    :root { --echo-chat-dock-height: 50px; }
    .echo-chat-dock-button { min-width:66px; height:48px; }
    .echo-chat-window { height:min(68vh,520px) !important; }
}

/* The four fixed communication channels may be reordered; player chats stay beyond the divider. */
.echo-chat-dock-channels .echo-chat-dock-button[draggable="true"]{cursor:grab}.echo-chat-dock-channels .echo-chat-dock-button[draggable="true"]:active{cursor:grabbing}.echo-chat-dock-channels .echo-chat-dock-button.is-dragging{opacity:.45;transform:scale(.96)}

/* =========================================================
   DEMO-MATCHED CHAT STYLING
   Appended last so it wins over the earlier passes above.
   Mirrors the approved mockup: narrower window, lighter
   chrome, compact header, and avatar-less message rows so
   the text is the focus.
========================================================= */
.echo-chat-window{
    width: 330px;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    background: #12151b;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5);
}

.echo-chat-window-header{
    min-height: 0;
    padding: 10px 12px;
    gap: 8px;
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), transparent);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.echo-chat-window-channel-icon{
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 9px;
    font-size: 15px;
    color: #e9b45a;
    background: rgba(233, 180, 90, .12);
    border-color: transparent;
}

.echo-chat-window-title{ font-size: 12px; font-weight: 800; color: #fff; }
.echo-chat-window-subtitle{ margin-top: 1px; font-size: 9px; font-weight: 600; color: #8e929b; }

.echo-chat-icon-button{
    width: 24px;
    height: 24px;
    border-radius: 8px;
    font-size: 13px;
    color: #aab1bb;
    border: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .03);
}

.echo-chat-icon-button.is-close:hover{ background: rgba(220, 80, 80, .18); color: #ff9a9a; }

/* Message rows: drop the avatar column entirely (as in the mockup) and let
   the name/body/timestamp use the full width. */
.echo-channel-message{
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 7px 8px;
}

.echo-message-avatar{ display: none; }

.echo-message-main > header{ gap: 6px; }
.echo-message-main > header a{ font-size: 11px; font-weight: 800; }
.echo-message-text{ margin-top: 3px; color: #dfe3e8; font-size: 12px; line-height: 1.5; }

/* Composer: rounded field + solid gold send button. */
.echo-channel-composer,
.echo-private-composer{
    padding: 10px;
    gap: 8px;
    border-top: 1px solid rgba(255, 255, 255, .06);
    background: transparent;
}

.echo-channel-composer textarea,
.echo-private-composer textarea{
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    font-size: 11px;
}

.echo-composer-footer button,
.echo-private-composer > button{
    border: 0;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 800;
}

/* Online count now lives in the header subtitle (the toolbar row that used to
   hold it, along with the Open Market button, is gone). Green dot matches the
   approved design. */
.echo-chat-window-subtitle[data-echo-window-status][data-status-type="online"]{
    display: flex;
    align-items: center;
    gap: 5px;
    color: #9aa0a9;
}

.echo-chat-window-subtitle[data-echo-window-status][data-status-type="online"]::before{
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #57d17b;
}

.echo-chat-window-subtitle[data-echo-window-status][data-status-type="danger"]{ color: #d98a8a; }

/* Composer on one row: field + Send, no character counter. */
.echo-channel-composer{ display: flex; align-items: center; }
.echo-channel-composer textarea{ min-height: 36px; }
.echo-composer-footer{
    padding: 0;
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
}

/* Header close/minimise: proper square with soft corners, glyph optically
   centred (the "x" carries its own baseline offset, so centring needs an
   explicit line-height rather than just flex alignment). */
.echo-chat-icon-button{
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    aspect-ratio: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 15px;
    line-height: 1;
    text-align: center;
}

/* Reply/delete affordance: larger tap target, pinned to the very top-right
   corner of the message row. */
.echo-message-icon-row{
    top: 2px;
    right: 2px;
}

.echo-message-reply-icon,
.echo-message-delete-icon{
    width: 22px;
    height: 22px;
    border-radius: 7px;
    font-size: 11px;
    line-height: 1;
}

/* Accent line: was an absolutely-positioned 2px strip spanning the full width,
   so the rounded corners clipped its ends and it read as a detached straight
   line floating above the window. A real border-top follows the border-radius,
   curving into both corners and stopping cleanly where the header begins. */
.echo-chat-window::before{ display: none; }

.echo-chat-window{ border-top: 2px solid var(--echo-chat-gold); }
.echo-chat-window.accent-red{ border-top-color: var(--echo-chat-red-bright); }
.echo-chat-window.accent-violet{ border-top-color: var(--echo-chat-violet-bright); }
.echo-chat-window.accent-blue{ border-top-color: var(--echo-chat-blue-bright); }

/* Inbox search row: refresh button removed, so the field takes the full width.
   Softened to match the rest of the redesigned chrome. */
.echo-private-search{
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    background: transparent;
}

.echo-private-search input{
    height: 36px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 9px;
    background: rgba(255, 255, 255, .04);
    font-size: 11px;
}

/* The close/minimise glyphs are text characters, and their ink sits off-centre
   inside the line box - flex centring and line-height only centre the BOX, not
   the glyph, which is why the x kept looking high/left. Draw them geometrically
   instead so they are exactly centred at any size. */
.echo-chat-icon-button.is-close,
.echo-chat-icon-button[data-echo-window-minimise]{
    position: relative;
    font-size: 0;
    color: transparent;
}

.echo-chat-icon-button.is-close::before,
.echo-chat-icon-button.is-close::after,
.echo-chat-icon-button[data-echo-window-minimise]::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 1.6px;
    border-radius: 2px;
    background: #aab1bb;
    transition: background .12s ease;
}

.echo-chat-icon-button.is-close::before{ transform: translate(-50%, -50%) rotate(45deg); }
.echo-chat-icon-button.is-close::after{ transform: translate(-50%, -50%) rotate(-45deg); }
.echo-chat-icon-button[data-echo-window-minimise]::before{ transform: translate(-50%, -50%); }

.echo-chat-icon-button.is-close:hover::before,
.echo-chat-icon-button.is-close:hover::after{ background: #ff9a9a; }
.echo-chat-icon-button[data-echo-window-minimise]:hover::before{ background: #e6e8ec; }

/* No button box - just the mark itself in the top-right, vertically centred
   against the channel title on the left (the header is already a centred flex
   row, so alignment falls out of that). */
.echo-chat-icon-button{
    background: transparent;
    border: 0;
    border-radius: 0;
    /* Footprint stays 28px so the mark keeps its original position - only the
       box around it is removed. */
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
}

.echo-chat-icon-button:hover{ background: transparent; }

/* Smooth window entrance and exit. Position transitions remain intact while
   opacity and scale make opening, closing and minimising feel connected to the
   communications dock instead of appearing or disappearing abruptly. */
.echo-chat-window{
    opacity: 1;
    transform: translateY(0) scale(1);
    transform-origin: right bottom;
    will-change: opacity, transform;
    transition:
        right .18s ease,
        bottom .18s ease,
        box-shadow .18s ease,
        opacity .18s ease,
        transform .22s cubic-bezier(.22, 1, .36, 1);
}

.echo-chat-window.is-opening{
    opacity: 0;
    transform: translateY(18px) scale(.94);
}

.echo-chat-window.is-closing{
    opacity: 0;
    transform: translateY(14px) scale(.96);
    pointer-events: none;
}

@media (max-width:760px){
    .echo-chat-window{ transform-origin: center bottom; }
}

/* Reply quote: was a full-width block that read as bigger than the reply
   itself. Texting-style now - a compact, muted single line that sits above
   the message and is visibly smaller than the response under it. */
.echo-message-reply-preview{
    width: auto;
    max-width: 100%;
    margin: 1px 0 4px;
    padding: 3px 8px;
    border-left: 2px solid rgba(255, 255, 255, .16);
    border-radius: 0 6px 6px 0;
    background: rgba(255, 255, 255, .035);
    color: #8e939c;
    font-size: 9.5px;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.echo-message-reply-preview strong{
    color: #c9ad6a;
    font-size: 9.5px;
    font-weight: 800;
}

/* Shared channels use the same compact conversation bubbles as private chat,
   while retaining the author name and role badge above every message. */
.echo-channel-messages{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:7px;
    padding:10px 9px;
}

.echo-channel-message{
    display:block;
    width:fit-content;
    min-width:72px;
    max-width:80%;
    margin:0;
    padding:7px 9px 5px;
    border:1px solid #34383e;
    border-radius:9px;
    background:#272a2f;
}

.echo-channel-message:hover{background:#2c2f34}

.echo-channel-message.is-mine{
    margin-left:auto;
    color:#191713;
    border-color:#d7ba65;
    background:linear-gradient(145deg,#ddc06f,#c6a14e);
}

.echo-channel-message.is-mine:hover{background:linear-gradient(145deg,#e3c879,#cca853)}
.echo-channel-message .echo-message-main{width:100%}
.echo-channel-message .echo-message-main > header{padding-right:22px}
.echo-channel-message .echo-message-text{margin-top:3px;font-size:11px;line-height:1.42}
.echo-channel-message.is-mine .echo-message-text{color:#191713}
.echo-channel-message.is-mine .echo-message-text a{color:#584310}
.echo-channel-message.is-mine .echo-message-time{color:#67572f}
.echo-channel-message.is-mine .echo-message-reply-preview{
    border-left-color:rgba(63,47,14,.35);
    color:#665526;
    background:rgba(43,31,7,.08);
}
.echo-channel-message.is-mine .echo-message-reply-preview strong{color:#4d3b12}