/* ============================================================
   TM01GPT
   CHAT / CODER / RESOURCE WORKSTATION
   ============================================================ */


/* ============================================================
   PÁGINA
   ============================================================ */

html,
body {
    height: 100%;
}

body {
    overflow: hidden;
}

.tm-chat-page {
    height:
        calc(
            100dvh -
            var(--tm-header-height)
        );

    min-height: 0;

    padding:
        18px
        clamp(10px, 3vw, 24px);

    overflow: hidden;
}


/* ============================================================
   SHELL PRINCIPAL
   ============================================================ */

.tm-chat-shell {
    width: min(1500px, 100%);
    height: 100%;

    min-height: 0;

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    background: #0b1017;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 18px;

    overflow: hidden;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.22);
}


/* ============================================================
   CABEÇALHO TM01GPT
   ============================================================ */

.tm-workstation-header {
    flex: 0 0 auto;

    min-height: 82px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 22px;

    padding:
        17px
        21px;

    background: #141b26;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.tm-workstation-identity {
    min-width: 0;
}


.tm-workstation-title {
    font-size: 1.1rem;
    font-weight: 750;

    line-height: 1.2;
}


.tm-workstation-status {
    display: flex;

    align-items: center;

    gap: 7px;

    margin-top: 6px;

    font-size: .75rem;

    opacity: .65;
}


.tm-status-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #43df93;

    box-shadow:
        0 0 10px
        rgba(67,223,147,.65);
}


.tm-workstation-mode {
    display: flex;

    align-items: center;

    gap: 10px;
}


.tm-workstation-mode label {
    font-size: .74rem;

    opacity: .55;
}


.tm-mode-select {
    min-height: 36px;

    padding:
        7px
        10px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 8px;

    background: #0d131c;

    color: inherit;

    outline: none;
}


.tm-mode-select:focus {
    border-color:
        rgba(210,54,121,.55);
}


.tm-mode-status {
    min-width: 150px;

    font-size: .77rem;

    opacity: .62;
}


/* ============================================================
   BARRA CODER
   ============================================================ */

.tm-coder-controls,
.tm-coder-bar {
    flex: 0 0 auto;

    display: flex;

    align-items: end;

    gap: 12px;

    padding:
        10px
        18px;

    background: #101721;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.tm-coder-controls[hidden],
.tm-coder-bar[hidden] {
    display: none !important;
}


.tm-coder-control,
.tm-coder-field {
    display: grid;

    gap: 5px;
}


.tm-coder-control label,
.tm-coder-field label {
    font-size: .69rem;

    opacity: .55;
}


.tm-coder-status {
    margin-left: auto;

    padding-bottom: 8px;

    font-size: .75rem;

    opacity: .62;
}


/* ============================================================
   ÁREA PRINCIPAL
   ============================================================ */

.tm-ai-workspace {
    flex: 1 1 0;

    min-height: 0;

    height: 100%;

    display: grid;

    grid-template-columns:
        330px
        minmax(0, 1fr);

    overflow: hidden;
}


/* ============================================================
   SIDEBAR DE RECURSOS
   ============================================================ */

.tm-resource-sidebar {
    height: 100%;

    min-height: 0;
    min-width: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #0f151e;

    border-right:
        1px solid
        rgba(255,255,255,.08);
}


.tm-resource-sidebar-header {
    flex: 0 0 auto;

    padding:
        16px
        15px
        11px;
}


.tm-sidebar-title {
    font-size: .94rem;

    font-weight: 700;
}


.tm-sidebar-subtitle {
    margin-top: 3px;

    font-size: .68rem;

    opacity: .45;
}


/* ============================================================
   TABS FICHEIROS / WORKERS / JOBS
   ============================================================ */

.tm-resource-tabs {
    flex: 0 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 5px;

    padding:
        0
        9px
        9px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}


.tm-resource-tab {
    min-width: 0;

    padding:
        8px
        4px;

    border:
        1px solid
        transparent;

    border-radius: 8px;

    background: transparent;

    color: inherit;

    font-size: .69rem;

    cursor: pointer;
}


.tm-resource-tab:hover {
    background:
        rgba(255,255,255,.05);
}


.tm-resource-tab.is-active {
    background:
        rgba(255,255,255,.075);

    border-color:
        rgba(255,255,255,.08);
}


.tm-resource-tab-panel {
    display: none;

    flex: 1 1 0;

    min-height: 0;

    overflow: hidden;
}


.tm-resource-tab-panel.is-active {
    display: flex;

    flex-direction: column;
}


/* ============================================================
   EXPLORADOR
   ============================================================ */

.tm-resource-explorer,
.tm-resource-explorer[open] {
    flex: 1 1 0;

    height: 100%;

    min-height: 0;

    margin: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    border: 0;

    border-radius: 0;

    background: transparent;
}


.tm-resource-summary {
    display: none !important;
}


/* ============================================================
   1 — SELECIONADO
   ============================================================ */

.tm-resource-selection,
.tm-resource-selected {
    order: 1;

    flex: 0 0 auto;

    padding:
        10px
        11px
        7px;

    background:
        rgba(255,255,255,.018);

    border-bottom:
        1px solid
        rgba(255,255,255,.045);
}


.tm-resource-label,
.tm-resource-selected-label {
    margin-bottom: 5px;

    font-size: .62rem;

    line-height: 1;

    text-transform: uppercase;

    letter-spacing: .055em;

    opacity: .43;
}


.tm-resource-selection code,
.tm-resource-selected code {
    display: block;

    width: 100%;

    max-height: 48px;

    padding:
        7px
        8px;

    overflow-y: auto;
    overflow-x: hidden;

    border-radius: 7px;

    background:
        rgba(0,0,0,.23);

    font-size: .7rem;

    line-height: 1.35;

    overflow-wrap: anywhere;
}


.tm-resource-selected-type {
    margin-top: 4px;

    font-size: .67rem;

    opacity: .48;
}


/* ============================================================
   2 — BOTÕES CHAT / CODER / WORKER
   ============================================================ */

.tm-resource-selection-actions {
    order: 2;

    flex: 0 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0,1fr));

    gap: 5px;

    padding:
        7px
        10px
        10px;

    background:
        rgba(255,255,255,.018);

    border-bottom:
        1px solid
        rgba(255,255,255,.065);
}


