:root{
	--ap-width-la: 220px;
	--ap-handle-la: 40px;

	--ap-bg-la: #06142e;
	--ap-accent-la: #06142e;
	--ap-text-la: #ffffff;
	--ap-shadow-la: rgba(0,0,0,.4);
}

.accounts-panel-la{
	position: fixed;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	width: var(--ap-handle-la);        /* старт: только ручка */
	height: 320px;
	background: var(--ap-accent-la);
	border-radius: 12px 0 0 12px;
	box-shadow: -4px 0 10px var(--ap-shadow-la);
	overflow: hidden;                  /* содержимое прячется */
	transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
	z-index: 2147483647;
	display: flex;
	flex-direction: row;
}

/* раскрытое состояние */
.accounts-panel-la.is-open-la{
	width: var(--ap-width-la);
}

/* -------- ручка -------- */
.accounts-handle-la{
	width: var(--ap-handle-la);
	min-width: var(--ap-handle-la);
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	padding: 12px 4px;
	background: var(--ap-bg-la);
	color: var(--ap-text-la);
	font-weight: 700;
	text-align: center;
	user-select: none;
	cursor: pointer;
	letter-spacing: .12em;
	flex-shrink: 0; /* ручка не сжимается */
	display: flex;
	align-items: center;
	justify-content: center;
}

/* -------- список -------- */
.accounts-list-la {
	flex: 1;
	padding: 16px 12px;
	overflow-y: auto;
	overflow-x: hidden;
	opacity: 0;
	transition: opacity 0.25s ease 0.15s;
}

.accounts-panel-la.is-open-la .accounts-list-la {
	opacity: 1;
}

.accounts-item-la{
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--ap-bg-la);
	border-radius: 6px;
	padding: 8px 12px;
	margin-bottom: 8px;
	font-size: 0.95rem;
	color: var(--ap-text-la);
	border: none;
	cursor: pointer;
	user-select: none;
	transition: background-color 0.2s ease;
}

.accounts-item-la:hover {
	background-color: var(--ap-accent-la);
	border-radius: 10px;
}

.accounts-item-la .delete-btn-la {
	background-color: #e63946;   /* насыщенный красный */
	border: none;
	color: #fff;
	font-weight: 700;
	font-size: 1.1em;
	cursor: pointer;
	user-select: none;
	padding: 2px 8px;           /* компактная */
	border-radius: 10px;
	min-width: auto;            /* чтобы не растягивалась */
	height: 24px;               /* фиксированная высота */
    max-width: 24px;
	line-height: 1;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	opacity: 0.85;
	transition: opacity 0.2s ease;
	margin-left: 8px;
}

.accounts-item-la.selected-la {
	background-color: #033e8c; /* яркий синий фон */
	color: #fff;
	font-weight: 700;
	border-radius: 10px;
}

.accounts-item-la .delete-btn-la:hover {
	opacity: 1;
}

.account-name {
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: calc(11ch);
}

/* --- мобильные: старт тоже только ручка, жест тот же --- */
@media (max-width: 767.98px){
	:root{
		--ap-width-la: 180px;
	}
	.accounts-list-la{ font-size: .9rem; }
}

/* 1. Фон панели только когда раскрыта */
.accounts-panel-la{
	background: var(--ap-accent-la) !important;          /* закрыто — прозрачный */
}
.accounts-panel-la.is-open-la{
	background: var(--ap-accent-la) !important;  /* раскрыто — синий фон */
}

/* 2. Ручка тянется на всю высоту */
.accounts-handle-la{
	height: 100%;
}

@media (max-width: 767.98px) {
	.accounts-panel-la {
		height: 150px;
	}

	.accounts-panel-la.is-open-la {
		width: 90vw;
		height: auto;
		min-height: 150px;
	}

	.accounts-list-la {
		display: flex;
	    justify-content: center;
	    align-items: center;
	    flex-direction: column;
	}

	.accounts-list-la > * {
		max-height: 50px;  /* ограничиваем высоту каждого дочернего элемента */
		width: 100%;        /* или нужная ширина */
	}

	.accounts-item-la {
		width: 100%;
		background-color: #081837;
	}

	.account-name {
		margin-left: 10vw;
		/*transform: translateX(100%);*/
	}

	.accounts-handle-la {
		height: auto;
	}
}