/* Estilos da Iris (Web) */
.iris-hero { letter-spacing: .5px; }

/* ---- Navbar: mais espacada, legivel e com o item atual em destaque ---- */
.navbar { padding-top: .55rem; padding-bottom: .55rem; }
.navbar-brand { letter-spacing: .3px; }
.navbar-nav { gap: .15rem; }
.navbar-nav .nav-link {
    border-radius: .55rem;
    padding: .4rem .8rem;
    transition: background-color .15s ease, color .15s ease;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible { background: rgba(120, 130, 160, .16); }
.navbar-nav .nav-link.active {
    background: rgba(13, 202, 240, .16);
    color: var(--bs-info) !important;
    font-weight: 600;
}
.navbar .dropdown-menu {
    border-radius: .7rem;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .28);
    padding: .35rem;
    min-width: 15rem;
}
.navbar .dropdown-item { border-radius: .45rem; padding: .5rem .7rem; }
.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
    background: rgba(13, 202, 240, .2);
    color: var(--bs-info);
}
.navbar .dropdown-header {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; opacity: .55;
}
/* Empilhado no mobile: um pouco mais de respiro entre os itens */
@media (max-width: 991.98px) {
    .navbar-nav { gap: .1rem; margin-bottom: .5rem; }
    .navbar-nav .nav-link { padding: .55rem .7rem; }
    .navbar .dropdown-menu { box-shadow: none; border: 1px solid var(--bs-border-color); }
}

/* ===================== Chat estilo ChatGPT ===================== */
/* Sem rodape na tela do chat (layout app-like). */
.chat-body > footer { display: none; }

/* ---- Barra lateral (conversas + arquivos) ---- */
.chat-sidebar {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--bs-body-bg);
}
.cs-top { padding: .7rem .7rem .4rem; display: flex; flex-direction: column; gap: .3rem; }
.cs-newbtn {
    width: 100%; text-align: left; border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg); color: inherit; border-radius: .7rem;
    padding: .55rem .75rem; cursor: pointer; font-weight: 600; font-size: .9rem;
    transition: background-color .15s ease;
}
.cs-newbtn:hover { background: rgba(13, 202, 240, .16); }
.cs-linkbtn {
    width: 100%; text-align: left; border: 0; background: none; color: inherit;
    opacity: .75; border-radius: .5rem; padding: .4rem .75rem; cursor: pointer; font-size: .82rem;
}
.cs-linkbtn:hover { opacity: 1; background: var(--bs-tertiary-bg); }
.cs-title { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; opacity: .5; padding: .5rem .95rem .2rem; }
.conv-list { overflow-y: auto; padding: 0 .5rem .5rem; min-height: 0; }
.conv-item { display: flex; align-items: center; border-radius: .55rem; margin-bottom: .1rem; }
.conv-item:hover { background: var(--bs-tertiary-bg); }
.conv-item.ativa { background: rgba(13, 202, 240, .16); }
.conv-abrir {
    flex: 1 1 auto; min-width: 0; text-align: left; background: none; border: 0;
    color: inherit; cursor: pointer; padding: .45rem .55rem; border-radius: .55rem;
    display: flex; flex-direction: column; gap: .05rem;
}
.conv-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .85rem; }
.conv-quando { font-size: .65rem; opacity: .5; }
.conv-del {
    flex: 0 0 auto; background: none; border: 0; color: inherit; opacity: 0;
    cursor: pointer; padding: 0 .55rem; font-size: .8rem; border-radius: .5rem;
}
.conv-item:hover .conv-del { opacity: .5; }
.conv-del:hover { opacity: 1 !important; color: var(--bs-danger); }
.conv-vazio { opacity: .5; font-size: .8rem; text-align: center; padding: 1rem .5rem; }
.cs-arqs { border-top: 1px solid var(--bs-border-color); padding: .5rem .7rem; }
.cs-arqs > summary { cursor: pointer; font-size: .82rem; opacity: .8; padding: .25rem 0; list-style: none; }
.cs-arqs > summary::-webkit-details-marker { display: none; }
.cs-arqs > summary::before { content: '▸ '; opacity: .6; }
.cs-arqs[open] > summary::before { content: '▾ '; }
.cs-arqs #arq-input { font-size: .78rem; }
.cs-arqs #arq-lista { max-height: 22vh; overflow-y: auto; }