.tm-resource-action {
    min-width: 0;

    min-height: 34px;

    padding:
        6px
        5px;

    border:
        1px solid
        rgba(255,255,255,.085);

    border-radius: 8px;

    background:
        rgba(255,255,255,.035);

    color: inherit;

    font-size: .68rem;

    line-height: 1.15;

    cursor: pointer;
}


.tm-resource-action:hover:not(:disabled) {
    background:
        rgba(255,255,255,.09);
}


.tm-resource-action:disabled {
    opacity: .3;

    cursor: not-allowed;
}


.tm-resource-worker-button:not(:disabled) {
    border-color:
        rgba(210,54,121,.46);

    background:
        rgba(210,54,121,.11);
}


.tm-resource-worker-button:not(:disabled):hover {
    background:
        rgba(210,54,121,.20);
}


.tm-resource-run {
    background: #cf3678;

    border-color: #cf3678;

    color: #fff;

    font-weight: 650;
}


/* ============================================================
   3 — BOTÕES SUBIR / ATUALIZAR
   ============================================================ */

.tm-resource-toolbar {
    order: 3;

    flex: 0 0 auto;

    display: flex;

    gap: 6px;

    padding:
        9px
        10px
        6px;
}


.tm-resource-tool-button {
    flex: 1 1 0;

    min-height: 32px;

    border:
        1px solid
        rgba(255,255,255,.075);

    border-radius: 7px;

    background:
        rgba(255,255,255,.028);

    color: inherit;

    font-size: .7rem;

    cursor: pointer;
}


.tm-resource-tool-button:hover {
    background:
        rgba(255,255,255,.075);
}


/* ============================================================
   4 — CAMINHO ATUAL
   ============================================================ */

.tm-resource-path,
.tm-resource-path-row {
    order: 4;

    flex: 0 0 auto;

    display: block;

    padding:
        5px
        10px
        9px;
}


.tm-resource-path > .tm-resource-label,
.tm-resource-path-row > span {
    display: block;

    margin-bottom: 5px;

    font-size: .61rem;

    text-transform: uppercase;

    letter-spacing: .05em;

    opacity: .4;
}


.tm-resource-path code,
.tm-resource-path-row code {
    display: block;

    width: 100%;

    max-height: 48px;

    padding:
        7px
        8px;

    overflow-y: auto;
    overflow-x: hidden;

    border-radius: 7px;

    background:
        rgba(0,0,0,.20);

    font-size: .69rem;

    line-height: 1.35;

    overflow-wrap: anywhere;
}


/* ============================================================
   5 — LISTA DE FICHEIROS
   SCROLL INDEPENDENTE
   ============================================================ */

.tm-resource-entries {
    order: 5;

    flex: 1 1 0;

    height: 0;

    min-height: 0;
    max-height: none;

    display: flex;

    flex-direction: column;

    gap: 2px;

    align-content: initial;

    padding:
        5px
        7px
        10px;

    overflow-y: scroll;
    overflow-x: hidden;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-gutter: stable;

    border-top:
        1px solid
        rgba(255,255,255,.045);
}


.tm-resource-entry {
    width: 100%;

    min-width: 0;
    min-height: 34px;

    flex: 0 0 auto;

    display: flex;

    align-items: center;

    gap: 8px;

    padding:
        6px
        8px;

    border: 0;

    border-radius: 7px;

    background: transparent;

    color: inherit;

    text-align: left;

    cursor: pointer;
}


.tm-resource-entry:hover {
    background:
        rgba(255,255,255,.055);
}


.tm-resource-entry.is-selected {
    background:
        rgba(210,54,121,.14);

    outline:
        1px solid
        rgba(210,54,121,.38);

    outline-offset: -1px;
}


