/* TurKTeamV2: account navigation, control panel and conversations. */
.tt_ucp_main,
.tt_ucp_nav + td { container: v2account / inline-size; }
.tt_ucp_layout > tbody > tr { gap: 14px; }
.tt_ucp_nav { flex-basis: 236px; width: 236px !important; }
.v2_ucp_nav { background: #1c1c1c; border: 1px solid #0c0c0c; border-radius: 3px; }
.v2_ucp_nav > .tt_ucp_side_head {
    align-items: center;
    background: var(--v2-thead-bg);
    border-bottom: 1px solid #0c0c0c;
    border-left: 3px solid #a91c1c;
    box-shadow: inset 0 1px 0 #ffffff0d;
    cursor: pointer;
    display: flex;
    font-size: 12px;
    gap: 8px;
    line-height: 1.4;
    list-style: none;
    min-height: 44px;
    padding: 0 12px;
}
.v2_ucp_nav > summary::-webkit-details-marker { display: none; }
.v2_ucp_nav > summary::after { content: "\f107"; color: #999; font-family: FontAwesome; margin-left: auto; }
.v2_ucp_nav[open] > summary::after { transform: rotate(180deg); }
.v2_ucp_nav:not([open]) > .tt_ucp_side_nav { display: none; }
.v2_ucp_nav .tt_ucp_side_nav { padding: 4px 0; }
.v2_ucp_nav .tt_ucp_group { border-color: #2b2b2b; }
.v2_ucp_nav .tt_ucp_group > summary { color: #b5b5b5; font-size: 10px; letter-spacing: .04em; padding: 12px 13px 9px; }
.v2_ucp_nav .tt_ucp_group > summary > i { color: #a91c1c; }
.v2_ucp_nav .tt_ucp_group_body { padding-bottom: 7px; }
.v2_ucp_nav .usercp_nav_item { font-size: 11px; gap: 8px; padding-top: 9px; padding-bottom: 9px; }
.v2_ucp_nav .usercp_nav_item:hover,
.v2_ucp_nav .usercp_nav_item[aria-current="page"] {
    background: linear-gradient(90deg, #431717, #231919);
    border-left-color: #b92020;
    color: #fff !important;
}
.v2_ucp_nav .usercp_nav_item[aria-current="page"] > i { color: #df5a5a; }
.v2_ucp_nav summary:focus-visible,
.v2_ucp_nav a:focus-visible { outline: 2px solid #c33838; outline-offset: -3px; }
.tt_ucp_hero { background: #1c1c1c; border: 1px solid #0c0c0c; border-radius: 3px; gap: 18px; padding: 20px; }
.tt_ucp_hero::before { background: #a91c1c; height: 2px; }
.tt_ucp_hero_body { min-width: 0; overflow-wrap: anywhere; }
.tt_ucp_hero_avatar { flex: none; }
.tt_ucp_hero_avatar .usercp_container,
.tt_ucp_avatar { border: 3px solid #0b0b0b; border-radius: 3px; box-shadow: 0 0 0 1px #333; }
.tt_ucp_hero_name { font-size: 22px; }
.tt_ucp_eyebrow { color: #aaa; letter-spacing: .08em; }
.tt_ucp_hero_meta { gap: 8px 16px; }
.tt_ucp_hero_meta span { font-size: 11px; }
.tt_ucp_chip { background: #151515; border-color: #333; border-radius: 3px; font-size: 11px; }
.tt_ucp_panel { background: #1c1c1c; border-color: #0c0c0c; border-radius: 3px; }
.tt_ucp_panel_head { background: var(--v2-thead-bg); border-bottom-color: #0c0c0c; font-size: 12px; min-height: 40px; padding: 0 12px; }
.tt_ucp_panel_head a:link,
.tt_ucp_panel_head a:visited { color: #bbb !important; font-size: 10px; }
.tt_ucp_panel_body { padding: 12px; }
:is(.tt_ucp_main, .tt_ucp_nav + td) .tborder { border-color: #0c0c0c; }
:is(.tt_ucp_main, .tt_ucp_nav + td) table { color: #ccc; }
:is(.tt_ucp_main, .tt_ucp_nav + td) td { overflow-wrap: anywhere; }
:is(.tt_ucp_main, .tt_ucp_nav + td) :is(input, select, textarea) { box-sizing: border-box; max-width: 100%; }
:is(.tt_ucp_main, .tt_ucp_nav + td) fieldset { background: #191919; border-color: #333; border-radius: 3px; }

/* Inbox and thread retain the messaging app's existing state and controls. */
.tt_dm_app {
    --dm-line: #292929;
    --dm-side: #191919;
    --dm-hover: #252525;
    --dm-mine: linear-gradient(#572020, #3b1717);
    --dm-mine-edge: #753030;
    background: #151515;
    border-color: #0c0c0c;
    border-radius: 3px;
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
    height: clamp(520px, 70dvh, 780px);
    min-height: 0;
    min-width: 0;
}
.tt_dm_app .tt_dm_sidebar { border-right: 1px solid var(--dm-line); display: flex; }
.tt_dm_app .tt_dm_thread { display: flex; }
.tt_dm_app.is-thread-open .tt_dm_sidebar { display: flex; }
.tt_dm_app .tt_dm_back { display: none; }
.tt_dm_app .tt_dm_side_head,
.tt_dm_app .tt_dm_thread_head { background: var(--v2-thead-bg); border-bottom: 1px solid #0c0c0c; box-sizing: border-box; min-height: 58px; padding: 10px 12px; }
.tt_dm_app .tt_dm_side_head { border-left: 3px solid #a91c1c; font-size: 13px; }
.tt_dm_app .tt_dm_head_text strong { font-size: 13px; }
.tt_dm_app .tt_dm_head_sub { color: #aaa; font-size: 10px; margin-top: 3px; }
.tt_dm_app .tt_dm_iconbtn,
.tt_dm_modal .tt_dm_iconbtn { background: linear-gradient(#2b2b2b, #1b1b1b); border-color: #050505; border-radius: 3px; box-shadow: inset 0 1px 0 #ffffff0d; color: #ccc; }
.tt_dm_app .tt_dm_iconbtn:hover,
.tt_dm_modal .tt_dm_iconbtn:hover { background: linear-gradient(#6e2020, #3d1414); color: #fff; }
.tt_dm_app .tt_dm_search { background: #121212; border: 0; border-bottom: 1px solid var(--dm-line); border-radius: 0; color: #ddd; font-size: 12px; padding: 13px 12px; }
.tt_dm_app .tt_dm_search:focus { box-shadow: inset 3px 0 #a91c1c; }
.tt_dm_app .tt_dm_item { border-bottom: 1px solid #262626; box-sizing: border-box; color: #ddd; padding: 12px; }
.tt_dm_app .tt_dm_item:hover { background: #252525; }
.tt_dm_app .tt_dm_item.is-active { background: linear-gradient(90deg, #351b1b, #241b1b); box-shadow: inset 3px 0 #b92020; }
.tt_dm_app .tt_dm_item_av { border-radius: 3px; flex-basis: 40px; height: 40px; width: 40px; }
.tt_dm_app .tt_dm_item_av img { border-radius: 3px; height: 100%; width: 100%; }
.tt_dm_app .tt_dm_item_av.is-group { background: #382020; color: #d8aaaa; }
.tt_dm_app .tt_dm_item_title { color: #ddd; font-size: 12px; }
.tt_dm_app .tt_dm_item_time { color: #929292; font-size: 10px; }
.tt_dm_app .tt_dm_item_prev { color: #aaa; font-size: 11px; }
.tt_dm_app .tt_dm_item_badge { background: #931f1f; color: #fff; }
.tt_dm_app .tt_dm_list,
.tt_dm_app .tt_dm_messages { scrollbar-width: thin; scrollbar-color: #484848 #171717; }
.tt_dm_app .tt_dm_messages { background: #151515; padding: 14px; }
.tt_dm_app .tt_dm_older { color: #888; font-size: 10px; }
.tt_dm_app .tt_dm_day span { background: #1b1b1b; border-color: #333; border-radius: 3px; color: #aaa; font-size: 10px; }
.tt_dm_app .tt_dm_bubble { background: #252525; border-color: #383838; border-radius: 5px 5px 5px 1px; color: #eee; min-width: 0; }
.tt_dm_app .tt_dm_row.is-mine .tt_dm_bubble { background: var(--dm-mine); border-color: var(--dm-mine-edge); border-radius: 5px 5px 1px 5px; }
.tt_dm_app .tt_dm_bubble_text { font-size: 12px; line-height: 1.6; }
.tt_dm_app .tt_dm_bubble_time,
.tt_dm_app .tt_dm_receipt { font-size: 10px; }
.tt_dm_app .tt_dm_composer { background: #1c1c1c; gap: 9px; padding: 11px 12px; }
.tt_dm_app .tt_dm_composer textarea { background: #111; border-color: #333; border-radius: 3px; flex: 1 1 0; font-size: 12px; min-width: 0; padding: 10px 12px; }
.tt_dm_app .tt_dm_composer textarea:focus { border-color: #9d3535; box-shadow: 0 0 0 1px #522020; }
.tt_dm_app .tt_dm_composer .tt_dm_send { background: linear-gradient(#8a2626, #581818); border: 1px solid #2b0808; border-radius: 3px; box-shadow: inset 0 1px 0 #ffffff1a; color: #fff; }
.tt_dm_app .tt_dm_composer .tt_dm_send:hover { background: linear-gradient(#a02e2e, #701e1e); }
.tt_dm_app .tt_dm_jump { background: #8a2626; border: 1px solid #b34a4a; border-radius: 3px; }
.tt_dm_app button:focus-visible,
.tt_dm_modal :is(button, input):focus-visible { outline: 2px solid #c33838; outline-offset: -2px; }
.tt_dm_modal { background: #1c1c1c; border-color: #0c0c0c; border-radius: 4px; }
.tt_dm_modal .tt_dm_modal_head { background: var(--v2-thead-bg); border-bottom-color: #0c0c0c; }
.tt_dm_modal .tt_dm_modal_foot { background: #151515; border-top-color: #333; }
.tt_dm_modal .tt_dm_btn_ghost { background: linear-gradient(#2b2b2b, #1b1b1b); border-color: #080808; border-radius: 3px; }

/* Account columns can make the chat narrow even on a desktop viewport. */
@container v2account (max-width: 700px) {
    .tt_dm_app { grid-template-columns: minmax(0, 1fr); height: clamp(440px, 72dvh, 700px); }
    .tt_dm_app .tt_dm_sidebar { border-right: 0; }
    .tt_dm_app .tt_dm_thread { display: none; }
    .tt_dm_app.is-thread-open .tt_dm_sidebar { display: none; }
    .tt_dm_app.is-thread-open .tt_dm_thread { display: flex; }
    .tt_dm_app .tt_dm_back { display: inline-flex; }
    .tt_dm_app .tt_dm_bubble { max-width: 86%; }
    .tt_dm_app .tt_dm_messages { padding: 10px; }
    .tt_dm_app .tt_dm_thread_head { gap: 8px; padding: 9px 10px; }
    .tt_dm_app .tt_dm_composer { padding: 10px; }
}
/* Stack the edit form's outer columns without changing its nested field tables. */
@container v2account (max-width: 650px) {
    :is(.tt_ucp_main, .tt_ucp_nav + td) > .tborder,
    :is(.tt_ucp_main, .tt_ucp_nav + td) > form > .tborder {
        display: block;
        table-layout: fixed;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
    :is(.tt_ucp_main, .tt_ucp_nav + td) > .tborder > tbody,
    :is(.tt_ucp_main, .tt_ucp_nav + td) > form > .tborder > tbody,
    :is(.tt_ucp_main, .tt_ucp_nav + td) > .tborder > tbody > tr,
    :is(.tt_ucp_main, .tt_ucp_nav + td) > form > .tborder > tbody > tr { display: block; width: 100%; }
    :is(.tt_ucp_main, .tt_ucp_nav + td) > .tborder > tbody > tr > td,
    :is(.tt_ucp_main, .tt_ucp_nav + td) > form > .tborder > tbody > tr > td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }
    :is(.tt_ucp_main, .tt_ucp_nav + td) fieldset { min-width: 0; min-inline-size: 0; max-width: 100%; box-sizing: border-box; }
    :is(.tt_ucp_main, .tt_ucp_nav + td) legend { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}
@media (max-width: 900px) {
    .tt_ucp_nav { flex-basis: auto; width: 100% !important; }
    .v2_ucp_nav .tt_ucp_side_nav { gap: 6px; padding: 8px; }
    .v2_ucp_nav .tt_ucp_group { background: #191919; border-color: #303030; }
    .v2_ucp_nav .tt_ucp_side_nav > .usercp_nav_item { font-size: 11px; margin: 0; }
    .v2_ucp_nav > .tt_ucp_side_head { min-height: 42px; }
    .tt_ucp_hero { padding: 18px 14px; }
}
@supports not (container-type: inline-size) {
    @media (max-width: 1100px) {
        .tt_dm_app { grid-template-columns: minmax(0, 1fr); }
        .tt_dm_app .tt_dm_thread { display: none; }
        .tt_dm_app.is-thread-open .tt_dm_sidebar { display: none; }
        .tt_dm_app.is-thread-open .tt_dm_thread { display: flex; }
        .tt_dm_app .tt_dm_back { display: inline-flex; }
    }
}