#panel.open~.floating_area{display:none;}
#tools_sms {display:flex;align-items:center;gap:20px;}
#tools_sms .btn.add {margin-left:auto;margin-top:0;}
#tools_sms .searchdate {padding:5px;border-radius:13px;background-color:var(--blue_light);}
#tools_sms .searchdate .underselect {left:0;}
#tools_sms .searchdate .underselect::before {left:25px;}
#tools_sms input.search {margin-top:0;}

#page_sms .table {--grid-col-template:minmax(500px, 1fr) 0.5fr minmax(150px, 0.2fr);}
#page_sms .table .cell {min-width:0;}
#page_sms .alert {text-align:center;}
#page_sms .table .head {display:grid;grid-template-columns:var(--grid-col-template);}
#page_sms .table .head .number {width:auto;}
#page_sms .table .head .last_message_date {flex-shrink:0;}
#page_sms .table .line {min-height:60px;}
#page_sms .table[data-nb_ivrs="1"] .cell[class*="ivr"] {visibility:hidden;}


@media (max-width:767px) {
	#page_sms .table .head {display:none;}
	#page_sms .table .line {gap:6px;padding:10px 12px;}
	#page_sms .table[data-nb_ivrs="1"] .cell[class*="ivr"] {display:none;}
	#page_sms .table[data-nb_ivrs="1"] .line {min-height:0;}
	#btn_add_sms_conversation {width:0px;padding-right:0;overflow:hidden;}
}

@media (min-width:768px) {
	#page_sms .table .head,#page_sms .table .line {padding-inline:20px;}
}


#cont_sms.wait {height:100px;background:url(/img/loader.svg) no-repeat center center var(--white);border-radius:15px;}
#cont_sms.empty {height:100px;background:url(/img/nosms.svg) no-repeat center center var(--white);border-radius:15px;}
#cont_sms .line .cell .contact_name {height:auto;width:auto;line-height:inherit;padding:0;margin-bottom:0;background:none;}
#cont_sms .ivr_label {z-index:0;}

.conversation_item {display:grid;grid-template-columns:1fr 10ch;cursor:pointer;}
.conversation_item_message {display:flex;align-items:center;gap:4px;}
.conversation_item_message > span:last-child {min-width:0;white-space:nowrap;max-width:100%;text-overflow:ellipsis;overflow:hidden;color:var(--font_light);}
.conversation_item_message_attached_files {display:inline-block;width:16px;height:16px;background:url(/img/document.svg) no-repeat center center;background-size:100% auto;vertical-align:middle;}
.conversation_item_contact {display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:4px;}
.conversation_item_nb_unread {padding:0;height:18px;line-height:18px;min-width:18px;background-color:var(--blue);color:white;}
.conversation_item_nb_unread:empty {display:none;}
.conversation_item_last_message_date {justify-content:center;align-items:start;flex-direction:column;}
.table .line .cell.conversation_item_last_message_date {display:flex;}

@media (max-width:767.98px) {
	.conversation_item_ivr{grid-column:1;grid-row:2;}
	.conversation_item_last_message_date{grid-column:2;grid-row:1 / span 2;align-items:flex-end;justify-content:flex-start;}
}

@media (min-width:768px) {
	.conversation_item {grid-template-columns:var(--grid-col-template);align-items:center;}
}

.conversation_item.has_contact .contact_name,.conversation_item:not(.has_contact) .contact_number {font-size:15px;font-weight:600;color:var(--font);}
.conversation_item .contact_number {font-size:13px;color:var(--font_light);}
.conversation_item.unread :is(.contact_name, .contact_number:first-child, time) {font-weight:700;}

@media (min-width:1090px) {
	#panel.open~.floating_area {display:block;right:820px;}
}

.conversation {display:grid;grid-template-rows:auto 1fr auto;grid-template-areas:"header""body""footer";height:calc(var(--visible-height, 100dvh) - 26px);}

@media (max-width:599.98px) {
	.conversation {margin-inline:-50px;margin-block:-4px -50px;}
}

@media (min-width:600px) {
	.conversation {height:calc(100dvh - 70px);}
}