.tm-resource-entry-icon {
    width: 20px;

    flex: 0 0 20px;

    text-align: center;
}


.tm-resource-entry-name {
    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: .78rem;
}


/* Chromium */

.tm-resource-entries::-webkit-scrollbar {
    width: 9px;
}


.tm-resource-entries::-webkit-scrollbar-track {
    background:
        rgba(255,255,255,.018);
}


.tm-resource-entries::-webkit-scrollbar-thumb {
    border:
        2px solid
        transparent;

    border-radius: 10px;

    background:
        rgba(255,255,255,.20);

    background-clip:
        padding-box;
}


.tm-resource-entries::-webkit-scrollbar-thumb:hover {
    background:
        rgba(255,255,255,.34);

    background-clip:
        padding-box;
}


/* ============================================================
   WORKERS
   ============================================================ */

.tm-worker-panel {
    flex: 1 1 0;

    height: 0;

    min-height: 0;

    padding:
        13px
        11px;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    scrollbar-width: thin;
}


.tm-worker-summary,
.tm-resource-node-status {
    margin-bottom: 11px;

    padding:
        8px;

    border-radius: 8px;

    background:
        rgba(255,255,255,.035);

    font-size: .72rem;

    line-height: 1.35;
}


.tm-worker-static-list {
    display: grid;

    gap: 6px;
}


.tm-worker-card {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        9px;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius: 8px;

    background:
        rgba(255,255,255,.024);
}


.tm-worker-card > div {
    min-width: 0;

    display: grid;

    gap: 3px;
}


.tm-worker-card strong {
    font-size: .79rem;
}


.tm-worker-card span {
    font-size: .65rem;

    opacity: .5;
}


.tm-worker-dot {
    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #43df93;
}


/* ============================================================
   JOBS
   ============================================================ */

.tm-job-panel {
    flex: 1 1 0;

    height: 0;

    min-height: 0;

    display: flex;

    flex-direction: column;

    gap: 12px;

    padding:
        13px
        11px;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    scrollbar-width: thin;
}


.tm-job-field {
    display: grid;

    gap: 5px;

    font-size: .69rem;
}


.tm-job-field > span {
    opacity: .5;
}


.tm-job-field
.tm-mode-select {
    width: 100%;
}


.tm-job-result,
.tm-resource-result {
    margin-top: auto;

    padding:
        9px;

    border-radius: 8px;

    background:
        rgba(255,255,255,.03);

    font-size: .7rem;

    line-height: 1.4;

    overflow-wrap: anywhere;
}


/* ============================================================
   ÁREA DIREITA
   ============================================================ */

.tm-conversation-workspace {
    min-width: 0;
    min-height: 0;

    display: flex;

    flex-direction: column;

    overflow: hidden;

    background: #0a0f16;
}


/* ============================================================
   COMPOSITOR
   ============================================================ */

.tm-chat-form,
.tm-composer {
    flex: 0 0 auto;

    margin: 0;

    padding:
        17px
        19px;

    background: #101721;

    border-bottom:
        1px solid
        rgba(255,255,255,.07);
}


.tm-composer-title-row {
    margin-bottom: 9px;
}


.tm-composer-title {
    font-size: .86rem;

    font-weight: 700;
}


.tm-composer-subtitle {
    margin-top: 2px;

    font-size: .66rem;

    opacity: .42;
}


.tm-chat-input,
.tm-composer-input {
    box-sizing: border-box;

    width: 100%;

    min-height: 96px;
    max-height: 220px;

    padding:
        12px
        13px;

    resize: vertical;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 10px;

    background: #080d13;

    color: inherit;

    outline: none;

    font: inherit;

    line-height: 1.45;
}


.tm-chat-input:focus,
.tm-composer-input:focus {
    border-color:
        rgba(210,54,121,.62);

    box-shadow:
        0 0 0
        2px
        rgba(210,54,121,.08);
}


.tm-chat-form-footer,
.tm-composer-footer {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin-top: 9px;
}


.tm-chat-hint {
    font-size: .69rem;

    opacity: .45;
}


.tm-send-button {
    min-width: 110px;
}


/* ============================================================
   CABEÇALHO DA CONVERSA
   ============================================================ */

.tm-conversation-header {
    flex: 0 0 auto;

    padding:
        12px
        19px
        10px;

    border-bottom:
        1px solid
        rgba(255,255,255,.045);
}


.tm-conversation-title {
    font-size: .84rem;

    font-weight: 700;
}


.tm-conversation-subtitle {
    margin-top: 2px;

    font-size: .65rem;

    opacity: .4;
}


/* ============================================================
   CONVERSA
   ============================================================ */

.tm-messages,
.tm-conversation-stream {
    flex: 1 1 0;

    min-height: 0;

    height: 0;

    padding:
        16px
        19px
        35px;

    overflow-y: auto;
    overflow-x: hidden;

    overscroll-behavior: contain;

    scrollbar-width: thin;

    scrollbar-gutter: stable;
}


