:root {
      --bg: #f5f5f7;
      --panel: #ffffff;
      --border: #e6e6e6;
      --muted: #888;
      --highlight: #fee500;
    }
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: "Segoe UI", Roboto, Noto Sans KR, sans-serif;
      background: var(--bg);
      height: 100vh;
      overflow: hidden;
      user-select: none; /* Prevent text and image selection */
    }

    #login-container {
      width: 80%; /* Make it scale */
      max-width: 500px; /* Prevent it from becoming too wide */
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000; /* Ensure it's above other content */
      padding: 2rem; /* Add more padding for better look */
      border-radius: 15px; /* Rounded corners */
      box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Subtle shadow */
    }

    .app {
      display: grid;
      grid-template-columns: 68px 1fr; /* Adjusted sidebar width */
      height: 100vh;
      width: 100%;
      /* Initially hidden */
      display: none;
    }

    /* Sidebar */
    .sidebar {
      background: #e0e0e0; /* Lighter background color for sidebar */
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      padding: 10px 0;
    }
    .profile {
      width: 48px; height: 48px;
      border-radius: 16px;
      background: #aaa;
      margin-bottom: 20px;
      display: grid; place-items: center;
      color: #fff; font-weight: bold;
    }
    .tab-btn {
      width: 48px; height: 48px;
      border-radius: 12px;
      display: grid; place-items: center;
      color: #ccc;
      margin: 8px 0;
      cursor: pointer;
      transition: background .2s;
    }
    .tab-btn.active {
      background: var(--highlight);
      color: #000;
    }
    .tab-btn:hover { background: rgba(255,255,255,0.1); }

    #invitationsTab > i {
        color: #888; /* Make invitation icon more visible */
    }

    #settingsIconBtn {
        font-size: 22px; /* Make settings icon smaller */
    }

    .compact-btn {
        margin: 1px 0; /* Reduced margin for bottom icons */
        width: 35px; /* Override tab-btn width */
        height: 35px; /* Override tab-btn height */
    }

    .tab-btn img {
      width: 20px;
      height: 20px;
      object-fit: contain; /* Ensure aspect ratio is maintained */
    }

    /* Main panel */
    .main-panel {
      display: flex;
      flex-direction: column;
      background: var(--panel);
      border-left: 1px solid var(--border);
      overflow: hidden; /* Prevent panel from growing with content */
    }
    .main-header {
      height: 56px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      padding: 0 12px;
      gap: 8px;
    }
    .main-header input[type="search"] {
      flex: 1;
      height: 36px;
      border-radius: 10px;
      border: 1px solid var(--border);
      padding: 0 12px;
      outline: none;
    }

    .list {
      flex: 1;
      overflow-y: auto;
    }
    .list-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 16px;
      border-bottom: 1px solid var(--border);
      cursor: pointer;
      overflow: hidden; /* Add this to prevent horizontal scroll */
    }
    .list-item:hover { background: #fafafa; }
    .avatar {
      width: 44px; height: 44px; border-radius: 14px;
      background: #ddd; display: grid; place-items: center;
      font-weight: bold; color: #555;
    }
    .meta {
      flex-grow: 1;
      flex-shrink: 1;
      flex-basis: 0; /* Allow it to shrink more aggressively */
      min-width: 0; /* Ensure it can shrink */
    }
    .name {
      font-weight: 700;
      font-size: 14px;
      white-space: nowrap;       /* Prevent text from wrapping */
      overflow: hidden;          /* Hide overflow content */
      text-overflow: ellipsis;   /* Display ellipsis for clipped text */
      min-width: 0; /* Allow flex item to shrink */
    }
    .preview {
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;     /* Prevent text from wrapping */
      overflow: hidden;        /* Hide overflow content */
      text-overflow: ellipsis; /* Display ellipsis for clipped text */
      max-width: 100%;         /* Ensure it respects parent width */
      display: block;          /* Ensure it takes up full width */
    }
    .time { font-size: 12px; color: var(--muted); }
    .online-user .name {
      color: green; /* Example: green color for online users */
      font-weight: bold;
    }

    .room-actions {
      margin-left: auto; /* Push to the right */
      display: flex;
      gap: 10px; /* Space between icons */
      align-items: center;
    }

    .room-actions i {
      cursor: pointer;
      font-size: 1em; /* Adjusted size to be smaller */
      color: var(--muted);
      transition: color 0.2s;
    }

    .room-actions i:hover {
      color: #555;
    }

    /* Settings Page Styles */
    .settings-page {
      padding: 20px;
      flex-grow: 1; /* Make it fill the space */
      display: flex; /* Use flexbox for layout */
      flex-direction: column;
    }
    .settings-header {
      display: flex;
      align-items: center;
      margin-bottom: 20px;
    }
    .settings-header h3 {
      margin: 0;
      flex-grow: 1;
    }
    .settings-tabs {
      display: flex;
      border-bottom: 1px solid var(--border);
      margin-bottom: 10px; /* Reduced by half */
    }
    .settings-tab {
      padding: 10px 15px;
      cursor: pointer;
      border-bottom: 2px solid transparent;
    }
    .settings-tab.active {
      border-bottom-color: var(--highlight);
      font-weight: bold;
    }
    .settings-content {
      flex-grow: 1;
    }
    .settings-pane {
      display: none; /* Hide panes by default */
    }
    .settings-pane.active {
      display: block; /* Show active pane */
    }
        .form-group {
        margin-bottom: 0.5rem; /* Reduced vertical spacing */
        position: relative; /* Positioning context for search results */
    }
    #memberSearchResults {
        position: absolute;
        top: 100%; /* Position directly below the parent form-group */
        left: 0;
        right: 0;
        z-index: 1000; /* Ensure it appears on top of other elements */
        background-color: #fff;
        border: 1px solid #ced4da;
        border-top: none;
        border-radius: 0 0 .25rem .25rem;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        max-height: 150px;
        overflow-y: auto;
        /* display: none; is handled by JS and existing styles */
    }
    .form-group label {
        display: block;
        margin-bottom: .25rem; /* Further reduced spacing */
    }
        .form-control {
        display: block;
        width: 100%;
        padding: .25rem .75rem; /* Reduced to 2/3 height */
        font-size: 1rem;
        line-height: 1.5;
        color: #495057;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid #ced4da;
        border-radius: .25rem;
    }
    .btn-secondary {
        color: #fff;
        background-color: #6c757d;
        border-color: #6c757d;
    }
  .meta {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    .preview {
      /* Removed flex-grow: 1; to allow name to shrink more */
    }
    .room-actions-invite {
      display: flex;
      gap: 5px;
      margin-left: auto;
    }
    .room-actions-invite .btn {
      font-size: 0.75em;
      padding: 2px 5px;
    }
  .room-type-display {
      font-size: 12px; /* Smaller font size */
      color: var(--muted); /* Muted color */
      width: 100%; /* Ensure it takes full width to force new line */
    }