.conversation.new #sms_conversation_info,
.conversation.new .message_text_box,
.conversation.new .message_toggle_enter_key,
.conversation.new .conversation_footer .alert {display:none;}
.conversation:not(.new) #sms_new_conversation_form {display:none;}
.conversation[data-is_sms_write="false"] :where(.message_text_box, .message_toggle_enter_key),.conversation[data-is_mms_write="false"] .message_text_box_file_upload {display:none;}
.conversation[data-is_mms_write="false"] .message_text_box_send {grid-column:2 / -1;}

.conversation_header {padding:0 20px 20px;background-color:var(--white);}

#sms_conversation_info {display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;}
.conversation_ivr {display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
@media (min-width:768px) {
	.conversation_ivr {margin-left:auto;}
}

.conversation_header .contact {flex-basis:30ch;}

.conversation_header .contact.is_contact .contact_name,.conversation_header .contact:not(.is_contact) .contact_number {font-size:15px;font-weight:700;margin-bottom:3px;}

:is(.conversation_header, .conversation_item) .contact_number {display:flex;align-items:center;gap:8px;}
:is(.conversation_header, .conversation_item) .contact_number_flag {width:2.7ch;height:auto;border-radius:0.5ch;}

#sms_new_conversation_form {display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;min-width:0;}
#sms_new_conversation_form label {color:var(--font_light);margin-bottom:2px;display:inline-block;}
.conversation_body {display:flex;flex-direction:column;position:relative;background:var(--line_hover);padding:20px 10px 0 20px;border-radius:20px 15px 0 0;min-height:0;min-width:0;}
.conversation.wait .conversation_body::before {content:"";background:url(/img/loader.svg) no-repeat center center var(--line_hover);position:absolute;top:0;left:0;bottom:0;right:0;}
.conversation_footer {min-height:0;min-width:0;align-self:flex-end;padding:10px 20px 20px;background:var(--line_hover);}
.conversation_alert {border-radius:15px;text-align:center;}
.conversation_body .conversation_alert {margin-right:10px;}
@media (min-width:600px) {
	.conversation_footer {border-radius:0 0 15px 15px;}
}

.anumber {flex:1;z-index:50;}
@media (min-width:600px) {
	.anumber {max-width:min(100%, 250px);}
}
.anumber .select {width:calc(100% - 60px);}
.anumber .select[data-size='1'] {user-select:none;pointer-events:none;padding:0;border:0;box-shadow:none;}
.anumber .select[data-size='1']:before {content:none;}
.anumber .select[data-size='1'] :where(.value, small) {font-size:inherit;}
.anumber .select[data-size='1'] img {width:24px;height:16px;border-radius:5px;margin-left:0;}
.bnumber {position:relative;flex:1;}
@media (min-width:600px) {
	.bnumber {max-width:min(100%, 250px);}
}
.bnumber .input_group {display:flex;background:var(--white);border:1px solid var(--grey_border);border-radius:10px;box-shadow:0 0 5px rgba(0, 0, 0, 0.05);outline:none;transition:all ease 0.3s;}
.bnumber .input_group:focus-within {border-color:var(--blue);box-shadow:0 0 0px 3px var(--blue_shadow);}
.bnumber .phone_country {border:0;width:auto;position:static;pointer-events:none;}
.bnumber .phone_country:before {display:none;}
.bnumber .phone_country .value {padding-right:0;width:auto;}
.bnumber .input_phone {width:100%;padding-left:0;background:none;border:0;border-radius:0;}
.bnumber .input_phone:focus {box-shadow:none;}
.bnumber .popover {width:100%;border:1px solid var(--grey_border_dark);top:calc(100% + 4px);box-shadow:0 2px 10px var(--black_shadow);}
@media (max-width:1024px) {
	.bnumber .popover {position:fixed;min-height:50vh;max-height:calc(var(--visible-height, 100vh) - var(--bnumber-top, 300px));overflow:auto;top:var(--visible-height, 100svh);inset-inline:0;padding-block:10px;border-radius:15px 15px 0 0;transform:translateY(-100%);}
}
.bnumber .popover_list {margin:0;list-style-type:none;}
@media (max-width:1024px) {
	.bnumber .popover_list_item {padding-inline:20px;}
}
.bnumber .popover_list .popover_list_item.disabled {cursor:not-allowed;opacity:0.6;}
.bnumber .popover_list .disabled .popover_list_item_content {pointer-events:none;}
.bnumber .contact_label {font-weight:normal;color:inherit;opacity:0.8;font-size:90%;}
.bnumber .flag{width:24px;height:16px;border-radius:5px;}
.bnumber .number_flag{display:flex;align-items:center;gap:10px;margin-top:4px;}

/* Message text box */
.message_text_box {--font-size:16px;--line-height:1.5;display:grid;grid-template-columns:1fr auto auto;align-items:flex-end;gap:0 4px;background-color:var(--white);padding:4px;border:1px solid var(--grey_border);box-shadow:0 0 5px rgba(0, 0, 0, 0.05);border-radius:12px;box-sizing:border-box;position:relative;}
.message_text_box:focus-within {border-color:var(--blue_light_hover)}
.message_text_box textarea {all:unset;background-color:transparent;min-width:0;max-width:100%;height:calc(var(--line-height) * var(--font-size));min-height:calc(var(--line-height) * var(--font-size));max-height:calc(8 * var(--line-height) * var(--font-size));font-size:var(--font-size);line-height:var(--line-height);display:block;box-sizing:border-box;margin-left:11px;margin-bottom:6.25px;}
.btn.message_text_box_action {display:block;cursor:pointer;padding:0;width:36px;height:36px;background-size:60%;background-position:center;border-radius:8px;}
.message_text_box_file_upload {background-image:url(/img/plus.svg);}
.message_text_box_send {background:url(/img/send.svg) no-repeat center center var(--blue);}
.message_text_nb_char {grid-row:2;grid-column:1 / -1;padding-left:11px;color:var(--font_light);}
.message_text_nb_char[data-nb-sms="0"] {display:none;}
.message_text_nb_char * {color:inherit;}
#message_nb_char.error {background-color:var(--red);padding:0 4px;border-radius:4px;color:white;}
.message_toggle_enter_key {display:flex;align-items:center;gap:6px;padding-left:15px;margin-top:4px;}
#message_text_ghost {min-height:calc(var(--line-height) * var(--font-size));visibility:hidden;pointer-events:none;position:fixed;right:-99999px;}
#message_text_ghost p {height:calc(var(--line-height) * var(--font-size));}

/* FILES */
#input_mms_files {all:unset;position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0;}
.file_dropzone {grid-column:1 / -1;}
.file_list {display:flex;gap:10px;flex-wrap:wrap;margin-inline:11px 0;margin-block:0 16px;padding-top:6.25px;max-height:184px;overflow:auto;}
.file_list:empty {display:none;}
.file_preview {width:68px;display:flex;flex-direction:column;gap:2px;position:relative;}
.file_preview .file {display:none;box-sizing:border-box;padding:4px;width:100%;aspect-ratio:1;border-radius:15px;border:1px solid var(--grey_border);}
.file_preview img.file {object-fit:cover;object-position:center;}
.file_preview .file.data {background:url(/img/document.svg) no-repeat center center var(--white);background-size:60px;}
.file_preview_name {display:block;font-size:10px;color:var(--font_light);text-align:center;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%;}
.file_preview_ext {display:none;position:absolute;bottom:50%;left:50%;transform:translate(-50%, 50%);height:18px;line-height:18px;min-width:30px;padding-inline:6px;font-size:11px;background-color:var(--font_light);color:white;}
.file_preview_delete {display:block;width:20px;aspect-ratio:1;border-radius:50%;background:url(/img/cross.svg) no-repeat center center var(--white);background-size:80%;border:1px solid var(--grey_border);position:absolute;top:0;right:0;transform:translate(25%, -25%);}
.file_preview_delete:hover {background-color:var(--grey_border);}
.file_preview[data-status="uploading"]:before,.file_preview[data-status="uploading"]:after {content:'';position:absolute;top:1px;inset-inline:1px;height:66px;border-radius:15px;z-index:1;}
.file_preview[data-status="uploading"]:before {background-color:var(--white);opacity:0.7;}
.file_preview[data-status="uploading"]:after {background:url(/img/loader.svg) no-repeat center center;background-size:24px;}
.file_preview[data-status="uploading"] .file_preview_delete {display:none;}
.file_preview[data-status="error"] .file {border-color:var(--red);background-color:var(--red_light);}
.file_preview[data-type*='image'] img.file {display:block;}
.file_preview:not([data-type*='image']) .file.data {display:block;}
.file_preview:not([data-type*='image']) .file_preview_ext {display:block;}

/* Messages */
.messages_list {display:flex;flex-direction:column;list-style-type:none;padding:0;padding-right:10px;padding-bottom:10px;margin:0;margin-top:auto;overflow:auto;}
.messages_list_day {margin-block-end:10px;padding:6px;text-align:center;font-weight:600;color:var(--font_light);background-color:var(--line_hover);text-transform:capitalize;position:sticky;top:-10px;z-index:10;}
.messages_list_day:not(:first-child) {margin-top:32px;}

.message {display:flex;justify-content:flex-end;align-items:flex-start;margin-top:2px;}
.message:last-child {padding-bottom:2px;}

.message_content {padding:10px 16px;border-radius:20px;font-size:15px;max-width:50ch;word-break:break-word;overflow-wrap:anywhere;white-space:pre-wrap;}
.message_content_buffer {color:inherit;}
.message_content_buffer:empty + .message_attached_files {margin-top:-10px;border-top-right-radius:inherit;border-top-left-radius:inherit;}
.message_date {display:flex;align-self:flex-end;align-items:center;padding:10px;font-size:80%;color:var(--font_light);opacity:0;}
.message:hover .message_date {opacity:1;}
.message .avatar {order:1;opacity:0;pointer-events:none;flex-shrink:0;margin-left:8px;height:36px;position:relative;background-color:var(--blue_light);}
.message .avatar_picture {width:100%;aspect-ratio:1;border-radius:50%;}
.message .avatar_initials {display:flex;align-items:center;justify-content:center;height:100%;font-weight:600;color:var(--blue);}
.message .avatar_tooltip {position:absolute;white-space:nowrap;padding:5px 10px;right:calc(100% + 10px);bottom:100%;}

.message_attached_files {columns:200px;gap:4px;background-color:var(--blue_active);margin-block-start:10px;margin-inline:-16px;margin-block-end:-10px;border-radius:6px 6px 20px 20px;border:4px solid var(--blue_active);overflow:clip;}
.message_attached_files:empty {display:none;}
.message_attached_files[data-length="1"] {columns:auto;}
.message_attached_files[data-length="1"] .file_preview {margin-block-end:0;max-width:300px;}
.message_attached_files .file_preview {width:auto;min-width:0;margin-block-end:4px;transform:translate3d(0,0,0);}
.message_attached_files .file_preview_delete {display:none;}
.message_attached_files .file_preview_name {color:var(--white);font-size:80%;}
.message_attached_files .file {border-color:transparent;padding:0;border-radius:4px;aspect-ratio:auto;height:auto;min-height:34px;}
.message_attached_files .file_preview_download {position:absolute;top:0;right:0;transition:0.2s;}
.message_attached_files .file_preview_download::part(anchor) {opacity:0;display:block;height:100%;}
.message_attached_files .file_preview_download::part(anchor):after {content:'';display:block;width:28px;height:28px;padding:0;aspect-ratio:1;background:url(/img/download.svg) no-repeat center center var(--blue_light_hover);background-size:60%;border-radius:4px;border:1px solid var(--blue);box-shadow:0 2px 10px var(--black_shadow);position:fixed;top:2px;right:2px;transition:0.2s;z-index:1;}
.message_attached_files .file_preview_download::part(anchor):before {content:'';border-radius:4px;position:fixed;inset:0;transition:0.2s;}
.message_attached_files .file_preview_download:hover::part(anchor) {opacity:1;}
.message_attached_files .file_preview_download:hover::part(anchor):before {background-color:var(--white);opacity:0.6;}
.message_attached_files [data-type*="image"] .file_preview_name {display:none;}
.message_attached_files .file_preview:not([data-type*="image"]) {width:100%;max-width:100%;flex-direction:row;align-items:center;gap:10px;}
.message_attached_files .file_preview:not([data-status="error"]) .file {border:0;}
.message_attached_files .file_preview:not([data-type*="image"]) .file {width:36px;aspect-ratio:0.85;background-size:90%;}
.message_attached_files .file_preview[data-status="uploading"]::before {top:0;inset-inline:0;height:100%;border-radius:inherit;}
.message:last-child .message_date {opacity:1;}

.message[data-sent="failed"] {flex-wrap:wrap;}
.message[data-position*='first'] .avatar {opacity:1;pointer-events:all;}
.message[data-dir='OUT'] .message_content {background-color:var(--blue);color:var(--white);border-top-right-radius:6px;border-bottom-right-radius:6px;}
.message[data-dir='OUT'] .message_attached_files {border-bottom-right-radius:6px;justify-content:flex-end;}
.message[data-dir='OUT'] .message_error {text-align:end;padding-inline-end:44px;margin-block-end:4px;}
.message[data-dir='IN'] {flex-direction:row-reverse;}
.message[data-dir='IN'] .message_content {border:1px solid var(--grey_border);background-color:var(--white);box-shadow:0 1px 1px rgba(0,0,0,.1);border-top-left-radius:6px;border-bottom-left-radius:6px;}
.message[data-dir='IN'] .message_attached_files {border-bottom-left-radius:6px;background-color:var(--grey_border);border-color:var(--grey_border);}
.message[data-dir='IN']+.message[data-dir='OUT'],.message[data-dir='OUT']+.message[data-dir='IN'] {margin-top:20px;}
.message[data-dir='IN'][data-position*='last']+.message[data-dir='IN'][data-position*='first'],[data-position*='middle'] {margin-top:10px;}
.message[data-dir='OUT'][data-position*='last']+.message[data-dir='OUT'][data-position*='first'],.message[data-dir='OUT'][data-position*='first'],.message[data-dir='IN'] + .message[data-dir='OUT'][data-position*='first'] {margin-top:32px;}
.message[data-dir='OUT']+.message[data-dir='IN'] .message_content,.message[data-dir='IN'][data-position*='first'] .message_content,.message[data-dir='IN'][data-position*='middle'] .message_content {border-top-left-radius:20px;}
.message[data-dir='IN'][data-position*='last'] :is(.message_content,.message_attached_files) {border-bottom-left-radius:20px;}
.message[data-dir='IN']+.message[data-dir='OUT'] .message_content,.message[data-dir='OUT'][data-position*='first'] .message_content,.message[data-dir='OUT'][data-position*='middle'] .message_content {border-top-right-radius:20px;}
.message[data-dir='OUT'][data-position*='last'] :is(.message_content,.message_attached_files) {border-bottom-right-radius:20px;}

@media (max-width:767px) {
	.message {position:relative;}
	.message .avatar {position:absolute;transform:translateY(calc(-100% - 4px));}
	.message .avatar_tooltip {bottom:50%;transform:translateY(50%);right:100%;}
	.message[data-dir='OUT'] .message_error {padding-inline-end:0;}
	.message[data-dir='OUT'][data-position*='last']+.message[data-dir='OUT'][data-position*='first'],
	.message[data-dir='OUT'][data-position*='first'],
	.message[data-dir='IN'] + .message[data-dir='OUT'][data-position*='first'] {margin-top:64px;}
}


/* SENDING STATUS */
.message_error {display:none;width:100%;}
.message:is([data-sent="failed"],[data-sent="pending"]) .message_date {opacity:1;}
.message[data-sent="pending"] .message_date {display:flex;align-items:center;gap:4px;}
.message[data-sent="pending"] .message_date::after {content:'';display:inline-block;width:12px;aspect-ratio:1;background:url(/img/wait.svg) no-repeat center center;background-size:100%;filter:grayscale(1);opacity:0.6;}
.message[data-sent="failed"] .message_error {display:block;margin-block-end:4px;color:var(--red);font-size:12px;order:1;}
.message[data-sent="failed"] .message_content {background-color:var(--red);}

/* TCR */
form[data-brand][data-campaign] button[type="submit"] {display:none;}