.tm-message {
    box-sizing: border-box;

    max-width: 820px;

    margin-bottom: 10px;
}


.tm-message-user {
    margin-left: auto;
}


.tm-message-assistant {
    margin-right: auto;
}


/* ============================================================
   REVIEW
   ============================================================ */

.tm-review-panel {
    flex: 0 0 auto;

    max-height: 45%;

    overflow-y: auto;
}


.tm-review-panel[hidden] {
    display: none !important;
}


/* ============================================================
   SCROLLBARS
   ============================================================ */

.tm-worker-panel::-webkit-scrollbar,
.tm-job-panel::-webkit-scrollbar,
.tm-messages::-webkit-scrollbar,
.tm-conversation-stream::-webkit-scrollbar {
    width: 8px;
}


.tm-worker-panel::-webkit-scrollbar-thumb,
.tm-job-panel::-webkit-scrollbar-thumb,
.tm-messages::-webkit-scrollbar-thumb,
.tm-conversation-stream::-webkit-scrollbar-thumb {
    border-radius: 10px;

    background:
        rgba(255,255,255,.16);
}


.tm-worker-panel::-webkit-scrollbar-thumb:hover,
.tm-job-panel::-webkit-scrollbar-thumb:hover,
.tm-messages::-webkit-scrollbar-thumb:hover,
.tm-conversation-stream::-webkit-scrollbar-thumb:hover {
    background:
        rgba(255,255,255,.27);
}


/* ============================================================
   ECRÃS GRANDES
   ============================================================ */

@media (min-width: 1500px) {

    .tm-ai-workspace {
        grid-template-columns:
            360px
            minmax(0, 1fr);
    }

}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 1050px) {

    .tm-ai-workspace {
        grid-template-columns:
            285px
            minmax(0, 1fr);
    }


    .tm-mode-status {
        display: none;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .tm-chat-page {
        padding: 6px;
    }


    .tm-chat-shell {
        border-radius: 11px;
    }


    .tm-workstation-header {
        min-height: auto;

        padding:
            11px
            12px;
    }


    .tm-ai-workspace {
        display: flex;

        flex-direction: column;
    }


    .tm-resource-sidebar {
        flex: 0 0 auto;

        height: 42vh;

        max-height: 42vh;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(255,255,255,.08);
    }


    .tm-resource-tab-panel.is-active {
        height: 100%;
    }


    .tm-resource-explorer,
    .tm-resource-explorer[open] {
        height: 100%;
    }


    .tm-conversation-workspace {
        flex: 1 1 0;

        min-height: 0;
    }


    .tm-chat-form,
    .tm-composer {
        padding: 11px;
    }


    .tm-messages,
    .tm-conversation-stream {
        padding:
            11px
            11px
            25px;
    }


    .tm-coder-controls,
    .tm-coder-bar {
        flex-wrap: wrap;
    }

}


/* ============================================================
   TELEFONE
   ============================================================ */

@media (max-width: 520px) {

    .tm-workstation-mode label,
    .tm-sidebar-subtitle {
        display: none;
    }


    .tm-workstation-header {
        gap: 7px;
    }


    .tm-resource-tabs {
        padding:
            0
            5px
            6px;
    }


    .tm-resource-tab {
        font-size: .64rem;
    }


    .tm-resource-selection-actions {
        grid-template-columns:
            repeat(3, minmax(0,1fr));
    }


    .tm-resource-action {
        font-size: .62rem;
    }


    .tm-chat-form-footer,
    .tm-composer-footer {
        flex-direction: column;

        align-items: stretch;
    }


    .tm-send-button {
        width: 100%;
    }


    .tm-message {
        max-width: 100%;
    }

}



/* ============================================================
   TM01GPT — FILE EXPLORER DIV
   ============================================================ */


/* Painel Ficheiros */
.tm-resource-tab-panel[data-resource-panel="files"].is-active {
    display: flex !important;

    flex-direction: column !important;

    flex: 1 1 0 !important;

    min-height: 0 !important;
    height: 100% !important;

    overflow: hidden !important;
}


/* Contentor real — agora DIV, sem comportamento especial */
#resource-explorer.tm-resource-explorer {
    display: flex !important;

    flex-direction: column !important;

    flex: 1 1 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

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

    overflow: hidden !important;

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

    background: transparent !important;
}


/* ============================================================
   TOPO FIXO
   ============================================================ */

#resource-explorer
.tm-resource-selection {
    flex: 0 0 auto !important;

    order: 1 !important;
}


#resource-explorer
.tm-resource-selection-actions {
    flex: 0 0 auto !important;

    order: 2 !important;
}


#resource-explorer
.tm-resource-toolbar {
    flex: 0 0 auto !important;

    order: 3 !important;
}


#resource-explorer
.tm-resource-path {
    flex: 0 0 auto !important;

    order: 4 !important;
}


/* ============================================================
   CONTEÚDO — RESTO TOTAL DA ALTURA
   ============================================================ */