/* ---- Area principal (mensagens + compositor) ---- */
.chat-main { min-width: 0; display: flex; flex-direction: column; }
.chat-scroll { scroll-behavior: smooth; }
/* thread = coluna centrada com largura maxima (estilo ChatGPT) */
#chat-janela { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1rem 1rem; width: 100%; }
#chat-alerta { max-width: 46rem; margin: 0 auto; width: 100%; padding: 0 1rem; }

.msg { max-width: 85%; padding: .6rem .9rem; border-radius: 1.1rem; margin-bottom: .85rem; word-wrap: break-word; overflow-wrap: anywhere; }
.msg-user { margin-left: auto; background: var(--bs-primary); color: #fff; border-bottom-right-radius: .25rem; }
/* Resposta da Iris: sem "balao" (limpo, largura cheia) — como no ChatGPT. */
.msg-iris { margin-right: auto; max-width: 100%; width: 100%; background: transparent; border: 0; padding-left: 0; padding-right: 0; }
.msg-user .msg-corpo { white-space: pre-wrap; }
.msg-corpo :first-child { margin-top: 0; }
.msg-corpo :last-child { margin-bottom: 0; }
.msg-quando { font-size: .7rem; opacity: .5; margin-top: .35rem; display: flex; gap: .5rem; align-items: center; }
.digitando .msg-corpo { font-style: italic; opacity: .7; }

/* Blocos de codigo dentro da resposta */
.msg-iris .code-wrap { position: relative; margin: .5rem 0; }
.msg-iris pre { background: var(--bs-dark, #1b1e21); color: #e6e6e6; padding: .7rem .8rem; border-radius: .5rem; overflow-x: auto; margin: 0; }
.msg-iris pre code { background: none; padding: 0; color: inherit; font-size: .85rem; }
.msg-iris :not(pre) > code { background: rgba(127,127,127,.2); padding: .05rem .3rem; border-radius: .25rem; font-size: .9em; }
.code-copy, .msg-copy {
    background: rgba(127,127,127,.2); border: 0; color: inherit; font-size: .7rem;
    border-radius: .3rem; padding: .05rem .45rem; cursor: pointer; opacity: .8;
}
.code-copy { position: absolute; top: .35rem; right: .35rem; }
.code-copy:hover, .msg-copy:hover { opacity: 1; }
.msg-copy { margin-left: auto; }

/* Compositor: barra arredondada centrada (estilo ChatGPT) */
.chat-composer { background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color); padding: .55rem 1rem .9rem; }
.chat-composer-inner { max-width: 46rem; margin: 0 auto; }
#dicas-bar { margin-bottom: .35rem; }
#form-chat {
    display: flex; gap: .4rem; align-items: flex-end;
    background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
    border-radius: 1.4rem; padding: .3rem .3rem .3rem .95rem;
}
#entrada { resize: none; max-height: 160px; overflow-y: auto; border: 0; background: transparent; box-shadow: none !important; padding: .5rem 0; }
#form-chat .btn { border-radius: 1.1rem; }
#chat-janela .exemplo { border-style: dashed; }

/* ---- DESKTOP (>=992px): app de tela cheia; scroll so na lista de mensagens ---- */
@media (min-width: 992px) {
    .chat-body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; }
    .chat-body .navbar { margin-bottom: 0 !important; flex: 0 0 auto; }
    .chat-page { flex: 1 1 auto; min-height: 0; display: flex; overflow: hidden; }
    .chat-sidebar { flex: 0 0 264px; width: 264px; border-right: 1px solid var(--bs-border-color); }
    .conv-list { flex: 1 1 auto; }
    .chat-main { flex: 1 1 auto; overflow: hidden; }
    .chat-scroll { flex: 1 1 auto; overflow-y: auto; }
    .chat-composer { flex: 0 0 auto; }
}

/* ---- TABLET/MOBILE (<992px): fluxo natural, barra lateral empilhada ---- */
@media (max-width: 991.98px) {
    .chat-sidebar { width: 100%; border-bottom: 1px solid var(--bs-border-color); }
    .conv-list { max-height: 30vh; }
    .chat-composer { position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -2px 12px rgba(0,0,0,.12); }
    .conv-del { opacity: .5; }   /* sem hover no touch: mostra sempre */
    .msg { max-width: 92%; }
    .navbar-brand { font-size: 1.1rem; }
}