/* Messages page only. Loaded after app.css so it wins on the shared class names. */ .messaging-page {height:100%!important; min-height:0;} .form-control, .form-select, select.form-control, select.form-select {cursor:auto;} /*Messaging Inbox*/ .chat-area .profile-pic {width:40px; aspect-ratio:1; border-radius:50%; border:1px solid #ddd; background-color:#f93; color:#000; font-weight:bold; text-transform:uppercase; overflow:hidden; display:flex; justify-content:center; align-items:center;} .chat-area .profile-pic img {width:100%; height:100%; object-fit:cover;} .chat-area {position:relative; overflow:hidden; width:100%; height:calc(100vh - 69px); height:calc(100dvh - 69px); max-height:100%; min-height:0; padding:0; background-color:#fff; border-radius:0.3rem;} .chat-area .chatlist {float:left; width:320px; height:100%; min-height:0; overflow:hidden; padding:5px 12px 8px; outline:0;} .chat-area .modal-content {border:none!important; border-radius:0!important; box-shadow:none!important; outline:0; height:100%; min-height:0;} .chat-area .modal-content.inbox-thread {gap:0; padding:0;} .chat-area .modal-dialog-scrollable {height:100%!important; min-height:0; margin:0; max-height:100%;} .chat-area .chatbox .modal-body {background:#f1f1f1; padding-top:20px; display:flex; flex-direction:column; justify-content:flex-start;} .chat-area .chatbox {width:auto; overflow:hidden; height:100%; min-height:0; border-left:1px solid #e4e4ee;} .chat-area .chatbox .modal-dialog, .chat-area .chatlist .modal-dialog {max-width:100%; margin:0;} .chat-area .chatlist .chat-header .chat-top {display:flex; align-items:center;} .chat-area .chatlist .chat-header .chat-top .logo {width:64px;} .chat-area .chatlist .chat-header input[aria-label=search] {box-shadow:none;} .chat-area .msg-search {display:flex; align-items:center; justify-content:space-between;} .chat-area .inbox-connections-panel {padding:14px 0;} .chat-area a.add img {height:36px;} .chat-area .form-floating {flex-grow:1;} .chat-area .form-floating > .form-select {width:100%!important; min-width:0; padding:1.625rem 2.25rem 0.625rem 0.75rem!important; font-size:1rem!important; color:var(--bs-body-color)!important; background-color:var(--bs-body-bg)!important; --bs-form-select-bg-img:url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e); background-image:var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none)!important; background-repeat:no-repeat!important; background-position:right 0.5rem center!important; background-size:16px 12px!important; border:var(--bs-border-width) solid var(--bs-border-color)!important; border-radius:var(--bs-border-radius)!important; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out!important;} .chat-area .form-floating > .form-select ~ label:after {display:none;} .chat-area .conversation-list, .chat-area .inbox-thread, .messaging-page .conversation-list, .messaging-page .inbox-thread {min-height:0; max-height:100%;} .chat-area .chat-list.conversation-list {padding:0 1px; overflow-y:unset; filter:drop-shadow(0 1px 0.9px rgba(204,204,255,1));} .chat-area .chat-list .conversation-list-item {border:none; gap:0.5rem; padding:8px 2px; border-radius:8px; margin:4px 0;} .chat-area .chat-list .conversation-list-item:hover, .chat-area .chat-list .conversation-list-item.active {background:rgb(240,244,249);} .chat-area .chat-list .chat-list-item-action .dropdown-toggle {font-size:13px; width:20px; aspect-ratio:1; text-align:center; margin:0 2px;} .chat-area .chat-list .conversation-list-item .conversation-time {font-size:11px; text-align:right; text-transform:uppercase; padding-right:2px;} .chat-area .chat-list h2, .chat-area .msg-head h2 {color:#222; line-height:1.13; margin-bottom:0;} .chat-area .chat-list h2 {font-size:16px; font-weight:500; text-transform:capitalize;} .chat-area .msg-head h2 {font-size:18px; font-weight:600;} .chat-area .chat-list p, .chat-area .msg-head p {color:rgba(0,0,0,0.5); font-weight:400; line-height:1.5; text-transform:capitalize; margin-bottom:0;} .chat-area .chat-list p, .chat-area .chat-list p * {font-size:0.765625rem;} .chat-area .msg-head p {font-size:0.8125rem;} .chat-area .msg-head {padding:8px 14px 7px; border-bottom:1px solid #ccf; background:#f0f4f9;} .chat-area .btn-group .nav-link.dropdown-toggle[aria-expanded="true"] {background:#ddd;} .chat-area .btn-group .dropdown-toggle::after {display:none;} .chat-area .msg-head .nav-link.dropdown-toggle + ul.dropdown-menu {width:200px;} .chat-area .btn-group .btn-refresh i {display:inline-block; transition:transform 0.3s ease;} .chat-area .btn-group .btn-refresh:active i {transform:rotate(360deg);} .chat-area .btn-group .nav-link.dropdown-toggle {width:32px; aspect-ratio:1; border-radius:50%; font-size:21px; line-height:1;} .chat-area .btn-group .dropdown-menu button {width:100%; font-size:14.5px; text-align:left; padding:4px 8px; border-radius:0;} .chat-area .btn-group .dropdown-menu .input-group button {width:auto;} .chat-area .btn-group .dropdown-menu small {display:block; flex:0 0 100%; font-size:12px; color:#666; margin:0 10px 2px;} .chat-area .inbox-unread-total, .chat-area .inbox-connections-header strong, .chat-area .conversation-unread {border:1px solid rgba(65,220,142,1); background:rgba(65,220,142,0.51); color:#014421; font-size:0.6875rem; text-align:center; line-height:1; letter-spacing:0.004rem; padding:0.125rem 0.125rem 0.0625rem; width:fit-content; min-width:1rem; min-height:1rem; height:auto;} .chat-area .inbox-connection-summary, .chat-area .inbox-connection-summary * {margin:0;} .chat-area .inbox-connection-summary p {color:var(--bs-warning-text-emphasis); line-height:1.5;} .chat-area .bubbles {display:flex; flex-direction:column; flex-wrap:nowrap; width:calc(100% - 1.8rem); margin:0 1rem 0.75rem 0.8rem; padding:0 0.5rem; filter:drop-shadow(0 1px 0.5px rgba(0,0,0,0.17));} .chat-area .bubbles.incoming {align-items:flex-start;} .chat-area .bubbles.outgoing {align-items:flex-end;} .chat-area .bubbles li {position:relative; z-index:1; list-style:none; margin:2px 0; padding:6px 7px 8px 9px; width:fit-content; min-width:92px; max-width:60.72%; font-size:0.90625rem; letter-spacing:0.01rem; line-height:1.2rem; border-radius:8px; text-rendering:optimizeLegibility; word-wrap:break-word; white-space:normal;} .chat-area .bubbles.incoming li {color:var(--bs-body-color);} .chat-area .bubbles.outgoing li {color:var(--bs-primary);} .chat-area .bubbles.incoming li, .chat-area .bubbles.incoming li::before {background-color:var(--bs-white);} .chat-area .bubbles.incoming li:first-child {border-top-left-radius:0;} .chat-area .bubbles.outgoing li, .chat-area .bubbles.outgoing li::before {background-color:#ddf;} .chat-area .bubbles.outgoing li:first-child {border-top-right-radius:0;} .chat-area .bubbles.incoming li:first-child::before, .chat-area .bubbles.outgoing li:first-child::before {content:""; position:absolute; top:0; width:8px; height:12px;} .chat-area .bubbles.incoming li:first-child::before {left:-7.5px; clip-path:polygon(100% 0, 0 0, 100% 100%);} .chat-area .bubbles.outgoing li:first-child::before {right:-7.5px; clip-path:polygon(100% 0, 0 0, 0 100%);} .chat-area .bubbles li .time {position:relative; top:8px; float:right; padding-left:6px; color:rgba(0,0,0,0.5); font-size:12px; text-transform:uppercase; line-height:15px;} .chat-area .divider {position:relative; z-index:1; text-align:center;} .chat-area .msg-body h6 {text-align:center; font-weight:normal; font-size:14px; line-height:1.5; color:#222; background:#fff; display:inline-block; padding:0 5px; margin-bottom:0;} .chat-area .divider:after {display:block; content:''; clear:both; position:absolute; top:12px; left:0; border-top:1px solid #EBEBEB; width:100%; height:100%; z-index:-1;} .chat-area .button-wrapper {position:relative; width:100px; height:100px; text-align:center; margin:0 auto;} .chat-area button:focus {outline:0;} .chat-area .add-apoint {display:inline-block; margin-left:5px;} .chat-area .add-apoint a {text-decoration:none; background:#F6F7FA; border-radius:8px; padding:8px; font-size:13px; font-weight:400; line-height:1.2; color:#343945;} .chat-area .add-apoint a svg {margin-right:5px;} .chat-area .closess i {display:none;} .chat-area .gemini-input-container {background-color:transparent; padding:0.25rem 1rem; border-top:1px solid #ccf; transition:background-color 0.2s ease,border-color 0.2s ease;} .chat-area .gemini-input-container:focus-within {background-color:rgba(170,170,255,0.17); border-color:rgba(170,170,255,0.72);} .chat-area .gemini-textarea {background:transparent!important; border:none!important; outline:none!important; box-shadow:none!important; height:54px; max-height:none; min-height:0; padding:0 0!important; font-size:1rem!important; line-height:1.25; color:#1f1f1f; overflow-y:auto; display:flex; align-items:center; white-space:pre-wrap; word-break:break-word;} .chat-area .gemini-textarea:empty:before, .chat-area .gemini-textarea[data-empty="true"]:before {content:attr(data-placeholder); color:#747775; pointer-events:none; display:block;} .chat-area .gemini-btn {border:none; background:transparent; color:#22B; border-radius:50%; width:40px; height:40px; display:flex; align-items:center; justify-content:center; transition:background-color 0.2s ease;} .chat-area .gemini-btn:hover {background-color:rgba(0,0,0,0.06);} .chat-area .gemini-btn:disabled {background-color:transparent; color:#88f;} .chat-area .gemini-btn:disabled:not(.d-flex) {display:none;} .chat-area .gemini-dropdown-btn {border-radius:1rem; font-size:1rem; font-weight:500; font-style:italic; color:#444746; border:none; background:transparent; padding:6px 12px;} .chat-area .gemini-dropdown-btn.dropdown-toggle::after {content:"\F286"; font-family:'bootstrap-icons'!important; font-weight:bold!important; font-style:normal; font-variant:normal; text-transform:none; line-height:1; border:none!important; margin-left:0.125rem;} .chat-area .gemini-dropdown-btn.dropdown-toggle span {font-weight:bold; font-style:normal;} .chat-area .gemini-dropdown-btn:hover, .gemini-dropdown-btn:focus {background-color:rgba(0,0,0,0.06); color:#1f1f1f;} .chat-area .dropdown-item.active, .chat-area .dropdown-item:active {background-color:#226;} .chat-area #saveBtn.text-primary, .chat-area #sendBtn.text-primary {color:#226!important;} @media (max-width:767px) { .chat-area .chatlist, .chat-area .chatbox {width:100%;} .chat-area .chatbox {position:absolute; left:1000px; right:0; background:#fff; transition:all 0.5s ease; border-left:none;} .chat-area .showbox {left:0!important; transition:all 0.5s ease; z-index:3;} .chat-area .chatlist .chat-header .chat-top .logo {margin:0; padding:0;} .chat-area .msg-head {padding-left:3px;} .chat-area .chatbox .modal-body {border:none;} .chat-area .bubbles {width:calc(100% - 0.5rem); margin:0 0.25rem 0.75rem 0.25rem;} } @media (max-width:640px) { .chat-area .bubbles li {max-width:92%;} } /* ── AllAboutLocal additions ────────────────────────────────── Elements the mockup has no styles for, plus the shell escape. */ /* The chat fills the page region, so drop .page-content padding/scroll here only. !important is required: app.css sets .page-content padding with !important. */ .page-content:has(.chat-area) {padding:0!important; overflow:hidden; display:flex; min-height:0;} .page-content .chat-area {flex:1 1 auto; margin-bottom:0!important;} /* Inbox rail: header stays put, the list scrolls. */ .chat-area .chatlist .modal-content {display:flex; flex-direction:column; min-height:0;} .chat-area .chatlist .chat-header {flex:0 0 auto;} .chat-area .chatlist .modal-body {flex:1 1 auto; min-height:0; overflow-y:auto; padding:0;} .chat-area .chat-list .conversation-list-item {width:100%; background:transparent; text-align:left; border-bottom:none;} .chat-area .chat-list .conversation-list-item .flex-grow-1 {min-width:0;} /* The row menu toggle is a