#resource-explorer
.tm-resource-files-area {
    order: 5 !important;

    flex: 1 1 0 !important;

    min-height: 0 !important;

    height: auto !important;

    display: flex !important;

    flex-direction: column !important;

    overflow: hidden !important;

    border-top:
        1px solid rgba(255,255,255,.055) !important;
}


#resource-explorer
.tm-resource-files-title {
    flex: 0 0 auto !important;

    padding:
        8px
        11px
        6px !important;

    font-size: .62rem !important;

    text-transform: uppercase !important;

    opacity: .43 !important;

    border-bottom:
        1px solid rgba(255,255,255,.04) !important;
}


/* ============================================================
   LISTA COM SCROLL
   ============================================================ */

#resource-entries.tm-resource-entries {
    flex: 1 1 0 !important;

    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;
    max-height: none !important;

    box-sizing: border-box !important;

    display: flex !important;

    flex-direction: column !important;

    align-items: stretch !important;

    gap: 2px !important;

    padding:
        5px
        7px
        12px !important;

    margin: 0 !important;

    overflow-y: scroll !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain !important;

    scrollbar-width: thin !important;

    scrollbar-gutter: stable !important;

    border: 0 !important;

    background:
        rgba(0,0,0,.025) !important;
}


/* Cada pasta/ficheiro é uma linha */
#resource-entries
.tm-resource-entry {
    flex:
        0
        0
        34px !important;

    display: flex !important;

    align-items: center !important;

    width: 100% !important;

    min-width: 0 !important;
    min-height: 34px !important;

    box-sizing: border-box !important;

    gap: 8px !important;

    padding:
        6px
        8px !important;

    margin: 0 !important;

    border: 0 !important;

    border-radius: 7px !important;

    background:
        transparent !important;

    color: inherit !important;

    text-align: left !important;

    cursor: pointer !important;
}


#resource-entries
.tm-resource-entry:hover {
    background:
        rgba(255,255,255,.06) !important;
}


#resource-entries
.tm-resource-entry.is-selected {
    background:
        rgba(210,54,121,.14) !important;

    outline:
        1px solid
        rgba(210,54,121,.42) !important;

    outline-offset:
        -1px !important;
}


#resource-entries
.tm-resource-entry-icon {
    flex: 0 0 20px !important;

    width: 20px !important;

    text-align: center !important;
}


#resource-entries
.tm-resource-entry-name {
    flex: 1 1 auto !important;

    min-width: 0 !important;

    overflow: hidden !important;

    white-space: nowrap !important;

    text-overflow: ellipsis !important;

    font-size: .76rem !important;
}


/* ============================================================
   SCROLLBAR
   ============================================================ */

#resource-entries::-webkit-scrollbar {
    width: 10px !important;
}


#resource-entries::-webkit-scrollbar-track {
    background:
        rgba(255,255,255,.02) !important;
}


#resource-entries::-webkit-scrollbar-thumb {
    border:
        2px solid transparent !important;

    border-radius:
        10px !important;

    background:
        rgba(255,255,255,.25) !important;

    background-clip:
        padding-box !important;
}


#resource-entries::-webkit-scrollbar-thumb:hover {
    background:
        rgba(255,255,255,.42) !important;

    background-clip:
        padding-box !important;
}



/* ============================================================
   TM01GPT — WORKSPACE 3 COLUNAS
   Recursos | Conversa | Conversas/Projectos
   ============================================================ */

.tm-ai-workspace {
    grid-template-columns:
        330px
        minmax(0, 1fr)
        270px !important;
}


/* ============================================================
   SIDEBAR DIREITA
   ============================================================ */

.tm-workspace-sidebar {
    min-width: 0;
    min-height: 0;

    height: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background:
        #0f151e;

    border-left:
        1px solid
        rgba(255,255,255,.08);
}


.tm-right-sidebar-header {
    flex: 0 0 auto;

    padding:
        16px
        14px
        10px;
}


.tm-right-sidebar-title {
    font-size: .88rem;

    font-weight: 700;
}


.tm-right-sidebar-subtitle {
    margin-top: 3px;

    font-size: .66rem;

    opacity: .42;
}


/* ============================================================
   NOVO CHAT
   ============================================================ */

.tm-new-chat-button {
    flex: 0 0 auto;

    width:
        calc(100% - 20px);

    min-height: 38px;

    margin:
        0
        10px
        10px;

    border:
        1px solid
        rgba(210,54,121,.52);

    border-radius: 8px;

    background:
        rgba(210,54,121,.12);

    color: inherit;

    font-weight: 650;

    font-size: .74rem;

    cursor: pointer;
}


.tm-new-chat-button:hover {
    background:
        rgba(210,54,121,.22);
}


/* ============================================================
   TABS DIREITA
   ============================================================ */

.tm-right-tabs {
    flex: 0 0 auto;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 5px;

    padding:
        0
        10px
        10px;

    border-bottom:
        1px solid
        rgba(255,255,255,.06);
}


.tm-right-tab {
    min-height: 32px;

    border:
        1px solid
        transparent;

    border-radius: 7px;

    background:
        transparent;

    color: inherit;

    font-size: .68rem;

    cursor: pointer;
}


.tm-right-tab:hover {
    background:
        rgba(255,255,255,.045);
}


.tm-right-tab.is-active {
    background:
        rgba(255,255,255,.075);

    border-color:
        rgba(255,255,255,.08);
}


/* ============================================================
   PAINÉIS
   ============================================================ */

.tm-right-panel {
    display: none;

    flex: 1 1 0;

    min-height: 0;

    overflow: hidden;
}


.tm-right-panel.is-active {
    display: flex;

    flex-direction: column;
}


/* ============================================================
   LISTA DE CONVERSAS
   ============================================================ */

.tm-conversation-list {
    flex: 1 1 0;

    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    padding:
        7px
        7px
        12px;

    scrollbar-width: thin;
}


.tm-conversation-list-item {
    width: 100%;

    min-width: 0;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    margin-bottom: 3px;

    padding:
        8px
        8px;

    border:
        1px solid
        transparent;

    border-radius: 7px;

    background:
        transparent;

    color: inherit;

    text-align: left;

    cursor: pointer;
}


.tm-conversation-list-item:hover {
    background:
        rgba(255,255,255,.045);
}


.tm-conversation-list-item.is-active {
    background:
        rgba(210,54,121,.11);

    border-color:
        rgba(210,54,121,.28);
}


.tm-conversation-list-main {
    flex: 1 1 auto;

    min-width: 0;
}


.tm-conversation-list-title {
    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-size: .72rem;
}


.tm-conversation-list-meta {
    margin-top: 3px;

    font-size: .61rem;

    opacity: .38;
}


.tm-conversation-delete {
    flex: 0 0 auto;

    width: 20px;
    height: 20px;

    display: grid;

    place-items: center;

    border-radius: 5px;

    opacity: 0;

    font-size: .9rem;
}


.tm-conversation-list-item:hover
.tm-conversation-delete {
    opacity: .45;
}


.tm-conversation-delete:hover {
    opacity: 1 !important;

    background:
        rgba(255,255,255,.08);
}


/* ============================================================
   PROJECTOS
   ============================================================ */

.tm-project-sidebar-actions {
    flex: 0 0 auto;

    padding:
        10px;
}


.tm-project-open-all {
    display: block;

    padding:
        9px
        10px;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius: 8px;

    background:
        rgba(255,255,255,.025);

    color: inherit;

    text-decoration: none;

    font-size: .7rem;
}


.tm-project-open-all:hover {
    background:
        rgba(255,255,255,.065);
}


.tm-project-list {
    flex: 1 1 0;

    min-height: 0;

    overflow-y: auto;

    padding:
        0
        8px
        12px;
}


.tm-project-sidebar-card {
    display: flex;

    gap: 9px;

    align-items: center;

    padding:
        9px;

    border:
        1px solid
        rgba(255,255,255,.06);

    border-radius: 8px;

    background:
        rgba(255,255,255,.025);
}


.tm-project-sidebar-icon {
    font-size: 1rem;
}


.tm-project-sidebar-card > div:last-child {
    display: grid;

    min-width: 0;

    gap: 3px;
}


.tm-project-sidebar-card strong {
    font-size: .72rem;
}


.tm-project-sidebar-card span {
    font-size: .62rem;

    opacity: .45;
}


.tm-right-empty {
    padding: 15px;

    text-align: center;

    font-size: .69rem;

    opacity: .45;
}


/* ============================================================
   ECRÃ GRANDE
   ============================================================ */

@media (min-width: 1550px) {

    .tm-ai-workspace {
        grid-template-columns:
            350px
            minmax(0,1fr)
            300px !important;
    }

}


/* ============================================================
   LAPTOP
   ============================================================ */

@media (max-width: 1200px) {

    .tm-ai-workspace {
        grid-template-columns:
            280px
            minmax(0,1fr)
            230px !important;
    }

}


/* ============================================================
   TABLET
   Ocultar sidebar direita
   ============================================================ */

@media (max-width: 950px) {

    .tm-ai-workspace {
        grid-template-columns:
            270px
            minmax(0,1fr) !important;
    }


    .tm-workspace-sidebar {
        display: none;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 760px) {

    .tm-ai-workspace {
        display: flex !important;

        flex-direction: column;
    }

}



/* ============================================================
   ACTIVE CONVERSATION ROOT
   ============================================================ */

.tm-composer-title-row {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 12px;
}


.tm-active-root {
    min-width: 0;

    max-width: 55%;

    padding:
        6px
        8px;

    border:
        1px solid
        rgba(210,54,121,.28);

    border-radius: 7px;

    background:
        rgba(210,54,121,.08);

    font-size: .66rem;

    line-height: 1.3;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


.tm-active-root span {
    opacity: .6;
}


.tm-active-root code {
    font: inherit;

    color: inherit;

    opacity: .9;
}


@media (max-width: 760px) {

    .tm-composer-title-row {
        display: block;
    }


    .tm-active-root {
        max-width: 100%;

        margin-top: 7px;
    }

}



/* ============================================================
   ORCHESTRATOR STATUS
   ============================================================ */

.tm-mode-status {
    transition:
        opacity .15s ease;
}


.message-processing {
    opacity: .65;
}


#coder-permission option[value="EDIT"] {
    color: inherit;
}



/* ============================================================
   IDENTIFICAÇÃO DE MENSAGENS
   ============================================================ */

.tm-message {
    display: flex;
    flex-direction: column;

    gap: 6px;

    width: 100%;

    padding:
        12px
        14px;

    box-sizing: border-box;
}


.tm-message-header {
    display: flex;

    align-items: center;

    min-height: 18px;
}


.tm-message-author {
    font-size: .68rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

    opacity: .65;
}


.tm-message-body {
    white-space: pre-wrap;

    overflow-wrap: anywhere;

    line-height: 1.55;
}


/* ------------------------------------------------------------
   UTILIZADOR
   ------------------------------------------------------------ */

.tm-message-user {

    align-items: flex-end;

    text-align: left;
}


.tm-message-user .tm-message-header {

    justify-content: flex-end;
}


.tm-message-user .tm-message-author {

    color: var(
        --tm-accent,
        #d93679
    );
}


.tm-message-user .tm-message-body {

    width: min(
        76%,
        820px
    );

    padding:
        10px
        12px;

    border-radius:
        12px;

    background:
        rgba(
            217,
            54,
            121,
            .10
        );

    border:
        1px solid
        rgba(
            217,
            54,
            121,
            .18
        );
}


/* ------------------------------------------------------------
   TM01GPT
   ------------------------------------------------------------ */

.tm-message-assistant {

    align-items: flex-start;
}


.tm-message-assistant .tm-message-author {

    color: inherit;
}


.tm-message-assistant .tm-message-body {

    width: 100%;
}


/* ------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------ */

@media (
    max-width: 760px
) {

    .tm-message-user .tm-message-body {

        width: 92%;
    }

}



/* ============================================================
   TM01GPT — SESSION STATUS
   ============================================================ */

.tm-session-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    min-height:
        28px;

    padding:
        4px
        9px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius:
        999px;

    background:
        rgba(255,255,255,.035);

    font-size:
        .68rem;

    font-weight:
        600;

    white-space:
        nowrap;

    user-select:
        none;
}


.tm-session-status-dot {

    display:
        block;

    width:
        7px;

    height:
        7px;

    flex:
        0 0 7px;

    border-radius:
        50%;
}


/* ------------------------------------------------------------
   À espera do utilizador
   ------------------------------------------------------------ */

.tm-session-status-waiting {

    color:
        rgba(220,255,232,.92);

    border-color:
        rgba(69,196,122,.22);

    background:
        rgba(69,196,122,.07);
}


.tm-session-status-waiting
.tm-session-status-dot {

    background:
        #45c47a;

    box-shadow:
        0 0 8px
        rgba(69,196,122,.45);
}


/* ------------------------------------------------------------
   A trabalhar no TM01
   ------------------------------------------------------------ */

.tm-session-status-working {

    color:
        rgba(244,226,255,.96);

    border-color:
        rgba(183,112,255,.28);

    background:
        rgba(183,112,255,.09);
}


.tm-session-status-working
.tm-session-status-dot {

    background:
        #b770ff;

    box-shadow:
        0 0 9px
        rgba(183,112,255,.55);

    animation:
        tm-session-pulse
        1.25s
        ease-in-out
        infinite;
}


/* ------------------------------------------------------------
   Erro
   ------------------------------------------------------------ */

.tm-session-status-error {

    color:
        rgba(255,220,220,.96);

    border-color:
        rgba(235,82,82,.3);

    background:
        rgba(235,82,82,.09);
}


.tm-session-status-error
.tm-session-status-dot {

    background:
        #eb5252;

    box-shadow:
        0 0 8px
        rgba(235,82,82,.48);
}


/* ------------------------------------------------------------
   Pulso discreto apenas quando está a trabalhar
   ------------------------------------------------------------ */

@keyframes tm-session-pulse {

    0%,
    100% {

        opacity:
            .45;

        transform:
            scale(.85);
    }


    50% {

        opacity:
            1;

        transform:
            scale(1.15);
    }
}


@media (
    prefers-reduced-motion:
    reduce
) {

    .tm-session-status-dot {

        animation:
            none !important;
    }
}


/* ------------------------------------------------------------
   Mobile
   ------------------------------------------------------------ */

@media (
    max-width: 760px
) {

    .tm-session-status {

        padding:
            4px
            7px;

        font-size:
            .64rem;
    }

}


/* ============================================================
   RENOMEAR CONVERSAS
   ============================================================ */

.tm-conversation-rename {

    flex:
        0 0 auto;

    width:
        20px;

    height:
        20px;

    display:
        grid;

    place-items:
        center;

    padding:
        0;

    border:
        0;

    border-radius:
        5px;

    background:
        transparent;

    color:
        inherit;

    opacity:
        0;

    font-size:
        .82rem;

    cursor:
        pointer;
}


.tm-conversation-list-item:hover
.tm-conversation-rename {

    opacity:
        .45;
}


.tm-conversation-rename:hover {

    opacity:
        1 !important;

    background:
        rgba(
            255,
            255,
            255,
            .08
        );
}


/* renomear/apagar ficam lado a lado */

.tm-conversation-delete,
.tm-conversation-rename {

    transition:
        opacity .12s ease,
        background .12s ease;
}



/* ============================================================
   ESTADO POR CONVERSA — LISTA LATERAL
   ============================================================ */

.tm-conversation-status-dot {
    flex: 0 0 auto;

    width: 9px;
    height: 9px;

    margin-right: 9px;

    border-radius: 50%;

    align-self: center;
}


/* À espera */
.tm-conversation-status-waiting {
    background: #45c47a;

    box-shadow:
        0 0 8px
        rgba(69,196,122,.45);
}


/* A trabalhar */
.tm-conversation-status-working {
    background: #b770ff;

    box-shadow:
        0 0 9px
        rgba(183,112,255,.55);

    animation:
        tm-session-pulse
        1.25s
        ease-in-out
        infinite;
}


/* Erro */
.tm-conversation-status-error {
    background: #eb5252;

    box-shadow:
        0 0 8px
        rgba(235,82,82,.48);
}


/* ============================================================
   ANEXOS DO COMPOSITOR
   ============================================================ */

.tm-composer-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}


.tm-attachment-button {
    flex: 0 0 auto;
    padding: 7px 11px;
    font-size: .72rem;
}


.tm-attachment-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 9px;
    margin-bottom: 2px;

    padding: 8px;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 10px;

    background:
        rgba(255,255,255,.025);
}


.tm-attachment-preview[hidden] {
    display: none;
}


.tm-attachment-item {
    position: relative;

    display: flex;
    align-items: center;
    gap: 9px;

    box-sizing: border-box;

    min-width: 180px;
    max-width: 310px;

    padding: 7px 32px 7px 7px;

    border:
        1px solid
        rgba(255,255,255,.09);

    border-radius: 9px;

    background:
        rgba(255,255,255,.04);

    overflow: hidden;
}


.tm-attachment-thumbnail {
    display: block;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    object-fit: cover;

    border-radius: 7px;

    background:
        rgba(0,0,0,.25);
}


.tm-attachment-file-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    flex: 0 0 48px;

    border-radius: 7px;

    background:
        rgba(255,255,255,.05);

    font-size: 1.35rem;
}


.tm-attachment-info {
    min-width: 0;
    flex: 1 1 auto;
}


.tm-attachment-name {
    overflow: hidden;

    font-size: .72rem;
    font-weight: 650;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.tm-attachment-meta {
    margin-top: 3px;

    overflow: hidden;

    font-size: .61rem;
    opacity: .48;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.tm-attachment-remove {
    position: absolute;

    top: 5px;
    right: 5px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    padding: 0;

    border:
        1px solid
        rgba(255,255,255,.08);

    border-radius: 50%;

    background:
        rgba(0,0,0,.18);

    color: inherit;

    font: inherit;
    font-size: 1rem;
    line-height: 1;

    cursor: pointer;

    opacity: .62;
}


.tm-attachment-remove:hover {
    opacity: 1;

    background:
        rgba(255,255,255,.08);
}


/*
 * Feedback visual durante drag & drop.
 */
.tm-composer.is-dragging-files {
    outline:
        2px dashed
        rgba(210,54,121,.7);

    outline-offset: -5px;

    background:
        rgba(210,54,121,.045);
}


.tm-composer.is-dragging-files::after {
    content: "Largar ficheiros para anexar";

    display: block;

    margin-top: 8px;
    padding: 8px;

    border-radius: 8px;

    text-align: center;

    font-size: .7rem;
    font-weight: 700;

    background:
        rgba(210,54,121,.08);
}


@media (max-width: 760px) {

    .tm-composer-tools {
        width: 100%;
        flex-wrap: wrap;
    }


    .tm-attachment-preview {
        flex-direction: column;
    }


    .tm-attachment-item {
        width: 100%;
        max-width: none;
    }

}


/* ============================================================
   TM01GPT — ESTADO DE SINCRONIZAÇÃO
   ============================================================ */

.tm-sync-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 30px;
    padding: 0 10px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;

    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.tm-sync-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.tm-sync-status-pending .tm-sync-status-dot {
    background: #e6a700;
}

.tm-sync-status-ok .tm-sync-status-dot {
    background: #31c46c;
}

.tm-sync-status-error .tm-sync-status-dot {
    background: #e05252;
}

.tm-sync-status-pending .tm-sync-status-text {
    opacity: 0.85;
}

.tm-sync-status-ok .tm-sync-status-text {
    opacity: 1;
}

.tm-sync-status-error .tm-sync-status-text {
    opacity: 1;
}